/* Work Town, the playable table. Navy, gold, one typeface family with Baloo for the
   headings, and touch targets sized for a tablet in a classroom. */

:root{
  --navy:#01204B; --navy-2:#012A5F; --ink:#0A1428;
  --gold:#C5A552; --gold-lt:#F0DFA0;
  --paper:#F4F1E8; --white:#FFFFFF;
  --paid:#1F7A5A; --unpaid:#6C4BA6; --quiz:#E8B62C; --bonus:#2C7BE5; --oops:#D2452F;
  --r:18px; --shadow:0 18px 44px rgba(1,12,32,.42);
}

*{box-sizing:border-box}
html,body{height:100%}
body.play{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:Inter,system-ui,sans-serif;
  overflow:hidden; overscroll-behavior:none;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
button:disabled{cursor:default}

#stage{position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none}

/* ── top bar ───────────────────────────────────────────────────────────── */
.top{
  position:fixed; top:0; left:0; right:0; z-index:6;
  display:flex; align-items:center; gap:14px;
  padding:12px clamp(12px,2.4vw,26px);
  background:linear-gradient(180deg,rgba(10,20,40,.92),rgba(10,20,40,0));
  pointer-events:none;
}
.top > *{pointer-events:auto}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.brand img{height:34px; width:auto; display:block}
.brand span{font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.7}
.top .spacer{flex:1}
.chip{
  border:1px solid rgba(244,241,232,.18); border-radius:8px;
  padding:9px 15px; font-size:13px; font-weight:600; color:var(--paper);
  background:rgba(1,32,75,.5); backdrop-filter:blur(8px);
}
.chip:hover{border-color:var(--gold)}
.chip[data-on="false"]{opacity:.55}

/* ── heads-up display ──────────────────────────────────────────────────── */
#hud{position:fixed; inset:0; z-index:5; pointer-events:none; opacity:0; transition:opacity .5s}
#hud.live{opacity:1}
#hud > *{pointer-events:auto}

#players{
  position:absolute; top:64px; left:clamp(12px,2.4vw,26px);
  display:flex; flex-direction:column; gap:9px; width:min(268px,42vw);
}
.pcard{
  display:flex; align-items:center; gap:11px;
  background:rgba(1,32,75,.72); backdrop-filter:blur(10px);
  border:1px solid rgba(244,241,232,.14); border-left:4px solid transparent;
  border-radius:10px; padding:10px 12px; transition:.28s;
}
.pcard.active{
  border-left-color:var(--gold); background:rgba(1,42,95,.9);
  transform:translateX(6px); box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.pcard.skipping{opacity:.5}
.pmeta{flex:1; min-width:0}
.pmeta b{display:block; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pmeta small{font-size:11px; opacity:.6}
.tally{display:flex; flex-direction:column; gap:3px; text-align:right; font-variant-numeric:tabular-nums}
.tally span{display:flex; align-items:center; justify-content:flex-end; gap:6px; font-size:15px; font-weight:700}
.tally .stars{color:var(--gold-lt)}

.pawn{
  width:16px; height:20px; flex:none; border-radius:50% 50% 42% 42%;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 70%,white),var(--c));
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.35);
}
.coin{
  width:15px; height:15px; border-radius:50%; display:inline-block;
  background:radial-gradient(circle at 34% 30%,var(--gold-lt),var(--gold) 60%,#8B6E22);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.28);
}
.star{
  width:16px; height:16px; display:inline-block; background:var(--gold-lt);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

.meter{
  position:absolute; top:64px; right:clamp(12px,2.4vw,26px);
  width:min(230px,40vw); text-align:right;
  background:rgba(1,32,75,.72); backdrop-filter:blur(10px);
  border:1px solid rgba(244,241,232,.14); border-radius:10px; padding:11px 13px;
}
.meter b{font-size:14px}
.meter small{display:block; font-size:11px; opacity:.62; margin-top:2px}
.meter .shortlbl{display:none}
#jobsBar{height:5px; border-radius:99px; background:rgba(244,241,232,.16); margin-top:9px; overflow:hidden}
#jobsBar::after{
  content:''; display:block; height:100%; width:var(--fill,0%);
  background:linear-gradient(90deg,var(--gold),var(--gold-lt)); transition:width .5s;
}

/* The commentary lives in the clear band under the header, between the player rail and the
   round meter. Below the board it covered the bottom row of her squares; beside the decks it
   collided with them. This strip is the only place nothing else wants. */
#say{
  position:absolute; left:50%; transform:translateX(-50%); top:62px;
  max-width:min(520px,52vw); text-align:center;
  font-size:clamp(14px,1.7vw,17px); font-weight:500; line-height:1.45;
  color:var(--paper);
  background:rgba(8,16,32,.62); backdrop-filter:blur(10px);
  border:1px solid rgba(244,241,232,.12); border-radius:8px; padding:10px 20px;
}
#say.good{border-color:rgba(62,138,107,.7); color:#CFE7DB}
#say.warn{border-color:rgba(181,80,62,.7); color:#F3D3CB}
#say:empty{display:none}

#rollBtn{
  position:absolute; left:50%; transform:translateX(-50%); bottom:34px;
  min-width:min(300px,78vw); min-height:58px; padding:0 30px;
  border-radius:10px; font-size:16px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink); background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  box-shadow:0 12px 30px rgba(197,165,82,.32), inset 0 -3px 0 rgba(0,0,0,.16);
  transition:transform .16s, opacity .25s;
}
#rollBtn:active:not(:disabled){transform:translateX(-50%) scale(.97)}
#rollBtn:disabled{opacity:.42; background:rgba(244,241,232,.2); color:var(--paper); box-shadow:none}

/* ── setup ─────────────────────────────────────────────────────────────── */
.sheet{
  position:fixed; inset:0; z-index:8; display:grid; place-items:center;
  padding:clamp(18px,4vw,54px);
  background:rgba(229,232,235,.78);
  backdrop-filter:blur(34px) saturate(.82);
  transition:opacity .45s, visibility .45s;
}
.sheet.gone{opacity:0; visibility:hidden; pointer-events:none}
.panel{
  width:min(660px,100%); max-height:calc(100svh - 48px); overflow:auto;
  background:rgba(251,251,249,.96); color:#111827;
  border:1px solid rgba(1,32,75,.09); border-radius:30px;
  padding:clamp(28px,4vw,48px); text-align:left;
  box-shadow:0 40px 100px rgba(6,14,30,.18),0 2px 10px rgba(6,14,30,.08);
}
.panel h1{
  font-family:Inter,system-ui,sans-serif; font-weight:760;
  font-size:clamp(38px,5vw,58px); letter-spacing:-.055em; line-height:.94;
  margin:0; color:var(--navy);
}
.setup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:28px}
.setup-head > div{min-width:0}
.setup-head > img{display:block;width:76px;height:76px;object-fit:contain;flex:none}
.panel .tag{max-width:38ch; margin:14px 0 36px; color:#5d6470; font-size:16px; line-height:1.5}
.panel h2{font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:#757b85; margin:0 0 13px}

#seats{display:flex; flex-direction:column; gap:9px; margin-bottom:20px}
.seat{
  display:flex; align-items:center; gap:13px; min-height:66px;
  background:#f1f2f3; border:1px solid transparent;
  border-radius:14px; padding:9px 10px 9px 16px;
  transition:border-color .2s,background .2s;
}
.seat:focus-within{background:#fff;border-color:rgba(1,32,75,.22)}
.pname{
  flex:1; min-width:0; background:transparent; border:0; color:var(--navy);
  font:650 16px Inter,sans-serif; padding:10px 2px; -webkit-user-select:text; user-select:text;
}
.pname:focus{outline:0}
.who{display:flex; background:#e1e3e6; border-radius:10px; padding:3px; flex:none}
.who button{
  min-height:38px; padding:7px 15px; border-radius:8px; color:#636a74;
  font-size:13px; font-weight:650; opacity:1;
}
.who button.on{background:#fff; color:var(--navy); box-shadow:0 1px 5px rgba(6,14,30,.12)}

.count{display:flex; align-items:center; justify-content:flex-start; gap:10px; margin:0 0 30px}
.count button{
  width:44px; height:44px; border-radius:12px; font-size:20px; font-weight:600;
  border:1px solid #d6d9dd; color:var(--navy); background:#fff;
}
.count button:disabled{opacity:.3}
.count span{font-size:14px; color:#606772; min-width:84px; text-align:center}

.go{
  width:100%; min-height:60px; border-radius:14px; font-size:15px; font-weight:760;
  letter-spacing:.015em; text-transform:none;
  color:#fff; background:var(--navy);
  box-shadow:0 14px 28px rgba(1,32,75,.18);
  transition:transform .16s,background .2s;
}
.go:hover{background:#0b3972}
.go:active{transform:scale(.98)}
.fine{max-width:58ch; font-size:12.5px; color:#7a8089; margin:18px 0 0; line-height:1.55}

/* ── the cards ─────────────────────────────────────────────────────────── */
#cardLayer{
  position:fixed; inset:0; z-index:7; display:grid; place-items:center;
  background:rgba(4,10,24,.62); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
  perspective:1400px;
}
#cardLayer.show{opacity:1; visibility:visible}
.card{
  position:relative; width:min(340px,84vw);
  background:linear-gradient(180deg,#FAF7F0,#F0EBDF); color:var(--navy);
  border-radius:12px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.55);
  transform:rotateY(90deg) translateY(14px); animation:flipIn .52s cubic-bezier(.2,.9,.25,1) forwards;
  text-align:center;
}
.card::before{content:''; position:absolute; inset:0 0 auto; height:3px; background:var(--edge)}
.card.wide{width:min(430px,90vw)}
.card.paid{--edge:var(--paid)} .card.unpaid{--edge:var(--unpaid)}
.card.quiz{--edge:var(--quiz)} .card.bonus{--edge:var(--bonus)} .card.oops{--edge:var(--oops)}
@keyframes flipIn{
  0%{transform:rotateY(90deg) scale(.9)}
  60%{transform:rotateY(-8deg) scale(1.02)}
  100%{transform:rotateY(0) scale(1)}
}
.cface{padding:26px 24px 20px}
.card img{width:124px; height:auto; margin:8px auto 12px; display:block}
/* her printed card, shown as itself */
.card.plain{width:min(320px,80vw); background:#0E1D33}
.card.plain .cface{padding:10px 10px 4px}
.card.plain img.full{width:100%; margin:0; border-radius:6px}
.card.plain .cfoot{display:none}     /* her card already says which deck it is from */
.ctag{
  display:block; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  font-weight:700; color:var(--edge); margin-bottom:12px;
}
.card h3{
  font-family:'Baloo 2',Inter,sans-serif; font-weight:700;
  font-size:25px; margin:2px 0 10px; line-height:1.2; color:var(--navy);
}
.card p{font-size:14.5px; line-height:1.55; margin:0 0 6px; color:#41506B}
.cbadge{
  display:inline-block; border:1px solid var(--gold); color:#7A6220;
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:4px 10px; border-radius:3px; margin-bottom:10px;
}
.cprize{
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:16px; font-weight:700; margin-top:16px; padding-top:14px;
  border-top:1px solid rgba(1,32,75,.12); color:var(--navy);
}
.cprize.good{color:#1B6B4E}
.cprize.bad{color:var(--oops)}
.cfoot{
  padding:0 24px 18px; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:rgba(1,32,75,.42);
}

.opts{display:flex; flex-direction:column; gap:8px; margin-top:16px}
.opts button{
  min-height:52px; border-radius:8px; padding:10px 16px;
  background:rgba(255,255,255,.7); border:1px solid rgba(1,32,75,.16); color:var(--navy);
  font-size:15.5px; font-weight:500; transition:.18s;
}
.opts button:not(:disabled):active{transform:scale(.99); border-color:var(--gold); background:#fff}
.opts button.right{border-color:#1B6B4E; background:rgba(27,107,78,.1); color:#12503A; font-weight:700}
.opts button.wrong{border-color:var(--oops); background:rgba(210,69,47,.08); color:#8E2F1F}

/* ── the end ───────────────────────────────────────────────────────────── */
#end{z-index:9; opacity:0; visibility:hidden}
#end.show{opacity:1; visibility:visible}
.heroes{display:flex; gap:12px; margin:6px 0 18px; flex-wrap:wrap}
.hero{
  flex:1; min-width:120px; border-radius:16px; padding:14px 10px;
  border:1px solid rgba(244,241,232,.18); background:rgba(255,255,255,.05);
}
.hero span{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.65}
.hero b{display:block; font-family:'Baloo 2',Inter,sans-serif; font-size:21px; margin-top:5px}
.hero.money b{color:var(--gold-lt)}
.hero.family b{color:#E4D6FA}
.hero.job b{color:#9FE3C5}
.scores{width:100%; border-collapse:collapse; margin-bottom:18px}
.scores td{padding:9px 6px; border-bottom:1px solid rgba(244,241,232,.12); font-size:15px; text-align:right}
.scores td:first-child{text-align:left; display:flex; align-items:center; gap:9px; font-weight:600}
.scores b{font-size:18px; font-variant-numeric:tabular-nums}
.scores small{display:block; font-size:10px; opacity:.55; letter-spacing:.1em; text-transform:uppercase}
.ask{
  font-family:'Baloo 2',Inter,sans-serif; font-size:19px; line-height:1.35;
  color:var(--gold-lt); margin:0 0 10px;
}
.line{font-size:14.5px; opacity:.82; margin:0 0 18px; line-height:1.5}
.rounds{font-size:12px; opacity:.5; margin:14px 0 0}

/* ── the rules sheet ───────────────────────────────────────────────────── */
#rulesSheet{opacity:0; visibility:hidden}
#rulesSheet.open{opacity:1; visibility:visible}
#rulesSheet .panel{text-align:left}
#rulesSheet h2{text-align:left;color:var(--navy);font-size:26px;letter-spacing:-.03em;text-transform:none}
.rulelist{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:12px}
.rulelist li{display:flex; gap:12px; color:#4f5763; font-size:14.5px; line-height:1.5}
.swatch{width:14px; height:14px; border-radius:4px; flex:none; margin-top:4px}

#loading{
  position:fixed; inset:0; z-index:10; display:grid; place-items:center;
  background:var(--ink); transition:opacity .5s, visibility .5s; text-align:center; padding:24px;
}
#loading.gone{opacity:0; visibility:hidden}
#loading .spin{
  width:44px; height:44px; border-radius:50%; margin:0 auto 16px;
  border:3px solid rgba(244,241,232,.18); border-top-color:var(--gold);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* On a tablet the board reaches close to the edges, so the rail becomes a narrow
   column of pieces and scores rather than sitting on top of the left-hand row. */
@media (max-width:1200px){
  #players{width:154px}
  .pmeta small{display:none}
  .pmeta b{font-size:13.5px}
  .pcard{padding:8px 9px; gap:8px}
  .tally span{font-size:14px}
  .meter{width:172px}
  #say{max-width:min(440px,44vw); font-size:14px}
}

/* Foo Foo speaks ABOVE himself once the screen is narrow. Beside him his bubble makes the
   whole group wide enough to sit on top of the roll button, which is what it did on every
   phone and both iPads. */
@media (max-width:1000px){
  #foofoo{flex-direction:column; align-items:flex-start; gap:4px}
  .ff-bubble{order:0; margin-bottom:0; max-width:min(260px,58vw)}
  .ff-bubble::after{left:22px; bottom:-7px; border:7px solid transparent;
    border-top-color:var(--paper); border-bottom:0}
}

@media (prefers-reduced-motion:reduce){
  .card{animation:none; transform:none}
  *{transition-duration:.01ms !important}
}

/* ── Foo Foo, the host ───────────────────────────────────────────────────────
   Bottom left, clear of the player rail above him and the roll button beside
   him. He is a presence at the table, not a panel: no card, no border, just the
   owl and what he is saying. */
#foofoo{
  position:absolute; left:clamp(10px,2vw,24px); bottom:18px; z-index:6;
  display:flex; align-items:flex-end; gap:10px; pointer-events:none;
  opacity:0; transform:translateY(24px);
  transition:opacity .5s cubic-bezier(.2,.9,.25,1), transform .5s cubic-bezier(.2,.9,.25,1);
}
#foofoo.ff-in{opacity:1; transform:translateY(0)}
.ff-owl{
  width:clamp(96px,11vw,150px); height:auto; display:block;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.55));
  transform-origin:50% 92%;
  animation:ffIdle 3.6s ease-in-out infinite;
}
/* Aishwarya, voice note 12 Aug: "just one image, no interaction" — a still owl reads as
   dead between lines. This keeps him breathing even when he has nothing to say. */
@keyframes ffIdle{
  0%,100%{transform:translateY(0) scale(1,1) rotate(0)}
  50%{transform:translateY(-3px) scale(1.015,.985) rotate(-.6deg)}
}
#foofoo.ff-talk .ff-owl{animation:ffBob .62s ease-in-out 2}
@keyframes ffBob{
  0%,100%{transform:translateY(0) rotate(0)}
  30%{transform:translateY(-9px) rotate(-3deg)}
  60%{transform:translateY(0) rotate(2deg)}
}
#foofoo[data-mood="cheer"].ff-talk .ff-owl{animation:ffHop .5s ease-out 2}
@keyframes ffHop{
  0%{transform:translateY(0) scale(1)}
  35%{transform:translateY(-18px) scale(1.05,.96)}
  70%{transform:translateY(0) scale(.97,1.03)}
  100%{transform:translateY(0) scale(1)}
}
#foofoo[data-mood="sad"].ff-talk .ff-owl{animation:ffShake .5s ease-in-out 1}
@keyframes ffShake{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-4deg)}
  75%{transform:rotate(4deg)}
}

.ff-bubble{
  /* He stands at the left edge, so he speaks to his RIGHT. A bubble on his left would run
     off the screen, which is exactly what it did the first time. */
  order:1; max-width:min(300px,30vw); margin-bottom:26px;
  background:var(--paper); color:var(--navy);
  border-radius:14px; padding:12px 15px;
  font-size:14.5px; font-weight:500; line-height:1.45;
  box-shadow:0 16px 34px rgba(0,0,0,.45);
  position:relative; animation:ffPop .28s cubic-bezier(.2,1.3,.4,1);
}
.ff-bubble::after{
  content:''; position:absolute; left:-7px; bottom:14px;
  border:8px solid transparent; border-right-color:var(--paper); border-left:0;
}
.ff-bubble[hidden]{display:none}
@keyframes ffPop{from{opacity:0; transform:translateY(8px) scale(.94)} to{opacity:1}}

@media (max-width:1200px){
  .ff-bubble{max-width:min(230px,34vw); font-size:13px; padding:10px 12px}
  #foofoo{bottom:14px}
}
@media (max-width:760px){
  .ff-owl{width:76px}
  .ff-bubble{max-width:44vw; font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  #foofoo .ff-owl{animation:none !important}
}

/* ── PHONES ───────────────────────────────────────────────────────────────
   Portrait is how a child holds a phone, so the layout stacks: a single strip of
   players across the top, the commentary under it, the whole middle for the board,
   and the thumb furniture at the bottom. The rail as a left column stole a third of
   the width and left the board at a quarter of the screen. */
@media (max-width:760px){
  .top{padding:8px 10px; gap:8px}
  .brand img{height:26px}
  .chip{padding:7px 10px; font-size:12px}

  #players{
    top:46px; left:8px; right:8px; width:auto;
    flex-direction:row; gap:6px; overflow-x:auto; padding-bottom:2px;
    scrollbar-width:none;
  }
  #players::-webkit-scrollbar{display:none}
  .pcard{
    flex:1 1 0; min-width:0; padding:6px 8px; gap:6px; border-left-width:3px;
    border-radius:8px;
  }
  .pcard.active{transform:none; box-shadow:0 6px 16px rgba(0,0,0,.4)}
  .pmeta b{font-size:12px}
  .tally{flex-direction:row; gap:8px}
  .tally span{font-size:12.5px; gap:3px}
  .coin,.star{width:12px; height:12px}
  .pawn{width:12px; height:15px}

  .meter{
    position:absolute; right:8px; top:100px; bottom:auto;
    width:auto; padding:4px 9px; border-radius:8px; text-align:right;
  }
  .meter b{font-size:11.5px}
  .meter small{display:inline; margin:0 0 0 6px; font-size:11px}
  .meter .lbl{display:none}                /* "jobs left in the box" is too long here */
  .meter .shortlbl{display:inline}
  #jobsBar{display:none}

  /* under the meter, not beside it: the meter's width changes with the number and the two
     collided the moment the count went to two digits */
  #say{
    top:134px; left:8px; right:8px; transform:none;
    max-width:none; text-align:center;
    font-size:12.5px; padding:6px 10px; border-radius:7px;
  }

  /* the thumb furniture: Foo Foo sits ABOVE the button, never beside it */
  #rollBtn{
    left:8px; right:8px; transform:none; min-width:0; width:auto;
    bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    min-height:54px; font-size:15px;
  }
  #rollBtn:active:not(:disabled){transform:scale(.98)}
  #foofoo{
    left:8px; bottom:calc(72px + env(safe-area-inset-bottom, 0px));
    align-items:flex-start;
  }
  .ff-owl{width:58px}
  .ff-bubble{max-width:calc(100vw - 32px); font-size:12.5px; padding:8px 11px}

  .sheet{padding:12px}
  .panel{max-height:calc(100svh - 24px);border-radius:22px;padding:26px 20px}
  .panel .tag{margin-bottom:28px;font-size:14px}
  .setup-head > img{width:58px;height:58px}
  .seat{min-height:62px;padding-left:13px;gap:9px}
  .pname{font-size:14px}
  .who button{min-height:36px;padding-inline:10px;font-size:12px}
  .count{margin-bottom:22px}
  .card{width:min(320px,90vw)}
  .opts button{min-height:50px; font-size:15px}
}

/* short classroom screens and landscape iPads */
@media (max-height:820px) and (min-width:761px){
  .sheet{padding:18px}
  .panel{max-height:calc(100svh - 36px);padding:28px 34px;border-radius:24px}
  .panel h1{font-size:42px}
  .panel .tag{margin:9px 0 24px;font-size:14px}
  .panel h2{margin-bottom:9px}
  #seats{gap:7px;margin-bottom:14px}
  .seat{min-height:56px;padding-block:6px}
  .count{margin-bottom:17px}
  .go{min-height:54px}
  .fine{margin-top:12px}
}

/* Phone held sideways: very little height, so the host steps out of the way entirely and
   the button shrinks to the thumb rather than the width of the screen. */
@media (max-height:430px) and (orientation:landscape){
  #players{top:44px; flex-direction:row; width:auto; left:8px; right:8px}
  .pmeta{display:none}
  .pcard{flex:0 0 auto; padding:5px 8px}
  .meter{top:44px; right:8px; padding:4px 8px}
  #jobsBar{display:none}
  #say{top:86px; font-size:12px; padding:5px 9px}
  #foofoo{display:none}
  #rollBtn{
    left:auto; right:10px; transform:none; width:auto; min-width:180px;
    bottom:calc(8px + env(safe-area-inset-bottom, 0px)); min-height:46px; font-size:13.5px;
  }
}


/* ── the preview sheet: shown after a short trial, then the school CTA ──── */
#trialSheet{z-index:10; opacity:0; visibility:hidden}
#trialSheet.open{opacity:1; visibility:visible}
#trialSheet h2{
  text-align:left; color:var(--navy); font-size:clamp(24px,3.4vw,32px);
  letter-spacing:-.03em; line-height:1.12; text-transform:none; margin:0 0 14px;
}
.trial-lead{margin:0 0 14px; font-size:16px; line-height:1.6; color:#111827}
.trial-actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:22px}
.trial-primary{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 24px; text-decoration:none;
}
.trial-secondary{
  display:inline-flex; align-items:center; min-height:48px; padding:0 6px;
  color:var(--navy); font-size:15px; text-decoration:underline; text-underline-offset:3px;
}
.trial-secondary:focus-visible,.trial-primary:focus-visible{outline:3px solid var(--navy); outline-offset:3px}
@media (prefers-reduced-motion:reduce){#trialSheet{transition:none}}