/* ============================================================
   namebadge — the name-badge VENDING MACHINE
   Greyscale machine + a single GOLD accent (the ✓ coin):
   faceless grey silhouette → GOLD when named. One per X account.
   Tokens first.
   ============================================================ */

:root {
  --field:        #E7E9EC;   /* light cool-grey page */
  --silhouette:   #AEB4BC;   /* default-avatar grey (rest) */
  --sil-slate:    #BFC4CB;
  --graphite:     #4B4F55;   /* dark structural grey */
  --fb-blue:      #4B4F55;   /* (kept name) graphite primary */
  --fb-blue-2:    #3F4348;
  --fb-blue-dark: #33363B;
  --fb-blue-deep: #25272B;
  --sky-tint:     #F1F2F4;
  --hairline:     #C4C8CD;
  --cyan-spark:   #F4C24B;   /* (kept name) GOLD accent */
  --gold-seal:    #F4C24B;
  --gold-deep:    #CF9A2A;
  --vend-amber:   #F4C24B;
  --vend-amber-dk:#CF9A2A;
  --status-green: #E0A82E;   /* (kept name) AVAILABLE = gold */
  --danger:       #E06A5C;
  --new-flash:    #FFF6DD;
  --ink:          #23262B;
  --ink-muted:    #6A6E74;

  --font-display: 'Montserrat', 'Segoe UI', Tahoma, 'Lucida Grande', sans-serif;
  --font-body:    'Lato', 'Segoe UI', Tahoma, 'Lucida Grande', sans-serif;
  --font-lcd:     ui-monospace, 'Cascadia Code', 'Segoe UI Mono', Consolas, monospace;

  --t-caption: 12px; --t-small: 13px; --t-body: 15px; --t-lead: 18px;
  --t-h3: 21px; --t-h2: clamp(22px, 4.6vw, 26px); --t-display: clamp(26px, 5.6vw, 32px); --t-control: 16px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s-section: clamp(56px, 10vw, 96px);
  --maxw: 1080px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  --e1: 0 1px 2px rgba(40,42,46,.10);
  --e2: 0 10px 28px -10px rgba(40,42,46,.28);
  --e3: 0 26px 60px -20px rgba(30,32,36,.55);
  --gloss: inset 0 1px 0 rgba(255,255,255,.65);

  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.4,.5,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --dur-1: 140ms; --dur-2: 240ms; --dur-3: 320ms;

  --focus-ring: 0 0 0 3px rgba(244,194,75,.55);
  --ring-circumference: 653.45;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-body); font-size: var(--t-body); color: var(--ink);
  background: radial-gradient(1100px 700px at 50% -6%, #EFF1F3 0%, var(--field) 48%, #D5D8DC 100%);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
::selection { background: rgba(244,194,75,.32); }
* { scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

:focus { outline: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, .demo-connect input:focus-visible {
  outline: 2px solid var(--gold-deep); outline-offset: 2px; border-radius: var(--r-sm);
}
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 80; background: var(--graphite); color: #fff;
  font-weight: 700; font-size: var(--t-small); padding: 10px 16px; border-radius: var(--r-md);
  transform: translateY(-150%); transition: transform var(--dur-2) var(--ease-out); text-decoration: none;
}
.skip-link:focus-visible { transform: translateY(0); }

/* ───────────────────────── top bar ───────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(16px, 4vw, 34px);
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.topbar.scrolled {
  background: rgba(231,233,236,.80);
  -webkit-backdrop-filter: blur(12px) saturate(1.05); backdrop-filter: blur(12px) saturate(1.05);
  border-bottom-color: var(--hairline);
}
.wordmark, .foot-wordmark {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-lead); letter-spacing: -0.01em; color: var(--fb-blue-dark); text-decoration: none;
}
.wordmark-dot { width: 13px; height: 13px; border-radius: 50%; background: linear-gradient(180deg, #ffe6a6, var(--gold-seal)); box-shadow: var(--gloss), 0 1px 2px rgba(207,154,42,.5); }
.topbar-pill { font-size: var(--t-caption); font-weight: 700; color: var(--fb-blue-dark); background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 5px 13px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 18px;
  border-radius: var(--r-md); font-family: var(--font-body); font-weight: 700; font-size: var(--t-small);
  color: #fff; text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, #5a5e64, var(--graphite) 55%, var(--fb-blue-dark)); border: 1px solid var(--fb-blue-deep);
  box-shadow: var(--gloss), 0 6px 16px -6px rgba(40,42,46,.45);
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn:hover { background: linear-gradient(180deg, #4f5359, var(--fb-blue-2) 55%, var(--fb-blue-dark)); }
.btn:active { transform: translateY(1px); }
.ghost-btn { background: none; border: 0; color: var(--ink-muted); font-family: var(--font-body); font-size: var(--t-small); cursor: pointer; border-radius: var(--r-sm); padding: 6px 10px; }
.ghost-btn:hover { color: var(--ink); }

/* ═════════════════════════ THE MACHINE ═════════════════════════ */
.hero { min-height: 100svh; display: grid; place-items: center; padding: 92px 16px 48px; position: relative; perspective: 1200px; }

.machine {
  width: min(440px, 94vw);
  padding: 16px 16px 18px;
  display: grid; gap: 12px;
  background: linear-gradient(180deg, #BCC0C4 0%, #9DA0A5 32%, #7E8186 80%, #64676C 100%);
  border: 1px solid #585B60;
  border-radius: 26px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 2px rgba(255,255,255,.08), var(--e3);
  position: relative;
}
.machine::before, .machine::after {
  content: ""; position: absolute; top: 16px; bottom: 16px; width: 3px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0)); pointer-events: none;
}
.machine::before { left: 6px; } .machine::after { right: 6px; }

.m-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 0; }
.m-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: var(--t-lead); color: #2c2e31; letter-spacing: -0.01em; }
.m-brand .wordmark-dot { background: linear-gradient(180deg, #ffe6a6, var(--gold-seal)); box-shadow: 0 0 8px rgba(244,194,75,.85); }
.m-soon { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(40,42,46,.6); }
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-seal); box-shadow: 0 0 7px rgba(244,194,75,.95); animation: led 1.6s var(--ease-io) infinite; }
@keyframes led { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* glass case — dark, like the reference window */
.m-glass {
  position: relative; overflow: hidden; min-height: 268px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #35383C, #26282C);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 2px 16px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.30);
  display: grid; align-items: center; padding: 18px;
}
.m-stock { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); align-content: space-between; padding: 16px 18px 22px; opacity: .55; }
.m-stock .ssil { width: 100%; }
.m-stock .ssil svg { width: 24px; height: 24px; display: block; margin: 0 auto; fill: #8E9298; }
.m-stock .ssil:nth-child(-n+5) svg { opacity: .65; transform: scale(.92); }
.m-shelf { position: relative; z-index: 1; display: grid; justify-items: center; }
.avatar { width: 148px; aspect-ratio: 1; position: relative; cursor: text; transition: transform var(--dur-2) var(--ease-out), opacity .3s var(--ease-out); will-change: transform; }
.avatar-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.coil { width: 64%; height: 13px; margin-top: 12px; border-radius: 999px;
  background: repeating-linear-gradient(115deg, #6f7378 0 4px, #b9bdc3 4px 9px);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.3); opacity: .9; }
.machine.vending .coil { animation: coilspin .7s linear 2; }
@keyframes coilspin { from { background-position: 0 0; } to { background-position: 44px 0; } }
.m-glare { position: absolute; inset: 0 -25%; pointer-events: none; border-radius: inherit; will-change: transform;
  background: linear-gradient(118deg, transparent 34%, rgba(255,255,255,.16) 44%, rgba(255,255,255,.03) 52%, transparent 60%); }

/* the becoming: grey → GOLD */
.sil { --sil-fill: var(--silhouette); }
.sil-fill { fill: var(--sil-fill); transition: fill .55s var(--ease-out); }
.sil.named { --sil-fill: var(--gold-seal); }
.avatar-svg .sil { transform-box: fill-box; transform-origin: center; }
.breathe .avatar-svg { animation: breathe 4s var(--ease-io) infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.012); } }
.ring-track { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 3; }
.ring { fill: none; stroke: #9499a0; stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: var(--ring-circumference); stroke-dashoffset: calc(var(--ring-circumference) * (1 - var(--ring-progress, 0)));
  transform: rotate(-90deg); transform-origin: 110px 110px; transition: stroke-dashoffset .5s var(--ease-out), stroke .35s ease; }
.sil.named ~ .ring, .ring.locked { stroke: var(--gold-seal); }
.spark { fill: none; stroke: var(--gold-seal); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.spark.flare { animation: flare .46s var(--ease-out) forwards; }
@keyframes flare { 0% { opacity:.85; transform: scale(.5); stroke-width:8; } 100% { opacity:0; transform: scale(1.5); stroke-width:0; } }
.machine.vending .m-shelf .avatar { animation: vendDrop .5s var(--ease-io) forwards; }
@keyframes vendDrop { 0% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(8px); } 100% { transform: translateY(40px); opacity: 0; } }

/* LCD readout — dark screen with a dashed frame (reference detail) */
.lcd {
  position: relative; overflow: hidden; border-radius: var(--r-md); padding: 14px 16px;
  background: linear-gradient(180deg, #15161a, #0e0f12);
  border: 1px solid #050608; box-shadow: inset 0 2px 10px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.18);
  transition: box-shadow var(--dur-2) var(--ease-out), transform 90ms var(--ease-out);
}
.lcd::before { content: ""; position: absolute; inset: 6px; border: 2px dashed rgba(244,236,214,.30); border-radius: 8px; pointer-events: none; }
.lcd::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); }
.lcd-name-wrap { position: relative; min-height: 1.2em; display: grid; place-items: center; }
.name-render {
  font-family: var(--font-lcd); font-weight: 700; font-size: var(--t-display); letter-spacing: .02em;
  color: var(--gold-seal); text-shadow: 0 0 10px rgba(244,194,75,.5); line-height: 1.12; min-height: 1.12em;
  white-space: pre; pointer-events: none; display: inline-flex; align-items: center; flex-wrap: nowrap; max-width: 100%; text-transform: uppercase;
}
.lcd.len-long .name-render { font-size: 24px; } .lcd.len-xlong .name-render { font-size: 19px; }
.name-render .ghost { color: rgba(244,236,214,.35); font-weight: 700; text-shadow: none; }
.name-render .nm-letters { display: inline-flex; align-items: center; }
.name-render .caret { display: inline-block; width: .55em; height: 1em; margin-left: 3px; background: var(--gold-seal); box-shadow: 0 0 8px var(--gold-seal); opacity: 0; align-self: center; transform: translateY(.04em); }
.lcd:has(.name-input:focus) .name-render .caret, .lcd.focused .name-render .caret { animation: caretBlink 1.06s steps(1) infinite; }
@keyframes caretBlink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
.name-render .ltr { display: inline-block; animation: etchIn .22s var(--ease-spring) both; }
.name-render .ltr.space { width: .4em; }
@keyframes etchIn {
  0%   { opacity: 0; transform: translateY(7px) scale(1.3); }
  60%  { opacity: 1; transform: translateY(-2px) scale(.95); }
  100% { opacity: 1; transform: none; }
}
.name-input { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; outline: none;
  text-align: center; font-family: var(--font-lcd); font-weight: 700; font-size: var(--t-display); letter-spacing: .02em; color: transparent; caret-color: transparent; text-transform: uppercase; }
.name-input:focus-visible { outline: none; }
.lcd:has(.name-input:focus-visible) { box-shadow: inset 0 2px 10px rgba(0,0,0,.7), 0 0 0 3px rgba(244,194,75,.7); }
.lcd-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-family: var(--font-lcd); font-size: var(--t-caption); position: relative; }
.handle { color: rgba(244,236,214,.7); font-weight: 700; opacity: 0; transition: opacity var(--dur-2) var(--ease-out); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.handle.show { opacity: 1; }
.lcd-status { color: rgba(255,255,255,.5); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: color var(--dur-2) var(--ease-out); }
.lcd-status.ok { color: var(--gold-seal); text-shadow: 0 0 8px rgba(244,194,75,.5); }
.lcd-status.vend { color: var(--gold-seal); text-shadow: 0 0 8px rgba(244,194,75,.5); }
.lcd-status.taken { color: var(--danger); text-shadow: 0 0 8px rgba(224,106,92,.5); }

/* control panel */
.m-panel { display: grid; gap: 8px; padding: 0 2px; }
.m-account { display: grid; }

/* connect X (stays black — X brand) */
.connect-x {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px;
  position: relative; overflow: hidden;
  border-radius: var(--r-md); cursor: pointer; background: #0c0c0d; color: #fff; border: 1px solid #000; border-bottom-width: 3px;
  font-family: var(--font-body); font-weight: 700; font-size: var(--t-control);
  box-shadow: var(--gloss), 0 6px 14px -6px rgba(0,0,0,.6);
  transition: transform var(--dur-1) var(--ease-spring), filter var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.connect-x:hover { filter: brightness(1.25); }
.connect-x:active { transform: translateY(2px); border-bottom-width: 1px; }
.connect-x .x-logo { width: 16px; height: 16px; fill: #fff; }
.connect-x.armed { animation: connectArm 2s var(--ease-io) infinite; }
@keyframes connectArm { 0%,100% { box-shadow: var(--gloss), 0 6px 14px -6px rgba(0,0,0,.6); } 50% { box-shadow: var(--gloss), 0 4px 22px -2px rgba(244,194,75,.7); } }

/* connected account chip */
.acct { display: inline-flex; align-items: center; gap: 9px; justify-self: stretch; background: rgba(0,0,0,.14); border: 1px solid rgba(0,0,0,.18); border-radius: var(--r-pill); padding: 5px 8px 5px 5px; }
.acct-av { width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.2); object-fit: cover; flex: 0 0 auto; }
.acct-av:not([src]), .acct-av[src=""] { display: none; }
.acct-handle { color: #232629; font-weight: 700; font-size: var(--t-small); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-out { background: none; border: 0; color: rgba(35,38,41,.55); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 6px; flex: 0 0 auto; }
.acct-out:hover { color: #232629; }

/* demo connect */
.demo-connect { display: flex; gap: 8px; width: 100%; }
.demo-connect input { flex: 1 1 auto; min-width: 0; height: 46px; border-radius: var(--r-md); border: 1px solid var(--fb-blue-deep); background: #f4f5f6; padding: 0 14px; font-size: var(--t-control); color: var(--ink); outline: none; box-shadow: inset 0 1px 3px rgba(0,0,0,.2); }
.demo-connect .btn { height: 46px; }

/* task gate */
.tasks { background: rgba(0,0,0,.14); border: 1px solid rgba(0,0,0,.18); border-radius: var(--r-md); padding: 10px 12px; display: grid; gap: 8px; }
.tasks-title { margin: 0; font-size: var(--t-caption); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(40,42,46,.72); }
.task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.task-row { display: flex; align-items: center; gap: 10px; }
.t-tick { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(40,42,46,.35); flex: 0 0 auto; display: grid; place-items: center; transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.task-row.done .t-tick { background: var(--gold-seal); border-color: var(--gold-deep); }
.task-row.done .t-tick::after { content: "✓"; color: #3a2a05; font-size: 11px; font-weight: 900; line-height: 1; }
.t-label { flex: 1 1 auto; font-size: var(--t-small); color: #23262b; }
.t-label b { color: #23262b; }
.task-row.done .t-label { color: rgba(35,38,43,.55); text-decoration: line-through; }
.t-btn { flex: 0 0 auto; height: 30px; padding: 0 12px; border-radius: var(--r-sm); cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: var(--t-small); background: #0c0c0d; color: #fff; border: 1px solid #000; transition: filter var(--dur-1) var(--ease-out); }
.t-btn:hover { filter: brightness(1.3); }
.t-btn.confirm { background: var(--gold-seal); color: #3a2a05; border-color: var(--gold-deep); }
.task-row.done .t-btn { display: none; }

.claim-form { display: flex; }
.dispense-btn {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px;
  position: relative; overflow: hidden;
  border-radius: var(--r-md); font-family: var(--font-body); font-weight: 700; font-size: var(--t-control);
  letter-spacing: .02em; color: #3A2A05; cursor: pointer;
  background: linear-gradient(180deg, #ffe09a, var(--gold-seal) 55%, var(--gold-deep));
  border: 1px solid #b8841a; border-bottom-width: 3px; box-shadow: var(--gloss), 0 6px 14px -6px rgba(207,154,42,.6);
  transition: transform var(--dur-1) var(--ease-spring), filter var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.dispense-btn .dispense-arrow { font-size: 11px; opacity: .8; }
.dispense-btn:disabled { background: linear-gradient(180deg, #aeb1b6, #93969c); border-color: #7c7f85; color: #f3f3f3; box-shadow: none; cursor: default; opacity: .7; }
.dispense-btn:not(:disabled):hover { filter: brightness(1.05); }
.dispense-btn:not(:disabled):active { transform: translateY(2px); border-bottom-width: 1px; }
.dispense-btn.armed:not(:disabled) { animation: arm 2s var(--ease-io) infinite; }
@keyframes arm { 0%,100% { box-shadow: var(--gloss), 0 6px 14px -6px rgba(207,154,42,.6); } 50% { box-shadow: var(--gloss), 0 4px 22px -2px rgba(244,194,75,.95); } }

.claim-error { color: #ffd2cd; font-size: var(--t-small); min-height: 16px; margin: 0; font-weight: 700; text-align: center; }
.m-meta { display: flex; align-items: center; justify-content: center; gap: 10px; }
.price { font-family: var(--font-display); font-weight: 700; font-size: var(--t-body); color: #fff; letter-spacing: .06em; }
.m-fine { font-size: var(--t-caption); color: rgba(255,255,255,.6); }

/* dispense tray */
.m-tray { position: relative; margin-top: 0; padding: 10px; border-radius: var(--r-md);
  background: linear-gradient(180deg, #2b2d31, #1b1d20); box-shadow: inset 0 6px 16px rgba(0,0,0,.6); }
.tray-lip { position: absolute; top: -1px; left: 12%; right: 12%; height: 5px; border-radius: 999px; background: rgba(0,0,0,.5); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.tray-slot { display: grid; place-items: center; min-height: 34px; }
.tray-idle { color: rgba(255,255,255,.32); font-size: var(--t-caption); letter-spacing: .14em; text-transform: uppercase; }
.m-tray.filled .tray-idle { display: none; }

.claim-done { width: 100%; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 14px; box-shadow: var(--e1); text-align: center; animation: doneIn .42s var(--ease-spring) both; }
.claim-done.flash { background: var(--new-flash); transition: background 1.2s ease-out; }
@keyframes doneIn { from { opacity:0; transform: translateY(8px) scale(.97); } to { opacity:1; transform: none; } }
/* the gold "approved" coin/plaque */
.seal { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; overflow: hidden;
  background: linear-gradient(180deg, #ffe28a, var(--gold-seal) 55%, var(--gold-deep)); color: #4a3a05; border: 1px solid #b8841a;
  border-radius: var(--r-md); padding: 10px 24px; margin-bottom: 10px; box-shadow: var(--gloss), 0 6px 16px -4px rgba(207,154,42,.6); animation: sealPop .5s var(--ease-spring) both; }
@keyframes sealPop { 0% { transform: scale(0); opacity:0; } 60% { transform: scale(1.05); } 100% { transform: scale(1); opacity:1; } }
.seal::after { content:""; position:absolute; top:0; left:-60%; width:50%; height:100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.8), transparent); transform: skewX(-18deg); animation: foil .9s ease-out .25s 1 both, foilLoop 5s ease-in-out 2.4s infinite; }
@keyframes foil { from { left:-60%; } to { left:130%; } }
@keyframes foilLoop { 0% { left:-60%; } 14% { left:130%; } 100% { left:130%; } }
.seal-label { font-size: var(--t-caption); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; opacity: .85; }
.seal-num { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h2); line-height: 1; }
.done-name { font-family: var(--font-display); font-weight: 700; font-size: var(--t-body); color: var(--fb-blue-dark); margin: 0 0 4px; }
.done-name .nm { color: var(--gold-deep); }
.tray-actions { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }

/* the badge that drops into the tray (the gold "minted" coin) */
.drop-card { position: fixed; z-index: 55; border-radius: 50%; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 38%, #EEF0F2, #D2D5D9); border: 3px solid var(--gold-seal);
  box-shadow: 0 4px 10px -6px rgba(30,32,36,.4); display: grid; place-items: center; }
.drop-card svg { width: 64%; height: 64%; }
.drop-card svg path, .drop-card svg circle { fill: var(--gold-seal); }
.drop-card.landed { transition: opacity .18s ease-out; opacity: 0; }
@keyframes dropFall {
  0%   { transform: translateY(0) rotate(0) scaleY(1); box-shadow: 0 4px 10px -6px rgba(30,32,36,.4); }
  58%  { transform: translateY(var(--dy)) rotate(8deg); }
  70%  { transform: translateY(calc(var(--dy) - 12px)) rotate(-3deg); }
  82%  { transform: translateY(var(--dy)) scaleY(.84) scaleX(1.12); box-shadow: 0 14px 22px -8px rgba(30,32,36,.55); }
  91%  { transform: translateY(calc(var(--dy) - 4px)) scaleY(1.03); }
  100% { transform: translateY(var(--dy)) scaleY(1); box-shadow: 0 4px 10px -6px rgba(30,32,36,.4); }
}

/* ───────────────────────── freshly vended (field) ───────────────────────── */
.field { max-width: var(--maxw); margin: 0 auto; padding: var(--s-section) 16px; text-align: center; }
.counter { display: inline-flex; align-items: baseline; gap: 9px; flex-wrap: wrap; justify-content: center; margin-bottom: var(--s4); font-size: var(--t-body); color: var(--ink-muted); }
.counter-digits { display: inline-flex; gap: 3px; }
.digit { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 6vw, 38px); line-height: 1; color: var(--fb-blue-dark);
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 4px 3px; min-width: .72em; text-align: center; box-shadow: var(--e1); }
.digit.sep { background: none; border: 0; box-shadow: none; color: var(--ink-muted); padding: 4px 0; }
.digit.flip { animation: flip .5s var(--ease-out), digitFlash .7s ease-out; }
@keyframes digitFlash { 0%,35% { background: #fff; } 45% { background: var(--new-flash); border-color: var(--gold-seal); } 100% { background: #fff; } }
@keyframes flip { 0% { transform: rotateX(0); } 45% { transform: rotateX(-90deg); } 55% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.field-canvas { display: block; width: 100%; height: clamp(280px, 42vw, 420px); margin: 0 auto; border-radius: var(--r-lg); background: #d8dadd; border: 1px solid var(--hairline); box-shadow: var(--e1); touch-action: pan-y; }

/* ───────────────────────── footer ───────────────────────── */
.footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; justify-content: center;
  padding: var(--s5) 20px calc(var(--s5) + env(safe-area-inset-bottom)); background: var(--sky-tint); border-top: 1px solid var(--hairline); font-size: var(--t-caption); color: var(--ink-muted); }
.foot-wordmark { font-size: var(--t-body); }
.foot-tag { font-style: italic; }
.foot-links { display: inline-flex; align-items: center; gap: 8px; }
.foot-links a { color: var(--gold-deep); text-decoration: none; font-weight: 700; }
.foot-links .dot { opacity: .4; }
.sound-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-pill); cursor: pointer; color: var(--ink-muted); box-shadow: var(--e1); font-size: 14px; }
.sound-toggle[aria-pressed="true"] { border-color: var(--gold-deep); }

.confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* ═════════════════════ GAME-FEEL: the living machine ═════════════════════ */

/* LED strip — reacts to machine state via .st-* (syncMachine) */
.m-ledstrip { display: flex; justify-content: space-between; padding: 0 10px; margin: -6px 2px -8px; }
.m-ledstrip i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-seal); box-shadow: 0 0 6px rgba(244,194,75,.9); opacity: .12; }
.machine.st-idle    .m-ledstrip i { animation: ledIdle 3.2s var(--ease-io) infinite; }
.machine.st-typing  .m-ledstrip i { animation: ledChase 1.1s linear infinite; }
.machine.st-locked  .m-ledstrip i { animation: ledArmed 1.6s var(--ease-io) infinite; }
.machine.st-armed   .m-ledstrip i { animation: ledArmed .9s var(--ease-io) infinite; }
.machine.st-vending .m-ledstrip i { animation: ledChase .35s linear infinite; }
.machine.st-vended  .m-ledstrip i { opacity: .95; }
@keyframes ledChase { 0%,100% { opacity: .12; } 10% { opacity: 1; } 30% { opacity: .12; } }
@keyframes ledIdle  { 0%,100% { opacity: .1; } 50% { opacity: .45; } }
@keyframes ledArmed { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* power-up stages: the case warms as you progress (data-stage 0-4) */
.m-glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(70% 60% at 50% 46%, rgba(244,194,75,.16), transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(244,194,75,.35), inset 0 0 34px rgba(244,194,75,.12);
  opacity: 0; transition: opacity .8s var(--ease-out);
}
.machine[data-stage="2"] .m-glass::after { opacity: .45; }
.machine[data-stage="3"] .m-glass::after, .machine[data-stage="4"] .m-glass::after { opacity: 1; }
.m-stock { transition: opacity .8s var(--ease-out); }
.machine[data-stage="0"] .m-stock { opacity: .4; }
.machine[data-stage="2"] .m-stock, .machine[data-stage="3"] .m-stock, .machine[data-stage="4"] .m-stock { opacity: .7; }
.lcd::before { transition: border-color .6s ease; }
.machine[data-stage="2"] .lcd::before, .machine[data-stage="3"] .lcd::before, .machine[data-stage="4"] .lcd::before { border-color: rgba(244,194,75,.45); }

/* LCD keystroke juice */
.lcd-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 90% at 50% 45%, rgba(244,194,75,.16), transparent 70%); opacity: 0; }
.lcd.key-pop .lcd-glow { animation: glowPulse .18s ease-out; }
@keyframes glowPulse { 0% { opacity: 1; } 100% { opacity: 0; } }
.lcd.key-del .name-render { animation: delFlick .12s steps(2, jump-none); }
@keyframes delFlick { 50% { opacity: .5; } }

/* name-lock wave + frame flash */
.name-render .ltr.wave { animation: ltrWave .45s var(--ease-spring) both; }
@keyframes ltrWave { 0% { transform: translateY(0); } 35% { transform: translateY(-6px) scale(1.06); } 70% { transform: translateY(1px); } 100% { transform: translateY(0); } }
.lcd.lockflash::before { border-color: rgba(244,194,75,.85); }

/* task reward beats */
.task-row { border-radius: 8px; }
.t-tick { position: relative; }
.task-row.just { animation: rowFlash .9s ease-out; }
@keyframes rowFlash { 0% { background: rgba(244,194,75,.30); } 100% { background: transparent; } }
.task-row.just .t-tick { animation: tickPop .5s var(--ease-spring); }
@keyframes tickPop { 0% { transform: scale(.3); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.task-row.just .t-tick::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--gold-seal); animation: tickPing .6s var(--ease-out) forwards; }
@keyframes tickPing { from { transform: scale(.8); opacity: .9; } to { transform: scale(2.3); opacity: 0; } }

/* UNLOCK ceremony (3rd task) */
.glass-sweep { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(244,194,75,.20) 48%, rgba(255,255,255,.10) 52%, transparent 66%);
  transform: translateX(-120%); }
.machine.unlocked-now .glass-sweep { animation: glassSweep .9s var(--ease-out) .15s forwards; }
@keyframes glassSweep { to { transform: translateX(120%); } }
.unlock-flash { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 3; text-align: center;
  font-family: var(--font-lcd); font-weight: 700; font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold-seal); text-shadow: 0 0 12px rgba(244,194,75,.85); opacity: 0; pointer-events: none; }
.machine.unlocked-now .unlock-flash { animation: unlockText 1.4s var(--ease-out); }
@keyframes unlockText { 0% { opacity: 0; transform: translateY(6px); } 18%,70% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.machine.unlocked-now .dispense-btn { animation: unlockPulse .6s var(--ease-spring) .5s; }
@keyframes unlockPulse { 0%,100% { transform: scale(1); } 40% { transform: scale(1.045); } }

/* vend machinery: shake, coil shudder, stock rattle, LCD flicker */
.machine.vending { animation: vendShake .35s linear 2; }
@keyframes vendShake { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-1px,.5px); } 50% { transform: translate(1px,-.5px); } 75% { transform: translate(-.5px,.5px); } }
.machine.vending .coil { animation: coilspin .7s linear 2, coilShake .35s var(--ease-io) 2; }
@keyframes coilShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } }
.machine.vending .m-stock .ssil svg { animation: stockJit .3s var(--ease-io) 3; }
.machine.vending .m-stock .ssil:nth-child(2n) svg { animation-delay: .06s; }
.machine.vending .m-stock .ssil:nth-child(3n) svg { animation-delay: .11s; }
@keyframes stockJit { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-1px,1px) rotate(-2deg); } 75% { transform: translate(1px,-1px) rotate(2deg); } }
.machine.vending .lcd::after { animation: lcdFlicker .14s steps(2) 6; }
@keyframes lcdFlicker { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.lcd.vending .handle { opacity: 0; }
.lcd.vending .name-render { animation: vendThrob .35s ease-in-out infinite; }
@keyframes vendThrob { 50% { opacity: .82; } }

/* impact: THUNK recoil + tray glow (placed after .machine.vending so thunk wins) */
.machine.thunk { animation: thunk .4s var(--ease-out); }
@keyframes thunk { 0% { transform: translateY(0); } 30% { transform: translateY(4px); } 60% { transform: translateY(-2px); } 100% { transform: translateY(0); } }
.m-tray::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 26px rgba(244,194,75,.55); opacity: 0; pointer-events: none; transition: opacity .9s ease-out; }
.m-tray.glow::after { opacity: 1; transition-duration: .08s; }

/* collectible ticket v2 */
.claim-done { position: relative; overflow: hidden; will-change: transform; }
.claim-done::before { content: ""; position: absolute; top: -1px; left: 8px; right: 8px; height: 6px;
  background: radial-gradient(circle 3px at 8px 0, #1b1d20 3px, transparent 3.5px) repeat-x; background-size: 16px 6px; }
@keyframes riseIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.claim-done .done-name { animation: riseIn .38s var(--ease-out) .28s both; }
.ticket-barcode { width: 58%; height: 13px; margin: 2px auto 12px; opacity: .45;
  background: repeating-linear-gradient(90deg, #33363B 0 2px, transparent 2px 5px, #33363B 5px 6px, transparent 6px 10px);
  animation: riseIn .38s var(--ease-out) .40s both; }
.claim-done .tray-actions { animation: riseIn .38s var(--ease-out) .50s both; }
.seal-num { display: inline-block; }
.seal-num.lockin { animation: numLock .3s var(--ease-spring); }
@keyframes numLock { 0% { transform: scale(1.18); text-shadow: 0 0 14px rgba(255,246,221,.95); } 100% { transform: scale(1); text-shadow: none; } }
.claim-done.instant, .claim-done.instant *, .claim-done.instant::before, .claim-done.instant::after { animation: none !important; }
/* holo foil layer (pointer-tracked on desktop, idle sheen on mobile) */
.claim-done::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 38%, rgba(244,194,75,.20) 48%, rgba(255,255,255,.5) 51%, rgba(244,194,75,.14) 55%, transparent 64%);
  background-size: 240% 100%; background-position: var(--fx, 120%) 0; }
.claim-done.settled { animation: none; }
@media (pointer: coarse) {
  .claim-done:not(.instant)::after { animation: foilIdle 7s ease-in-out infinite; }
}
@keyframes foilIdle { 0%,72% { background-position: 120% 0; } 100% { background-position: -40% 0; } }

/* armed charge: sheen sweep + beckoning arrow */
.dispense-btn.armed:not(:disabled)::after, .connect-x.armed::after {
  content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-140%) skewX(-18deg); animation: armSheen 2.4s ease-in-out .5s infinite; pointer-events: none; }
@keyframes armSheen { 0% { transform: translateX(-140%) skewX(-18deg); } 55%,100% { transform: translateX(320%) skewX(-18deg); } }
.dispense-btn.armed:not(:disabled) .dispense-arrow { display: inline-block; animation: arrowNudge 1.2s var(--ease-io) infinite; }
@keyframes arrowNudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* LCD boot sequence + ambient scan */
.lcd-scan { position: absolute; left: 6px; right: 6px; top: 0; height: 34%; border-radius: 8px;
  background: linear-gradient(180deg, transparent, rgba(244,236,214,.10), transparent); opacity: 0; pointer-events: none; }
.lcd.booting .lcd-scan { animation: lcdScan .7s var(--ease-out) both; }
@keyframes lcdScan { 0% { opacity: 1; transform: translateY(-120%); } 100% { opacity: 0; transform: translateY(320%); } }
.lcd.booting .name-render, .lcd.booting .lcd-sub { animation: lcdWake .9s steps(3, jump-none) both; }
@keyframes lcdWake { 0% { opacity: 0; } 35% { opacity: .55; } 55% { opacity: .2; } 75%,100% { opacity: 1; } }
.is-ready .lcd:not(.booting) .lcd-scan { animation: scanIdle 9s linear infinite; }
@keyframes scanIdle { 0% { opacity: 0; transform: translateY(-120%); } 6% { opacity: .4; } 12% { opacity: 0; transform: translateY(360%); } 12.01%,100% { opacity: 0; transform: translateY(-120%); } }

/* taken-name glitch (gold/red/white — stays on palette) */
.lcd.glitch .nm-letters, .lcd.glitch .lcd-status { animation: glitchX .38s steps(2, jump-none) both; }
@keyframes glitchX { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(1px); } }
.lcd.glitch .name-render { text-shadow: 2px 0 rgba(224,106,92,.55), -2px 0 rgba(255,255,255,.35), 0 0 10px rgba(244,194,75,.4); }

/* idle status rotation */
.lcd-status.swap { animation: statusSwap .32s var(--ease-out); }
@keyframes statusSwap { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }

/* coupled press physics: buttons wired into one chassis */
.m-tray, .m-glass { transition: transform 90ms var(--ease-out); }
.machine:has(.dispense-btn:not(:disabled):active) .lcd,
.machine:has(.dispense-btn:not(:disabled):active) .m-tray { transform: translateY(1.5px); }
.machine:has(.connect-x:active) .m-glass { transform: translateY(1px); }

/* wallet slot — a card-reader on the machine (appears once the 3 tasks are done) */
.wallet-slot {
  background: linear-gradient(180deg, #1a2740, #111c33);
  border: 1px solid rgba(0,0,0,.4); border-radius: var(--r-md);
  padding: 8px 10px 10px; box-shadow: inset 0 4px 12px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.14);
}
.ws-label { display: block; font-family: var(--font-lcd); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(244,236,214,.55); margin: 0 2px 6px; }
.ws-row { position: relative; display: flex; align-items: center; }
.ws-input {
  flex: 1 1 auto; min-width: 0; height: 40px; border-radius: var(--r-sm);
  border: 1px solid rgba(244,194,75,.22); background: #0e0f12; outline: none;
  padding: 0 34px 0 12px; font-family: var(--font-lcd); font-size: 13px; font-weight: 700;
  letter-spacing: .02em; color: var(--gold-seal); text-shadow: 0 0 6px rgba(244,194,75,.35);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.6);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.ws-input::placeholder { color: rgba(244,236,214,.30); text-shadow: none; }
.ws-input:focus-visible { outline: none; border-color: rgba(244,194,75,.6); box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 0 0 2px rgba(244,194,75,.4); }
.wallet-slot.bad .ws-input { border-color: rgba(224,106,92,.55); color: var(--danger); text-shadow: 0 0 6px rgba(224,106,92,.3); }
.ws-ok { position: absolute; right: 10px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--gold-seal); color: #3a2a05;
  font-size: 11px; font-weight: 900; line-height: 1;
  opacity: 0; transform: scale(.3); transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring); pointer-events: none; }
.wallet-slot.ok .ws-ok { opacity: 1; transform: scale(1); }
.wallet-slot.ok .ws-input { border-color: rgba(244,194,75,.6); }

/* wallet on the ticket + late add for early claimers */
.done-wallet { font-family: var(--font-lcd); font-size: var(--t-caption); font-weight: 700;
  color: var(--ink-muted); margin: 0 0 6px; letter-spacing: .04em; }
.done-wallet b { color: var(--gold-deep); }
.wallet-late { display: flex; gap: 6px; margin: 2px 0 8px; }
.wallet-late input { flex: 1 1 auto; min-width: 0; height: 36px; border-radius: var(--r-sm);
  border: 1px solid var(--hairline); background: #fff; padding: 0 10px;
  font-family: var(--font-lcd); font-size: 12px; font-weight: 700; color: var(--ink); outline: none; }
.wallet-late input:focus-visible { border-color: var(--gold-deep); box-shadow: 0 0 0 2px rgba(244,194,75,.35); }
.wallet-late .btn { height: 36px; padding: 0 14px; font-size: var(--t-caption); }

/* counter +1 pill */
.counter { position: relative; }
.plus-one { position: absolute; left: 50%; top: -6px; background: var(--gold-seal); color: #3a2a05;
  font-weight: 700; font-size: var(--t-caption); padding: 2px 8px; border-radius: 999px; pointer-events: none;
  white-space: nowrap; animation: plusFloat 1.4s var(--ease-out) both; }
@keyframes plusFloat { 0% { opacity: 0; transform: translate(-50%, 8px); } 20% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -24px); } }

/* ───────────────────────── on-load entrance ───────────────────────── */
[data-enter] { opacity: 0; transform: translateY(14px) scale(.98); }
.is-ready [data-enter] { opacity: 1; transform: none; transition: opacity var(--dur-3) var(--ease-out), transform 420ms var(--ease-out); }

/* ───────────────────────── responsive ───────────────────────── */
@media (max-width: 720px) { .footer { flex-direction: column; gap: 10px; text-align: center; } }
@media (max-width: 400px) {
  .m-glass { min-height: 212px; padding: 14px; }
  .avatar { width: 122px; }
  .machine { padding: 14px 14px 16px; gap: 10px; }
}

/* ───────────────────────── reduced motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-enter] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .breathe .avatar-svg, .scrollcue span, .seal::after, .led, .dispense-btn.armed, .connect-x.armed { animation: none !important; }
  .avatar, .coil, .machine.vending .m-shelf .avatar { animation: none !important; }
  .ring { transition: stroke .2s ease !important; }
  .name-render .ltr, .digit.flip, .seal, .claim-done { animation: none !important; }
  .sil-fill, .handle, .lcd-status { transition-duration: var(--dur-1) !important; }
  /* game-feel layer collapses */
  .m-ledstrip i { animation: none !important; }
  .machine.st-locked .m-ledstrip i, .machine.st-armed .m-ledstrip i, .machine.st-vended .m-ledstrip i { opacity: .9; }
  .name-render .ltr.wave, .lcd.key-pop .lcd-glow, .lcd.key-del .name-render { animation: none !important; }
  .task-row.just, .task-row.just .t-tick, .task-row.just .t-tick::before { animation: none !important; }
  .machine.unlocked-now .glass-sweep, .machine.unlocked-now .unlock-flash, .machine.unlocked-now .dispense-btn { animation: none !important; }
  .machine.vending, .machine.vending .m-stock .ssil svg, .machine.vending .lcd::after, .lcd.vending .name-render { animation: none !important; }
  .machine.thunk { animation: none !important; }
  .claim-done .done-name, .claim-done .tray-actions, .ticket-barcode, .seal-num.lockin, .claim-done::after { animation: none !important; }
  .dispense-btn.armed::after, .connect-x.armed::after, .dispense-btn.armed .dispense-arrow { animation: none !important; }
  .lcd-scan, .lcd.booting .name-render, .lcd.booting .lcd-sub { animation: none !important; }
  .lcd.glitch .nm-letters, .lcd.glitch .lcd-status, .lcd-status.swap, .plus-one { animation: none !important; }
  .machine:has(.dispense-btn:not(:disabled):active) .lcd,
  .machine:has(.dispense-btn:not(:disabled):active) .m-tray,
  .machine:has(.connect-x:active) .m-glass { transform: none !important; }
}