[hidden]{display:none!important}.eyebrow{letter-spacing:3px;color:#d9bb78}.hero-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:25px 0}.hero-choice{display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:18px;background:radial-gradient(ellipse at top,#284a42,#0b201d);border:1px solid #597c6a;border-radius:12px;overflow:hidden}.hero-choice:hover,.hero-choice:focus-visible{border-color:#e9c584;box-shadow:0 0 20px #b6c28033}.hero-choice img{width:100%;height:235px;object-fit:contain;object-position:center}.hero-choice h2{font-size:27px;margin:12px 0 6px}.hero-choice p{font-size:14px;margin:8px 0}.hero-choice .stats{color:#99dfc6;letter-spacing:1px}.hero-choice .select-label{margin-top:auto;padding-top:18px;color:#f3d598;font-weight:700}.disclaimer{font-size:13px;max-width:760px}
.hero-list button:disabled{opacity:.65}
/* One responsive camera paints the entire arena, including the space behind HUD. */
/* Scene-owned HUD: the same controls remain available to touch and keyboards. */
#battle-stage{height:min(760px,calc(100svh - 16px));min-height:320px;scroll-margin-top:8px;background:#091916}
.scene-world{position:absolute;inset:0}
#combat .scene-world canvas{width:100%;height:100%;aspect-ratio:auto}
.scene-hud{position:absolute;inset:12px 16px auto;z-index:3;pointer-events:none}.scene-hud #cards{display:flex;justify-content:space-between;gap:20px}.scene-hud .fighter{width:260px;padding:9px 12px;background:#071712df;backdrop-filter:blur(8px);border-radius:8px;pointer-events:auto}.fighter summary{display:flex;align-items:center;gap:8px;cursor:pointer;min-height:44px;font-size:15px}.fighter summary img{width:40px;height:40px;object-fit:cover;border-radius:50%;border:1px solid var(--gold)}.fighter summary small{font-size:9px;color:var(--mint);margin-left:auto}.scene-hud .fighter p{margin:4px 0;font-size:11px}.scene-hud .fighter progress{height:9px}.fighter .state{float:right}.scene-hud #round-label{position:absolute;top:0;left:50%;transform:translateX(-50%);margin:0;font-size:12px;background:#071712df;padding:8px 12px;border-radius:8px;white-space:nowrap}.scene-hud .intent{margin:8px 0 0 auto;width:max-content;max-width:50%;padding:6px 10px;background:#071712df;font-size:11px;border:0}.scene-hud #turn-tip{display:none}
.actor-hotspot,.target-hotspot{position:absolute;top:30%;height:48%;width:20%;background:transparent;border:1px solid transparent;border-radius:45%;padding:0}.actor-hotspot{left:17%}.target-hotspot{left:62%;border-color:#e3bd7680;box-shadow:inset 0 -12px 18px #e3bd7620}.target-hotspot span{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:10px;background:#071712e8;padding:5px 10px;color:var(--gold)}.actor-hotspot:focus-visible,.actor-hotspot:hover{box-shadow:inset 0 -15px 25px #7cd9c430;border-color:var(--mint)}
#battle-stage #plans{position:absolute;bottom:105px;left:8%;width:38%;z-index:4}#battle-stage .action-picker{grid-template-columns:repeat(4,1fr);gap:8px}#battle-stage .action-picker button{min-width:0;min-height:54px;padding:8px 5px;border-radius:18px;background:#081b18ed;font-size:12px;box-shadow:0 4px 18px #0006}#battle-stage .action-picker button:nth-child(2),#battle-stage .action-picker button:nth-child(3){transform:translateY(10px)}#battle-stage .action-picker .selected-action{border-color:var(--gold);color:var(--gold);background:#344234}
.scene-command{position:absolute;bottom:0;left:0;right:0;min-height:85px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(0deg,#061311fa,#0c211be8);border-top:1px solid #8aa48855;z-index:5}.scene-command p{margin:4px 0;font-size:12px}.scene-command #planned-action{color:var(--gold);font-weight:bold}.scene-command #action-availability{font-size:10px;color:var(--muted)}.scene-command #status:empty{display:none}#battle-stage #result{top:36%;z-index:6}#battle-stage[data-resolving=true] #planned-action{display:none}
@media(max-width:700px){#game-screen .demo-tag{font-size:10px;margin:8px 0}#battle-stage{height:min(660px,calc(100svh - 20px));min-height:420px}.scene-hud{inset:8px 8px auto}.scene-hud #cards{gap:8px;padding-top:28px}.scene-hud .fighter{width:50%;padding:6px}.fighter summary{font-size:12px;flex-wrap:wrap;gap:4px}.fighter summary img{width:26px;height:26px}.fighter summary small{width:100%;margin:0;font-size:8px}.scene-hud .fighter p{font-size:10px}.scene-hud #round-label{font-size:10px;padding:5px}.scene-hud .intent{font-size:10px;max-width:100%;margin-top:5px}.scene-world{inset:130px 0 145px}.scene-command{padding:10px;min-height:90px}.scene-command>div{min-width:0}.scene-command button.primary{min-width:90px;padding:12px 10px}.scene-command p{font-size:11px}.scene-command #action-availability{font-size:9px}#battle-stage #plans{left:8px;right:8px;bottom:110px;width:auto}#battle-stage .action-picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}#battle-stage .action-picker button{font-size:11px;min-height:46px;border-radius:12px}#battle-stage .action-picker button:nth-child(n){transform:none}#battle-stage #result{top:43%}.actor-hotspot,.target-hotspot{top:20%;height:65%}}
.mode-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:28px 0 36px}.mode-choice{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid #597c6a;border-radius:12px;background:linear-gradient(135deg,#203e35,#0b201d);color:#f1ecd9;text-decoration:none}.mode-choice strong{font:700 25px Georgia,serif;color:#f3d598}.mode-choice span{line-height:1.6}.mode-choice b{margin-top:auto;padding-top:6px;color:#99dfc6}.mode-choice:hover,.mode-choice:focus-visible{border-color:#e9c584;box-shadow:0 0 20px #b6c28033}.mode-choice:focus-visible{outline:2px solid #e9c584;outline-offset:4px}#choose-hero{scroll-margin-top:24px}@media(max-width:700px){.mode-list{grid-template-columns:1fr;gap:12px}.mode-choice{padding:18px}.mode-choice strong{font-size:22px}}
#combat canvas{display:block;width:100%;height:auto;aspect-ratio:1280/650}
.action-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.action-picker button{font-size:15px;min-height:50px}
#action-special{border-color:var(--gold)}
.switch-hero{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}.switch-hero small{color:var(--muted)}
#round-label{color:var(--gold);font-size:17px}
#status{font-size:13px;color:var(--mint);min-height:18px}
#result{position:absolute;top:5%;left:50%;transform:translateX(-50%);padding:12px 25px;background:#071411df;border:1px solid var(--gold);color:var(--gold);font:24px Georgia;pointer-events:none}
#log{max-height:230px;overflow:auto;line-height:1.7;font-size:13px}
@media(max-width:700px){
 #battle-stage{height:min(680px,calc(100svh - 16px));min-height:320px}
 #battle-stage .scene-world{inset:0}
 .scene-hud #cards{padding-top:23px}
 .scene-hud .fighter{padding:5px 7px;background:#071712d9}
 .scene-hud .fighter summary{min-height:27px;flex-wrap:nowrap;font-size:11px}
 .scene-hud .fighter summary img{width:24px;height:24px}
 .scene-hud .fighter summary small{width:auto;margin-left:auto;font-size:0}
 .scene-hud .fighter summary small:after{content:'⌄';font-size:13px}
 .scene-hud .fighter p{font-size:10px;margin:3px 0}
 .scene-hud .fighter .state{float:none;display:block;font-size:9px}
 .scene-hud .fighter progress{height:7px}
 .scene-hud .intent{padding:4px 7px;font-size:10px}
 .scene-command{min-height:78px;padding:8px 10px}
 .scene-command #action-availability{display:none}
 .scene-command #planned-action{font-size:11px;line-height:1.4}
 #battle-stage #plans{bottom:88px}
 #battle-stage .action-picker button{min-height:44px}
}
@media(max-height:450px) and (orientation:landscape){
 #battle-stage{height:calc(100svh - 16px);min-height:280px}
 .scene-hud .fighter{width:210px}
 .scene-hud .intent{display:none}
 .scene-command{min-height:58px;padding:6px 12px}
 .scene-command #action-availability{display:none}
 #battle-stage #plans{bottom:68px}
}
@media(max-width:700px){.hero-list{grid-template-columns:1fr;gap:12px}.hero-choice{display:grid;grid-template-columns:100px 1fr;gap:0 12px;padding:12px}.hero-choice img{grid-row:1/6;height:185px}.hero-choice h2{font-size:23px}.hero-choice p{font-size:12px}.hero-choice .select-label{padding-top:5px}.action-picker{grid-template-columns:1fr 1fr}#result{font-size:16px;padding:6px 14px}}