/* ============================================================
   GLOBE QUEST — pop-up storybook in space
   Palette: midnight indigo paper + sticker brights
   ============================================================ */
:root{
  --ink:#151230;
  --ink-soft:#3b3566;
  --paper:#fff4dd;
  --paper-2:#ffe9c2;
  --night:#171243;
  --night-2:#0d0a2b;
  --sun:#ffc93c;
  --coral:#ff6b57;
  --mint:#3fd0b8;
  --sky:#54a3ff;
  --grape:#b06de0;
  --leaf:#7bc96f;

  --font-display:"Century Gothic","CenturyGothic","Futura","Avenir Next","Trebuchet MS",sans-serif;
  --font-body:"Segoe UI","Avenir Next","Verdana",sans-serif;
  --font-hand:"Segoe Print","Ink Free","Bradley Hand","Comic Sans MS",cursive;

  --edge:4px solid var(--ink);
  --pop:8px 8px 0 var(--ink);
  --pop-sm:5px 5px 0 var(--ink);
  --r:22px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  font-family:var(--font-body);
  background:var(--night-2);
  color:var(--paper);
  user-select:none;
}
/* touch-action lives on the world layers, NOT on body: an ancestor set to `none`
   wins over descendants, which would kill scrolling inside the tall overlay sheets. */
#sky,#stars,#stage,#globe,#fx,#grain,#hud{touch-action:none}

/* ---------- atmosphere ---------- */
#sky{position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(120% 90% at 50% 8%, #2e2470 0%, #1a1450 38%, #0d0a2b 78%);
}
#stars{position:fixed;inset:0;z-index:1;pointer-events:none}
#grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- globe stage ---------- */
#stage{position:fixed;inset:0;z-index:2;display:grid;place-items:center}
#globe{display:block;cursor:grab;filter:drop-shadow(0 26px 46px rgba(0,0,0,.55))}
#globe.drag{cursor:grabbing}
#fx{position:fixed;inset:0;z-index:40;pointer-events:none}

/* ---------- shared bits ---------- */
.card{
  background:var(--paper);color:var(--ink);
  border:var(--edge);border-radius:var(--r);box-shadow:var(--pop);
}
.btn{
  font-family:var(--font-display);font-weight:700;
  border:var(--edge);border-radius:18px;background:var(--sun);color:var(--ink);
  box-shadow:var(--pop-sm);cursor:pointer;
  padding:clamp(10px,2.6vw,14px) clamp(16px,5vw,26px);
  font-size:clamp(15px,4vw,19px);letter-spacing:.03em;min-height:44px;
  transition:transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
@media(hover:hover){.btn:hover{filter:brightness(1.06)}}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn.coral{background:var(--coral);color:#fff}
.btn.mint{background:var(--mint)}
.btn.sky{background:var(--sky);color:#fff}
.btn.ghost{background:var(--paper)}
.btn.lg{padding:clamp(13px,3.4vw,20px) clamp(24px,7.5vw,46px);font-size:clamp(20px,5.6vw,28px);border-radius:22px}
.hidden{display:none!important}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;
  display:grid;grid-template-rows:auto 1fr auto;gap:10px;
  padding:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right))
          calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left))}
/* Only the real controls may capture pointers. The HUD's middle grid row is an empty
   spacer lying right over the globe — if it captures, the globe can't be dragged at all. */
#hud > *{pointer-events:none}
#hud .pill, #hud .btn{pointer-events:auto}

/* The groups never break apart internally, and the right-hand group keeps to the
   right whether or not the bar wraps: `space-between` sent a wrapped second row
   flush LEFT, so the lives pill landed under the score with a hole beside it.
   An auto margin does the same job on one line and still holds on two. */
.topbar{display:flex;gap:8px;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}
.topbar .grp{display:flex;gap:8px;flex-wrap:nowrap;align-items:center;min-width:0}
.topbar .grp+.grp{margin-left:auto}
.pill{
  background:var(--paper);color:var(--ink);border:var(--edge);border-radius:999px;
  box-shadow:var(--pop-sm);padding:clamp(6px,2vw,8px) clamp(11px,3.4vw,16px);
  font-family:var(--font-display);
  font-weight:700;font-size:clamp(14px,3.8vw,17px);display:flex;align-items:center;gap:8px;line-height:1
}
.pill .lbl{font-size:clamp(9px,2.6vw,11px);letter-spacing:.14em;opacity:.55;text-transform:uppercase}
.pill.score b{font-size:clamp(18px,5vw,22px);min-width:2ch;display:inline-block;text-align:right}
#streak.hot{background:var(--sun);animation:wob .5s ease}
@keyframes wob{0%,100%{transform:rotate(0)}30%{transform:rotate(-4deg) scale(1.1)}65%{transform:rotate(4deg) scale(1.1)}}
.hearts{display:flex;gap:4px;font-size:clamp(16px,4.6vw,20px);line-height:1}
.heart.gone{filter:grayscale(1);opacity:.28;transform:scale(.85)}
.heart{transition:.3s}

.iconbtn{width:clamp(40px,11.5vw,46px);height:clamp(40px,11.5vw,46px);min-height:0;
  border-radius:14px;display:grid;place-items:center;font-size:clamp(17px,4.8vw,20px);padding:0;flex:none}

/* ---------- question card ---------- */
#askwrap{display:flex;justify-content:center;align-items:flex-end;min-width:0}
#askwrap > div{width:min(560px,100%);min-width:0}
#ask{
  width:100%;padding:clamp(10px,3vw,16px) clamp(12px,3.4vw,18px);
  display:flex;gap:clamp(8px,2.6vw,14px);align-items:center;
  animation:pop .35s cubic-bezier(.2,1.5,.4,1)
}
@keyframes pop{from{transform:translateY(30px) scale(.9);opacity:0}}
#ask.shake{animation:shk .4s}
@keyframes shk{10%,90%{transform:translateX(-7px)}30%,70%{transform:translateX(9px)}50%{transform:translateX(-9px)}}

#pin{width:clamp(44px,13vw,62px);height:clamp(44px,13vw,62px);flex:none;border-radius:50%;border:var(--edge);
  display:grid;place-items:center;font-size:clamp(22px,6.6vw,30px);background:var(--mint);box-shadow:3px 3px 0 var(--ink)}
#asktext{flex:1;min-width:0}
#kicker{font-size:clamp(9px,2.7vw,11px);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
#target{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,5.6vw,34px);
  line-height:1.05;margin-top:2px;overflow-wrap:break-word;hyphens:auto}
#sub{font-size:clamp(11px,3.2vw,13px);color:var(--ink-soft);margin-top:3px}

.timer{width:clamp(42px,12vw,54px);height:clamp(42px,12vw,54px);flex:none;position:relative}
.timer svg{transform:rotate(-90deg);display:block;width:100%;height:100%}
.timer .num{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:clamp(15px,4.2vw,18px)}
.timer.low .num{color:var(--coral)}

/* ---------- multiple-choice answers (Name That Place) ---------- */
#choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
#choices .btn{
  width:100%;min-width:0;background:var(--paper);border-radius:16px;
  padding:clamp(8px,2.4vw,12px) clamp(6px,2vw,12px);
  font-size:clamp(12px,3.3vw,17px);line-height:1.15;min-height:50px;
  overflow-wrap:break-word;hyphens:auto
}
/* a spent guess stays on screen (so it can't be picked twice) but stops shouting */
#choices .btn.wrong{
  background:rgba(21,18,48,.1);color:rgba(21,18,48,.42);border-color:rgba(21,18,48,.3);
  box-shadow:none;transform:translate(4px,4px);text-decoration:line-through;cursor:default
}
@media(hover:hover){#choices .btn.wrong:hover{filter:none}}

/* the flag standing in for the place name during a Flag Hunt */
#askflag{width:clamp(52px,15vw,68px);margin:3px 0 1px;line-height:0}
#askflag svg{width:100%;height:auto;display:block;
  border:2.5px solid var(--ink);border-radius:6px;box-shadow:3px 3px 0 var(--ink);background:#fff}
/* with the flag carrying the question there is no name to show — don't reserve the space */
#target:empty{display:none}

/* ---------- route strip (Flight Path) ----------
   Six country names never fit across a phone, so the strip scrolls sideways and
   keeps the current stop in view rather than shrinking the text to nothing. */
#route{
  display:flex;align-items:center;gap:6px;margin-top:10px;
  overflow-x:auto;white-space:nowrap;padding:2px 1px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch
}
#route::-webkit-scrollbar{display:none}
.rstop{
  flex:none;background:rgba(255,244,221,.14);color:rgba(255,244,221,.7);
  border:2px solid rgba(255,244,221,.3);border-radius:999px;
  padding:5px 11px;font-size:clamp(11px,3vw,14px);font-family:var(--font-display)
}
.rstop.done{background:var(--mint);color:var(--ink);border-color:var(--ink)}
.rstop.now{
  background:var(--sun);color:var(--ink);border-color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);animation:stpop .45s cubic-bezier(.2,1.7,.4,1)
}
.rsep{flex:none;color:rgba(255,244,221,.45);font-size:13px}

/* the dig counter stands in for the hearts during a Treasure Hunt */
.digs{font-family:var(--font-display);font-weight:700;letter-spacing:.3px;white-space:nowrap}

/* ---------- clue trail (Where in the World?) ----------
   Revealed clues stack up and stay put, so the child can re-read clue one while
   thinking about clue three instead of holding all three in their head. */
#clues{display:grid;gap:6px;margin-top:10px}
.cluerow{
  display:flex;align-items:flex-start;gap:9px;text-align:left;
  background:var(--paper);color:var(--ink);border:3px solid var(--ink);
  border-radius:16px;padding:9px 12px;box-shadow:4px 4px 0 var(--ink);
  font-size:clamp(13px,3.4vw,16px);line-height:1.3
}
.cluerow .cn{
  flex:none;width:22px;height:22px;border-radius:999px;background:var(--sun);
  border:2px solid var(--ink);font-family:var(--font-display);font-weight:700;
  font-size:13px;line-height:19px;text-align:center
}
.cluerow.fresh{animation:stpop .45s cubic-bezier(.2,1.7,.4,1)}
#clues .cluemore{width:100%;min-height:42px;font-size:clamp(12px,3.2vw,15px);margin-top:2px}

/* ---------- power-ups ---------- */
/* Three equal slots under the question card. A spent power-up stays in place
   (so the tray never reflows mid-round) and just goes flat and unpressable. */
#powers{display:flex;gap:8px;justify-content:center;margin-top:10px}
/* Three slots share one card width, so every px inside is spoken for: at 385px a
   button gets ~115px, and icon + gaps + count pill must leave ~60px for "Compass". */
#powers .pw{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;
  background:var(--grape);color:#fff;border-radius:16px;
  padding:8px 5px;min-height:46px;font-size:clamp(11px,3vw,15px)
}
#powers .pw .ic{font-size:clamp(15px,4vw,19px);line-height:1;flex:none}
#powers .pw .nm{font-family:var(--font-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#powers .pw .n{font-family:var(--font-display);font-weight:700;
  background:rgba(0,0,0,.22);border-radius:999px;padding:1px 6px;flex:none}
/* below ~360px three labelled buttons stop fitting — the icon has to carry it */
@media(max-width:360px){#powers .pw .nm{display:none}}
/* Spent. The tray sits straight on the night sky, not on a paper card, so the
   greyed-out treatment used elsewhere would make the button disappear entirely. */
#powers .pw.empty{
  background:rgba(255,244,221,.1);color:rgba(255,244,221,.5);
  border-color:rgba(255,244,221,.3);border-style:dashed;
  box-shadow:none;transform:translate(4px,4px);cursor:default}
#powers .pw.empty .n{background:rgba(255,244,221,.12)}
@media(hover:hover){#powers .pw.empty:hover{filter:none}}
#powers .pw.fresh{animation:stpop .5s cubic-bezier(.2,1.7,.4,1)}

/* the clock, held still by a Freeze */
.timer.frozen .num{color:var(--sky)}

/* level progress dots */
#dots{display:flex;gap:6px;justify-content:center;margin-top:10px;flex-wrap:wrap}
#dots i{width:12px;height:12px;border-radius:50%;background:rgba(255,244,221,.22);
  border:2px solid rgba(21,18,48,.55);display:block;transition:.25s}
#dots i.on{background:var(--sun);transform:scale(1.25)}
#dots i.miss{background:var(--coral)}

/* ---------- overlays ---------- */
.veil{position:fixed;inset:0;z-index:30;display:grid;place-items:center;
  padding:calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right))
          calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
  background:rgba(10,7,32,.72);backdrop-filter:blur(7px);animation:fade .25s;touch-action:pan-y}
@keyframes fade{from{opacity:0}}
.sheet{width:min(600px,100%);padding:clamp(18px,5vw,30px) clamp(16px,4.6vw,28px);text-align:center;
  max-height:100%;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet h1{font-family:var(--font-display);font-size:clamp(34px,9vw,60px);line-height:.95;letter-spacing:-.02em}
.sheet h2{font-family:var(--font-display);font-size:clamp(24px,7vw,40px);line-height:1}
.sheet p{margin-top:12px;font-size:clamp(14px,4vw,16px);line-height:1.55;color:var(--ink-soft)}
.rowbtn{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:clamp(14px,4vw,22px)}

/* title art */
.titlebtns{display:contents}   /* invisible in portrait; a real box in landscape */
/* the four secondary modes, two per line. A wrapping flex row gave every button
   its own line on a phone; a 2-col grid fixes the shape at any width. */
.menugrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.menugrid .btn{width:100%;min-width:0;display:flex;align-items:center;justify-content:center;
  gap:6px;padding:clamp(10px,2.8vw,13px) clamp(6px,2vw,12px);
  font-size:clamp(13px,3.7vw,17px);white-space:nowrap}
.logo{position:relative;display:inline-block;margin-bottom:6px}
/* Sized off whichever axis is scarcer. Width alone gave a tall-narrow window the
   full 86px wordmark — ~150px of height — no matter how little height was left,
   which is what pushed the menu past the fold in the first place. */
/* line-height .85 packed the two words tighter than the 10px coral shadow is
   deep, so GLOBE's shadow landed inside QUEST and the wordmark read as a smear */
.logo .word{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(40px,min(12.5vw,9.5vh),86px);line-height:1.12;color:var(--paper);
  text-shadow:4px 4px 0 var(--ink), 7px 7px 0 var(--coral)}
.logo .word em{font-style:normal;color:var(--sun)}
.tag{font-family:var(--font-hand);font-size:clamp(16px,4.6vw,20px);color:var(--paper);opacity:.9;margin-top:14px}

/* ---------- title screen ---------- */
/* A column flex instead of the shared grid: the corner strip takes its height off
   the top and the menu centres in whatever is left, so the two can never overlap
   however short the window gets. */
#scTitle{display:flex;flex-direction:column;align-items:center}
#scTitle .sheet{margin-block:auto;max-height:none;min-height:0}
/* Lighter than the other veils, and darkest right where the type sits: the globe
   behind the title is already draggable, and at .72 + 7px blur nobody could tell. */
#scTitle{background:radial-gradient(62% 50% at 50% 46%,
    rgba(10,7,32,.74) 0%, rgba(10,7,32,.56) 58%, rgba(10,7,32,.34) 100%);
  backdrop-filter:blur(2px)}
#scTitle .tag{text-shadow:0 2px 10px rgba(10,7,32,.85)}

#titlecorners{width:100%;flex:none;display:flex;gap:10px;
  align-items:flex-start;justify-content:space-between}
#titlecorners .playerchip{margin:0;min-width:0}
.cornerbtn{flex:none;padding:7px 13px;min-height:0;border-radius:999px;border-width:3px;
  box-shadow:3px 3px 0 var(--ink);font-size:clamp(12px,3.4vw,14px);letter-spacing:.02em}
/* Share and Parents travel together: on a narrow phone they stack under each
   other rather than squeezing the player's name out of the opposite corner. */
/* Shrinkable, or the wrap above is decorative: at flex:none the group keeps its
   max-content width, runs off the side of a narrow phone and takes the layout
   with it. It has to be allowed to get narrower than its buttons before they
   will stack. */
.cornergrp{flex:0 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}

/* Three labelled pills plus the name chip want ~600px of row. Under that the
   group wrapped onto a second line AND the name still came out as "Play…", so
   here the corner drops to icons only — the same trade the power-ups make at
   360px. Measured rather than guessed: 430 (14 Pro Max) and 520 both still
   broke with labels on, which is why this sits well above the 420px block
   below and above the 520px landscape breakpoint too.
   The labels are only hidden from the eye, so the buttons keep their names for
   anyone not going by the picture. */
@media(max-width:599px){
  .cornerbtn{padding:6px 9px;font-size:15px}
  .cornerbtn span{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
}
/* .btn assumes a <button>: an anchor wearing it still needs the underline gone
   and a box model that honours the padding. */
.linkbtn{display:inline-flex;align-items:center;gap:5px;text-decoration:none}

/* ---------- tip jar ---------- */
/* Two routes to the same jar, so each is fenced off rather than run together:
   a payer only ever wants one of them and should be able to ignore the other. */
.tipway{margin-top:clamp(12px,3vw,24px);padding-top:clamp(10px,2.6vw,20px);
  border-top:3px dashed rgba(21,18,48,.18)}
.tipway h3{font-family:var(--font-display);font-size:clamp(15px,4vw,20px);
  color:var(--ink);opacity:.75;margin-bottom:8px}
/* On a short screen the sheet is a scroller and Back ends up under the fold,
   so the two lines that are nice-to-have rather than needed step aside: the
   pitch is on the title screen anyway and the footnote repeats what the
   Parents page says at length. */
@media(max-height:600px){
  #scTip>.sheet>p:first-of-type,#scTip .tipnote{display:none}
}

/* ---------- share sheet ---------- */
/* A quiet zone is part of the code, so the white plate is drawn in the canvas
   itself and this only has to centre it. Capped by height as well as width
   because a landscape phone has ~300px of it in total. */
.qrwrap{display:grid;place-items:center;margin-top:clamp(14px,4vw,20px)}
/* a shared score is two lines — the run, then what it adds up to */
#shSub{white-space:pre-line}
/* The tip code needs the same treatment: a canvas left alone lays out at its
   attribute width, which is device pixels — on a 3x phone that is ~720px of it
   inside a 360px sheet. */
#shQR,#tipQR{width:min(240px,58vw,34vh);height:auto;aspect-ratio:1;
  border:var(--edge);border-radius:14px;box-shadow:var(--pop-sm);background:#fff}
/* but a smaller share of the screen than the share sheet's, because this one
   carries a heading, an ID, two buttons and a footnote under it: at 34vh the
   Back button fell off the bottom of a 568px phone. Still ~150px, which is
   comfortably scannable — a phone camera only needs the code sharp, not big. */
#tipQR{width:min(210px,52vw,27vh)}
/* A landscape phone is the wrong shape for a column: stacked, the code was
   squeezed to ~90px by the height cap while 600px of width went unused, and
   Copy and Back fell off the bottom. Beside its own ID instead, the code gets
   the height back and the buttons come back on screen. Below the cap above,
   not above it — same specificity, so the later rule is the one that counts. */
@media(max-height:560px) and (min-width:520px){
  #tipUpi{display:grid;column-gap:18px;align-items:center;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"head head" "qr id" "qr btns"}
  #tipUpi h3{grid-area:head}
  #tipUpi .qrwrap{grid-area:qr;margin-top:0}
  #tipUpi .linkbox{grid-area:id}
  #tipUpi .rowbtn{grid-area:btns}
  #tipQR{width:min(210px,40vw,38vh)}
  /* the last ~40px that keeps Back on screen at 360: taken off the title and
     the gaps rather than off the code, which is the one thing here that has to
     stay big enough for a camera */
  #scTip .sheet{padding-top:12px;padding-bottom:12px}
  #scTip h2{font-size:clamp(20px,5vw,27px)}
  #scTip .tipway{margin-top:9px;padding-top:8px}
  #scTip .tipway h3{margin-bottom:6px}
}
/* 320px of height is the shortest phone there is and was still ~20px over —
   the code gives up that last bit rather than Back staying half off. */
@media(max-height:340px) and (min-width:520px){
  #tipQR{width:min(210px,40vw,32vh)}
}
/* The link is there to be read aloud and typed, so it wraps anywhere rather
   than running off the side of a phone. */
/* 16px rather than a pill: a long URL wraps onto a second line on a phone, and
   a two-line pill looks like a mistake. */
.linkbox{margin-top:14px;padding:9px 14px;border-radius:16px;
  background:var(--paper-2);border:3px solid var(--ink);
  font-family:var(--font-body);font-weight:700;color:var(--ink);
  font-size:clamp(12px,3.4vw,15px);word-break:break-all;line-height:1.4}

/* Grouped spacing: the slogan hugs the logo, Daily hugs PLAY, and the real gaps
   fall between groups. Even margins made seven equal peers out of one hero.
   Height is in the clamp for the same reason it is on the wordmark — a short
   window should spend its gaps down before anything reaches the fold. */
#scTitle .slogan{margin-top:clamp(7px,2vw,11px)}
#scTitle .titlebtns .rowbtn{margin-top:clamp(8px,min(2.4vw,1.6vh),13px)}
/* the real gaps fall either side of PLAY; the rank bar hugs the grid above it */
#scTitle .titlebtns .rowbtn:first-child,
#scTitle .titlebtns .menugrid{margin-top:clamp(12px,min(4.6vw,3vh),26px)}
/* The hero button carries two lines — the journey, then where you are in it.
   Its own font-size (smaller ramp than .btn.lg) because "CONTINUE JOURNEY" is
   four times the width of "PLAY" and wrapped onto two lines at 320px. */
#btnPlay{display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:clamp(16px,4.6vw,26px);line-height:1.05}
#btnPlay .pmain{white-space:nowrap}
#btnPlay small{font-size:.5em;letter-spacing:.02em;opacity:.85;font-weight:700}
#btnPlay small:empty{display:none}
/* the stats line repeats what the rank chip already shows, so it reads as a
   footnote rather than a seventh peer competing with the buttons */
#scTitle #bestline{font-size:clamp(12px,3.4vw,15px);margin-top:clamp(10px,2.6vw,14px);opacity:.8}

/* ---------- explorer rank ---------- */
/* A bar that only ever moves forward. It lives inside .titlebtns so the
   landscape split carries it into the menu column along with the buttons. */
.rankchip{display:flex;align-items:center;gap:10px;width:min(340px,100%);
  background:var(--paper);color:var(--ink);border:3px solid var(--ink);
  border-radius:999px;box-shadow:var(--pop-sm);padding:6px 14px 6px 8px}
.rankchip .rkic{flex:none;font-size:clamp(20px,5.4vw,24px);line-height:1;
  width:clamp(32px,8.6vw,38px);height:clamp(32px,8.6vw,38px);border-radius:50%;
  background:var(--paper-2);border:2px solid var(--ink);display:grid;place-items:center}
.rankchip .rkinfo{flex:1;min-width:0;text-align:left}
.rankchip b{font-family:var(--font-display);font-size:clamp(12px,3.4vw,15px);
  display:block;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* nowrap, and no width cap: "44 XP to go" was breaking onto two lines and
   stretching the chip taller than the buttons above it */
.rankchip small{flex:none;font-size:clamp(9px,2.5vw,11px);color:var(--ink-soft);
  letter-spacing:.03em;line-height:1.2;text-align:right;white-space:nowrap}
.rbar{height:7px;border-radius:999px;background:rgba(21,18,48,.16);margin-top:4px;overflow:hidden}
.rbar i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--mint),var(--sun));transition:width .5s ease}

/* choice tiles */
.tiles{display:grid;gap:14px;margin-top:24px}
@media(min-width:520px){.tiles{grid-template-columns:1fr 1fr}}
.tile{
  background:var(--paper);border:var(--edge);border-radius:20px;box-shadow:var(--pop-sm);
  padding:18px;text-align:left;cursor:pointer;color:var(--ink);
  transition:transform .1s, box-shadow .1s
}
@media(hover:hover){.tile:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}}
.tile:active{transform:translate(4px,4px);box-shadow:0 0 0}
.tile .big{font-family:var(--font-display);font-weight:700;font-size:clamp(19px,5.4vw,24px);
  display:flex;gap:10px;align-items:center}
.tile .small{font-size:clamp(12px,3.6vw,13px);color:var(--ink-soft);margin-top:6px;line-height:1.45}

/* ---------- players & the journey ---------- */
/* Block-level on purpose: as an inline-flex box it shared a line with the
   inline-block logo, so on a wide-enough screen the two sat side by side and
   the logo ran off the edge. width:max-content keeps the pill hugging its text. */
.playerchip{display:flex;width:max-content;max-width:100%;margin:0 auto 16px;
  align-items:center;gap:9px;
  border-radius:999px;padding:7px 9px 7px 12px;font-size:clamp(13px,3.6vw,16px)}
.playerchip #pcav{font-size:clamp(19px,5vw,23px);line-height:1}
.playerchip b{max-width:9ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.playerchip .sw{font-family:var(--font-body);font-weight:700;font-size:clamp(9px,2.6vw,11px);
  letter-spacing:.12em;text-transform:uppercase;opacity:.55;
  border-left:2px solid rgba(21,18,48,.25);padding-left:9px}

.proflist{display:grid;gap:11px;margin-top:20px}
.profcard{display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;
  background:var(--paper-2);border:var(--edge);border-radius:20px;box-shadow:var(--pop-sm);
  padding:10px 12px;transition:transform .1s, box-shadow .1s}
.profcard.on{background:var(--sun)}
@media(hover:hover){.profcard:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}}
.profcard:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.profcard .av{width:clamp(44px,12vw,54px);height:clamp(44px,12vw,54px);flex:none;
  border-radius:50%;border:3px solid var(--ink);background:var(--paper);
  display:grid;place-items:center;font-size:clamp(22px,6.4vw,28px)}
.profcard .who{flex:1;min-width:0}
.profcard .who b{font-family:var(--font-display);font-size:clamp(17px,4.8vw,21px);color:var(--ink);
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profcard .who small{display:block;font-size:clamp(11px,3.2vw,13px);color:var(--ink-soft);margin-top:2px}
.xbtn{flex:none;padding:8px 11px;font-size:15px;min-height:0;border-width:3px;border-radius:14px}

.nameinput{width:min(320px,100%);margin:20px auto 0;display:block;text-align:center;
  font-family:var(--font-display);font-weight:700;font-size:clamp(19px,5.4vw,24px);color:var(--ink);
  background:var(--paper-2);border:var(--edge);border-radius:18px;box-shadow:var(--pop-sm) inset;
  padding:12px 16px;outline:none;user-select:text}
.nameinput:focus{background:#fff}
.nameinput::placeholder{color:rgba(21,18,48,.3)}
.stickers.avrow{gap:8px;margin-top:14px}
.avpick{cursor:pointer;transition:transform .1s}
.avpick.on{background:var(--sun);transform:scale(1.06);box-shadow:5px 5px 0 var(--ink)}

.levellist{display:grid;gap:9px;margin-top:18px;text-align:left}
.lvrow{display:flex;align-items:center;gap:12px;cursor:pointer;
  background:var(--paper-2);border:var(--edge);border-radius:18px;box-shadow:var(--pop-sm);
  padding:9px 12px;transition:transform .1s, box-shadow .1s}
.lvrow.now{background:var(--mint)}
@media(hover:hover){.lvrow:not(.locked):hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}}
.lvrow:not(.locked):active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.lvrow.locked{background:rgba(21,18,48,.07);border-style:dashed;box-shadow:none;cursor:default;opacity:.75}
.lvbadge{width:clamp(38px,10.5vw,46px);height:clamp(38px,10.5vw,46px);flex:none;border-radius:50%;
  border:3px solid var(--ink);background:var(--paper);display:grid;place-items:center;
  font-size:clamp(19px,5.4vw,24px)}
.lvrow.locked .lvbadge{background:rgba(21,18,48,.06);border-style:dashed}
.lvtext{flex:1;min-width:0}
.lvtext b{font-family:var(--font-display);font-size:clamp(14px,4vw,17px);color:var(--ink);
  display:block;line-height:1.2}
.lvtext small{display:block;font-size:clamp(11px,3.1vw,12px);color:var(--ink-soft);margin-top:2px}
.lvgo{flex:none;font-size:clamp(15px,4.2vw,18px);opacity:.65}

/* fact card */
.flagpin{width:clamp(62px,18vw,84px);height:clamp(62px,18vw,84px);margin:0 auto 4px;
  border-radius:50%;border:var(--edge);
  display:grid;place-items:center;font-size:clamp(30px,9vw,42px);box-shadow:4px 4px 0 var(--ink)}
.fact{font-family:var(--font-hand);font-size:clamp(16px,4.6vw,19px);line-height:1.5;color:var(--ink);
  background:var(--paper-2);border:3px dashed rgba(21,18,48,.35);border-radius:16px;
  padding:clamp(11px,3.2vw,14px) clamp(12px,3.6vw,16px);margin-top:16px}
.gain{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,7vw,30px);color:var(--ink)}
.gain span{color:var(--coral)}

/* stickers */
.stickers{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.st{width:clamp(52px,15vw,66px);height:clamp(52px,15vw,66px);border-radius:50%;border:var(--edge);
  display:grid;place-items:center;flex:none;
  font-size:clamp(24px,7vw,30px);background:var(--paper-2);box-shadow:3px 3px 0 var(--ink)}
/* a collected country wears its flag as a badge in the corner of its sticker */
.st{position:relative}
.miniflag{position:absolute;right:-3px;bottom:-3px;width:22px;height:15px;line-height:0}
.miniflag svg{width:100%;height:100%;display:block;
  border:2px solid var(--ink);border-radius:3px;background:#fff}
@media(max-width:400px){.miniflag{width:18px;height:12px}}

.st.locked{background:rgba(21,18,48,.08);color:transparent;box-shadow:none;border-style:dashed;position:relative}
.st.locked::after{content:"?";color:rgba(21,18,48,.35);font-family:var(--font-display);font-weight:700;font-size:26px}
.st.newone{animation:stpop .6s cubic-bezier(.2,1.7,.4,1)}
@keyframes stpop{from{transform:scale(0) rotate(-40deg)}}

/* the flag on the fact card — the moment a country's colours get taught */
#factflag{width:clamp(56px,17vw,74px);margin:9px auto 0;line-height:0}
#factflag svg{width:100%;height:auto;display:block;
  border:3px solid var(--ink);border-radius:7px;box-shadow:3px 3px 0 var(--ink);background:#fff}

/* the 60-place album: one sticker per place, grouped by chapter */
.stsec{font-family:var(--font-display);font-weight:700;color:var(--ink);text-align:left;
  font-size:clamp(12px,3.4vw,15px);letter-spacing:.08em;text-transform:uppercase;
  margin:20px 0 0;padding-bottom:5px;display:flex;gap:10px;justify-content:space-between;
  align-items:baseline;border-bottom:3px dashed rgba(21,18,48,.28)}
.stsec span{font-family:var(--font-body);font-size:12px;letter-spacing:0;color:var(--ink-soft);flex:none}
.stickers.album{gap:7px;margin-top:10px;justify-content:flex-start}
.stickers.album .st{width:clamp(42px,11.5vw,54px);height:clamp(42px,11.5vw,54px);border-width:3px;
  font-size:clamp(20px,5.6vw,26px);box-shadow:2px 2px 0 var(--ink);cursor:pointer}
.stickers.album .st.locked{cursor:default}
.stickers.album .st.locked::after{font-size:clamp(16px,4.4vw,20px)}
/* A collected sticker also shows how well the place is actually known: a gold
   ring once it has been found cleanly twice clear of misses, a red one while it
   is still being missed more often than found. A ring rather than the locked
   sticker's "?" — the place is collected either way, this is only how firmly.
   Kept inside the 7px album gap: 2px wide at 1px offset reaches 3px a side. */
.stickers.album .st.solid{outline:2px solid var(--sun);outline-offset:1px}
.stickers.album .st.tricky{outline:2px dashed #ff6b57;outline-offset:1px}
@media(hover:hover){.stickers.album .st:not(.locked):hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}}

/* "you just earned one" flash on the fact card */
.newsticker{font-family:var(--font-display);font-weight:700;color:var(--ink);
  background:var(--sun);border:3px solid var(--ink);border-radius:14px;
  padding:8px 14px;margin-top:12px;display:inline-block;
  font-size:clamp(13px,3.8vw,16px);animation:stpop .5s cubic-bezier(.2,1.7,.4,1)}

/* daily challenge screen */
#dlstreak{font-family:var(--font-hand);font-size:clamp(15px,4.2vw,19px);color:var(--ink-soft);margin-top:6px}
#dailydot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--coral);
  border:2px solid var(--ink);margin-left:8px;vertical-align:middle}
#dailydot.done{background:var(--mint)}

.stars{font-size:clamp(32px,10vw,44px);letter-spacing:6px;line-height:1}
.stars i{font-style:normal;opacity:.22}
.stars i.lit{opacity:1;animation:stpop .5s backwards}
.stars i.lit:nth-child(2){animation-delay:.15s}
.stars i.lit:nth-child(3){animation-delay:.3s}

/* toast */
#toast{position:fixed;left:50%;top:calc(76px + env(safe-area-inset-top));transform:translateX(-50%);z-index:35;
  padding:10px 20px;border-radius:999px;font-family:var(--font-display);font-weight:700;
  font-size:clamp(15px,4.2vw,20px);line-height:1.25;text-align:center;
  max-width:min(88vw,520px);
  border:var(--edge);box-shadow:var(--pop-sm);opacity:0;transition:.2s;pointer-events:none}
#toast.show{opacity:1;animation:pop .3s}

/* parent note */
.note{text-align:left;font-size:clamp(13px,3.8vw,14px);line-height:1.6;color:var(--ink-soft)}
.note li{margin:8px 0 8px 18px}
.note b{color:var(--ink)}

/* ---------- privacy & terms page ---------- */
/* privacy.html is the only other document on the site. It has no globe and no
   script behind it, so it borrows the overlay shape — one .veil holding one
   scrollable .sheet — and adds only what a page of running prose needs and a
   game sheet never did: text that reads left-aligned and can be selected.
   body sets user-select:none so a child dragging the globe never highlights the
   HUD; on a policy people are entitled to copy, that would be the wrong call. */
.legal{text-align:left;user-select:text}
.legal h1{font-family:var(--font-display);font-size:clamp(27px,7.4vw,42px);line-height:1;
  letter-spacing:-.01em;text-align:center}
.legal .updated{display:block;text-align:center;margin-top:8px;
  font-size:clamp(11px,3.2vw,13px);color:var(--ink-soft)}
.legal .tldr{margin-top:clamp(16px,4.5vw,22px);padding:clamp(13px,3.6vw,17px);
  background:var(--paper-2);border:3px solid var(--ink);border-radius:16px;
  box-shadow:var(--pop-sm)}
/* the two halves of the page; the rule above each is what separates them */
.legal h2{font-family:var(--font-display);font-size:clamp(20px,5.2vw,27px);line-height:1.1;
  margin-top:clamp(24px,6.5vw,34px);padding-top:clamp(14px,4vw,18px);
  border-top:3px solid rgba(21,18,48,.16)}
.legal h3{font-family:var(--font-display);font-size:clamp(15px,4.2vw,18px);
  line-height:1.2;margin-top:clamp(16px,4.4vw,22px);color:var(--ink)}
.legal p,.legal li{font-size:clamp(13px,3.8vw,15px);line-height:1.62;color:var(--ink-soft)}
.legal p{margin-top:9px}
.legal li{margin:7px 0 7px 20px}
.legal b{color:var(--ink)}
/* :not(.btn) so the "Back to the game" link keeps its button face — .linkbtn's
   text-decoration:none would otherwise lose to this rule and underline it */
.legal a:not(.btn){color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   RESPONSIVE
   The globe itself is sized in JS (see layout()) from the space the
   HUD actually leaves free, so these rules only reshape the chrome.
   ============================================================ */

/* phones: keep the top bar on one line instead of wrapping into the globe's space.
   Dropping the streak label alone did not buy enough — at 398px the two groups
   still needed ~400px against ~380px free. Both labels carry their meaning some
   other way (the flame for streak, and the score is the one big number up there),
   so losing them plus a few px off the pill padding, gaps and icons is what
   actually closes the gap.

   Measured, not guessed, on where that has to start: at full size the two groups
   want 506px, so every width from 421px (where this block used to begin) up to
   529px wrapped — the lives pill dropped to a second row and the bar's height
   went 46px → 100px, which layout() then charges straight to the globe. 530px
   itself only cleared by 0.1px. The cap is 600px rather than 530px so that a
   four-digit score and a two-digit streak still have somewhere to grow. */
@media(max-width:600px){
  #streak .lbl,.pill.score .lbl{display:none}
  .pill{padding:6px 10px;gap:6px}
  .hearts{gap:3px}
  .topbar,.topbar .grp{gap:6px}
  .iconbtn{width:40px;height:40px;font-size:17px}
}

@media(max-width:420px){
  /* the bar clears by only 8px at 375px on the block above, and 375px is the
     commonest phone there is — spend the padding rather than run that close,
     since a font fallback (Century Gothic is absent on both iOS and Android)
     moves these numbers by more than 8px on its own */
  .pill{padding:5px 7px;gap:5px}
  .topbar,.topbar .grp{gap:5px}
  #hud{padding:calc(9px + env(safe-area-inset-top)) calc(6px + env(safe-area-inset-right))
               calc(9px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));gap:8px}
  #dots{margin-top:8px}
  #dots i{width:10px;height:10px}
  #toast{top:calc(66px + env(safe-area-inset-top))}
  /* "Continue · Level 4 ▶" is the widest label in the game and broke onto a
     second line at 320px, which pushed the level list below the fold */
  #btnContinue{font-size:clamp(17px,4.8vw,24px);padding:12px 18px}
  .lvrow,.profcard{padding:8px 10px;gap:10px}
  .lvtext b{font-size:14px}
  .avrow .st{width:46px;height:46px;font-size:23px}
  /* at 320px the chip and the parent pill share one line — drop the chip's
     "switch" caption rather than let either wrap */
  .playerchip .sw{display:none}
  .cornerbtn{padding:6px 11px}
}

/* the other end of the same problem: on a 320px phone even the compact bar wants
   313px against 302px of room, so it wrapped there too. The hearts are the
   expensive part — an emoji heart is ~1.5em wide, so three of them plus their
   gaps cost more than either pill's padding. The icon buttons stay at 40px:
   they are the only things up here a child actually has to hit.

   The score is sized for four digits on purpose. A place pays up to 320 and a
   level runs ten of them, so ~3000 is an ordinary Globe Trotter finish, not an
   edge case — measuring this bar with "0" in it is what makes it look like it
   fits when it doesn't. */
@media(max-width:360px){
  .pill.score b{font-size:16px}
  .hearts{font-size:13px;gap:2px}
}

/* short viewports (landscape phones, small windows): shrink the overlays so
   they fit without scrolling, and lose the non-essential lines */
@media(max-height:560px){
  .sheet{padding:16px 18px}
  .sheet h1{font-size:clamp(30px,9vh,52px)}
  .sheet h2{font-size:clamp(22px,7vh,34px)}
  .sheet p{margin-top:8px}
  .logo .word{font-size:clamp(34px,13vh,64px);text-shadow:4px 4px 0 var(--ink),8px 8px 0 var(--coral)}
  .tag{margin-top:8px}
  .rowbtn{margin-top:12px}
  .btn.lg{padding:12px 26px;font-size:21px;min-height:0}
  .fact{margin-top:10px}
  .tiles{margin-top:14px;gap:10px}
  .stickers{margin-top:12px}
  #sub{display:none}
  #btnPlay small{display:none}   /* height is scarcer than clarity here */
  #dots{margin-top:6px}
  #choices{margin-top:7px;gap:6px}
  #choices .btn{min-height:38px;padding:7px 8px;font-size:14px}
  #powers{margin-top:7px;gap:6px}
  #powers .pw{min-height:38px;padding:6px 4px;font-size:13px}
  .rankchip{padding:4px 12px 4px 6px;gap:8px}
  .rankchip .rkic{width:30px;height:30px;font-size:18px}
  .levellist,.proflist{margin-top:12px;gap:7px}
  .nameinput{margin-top:12px}
  .stickers.avrow{margin-top:10px;gap:6px}
  .cornerbtn{padding:5px 11px}
  #titlecorners .playerchip{padding:5px 8px 5px 11px}
}

/* An iPhone SE in portrait (568px) is too tall for the block above and too short
   for the full title: the player's own progress line ends up below the fold.
   The slogan is decoration and #bestline is not — it names the level they are on,
   and for a new player it carries the "drag the globe to spin it" hint anyway.
   The two conditions are "short and narrow" and "short but too tall for the
   landscape split" — between them they cover every case still stacking the
   title vertically, and leave the landscape two-column layout (which has room
   for the slogan) alone. */
@media (max-height:720px) and (max-width:519px),
       (min-height:641px) and (max-height:720px){
  #scTitle .tag:not(#bestline){display:none}
  #scTitle #bestline{margin-top:12px}
}

/* Six level cards stack happily in portrait, but on a landscape phone the same
   column makes a child scroll three screens to reach level 6 while 200px of
   width sits empty either side. Short viewport = spend the width instead.
   Only the list screens widen: the fact and question cards are deliberately
   narrow so a sentence stays readable. */
@media(max-height:640px) and (min-width:620px){
  #scLevels .sheet,#scPlayers .sheet,#scStickers .sheet{width:min(920px,100%)}
  .levellist,.proflist{grid-template-columns:1fr 1fr}
  #btnContinue{font-size:20px;padding:10px 20px}
  #scLevels .rowbtn{margin-top:11px}
  .lvrow,.profcard{padding:7px 10px}
  .lvbadge,.profcard .av{width:36px;height:36px;font-size:19px;border-width:3px}
  .lvtext b{font-size:14px}
  .lvtext small,.profcard .who small{font-size:11px}
  .profcard .who b{font-size:17px}
  .avrow .st{width:42px;height:42px;font-size:21px}
  .nameinput{margin-top:10px;padding:9px 14px}
}

/* The same trade on the title screen: logo on one side, menu on the other, so
   "For Parents" stops falling off the bottom. This one starts at 520px because
   a 568x320 phone in landscape is exactly the case that needs it, and a title
   needs far less width to split than a two-column list does. */
@media(max-height:640px) and (min-width:520px){
  /* both columns are percentages so they shrink together — a fixed 340px menu
     starved the left column at 550px wide and pushed the player chip out of it */
  #scTitle .sheet{width:min(880px,100%);display:grid;column-gap:30px;align-items:center;padding:14px 16px;
    grid-template-columns:minmax(0,1fr) minmax(0,46%);
    grid-template-areas:"logo menu" "tag menu" "best menu"}
  #scTitle .logo{grid-area:logo}
  #scTitle .tag{grid-area:tag;margin-top:6px}
  #scTitle .slogan{margin-top:6px}
  #scTitle #bestline{grid-area:best;margin-top:8px}
  #scTitle .titlebtns{grid-area:menu;display:block}
  /* same shape as the portrait grouping rules above so these win on source order —
     the class selectors are spelled out because .rankrow outranks a bare .rowbtn */
  #scTitle .titlebtns .rowbtn,
  #scTitle .titlebtns .rowbtn.rankrow,
  #scTitle .titlebtns .menugrid{margin-top:9px}
  /* the menu column is only ~46% wide here, so 2x2 would give four cramped cells */
  #scTitle .menugrid{grid-template-columns:1fr 1fr;gap:7px}
  #scTitle .titlebtns .rowbtn:first-child{margin-top:0}
  /* the menu buttons size off vw, but here they live in a 340px column — left
     at full size only one fits per line and the menu grows taller than the
     stacked layout it was meant to replace */
  #scTitle .titlebtns .btn{font-size:15px;padding:9px 14px;min-height:40px}
  #scTitle .btn.lg{font-size:20px;padding:11px 20px;min-height:0}
  /* the flat 20px above is for a one-word button; "CONTINUE JOURNEY" is ~260px
     wide at that size and this column is only ~224px at the 520px breakpoint */
  #scTitle #btnPlay{font-size:clamp(15px,2.9vw,20px);padding:11px 16px}
  #btnContinue{font-size:20px;padding:10px 20px}
  #scLevels .rowbtn{margin-top:11px}
  .lvrow,.profcard{padding:7px 10px}
  .lvbadge,.profcard .av{width:36px;height:36px;font-size:19px;border-width:3px}
  .lvtext b{font-size:14px}
  .lvtext small,.profcard .who small{font-size:11px}
  .profcard .who b{font-size:17px}
  .avrow .st{width:42px;height:42px;font-size:21px}
  .nameinput{margin-top:10px;padding:9px 14px}
}
@media(max-height:640px) and (min-width:1000px){
  .levellist,.proflist{grid-template-columns:repeat(3,1fr)}
}

/* landscape phones: dock the question card to the bottom-left so the globe
   keeps the full height instead of being squeezed into a thin band */
body.side #askwrap{justify-content:flex-start}
body.side #askwrap > div{width:min(330px,44vw)}
body.side #ask{gap:10px;padding:10px 12px}
body.side #choices{margin-top:6px;gap:6px}
body.side #choices .btn{min-height:36px;padding:6px 8px;font-size:13px;border-width:3px}
body.side #powers{margin-top:6px;gap:6px}
body.side #powers .pw{min-height:36px;padding:5px 4px;font-size:12px;gap:5px;border-width:3px}
body.side #powers .pw .ic{font-size:16px}
body.side #powers .pw .nm{display:none}   /* the docked card is only ~44vw wide */
/* the docked card is only ~44vw, so the pin and timer have to give the name room —
   otherwise a 10-letter place ("Rainforest", "Antarctica") hyphenates on every
   narrower landscape phone now that side mode reaches them */
body.side #pin{width:48px;height:48px;font-size:24px}
body.side .timer{width:44px;height:44px}
body.side .timer .num{font-size:16px}
body.side #target{font-size:clamp(17px,3.3vw,26px)}
body.side #toast{top:calc(58px + env(safe-area-inset-top));font-size:16px;padding:8px 16px}

/* desktop/tablet: cap the card so it never stretches into a banner */
@media(min-width:900px){
  #askwrap > div{width:min(600px,100%)}
}

/* a wide window has no excuse for scrolling six cards past the fold.
   min-height pairs with the max-height:640px blocks above so the two never
   fight over the column count regardless of which is written first. */
@media(min-width:1000px) and (min-height:641px){
  #scLevels .sheet,#scPlayers .sheet{width:min(880px,100%)}
  .levellist,.proflist{grid-template-columns:1fr 1fr}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;
    transition-duration:.001s!important}
}