/* ==========================================================================
   Navigation: Back and Menu, the pause menu, Settings, How to play, the confirm modal, focus     owner: P0-2
   Loads last. The kit's paper stickers, thick ink, hard drops and Lilita/Nunito type (base.css tokens).
   Every way out of a screen sits in the same place: the top-left corner (Back on a sub-screen, Menu on the
   new-fighter card and the death screen).
   ========================================================================== */

/* ---------- Back / Menu: top left, always the same spot ---------- */
.nav-top{
  position:fixed;z-index:3;top:calc(env(safe-area-inset-top,0px) + 16px);left:max(16px,env(safe-area-inset-left,0px));
  min-height:50px;padding:0 20px 0 13px;gap:8px;font-size:var(--t-btn);
}
.nav-top .ic{width:28px;height:28px}
.screen.has-nav{padding-top:calc(env(safe-area-inset-top,0px) + 84px)}
/* the Shop and Past Lives headers lost their Back button to the corner */
.has-nav .shop-head,.has-nav .lin-head{margin-top:0}

/* ---------- focus: a blue ring on whatever the keyboard or a gamepad is on ---------- */
:is(.btn,.tab,.wt,.ft,.card,.switch,.seg button,.rbw-shop,.sh-buy):focus-visible,
html.kbd-nav :is(.btn,.tab,.wt,.ft,.card,.switch,.seg button,.rbw-shop,.sh-buy):focus{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.slider:focus-visible,html.kbd-nav .slider:focus{outline:var(--focus-ring);outline-offset:6px;border-radius:999px}
:is(button,input):focus:not(:focus-visible){outline:none}
html.kbd-nav :is(.btn,.tab,.wt,.ft,.card,.switch,.seg button,.rbw-shop,.sh-buy,.slider):focus{outline-color:var(--player)}

/* ---------- the menu screens: a dimmed arena and one sticker card ----------
   The dim is the shared backdrop's (below: body[data-backdrop]), not the screen's own, so it carries over unchanged
   from the pause menu into Settings and How to play and back. */
.menu-screen{background:none}

/* ---------- the shared backdrop (owner, 2026-10-20: "a true dead screen", "with continuity") ----------
   One fixed layer between the arena (with the HUD) and the screens (index.html #backdrop). ui/menu.js sets
   body[data-backdrop] from where the player is, not only from the screen on top: anything opened over the death
   screen stays dead, a paused fight stays paused under Settings and How to play. Only a real change cross-fades.
     none     title, the fight, the after-round cards
     menu     Settings, How to play, the Shop, Past Lives opened from the title or the card: the light plum dim
     pause    the pause menu and anything opened from it: the same light dim over the frozen fight
     dead     the death screen and anything opened from it: a darker plum vignette, lighter where the fallen fighter
              lies, and the world behind greyed and darkened; the panels on top stay the only colour
     victory  round 25 won: no dim, a warm glow where the winner stands
     spotlight the new-fighter card: the arena dimmed round a warm pool of light on the fighter
   Timing: --dur-backdrop (240 ms) for every change, --dur-backdrop-dead (700 ms) for the fall into dead; all --out.
   Reduced motion: the end state at once. Photo mode: the end state at once. The confirm modal keeps its own scrim
   (it has to sit over the panels), in the same plum and the same 240 ms. */
:root{ --dur-backdrop:.24s; --dur-backdrop-dead:.7s; --bd-plum:42,26,46; }
.backdrop{
  position:fixed;inset:0;pointer-events:none;--bd-dur:var(--dur-backdrop);--bd-spot:68% 58%;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:backdrop-filter var(--bd-dur) var(--out),-webkit-backdrop-filter var(--bd-dur) var(--out);
}
.backdrop>i{position:absolute;inset:0;opacity:0;transition:opacity var(--bd-dur) var(--out)}
.bd-dim{background:rgba(var(--bd-plum),.5)}
.bd-dead{background:radial-gradient(ellipse 30% 38% at var(--bd-spot),rgba(var(--bd-plum),.26) 0%,rgba(var(--bd-plum),.42) 55%,rgba(var(--bd-plum),.64) 100%)}
.bd-glow{background:radial-gradient(ellipse 40% 50% at var(--bd-spot),rgba(255,226,140,.3) 0%,rgba(255,226,140,0) 70%)}
body:is([data-backdrop="menu"],[data-backdrop="pause"]) .bd-dim{opacity:1}
body[data-backdrop="dead"] .backdrop{
  --bd-dur:var(--dur-backdrop-dead);
  -webkit-backdrop-filter:grayscale(.75) brightness(.62);backdrop-filter:grayscale(.75) brightness(.62);
}
body[data-backdrop="dead"] .bd-dead{opacity:1}
body[data-backdrop="victory"] .bd-glow{opacity:1}
/* spotlight: the new-fighter card (ui/rebirth.js sets it over menu.js's 'none'). The arena drops to about 70% round a
   warm pool on the fighter; --bd-hero (the fighter's middle) and --bd-r (their height on screen) follow the camera.
   Same 240 ms cross-fade in and out (Fight!, Menu, the Shop's plum dim). */
.bd-spot{
  background:
    radial-gradient(ellipse calc(var(--bd-r,320px) * .55) calc(var(--bd-r,320px) * .72) at var(--bd-hero,64% 46%),rgba(255,218,150,.14) 0%,rgba(255,218,150,0) 100%),
    radial-gradient(ellipse calc(var(--bd-r,320px) * 1.05) calc(var(--bd-r,320px) * .92) at var(--bd-hero,64% 46%),rgba(var(--bd-plum),0) 40%,rgba(var(--bd-plum),.22) 70%,rgba(var(--bd-plum),.36) 100%);
  /* the stands behind go soft (desktop: a phone keeps its frame rate); the fighter's own pool stays sharp */
  -webkit-backdrop-filter:blur(calc(var(--bd-r,450px) / 180)) saturate(.85);backdrop-filter:blur(calc(var(--bd-r,450px) / 180)) saturate(.85);
  -webkit-mask-image:radial-gradient(ellipse calc(var(--bd-r,320px) * .62) calc(var(--bd-r,320px) * .78) at var(--bd-hero,64% 46%),transparent 55%,#000 100%);
  mask-image:radial-gradient(ellipse calc(var(--bd-r,320px) * .62) calc(var(--bd-r,320px) * .78) at var(--bd-hero,64% 46%),transparent 55%,#000 100%);
}
@media (max-width:720px),(pointer:coarse){ .bd-spot{-webkit-backdrop-filter:none;backdrop-filter:none} }
body[data-backdrop="spotlight"] .bd-spot{opacity:1}
/* the fallen fighter (and the winner) stand above the card on a phone or a portrait screen */
@media (max-width:720px),(max-aspect-ratio:4/5){ .backdrop{--bd-spot:50% 34%} }
@media (prefers-reduced-motion:reduce){ .backdrop,.backdrop>i{transition:none} }
.shot .backdrop,.shot .backdrop>i{transition:none}
/* over a paused fight: the HUD stays under the pause card but makes way for the full menus and their corner Back;
   the first-life hint never sits on a menu (hud.js sets body[data-screen]) */
body:is([data-screen="settings"],[data-screen="howto"]) :is(#hud,#hud-bottom,#bossbar){visibility:hidden}
body:is([data-screen="pause"],[data-screen="settings"],[data-screen="howto"]) #hint{visibility:hidden}
.menu-screen .screen-inner{display:grid;justify-items:center}
.menu-card{position:relative;width:min(420px,100%);display:grid;gap:14px;padding:34px 26px 24px;animation:menu-in .24s var(--pop) backwards}
/* the card is slapped down like a sticker: a short rise with a little overshoot */
@keyframes menu-in{from{transform:translateY(12px) scale(.97);opacity:0}}
.menu-card.wide{width:min(580px,100%)}
.menu-card>.ribbon:first-child{position:absolute;top:-19px;left:18px;margin:0 14px}
.menu-title{margin:0;font:400 var(--t-title)/1 var(--f-display);color:var(--ink);letter-spacing:.01em}
/* the line under a menu's title: plain words (the weight pass: a pill here competed with the buttons under it) */
.menu-sub{
  justify-self:start;margin:-6px 0 2px;
  font:var(--w-body) var(--t-lead)/1.4 var(--f-ui);color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.menu-sub b{color:var(--gold-ink);font-weight:var(--w-strong)}
.menu-list{display:grid;gap:12px}
.menu-list .btn{width:100%}
/* the title stack and the pause list: the label centred, the icon pinned in one column at the left */
:is(.title-actions,.menu-list) .btn.ghost{position:relative;justify-content:center;padding:0 54px}
:is(.title-actions,.menu-list) .btn.ghost .ic{position:absolute;left:18px;top:50%;width:28px;height:28px;margin-top:-14px}
.menu-list .btn.big .ic{width:30px;height:30px;--ic-fill:#fff}
#btn-giveup,#btn-quit{color:var(--terracotta-lo)}
.menu-rule{height:0;margin:2px 4px;border-top:3px dashed rgba(90,63,82,.3)}
.menu-keys{margin:0;font:var(--w-strong) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-3);text-align:center}
.menu-keys kbd{font-size:var(--t-tag)}
.menu-foot{margin:2px 0 0;font:var(--w-strong) var(--t-caption)/1.4 var(--f-ui);color:var(--ink-3)}
@media (pointer:coarse){ .menu-keys,.keys-only{display:none} }

/* ---------- Settings: label, control, value ---------- */
.set-group{display:grid;gap:0}
.set-head{margin:4px 0 2px;font:var(--w-strong) var(--t-label)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.set-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px;min-height:58px;padding:6px 0;
  border-bottom:3px dashed rgba(90,63,82,.18);
}
.set-group .set-row:last-child{border-bottom:0}
label.set-row{grid-template-columns:minmax(96px,.7fr) minmax(0,1.6fr) 48px;cursor:pointer}
.set-label{display:grid;gap:2px;font:400 var(--t-btn)/1.1 var(--f-display);color:var(--ink)}
.set-label small{font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);color:var(--ink-3)}
.set-val{font:400 var(--t-name)/1 var(--f-display);color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
/* a chunky slider: an ink-outlined track filled gold up to the value, a paper knob */
.slider{
  -webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:none;cursor:pointer;--v:100%;
}
.slider::-webkit-slider-runnable-track{
  height:18px;border-radius:999px;border:3px solid var(--ink);
  background:linear-gradient(90deg,#f2c94c 0,#db8720 var(--v),var(--paper-2) var(--v));box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 3px 0 var(--ink);
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:32px;height:32px;margin-top:-10px;border-radius:50%;
  border:3px solid var(--ink);background:var(--g-paper);box-shadow:inset 0 2px 0 #fff,0 3px 0 var(--ink);
}
.slider::-moz-range-track{height:12px;border-radius:999px;border:3px solid var(--ink);background:var(--paper-2)}
.slider::-moz-range-progress{height:12px;border-radius:999px;border:3px solid var(--ink);background:#eac254}
.slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;border:3px solid var(--ink);background:var(--paper)}
/* an on/off switch with its word */
.switch{
  all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 6px;border-radius:999px;
  font:400 var(--t-name)/1 var(--f-display);color:var(--ink);
}
.sw-track{
  position:relative;width:64px;height:36px;border-radius:999px;border:3px solid var(--ink);background:#d9cbb0;
  box-shadow:inset 0 3px 0 rgba(0,0,0,.08),0 3px 0 var(--ink);transition:background .16s ease;
}
.sw-knob{
  position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;border:3px solid var(--ink);background:var(--g-paper);
  transition:transform .2s var(--out);
}
.switch[aria-checked="true"] .sw-track{background:linear-gradient(180deg,#c6ec8c 0%,#7fbe48 60%,#4c8a2c 100%)}
.switch[aria-checked="true"] .sw-knob{transform:translateX(28px)}
.sw-word{min-width:2.2em}
/* 1x / 2x / 3x */
.seg{display:inline-flex;border:3px solid var(--ink);border-radius:999px;overflow:hidden;box-shadow:0 3px 0 var(--ink);background:var(--paper-2)}
.seg button{
  all:unset;box-sizing:border-box;cursor:pointer;min-width:56px;min-height:44px;display:grid;place-items:center;padding:0 10px;
  font:400 var(--t-btn)/1 var(--f-display);color:var(--ink-2);
}
.seg button+button{border-left:3px solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--g-gold);color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}

/* ---------- How to play: four short panels ---------- */
.howto{width:min(980px,100%);display:grid;gap:22px}
.howto-head{display:grid;justify-items:center;gap:10px;text-align:center}
.howto-head .menu-title{color:#fff;-webkit-text-stroke:10px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink);font-size:var(--t-title)}
.howto-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.howto-card{
  position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:16px;row-gap:4px;
  align-items:start;padding:20px 20px 20px 18px;
}
.howto-ic{grid-row:1/3;width:64px;height:64px}
.howto-card h3{margin:2px 0 0;font:400 var(--t-h)/1.1 var(--f-display);color:var(--ink);text-wrap:balance}
.howto-card p{margin:0;font:var(--w-body) var(--t-lead)/1.4 var(--f-ui);color:var(--ink-2)}
.howto-card kbd{font-size:var(--t-tag)}
.howto-n{
  position:absolute;top:-14px;left:-10px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  border:3px solid var(--ink);background:var(--g-terracotta);box-shadow:0 3px 0 var(--ink);
  font:400 var(--t-name)/1 var(--f-display);color:#fff;-webkit-text-stroke:3.5px var(--ink);paint-order:stroke fill;
}
.howto-actions{justify-content:center}

/* ---------- the confirm modal: over everything; No is the safe answer and has the focus ---------- */
.modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:24px 16px;background:rgba(42,26,46,.6);animation:modal-dim .24s var(--out)}
/* the dim and the card arrive together (240 ms each); the card's overshoot stays small: a question, not a prize */
.modal-card{width:min(500px,100%);display:grid;gap:12px;padding:26px 24px 22px;animation:modal-in .24s var(--pop)}
.modal-title{margin:0;font:400 var(--t-display)/1.05 var(--f-display);color:var(--ink);text-wrap:balance}
.modal-body{margin:0;font:var(--w-body) var(--t-lead)/1.4 var(--f-ui);color:var(--ink-2)}
.modal-body b{color:var(--gold-ink);font-weight:var(--w-strong)}
.modal-actions{justify-content:flex-end;flex-wrap:nowrap;margin-top:6px}
.modal-actions .btn{min-width:130px;padding:0 22px;white-space:nowrap}
@keyframes modal-in{from{transform:translateY(8px) scale(.94);opacity:0}to{transform:none;opacity:1}}
@keyframes modal-dim{from{opacity:0}}

/* ---------- the new-fighter card: the fighter strip (portraits), above the weapon strip ---------- */
.rb-types{display:grid;gap:8px;min-width:0}
.rbt-row{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 8px}
.ft{
  all:unset;box-sizing:border-box;position:relative;flex:none;width:48px;height:48px;cursor:pointer;
  border:3px solid var(--ink);border-radius:12px;background:var(--paper-2);overflow:visible;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.65),0 3px 0 var(--ink);
  transition:transform .12s var(--out),box-shadow .12s var(--out);
}
.ft img{display:block;width:100%;height:100%;object-fit:cover;border-radius:9px;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .ft:hover{transform:translateY(-2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.65),0 5px 0 var(--ink)}
}
.ft:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.ft.on{box-shadow:var(--ring-pick),0 3px 0 var(--ink)}
.ft.locked img{filter:grayscale(1) contrast(.85) brightness(1.15);opacity:.5}
.ft.locked{background:#e9dcc2}
.rb-class .rb-fav{margin-top:0}
/* a locked weapon's note opens the Shop */
.rbw-shop{
  all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:32px;margin-left:2px;padding:0 12px;vertical-align:middle;
  border:2.5px solid var(--ink);border-radius:999px;background:var(--g-gold);box-shadow:0 2px 0 var(--ink);
  font:400 var(--t-name-s)/1 var(--f-display);color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;
}

/* damage numbers off (Settings): heals and words still show */
.no-dmg-nums #labels .pop:is(.dmg,.crit,.hurt,.burn,.bleed){display:none}

@media (max-height:780px) and (min-width:721px){
  .ft{width:42px;height:42px;border-radius:11px}
  .ft img{border-radius:8px}
  .rb-types{gap:6px}
  .rbt-row{gap:7px;padding-bottom:6px}
  .screen.has-nav#scr-rebirth{padding-top:calc(env(safe-area-inset-top,0px) + 76px);padding-bottom:12px}
}
@media (max-width:720px),(max-aspect-ratio:4/5){
  .howto-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  /* one strip that scrolls sideways, like the weapons */
  .rbt-row{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:-8px -16px -2px;padding:12px 16px 10px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .rbt-row::-webkit-scrollbar{display:none}
  .ft{width:46px;height:46px}
}
@media (max-width:600px){
  .nav-top{top:calc(env(safe-area-inset-top,0px) + 12px);min-height:46px;padding:0 16px 0 11px;font-size:var(--t-name)}
  .nav-top .ic{width:24px;height:24px}
  .screen.has-nav{padding-top:calc(env(safe-area-inset-top,0px) + 72px)}
  /* the card and the stone sit at the bottom: the corner button floats over the sand above them */
  #scr-rebirth.has-nav,#scr-death.has-nav{padding-top:calc(env(safe-area-inset-top,0px) + 68px)}
  .menu-card{padding:30px 16px 18px;gap:12px}
  .menu-title{font-size:var(--t-display)}
  .menu-list{gap:10px}
  .menu-list .btn{min-height:50px}
  :is(.title-actions,.menu-list) .btn.ghost .ic{left:16px;width:24px;height:24px;margin-top:-12px}
  .set-row{min-height:54px;gap:6px 10px}
  label.set-row{grid-template-columns:76px minmax(0,1fr) 44px}
  .set-label{font-size:var(--t-name)}
  .set-val{font-size:var(--t-name-s)}
  .seg button{min-width:50px;font-size:var(--t-name)}
  .howto{gap:18px}
  .howto-head .menu-title{font-size:var(--t-title);-webkit-text-stroke:8px var(--ink);text-shadow:0 5px 0 var(--ink)}
  .howto-card{grid-template-columns:48px minmax(0,1fr);column-gap:12px;padding:16px 14px 16px 12px}
  .howto-ic{width:48px;height:48px}
  .howto-card h3{font-size:var(--t-btn)}
  .howto-card p{font-size:var(--t-body);line-height:1.4}
  .modal-title{font-size:var(--t-btn-l)}
  .modal-body{font-size:var(--t-lead)}
  .modal-actions{display:grid;grid-template-columns:minmax(0,1fr)}
  .modal-actions .btn{min-width:0;width:100%;padding:0 12px}
  /* every button is at least 44 px tall on a phone */
  .wt{width:44px;height:44px}
  .ft{width:46px;height:46px}
  .btn.sh-buy,.btn.dx{min-height:44px}
  .rbw-shop{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .modal-card,.modal,.menu-card{animation:none}
  .ft,.sw-track,.sw-knob{transition:none}
  .ft:hover{transform:none}
}
/* photo mode captures every card at rest */
.shot :is(.menu-card,.modal,.modal-card){animation:none}
/* ---- P0-2 additions go below ---- */

/* ---------- Back / Menu ride with the content on wide screens (owner, 2026-10-20: "on ultrawide the back button is
   so far from the center of my page") ----------
   Desktop and landscape tablets: the button leaves the viewport corner and sits at the top-left of the screen's own
   centred column (--nav-col, each screen's max width), right above its title or card. Settings, How to play, the
   new-fighter card and the death screen centre the button and the card together; the Shop and Past Lives stay
   top-aligned so switching tabs never moves the page. Phones, portrait screens and landscape phones keep the fixed
   top-left corner above. The camera (camera.js openRect) ignores the button there: it sits inside the card's column. */
@media (min-width:721px) and (min-aspect-ratio:8001/10000) and (min-height:560px){
  .screen.has-nav{
    padding-top:calc(env(safe-area-inset-top,0px) + 24px);
    grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr);
  }
  .screen.has-nav>.nav-top{
    position:relative;inset:auto;grid-row:2;justify-self:start;align-self:end;
    margin:0 0 var(--nav-gap,30px) max(0px,calc((100% - var(--nav-col,1060px)) / 2));
  }
  .screen.has-nav>.screen-inner{grid-row:3;margin-block:0}
  #scr-armory.has-nav,#scr-rules.has-nav,#scr-lineage.has-nav{grid-template-rows:auto auto minmax(0,1fr)}
  #scr-armory,#scr-rules,#scr-lineage{--nav-col:var(--menu-col);--nav-gap:12px}
  #scr-settings{--nav-col:580px}
  #scr-howto{--nav-col:980px;--nav-gap:14px}
  #scr-rebirth,#scr-death{--nav-col:1200px}
}
/* short desktop screens: the new-fighter card keeps the room it had (the button row costs what the old 76 px top
   padding did) */
@media (min-width:721px) and (min-aspect-ratio:8001/10000) and (min-height:560px) and (max-height:800px){
  .screen.has-nav,.screen.has-nav#scr-rebirth{padding-top:calc(env(safe-area-inset-top,0px) + 10px);padding-bottom:12px}
  .screen.has-nav>.nav-top{min-height:44px;font-size:var(--t-name)}
  #scr-rebirth,#scr-death,#scr-settings{--nav-gap:26px}
  .menu-card{padding:30px 22px 18px;gap:10px}
  .menu-title{font-size:var(--t-title)}
  .set-row{min-height:50px;padding:4px 0}
}
/* the key that does the same thing, on the button itself (a key cap like the rest of the game's; not on touch) */
.nav-top::after{
  content:"Esc";content:"Esc" / "";
  display:inline-block;padding:3px 6px 4px;border:var(--line-xs) solid var(--ink);border-radius:7px;background:var(--paper-2);box-shadow:0 2px 0 var(--ink);
  font:400 var(--t-tag)/1 var(--f-display);letter-spacing:.02em;color:var(--ink-2);-webkit-text-stroke:0;
}
.nav-top{padding-right:12px}
@media (pointer:coarse),(max-width:600px){ .nav-top{padding-right:16px} .nav-top::after{display:none} }

/* ---------- Settings: Reset all progress (the same wipe as Past Lives' Start over: ui/lineage.js wipeSave) ---------- */
.set-save{margin-top:4px;padding-top:6px;border-top:3px dashed rgba(90,63,82,.3)}
.btn.set-reset{min-height:44px;padding:0 18px;font-size:var(--t-name);white-space:nowrap}
@media (max-width:600px){
  .btn.set-reset{padding:0 14px;font-size:var(--t-name-s)}
}

/* ---------- Settings: Move your save (ui/savecode.js). It opens the save area, so the dashed rule moves up from Your save.
   Export and Import each open a panel under them: a paper-2 well holding a code box (an ink slot, sunk: the opposite of a
   button's drop) and its buttons. The open one's button wears the pick ring. ---------- */
.set-move{margin-top:4px;padding-top:6px;border-top:3px dashed rgba(90,63,82,.3)}
.set-move~.set-save{margin-top:0;padding-top:0;border-top:0}
.set-move .set-row{border-bottom:0}
.sm-pair{display:flex;gap:10px}
.set-move .btn{min-height:44px;padding:0 18px;font-size:var(--t-name);white-space:nowrap}
.set-move .btn:not(.ghost){-webkit-text-stroke:3.5px var(--ink)}   /* white words at 18 px: the 5 px stroke would close them up */
.set-move .btn[aria-expanded="true"]{box-shadow:var(--ring-pick),inset 0 3px 0 #fff,inset 0 -4px 0 rgba(120,80,40,.14)}
.sm-panel{
  position:relative;display:grid;gap:10px;margin:0 0 8px;padding:14px;scroll-margin:24px;
  border:var(--line-xs) solid var(--ink);border-radius:var(--r-tile-lg);background:var(--paper-2);animation:sm-in .18s var(--out);
}
@keyframes sm-in{from{opacity:0;transform:translateY(-6px)}}
.sm-line{font:var(--w-strong) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-2)}
.sm-code{
  display:block;width:100%;height:104px;margin:0;padding:10px 12px;resize:none;
  border:var(--line-xs) solid var(--ink);border-radius:var(--r-tile);background:var(--marble);box-shadow:inset 0 3px 0 rgba(42,26,46,.1);
  font:400 var(--t-body)/1.4 ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;color:var(--ink);
  overflow-wrap:anywhere;word-break:break-all;
  -webkit-user-select:text;user-select:text;
}
.sm-code::placeholder{color:var(--ink-3)}
.sm-code:focus{outline:none;border-color:var(--player)}
html.kbd-nav .sm-code:focus{outline:var(--focus-ring);outline-offset:2px}
.sm-acts{display:flex;flex-wrap:wrap;gap:10px}
#btn-save-copy{min-width:6.4em}   /* Copy -> Copied keeps its width */
.sm-msg{margin:0;font:var(--w-strong) var(--t-caption)/1.35 var(--f-ui);color:var(--ink-2)}
.sm-msg:empty{display:none}
.sm-msg.bad{color:var(--terracotta-lo)}
.sm-msg.quiet{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* read out, not shown */
.sm-panel.empty>:not(.sm-msg){display:none}
@media (max-width:600px),(pointer:coarse){ .sm-code{font-size:16px} }   /* under 16 px, iOS zooms the page into the box */
@media (max-width:600px){
  .set-move .btn{padding:0 14px;font-size:var(--t-name-s)}
  .set-move .btn:not(.ghost){-webkit-text-stroke:3px var(--ink)}
  .sm-panel{padding:12px}
  /* larger text: the two buttons go under the words, as Auto-pick cards' do */
  html:is([data-ts="115"],[data-ts="130"]) .set-move .set-row{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){ .sm-panel{animation:none} }

/* ---------- the research pass (docs/research/game-ui.md §2.7, top-10 #10) ---------- */
/* Settings > Text size: the text-heavy surfaces scale (menu.js sets html[data-ts]; the tooltip reads --tz itself) */
html[data-ts="115"]{--tz:1.15}
html[data-ts="130"]{--tz:1.3}
/* a screen whose cards sit side by side in a grid scales whole (the pause menu, the death screen): a card scaled alone
   outgrew its column and ran over its neighbours (owner, 2026-10-25: "text scaling breaks UI. please fix") */
html:is([data-ts="115"],[data-ts="130"]) :where(.pause-wrap,.menu-card:not(.pause-wrap>.menu-card),.howto,.shop-grid,.shop-goal,.death-wrap,.hint,
  .lineage,.cs-rail,.cs-panel,.draft-panel,.draft-result,.victory,.loot,#scr-armory>.screen-inner,#scr-rules>.screen-inner){zoom:var(--tz)}
/* the new-fighter card's side columns grow with them (a phone stacks them, so this grid does not apply there) */
html:is([data-ts="115"],[data-ts="130"]) #scr-rebirth>.screen-inner.cs{grid-template-columns:calc(var(--rail) * var(--tz)) minmax(0,1fr) calc(var(--panel) * var(--tz))}
html:is([data-ts="115"],[data-ts="130"]) #scr-rebirth[data-step="bless"]>.screen-inner.cs{grid-template-columns:minmax(0,1fr) calc(var(--bless) * var(--tz))}
/* the upgrade cards: a little narrower, so four still fit the screen with their text bigger */
html:is([data-ts="115"],[data-ts="130"]) .draft-panel{max-width:calc(100% / var(--tz))}
/* as wide as four cards can be in this window (the reroll beside them) and as tall as it allows, never wider than at
   100% (owner, 2026-10-25: "cards look super thing on different scaling": a fixed 196 px was too narrow on a big screen) */
@media (min-width:721px){ html:is([data-ts="115"],[data-ts="130"]) .draft-panel{--cw:min(240px,calc(((100vw - 160px) / var(--tz) - 54px) / 4),calc((100vh - 330px) / (1.45 * var(--tz))))} }
/* and the column they sit in grows with them: capped at its 100% width, it squeezed four bigger cards into tall slivers */
html:is([data-ts="115"],[data-ts="130"]) #scr-draft .screen-inner{max-width:calc(1060px * var(--tz))}
/* a phone's death screen stays as it is: its three stat tiles and two buttons already fill a phone's width, and its type
   is already large there */
@media (max-width:720px),(max-aspect-ratio:4/5){ html:is([data-ts="115"],[data-ts="130"]) .death-wrap{zoom:1} }
@media (min-width:601px){ html:is([data-ts="115"],[data-ts="130"]) .stats-panel{zoom:var(--tz);max-height:calc(100vh / var(--tz) - 248px)} }
/* the pause menu: the buttons, your build beside them on the right (menu.js buildSummary; owner, 2026-10-25: "feel like
   this should be flipped (menu on left)"); a phone stacks them, Resume first */
#scr-pause .pause-wrap{grid-template-columns:auto minmax(0,400px);align-items:center;justify-content:center;gap:26px}
.pause-build{position:relative;width:100%;box-sizing:border-box;display:grid;gap:13px;align-content:start;padding:32px 20px 20px;animation:menu-in .24s var(--pop) .04s backwards}
.pause-build:empty{display:none}
.pause-build>.ribbon:first-child{position:absolute;top:-19px;left:18px;margin:0 14px}
.pb-weapon{display:flex;align-items:center;gap:12px;cursor:default}
.pb-medal{
  flex:none;width:56px;height:56px;display:grid;place-items:center;border-radius:50%;border:var(--line) solid var(--ink);background:var(--g-blue);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.5),inset 0 -4px 0 rgba(10,30,90,.25),0 3px 0 var(--ink);
}
.pb-medal .ic{width:36px;height:36px}
.pb-wname{display:grid;gap:3px;min-width:0}
.pb-wname b{font:400 var(--t-h)/1 var(--f-display);color:var(--ink)}
.pb-wname small{font:var(--w-strong) var(--t-label)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.pb-paths{display:grid;gap:7px;padding:8px 10px;border:2px solid var(--ink);border-radius:12px;background:var(--paper-2)}
.pb-path{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px;font:var(--w-strong) var(--t-body)/1.2 var(--f-ui);color:var(--ink);cursor:default}
.pb-path .ic{width:22px;height:22px}
.pb-pips{display:flex;align-items:center;gap:4px}
.pb-pips i{width:12px;height:12px;box-sizing:border-box;border:2px solid var(--ink);border-radius:50%;background:#fff}
.pb-pips i.on{background:var(--g-gold)}
.pb-pips i.fin{margin-left:3px;border-radius:3px;transform:rotate(45deg)}
.pb-pows{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px 6px}
.pb-pow{display:grid;justify-items:center;gap:6px;text-align:center;cursor:default;min-width:0}
.pb-pic{
  position:relative;width:56px;height:56px;box-sizing:border-box;display:grid;place-items:center;border-radius:16px;border:var(--line-s) solid var(--ink);
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--gc) 26%,#fff));box-shadow:inset 0 0 0 3px var(--gc),0 3px 0 var(--ink);
}
.pb-pic .ic{width:36px;height:36px}
.pb-pic b{
  position:absolute;right:-7px;bottom:-7px;min-width:21px;height:21px;padding:0 4px;box-sizing:border-box;display:grid;place-items:center;
  border:var(--line-xs) solid var(--ink);border-radius:999px;background:color-mix(in srgb,var(--gc) 35%,#fff);font:400 var(--t-tag)/1 var(--f-display);color:var(--ink);
}
.pb-pname{font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);color:var(--ink);overflow-wrap:anywhere}
.pb-sets,.pb-boons{display:flex;flex-wrap:wrap;gap:7px}
.pb-boon{
  position:relative;width:38px;height:38px;box-sizing:border-box;display:grid;place-items:center;border-radius:11px;cursor:default;
  border:var(--line-xs) solid var(--ink);background:var(--g-paper);box-shadow:0 2px 0 var(--ink);
}
.pb-boon .ic{width:25px;height:25px}
.pb-boon b{position:absolute;right:-7px;bottom:-7px;padding:2px 4px;border:2px solid var(--ink);border-radius:999px;background:#fff;font:400 var(--t-tag)/1 var(--f-display);color:var(--ink)}
.pb-empty{margin:0;font:var(--w-body) var(--t-body)/1.4 var(--f-ui);color:var(--ink-2)}
:is(.pb-weapon,.pb-path,.pb-pow,.pb-boon):focus-visible,html.kbd-nav :is(.pb-weapon,.pb-path,.pb-pow,.pb-boon):focus{outline:var(--focus-ring);outline-offset:var(--focus-off);border-radius:12px}
@media (max-width:720px){
  #scr-pause .pause-wrap{grid-template-columns:minmax(0,1fr);gap:24px;align-content:start;padding-top:6px}
  .pause-build{padding:26px 14px 14px;gap:10px}
  .pb-medal{width:44px;height:44px}
  .pb-medal .ic{width:28px;height:28px}
  .pb-wname b{font-size:var(--t-name)}
  .pb-pows{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:8px 4px}
  .pb-pic{width:46px;height:46px;border-radius:13px}
  .pb-pic .ic{width:30px;height:30px}
  .pb-pname{font-size:var(--t-micro)}
  .pb-path{font-size:var(--t-caption)}
}
@media (prefers-reduced-motion:reduce){ .pause-build{animation:none} }
.shot .pause-build{animation:none}
/* two-button choices are equal partners: same height and width (victory, confirm dialog) */
#scr-victory .actions,.modal-actions{display:flex;gap:14px}
#scr-victory .actions .btn,.modal-actions .btn{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap}

/* ---------- the menus keep still (owner, 2026-10-21: "the back button, everything seems to shift depending on the tab
   I'm in") ----------
   The Armory and Past Lives share one centred column (--menu-col), top-aligned,
   with Back at its top-left corner: switching tabs, or going from Past Lives to the Collection, never moves Back or the
   header. The scrollbar's room is kept on both sides, so a tall tab does not nudge the column sideways. */
:root{--menu-col:1180px}
#scr-armory,#scr-rules,#scr-lineage{scrollbar-gutter:stable both-edges}
#scr-armory>.screen-inner,#scr-rules>.screen-inner,#scr-lineage>.screen-inner{margin-top:0}

/* ---------- big screens (owner, 2026-10-21: "maybe on my ultrawide things are just not scaling correctly") ----------
   On a tall wide screen (2560x1440, 3440x1440) the menus, the new-fighter card, Back and the HUD grow with the height
   (x1.3), so nothing reads as a tiny island in a huge arena; every screen keeps its centred column (the draft's cards
   scale on their own, draft.css). The tooltip's words follow (stats.css). A 1080-high screen, however wide (2560x1080),
   keeps 1080p's sizes: its height is the limit (the new-fighter card and Settings already fill it). */
@media (min-width:2000px) and (min-height:1300px){ :root{--big:1.3} }
:is(#scr-title,#scr-rebirth,#scr-death,#scr-victory,#scr-armory,#scr-rules,#scr-lineage,#scr-pause,#scr-settings,#scr-howto,#scr-loot)>:is(.screen-inner,.nav-top),
#hud,#hud-bottom,#bossbar,.ul-card,.modal-card{zoom:var(--big,1)}
/* the Stats panel (C) sits under the HUD's corner: it grows with it (and with Text size) */
@media (min-width:2000px) and (min-height:1300px){ .stats-panel{zoom:calc(var(--tz,1) * var(--big,1));max-height:calc(100vh / (var(--tz,1) * var(--big,1)) - 248px)} }

/* ---------- the corner sound button (ui/controls.js; owner, 2026-10-21: "reintroduce sound icon to top right of page
   at almost all times"): the HUD's top-right corner, on every screen. In a fight the HUD's own sound button becomes an
   empty slot in that same spot (last in its row; first in a phone's column), so the icon never moves; it sits above
   the screens and a modal's dim, under the unlock ceremony. ---------- */
.sound-top{position:fixed;z-index:calc(var(--z-modal) + 1);top:calc(env(safe-area-inset-top,0px) + 14px);right:max(16px,env(safe-area-inset-right,0px));zoom:var(--big,1)}
body:has(.sound-top) #btn-sound{order:1;visibility:hidden}
@media (max-width:600px){
  .sound-top{top:calc(env(safe-area-inset-top,0px) + 10px);width:44px;height:44px;border-radius:12px}
  .sound-top .ic{width:25px;height:25px}
  body:has(.sound-top) #btn-sound{order:-1}
}
/* the new-fighter card's panel runs to the right edge on a laptop-width screen: keep the corner button clear of it */
@media (min-width:721px) and (max-width:1699px) and (min-aspect-ratio:8001/10000){
  body:has(.sound-top) #scr-rebirth>.screen-inner.cs{max-width:calc(100vw - 152px)}
}
/* a phone's title: the name sits under the corner sound button, never beside it */
@media (max-width:600px),(max-aspect-ratio:4/5){
  body:has(.sound-top) #scr-title{padding-top:calc(env(safe-area-inset-top,0px) + 66px)}
}

/* the volume panel under the corner sound button (ui/controls.js): the sound switch, then four sliders */
.vol-pop{position:fixed;z-index:calc(var(--z-modal) + 2);top:calc(env(safe-area-inset-top,0px) + 72px);right:max(16px,env(safe-area-inset-right,0px));width:250px;box-sizing:border-box;
  display:grid;gap:8px;padding:12px 14px 14px;background:var(--g-paper);border:var(--line-s) solid var(--ink);border-radius:var(--r-tile-lg);box-shadow:inset 0 2px 0 #fff,var(--drop-s);
  zoom:var(--big,1);animation:vp-in .16s var(--out);transform-origin:calc(100% - 24px) 0}
.vol-pop[hidden]{display:none}
.vol-pop::before{content:"";position:absolute;top:-9px;right:16px;width:14px;height:14px;background:#fffaf0;border-left:var(--line-s) solid var(--ink);border-top:var(--line-s) solid var(--ink);transform:rotate(45deg)}
@keyframes vp-in{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.vp-mute{all:unset;box-sizing:border-box;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;min-height:36px;padding:0 10px;border-radius:10px;cursor:pointer;
  background:var(--paper-2);border:var(--line-2) solid var(--ink)}
.vp-mute .ic{width:22px;height:22px}
.vp-mute b{font:400 var(--t-name)/1 var(--f-display);color:var(--ink)}
.vp-mute em{font:var(--w-strong) var(--t-label)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;font-style:normal;color:var(--ink-3)}
.vp-mute:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.vp-row{display:grid;grid-template-columns:62px minmax(0,1fr) 38px;align-items:center;gap:8px;cursor:pointer}
.vp-row span{font:var(--w-strong) var(--t-label)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-2)}
.vp-row i{font:var(--w-body) var(--t-caption)/1 var(--f-ui);font-style:normal;color:var(--ink-3);text-align:right}
.vol-pop.muted .vp-row{opacity:.55}
@media (max-width:600px){ .vol-pop{top:calc(env(safe-area-inset-top,0px) + 62px);width:min(260px,calc(100vw - 32px))} }
@media (prefers-reduced-motion:reduce){ .vol-pop{animation:none} }

/* ---------- phones: what scrolls under the corner buttons ----------
   On a phone Back (or Menu) and the sound button stay fixed in the top corners while a long screen scrolls: once it
   scrolls, the top of the screen fades into its own ground behind them, so a heading never runs between the two
   buttons. The fade comes in over the first 48 px of scroll (a scroll timeline; without one the screen is as before).
   It shares the content's grid cell (a sticky box sticks only inside its cell) and reaches up into the top padding
   (a sticky offset counts from inside the padding, hence the negative top).
   The pause menu starts under the sound button. */
@media (max-width:600px),(max-height:500px){
  #scr-pause{padding-top:calc(env(safe-area-inset-top,0px) + 66px)}
}
@media (max-height:500px) and (min-width:601px){ #scr-pause{padding-top:calc(env(safe-area-inset-top,0px) + 24px)} }
@supports (animation-timeline:scroll()){
  @media (max-width:600px),(max-height:500px){
    :is(.screen.has-nav,#scr-pause){--nav-pad:calc(env(safe-area-inset-top,0px) + 72px)}
    :is(.screen.has-nav,#scr-pause)>.screen-inner{grid-area:1/1}
    :is(.screen.has-nav,#scr-pause)::before{
      content:"";grid-area:1/1;align-self:start;position:sticky;z-index:2;top:calc(-1 * var(--nav-pad));height:calc(env(safe-area-inset-top,0px) + 76px);
      margin:calc(-1 * var(--nav-pad)) calc(-1 * max(16px,env(safe-area-inset-left,0px))) 0;pointer-events:none;
      background:linear-gradient(180deg,rgba(var(--bd-plum),.92) 0%,rgba(var(--bd-plum),.78) 55%,rgba(var(--bd-plum),0) 100%);
      opacity:0;animation:nav-fade linear both;animation-timeline:scroll(nearest);animation-range:0 48px;   /* no overflow: no timeline, no fade */
    }
    :is(#scr-armory,#scr-rules,#scr-lineage)::before{background:linear-gradient(180deg,rgb(240,214,164) 0%,rgba(240,214,164,.9) 55%,rgba(240,214,164,0) 100%)}
    #scr-rebirth::before{display:none}   /* the new-fighter card fits its screen; its corner is the fighter's sand */
    #scr-death{--nav-pad:calc(env(safe-area-inset-top,0px) + 68px)}
    #scr-pause{--nav-pad:calc(env(safe-area-inset-top,0px) + 66px)}
  }
  @media (max-height:500px) and (min-width:601px){
    :is(.screen.has-nav,#scr-death){--nav-pad:calc(env(safe-area-inset-top,0px) + 84px)}
    #scr-pause{--nav-pad:calc(env(safe-area-inset-top,0px) + 24px)}
  }
}
@keyframes nav-fade{from{opacity:0}to{opacity:1}}