: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}
.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)}
.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}
.play-col{display:grid;grid-template-columns:auto auto;gap:8px;align-items:center}
.play-col #playBtn{grid-column:1;grid-row:1}
.play-col #todayBtn{grid-column:2;grid-row:1}
.play-col #powBtn{grid-column:1;grid-row:2}
.play-col #discBtn{grid-column:1;grid-row:3}
.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}
@media (max-width:640px){
  .row-btns.has-today .audio-col{display:grid;grid-template-columns:1fr 1fr;margin-left:0;width:100%}   /* Tips, Feedback, Sound, Music as a 2x2 grid */
  .row-btns.has-today .audio-col button.secondary{text-align:center;font-size:15px;padding:6px 8px;white-space:nowrap}
}
.play-col .primary{font-size:30px;padding:16px 38px}
.play-col .secondary{font-size:17px;padding:6px 14px}
.audio-col{margin-left:auto;display:flex;flex-direction:column;gap:6px}
.audio-col button.secondary{font-size:16px;padding:4px 12px;text-align:left}
#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}
.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}
button.danger-link{font:500 15px Barlow,sans-serif;background:none;border:0;color:var(--danger);text-decoration:underline;cursor:pointer;padding:6px 10px}
.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 6px;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}
.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}
.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}
.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 textarea{font:16px Barlow,sans-serif;padding:10px 12px;border:1px solid var(--line, #9AA7AE);border-radius:6px;background:#fff;color:#1d2427;width:100%;box-sizing:border-box;resize:vertical}
.field input{font:16px Barlow,sans-serif;padding:10px 12px;border:1px solid var(--line, #9AA7AE);border-radius:6px;background:#fff;color:#1d2427;width:100%;box-sizing:border-box}
.acct-msg{min-height:1.2em;color:var(--muted)}
.acct-line{margin:10px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px}