/* =====================================================================
   산군을 베다 — UI v1 design system ("ink panels, restrained neon"; spec: docs/ui_v1_spec.md)
   One container treatment: opaque ink panel + one thin muted-brass line (no border-image frames, no container glow).
   Colour roles: gold = progress / reward / primary action, cyan = current selection / player ability, red = danger,
   magenta = Sangun / special only. Brush font (GameTitle) only for the logo and screen titles.
   Class colour language is kept for class badges only: Hunter cyan/green (.k-hunter), Guardian crimson/gold (.k-general), shared silver.
   ===================================================================== */
@font-face{font-family:'GameBody';src:url('assets/fonts/body.woff2') format('woff2');font-display:swap}
@font-face{font-family:'GameTitle';src:url('assets/fonts/title.woff2') format('woff2');font-display:swap}
:root{
  /* surfaces */
  --ink-0:#07080e;--ink-1:#0e1019;--ink-2:#151826;--ink-3:#1d2133;
  --line:#4a4234;--line-hi:#8c7650;--line-soft:rgba(255,255,255,.08);
  /* text */
  --tx:#ece5d5;--tx-hi:#fbf6ea;--tx-dim:#b1aab9;--tx-mute:#8d879a;
  /* roles */
  --gold:#e9c46a;--gold-tx:#efd79a;--cyan:#4fd8e8;--red:#e5484d;--red-tx:#f2a0a2;--mag:#ff2a9a;
  /* legacy aliases (shop / codex / relic screens) */
  --gld:var(--gold);--cyn:var(--cyan);--teal:#2f6f74;--ink:var(--ink-1);
  --hun-a:#3ff0ff;--hun-b:#4dffa0;--gen-a:#ff3048;--gen-b:#ffd34a;
  --txt:var(--tx);--txt-hi:var(--tx-hi);--txt-dim:var(--tx-dim);--txt-mute:var(--tx-mute);
  /* type */
  --ff-body:'GameBody','Noto Serif KR','Noto Serif CJK KR','AppleMyungjo','Batang',serif;
  --ff-title:'GameTitle','GameBody','Noto Serif KR','Batang',serif;
  --fs-h:clamp(24px,4.6vmin,34px);--fs-l:17px;--fs-m:15px;--fs-s:13px;--fs-xs:12px;
  /* spacing / sizes */
  --g1:4px;--g2:8px;--g3:12px;--g4:16px;--g5:24px;
  --bh-big:52px;--bh:44px;--bh-sm:36px;
  --r-panel:6px;--r:4px;
  --hudb:96px;
}
@media (max-width:420px){:root{--fs-m:14px;--fs-l:16px}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--ink-0);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;font-family:var(--ff-body);color:var(--tx);font-size:var(--fs-m)}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
#ui{position:fixed;inset:0;pointer-events:none}
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:auto;padding:var(--g3);overflow:auto}
.screen.dim{background:rgba(5,6,11,.72)}
.hidden{display:none!important}
/* v2.6.2: no ad UI unless the platform confirmed ads (platform.js toggles body.no-ads); title inert until assets are loaded */
body.no-ads .ad-only{display:none!important}
body.booting #ui, body.booting #ui *{pointer-events:none!important}
small,.han{font-size:var(--fs-xs);color:var(--tx-mute)}
b,.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- pixel icons (content, not decoration: kept as is) */
.ico{--s:24px;display:inline-block;flex:none;width:var(--s);height:var(--s);vertical-align:middle;background:url('assets/ui/icons.png') no-repeat;
  background-size:calc(var(--s) * var(--icon-cols,8)) calc(var(--s) * var(--icon-rows,14));background-position:calc(var(--x,0) * var(--s) * -1) calc(var(--y,0) * var(--s) * -1);image-rendering:pixelated}
.ico.s32{--s:32px}.ico.s48{--s:48px}.ico.s16{--s:16px}
/* one icon tile spec everywhere (cards, codex, reveal, unlock) */
.icbox{display:inline-block;flex:none;line-height:0;padding:4px;background:var(--ink-0);border:1px solid var(--line-soft);border-radius:3px;image-rendering:pixelated}

/* ---------- containers: one ink panel, one brass line */
.panel{background:linear-gradient(rgba(14,16,25,.965),rgba(14,16,25,.965)),url('assets/ui/hanji.png') repeat;border:1px solid var(--line);border-radius:var(--r-panel);
  box-shadow:0 0 0 1px rgba(0,0,0,.55),0 16px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);
  padding:var(--g4);width:min(560px,96vw);max-height:94vh;overflow:auto;text-align:center;display:flex;flex-direction:column;gap:var(--g3);scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  animation:panelIn .22s ease-out}
.frame{background:var(--ink-2);border:1px solid var(--line-soft);border-radius:var(--r);padding:var(--g2) var(--g3)}
@keyframes panelIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.panel>*{flex:none}
.panel h2{margin:0;font-family:var(--ff-title);font-weight:normal;font-size:var(--fs-h);line-height:1.15;color:var(--tx-hi);text-shadow:0 2px 0 rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;gap:var(--g2);flex-wrap:wrap}
.panel h2.red{color:#f08a8d}
.panel h2 .gold-inline{font-family:var(--ff-body);font-size:var(--fs-m)}
.hint{color:var(--tx-dim);font-size:var(--fs-s);margin:0;line-height:1.45}
.cap,.st-cap{font-size:var(--fs-xs);color:var(--tx-mute);letter-spacing:.06em;text-align:center}

/* ---------- buttons: primary (gold face) / secondary (ink + brass) / ghost; three sizes */
.btn{font-family:inherit;font-size:var(--fs-m);line-height:1.2;min-height:var(--bh);min-width:200px;padding:5px 14px;color:var(--tx);cursor:pointer;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--g2);max-width:100%;position:relative;
  transition:background-color .12s,border-color .12s,color .12s,transform .06s}
.btn:hover{background:var(--ink-3);border-color:var(--line-hi);color:var(--tx-hi)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.card:focus-visible,.chr:focus-visible,.tab:focus-visible,.hud-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.btn.big{min-height:var(--bh-big);min-width:260px;font-size:var(--fs-l);letter-spacing:.04em;color:#1b1406;background:linear-gradient(#f2d27e,#d9ad4a);border-color:#f7e1a3;
  box-shadow:0 2px 0 #6b5122,0 8px 18px rgba(0,0,0,.35)}
.btn.big:hover{background:linear-gradient(#f8dd93,#e4b957);border-color:#fff1c6;color:#1b1406}
.btn.big:active{box-shadow:0 1px 0 #6b5122,0 4px 10px rgba(0,0,0,.35)}
.btn.small{min-height:var(--bh-sm);min-width:0;padding:3px 10px;font-size:var(--fs-s)}
.btn.icon-only{padding:0 6px;min-width:var(--bh-sm)}
.btn.ghost{background:rgba(14,16,25,.55);border-color:var(--line-soft);color:var(--tx-dim)}
.btn.ghost:hover{border-color:var(--line);color:var(--tx)}
/* rewarded / coin offers: secondary button, gold text (never a gold face that competes with the primary action) */
.btn.ad{color:var(--gold-tx);border-color:#6b5a32}
.btn.ad:hover{color:#fff0c6}
.btn:disabled,.btn:disabled:hover{background:#12131b;border-color:rgba(255,255,255,.06);color:#6f6a7a;cursor:default;transform:none;box-shadow:none}
.btn.big:disabled{background:#2a2618;border-color:#3a3424;color:#7a705a}
.btn:disabled .ico{filter:grayscale(1) brightness(.7)}
.gold-inline{color:var(--gold);display:inline-flex;align-items:center;gap:var(--g1);margin-left:var(--g1);font-variant-numeric:tabular-nums}
.menu{display:flex;flex-direction:column;gap:var(--g2);align-items:center;width:100%}
.menu>.btn{width:min(320px,100%)}
.row{display:flex;gap:var(--g2);justify-content:center;flex-wrap:wrap}
.row .btn{min-width:150px}
.row.tight .btn{min-width:0}
/* compact secondary tiles (title toolbar) */
.toolbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--g1);width:min(380px,100%)}
.btn.tool{min-width:0;min-height:56px;padding:2px;flex-direction:column;gap:2px;font-size:var(--fs-xs);line-height:1.15;white-space:nowrap;background:rgba(14,16,25,.6);border-color:var(--line-soft);color:var(--tx-dim)}
.btn.tool:hover{border-color:var(--line);color:var(--tx)}
.badge{position:absolute;top:-7px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--gold);color:#1b1406;font-size:var(--fs-xs);line-height:20px;box-shadow:0 0 0 2px var(--ink-0);font-variant-numeric:tabular-nums}

/* ---------- Art speech bubble (Art = the blade spirit: the one magenta name tag) */
.art-bubble{background:rgba(21,24,38,.92);border:1px solid var(--line-soft);border-radius:var(--r);padding:6px 10px;
  font-size:var(--fs-s);color:#e3dccb;width:min(520px,100%);line-height:1.5;text-align:left}
.art-bubble::before{content:'Art';display:inline-block;background:#b0186f;color:#fff;font-size:var(--fs-xs);line-height:18px;padding:0 6px;margin-right:7px;border-radius:2px;vertical-align:1px}

/* ---------- TITLE: left = brand + actions, centre = live battle (dimmed), right = one loadout panel, bottom = controls strip */
#scr-title{align-items:stretch;padding:0;background:linear-gradient(90deg,rgba(7,8,14,.9) 0,rgba(7,8,14,.74) 30%,rgba(7,8,14,.38) 44%,rgba(7,8,14,.38) 56%,rgba(7,8,14,.74) 70%,rgba(7,8,14,.9) 100%)}
.title-wrap{position:relative;z-index:1;width:100%;height:100%;display:grid;grid-template-columns:minmax(280px,.9fr) minmax(24px,.35fr) minmax(330px,1.1fr);grid-template-rows:minmax(0,1fr) auto;
  align-items:center;column-gap:var(--g4);row-gap:0;padding:34px var(--g4) 0}
.tcol{display:flex;flex-direction:column;align-items:center;gap:var(--g3);min-width:0;animation:panelIn .3s ease-out both}
.tright{animation-delay:.06s}
.logo{font-family:var(--ff-title);font-size:clamp(40px,9.5vmin,92px);line-height:1;color:var(--tx-hi);letter-spacing:3px;text-align:center;
  text-shadow:0 3px 0 #000,0 0 18px rgba(255,42,154,.38),0 0 40px rgba(255,42,154,.16)}
html[lang=en] .logo{letter-spacing:1px;font-size:clamp(34px,7.6vmin,72px);text-wrap:balance}
.tleft .art-bubble{width:min(380px,100%)}
.sublogo{font-size:var(--fs-s);color:var(--tx-dim);letter-spacing:.04em;margin-top:calc(var(--g2) * -1);text-align:center;text-shadow:0 1px 0 #000}
.tleft .menu.main{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:var(--g2);width:min(380px,100%)}
.tleft .menu.main>.btn{width:auto;min-width:0}
.tleft .menu.main>#btnStart,.tleft .menu.main>#btnBoost{grid-column:1/-1}
#btnStart{font-size:20px}
#btnShop,#btnRelic{white-space:nowrap}
/* long labels (EN "Training Hall" + balance): the balance wraps under the label instead of overflowing */
#btnShop{flex-wrap:wrap;column-gap:6px;row-gap:0;line-height:1.15}#btnShop .gold-inline{margin-left:0}
.tleft .menu.main>#btnShop,.tleft .menu.main>#btnRelic{padding:4px 8px}
/* right: hero -> battlefield -> difficulty -> record line, inside ONE panel */
.loadout{width:min(460px,100%);display:flex;flex-direction:column;gap:var(--g2);padding:var(--g3);text-align:left;
  background:rgba(14,16,25,.93);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.char-sel,.stage-sel{width:100%}
.stage-sel{border-top:1px solid var(--line-soft);padding-top:var(--g2)}
.loadout .st-cap{text-align:left;margin-bottom:var(--g1)}
.stats{font-size:var(--fs-xs);color:var(--tx-mute);text-align:center;border-top:1px solid var(--line-soft);padding-top:var(--g2);font-variant-numeric:tabular-nums}
.stats:empty{display:none}
.title-foot{grid-column:1/-1;display:flex;justify-content:center;padding:6px 0 8px;min-width:0}
.help{font-size:var(--fs-xs);color:var(--tx-dim);background:rgba(7,8,14,.86);border:1px solid var(--line-soft);border-radius:999px;padding:3px 14px;text-align:center;max-width:100%;line-height:1.5}
/* hero cards: selected = cyan line + left bar + check mark (never colour alone) */
.chars{display:flex;flex-direction:column;gap:6px}
.chr{position:relative;display:grid;grid-template-columns:44px 1fr;gap:2px var(--g3);align-items:center;padding:6px 28px 6px 6px;background:var(--ink-2);border:1px solid var(--line-soft);border-radius:var(--r);color:inherit;font-family:inherit;cursor:pointer;text-align:left;width:100%;transition:border-color .12s,background-color .12s}
.chr:hover:not(.locked){border-color:var(--line-hi)}
.chr canvas{width:44px;height:60px;image-rendering:auto;grid-row:span 2;border-radius:3px;background:radial-gradient(circle at 50% 60%,rgba(255,255,255,.10),transparent 70%)}
.chr .ci{min-width:0}
.chr .cn{font-size:var(--fs-m);color:var(--tx-hi);display:flex;align-items:center;gap:var(--g1);line-height:1.25}
.chr .cd{font-size:var(--fs-s);color:var(--tx-dim);line-height:1.45;margin-top:2px}
.chr.on{border-color:var(--cyan);background:#11202a;box-shadow:inset 3px 0 0 var(--cyan)}
.chr.on::after{content:'';position:absolute;top:10px;right:11px;width:6px;height:11px;border:solid var(--cyan);border-width:0 2px 2px 0;transform:rotate(45deg)}
.chr[data-c=hunter] canvas{background:radial-gradient(circle at 50% 60%,rgba(63,240,255,.18),transparent 70%)}
.chr[data-c=general] canvas{background:radial-gradient(circle at 50% 60%,rgba(255,48,72,.2),transparent 70%)}
.chr.locked{cursor:default;opacity:.62;grid-template-columns:1fr;padding:6px 10px}.chr.locked canvas{display:none}
.chr.locked .ci{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--g2)}.chr.locked .cd{margin-top:0}
/* battlefield selector */
.stage-sel.locked .st-name{color:var(--tx-mute)}
.st-row{display:flex;align-items:center;gap:var(--g2)}
.st-info{flex:1;min-width:0;text-align:center}
.st-name{font-size:var(--fs-m);color:var(--tx-hi);line-height:1.3}
.st-desc{font-size:var(--fs-s);color:var(--tx-dim);line-height:1.45;min-height:2.9em}
.flipx .ico{transform:scaleX(-1)}
.diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g1);margin-top:var(--g2)}
.btn.diff{min-width:0;min-height:var(--bh);flex-direction:column;gap:0;padding:2px;font-size:var(--fs-s);line-height:1.2}
.btn.diff small{color:var(--gold);font-variant-numeric:tabular-nums}
.btn.diff.on{border-color:var(--cyan);background:#11202a;color:var(--tx-hi);box-shadow:inset 0 3px 0 var(--cyan)}
.btn.diff.on::after{content:'';position:absolute;top:7px;right:8px;width:4px;height:8px;border:solid var(--cyan);border-width:0 2px 2px 0;transform:rotate(45deg)}
.btn.diff.endless.on::after{display:none} /* the ◀ N ▶ stepper owns the corners; the top bar + border still mark it */
.btn.diff:disabled small{color:#6f6a7a}
/* decorations: the roof strip is the one ornament; side totems stay faint */
.deco{position:absolute;pointer-events:none;image-rendering:pixelated;background-repeat:no-repeat;z-index:0}
.deco.giwa{left:0;right:0;top:0;height:24px;background:url('assets/ui/giwa.png') repeat-x;background-size:auto 24px;opacity:.7;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
.deco.jangseung{left:6px;bottom:0;width:102px;height:144px;background-image:url('assets/ui/jangseung.png');opacity:.22}
.deco.sotdae{right:10px;bottom:0;width:60px;height:168px;background-image:url('assets/ui/sotdae.png');opacity:.22}
/* v2.3: landscape columns never push each other off-screen (short CrazyGames iframes, e.g. 800x450):
   each column fits the screen height, scrolls on its own as a last resort, and is centred with auto margins (no top clipping) */
@media (orientation:landscape){
  .title-wrap{grid-template-rows:minmax(0,1fr) auto;align-items:stretch}
  .tcol{max-height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:2px 0}
  .tcol>:first-child{margin-top:auto}.tcol>:last-child{margin-bottom:auto}
}
/* six tool tiles in a ~320px column (CrazyGames 800-1100px iframes): 3x2 grid, icon beside label */
@media (orientation:landscape) and (max-width:1120px){
  .toolbar,.tleft .menu.main{width:min(340px,100%)}
  .toolbar{gap:var(--g1);grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
  .btn.tool{flex-direction:row;gap:4px;min-height:36px;padding:0 8px 0 2px}
  .btn.tool .ico{--s:20px}
}
@media (orientation:portrait){
  #scr-title{background:linear-gradient(180deg,rgba(7,8,14,.72) 0,rgba(7,8,14,.25) 16%,rgba(7,8,14,.1) 22%,rgba(7,8,14,.1) 30%,rgba(7,8,14,.82) 38%,rgba(7,8,14,.94) 100%)}
  #scr-title .title-wrap{display:flex;flex-direction:column;justify-content:flex-start;height:auto;min-height:100%;gap:var(--g3);padding:30px var(--g3) 0}
  .tcol{display:contents}
  .logo{order:1}.sublogo{order:2}.hero-gap{order:3;height:18vh;flex:none}.loadout{order:4;width:100%}.toolbar{order:6;width:100%;grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}#scr-title .art-bubble{order:7}.title-foot{order:8;padding-bottom:var(--g2)}
  .deco.jangseung,.deco.sotdae{display:none}
  /* primary actions stay reachable: sticky action bar at the bottom of the scrolling title */
  .tleft .menu.main{order:9;position:sticky;bottom:0;z-index:5;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--g2);width:calc(100% + 2 * var(--g3));margin:0 calc(var(--g3) * -1);
    padding:var(--g3) var(--g3) calc(env(safe-area-inset-bottom) + var(--g2));background:linear-gradient(rgba(7,8,14,0),rgba(7,8,14,.95) 22%)}
  .tleft .menu.main>.btn{flex:1 1 0;width:auto;min-width:0}
  .tleft .menu.main>.btn.big,.tleft .menu.main>#btnBoost{flex:1 1 100%}.tleft .menu.main>#btnBoost{min-height:38px}.tleft .menu.main>#btnShop{flex:1.7 1 0}.tleft .menu.main>#btnShop .gold-inline{margin-left:4px}
  .tleft .menu.main>#btnBoost,.tleft .menu.main>#btnShop,.tleft .menu.main>#btnRelic{font-size:var(--fs-s);line-height:1.25;padding:0 6px}
}
@media (max-height:620px) and (orientation:landscape){
  :root{--bh-big:46px;--bh:40px;--bh-sm:34px}
  .title-wrap{padding-top:24px;column-gap:var(--g3)}.tcol{gap:var(--g2)}
  .logo{font-size:50px}html[lang=en] .logo{font-size:38px}.sublogo{font-size:var(--fs-xs)}
  .art-bubble{display:none}
  .btn.tool{min-height:34px}
  .loadout{padding:var(--g2) var(--g3);gap:6px}
  .chr{padding:4px 26px 4px 4px}.chr canvas{width:33px;height:45px}.chr{grid-template-columns:33px 1fr}
  .chr .cd,.st-desc{font-size:var(--fs-xs);line-height:1.38}
  .chr:not(.on):not(.locked) .cd{display:none} /* the unselected hero shows its name only (tap shows the rest) */
  .st-desc{min-height:0}
  .diffs{margin-top:6px}
  .deco.jangseung,.deco.sotdae{display:none}.deco.giwa{height:20px;background-size:auto 20px}
  .panel{padding:var(--g3);gap:var(--g2)}
}

/* ---------- daily missions drawer */
.panel.missions-panel{width:min(500px,96vw)}
.missions{text-align:left;display:flex;flex-direction:column}
.missions .mh{font-family:var(--ff-title);font-size:var(--fs-h);color:var(--tx-hi);display:flex;align-items:center;justify-content:center;gap:var(--g2);flex-wrap:wrap;margin-bottom:var(--g2);text-shadow:0 2px 0 rgba(0,0,0,.7)}
.missions .mh small{font-family:var(--ff-body);width:100%;text-align:center;text-shadow:none}
.mq{display:grid;grid-template-columns:16px 1fr auto auto;align-items:center;gap:var(--g2);padding:var(--g2) 0;border-top:1px solid var(--line-soft);font-size:var(--fs-s)}
.mq .txt{min-width:0;line-height:1.4}.mq .pr{color:var(--tx-dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.mq .rw{color:var(--gold);display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.mq.done .txt{color:var(--tx-hi)}.mq.claimed{opacity:.5}
.mq .claim{min-height:32px}

/* ---------- cards (level-up, shop, codex, reveal, unlock share one look) */
.card,.shop-item,.cx,.rslot,.ul-row{background:var(--ink-2);border:1px solid var(--line-soft);border-radius:var(--r);color:inherit;font-family:inherit;text-align:left}
.cx.ok,.rslot.flip,.ul-row{border-color:var(--line)}
.nm,.card .nm,.shop-item .nm,.cx-name,.ul-name,.rslot .nm{font-size:var(--fs-m);color:var(--tx-hi);line-height:1.3}
.ds,.card .ds,.shop-item .ds,.cx-desc,.ul-desc{font-size:var(--fs-s);color:var(--tx-dim);line-height:1.45}

/* level-up: name + step badge -> THIS change -> type/class chips -> long-term conditions */
.panel.level{width:min(940px,96vw)}
#levelTitle{color:var(--gold-tx)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--g2)}
.card{position:relative;padding:var(--g2) var(--g3) var(--g3) var(--g2);cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px var(--g3);align-content:start;
  transition:transform .1s,border-color .12s,background-color .12s}
.card:hover,.card.sel{transform:translateY(-2px);border-color:var(--cyan);background:var(--ink-3)}
.card:active{transform:translateY(0)}
.card .icbox{grid-row:1;align-self:start}
.card .hd{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding-right:18px}
.card .nm{font-size:var(--fs-l);line-height:1.25;overflow-wrap:anywhere}
.card .nm small{display:inline-block;margin-left:2px;font-size:var(--fs-xs)}
.card .ds{grid-column:1/-1;font-size:var(--fs-m);color:var(--tx-hi);line-height:1.45}
.card .meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--g1);align-items:center;border-top:1px solid var(--line-soft);padding-top:6px}
.card .rc{grid-column:1/-1;font-size:var(--fs-xs);color:#d9c08a;display:flex;align-items:flex-start;gap:var(--g1);line-height:1.4}
.card .rc .ico{margin-top:1px}
.card .rc.fu{color:#f59ac9}
.card .kc{position:absolute;top:6px;right:6px;min-width:18px;height:18px;padding:0 4px;border:1px solid var(--line);border-radius:3px;color:var(--tx-mute);font-size:var(--fs-xs);line-height:16px;text-align:center;display:none}
@media (hover:hover) and (pointer:fine){.card .kc{display:block}}
/* step badges: gold = this level-up's progress, cyan = a new ability, special tags for evolution / awakening / fusion */
.lvp,.tag,.cls{font-size:var(--fs-xs);line-height:18px;padding:0 6px;border-radius:3px;white-space:nowrap;display:inline-flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums}
.lvp.up{color:#1b1406;background:var(--gold)}
.lvp.new{color:#062126;background:var(--cyan)}
.tag{color:var(--tx-dim);background:rgba(255,255,255,.05);border:1px solid var(--line-soft);line-height:16px}
.tag.w{color:#e6cf98}.tag.p{color:#a9dfe4}
.tag.evo{background:var(--gold);color:#1b1406;border-color:transparent;line-height:18px}
.tag.awk{background:#b0186f;color:#fff;border-color:transparent;line-height:18px}
.tag.fus{background:linear-gradient(90deg,var(--cyan),#fff 50%,#ff7ac8);color:#1a0a24;border-color:transparent;line-height:18px}
.cls{padding:0 6px 0 2px;line-height:16px;border:1px solid}
.cls.k-hunter{background:rgba(15,80,80,.35);color:#bff7ee;border-color:rgba(63,240,255,.45)}
.cls.k-general{background:rgba(90,10,22,.4);color:#ffe2b8;border-color:rgba(255,211,74,.45)}
.cls.k-shared{background:rgba(60,60,80,.35);color:#d8d8e8;border-color:rgba(160,160,190,.45)}
.card.evo{border-color:var(--gold);animation:evoGlow 1.6s ease-in-out infinite alternate}
.card.awk{border-color:var(--mag);animation:awkGlow 1.6s ease-in-out infinite alternate}
.card.fus{border-color:#fff;animation:fusGlow 1.6s ease-in-out infinite alternate}
@keyframes evoGlow{from{box-shadow:0 0 0 rgba(233,196,106,0)}to{box-shadow:0 0 14px rgba(233,196,106,.45)}}
@keyframes awkGlow{from{box-shadow:0 0 0 rgba(255,42,154,0)}to{box-shadow:0 0 14px rgba(255,42,154,.45)}}
@keyframes fusGlow{from{box-shadow:0 0 4px rgba(79,216,232,.3)}to{box-shadow:0 0 16px rgba(255,42,154,.5)}}
/* four choices (meta upgrade) in a small embed: tighter icon + type */
@media (orientation:landscape){.cards:has(>.card:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (orientation:landscape) and (min-width:760px){.cards:has(>.card:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}}
.cards:has(>.card:nth-child(4)) .card{padding-left:6px;padding-right:8px;column-gap:var(--g2)}
.cards:has(>.card:nth-child(4)) .icbox .ico.s48{--s:36px}
.cards:has(>.card:nth-child(4)) .card .nm{font-size:var(--fs-m)}
.cards:has(>.card:nth-child(4)) .card .ds{font-size:var(--fs-s)}
@media (orientation:portrait){.cards{grid-template-columns:1fr}}

/* shop */
.panel.shop{width:min(980px,96vw)}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--g3);text-align:left;align-items:start}
.shop-col{display:flex;flex-direction:column;gap:var(--g2)}
.shop-col .br,.cx-h{font-size:var(--fs-m);color:var(--gold-tx);border-bottom:1px solid var(--line);padding-bottom:var(--g1);text-align:center}
.shop-item{padding:var(--g2);display:grid;grid-template-columns:auto 1fr;gap:2px var(--g3);align-items:center}
.shop-item .icbox{grid-row:span 2}
.shop-item .pips{grid-column:1/-1;display:flex;gap:3px;margin:var(--g1) 0;flex-wrap:wrap}
.pips i{width:12px;height:8px;background:#26222a;border-radius:1px;box-shadow:0 0 0 1px #0a0910}
.pips i.on{background:var(--cyan);box-shadow:0 0 0 1px #0a0910,inset 0 2px 0 #c8ffff}
.shop-item button{grid-column:1/-1;width:100%;min-width:0}
.shop-item.sub{margin-left:var(--g3)}.shop-item.locked{opacity:.55}
.shop-tier{grid-column:1/-1;border-top:1px solid var(--line);padding-top:var(--g2)}
.shop-tier .br{font-size:var(--fs-m);color:#f0c8e0;text-align:center;display:flex;gap:var(--g2);justify-content:center;align-items:center;flex-wrap:wrap}
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--g2);margin-top:var(--g2)}
.tier-lock{text-align:center;color:var(--tx-dim);font-size:var(--fs-s);padding:var(--g2)}
.shop-item.tier2 .nm{color:#ffd0f0}

/* codex */
.panel.codex{width:min(980px,96vw)}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g1);width:min(480px,100%);margin:0 auto}
.tab{font-family:inherit;font-size:var(--fs-s);color:var(--tx-dim);min-height:var(--bh-sm);display:inline-flex;align-items:center;justify-content:center;gap:var(--g1);cursor:pointer;
  background:var(--ink-2);border:1px solid var(--line-soft);border-radius:var(--r)}
.tab.on{color:var(--tx-hi);box-shadow:inset 0 -3px 0 var(--cyan);border-color:var(--cyan)}
.tab.k-hunter.on{border-color:var(--hun-a);background:rgba(10,50,56,.7);box-shadow:inset 0 -3px 0 var(--hun-a)}
.tab.k-general.on{border-color:var(--gen-b);background:rgba(60,12,20,.7);box-shadow:inset 0 -3px 0 var(--gen-b)}
.tab.k-shared.on{border-color:#c8c8e0;background:rgba(40,40,60,.7);box-shadow:inset 0 -3px 0 #c8c8e0}
.codex-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--g2);text-align:left;overflow:auto;min-height:0;flex:1 1 auto}
.cx{padding:var(--g2);opacity:.78;display:flex;flex-direction:column;gap:2px}
.cx.ok{opacity:1}
.cx-row{display:flex;align-items:center;gap:var(--g1)}
.cx:not(.ok) .icbox.evo .ico{filter:brightness(0) opacity(.6)}
.cx .plus{color:var(--gold);font-size:var(--fs-m)}
.cx-recipe{font-size:var(--fs-s);color:var(--cyan);line-height:1.35}
.cx-h{grid-column:1/-1;margin-top:var(--g2);display:flex;align-items:center;justify-content:center;gap:var(--g1);flex-wrap:wrap}
.codex-list.k-hunter .cx-h{color:var(--hun-b);border-bottom-color:rgba(63,240,255,.5)}
.codex-list.k-general .cx-h{color:var(--gen-b);border-bottom-color:rgba(255,48,72,.5)}
.codex-list.k-hunter .cx-recipe{color:var(--hun-b)}
.codex-list.k-general .cx-recipe{color:var(--gen-b)}
.codex-list .cx-h:first-child{margin-top:0}

/* reveal slots */
.rslots{display:grid;grid-template-columns:repeat(3,minmax(0,150px));gap:var(--g3);justify-content:center}
.rslot{display:flex;flex-direction:column;align-items:center;gap:var(--g1);padding:var(--g2) var(--g1);text-align:center}
.rslot .nm{text-align:center;min-height:2.6em}.rslot .nm small{display:block}
.rslot.spin .icbox{animation:spinBlur .14s linear infinite}
.rslot.flip{animation:flipIn .45s ease-out}
@keyframes spinBlur{0%{transform:translateY(-6px);filter:blur(1px)}100%{transform:translateY(6px);filter:blur(1px)}}
@keyframes flipIn{0%{transform:rotateY(90deg) scale(1.2)}60%{transform:rotateY(-10deg) scale(1.1)}100%{transform:none}}

/* unlock reward (a special moment: rays stay) */
#scr-unlock{overflow:hidden}
.unlock-rays{position:absolute;left:50%;top:50%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(233,196,106,.10) 0deg 6deg,transparent 6deg 12deg,rgba(79,216,232,.07) 12deg 18deg,transparent 18deg 24deg);animation:raySpin 26s linear infinite;
  -webkit-mask:radial-gradient(circle,#000 0,transparent 55%);mask:radial-gradient(circle,#000 0,transparent 55%)}
@keyframes raySpin{to{transform:rotate(360deg)}}
.panel.unlock{width:min(620px,96vw);position:relative;animation:ulPop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes ulPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
#unlockTitle{color:var(--gold-tx)}
#unlockArt{margin:0 auto;width:100%}
.ul-list{display:flex;flex-direction:column;gap:var(--g2);text-align:left;max-height:50vh;overflow:auto}
.ul-row{display:flex;align-items:center;gap:var(--g3);padding:var(--g2);opacity:0;animation:ulIn .45s ease-out forwards}
.ul-row .icbox .ico.s48{--s:40px}
@keyframes ulIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}

/* ---------- results: outcome -> gains -> details -> next action */
.panel.result{width:min(560px,96vw)}
#resTitle.win{color:var(--gold-tx)}
.res-sub{margin-top:calc(var(--g2) * -1);font-size:var(--fs-s);color:var(--tx-dim)}
.res-sub:empty{display:none}
.res-out{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g2)}
.res-out:empty{display:none}
.ro{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;background:var(--ink-2);border:1px solid var(--line-soft);border-radius:var(--r);min-width:0}
.ro b{font-size:22px;line-height:1.1;color:var(--tx-hi);font-weight:normal}
.ro span{font-size:var(--fs-xs);color:var(--tx-mute);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.res-gain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--g2) var(--g4);padding:6px var(--g2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.res-gold{font-size:var(--fs-m);display:flex;align-items:center;justify-content:center;gap:var(--g2);color:var(--tx)}
.res-gold b{color:var(--gold);font-size:26px;font-weight:normal;line-height:1}
.res-xp{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px var(--g3);font-size:var(--fs-s);color:var(--tx-dim)}
.res-xp:empty{display:none}
.res-xp .g{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.res-xp b{color:var(--tx-hi);font-weight:normal}
.res-xp .up{color:#1b1406;background:var(--gold);border-radius:3px;padding:0 6px;font-size:var(--fs-xs);line-height:18px}
/* a 0 reward is shown as it is: no gold, no size boost */
#scr-result.zero .res-gold b{color:var(--tx-mute);font-size:var(--fs-l)}
#scr-result.zero .res-gold .ico{filter:grayscale(1) brightness(.75)}
.res-xp .zero b{color:var(--tx-mute)}
.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px var(--g4);width:100%;margin:0 auto;text-align:left;font-size:var(--fs-xs);color:var(--tx-mute)}
.res-grid:empty{display:none}
.res-grid div{display:flex;justify-content:space-between;align-items:center;gap:var(--g2);padding:2px 0;border-bottom:1px solid var(--line-soft);min-width:0}
.res-grid div>span{display:inline-flex;align-items:center;gap:4px;min-width:0}
.res-grid b{color:var(--tx);font-weight:normal;white-space:nowrap}
.res-grid div.hi b{color:var(--gold-tx)}
.res-next{width:100%;flex-wrap:nowrap}
.res-next>.btn{min-width:0}
.res-next>.btn.big{flex:2 1 auto;min-width:0}
.res-next>.btn.small{flex:1 1 auto;min-height:var(--bh-big)}
@media (max-width:520px){.res-next{flex-wrap:wrap}.res-next>.btn.big{flex-basis:100%}}
.result .menu{gap:var(--g2)}
/* pause / dead */
#scr-pause .panel{width:min(620px,96vw)}#scr-dead .panel{width:min(520px,96vw)}
.owned{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:var(--g1);width:100%;text-align:left}
.owned:empty{display:none}
.owned span{display:flex;align-items:center;gap:6px;background:var(--ink-2);border:1px solid var(--line-soft);border-radius:var(--r);font-size:var(--fs-s);padding:3px 8px 3px 4px;min-width:0;line-height:1.3;color:var(--tx)}
#btnQuit{color:var(--red-tx)}
#btnQuit:hover{color:#ffc4c5;border-color:rgba(229,72,77,.6)}

/* ---------- in-run overlay chrome (DOM buttons over the canvas HUD; geometry unchanged since v2.6.3) */
.hud-btn{position:absolute;pointer-events:auto;font-family:inherit;color:var(--tx);background:rgba(14,16,25,.88);border:1px solid var(--line);border-radius:var(--r-panel);
  padding:0;display:flex;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.4);transition:border-color .12s,background-color .12s}
.hud-btn:hover{border-color:var(--line-hi);background:rgba(29,33,51,.94)}
#btnPause{top:calc(env(safe-area-inset-top) + 14px);right:8px;width:48px;height:48px}
#btnPause .ico.s32{--s:24px}
#btnDash{right:18px;bottom:calc(env(safe-area-inset-bottom) + 22px);width:92px;height:92px;border-radius:50%;border:2px solid var(--cyan);background:rgba(10,30,38,.82);font-size:var(--fs-s);color:var(--tx-hi)}
#btnDash.cool{filter:grayscale(.8) brightness(.6)}
#btnSkipPro{top:calc(env(safe-area-inset-top) + 14px);right:64px;flex-direction:row;gap:var(--g1);padding:0 var(--g3);height:44px;font-size:var(--fs-s);z-index:60;touch-action:manipulation;user-select:none}
/* any open menu hides the in-run buttons (dash never floats over level-up / pause / results) */
/* v2.6.3: Skip is fixed left of Pause (8px edge + 48px pause + 8px gap) for the whole prologue, so hiding Pause at the collapse never shifts it */
#ui>.screen:not(.hidden)~.hud-btn{display:none!important}
#toast{position:absolute;left:50%;top:calc(var(--hudb) + 10px);transform:translateX(-50%);font-size:var(--fs-m);color:var(--tx-hi);
  background:rgba(14,16,25,.92);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:0 6px 18px rgba(0,0,0,.45);
  opacity:0;transition:opacity .3s;text-align:center;padding:6px 14px;z-index:50;
  max-width:min(92vw,640px);width:max-content;white-space:pre-line;line-height:1.45;pointer-events:none}
#toast.on{opacity:1}#toast.low{top:auto;bottom:3%}#toast.top{top:max(8px,env(safe-area-inset-top));bottom:auto;z-index:60}
/* banners: evolution / awakening / fusion / 장군의 기개 — special moments, always below the HUD + toast band */
#evoBanner{position:absolute;left:0;right:0;top:max(30%,calc(var(--hudb) + 84px));display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;opacity:0;z-index:40;padding:var(--g2) var(--g3);
  background:linear-gradient(90deg,transparent,rgba(14,16,25,.92) 20%,rgba(14,16,25,.92) 80%,transparent);border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);text-align:center}
#evoBanner.on{animation:evoIn 2.8s ease-out forwards}
.eb-top{font-family:var(--ff-title);font-size:var(--fs-h);color:var(--gold-tx);text-shadow:0 2px 0 #000,0 0 12px rgba(233,196,106,.4);line-height:1.15}
.eb-main{display:flex;align-items:center;gap:var(--g2);justify-content:center;flex-wrap:wrap}
.eb-name{font-size:var(--fs-l);color:var(--tx-hi);text-shadow:0 2px 0 #000}.eb-sub{font-size:var(--fs-s);color:#d9c08a}
@keyframes evoIn{0%{opacity:0;transform:scaleY(.1)}8%{opacity:1;transform:scaleY(1.15)}14%{transform:scaleY(1)}82%{opacity:1}100%{opacity:0}}
#evoBanner.awk{border-color:var(--mag)}#evoBanner.awk .eb-top{color:#ffd0ec;text-shadow:0 2px 0 #000,0 0 14px rgba(255,42,154,.6)}
#evoBanner.fus{border-top-color:var(--cyan);border-bottom-color:var(--mag);box-shadow:0 0 24px rgba(190,140,255,.35)}
#evoBanner.fus .eb-top{color:#fff;text-shadow:0 2px 0 #000,0 0 16px rgba(79,216,232,.7)}
#evoBanner.gen{border-top:2px solid var(--gold);border-bottom:2px solid var(--red);background:linear-gradient(90deg,transparent,rgba(40,6,10,.93) 18%,rgba(40,6,10,.93) 82%,transparent);box-shadow:0 0 30px rgba(255,80,40,.4)}
#evoBanner.gen .eb-top{color:#fff1b0;letter-spacing:.12em;text-shadow:0 2px 0 #3a0a0a,0 0 18px #ff3a2a}
#evoBanner.gen .eb-name{color:var(--gold)}
#evoBanner.gen.on{animation:genIn 3s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes genIn{0%{opacity:0;transform:scale(1.8)}8%{opacity:1;transform:scale(.96)}14%{transform:scale(1)}82%{opacity:1}100%{opacity:0;transform:scale(1.02)}}

/* prologue dialog */
#scr-dialog{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:auto;padding:0 var(--g3) calc(env(safe-area-inset-bottom) + var(--g4));z-index:45}
.dlg{width:min(720px,96vw);text-align:left;position:relative;display:flex;flex-direction:column;gap:var(--g1);padding:var(--g2) var(--g4) var(--g2);
  background:rgba(14,16,25,.95);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.dlg-who{align-self:flex-start;background:#b0186f;color:#fff;padding:0 var(--g2);font-size:var(--fs-xs);line-height:18px;border-radius:2px}
.dlg-text{font-size:var(--fs-m);line-height:1.55;color:var(--tx-hi);min-height:3.1em}
.dlg-text.type{animation:dlgIn .5s ease-out}
.dlg-tap{font-size:var(--fs-xs);color:var(--tx-mute);text-align:right;animation:blink 1s steps(2) infinite}
@keyframes dlgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:.3}}

/* fake ad overlay (ads.js stub) */
.ad-sim{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:99;pointer-events:auto}
.ad-box{background:#222;border:1px solid #666;border-radius:10px;padding:24px 34px;text-align:center;color:#ddd;font-size:var(--fs-m);min-width:260px}
.ad-tag{display:inline-block;background:#e8b923;color:#000;font-weight:bold;padding:1px 8px;border-radius:4px;margin-bottom:8px}
.ad-sub{font-size:var(--fs-s);color:#999;margin:6px 0 12px}.ad-bar{height:6px;background:#444;border-radius:3px;overflow:hidden}.ad-bar i{display:block;height:100%;width:0;background:#4fd1a5}

@media (max-width:420px){.btn{min-width:160px}.btn.big{min-width:220px}.panel{padding:var(--g2)}.row .btn{min-width:130px}}

/* ---------- v2.3: platform / config features */
.btn.tool.dot::after{content:'';position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 2px var(--ink-0)}
.btn.tool{position:relative}
/* choice menus (revive / boost): every option has the same size, font and colour (CrazyGames ad rule A9) */
.menu.choice>.btn{width:min(320px,100%);min-height:var(--bh);color:var(--tx);border-color:var(--line)}
.menu.choice>.btn:disabled{color:#6f6a7a;border-color:rgba(255,255,255,.06)} /* same for every option (A9), still reads as disabled */
.hint.small{min-height:1em}
#scr-result.busy .btn{pointer-events:none;opacity:.55}
.daily-tag{display:inline-block;font-size:var(--fs-xs);color:#062126;background:var(--cyan);padding:0 6px;margin-right:6px;vertical-align:middle;line-height:1.5;border-radius:2px;font-family:var(--ff-body)}
.daily-card{display:flex;flex-direction:column;gap:var(--g2);text-align:left;margin-bottom:var(--g2)}
.daily-card.hidden{display:none}
.daily-card .dl-head{font-family:var(--ff-title);font-size:var(--fs-h);color:var(--tx-hi);display:flex;align-items:center;gap:var(--g2);text-shadow:0 2px 0 rgba(0,0,0,.7)}
.dl-row{display:grid;grid-template-columns:32px 1fr;gap:var(--g2);align-items:center}
.dl-name{color:var(--tx-hi);font-size:var(--fs-m);line-height:1.3}
.dl-mod{font-size:var(--fs-s);color:var(--tx-dim);line-height:1.45}.dl-mod b{color:var(--gold);font-weight:normal}
.dl-foot{display:flex;justify-content:space-between;gap:var(--g2);font-size:var(--fs-s);color:var(--tx-dim);flex-wrap:wrap}
.daily-card .btn.big{width:100%;min-width:0}
.panel.records-panel{width:min(620px,96vw)}
.records{display:flex;flex-direction:column;font-size:var(--fs-s);text-align:left;overflow:auto;min-height:0}
.rec{display:grid;grid-template-columns:28px 64px 1fr 52px 48px;gap:var(--g2);align-items:center;padding:var(--g1) 0;border-top:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
.rec.head{color:var(--tx-mute);border-top:none}
.rec b{color:var(--gold);font-weight:normal}.rec.top b{color:#fff2a8}
.rec .run{min-width:0;display:flex;align-items:center;gap:4px;flex-wrap:wrap;line-height:1.35}
.rec>span:nth-child(4),.rec>span:nth-child(5){text-align:right}
@media (max-width:420px){.rec{grid-template-columns:22px 52px 1fr 44px;}.rec>span:nth-child(5){display:none}}
@media (max-height:520px){.panel.codex>.hint{display:none}}

/* ---- v2.5 relics / hero growth / endless */
#btnRelic{position:relative}#btnRelic .badge{position:static;margin-left:2px;box-shadow:none}
.relic-panel{width:min(980px,96vw);max-height:94vh;display:flex;flex-direction:column;gap:var(--g2)}
.relic-panel h2 .gold-inline{margin-left:var(--g1);font-size:var(--fs-s)}
.relic-body{overflow:auto;min-height:0;flex:1}
.relic-ico{width:48px;height:48px;image-rendering:pixelated;display:block}
.relic-ico.big{width:72px;height:72px}
.gacha{display:grid;grid-template-columns:1fr 1fr;gap:var(--g2)}
.g-banner{padding:var(--g2);text-align:center}.g-title{font-size:var(--fs-l);color:var(--gold-tx)}.g-sub{font-size:var(--fs-s);color:var(--tx-dim)}
.g-preview{display:flex;justify-content:center;gap:8px;margin-top:6px}
.g-rates{padding:var(--g2)}.cap-h{font-size:var(--fs-s);color:var(--cyan);margin:4px 0}
.rates{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;font-size:var(--fs-s)}.rate i{display:inline-block;width:10px;height:10px;margin-right:6px;box-shadow:0 0 0 1px #000}
.rate b{float:right}.g-pity{margin-top:6px;font-size:var(--fs-s);color:var(--gold)}.g-note{font-size:var(--fs-xs);color:var(--tx-dim)}
.g-buttons{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--g1);justify-content:center}
.g-buttons .btn small.cap,.btn small.cap{opacity:.85;margin-left:6px;font-size:max(12px,.8em);color:inherit}
.gacha>.hint{grid-column:1/-1;text-align:center}
.g-result{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.g-card{width:92px;padding:6px 4px;text-align:center;background:var(--ink-0);border-radius:3px;box-shadow:0 0 0 1px var(--rc,#666);animation:gIn .35s ease-out both}
.g-card .nm{font-size:var(--fs-xs);line-height:1.2;min-height:2.4em}.g-card .st{font-size:var(--fs-xs);color:var(--gold)}.g-card .new{color:#4dffa0}
.g-card img{margin:0 auto}
.r-common{--rc:#c9ccd2}.r-rare{--rc:#3ff0ff}.r-epic{--rc:#ff2ad0}.r-legend{--rc:#ffd34a}
.g-card.r-legend{box-shadow:0 0 0 1px #ffd34a,0 0 14px rgba(255,211,74,.6)}
@keyframes gIn{from{transform:scale(.4) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
.inv .slots{display:flex;gap:var(--g1)}
.slot{flex:1;min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--ink-0);border:1px solid var(--line-soft);border-radius:var(--r);cursor:pointer;font-size:var(--fs-s);text-align:center;padding:4px}
.slot.full{border-color:var(--cyan)}.slot.locked{opacity:.55;cursor:default}.slot .empty{color:var(--tx-dim)}
.relic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px}
.relic{position:relative;padding:3px;background:var(--ink-0);border:0;border-radius:3px;box-shadow:0 0 0 1px var(--rc);cursor:pointer}
.relic.unknown{filter:grayscale(1) brightness(.35);cursor:default}.relic.on::after{content:'✓';position:absolute;top:0;left:3px;color:#4dffa0;font-weight:bold}
.relic.sel{box-shadow:0 0 0 2px var(--cyan)}.relic .st{position:absolute;right:3px;bottom:1px;font-size:var(--fs-xs);color:var(--gold);text-shadow:0 1px 0 #000}
.relic img{margin:0 auto}
.r-detail{display:flex;gap:var(--g2);padding:var(--g2);margin-top:var(--g1);align-items:flex-start}
.r-detail .nm{font-size:var(--fs-m)}.r-detail .nm small{color:var(--tx-dim);font-size:var(--fs-s)}.r-detail .ds{color:#4dffa0}.r-detail .fl{color:var(--tx-dim);font-size:var(--fs-s);font-style:italic}
.heroes{display:grid;grid-template-columns:1fr 1fr;gap:var(--g2)}
.hero-card{padding:var(--g2);display:flex;flex-direction:column;gap:6px}.hero-card.locked{opacity:.5}
.hero-card .hh{display:flex;gap:var(--g1);align-items:center}.hero-card .nm{font-size:var(--fs-m)}.hero-card .lv{color:var(--gold);font-size:var(--fs-s)}
.xpbar{position:relative;height:18px;background:var(--ink-0);border-radius:3px;box-shadow:0 0 0 1px var(--line-soft);overflow:hidden}.xpbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#b08a34,var(--gold))}
.xpbar span{position:relative;display:block;text-align:center;font-size:var(--fs-xs);line-height:18px;color:var(--tx-hi);text-shadow:0 1px 0 #000}
.hb{font-size:var(--fs-s)}.hb.small{color:var(--tx-dim)}
.res-loot .loot-pop{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--gold);animation:gIn .35s ease-out}
.diff.endless{min-width:7.5em}.diff.endless .en-n{display:inline-flex;gap:2px;align-items:center}
.diff.endless .en-step{padding:0 6px;cursor:pointer;color:var(--cyan)}
@media (max-width:640px),(orientation:portrait){.gacha,.heroes{grid-template-columns:1fr}.inv .slots{flex-wrap:wrap}.slot{min-width:30%}.relic-ico.big{width:56px;height:56px}}
.relic-panel h2 .gold-inline b{font-size:var(--fs-m)}.relic-panel h2 .gold-inline .ico{--s:22px}

@media (prefers-reduced-motion:reduce){
  .panel,.tcol,.card.evo,.card.awk,.card.fus{animation:none}
  .btn,.card,.chr{transition:none}
}