/* Elixir Hour — global styles. Palette per GDD §12 (roles fixed). */
:root{
  --sage:#9CAF88; --sage-deep:#6B7F5C; --sage-pale:#C7D3B5;
  --elixir:#7A3FA0; --glow:#B26AE0;
  --wood-dark:#3A2A20; --wood:#6E4B2A; --amber:#E8B770;
  --night:#1C1B3A; --cream:#F4ECDD; --charcoal:#241F1B;
  --blue:#2E6FD6; --red:#C8392F;          /* accents only — never dominant */
  --gold:#c9a55a; --ink:#4a3a28; --ink-soft:#7a6748;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{background:#141019; font-family:'Nunito',sans-serif; overflow:hidden;}

/* The stage: everything is laid out in a fixed 1280×720 design space
   (the mockup's reference resolution) and the whole stage scales to fit
   the window — see src/stage.js. */
#viewport{position:fixed; inset:0;}
#stage{position:absolute; left:0; top:0; width:1280px; height:720px; overflow:hidden;
  background:var(--night); transform-origin:0 0; user-select:none;}
.screen{position:absolute; inset:0; display:none;}
.screen.active{display:block;}

/* buttons (mockup style) */
.btn{font-family:'Baloo 2',cursive; font-size:20px; border:none; border-radius:12px; padding:11px 0;
  cursor:pointer; letter-spacing:.05em;
  background:linear-gradient(180deg,#fdf6e8,var(--cream)); color:var(--charcoal); box-shadow:0 4px 0 #b7a888;}
.btn.primary{background:linear-gradient(180deg,var(--glow),var(--elixir)); color:#fff; box-shadow:0 4px 0 #572c73;}
.btn.sage{background:linear-gradient(180deg,var(--sage-pale),var(--sage)); color:var(--charcoal); box-shadow:0 4px 0 var(--sage-deep);}
.btn:active{transform:translateY(2px); box-shadow:none;}
.btn:disabled{opacity:.45; cursor:default;}
.btn:disabled:active{transform:none; box-shadow:0 4px 0 #b7a888;}
.btn.small{font-size:15px; padding:8px 26px;}

/* ---------- TITLE / LOADING ---------- */
#title-bg{width:100%; height:100%; object-fit:cover; filter:brightness(.85);}
#fx{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
#title-logo{position:absolute; top:9%; left:50%; transform:translateX(-50%); width:44%;
  filter:drop-shadow(0 0 22px rgba(178,106,224,.35));}  /* soft Elixir glow re-added over the cut-out */
#title-menu{position:absolute; bottom:12%; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:12px; width:240px;}
/* visible build stamp (bottom-right corner) — recessive, but readable so Tessa
   can confirm which build loaded and copy it into a bug report. Bumped with the
   ?v= cache token (see strings.js BUILD). */
#build-stamp{position:absolute; right:10px; bottom:7px; z-index:8;
  font-family:'Nunito',sans-serif; font-size:10px; letter-spacing:.04em;
  color:rgba(244,236,221,.34); text-shadow:0 1px 2px rgba(0,0,0,.55);
  pointer-events:none; user-select:text;}

/* ---------- HERALD INTERSTITIAL ---------- */
#herald-wrap{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, #2a2347, #141019 75%);}
#broadsheet{width:54%; background:linear-gradient(175deg,#f7efdc,#e9dcc0); border-radius:6px;
  padding:38px 42px; color:var(--charcoal); box-shadow:0 24px 60px rgba(0,0,0,.7);
  transform:rotate(-1.2deg); border:1px solid #cbbd9c; cursor:pointer;}
#herald-masthead{font-family:'Pirata One',cursive; font-weight:400; font-size:34px; letter-spacing:.04em;
  border-bottom:3px double #8a7a5e; padding-bottom:8px; text-align:center;}
#herald-ed{text-align:center; font-family:'Cormorant Garamond',serif; font-weight:600; font-size:15px;
  color:var(--ink-soft); margin-top:6px;}
#herald-head{font-family:'Baloo 2',cursive; font-size:20px; margin:16px 0 8px;}
#herald-story{font-size:15px; line-height:1.55; font-weight:600;}
.cont{margin-top:22px; text-align:center; font-family:'Baloo 2',cursive; color:var(--sage-deep); font-size:14px;}

/* ---------- SERVE SCREEN — the two-layer composite (GDD §12) ----------
   Layer 1: #ms, the LOCKED master scene image (§15, shipped 06-07): the
   destarred full-width counter baked in, counter top at 71.9% of the frame.
   object-fit:cover fills the 16:9 stage (the art is 1.792 vs 1.778 — a ~5px/side
   crop) and preserves the vertical 71.9% fraction, so the cast anchor (stage.js
   counterY 0.719) lands on the baked counter. Never regenerate this art.
   Layer 2: #serve-char, the no-bar cutout, placed programmatically
   (src/screens.js) by torso-base to the counter line. No occlusion layer. */
#ms{position:absolute; inset:0; overflow:hidden;}
#ms-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;}
#serve-char{position:absolute; z-index:3; transform:translateX(-50%);}
#serve-shadow{position:absolute; z-index:2; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(ellipse, rgba(8,6,4,.4) 0%, rgba(8,6,4,.2) 48%, transparent 72%);}
#serve-bubble{left:2%; width:36%; display:none;}
#serve-bubble.on{display:block;}
#serve-bubble:after{left:52%;}   /* tail points down at the cast anchor */
#serve-bubble.notail:after{display:none;}
#serve-bubble .line em{color:var(--ink-soft); font-style:italic; font-weight:600;}

/* Sage's own home (Fix 4): bottom-LEFT, sage-tinted cream, NO tail — the keeper
   speaks from behind the counter, not from above the customer. Shares the
   .bubble look; overrides fill/border to the sage tint. Sits in the same
   bottom-left column as the choice stack; the two are never on at once
   (dialogue mode is line XOR choice), so no z-fighting. */
#sage-bubble{left:2%; bottom:4%; top:auto; width:36%; z-index:7; display:none;
  background:#E9EFDC; border:2px solid #c6d2b4;}
#sage-bubble.on{display:block;}
#sage-bubble:after{display:none;}                 /* never a tail toward the customer */
#sage-bubble .speaker{color:var(--sage-deep);}    /* deep sage #6B7F5C label */
#sage-bubble .line em{color:var(--ink-soft); font-style:italic; font-weight:600;}

/* tone-shaping choices (GDD §14.4) — anchored bottom-LEFT, stacked up from
   the bottom (the mixing panel owns bottom-right), so the block never covers
   the character's face; overlapping the lower body/counter is fine */
#serve-choices{position:absolute; left:2%; bottom:4%; width:36%; z-index:7; display:none;
  flex-direction:column; gap:8px; justify-content:flex-end;}
#serve-choices.on{display:flex;}
.choice-prompt{font-family:'Baloo 2',cursive; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cream); text-shadow:0 2px 4px rgba(0,0,0,.6); padding-left:4px;}
.choice-btn{font-family:'Nunito',sans-serif; font-weight:600; font-size:13.5px; text-align:left;
  background:var(--cream); color:var(--charcoal); border:2.5px solid #d8cbb2; border-radius:12px;
  padding:8px 12px; cursor:pointer; box-shadow:0 3px 0 #b7a888;}
.choice-btn:hover{border-color:var(--sage); background:#fdf6e8;}
.choice-btn:active{transform:translateY(2px); box-shadow:none;}
body.portrait #serve-choices{left:4%; top:auto; bottom:37.5%; width:78%;}  /* above the stacked panel */

/* dialogue bubble (shared look, from the mockup) */
.bubble{position:absolute; background:var(--cream); border-radius:14px; padding:7px 14px 9px; z-index:5;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));}
/* tail overlaps 2px UP into the body (bottom:-9 not -11) so body + tail read as
   ONE cream silhouette — the drop-shadow on .bubble covers the outer edge only,
   with no dark seam where the triangle meets the body (Fix 9). */
.bubble:after{content:""; position:absolute; bottom:-9px; left:46%; border:8px solid transparent;
  border-top-color:var(--cream); border-width:11px 9px 0;}
.bubble .speaker{font-family:'Baloo 2',cursive; font-size:12px; letter-spacing:.06em; color:var(--sage-deep); text-transform:uppercase;}
.bubble .line{font-size:13.5px; line-height:1.35; color:var(--charcoal); font-weight:600; margin-top:3px;}

/* ---------- MIXING PANEL (Mixing UI Panel Spec, ported from the mockup) ---------- */
#panel-frame{font-size:13px; position:absolute; right:1.2%; bottom:1.6%; left:40.6%; height:33%; z-index:6;
  background:linear-gradient(160deg,#4a3527,#3A2A20 60%,#2e2118); border:3px solid #241a12; border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); padding:14px;
  display:flex; gap:14px; transition:all .45s ease;}
#panel-info{position:absolute; right:10px; top:10px; width:26px; height:26px; border-radius:50%;
  background:var(--gold); color:#241a12; font-family:'Baloo 2',cursive; font-weight:800;
  text-align:center; line-height:26px; cursor:pointer; z-index:2;}
.slotcol{display:flex; flex-direction:column; gap:8px; width:150px;}
.slot{background:var(--cream); border-radius:12px; padding:5px 10px; cursor:pointer; border:2.5px solid #d8cbb2; position:relative;}
.slot:hover{border-color:var(--sage);}
.slot small{display:block; font-size:9.5px; letter-spacing:.12em; color:#8a7a5e; font-family:'Baloo 2',cursive; text-transform:uppercase;}
.slot b{font-family:'Baloo 2',cursive; font-size:15px; color:var(--charcoal);}
.slot .dot{position:absolute; right:9px; top:50%; transform:translateY(-50%); width:16px; height:16px; border-radius:50%;}
.picker{position:absolute; left:105%; top:0; background:var(--cream); border-radius:12px; border:2.5px solid #d8cbb2;
  display:none; z-index:9; width:132px; padding:6px;}
.picker div{padding:5px 8px; border-radius:8px; font-family:'Baloo 2',cursive; font-size:13.5px; color:var(--charcoal); cursor:pointer;}
.picker div:hover{background:var(--sage); color:#fff;}
.meters{flex:1; background:rgba(0,0,0,.25); border-radius:12px; padding:10px 14px;
  display:flex; flex-direction:column; justify-content:space-around;}
.meter{display:flex; align-items:center; gap:8px;}
.meter label{width:58px; font-family:'Baloo 2',cursive; font-size:11.5px; letter-spacing:.08em; color:var(--cream);}
.segs{display:flex; gap:3px; flex:1;}
.seg{height:9px; flex:1; border-radius:3px; background:rgba(255,255,255,.13);}
.seg.on.warmth{background:var(--amber);} .seg.on.kick{background:#d4574e;}
.seg.on.chill{background:#6fa7d8;} .seg.on.bite{background:#8a67a8;}
.dose-spacer{height:26px;}
.rightcol{width:150px; display:flex; flex-direction:column; gap:8px; align-items:stretch;}
#recipe{background:var(--cream); border-radius:12px; border:2.5px solid #d8cbb2; text-align:center; padding:6px 4px 7px;}
#tankard{height:38px; transform:translateX(-12%);}  /* optical-centre on the mug body, not the handle */
#recipename{font-family:'Baloo 2',cursive; font-size:12.5px; color:var(--charcoal); min-height:16px;}
.pbtn{font-family:'Baloo 2',cursive; font-size:14.5px; border:none; border-radius:12px; padding:6px 0;
  cursor:pointer; letter-spacing:.05em; background:var(--cream); color:var(--charcoal); box-shadow:0 3px 0 #b7a888;}
.pbtn.pour{background:linear-gradient(180deg,var(--glow),var(--elixir)); color:#fff; box-shadow:0 3px 0 #572c73; font-size:17px;}
.pbtn:active{transform:translateY(2px); box-shadow:none;}
.dose{display:flex; align-items:center; gap:10px; position:absolute; bottom:10px; left:14px; right:180px;}
.dose span{font-family:'Baloo 2',cursive; font-size:11.5px; color:var(--cream); letter-spacing:.08em;}
/* the drop slider (Fix 1): notched track with • •• ••• pips under the three
   detents + a live "{n} drop(s)" label that tracks the handle, so the player
   can map "one drop" to the control. --th must equal TH in brew.js. */
.dose-track{flex:1; position:relative; height:30px; display:flex; align-items:center;}
.dose-track input{width:100%; margin:0; accent-color:var(--glow); position:relative; z-index:2;}
.dose-pips{position:absolute; left:0; right:0; bottom:-1px; height:12px; z-index:1;
  --th:14px; margin:0 calc(var(--th)/2); pointer-events:none;
  display:flex; justify-content:space-between; align-items:flex-start;}
.dose-pips span{font-size:9px; line-height:1; letter-spacing:1px; color:var(--cream);
  opacity:.7; font-family:'Nunito',sans-serif; transform:translateX(-50%);}
.dose-pips span:first-child{transform:none;}
.dose-pips span:last-child{transform:translateX(-100%);}
.dose-live{position:absolute; top:-14px; z-index:3; transform:translateX(-50%);
  font-family:'Baloo 2',cursive; font-size:10.5px; letter-spacing:.04em; white-space:nowrap;
  color:var(--glow); text-shadow:0 1px 3px rgba(0,0,0,.7); pointer-events:none;}
body.portrait .dose-live{font-size:9.5px;}
#panel-frame.brewing{height:11%; bottom:44%; opacity:.96;}
#panel-frame.brewing .meters,#panel-frame.brewing .slotcol,#panel-frame.brewing .dose{display:none;}
#brewstrip{position:absolute; right:1.2%; bottom:1.6%; left:40.6%; height:40.5%; z-index:6; display:none; gap:12px;}
#brewstrip.on{display:flex;}
.brewpanel{flex:1; border-radius:14px; border:3px solid #241a12; background:#2e2118; position:relative; overflow:hidden;}
.brewpanel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.brewpanel .fill{position:absolute; inset:0; background:rgba(20,12,28,.85); animation:brewreveal .6s ease forwards;}
.brewpanel:nth-child(2) .fill{animation-delay:.7s;} .brewpanel:nth-child(3) .fill{animation-delay:1.4s;}
@keyframes brewreveal{from{opacity:1;} to{opacity:0;}}

/* ---------- per-Night light shift (GDD §8) ----------
   A subtle per-Night lighting change done by tinting the scene
   programmatically (never regenerated art): warm gold (Night 1) →
   deepening dusk blue (Night 2) → late-night candlelight + purple
   tap-glow (Night 3). The .scene-tint overlay soft-lights the scene AND
   the character (cohesive lighting) but sits UNDER the UI (panel, bubbles,
   choices) so text stays readable. The mood is set by #stage.night{N},
   driven from Game.state.night. */
.scene-tint{position:absolute; inset:0; pointer-events:none; z-index:4;
  background:var(--night-tint, transparent); mix-blend-mode:soft-light;
  transition:background .7s ease;}
#stage.night1{--night-tint:transparent;}
#stage.night2{--night-tint:rgba(58,104,188,0.62);}   /* dusk — the window cools to blue */
#stage.night3{--night-tint:rgba(52,32,88,0.82);}     /* late night — purple candlelight */
/* Night 3: candlelight — dim the GROUP-screen wall a touch (that screen still
   uses the CSS placeholder). The serve master scene is a baked image now, tinted
   as a whole by .scene-tint; its window/tap accents no longer have separate CSS
   hooks (flagged in PLAN — the whole-scene wash remains the primary mood). */
#stage.night3 #g-wall{filter:brightness(0.84) saturate(1.06);}

/* ---------- PORTRAIT REFLOW (GDD §13: stacked serve screen) ---------- */
/* the landscape master scene occupies the TOP band; object-fit:cover crops its
   width and its 71.9% counter top lands at ~0.719×64% ≈ 46% of the portrait
   stage (matching stage.js portrait counterY 0.46). Below the band is the
   letterbox backfill. */
body.portrait #ms-img{top:0; bottom:auto; height:64%; object-position:center top;}
body.portrait #screen-serve{background:#241a12;}
body.portrait #serve-bubble{left:4%; top:3%; width:70%;}
body.portrait #sage-bubble{left:4%; top:auto; bottom:37.5%; width:78%;}  /* above the stacked panel, matching the choice stack */
body.portrait #panel-frame{left:3%; right:3%; top:64%; bottom:2.5%; height:auto; flex-wrap:wrap;}
body.portrait .slotcol{width:44%;}
body.portrait .rightcol{width:48%;}
body.portrait .meters{flex-basis:100%; order:3;}
body.portrait .picker{left:0; top:105%;}
body.portrait #panel-frame.brewing{top:auto; height:9%; bottom:38.5%;}
body.portrait #brewstrip{left:3%; right:3%; top:64%; bottom:2.5%; height:auto;}
body.portrait #title-logo{width:78%; top:13%;}
body.portrait #broadsheet{width:88%; padding:30px 26px;}
body.portrait .panel{width:88%;}
/* portrait: group counter becomes a band mid-frame (the row shrinks to fit
   five across); duo stacks its split top/bottom; epilogue sheet widens */
body.portrait #screen-group{background:#241a12;}
body.portrait #g-wall{height:52%;}
body.portrait #g-counter{top:52%; height:15%; bottom:auto;}
body.portrait .duo-half.left{clip-path:polygon(0 0, 100% 0, 100% 44%, 0 56%);}
body.portrait .duo-half.right{clip-path:polygon(0 56%, 100% 44%, 100% 100%, 0 100%);}
body.portrait .duo-half.left img,body.portrait .duo-half.right img{left:50%;}
body.portrait #duo-box{width:88%; bottom:2.5%;}
body.portrait #epi-sheet{width:88%; padding:26px 24px;}

/* ---------- PLACEHOLDER PANELS (night-end only now) ---------- */
.placeholder{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; text-align:center; padding:0 10%;
  background:radial-gradient(circle at 50% 45%, #33284a, #141019 80%); color:var(--cream);}
.placeholder b{font-family:'Baloo 2',cursive; font-size:30px; letter-spacing:.03em;}
.placeholder span{font-size:15px; opacity:.75; max-width:560px; line-height:1.5;}

/* ---------- GROUP — Layout 3 (GDD §11): the whole room, no mixing UI ----------
   Late-night dressing of the same master-scene placeholder: darker wall,
   warmer lamp pools, ONE counter. Cast row + bubble placed programmatically
   (src/screens.js renderGroup / groupLine). */
#g-wall{position:absolute; left:0; right:0; top:0; height:82%;
  background:
    radial-gradient(ellipse 40% 55% at 20% 30%, rgba(232,183,112,.14), transparent 70%),
    radial-gradient(ellipse 40% 55% at 80% 28%, rgba(232,183,112,.12), transparent 70%),
    radial-gradient(ellipse 30% 40% at 50% 60%, rgba(178,106,224,.10), transparent 75%),
    linear-gradient(180deg, #1c130d 0%, #2e2015 45%, #43301f 82%, #55391f 100%);}
#g-counter{position:absolute; left:0; right:0; top:82%; bottom:0;
  background:linear-gradient(180deg, #7a5530 0%, #6E4B2A 7%, #4a3220 46%, #3A2A20 100%);
  box-shadow:inset 0 3px 0 rgba(244,236,221,.14), inset 0 14px 22px rgba(0,0,0,.25);}
#group-row .g-char{position:absolute; transform:translateX(-50%); z-index:3;}
#group-row .g-shadow{position:absolute; transform:translateX(-50%); border-radius:50%; z-index:2;
  background:radial-gradient(ellipse, rgba(8,6,4,.4) 0%, rgba(8,6,4,.2) 48%, transparent 72%);}
#group-bubble{display:none;}
#group-bubble.on{display:block;}
#group-bubble:after{left:var(--tailx, 46%);}
#group-bubble.notail:after{display:none;}
#group-bubble .line em{color:var(--ink-soft); font-style:italic; font-weight:600;}

/* ---------- SPLIT DUOLOGUE — Layout 5 (GDD §11) ----------
   Two customers on a diagonal split canvas; the words go in a bottom-centre
   name-box in the speaker's colour; the silent half dims a touch. */
#screen-duo{background:#141019;}
.duo-half{position:absolute; inset:0; overflow:hidden; transition:filter .3s ease;}
.duo-half.left{clip-path:polygon(0 0, 56% 0, 44% 100%, 0 100%);
  background:radial-gradient(ellipse 60% 70% at 30% 35%, rgba(178,106,224,.14), transparent 75%),
             linear-gradient(160deg, #33284a, #221b33 70%, #18132a);}
.duo-half.right{clip-path:polygon(56% 0, 100% 0, 100% 100%, 44% 100%);
  background:radial-gradient(ellipse 60% 70% at 70% 35%, rgba(232,183,112,.16), transparent 75%),
             linear-gradient(200deg, #4a3423, #34251a 70%, #241a12);}
.duo-half img{position:absolute; transform:translateX(-50%);}
.duo-half.left img{left:24%;}
.duo-half.right img{left:76%;}
.duo-half.dim{filter:brightness(.6) saturate(.8);}
#duo-box{position:absolute; left:50%; transform:translateX(-50%); bottom:4.5%; width:58%; z-index:5;
  background:var(--cream); border-radius:14px; padding:10px 20px 13px; display:none;
  box-shadow:0 10px 26px rgba(0,0,0,.5);}
#duo-box.on{display:block;}
#duo-box .speaker{font-family:'Baloo 2',cursive; font-size:13px; letter-spacing:.06em; text-transform:uppercase;}
#duo-box .line{font-size:15px; line-height:1.4; color:var(--charcoal); font-weight:600; margin-top:3px;}
#duo-box .line em{color:var(--ink-soft); font-style:italic; font-weight:600;}

/* ---------- EPILOGUE — the morning-after Herald (GDD §9) ---------- */
#epi-wrap{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px;
  background:radial-gradient(circle at 50% 40%, #2a2347, #141019 75%);}
#epi-sheet{width:54%; background:linear-gradient(175deg,#f7efdc,#e9dcc0); border-radius:6px;
  padding:30px 40px; color:var(--charcoal); box-shadow:0 24px 60px rgba(0,0,0,.7);
  transform:rotate(-1deg); border:1px solid #cbbd9c;}
#epi-masthead{font-family:'Pirata One',cursive; font-weight:400; font-size:32px; letter-spacing:.04em;
  border-bottom:3px double #8a7a5e; padding-bottom:8px; text-align:center;}
#epi-ed{text-align:center; font-family:'Cormorant Garamond',serif; font-weight:600; font-size:15px;
  color:var(--ink-soft); margin-top:6px;}
#epi-head{font-family:'Baloo 2',cursive; font-size:19px; margin:14px 0 6px;}
#epi-story,#epi-conseq,#epi-story2{font-size:14px; line-height:1.5; font-weight:600; margin-top:9px;}
#epi-conseq{font-style:italic; color:#5c4326;
  border-left:3px solid var(--gold); padding-left:12px;}   /* the ripple — one line, one brew */
#epi-final{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:21px; color:var(--cream);
  letter-spacing:.02em; text-align:center; text-shadow:0 2px 10px rgba(0,0,0,.6);}

/* ---------- TOME OVERLAY (mockup geometry; §11 marginalia rule) ---------- */
#tome{position:absolute; inset:0; z-index:30; display:none; animation:tomein .3s ease;}
#tome.open{display:block;}
@keyframes tomein{from{opacity:0; transform:scale(1.02);} to{opacity:1; transform:none;}}
#tomeimg{position:absolute; inset:0; width:100%; height:100%;}
#tomeclose{position:absolute; top:2.5%; right:1.5%; width:34px; height:34px; border-radius:50%;
  background:rgba(20,14,10,.72); color:#e8d9bd; font-family:'Baloo 2',cursive; font-size:17px;
  text-align:center; line-height:33px; cursor:pointer; z-index:35; border:2px solid #6b5638;}
.tab{position:absolute; left:85.5%; width:9%; z-index:34; cursor:pointer;
  display:flex; align-items:center; justify-content:center;}
.tab svg{width:26px; height:26px; opacity:.85; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); transition:all .2s ease;}
.tab:hover svg{transform:translateX(-3px);}
.tab.on svg{opacity:1; filter:drop-shadow(0 0 6px rgba(255,255,255,.9));}
#tab-brew{top:19.6%; height:8.4%;} #tab-ledger{top:34.45%; height:8.9%;}
#tab-herald{top:50.3%; height:8.9%;} #tab-song{top:65.15%; height:9%;}
/* NO scrollbars anywhere in the Tome (GDD §11) — the book turns pages */
#pageL{position:absolute; left:18.5%; top:15%; width:24.5%; height:68%; z-index:33; color:var(--ink); overflow:hidden; padding:0 10px;}
#pageR{position:absolute; left:55%; top:15%; width:26%; height:68%; z-index:33; color:var(--ink); overflow:hidden; padding:0 10px;}

/* the character spread (GDD §11): card top-left, nameplate beside it at the
   card's mid-height — no title banner, no divider */
/* the character spread as a real book flow: two CSS columns = the two pages;
   the bio always starts on the LEFT page under the card and the browser
   carries the text onto the right page (GDD §11 reading order and balance) */
#spread{position:absolute; left:18.5%; top:15%; width:62.5%; height:68%; z-index:33; color:var(--ink);}
#spread[hidden]{display:none;}
/* the text viewport RESERVES a bottom band so flowed text and Sage's notes
   can never reach the bottom-corner arrows (the back arrow sits above the
   viewport entirely) — GDD §11 final round: arrows and content never share
   space. Portrait's cream panel reserves a top band too (its page furniture
   sits inside the panel corners). */
#spreadvp{position:absolute; left:0; right:0; top:0; bottom:5%; overflow:hidden;}
body.portrait #spreadvp{top:5%; bottom:5%;}
#spreadflow{height:100%; column-fill:auto; transition:transform .3s ease;}
#spreadflow .spread-head{padding:30px 14px 14px;}
#spreadflow .ledger-bio{padding:0 58px 12px; font-size:15.5px; line-height:1.5; width:auto; margin:0;}
#spreadflow .hand-note.pinned{margin:6px 58px 16px; break-inside:avoid; -webkit-column-break-inside:avoid;}
#spreadnotes{position:absolute; left:0; top:0; height:100%; pointer-events:none;}
#spreadnotes .margin-note{position:absolute; font-size:14.5px; line-height:1.08; margin:0;}
#spreadnotes .note-arrows{position:absolute; left:0; top:0; overflow:visible;}
body.portrait #spread{left:4%; top:11%; width:92%; height:86%;}

.spread-head{display:flex; align-items:center; gap:18px; padding-top:34px; margin-bottom:14px;
  break-inside:avoid; -webkit-column-break-inside:avoid;}
.nameplate{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:29px; color:var(--ink); line-height:1.05;}

/* All page furniture lives in one overlay spanning the paper box (same rect
   as #spread) — grid AND spread share it, and it's cleared on every render so
   nothing lingers. It's above the pages (z-34) but below the flip (z-36) and
   the close button (z-35). */
#tomenav{position:absolute; left:18.5%; top:15%; width:62.5%; height:68%; z-index:34; pointer-events:none;}
#tomenav > *{pointer-events:auto;}
body.portrait #tomenav{left:4%; top:11%; width:92%; height:86%;}

/* Page-TURN arrows (GDD §11): the ornate fletched icon, RESERVED for turning
   to a prev/next sheet — on the character spread AND the paginated grid. They
   sit ON the flat paper (measured box x 11.1–84.9%, y 7.7–87.6%), clear of the
   page-edge stack, gutter and leather: prev = LEFT page bottom-left, next =
   RIGHT page bottom-right (offsets are % of #tomenav). They sit below the text
   viewport's reserved band, so an arrow can never share space with content. */
.hand-nav{position:absolute; width:66px; height:20px; cursor:pointer; opacity:.9;}
.hand-nav.prev{left:1.4%; bottom:-3.4%;}     /* stage ~19.4%, bottom ~85.3% */
.hand-nav.next{right:1.4%; bottom:-3.4%;}    /* stage ~80.1%, bottom ~85.3% */
body.portrait .hand-nav.prev{left:1.5%; bottom:1%;}
body.portrait .hand-nav.next{right:1.5%; bottom:1%;}
.hand-nav img{height:100%; width:auto; display:block; filter:drop-shadow(0 1px 2px rgba(60,40,20,.35));}
.hand-nav img.flip{transform:scaleX(-1);}
.hand-nav.next img{margin-left:auto;}
.hand-nav:hover{opacity:1;}

/* Back-to-grid: the locked Card Select icon (fanned sage cards, gold emboss),
   directly on the left page's paper top-left with a soft contact shadow and a
   hover/press lift — detailed landscape art, ~68px tall, clear of the stack and
   above the character card. Never a page-turn, never green. */
.grid-btn{position:absolute; left:-4.9%; top:-8.6%; height:68px; cursor:pointer;}
.grid-btn img{height:100%; width:auto; display:block; transition:transform .12s ease, filter .12s ease;
  filter:drop-shadow(0 4px 5px rgba(40,25,12,.42));}
.grid-btn:hover img{transform:translateY(-2px) scale(1.035); filter:drop-shadow(0 7px 8px rgba(40,25,12,.46));}
.grid-btn:active img{transform:translateY(0) scale(.97); filter:drop-shadow(0 2px 4px rgba(40,25,12,.4));}
body.portrait .grid-btn{left:1.5%; top:1%; height:56px;}

/* ---------- the 3D page-turn (GDD §11, round 4) ----------
   ONE leaf turns; the book stays put. The full-bleed BACKDROP is the entire
   static Tome Spread art (it reaches every edge, incl. the top and the
   gutter), so only book ever shows behind the leaf and the destination
   stays occluded until it lands. The leaf covers the WHOLE painted
   page-block edge-to-edge (measured paper: x 11.1→84.9%, y 7.7→87.6% of
   the art, spine at 49.82%), and it is hinged EXACTLY on the spine: the
   leaf and its inner .paper wrapper rotate only about the spine axis (pure
   rotateY, origin on the gutter), so the bound edge cannot drift — no
   rotateX wobble (it tips the bound edge off the spine plane and opens the
   brown gutter-notch gap) and NO filter anywhere in the 3D tree (an
   animated drop-shadow forces the leaf to flatten and smears a translucent
   shadow over the gutter — the "see-through page"). The faces carry an
   opaque paper colour under their art slice, so the leaf can never be
   seen through. Paper softness: the .paper wrapper lags a few degrees
   behind the hinge (the free edge trails, then settles flat), the FREE
   edge's corners round mid-flight, and a sheen band travels the face. */
/* The perspective eye sits on the spine AND level with the LEAF'S TOP EDGE
   (round 5): a point level with the origin never moves vertically under
   projection, and every other leaf point is below it, so NO corner of the
   turning leaf can rise above the page-block top at ANY angle — the
   leather band above the pages stays covered-or-untouched on every frame
   of both turn types (they share this one geometry). The longer lens keeps
   the downward growth of the free edge inside the art's bottom band. */
#pageflip{position:absolute; inset:0; z-index:36; display:none; pointer-events:none;
  perspective:4200px; perspective-origin:49.82% 7.2%;}
body.portrait #pageflip{perspective-origin:50% 4%;}
#pageflip .backdrop{position:absolute; inset:0;
  background-image:url("../assets/ui/Tome Spread.png"); background-size:100% 100%;}
#pageflip .leaf{position:absolute; top:7.2%; height:81%; transform-style:preserve-3d;}
#pageflip .paper{position:absolute; inset:0; transform-style:preserve-3d;}
#pageflip.fwd .paper{transform-origin:left center;}
#pageflip.rev .paper{transform-origin:right center;}
#pageflip .face{position:absolute; inset:0; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background-color:#dfc09e;
  background-image:url("../assets/ui/Tome Spread.png"); background-repeat:no-repeat;}
/* forward: the RIGHT page lifts off the spine; its back carries the art of
   the region it lands on, so touchdown is seamless */
#pageflip.fwd .leaf{left:49.82%; width:35.48%; transform-origin:left center;}
#pageflip.fwd .face{background-size:281.85% 123.46%;}
#pageflip.fwd .face.front{background-position:77.22% 37.89%;}
#pageflip.fwd .face.back{transform:rotateY(180deg); background-position:22.23% 37.89%;}
/* reverse: the LEFT page lifts back across the spine */
#pageflip.rev .leaf{left:11.12%; width:38.70%; transform-origin:right center;}
#pageflip.rev .face{background-size:258.40% 123.46%;}
#pageflip.rev .face.front{background-position:18.14% 37.89%;}
#pageflip.rev .face.back{transform:rotateY(180deg); background-position:81.27% 37.89%;}
#pageflip.fwd.go .leaf{animation:leafturnF .62s cubic-bezier(.5,.06,.36,1) forwards;}
#pageflip.rev.go .leaf{animation:leafturnR .62s cubic-bezier(.5,.06,.36,1) forwards;}
@keyframes leafturnF{from{transform:rotateY(0);} to{transform:rotateY(-180deg);}}
@keyframes leafturnR{from{transform:rotateY(0);} to{transform:rotateY(180deg);}}
/* the sheet bows: the free edge lags the hinge, then settles flat — the
   lag axis is ALSO the spine, so the bound edge stays pinned throughout */
#pageflip.fwd.go .paper{animation:paperlagF .62s ease-in-out forwards;}
#pageflip.rev.go .paper{animation:paperlagR .62s ease-in-out forwards;}
@keyframes paperlagF{
  0%{transform:rotateY(0);} 12%{transform:rotateY(0);}
  40%{transform:rotateY(9deg);} 65%{transform:rotateY(11deg);}
  88%{transform:rotateY(3deg);} 100%{transform:rotateY(0);}}
@keyframes paperlagR{
  0%{transform:rotateY(0);} 12%{transform:rotateY(0);}
  40%{transform:rotateY(-9deg);} 65%{transform:rotateY(-11deg);}
  88%{transform:rotateY(-3deg);} 100%{transform:rotateY(0);}}
/* the FREE edge's corners soften mid-flight (radius on the faces — the
   leaf/paper must stay unclipped to keep preserve-3d). The free edge is
   the right side of the outgoing right page's front and of the landing
   right page's back; the left side of the other two — never the spine. */
#pageflip.fwd.go .face.front{animation:curlEdgeRt .62s cubic-bezier(.5,.06,.36,1) forwards;}
#pageflip.fwd.go .face.back{animation:curlEdgeLt .62s cubic-bezier(.5,.06,.36,1) forwards;}
#pageflip.rev.go .face.front{animation:curlEdgeLt .62s cubic-bezier(.5,.06,.36,1) forwards;}
#pageflip.rev.go .face.back{animation:curlEdgeRt .62s cubic-bezier(.5,.06,.36,1) forwards;}
@keyframes curlEdgeRt{
  0%{border-radius:0;}
  45%{border-top-right-radius:26px 52px; border-bottom-right-radius:26px 52px;}
  60%{border-top-right-radius:22px 44px; border-bottom-right-radius:22px 44px;}
  100%{border-radius:0;}}
@keyframes curlEdgeLt{
  0%{border-radius:0;}
  45%{border-top-left-radius:26px 52px; border-bottom-left-radius:26px 52px;}
  60%{border-top-left-radius:22px 44px; border-bottom-left-radius:22px 44px;}
  100%{border-radius:0;}}
/* The REV leaf's incoming (back) face is sliced from the right-page region,
   whose far edge runs into the painted ribbon tabs — without a mask the
   turning sheet carries little ribbon chips mid-arc. The mask paints that
   far strip as plain page-edge parchment while the sheet flies, then fades
   just before touchdown so the landed frame is still pixel-identical to
   the art beneath. */
#pageflip .edgemask{position:absolute; top:0; bottom:0; right:0; width:9.4%; display:none;
  background:linear-gradient(90deg, rgba(220,201,164,0) 0%, #dcc9a4 22%, #d3bf99 62%, #bda684 100%);}
#pageflip.rev .face.back .edgemask{display:block;}
#pageflip.rev.go .face.back .edgemask{animation:edgefade .62s linear forwards;}
@keyframes edgefade{0%{opacity:1;} 86%{opacity:1;} 97%{opacity:0;} 100%{opacity:0;}}
/* the moving bend: a sheen + shade band travelling along the visible face */
#pageflip .curlfx{position:absolute; top:-2%; height:104%; width:74%; left:110%; opacity:0;
  background:linear-gradient(100deg, rgba(60,40,20,0) 0%, rgba(60,40,20,.16) 30%,
    rgba(255,248,222,.42) 50%, rgba(60,40,20,.20) 70%, rgba(60,40,20,0) 100%);}
#pageflip.fwd.go .curlfx{animation:curlbandF .62s cubic-bezier(.5,.06,.36,1) forwards;}
#pageflip.rev.go .curlfx{animation:curlbandR .62s cubic-bezier(.5,.06,.36,1) forwards;}
@keyframes curlbandF{0%{left:110%; opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{left:-84%; opacity:0;}}
@keyframes curlbandR{0%{left:-84%; opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{left:110%; opacity:0;}}
/* the curl-shadow sweeping the page the leaf lands on */
#pageflip .sweep{position:absolute; top:7.2%; height:81%; opacity:0; z-index:1;}
#pageflip.fwd .sweep{left:11.12%; width:38.70%;
  background:linear-gradient(90deg, rgba(50,32,16,0) 0%, rgba(50,32,16,.28) 76%, rgba(50,32,16,.4) 100%);}
#pageflip.rev .sweep{left:49.82%; width:35.48%;
  background:linear-gradient(270deg, rgba(50,32,16,0) 0%, rgba(50,32,16,.28) 76%, rgba(50,32,16,.4) 100%);}
#pageflip.go .sweep{animation:sweepin .62s cubic-bezier(.5,.06,.36,1) forwards;}
@keyframes sweepin{0%{opacity:0;} 42%{opacity:0;} 70%{opacity:.9;} 100%{opacity:0;}}
/* portrait: the tome is a cream panel — plain parchment backdrop/leaf */
body.portrait #pageflip .backdrop,body.portrait #pageflip .face{background-image:none; background-color:#efe3c8;}
body.portrait #pageflip .leaf{top:4%; height:92%;}
body.portrait #pageflip.fwd .leaf{left:50%; width:46%;}
body.portrait #pageflip.rev .leaf{left:4%; width:46%;}
.tometitle{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:28px; letter-spacing:.01em;
  border-bottom:2.5px solid rgba(122,103,72,.45); padding-bottom:5px; margin-bottom:10px;}
.tometitle.centre{text-align:center;}
/* printed epigraphs are BODY text (§11) — only Sage's hand is Caveat */
.tome-epigraph{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; font-size:15px;
  color:#6b5a44; margin-bottom:12px; line-height:1.3;}
.hand-note{font-family:'Caveat',cursive; font-size:19px; font-weight:700; color:var(--sage-deep); line-height:1.15; margin:8px 0;}
/* tilts are rotation ONLY — placement belongs to the marginalia engine */
.hand-note.tilt0{transform:rotate(-2.4deg);} .hand-note.tilt1{transform:rotate(1.8deg);}
.hand-note.tilt2{transform:rotate(-1.2deg);}
.hand-note.pinned{margin-top:12px; padding-top:8px; border-top:1.5px dashed rgba(107,127,92,.5);}
.margin-rail{margin:2px 0 6px;}
.entry{padding:7px 9px; border-radius:9px; cursor:pointer; margin-bottom:4px;}
.entry:hover{background:rgba(122,103,72,.12);}
.entry.sel{background:rgba(122,103,72,.18);}
.entry b{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:18.5px; display:block;}
.entry span{font-family:'Cormorant Garamond',serif; font-size:14px; font-weight:600; color:var(--ink-soft);}
.entry.locked{opacity:.5; cursor:default;}
.entry.locked:hover{background:none;}
/* UNIFORM card height (GDD §15): cards clip to their measured content box —
   the selection outline hugs the card itself, never transparent padding */
/* Ledger grid (GDD §11 LOCKED): a FIXED 3-column grid, uniform cells, top-aligned
   rows, consistent gutters — the signed-off single-page layout. The left page
   fills first (header + grid); the right page's grid only appears once the left
   is full, aligned to the left grid's first row via a JS-set padding-top. */
.cardgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:4px 8px; justify-items:center; align-items:start;}
.cardgrid.facing{padding-top:0;}   /* alignment set in JS to match the left grid's header offset */
.cardthumb{cursor:pointer; position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:center;}
.cardclip{position:relative; overflow:hidden; border-radius:5px;}
.cardclip img{position:absolute; width:auto; display:block;}
.cardthumb.sel .cardclip{outline:3px solid var(--gold);}
.cardthumb.locked .cardclip img{filter:brightness(0) opacity(.72);}
.cardthumb.locked{cursor:default;}
.cardthumb.locked:after{content:"?"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Baloo 2',cursive; font-size:30px; color:rgba(244,236,221,.85);}
.cardthumb small{display:block; text-align:center; font-family:'Baloo 2',cursive; font-size:10.5px; color:var(--ink-soft); margin-top:2px;}
.bigclip{position:relative; overflow:hidden; border-radius:6px; margin:2% auto 10px;
  filter:drop-shadow(0 12px 16px rgba(30,20,10,.20));}
.bigclip img{position:absolute; width:auto; display:block;}
/* the annotated page (GDD §11): printed bio in a narrower centre column,
   Sage's notes placed in the clear margins beside their marks */
.ledger-annot{position:relative; margin-bottom:18px;}
.ledger-annot .ledger-bio{width:60%; margin:0 auto; font-size:16px; line-height:1.52;}
.note-arrows{position:absolute; inset:0; pointer-events:none; overflow:visible;}
.note-arrows path{stroke:var(--sage-deep); stroke-width:1.8; fill:none; stroke-linecap:round; opacity:.6;}
.margin-note{position:absolute; margin:0; font-size:14.5px; line-height:1.08;}
.margin-note.foot{font-size:16px;}
.ledger-bio{font-family:'Cormorant Garamond',serif; font-size:15.5px; font-weight:600; line-height:1.42; margin-bottom:4px;}
.marked{border-bottom:2.5px solid rgba(107,127,92,.85); background:rgba(156,175,136,.18); border-radius:2px; padding:0 1px;}
.rp-caption{text-align:center; font-family:'Cormorant Garamond',serif; font-size:15px; font-weight:600;
  color:var(--ink-soft); font-style:italic; line-height:1.35; margin-top:10px;}
.rp-caption.strong{font-style:normal; font-weight:700; margin-top:4px;}
.tome-tankard{display:block; height:96px; margin:14px auto 4px; transform:translateX(-12%);}
.ingdots{display:flex; gap:8px; justify-content:center; margin:10px 0 0;}
.ingdots i{width:20px; height:20px; border-radius:50%; display:block; box-shadow:inset 0 -3px 5px rgba(0,0,0,.25);}
.masthead{font-family:'Pirata One',cursive; font-weight:400; font-size:33px; line-height:1.1; text-align:center;
  letter-spacing:.04em; border-bottom:3px double rgba(122,103,72,.55); padding-bottom:6px;}
.headline{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:20px; margin:10px 0 6px; line-height:1.2;}
.story{font-family:'Cormorant Garamond',serif; font-size:15.5px; font-weight:600; line-height:1.4;}
.ripple{margin-top:12px; font-size:12px; font-weight:700; color:var(--elixir); font-style:italic;}
#phonowrap{position:relative; width:58%; margin:6% auto 0;}
#phonoglow{position:absolute; inset:-14%; border-radius:50%;
  background:radial-gradient(circle, rgba(178,106,224,.4) 0%, rgba(178,106,224,.14) 42%, rgba(178,106,224,0) 72%);
  filter:blur(10px); animation:phonopulse 2.6s ease-in-out infinite;}
@keyframes phonopulse{0%,100%{opacity:.45; transform:scale(.96);} 50%{opacity:1; transform:scale(1.05);}}
#phonowrap img{position:relative; width:100%;}
.plaque{margin-top:8px; text-align:center; font-family:'Cormorant Garamond',serif; font-weight:700; font-size:16.5px; color:var(--ink);}

/* portrait: the 16:9 spread art doesn't fit — fall back to a cream book panel */
body.portrait #tomeimg{display:none;}
body.portrait #tome{background:linear-gradient(175deg,#f7efdc,var(--cream));}
body.portrait .tab{left:auto; width:15%; height:7%; top:1.5% !important; background:rgba(122,103,72,.16); border-radius:10px;}
body.portrait .tab svg{stroke:#4a3a28;}
body.portrait #tab-brew{left:4%;} body.portrait #tab-ledger{left:23%;}
body.portrait #tab-herald{left:42%;} body.portrait #tab-song{left:61%;}
body.portrait #pageL{left:5%; top:11%; width:90%; height:38%;}
body.portrait #pageR{left:5%; top:52%; width:90%; height:45%;}
body.portrait #pageflip{left:0; top:0; width:100%; height:100%;}

/* ---------- SETTINGS & ABOUT OVERLAYS (GDD §11: cream panel, gold trim) ---------- */
.overlay{position:absolute; inset:0; z-index:40; display:none; align-items:center; justify-content:center;
  background:rgba(16,11,22,.72);}
.overlay.open{display:flex;}
.panel{width:52%; max-height:86%; overflow:auto; background:linear-gradient(175deg,#f7efdc,var(--cream));
  border:3px solid var(--gold); border-radius:16px; padding:26px 34px; color:var(--charcoal);
  box-shadow:0 24px 60px rgba(0,0,0,.7);}
.panel h2{font-family:'Baloo 2',cursive; font-size:24px; letter-spacing:.03em;
  border-bottom:2.5px solid rgba(122,103,72,.35); padding-bottom:8px; margin-bottom:16px;}
.setrow{display:flex; align-items:center; justify-content:space-between; gap:18px; margin:14px 0;}
.setrow label{font-family:'Baloo 2',cursive; font-size:16px;}
#lang-select{font-family:'Nunito',sans-serif; font-weight:600; font-size:15px; padding:6px 10px;
  border-radius:10px; border:2.5px solid #d8cbb2; background:#fdf6e8; color:var(--charcoal); cursor:pointer;}
#set-disclaimer{font-size:12.5px; color:var(--ink-soft); margin:-4px 0 10px; line-height:1.45;}
.toggle{min-width:110px;}
#about .panel p{font-size:14px; line-height:1.55; font-weight:600; margin:10px 0;}
#btn-set-back,#btn-about-back{margin-top:14px;}

/* ---------- NIGHT CAP overlay (GDD §11): the share-card preview ---------- */
.nc-panel{background:linear-gradient(175deg,#f7efdc,var(--cream)); border:3px solid var(--gold);
  border-radius:16px; padding:14px 18px 16px; box-shadow:0 24px 60px rgba(0,0,0,.7);
  display:flex; flex-direction:column; align-items:center; gap:12px; max-height:96%;}
.nc-panel h2{font-family:'Baloo 2',cursive; font-size:19px; letter-spacing:.03em; color:var(--charcoal); margin:0;}
.nc-preview{line-height:0;}
.nc-preview canvas{height:524px; width:auto; border-radius:8px; box-shadow:0 8px 22px rgba(0,0,0,.42);}
.nc-actions{display:flex; gap:10px;}
.epi-actions{display:flex; gap:12px; justify-content:center;}
body.portrait .nc-preview canvas{height:64vh;}

/* ---------- in-game toast (GDD §13: say it in-game, not console-only) ---------- */
#toast{position:absolute; left:50%; top:5%; transform:translateX(-50%) translateY(-14px);
  max-width:74%; background:linear-gradient(180deg,#fdf6e8,var(--cream)); color:var(--charcoal);
  border:2.5px solid var(--gold); border-radius:13px; padding:11px 22px; z-index:60;
  font-family:'Nunito',sans-serif; font-weight:700; font-size:14.5px; line-height:1.35; text-align:center;
  box-shadow:0 10px 28px rgba(0,0,0,.5); opacity:0; pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;}
#toast.on{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- in-game HUD + menu (GDD §11, locked 07/07) ---------- */
.hud-btn{position:absolute; z-index:12; display:none; align-items:center; justify-content:center;
  cursor:pointer; padding:0; border:none; background:none; transition:transform .12s ease;}
.hud-btn.on{display:flex;}
#hud-menu{top:2.6%; right:1.6%; width:44px; height:44px; border-radius:50%; color:var(--cream);
  background:linear-gradient(160deg,#4a3527,#2e2118); border:2.5px solid var(--gold);
  box-shadow:0 4px 12px rgba(0,0,0,.5);}
#hud-menu svg{width:22px; height:22px;}
#hud-menu:hover{transform:translateY(-2px);}
#hud-menu:active{transform:translateY(1px);}
#hud-tome{bottom:3%; right:1.6%; width:58px; height:58px;}
#hud-tome img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(0,0,0,.55));}
#hud-tome:hover{transform:translateY(-3px);}
#hud-tome:active{transform:translateY(1px);}
#hud-tome.above-panel{bottom:35.5%;}      /* clear of the mixing panel on the serve screen */
#hud-tome.pulse img{animation:tomepulse 1.2s ease;}
@keyframes tomepulse{0%,100%{transform:scale(1); filter:drop-shadow(0 3px 5px rgba(0,0,0,.55));}
  30%{transform:scale(1.18); filter:drop-shadow(0 0 11px rgba(232,183,112,.95));}
  55%{transform:scale(1);} 75%{transform:scale(1.08);}}

/* menu tray (reuses .overlay/.panel) */
#menu-tray{z-index:45;}
#menu-tray .panel{width:auto; min-width:280px; max-width:340px; text-align:center;}
#menu-tray .panel .btn{display:block; width:100%; margin:6px 0;}
#menu-note{font-size:12px; color:var(--ink-soft); font-style:italic; margin-top:12px;}

/* visible autosave flourish (Night boundary + Save & Quit) */
#autosave-quill{position:absolute; left:2%; bottom:3.5%; z-index:11; display:flex; align-items:center; gap:6px;
  color:var(--cream); font-family:'Baloo 2',cursive; font-size:12.5px; letter-spacing:.04em;
  opacity:0; transform:translateY(6px); pointer-events:none; text-shadow:0 1px 3px rgba(0,0,0,.75);
  transition:opacity .4s ease, transform .4s ease;}
#autosave-quill.on{opacity:.92; transform:translateY(0);}
#autosave-quill svg{width:18px; height:18px; color:var(--gold);}

/* onboarding hint chip — tutorial-through-fiction, dismisses on any input */
#hint-chip{position:absolute; top:3%; left:50%; transform:translateX(-50%) translateY(-8px); z-index:13;
  max-width:62%; background:linear-gradient(180deg,#fdf6e8,var(--cream)); color:var(--charcoal);
  border:2px solid var(--sage); border-radius:11px; padding:8px 16px; font-family:'Nunito',sans-serif;
  font-weight:700; font-size:12.5px; text-align:center; box-shadow:0 6px 18px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .35s ease, transform .35s ease;}
#hint-chip.on{opacity:1; transform:translateX(-50%) translateY(0);}

/* continue indicator: a soft ▼ in the active bubble's corner while a line waits
   for a click (never during a brew re-request, where clicking doesn't advance) */
.bubble.on::before, #duo-box.on::before{content:"▼"; position:absolute; right:11px; bottom:3px;
  font-size:10px; color:var(--sage-deep); opacity:0; pointer-events:none;
  animation:contbob 1.1s ease-in-out infinite;}
#stage.waiting .bubble.on::before, #stage.waiting #duo-box.on::before{opacity:.6;}
@keyframes contbob{0%,100%{transform:translateY(0);} 50%{transform:translateY(2px);}}

/* ---------- DEV BAR (outside the stage; ?dev=1 or Ctrl+D) ---------- */
#dev{position:fixed; top:10px; right:12px; background:rgba(20,16,25,.92); border:1px solid #3c3350;
  border-radius:10px; padding:8px 10px; z-index:50; color:#cfc6e0; font-size:12px;
  display:flex; gap:6px; align-items:center; flex-wrap:wrap; max-width:380px; font-family:'Nunito',sans-serif;}
#dev[hidden]{display:none;}
#dev button{font-family:inherit; font-size:12px; border-radius:6px; border:1px solid #4a4060;
  background:#241f31; color:#e8e2f4; padding:3px 8px; cursor:pointer;}