/* 烬落 GREYFALL — page chrome, HUD and menus. One committed look: black, white, grey, and three accents that each mean one thing.
   Display type is Fusion Pixel Font 12px (c) TakWolf, SIL Open Font License 1.1 — see assets/fusion-pixel-OFL.txt.
   Body text uses the system's own Chinese face, so nothing is fetched from a font host. */
@font-face {
  font-family: 'Fusion Pixel';
  src: url('../assets/fusion-pixel.woff2') format('woff2');
  font-display: block;
}
:root {
  --void: #050506; --panel: #0d0d10; --line: #2c2c32;
  --ink: #f3f1ea; --dim: #a4a4aa; --note: #8c8c94; --mute: #64646c;   /* --note: small text that says something (6:1 on --void); --mute: borders and decoration only */
  --red: #ff4040; --gold: #ffcb52; --gold-dk: #96691a; --cyan: #62e6d8;
  --display: 'Fusion Pixel', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
  --body: 'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans SC', 'Source Han Sans SC', 'Hiragino Sans GB', system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
  --u: 1vw;            /* one hundredth of the game view's width; set by script */
  --px: calc(var(--u) * 0.2083);   /* one game pixel */
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; padding-inline: 16px;
  background: var(--void); color: var(--ink);
  font-family: var(--body);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#app {
  position: relative; flex: none;
  width: 100%; max-width: 960px; aspect-ratio: 16 / 9;
  background: #000; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
kbd { font-family: var(--mono); }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; font-size: calc(var(--u) * 1.25); }
#hud.show { opacity: 1; }
.tl { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 2); display: flex; flex-direction: column; gap: calc(var(--u) * .7); }
.hprow { display: flex; align-items: center; gap: calc(var(--u) * 1); }
#hpbar { position: relative; height: calc(var(--u) * 1.5); width: calc(var(--u) * 17); background: #0a0a0c; outline: var(--px) solid var(--ink); }
#hp-lag, #hp-fill { position: absolute; left: 0; top: 0; bottom: 0; display: block; }
#hp-lag { background: var(--mute); }
#hp-fill { background: var(--ink); }
#hpbar.low #hp-fill { background: var(--red); }
#hpbar.low { outline-color: var(--red); }
#hp-num { color: var(--dim); font-family: var(--mono); font-size: calc(var(--u) * 1.15); font-variant-numeric: tabular-nums; white-space: nowrap; }
#flasks { display: flex; gap: calc(var(--u) * .6); }
#flasks i { width: calc(var(--u) * 1); height: calc(var(--u) * 1.5); outline: var(--px) solid var(--cyan); }
#flasks i.on { background: var(--cyan); }

.tr { position: absolute; right: calc(var(--u) * 2); top: calc(var(--u) * 2); display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * .7); }
#timer { color: var(--dim); font-family: var(--mono); font-size: calc(var(--u) * 1.15); font-variant-numeric: tabular-nums; }
#ash { color: var(--gold); font-family: var(--display); font-size: calc(var(--u) * 1.5); line-height: 1; }
#ash.pop { color: #fff; }
#perks { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: calc(var(--u) * .45); max-width: calc(var(--u) * 25); }
.chip { font-family: var(--display); font-size: calc(var(--u) * 1.25); line-height: 1.25; padding: calc(var(--u) * .2) calc(var(--u) * .6); outline: var(--px) solid var(--line); background: rgba(5, 5, 6, .82); color: var(--dim); white-space: nowrap; }
.chip.rare { outline-color: var(--gold-dk); color: var(--gold); }
.chip.kit { color: var(--ink); outline-color: var(--mute); }

#boss { position: absolute; left: 54%; top: calc(var(--u) * 1.4); transform: translateX(-50%); width: calc(var(--u) * 36); text-align: center; opacity: 0; transition: opacity .5s; }
#boss.show { opacity: 1; }
.bn { font-family: var(--display); font-size: calc(var(--u) * 2.5); line-height: 1.15; letter-spacing: .4em; margin-right: -.4em; }
.bh { height: calc(var(--u) * 1.2); outline: var(--px) solid var(--ink); background: #0a0a0c; }
#boss-hp { display: block; height: 100%; width: 100%; background: var(--red); }
.bp { height: calc(var(--px) * 2); margin-top: calc(var(--px) * 2); background: #17171a; }
#boss-po { display: block; height: 100%; width: 0; background: var(--gold); }
#boss.reel .bh { outline-color: var(--gold); }

/* loadout: compact rows under the health bar, kept clear of the floor where the fighting happens */
.slots { display: flex; flex-direction: column; gap: calc(var(--u) * .45); margin-top: calc(var(--u) * .3); text-shadow: 0 var(--px) 0 #000, var(--px) 0 0 #000, 0 0 calc(var(--px) * 3) #000; }
.slot { display: grid; grid-template-columns: calc(var(--u) * 4.4) calc(var(--u) * 6.2) calc(var(--u) * 3.6) auto; column-gap: calc(var(--u) * .7); align-items: center; }
.slot kbd { justify-self: start; min-width: calc(var(--u) * 2); text-align: center; padding: calc(var(--u) * .05) calc(var(--u) * .4); outline: var(--px) solid var(--mute); background: rgba(5, 5, 6, .7); color: var(--dim); font-size: calc(var(--u) * .92); }
.slot b { font-family: var(--display); font-weight: 400; font-size: calc(var(--u) * 1.7); line-height: 1; white-space: nowrap; }
.slot small { font-size: calc(var(--u) * 1.15); color: var(--dim); white-space: nowrap; }
.slot .bar { display: block; height: calc(var(--px) * 2); background: rgba(44, 44, 50, .9); }
.slot .bar i { display: block; height: 100%; width: 0; background: var(--mute); }
.slot.ready kbd { outline-color: var(--cyan); color: var(--cyan); }
.slot.ready .bar i { background: var(--cyan); }
.slot.hot b { color: #fff; }
.slot.full .bar i { background: var(--ink); }
#slot-bow .bar i { background: var(--cyan); }
#slot-melee .bar { visibility: hidden; }
.slot.empty b, .slot.empty small { color: var(--note); }
.slot.deny { animation: deny .2s steps(4); }
.slot.deny kbd { outline-color: var(--ink); color: var(--ink); }
@keyframes deny { 0%, 100% { transform: none; } 25% { transform: translateX(calc(var(--px) * 2)); } 75% { transform: translateX(calc(var(--px) * -2)); } }
#slot-ult .bar i { background: var(--gold-dk); }
#slot-ult.ready kbd { outline-color: var(--gold); color: var(--gold); }
#slot-ult.ready b { color: var(--gold); }
#slot-ult.ready .bar i { background: var(--gold); }

/* combo counter: only while a chain is alive */
#combo { position: absolute; right: calc(var(--u) * 2.4); top: 40%; display: flex; align-items: baseline; gap: calc(var(--u) * .6); opacity: 0; transition: opacity .25s; text-shadow: 0 var(--px) 0 #000, var(--px) 0 0 #000, 0 0 calc(var(--px) * 3) #000; }
#combo.show { opacity: 1; }
#combo b { font-family: var(--display); font-weight: 400; font-size: calc(var(--u) * 5); line-height: 1; font-variant-numeric: tabular-nums; }
#combo span { font-family: var(--display); font-size: calc(var(--u) * 1.9); color: var(--dim); }
#combo i { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * -.5); height: calc(var(--px) * 2); background: var(--ink); transform-origin: left; }
#combo.hot b { color: var(--gold); }
#combo.hot i { background: var(--gold); }
#combo.bump b { animation: bump .16s ease-out; }
@keyframes bump { from { transform: scale(1.35); } to { transform: scale(1); } }

/* the first line is the title; a second line (after a line break in the text) is a caption under it */
#banner { position: absolute; left: 0; right: 0; top: 20%; text-align: center; white-space: pre-line; line-height: 1.6; font-family: var(--display); font-size: calc(var(--u) * 1.9); letter-spacing: .3em; margin-right: -.3em; text-shadow: 0 calc(var(--px) * 2) 0 #000; opacity: 0; transition: opacity .6s; }
#banner::first-line { font-size: calc(var(--u) * 5); line-height: 1.25; }
#banner.show { opacity: 1; }
#hint { position: absolute; left: 51%; top: calc(var(--u) * 2); transform: translateX(-50%); width: max-content; max-width: 36%; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; padding: calc(var(--u) * .7) calc(var(--u) * 1.4); background: rgba(5, 5, 6, .86); outline: var(--px) solid var(--line); color: var(--ink); font-size: calc(var(--u) * 1.35); line-height: 1.5; text-align: center; opacity: 0; transition: opacity .35s; }
#hint.show { opacity: 1; }
#app.menu #banner, #app.menu #hint { visibility: hidden; }

/* ---------- menus ---------- */
.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.8); padding: calc(var(--u) * 3) calc(var(--u) * 4); background: rgba(4, 4, 5, .88); text-align: center; }
.screen.show { display: flex; }
.screen h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: calc(var(--u) * 3.75); line-height: 1.1; letter-spacing: .3em; margin-right: -.3em; text-wrap: balance; }
.screen h2.big { font-size: calc(var(--u) * 7.5); letter-spacing: .2em; margin-right: -.2em; }
.screen h2.lose { color: var(--red); }
.screen h2.win { color: var(--gold); }
.sub { margin: 0; color: var(--dim); font-size: calc(var(--u) * 1.5); }
.fine { margin: 0; color: var(--note); font-size: calc(var(--u) * 1.25); }

#s-title { align-items: flex-start; justify-content: flex-start; gap: calc(var(--u) * 1.1); padding: calc(var(--u) * 4.4) calc(var(--u) * 6); text-align: left; background: #050506 url('../assets/title.png') center / 100% 100% no-repeat; image-rendering: pixelated; }
#s-title h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: calc(var(--u) * 15); line-height: 1; letter-spacing: .06em; text-shadow: 0 calc(var(--px) * 3) 0 #000; }
#s-title .latin { margin: 0; font-family: var(--display); font-size: calc(var(--u) * 2.5); line-height: 1; letter-spacing: .62em; color: var(--dim); }
#s-title .tag { margin: 0; color: var(--dim); font-size: calc(var(--u) * 1.5); letter-spacing: .14em; }
#s-title .foot { position: absolute; left: calc(var(--u) * 6); right: calc(var(--u) * 6); bottom: calc(var(--u) * 2.4); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); }
#title-best { color: var(--note); font-size: calc(var(--u) * 1.25); letter-spacing: .08em; }
.touch-note { display: none; margin: 0; color: var(--dim); font-size: calc(var(--u) * 1.4); }

.btn { font-family: var(--display); font-size: calc(var(--u) * 2.5); line-height: 1.1; letter-spacing: .16em; color: #050506; background: var(--ink); border: 0; padding: calc(var(--u) * .7) calc(var(--u) * 1.5) calc(var(--u) * .8) calc(var(--u) * 1.7); cursor: pointer; display: inline-flex; align-items: center; gap: calc(var(--u) * 1); }
.btn kbd { font-size: calc(var(--u) * 1); letter-spacing: .06em; padding: calc(var(--u) * .1) calc(var(--u) * .5); outline: var(--px) solid currentColor; opacity: .75; }
.btn:hover { background: #fff; }
.btn.ghost { background: transparent; color: var(--ink); outline: var(--px) solid var(--mute); }
.btn.ghost:hover { outline-color: var(--ink); }
.btn.gold { background: var(--gold); }
.btn:focus-visible, .card:focus-visible { outline: calc(var(--px) * 2) solid var(--cyan); outline-offset: calc(var(--px) * 2); }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 1.2); }
.btn.armed, .btn.armed:hover { color: var(--red); outline-color: var(--red); }      /* 重新开始 / 返回标题 waiting for the second press */
.btn-row.opts { margin-top: calc(var(--u) * -.8); }
.btn-row.opts .btn { font-size: calc(var(--u) * 1.9); }
#pause-note { min-height: 1.4em; margin-top: calc(var(--u) * -1); color: var(--red); }

.cards { display: flex; justify-content: center; align-items: stretch; gap: calc(var(--u) * 1.6); }
.card { position: relative; width: calc(var(--u) * 27); min-height: calc(var(--u) * 19); display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * .9); padding: calc(var(--u) * 1.6); text-align: left; font: inherit; color: var(--ink); background: var(--panel); border: 0; outline: var(--px) solid var(--line); cursor: pointer; transition: transform .12s; }
.cards:has(> :nth-child(4)) .card { width: calc(var(--u) * 21.6); }
.card.sel { outline-color: var(--ink); transform: translateY(calc(var(--u) * -.7)); }
.card .key { position: absolute; right: calc(var(--u) * 1.2); top: calc(var(--u) * 1.2); padding: 0 calc(var(--u) * .6); outline: var(--px) solid var(--mute); color: var(--dim); font-family: var(--mono); font-size: calc(var(--u) * 1.2); }
.card.sel .key { color: var(--ink); outline-color: var(--ink); }
.card .role { color: var(--note); font-size: calc(var(--u) * 1.2); letter-spacing: .4em; }
.card .name { font-family: var(--display); font-size: calc(var(--u) * 5); line-height: 1; letter-spacing: .06em; padding-right: calc(var(--u) * 3); }
.card.perk .name { font-size: calc(var(--u) * 3.75); }
.card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(var(--u) * .5); color: var(--dim); font-size: calc(var(--u) * 1.4); line-height: 1.45; }
.card li.crit { color: var(--gold); }
.card li.skill { color: var(--cyan); }
.card li.ult { color: var(--ink); }
#kit-cards:has(> :nth-child(4)) { gap: calc(var(--u) * 1); }
#kit-cards:has(> :nth-child(4)) .card { width: calc(var(--u) * 21.8); padding: calc(var(--u) * 1.2); }
#kit-cards:has(> :nth-child(4)) .name { font-size: calc(var(--u) * 3.6); }
#kit-cards:has(> :nth-child(4)) ul { font-size: calc(var(--u) * 1.25); }
#kit-cards:has(> :nth-child(5)) .card { width: calc(var(--u) * 17.2); }
#kit-cards:has(> :nth-child(6)) .card { width: calc(var(--u) * 14.3); padding: calc(var(--u) * .9); gap: calc(var(--u) * .6); }
#kit-cards:has(> :nth-child(6)) .name { font-size: calc(var(--u) * 2.8); }
#kit-cards:has(> :nth-child(6)) ul { font-size: calc(var(--u) * 1.15); line-height: 1.35; }
#kit-cards:has(> :nth-child(7)) { display: grid; grid-template-columns: repeat(4, calc(var(--u) * 21.8)); gap: calc(var(--u) * .8); }
#kit-cards:has(> :nth-child(7)) .card { width: auto; min-height: 0; gap: calc(var(--u) * .4); }
#kit-cards:has(> :nth-child(7)) .name { font-size: calc(var(--u) * 2.6); }
#kit-cards:has(> :nth-child(7)) .role { font-size: calc(var(--u) * 1); }
#kit-cards:has(> :nth-child(7)) ul { font-size: calc(var(--u) * 1.1); gap: calc(var(--u) * .2); line-height: 1.3; }
.card.skill { outline-color: #1f7a74; }
.card.skill .role { color: var(--cyan); }
.card.skill.sel { outline-color: var(--cyan); }
.chip.skill { outline-color: #1f7a74; color: var(--cyan); }
#pause-build .row b.skill { color: var(--cyan); }
.card .tags { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5); }
.card .tags i { font-style: normal; font-size: calc(var(--u) * 1.1); letter-spacing: .1em; color: var(--note); outline: var(--px) solid var(--line); padding: calc(var(--u) * .1) calc(var(--u) * .55); }
.card .tags i.on { color: var(--cyan); outline-color: var(--cyan); }
.card .desc { font-size: calc(var(--u) * 1.4); line-height: 1.6; }
.card .syn { margin-top: auto; color: var(--cyan); font-size: calc(var(--u) * 1.2); }
.card.evo { outline-color: #1f7a74; }
.card.evo .role { color: var(--cyan); }
.card.evo.sel { outline-color: var(--cyan); }
#meta-cards { flex-wrap: wrap; max-width: 96%; gap: calc(var(--u) * 1); }
#meta-cards .card { width: calc(var(--u) * 21.5); min-height: calc(var(--u) * 11.5); padding: calc(var(--u) * 1.1); gap: calc(var(--u) * .5); }
#meta-cards .card .name { font-size: calc(var(--u) * 2.6); }
#meta-cards .card .desc { font-size: calc(var(--u) * 1.2); line-height: 1.45; }
#meta-cards .card .cost { margin-top: auto; color: var(--gold); font-family: var(--display); font-size: calc(var(--u) * 1.5); }
#meta-cards .card.own { opacity: .55; }
#meta-cards .card.own .cost { color: var(--cyan); }
#meta-cards .card.poor .cost { color: var(--note); }
#meta-cards:has(> :nth-child(9)) { display: grid; grid-template-columns: repeat(4, calc(var(--u) * 21.5)); }
#meta-cards:has(> :nth-child(9)) .card { width: auto; min-height: calc(var(--u) * 8.2); padding: calc(var(--u) * .8); gap: calc(var(--u) * .3); }
#meta-cards:has(> :nth-child(9)) .name { font-size: calc(var(--u) * 2); }
#meta-cards:has(> :nth-child(9)) .desc { font-size: calc(var(--u) * 1.1); line-height: 1.3; }
#meta-cards:has(> :nth-child(9)) .cost { font-size: calc(var(--u) * 1.3); }
#meta-sub, #end-ash { color: var(--gold); }
.card.rare { outline-color: var(--gold-dk); }
.card.rare .role { color: var(--gold); }
.card.rare.sel { outline-color: var(--gold); }

.build { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * .5); max-width: 80%; }
.keys { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * .8) calc(var(--u) * 2); max-width: 64%; color: var(--dim); font-size: calc(var(--u) * 1.3); }
.keys div { display: flex; align-items: center; gap: calc(var(--u) * .7); }
.keys dt { color: var(--ink); outline: var(--px) solid var(--mute); padding: calc(var(--u) * .1) calc(var(--u) * .6); white-space: nowrap; font-family: var(--mono); font-size: calc(var(--u) * 1.15); }
.keys dd { margin: 0; white-space: nowrap; }

#pause-build { width: min(100%, calc(var(--u) * 80)); max-height: 40%; overflow-y: auto; display: flex; flex-direction: column; gap: calc(var(--u) * .5); text-align: left; font-size: calc(var(--u) * 1.3); }
#pause-build .row { display: grid; grid-template-columns: calc(var(--u) * 10) 1fr; gap: calc(var(--u) * 1.4); align-items: baseline; color: var(--dim); line-height: 1.45; }
#pause-build .row b { font-family: var(--display); font-weight: 400; font-size: calc(var(--u) * 1.9); color: var(--ink); }
#pause-build .row b.rare { color: var(--gold); }
#pause-build .row.dim { display: block; text-align: center; }

#end-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 3.6); }
#end-stats div { display: flex; flex-direction: column; gap: calc(var(--u) * .4); }
#end-stats small { color: var(--note); font-size: calc(var(--u) * 1.2); letter-spacing: .3em; margin-right: -.3em; }
#end-stats b { font-family: var(--display); font-weight: 400; font-size: calc(var(--u) * 3.75); line-height: 1; font-variant-numeric: tabular-nums; }

/* Run records stay within the frame; long lists scroll inside their own panel. */
#s-title .foot { align-items: flex-end; }
.title-actions { max-width: 72%; display: flex; flex-direction: column; gap: calc(var(--u) * .8); }
.title-actions .btn-row { justify-content: flex-start; gap: calc(var(--u) * .8); }
.title-actions .btn { font-size: calc(var(--u) * 2); }
#title-continue, #title-note { line-height: 1.4; }
#title-best { max-width: 25%; text-align: right; }
#kit-depth { width: 94%; }
.kit-head { width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.2); }
#kit-depth .btn-row { align-items: center; }
#kit-depth .btn { padding: calc(var(--u) * .3) calc(var(--u) * .8); font-family: var(--mono); font-size: calc(var(--u) * 1.6); }
.btn:disabled { opacity: .35; cursor: default; }
#depth-name { font-size: calc(var(--u) * 1.5); }
#depth-note { margin-top: calc(var(--u) * .6); font-size: calc(var(--u) * 1.15); line-height: 1.5; }
#s-kit:has(#kit-depth:not([hidden])) { gap: calc(var(--u) * 1.2); }
#slot-cards .name { font-size: calc(var(--u) * 3); padding-right: 0; }
#s-records { gap: calc(var(--u) * 1); padding-block: calc(var(--u) * 2.2); }
#s-records .btn { font-size: calc(var(--u) * 1.8); }
#records-tabs .active { color: var(--ink); outline-color: var(--ink); background: var(--shade); }
#records-body { width: 94%; flex: 1; min-height: 0; overflow-y: auto; text-align: left; padding: calc(var(--u) * .5) calc(var(--u) * 1); border-block: var(--px) solid var(--line); }
#records-body h3 { margin: calc(var(--u) * 1) 0 calc(var(--u) * .5); font-family: var(--display); font-weight: 400; font-size: calc(var(--u) * 1.9); }
.record-row { display: grid; grid-template-columns: calc(var(--u) * 18) 1fr; gap: calc(var(--u) * 1); padding-block: calc(var(--u) * .6); font-size: calc(var(--u) * 1.3); line-height: 1.5; color: var(--dim); }
.record-row b { font-weight: 400; color: var(--ink); }
.record-run { padding-block: calc(var(--u) * .6); border-bottom: var(--px) solid var(--line); }
.record-run .record-row { grid-template-columns: calc(var(--u) * 22) 1fr; }
.record-run .fine { font-size: calc(var(--u) * 1.15); line-height: 1.5; margin-block: calc(var(--u) * .3); }
.record-chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5); padding-block: calc(var(--u) * .4); }
.win, .record-run.win b { color: var(--gold); }
.record-run.lose b { color: var(--red); }
.record-run.dim b { color: var(--note); }
#save-editor { display: flex; align-items: center; gap: calc(var(--u) * 1); width: 94%; font-size: calc(var(--u) * 1.3); }
#save-text { flex: 1; min-width: 0; resize: none; color: var(--ink); background: var(--panel); border: var(--px) solid var(--mute); font: calc(var(--u) * 1.3) var(--mono); }
#save-text:focus-visible { outline: var(--px) solid var(--ink); }
#s-end { gap: calc(var(--u) * 1.3); }
#end-note { font-size: calc(var(--u) * 1.3); max-width: 92%; line-height: 1.5; }
#end-build { max-height: calc(var(--u) * 8); overflow-y: auto; flex-shrink: 1; padding: var(--px); }
#s-end .btn { font-size: calc(var(--u) * 2); }

/* ================================================================== v6: one block per module.
   Add rules only inside your own block, directly under its heading; never below the next heading. */

/* ---------- [ext] toasts, tabs, shared menu pieces ---------- */
#toasts { position: absolute; left: 50%; top: calc(var(--u) * 21); transform: translateX(-50%); max-width: 60%; padding: calc(var(--u) * .5) calc(var(--u) * 1); background: var(--void); outline: var(--px) solid var(--mute); color: var(--ink); font-family: var(--display); font-size: calc(var(--u) * 1.4); text-align: center; pointer-events: none; }
#toasts:empty, #toasts[hidden], .menu #toasts { display: none; }
#toasts.gold { color: var(--gold); outline-color: var(--gold-dk); }
.btn.tab { font-size: calc(var(--u) * 1.8); }
.tab.active { color: var(--ink); outline-color: var(--ink); background: var(--shade); }
#s-kit:has(#kit-cards > :nth-child(7)) { gap: calc(var(--u) * .6); }


/* ---------- [kit] class meter in the HUD ---------- */
#s-kit:has(#kit-cards > :nth-child(7)) { gap: calc(var(--u) * .8); }
#kit-meter { display: flex; align-items: center; gap: calc(var(--u) * .5); margin-top: calc(var(--u) * .55); font-size: calc(var(--u) * 1.05); color: var(--cyan); }
#kit-meter[hidden], #slot-bow[hidden] { display: none; }
#kit-meter .bar { width: calc(var(--u) * 10); height: var(--px); background: var(--panel); outline: var(--px) solid var(--mute); }
#kit-meter-fill { display: block; height: 100%; background: var(--cyan); }
#kit-meter-note { color: var(--dim); font-size: inherit; }
#kit-meter.hot { color: var(--gold); }
#kit-meter.hot #kit-meter-fill { background: var(--gold); }


/* ---------- [meta] class offer, kindling tree, pledges, mastery ---------- */
#s-kit { gap: calc(var(--u) * 1); }
#kit-cards { width: 90%; }
#kit-cards .card { width: calc(var(--u) * 34); min-height: 0; gap: calc(var(--u) * .6); padding: calc(var(--u) * 1.3); }
#kit-cards:has(> :nth-child(3)) .card { width: calc(var(--u) * 28); }
#kit-cards .name { font-size: calc(var(--u) * 3.8); }
#kit-cards ul { font-size: calc(var(--u) * 1.25); line-height: 1.45; }
#kit-actions .btn, #meta-tabs .btn { font-size: calc(var(--u) * 1.6); letter-spacing: .08em; }
#kit-actions .btn:disabled { cursor: default; color: var(--note); outline-color: var(--line); }
.meta-flags { color: var(--gold); font-family: var(--display); font-size: calc(var(--u) * 1.25); }
.meta-mastery, #end-mastery { display: flex; flex-direction: column; width: 100%; gap: calc(var(--u) * .3); }
.meta-level { font-family: var(--display); font-size: calc(var(--u) * 1.35); color: var(--ink); }
.meta-next { color: var(--dim); font-size: calc(var(--u) * 1.15); }
.meta-bar { width: 100%; height: calc(var(--px) * 3); appearance: none; border: 0; background: var(--line); color: var(--cyan); }
.meta-bar::-webkit-progress-bar { background: var(--line); }
.meta-bar::-webkit-progress-value { background: var(--cyan); }
#s-meta { gap: calc(var(--u) * 1.2); }
#meta-tabs .active { color: var(--gold); outline-color: var(--gold); }
#meta-cards, #meta-cards:has(> :nth-child(9)) { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: max-content; align-content: start; width: 94%; max-height: calc(var(--u) * 30); overflow-y: auto; padding: calc(var(--u) * .8); align-items: stretch; gap: calc(var(--u) * 1); }
#meta-cards .card, #meta-cards:has(> :nth-child(9)) .card { width: auto; min-height: calc(var(--u) * 10); gap: calc(var(--u) * .5); padding: calc(var(--u) * 1); }
#meta-cards .card.sel { transform: none; }
#meta-cards .card > * { flex-shrink: 0; }
#meta-cards .card.own { opacity: 1; }
#meta-cards .card .name { font-size: calc(var(--u) * 2.2); padding: 0; }
#meta-cards .card .cost { font-size: calc(var(--u) * 1.15); line-height: 1.5; }
#meta-cards .meta-gate, #meta-cards .meta-progress { color: var(--note); font-size: calc(var(--u) * 1.1); line-height: 1.5; }
#title-status { color: var(--gold); font-size: calc(var(--u) * 1.3); }
#end-mastery { width: 76%; text-align: left; }
.meta-grid { width: 100%; border-collapse: collapse; font-size: calc(var(--u) * 1.2); text-align: center; }
.meta-grid th, .meta-grid td { border: var(--px) solid var(--line); padding: calc(var(--u) * .7); }
.meta-grid th { color: var(--dim); font-weight: 400; }
.meta-grid .won { color: var(--gold); }
.meta-grid td { position: relative; }
.meta-grid td:hover::after, .meta-grid td:focus::after { content: attr(data-count); position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); padding: calc(var(--u) * .5); background: var(--panel); outline: var(--px) solid var(--mute); white-space: nowrap; z-index: 1; }
.meta-grid td:focus { outline: var(--px) solid var(--cyan); }
@media (max-width: 700px) {
  #s-kit, #s-meta { gap: 16px; }
  #kit-cards { width: 100%; }
  #kit-cards .card, #kit-cards:has(> :nth-child(3)) .card { width: min(100%, 380px); padding: 18px; gap: 8px; }
  #kit-cards .name { font-size: 30px; }
  #kit-cards ul, .meta-next { font-size: 13px; }
  #meta-cards, #meta-cards:has(> :nth-child(9)) { grid-template-columns: 1fr; max-height: none; overflow: visible; width: 100%; }
  #meta-cards .card .name { font-size: 22px; }
  #meta-cards .card { min-height: 100px; }
  #end-mastery { width: 100%; }
}


/* ---------- [ach] archive: achievements, titles, outfits ---------- */
#title-rank { position: absolute; top: calc(var(--u) * 4.5); right: calc(var(--u) * 5); margin: 0; color: var(--gold); font-family: var(--display); font-size: calc(var(--u) * 1.45); white-space: pre-line; text-align: right; line-height: 1.8; max-width: 44%; }
#s-archive { gap: calc(var(--u) * 1); justify-content: flex-start; padding-top: calc(var(--u) * 3); }
#ach-body { width: 100%; min-height: 0; flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: calc(var(--u) * 1); overflow-y: auto; padding: calc(var(--u) * .5); text-align: left; }
#ach-body h3 { grid-column: 1 / -1; color: var(--dim); font-family: var(--display); font-weight: 400; font-size: calc(var(--u) * 1.7); letter-spacing: .3em; margin: calc(var(--u) * .4) 0 0; }
#ach-body .ach-card { width: 100%; min-height: calc(var(--u) * 7.8); gap: calc(var(--u) * .5); padding: calc(var(--u) * 1); }
#ach-body .ach-card.sel { transform: none; outline: calc(var(--px) * 2) solid var(--ink); }
#ach-body .ach-card .name { font-size: calc(var(--u) * 2); line-height: 1.2; padding: 0; }
#ach-body .ach-card .desc { color: var(--dim); font-size: calc(var(--u) * 1.25); line-height: 1.4; }
#ach-body .ach-card .cost { margin-top: auto; font-family: var(--display); font-size: calc(var(--u) * 1.35); color: var(--note); }
#ach-body .ach-card.own .cost, #ach-body .ach-card.own .name { color: var(--gold); }
#ach-body .ach-card.pinned { outline-color: var(--cyan); }
#ach-body .ach-skin { padding-left: calc(var(--u) * 16.8); min-height: calc(var(--u) * 10); position: relative; }
.ach-preview { position: absolute; left: calc(var(--u) * .6); top: calc(var(--u) * .6); width: 144px; height: 80px; max-width: 38%; object-fit: contain; image-rendering: pixelated; }
.ach-gate { color: var(--note); font-size: calc(var(--u) * 1.15); line-height: 1.4; }
#ach-body .poor .cost { color: var(--note); }
#ach-note { flex: none; margin: 0; font-size: calc(var(--u) * 1.2); }
#end-ach { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * .6); flex-wrap: wrap; max-height: calc(var(--u) * 8); overflow-y: auto; width: 100%; }
#end-ach b, #end-ach .ach-rank { width: 100%; margin: 0; color: var(--gold); font-size: calc(var(--u) * 1.35); font-weight: 400; }
@media (max-width: 700px) { #ach-body { flex: none; overflow: visible; grid-template-columns: 1fr; } #ach-body .ach-card { min-height: 90px; } #ach-body .ach-skin { padding-left: 160px; min-height: 110px; } #title-rank { top: 12px; right: 16px; font-size: 13px; } }


/* ---------- [omen] omen sign, stele, floor marks ---------- */
.omen-sigil { width: 18px; height: 18px; image-rendering: pixelated; flex: none; }
#kit-omen { display: flex; align-items: center; gap: 14px; padding: 12px 18px; margin: 0 0 14px; max-width: 760px; border: 1px solid var(--line); background: var(--panel); text-align: left; }
#kit-omen > .omen-sigil { width: 36px; height: 36px; }
#s-kit:has(#kit-omen:not(:empty)) { gap: calc(var(--u) * .8); padding-block: calc(var(--u) * 1.5); }
#s-kit:has(#kit-omen:not(:empty)) #kit-omen { margin-bottom: 0; padding-block: 8px; }
#kit-omen b, #kit-omen span, #kit-omen small { display: block; }
#kit-omen b { font: 16px var(--display); margin-bottom: 5px; }
#kit-omen span { color: var(--dim); font-size: 13px; }
#kit-omen small { color: var(--note); font-size: 12px; margin-top: 5px; line-height: 1.5; }
#s-kit:has(#kit-cards > :nth-child(7)):has(#kit-omen:not(:empty)) { gap: calc(var(--u) * .4); padding-block: calc(var(--u) * .8); }
#s-kit:has(#kit-cards > :nth-child(7)) #kit-omen { padding-block: 4px; }
#s-kit:has(#kit-cards > :nth-child(7)) #kit-omen b { font-size: 14px; margin-bottom: 2px; }
#s-kit:has(#kit-cards > :nth-child(7)) #kit-omen small { margin-top: 2px; line-height: 1.25; }
#omen-sign { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--dim); font: 12px var(--display); }
#omen-pause { padding: 10px 0; color: var(--dim); font-size: 13px; border-top: 1px solid var(--line); }
.omen-counter { display: flex; align-items: center; gap: 7px; color: var(--cyan); font: 12px var(--display); margin-top: 10px; }


/* ---------- [market] ash market, reroll ---------- */
#s-market { gap: calc(var(--u) * 1); }
#market-ash { color: var(--gold); font-family: var(--display); font-size: calc(var(--u) * 2.8); }
#market-trade { max-width: 90%; font-size: calc(var(--u) * 1.3); line-height: 1.6; }
#market-cards { width: 94%; }
#market-cards .card { width: 31%; min-height: calc(var(--u) * 22); gap: calc(var(--u) * .7); }
#market-cards .name { font-size: calc(var(--u) * 3); }
#market-cards .market-cost { margin-top: auto; color: var(--gold); font-family: var(--display); font-size: calc(var(--u) * 1.8); }
#market-cards .market-why { font-size: calc(var(--u) * 1.2); color: var(--dim); }
#market-cards .market-off .market-cost { color: var(--note); }
#market-cards .market-off { background: var(--void); }
#market-note { min-height: calc(var(--u) * 1.5); color: var(--gold); }
#market-leave { font-size: calc(var(--u) * 1.8); }
#reward-extra { flex-wrap: wrap; gap: calc(var(--u) * .6) calc(var(--u) * 1.5); }
#market-reroll { color: var(--gold); font-size: calc(var(--u) * 1.6); }
#market-reroll:disabled { opacity: 1; color: var(--note); cursor: default; outline-color: var(--line); }
.market-reroll-note { color: var(--dim); font-size: calc(var(--u) * 1.2); }
#s-reward:has(#market-reroll) { gap: calc(var(--u) * 1.1); }
@media (max-width: 700px) {
  #s-market { gap: 12px; }
  #market-trade { max-width: 340px; font-size: 13px; }
  #market-cards { width: 100%; gap: 16px; }
  #market-cards .card { width: min(100%, 340px); min-height: 0; padding: 16px; gap: 7px; }
  #market-cards .desc { font-size: 14px; }
  #market-cards .market-cost { margin-top: 8px; }
  #market-note { min-height: 16px; }
  #market-help { font-size: 12px; }
  #reward-extra { width: 100%; flex-direction: column; }
}


/* ================================================================== end of v6 blocks */

/* ---------- [keys] key settings screen ---------- */

/* ---------- end of [keys] ---------- */

/* ---------- small screens: menus leave the 16:9 frame so they stay readable ---------- */
@media (max-width: 700px) {
  body { align-items: flex-start; padding-top: 16px; overflow: auto; }
  .screen { --u: 9.6px; position: fixed; justify-content: flex-start; overflow-y: auto; padding: 24px 16px 32px; }
  .cards { flex-direction: column; align-items: center; width: 100%; }
  .card { width: min(100%, 340px); min-height: 0; }
  .card.sel { transform: none; }
  #s-title { background-size: 100% auto; background-position: top; padding-top: calc(56.25vw + 20px); }
  #s-title h1 { font-size: 30vw; }
  #s-title .foot { position: static; flex-direction: column; align-items: flex-start; }
  .touch-note { display: block; }
  #pause-build .row { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .card, #hud, #banner, #hint, #boss, #combo { transition: none; }
  #combo.bump b, .slot.deny { animation: none; }
}