:root{
  --bg:#D9E2E4; --panel:#F3F5F1; --ink:#1E2A30; --muted:#566670; --line:#C4CFD2; --danger:#B4432E;
  --sky:#3E8FD0; --sky-ink:#F4F9FC; --gold:#D9A21F; --gold-ink:#9A6A00;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141B1F; --panel:#1F282D; --ink:#E9EFF1; --muted:#9DB0B8; --line:#33424A; --danger:#EE8A73;
    --sky:#5AAAE6; --sky-ink:#0E1A22; --gold:#EFC14A; --gold-ink:#F2C94C;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#141B1F; --panel:#1F282D; --ink:#E9EFF1; --muted:#9DB0B8; --line:#33424A; --danger:#EE8A73;
  --sky:#5AAAE6; --sky-ink:#0E1A22; --gold:#EFC14A; --gold-ink:#F2C94C;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:Barlow,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.45;
  overflow:hidden;-webkit-user-select:none;user-select:none}
#app{display:flex;flex-direction:column;height:100%}

/* The header is the air-quality reading: its colour follows the PSI band */
.hud{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;padding:7px 16px;
  font-family:"Barlow Condensed","Arial Narrow",sans-serif;transition:background-color .6s,color .6s}
.hud[data-band="menu"]{background:#3E8FD0;color:#F4F9FC}
.hud[data-band="good"]{background:#6BBF59;color:#122010}
.hud[data-band="moderate"]{background:#E8C547;color:#231E0A}
.hud[data-band="unhealthy"]{background:#EE8A3C;color:#2A1405}
.hud[data-band="vunhealthy"]{background:#B23A33;color:#FFF6EE}
.hud[data-band="hazard"]{background:#6E2A3D;color:#FFEFF3}
.brand{font-weight:700;font-size:25px;line-height:1;margin-right:4px}
.stat{display:flex;align-items:baseline;gap:7px;line-height:1}
.stat .k{font-size:15px;font-weight:500;opacity:.8}
.stat .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.stat .bandname{font-size:15px;font-weight:600}
body:not(.in-run) .run-only{display:none}
body.in-run .menu-only{display:none}
.hud-btn{margin-left:auto;font:600 17px "Barlow Condensed","Arial Narrow",sans-serif;color:inherit;
  background:transparent;border:2px solid currentColor;border-radius:3px;padding:3px 12px;cursor:pointer}
.hud-btn + .hud-btn{margin-left:8px}
.xpbar{height:7px;background:#1B2A33}
.xpbar span{display:block;height:100%;width:0;background:#7FD3FF}
body:not(.in-run) .xpbar{visibility:hidden}
button:focus-visible,.hud-btn:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

#stage{position:relative;flex:1;min-height:0;overflow:hidden;background:#20281f}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none}
/* Build bar: starts top left and runs across; slots that don't fit left of the monsoon timer continue on its right
   (#build2, laid out by layoutBuild in js/hud.js). Tap or hover a slot for its name. */
#build,#build2{position:absolute;top:8px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px;pointer-events:none}
#build{left:calc(8px + env(safe-area-inset-left,0px))}
#build2:empty{display:none}
.slot{position:relative;width:30px;height:30px;display:grid;place-items:center;font-size:17px;border-radius:3px;
  background:rgba(16,24,28,.62);border:1px solid rgba(255,255,255,.18);pointer-events:none;-webkit-tap-highlight-color:transparent}
/* while paused, the build bar sits above the pause overlay and its slots can be tapped or hovered for tooltips */
body.paused #build,body.paused #build2{z-index:7}
body.paused .slot{pointer-events:auto;cursor:pointer}
body.paused .overlay{padding-top:84px}
body.paused #toast{visibility:hidden}
#tip{position:absolute;z-index:8;max-width:240px;padding:5px 10px;border-radius:3px;pointer-events:none;
  background:rgba(16,24,28,.82);color:#F4F9FC;font:600 15px "Barlow Condensed","Arial Narrow",sans-serif;line-height:1.25}
#tip[hidden]{display:none}
#tip .small{display:block;font:500 13px Barlow,sans-serif;color:rgba(244,249,252,.8)}
.windsvg{align-self:center;margin:-6px 0}
.slot.evo{border-color:#EFC14A;box-shadow:0 0 0 1px #EFC14A}
.slot b{position:absolute;right:1px;bottom:-1px;font:700 11px "Barlow Condensed",sans-serif;color:#fff}
/* PNG gear icons (img in js/content.js) sit where an emoji would, at the text's size */
.gicon{width:1.1em;height:1.1em;vertical-align:-0.15em;image-rendering:pixelated;object-fit:contain}
.slot.pass{width:24px;height:24px;font-size:13px;margin-top:3px}
#toast{position:absolute;left:50%;top:48px;transform:translate(-50%,-8px);opacity:0;pointer-events:none;
  background:rgba(16,24,28,.74);color:#F4F9FC;font:600 18px "Barlow Condensed",sans-serif;padding:6px 14px;border-radius:3px;z-index:5;
  transition:opacity .25s,transform .25s;max-width:86%;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
#alert{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);background:#6E2A3D;color:#FFEFF3;
  font:700 19px "Barlow Condensed",sans-serif;padding:6px 16px;border-radius:3px;pointer-events:none}
#alert[hidden]{display:none}
#ver{position:absolute;left:calc(8px + env(safe-area-inset-left,0px));bottom:6px;font:500 12px Barlow,sans-serif;color:rgba(200,205,210,.75);pointer-events:none;z-index:5}
#joy{position:absolute;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;
  border:2px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);pointer-events:none;display:none}
#joy.on{display:block}
#knob{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgba(127,211,255,.85)}

/* Overlays */
.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:14px;background:rgba(12,18,22,.5);overflow-y:auto}
.overlay[hidden]{display:none}
.card{background:var(--panel);color:var(--ink);width:min(680px,100%);max-height:100%;overflow-y:auto;
  border-radius:4px;padding:20px 24px 22px}
.card.narrow{width:min(520px,100%)}
.card h1,.card h2,.card h3{font-family:"Barlow Condensed","Arial Narrow",sans-serif;margin:0;line-height:1.05}
.card h1{font-size:54px;font-weight:700;margin-top:14px}
.card h2{font-size:36px;font-weight:700}
.card h3{font-size:23px;font-weight:600;margin:18px 0 6px}
.card p{margin:8px 0;max-width:64ch}
.lede{font-size:18px;color:var(--muted)}
.what-happened{background:rgba(62,143,208,.08);border-left:3px solid var(--sky);padding:8px 12px;border-radius:3px;margin:8px 0 4px}
.small{font-size:14px;color:var(--muted)}
.sky{display:block;width:100%;height:170px;border-radius:3px}
.row-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;align-items:center}
button.primary{font:700 22px "Barlow Condensed","Arial Narrow",sans-serif;background:var(--sky);color:var(--sky-ink);
  border:0;border-radius:3px;padding:9px 24px;cursor:pointer}
button.secondary{font:600 20px "Barlow Condensed","Arial Narrow",sans-serif;background:transparent;color:var(--ink);
  border:2px solid var(--sky);border-radius:3px;padding:7px 18px;cursor:pointer}
/* Leaderboards (v0.33.69): a strip of tabs, one row of option chips, the Showdown toggle, then the board */
.lbseg{display:flex;border-bottom:2px solid var(--line);margin:4px 0 10px}
.lbseg button{flex:1 1 auto;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;font:600 17px "Barlow Condensed","Arial Narrow",sans-serif;color:var(--muted);padding:10px 2px 8px;white-space:nowrap;cursor:pointer}
.lbseg button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--sky)}
.lbchips{display:flex;gap:8px;margin:0 0 10px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.lbchips::-webkit-scrollbar{display:none}
.lbchips button{flex:none;min-height:38px;padding:4px 14px;border:1.5px solid var(--line);border-radius:19px;background:transparent;font:600 16px "Barlow Condensed","Arial Narrow",sans-serif;color:var(--ink);display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}
.lbchips button[aria-selected="true"]{background:rgba(62,143,208,.16);border-color:var(--sky)}
.lbchips.fit{-webkit-mask-image:none;mask-image:none}
.lbchips.fit button{flex:1 1 0;min-width:0;justify-content:center;padding:4px 6px;font-size:15px;gap:5px}
.lbchips.dim button{opacity:.4}
/* the Showdown toggle: gold, because playing Showdown is part of premium (viewing its boards is free) */
.lbtog{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 10px;padding:7px 12px 7px 14px;border-radius:22px;border:2px solid transparent;cursor:pointer;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(115deg,#B07D12,#F6D36B 30%,#C4921D 50%,#FFF0B3 70%,#B07D12) border-box;
  box-shadow:0 2px 10px rgba(217,162,31,.25);font:600 18px "Barlow Condensed","Arial Narrow",sans-serif;color:var(--ink);text-align:left}
.lbtog .t{flex:1}.lbtog .t span{display:block;font:400 13px Inter,system-ui,sans-serif;color:var(--muted)}
.lbtog .sw{flex:none;width:44px;height:26px;border-radius:13px;background:var(--line);position:relative}
.lbtog .sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.lbtog[aria-checked="true"]{background:linear-gradient(rgba(242,201,76,.22),rgba(242,201,76,.22)) padding-box,linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(115deg,#B07D12,#F6D36B 30%,#C4921D 50%,#FFF0B3 70%,#B07D12) border-box}
.lbtog[aria-checked="true"] .sw{background:var(--gold)}.lbtog[aria-checked="true"] .sw::after{left:21px}
.lbhead{display:flex;align-items:center;gap:8px;font:600 18px "Barlow Condensed","Arial Narrow",sans-serif;margin:2px 0 6px}
.lbhead .small{font-family:inherit;font-weight:400}
.lbarch{margin:0 0 8px;padding:6px 10px;border-left:3px solid var(--line);color:var(--muted);font-size:14px}
.lbrows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.lbrows li{display:grid;grid-template-columns:2em 1fr auto;gap:10px;align-items:center;padding:8px 6px;border-bottom:1px solid var(--line)}
.lbrows li.me{background:rgba(62,143,208,.14)}
.lbrows .r{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.lbrows .n{min-width:0;overflow-wrap:anywhere}.lbrows .n b{display:block;font-weight:600}.lbrows .n span{display:block;font-size:13px;color:var(--muted)}
.lbrows .v{text-align:right;line-height:1.1;white-space:nowrap}.lbrows .v b{font:700 21px "Barlow Condensed","Arial Narrow",sans-serif;font-variant-numeric:tabular-nums}
.lbrows .v span{display:block;font-size:12px;color:var(--muted)}
.lbrows li.gap{display:block;text-align:center;color:var(--muted);padding:2px}
.lbme{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:8px 0 0;padding:8px 10px;border-radius:4px;background:rgba(62,143,208,.14);font-weight:600}
.lbhow{margin:8px 0 0;font-size:14px;color:var(--muted)}
/* Today's haze (v0.33.69): today's forest first; and the hero screen's "Today's map" strip */
.tforest{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:12px;border:2px solid var(--sky);border-radius:6px;background:rgba(62,143,208,.08);margin:6px 0 10px}
.tforest .k{font:700 13px "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.08em;color:var(--sky);text-transform:uppercase}
.tforest h3{margin:0;font:700 26px "Barlow Condensed","Arial Narrow",sans-serif}
.tforest p{margin:2px 0 0;font-size:14px;color:var(--muted)}
.dinfo{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:center;padding:10px 12px;border-left:3px solid var(--sky);background:rgba(62,143,208,.08);margin:10px 0}
.dinfo b{font:700 18px "Barlow Condensed","Arial Narrow",sans-serif}.dinfo span{display:block;font-size:13px;color:var(--muted)}
.discs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.disc{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:4px;padding:6px 8px;line-height:1.25}
.disc .di{font-size:22px}
.disc.lock{opacity:.6}
.disc[data-dt]{cursor:pointer}
#timer{position:absolute;left:50%;top:8px;transform:translateX(-50%);font:600 15px "Barlow Condensed","Arial Narrow",sans-serif;color:rgba(255,255,255,.88);
  background:rgba(16,24,28,.32);padding:2px 12px;border-radius:14px;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.5);white-space:nowrap}
#timer b{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
#nextBoss{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;opacity:.86;margin-top:-1px}
.short{display:none}
@media (max-width:640px){
  body.in-run .brand{display:none}
  body.in-run .hud{flex-wrap:nowrap;justify-content:space-between;gap:4px 10px}
  .hud .long{display:none}
  .hud .short{display:inline}
  .hud .bandname{display:none}
}
.pause-actions{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.pause-actions>.primary{width:100%;padding:12px 24px;font-size:26px}
.pause-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pause-opts button.secondary{font-size:16px;padding:8px 4px;text-align:center;white-space:nowrap}
.pause-end{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;text-align:center}
.pause-end .small{margin:0 0 10px}
/* Buttons (v0.33.4): .primary is the one main action on a screen; .secondary is every other action, with Back always last in its row;
   .sm makes a smaller extra action; .danger-outline starts something destructive (set apart in .card-end), .danger confirms it */
button.danger-outline{font:600 18px "Barlow Condensed","Arial Narrow",sans-serif;background:transparent;color:var(--danger);border:2px solid var(--danger);border-radius:3px;padding:6px 16px;cursor:pointer}
button.secondary.sm,button.danger-outline.sm{font-size:16px;padding:5px 12px}
.card-end{border-top:1px solid var(--line);margin-top:20px;padding-top:14px}
.row-btns.tight{margin-top:8px;gap:8px}
.row-btns.mode-row{margin-top:12px;gap:8px}
.row-btns.mode-row button.secondary{font-size:17px;padding:5px 14px}
.mode-note{margin:10px 2px 0;padding:2px 0 2px 10px;border-left:3px solid var(--gold);line-height:1.45}
.lb-signin{display:flex;align-items:center;gap:10px;margin:10px 2px 0;padding:4px 0 4px 10px;border-left:3px solid var(--sky,#3E8FD0);line-height:1.4}
.lb-signin p{margin:0;flex:1}
.lb-signin button{flex:none;white-space:nowrap}
.lb-signin.was{border-left-color:var(--gold)}
/* the nearest unlock on the results screen: a proper card, not a footnote */
.nextup{margin:14px 0 16px;padding:12px 14px;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:8px;background:rgba(217,162,31,.08)}
.nu-kicker{display:block;font:700 11px "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:2px}
.nextup strong{display:block;font-size:19px;line-height:1.2}
.nextup p{margin:3px 0 9px;font-size:14px;color:var(--muted)}
.nu-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.nu-bar i{display:block;height:100%;background:var(--gold);border-radius:3px}
.nu-left{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.confirm-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.confirm-row button.secondary{font-size:18px;padding:8px 6px}
button.danger{font:700 18px "Barlow Condensed","Arial Narrow",sans-serif;background:var(--danger);color:var(--panel);border:0;border-radius:3px;padding:8px 16px;cursor:pointer}
button.quiet{font:500 15px Barlow,sans-serif;background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;padding:4px}

.choices{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.choice{display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:center;text-align:left;cursor:pointer;
  background:transparent;color:var(--ink);border:2px solid var(--line);border-radius:4px;padding:10px 12px;font:inherit}
.choice:hover{border-color:var(--sky)}
.choice .key{font:700 15px "Barlow Condensed",sans-serif;color:var(--muted);width:14px}
.choice .cicon{font-size:30px;line-height:1}
.choice .cname{display:block;font:700 21px "Barlow Condensed",sans-serif;line-height:1.1}
.choice .ctag{display:inline-block;font:600 14px "Barlow Condensed",sans-serif;color:var(--sky);margin-top:1px}
.choice .ctag.evo{color:var(--gold)}
.choice.evo{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.choice .cdesc{display:block;font-size:15px;color:var(--muted);margin-top:2px}
/* Map badges and the haze glyph are inline SVGs (js/render.js), so they read the
   same on every device instead of depending on an emoji font */
.mapbadge{vertical-align:-.25em}
.choice .cicon .mapbadge{display:block}
.hazeglyph{vertical-align:-.14em;margin-right:.32em}
.howto dt .hazeglyph{margin:0}
.reel{font-size:46px;text-align:center;padding:14px 0;letter-spacing:.2em}
.loot{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.loot div{display:flex;gap:12px;align-items:center}
.loot .i{font-size:28px}

.chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:12px}
.char{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;cursor:pointer;
  background:transparent;color:var(--ink);border:2px solid var(--line);border-radius:4px;padding:10px;font:inherit}
.char.sel{border-color:var(--sky);box-shadow:0 0 0 1px var(--sky)}
.char:disabled{cursor:not-allowed;opacity:.75}
.char.prem{opacity:.85}
.portrait{width:48px;height:48px;image-rendering:pixelated;background:rgba(127,160,170,.18);border-radius:3px;margin-bottom:4px}
.char .cname{font:700 21px "Barlow Condensed",sans-serif;line-height:1.1}
.char .crole{font-size:14px;color:var(--muted)}
.char .cperk{font-size:14px;margin-top:4px}
.char .locked{color:var(--muted)}

.shop{display:flex;flex-direction:column;margin-top:4px}
.item{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:10px 0;border-bottom:1px solid var(--line);align-items:center}
.item .name{font-weight:600}
.item .desc{color:var(--muted);font-size:14px}
.pips{display:flex;gap:3px;margin-top:4px}
.pips i{width:16px;height:6px;background:var(--line);border-radius:1px}
.pips i.on{background:var(--sky)}
.item button{grid-row:1 / span 3;grid-column:2;font:600 17px "Barlow Condensed",sans-serif;min-width:86px;padding:6px 12px;
  border-radius:3px;border:2px solid var(--sky);background:transparent;color:var(--ink);cursor:pointer}
.item button:disabled{opacity:.45;cursor:not-allowed}
.item button.on{background:var(--sky);color:#fff}   /* the companion that comes along */
.comp button{max-width:150px;line-height:1.15}
.results{width:100%;border-collapse:collapse;margin-top:10px;font-variant-numeric:tabular-nums}
.results td{padding:6px 0;border-bottom:1px solid var(--line)}
.results td:last-child{text-align:right;font-weight:600}
/* v0.33.27: paired stats on the results screen, and a pinned action footer so Play again never scrolls away */
.results td.paircell{padding:0;text-align:left;font-weight:400}
.pairgrid{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
.pair{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;min-width:0}
.pair span:first-child{color:var(--ink)}
.pair span:last-child{font-weight:600;text-align:right;white-space:nowrap}
.pair.right{justify-content:flex-end;gap:4px}
.pair.right span{white-space:nowrap}
.pair .nb{display:block;font:600 11px Barlow,sans-serif;color:var(--gold-ink);line-height:1.1}
.card.results-card{--res-pad:24px;--res-pb:22px;display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
.res-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.res-actions{position:relative;flex:0 0 auto;margin:8px calc(-1 * var(--res-pad)) 0;padding:8px var(--res-pad) var(--res-pb);border-top:2px solid var(--line);border-radius:0 0 4px 4px;background:var(--bg);box-shadow:0 -10px 14px -12px rgba(0,0,0,.45)}
.res-actions::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.res-actions .row-btns{margin-top:0}
@media (max-width:640px){ .card.results-card{--res-pad:16px;--res-pb:18px} }
.res-hint{font:600 11px "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;margin:0 0 7px;transition:opacity .15s}
.res-hint.off{opacity:0}
.payout{font:700 30px "Barlow Condensed",sans-serif;margin-top:12px}
.recipes{margin:6px 0 0;padding:0;list-style:none;font-size:15px}
.howto{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;margin:12px 0;align-items:start}
.howto dt{font-size:24px;line-height:1.2}
.howto dd{margin:0}
.recipes li{padding:7px 0;border-bottom:1px solid var(--line);line-height:1.5}
.recipes .lv{color:var(--muted);font-variant-numeric:tabular-nums}
.recipes strong{white-space:nowrap}
.build-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.build-list span{border:1px solid var(--line);border-radius:3px;padding:3px 8px;font-size:15px}
@media (max-width:640px){
  .hud{gap:3px 14px;padding:6px 10px}
  .brand{font-size:21px}
  .stat .v{font-size:19px}
  .stat .k,.stat .bandname{font-size:14px}
  .card{padding:16px 16px 18px}
  .card h1{font-size:42px}
}
#sosBtn{position:absolute;right:calc(10px + env(safe-area-inset-right,0px));bottom:10px;font:700 17px "Barlow Condensed","Arial Narrow",sans-serif;padding:8px 14px;border-radius:4px;border:2px solid rgba(255,255,255,.35);background:rgba(16,24,28,.72);color:#E9EFF1;cursor:pointer}
#sosBtn:disabled{cursor:default;opacity:.8}
#sosBtn.ready{background:#C8443F;border-color:#FFE36B;color:#fff;animation:sosPulse 1s infinite alternate}
@keyframes sosPulse{from{box-shadow:0 0 0 0 rgba(255,227,107,.7)}to{box-shadow:0 0 0 7px rgba(255,227,107,0)}}
@media (prefers-reduced-motion: reduce){#sosBtn.ready{animation:none}}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* Results: damage breakdown per weapon */
.dmglist{margin-top:4px}
.dmgrow{display:grid;grid-template-columns:30px 1fr auto;gap:3px 8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.dmgrow .di{grid-row:1 / span 3;font-size:22px;line-height:1;text-align:center}
.dmgrow .dn{font-weight:600}
.dmgrow .dv{font-weight:600;font-variant-numeric:tabular-nums}
.dmgrow .db{grid-column:2 / span 2;height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.dmgrow .db i{display:block;height:100%;background:var(--sky);border-radius:3px}
.dmgrow .dsub{grid-column:2 / span 2}
/* a level-up is waiting for its turn (level-ups are spaced at least LV_GAP seconds apart) */
.xpbar.waiting span{background:#EFC14A;animation:xpWait .8s infinite alternate}
@keyframes xpWait{from{opacity:.55}to{opacity:1}}
/* Sky coins: a gold coin and gold numbers on a dark pill, readable on every PSI band colour */
.coin{display:inline-block;width:12px;height:12px;flex:none;align-self:center;margin:2px 2px 0;border-radius:0 50% 50% 50%;transform:rotate(45deg);
  background:radial-gradient(circle at 60% 60%,#FFF1A8 0 15%,#F6CC3C 42%,#D99A12 78%,#A86F08 100%);box-shadow:0 0 0 1px #7A5206 inset}
.howto dt .coin{width:16px;height:16px;margin:6px 4px 0}
.stat.coins{align-items:center;gap:6px;padding:3px 10px 3px 7px;border-radius:14px;background:rgba(16,20,24,.62);color:#FFD54A}
.stat.coins .k{opacity:.9}
.payout{color:var(--gold-ink)}
.coins-text{color:var(--gold-ink);font-weight:700}
/* the wind dial pulses while a gust is coming or blowing */
#hWindStat.gusty .windsvg{animation:gustPulse .45s infinite alternate}
#hWindStat.gusty .windsvg circle{fill:#B23A33}
@keyframes gustPulse{from{transform:scale(1)}to{transform:scale(1.18)}}
/* account screens */
.field{display:flex;flex-direction:column;gap:4px;margin:10px 0 2px;font-weight:600}
.field input,.field textarea,.field select{font:16px Barlow,sans-serif;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);width:100%;box-sizing:border-box}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--sky);outline-offset:1px}
.acct-msg{min-height:1.2em;color:var(--muted)}
/* account chip: top right of the header on menu screens */
.acct-chip{margin-left:auto;display:flex;align-items:center;gap:7px;max-width:46vw;padding:3px 12px 3px 3px;border:0;border-radius:16px;
  background:rgba(16,20,24,.62);color:#F4F9FC;font:600 16px "Barlow Condensed","Arial Narrow",sans-serif;cursor:pointer}
.acct-chip[hidden]{display:none}
.acct-chip:hover{background:rgba(16,20,24,.78)}
.acct-chip .av{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#3E8FD0;color:#fff;font-size:14px;font-weight:700}
.acct-chip.prem .av{background:#D9A21F;color:#1E2A30;box-shadow:0 0 0 2px #FFE27A}
.acct-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:360px){ .acct-chip .nm{display:none} .acct-chip{padding-right:3px} }

/* Main screen (v0.33.35): sky meter with Discoveries beside it, Play + Power-ups left, Play Endless right, Tips and Feedback below */
.sky-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch;margin:8px 0 2px}
.skymeter{background:rgba(62,143,208,.08);border:1px solid var(--line);border-radius:4px;padding:6px 10px 7px;margin:0;min-width:0}
.skymeter .sm-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:15px}
.sky-row .sm-top{font-size:14px;gap:6px}
.sky-row .sm-top strong{white-space:nowrap}
.skymeter .sm-bar{height:6px;border-radius:3px;background:var(--line);margin:5px 0 4px;overflow:hidden}
.skymeter .sm-bar i{display:block;height:100%;border-radius:3px;background:var(--sky)}
.skymeter .sm-next{font-size:12px;color:var(--muted);line-height:1.3}
.sky-row .skydisc{display:flex;align-items:center;justify-content:center;font-size:15px;padding:6px 10px;white-space:nowrap;align-self:stretch}
.hub-main{display:grid;grid-template-columns:1fr;row-gap:8px;margin-top:14px}
.hub-buttons{display:grid;grid-template-columns:9fr 6fr 9fr;column-gap:0;row-gap:8px}
.hub-main.solo .hub-buttons{grid-template-columns:1fr}
.hub-buttons #todayTog{grid-column:1;grid-row:1;justify-self:stretch;min-width:0;font-size:12px;padding:5px 4px;white-space:nowrap}
.hub-buttons #todayTog svg{width:16px;height:16px;flex:0 0 16px}
.hub-main #todayTog.on{background:var(--sky);border-color:var(--sky);color:var(--sky-ink)}
.hub-left{display:contents}
.hub-main #playBtn{grid-column:1;grid-row:1;font-size:30px;padding:8px 12px;line-height:1.1}
.hub-main #powBtn{grid-column:1 / -1;grid-row:2}
.hub-main #playBtn small{display:block;font-size:14px;font-weight:600;opacity:.9}
.hub-main #endlessBtn{grid-column:3;grid-row:1;align-self:start;font-size:22px;letter-spacing:-.02em;padding:8px 2px;line-height:1.15;text-align:center}
.hub-main #endlessBtn small{display:block;font-size:12px;font-weight:600;letter-spacing:.03em;opacity:.8}
.hub-buttons.has-today #playBtn,.hub-buttons.has-today #endlessBtn{grid-row:2}
.hub-buttons.has-today #powBtn{grid-row:3}
.hub-main.solo #playBtn{grid-column:1 / -1}
.hub-main.solo #powBtn{grid-column:1 / -1}
.hub-main button.secondary{font-size:17px;padding:6px 12px;white-space:nowrap}
.hub-main .wide{grid-column:1 / -1}
.hub-util{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.hub-util button.secondary{font-size:16px;padding:5px 10px}
/* header sound and music switches on menu screens */
.hdr-icon{margin-left:auto;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(16,20,24,.55);color:#fff;cursor:pointer}
.hdr-icon + .hdr-icon{margin-left:-14px}
.hdr-icon.off{color:rgba(255,255,255,.6)}
.hdr-icon:hover{background:rgba(16,20,24,.78)}
.hdr-icon ~ .acct-chip{margin-left:-14px}
body.in-run .hdr-icon{display:none}