/* Games (src/games/*.js), built from the workshop's parts (DESIGN.md): a warm metal instrument on the desk, a
   dot-matrix screen, real keycaps, a lamp, and a thermal slip that prints at the end. Phone first. */

.mmx { --dots: "Doto", ui-monospace, monospace; --scr: #131210; --scr-dim: rgba(255, 140, 90, .5); --bidc: #7EA6F0;
  max-width: 560px; margin: 0 auto; color: var(--ink); font-family: var(--sans); outline: none; }
.mmx [hidden] { display: none !important; }
.mmx svg { display: block; }

/* the ruler: one notch per round, the current one named above it (no counter) */
.mmx-ruler { margin: 0 2px 14px; }
.mmx-rname { display: block; margin-bottom: 6px; font-size: 13px; color: var(--ink-3); }
.mmx-rline { position: relative; display: flex; justify-content: space-between; }
.mmx-rline::before { content: ""; position: absolute; left: 22px; right: 22px; top: 21px; border-top: 1.5px solid var(--rule-2); }
.mmx-rline button { position: relative; display: grid; justify-items: center; gap: 5px; width: 44px; padding: 13px 0 4px; background: none; border: 0; cursor: pointer; }
.mmx-rline button i { width: 15px; height: 15px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--ink-3); transition: transform .16s var(--ease); }
.mmx-rline button.done i { background: var(--ink); border-color: var(--ink); }
.mmx-rline button[aria-current="true"] i { background: var(--orange); border-color: var(--orange); transform: scale(1.15); box-shadow: 0 0 0 4px rgba(255, 90, 31, .16); }
.mmx-rline button:disabled { cursor: default; opacity: .4; }
.mmx-rline em { display: flex; gap: 3px; font-style: normal; }
.mmx-rline em b { width: 5px; height: 5px; border-radius: 50%; background: var(--rule-2); }
.mmx-rline em b.on { background: var(--orange); }

/* the daily market (src/practice.js): one level on one fixed deal, so no ruler to pick a round */
.mmx-daily .mmx-ruler { display: none; }

/* the brief: flat and calm, one italic word in the heading */
.mmx-brief { padding: 0 2px 16px; }
.mmx-h { margin: 0; font: 380 30px/1.05 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.02em; }
.mmx-h i { font-style: italic; }
.mmx-brief p { margin: 10px 0 0; max-width: 62ch; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.mmx-brief .mmx-goal { color: var(--ink); font-weight: 500; }

/* the instrument */
.mmx-inst {
  padding: 14px 14px 16px; border-radius: 18px;
  background: linear-gradient(170deg, #E4E1DA 0%, #D6D2CA 55%, #CBC7BE 100%);
  box-shadow: var(--lift-2), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(0, 0, 0, .08), 0 0 0 1px rgba(60, 48, 30, .12);
}
.mmx-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mmx-grill { width: 54px; height: 30px; border-radius: 6px; background-image: radial-gradient(circle, rgba(40, 34, 26, .55) 1.6px, transparent 2px); background-size: 7px 7px; opacity: .65; }
.mmx-id { line-height: 1.1; }
.mmx-id b { display: block; font: 700 12px var(--sans); letter-spacing: .3em; color: #4A463F; }
.mmx-id small { display: block; margin-top: 3px; font-size: 11.5px; color: #7A756C; }
.mmx-stars { display: flex; gap: 5px; margin-left: auto; }
.mmx-stars i { width: 9px; height: 9px; border-radius: 50%; background: #8F887C; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3); transition: background-color .5s var(--ease), box-shadow .5s var(--ease); }
.mmx-stars i.on { background: #FF6A2B; box-shadow: 0 0 8px rgba(255, 90, 31, .8); }
.mmx-lamp { flex: none; width: 32px; height: 32px; border-radius: 50%; position: relative; background: radial-gradient(circle at 50% 40%, #CFCAC1, #B5B0A6); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .6); }
.mmx-lamp i { position: absolute; inset: 8px; border-radius: 50%; background: #6E665A; transition: background-color .9s var(--ease), box-shadow .9s var(--ease); }
.mmx-lamp.run i { background: #D0652C; box-shadow: 0 0 10px rgba(255, 90, 31, .45); animation: mmx-pulse .9s ease-in-out infinite; }
.mmx-lamp.pass i { background: #23885A; box-shadow: 0 0 14px rgba(35, 136, 90, .85), 0 0 30px rgba(35, 136, 90, .35); }
.mmx-lamp.fail i { background: #D23F2A; box-shadow: 0 0 10px rgba(210, 63, 42, .6); }

/* the dot-matrix screen */
.mmx-screen {
  position: relative; overflow: hidden; padding: 9px 12px 10px; border-radius: 10px; background: var(--scr);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .55);
}
.mmx-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(255, 255, 255, .025) 2px 3px); }
.mmx-stop { display: flex; justify-content: space-between; gap: 10px; font: 11.5px var(--mono); color: var(--scr-dim); font-variant-numeric: tabular-nums; }
.mmx-stop b { font: 800 17px var(--dots); color: #FF5A1F; text-shadow: 0 0 6px rgba(255, 90, 31, .45); margin-left: 4px; vertical-align: -1px; }
.mmx-stop b.up { color: #5FD69A; text-shadow: 0 0 6px rgba(95, 214, 154, .45); }
.mmx-stop b.down { color: #FF6A5A; text-shadow: 0 0 6px rgba(255, 106, 90, .45); }
.mmx-stop span:nth-child(2) { align-self: center; font-size: 10.5px; opacity: .8; }
.mmx-field { position: relative; height: 236px; margin-top: 6px; }
@media (min-width: 700px) { .mmx-field { height: 280px; } }
.mmx-ladder span { position: absolute; left: 0; right: 0; transform: translateY(-50%); font: 600 11px var(--mono); color: rgba(255, 140, 90, .28); }
.mmx-ladder span::after { content: ""; position: absolute; left: 30px; right: 0; top: 50%; border-top: 1px dotted rgba(255, 255, 255, .07); }
.mmx-band { position: absolute; left: 34px; right: 74px; background: rgba(255, 255, 255, .045); transition: top .22s var(--ease), height .22s var(--ease); }
.mmx-line { position: absolute; left: 34px; right: 74px; height: 0; transition: top .22s var(--ease), opacity .2s; }
.mmx-line::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; border-radius: 2px; }
.mmx-line span { position: absolute; left: 6px; white-space: nowrap; font: 11px var(--mono); }
.mmx-line b { font: 800 16px var(--dots); margin-left: 4px; vertical-align: -1px; }
.mmx-line.ask::before { background: #FF5A1F; box-shadow: 0 0 8px rgba(255, 90, 31, .7); }
.mmx-line.ask span { bottom: 4px; color: rgba(255, 140, 90, .7); }
.mmx-line.ask b { color: #FF7A45; text-shadow: 0 0 6px rgba(255, 90, 31, .5); }
.mmx-line.bid::before { background: var(--bidc); box-shadow: 0 0 8px rgba(126, 166, 240, .6); }
.mmx-line.bid span { top: 4px; color: rgba(150, 185, 245, .75); }
.mmx-line.bid b { color: #9DBCF5; text-shadow: 0 0 6px rgba(126, 166, 240, .45); }
.mmx-line.real { left: 30px; right: 4px; z-index: 1; }
.mmx-line.real::before { height: 0; top: 0; border-top: 2px dotted rgba(246, 241, 231, .7); background: none; box-shadow: none; }
.mmx-line.real span { left: 10px; bottom: 3px; color: rgba(246, 241, 231, .6); }
.mmx-line.real b { color: #F6F1E7; font-size: 14px; }
.mmx-line.flash::before { animation: mmx-flash .45s var(--ease); }
.mmx-field.pulled .mmx-line.ask, .mmx-field.pulled .mmx-line.bid, .mmx-field.pulled .mmx-band { opacity: .18; }
.mmx-lane { position: absolute; inset: 0; pointer-events: none; }
/* a trader: a bright blip that comes in from the right edge and meets your price */
.mmx-t { position: absolute; right: -24px; width: 12px; height: 12px; margin-top: -6px; opacity: 0; transition: right .38s var(--enter), top .3s var(--ease), opacity .25s; }
.mmx-t.in { right: 22px; opacity: 1; }
.mmx-t.hit { right: 66px; }
.mmx-t.out { opacity: 0; }
.mmx-t i { display: block; width: 12px; height: 12px; border-radius: 3px; background: #F6F1E7; box-shadow: 0 0 10px rgba(246, 241, 231, .6); }
.mmx-t.ask i { background: #FF7A45; box-shadow: 0 0 10px rgba(255, 90, 31, .8); }
.mmx-t.bid i { background: #9DBCF5; box-shadow: 0 0 10px rgba(126, 166, 240, .8); }
.mmx-t.pass i { background: #6E665A; box-shadow: none; }
.mmx-t span { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 11px var(--mono); color: rgba(246, 241, 231, .75); }
.mmx-t.pass span { color: rgba(246, 241, 231, .45); }
.mmx-pop { position: absolute; right: 120px; margin-top: -10px; font: 800 18px var(--dots); animation: mmx-rise 1.05s var(--ease) forwards; }
.mmx-pop.up { color: #5FD69A; text-shadow: 0 0 8px rgba(95, 214, 154, .55); }
.mmx-pop.down { color: #FF6A5A; text-shadow: 0 0 8px rgba(255, 106, 90, .55); }
.mmx-news { position: absolute; top: 8px; right: 8px; z-index: 2; font: 800 15px var(--dots); color: #FF5A1F; text-shadow: 0 0 8px rgba(255, 90, 31, .6); }
.mmx-news.on { animation: mmx-blink .3s steps(2) 4; }

/* holding: a row of LEDs either side of zero, engraved short and long */
.mmx-leds { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 12px 0 2px; }
.mmx-leds small { font-size: 11px; color: #7A756C; margin: 0 4px; }
.mmx-leds i { width: 9px; height: 9px; border-radius: 50%; background: #9C958A; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3); transition: background-color .2s, box-shadow .2s; }
.mmx-leds i.long { background: #5C8FE8; box-shadow: 0 0 7px rgba(92, 143, 232, .8); }
.mmx-leds i.short { background: #FF6A2B; box-shadow: 0 0 7px rgba(255, 90, 31, .8); }
.mmx-leds s { width: 2px; height: 16px; background: #7A756C; border-radius: 1px; }
.mmx-leds.limit i.long, .mmx-leds.limit i.short { background: #D23F2A; box-shadow: 0 0 8px rgba(210, 63, 42, .8); animation: mmx-pulse .7s ease-in-out infinite; }

/* keys (the workshop's keycaps) */
.mmx-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.mmx-run { display: flex; gap: 8px; margin-top: 10px; }
.mmx-key {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 6px 10px;
  border: 0; border-radius: 9px; font: 500 14px var(--sans); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform .09s var(--ease), box-shadow .14s var(--ease), filter .16s var(--ease);
}
.mmx-keys .mmx-key { flex-direction: column; gap: 3px; font-size: 13px; }
.mmx-key .g svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mmx-key.wide { flex: 1; font-size: 15px; }
.mmx-key:active { transform: translateY(2px); }
.mmx-key.light {
  background: linear-gradient(#F7F5F0, #E9E6DF); color: var(--ink);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(60, 48, 30, .14);
}
.mmx-key.light:active, .mmx-key.light[aria-pressed="true"] { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12), inset 0 1px 2px rgba(0, 0, 0, .08); transform: translateY(2px); background: linear-gradient(#ECE9E2, #E4E0D8); }
.mmx-key.light[aria-pressed="true"] { color: #C2410C; }
.mmx-key.dark {
  color: #F6F3EC; background: linear-gradient(#3A3936, #262523);
  box-shadow: inset 0 -3px 0 #171614, inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .18), 0 4px 10px rgba(0, 0, 0, .12);
}
.mmx-key.dark:hover { filter: brightness(1.08); }
.mmx-key.dark:active { box-shadow: inset 0 -1px 0 #171614, inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 1px rgba(0, 0, 0, .2); }
.mmx-key .led { width: 7px; height: 7px; border-radius: 50%; background: #FF5A1F; box-shadow: 0 0 6px rgba(255, 90, 31, .7); }
.mmx-key:disabled { opacity: .45; cursor: default; transform: none; }

.mmx-say { min-height: 1.6em; margin: 14px 2px 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.mmx.ended .mmx-say { margin-top: 10px; }

/* the slip the machine prints when a round ends */
.mmx-out { margin-top: 2px; padding: 0 14px; }
.mmx-slip {
  position: relative; padding: 24px 18px 28px; background: #FFFEFA; color: #2A2723;
  font: 12px/1.55 var(--mono); letter-spacing: .02em;
  box-shadow: 0 1px 2px rgba(40, 30, 20, .10), 0 8px 18px rgba(40, 30, 20, .10);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 7px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 7px repeat-x;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .05), transparent 18px);
  animation: mmx-print 1.6s steps(18, end) both;
}
.mmx-slip .sl-top { text-align: center; font-size: 10.5px; letter-spacing: .14em; color: #6E685E; }
.mmx-slip .sl-k { margin-top: 8px; font-size: 10.5px; letter-spacing: .16em; color: #6E685E; }
.mmx-slip .sl-rule { height: 0; margin: 12px 0; border-top: 1.5px dashed rgba(42, 39, 35, .35); }
.mmx-slip .sl-row { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.mmx-slip .sl-row i { flex: 1; border-bottom: 1.5px dotted rgba(42, 39, 35, .4); transform: translateY(-3px); }
.mmx-slip .sl-part { margin: 2px 0 8px; font: 800 30px/1.1 var(--dots); color: #1D1C1A; }
.mmx-slip .sl-chart { width: 100%; height: 96px; margin-top: 12px; }
.mmx-slip .c-ask, .mmx-slip .c-bid, .mmx-slip .c-real { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.mmx-slip .c-ask { stroke: #2A2723; stroke-width: 1.6; }
.mmx-slip .c-bid { stroke: #2A2723; stroke-width: 1.6; stroke-dasharray: 5 3; }
.mmx-slip .c-real { stroke: #2A2723; stroke-width: 1.2; stroke-dasharray: 1 3; stroke-linecap: round; }
.mmx-slip .c-dot { fill: #2A2723; }
.mmx-slip .c-knew { fill: #FFFEFA; stroke: #2A2723; stroke-width: 1.6; }
.mmx-slip .sl-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 10.5px; color: #6E685E; }
.mmx-slip .sl-key i { display: inline-block; width: 16px; margin-right: 5px; vertical-align: 3px; border-top: 1.6px solid #2A2723; }
.mmx-slip .sl-key .k-bid { border-top-style: dashed; }
.mmx-slip .sl-key .k-real { border-top: 1.6px dotted #2A2723; }
.mmx-slip .sl-key .k-knew { width: 8px; height: 8px; border: 1.6px solid #2A2723; border-radius: 50%; vertical-align: 0; }
.mmx-slip .sl-lamps { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.mmx-slip .sl-lamps b { width: 11px; height: 11px; border-radius: 50%; border: 1.6px solid #2A2723; }
.mmx-slip .sl-lamps b.on { background: #2A2723; }
.mmx-slip .sl-lamps span { margin-left: 6px; }
.mmx-slip .sl-now { margin: 0; font: 13px/1.55 var(--sans); letter-spacing: 0; color: #3A3732; }
.mmx-after { display: flex; gap: 8px; margin-top: 14px; }
.mmx-foot { margin: 16px 2px 0; font-size: 12.5px; color: var(--ink-3); }

[data-theme="dark"] .mmx-inst { background: linear-gradient(170deg, #3B3935 0%, #33312D 55%, #2C2A27 100%); box-shadow: var(--lift-2), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(0, 0, 0, .4); }
[data-theme="dark"] .mmx-id b { color: #CFC9BE; }
[data-theme="dark"] .mmx-id small, [data-theme="dark"] .mmx-leds small { color: #9A9387; }
[data-theme="dark"] .mmx-key.light { background: linear-gradient(#4A4743, #3D3A36); color: #EDE8DF; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .3); }
[data-theme="dark"] .mmx-key.light[aria-pressed="true"] { color: #FF8A5B; }

@keyframes mmx-pulse { 50% { box-shadow: 0 0 16px rgba(255, 90, 31, .75), 0 0 30px rgba(255, 90, 31, .3); } }
@keyframes mmx-flash { 0% { filter: none; } 35% { filter: brightness(1.8); transform: scaleY(2); } 100% { filter: none; } }
@keyframes mmx-rise { from { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } to { opacity: 0; transform: translateY(-24px); } }
@keyframes mmx-blink { 50% { opacity: 0; } }
@keyframes mmx-print { from { transform: translateY(-101%); } }
@media (prefers-reduced-motion: reduce) {
  .mmx *, .mmx *::before, .mmx *::after { animation: none !important; transition: none !important; }
}