@font-face { font-family: 'Marcellus'; font-weight: 400; font-display: swap; src: url(fonts/marcellus-latin-400-normal.woff2?v=1) format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 400; font-display: swap; src: url(fonts/outfit-latin-400-normal.woff2?v=1) format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 600; font-display: swap; src: url(fonts/outfit-latin-600-normal.woff2?v=1) format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 700; font-display: swap; src: url(fonts/outfit-latin-700-normal.woff2?v=1) format('woff2'); }

:root {
  --storm: #0f1733; --storm-2: #151e40; --storm-3: #243056; --cloud: #94a0c2;
  --marble: #efe8da; --marble-2: #ddd4c2; --vein: #c9c0ae; --ink: #141a33; --ink-2: #4a4f68;
  --gold: #f2c14e; --gold-deep: #9a7417; --bolt: #9ad7ff; --ember: #ff5a36; --ok: #4f9a62;
  --f-display: 'Marcellus', 'Trajan Pro', Georgia, serif; --f-ui: 'Outfit', system-ui, sans-serif;
  --r: 8px; color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--storm); color: var(--marble); font: 15px/1.45 var(--f-ui); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
body { overflow: hidden; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--bolt); outline-offset: 2px; }
#app { height: 100%; height: 100dvh; position: relative; }
.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: flex; }

.btn { border: 1px solid transparent; border-radius: var(--r); padding: 12px 22px; min-height: 46px; font-weight: 600; background: var(--storm-3); transition: transform .08s, filter .15s; }
.btn:active { transform: translateY(1px); }
.btn.gold { color: #2a1f05; background: linear-gradient(180deg, #ffe99a 0%, var(--gold) 45%, #c79a2a 100%); box-shadow: 0 1px 0 #fff3c4 inset, 0 8px 26px -10px rgba(230,194,77,.7); }
.btn.gold:hover { filter: brightness(1.06); }
.btn.line { background: transparent; border-color: rgba(230,194,77,.6); color: var(--gold); }
.btn.ghost { background: transparent; border-color: var(--storm-3); }
.btn.ghost:hover { border-color: var(--cloud); }
.btn.mini { padding: 6px 12px; min-height: 34px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: default; }

/* ——— home ——— */
#home { flex-direction: column; align-items: center; justify-content: center; }
#storm { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 24px 16px min(30vh, 46vw); max-width: 720px; }
.kicker { margin: 0; font-family: var(--f-display); color: var(--gold); letter-spacing: .3em; font-size: 15px; }
h1 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(52px, 11vw, 116px); line-height: .95; letter-spacing: .02em; color: var(--marble);
  text-shadow: 0 0 40px rgba(168,220,255,.35), 0 2px 0 #000; }
.pitch { margin: 0 0 8px; max-width: 44ch; font-size: 17px; color: #cfd5e4; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--storm-3); border-radius: var(--r); overflow: hidden; background: rgba(12,18,32,.6); }
.seg button { background: transparent; border: 0; padding: 10px 14px; min-height: 46px; color: var(--cloud); font-weight: 600; }
.seg button[aria-checked="true"] { background: var(--storm-3); color: var(--marble); }
.status { min-height: 22px; margin: 0; color: var(--bolt); }
/* difficulty ladder */
.ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: min(640px, 100%); }
.rung { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 4px 8px; min-height: 64px; border-radius: 10px;
  background: rgba(15,23,51,.72); border: 1px solid var(--storm-3); color: var(--marble); }
.rung .pips { font-size: 7px; letter-spacing: 2px; color: var(--gold); opacity: .85; }
.rung b { font-family: var(--f-display); font-weight: 400; font-size: 16px; line-height: 1.15; }
.rung small { font-size: 11.5px; color: var(--cloud); font-variant-numeric: tabular-nums; line-height: 1.2; }
.rung[aria-checked="true"] { border-color: var(--gold); background: linear-gradient(180deg, rgba(242,193,78,.2), rgba(15,23,51,.85)); box-shadow: 0 0 22px -8px rgba(242,193,78,.8); }
.rung:disabled { opacity: .5; cursor: default; } .rung:disabled small { font-size: 11px; }
.rung .lock { position: absolute; top: 6px; right: 6px; width: 13px; height: 13px; color: var(--cloud); }
.foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); color: var(--cloud); font-size: 13px; }

/* ——— game ——— */
#game { display: none; }
#game.active { display: grid; grid-template-columns: 1fr 340px; grid-template-rows: auto 1fr; }
.hud { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: calc(8px + env(safe-area-inset-top)) 14px 8px; background: linear-gradient(180deg, rgba(8,12,22,.9), rgba(8,12,22,0)); }
.res { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.res.right { justify-content: flex-end; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 99px; background: rgba(20,28,46,.85); border: 1px solid var(--storm-3); font-variant-numeric: tabular-nums; }
.chip b { font-size: 17px; } .chip small { color: var(--gold); font-weight: 600; }
.chip.rival { color: var(--cloud); } .chip.rival b { color: var(--marble); }
.ico { display: inline-block; width: 22px; height: 22px; } .ico svg { width: 100%; height: 100%; display: block; }
.wave { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 180px; }
.w-label { font-family: var(--f-display); font-size: 18px; letter-spacing: .04em; }
.w-bar { width: 180px; height: 4px; border-radius: 2px; background: var(--storm-3); overflow: hidden; }
.w-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--bolt), #fff); }
.field { position: relative; min-height: 0; overflow: hidden; background: linear-gradient(180deg, #2c3a66 0%, #0f1733 40%, #141a30 75%, #2a1014 100%); }
.field canvas { display: block; }
.banner { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.97); opacity: 0; pointer-events: none; z-index: 2; text-align: center; white-space: nowrap;
  font-family: var(--f-display); font-size: clamp(28px, 5vw, 54px); color: var(--marble); text-shadow: 0 0 24px rgba(168,220,255,.6), 0 3px 0 #000; transition: opacity .15s, transform .15s; }
.banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.banner small { display: block; font-family: var(--f-ui); font-size: 16px; color: var(--gold); text-shadow: 0 2px 0 #000; }
.boltbtn { position: absolute; left: 16px; bottom: 16px; z-index: 2; width: 74px; height: 74px; border-radius: 50%; border: 2px solid var(--bolt); background: radial-gradient(circle at 50% 40%, #24406a, #0e1830);
  display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 26px -4px rgba(168,220,255,.7); }
.boltbtn .ico { width: 34px; height: 34px; } .boltbtn small { font-size: 10px; color: var(--cloud); }
.boltbtn.armed { background: radial-gradient(circle at 50% 40%, #5a8ed0, #1c3460); box-shadow: 0 0 40px 2px rgba(168,220,255,.9); }
.boltbtn:disabled { border-color: var(--storm-3); box-shadow: none; filter: grayscale(.8); cursor: default; }
.boltbtn .cd { position: absolute; font-weight: 700; font-size: 18px; text-shadow: 0 1px 3px #000; }
.field.leak { box-shadow: inset 0 0 90px rgba(255,90,54,.6); }
.pulse { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,193,78,.75); } 50% { box-shadow: 0 0 0 12px rgba(242,193,78,0); } }
/* radial build / shrine menu */
.radial { position: absolute; z-index: 4; width: 0; height: 0; }
.rb { position: absolute; left: -27px; top: -27px; width: 54px; height: 54px; border-radius: 50%; padding: 0; border: 2px solid var(--marble-2);
  background: radial-gradient(circle at 50% 35%, #2a3866, #0f1733); color: var(--marble); display: grid; place-items: center;
  box-shadow: 0 6px 18px -6px #000, 0 0 0 4px rgba(15,23,51,.55); transition: transform .12s ease-out, opacity .12s; animation: pop .14s ease-out both; }
@keyframes pop { from { opacity: 0; } to { opacity: 1; } }
.rb svg { width: 44px; height: 44px; } .rb .glyph { font-size: 22px; line-height: 1; color: var(--gold); }
.rb .lab { position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--gold);
  padding: 1px 7px; border-radius: 99px; background: rgba(9,14,32,.92); font-variant-numeric: tabular-nums; }
.rb:hover:not(:disabled), .rb:focus-visible { border-color: var(--gold); }
.rb:disabled { filter: grayscale(.9) brightness(.7); cursor: default; } .rb:disabled .lab { color: var(--cloud); }
.rb.info { border-color: transparent; background: transparent; box-shadow: none; } .rb.info .lab { color: var(--marble); }
.rb.sell .glyph { color: var(--ember); } .rb.sell .lab { color: var(--marble); }
.rb.close { width: 36px; height: 36px; left: -18px; top: -18px; border-color: var(--storm-3); } .rb.close .glyph { font-size: 15px; color: var(--cloud); }
/* coach marks */
.coach { position: absolute; z-index: 5; left: 50%; top: 44px; transform: translateX(-50%); width: min(420px, calc(100% - 24px)); display: flex; gap: 12px; align-items: center;
  padding: 12px 12px 12px 16px; border-radius: 12px; color: var(--ink); background: linear-gradient(180deg, var(--marble), var(--marble-2)); box-shadow: 0 16px 40px -14px #000; }
.coach p { margin: 0; flex: 1; font-size: 14.5px; line-height: 1.35; } .coach .btn { min-height: 40px; }
.ftoast { position: absolute; z-index: 3; left: 50%; top: 10px; transform: translateX(-50%); margin: 0; max-width: calc(100% - 24px); text-align: center; pointer-events: none;
  font-size: 13.5px; font-weight: 600; color: #ffd2c4; text-shadow: 0 1px 3px #000; } .ftoast.soft { color: var(--marble); }
.ftoast:empty { display: none; }
.sendbtn { display: none; }
.rivaltag { display: none; position: absolute; z-index: 3; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 99px; background: rgba(9,14,32,.9); border: 1px solid var(--gold); color: var(--gold); font-weight: 600; font-size: 14px; white-space: nowrap; pointer-events: none; }
.field.rival-view .rivaltag { display: block; } .field.rival-view .boltbtn, .field.rival-view .sendbtn { visibility: hidden; }

/* marble panel */
.panel { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; margin: 0 10px 10px 0; border-radius: 12px; color: var(--ink); overflow: auto;
  background: linear-gradient(115deg, transparent 30%, rgba(160,150,130,.18) 31%, transparent 33%, transparent 62%, rgba(160,150,130,.14) 63%, transparent 64%), linear-gradient(180deg, var(--marble), var(--marble-2));
  box-shadow: 0 0 0 1px #fff8 inset, 0 20px 40px -20px #000; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; background: rgba(29,33,49,.08); border-radius: var(--r); }
.tabs button { border: 0; background: transparent; padding: 8px; border-radius: 6px; font-family: var(--f-display); font-size: 16px; color: var(--ink-2); }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--marble); }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.card { position: relative; display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 7px 8px; border-radius: var(--r);
  background: rgba(255,255,255,.55); border: 1px solid var(--vein); color: var(--ink); }
.card .ico { width: 38px; height: 38px; grid-row: span 2; }
.card b { font-family: var(--f-display); font-weight: 400; font-size: 15px; line-height: 1.1; }
.card .cost { font-size: 12px; font-weight: 600; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.card .cost em { font-style: normal; color: var(--ok); margin-left: 4px; }
.card .key { position: absolute; right: 6px; top: 4px; font-size: 10px; color: var(--ink-2); opacity: .7; }
.card:hover:not(:disabled) { background: #fff; border-color: var(--gold-deep); }
.card.sel { background: var(--ink); color: var(--marble); border-color: var(--ink); } .card.sel .cost { color: var(--gold); }
.card:disabled { opacity: .45; cursor: default; }
.card .tip { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-2); line-height: 1.25; margin-top: 3px; }
.card.sel .tip { color: #c9c6be; }
.tinfo { padding: 10px; border-radius: var(--r); background: var(--ink); color: var(--marble); display: grid; grid-template-columns: 44px 1fr; gap: 4px 10px; align-items: center; }
.tinfo .ico { width: 44px; height: 44px; grid-row: span 2; }
.tinfo b { font-family: var(--f-display); font-weight: 400; font-size: 17px; } .tinfo .st { font-size: 12.5px; color: #bfc6d8; }
.tinfo .acts { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 4px; } .tinfo .acts .btn { flex: 1; min-height: 38px; padding: 6px 10px; font-size: 13.5px; }
.intel h3 { margin: 10px 0 4px; font-family: var(--f-display); font-weight: 400; font-size: 14px; color: var(--ink-2); }
.intel .row { display: flex; flex-wrap: wrap; gap: 4px; min-height: 28px; align-items: center; font-size: 13px; color: var(--ink-2); }
.intel .pip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 2px; border-radius: 99px; background: rgba(29,33,49,.08); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.intel .pip .ico { width: 20px; height: 20px; } .intel .pip.hot { background: rgba(255,106,61,.18); }
.pantheon { margin: 0; font-size: 12.5px; color: var(--gold-deep); font-weight: 600; }
.toast { margin: 0; min-height: 18px; font-size: 13px; color: #a3341a; font-weight: 600; } .toast.soft { color: var(--ink-2); }
.score { margin: 0 0 14px; font-family: var(--f-display); font-size: 20px; color: var(--ink); } .score.record { color: #8a5a00; }
dialog .more { margin: -6px 0 16px; font-size: 13px; color: var(--ink-2); }

dialog { border: 0; border-radius: 14px; padding: 24px 26px; max-width: min(560px, calc(100vw - 32px)); color: var(--ink);
  background: linear-gradient(180deg, var(--marble), var(--marble-2)); box-shadow: 0 30px 80px -20px #000; }
dialog::backdrop { background: rgba(4,7,14,.7); backdrop-filter: blur(3px); }
dialog h2 { margin: 0 0 10px; font-family: var(--f-display); font-weight: 400; font-size: 30px; }
.rules { padding-left: 20px; margin: 0 0 18px; display: flex; flex-direction: column; gap: 9px; } .rules b { color: #6b4c0a; }
#end { text-align: center; } #endSub { margin: 0 0 12px; color: var(--ink-2); }
.endstats { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 16px; justify-content: center; margin-bottom: 16px; font-size: 13px; color: var(--ink-2); }
.endstats b { display: block; font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 759px) {
  #game.active { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } .rung b { font-size: 13px; } .rung small { font-size: 10px; } .rung { min-height: 58px; padding: 7px 2px; }
  /* the Titans list is a bottom sheet over the field, opened from the Titans button */
  .panel { position: absolute; z-index: 6; left: 6px; right: 6px; bottom: calc(6px + env(safe-area-inset-bottom)); margin: 0; max-height: 46vh; padding: 10px; gap: 6px;
    transform: translateY(calc(100% + 20px)); transition: transform .2s ease-out; }
  .panel.open { transform: none; }
  .tabs { display: none; }
  .sendbtn { display: flex; position: absolute; z-index: 3; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); min-width: 96px; height: 56px; padding: 0 16px; border-radius: 28px;
    align-items: center; justify-content: center; gap: 6px; font-family: var(--f-display); font-size: 17px; color: var(--ink); border: 0;
    background: linear-gradient(180deg, var(--marble), var(--marble-2)); box-shadow: 0 8px 22px -8px #000; }
  .sendbtn .badge:empty { display: none; } .sendbtn .badge { min-width: 20px; height: 20px; border-radius: 10px; background: var(--ember); color: #fff; font: 700 12px/20px var(--f-ui); }
  .coach { top: 8px; left: 8px; transform: none; width: auto; right: calc(26vw + 14px); padding: 10px 10px 10px 12px; gap: 8px; } .coach p { font-size: 13.5px; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 6px 4px; }
  .card .ico { grid-row: auto; width: 30px; height: 30px; } .card .tip, .card .key { display: none; } .card b { font-size: 13px; }
  .intel h3 { margin-top: 4px; } .wave { min-width: 0; } .w-bar { width: 110px; }
  #btnQuit { min-height: 40px; }
  .hud { grid-template-columns: auto 1fr auto; gap: 4px; padding: calc(6px + env(safe-area-inset-top)) 6px 4px; }
  .res { flex-wrap: nowrap; gap: 4px; } .chip { padding: 2px 7px 2px 3px; gap: 3px; } .chip b { font-size: 15px; } .chip small { font-size: 11px; } .chip .ico { width: 18px; height: 18px; }
  .wave .w-label span { display: none; } .w-label { font-size: 16px; } .w-bar { width: 64px; } #btnSpeed { display: none; }
  #btnQuit { min-width: 40px; padding: 4px 8px; font-size: 0; } #btnQuit::before { content: '✕'; font-size: 16px; }
  .boltbtn { width: 60px; height: 60px; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); } .boltbtn small { display: none; }
  .chip.rival { cursor: pointer; min-height: 44px; padding-right: 10px; } .chip.rival small { display: none; } .chip.rival #rivalName { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chip.rival[aria-pressed="true"] { outline: 2px solid var(--gold); outline-offset: 1px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

a.btn { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }

.name { width: min(320px, 100%); padding: 10px 14px; border-radius: 10px; border: 1px solid var(--storm-3); background: rgba(15,23,51,.72); color: var(--marble); font: inherit; text-align: center; }
.name::placeholder { color: var(--cloud); }
@media (max-width: 400px) { .rung small { font-size: 9px; line-height: 1.15; } .rung b { font-size: 12px; } }

#endScore .unlock { font-family: var(--f-ui); font-size: 15px; color: #2f7d5b; font-weight: 600; }

/* playtest polish */
.w-label .short { display: none; }
.coach { pointer-events: none; } .coach .btn { pointer-events: auto; } /* the pads under the coach stay tappable */
.ftoast { z-index: 7; padding: 6px 12px; border-radius: 999px; background: rgba(9,14,32,.86); }
.chip.low { border-color: var(--ember); animation: lowpulse 1s ease-in-out infinite; } .chip.low b { color: #ff8a6e; }
@keyframes lowpulse { 50% { box-shadow: 0 0 0 4px rgba(255,90,54,.35); } }
.rb.sell .ico, .rb.sell svg { width: 30px; height: 30px; }
.rb.sell.confirm { border-color: var(--ember); box-shadow: 0 0 0 3px rgba(255,90,54,.45); } .rb.sell.confirm .lab { color: #ff8a6e; }
.field.rival-view { box-shadow: inset 0 0 0 3px rgba(255,90,54,.55); } .field.rival-view .banner { display: none; }
.panel .legend { margin: 0; font-size: 12px; color: var(--ink-2); } .panel .sheetclose { display: none; }
@media (max-width: 759px) {
  .wave .w-label span.short { display: inline; }
  .panel .sheetclose { display: inline-flex; align-self: center; min-height: 40px; }
  .sendbtn { z-index: 7; }
  #btnSpeed { display: inline-flex; min-width: 40px; padding: 0 8px; }
  .w-label { white-space: nowrap; }
  .ftoast { top: auto; bottom: calc(128px + env(safe-area-inset-bottom)); } /* above the bolt, call and Titans buttons, never over the radial or the coach */
}
@media (max-width: 400px) { .chip.rival #rivalName { display: none; } .chip.rival::before { content: 'vs'; font-size: 11px; font-weight: 700; color: var(--cloud); margin-left: 3px; } }
@media (prefers-reduced-motion: reduce) { .chip.low { animation: none; } }

/* audit pass */
#app { overflow: clip; } #game { overflow: clip; }
/* home scrolls when the screen is short instead of cutting the title; content centred when it fits */
#home { overflow-y: auto; justify-content: flex-start; }
#home .home-inner { margin: auto 0; }
h1 { font-size: clamp(40px, 11vw, 116px); }
#storm { position: fixed; }
@media (max-height: 699px) { .home-inner { padding-bottom: min(19vh, 34vw); gap: 12px; } } /* the storm and the temple stay put while a short screen scrolls the menu over them */
/* the closed sheet is out of the page: no focus, no scroll extent */
@media (max-width: 759px) {
  .panel:not(.open) { visibility: hidden; transition: transform .2s ease-out, visibility 0s .2s; }
  body.sheet-open .sendbtn { display: none; }
  .chip.rival { border-color: rgba(255,90,54,.55); }
  .chip.rival { background: rgba(255,90,54,.12); }
  #btnSpeed { min-height: 44px; min-width: 44px; align-items: center; justify-content: center; }
  #btnQuit { min-height: 44px; min-width: 44px; }
  .panel .sheetclose { min-height: 44px; }
  .rung small { font-size: 11px; }
}
@media (max-width: 400px) { .rung small { font-size: 11px; line-height: 1.15; } .rung .lock { display: none; } }
.card .cost, .pantheon { color: #7a5a0e; }
.card .key { opacity: 1; }
.rb.close { width: 44px; height: 44px; left: -22px; top: -22px; } .coach .btn { min-width: 44px; min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none !important; } }
/* landscape phones: the road is tall, so the game asks to be held upright */
#rotate { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #rotate { display: flex; position: fixed; inset: 0; z-index: 100; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px;
    background: var(--storm); color: var(--marble); text-align: center; font-family: var(--f-display); font-size: 20px; }
  #rotate p { margin: 0; max-width: 28ch; }
}
.rb { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ——— one road (solo) and private duels ——— */
.cta.duo .btn { min-width: 0; }
#btnRules { margin-top: -4px; }
.chip.rungchip { gap: 6px; padding: 4px 12px 4px 10px; border-color: rgba(242,193,78,.45); }
.chip.rungchip .pips { font-size: 7px; letter-spacing: 2px; color: var(--gold); }
.chip.rungchip b { font-family: var(--f-display); font-weight: 400; font-size: 16px; }
.chip.rungchip small { color: var(--cloud); font-weight: 600; font-size: 12px; }
#game.solo.active { grid-template-columns: 1fr 360px; }
.herald { margin: 4px 0 0; font-size: 12.5px; line-height: 1.3; color: #7a2f12; font-weight: 600; }
.herald:empty { display: none; }
.ahead { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--ink); }
.ahead li { display: grid; grid-template-columns: 34px 22px 1fr; gap: 6px; align-items: center; line-height: 1.25; }
.ahead li b { font-variant-numeric: tabular-nums; color: var(--gold-deep); font-weight: 700; color: #7a5a0e; }
.ahead li .ico { width: 22px; height: 22px; }
.ahead li.done { opacity: .5; } .ahead li.done span { text-decoration: line-through; text-decoration-color: rgba(20,26,51,.4); }
.tabs button.pulse { animation: pulse 1.1s ease-in-out infinite; }
.rulesduel { margin: -4px 0 16px; padding: 10px 12px; border-radius: 10px; background: rgba(20,26,51,.07); }
.rulesduel h3 { margin: 0 0 4px; font-family: var(--f-display); font-weight: 400; font-size: 17px; }
.rulesduel p { margin: 0; font-size: 14px; color: var(--ink-2); }
#rules .more { margin: -6px 0 14px; }
/* invitation */
#invite { width: min(480px, calc(100vw - 32px)); }
#invite p { margin: 0 0 12px; color: var(--ink-2); }
.invlink { display: flex; gap: 8px; margin-bottom: 12px; }
.invlink input { flex: 1; min-width: 0; min-height: 46px; padding: 8px 12px; border-radius: var(--r); border: 1px solid var(--vein); background: #fff; color: var(--ink); font: 600 14px var(--f-ui); }
.invwait { min-height: 22px; font-weight: 600; color: var(--ink) !important; }
.invwait::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--gold); vertical-align: 0; animation: pulse 1.1s ease-in-out infinite; }
.invwait:empty::before { display: none; }
#invite .cta { justify-content: flex-end; }
@media (max-width: 759px) {
  #game.solo.active { grid-template-columns: 1fr; }
  #game.solo #buildList { display: none; }
  .sendbtn.scout { min-width: 0; gap: 4px; padding: 0 14px 0 16px; font-size: 15px; }
  .scout-ic { display: inline-flex; gap: 1px; } .scout-ic .ico { width: 26px; height: 26px; }
  .chip.rungchip { min-height: 36px; padding: 2px 9px; } .chip.rungchip small { display: none; } .chip.rungchip b { font-size: 14px; }
  .invlink { flex-direction: column; }
  .ahead { font-size: 12px; }
}
@media (max-width: 400px) { .chip.rungchip .pips { display: none; } }
@media (prefers-reduced-motion: reduce) { .invwait::before, .tabs button.pulse { animation: none; } }
.ftoast { width: max-content; } /* a centred toast keeps its full width instead of wrapping at half the field */
body.sheet-open .ftoast { display: none; } /* the open sheet carries its own message line */
.panel .sheetclose { order: 10; } /* the sheet ends with its Close, whatever it holds */
/* the sheet's Close stays in reach while its intel scrolls */
@media (max-width: 759px) { .panel .sheetclose { position: sticky; bottom: 0; z-index: 1; background: var(--marble-2); border-color: var(--vein); box-shadow: 0 -8px 12px -6px rgba(20,26,51,.25); } }
@media (max-width: 400px) {
  .chip.rungchip { padding: 2px 10px; min-width: 44px; justify-content: center; } .chip.rungchip b { display: inline; font-size: 13px; } .chip.rungchip .pips { display: none; } /* the rung's name, not unexplained dots */
}
@media (max-width: 759px) {
  /* phones: the speed control leaves the crowded HUD for the free middle of the bottom dock */
  #btnSpeed { position: fixed; z-index: 3; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); min-width: 52px; min-height: 44px; border-radius: 22px; background: rgba(9,14,32,.82); border-color: var(--storm-3); font-size: 15px; font-weight: 700; }
  #btnSpeed:active { transform: translateX(-50%) translateY(1px); }
  body.sheet-open #btnSpeed { display: none !important; }
}
.pips i { display: inline-block; width: 5px; height: 5px; margin: 0 1.5px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.rung .pips { line-height: 7px; }
.boltbtn small { font-size: 11px; } .card .key { font-size: 11px; }
@media (pointer: coarse) { .hud .btn.mini { min-height: 44px; min-width: 44px; } }

/* ——— second playtest: call the wave, Kronos' life, the shrine sheet, the rival's caption ——— */
.wave { flex-direction: row; justify-content: center; gap: 14px; } .w-core { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.callbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 12px 3px 10px; border-radius: 99px; border: 1px solid rgba(154,215,255,.55);
  background: rgba(20,28,46,.85); color: var(--marble); font-size: 13px; font-weight: 600; white-space: nowrap; transition: border-color .15s, box-shadow .15s; }
.callbtn .glyph { font-size: 11px; color: var(--bolt); } .callbtn .cb { color: var(--gold); font-variant-numeric: tabular-nums; }
.callbtn:hover { border-color: var(--bolt); }
.callbtn.clear { border-color: var(--gold); box-shadow: 0 0 18px -4px rgba(242,193,78,.8); } /* the road is clear: nothing stops the next wave */
.callbtn.clear .glyph { color: var(--gold); }
.boss { position: absolute; z-index: 3; left: 50%; top: 12px; transform: translateX(-50%); width: min(420px, calc(100% - 120px)); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.boss .bn { font-family: var(--f-display); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding: 2px 12px; border-radius: 99px; background: rgba(9,14,32,.86); border: 1px solid rgba(242,193,78,.5); }
.boss .bb { width: 100%; height: 8px; border-radius: 4px; background: rgba(9,14,32,.85); border: 1px solid rgba(242,193,78,.6); overflow: hidden; }
.boss .bb i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff5a36, #ffa23a); transition: width .2s linear; }
.boss.low .bb i { background: linear-gradient(90deg, #ff2d2d, #ff7a3a); }
.rivalcap { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; pointer-events: none; font-size: 13px; color: var(--cloud); }
.rivalcap b { font-family: var(--f-display); font-weight: 400; font-size: 16px; color: var(--marble); letter-spacing: .03em; }
.rivalcap .ah { font-weight: 600; padding: 1px 10px; border-radius: 99px; border: 1px solid var(--storm-3); background: rgba(9,14,32,.7); }
.rivalcap .ah.you { color: #9be0a8; border-color: rgba(127,232,160,.5); } .rivalcap .ah.rival { color: #ff9a80; border-color: rgba(255,90,54,.55); }
.rivalcap .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; align-items: center; }
.rivalcap .row .lbl { color: var(--cloud); margin-right: 2px; }
.rivalcap .pip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 2px; border-radius: 99px; background: rgba(255,90,54,.22); border: 1px solid rgba(255,90,54,.45); color: var(--marble); font-weight: 600; font-variant-numeric: tabular-nums; }
.rivalcap .pip .ico { width: 20px; height: 20px; }
.tinfo { grid-template-columns: 44px 1fr; gap: 2px 10px; }
.tinfo .st.next { grid-column: 1 / -1; color: #ffd86a; margin-top: 2px; } .tinfo .acts .btn.ghost { border-color: #5a607a; color: var(--marble); } .tinfo .acts .btn.ghost.confirm { border-color: var(--ember); color: #ff9a80; }
.recap { margin: -8px 0 16px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); } .recap:empty { display: none; }
/* the rung's record never wraps */
.rung:not(:disabled) small { white-space: nowrap; }
@media (max-width: 759px) { .home-inner { gap: 12px; padding-top: 16px; } .pitch { font-size: 15px; } .kicker { font-size: 13px; } }
/* home: the name field stays above the range and its temple */
.home-inner { padding-bottom: min(32vh, 54vw); }
@media (max-height: 699px) { .home-inner { padding-bottom: min(22vh, 40vw); } }
.pitch { max-width: 50ch; }
@media (max-width: 759px) {
  /* phones: the call leaves the HUD for the bottom dock, above the next-wave button */
  .callbtn { position: fixed; z-index: 3; right: 10px; bottom: calc(74px + env(safe-area-inset-bottom)); min-height: 44px; padding: 4px 14px 4px 12px; font-size: 14px; }
  .callbtn .glyph { font-size: 12px; }
  body.sheet-open .callbtn { display: none !important; }
  .boss { top: 8px; width: calc(100% - 32px); } .boss .bn { font-size: 13px; }
  .rb .lab { font-size: 11.5px; padding: 1px 6px; }
}
@media (prefers-reduced-motion: reduce) { .boss .bb i { transition: none; } }

@media (max-width: 759px) { #game.solo .ftoast { bottom: calc(186px + env(safe-area-inset-bottom)); } } /* above the call-the-wave pill */
@media (max-width: 380px) { .sendbtn.scout { padding: 0 10px 0 12px; font-size: 14px; } .scout-ic .ico { width: 22px; height: 22px; } } /* narrow phones: the scout pill keeps clear of the speed button */
@media (max-width: 759px) { body.radial-open .ftoast, body.radial-open #game.solo .ftoast { top: 8px; bottom: auto; } } /* an open menu near the bottom: the hint reads above it */

/* ——— portal build only (html.portal is set by js2/portal-mode.js; our own site never has it) ——— */
html.portal body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.portal input { -webkit-user-select: text; user-select: text; }
/* a desktop with a touch screen can report a coarse pointer: in a landscape portal iframe it still has a mouse */
@media (hover: hover) { html.portal #rotate { display: none !important; } }
/* CrazyGames forbids links to a playable version elsewhere: a friend duel there goes through its SDK invite links,
   so the button shows only once the SDK is up (html.cg-friends) */
html.cg:not(.cg-friends) #btnFriend, html.cg:not(.cg-friends) #invite { display: none !important; }
/* a short landscape portal frame (800×450 and the like): the whole menu fits above the footer without scrolling */
@media (max-height: 540px) and (min-aspect-ratio: 5/4) {
  html.portal .home-inner { gap: 7px; padding: 10px 16px 54px; }
  html.portal .kicker { font-size: 12px; }
  html.portal h1 { font-size: clamp(36px, 12.5vh, 116px); }
  html.portal .pitch { font-size: 14px; max-width: 72ch; margin: 0; line-height: 1.35; }
  html.portal .rung { min-height: 50px; padding: 6px 4px; }
  html.portal .home-inner .btn:not(.mini) { padding-top: 9px; padding-bottom: 9px; }
  html.portal .name { padding: 7px 12px; }
  html.portal .status:empty { min-height: 0; }
  html.portal .foot { padding-top: 6px; padding-bottom: 6px; }
}
/* duel overtime: 'Wave 21 · sudden death' in ember */
#waveOf { font-style: normal; } .w-label.ot #waveOf { color: #ff8a6e; font-size: .78em; letter-spacing: .02em; }
.rulesduel p.ot { margin-top: 6px; }
@media (max-width: 759px) { .w-label.ot #waveOf { display: none; } .w-label.ot b { color: #ff8a6e; } } /* phones: no room for the words — the ember number and the banner say it */