/* Layout: a full-bleed night-sea atlas; a naturalist's plate card floats over it (left on desktop, a ticket on phones); one glass HUD at the bottom. */
:root{
  color-scheme: dark;
  /* sea + ground */
  --abyss:#061a22; --sea:#0e3a47; --sea-lit:#1c5d69; --land:#d6dbc1;
  /* paper card */
  --paper:#f5f0e2; --paper-edge:#e6dcc4; --ink:#26261d; --ink-soft:#5d5a4a;
  /* signal colours */
  --egg:#8fe3d6; --egg-deep:#3fb3a3; --saffron:#ffb340; --coral:#ff5c4b;
  /* text on the sea */
  --text:#eaf4f2; --muted:#9dbcb9; --glass:rgba(7,30,38,.62); --glass-line:rgba(160,225,215,.18);
  --f-display:"Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-ui:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gut-l:max(16px, env(safe-area-inset-left, 0px));
  --gut-r:max(16px, env(safe-area-inset-right, 0px));
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
}
html,body{height:100%;overscroll-behavior:none}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
[hidden]{display:none!important}
body{position:fixed;inset:0;margin:0;background:var(--abyss);color:var(--text);font-family:var(--f-ui);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--egg);outline-offset:3px;border-radius:10px}

#app{position:relative;height:100%;height:100dvh;overflow:hidden}
/* no long-press menus or drags on the game surface */
#map,#pins,img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.btn{touch-action:manipulation;min-height:44px}
#map{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}
#pins{position:absolute;inset:0;pointer-events:none}

/* ---------- pins ---------- */
.pin{position:absolute;left:0;top:0;will-change:transform}
.pin[hidden]{display:none}
.pin-guess .drop{width:30px;height:40px;transform:translate(-15px,-38px);transform-origin:15px 38px}
.pin-guess.dropping .drop{animation:drop .42s cubic-bezier(.3,1.5,.5,1)}
.pin-guess .ripple{position:absolute;left:-14px;top:-6px;width:28px;height:12px;border-radius:50%;border:2px solid var(--coral);opacity:0}
.pin-guess.dropping .ripple{animation:ripple .7s ease-out .2s}
@keyframes drop{0%{transform:translate(-15px,-110px) scale(.7);opacity:0}60%{opacity:1}100%{transform:translate(-15px,-38px) scale(1)}}
@keyframes ripple{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.4)}}
.pin-home .nest{position:absolute;width:34px;height:34px;left:-17px;top:-17px;border-radius:50%;background:var(--saffron);box-shadow:0 0 0 4px rgba(255,179,64,.28),0 6px 18px rgba(0,0,0,.45);display:grid;place-items:center}
.pin-home .nest svg{width:20px;height:20px;color:#3a2600}
.pin-home .pulse{position:absolute;width:34px;height:34px;left:-17px;top:-17px;border-radius:50%;border:2px solid var(--saffron);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}

/* ---------- top bar ---------- */
.topbar{position:absolute;top:0;left:0;right:0;padding-top:calc(var(--safe-t) + 14px);padding-left:var(--gut-l);padding-right:var(--gut-r);display:flex;align-items:center;gap:12px;pointer-events:none}
.topbar > *{pointer-events:auto}
.brand{display:flex;align-items:baseline;gap:10px;padding:8px 16px 9px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.brand b{font-family:var(--f-display);font-style:italic;font-weight:700;font-size:26px;line-height:1;letter-spacing:.01em;color:var(--text)}
.brand span{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dots{display:flex;gap:6px;padding:10px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);margin-left:auto}
.dot{width:22px;height:22px;border-radius:7px;background:rgba(160,225,215,.12);border:1px solid rgba(160,225,215,.22);display:grid;place-items:center;font-size:13px;line-height:1;transition:transform .3s}
.dot.now{border-color:var(--egg);box-shadow:0 0 0 3px rgba(143,227,214,.2)}
.dot.t-g{background:#4fcf8e;border-color:#4fcf8e}.dot.t-y{background:#f5d04a;border-color:#f5d04a}.dot.t-o{background:#ff9a3d;border-color:#ff9a3d}.dot.t-r{background:var(--coral);border-color:var(--coral)}.dot.t-x{background:#24363c;border-color:#3b5157}
.dot.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.score{min-width:92px;text-align:right;padding:8px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-variant-numeric:tabular-nums;font-weight:800;font-size:18px;position:relative}
.score small{display:block;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:-1px}
.gain{position:absolute;right:16px;top:100%;margin-top:6px;font-weight:800;color:var(--saffron);font-size:15px;opacity:0;pointer-events:none}
.gain.show{animation:gain 1.4s ease-out}
@keyframes gain{0%{opacity:0;transform:translateY(-6px)}15%{opacity:1}100%{opacity:0;transform:translateY(16px)}}

/* ---------- the plate card ---------- */
.cardwrap{position:absolute;left:var(--gut-l);top:calc(var(--safe-t) + 84px);width:340px;perspective:1600px;transform:rotate(-1.2deg);transform-origin:50% 0}
.cardwrap[hidden]{display:none}
.cardwrap.deal{animation:deal .62s cubic-bezier(.2,.9,.25,1.05)}
@keyframes deal{0%{opacity:0;transform:translate(-60px,90px) rotate(-12deg) scale(.86)}100%{opacity:1;transform:rotate(-1.2deg)}}
.card{position:relative;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.8,.2,1)}
.card.revealed{transform:rotateY(180deg)}
.card .back{pointer-events:none}.card.revealed .back{pointer-events:auto}.card.revealed .front{pointer-events:none}
.face{border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 60px -24px rgba(0,0,0,.75),0 10px 22px -10px rgba(0,0,0,.5);backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:16px 18px 18px;overflow:hidden}
.face::before{content:"";position:absolute;inset:8px;border:1px solid rgba(70,60,35,.28);border-radius:10px;pointer-events:none}
.face::after{content:"";position:absolute;inset:11px;border:.5px solid rgba(70,60,35,.18);border-radius:8px;pointer-events:none}
.front{position:relative}
.back{position:absolute;inset:0;transform:rotateY(180deg);overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.card-top{display:flex;align-items:center;justify-content:space-between;position:relative}
.plate-no{font-family:var(--f-display);font-style:italic;font-size:15px;color:var(--ink-soft);letter-spacing:.02em}
.ring{position:relative;width:42px;height:42px}
.ring svg{width:42px;height:42px;transform:rotate(-90deg)}
.ring .track{stroke:rgba(70,60,35,.15)}
.ring .bar{stroke:var(--egg-deep);transition:stroke .3s}
.ring.urgent .bar{stroke:var(--coral)}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink)}
.ring.urgent span{color:#c2321f;animation:tick 1s steps(1) infinite}
@keyframes tick{50%{transform:scale(1.15)}}
.plate{margin:6px 0 10px;height:clamp(170px, 34vh, 300px);display:flex;align-items:center;justify-content:center;position:relative}
.plate img{display:block;min-width:0;min-height:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:saturate(1.08) contrast(1.03);border-radius:3px}
.plate .ph{color:var(--ink-soft);font-family:var(--f-display);font-style:italic}
.bird-name{font-family:var(--f-display);font-weight:700;font-size:30px;line-height:1.02;margin:0;text-wrap:balance;letter-spacing:-.005em}
.latin{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:17px;color:var(--ink-soft);margin:3px 0 10px}
.clues{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 7px;border-radius:999px;background:rgba(70,60,35,.07);border:1px solid rgba(70,60,35,.14);font-size:12px;font-weight:600;color:var(--ink)}
.chip svg{width:15px;height:15px;color:#2f7f73}
.chip.diet svg{color:#b0632a}
.span{margin-top:12px;position:relative}
.span-label{display:flex;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.span-label b{font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:.02em}
.ruler{position:relative;height:18px;margin-top:5px}
.ruler .base{position:absolute;left:0;right:0;top:8px;height:2px;background:rgba(70,60,35,.18);border-radius:2px}
.ruler .fill{position:absolute;left:0;top:5px;height:8px;border-radius:6px;background:linear-gradient(90deg,#3fb3a3,#8fe3d6)}
.ruler .fill.range{background:repeating-linear-gradient(90deg,#3fb3a3 0 6px,#6fd3c3 6px 9px)}
.ruler .you{position:absolute;top:0;width:2px;height:18px;background:var(--ink);opacity:.55}
.ruler .you::after{content:"you";position:absolute;top:-1px;left:5px;font-size:10px;font-weight:700;color:var(--ink-soft)}
.ticks{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-top:1px}

/* back */
.back-head{display:flex;gap:12px;align-items:center;position:relative;z-index:1}
.back-head img{width:62px;height:62px;object-fit:contain;mix-blend-mode:multiply;flex:none}
.back-head h3{font-family:var(--f-display);font-weight:700;font-size:22px;line-height:1.05;margin:0}
.back-head p{font-family:var(--f-display);font-style:italic;font-size:15px;color:var(--ink-soft);margin:2px 0 0}
.verdict{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:#fff8e6;border:1px solid rgba(70,60,35,.14);position:relative;z-index:1}
.verdict .tile{font-size:26px;line-height:1}
.verdict b{display:block;font-size:17px;font-weight:800;line-height:1.15}
.verdict span{font-size:13px;color:var(--ink-soft);font-weight:500}
.pts{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:1}
.pts span{padding:5px 10px;border-radius:8px;font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;background:rgba(63,179,163,.14);color:#1d6b60}
.pts span.fast{background:rgba(255,179,64,.2);color:#8a5200}
.home-block{position:relative;z-index:1}
.label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.home-block p{margin:3px 0 0;font-size:14.5px;line-height:1.4;font-weight:600}
.fact{margin:0;font-family:var(--f-display);font-size:18px;line-height:1.3;font-style:italic;color:var(--ink);position:relative;z-index:1;padding-left:14px;border-left:2px solid var(--saffron)}
.credit{margin:0;font-size:11px;line-height:1.4;color:var(--ink-soft);position:relative;z-index:1}
.credit a{color:var(--ink-soft)}
.back .btn{margin-top:auto;position:sticky;bottom:0;z-index:2;flex:none;box-shadow:0 4px 0 #000,0 -16px 16px 2px var(--paper)}
.back .btn:active{box-shadow:0 1px 0 #000,0 -16px 16px 2px var(--paper)}
.sheet-handle{display:none}
.install{display:flex;gap:10px;align-items:center;flex-wrap:wrap;width:100%;font-size:13px;color:var(--muted);margin:0}
.install .btn{min-height:40px;padding:9px 14px;font-size:14px}

/* ---------- buttons ---------- */
.btn{appearance:none;border:0;cursor:pointer;border-radius:14px;padding:13px 20px;font-weight:800;font-size:16px;letter-spacing:.01em;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:transform .12s, box-shadow .12s, opacity .2s}
.btn.primary{background:var(--egg);color:#06302b;box-shadow:0 4px 0 var(--egg-deep),0 10px 24px -8px rgba(63,179,163,.7)}
.btn.primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--egg-deep)}
.btn.primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:0 4px 0 var(--egg-deep)}
.btn.ghost{background:rgba(160,225,215,.1);color:var(--text);border:1px solid var(--glass-line)}
.btn.ink{background:var(--ink);color:var(--paper);box-shadow:0 4px 0 #000}
.btn.ink:active{transform:translateY(3px);box-shadow:0 1px 0 #000}

/* ---------- HUD ---------- */
.hud{position:absolute;left:50%;bottom:calc(var(--safe-b) + 18px);transform:translateX(-50%);width:min(560px, calc(100% - 32px));padding:12px 12px 12px 18px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;gap:14px;overflow:hidden}
.hud[hidden]{display:none}
.hud .timebar{position:absolute;left:0;top:0;height:3px;width:100%;background:var(--egg);transform-origin:0 50%}
.hud .timebar.urgent{background:var(--coral)}
.hud p{margin:0;flex:1;min-width:0;font-weight:600;font-size:15px;line-height:1.3}
.hud p small{display:block;color:var(--muted);font-weight:500;font-size:12.5px}
.hud .btn{flex:none}
kbd{font-family:var(--f-ui);font-size:11px;padding:1px 5px;border-radius:4px;border:1px solid var(--glass-line);color:var(--muted)}

/* ---------- overlays ---------- */
.overlay{position:absolute;inset:0;overflow-x:hidden;display:grid;place-items:center;padding-left:var(--gut-l);padding-right:var(--gut-r);padding-block:calc(var(--safe-t) + 20px) calc(var(--safe-b) + 20px);background:radial-gradient(120% 90% at 50% 40%, rgba(6,26,34,.55), rgba(4,16,21,.88));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);overflow-y:auto}
.overlay[hidden]{display:none}
.intro-inner{width:min(980px,100%);display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.intro-copy{min-width:0}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--egg)}
.wordmark{font-family:var(--f-display);font-style:italic;font-weight:700;font-size:clamp(84px,13vw,150px);line-height:.82;margin:12px 0 8px;letter-spacing:-.02em;color:var(--text)}
.wordmark em{font-style:normal;color:var(--saffron)}
.tagline{font-family:var(--f-display);font-size:clamp(24px,3vw,32px);line-height:1.15;margin:0 0 22px;color:var(--text);font-weight:500;text-wrap:balance}
.rules{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px;padding:0;list-style:none}
.rules li{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:rgba(160,225,215,.08);border:1px solid var(--glass-line);font-size:14px;font-weight:600}
.rules li b{color:var(--saffron);font-variant-numeric:tabular-nums}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.meta{margin-top:18px;font-size:13px;color:var(--muted)}
.fan{position:relative;height:420px;min-width:0}
.mini{position:absolute;width:220px;padding:12px 12px 14px;border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:0 30px 50px -22px rgba(0,0,0,.8)}
.mini::before{content:"";position:absolute;inset:6px;border:1px solid rgba(70,60,35,.25);border-radius:9px;pointer-events:none}
.mini .mimg{height:200px;display:flex;align-items:center;justify-content:center}
.mini img{display:block;min-width:0;min-height:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.mini .q{font-family:var(--f-display);font-weight:700;font-size:21px;margin-top:8px;text-align:center}
.mini .q i{font-weight:500;color:var(--ink-soft)}
.fan .mini:nth-child(1){left:2%;top:46px;transform:rotate(-10deg)}
.fan .mini:nth-child(2){left:26%;top:0;transform:rotate(1deg);z-index:2}
.fan .mini:nth-child(3){left:50%;top:52px;transform:rotate(11deg)}
.intro.go .fan .mini{animation:fanin .8s cubic-bezier(.2,.9,.25,1.05) both}
.intro.go .fan .mini:nth-child(2){animation-delay:.08s}.intro.go .fan .mini:nth-child(3){animation-delay:.16s}
@keyframes fanin{0%{opacity:0;translate:0 60px}100%{opacity:1;translate:0 0}}

.end-inner{width:min(760px,100%);display:flex;flex-direction:column;gap:22px}
.end-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.end-head h2{font-family:var(--f-display);font-style:italic;font-weight:700;font-size:clamp(40px,6vw,60px);line-height:.95;margin:6px 0 0}
.bigscore{text-align:right}
.bigscore b{display:block;font-size:clamp(44px,7vw,64px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--saffron)}
.bigscore span{color:var(--muted);font-weight:600;font-size:14px}
.flock{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.fc{background:var(--paper);color:var(--ink);border-radius:12px;padding:10px 10px 12px;position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.fc .fimg{height:96px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.fc img{display:block;min-width:0;min-height:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.fc .fname{font-family:var(--f-display);font-weight:700;font-size:16px;line-height:1.05;text-wrap:balance}
.fc .fkm{font-size:12px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.fc .ftile{position:absolute;top:-8px;right:-6px;font-size:22px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.end-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.end-actions .note{color:var(--muted);font-size:13px;margin-left:auto;font-variant-numeric:tabular-nums}
.credits{position:absolute;left:var(--gut-l);bottom:calc(var(--safe-b) + 10px);margin:0;padding:6px 10px;border-radius:10px;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:10.5px;color:rgba(214,235,232,.75);pointer-events:auto;max-width:min(30%, 300px);line-height:1.4}
.burst{position:absolute;left:0;top:0;pointer-events:none}
.burst i{position:absolute;left:-5px;top:-11px;width:10px;height:22px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:linear-gradient(90deg,var(--c) 0 46%,rgba(255,255,255,.7) 46% 54%,var(--c) 54%);animation:feather 1.1s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes feather{0%{transform:translate(0,0) rotate(var(--r0)) scale(.4);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r1)) scale(1);opacity:0}}
.credits a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* ---------- stats, learned list, fog ---------- */
.stats{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0;font-size:13px;font-weight:600;color:var(--text)}
.stats span{padding:6px 10px;border-radius:10px;background:rgba(160,225,215,.08);border:1px solid var(--glass-line)}
.stats b{color:var(--saffron);font-variant-numeric:tabular-nums}
.end-actions .stats{margin:0;width:100%}
.learned{padding:16px 18px 6px;border-radius:16px;background:var(--paper);color:var(--ink);position:relative}
.learned::before{content:"";position:absolute;inset:6px;border:1px solid rgba(70,60,35,.22);border-radius:11px;pointer-events:none}
.learned h3{font-family:var(--f-display);font-style:italic;font-weight:700;font-size:26px;margin:0 0 6px}
.learned ol{list-style:none;margin:0;padding:0}
.learned li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:start;padding:10px 0;border-top:1px solid rgba(70,60,35,.14)}
.learned li:first-child{border-top:0}
.learned .limg{height:52px;display:flex;align-items:center;justify-content:center}
.learned .limg img{display:block;max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.learned b{font-family:var(--f-display);font-size:19px;font-weight:700}
.learned .ltile{font-size:14px}
.learned p{margin:2px 0 0;font-size:14.5px;line-height:1.4;color:var(--ink)}
.fog-inner{width:min(460px,100%);text-align:center}
.fog-inner h2{font-family:var(--f-display);font-style:italic;font-weight:700;font-size:clamp(34px,6vw,48px);line-height:1;margin:0 0 12px}
.fog-inner p{color:var(--muted);margin:0 0 22px;line-height:1.45}
.credits a{text-decoration:underline;text-underline-offset:2px}

/* ---------- phones ---------- */

/* ---------- where the world pinned + bird twin ---------- */
.world{margin:0;padding:9px 12px;border-radius:10px;background:rgba(63,179,163,.1);border:1px solid rgba(63,179,163,.22);font-size:13.5px;line-height:1.4;font-weight:600;color:var(--ink);position:relative;z-index:1}
.world b{color:#1d6b60}
.friend{display:inline-block;margin:0 0 14px;padding:8px 14px;border-radius:12px;background:rgba(255,179,64,.14);border:1px solid rgba(255,179,64,.4);font-size:15px;font-weight:600;color:var(--text)}
.friend b{color:var(--saffron)}
.post{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);grid-template-areas:"head img" "text img" "btns img" "hint img";column-gap:22px;row-gap:12px;align-items:start;padding:18px;border-radius:20px;background:rgba(7,30,38,.72);border:1px solid var(--glass-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.post-head{grid-area:head;display:flex;gap:12px;align-items:center}
.post-head img{border-radius:12px;flex:none}
.post-head b{display:block;font-size:16px}
.post-head span{display:block;font-size:13px;color:var(--muted)}
.post pre{grid-area:text;margin:0;font-family:var(--f-ui);font-size:16px;line-height:1.5;white-space:pre-wrap;word-break:break-word;user-select:all;-webkit-user-select:all;min-width:0}
.post-img{grid-area:img;margin:0;border-radius:16px;overflow:hidden;line-height:0;border:1px solid var(--glass-line);box-shadow:0 24px 50px -20px rgba(0,0,0,.85);transform:rotate(1.2deg)}
.post-img img{display:block;width:100%;height:auto}
.post-btns{grid-area:btns;display:flex;gap:8px;flex-wrap:wrap}
.btn.xbtn{background:#000;color:#fff;border:1px solid rgba(255,255,255,.25);box-shadow:0 4px 0 #222}
.btn.xbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #222}
.btn.xbtn svg{width:18px;height:18px}
.post-hint{grid-area:hint;margin:0;font-size:13.5px;color:var(--saffron);font-weight:600}
.world-today{padding:14px 18px;border-radius:16px;background:rgba(255,179,64,.08);border:1px solid rgba(255,179,64,.3)}
.world-today h3{margin:0 0 6px;font-family:var(--f-display);font-style:italic;font-weight:700;font-size:24px}
.world-today p{margin:4px 0 0;font-size:15px;line-height:1.45}
.world-today b{color:var(--saffron);font-variant-numeric:tabular-nums}
.world-today .fine{margin-top:10px;font-size:12px;color:var(--muted)}

/* ---------- compact: phones (portrait and landscape) ---------- */
@media (max-width: 760px), (max-height: 520px){
  .topbar{padding-top:calc(var(--safe-t) + 10px);gap:8px}
  .brand{padding:6px 12px 7px;gap:8px}
  .brand b{font-size:22px}
  .brand span{display:none}
  .dots{padding:8px 9px;gap:4px}
  .dot{width:18px;height:18px;border-radius:6px;font-size:11px}
  .score{min-width:0;padding:6px 12px;font-size:16px}
  .score small{display:none}
  .cardwrap{top:calc(var(--safe-t) + 62px);transform:none;perspective:none}
  .cardwrap.deal{animation:dealM .5s cubic-bezier(.2,.9,.25,1.05)}
  @keyframes dealM{0%{opacity:0;transform:translateY(-24px) scale(.96)}100%{opacity:1;transform:none}}
  .card{transform-style:flat;transition:none}
  .card.revealed{transform:none}
  .card.revealed .front{display:none}
  .front{display:grid;grid-template-columns:84px minmax(0,1fr) auto;grid-template-areas:"img name ring" "img latin ring" "img clues clues";column-gap:12px;padding:12px 14px}
  .front .card-top{display:contents}
  .plate-no{display:none}
  .ring{grid-area:ring;width:38px;height:38px}.ring svg{width:38px;height:38px}
  .plate{grid-area:img;height:96px;margin:0}
  .bird-name{grid-area:name;font-size:22px;align-self:end}
  .latin{grid-area:latin;font-size:14px;margin:1px 0 6px}
  .clues{grid-area:clues;gap:4px}
  .chip{font-size:11px;padding:3px 7px 3px 5px}
  .chip svg{width:13px;height:13px}
  .span{display:none}
  .back{position:fixed;backface-visibility:visible;-webkit-backface-visibility:visible;z-index:5;gap:10px;overscroll-behavior:contain;box-shadow:0 -20px 50px -10px rgba(0,0,0,.6)}
  .back::after{display:none}
  .back-head img{width:48px;height:48px}
  .fact{font-size:16.5px}
  .card.peek .back .pts,.card.peek .back .home-block,.card.peek .back .fact,.card.peek .back .credit{display:none}
  .hud{bottom:calc(var(--safe-b) + 12px);padding:10px 10px 10px 14px;gap:10px}
  .hud p{font-size:14px}
  .hud p small{display:none}
  .credits{display:none}
}

/* ---------- phones, portrait: a ticket on top, results in a bottom sheet ---------- */
@media (max-width: 760px){
  .cardwrap{left:var(--gut-l);right:var(--gut-r);width:auto}
  .back{left:0;right:0;bottom:0;top:auto;inset-inline:0;max-height:min(62%, 560px);transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);border-radius:22px 22px 0 0;padding:22px var(--gut-r) calc(var(--safe-b) + 14px) var(--gut-l)}
  .card.revealed .back{transform:translateY(0)}
  .back::before{display:none}
  .sheet-handle{display:block;position:absolute;top:0;left:50%;transform:translateX(-50%);width:96px;height:22px;border:0;background:none;padding:0;cursor:pointer;z-index:3}
  .sheet-handle::after{content:"";position:absolute;left:26px;right:26px;top:8px;height:5px;border-radius:5px;background:rgba(70,60,35,.28)}
  .intro-inner{grid-template-columns:1fr;gap:6px}
  .fan{height:250px;order:-1}
  .mini{width:130px;padding:8px 8px 10px}
  .mini .mimg{height:112px}
  .mini .q{font-size:16px}
  .fan .mini:nth-child(1){left:calc(50% - 172px)}
  .fan .mini:nth-child(2){left:calc(50% - 65px)}
  .fan .mini:nth-child(3){left:calc(50% + 42px)}
  .wordmark{margin-top:0}
  .flock{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .fc{padding:6px 6px 8px}
  .fc .fimg{height:58px}
  .fc .fname{font-size:12.5px}
  .fc .fkm{font-size:10.5px}
  .fc .ftile{font-size:17px}
  .post{grid-template-columns:1fr;grid-template-areas:"head" "img" "text" "btns" "hint";padding:14px}
  .post-img{transform:none}
  .post-btns .btn{flex:1}
  .world{font-size:12.5px;padding:7px 10px}
  .end-actions .note{margin-left:0;width:100%}
  .learned{padding:14px 14px 4px}
  .learned li{grid-template-columns:44px minmax(0,1fr);gap:10px}
  .learned p{font-size:14px}
}
/* small phones (iPhone SE): keep the play button above the fold */
@media (max-width: 760px) and (max-height: 700px){
  .fan{height:196px}
  .mini{width:110px}.mini .mimg{height:92px}.mini .q{font-size:14px}
  .fan .mini:nth-child(1){left:calc(50% - 146px)}
  .fan .mini:nth-child(2){left:calc(50% - 55px)}
  .fan .mini:nth-child(3){left:calc(50% + 36px)}
  .wordmark{font-size:76px}
  .tagline{font-size:22px;margin-bottom:14px}
  .rules{margin-bottom:16px;gap:6px}
  .rules li{padding:6px 10px;font-size:13px}
  .meta{display:none}
  .back{max-height:60%;gap:8px;padding-top:20px}
  .back-head img{width:40px;height:40px}
  .back-head h3{font-size:19px}
  .back-head p{font-size:13px}
  .verdict{padding:8px 12px}
  .verdict .tile{font-size:22px}
  .verdict b{font-size:15px}
  .verdict span{font-size:12px}
  .pts span{font-size:12px;padding:4px 8px}
  .home-block p{font-size:13px}
  .fact{font-size:15px}
  .credit{font-size:10px}
  .back .btn{min-height:44px;padding:10px 16px}
}

/* ---------- phones, landscape: ticket on the left, results in a side panel ---------- */
@media (max-height: 520px) and (min-width: 761px){
  .cardwrap{left:var(--gut-l);width:340px}
  .back{top:0;bottom:0;left:0;width:min(390px, 46vw);transform:translateX(-105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);border-radius:0 20px 20px 0;padding:calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 14px) var(--gut-l)}
  .back::before{inset:6px 6px 6px var(--gut-l)}
  .card.revealed .back{transform:translateX(0)}
  .hud{width:min(520px, calc(100% - 32px))}
  .overlay{padding-block:calc(var(--safe-t) + 12px) calc(var(--safe-b) + 12px)}
  .intro-inner{grid-template-columns:1.15fr .85fr;gap:16px}
  .wordmark{font-size:76px;margin:6px 0 4px}
  .tagline{font-size:22px;margin-bottom:12px}
  .rules{margin-bottom:14px;gap:6px}
  .rules li{padding:5px 9px;font-size:12.5px}
  .meta{display:none}
  .fan{height:250px}
  .mini{width:140px;padding:8px 8px 10px}
  .mini .mimg{height:118px}
  .mini .q{font-size:15px}
  .fan .mini:nth-child(1){left:0;top:44px}
  .fan .mini:nth-child(2){left:24%;top:0}
  .fan .mini:nth-child(3){left:48%;top:50px}
  .end-head h2{font-size:40px}
  .bigscore b{font-size:44px}
  .fc .fimg{height:70px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
}