/* Original wood/copper interface finish. Fixed panel flow and touch targets stay in index.html. */
:root{
  --bg:#101912;--metal:#1c2b22;--metal-2:#26382c;--metal-sel:#374b35;
  --line:#7d866c;--line-soft:#3f5141;--ink:#f2ecd9;--muted:#c5ceb8;--dim:#a5b298;
  --gold:#e6c17e;--copper:#c79a5c;--copper-hi:#efcf96;--copper-lo:#77522f;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
}
body,button,input{font-family:var(--font);font-variant-numeric:tabular-nums}
button{line-height:1.35}
h1,h2,h3,.si-text strong,.lr-main b{font-weight:700}
p,.tc-desc,.tc-now,.tc-effect,.tc-compat,.tc-syn,.stat-table,.facts{line-height:1.55}
.sub,.fine,.foot-note span{line-height:1.45}
.panel{
  border-color:#8a8d71;background:linear-gradient(145deg,#24362a,#1a281f 65%);
  box-shadow:inset 0 1px #b2b79a,inset 0 0 0 4px rgba(10,19,13,.22),0 10px 28px rgba(3,8,5,.48);
  border-radius:6px;overflow:hidden;
}
.panel-head{background:linear-gradient(#304334,#26372b);border-bottom-color:#8b7954;box-shadow:inset 0 1px rgba(240,220,177,.12)}
.panel-foot{flex-shrink:0;position:relative;z-index:1;background:linear-gradient(#283a2d,#1c2a21);border-top-color:#88734d;box-shadow:0 -1px rgba(9,16,11,.7);gap:8px}
.panel-body{scrollbar-width:thin;scrollbar-color:#87916e #1b2a20}
.list-head{color:#bbc8aa;letter-spacing:.5px;border-bottom-color:#617057}
.shop-detail,.bag-detail{border-left-color:#5c6b52}
.facts dt,.stat-table .k{color:#b4c0a8}
.primary,.secondary,.chip,.tab,.reroll{
  border-radius:4px;transition:background-color 80ms,border-color 80ms,box-shadow 80ms,transform 70ms;
}
.primary{
  clip-path:none;min-height:48px;background:linear-gradient(#d9b37a,#be8c4d);color:#1b241a;
  border:1px solid #f0d29d;font-weight:750;letter-spacing:.3px;
  box-shadow:inset 0 1px #f7dfb5,inset 0 -3px #825a32,0 2px 0 #101a13;
}
.primary:active:not(:disabled){transform:translateY(1px);background:#bc8b4f;box-shadow:inset 0 2px #79542f,inset 0 -1px #d2aa70}
.primary:focus-visible{outline:2px solid #fff0ce;outline-offset:2px;box-shadow:inset 0 0 0 2px #674a2d}
.primary:disabled{background:#344335;border-color:#6c775f;color:#b6bfa8;box-shadow:inset 0 -2px #263328}
.secondary,.chip{
  min-height:48px;background:linear-gradient(#2e4233,#223328);border-color:#768268;color:#ede8d6;
  box-shadow:inset 0 1px rgba(222,225,192,.13),inset 0 -2px #18271d;
}
.secondary:active:not(:disabled),.chip:active:not(:disabled){transform:translateY(1px);background:#1b2b20;box-shadow:inset 0 2px #132118}
.secondary:disabled,.chip:disabled{background:#202f25;color:#9da98f;border-color:#4b604b;box-shadow:none}
.secondary.danger{color:#efbaaa;border-color:#9a7060;background:linear-gradient(#3b3830,#2b2e25)}
.chip[aria-pressed=true]{background:#3b5039;color:#f1d29b;border-color:#d4b577;box-shadow:inset 0 -2px #8f7043}
.tab{background:#25382b;border:1px solid transparent;border-bottom:2px solid transparent}
.tab[aria-selected=true]{background:#344a35;border-color:#718467;border-bottom-color:#e0bc79;color:#f3e8c9}
.reroll{background:#213428;color:#ead1a2;border-color:#6d7d60;box-shadow:inset 0 -2px #16241b}
.reroll:active:not(:disabled){background:#17291d;box-shadow:inset 0 2px #102016}
.shop-item,.bag-item,.slot-card,.talent-card{border-radius:4px;background:linear-gradient(140deg,#2b3e30,#223328);border-color:#52674e}
.shop-item[aria-pressed=true],.bag-item[aria-pressed=true],.slot-card.held,.talent-card[aria-pressed=true]{background:#364d35;border-color:#d6b575;box-shadow:inset 3px 0 #d6b575,inset 0 1px rgba(239,224,187,.16)}
.talent-card .tc-top{padding-bottom:6px;border-bottom:1px solid #53694d}
.tc-top .ic{color:#e5c180}
.tc-name{color:#f6eed8;line-height:1.3}
.tc-level{color:#edd099}
.tc-desc,.tc-now,.tc-effect,.tc-compat,.tc-syn{font-size:14px}
.tag{border-color:#7d9067;background:rgba(11,23,14,.2);color:#d7e3bd;border-radius:2px}
.balance,.price{color:#f1cc84}
.stat-table,.list-row,.setting{border-color:#4a5e45}
.portrait{background:radial-gradient(ellipse at 50% 38%,#3b513a,#1c2d21 75%);border-color:#5b7052;border-radius:4px}
.plinth{height:6px;background:#4d573d;border-top-color:#c1ac78;box-shadow:0 2px #17261b}
.portrait-name{color:#f2dfb7;letter-spacing:1px}
.thumb,.hero-thumb{border-radius:3px;background:rgba(235,222,184,.08)}
.asset-art{display:block;position:relative;width:100%;height:100%;min-width:0;pointer-events:none}
.asset-fallback{position:absolute;inset:0;display:block;pointer-events:none}
.asset-fallback>.pix{width:100%;height:100%}
.asset-real{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden;opacity:0;pointer-events:none;image-rendering:auto}
.asset-art.is-ready>.asset-real{opacity:1}
.asset-art.is-ready>.asset-fallback{visibility:hidden}
.portrait .asset-hero{width:auto;height:min(150px,34dvh);aspect-ratio:1;flex:none}
.portrait.small .asset-hero{height:min(110px,26dvh)}
/* Menu only: the S frame's visible body occupies about 93/128 of its square. */
.panel.menu #menu-portrait{justify-content:flex-end}
.panel.menu #menu-portrait .asset-hero.is-ready{width:min(236px,63dvh);height:min(236px,63dvh);margin-top:-16px;margin-bottom:-26px}
/* The right column may scroll taller than the panel; do not stretch the portrait to that row's bottom. */
@media(orientation:landscape){
  .panel.menu #menu-portrait{align-self:start;justify-content:center}
  .panel.menu #menu-portrait .asset-hero.is-ready{width:min(224px,60dvh);height:min(224px,60dvh)}
  .panel.menu #menu-portrait .portrait-name,.panel.menu #menu-portrait .portrait-stat{flex:none;white-space:nowrap}
}
.vitals{background:linear-gradient(130deg,rgba(40,60,44,.96),rgba(23,38,28,.94));border-color:#6e8061;box-shadow:inset 0 1px rgba(230,219,177,.15)}
.run-head{background:rgba(25,42,30,.94);border-color:#64775a}
.bar{border-radius:2px;box-shadow:inset 0 1px #08160d}
.hud-btn .plate{border-radius:4px;background:linear-gradient(#3b4f39,#26392a);border-color:#a5986f;box-shadow:inset 0 1px #8b9876,inset 0 -2px #18271d}
.hud-btn:active .plate{background:#203124;box-shadow:inset 0 2px #132118}
/* Paint only: the 96/80/80 action hitboxes and original circle/octagon/hex paths stay untouched. */
.f-out{fill:#142219;stroke:#9ca782}.f-in{fill:#344c36;stroke:#b4c395}.f-hi{stroke:#e5dfba}.glyph{color:#f0edd7}
#fire .f-out{fill:#1c2c1e;stroke:#cbb177}#fire .f-in{fill:#c49b5e;stroke:#f3dfb5}#fire .glyph{color:#223123}#fire .f-lab{fill:#18271c}
#skill .f-out{fill:#14251b;stroke:#a5ae7e}#skill .f-in{fill:#3b5540;stroke:#d1c68f}#skill .f-hi{stroke:#f1deb0}#skill .glyph{color:#bfe9d0}#skill .f-lab{fill:#f5e6bf}
.is-pressed .f-in{fill:#243c2b}#fire.is-pressed .f-in{fill:#aa8048}#skill.is-pressed .f-in{fill:#294632}
#switch .vis{background:linear-gradient(#354a35,#213326);border-color:#b4ab7e;box-shadow:inset 0 1px #79896a,inset 0 -2px #15251a}
.sw-next{opacity:.78}.sw-cap{color:#d2d9bd}
/* Give each scrollable card its remaining height, independently of its fixed reroll sibling. */
@media(orientation:landscape){
  .talent-row{flex:1 1 0;overflow:hidden}
  .talent-slot{overflow:hidden}
  .talent-slot .talent-card{flex:1 1 0;min-height:0;overflow-y:scroll;scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:var(--gold) #192a20;scroll-padding-block:8px;padding-bottom:16px}
  .talent-card>span{flex:none}
  .talent-slot .reroll{flex:0 0 48px;margin-top:6px;border-top:1px solid var(--line)}
  .talent-card .tc-top{order:0;margin-bottom:4px;padding-bottom:4px}
  .talent-card .tc-top>span{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0}
  .talent-card .tc-top .ic{flex:none;width:24px;height:24px}
  .talent-card .tc-name{order:-1}
  .talent-card .tc-level{order:1}
  .talent-card .tc-effect{order:2;margin-bottom:4px}
  .talent-card .tc-compat{order:3;padding-block:4px}
  .talent-card .tc-syn.gap{order:4}
  .talent-card .tc-syn.rel{order:5}
  .talent-card .tc-now{order:6}
  .talent-card .tc-desc{order:7}
  .talent-card .tc-tags{order:8}
  .talent-card::-webkit-scrollbar{width:8px}
  .talent-card::-webkit-scrollbar-track{background:#192a20}
  .talent-card::-webkit-scrollbar-thumb{background:var(--gold);border:2px solid #192a20;border-radius:4px}
}
@media(max-width:740px){.secondary{padding-left:10px;padding-right:10px}.panel-foot{gap:8px}}
@media(max-height:390px){
  .panel-head{padding-top:6px;padding-bottom:6px}.panel-body{padding-top:8px;padding-bottom:8px}
  .panel-foot{min-height:60px;padding-top:6px;padding-bottom:6px}.talent-row{gap:8px}.talent-card{padding:8px 10px}
  .portrait .asset-hero{height:min(126px,32dvh)}.portrait.small .asset-hero{height:min(96px,25dvh)}
}
@media(orientation:portrait){.portrait .asset-hero{height:90px}}
@media(prefers-reduced-motion:reduce){.primary,.secondary,.chip,.tab,.reroll{transition:none;transform:none}}