/* CHAINSHIFT — "Ember & Ink". Design tokens & layout. */
:root {
  /* Dark theme — "Clay & Cocoa": warm cocoa base, clay-rust ember, wheat gold. */
  --ink-bg:      #211A17;
  --ink-surface: #2C231E;
  --tile-face:   #3B2F28;
  --tile-face-hi:#4C3E34;
  --text-primary:#EFE6D8;
  --text-muted:  #A6927E;
  --ember-core:  #E0714A;
  --ember-deep:  #B4522F;
  --gold-bank:   #D8B267;
  --valid-teal:  #79B592;
  --danger-red:  #D66A5C;
  --line-subtle: #382C25;
  --path-hint:   #5AA9E6;
  --salvage:     #C9A24B;
  --on-accent:   #1E140D;   /* warm dark text that sits ON ember/gold — fixed in both themes */
  --frame-bg: radial-gradient(1100px 760px at 50% 18%, #2A211B 0%, #16100C 72%);
  --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --press:  inset 0 1px 0 var(--tile-face-hi), inset 0 -2px 0 rgba(20,14,9,.62), 0 3px 8px rgba(0,0,0,.4);
  color-scheme: dark;
}

/* ---- Light theme ("Ember & Paper"): a full re-tune, not an invert ----
   Accents are deepened so they stay legible (WCAG) on paper; letterpress uses
   a light top-highlight + warm shadow. The flame SVG keeps its own vivid fills. */
:root[data-theme="light"] {
  --ink-bg:      #ECE4D4;   /* page / board base + inset cells + reel/replay fades */
  --ink-surface: #FAF5EC;   /* cards, sheets, lifted surfaces */
  --tile-face:   #E4DAC6;   /* letter tile face */
  --tile-face-hi:#FFFDF7;   /* letterpress top highlight */
  --text-primary:#241C12;   /* warm ink */
  --text-muted:  #6B6152;
  --ember-core:  #CE560F;   /* deep ember — legible as large text and as button bg */
  --ember-deep:  #A8430B;
  --gold-bank:   #97701A;   /* deep gold — legible on paper */
  --valid-teal:  #0B7355;
  --danger-red:  #C13330;
  --line-subtle: #D8CDB8;
  --path-hint:   #2F7FC7;
  --salvage:     #8F6E24;
  --frame-bg: radial-gradient(1100px 760px at 50% 18%, #F5EFE2 0%, #E4DAC7 72%);
  --press: inset 0 1px 0 var(--tile-face-hi), inset 0 -2px 0 rgba(120,100,70,.22), 0 2px 5px rgba(90,70,40,.16);
  color-scheme: light;
}
/* Light-theme fixes for the few element backgrounds hardcoded for dark
   (modal scrims stay dark by design; these are surfaces, not scrims). */
:root[data-theme="light"] #zoneinner { background: rgba(70,52,24,.05); }
:root[data-theme="light"] #gate { background: rgba(26,19,10,.55); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--frame-bg);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  /* stop Android pull-to-refresh / overscroll chaining from stealing a downward swipe */
  overscroll-behavior: none;
}
/* the game screen never scrolls — let all touch gestures reach the reel drag */
#game { touch-action: none; }
.archivo { font-family: 'Archivo Black', Inter, sans-serif; }

/* Phone frame — fixed 393x852 design space, scaled by JS to fit the viewport
   so every absolute dp offset from the handoff stays pixel-accurate. */
#frame {
  position: relative;
  width: 393px; height: 852px;
  background: var(--ink-bg);
  overflow: hidden;
  border-radius: 44px;
  box-shadow: 0 0 0 10px #05070a, 0 0 0 12px #1b222c, 0 30px 80px rgba(0,0,0,.6);
  transform-origin: center center;
  flex: 0 0 auto;
}
body.fullbleed #frame { border-radius: 0; box-shadow: none; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; }
.screen.active { display: flex; }

/* ---- shared ---- */
.label { font-size: 12px; font-weight: 600; letter-spacing: .96px; color: var(--text-muted); text-transform: uppercase; }
.microlabel { font-size: 10px; font-weight: 600; letter-spacing: .8px; color: var(--text-muted); text-transform: uppercase; }
.tile {
  background: var(--tile-face); box-shadow: var(--press);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Archivo Black', sans-serif; position: relative;
}
.btn { cursor: pointer; user-select: none; transition: transform .09s var(--spring); }
.btn:active { transform: scale(.95); }
.card { background: var(--ink-surface); border-radius: 16px; }

/* ============ HOME ============ */
#home { padding: 78px 20px 30px; }
.sitebacklink { position: absolute; top: 32px; left: 20px; z-index: 3; font-size: 12px; font-weight: 600; letter-spacing: .3px; color: var(--text-muted); text-decoration: none; }
.sitebacklink:active { color: var(--text-primary); }
.themetoggle { position: absolute; top: 26px; right: 16px; z-index: 3; width: 34px; height: 34px; padding: 0; border: none; background: transparent; color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.themetoggle:active { color: var(--text-primary); transform: scale(.92); }
.themetoggle svg { width: 20px; height: 20px; display: block; }
.themetoggle .moon { display: none; }
:root[data-theme="light"] .themetoggle .sun { display: none; }
:root[data-theme="light"] .themetoggle .moon { display: block; }
#paused a.ptoggle { text-decoration: none; }
.wordmark { display: flex; align-items: center; justify-content: center; gap: 3px; animation: cs-in .5s both; }
.wordmark .lt { width: 27px; height: 27px; border-radius: 6px; font-size: 16px; }
.wordmark .shift-tile {
  width: 27px; height: 27px; border-radius: 6px; overflow: hidden; position: relative;
  background: var(--tile-face);
  box-shadow: inset 0 1px 0 var(--tile-face-hi), inset 0 -2px 0 rgba(13,19,25,.6), 0 0 10px rgba(255,138,61,.35);
}
.wordmark .shift-tile .col {
  position: absolute; left: 0; right: 0; top: -14px;
  display: flex; flex-direction: column; align-items: center;
  line-height: 27px; font-family: 'Archivo Black', sans-serif; font-size: 16px;
}
.wordmark .txt { font-family: 'Archivo Black', sans-serif; font-size: 26px; letter-spacing: 1px; margin-left: 5px; }

.wallet {
  margin-top: 18px; display: flex; align-items: center; justify-content: space-between;
  background: var(--ink-surface); border-radius: 14px; padding: 12px 16px; animation: cs-in .5s .04s both;
}
.wallet .amt { font-family: 'Archivo Black', sans-serif; font-size: 22px; color: var(--gold-bank); }
.wallet .tokens { display: flex; align-items: center; gap: 8px; }

.daily { margin-top: 14px; padding: 20px; animation: cs-in .5s .06s both; }
.daily .top { display: flex; align-items: center; justify-content: space-between; }
.daily .streak { display: flex; align-items: center; gap: 5px; }
.daily .streak .n { font-family: 'Archivo Black', sans-serif; font-size: 14px; color: var(--ember-core); }
.daily .chain { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.daily .chain .row { display: flex; gap: 4px; }
.daily .chain .t { width: 34px; height: 34px; border-radius: 8px; font-size: 18px; }
.daily .chain .t.out { background: transparent; border: 1.5px solid var(--line-subtle); box-shadow: none; color: var(--text-muted); }
.daily .dashes { display: flex; gap: 4px; align-items: center; }
.daily .dashes i { width: 5px; height: 2px; background: var(--line-subtle); border-radius: 1px; }
.daily .pill {
  margin-top: 14px; align-self: center;
  font-size: 11px; font-weight: 600; letter-spacing: .7px; color: var(--text-muted);
  border: 1px solid var(--line-subtle); border-radius: 999px; padding: 4px 12px;
}

.records { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; animation: cs-in .5s .12s both; }
.records .cell { height: 64px; background: var(--ink-surface); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.records .cell .v { font-family: 'Archivo Black', sans-serif; font-size: 20px; }
.records .cell .v.ember { color: var(--ember-core); }

.thumb { margin-top: auto; display: flex; flex-direction: column; gap: 12px; animation: cs-in .5s .18s both; padding-top: 14px; }
.play {
  position: relative; height: 64px; border-radius: 16px; background: var(--ember-core);
  display: flex; align-items: center; justify-content: center; animation: cs-breathe 3s ease-in-out infinite;
}
.play .glow { position: absolute; inset: 0; border-radius: 16px; box-shadow: 0 0 22px rgba(255,138,61,.5); animation: cs-glow 3s ease-in-out infinite; pointer-events: none; }
.play span { font-size: 17px; font-weight: 700; color: var(--on-accent); letter-spacing: 2px; z-index: 1; }
.outline-gold { height: 52px; border-radius: 14px; border: 1.5px solid var(--gold-bank); display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--gold-bank); }
.outline-gold span { font-size: 15px; font-weight: 700; letter-spacing: 1.2px; }
.textrow { display: flex; justify-content: center; gap: 8px; }
.textrow div { min-width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.textrow div:active { color: var(--text-primary); }

/* ============ TIERS / MODES ============ */
#tiers { padding: 64px 20px 30px; overflow-y: auto; }
#tiers .head { display: flex; align-items: center; justify-content: space-between; }
#tiers .head .title { font-family: 'Archivo Black', sans-serif; font-size: 22px; }
#tiers .sub { color: var(--text-muted); font-size: 13px; margin-top: 4px; line-height: 1.5; }
.tierlist { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.tiercard { background: var(--ink-surface); border-radius: 16px; padding: 16px 18px; border: 1.5px solid transparent; transition: border .2s, box-shadow .2s; }
.tiercard.selected { border-color: var(--ember-core); box-shadow: 0 0 18px rgba(255,138,61,.22); }
.tiercard.locked { opacity: .96; }
.tiercard .trow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tiercard .tname { font-family: 'Archivo Black', sans-serif; font-size: 18px; }
.tiercard .tlen { font-size: 12px; color: var(--text-muted); font-weight: 600; letter-spacing: .6px; }
.tiercard .demo { display: flex; gap: 4px; margin-top: 12px; flex-wrap: wrap; }
.tiercard .demo .mt { width: 26px; height: 26px; border-radius: 6px; font-size: 13px; }
.tiercard .act { margin-top: 14px; }
.tierbtn { height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 14px; letter-spacing: .8px; }
.tierbtn.selectbtn { background: var(--ember-core); color: var(--on-accent); }
.tierbtn.selectedbtn { background: transparent; border: 1.5px solid var(--valid-teal); color: var(--valid-teal); }
.tierbtn.unlockbtn { background: transparent; border: 1.5px solid var(--gold-bank); color: var(--gold-bank); }
.tierbtn.unlockbtn.disabled { border-color: var(--line-subtle); color: var(--text-muted); cursor: not-allowed; }
.tierbtn.unlockbtn.disabled:active { transform: none; }
.cost { display: inline-flex; align-items: center; gap: 5px; font-family: 'Archivo Black', sans-serif; }
.progressbar { height: 6px; border-radius: 999px; background: var(--line-subtle); margin-top: 10px; overflow: hidden; }
.progressbar > i { display: block; height: 100%; background: var(--gold-bank); border-radius: 999px; transition: width .4s var(--spring); }

/* ============ GAME ============ */
#game { }
#hud { position: absolute; top: 67px; left: 20px; right: 20px; height: 52px; display: flex; align-items: flex-start; justify-content: space-between; z-index: 10; }
#hud .banked { display: flex; align-items: center; gap: 6px; padding-top: 10px; }
#hud .banked .v { font-family: 'Archivo Black', sans-serif; font-size: 17px; color: var(--gold-bank); }
#hud .center { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.flamewrap { position: relative; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
.flamewrap .ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.flame { position: relative; display: flex; }
#hud .multline { display: flex; align-items: baseline; gap: 6px; }
#hud .multline .m { font-family: 'Archivo Black', sans-serif; font-size: 24px; color: var(--ember-core); }
#hud .multline .stake { font-size: 11px; font-weight: 600; letter-spacing: .7px; color: var(--text-muted); }
#pause { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 2px; }
#pause:active { opacity: .6; }
#pause i { width: 4px; height: 15px; border-radius: 2px; background: var(--text-muted); }

#trail { position: absolute; left: 20px; right: 20px; top: 138px; height: 252px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; overflow: hidden; pointer-events: none; }
#trail .w { display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .3s, opacity .3s; }
#trail .w .letters { display: flex; }
#trail .w .letters span { font-family: 'Archivo Black', sans-serif; font-size: 21px; color: var(--text-primary); padding: 0 3px; position: relative; border-bottom: 2px solid transparent; }
#trail .w .letters span.ch { border-bottom-color: var(--ember-core); }
#trail .w .letters span i { position: absolute; left: 50%; transform: translateX(-50%); bottom: -12px; font-style: normal; font-size: 8px; color: var(--ember-core); }
#trail .conn { width: 2px; height: 9px; background: var(--line-subtle); margin-top: 6px; }

#wordrow { position: absolute; left: 0; right: 0; top: 412px; display: flex; justify-content: center; gap: 8px; z-index: 30; }
#wordrow .ct.hint { box-shadow: inset 0 0 0 1.5px var(--path-hint), 0 0 10px rgba(90,169,230,.4), var(--press); }
#wordrow.shake { animation: cs-shake .28s; filter: drop-shadow(0 6px 0 rgba(229,72,77,.55)); }
#wordrow .ct { width: 64px; height: 64px; border-radius: 12px; font-size: 40px; cursor: pointer; color: var(--text-primary); background: var(--tile-face); box-shadow: var(--press); display: flex; align-items: center; justify-content: center; font-family: 'Archivo Black', sans-serif; position: relative; transition: transform .15s, background .3s, color .3s; }
#wordrow .ct.lift { transform: translateY(-4px); box-shadow: 0 0 12px rgba(255,138,61,.45), var(--press); z-index: 32; }
#wordrow .ct.stamp { animation: cs-stamp .38s var(--spring); box-shadow: 0 0 0 2px var(--valid-teal), var(--press); }
#wordrow.ignite .ct { background: var(--gold-bank); color: var(--on-accent); box-shadow: 0 0 18px rgba(245,196,82,.6), var(--press); }
#wordrow .ct.crumble { animation: cs-crumble .5s forwards; }
#wordrow .ct.fadeout { animation: cs-fadeout .6s forwards; }

/* smaller tiles for longer tiers so the row fits 393w */
#wordrow.len5 .ct { width: 60px; height: 60px; font-size: 34px; }
#wordrow.len6 .ct { width: 52px; height: 52px; font-size: 29px; gap: 6px; }
#wordrow.len6 { gap: 6px; }
#wordrow.len7 .ct { width: 46px; height: 46px; font-size: 25px; }
#wordrow.len7 { gap: 5px; }

#pop { position: absolute; z-index: 35; color: var(--valid-teal); font-size: 20px; font-weight: 700; pointer-events: none; display: none; }
#pop.show { display: block; animation: cs-pop .7s ease-out forwards; }

#targetzone, #overzone { position: absolute; left: 20px; right: 20px; top: 508px; display: flex; flex-direction: column; align-items: center; gap: 9px; z-index: 5; }
#targetzone .tiles, #overzone .tiles { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.gt { width: 40px; height: 40px; border-radius: 9px; position: relative; font-size: 22px; display: flex; align-items: center; justify-content: center; font-family: 'Archivo Black', sans-serif; }
.gt.unmatched { background: transparent; border: 1.5px solid var(--line-subtle); box-shadow: none; color: var(--text-muted); }
.gt.matched { background: var(--tile-face); border: 1.5px solid var(--text-primary); color: var(--text-primary); box-shadow: none; }
.gt i { position: absolute; left: 50%; transform: translateX(-50%); bottom: -14px; font-style: normal; font-size: 10px; color: var(--valid-teal); }
.bt { width: 40px; height: 40px; border-radius: 9px; border: 1.5px dashed var(--ember-core); background: transparent; box-shadow: none; font-size: 20px; color: var(--ember-core); display: flex; align-items: center; justify-content: center; font-family: 'Archivo Black', sans-serif; }
#overzone .bonushead { display: flex; align-items: center; gap: 8px; }
#overzone .bonushead .warn { font-size: 12px; font-weight: 600; letter-spacing: .96px; color: var(--ember-core); }
#overzone .bonushead .chip { font-size: 11px; font-weight: 700; letter-spacing: .8px; color: var(--on-accent); background: var(--ember-core); border-radius: 999px; padding: 3px 10px; }

/* strain */
#strain { position: absolute; inset: 0; pointer-events: none; z-index: 8; display: none; }
#strain.on { display: block; }
#strain .vig { position: absolute; inset: 0; box-shadow: inset 0 0 70px rgba(226,97,27,.45); animation: cs-vig 2.2s ease-in-out infinite; }
#strain .crk { position: absolute; width: 70px; height: 70px; background: repeating-linear-gradient(135deg, rgba(229,72,77,.5) 0 1px, transparent 1px 9px); }
#strain .crk.tl { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
#strain .crk.br { bottom: 0; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
#strain .msg { position: absolute; left: 0; right: 0; top: 594px; display: flex; justify-content: center; }
#strain .msg span { font-size: 12px; font-weight: 600; letter-spacing: 1px; color: var(--danger-red); background: repeating-linear-gradient(45deg, rgba(229,72,77,.14) 0 4px, rgba(229,72,77,.04) 4px 8px); border: 1px solid rgba(229,72,77,.5); border-radius: 999px; padding: 5px 14px; }

/* reel */
#reeldim { position: absolute; inset: 0; background: rgba(19,26,34,.6); z-index: 25; pointer-events: none; display: none; }
#reeldim.on { display: block; pointer-events: auto; }   /* the dimmed board is a stamp surface */
#reelbox { position: absolute; width: 64px; z-index: 31; overflow: hidden; pointer-events: none; display: none; }
#reelbox.on { display: block; }
#reelstrip { will-change: transform; }
#reelstrip .rl { height: 56px; display: flex; align-items: center; justify-content: center; font-family: 'Archivo Black', sans-serif; font-size: 34px; }
#reelbox .slot { position: absolute; left: -4px; right: -4px; height: 64px; border: 2px solid var(--ember-core); border-radius: 14px; box-shadow: 0 0 14px rgba(255,138,61,.4); }
#reelbox .fadeT { position: absolute; left: 0; right: 0; top: 0; height: 110px; background: linear-gradient(var(--ink-bg), rgba(19,26,34,0)); }
#reelbox .fadeB { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(rgba(19,26,34,0), var(--ink-bg)); }

/* input zone */
#zone { position: absolute; left: 0; right: 0; bottom: 0; height: 256px; z-index: 40; touch-action: none; display: flex; align-items: center; justify-content: center; padding: 20px 20px 54px; cursor: grab; }
#zone:active { cursor: grabbing; }
#zoneinner { width: 100%; height: 100%; border-radius: 18px; border: 1.5px dashed var(--line-subtle); background: rgba(28,37,48,.4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: border .2s, background .2s; }
#zoneinner.hot { border-color: rgba(255,138,61,.55); background: rgba(255,138,61,.07); }
#zoneinner.hot:active { background: rgba(255,138,61,.14); }
#zoneinner .arrow { font-size: 20px; color: var(--text-muted); }
#zoneinner .hint { font-size: 12px; font-weight: 600; letter-spacing: 1px; color: var(--text-muted); text-align: center; padding: 0 20px; }
#zoneinner .stampletter { display: none; font-family: 'Archivo Black', sans-serif; font-size: 44px; line-height: 1; color: var(--ember-core); text-shadow: 0 0 16px rgba(255,138,61,.4); }
#zoneinner.hot .arrow { display: none; }
#zoneinner.hot .stampletter { display: block; }
#zoneinner.hot .hint { color: var(--ember-core); }

/* dead end */
#deadend { position: absolute; inset: 0; z-index: 50; pointer-events: none; display: none; }
#deadend.on { display: block; }
#deadend .cracks { position: absolute; inset: 0; background: repeating-linear-gradient(63deg, rgba(229,72,77,.16) 0 1px, transparent 1px 26px), repeating-linear-gradient(-48deg, rgba(229,72,77,.16) 0 1px, transparent 1px 34px); animation: cs-crack 1.2s both; }
#deadend .body { position: absolute; left: 0; right: 0; top: 300px; z-index: 51; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#deadend .body .de { font-size: 13px; font-weight: 700; letter-spacing: 1.6px; color: var(--danger-red); }
#deadend .body .num { font-family: 'Archivo Black', sans-serif; font-size: 44px; color: var(--danger-red); text-shadow: 0 0 18px rgba(229,72,77,.5); }

/* decision sheet */
#decisiondim { position: absolute; inset: 0; background: rgba(19,26,34,.4); z-index: 55; display: none; }
#decisiondim.on { display: block; }
#decision { position: absolute; left: 0; right: 0; bottom: 0; height: 240px; background: var(--ink-surface); border-radius: 24px 24px 0 0; z-index: 60; padding: 20px 20px 40px; display: none; flex-direction: column; gap: 14px; box-shadow: 0 -8px 30px rgba(0,0,0,.4); }
#decision.on { display: flex; animation: cs-sheet .45s var(--spring) both; }
#decision .dhead { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; color: var(--gold-bank); }
#decision .risk { height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; letter-spacing: .8px; color: var(--text-primary); background: linear-gradient(90deg, rgba(245,196,82,.14) 0 50%, rgba(255,138,61,.1) 50%), repeating-linear-gradient(63deg, transparent 0 34px, rgba(229,72,77,.35) 34px 35px, transparent 35px 60px); }
#decision .choices { display: flex; gap: 12px; flex: 1; }
#decision .choice { flex: 1; height: 72px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
#decision .choice .top { display: flex; align-items: center; gap: 6px; }
#decision .choice.bank { background: var(--gold-bank); }
#decision .choice.bank .name { font-size: 17px; font-weight: 700; color: var(--on-accent); letter-spacing: 1.4px; }
#decision .choice.bank .sub { font-size: 11px; font-weight: 600; color: rgba(19,26,34,.7); }
#decision .choice.over { background: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 4px, transparent 4px 9px), linear-gradient(180deg, var(--ember-core), var(--ember-deep)); box-shadow: 0 0 14px rgba(255,138,61,.35); }
#decision .choice.over .name { font-size: 15px; font-weight: 700; color: var(--on-accent); letter-spacing: .6px; }
#decision .choice.over .sub { font-size: 10px; font-weight: 600; color: rgba(19,26,34,.75); }

/* pause */
#paused { position: absolute; inset: 0; background: rgba(11,15,20,.85); z-index: 70; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
#paused.on { display: flex; }
#paused .title { font-family: 'Archivo Black', sans-serif; font-size: 22px; letter-spacing: 2px; }
#paused .resume { width: 220px; height: 56px; border-radius: 14px; background: var(--ember-core); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; letter-spacing: 1.4px; }
#paused .quit { width: 220px; height: 52px; border-radius: 14px; border: 1.5px solid var(--line-subtle); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; letter-spacing: 1px; }
#paused .quit:active { color: var(--text-primary); }

#particles { position: absolute; inset: 0; z-index: 45; pointer-events: none; }
#particles .p { position: absolute; width: 8px; height: 8px; border-radius: 2px; }

/* ============ RESULTS ============ */
#results { padding: 64px 20px 40px; }
#replaywrap { position: relative; }
#replay {
  position: relative; height: 268px;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                 /* hide scrollbar (Firefox) */
}
#replay::-webkit-scrollbar { display: none; }   /* hide scrollbar (WebKit) */
/* min-height:100% centers a short chain; a long chain grows past it and scrolls,
   so the player can drag through all their guesses and the newest stays reachable. */
#replayrows { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 0; box-sizing: border-box; }
#replay .rr { position: relative; display: flex; gap: 4px; flex: 0 0 auto; }
#replay .rr.fail { opacity: .5; }
#replay .rr.fail .rt { background: rgba(38,49,63,.5); }
#replay .rr .xmark { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 6px; color: var(--danger-red); font-size: 13px; font-weight: 700; }
/* soft fade top/bottom so clipped rows hint there's more to scroll */
#replay::before, #replay::after { content: ''; position: sticky; left: 0; right: 0; height: 18px; display: block; z-index: 2; pointer-events: none; }
#replay::before { top: 0; margin-bottom: -18px; background: linear-gradient(var(--ink-bg), rgba(19,26,34,0)); }
#replay::after { bottom: 0; margin-top: -18px; background: linear-gradient(rgba(19,26,34,0), var(--ink-bg)); }
#replay .rr .rt { width: 32px; height: 32px; border-radius: 7px; border: 1.5px solid var(--line-subtle); background: var(--tile-face); display: flex; align-items: center; justify-content: center; font-family: 'Archivo Black', sans-serif; font-size: 17px; color: var(--text-primary); box-shadow: none; }
#replaybtn { position: absolute; top: 0; right: 0; z-index: 3; width: 48px; height: 48px; border-radius: 12px; border: 1.5px solid var(--line-subtle); background: var(--ink-bg); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
#replaybtn:active { color: var(--text-primary); }
#scoreblock { flex: 1; display: flex; flex-direction: column; min-height: 0; opacity: 0; }
#scoreblock.show { animation: cs-in .5s both; opacity: 1; }
#scoreblock .totalwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#scoreblock .total { display: flex; align-items: center; gap: 8px; }
#scoreblock .total .v { font-family: 'Archivo Black', sans-serif; font-size: 40px; color: var(--gold-bank); }
#scoreblock .chip { font-size: 11px; font-weight: 600; letter-spacing: .8px; border-radius: 999px; padding: 5px 12px; margin-top: 4px; white-space: nowrap; display: inline-block; }
#scoreblock .earned { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--gold-bank); letter-spacing: .5px; }
#statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
#statgrid .cell { height: 72px; background: var(--ink-surface); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
#statgrid .cell .v { font-family: 'Archivo Black', sans-serif; font-size: 20px; }
#statgrid .cell .v.ember { color: var(--ember-core); }
#sharecard { margin-top: 12px; background: var(--ink-surface); border-radius: 12px; padding: 12px 16px; display: none; flex-direction: column; align-items: center; gap: 4px; }
#sharecard.on { display: flex; }
#sharecard .path { font-size: 18px; letter-spacing: 2px; }
#results .thumb { margin-top: 14px; }

/* keyframes */
@keyframes cs-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes cs-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes cs-glow { 0%,100% { opacity: .45; } 42% { opacity: .8; } 58% { opacity: .55; } 80% { opacity: .75; } }
@keyframes cs-shake { 0%,100% { transform: none; } 15% { transform: translateX(-6px); } 30% { transform: translateX(6px); } 45% { transform: translateX(-6px); } 60% { transform: translateX(6px); } 80% { transform: translateX(-3px); } }
@keyframes cs-stamp { 0% { transform: scale(.92); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes cs-pop { 0% { opacity: 0; transform: translate(-50%,6px) scale(.6); } 30% { opacity: 1; transform: translate(-50%,-4px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%,-20px) scale(1); } }
@keyframes cs-crumble { 20% { transform: translateY(2px) rotate(-2deg); } 100% { transform: translateY(80px) rotate(9deg); opacity: 0; } }
@keyframes cs-fadeout { to { opacity: 0; } }
@keyframes cs-vig { 0%,100% { opacity: .35; } 50% { opacity: .75; } }
@keyframes cs-sheet { from { transform: translateY(260px); } to { transform: none; } }
@keyframes cs-flare { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes cs-part { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rr)); opacity: 0; } }
@keyframes cs-stampin { 0% { opacity: 0; transform: scale(.8); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes cs-crack { 0%,100% { opacity: 0; } 20%,70% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .play, .play .glow { animation: none; }
}
body.reduce-motion #wordrow.shake { animation: cs-fadep .3s; }
@keyframes cs-fadep { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
body.reduce-motion #wordrow .ct.crumble { animation: cs-fadeout .6s forwards; }

/* ============ ADDED: hints, hold-to-confirm, zone mult, coach, toast ============ */

/* multiplier echoed at the bottom, where the eyes are during a spin */
#zoneinner .zonemult { display: none; font-family: 'Archivo Black', sans-serif; font-size: 16px; line-height: 1; color: var(--ember-core); margin-top: 2px; }
#zoneinner.hot .zonemult { display: block; }

/* OVEREXTEND hold-to-confirm progress bar */
#decision .choice.over { position: relative; overflow: hidden; }
#decision .choice.over::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  height: 4px; width: var(--hold, 0%); background: var(--gold-bank);
  transition: width .04s linear;
}

/* pause-sheet toggles + replay speed chip */
#paused .ptoggle { width: 220px; height: 44px; border-radius: 12px; border: 1px solid var(--line-subtle); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; letter-spacing: 1px; }
#paused .ptoggle:active { color: var(--text-primary); }
#speedChip { position: absolute; top: 0; right: 56px; z-index: 3; width: 44px; height: 48px; border-radius: 12px; border: 1.5px solid var(--line-subtle); background: var(--ink-bg); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-weight: 700; font-size: 13px; }
#speedChip:active { color: var(--text-primary); }

/* first-run coach overlay — purely visual (pointer-events:none) so it never blocks a tap */
/* first-run tutorial gate */
#gate { position: absolute; inset: 0; z-index: 95; display: none; background: rgba(11,15,20,.93); padding: 0 22px; box-sizing: border-box; overflow-y: auto; }
#gate.on { display: flex; align-items: center; justify-content: center; }
.gatecard { width: 100%; max-width: 344px; background: var(--ink-surface); border: 1px solid var(--line-subtle); border-radius: 20px; padding: 24px 20px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: cs-in .4s both; }
.gatebrand { font-family: 'Archivo Black', sans-serif; font-size: 14px; letter-spacing: 2px; color: var(--ember-core); text-align: center; }
.gatetitle { font-family: 'Archivo Black', sans-serif; font-size: 22px; text-align: center; margin-top: 4px; }
.gatesteps { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: g; }
.gatesteps li { position: relative; padding-left: 34px; font-size: 13px; line-height: 1.45; color: var(--text-muted); counter-increment: g; }
.gatesteps li b { color: var(--text-primary); font-weight: 700; }
.gatesteps li::before { content: counter(g); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--tile-face); color: var(--ember-core); font-family: 'Archivo Black', sans-serif; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.gatebtn { margin-top: 22px; height: 56px; border-radius: 14px; background: var(--ember-core); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; letter-spacing: 1px; box-shadow: 0 0 18px rgba(255,138,61,.35); }
.gateskip { margin-top: 10px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.gateskip:active { color: var(--text-primary); }

/* stats sheet */
#statsDim { position: absolute; inset: 0; z-index: 88; background: rgba(11,15,20,.6); display: none; }
#statsDim.on { display: block; }
#statsSheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 89; background: var(--ink-surface); border-radius: 24px 24px 0 0; padding: 20px 20px 40px; display: none; box-shadow: 0 -8px 30px rgba(0,0,0,.4); }
#statsSheet.on { display: block; animation: cs-sheet .4s var(--spring) both; }
.statshead { display: flex; align-items: center; justify-content: space-between; font-family: 'Archivo Black', sans-serif; font-size: 16px; letter-spacing: 1px; margin-bottom: 14px; }
.statsx { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 15px; }
.statsgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.statsgrid .cell { height: 70px; background: var(--ink-bg); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.statsgrid .cell .v { font-family: 'Archivo Black', sans-serif; font-size: 20px; }
.statsgrid .cell .v.ember { color: var(--ember-core); }
.statsgrid .cell .v.gold { color: var(--gold-bank); }

#coach { position: absolute; inset: 0; z-index: 80; display: none; pointer-events: none; }
#coach.on { display: block; }
#coachHole { position: absolute; border-radius: 16px; box-shadow: 0 0 0 2000px rgba(11,15,20,.74); transition: all .3s var(--spring); }
#coachCap { position: absolute; left: 24px; right: 24px; text-align: center; font-size: 14px; font-weight: 600; color: var(--text-primary); text-shadow: 0 1px 6px #000; }

/* one-time token explainer toast */
#toast { position: absolute; left: 20px; right: 20px; bottom: 40px; z-index: 90; background: var(--ink-surface); border: 1px solid var(--line-subtle); border-radius: 12px; padding: 12px 14px; font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.45; opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s; pointer-events: none; }
#toast.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  #coachHole { transition: none; }
  #decision .choice.over::after { transition: none; }
}