/* Mashlings — the boys' app. Look: features/app/ux.md §3.
   The Mash-o-Matic (enamel, steel hoppers, one orange plunger) is the one
   memorable motif; the creature and its tier frame carry every reveal. */

@font-face { font-family: 'Titan One'; src: url(fonts/titan-one.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url(fonts/atkinson-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url(fonts/atkinson-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --enamel: #2E3A8C;
  --enamel-deep: #1E275F;
  --enamel-hi: #3B4AA8;
  --steel: #C5CCD8;
  --steel-dark: #8E98AB;
  --ink: #141B3D;
  --paper: #F4F6FA;
  --plunger: #FF5A1F;
  --plunger-dark: #C43C0B;
  --slime: #9BF26B;
  --shep: #2BC0C9;
  --sawyer: #FFB31A;
  --me: var(--shep);
  --bro: var(--sawyer);
  --display: 'Titan One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --text: 'Atkinson', system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tap: 56px;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--enamel);
  color: #fff;
  font: 400 18px/1.4 var(--text);
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
button:focus-visible, [tabindex]:focus-visible, input:focus-visible { outline: 4px solid var(--slime); outline-offset: 3px; }
img { -webkit-user-drag: none; user-select: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 28px; height: 28px; display: block; }

#app { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; }

/* A faint pressed-steel texture: rivet rows on the enamel, a soft glow in the middle. */
.enamel {
  background:
    radial-gradient(circle at 14px 14px, rgba(255,255,255,.10) 2.5px, transparent 3.5px) 0 0 / 100% 28px no-repeat,
    radial-gradient(circle at calc(100% - 14px) 14px, rgba(255,255,255,.10) 2.5px, transparent 3.5px) 0 0 / 100% 28px no-repeat,
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(84,110,220,.35), transparent 70%) fixed,
    linear-gradient(180deg, var(--enamel-hi), var(--enamel) 40%, #27327a) fixed;
}

/* ------------------------------------------------------------- ambient -- */
/* The circuit board behind every screen (ambient.js, ux §3). */
#ambient, #floaters { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#ambient { width: 100%; height: 100%; }
#floaters { overflow: hidden; }
.fl { position: absolute; top: 0; display: grid; place-items: center; color: #B9C4FF; will-change: transform, opacity; opacity: 0; }
.fl svg { width: 100%; height: 100%; overflow: visible; }
.fl-plus { filter: drop-shadow(0 0 4px rgba(150,168,255,.9)) drop-shadow(0 0 12px rgba(120,140,255,.55)); }
.fl-hex, .fl-icon { color: #A3B6FF; filter: drop-shadow(0 0 5px rgba(130,155,255,.7)); }
.fl .bar { position: absolute; width: 100%; height: 30%; border-radius: 99px; background: #6F86E6; }
.fl .bar.v { transform: rotate(90deg); }
.fl .dot { width: 100%; height: 100%; border-radius: 50%; background: #C9D3FF; box-shadow: 0 0 8px 2px rgba(150,170,255,.7); }

/* ------------------------------------------------------------ preview -- */
.preview-band {
  position: sticky; top: 0; z-index: 50;
  display: flex; gap: 12px; align-items: center; justify-content: center;
  padding: calc(6px + var(--safe-top)) 12px 6px;
  background: repeating-linear-gradient(-45deg, #FFD23F 0 14px, #141B3D 14px 28px);
  color: #141B3D; font-weight: 700; font-size: 15px;
}
.preview-band span { background: #FFD23F; padding: 2px 10px; border-radius: 6px; }
.preview-band button { background: #fff; padding: 4px 12px; border-radius: 999px; }

/* -------------------------------------------------------- who's playing -- */
.who { flex: 1; display: grid; place-content: center; gap: 28px; padding: 32px 20px calc(32px + var(--safe-bottom)); text-align: center; }
.who h1 { font: 400 clamp(34px, 8vw, 56px)/1 var(--display); margin: 0; letter-spacing: .5px; text-shadow: 0 4px 0 var(--enamel-deep); }
.who .faces { display: flex; gap: clamp(16px, 5vw, 48px); justify-content: center; flex-wrap: wrap; }
.face-btn { display: grid; justify-items: center; gap: 12px; }
.face-btn .name { font: 400 30px/1 var(--display); }
.face {
  --c: var(--shep);
  width: clamp(130px, 38vw, 220px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; position: relative; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 70%, #000));
  border: 8px solid var(--steel);
  box-shadow: 0 8px 0 var(--enamel-deep), inset 0 -8px 0 rgba(0,0,0,.12);
  transition: transform .12s;
}
.face-btn:active .face { transform: translateY(4px); box-shadow: 0 4px 0 var(--enamel-deep); }
.face .emblem { width: 62%; height: 62%; color: #fff; filter: drop-shadow(0 5px 0 rgba(0,0,0,.16)); }
.face .emblem .seam { color: #E5484D; }
.face .initial { font: 400 clamp(64px, 18vw, 110px)/1 var(--display); color: #fff; text-shadow: 0 5px 0 rgba(0,0,0,.18); }
.face img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 6px 4px rgba(0,0,0,.25)); }
.face.small { width: 52px; border-width: 4px; box-shadow: 0 3px 0 var(--enamel-deep); }
.face.small .initial { font-size: 28px; }
.who .hint { font-size: 15px; opacity: .75; max-width: 34ch; margin: 0 auto; }

/* --------------------------------------------------------------- header -- */
.top {
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + var(--safe-top)) 14px 10px;
}
.preview .top { padding-top: 10px; }
.top .grow { flex: 1; display: flex; justify-content: center; min-width: 0; }
.round-btn {
  min-width: var(--tap); height: var(--tap); border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--enamel-deep); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); padding: 0 14px;
}
.round-btn.labelled { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; }
.round-btn:active { transform: translateY(2px); }
.offline { opacity: .7; }

/* next-arrival bulbs */
.bulbs { display: flex; gap: 6px; align-items: center; padding: 8px 12px; border-radius: 999px; background: var(--enamel-deep); min-height: 44px; }
.bulb { width: 16px; height: 16px; border-radius: 50%; background: #39427a; box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); }
.bulb.on { background: radial-gradient(circle at 35% 30%, #fff8c4, #FFD23F 55%, #e0a400); box-shadow: 0 0 10px #FFD23F; }
.bulbs .crate { width: 26px; height: 26px; margin-left: 4px; }

/* ---------------------------------------------------------------- bench -- */
.bench { flex: 1; display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.machine { padding: 6px 16px 22px; display: grid; justify-items: center; gap: 16px; }
.hoppers { display: flex; align-items: center; gap: clamp(8px, 3vw, 24px); }
.hopper {
  width: clamp(120px, 36vw, 200px); aspect-ratio: 1; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 50% 40%, #2a3576, var(--enamel-deep) 70%);
  border: 9px solid var(--steel);
  box-shadow: 0 0 0 3px var(--steel-dark), 0 8px 0 3px var(--enamel-deep), inset 0 10px 18px rgba(0,0,0,.45);
  display: grid; place-items: center; overflow: hidden;
}
.hopper::after { /* the glass */
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 40% 26% at 34% 24%, rgba(255,255,255,.38), transparent 70%),
              radial-gradient(circle at 50% 120%, rgba(255,255,255,.08), transparent 60%);
}
.hopper img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 6px 5px rgba(0,0,0,.35)); }
.hopper .empty { font: 400 clamp(46px, 13vw, 72px)/1 var(--display); color: #4b56a0; }
.hopper.drop img { animation: drop .34s cubic-bezier(.3,1.6,.5,1); }
@keyframes drop { from { transform: translateY(-60%) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.hopper-label { font-weight: 700; font-size: 16px; text-align: center; margin-top: 8px; min-height: 22px; max-width: clamp(120px, 36vw, 200px); }
.hopper-wrap { display: grid; justify-items: center; }
.bolt { font: 400 34px/1 var(--display); color: var(--steel); text-shadow: 0 3px 0 var(--enamel-deep); }

.plunger {
  position: relative; width: clamp(200px, 60vw, 300px); height: 88px; border-radius: 999px;
  background: linear-gradient(180deg, #ff7a45, var(--plunger) 45%, #f04e12);
  box-shadow: 0 10px 0 var(--plunger-dark), 0 14px 0 var(--enamel-deep), inset 0 4px 0 rgba(255,255,255,.35);
  font: 400 44px/88px var(--display); letter-spacing: 3px; color: #fff; text-shadow: 0 3px 0 var(--plunger-dark);
  transition: transform .08s, box-shadow .08s, filter .2s;
}
.plunger:disabled { background: linear-gradient(180deg, #7d87a6, #5f6889); box-shadow: 0 10px 0 #444c6b, 0 14px 0 var(--enamel-deep), inset 0 4px 0 rgba(255,255,255,.2); color: #c3c9dc; text-shadow: 0 3px 0 #444c6b; cursor: default; }
.plunger:not(:disabled) { animation: ready 1.6s ease-in-out infinite; }
.plunger:not(:disabled):active, .plunger.pushed { transform: translateY(9px); box-shadow: 0 1px 0 var(--plunger-dark), 0 5px 0 var(--enamel-deep), inset 0 4px 0 rgba(255,255,255,.35); animation: none; }
@keyframes ready { 50% { box-shadow: 0 10px 0 var(--plunger-dark), 0 14px 0 var(--enamel-deep), inset 0 4px 0 rgba(255,255,255,.35), 0 0 34px rgba(255,90,31,.65); } }

.tray { background: var(--enamel-deep); border-radius: 28px 28px 0 0; padding: 18px 12px calc(18px + var(--safe-bottom)); box-shadow: inset 0 6px 0 rgba(0,0,0,.18); min-height: 0; overflow: auto; }
.tray-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.tile {
  position: relative; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 4px;
  padding: 10px 6px 8px; border-radius: 20px; background: #28326f; min-height: 128px;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.25); transition: transform .1s;
}
.tile:active { transform: scale(.95); }
.tile img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 4px 3px rgba(0,0,0,.3)); }
.tile .lbl { font-size: 15px; font-weight: 700; line-height: 1.15; text-align: center; }
.tile.in { background: #3a4590; box-shadow: inset 0 0 0 4px var(--steel); }
.tile.self { opacity: .35; }
.tile .mark { position: absolute; z-index: 2; top: 4px; right: 4px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; }
.tile .mark.new { color: var(--slime); filter: drop-shadow(0 0 6px rgba(155,242,107,.8)); animation: twinkle 1.8s ease-in-out infinite; }
.tile .mark.have { background: rgba(255,255,255,.14); color: #fff; }
.tile .mark svg { width: 24px; height: 24px; }
.tile .bro { position: absolute; z-index: 2; top: 9px; left: 9px; width: 14px; height: 14px; border-radius: 50%; background: var(--bro); box-shadow: 0 0 0 3px #28326f; }
.tile .fresh { position: absolute; z-index: 2; left: 50%; bottom: -6px; transform: translateX(-50%); background: var(--slime); color: var(--ink); font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
@keyframes twinkle { 50% { transform: scale(1.18) rotate(12deg); } }
.tile.locked { background: transparent; border: 3px dashed #4b56a0; box-shadow: none; color: #9aa3d6; align-content: center; }
.tile.locked .count { font: 400 34px/1 var(--display); }

/* ------------------------------------------------------------- overlays -- */
.overlay {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; overflow: auto;
  background: rgba(20,27,61,.86);
  padding: calc(16px + var(--safe-top)) 14px calc(16px + var(--safe-bottom));
  animation: fade .18s ease-out;
}
@keyframes fade { from { opacity: 0; } }
.overlay > .card, .overlay > .sheet, .overlay > .box { margin: auto 0; flex-shrink: 0; }
/* the close button sits top left; the sound button owns the top right everywhere */
.overlay .close { position: fixed; top: calc(12px + var(--safe-top)); left: 12px; z-index: 3; }
/* card overlays keep their top clear of the close and sound buttons */
.overlay.reveal, .overlay.card-view { padding-top: calc(76px + var(--safe-top)); }
[hidden] { display: none !important; }

/* ----------------------------------------------------------------- card -- */
/* Two panels in one frame (ux §4.3): the picture, with the name on a plate at the top
   and the tier reel at the foot; and the details. Wide screens put them side by side,
   narrow ones stack them. A reveal starts folded (picture only). */
.card {
  --edge: #D5DAE3; --back: #F4F6FA; --name: var(--ink); --tc: #6C7896;
  --aw: min(100%, 460px);
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  width: min(100%, 460px); color: var(--ink);
  background: var(--paper); border-radius: 28px; padding: 12px;
  box-shadow: 0 0 0 6px var(--edge), 0 18px 40px rgba(0,0,0,.45);
  transition: transform .15s ease-out;
}
.card .art { position: relative; flex: none; }
.card .stage {
  position: relative; border-radius: 20px; aspect-ratio: 1 / 1.2; overflow: hidden; container-type: inline-size;
  background: var(--back); transition: transform .15s ease-out;
}
.card .stage .shadow { position: absolute; left: 24%; right: 24%; bottom: 66px; height: 7%; border-radius: 50%; background: radial-gradient(ellipse, rgba(20,27,61,.38), transparent 70%); z-index: 1; }
/* the creature stands between the name plate and the reel */
.card .stage img.creature { position: absolute; z-index: 2; left: 6%; right: 6%; top: 84px; bottom: 74px; width: 88%; height: calc(100% - 158px); object-fit: contain; object-position: 50% 100%; }
.card .stage .glare { position: absolute; inset: 0; z-index: 4; background: #fff; opacity: 0; pointer-events: none; }

/* the name plate */
.plate { position: absolute; z-index: 6; top: 14px; left: 12px; right: 12px; display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.plate > * { pointer-events: auto; }
.plate .tag { position: relative; max-width: 100%; }
.card .name {
  position: relative; margin: 0; max-width: 100%; text-align: center; color: var(--name); overflow-wrap: anywhere;
  font: 400 28px/1.06 var(--display);
  font-size: clamp(20px, calc((100cqw - 74px) / (var(--nl, 10) * .62)), 36px);
  background: #fff; border: 3px solid var(--ink); border-radius: 26px; padding: 9px 20px 10px;
  box-shadow: 0 5px 0 var(--ink), 0 12px 20px rgba(20,27,61,.22);
  text-shadow: 0 2px 0 color-mix(in srgb, var(--name) 18%, transparent);
  -webkit-touch-callout: none; touch-action: manipulation; cursor: pointer;
  transition: transform .12s, box-shadow .2s;
}
.card .name:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--ink), 0 8px 14px rgba(20,27,61,.22); }
/* hold to rename: a bar fills under the name while the finger stays down */
.card .name.can-name::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 4px; height: 4px; border-radius: 4px; background: var(--edge); transform: scaleX(0); transform-origin: left; opacity: 0; }
.card .name.can-name.holding::after { opacity: 1; transform: scaleX(1); transition: transform .52s linear .08s, opacity .1s .08s; }
.card .name.armed { animation: armed .3s cubic-bezier(.3,1.8,.5,1); box-shadow: 0 5px 0 var(--ink), 0 0 0 5px var(--slime); }
@keyframes armed { 40% { transform: scale(1.07) rotate(-1.5deg); } }
.card .name.editing { width: min(100cqw - 24px, 420px); box-shadow: 0 5px 0 var(--ink), 0 0 0 5px var(--slime); cursor: text; }
.name-input { all: unset; display: block; width: 100%; font: inherit; color: inherit; text-align: center; -webkit-user-select: text; user-select: text; caret-color: var(--plunger); }
.rename-bar { display: flex; justify-content: center; }
.rename-bar .ok { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--slime); color: #1f5a0a; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.rename-bar .ok svg { width: 30px; height: 30px; stroke-width: 3; }
.card .real { background: rgba(20,27,61,.74); color: #fff; font: 700 14px/1 var(--text); padding: 6px 12px; border-radius: 999px; cursor: pointer; }

/* NEW: a sticker slapped on the corner of the name plate */
.stamp {
  position: absolute; z-index: 2; right: -16px; top: -18px; transform: rotate(10deg); pointer-events: none;
  font: 400 19px/1 var(--display); color: #2f7a12; background: var(--slime);
  padding: 5px 9px 4px; border-radius: 9px; border: 3px solid #2f7a12; letter-spacing: 1.5px;
  box-shadow: 0 3px 0 rgba(0,0,0,.2); opacity: 0;
}
.stamp.in { opacity: 1; animation: stamp .42s cubic-bezier(.2,1.8,.4,1) both; }
@keyframes stamp { from { transform: rotate(10deg) scale(2.6); opacity: 0; } }

/* the details */
.card .details { overflow: hidden; flex: none; }
.card.folded .details { height: 0; }
.card .details-in { display: grid; gap: 12px; padding: 16px 4px 2px; }
.ribbon {
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  background: linear-gradient(180deg, #ff7a45, var(--plunger)); color: #fff; font: 400 21px/1 var(--display); letter-spacing: .3px;
  padding: 10px 14px 11px; border-radius: 16px; box-shadow: 0 4px 0 var(--plunger-dark); text-shadow: 0 2px 0 var(--plunger-dark);
}
.ribbon svg { width: 22px; height: 22px; color: #FFE27A; }
.stats { display: grid; gap: 2px; }
.stat { display: grid; grid-template-columns: 34px 1fr 26px; align-items: center; gap: 8px; padding: 4px 6px; margin: 0 -6px; border-radius: 12px; cursor: pointer; }
.stat svg { width: 30px; height: 30px; color: var(--ink); }
.pips { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.pip { height: 14px; border-radius: 4px; background: #DDE2EC; }
.pip.on { background: var(--ink); }
.pip.boost { background: #FFB31A; box-shadow: 0 0 8px #FFB31A; }
.stat .glint { color: #E89A00; }
.stat .glint svg { width: 24px; height: 24px; color: #E89A00; }
.traits { display: flex; flex-wrap: wrap; gap: 6px; }
.trait { background: #E3E7F0; border-radius: 999px; padding: 6px 13px; font-size: 15px; font-weight: 700; cursor: pointer; }
.lore { margin: 0; font-size: 19px; line-height: 1.45; padding: 4px 8px; margin-inline: -8px; border-radius: 12px; cursor: pointer; }
.abilities { display: grid; gap: 8px; }
.ability { text-align: left; border-radius: 16px; background: #FFF4D6; border: 2px solid #FFD27A; padding: 9px 12px; display: grid; grid-template-columns: 28px 1fr; gap: 2px 8px; align-items: center; cursor: pointer; }
.ability svg { width: 24px; height: 24px; color: #E89A00; }
.ability b { font-weight: 700; }
.ability .txt { grid-column: 2; font-size: 16px; color: #5a4a20; }
.card-foot { display: grid; gap: 10px; margin-top: 4px; }

/* Being read aloud: the words glow in the tier's colour; each word lights as it is said. */
[data-say] { -webkit-touch-callout: none; }
.saying { background-color: color-mix(in srgb, var(--tc, #6C5CE7) 14%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc, #6C5CE7) 45%, transparent); transition: background-color .2s, box-shadow .2s; }
.trait.saying { background: color-mix(in srgb, var(--tc) 22%, #fff); }
.card .name.saying { box-shadow: 0 5px 0 var(--ink), 0 0 0 5px color-mix(in srgb, var(--tc) 55%, transparent); background: #fff; }
.ability.saying { box-shadow: 0 0 0 3px #FFB31A; }
.ribbon.saying { box-shadow: 0 4px 0 var(--plunger-dark), 0 0 0 4px #FFD23F; }
.saying .w { transition: color .12s, background-color .12s; border-radius: 4px; }
.saying .w.on { background: color-mix(in srgb, var(--tc, #6C5CE7) 30%, #fff); color: var(--ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc, #6C5CE7) 30%, #fff); }
.card .name.saying .w.on { box-shadow: none; }
.hopper-label[data-say], .counter[data-say], h1[data-say], .arrival [data-say], .sheet [data-say] { cursor: pointer; border-radius: 12px; }
.hopper-label.saying, .counter.saying, h1.saying, .arrival .saying { --tc: #9BB0FF; }

.recipe { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; background: #EEF1F7; border-radius: 18px; cursor: pointer; }
.recipe img { width: 72px; height: 72px; object-fit: contain; }
.recipe .q { width: 72px; height: 72px; border-radius: 50%; background: #DDE2EC; display: grid; place-items: center; font: 400 38px/1 var(--display); color: #9aa3bd; }
.recipe .plus { font: 400 28px/1 var(--display); color: #8E98AB; }
.recipe-note { text-align: center; font-size: 16px; color: #56607f; margin-top: -6px; cursor: pointer; border-radius: 10px; }
.found-by { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 15px; color: #56607f; cursor: pointer; border-radius: 10px; padding: 2px; }
.found-by i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }

.big-btn {
  min-height: 64px; border-radius: 999px; font: 400 26px/1 var(--display); color: #fff;
  background: var(--enamel); box-shadow: 0 6px 0 var(--enamel-deep); padding: 0 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--enamel-deep); }
.big-btn.light { background: #E3E7F0; color: var(--ink); box-shadow: 0 6px 0 #B9C0CF; font: 700 19px/1 var(--text); min-height: 56px; }
.big-btn.danger { background: #E5484D; box-shadow: 0 6px 0 #a3262a; }

/* Wide screens: picture and details side by side; the details slide out sideways. */
@media (min-width: 760px) and (min-aspect-ratio: 1/1) {
  .card {
    --aw: clamp(240px, min(42vw, calc((100vh - 80px) / 1.2)), 470px);
    --dw: clamp(320px, 34vw, 430px);
    flex-direction: row; align-items: flex-start; width: auto; max-width: 100%;
  }
  .card .art { width: var(--aw); }
  .card .details { width: calc(var(--dw) + 22px); }
  .card .details-in { width: calc(var(--dw) + 22px); padding: 4px 4px 2px 22px; }
  .card.folded .details { width: 0; }
}

/* ---- tiers: the frame carries rarity, never the art (design spec §4) ---- */
.card[data-tier=Common] { --edge: #C9D0DC; }
.card[data-tier=Odd]    { --edge: #2FB383; --tc: #2FB383; --name: #17734F; --back: radial-gradient(circle at 50% 50%, #F1FBF6, #C7EEDD 75%); }
.card[data-tier=Rare]   { --edge: #6C5CE7; --tc: #6C5CE7; --name: #4B3CC8; --back: radial-gradient(circle at 50% 50%, #fff 0, #E9E5FF 30%, #A79BF5 80%); }
.card[data-tier=Rare] .stage::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 68%); animation: aura 3.2s ease-in-out infinite; }
@keyframes aura { 50% { transform: scale(1.08); opacity: .8; } }
.card[data-tier=Wild], .card[data-tier=Mythic] {
  border: 6px solid transparent; padding: 6px;
  background: linear-gradient(var(--paper), var(--paper)) padding-box,
              conic-gradient(from var(--spin), #ff5ad1, #ffd23f, #5af2c8, #5aa8ff, #b05aff, #ff5ad1) border-box;
  animation: spin 7s linear infinite;
}
.card[data-tier=Wild] { --edge: #ff5ad1; --tc: #E0279F; --name: #B0138A; --back: radial-gradient(circle at 50% 45%, #2d1f66, #120b33 80%); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.card[data-tier=Wild] .stage .shadow { background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 70%); }
.card .foil { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; mix-blend-mode: color-dodge; opacity: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,90,209,.55) 35%, rgba(255,210,63,.55) 45%, rgba(90,242,200,.55) 55%, rgba(90,168,255,.5) 65%, transparent 80%);
  background-size: 250% 250%; background-position: var(--fx, 50%) var(--fy, 50%); }
.particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.particles i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; opacity: 0; animation: float 5s linear infinite; }
@keyframes float { 0% { transform: translateY(20px); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-260px); opacity: 0; } }
.card[data-tier=Mythic] {
  --edge: #FFD23F; --tc: #E89A00; --name: #8a2a00; --back: radial-gradient(circle at 50% 45%, #fff6c9, #ffcf4a 45%, #e5487f 100%);
  background: linear-gradient(var(--paper), var(--paper)) padding-box,
              conic-gradient(from var(--spin), #FFD23F, #ff5a1f, #e5487f, #FFD23F, #fff2a8, #FFD23F) border-box;
  animation-duration: 3s;
  box-shadow: 0 0 50px rgba(255,210,63,.6), 0 18px 40px rgba(0,0,0,.45);
}
@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spin { to { --spin: 360deg; } }
.card[data-tier=Wild] .foil, .card[data-tier=Mythic] .foil { opacity: .55; }

/* ---- the rarity reel: the tier at the foot of the picture (ux §4.3) ---- */
.reel { --c: #8E98AB; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 5;
  display: grid; justify-items: center; gap: 5px; padding: 5px 6px 6px; border-radius: 26px;
  background: rgba(14,19,48,.88); box-shadow: 0 6px 16px rgba(0,0,0,.35); transition: opacity .22s ease-out; cursor: pointer; }
.card.climbing .reel:not(.on) { opacity: 0; }
.reel .window { position: relative; height: 40px; width: 150px; border-radius: 999px; overflow: hidden; background: var(--ink);
  box-shadow: inset 0 3px 0 rgba(0,0,0,.4), 0 0 0 3px var(--c); transition: box-shadow .2s, background-color .2s; }
.reel .strip { display: flex; flex-direction: column; transform: translateY(calc(var(--i, 0) * -40px)); transition: transform .26s cubic-bezier(.3,1.55,.5,1); }
.reel .strip span { height: 40px; font: 400 22px/40px var(--display); text-align: center; color: #fff; letter-spacing: .5px; }
.reel .pips { display: flex; gap: 6px; }
.reel .pips i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); transition: background-color .15s, box-shadow .15s; }
.reel .pips i.on { background: var(--pc); box-shadow: 0 0 7px var(--pc); }
.reel.bump .window { animation: reelbump .28s cubic-bezier(.3,1.6,.5,1); }
@keyframes reelbump { from { transform: scale(1.14); } }
.reel.glow .window { box-shadow: inset 0 3px 0 rgba(0,0,0,.4), 0 0 0 3px var(--c), 0 0 18px var(--c); }
.reel.locked .window { background: var(--c); }
.reel.locked .strip span { text-shadow: 0 2px 0 rgba(0,0,0,.28); }
.reveal .reel.locked .window { animation: reellock .5s cubic-bezier(.2,1.8,.4,1); }
@keyframes reellock { from { transform: scale(1.4); } }
.reel.locked[data-tier=Common] .window { background: var(--steel); }
.reel.locked[data-tier=Common] .strip span { color: var(--ink); text-shadow: none; }
.reel.locked[data-tier=Odd] .window { background: #22A374; }
/* Wild: the rainbow is a spinning ring around a dark window, so the word stays readable */
.reel.locked[data-tier=Wild] .window {
  border: 3px solid transparent; box-shadow: 0 0 16px rgba(255,90,209,.55);
  background: radial-gradient(ellipse at 50% 30%, #3a1d7a, #1a0c44 75%) padding-box,
              conic-gradient(from var(--spin), #ff5ad1, #ffd23f, #5af2c8, #5aa8ff, #b05aff, #ff5ad1) border-box;
  animation: spin 3s linear infinite;
}
.reel.locked[data-tier=Wild] .strip { margin-top: -3px; }
.reveal .reel.locked[data-tier=Wild] .window { animation: reellock .5s cubic-bezier(.2,1.8,.4,1), spin 3s linear infinite; }
.reel.locked[data-tier=Wild] .strip span { color: #fff; text-shadow: 0 0 10px rgba(255,90,209,.9), 0 0 3px rgba(255,90,209,.8), 0 2px 0 #12082e; }
.reel.locked[data-tier=Mythic] .window { background: linear-gradient(100deg, #ffcf4a 0 40%, #fff6c9 50%, #ffcf4a 60% 100%); background-size: 300% 100%; animation: reelsheen 2.2s linear infinite; }
.reveal .reel.locked[data-tier=Mythic] .window { animation: reellock .5s cubic-bezier(.2,1.8,.4,1), reelsheen 2.2s linear infinite; }
.reel.locked[data-tier=Mythic] .strip span { color: #8a2a00; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
@keyframes reelsheen { from { background-position: 100% 0; } to { background-position: -200% 0; } }
.reel.saying { box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 0 3px #fff; background-color: rgba(14,19,48,.88); }

/* ---------------------------------------------------------------- reveal -- */
.reveal { background: radial-gradient(circle at 50% 45%, rgba(51,64,154,.78), rgba(20,27,61,.9) 75%); }
.reveal .smash { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 1; }
.reveal .smash img { position: absolute; width: min(36vw, 200px); height: min(36vw, 200px); object-fit: contain; filter: drop-shadow(0 8px 6px rgba(0,0,0,.4)); }
.reveal .flash { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: #fff; opacity: 0; }
.reveal .rays { position: fixed; inset: -50%; z-index: 0; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255,210,63,.35) 0 10deg, transparent 10deg 20deg); }
/* a headline across the top, clear of the name plate */
.reveal .mythic-word { position: fixed; z-index: 5; top: calc(var(--safe-top) + 10px); left: 0; right: 0; text-align: center; font: 400 clamp(44px, 10vw, 84px)/1 var(--display); color: #FFD23F; text-shadow: 0 6px 0 #c2410c, 0 0 40px rgba(255,210,63,.7); opacity: 0; pointer-events: none; }
.reveal .card { opacity: 0; }
.reveal.done .card, .reveal .card.shown { opacity: 1; }
.reveal .burst { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.reveal .tap-skip { position: fixed; bottom: calc(18px + var(--safe-bottom)); left: 0; right: 0; text-align: center; font-size: 15px; opacity: .6; pointer-events: none; }

/* ------------------------------------------------------------ sound box -- */
/* The mute button, same top-right corner on every screen and over everything (ux §6). */
#soundbox { position: fixed; z-index: 90; top: calc(10px + var(--safe-top)); right: 14px; width: var(--tap); height: var(--tap); }
#soundbox #mute {
  position: relative; width: var(--tap); height: var(--tap); border-radius: 50%; display: grid; place-items: center;
  background: var(--enamel-deep); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.25); color: #fff;
  -webkit-touch-callout: none; touch-action: manipulation;
}
#soundbox #mute.off { background: #4b2a52; color: #ffb3c7; }
#soundbox #mute:active { transform: translateY(2px); }
#soundbox #mute::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 4px solid var(--slime); opacity: 0; transform: scale(.7); }
#soundbox #mute.holding::after { opacity: 1; transform: scale(1); transition: transform .52s linear .08s, opacity .15s .08s; }
#soundbox.open #mute { box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), 0 0 0 3px var(--steel); }
.vol-panel {
  position: absolute; right: 0; top: calc(var(--tap) + 10px);
  width: min(300px, calc(100vw - 28px)); display: grid; gap: 6px; padding: 12px 14px;
  background: var(--paper); color: var(--ink); border-radius: 22px; box-shadow: 0 0 0 4px var(--steel), 0 16px 34px rgba(0,0,0,.45);
  animation: drop-in .2s cubic-bezier(.3,1.4,.5,1);
}
@keyframes drop-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
.vrow { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; }
.vrow .vic { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #E3E7F0; }
.vrow .vic svg { width: 22px; height: 22px; }
.vrow .vname { font-weight: 700; font-size: 15px; color: #56607f; }
.vrow input[type=range] {
  --v: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 40px; background: transparent; margin: 0; cursor: pointer;
}
.vrow input[type=range]::-webkit-slider-runnable-track { height: 12px; border-radius: 99px; background: linear-gradient(90deg, var(--enamel) var(--v), #DDE2EC var(--v)); }
.vrow input[type=range]::-moz-range-track { height: 12px; border-radius: 99px; background: linear-gradient(90deg, var(--enamel) var(--v), #DDE2EC var(--v)); }
.vrow input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -10px; border-radius: 50%; background: #fff; border: 4px solid var(--enamel); box-shadow: 0 3px 6px rgba(0,0,0,.25); }
.vrow.switch { grid-template-columns: 34px 1fr auto; grid-template-rows: auto; padding-top: 4px; border-top: 2px solid #E3E7F0; margin-top: 4px; }
.vrow.switch .vic { grid-row: auto; }
.vrow input[type=checkbox] {
  -webkit-appearance: none; appearance: none; margin: 0; width: 58px; height: 34px; border-radius: 99px; background: #DDE2EC; position: relative; cursor: pointer;
  transition: background-color .15s;
}
.vrow input[type=checkbox]::after { content: ''; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: transform .15s; }
.vrow input[type=checkbox]:checked { background: var(--enamel); }
.vrow input[type=checkbox]:checked::after { transform: translateX(24px); }
.vrow input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 4px solid var(--enamel); box-shadow: 0 3px 6px rgba(0,0,0,.25); }
/* the headers leave the top-right corner to the sound button */
.top { padding-right: calc(14px + var(--tap) + 10px); }

/* ------------------------------------------------------------- menagerie -- */
.menagerie { flex: 1; display: grid; grid-template-rows: auto auto 1fr; min-height: 0; }
.men-head { display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--safe-top)) calc(14px + var(--tap) + 10px) 6px 14px; }
.preview .men-head { padding-top: 14px; }
.men-head h1 { margin: 0; font: 400 30px/1 var(--display); flex: 1; }
.counter { text-align: center; padding: 4px 16px 10px; }
.counter .big { font: 400 clamp(46px, 13vw, 70px)/1 var(--display); text-shadow: 0 4px 0 var(--enamel-deep); }
.counter .of { font-size: 18px; opacity: .85; }
.tabs { display: flex; gap: 8px; justify-content: center; padding: 0 12px 12px; flex-wrap: wrap; }
.tab { min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--enamel-deep); font-weight: 700; }
.tab[aria-selected=true] { background: #fff; color: var(--ink); }
.sorts { display: flex; gap: 6px; justify-content: center; padding: 0 12px 12px; }
.sorts button { padding: 6px 12px; border-radius: 999px; font-size: 15px; opacity: .75; }
.sorts button[aria-pressed=true] { opacity: 1; background: rgba(255,255,255,.14); }
.shelf { background: var(--enamel-deep); border-radius: 28px 28px 0 0; padding: 16px 12px calc(20px + var(--safe-bottom)); overflow: auto; }
.shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: 12px; }
@media (min-width: 700px) { .shelf-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.mon { position: relative; border-radius: 20px; padding: 8px 8px 10px; display: grid; gap: 4px; justify-items: center; background: #F4F6FA; color: var(--ink); box-shadow: 0 0 0 4px var(--edge, #C9D0DC); }
.mon img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.mon .n { font: 400 16px/1.1 var(--display); text-align: center; overflow-wrap: anywhere; }
.mon .who-dot { position: absolute; top: 8px; left: 8px; display: flex; gap: 3px; }
.mon .who-dot i { width: 12px; height: 12px; border-radius: 50%; }
.mon[data-tier=Odd] { --edge: #2FB383; background: #E4F7EE; }
.mon[data-tier=Rare] { --edge: #6C5CE7; background: #EEEBFF; }
.mon[data-tier=Wild] { --edge: #ff5ad1; background: #241850; color: #fff; }
.mon[data-tier=Mythic] { --edge: #FFD23F; background: #FFF1BF; }
.mon:active { transform: scale(.96); }
.empty-shelf { text-align: center; padding: 30px 16px; font-size: 19px; display: grid; gap: 16px; justify-items: center; }

/* --------------------------------------------------------------- sheets -- */
.sheet { width: min(100%, 460px); background: var(--paper); color: var(--ink); border-radius: 26px; padding: 22px 18px; display: grid; gap: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.sheet h3 { margin: 0; font: 400 28px/1.1 var(--display); text-align: center; }
.sheet .row { display: flex; gap: 10px; }
.sheet .row > * { flex: 1; }
.sheet .note { text-align: center; color: #56607f; font-size: 16px; }
.sheet .pic { width: 160px; height: 160px; object-fit: contain; justify-self: center; }

/* -------------------------------------------------------------- arrival -- */
.arrival { background: radial-gradient(circle at 50% 40%, rgba(59,74,168,.82), rgba(20,27,61,.92) 80%); text-align: center; }
.arrival .box { display: grid; justify-items: center; gap: 18px; max-width: 460px; }
.arrival h2 { margin: 0; font: 400 clamp(36px, 10vw, 56px)/1.05 var(--display); color: #FFD23F; text-shadow: 0 5px 0 #c2410c; }
.arrival .pic { width: min(70vw, 300px); height: min(70vw, 300px); object-fit: contain; filter: drop-shadow(0 12px 8px rgba(0,0,0,.4)); animation: arrive .7s cubic-bezier(.3,1.5,.5,1) both .25s; }
@keyframes arrive { from { transform: translateY(-80vh) rotate(-20deg); } }
.arrival p { margin: 0; font-size: 22px; }
.arrival .row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* --------------------------------------------------------- setup / toast -- */
.setup { flex: 1; display: grid; place-content: center; justify-items: center; gap: 22px; text-align: center; padding: 30px; }
.setup img { width: 140px; border-radius: 30px; }
.setup h1 { font: 400 36px/1.1 var(--display); margin: 0; }
.setup p { margin: 0; max-width: 32ch; opacity: .85; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(24px + var(--safe-bottom)); transform: translateX(-50%); background: #fff; color: var(--ink); font-weight: 700; padding: 12px 20px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.4); max-width: calc(100% - 32px); text-align: center; animation: fade .2s; }

/* ------------------------------------------------- tablets in landscape -- */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .bench { grid-template-rows: none; grid-template-columns: minmax(380px, 42%) 1fr; }
  .bench > div:first-child { display: flex; flex-direction: column; }
  .bench .machine { flex: 1; align-content: center; padding-bottom: 40px; gap: 28px; }
  .bench .hopper { width: clamp(150px, 15vw, 210px); }
  .bench .tray { border-radius: 28px 0 0 0; padding-top: calc(var(--safe-top) + 10px); }
  /* the tray runs to the top here, so it starts with a heading row that leaves the sound button its corner */
  .bench .tray-head { display: flex; }
  .bench .top { padding-right: 14px; }
}
.tray-head { display: none; align-items: center; min-height: var(--tap); margin: 0 calc(var(--tap) + 4px) 10px 6px; font: 400 24px/1 var(--display); color: #AEB8EE; }
.tray-head span { cursor: pointer; border-radius: 10px; padding: 4px 6px; margin-left: -6px; }
.tray-head span.saying { --tc: #9BB0FF; }

@media (max-width: 480px) {
  .top { gap: 8px; }
  .bulbs { gap: 4px; padding: 8px 10px; }
  .bulb { width: clamp(9px, 3.2vw, 14px); height: clamp(9px, 3.2vw, 14px); }
  .bulbs .crate { width: 22px; height: 22px; }
  .round-btn.labelled { padding: 0 12px; gap: 6px; }
}
@media (min-width: 700px) {
  .tray-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
  .tile img { width: 100px; height: 100px; }
}

/* "Less motion" (the app's own switch in the sound panel, ux §6) */
html.calm *, html.calm *::before, html.calm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }