/* Giga Blow UI — dark-ink panels, rarity rims, Lilita One numbers, Barlow Semi Condensed text (docs/ART-DIRECTION.md).
   Perf: animations touch transform/opacity only; bars scale with transform; no backdrop-filter on large areas. */
:root {
  --ink-0: #070b0d; --ink-1: #0f171b; --ink-2: #1a262c; --line: #2e4148;
  --text: #eef4f1; --text-dim: #9fb3b0;
  --ember: #ff9a3a; --teal: #3fe0c8; --gold: #ffd23f; --blood: #ff3b4e; --gain: #7dff7a; --silver: #d8e4f0;
  --r0: #7ed957; --r1: #45a8ff; --r2: #c45cff; --r3: #ff8a2a; --r4: #ffd23f;
  --f-num: 'Lilita One', 'Barlow Semi Condensed', system-ui, sans-serif;
  --f-ui: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --f-lore: 'Grenze Gotisch', 'Lilita One', Georgia, serif;
  --pop: cubic-bezier(.2, 1.4, .4, 1);
  --panel-bg: linear-gradient(180deg, rgba(26, 38, 44, .93), rgba(15, 23, 27, .93));
  --panel-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .45);
  --outline: 0 2px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 3px 8px rgba(0, 0, 0, .6);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink-0); color: var(--text); font-family: var(--f-ui); font-weight: 600; user-select: none; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; image-rendering: pixelated; }
#numbers { position: fixed; inset: 0; pointer-events: none; }
svg.gi { width: 100%; height: 100%; display: block; fill: currentColor; overflow: visible; }
svg.gi.inl { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.18em; color: var(--gold); }
.gold { color: var(--gold); } .red { color: #ff6a6a; }

/* shared keycap */
kbd, .key { display: inline-grid; place-items: center; min-width: 1.55em; height: 1.55em; padding: 0 .35em; border-radius: .32em;
  background: linear-gradient(180deg, #f6faf8, #c4d3d0); color: var(--ink-1); font: 400 .9em/1 var(--f-num); letter-spacing: 0;
  box-shadow: 0 .14em 0 #5f7471, 0 .22em .35em rgba(0, 0, 0, .55); vertical-align: .05em; text-transform: none; }
kbd + kbd { margin-left: .2em; }

/* ---------------------------------------------------------------- screen effects */
#vignette { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 42%, rgba(200, 16, 30, .55) 82%, rgba(120, 0, 10, .85) 100%); }
#lowhp { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(255, 30, 50, .38) 88%, rgba(140, 0, 16, .7) 100%); }
body.lowhp #lowhp { animation: lowPulse 1s ease-in-out infinite; }
@keyframes lowPulse { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; }

/* ---------------------------------------------------------------- HUD frame */
#hud { position: fixed; inset: 0; pointer-events: none; }
body:not(.playing) #hud { visibility: hidden; }
@media (min-width: 1600px) and (min-height: 880px) { #hud { zoom: 1.2; } }
@media (min-width: 2200px) and (min-height: 1250px) { #hud { zoom: 1.55; } }

/* XP bar: full width along the top edge */
#xpbar { position: absolute; top: 0; left: 0; right: 0; height: 10px; background: rgba(7, 11, 13, .85); box-shadow: inset 0 -1px 0 var(--line), 0 2px 8px rgba(0, 0, 0, .5); overflow: hidden; }
#xpFill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); transition: transform .12s ease-out;
  background: linear-gradient(180deg, #b8fff2 0%, #3fe0c8 40%, #14a596 100%); box-shadow: 0 0 10px rgba(63, 224, 200, .8); }
#xpbar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .07) 42%, transparent 55%, rgba(0, 0, 0, .2) 100%); pointer-events: none; } /* smooth gloss, no tick marks (read as a texture glitch) */
#xpbar.rainbow #xpFill { background: linear-gradient(180deg, #fff6c0 0%, #ffd23f 45%, #ff9a3a 100%); box-shadow: 0 0 14px rgba(255, 210, 63, .9); }
#xpbar.rainbow::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; z-index: 1; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); animation: xpSheen .7s linear infinite; }
@keyframes xpSheen { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* top-left: level, HP, counters */
#topleft { position: absolute; top: 18px; left: 16px; display: flex; gap: 10px; align-items: flex-start; }
.lvlwrap { position: relative; width: 62px; height: 62px; flex: 0 0 62px; border-radius: 50%; display: grid; place-items: center; align-content: center;
  background: radial-gradient(circle at 50% 30%, #23434a 0%, #12262b 55%, var(--ink-0) 100%);
  border: 3px solid var(--teal); box-shadow: 0 0 0 2px #000, 0 0 16px rgba(63, 224, 200, .45), inset 0 2px 0 rgba(255, 255, 255, .12); }
.lvlwrap small { font: 800 11px/1 var(--f-ui); letter-spacing: 2px; color: var(--teal); margin-bottom: -1px; }
#lvl { font: 400 28px/1 var(--f-num); color: #fff; text-shadow: var(--outline); }
.bars { display: flex; flex-direction: column; gap: 7px; padding-top: 2px; }
#hpbar { position: relative; width: 290px; height: 30px; border-radius: 9px; padding: 3px; background: var(--ink-0); border: 2px solid #000; box-shadow: 0 0 0 2px var(--line), 0 6px 14px rgba(0, 0, 0, .45); }
.hptrack { position: relative; width: 100%; height: 100%; border-radius: 6px; overflow: hidden; background: linear-gradient(180deg, #2a0d12, #3d1219); }
.hptrack > div { position: absolute; inset: 0; transform-origin: 0 50%; }
#hpChip { background: #ffe8e0; transform: scaleX(1); opacity: .9; }
#hpFill { background: linear-gradient(180deg, #ff8b95 0%, #ff3b4e 38%, #d41f39 70%, #9a0f25 100%); transform: scaleX(1); }
#hpOver { background: linear-gradient(180deg, #fff6c0 0%, #ffd23f 45%, #e8a10c 100%); transform: scaleX(0); box-shadow: 0 0 10px #ffd23f; }
#hpShield { top: 0; bottom: auto; height: 42%; background: linear-gradient(180deg, #eafcff, #8fe3ff); transform: scaleX(0); opacity: .92; }
.hptrack::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .07) 42%, transparent 55%, rgba(0, 0, 0, .2) 100%); }
#hpText { position: absolute; inset: 0; display: grid; place-items: center; font: 400 20px/1 var(--f-num); color: #fff; text-shadow: var(--outline); letter-spacing: .5px; }
#hpbar.over #hpText { color: #fff3b0; }
#hpbar::after { content: ''; position: absolute; inset: -4px; border-radius: 12px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px var(--blood), 0 0 18px var(--blood); }
#hpbar.low::after { animation: lowPulse .8s ease-in-out infinite; }
.stats { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 5px; border-radius: 15px;
  background: rgba(7, 11, 13, .78); border: 1.5px solid var(--line); box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.chip i { width: 22px; height: 22px; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .9)); }
.chip b { display: inline-block; font: 400 20px/1 var(--f-num); color: #fff; text-shadow: var(--outline); transform-origin: 30% 60%; }
.c-gold i, .c-gold b { color: var(--gold); }
.c-kills i { color: #e8ecea; }
.c-curse i, .c-curse b { color: #ff7a86; }
.c-silver { display: none; } .c-silver i, .c-silver b { color: var(--silver); }

/* powerup timers */
#buffs { position: absolute; top: 108px; left: 16px; display: flex; gap: 8px; }
.buff { position: relative; width: 48px; padding-bottom: 6px; text-align: center; }
.buff i { display: block; width: 44px; height: 44px; margin: 0 auto; padding: 9px; border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--bc) 85%, #fff) 0%, var(--bc) 40%, color-mix(in srgb, var(--bc) 35%, #000) 100%);
  box-shadow: 0 0 0 2px #000, 0 0 14px color-mix(in srgb, var(--bc) 70%, transparent); }
.buff i svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
.buff b { position: absolute; right: -4px; top: 26px; min-width: 22px; padding: 2px 4px 1px; border-radius: 8px; background: var(--ink-0); border: 1.5px solid var(--bc); font: 400 15px/1 var(--f-num); color: #fff; }
.buff s { position: absolute; left: 4px; right: 4px; bottom: 0; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .6); text-decoration: none; overflow: hidden; }
.buff s u { position: absolute; inset: 0; background: var(--bc); transform-origin: 0 50%; text-decoration: none; }
.buff.blink { animation: buffBlink .35s steps(2) infinite; }
@keyframes buffBlink { 50% { opacity: .35; } }

/* stage timer card */
#phase { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 264px; padding: 7px 14px 9px; border-radius: 12px;
  background: var(--panel-bg); border: 2px solid var(--line); box-shadow: var(--panel-shadow); }
#phase .pl { display: flex; align-items: center; gap: 10px; }
#phaseIcon { flex: 0 0 30px; width: 30px; height: 30px; color: var(--ember); filter: drop-shadow(0 0 6px rgba(255, 154, 58, .6)); }
.pcol { flex: 1; display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
#phaseLabel { font: 800 16px/1.1 var(--f-ui); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text); white-space: nowrap; }
#phaseTag { font: 700 13px/1.1 var(--f-ui); letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
#phaseTime { font: 400 32px/1 var(--f-num); color: #fff; text-shadow: var(--outline); font-variant-numeric: tabular-nums; }
#phase .pbar { position: relative; height: 7px; margin-top: 7px; border-radius: 4px; background: var(--ink-0); box-shadow: inset 0 0 0 1px #000; }
#phaseFill { position: absolute; inset: 0; border-radius: 4px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #c9631a, var(--ember)); }
#phaseTicks { position: absolute; inset: 0; }
#phaseTicks i { position: absolute; top: -4px; width: 4px; height: 15px; margin-left: -2px; border-radius: 2px; background: var(--c); box-shadow: 0 0 0 1px #000, 0 0 6px var(--c); }
#phaseTicks i.past { opacity: .3; box-shadow: none; }
#phase.swarm { border-color: var(--ember); box-shadow: var(--panel-shadow), 0 0 18px rgba(255, 154, 58, .5); }
#phase.swarm #phaseTag { color: var(--ember); }
#phase.boss { border-color: var(--blood); box-shadow: var(--panel-shadow), 0 0 18px rgba(255, 59, 78, .5); }
#phase.boss #phaseTag, #phase.final #phaseTag { color: #ff7a86; }
#phase.final { border-color: var(--blood); background: linear-gradient(180deg, rgba(60, 10, 18, .94), rgba(18, 6, 10, .94)); }
#phase.final #phaseIcon, #phase.boss #phaseIcon { color: var(--blood); filter: drop-shadow(0 0 6px rgba(255, 59, 78, .7)); }
#phase.final #phaseFill { background: linear-gradient(90deg, #8a0f20, var(--blood)); }
#phase.night #phaseIcon { color: #bfe0ff; filter: drop-shadow(0 0 6px rgba(160, 210, 255, .6)); }

/* boss bar */
#bossbar { display: none; position: absolute; top: 96px; left: 50%; transform: translateX(-50%); width: min(620px, 56vw); }
#bossbar.on { display: block; }
.bbhead { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 4px; }
#bossIcon { width: 26px; height: 26px; color: var(--blood); filter: drop-shadow(0 0 6px rgba(255, 59, 78, .8)); }
#bossName { font: 400 26px/1 var(--f-num); color: #ffe6e3; letter-spacing: 1px; text-shadow: var(--outline), 0 0 16px rgba(255, 59, 78, .7); }
.bb { position: relative; height: 22px; border-radius: 7px; overflow: hidden; background: #1c0609; border: 2px solid #000; box-shadow: 0 0 0 2px #5a1420, 0 0 20px rgba(255, 59, 78, .35); }
.bb > div { position: absolute; inset: 0; transform-origin: 0 50%; }
#bossChip { background: #fff0e8; opacity: .9; }
#bossFill { background: linear-gradient(180deg, #ff8b95 0%, #ff3b4e 35%, #b0142c 75%, #6a0816 100%); }
.bb::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .07) 42%, transparent 55%, rgba(0, 0, 0, .2) 100%); }
#bossHp { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font: 400 16px/1 var(--f-num); color: #fff; text-shadow: var(--outline); }

/* top-right: minimap, map counter, combo */
#mmwrap { position: absolute; top: 18px; right: 16px; width: 178px; height: 178px; border-radius: 50%; padding: 4px;
  background: radial-gradient(circle, transparent 60%, rgba(0, 0, 0, .4) 100%), var(--ink-0); border: 2px solid var(--line);
  box-shadow: 0 0 0 2px #000, 0 6px 18px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .06); }
#minimap { display: block; width: 166px; height: 166px; border-radius: 50%; }
#shrinecount { position: absolute; top: 204px; right: 16px; width: 178px; display: flex; flex-direction: column; gap: 1px; padding: 5px 4px; border-radius: 10px; background: rgba(7, 11, 13, .72); border: 1px solid var(--line); }
#shrinecount:empty { display: none; }
#shrinecount span { display: flex; align-items: center; gap: 7px; height: 21px; padding: 0 6px; font: 700 14px/1 var(--f-ui); color: var(--text-dim); white-space: nowrap; }
#shrinecount span::before { content: ''; flex: 0 0 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
#shrinecount span b { margin-left: auto; font: 400 15px/1 var(--f-num); color: var(--text); }
#shrinecount span.done { opacity: .45; }
#debugline { position: absolute; top: 312px; right: 16px; font: 600 12px var(--f-ui); color: var(--text-dim); opacity: .6; text-shadow: 0 1px 2px #000; }
#combo { position: absolute; right: 18px; top: 336px; text-align: right; opacity: 0; transition: opacity .2s; pointer-events: none; }
#combo.on { opacity: 1; }
#comboN { display: inline-block; font: 400 46px/1 var(--f-num); color: var(--gold); transform-origin: 100% 60%;
  text-shadow: 0 3px 0 #000, 0 -1px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 0 18px rgba(255, 154, 58, .7); }
#combo .ctxt { font: 800 13px/1 var(--f-ui); letter-spacing: 3px; text-transform: uppercase; color: var(--ember); text-shadow: 0 1px 2px #000; margin-top: 1px; }
#comboLabel { font: 400 24px/1.1 var(--f-num); color: #ffe7b8; text-shadow: var(--outline), 0 0 14px rgba(255, 120, 40, .8); margin-top: 4px; }
#comboLabel.pop { animation: comboPop .6s var(--pop); }
@keyframes comboPop { 0% { transform: scale(2.1) rotate(-5deg); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1); } }

/* bottom-left: weapon + tome slots */
#slots { position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 7px; }
#slots .row { display: flex; gap: 7px; align-items: center; }
.slot { position: relative; width: 56px; height: 56px; padding: 9px; border-radius: 12px; color: #fff8ec;
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--cc) 92%, #fff) 0%, var(--cc) 34%, color-mix(in srgb, var(--cc) 34%, #000) 82%, #050808 100%);
  border: 2px solid #000; box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc) 55%, #000), 0 5px 10px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .25); }
.slot > svg { filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .65)); position: relative; z-index: 1; }
.slot.w { --cc: #e8701e; }
.slot.h { --cc: #1aa892; }
.slot b { position: absolute; z-index: 2; right: -6px; bottom: -6px; min-width: 22px; padding: 3px 5px 2px; border-radius: 8px; text-align: center; font: 400 15px/1 var(--f-num); color: #fff; background: var(--ink-0); border: 1.5px solid color-mix(in srgb, var(--cc) 70%, #fff); }
.slot b.max { color: var(--ink-0); background: var(--gold); border-color: #fff3b0; }
.slot .cd { position: absolute; inset: 0; border-radius: 10px; background: rgba(4, 8, 10, .62); transform-origin: 50% 100%; transform: scaleY(0); z-index: 1; }
.slot.empty { background: rgba(7, 11, 13, .45); border: 2px dashed rgba(159, 179, 176, .35); box-shadow: none; }
.slot.locked { background: rgba(7, 11, 13, .35); border: 2px solid rgba(46, 65, 72, .5); box-shadow: none; opacity: .55; }
.slot.locked::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 11px; margin: -3px 0 0 -7px; border-radius: 2px; background: #4a5d62; }
.slot.locked::before { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -11px 0 0 -5px; border: 2.5px solid #4a5d62; border-bottom: 0; border-radius: 6px 6px 0 0; }

/* bottom-right: items */
#items { position: absolute; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 6px; max-width: 42vw; }
.item { position: relative; width: 46px; height: 46px; padding: 8px; border-radius: 10px; color: #fff;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 55%, #000) 0%, color-mix(in srgb, var(--rc) 22%, var(--ink-1)) 60%, var(--ink-0) 100%);
  border: 2px solid var(--rc); box-shadow: 0 0 0 1.5px #000, 0 0 10px color-mix(in srgb, var(--rc) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .15); }
.item > svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8)); }
.item b { position: absolute; right: -5px; bottom: -6px; min-width: 20px; padding: 2px 4px 1px; border-radius: 7px; text-align: center; font: 400 14px/1 var(--f-num); color: #fff; background: var(--ink-0); border: 1.5px solid var(--rc); }

/* interaction prompt */
#prompt { position: absolute; left: 50%; bottom: 168px; transform: translateX(-50%); max-width: min(820px, 80vw); padding: 9px 18px 9px 10px; border-radius: 12px;
  background: var(--panel-bg); border: 2px solid var(--line); box-shadow: var(--panel-shadow), 0 0 0 1px rgba(255, 154, 58, .25);
  font: 600 18px/1.25 var(--f-ui); color: var(--text); opacity: 0; transition: opacity .15s; white-space: nowrap; display: flex; align-items: center; gap: 10px; }
#prompt:empty { display: none; }
#prompt > b:first-child { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; font: 400 21px/1 var(--f-num);
  background: linear-gradient(180deg, #ffffff, #c9d6d3); color: var(--ink-1); box-shadow: 0 3px 0 #5f7471, 0 5px 8px rgba(0, 0, 0, .5); }
#prompt span[style*="f5cf4e"] { color: var(--gold) !important; font-weight: 800; }
#prompt span[style*="ff6a4a"] { color: #ff6f7c !important; font-weight: 700; }

/* ---------------------------------------------------------------- banners */
#banner { position: fixed; top: 21%; left: 0; right: 0; text-align: center; pointer-events: none; opacity: 0; z-index: 5; padding: 0 16px; }
#banner h1 { margin: 0; font: 400 clamp(44px, 6.4vw, 96px)/1.05 var(--f-num); color: #fff; letter-spacing: 1px;
  -webkit-text-stroke: .1em #000; paint-order: stroke fill; text-shadow: 0 .07em 0 #000, 0 0 .5em rgba(255, 154, 58, .55); }
#banner p { display: inline-block; margin: 10px 0 0; padding: 6px 16px; border-radius: 10px; background: rgba(7, 11, 13, .72); font: 700 clamp(17px, 1.5vw, 22px)/1.25 var(--f-ui); color: var(--text); }
#banner p:empty { display: none; }
#banner.lore h1 { font: 900 clamp(52px, 7.4vw, 112px)/1 var(--f-lore); letter-spacing: 3px; color: #ffe6e0; -webkit-text-stroke: .06em #000; text-shadow: 0 .06em 0 #000, 0 0 .45em rgba(255, 40, 60, .75); }
#banner.lore p { border: 1px solid rgba(255, 59, 78, .5); }
#banner.good h1 { text-shadow: 0 .07em 0 #000, 0 0 .5em rgba(255, 210, 63, .7); }
#banner.toast { top: 30%; }
#banner.toast h1 { font-size: clamp(30px, 3.4vw, 48px); }
body.isNight #banner:not(.good) h1 { text-shadow: 0 .07em 0 #000, 0 0 .5em rgba(255, 40, 60, .7); }

/* ---------------------------------------------------------------- modals */
.modal { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 10; padding: 16px;
  background: radial-gradient(ellipse at 50% 42%, rgba(12, 24, 28, .66) 0%, rgba(5, 9, 11, .88) 70%, rgba(3, 5, 6, .95) 100%); }
.modal.show { display: flex; }
.mtitle { font: 400 clamp(40px, 5vw, 64px)/1 var(--f-num); color: #fff; letter-spacing: 1px; -webkit-text-stroke: .09em #000; paint-order: stroke fill;
  text-shadow: 0 .07em 0 #000, 0 0 .5em rgba(63, 224, 200, .45); animation: popIn .3s var(--pop) backwards; }
.msub { font: 700 clamp(15px, 1.3vw, 18px)/1.3 var(--f-ui); color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase; margin-top: -6px; text-align: center; max-width: 900px; }
@keyframes popIn { from { transform: scale(.6); opacity: 0; } }

/* ---------------------------------------------------------------- cards */
.cards { display: flex; gap: clamp(14px, 1.6vw, 26px); flex-wrap: wrap; justify-content: center; align-items: stretch; padding-top: 12px; }
.card { --cc: var(--rc); position: relative; width: clamp(214px, 17vw, 270px); min-height: clamp(330px, 42vh, 400px); padding: 0 16px 14px; border-radius: 16px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--text); font-family: var(--f-ui);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 20%, var(--ink-2)) 0%, var(--ink-1) 42%, var(--ink-0) 100%);
  border: 2px solid var(--rc); box-shadow: 0 0 0 2px #000, 0 0 22px color-mix(in srgb, var(--rc) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, .12), 0 16px 28px rgba(0, 0, 0, .55);
  transition: transform .14s var(--pop), box-shadow .14s; animation: cardIn .38s var(--pop) backwards; }
.card:nth-child(2) { animation-delay: .06s; } .card:nth-child(3) { animation-delay: .12s; } .card:nth-child(4) { animation-delay: .18s; }
@keyframes cardIn { from { transform: translateY(46px) scale(.85); opacity: 0; } }
.card.cat-weapon { --cc: #f07a22; } .card.cat-tome { --cc: #18b39b; } .card.cat-gold { --cc: #e8a10c; } .card.cat-leave { --cc: #4a5d62; }
.card.rnew { --rc: #e8f2ef; }
.card:hover, .card.sel { transform: translateY(-10px); box-shadow: 0 0 0 2px #000, 0 0 0 5px color-mix(in srgb, var(--rc) 60%, transparent), 0 0 38px color-mix(in srgb, var(--rc) 65%, transparent), inset 0 1px 0 rgba(255, 255, 255, .15), 0 22px 34px rgba(0, 0, 0, .6); }
.card .shine { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; pointer-events: none; }
.card.epic .shine::after, .card.legendary .shine::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .0) 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); animation: sweep 2.6s ease-in-out infinite; }
.card.legendary .shine::after { animation-duration: 1.9s; background: linear-gradient(100deg, transparent 0%, rgba(255, 244, 200, .0) 30%, rgba(255, 244, 200, .42) 50%, transparent 70%); }
@keyframes sweep { 0% { transform: translateX(-120%) skewX(-12deg); } 55%, 100% { transform: translateX(330%) skewX(-12deg); } }
.card .ckey { position: absolute; top: -13px; left: -11px; z-index: 3; font-size: 20px; }
.card .cbadge { margin: 0 -16px; align-self: stretch; padding: 7px 10px 6px; border-radius: 14px 14px 0 0; font: 800 13px/1 var(--f-ui); letter-spacing: 1.6px; text-transform: uppercase;
  color: color-mix(in srgb, var(--cc) 30%, #fff); background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 34%, transparent), transparent); }
.card .cbadge em { font-style: normal; color: #fff; }
.card .cmedwrap { position: relative; display: grid; place-items: center; width: 118px; height: 118px; margin: 6px 0 4px; }
.cmed { position: relative; z-index: 1; width: 98px; height: 98px; padding: 19px; border-radius: 50%; color: #fff8ec;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--cc) 80%, #fff) 0%, var(--cc) 30%, color-mix(in srgb, var(--cc) 40%, #000) 72%, #040707 100%);
  box-shadow: 0 0 0 3px #000, 0 0 0 6px var(--rc), 0 0 26px color-mix(in srgb, var(--rc) 70%, transparent), inset 0 3px 0 rgba(255, 255, 255, .3), inset 0 -6px 12px rgba(0, 0, 0, .45); }
.cmed svg { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .7)); }
.rays { position: absolute; inset: -34px; border-radius: 50%; pointer-events: none; opacity: .85;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 80%, #fff) 0deg 7deg, transparent 7deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.card .ctitle { font: 400 clamp(23px, 1.9vw, 28px)/1.05 var(--f-num); color: #fff; letter-spacing: .3px; text-shadow: 0 2px 0 #000, 0 0 10px rgba(0, 0, 0, .6); margin-top: 4px; }
.card .crib { margin-top: 7px; padding: 3px 12px 2px; border-radius: 6px; font: 800 13px/1.2 var(--f-ui); letter-spacing: 2px; text-transform: uppercase; color: #0b1012;
  background: var(--rc); box-shadow: 0 0 12px color-mix(in srgb, var(--rc) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45); }
.card.rnew .crib { background: var(--cc); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
.card .cstat { margin-top: 12px; width: 100%; display: flex; flex-direction: column; gap: 5px; }
.card .chead { display: flex; flex-direction: column; align-items: center; }
.card .chead b { font: 400 clamp(32px, 2.6vw, 40px)/1 var(--f-num); color: var(--gain); text-shadow: 0 2px 0 #000, 0 0 14px rgba(125, 255, 122, .35); }
.card .chead b.long { font-size: 22px; }
.card .chead span { font: 800 14px/1.2 var(--f-ui); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); margin-top: 2px; }
.card .crow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 8px; background: rgba(0, 0, 0, .35); }
.card .crow > span { font: 700 15px/1.15 var(--f-ui); color: var(--text-dim); text-align: left; }
.card .crow > em { font: 400 20px/1 var(--f-num); font-style: normal; color: #fff; white-space: nowrap; }
.card .crow > em s { text-decoration: none; color: var(--text-dim); font-size: 16px; }
.card .crow > em i { font-style: normal; color: var(--text-dim); font-size: 15px; margin: 0 2px; }
.card .crow > em u { text-decoration: none; color: var(--gain); }
.card .cstat.single .crow { flex-direction: column; align-items: center; gap: 4px; padding: 7px 8px; }
.card .cstat.single .crow > em { font-size: 28px; } .card .cstat.single .crow > em s { font-size: 20px; }
.card .cnote { font: 600 14px/1.25 var(--f-ui); color: var(--text-dim); }
.card .ctext { font: 700 16px/1.25 var(--f-ui); color: var(--text); }
.card .ctext b.now, .card .cnote b.now { color: var(--gain); }
.card .cdesc { margin-top: auto; padding-top: 10px; width: 100%; font: 500 15px/1.28 var(--f-ui); color: var(--text-dim); border-top: 1px solid rgba(159, 179, 176, .14); }
.card .cstat + .cdesc { margin-top: auto; }
.card .cdesc.main { color: var(--text); font: 600 16px/1.3 var(--f-ui); border-top: 0; padding-top: 12px; margin-top: 10px; }
.card .cdesc.main + .cprice { margin-top: auto; }
.card .cprice { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; font: 400 26px/1 var(--f-num); color: var(--gold); text-shadow: 0 2px 0 #000; }
.card .cprice svg { width: 24px; height: 24px; color: var(--gold); filter: drop-shadow(0 1px 1px #000); }
.card .cprice.poor { color: #ff6f7c; } .card .cprice.poor svg { color: #ff6f7c; }
.card .cprice small { font: 700 13px var(--f-ui); color: #ff6f7c; text-shadow: none; }
.card .ccorner { position: absolute; top: -12px; right: -10px; z-index: 3; padding: 4px 9px 3px; border-radius: 8px; transform: rotate(8deg); font: 400 18px/1 var(--f-num); color: #0b1012; background: var(--gain); box-shadow: 0 0 0 2px #000, 0 0 14px rgba(125, 255, 122, .6); }
.card .ccorner.stack { background: #fff; box-shadow: 0 0 0 2px #000, 0 0 14px rgba(255, 255, 255, .5); }
.card.cat-bless { min-height: 0; padding-bottom: 16px; }
.card.cat-bless .chead b { font-size: clamp(38px, 3vw, 46px); }
.card .cfoot { margin-top: auto; padding-top: 10px; font: 700 13px/1.2 var(--f-ui); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); opacity: .8; }
.card.cat-leave { min-height: 0; width: clamp(150px, 11vw, 180px); background: linear-gradient(180deg, var(--ink-2), var(--ink-0)); border-color: var(--line); box-shadow: 0 0 0 2px #000, 0 12px 24px rgba(0, 0, 0, .5); align-self: center; padding-bottom: 18px; }
.card.cat-leave .cmed { width: 70px; height: 70px; padding: 14px; box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--line); }
.card.cat-leave .cmedwrap { width: 90px; height: 90px; }
.card.cat-leave .ctitle { font-size: 22px; color: var(--text-dim); }
.card.big { width: clamp(250px, 20vw, 300px); min-height: 0; animation: revealIn .55s var(--pop) backwards; }
@keyframes revealIn { 0% { transform: translateY(30px) scale(.4); opacity: 0; } 60% { opacity: 1; } }

/* buttons */
.btns { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 24px; border-radius: 12px; cursor: pointer; pointer-events: auto;
  font: 800 18px/1 var(--f-ui); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text);
  background: linear-gradient(180deg, #24353c, var(--ink-1)); border: 2px solid var(--line); box-shadow: 0 0 0 2px #000, inset 0 1px 0 rgba(255, 255, 255, .1), 0 6px 14px rgba(0, 0, 0, .5);
  transition: transform .12s var(--pop), border-color .12s, box-shadow .12s; }
.btn:hover, .btn.sel { transform: translateY(-3px); border-color: var(--ember); box-shadow: 0 0 0 2px #000, 0 0 18px rgba(255, 154, 58, .45), inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 16px rgba(0, 0, 0, .5); }
.btn .key { font-size: 15px; }
.btn.big { font-size: 26px; padding: 14px 44px; }
.btn.play { position: sticky; bottom: 14px; z-index: 2; min-width: 300px; padding: 12px 40px 14px; margin-top: 4px; border-radius: 14px; font: 400 38px/1 var(--f-num); letter-spacing: 2px; color: #2a1204;
  background: linear-gradient(180deg, #ffd27a 0%, #ff9a3a 45%, #e5641c 100%); border: 2px solid #ffe2a8;
  box-shadow: 0 0 0 3px #000, 0 6px 0 #7a2e08, 0 0 34px rgba(255, 154, 58, .55), inset 0 2px 0 rgba(255, 255, 255, .6); text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.btn.play:hover { transform: translateY(-3px) scale(1.03); border-color: #fff3d8; box-shadow: 0 0 0 3px #000, 0 9px 0 #7a2e08, 0 0 46px rgba(255, 170, 70, .8), inset 0 2px 0 rgba(255, 255, 255, .6); }
.btn.play kbd { font-size: 15px; vertical-align: middle; }

/* ---------------------------------------------------------------- level-up */
.modal.levelup { justify-content: center; }
.modal.levelup .mtitle { text-shadow: 0 .07em 0 #000, 0 0 .55em rgba(255, 210, 63, .55); }
.lvwrap { display: flex; gap: 26px; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; }
.lvmain { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.lvtools { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.btn.tool { font-size: 15px; padding: 8px 12px 8px 10px; gap: 8px; }
.btn.tool .key { font-size: 14px; }
.btn.tool b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--teal); color: var(--ink-0); font: 400 15px/1 var(--f-num); letter-spacing: 0; }
.btn.tool.off { opacity: .4; cursor: not-allowed; } .btn.tool.off b { background: #4a5d62; color: var(--text-dim); }
.btn.tool.on { border-color: var(--blood); background: linear-gradient(180deg, #5a1420, #2a0a10); box-shadow: 0 0 0 2px #000, 0 0 18px rgba(255, 59, 78, .55); }
.lvhint { min-height: 22px; font: 700 16px var(--f-ui); color: #ff8a94; letter-spacing: .5px; }
.modal.banishing .card { border-color: var(--blood); }
.modal.banishing .card::after { content: 'BANISH'; position: absolute; left: 10px; right: 10px; top: 62%; padding: 6px 0 4px; border-radius: 8px; text-align: center; z-index: 4;
  font: 400 30px/1 var(--f-num); letter-spacing: 4px; color: #fff; background: rgba(200, 20, 40, .9); box-shadow: 0 0 0 2px #000, 0 0 20px rgba(255, 59, 78, .7); transform: rotate(-8deg); pointer-events: none; }
.lvpanel { width: 290px; max-height: min(84vh, 680px); overflow-y: auto; padding: 12px 14px; border-radius: 14px; background: var(--panel-bg); border: 2px solid var(--line); box-shadow: var(--panel-shadow);
  font: 600 15px var(--f-ui); text-align: left; pointer-events: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; animation: popIn .3s var(--pop) .1s backwards; }
.lvpanel h4 { margin: 12px 0 6px; font: 800 13px/1 var(--f-ui); letter-spacing: 2.5px; text-transform: uppercase; color: var(--teal); display: flex; align-items: center; gap: 8px; }
.lvpanel h4::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.lvpanel h4:first-child { margin-top: 0; }
.prow { display: flex; align-items: center; gap: 9px; padding: 2px 0; }
.prow i { --cc: #e8701e; flex: 0 0 30px; width: 30px; height: 30px; padding: 5px; border-radius: 8px; color: #fff8ec;
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--cc) 85%, #fff) 0%, var(--cc) 38%, color-mix(in srgb, var(--cc) 35%, #000) 100%); box-shadow: 0 0 0 1.5px #000; }
.prow.h i { --cc: #1aa892; }
.prow span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.prow b { font: 400 17px/1 var(--f-num); color: #fff; }
.prow b small { font: 700 12px var(--f-ui); color: var(--text-dim); margin-right: 2px; letter-spacing: 1px; }
.prow.empty { opacity: .5; } .prow.empty span { font-style: italic; color: var(--text-dim); } .prow.empty i { background: transparent; border: 1.5px dashed rgba(159, 179, 176, .5); box-shadow: none; }
.pitems { display: flex; flex-wrap: wrap; gap: 5px; }
.pitem { position: relative; width: 36px; height: 36px; padding: 6px; border-radius: 8px; color: #fff; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 50%, #000), var(--ink-0)); border: 2px solid var(--rc); }
.pitem b { position: absolute; right: -4px; bottom: -5px; min-width: 16px; padding: 1px 3px; border-radius: 6px; text-align: center; font: 400 12px/1.1 var(--f-num); color: #fff; background: var(--ink-0); border: 1px solid var(--rc); }
.pstats { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; }
.pstats span { font: 600 15px/1.25 var(--f-ui); color: var(--text-dim); }
.pstats b { font: 400 17px/1.15 var(--f-num); text-align: right; color: #fff; }
.pstats b.up { color: var(--gain); }
.pban { margin-top: 10px; font: 600 13px var(--f-ui); color: #ff8a94; }
@media (min-width: 1600px) and (min-height: 900px) {
  .lvpanel { width: 340px; max-height: min(86vh, 860px); padding: 14px 16px; }
  .prow span, .pstats span { font-size: 16px; } .prow b, .pstats b { font-size: 19px; } .prow i { flex-basis: 34px; width: 34px; height: 34px; }
  .pitem { width: 40px; height: 40px; } .lvpanel h4 { font-size: 14px; }
}
@media (max-width: 1100px) { .lvwrap { flex-direction: column; overflow-y: auto; } .lvpanel { width: min(560px, 92vw); max-height: 28vh; }
  .modal .cards { flex-wrap: nowrap; gap: 10px; } .modal .cards .card { width: min(31vw, 220px); min-width: 0; } }
@media (max-width: 760px) { .lvpanel { display: none; } .modal .cards .card { padding-left: 8px; padding-right: 8px; } .modal .cards .card .cdesc { font-size: 13px; } }
@media (max-height: 760px) { .card { min-height: 300px; } .card .cmedwrap { width: 96px; height: 96px; } .cmed { width: 80px; height: 80px; padding: 15px; } }

/* ---------------------------------------------------------------- chest reveal */
.modal.chest { gap: 16px; }
.roulette { position: relative; width: min(700px, 90vw); height: 124px; overflow: hidden; border-radius: 14px; background: var(--ink-0); border: 2px solid var(--line);
  box-shadow: 0 0 0 2px #000, inset 0 0 36px #000, 0 10px 24px rgba(0, 0, 0, .5); transition: opacity .35s, transform .35s; }
.roulette::before, .roulette::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.roulette::before { left: 0; background: linear-gradient(90deg, var(--ink-0), transparent); }
.roulette::after { right: 0; background: linear-gradient(-90deg, var(--ink-0), transparent); }
.roulette.done { opacity: .4; transform: scale(.9); }
.rstrip { display: flex; position: absolute; left: 0; top: 14px; will-change: transform; }
.ritem { flex: 0 0 88px; width: 88px; height: 92px; margin-right: 8px; padding: 18px; border-radius: 12px; color: #fff;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 55%, #000), color-mix(in srgb, var(--rc) 14%, var(--ink-1)) 70%); border: 2px solid var(--rc); box-shadow: inset 0 0 14px rgba(0, 0, 0, .6); }
.ritem svg { filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .7)); }
.rmark { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; z-index: 3; background: var(--gold); box-shadow: 0 0 14px var(--gold), 0 0 0 1px #000; }
.rmark::before, .rmark::after { content: ''; position: absolute; left: 50%; margin-left: -10px; border: 10px solid transparent; }
.rmark::before { top: -2px; border-top-color: var(--gold); }
.rmark::after { bottom: -2px; border-bottom-color: var(--gold); }
.reveal { position: relative; min-height: 10px; display: grid; place-items: center; }
.reveal > .beam { position: absolute; left: 50%; top: 50%; width: 420px; height: 150vh; margin: -75vh 0 0 -210px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--rc) 30%, transparent) 22%, color-mix(in srgb, var(--rc) 85%, transparent) 42%, #fff 50%, color-mix(in srgb, var(--rc) 85%, transparent) 58%, color-mix(in srgb, var(--rc) 30%, transparent) 78%, transparent 100%);
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 35%, #000 65%, transparent 100%); mask: linear-gradient(180deg, transparent 0%, #000 35%, #000 65%, transparent 100%);
  opacity: .8; animation: beamIn .5s ease-out backwards, beamPulse 1.6s ease-in-out .5s infinite; }
@keyframes beamIn { from { transform: scaleX(0); opacity: 1; } }
@keyframes beamPulse { 50% { opacity: .5; } }
.reveal.r0 > .beam { opacity: .5; animation: beamIn .5s ease-out backwards; }
.reveal > .rays { inset: auto; left: 50%; top: 50%; width: 720px; height: 720px; margin: -360px 0 0 -360px; opacity: .5; animation: spin 14s linear infinite; }
.reveal.r0 > .rays, .reveal.r1 > .rays { display: none; }
.reveal.r4 > .rays { opacity: .8; }
.reveal > .card { z-index: 1; }
.reveal > .chint { position: absolute; z-index: 2; bottom: -40px; left: 50%; transform: translateX(-50%); padding: 5px 12px; border-radius: 8px; background: rgba(7, 11, 13, .85); font: 700 15px var(--f-ui); color: var(--text); letter-spacing: .5px; white-space: nowrap; }

/* ---------------------------------------------------------------- info modals: pause, end */
.mpanel { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 30px 24px; border-radius: 18px; max-width: min(760px, 94vw); max-height: 94vh; overflow-y: auto;
  background: var(--panel-bg); border: 2px solid var(--line); box-shadow: var(--panel-shadow), 0 20px 50px rgba(0, 0, 0, .6); animation: popIn .3s var(--pop) backwards; }
.mpanel .mtitle { animation: none; }
.vol { display: grid; grid-template-columns: 160px 230px 52px; gap: 10px 16px; align-items: center; font: 700 16px var(--f-ui); color: var(--text); pointer-events: auto; }
.vol b { font: 400 17px var(--f-num); color: var(--teal); text-align: right; }
.vol input[type=range] { width: 230px; margin: 0; accent-color: var(--ember); cursor: pointer; color-scheme: dark; }
.vol select { font: 700 16px var(--f-ui); color: var(--text); background: var(--ink-0); border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.pchar { max-width: 600px; padding: 10px 14px; border-radius: 10px; background: rgba(0, 0, 0, .3); font: 500 15px/1.35 var(--f-ui); text-align: center; color: var(--text-dim); }
.pchar b { color: var(--text); }
.dbg { font: 600 13px var(--f-ui); color: var(--text-dim); opacity: .55; }
.modal.end .mtitle { font-size: clamp(52px, 6vw, 80px); text-shadow: 0 .07em 0 #000, 0 0 .5em rgba(255, 59, 78, .65); }
.modal.end.won .mtitle { text-shadow: 0 .07em 0 #000, 0 0 .5em rgba(255, 210, 63, .7); }
.statsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; width: min(640px, 86vw); }
.statsgrid span { display: none; }
.statsgrid .tile { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); }
.statsgrid .tile small { font: 800 12px var(--f-ui); letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); }
.statsgrid .tile b { font: 400 26px/1 var(--f-num); color: #fff; text-align: left; }
.statsgrid:not(.tiled) { grid-template-columns: auto auto; gap: 4px 30px; width: auto; }
.statsgrid:not(.tiled) span { display: block; color: var(--text-dim); }
.statsgrid:not(.tiled) b { font: 400 20px var(--f-num); text-align: right; }
.endload { display: flex; flex-wrap: wrap; gap: 8px 6px; justify-content: center; max-width: 640px; }
.endload::before { content: 'Your build'; flex: 0 0 100%; text-align: center; font: 800 12px var(--f-ui); letter-spacing: 2.5px; text-transform: uppercase; color: var(--teal); }
.endload .slot, .endload .item { width: 44px; height: 44px; padding: 7px; }
.endload .slot b { font-size: 12px; }

/* ---------------------------------------------------------------- start screen + character select */
#start { justify-content: flex-start; overflow-y: auto; padding: 0;
  background: linear-gradient(90deg, rgba(5, 9, 11, .96) 0%, rgba(7, 12, 14, .9) 42%, rgba(7, 12, 14, .35) 62%, rgba(7, 12, 14, 0) 78%), radial-gradient(ellipse at 72% 60%, transparent 35%, rgba(3, 6, 8, .6) 100%); }
.startwrap { display: flex; width: 100%; min-height: 100%; }
.startleft { flex: 0 1 780px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 28px; min-width: 0; }
.startleft > :first-child { margin-top: auto; } .startleft > :last-child { margin-bottom: auto; }
.stage { flex: 1; }
.logo { font: 900 clamp(48px, 5.3vw, 100px)/.95 var(--f-lore); letter-spacing: 3px; color: #ffe9cf;
  -webkit-text-stroke: .05em #000; paint-order: stroke fill; text-shadow: 0 .06em 0 #4a0a12, 0 .1em 0 #000, 0 0 .4em rgba(255, 90, 40, .55); }
.tagline { font: 800 15px var(--f-ui); letter-spacing: 4px; text-transform: uppercase; color: var(--ember); margin-top: -2px; }
.charsel { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.chartitle { display: flex; align-items: baseline; justify-content: space-between; font: 400 22px var(--f-num); letter-spacing: 1px; color: #fff; text-shadow: 0 2px 0 #000; }
.chartitle small { font: 600 13px var(--f-ui); letter-spacing: 0; color: var(--text-dim); }
.chartitle kbd { font-size: 11px; }
.chargrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.ctile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 7px 2px 5px; border-radius: 12px; cursor: pointer;
  font: 700 13px/1.05 var(--f-ui); color: var(--text-dim); background: linear-gradient(180deg, rgba(26, 38, 44, .9), rgba(10, 16, 19, .9)); border: 2px solid var(--line);
  box-shadow: 0 0 0 1px #000, 0 4px 10px rgba(0, 0, 0, .4); transition: transform .12s var(--pop), border-color .12s, box-shadow .12s; }
.ctile i { width: 42px; height: 42px; padding: 9px; border-radius: 50%; color: #fff8ec;
  background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--c2) 90%, #fff) 0%, var(--c2) 22%, var(--c1) 62%, #060a0b 100%);
  box-shadow: 0 0 0 2px #000, 0 0 0 4px color-mix(in srgb, var(--c1) 60%, #2e4148), inset 0 2px 0 rgba(255, 255, 255, .25); }
.ctile i svg { filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .75)); }
.ctile .cwep { position: absolute; top: 5px; left: 50%; margin-left: 12px; width: 22px; height: 22px; padding: 4px; border-radius: 50%; color: #fff8ec;
  background: radial-gradient(circle at 50% 30%, #ffb35a, #c9631a 60%, #4a1e06); box-shadow: 0 0 0 1.5px #000; }
.ctile span { max-width: 100%; min-height: 2.2em; padding: 0 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; line-height: 1.1; }
.ctile:hover { transform: translateY(-3px); border-color: #4b6871; color: var(--text); }
.ctile.sel { color: #fff; border-color: var(--ember); background: linear-gradient(180deg, rgba(90, 44, 14, .95), rgba(30, 16, 8, .95)); box-shadow: 0 0 0 1px #000, 0 0 20px rgba(255, 154, 58, .5); transform: translateY(-3px); }
.ctile.sel i { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--gold), 0 0 16px rgba(255, 210, 63, .6), inset 0 2px 0 rgba(255, 255, 255, .25); }
.charinfo { position: relative; min-height: 196px; padding: 12px 18px 12px; border-radius: 14px; text-align: left; background: var(--panel-bg); border: 2px solid var(--line); box-shadow: var(--panel-shadow); overflow: hidden; }
.charinfo::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--gold), var(--ember)); }
.charinfo .chead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.charinfo .cport { flex: 0 0 46px; width: 46px; height: 46px; padding: 9px; border-radius: 50%; color: #fff8ec;
  background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--c2) 90%, #fff) 0%, var(--c2) 22%, var(--c1) 62%, #060a0b 100%);
  box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--gold), 0 0 14px rgba(255, 210, 63, .45), inset 0 2px 0 rgba(255, 255, 255, .25); }
.charinfo .cport svg { filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .75)); }
.charinfo .cname { font: 400 32px/1 var(--f-num); color: #fff; text-shadow: 0 2px 0 #000; }
.charinfo .carch { padding: 3px 9px 2px; border-radius: 6px; font: 800 12px/1.2 var(--f-ui); letter-spacing: 1.5px; text-transform: uppercase; color: var(--teal); background: rgba(63, 224, 200, .1); border: 1px solid rgba(63, 224, 200, .35); }
.charinfo .cpitch { margin: 4px 0 10px; font: italic 500 16px/1.3 var(--f-ui); color: var(--text-dim); }
.charinfo .crow { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0; font: 600 16px/1.25 var(--f-ui); }
.charinfo .crow b { font: 400 18px/1.1 var(--f-num); color: #fff; letter-spacing: .3px; }
.charinfo .crow small { font: 800 11px var(--f-ui); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ember); margin-left: 6px; }
.charinfo .crow.pas small { color: var(--teal); }
.charinfo .cic { --cc: #e8701e; flex: 0 0 40px; width: 40px; height: 40px; padding: 8px; border-radius: 10px; color: #fff8ec;
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--cc) 85%, #fff) 0%, var(--cc) 38%, color-mix(in srgb, var(--cc) 35%, #000) 100%); box-shadow: 0 0 0 2px #000, inset 0 2px 0 rgba(255, 255, 255, .25); }
.charinfo .cic.pas { --cc: #1aa892; }
.charinfo .cdesc { font: 500 15px/1.3 var(--f-ui); color: var(--text-dim); margin-top: 2px; }
.charinfo .soon { font: italic 500 14px var(--f-ui); color: var(--ember); }
.charinfo .cstats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.charinfo .cstats span { padding: 4px 9px 3px; border-radius: 7px; background: rgba(125, 255, 122, .08); border: 1px solid rgba(125, 255, 122, .3); font: 700 14px var(--f-ui); color: #c9ffc0; }
.charinfo .cstats span.neg { background: rgba(255, 59, 78, .08); border-color: rgba(255, 59, 78, .35); color: #ffb3ba; }
.charinfo .cunlock { margin-top: 8px; font: 500 13px var(--f-ui); color: var(--text-dim); opacity: .7; }
details.howto { max-width: 740px; text-align: center; font: 500 15px/1.5 var(--f-ui); color: var(--text-dim); }
details.howto summary { cursor: pointer; font: 800 14px var(--f-ui); letter-spacing: 2px; text-transform: uppercase; color: var(--ember); list-style: none; text-align: center; margin-bottom: 6px; }
details.howto summary::-webkit-details-marker { display: none; }
.howto .keys { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin: 4px 0; color: var(--text); }
.howto .keys kbd { font-size: 13px; }
.howto b { color: #fff; }
.hint { margin-top: 8px; color: var(--text-dim); }
.credits { font: 500 12px var(--f-ui); color: var(--text-dim); opacity: .45; }
@media (max-width: 900px) { .chargrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .stage { display: none; } #start { background: rgba(5, 9, 11, .93); } }

#lockhint { display: none; position: absolute; left: 50%; top: 104px; transform: translateX(-50%); padding: 6px 14px; border-radius: 8px; background: rgba(7, 11, 13, .82); border: 1px solid var(--line); font: 600 14px var(--f-ui); color: var(--text-dim); white-space: nowrap; }
#lockhint b { color: var(--text); }

/* ---------------------------------------------------------------- powerup screen states */
body.timefreeze #game { filter: saturate(.25) brightness(1.05) contrast(1.05); }
body.timefreeze #vignette { opacity: .55 !important; background: radial-gradient(ellipse at center, transparent 50%, rgba(140, 200, 255, .55) 100%); }
body.raging #hud::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px rgba(170, 60, 255, .45); }

/* narrow windows (kept last so it overrides the base HUD rules): shrink the HUD, then stack the stage card under the HP block so nothing overlaps */
@media (max-width: 1000px) { #hud { zoom: .85; } }
@media (max-width: 780px) {
  #hud { zoom: .7; }
  #phase { top: 128px; left: 16px; transform: none; width: 250px; }
  #buffs { top: 208px; }
  #bossbar { top: 230px; width: 80vw; }
  #mmwrap { width: 136px; height: 136px; }
  #minimap { width: 124px; height: 124px; }
  #shrinecount, #debugline { display: none; }
  #combo { top: 170px; }
  #items { max-width: 58vw; }
}

/* ================================================================ mode menu, character select, character builder (src/menu.js, src/builder.js) */
.menuscreen { width: 100%; display: flex; flex-direction: column; align-items: stretch; }
.startleft.compact .logo { font-size: clamp(38px, 3.6vw, 64px); }
.startleft.compact .tagline { display: none; }
.startleft.compact { gap: 8px; }
.charsel > .btn.play { align-self: center; }
@media (min-width: 901px) { /* the big Play sits under the hero on the turntable, not over the character info */
  #menuScreen[data-screen="chars"] .charsel > .btn.play { position: fixed; left: 66%; bottom: 30px; transform: translateX(-50%); }
  #menuScreen[data-screen="chars"] .charsel > .btn.play:hover { transform: translateX(-50%) translateY(-3px) scale(1.03); }
}
.startleft.compact .ctile { padding: 6px 2px 4px; gap: 3px; }
.startleft.compact .ctile i { width: 36px; height: 36px; padding: 7px; }
.startleft.compact .ctile .cwep { margin-left: 9px; width: 20px; height: 20px; }
.startleft.compact .charinfo { min-height: 0; }
.startleft.compact .charinfo .cpitch { margin: 2px 0 6px; }
.startleft.compact .charinfo .crow { margin: 6px 0; }
.btn.tool.primary { border-color: #b8651e; background: linear-gradient(180deg, #7a3a10, #3a1a06); color: #fff3e0; }
.btn.tool.danger:hover, .btn.tool.danger.armed { border-color: var(--blood); color: #ffd0d4; box-shadow: 0 0 0 2px #000, 0 0 18px rgba(255, 59, 78, .45); }
.btn.tool.danger.armed { background: linear-gradient(180deg, #5a1420, #2a0a10); }
.btn.tool.off { opacity: .4; }
.btn.tool svg.gi { width: 18px; height: 18px; flex: 0 0 18px; }
.btn.tool.pulse { animation: savePulse 1.4s ease-in-out infinite; }
@keyframes savePulse { 50% { box-shadow: 0 0 0 2px #000, 0 0 22px rgba(255, 154, 58, .75); border-color: var(--ember); } }

/* ---- mode menu */
.modes { display: flex; flex-direction: column; gap: 10px; animation: popIn .25s var(--pop) backwards; }
.mode { position: relative; display: flex; align-items: center; gap: 16px; text-align: left; padding: 14px 18px; border-radius: 16px; color: var(--text);
  background: var(--panel-bg); border: 2px solid var(--line); box-shadow: var(--panel-shadow); font-family: var(--f-ui); }
.mode .mic { flex: 0 0 auto; width: 58px; height: 58px; padding: 12px; border-radius: 50%; color: #fff8ec;
  background: radial-gradient(circle at 45% 30%, #ffd9a0 0%, #ff9a3a 30%, #8a3410 75%, #2a0e04 100%); box-shadow: 0 0 0 2px #000, 0 0 0 4px #b8651e, 0 0 22px rgba(255, 154, 58, .45), inset 0 2px 0 rgba(255, 255, 255, .3); }
.mode .mtx { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.mode .mtx small { font: 800 12px var(--f-ui); letter-spacing: 1.8px; text-transform: uppercase; color: var(--ember); }
.mode .mtx b { font: 400 30px/1 var(--f-num); color: #fff; letter-spacing: .5px; text-shadow: 0 2px 0 #000; }
.mode .mtx span { font: 500 15px/1.3 var(--f-ui); color: var(--text-dim); }
.mode.main { cursor: pointer; padding: 20px 22px; background: linear-gradient(110deg, rgba(90, 40, 12, .95), rgba(26, 18, 14, .94) 55%, rgba(15, 23, 27, .94));
  border-color: #6a3a1a; transition: transform .12s var(--pop), border-color .12s, box-shadow .12s; }
.mode.main .mic { width: 72px; height: 72px; padding: 15px; }
.mode.main .mtx b { font-size: 40px; }
.mode.main:hover, .mode.main.sel { transform: translateY(-3px); border-color: var(--ember); box-shadow: 0 0 0 2px #000, 0 0 30px rgba(255, 154, 58, .45), inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 22px rgba(0, 0, 0, .5); }
.mode .mgo { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 800 12px var(--f-ui); letter-spacing: 1.5px; text-transform: uppercase; color: #ffd8a8; white-space: nowrap; }
.mode .mgo kbd { font-size: 14px; }
.mchar { font: 600 14px var(--f-ui); color: var(--text-dim); text-align: center; margin-top: -2px; }
.mchar b { color: #fff; }
.mine { padding: 2px 8px 1px; border-radius: 6px; font: 800 11px/1.3 var(--f-ui); letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); background: rgba(255, 210, 63, .1); border: 1px solid rgba(255, 210, 63, .4); }
.msec { font: 800 12px var(--f-ui); letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin: 6px 2px -2px; }
.mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mode.soon { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px 14px; opacity: .62; filter: saturate(.35); cursor: not-allowed; }
.mode.soon .mic { width: 40px; height: 40px; padding: 8px; background: radial-gradient(circle at 45% 30%, #9fb3b0, #3a4e54 60%, #0f171b); box-shadow: 0 0 0 2px #000, 0 0 0 3px #2e4148; }
.mode.soon .mtx b { font-size: 21px; }
.mode.soon .mtx span { font-size: 13px; }
.mode.soon em { position: absolute; top: 10px; right: 10px; padding: 3px 7px 2px; border-radius: 6px; font: 800 10px var(--f-ui); font-style: normal; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-0); background: var(--text-dim); }
.mpbtn { align-self: center; margin-top: 6px; font-size: 17px; }
.mpbtn svg.gi { width: 22px; height: 22px; color: var(--teal); }

/* ---- character select */
.chartop { display: flex; align-items: center; gap: 12px; }
.chartop .chartitle { flex: 1; }
.chartop .keys { font: 600 12px var(--f-ui); color: var(--text-dim); white-space: nowrap; } .chartop .keys kbd { font-size: 10px; }

.cshead { display: flex; align-items: baseline; justify-content: space-between; margin: 2px 2px -2px; font: 800 12px var(--f-ui); letter-spacing: 2px; text-transform: uppercase; color: var(--ember); }
.cshead small { font: 600 12px var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--text-dim); }
.buildrow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; align-items: stretch; }
.buildrow .buildhint { grid-column: span 6; align-self: center; padding: 0 8px; font: 500 14px/1.3 var(--f-ui); color: var(--text-dim); }
.btile { border-color: #5a4a2a; }
.btile .cwep.pas { background: radial-gradient(circle at 50% 30%, #7af0dc, #1aa892 60%, #06352e); }
.newtile { border-style: dashed; border-color: #4b6871; color: var(--teal); }
.newtile i { background: radial-gradient(circle at 45% 30%, #b8fff2 0%, #3fe0c8 30%, #10685c 75%, #031a17 100%) !important; box-shadow: 0 0 0 2px #000, 0 0 0 4px #1a6a60 !important; }
.newtile:hover { border-color: var(--teal); color: #fff; }
.charinfo .cval { margin-left: auto; padding: 3px 9px 2px; border-radius: 6px; font: 400 15px/1.2 var(--f-num); color: var(--gold); background: rgba(255, 210, 63, .08); border: 1px solid rgba(255, 210, 63, .3); }
.charinfo .carch.mine { color: var(--gold); background: rgba(255, 210, 63, .1); border-color: rgba(255, 210, 63, .4); }
.charinfo .cfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.charinfo .cfoot .cunlock { margin: 0; }
.charinfo .cbtns { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.charinfo .cbtns .btn.tool { font-size: 13px; padding: 6px 10px; }
.ctraits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ctraits span, .bsts span { padding: 4px 9px 3px; border-radius: 7px; font: 700 14px var(--f-ui); background: rgba(125, 255, 122, .08); border: 1px solid rgba(125, 255, 122, .3); color: #c9ffc0; }
.ctraits span small { font-weight: 600; opacity: .75; }
.ctraits span.flaw, .bsts span.flaw { background: rgba(255, 59, 78, .08); border-color: rgba(255, 59, 78, .35); color: #ffb3ba; }

/* ---- toast */
#gbToast { position: fixed; left: 50%; bottom: 34px; z-index: 30; max-width: min(560px, 90vw); padding: 10px 18px 9px; border-radius: 12px; pointer-events: none; text-align: center;
  font: 700 16px/1.3 var(--f-ui); color: var(--text); background: rgba(7, 11, 13, .94); border: 2px solid var(--teal); box-shadow: 0 0 0 2px #000, 0 8px 24px rgba(0, 0, 0, .6), 0 0 24px rgba(63, 224, 200, .25);
  opacity: 0; transform: translate(-50%, 16px); transition: opacity .18s, transform .25s var(--pop); }
#gbToast.show { opacity: 1; transform: translate(-50%, 0); }
#gbToast.bad { border-color: var(--blood); box-shadow: 0 0 0 2px #000, 0 8px 24px rgba(0, 0, 0, .6), 0 0 24px rgba(255, 59, 78, .3); }
#gbToast.warn { border-color: var(--ember); }

/* ---- builder: [options panel] [live hero] [summary] */
.builder { position: fixed; inset: 0; z-index: 12; display: none; }
.builder.show { display: block; }
body.building #hud, body.building #banner { visibility: hidden; }
.bwrap { position: absolute; inset: 0; display: grid; grid-template-columns: clamp(430px, 38vw, 640px) minmax(0, 1fr) clamp(290px, 23vw, 400px); grid-template-rows: auto minmax(0, 1fr); }
.btop { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: linear-gradient(180deg, rgba(5, 9, 11, .97), rgba(7, 12, 14, .9)); border-bottom: 2px solid var(--line); box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }
.btop .bback { font-size: 15px; padding: 9px 14px; } .btop .bback svg.gi { width: 18px; height: 18px; transform: scaleX(-1); }
.bnamewrap { display: flex; flex-direction: column; gap: 2px; flex: 0 1 360px; min-width: 160px; }
.bnamewrap small { font: 800 11px var(--f-ui); letter-spacing: 1.8px; text-transform: uppercase; color: var(--ember); }
.bname { width: 100%; padding: 6px 12px 5px; border-radius: 10px; font: 400 26px/1.1 var(--f-num); letter-spacing: .5px; color: #fff; background: rgba(0, 0, 0, .35); border: 2px solid var(--line); outline: none; user-select: text; }
.bname:focus { border-color: var(--ember); box-shadow: 0 0 0 2px #000, 0 0 16px rgba(255, 154, 58, .35); }
.bname::placeholder { color: #5f7471; }
.bslot { display: flex; flex-direction: column; gap: 2px; font: 600 13px var(--f-ui); color: var(--text-dim); white-space: nowrap; }
.bslot b { font: 400 17px var(--f-num); color: #fff; }
.bslot.dirty span { color: var(--ember); }
.bacts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bleft { display: flex; flex-direction: column; min-height: 0; background: linear-gradient(90deg, rgba(5, 9, 11, .97), rgba(7, 12, 14, .93)); border-right: 2px solid var(--line); }
.btabs { display: flex; align-items: stretch; gap: 4px; padding: 10px 12px 0; border-bottom: 2px solid var(--line); }
.btabs .tgrp { writing-mode: vertical-rl; transform: rotate(180deg); font: 800 10px var(--f-ui); letter-spacing: 1.5px; text-transform: uppercase; color: #5f7471; padding: 2px 0; margin-left: 4px; }
.btab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 8px; border: 2px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; cursor: pointer;
  font: 800 13px var(--f-ui); letter-spacing: .8px; text-transform: uppercase; color: var(--text-dim); background: none; margin-bottom: -2px; }
.btab em { font: 400 16px/1 var(--f-num); font-style: normal; color: #5f7471; }
.btab:hover { color: var(--text); }
.btab.on { color: #fff; background: linear-gradient(180deg, rgba(42, 62, 70, .9), rgba(15, 23, 27, 1)); border-color: var(--line); }
.btab.on em { color: var(--ember); }
.btab.warn::after { content: ''; position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--blood); box-shadow: 0 0 8px var(--blood); }
.bpanel { flex: 1; overflow-y: auto; padding: 6px 16px 24px; scrollbar-width: thin; scrollbar-color: #2e4148 transparent; }
.bsec { margin-top: 14px; }
.bsh { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; font: 400 19px var(--f-num); letter-spacing: .4px; color: #fff; text-shadow: 0 2px 0 #000; }
.bsh small { font: 600 13px var(--f-ui); color: var(--text-dim); text-shadow: none; letter-spacing: 0; }
.bsh .fl { font: 400 15px var(--f-num); color: #ffb3ba; }
.bnote { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 12px; border-radius: 10px; font: 500 14px/1.35 var(--f-ui); color: var(--text-dim); background: rgba(63, 224, 200, .06); border: 1px solid rgba(63, 224, 200, .25); }
.bnote b { color: #fff; } .bnote svg.gi { width: 30px; height: 30px; flex: 0 0 30px; color: var(--teal); }
.bnote.small { font-size: 13.5px; }
/* swatches + option chips */
.sws { display: grid; grid-template-columns: repeat(var(--cols, 7), 34px); gap: 7px; }
.sw { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; border: 0; padding: 0; background: radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 45%, color-mix(in srgb, var(--c) 70%, #000));
  box-shadow: 0 0 0 2px #000, 0 0 0 3px #2e4148, 0 3px 6px rgba(0, 0, 0, .5); transition: transform .12s var(--pop), box-shadow .12s; }
.sw:hover { transform: scale(1.12); }
.sw.on { transform: scale(1.12); box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff, 0 0 14px rgba(255, 255, 255, .45); }
.sw.off, .opt.off, .tog.off, .ocard.off { opacity: .3; cursor: not-allowed; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.opt, .tog { padding: 7px 12px 6px; border-radius: 9px; cursor: pointer; font: 700 14px var(--f-ui); color: var(--text-dim); background: linear-gradient(180deg, #1f2e34, #121b1f); border: 2px solid var(--line); box-shadow: 0 0 0 1px #000;
  transition: transform .1s var(--pop), border-color .1s, color .1s; }
.opt:hover, .tog:hover { color: var(--text); border-color: #4b6871; transform: translateY(-1px); }
.opt.on { color: #fff; border-color: var(--ember); background: linear-gradient(180deg, #5a2c0e, #2a1406); box-shadow: 0 0 0 1px #000, 0 0 12px rgba(255, 154, 58, .4); }
.opt.preset { color: #c8f4ec; border-color: #1f5a52; }
.opt.preset:hover { border-color: var(--teal); }
.tog { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; }
.opts .tog { margin-top: 0; }
.tog i { width: 30px; height: 16px; border-radius: 8px; background: #0a1013; border: 2px solid var(--line); position: relative; }
.tog i::after { content: ''; position: absolute; top: 1px; left: 1px; width: 10px; height: 10px; border-radius: 50%; background: #5f7471; transition: transform .15s var(--pop), background .15s; }
.tog.on { color: #fff; border-color: var(--teal); }
.tog.on i { border-color: var(--teal); } .tog.on i::after { transform: translateX(14px); background: var(--teal); box-shadow: 0 0 8px var(--teal); }
#builder .cards { display: grid; gap: 8px; padding-top: 0; } /* scoped: the level-up modal also uses .cards */
#builder .cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ocard { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: 12px; cursor: pointer; font: 700 13.5px/1.1 var(--f-ui); color: var(--text-dim);
  background: linear-gradient(180deg, rgba(26, 38, 44, .9), rgba(10, 16, 19, .9)); border: 2px solid var(--line); box-shadow: 0 0 0 1px #000; transition: transform .12s var(--pop), border-color .12s; }
.ocard i { width: 44px; height: 44px; padding: 9px; border-radius: 50%; color: #fff8ec; background: radial-gradient(circle at 45% 30%, #9fb3b0, #3a4e54 60%, #0f171b); box-shadow: 0 0 0 2px #000, 0 0 0 3px #2e4148; display: grid; place-items: center; }
.ocard:hover { transform: translateY(-2px); border-color: #4b6871; color: var(--text); }
.ocard.on { color: #fff; border-color: var(--ember); background: linear-gradient(180deg, rgba(90, 44, 14, .95), rgba(30, 16, 8, .95)); box-shadow: 0 0 0 1px #000, 0 0 16px rgba(255, 154, 58, .45); }
.ocard.on i { background: radial-gradient(circle at 45% 30%, #ffd9a0, #ff9a3a 35%, #8a3410 80%); box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--gold); }
.bodyic { padding: 0 !important; }
.bodyic span { display: block; width: 14px; height: 26px; border-radius: 7px 7px 4px 4px; background: #fff8ec; box-shadow: 0 -12px 0 -3px #fff8ec; margin-top: 8px; }
.b-slim span { width: 10px; } .b-bulky span { width: 22px; height: 24px; border-radius: 9px 9px 5px 5px; } .b-lanky span { width: 9px; height: 30px; margin-top: 10px; }
.brange { display: flex; align-items: center; gap: 14px; }
.brange input { flex: 1; accent-color: var(--ember); }
.brange b { min-width: 120px; font: 400 16px var(--f-num); color: #fff; }
/* weapons */
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 7px; }
.wcard { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 3px 6px; border-radius: 11px; cursor: pointer; font: 700 12px/1.05 var(--f-ui); color: var(--text-dim); text-align: center;
  background: linear-gradient(180deg, rgba(26, 38, 44, .9), rgba(10, 16, 19, .9)); border: 2px solid var(--line); box-shadow: 0 0 0 1px #000; transition: transform .12s var(--pop), border-color .12s; }
.wcard i { width: 40px; height: 40px; padding: 8px; border-radius: 50%; color: #fff8ec; background: radial-gradient(circle at 50% 28%, #ffc98a 0%, #e8701e 40%, #4a1e06 100%); box-shadow: 0 0 0 2px #000, inset 0 2px 0 rgba(255, 255, 255, .25); }
.wcard span { min-height: 2.1em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wcard:hover { transform: translateY(-2px); border-color: #4b6871; color: var(--text); }
.wcard.on { color: #fff; border-color: var(--ember); background: linear-gradient(180deg, rgba(90, 44, 14, .95), rgba(30, 16, 8, .95)); box-shadow: 0 0 0 1px #000, 0 0 16px rgba(255, 154, 58, .5); }
.wcard.on i { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--gold), 0 0 14px rgba(255, 210, 63, .6); }
.bdetail { display: flex; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--panel-bg); border: 2px solid var(--line); }
.bdetail b { font: 400 19px var(--f-num); color: #fff; }
.builder .cic { --cc: #e8701e; flex: 0 0 40px; width: 40px; height: 40px; padding: 8px; border-radius: 10px; color: #fff8ec;
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--cc) 85%, #fff) 0%, var(--cc) 38%, color-mix(in srgb, var(--cc) 35%, #000) 100%); box-shadow: 0 0 0 2px #000, inset 0 2px 0 rgba(255, 255, 255, .25); }
.builder .cic.pas { --cc: #1aa892; }
.builder .cdesc { font: 500 14.5px/1.3 var(--f-ui); color: var(--text-dim); margin-top: 2px; }
/* passives */
.plist { display: flex; flex-direction: column; gap: 6px; }
.pcard { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; cursor: pointer; text-align: left; color: var(--text);
  background: linear-gradient(180deg, rgba(26, 38, 44, .9), rgba(10, 16, 19, .9)); border: 2px solid var(--line); box-shadow: 0 0 0 1px #000; transition: transform .12s var(--pop), border-color .12s; }
.pcard > i { flex: 0 0 42px; width: 42px; height: 42px; padding: 8px; border-radius: 50%; color: #fff8ec; background: radial-gradient(circle at 50% 28%, #8af5e2 0%, #1aa892 45%, #06352e 100%); box-shadow: 0 0 0 2px #000, inset 0 2px 0 rgba(255, 255, 255, .25); }
.pcard .pt { flex: 1; min-width: 0; }
.pcard .pt b { font: 400 17px/1.1 var(--f-num); color: #fff; letter-spacing: .3px; }
.pcard .pt small { margin-left: 8px; font: 700 12px var(--f-ui); color: var(--teal); }
.pcard .pt p { margin: 2px 0 0; font: 500 13.5px/1.25 var(--f-ui); color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .cost, .trait em { flex: 0 0 auto; display: flex; align-items: baseline; gap: 2px; padding: 4px 8px 3px; border-radius: 8px; font: 400 22px/1 var(--f-num); font-style: normal; color: var(--gold); background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 210, 63, .3); }
.pcard .cost small { font: 700 11px var(--f-ui); color: var(--text-dim); }
.pcard:hover { transform: translateX(2px); border-color: #4b6871; }
.pcard.on { border-color: var(--teal); background: linear-gradient(180deg, rgba(14, 70, 62, .95), rgba(6, 26, 24, .95)); box-shadow: 0 0 0 1px #000, 0 0 18px rgba(63, 224, 200, .4); }
.pcard.on .pt p { -webkit-line-clamp: 6; color: #cfe8e4; }
/* traits */
.tcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trait { display: flex; align-items: center; gap: 9px; width: 100%; margin-bottom: 6px; padding: 7px 8px; border-radius: 11px; cursor: pointer; text-align: left; color: var(--text);
  background: linear-gradient(180deg, rgba(26, 38, 44, .9), rgba(10, 16, 19, .9)); border: 2px solid var(--line); box-shadow: 0 0 0 1px #000; transition: transform .1s var(--pop), border-color .1s; }
.trait > i { flex: 0 0 32px; width: 32px; height: 32px; padding: 6px; border-radius: 50%; color: #fff8ec; box-shadow: 0 0 0 2px #000, inset 0 2px 0 rgba(255, 255, 255, .25); }
.trait.perk > i { background: radial-gradient(circle at 50% 28%, #c9ffc0, #3fa83a 50%, #0e3a0c); }
.trait.flaw > i { background: radial-gradient(circle at 50% 28%, #ffc0c6, #c8303e 50%, #3a0810); }
.trait .tt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trait .tt b { font: 800 14.5px/1.15 var(--f-ui); color: #fff; }
.trait .tt span { font: 600 13px/1.2 var(--f-ui); color: var(--text-dim); }
.trait em { font-size: 19px; }
.trait.perk em { color: #ffd2a0; border-color: rgba(255, 154, 58, .35); }
.trait.flaw em { color: #9dffa0; border-color: rgba(125, 255, 122, .35); }
.trait:hover { transform: translateY(-1px); border-color: #4b6871; }
.trait.perk.on { border-color: #5fd65a; background: linear-gradient(180deg, rgba(30, 80, 30, .95), rgba(10, 30, 12, .95)); box-shadow: 0 0 0 1px #000, 0 0 14px rgba(125, 255, 122, .35); }
.trait.flaw.on { border-color: var(--blood); background: linear-gradient(180deg, rgba(90, 20, 32, .95), rgba(36, 8, 14, .95)); box-shadow: 0 0 0 1px #000, 0 0 14px rgba(255, 59, 78, .4); }
.trait.off { opacity: .38; cursor: not-allowed; transform: none; }
/* stage */
.bstage { position: relative; cursor: grab; touch-action: none; background: radial-gradient(ellipse 60% 22% at 50% 93%, rgba(0, 0, 0, .35), transparent 70%); }
.bstage.drag { cursor: grabbing; }
.bhint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 5px 12px; border-radius: 8px; font: 700 12px var(--f-ui); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); background: rgba(7, 11, 13, .7); pointer-events: none; }
/* summary */
.bsum { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; overflow-y: auto; background: linear-gradient(270deg, rgba(5, 9, 11, .97), rgba(7, 12, 14, .93)); border-left: 2px solid var(--line); }
.bpts { padding: 12px 14px; border-radius: 14px; background: var(--panel-bg); border: 2px solid var(--line); box-shadow: var(--panel-shadow); }
.bptn { display: flex; align-items: baseline; gap: 10px; }
.bptn b { font: 400 56px/0.9 var(--f-num); color: var(--gold); -webkit-text-stroke: .06em #000; paint-order: stroke fill; text-shadow: 0 3px 0 #000, 0 0 18px rgba(255, 210, 63, .45); }
.bptn span { font: 800 13px var(--f-ui); letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-dim); }
.bpts.over { border-color: var(--blood); } .bpts.over .bptn b { color: #ff6a78; text-shadow: 0 3px 0 #000, 0 0 18px rgba(255, 59, 78, .55); }
.bpts.even .bptn b { color: #9dffa0; text-shadow: 0 3px 0 #000, 0 0 18px rgba(125, 255, 122, .45); }
.bbar { display: flex; height: 10px; margin: 10px 0 8px; border-radius: 5px; overflow: hidden; background: rgba(125, 255, 122, .16); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); }
.bbar i { display: block; height: 100%; transition: width .25s var(--pop); }
.bbar .sp { background: linear-gradient(180deg, #7af0dc, #1aa892); } .bbar .sk { background: linear-gradient(180deg, #ffc98a, #e8701e); }
.bpts.over .bbar { background: rgba(255, 59, 78, .5); }
.bbrk { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 3px 10px; font: 600 13px var(--f-ui); color: var(--text-dim); }
.bbrk b { font: 400 15px var(--f-num); color: #fff; text-align: right; padding-right: 8px; }
.bsrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; cursor: pointer; background: rgba(26, 38, 44, .55); border: 2px solid var(--line); }
.bsrow small { display: block; font: 800 11px var(--f-ui); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ember); }
.bsrow.pas small { color: var(--teal); }
.bsrow b { font: 400 17px/1.1 var(--f-num); color: #fff; }
.bsrow.empty { border-color: var(--blood); border-style: dashed; } .bsrow.empty b { color: #ffb3ba; }
.bsrow:hover { border-color: #4b6871; }
.bsts { display: flex; flex-wrap: wrap; gap: 5px; cursor: pointer; }
.bsts em { font: italic 500 14px var(--f-ui); color: var(--text-dim); }
.bsts span { font-size: 13px; padding: 3px 8px 2px; }
.bsum .cstats { display: flex; flex-wrap: wrap; gap: 5px; }
.bsum .cstats span { padding: 3px 8px 2px; border-radius: 7px; background: rgba(125, 255, 122, .08); border: 1px solid rgba(125, 255, 122, .3); font: 700 13px var(--f-ui); color: #c9ffc0; }
.bsum .cstats span.neg { background: rgba(255, 59, 78, .08); border-color: rgba(255, 59, 78, .35); color: #ffb3ba; }
.berr { padding: 8px 12px; border-radius: 10px; font: 700 14px/1.35 var(--f-ui); color: #ffc0c6; background: rgba(255, 59, 78, .1); border: 1px solid rgba(255, 59, 78, .4); }
.bok { padding: 8px 12px; border-radius: 10px; font: 700 14px/1.35 var(--f-ui); color: #c9ffc0; background: rgba(125, 255, 122, .07); border: 1px solid rgba(125, 255, 122, .3); }
.btn.play.bplay { position: static; min-width: 0; width: 100%; margin-top: auto; font-size: 34px; padding: 12px 20px 14px; }
.btn.play.bplay.off { filter: grayscale(.8) brightness(.7); }
@media (max-width: 1100px) { .bacts .btn.tool .optlbl { display: none; } .bslot { display: none; } }
@media (max-width: 900px) { /* phones / narrow windows: one scrolling column, no 3D stage */
  .bwrap { display: block; overflow-y: auto; overflow-x: hidden; background: rgba(5, 9, 11, .96); }
  .bstage { display: none; }
  .bleft { display: block; border-right: 0; }
  .bpanel { overflow: visible; padding-bottom: 12px; }
  .btabs { overflow-x: auto; scrollbar-width: none; padding: 8px 8px 0; } .btabs .tgrp { display: none; } .btab { flex: 0 0 auto; min-width: 58px; padding: 6px 6px 7px; font-size: 12px; }
  .bsum { overflow: visible; border-left: 0; border-top: 2px solid var(--line); }
  .btop { flex-wrap: wrap; gap: 8px; } .bnamewrap { flex: 1 1 200px; } .bacts { margin-left: 0; width: 100%; justify-content: flex-start; }
  .bacts .btn.tool { padding: 7px 10px; font-size: 13px; }
  .tcols { grid-template-columns: 1fr; }
  #builder .cards.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mgrid { grid-template-columns: 1fr; }
  .buildrow { grid-template-columns: repeat(5, minmax(0, 1fr)); } .buildrow .buildhint { grid-column: 1 / -1; }
  .chartop { flex-wrap: wrap; } .chartop .keys { display: none; }
  .mode.main { flex-wrap: wrap; padding: 14px; gap: 12px; } .mode.main .mic { width: 52px; height: 52px; padding: 10px; } .mode.main .mtx b { font-size: 30px; }
  .mode .mgo { display: none; }
  .charinfo .cbtns { margin-left: 0; width: 100%; }
}
.btn .arr { font: 800 20px/0.8 var(--f-ui); letter-spacing: 0; }
.bstart .bsh { font-size: 16px; margin-bottom: 4px; }
.bstg { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 1px 10px; font: 600 13px/1.5 var(--f-ui); color: #5f7471; }
.bstg b { font: 400 14px/1.5 var(--f-num); color: var(--text-dim); text-align: right; padding-right: 6px; }
.bstg .up { color: #9dffa0; } .bstg .down { color: #ff8a96; }
.bstg span.up, .bstg span.down { color: var(--text); }
.bsum .btn.play.bplay { position: sticky; bottom: 0; flex: 0 0 auto; }

/* ---------------------------------------------------------------- Rivals: curse cards + level-up layouts (src/ui.js, src/rivals.js) */
.card.cat-curse { --cc: #ff3b4e; background: linear-gradient(180deg, #4e0b17 0%, #24070d 44%, #0d0306 100%); border-color: #ff3b4e;
  box-shadow: 0 0 0 2px #000, 0 0 26px rgba(255, 40, 60, .45), inset 0 1px 0 rgba(255, 200, 200, .14), 0 16px 28px rgba(0, 0, 0, .55); }
.card.cat-curse:hover, .card.cat-curse.sel { box-shadow: 0 0 0 2px #000, 0 0 0 5px rgba(255, 59, 78, .6), 0 0 46px rgba(255, 40, 60, .75), inset 0 1px 0 rgba(255, 200, 200, .18), 0 22px 34px rgba(0, 0, 0, .6); }
.card.cat-curse .shine::after { content: ''; position: absolute; inset: -30% -10% auto; height: 70%; background: radial-gradient(ellipse at 50% 0%, rgba(255, 60, 80, .28), transparent 70%); animation: rvSmoke 3.2s ease-in-out infinite alternate; }
@keyframes rvSmoke { to { transform: translateY(14%) scaleX(1.15); opacity: .55; } }
.card.cat-curse .cbadge { color: #ffc2c8; background: linear-gradient(180deg, rgba(255, 59, 78, .42), transparent); }
.card.cat-curse .cmed { color: #fff0f0; background: radial-gradient(circle at 50% 30%, #ff9aa4 0%, #e0283c 32%, #5a0814 74%, #120205 100%);
  box-shadow: 0 0 0 3px #000, 0 0 0 6px #ff3b4e, 0 0 30px rgba(255, 59, 78, .8), inset 0 3px 0 rgba(255, 255, 255, .3), inset 0 -6px 12px rgba(0, 0, 0, .5); }
.card.cat-curse .ctitle { color: #ffe8e4; text-shadow: 0 2px 0 #000, 0 0 14px rgba(255, 40, 60, .6); }
.card.cat-curse .cdesc.main { color: #f4dadc; font-size: 15px; }
.card .ctarget { margin-top: auto; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px 7px; padding: 7px 10px; border-radius: 9px;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 59, 78, .5); }
.card .ctarget small { font: 800 12px/1 var(--f-ui); letter-spacing: 2px; text-transform: uppercase; color: #ff8a94; }
.card .ctarget b { min-width: 0; font: 400 20px/1.05 var(--f-num); color: hsl(var(--h) 85% 72%); text-shadow: 0 2px 0 #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .ctarget em { font: 800 11px/1 var(--f-ui); font-style: normal; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 6px 2px; border-radius: 5px; background: var(--gold); color: #1a1204; }
.card.cat-counter { --cc: var(--rc); min-height: 0; }
.card.cat-counter .chead b { color: var(--rc); text-shadow: 0 2px 0 #000, 0 0 14px color-mix(in srgb, var(--rc) 55%, transparent); }
.modal.rv .msub b.rvname { color: hsl(var(--h) 85% 72%); letter-spacing: 1px; }
.modal.rv-alt .mtitle, .modal.rv-ghost .mtitle { text-shadow: 0 .07em 0 #000, 0 0 .55em rgba(255, 40, 60, .7); }
.modal.rv-ghost .mtitle { color: #e6f0ff; }
/* 3 + 3: three upgrades, then a row of three smaller curses — one pick in total (compact so both rows fit at 1280 × 720) */
.modal.rv-six { justify-content: safe center; overflow-y: auto; }
.modal.rv-six .lvwrap { max-height: none; }
.modal.rv-six .mtitle { font-size: clamp(30px, 3.4vw, 46px); }
.modal.rv-six .msub { margin-top: -4px; }
.modal.rv-six .lvmain { gap: 7px; }
.modal.rv-six .lvtools { margin-top: 2px; }
.modal.rv-six .cards { padding-top: 4px; }
.modal.rv-six .cards:not(.ccurse) .card { min-height: 0; padding-bottom: 10px; }
.modal.rv-six .cards:not(.ccurse) .card .cmedwrap { width: 74px; height: 74px; margin: 4px 0 0; }
.modal.rv-six .cards:not(.ccurse) .card .cmed { width: 62px; height: 62px; padding: 12px; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--rc), 0 0 18px color-mix(in srgb, var(--rc) 70%, transparent); }
.modal.rv-six .cards:not(.ccurse) .card .rays { inset: -20px; }
.modal.rv-six .cards:not(.ccurse) .card .ctitle { font-size: clamp(20px, 1.6vw, 24px); }
.modal.rv-six .cards:not(.ccurse) .card .crib { margin-top: 4px; }
.modal.rv-six .cards:not(.ccurse) .card .cstat { margin-top: 7px; gap: 4px; }
.modal.rv-six .cards:not(.ccurse) .card .chead b { font-size: clamp(26px, 2.2vw, 32px); }
.modal.rv-six .cards:not(.ccurse) .card .cdesc { font-size: 13.5px; line-height: 1.22; padding-top: 7px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rvor { display: flex; align-items: center; gap: 12px; width: min(760px, 92%); font: 800 13px/1 var(--f-ui); letter-spacing: 3px; text-transform: uppercase; color: #ff8a94; text-shadow: 0 1px 2px #000; }
.rvor::before, .rvor::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 59, 78, .7), transparent); }
.cards.ccurse { gap: 14px; padding-top: 2px; }
.cards.ccurse .card { width: clamp(180px, 13.5vw, 216px); min-height: 0; padding: 0 12px 10px; border-radius: 13px; }
.cards.ccurse .card .cbadge { margin: 0 -12px; padding: 5px 8px 4px; font-size: 11px; border-radius: 11px 11px 0 0; }
.cards.ccurse .card .cmedwrap { width: 64px; height: 64px; margin: 4px 0 0; }
.cards.ccurse .card .cmed { width: 54px; height: 54px; padding: 10px; box-shadow: 0 0 0 2px #000, 0 0 0 4px #ff3b4e, 0 0 18px rgba(255, 59, 78, .7); }
.cards.ccurse .card .ctitle { font-size: 19px; margin-top: 2px; }
.cards.ccurse .card .cdesc.main { font-size: 13px; line-height: 1.22; padding-top: 5px; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cards.ccurse .card .ctarget { margin-top: 6px; padding: 4px 7px; gap: 5px; } .cards.ccurse .card .ctarget b { font-size: 16px; }
.cards.ccurse .card .ckey { font-size: 16px; top: -10px; left: -8px; }
.cards.ccurse .card:hover, .cards.ccurse .card.sel { transform: translateY(-6px); }