:root {
  --gold: #d8b46a;
  --gold-dim: #8a7240;
  --ink: #0b0806;
  --hp: #b8231b;
  --hp-hi: #e2483b;
  --sp: #2d6fb8;
  --sp-hi: #5aa2ea;
  --text: #efe6d2;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; color: var(--text); font-family: Inter, system-ui, sans-serif; user-select: none; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.hidden { display: none !important; }

/* ---------- Overlay / loading ---------- */
#overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(30,14,6,0.55) 0%, rgba(0,0,0,0.92) 75%);
  z-index: 20; transition: opacity .8s ease;
}
#overlay.fade { opacity: 0; pointer-events: none; }
#overlay .panel { text-align: center; padding: 0 16px; }
#overlay .title {
  font-family: Cinzel, serif; font-weight: 900; font-size: clamp(42px, 8vw, 96px); letter-spacing: .12em;
  background: linear-gradient(180deg, #fff3d6 0%, #e5bd6b 45%, #8c5a1f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(255,140,40,.35));
}
#overlay .subtitle { font-family: Cinzel, serif; letter-spacing: .4em; text-transform: uppercase; font-size: 13px; color: #c9a970; margin-top: 6px; }
#loadbar { width: min(360px, 80vw); height: 3px; background: rgba(255,255,255,.08); margin: 38px auto 10px; overflow: hidden; }
#loadbar div { height: 100%; width: 0%; background: linear-gradient(90deg, #8c5a1f, #f0c878); transition: width .25s; }
#loadtxt { font-size: 12px; letter-spacing: .2em; color: #a89574; text-transform: uppercase; }
#start, #again, #start-ascent, #continue-ascent {
  margin-top: 34px; font-family: Cinzel, serif; font-weight: 700; font-size: 18px; letter-spacing: .25em;
  color: #f7e4b8; background: linear-gradient(180deg, rgba(60,30,10,.85), rgba(25,12,4,.9));
  border: 1px solid var(--gold-dim); padding: 14px 38px; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), inset 0 0 18px rgba(216,180,106,.15), 0 0 30px rgba(255,120,30,.15);
  transition: all .2s;
}
#start:hover, #again:hover, #start-ascent:hover, #continue-ascent:hover { color: #fff; border-color: var(--gold); box-shadow: 0 0 0 1px rgba(0,0,0,.6), inset 0 0 24px rgba(216,180,106,.3), 0 0 40px rgba(255,140,40,.35); }
.controls-mini { margin-top: 26px; font-size: 12px; color: #8d7d63; letter-spacing: .08em; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.bar { position: relative; height: 12px; background: rgba(8,6,5,.75); border: 1px solid rgba(216,180,106,.45); box-shadow: 0 0 0 1px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.6); overflow: hidden; }
.bar .fill, .bar .lag { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left; }
.bar .lag { background: rgba(255,235,200,.85); transition: none; }
.bar .txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-shadow: 0 1px 2px #000; }

#boss { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); width: min(620px, 80vw); text-align: center; }
.boss-name { margin-bottom: 6px; font-family: Cinzel, serif; text-shadow: 0 2px 6px #000; }
.boss-title { font-size: 20px; font-weight: 700; letter-spacing: .14em; color: #f3dfb1; }
.boss-sub { font-size: 12px; margin-left: 12px; color: #b2885a; letter-spacing: .3em; text-transform: uppercase; }
.boss-bar { height: 10px; }
.boss-bar .fill { background: linear-gradient(180deg, #e14b37 0%, #a3170f 55%, #6d0b06 100%); }
.boss-bar .phase-mark { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(255,220,160,.7); }
.posture-bar { position: relative; height: 6px; width: 70%; margin: 5px auto 0; background: rgba(8,6,5,.8); border: 1px solid rgba(216,180,106,.45); box-shadow: 0 0 0 1px rgba(0,0,0,.8); overflow: hidden; }
.posture-bar .fill { position: absolute; inset: 0; transform-origin: center; transform: scaleX(0); background: linear-gradient(90deg, #c98a2b, #ffe39a, #c98a2b); box-shadow: 0 0 8px rgba(255,200,90,.6); }
.posture-bar.hot .fill { background: linear-gradient(90deg, #ff7a2a, #fff3c4, #ff7a2a); }
.posture-bar.broken .fill { background: #fff6dc; animation: pulse .35s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .55; } to { opacity: 1; } }
.hp-bar .rally { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(180deg, #ffb35a, #c46a1a); opacity: .85; }
#callout { position: absolute; left: 50%; top: 31%; transform: translate(-50%, -50%) scale(.9); font-family: Cinzel, serif; font-weight: 900; font-size: 30px; letter-spacing: .32em; white-space: nowrap; opacity: 0; color: #fff3d6; text-shadow: 0 0 18px rgba(255,170,60,.85), 0 3px 6px #000; transition: opacity .25s, transform .25s; }
#callout.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#callout.parry { color: #f2f6ff; text-shadow: 0 0 20px rgba(150,190,255,.95), 0 3px 6px #000; }
#callout.grace { color: #d8fff0; text-shadow: 0 0 18px rgba(80,255,190,.75), 0 3px 6px #000; font-size: 24px; }
#callout.break { color: #ffe08a; text-shadow: 0 0 22px rgba(255,120,30,.95), 0 3px 6px #000; }
#prompt { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); padding: 5px 12px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #fff1cf; background: rgba(20,12,6,.75); border: 1px solid rgba(255,214,140,.7); box-shadow: 0 0 18px rgba(255,160,60,.5); white-space: nowrap; }
#prompt b { color: #ffd27a; margin-right: 6px; }
.dmg.heal { color: #ffc070; text-shadow: 0 0 10px rgba(255,140,40,.8), 0 2px 3px #000; }
.boss-cc { height: 22px; margin-top: 6px; font-family: Cinzel, serif; font-weight: 700; letter-spacing: .3em; font-size: 14px; color: #ffd27a; text-shadow: 0 0 10px rgba(255,150,40,.8), 0 2px 4px #000; opacity: 0; transition: opacity .2s; }
.boss-cc.on { opacity: 1; }

#player { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pbars { display: flex; flex-direction: column; gap: 4px; width: min(440px, 70vw); }
.hp-bar { height: 14px; }
.hp-bar .fill { background: linear-gradient(180deg, var(--hp-hi) 0%, var(--hp) 55%, #620d08 100%); }
.sp-bar { height: 8px; }
.sp-bar .fill { background: linear-gradient(180deg, var(--sp-hi) 0%, var(--sp) 60%, #143a66 100%); }

#skills { display: flex; gap: 6px; }
.slot { position: relative; width: 52px; height: 52px; border: 1px solid rgba(216,180,106,.5); background: radial-gradient(circle at 50% 35%, rgba(70,48,26,.9), rgba(12,9,6,.95)); box-shadow: 0 0 0 1px #000, inset 0 0 10px rgba(0,0,0,.8); overflow: hidden; }
.slot svg { position: absolute; inset: 8px; width: 34px; height: 34px; opacity: .9; }
.slot .key { position: absolute; left: 3px; top: 1px; font-size: 10px; font-weight: 600; color: #f0dcb0; text-shadow: 0 1px 2px #000; }
.slot .cd { position: absolute; inset: 0; background: conic-gradient(rgba(0,0,0,.75) var(--p, 0%), transparent 0); }
.slot .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; text-shadow: 0 1px 3px #000; }
.slot.active { border-color: #ffe2a0; box-shadow: 0 0 0 1px #000, 0 0 14px rgba(255,200,100,.6); }
.slot.nosp svg { opacity: .3; }

#combo { position: absolute; right: 9vw; top: 40%; text-align: right; opacity: 0; transition: opacity .3s; font-family: Cinzel, serif; }
#combo.on { opacity: 1; }
#combo .num { display: block; font-size: 58px; font-weight: 900; line-height: 1; color: #fff1cf; text-shadow: 0 0 18px rgba(255,150,50,.6), 0 3px 6px #000; }
#combo .lbl { font-size: 14px; letter-spacing: .5em; color: #d6ae68; }
#combo.pop .num { animation: pop .18s ease-out; }
@keyframes pop { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }

#skillname { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); font-family: Cinzel, serif; font-size: 17px; letter-spacing: .3em; color: #f5dfac; text-shadow: 0 0 12px rgba(255,150,50,.55), 0 2px 4px #000; opacity: 0; transition: opacity .25s; white-space: nowrap; }
#skillname.on { opacity: 1; }

#floaters { position: absolute; inset: 0; overflow: hidden; }
.dmg { position: absolute; font-family: Cinzel, serif; font-weight: 900; color: #fff; text-shadow: 0 0 6px rgba(0,0,0,.9), 0 2px 3px #000; white-space: nowrap; transform: translate(-50%, -50%); will-change: transform, opacity; }
.dmg.crit { color: #ffcf5a; text-shadow: 0 0 12px rgba(255,120,20,.9), 0 2px 3px #000; }
.dmg.taken { color: #ff6a55; }
.dmg.cc { font-size: 15px; letter-spacing: .25em; color: #9fe0ff; text-shadow: 0 0 10px rgba(60,160,255,.9), 0 2px 3px #000; }
.dmg.block { font-size: 15px; letter-spacing: .25em; color: #d8d8d8; }

#hint { position: absolute; left: 18px; top: 16px; font-size: 11px; letter-spacing: .08em; color: rgba(240,225,190,.55); text-shadow: 0 1px 2px #000; }
#hint b { color: rgba(255,225,160,.85); font-weight: 600; }
#fps { position: absolute; right: 14px; top: 14px; font-size: 11px; color: rgba(240,225,190,.45); font-variant-numeric: tabular-nums; }

#help { position: absolute; left: 18px; top: 40px; padding: 16px 18px; background: rgba(10,7,5,.82); border: 1px solid rgba(216,180,106,.35); max-width: 340px; font-size: 12px; }
#help h3 { font-family: Cinzel, serif; color: var(--gold); letter-spacing: .2em; margin-bottom: 8px; font-size: 14px; }
#help td { padding: 3px 14px 3px 0; vertical-align: top; }
#help td:first-child { color: #f3d79b; font-weight: 600; white-space: nowrap; }
#help p { margin-top: 10px; color: #a9977a; line-height: 1.5; }

#end { position: fixed; inset: 0; z-index: 15; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(0,0,0,.15), rgba(0,0,0,.75)); animation: fadein 1.2s ease; }
.end-title { font-family: Cinzel, serif; font-weight: 900; font-size: clamp(48px, 9vw, 110px); letter-spacing: .15em; }
.end-title.win { background: linear-gradient(180deg, #fff6dc, #e4b660 50%, #8d5c1c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(255,170,60,.45)); }
.end-title.lose { color: #9b1a12; text-shadow: 0 0 30px rgba(180,20,10,.6); }
.end-sub { font-family: Cinzel, serif; letter-spacing: .35em; color: #bba27a; margin-top: 8px; font-size: 13px; text-transform: uppercase; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

#flash { position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(160,0,0,.55) 100%); }

@media (max-width: 700px) {
  .slot { width: 40px; height: 40px; }
  .slot svg { inset: 6px; width: 26px; height: 26px; }
  #skillname { bottom: 130px; font-size: 13px; }
}

/* ---------- Difficulty slider ---------- */
.difficulty { width: min(440px, 86vw); margin: 30px auto 0; text-align: center; }
.diff-head { font-family: Cinzel, serif; letter-spacing: .25em; font-size: 12px; color: #a89574; text-transform: uppercase; }
.diff-name { margin-left: 10px; font-size: 16px; font-weight: 700; letter-spacing: .2em; color: #f2d9a0; text-shadow: 0 0 12px rgba(255,150,50,.35); }
.diff-name[data-tier="3"] { color: #ffb36b; }
.diff-name[data-tier="4"] { color: #ff6b4a; text-shadow: 0 0 14px rgba(255,60,20,.6); }
.diff-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 12px 0 4px; background: transparent; cursor: pointer; }
.diff-range:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.diff-range::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, #3d6a3a, #8a7240 45%, #9a4a1c 75%, #a1150c); border: 1px solid rgba(0,0,0,.6); }
.diff-range::-moz-range-track { height: 4px; background: linear-gradient(90deg, #3d6a3a, #8a7240 45%, #9a4a1c 75%, #a1150c); border: 1px solid rgba(0,0,0,.6); }
.diff-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7px; transform: rotate(45deg); background: linear-gradient(135deg, #fff2cf, #c8984a); border: 1px solid #3a2410; box-shadow: 0 0 10px rgba(255,170,60,.6); }
.diff-range::-moz-range-thumb { width: 14px; height: 14px; transform: rotate(45deg); border-radius: 0; background: linear-gradient(135deg, #fff2cf, #c8984a); border: 1px solid #3a2410; box-shadow: 0 0 10px rgba(255,170,60,.6); }
.diff-ticks { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .12em; color: #7d6c52; text-transform: uppercase; }
.diff-blurb { min-height: 32px; margin-top: 10px; font-size: 12px; line-height: 1.45; color: #b9a585; }
#end .difficulty { margin-top: 26px; }

/* lock-on marker */
#reticle { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255,214,140,.9); transform: rotate(45deg); box-shadow: 0 0 10px rgba(255,150,50,.7); pointer-events: none; }
#reticle::after { content: ''; position: absolute; inset: 5px; background: rgba(255,220,150,.9); }

/* ---------- weapon picker ---------- */
.weapons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 22px auto 0; width: min(760px, 92vw); }
.weapon { flex: 1; min-width: 0; padding: 10px 12px 9px; text-align: left; cursor: pointer; font: inherit; color: #d9c49a; background: linear-gradient(180deg, rgba(40,28,16,.85), rgba(14,10,7,.9)); border: 1px solid rgba(216,180,106,.3); box-shadow: 0 0 0 1px rgba(0,0,0,.6); transition: border-color .15s, box-shadow .15s, color .15s; }
.weapon:hover { border-color: rgba(216,180,106,.7); color: #f3e0b6; }
.weapon:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.weapon[aria-checked="true"] { border-color: #e8c27a; color: #fff1cf; box-shadow: 0 0 0 1px #000, 0 0 18px rgba(255,170,60,.35), inset 0 0 18px rgba(216,180,106,.18); }
.weapon .w-name { display: block; font-family: Cinzel, serif; font-weight: 700; font-size: 14px; letter-spacing: .12em; }
.weapon .w-traits { display: block; margin-top: 4px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #a8916a; }
.weapon-blurb { width: min(520px, 92vw); margin: 8px auto 0; min-height: 18px; font-size: 12px; color: #b9a585; text-align: center; }
@media (max-width: 700px) { .weapons { grid-template-columns: repeat(2, 1fr); } }

/* ---------- the Ascent ---------- */
#ascent { position: fixed; inset: 0; z-index: 18; overflow-y: auto; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 40px; background: radial-gradient(ellipse at center, rgba(10,6,3,.55), rgba(0,0,0,.88)); animation: fadein .5s ease; }
#ascent.hidden { display: none; }
.asc-panel { width: min(980px, 100%); }
.asc-panel.narrow { width: min(760px, 100%); text-align: center; }
.asc-kicker { font-family: Cinzel, serif; font-size: 12px; letter-spacing: .5em; text-transform: uppercase; color: #a88c5c; }
.asc-title { font-family: Cinzel, serif; font-weight: 900; font-size: clamp(26px, 4.4vw, 40px); letter-spacing: .08em; color: #f3dfb1; text-shadow: 0 0 22px rgba(255,140,40,.35), 0 3px 6px #000; margin: 4px 0 18px; }
.asc-title.big { font-size: clamp(32px, 6vw, 58px); }
.asc-title .arrow { color: #c98a2b; }
.asc-title.win { color: #ffe39a; }
.asc-title.lose { color: #e7b7a6; }
.asc-sub { color: #c9b28a; font-size: 14px; margin: -8px 0 14px; }
.asc-grid { display: grid; grid-template-columns: 240px 1fr; gap: 26px; align-items: start; }
@media (max-width: 760px) { .asc-grid { grid-template-columns: 1fr; } }
.asc-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tier { position: relative; padding: 10px 12px; border: 1px solid rgba(216,180,106,.18); background: rgba(16,11,7,.75); color: #8d7d63; }
.tier .t-name { display: block; font-family: Cinzel, serif; font-size: 13px; letter-spacing: .1em; color: inherit; }
.tier .t-ranks { display: block; font-size: 11px; letter-spacing: .1em; margin-top: 2px; }
.tier.done { color: #6f6250; text-decoration: line-through; text-decoration-color: rgba(200,160,100,.35); }
.tier.here { color: #f3e0b6; border-color: #e8c27a; box-shadow: 0 0 18px rgba(255,170,60,.25), inset 0 0 18px rgba(216,180,106,.12); }
.tier .t-you { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 600; color: #ffd27a; }
.asc-status { display: flex; align-items: center; gap: 18px; padding: 12px 14px; border: 1px solid rgba(216,180,106,.25); background: rgba(16,11,7,.75); }
.st-rank { font-family: Cinzel, serif; font-weight: 900; font-size: 40px; color: #fff1cf; text-shadow: 0 0 16px rgba(255,150,50,.45); min-width: 100px; }
.st-bars { flex: 1; min-width: 0; }
.st-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #b89f74; margin: 2px 0; }
.st-hp { height: 8px; background: rgba(0,0,0,.6); border: 1px solid rgba(216,180,106,.35); margin-bottom: 6px; }
.st-hp div { height: 100%; background: linear-gradient(180deg, var(--hp-hi), var(--hp)); }
.asc-boons { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; justify-content: inherit; }
.asc-panel.narrow .asc-boons { justify-content: center; }
.chip { padding: 3px 8px; font-size: 11px; letter-spacing: .06em; color: #f0e2c4; border: 1px solid var(--fam); background: color-mix(in srgb, var(--fam) 14%, rgba(10,7,4,.85)); }
.asc-none { font-size: 12px; color: #7d6c52; }
.asc-pick { font-family: Cinzel, serif; font-size: 12px; letter-spacing: .35em; text-transform: uppercase; color: #c9a970; margin: 18px 0 10px; }
.asc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px 16px; cursor: pointer; font: inherit; color: #e8d6b0; background: linear-gradient(180deg, rgba(40,28,16,.92), rgba(14,10,7,.95)); border: 1px solid rgba(216,180,106,.35); box-shadow: 0 0 0 1px rgba(0,0,0,.6); transition: transform .15s, border-color .15s, box-shadow .15s; }
.card:hover, .card:focus-visible { transform: translateY(-2px); border-color: #e8c27a; box-shadow: 0 0 0 1px #000, 0 8px 26px rgba(0,0,0,.5), 0 0 20px rgba(255,170,60,.25); outline: none; }
.challenger .c-rank { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #b89f74; }
.challenger .c-name { font-family: Cinzel, serif; font-weight: 900; font-size: 24px; color: #fff1cf; line-height: 1.1; margin-top: 2px; }
.challenger .c-title { font-size: 13px; color: #c9a970; font-style: italic; }
.challenger .c-temper { margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #ffb36b; }
.challenger .c-blurb { font-size: 12px; color: #b9a585; line-height: 1.4; }
.c-affixes { list-style: none; padding: 0; margin: 6px 0 0; font-size: 12px; color: #d8c6a0; line-height: 1.45; }
.c-affixes b { color: #ff8a5a; font-weight: 600; }
.challenger .c-risk { margin-top: auto; padding-top: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8d7d63; }
.challenger.risky { border-color: rgba(255,120,60,.5); }
.challenger.risky .c-risk { color: #ff8a5a; }
.challenger.gate, .challenger.champion { border-color: #e8c27a; }
.challenger.champion .c-name { color: #ffd27a; }
.boon { border-top: 3px solid var(--fam); min-height: 130px; }
.boon .b-family { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fam); }
.boon .b-name { font-family: Cinzel, serif; font-weight: 700; font-size: 20px; color: #fff1cf; margin-top: 4px; }
.boon .b-desc { font-size: 13px; color: #d0bd96; line-height: 1.45; }
.boon.r1 { box-shadow: 0 0 0 1px #000, 0 0 16px color-mix(in srgb, var(--fam) 30%, transparent); }
.boon.r2 { box-shadow: 0 0 0 1px #000, 0 0 26px color-mix(in srgb, var(--fam) 55%, transparent); }
.asc-stats { display: flex; justify-content: center; gap: 28px; margin: 18px 0 6px; flex-wrap: wrap; }
.asc-stats div { display: flex; flex-direction: column; }
.asc-stats b { font-family: Cinzel, serif; font-size: 26px; color: #fff1cf; }
.asc-stats span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #a88c5c; }
.asc-actions { display: flex; gap: 18px; justify-content: center; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.asc-btn { font-family: Cinzel, serif; font-weight: 700; font-size: 16px; letter-spacing: .25em; padding: 12px 30px; color: #f4dfae; cursor: pointer; background: linear-gradient(180deg, rgba(60,38,18,.9), rgba(24,14,6,.95)); border: 1px solid rgba(216,180,106,.6); }
.asc-btn:hover { color: #fff; border-color: var(--gold); box-shadow: 0 0 30px rgba(255,140,40,.3); }
.asc-link { font: inherit; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8d7d63; background: none; border: none; cursor: pointer; padding: 8px; }
.asc-link:hover { color: #e8c27a; }
.asc-foot { margin-top: 26px; text-align: right; }

/* Armorer, bout summary, gold, Favor */
.asc-stats.small { gap: 18px; margin: 4px 0 10px; }
.asc-stats.small b { font-size: 18px; }
.asc-stats.small span { font-size: 10px; }
.st-label.gold, b.gold { color: #ffd27a; }
.chip.relic { border-color: #c9a35a; color: #ffe6b0; background: rgba(60,40,10,.7); }
.wares { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ware { min-height: 120px; border-top: 3px solid #8fb4ff; }
.ware.relic { border-top-color: #e8c27a; }
.ware .w-kind { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #a88c5c; }
.ware .w-price { margin-top: auto; padding-top: 8px; font-family: Cinzel, serif; font-weight: 700; color: #ffd27a; }
.ware[disabled] { opacity: .45; cursor: default; transform: none; }
.ware.sold { opacity: .6; }
.favor-wrap { position: relative; display: flex; align-items: center; gap: 8px; }
.favor-wrap .lbl { font-family: Cinzel, serif; font-size: 11px; font-weight: 700; letter-spacing: .28em; color: #e2c48a; min-width: 58px; text-shadow: 0 1px 3px #000; }
.favor-bar { flex: 1; height: 6px; }
.favor-bar .fill { background: linear-gradient(90deg, #8a6420, #e8c27a, #fff1c4); transform-origin: left; transform: scaleX(0); }
.favor-bar .tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,.7); }
.favor-wrap.hot .lbl { color: #ffe08a; text-shadow: 0 0 10px rgba(255,170,60,.8); }
.favor-wrap.hot .favor-bar { box-shadow: 0 0 10px rgba(255,190,90,.6); }

/* pause menu */
#pause { position: fixed; inset: 0; z-index: 19; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.62); backdrop-filter: blur(3px); }
#pause.hidden { display: none; }
.pause-panel { width: min(420px, 92vw); padding: 26px 24px 18px; text-align: center; background: linear-gradient(180deg, rgba(30,20,12,.95), rgba(12,8,5,.96)); border: 1px solid rgba(216,180,106,.4); box-shadow: 0 0 0 1px #000, 0 20px 60px rgba(0,0,0,.6); }
.pause-panel .asc-btn { margin: 14px 0 18px; }
.settings { display: flex; flex-direction: column; gap: 12px; text-align: left; font-size: 13px; color: #d8c6a0; }
.settings label { display: flex; flex-direction: column; gap: 4px; letter-spacing: .06em; }
.settings label.check { flex-direction: row; align-items: center; gap: 8px; }
.settings input[type=range] { width: 100%; accent-color: #c98a2b; }
.pause-links { display: flex; justify-content: space-between; margin-top: 16px; }
#loadtxt button { margin-left: 8px; font: inherit; color: #f4dfae; background: rgba(60,38,18,.9); border: 1px solid rgba(216,180,106,.6); padding: 2px 10px; cursor: pointer; }

/* title screen modes */
.modes { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.modes button { margin-top: 0; }
#start-ascent.hidden, #continue-ascent.hidden { display: none; }
.meta-line { margin-top: 12px; font-size: 12px; letter-spacing: .14em; color: #a88c5c; min-height: 16px; }

/* HUD: flasks and opponent modifiers */
#flasks { position: absolute; right: calc(50% + min(220px, 35vw) + 14px); bottom: 103px; white-space: nowrap; font-size: 13px; letter-spacing: .1em; color: #ffd8a0; text-shadow: 0 1px 3px #000; }
#flasks b { font-family: Cinzel, serif; font-size: 18px; }
#flasks.hidden { display: none; }
.boss-affixes { display: flex; gap: 6px; justify-content: center; margin-top: 4px; min-height: 0; }
.boss-affixes span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #ffb38a; padding: 1px 6px; border: 1px solid rgba(255,138,90,.45); background: rgba(30,10,4,.55); }