/* Godbreaker — charcoal, aged gold, and a battlefield rather than portrait cards. */
:root { --bg0:#0a0d0d; --bg1:#141918; --bg2:#202521; --iron:#4b514c; --iron-hi:#777567; --gold:#b59b64; --gold-hi:#e2cd99; --text:#eee8d9; --muted:#a6a99c; --font-title:'Cinzel','Times New Roman',serif; }
body { background:radial-gradient(ellipse at 50% 35%,#252822,#080a0a 65%); }
#game { width:min(100vw,calc(100dvh * 9 / 16)); height:min(100dvh,calc(100vw * 16 / 9)); background:#101513; border:1px solid #c2ae6c22; }
button { touch-action:manipulation; }
button:focus-visible,[role=button]:focus-visible,input:focus-visible { outline:2px solid var(--gold-hi); outline-offset:3px; }
.btn { font-family:var(--font-ui); font-size:calc(var(--u)*3.25); letter-spacing:.02em; border:1px solid #82765a; background:#1c2421; box-shadow:inset 0 1px #ffffff0a; border-radius:3px; padding:calc(var(--u)*2.9) calc(var(--u)*4.5); }
.btn.gold { background:linear-gradient(110deg,#a78b52,#c7ac72); color:#171c19; border-color:#d8bd81; font-weight:800; box-shadow:0 4px 18px #0005; }
.btn:hover { filter:brightness(1.12); }
.icon-btn { border:1px solid #b3a27a55; background:#101512b0; border-radius:4px; width:calc(var(--u)*8); height:calc(var(--u)*8); font-size:calc(var(--u)*4); }
.eyebrow { font-size:calc(var(--u)*2.3); letter-spacing:.22em; font-weight:600; color:var(--gold); }
.separator { padding:0 .6em; color:var(--gold); }
.panel { background:linear-gradient(135deg,#232822,#111613); border:1px solid #b39c6b80; border-radius:6px; padding:calc(var(--u)*5); box-shadow:0 18px 80px #000d; touch-action:pan-y; }
.panel h2 { font-size:calc(var(--u)*5.5); font-weight:600; line-height:1.22; margin-bottom:calc(var(--u)*2); }
.panel h3 { font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.15em; font-size:calc(var(--u)*2.4); margin:calc(var(--u)*4) 0 calc(var(--u)*2); color:var(--muted); }
.panel .sub { font-size:calc(var(--u)*2.9); line-height:1.5; }
.modal { backdrop-filter:blur(6px); background:#0009; padding:calc(var(--u)*5); }
.panel .row { gap:calc(var(--u)*2.5); }
.panel .row .gold { flex:1; }
.kv { font-size:calc(var(--u)*2.9); row-gap:calc(var(--u)*1.5); }
.enemy-list .e { border:1px solid #ffffff0c; border-radius:3px; background:#080d0b66; }
.enemy-preview img { border-radius:3px; }
.stage-panel { padding-top:0; overflow:hidden auto; }
.stage-preview-art { height:calc(var(--u)*24); margin:0 calc(var(--u)*-5) calc(var(--u)*3); padding:calc(var(--u)*4) calc(var(--u)*5); display:flex; align-items:flex-end; background-size:cover; background-position:center 42%; }
.stage-preview-art .eyebrow { color:#e8dbba; text-shadow:0 1px 6px #000; }
.relic-item { border-radius:3px; }
.relic-item .ic { flex:none; }
.big-stars { font-size:calc(var(--u)*9); text-shadow:none; }

/* Entry and language selection. */
#screen-title { justify-content:flex-start; padding:calc(var(--u)*11) calc(var(--u)*7) calc(var(--u)*8); gap:calc(var(--u)*3); }
#screen-title .title-rune { font-size:calc(var(--u)*15); line-height:1; margin-top:calc(var(--u)*3); opacity:.9; text-shadow:0 0 25px #b79c6240; }
.title-heading .eyebrow { margin-bottom:calc(var(--u)*3); }
.title-main { font-size:calc(var(--u)*9.7); letter-spacing:.01em; background:linear-gradient(#f0e5c8,#b39960); background-clip:text; -webkit-background-clip:text; }
.title-sub { color:#e0d5b6; font-size:calc(var(--u)*3); letter-spacing:.42em; margin-top:calc(var(--u)*2); }
.title-tag { font-size:calc(var(--u)*3); line-height:1.7; max-width:85%; color:#c2c4b7; }
.title-vignette { background:linear-gradient(#060a09c9,#060a0944 45%,#060a0933 60%,#060a09ed 90%); }
.title-actions { margin-top:auto; width:100%; display:grid; gap:calc(var(--u)*2.5); }
.title-actions .btn { width:100%; }
.title-actions .btn.small { border:none; background:transparent; color:#c6c3b4; }
.title-edition { font-size:calc(var(--u)*2.1); letter-spacing:.22em; color:#acb0a4; }
.title-edition span { margin:0 .8em; }
#screen-title .language-trigger { position:absolute; right:calc(var(--u)*4); top:calc(var(--u)*4); z-index:5; }
.language-trigger { color:var(--muted); font:inherit; font-size:calc(var(--u)*2.7); border:1px solid #ffffff22; border-radius:3px; padding:calc(var(--u)*1.6) calc(var(--u)*2.8); background:#111a15bb; cursor:pointer; }
.language-panel { text-align:center; }
.language-rune { color:var(--gold); font-size:calc(var(--u)*15); margin:calc(var(--u)*5) 0; }
.language-panel h2 { font-size:calc(var(--u)*5); }
.language-panel .sub { margin:calc(var(--u)*3) 0 calc(var(--u)*6); }
.language-option { display:flex; align-items:center; text-align:left; gap:calc(var(--u)*3); border:1px solid var(--gold); border-radius:4px; background:#ac945510; padding:calc(var(--u)*4); cursor:pointer; }
.language-option input { accent-color:var(--gold); width:16px; height:16px; }
.language-option b { display:block; font-size:calc(var(--u)*3.8); }
.language-option small { font-size:calc(var(--u)*2.5); color:var(--muted); }
.language-check { margin-left:auto; color:var(--gold); }

/* Realm map: quiet paths and legible labels. */
.map-header { background:linear-gradient(#0b110ff5 70%,#0b110f00); padding:calc(var(--u)*4); padding-bottom:calc(var(--u)*7); }
.map-header .realm b { font-size:calc(var(--u)*4.8); }
.map-header .realm span { font-size:calc(var(--u)*2.2); }
.map-canvas.has-art { background-image:linear-gradient(#0b110f55,#0b110f77),var(--map-art); }
.node .disc { background:#121b17e8; border-width:1px; box-shadow:0 4px 14px #0009; font-family:'Noto Sans Runic',serif; font-size:calc(var(--u)*5); }
.node .label { background:#0b110fba; border-radius:3px; padding:calc(var(--u)*.8) calc(var(--u)*1.8); font-size:calc(var(--u)*2.6); max-width:calc(var(--u)*32); }
.node.boss .disc { border-width:2px; background:#242718e6; }
.node.available .disc { animation:none; box-shadow:0 0 0 4px #d2bc7625,0 3px 18px #000; }
.node.locked { filter:grayscale(.7) brightness(.6); }

/* Battle grid: every row has a budget, so source image dimensions cannot push the board away. */
#screen-battle { padding:calc(var(--u)*2) calc(var(--u)*3); display:none; grid-template-rows:calc(var(--u)*9) minmax(0,1fr) calc(var(--u)*11) auto calc(var(--u)*14.5) calc(var(--u)*4); gap:calc(var(--u)*1.2); }
#screen-battle.active { display:grid; }
#screen-battle > :not(.battle-art) { min-height:0; }
#screen-battle.has-art .battle-art { background-position:center 28%; bottom:42%; opacity:.72; filter:saturate(.65); }
#screen-battle.has-art::after { background:radial-gradient(ellipse at 50% 25%,transparent 12%,#080d0b66 53%),linear-gradient(#080d0b99,#080d0b00 17%,#0b100e55 35%,#0b100eef 49%,#0b100e 65%); }
.b-top { height:100%; align-items:center; }
.b-top .title { font-size:calc(var(--u)*3.7); text-align:center; letter-spacing:.065em; font-weight:600; text-shadow:0 2px 8px #000; }
.b-top .title small { font-size:calc(var(--u)*1.9); margin-top:calc(var(--u)*1.2); text-transform:uppercase; letter-spacing:.2em; color:#c0c5bd; }
.b-top .icon-btn { border-radius:0; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); background:linear-gradient(145deg,#31392cbb,#0a100ee6); box-shadow:inset 0 0 0 2px #0006; }
.b-enemies { min-height:0; align-items:stretch; gap:calc(var(--u)*3); padding:calc(var(--u)*2.5) calc(var(--u)*2) 0; isolation:isolate; }
.b-enemies::before { content:''; position:absolute; z-index:-1; inset:15% 0 5%; background:radial-gradient(ellipse at 50% 72%,#bc673514,transparent 65%); pointer-events:none; }
.enemy,.enemy.boss { flex:1; max-width:46%; min-width:0; min-height:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; justify-content:flex-end; }
.enemy.solo,.enemy.boss,.enemy.miniboss { max-width:100%; }
.enemy.solo .portrait { width:100%; }
.enemy.solo .enemy-hud { width:78%; }
.enemy.targeted { box-shadow:none; border:0; }
.enemy.targeted::before { display:none; }
.enemy .portrait,.enemy.boss .portrait { position:relative; flex:1 1 0; min-height:0; width:100%; height:auto; display:flex; align-items:flex-end; justify-content:center; filter:none; font-size:calc(var(--u)*12); }
.enemy .portrait::before { content:''; position:absolute; bottom:-2%; left:17%; right:17%; height:8%; border-radius:50%; background:#0009; filter:blur(3px); }
.enemy.targeted .portrait::before { border:1px solid #d2ba78cc; background:#a48c3822; box-shadow:0 0 12px #d2ba782a; filter:none; }
.enemy .portrait img { --actor-scale:1.06; position:relative; display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; border:none; border-radius:0; filter:drop-shadow(0 8px 5px #000b); transform-origin:50% 100%; animation:actorIdle 4s ease-in-out infinite; }
.enemy.miniboss .portrait img,.enemy.boss .portrait img { --actor-scale:1.12; filter:drop-shadow(0 8px 6px #000c) drop-shadow(0 0 9px #be482d22); }
.enemy[data-enemy=tyrs_hound] .portrait img { --actor-scale:1.17; }
.enemy:nth-child(2) .portrait img { animation-delay:-1.7s; }
.enemy.stunned .portrait img { filter:grayscale(.7) drop-shadow(0 5px 3px #0008); animation:none; }
.enemy-hud { position:relative; flex:none; width:100%; padding:calc(var(--u)*1.3) calc(var(--u)*1.4) 0; text-align:center; background:linear-gradient(transparent,#0b100e66 45%); }
.enemy.boss .enemy-hud,.enemy.miniboss .enemy-hud { max-width:calc(var(--u)*76); align-self:center; }
.enemy .name,.enemy.boss .name { font-family:var(--font-ui); font-size:calc(var(--u)*2.7); font-weight:600; line-height:1.3; color:#e4e0d0; }
.enemy.targeted .name { color:var(--gold-hi); }
.enemy .kind { display:none; }
.enemy.boss .name,.enemy.miniboss .name { font-family:var(--font-title); font-size:calc(var(--u)*3.5); font-weight:600; letter-spacing:.08em; color:#efe0b6; text-shadow:0 2px 5px #000; }
.enemy.boss .kind,.enemy.miniboss .kind { display:block; font-size:calc(var(--u)*1.55); letter-spacing:.32em; color:#b59472; margin:calc(var(--u)*.4) 0; }
.enemy.boss .bar.hp,.enemy.miniboss .bar.hp { height:calc(var(--u)*2.65); border:1px solid #be9970; border-radius:0; box-shadow:0 0 0 2px #0b100ed9,0 0 0 3px #ba90552e; overflow:visible; }
.enemy.boss .bar.hp::before,.enemy.miniboss .bar.hp::before,.enemy.boss .bar.hp::after,.enemy.miniboss .bar.hp::after { content:''; position:absolute; z-index:2; top:50%; width:calc(var(--u)*1.2); height:calc(var(--u)*1.2); background:#c0a272; transform:translateY(-50%) rotate(45deg); }
.enemy.boss .bar.hp::before,.enemy.miniboss .bar.hp::before { left:calc(var(--u)*-.7); }
.enemy.boss .bar.hp::after,.enemy.miniboss .bar.hp::after { right:calc(var(--u)*-.7); }
.enemy .bar { height:calc(var(--u)*2.5); border:1px solid #d0a37844; border-radius:2px; margin-top:calc(var(--u)*.8); }
.enemy .bar .txt { font-size:calc(var(--u)*1.9); }
.bar.hp .fill { background:linear-gradient(0deg,#702720,#b44d39 70%,#ca7255); box-shadow:inset 0 1px #eeac713b; }
.intent { top:0; right:4%; border-width:1px; border-radius:3px; padding:calc(var(--u)*.7) calc(var(--u)*1.7); font-size:calc(var(--u)*2.6); background:#0c1210e8; }
.intent.danger { animation:none; }
.enemy.solo .intent { right:9%; top:3%; }
.intent::before { content:'NEXT '; font-size:.58em; font-weight:600; letter-spacing:.1em; color:#c0b8a7; vertical-align:middle; }
.enemy.charging .intent,.enemy.enraged .intent { box-shadow:0 0 18px #ba372a44; border-color:#e88a63; }
.enemy.charging .portrait::before,.enemy.enraged .portrait::before { background:#d54e2626; box-shadow:0 0 20px #c6302138; }
.badges { min-height:calc(var(--u)*2.5); margin-top:calc(var(--u)*.5); gap:calc(var(--u)*.7); }
.badges:empty { min-height:0; margin:0; }
.badge { font-size:calc(var(--u)*1.9); line-height:calc(var(--u)*2.8); border:0; border-radius:2px; background:#0a100bd9; }
.phase-pips { justify-content:center; font-size:calc(var(--u)*2); margin-top:calc(var(--u)*.4); }
.phase-pips i { height:calc(var(--u)*.6); }
.passive { font-size:calc(var(--u)*2); margin-top:calc(var(--u)*.6); line-height:1.3; color:#d8b984; }
.charge-bar { height:calc(var(--u)*.8); }
.b-player { height:100%; padding:calc(var(--u)*.7) calc(var(--u)*2); border:1px solid #d5be8644; border-radius:2px; background:linear-gradient(110deg,#32382dee,#121b17ee 35%,#1f2820ee); gap:calc(var(--u)*2); box-shadow:inset 0 1px #e5cc9312,0 5px 12px #0006; }
.b-player .avatar { flex:none; overflow:hidden; width:calc(var(--u)*9); height:calc(var(--u)*9); border-radius:3px; border:1px solid #b79d6355; }
.b-player .avatar img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 25%; }
.b-player .bars { min-width:0; gap:calc(var(--u)*.5) calc(var(--u)*2); }
.hero-name { grid-column:1/3; font-family:var(--font-title); font-size:calc(var(--u)*2.2); letter-spacing:.15em; color:#e7d7ad; line-height:1.1; }
.hero-name span { float:right; font-size:calc(var(--u)*1.7); letter-spacing:.06em; color:#9b9f8e; }
.b-player .bars .bar.hp { height:calc(var(--u)*2.7); }
.b-player .bar { height:calc(var(--u)*2); border:0; border-radius:2px; margin:0; }
.b-player .bar .txt { font-size:calc(var(--u)*1.85); }
.b-player .armor-chip { top:auto; bottom:0; left:calc(var(--u)*1.5); font-size:calc(var(--u)*2); z-index:2; }
.b-board-wrap { align-items:center; }
.board { box-sizing:content-box; border:1px solid #a28d5c88; border-radius:3px; background:linear-gradient(#18221e,#0b100e); box-shadow:0 0 0 3px #090e0c,0 0 0 4px #8a77452e,inset 0 0 20px #0008,0 8px 25px #0007; }
.cell-bg { background:#e7dcbb06; border:1px solid #f1ead706; border-radius:4px; }
.tile .gem { inset:9%; }
.tile .gem .shape.has-art { filter:saturate(.78) brightness(.92); box-shadow:none; }
.b-skills { height:100%; gap:calc(var(--u)*1.8); grid-template-columns:repeat(3,1fr) 1.15fr; }
.skill { justify-content:center; border-width:1px; border-radius:3px; background:linear-gradient(#293028,#141c18); padding:calc(var(--u)*.6); }
.skill .ic img { width:calc(var(--u)*6.5); height:calc(var(--u)*6.5); border-radius:2px; filter:saturate(.5); }
.skill .nm { font-family:var(--font-title); font-size:calc(var(--u)*1.85); letter-spacing:.01em; margin-top:calc(var(--u)*.5); color:#e7dcc4; }
.skill .cost { font-size:calc(var(--u)*2); }
.skill .meter { height:2px; }
.skill.disabled { filter:grayscale(.55) brightness(.73); }
.skill.ready { border-color:#85b3bd; box-shadow:inset 0 0 18px #76abd325,0 0 9px #66d5ed18; }
.skill.ready .ic img { filter:saturate(.8) brightness(1.2); }
.skill.ult.ready { border-color:#e9c477; box-shadow:inset 0 0 18px #dc9c3533,0 0 12px #e6ad4c33; }
.skill.ult { border-color:#a18b54; }
.battle-status { font-size:calc(var(--u)*2); letter-spacing:.16em; text-align:center; color:var(--gold-hi); align-self:center; }
.battle-status span { margin-left:calc(var(--u)*2); color:var(--muted); letter-spacing:0; text-transform:none; }
.tipbox { bottom:calc(var(--u)*23); border-width:1px; border-radius:5px; background:#121a15f5; padding:calc(var(--u)*3.5); font-size:calc(var(--u)*3); box-shadow:0 12px 50px #000b; }
.tipbox .t-h { font-family:var(--font-ui); font-size:calc(var(--u)*2.2); margin-bottom:calc(var(--u)*2); }
.tipbox .t-h span { float:right; color:var(--muted); }
.tutorial-actions { display:flex; justify-content:space-between; margin-top:calc(var(--u)*3); }
.tutorial-actions button { border:0; background:none; color:var(--muted); font:inherit; font-size:calc(var(--u)*2.8); cursor:pointer; padding:calc(var(--u)*1.5) 0; }
.tutorial-actions .tutorial-next { color:var(--gold-hi); font-weight:800; }
.tooltip { border-radius:4px; background:#111914f5; }
/* Layered combat FX stay behind readable text; no full-screen white strobe. */
.combat-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
#fx-layer > :not(.combat-canvas) { z-index:1; }
.banner.combo { width:94%; margin:auto; right:0; font-size:calc(var(--u)*5.1); font-weight:800; letter-spacing:.07em; line-height:1.25; padding:calc(var(--u)*2.2) 0; color:#e6d3a4; background:linear-gradient(90deg,transparent,#080e12c9 25%,#080e12c9 75%,transparent); text-shadow:0 2px 3px #000,0 0 16px #58b7ed66; }
.banner.combo.lv3 { font-size:calc(var(--u)*5.8); color:#c6efff; }
.banner.combo.lv4,.banner.combo.lv5 { font-size:calc(var(--u)*6.3); color:#eae0bf; text-shadow:0 2px 3px #000,0 0 20px #459ddd; }
.banner.combo.lv6 { font-size:calc(var(--u)*6.8); color:#fff0c6; text-shadow:0 2px 3px #000,0 0 22px #59c7ff; }
.banner.pattern,.banner.extra { font-family:var(--font-title); letter-spacing:.1em; font-size:calc(var(--u)*4.5); }
.float.dmg { font-family:var(--font-title); font-weight:800; color:#fff0da; text-shadow:0 2px 0 #5a1913,0 0 5px #000; }
.float.dmg.big { color:#ffdd98; }
.flash { background:radial-gradient(ellipse at 50% 25%,#86c9e92b,transparent 65%); }
.storm-impact { animation:stormImpact .32s ease-out; }
@keyframes stormImpact { 20% { transform:translateY(3px); filter:brightness(1.25); } 50% { transform:translateY(-1px); } }
@keyframes actorIdle { 0%,100% { transform:scale(var(--actor-scale,1)); } 50% { transform:scale(var(--actor-scale,1)) translateY(-1px) rotate(.25deg); } }
@media(prefers-reduced-motion:reduce) {
  .enemy .portrait img,.title-rune,.node .disc,.story-embers { animation:none !important; }
  .enemy .portrait img { transform:scale(var(--actor-scale,1)); }
  .storm-impact,.enemy.hit,.enemy.lunge,.b-player.hurt,.board.shake1,.board.shake2,.bar.rage.full .fill { animation:none !important; }
  .beam,.blast-ring,.flash { display:none; }
  .banner,.float { animation:none; }
}