/* Final presentation pass: engraved brass / cold steel. Icons stay legible at mobile scale. */
:root { --gold:#b5985d; --gold-hi:#ead9a7; --text:#eee9db; --muted:#b5b5a6; --steel-light:#a9dbe7; }
.ui-icon { display:inline-block; flex:none; width:1.2em; height:1.2em; vertical-align:-.23em; color:inherit; }
.icon-btn { display:grid; place-items:center; }
.icon-btn .ui-icon { width:50%; height:50%; stroke-width:1.5; }
.icon-mana { color:#91d6f0; } .icon-rage { color:#f5b36d; } .icon-coin,.icon-star { color:#debb70; }
.icon-shield { color:#d3bd85; } .icon-curse { color:#c0a1dc; } .icon-heart { color:#e7a0a4; }
.chip { display:inline-flex; align-items:center; gap:.4em; background:linear-gradient(#262b23,#101713); border:1px solid #b6a16b55; border-radius:2px; font-variant-numeric:tabular-nums; }
.btn { position:relative; border:1px solid #9b8453; border-radius:2px; background:linear-gradient(175deg,#3a4031,#1a241e 48%,#121a16); box-shadow:inset 0 0 0 2px #0a110d,inset 0 0 0 3px #b49c581c,0 4px 10px #0006; font-family:var(--font-title); font-weight:600; letter-spacing:.07em; }
.btn.gold { background:linear-gradient(160deg,#e0c38b,#b69a61 46%,#8f7240); color:#181b14; border:1px solid #f2dba2; box-shadow:inset 0 0 0 2px #725b30,inset 0 0 0 3px #e3c99080,0 5px 20px #0007; text-shadow:0 1px #eadcb43b; }
.btn:active { transform:translateY(1px); filter:brightness(.93); }
.btn:disabled { color:#969487; border-color:#635e48; filter:saturate(.35); opacity:.6; cursor:not-allowed; }
.panel { position:relative; border:1px solid #ad945c; border-radius:3px; background:radial-gradient(ellipse at 12% 0,#56604430,transparent 65%),linear-gradient(130deg,#202a23,#0e1712); box-shadow:inset 0 0 0 3px #07110b,inset 0 0 0 4px #b49c5833,0 20px 70px #000e; }
.panel h2 { letter-spacing:.045em; font-weight:600; color:#eddbab; }
.panel h3 { display:flex; align-items:center; gap:1em; color:#c8b787; }
.panel h3::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,#b7a06a66,transparent); }
.enemy-list .e { border-color:#bca66d26; background:linear-gradient(145deg,#ffffff06,#0003); }
.stage-preview-art { position:relative; border-bottom:1px solid #a58a5155; }
.stage-preview-art::after { content:''; position:absolute; width:calc(var(--u)*8); height:3px; bottom:-2px; left:calc(var(--u)*5); background:#d6bb7d; }
.language-option { box-shadow:inset 0 0 0 3px #0004; background:linear-gradient(120deg,#bda5751a,transparent); }
.language-trigger { display:inline-flex; align-items:center; gap:.65em; }
.map-header { border-bottom:1px solid #b8a06322; }
.node .disc { box-shadow:inset 0 0 0 3px #080f0b,inset 0 0 0 4px #9c89573b,0 4px 14px #000a; }
.node .disc .ui-icon { position:static; inset:auto; display:block; width:55%; height:55%; max-width:100%; max-height:100%; }
.map-canvas .label .ui-icon { position:static; width:1em; height:1em; }
.node.available .disc { box-shadow:inset 0 0 0 3px #0c160e,inset 0 0 0 4px #ddc78d77,0 0 0 3px #bcaa5822,0 0 22px #ba9d3630; }

/* Battle chrome is separate from the playfield: restrained highlights, actual material edges. */
#screen-battle { grid-template-rows:calc(var(--u)*9) minmax(0,1fr) calc(var(--u)*11.6) auto calc(var(--u)*18.5) calc(var(--u)*3.7); gap:calc(var(--u)*1.2); }
.b-top { border-bottom:1px solid #cfb67826; padding-bottom:calc(var(--u)*.8); background:linear-gradient(90deg,transparent,#0a120d55,transparent); }
.b-top .title { font-size:calc(var(--u)*3.5); letter-spacing:.055em; }
.b-top .title small { color:#aeb9ac; font-size:calc(var(--u)*1.85); letter-spacing:.17em; }
.b-top .icon-btn { width:calc(var(--u)*7.4); height:calc(var(--u)*7.4); color:#ddcc99; }
.enemy-hud .name { text-shadow:0 2px 3px #000; }
.enemy .bar.hp .fill { background:linear-gradient(0deg,#541a1a,#a34232 65%,#d28158); }
.enemy .bar.hp .txt { color:#fff0d8; font-weight:600; }
.intent { display:flex; align-items:center; gap:calc(var(--u)*.8); padding:calc(var(--u)*.9) calc(var(--u)*1.3); background:linear-gradient(135deg,#35291fec,#110f0eea); box-shadow:inset 0 0 0 2px #0c110dc9,0 3px 8px #0008; font-size:calc(var(--u)*2.5); border-radius:1px; }
.intent .ui-icon { width:calc(var(--u)*3.2); height:calc(var(--u)*3.2); color:#e4c69e; }
.intent::before { content:'NEXT'; font-size:calc(var(--u)*1.3); letter-spacing:.14em; color:#bbad91; }
.intent.danger { color:#ffc99f; }
.badge { display:inline-flex; align-items:center; gap:.25em; border:1px solid #b7a67828; padding:0 .5em; }
.b-player { border-color:#bca36c66; background:linear-gradient(110deg,#4b4932,#232e23 22%,#101e17 75%,#273225); box-shadow:inset 0 0 0 2px #050c08,inset 0 0 0 3px #e8d29d12,0 4px 16px #000b; }
.b-player .avatar { width:calc(var(--u)*9.5); height:calc(var(--u)*9.5); border:1px solid #b49a60; border-radius:1px; box-shadow:0 0 0 2px #090e0c,0 0 0 3px #c0a97533; }
.hero-name { font-size:calc(var(--u)*2.2); letter-spacing:.18em; line-height:1.15; }
.hero-name span { font-family:var(--font-ui); font-size:calc(var(--u)*1.5); letter-spacing:.12em; padding-top:.15em; }
.b-player .bar { height:calc(var(--u)*2.35); background:#080e0ba8; border:1px solid #a2af9744; border-radius:0; }
.b-player .bars .bar.hp { height:calc(var(--u)*2.85); }
.b-player .bar .txt { display:flex; align-items:center; justify-content:center; gap:.35em; font-weight:600; font-size:calc(var(--u)*1.75); }
.b-player .bar .txt .ui-icon { width:1em; height:1em; }
.bar.mana .fill { background:linear-gradient(0deg,#1e4c66,#3f859c 70%,#83c7d5); }
.bar.rage .fill { background:linear-gradient(0deg,#7d371c,#b57932 70%,#edc077); }
.b-player .armor-chip { display:flex; align-items:center; gap:.2em; padding:.2em .4em; border:1px solid #a88d51; border-radius:1px; background:#121a12; }
.b-player .armor-chip.hidden { display:none; }

.board { border:1px solid #d4bc7c; border-radius:2px; background:linear-gradient(150deg,#1b2b21,#0a1511 55%,#1e271a); box-shadow:0 0 0 2px #0a100d,0 0 0 4px #857348,0 0 0 5px #101711,0 8px 28px #0009,inset 0 0 18px #0009; }
.board::before { content:''; position:absolute; pointer-events:none; inset:1px; z-index:4; background:linear-gradient(#dac590,#dac590) left top/12px 2px no-repeat,linear-gradient(#dac590,#dac590) left top/2px 12px no-repeat,linear-gradient(#dac590,#dac590) right top/12px 2px no-repeat,linear-gradient(#dac590,#dac590) right top/2px 12px no-repeat,linear-gradient(#dac590,#dac590) left bottom/12px 2px no-repeat,linear-gradient(#dac590,#dac590) left bottom/2px 12px no-repeat,linear-gradient(#dac590,#dac590) right bottom/12px 2px no-repeat,linear-gradient(#dac590,#dac590) right bottom/2px 12px no-repeat; }
.cell-bg { border-color:#c9d4b90c; border-radius:2px; background:linear-gradient(135deg,#ffffff04,#00000018); }
.tile .gem { inset:8%; }
.tile .gem .shape.has-art { filter:saturate(.8) contrast(1.07) brightness(.94); }
.tile.selected .gem .shape { outline:1px solid #f3dc9d; outline-offset:2px; }
.tile.selected .gem { filter:drop-shadow(0 0 6px #eac577b3); }
/* Painted special runes keep their gem and lock overlay stacking. */
.tile .ov::before,.tile .ov::after { content:none !important; }
.tile.charged_h .ov,.tile.charged_v .ov { z-index:0; }
.tile.charged_h .gem,.tile.charged_v .gem { z-index:1; }
.tile.world .shape { animation:none; }
.tile.locked .ov { background:repeating-linear-gradient(42deg,transparent 0 40%,#111e20 41% 44%,#b1ae9b 45% 49%,#344246 50% 52%,transparent 53% 100%); }

.b-skills { gap:calc(var(--u)*1.4); grid-template-columns:repeat(3,1fr) 1.17fr; }
.skill { border:1px solid #8c805d; border-radius:3px; background:radial-gradient(ellipse at 50% 0,#61736924,transparent 70%),linear-gradient(#1d2b23,#0d1711); padding:calc(var(--u)*.6) calc(var(--u)*.5) calc(var(--u)*1); box-shadow:inset 0 1px #e0cca222,0 2px 5px #0005; overflow:hidden; gap:0; }
.skill { display:grid; grid-template-rows:minmax(0,1fr) auto auto; justify-items:center; align-items:center; }
.skill .ic { display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height:0; line-height:0; }
.ability-icon { display:block; width:calc(var(--u)*8.8); height:calc(var(--u)*8.8); max-width:100%; max-height:100%; overflow:visible; filter:drop-shadow(0 1px 1px #000); }
.ability-icon .seal { fill:#14201b; stroke:#88774b; stroke-width:.8; }
.ability-icon .seal-inner { fill:#1f2c26; stroke:#bfa678; stroke-width:.5; }
.ability-icon .metal { stroke:#e6e5ce; stroke-width:.9; stroke-linejoin:bevel; }
.ability-icon .inlay { stroke:#c5b885; stroke-width:.7; }
.ability-icon .handle { fill:#80684c; stroke:#d6b882; stroke-width:.9; }
.ability-icon .energy { fill:none; stroke:#9ddbe9; stroke-width:1.4; }
.ability-icon .blood { fill:#a54d45; stroke:#e89b77; stroke-width:1; }
.ability-blood_oath .energy { stroke:#e0987d; }
.ability-fathers_wrath .energy { stroke:#efe0a3; }
.skill .nm { font-family:var(--font-ui); font-size:max(9px,calc(var(--u)*1.85)); font-weight:600; letter-spacing:0; margin-top:calc(var(--u)*.4); line-height:1.2; }
.skill .cost { display:flex; align-items:center; gap:.35em; font-size:max(9px,calc(var(--u)*2)); font-weight:600; line-height:1.2; color:#b7d8de; }
.skill .cost .ui-icon { width:1em; height:1em; }
.skill-state { position:absolute; top:3px; right:4px; font:600 max(7px,calc(var(--u)*1.1))/1.2 var(--font-ui); letter-spacing:.08em; color:#aab6a7; height:1.2em; }
.skill.disabled .skill-state { visibility:hidden; }
.skill .meter { height:calc(var(--u)*.35); bottom:0; background:linear-gradient(90deg,#346275,#9cd8e7); box-shadow:0 0 5px #90cddd33; }
.skill.disabled { filter:none; }
.skill.disabled .ability-icon { opacity:.72; }
.skill.ready { background:radial-gradient(ellipse at 50% 10%,#37697966,transparent 80%),#12211a; border-color:#a6d5d8; box-shadow:inset 0 0 0 2px #0b1512,inset 0 0 14px #5ba3b433,0 0 9px #7bcde022; }
.skill.ready .energy { filter:drop-shadow(0 0 2px #77d8f4); }
.skill.ready .skill-state { color:#c6edf2; }
.skill.ult { background:radial-gradient(ellipse at 50% 0,#8d703d33,transparent 85%),#1e2418; border-color:#b59855; }
.skill.ult .meter { background:linear-gradient(90deg,#966029,#e3bf70); }
.skill.ult.ready { animation:none; border-color:#f1d395; box-shadow:inset 0 0 0 2px #171b0e,inset 0 0 24px #d8ac482e,0 0 18px #ddbb4940; }
.skill.ult.ready .skill-state { color:#ffe5a9; }
.skill.active { outline:2px solid #edd69c; outline-offset:1px; }
.battle-status { font-family:var(--font-title); font-size:calc(var(--u)*1.8); letter-spacing:.18em; color:#e1ca8d; }
.battle-status span { font-family:var(--font-ui); font-size:calc(var(--u)*1.7); color:#b9bdb2; }
.banner.combo { display:flex; align-items:center; justify-content:center; gap:calc(var(--u)*2.6); width:82%; padding:calc(var(--u)*2.4) 0; background:linear-gradient(90deg,transparent,#071317ea 23%,#071317ea 77%,transparent); }
.chain-count { font:600 calc(var(--u)*13)/.9 var(--font-title); color:#ecddb6; text-shadow:0 2px #182926,0 0 18px #8accdf66; }
.chain-caption { display:flex; flex-direction:column; text-align:left; gap:calc(var(--u)*1); }
.chain-caption small { font:600 calc(var(--u)*2)/1.2 var(--font-title); letter-spacing:.23em; color:#bbdce2; }
.chain-caption b { font:600 calc(var(--u)*4.2)/1 var(--font-title); color:#eee0b7; }
.chain-caption em { font:600 calc(var(--u)*1.4)/1 var(--font-ui); font-style:normal; letter-spacing:.16em; color:#b1b9ac; }
.banner.combo.lv6 .chain-count { color:#fff0c2; text-shadow:0 0 20px #ddb56b99; }
.rune-impact { animation:runeContact .32s ease-out; }
@keyframes runeContact { 12% { filter:brightness(1.22); } 36% { filter:brightness(.93); } 100% { filter:brightness(1); } }
.tile.fall { transition:transform .23s cubic-bezier(.34,.05,.65,1); transition-delay:var(--drop-delay,0ms); }
.tile.fall .gem { animation:runeLand .18s calc(.23s + var(--drop-delay,0ms)) both; transform-origin:50% 88%; }
.tile.spawn .gem { animation:runeArrive .3s cubic-bezier(.2,.8,.25,1.3); }
.tile.rune-casting .gem { animation:runeAnticipate .35s ease-in-out; }
.tile.rune-struck .gem { animation:runeStrike .3s cubic-bezier(.2,.8,.3,1); }
.tile.pop .gem { animation:runeBurst .28s cubic-bezier(.22,.7,.3,1) forwards; transition:none; }
.tile.pop .ov { opacity:0; transition:opacity .12s; }
@keyframes runeAnticipate { 0%{transform:scale(1)} 45%{transform:scale(.78,1.12);filter:brightness(1.25)} 75%{transform:scale(1.18,.9)} 100%{transform:scale(1)} }
@keyframes runeStrike { 25%{transform:scale(.8,1.15);filter:brightness(1.65)} 60%{transform:scale(1.12,.92)} 100%{transform:scale(1);filter:brightness(1)} }
@keyframes runeBurst { 0%{transform:scale(1);opacity:1} 24%{transform:scale(.82,1.12)} 48%{transform:scale(1.2);filter:brightness(1.55);opacity:1} 100%{transform:scale(.25);filter:brightness(1);opacity:0} }
@keyframes runeLand { 0%{transform:scale(1.02,.98)} 30%{transform:scale(1.13,.86) translateY(2%)} 65%{transform:scale(.96,1.06) translateY(-2%)} 100%{transform:scale(1)} }
@keyframes runeArrive { 0%{transform:scale(.35);opacity:.3} 70%{transform:scale(1.08);opacity:1} 100%{transform:scale(1)} }
@media(prefers-reduced-motion:reduce) { .rune-impact { animation:none !important; } }
@media(prefers-reduced-motion:reduce) { .tile .gem { animation:none !important; } .tile.pop .gem { opacity:0; } .tile.fall { transition-duration:.08s; transition-delay:0s; } }