/* The entire combat dashboard uses the available viewport; long details live in dialogs. */
body.in-combat{height:100vh;height:100dvh;overflow:hidden}
.in-combat #app{height:100%;max-width:1260px;padding:0 16px max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:0}
.in-combat .topbar{height:46px;min-height:46px;gap:12px}.in-combat .brand-mark{width:29px;height:29px;border-radius:9px}.in-combat .brand-mark svg{width:23px;height:23px}.in-combat .brand strong{font-size:14px}.in-combat .brand small{display:none}.in-combat .nav{gap:6px}.in-combat .nav .quiet-btn{font-size:11px;padding:7px 10px;border-radius:9px;min-height:31px}
.in-combat main{flex:1;min-height:0;display:grid;grid-template-rows:64px 34px minmax(0,1fr)}.in-combat .footer{display:none}
.in-combat .run-hud{padding:8px 4px;gap:20px;flex-wrap:nowrap}.in-combat .hero-badge{min-width:116px;gap:8px}.in-combat .hero-badge .portrait{width:36px}.in-combat .hero-badge strong{font-size:12px}.in-combat .hero-badge small{font-size:9px;margin-top:3px}.hero-badge[data-action]{border:0;background:none;text-align:left;color:inherit;font:inherit;padding:0}.in-combat .hud-meter{min-width:0;max-width:none}.in-combat .hud-meter>b{font-size:10px}.in-combat .meter-track{margin-top:4px;height:9px}.in-combat .hud-meter small{font-size:11px;margin-top:2px;font-weight:800}.in-combat .hud-gold{min-width:66px}.in-combat .hud-gold b{font-size:16px}.in-combat .hud-gold small{font-size:9px;margin-top:2px}.in-combat .hud-tokens{font-size:11px;min-width:90px}.in-combat .hud-tokens small{font-size:8px;margin-top:3px}
.in-combat .screen-title{padding:4px 3px 5px;gap:10px;align-items:center}.in-combat .screen-title>div{display:flex;align-items:center;gap:12px}.in-combat .screen-title h1{font-size:15px;margin:0;letter-spacing:-.5px}.in-combat .screen-title .eyebrow{font-size:9px;letter-spacing:1px}.in-combat .screen-title>span{font-size:11px;max-width:none;white-space:nowrap}
.in-combat .combat-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.8fr);gap:14px;min-height:0;max-width:none;margin:0;width:100%;align-items:stretch}
.in-combat .reels-panel{order:initial;width:auto;padding:12px;display:grid;grid-template-rows:22px minmax(0,1fr) 42px 18px 46px;gap:7px;min-height:0;border-radius:19px;overflow:visible}
.in-combat .board-header{margin:0;min-width:0}.in-combat .board-header h2{font-size:14px}.in-combat .phase-label{font-size:9px;padding:4px 7px}
.in-combat .reel-board{width:100%;height:100%;max-width:none;min-height:0;margin:0;padding:7px;gap:6px;border-radius:14px;grid-template-rows:repeat(4,minmax(0,1fr));grid-template-columns:repeat(5,minmax(0,1fr))}
.in-combat .reel-board .tile{aspect-ratio:auto;min-height:0;min-width:0;padding:3px;gap:1px;border-radius:10px;overflow:hidden}.in-combat .reel-board .tile .symbol-icon{width:min(64%,64px);height:min(68%,64px);min-height:0;flex-shrink:1}.in-combat .reel-board .tile-name{font-size:10px;line-height:1.2;flex-shrink:0}.in-combat .reel-board .board-placeholder{font-size:22px}.in-combat .tile-state{bottom:16px;font-size:8px}.in-combat .tile .level{font-size:9px;top:3px;right:4px}
.in-combat .combat-stats{margin:0;gap:7px;min-height:0}.in-combat .combat-stats .stat-chip{padding:4px 5px;border-radius:10px;gap:6px}.in-combat .stat-chip>span{display:flex;align-items:baseline;gap:5px}.in-combat .combat-stats .stat-chip b{font-size:19px;line-height:1.1}.in-combat .combat-stats .stat-chip small{font-size:9px}.in-combat .stat-chip svg{width:21px;height:21px;flex-shrink:0}
.in-combat .board-hint{margin:0;min-height:0;font-size:10px;line-height:18px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.in-combat .spin-controls{gap:8px;min-height:0}.in-combat .spin-button{padding:6px 16px;font-size:20px;border-radius:12px;box-shadow:0 3px 0 var(--ink);min-height:0}.in-combat .spin-controls .quiet-btn{padding:6px 12px;font-size:11px}.in-combat .keyboard-hint{display:none}
.in-combat .combat-side{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto 54px;gap:10px;min-width:0;min-height:0}.in-combat .combat-side>.journal{display:none}
.in-combat .combat-side .enemy-card{position:relative;top:auto;order:initial;width:100%;min-height:0;padding:14px 18px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:23px 30px minmax(0,1fr) auto 31px auto;gap:4px;background:linear-gradient(#fffaf4,var(--biome) 160%);z-index:auto;box-shadow:var(--shadow);border-radius:19px}
.in-combat .enemy-card .enemy-heading{grid-column:1;grid-row:1;gap:8px;justify-content:space-between;min-width:0}.in-combat .enemy-heading>b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.in-combat .enemy-heading>span{font-size:9px;padding:4px 7px;white-space:nowrap}
.in-combat .enemy-card .intent{grid-column:1;grid-row:2;margin:0 auto;padding:4px 8px;font-size:10px;line-height:1.2;min-height:0;align-self:center}.in-combat .enemy-card .intent svg{width:16px;height:16px}
.in-combat .enemy-card>.portrait{grid-column:1;grid-row:3;height:100%;width:auto;max-width:210px;max-height:210px;min-height:0;margin:auto;align-self:center;justify-self:center;}
.in-combat .enemy-effect{grid-column:1;grid-row:4;margin:0;font-size:10px;min-height:0}.in-combat .enemy-card .health-meter{grid-column:1;grid-row:5;width:100%;min-width:0;max-width:none;margin:0;align-self:center}.in-combat .enemy-card .health-meter>small{font-size:12px;margin-top:3px;font-weight:800}.in-combat .enemy-card .status-row{grid-column:1;grid-row:6;align-self:center;margin:0;min-height:15px;gap:4px}.in-combat .enemy-card .status{font-size:10px;padding:3px 6px}
.in-combat .combat-side>.player-status{order:initial;width:auto;display:grid;grid-template-columns:68px minmax(0,1fr);align-items:center;gap:6px;padding:10px 12px;min-height:55px;border-radius:14px}.in-combat .player-status>strong{font-size:10px}.in-combat .player-status>.status-row{margin:0;gap:4px;min-width:0;justify-content:flex-start}.in-combat .player-status .status{font-size:9px;padding:3px 5px}.in-combat .player-status>small{display:none}
.in-combat .combat-side>.rune-bar{order:initial;width:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-height:0}.in-combat .rune-slot{padding:6px;min-height:0;gap:4px;border-radius:11px;min-width:0;font-size:10px;overflow:hidden}.in-combat .rune-slot svg{width:25px;height:25px}.in-combat .rune-slot small{display:block;font-size:8px;margin:3px 0 0;white-space:nowrap}.in-combat .rune-slot.empty{min-height:0}.in-combat .rune-slot.empty>span{font-size:19px}.in-combat .rune-slot.empty small{font-size:9px}
.in-combat .battle-beat{top:25%;left:50%;font-size:10px}.in-combat .enemy-defeated .battle-beat{top:45%;left:50%;font-size:24px}
/* Portrait phones: resources, opponent, statuses, runes, then the board and fixed spin row. */
@media(max-width:700px){
 .in-combat #app{padding:0 8px max(6px,env(safe-area-inset-bottom))}.in-combat .topbar{height:38px;min-height:38px;gap:4px}.in-combat .brand-mark{display:none}.in-combat .brand strong{font-size:11px}.in-combat .nav{gap:4px}.in-combat .nav .quiet-btn{font-size:9px;padding:5px 6px;min-height:28px;border-radius:8px}
 .in-combat main{grid-template-rows:54px 23px minmax(0,1fr)}.in-combat .run-hud{padding:5px 2px;gap:9px}.in-combat .hero-badge{min-width:34px;width:34px;gap:0}.in-combat .hero-badge .portrait{width:33px}.in-combat .hero-badge>span{display:none}.in-combat .hud-meter{flex:1}.in-combat .hud-meter>b{font-size:9px}.in-combat .hud-meter small{font-size:11px}.in-combat .hud-gold{min-width:42px;margin:0;text-align:center}.in-combat .hud-gold b{font-size:12px}.in-combat .hud-gold small{display:block;font-size:8px;margin:2px 0 0}.in-combat .hud-tokens{min-width:43px;font-size:9px;display:grid;grid-template-columns:1fr;gap:2px}.in-combat .hud-tokens span+span{margin:0}.in-combat .hud-tokens small{display:none}
 .in-combat .screen-title{padding:2px 3px}.in-combat .screen-title>div{gap:7px}.in-combat .screen-title .eyebrow{font-size:8px;letter-spacing:0}.in-combat .screen-title h1{font-size:11px}.in-combat .screen-title>span{font-size:9px}
 .in-combat .combat-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:106px auto 38px minmax(0,1fr);gap:5px}.in-combat .combat-side{display:contents}.in-combat .combat-side .enemy-card{grid-column:1;grid-row:1;position:relative;top:auto;display:grid;grid-template-columns:85px minmax(0,1fr);grid-template-rows:19px 22px 30px 17px;padding:7px 10px;gap:0 8px;border-radius:14px}.in-combat .enemy-card>.portrait{grid-column:1;grid-row:1/5;width:80px;height:auto;max-height:82px;max-width:80px;margin:auto}.in-combat .enemy-card .enemy-heading{grid-column:2;grid-row:1;gap:6px;justify-content:space-between}.in-combat .enemy-heading>b{font-size:12px}.in-combat .enemy-heading>span{font-size:8px;padding:2px 4px}.in-combat .enemy-card .intent{grid-column:2;grid-row:2;font-size:9px;padding:3px 4px;margin:0;width:100%;max-width:none;gap:3px;justify-content:center}.in-combat .enemy-card .intent svg{width:12px;height:12px}.in-combat .enemy-effect{display:none}.in-combat .enemy-card .health-meter{grid-column:2;grid-row:3}.in-combat .enemy-card .health-meter>small{font-size:10px;margin-top:2px}.in-combat .enemy-card .status-row{grid-column:2;grid-row:4;gap:3px;min-height:0}.in-combat .enemy-card .status{font-size:8px;padding:2px 4px}.in-combat .enemy-card .muted{font-size:8px}
 .in-combat .combat-side>.player-status{grid-column:1;grid-row:2;min-height:42px;grid-template-columns:54px minmax(0,1fr);gap:4px;padding:4px 8px;border-radius:10px}.in-combat .player-status>strong{font-size:9px}.in-combat .player-status>.status-row{gap:3px}.in-combat .player-status .status{font-size:8px;padding:2px 4px;line-height:1.2}.in-combat .player-status .muted{font-size:9px}
 .in-combat .combat-side>.rune-bar{grid-column:1;grid-row:3;gap:5px}.in-combat .rune-slot{padding:4px 5px;font-size:9px;border-radius:9px;justify-content:center}.in-combat .rune-slot svg{width:20px;height:20px}.in-combat .rune-slot small{font-size:7px;margin:1px 0 0}.in-combat .rune-slot.empty small{font-size:8px}.in-combat .rune-slot.empty>span{font-size:15px}
 .in-combat .reels-panel{grid-column:1;grid-row:4;padding:7px;grid-template-rows:17px minmax(0,1fr) 32px 14px 41px;gap:5px;border-radius:14px}.in-combat .board-header h2{font-size:11px}.in-combat .phase-label{font-size:8px;padding:3px 5px}.in-combat .reel-board{padding:5px;gap:4px;border-radius:10px}.in-combat .reel-board .tile{border-radius:7px;padding:2px;gap:0}.in-combat .reel-board .tile .symbol-icon{width:min(67%,42px);height:min(72%,42px)}.in-combat .reel-board .tile-name{font-size:8px;line-height:1.1}.in-combat .tile .level{font-size:7px;top:2px;right:3px}.in-combat .tile-state{font-size:7px;bottom:12px;padding:1px 3px}.in-combat .combat-stats{gap:4px}.in-combat .combat-stats .stat-chip{gap:3px;padding:3px 2px;border-radius:8px}.in-combat .stat-chip svg{width:15px;height:15px}.in-combat .stat-chip>span{gap:3px}.in-combat .combat-stats .stat-chip b{font-size:16px}.in-combat .combat-stats .stat-chip small{font-size:8px}.in-combat .board-hint{font-size:8px;line-height:14px}.in-combat .spin-button{font-size:18px;padding:4px 10px;border-radius:10px}.in-combat .spin-controls{gap:6px}.in-combat .spin-controls .quiet-btn{font-size:10px;padding:4px 9px}.in-combat .battle-beat{left:52px;top:9px;font-size:8px;padding:2px 6px}.in-combat .enemy-defeated .battle-beat{left:50%;top:45%;font-size:20px}.in-combat .impact-number b{font-size:28px}
}
/* Short phones and landscape keep every control present, with a smaller arena. */
@media(max-width:700px) and (max-height:660px){
 .in-combat .topbar{height:34px;min-height:34px}.in-combat main{grid-template-rows:48px 20px minmax(0,1fr)}.in-combat .combat-layout{grid-template-rows:90px auto 32px minmax(0,1fr);gap:4px}.in-combat .combat-side .enemy-card{grid-template-columns:70px minmax(0,1fr);grid-template-rows:16px 19px 27px 15px;padding:5px 8px}.in-combat .enemy-card>.portrait{width:66px;max-width:66px;max-height:70px}.in-combat .enemy-heading>b{font-size:11px}.in-combat .enemy-card .intent{font-size:8px}.in-combat .reels-panel{padding:5px;grid-template-rows:15px minmax(0,1fr) 28px 12px 37px;gap:4px}.in-combat .reel-board{gap:3px;padding:4px}.in-combat .reel-board .tile-name{font-size:7px}.in-combat .reel-board .tile .symbol-icon{height:min(70%,32px);width:min(65%,32px)}.in-combat .combat-stats .stat-chip b{font-size:14px}.in-combat .board-hint{line-height:12px;font-size:7px}.in-combat .rune-slot svg{width:17px;height:17px}.in-combat .rune-slot{font-size:8px}.in-combat .rune-slot small{font-size:7px}.in-combat .spin-button{font-size:17px}.in-combat .combat-side>.player-status{min-height:34px}
}
@media(max-width:700px) and (max-height:540px) and (orientation:portrait){
 .in-combat .topbar{height:30px;min-height:30px}.in-combat main{grid-template-rows:42px 18px minmax(0,1fr)}.in-combat .run-hud{padding:3px 2px}.in-combat .combat-side>.player-status{min-height:30px}.in-combat .combat-layout{grid-template-rows:74px auto 28px minmax(0,1fr)}.in-combat .combat-side .enemy-card{grid-template-columns:60px minmax(0,1fr);grid-template-rows:14px 16px 23px 12px;padding:3px 7px}.in-combat .enemy-card>.portrait{width:58px;max-width:58px;max-height:62px}.in-combat .enemy-card .health-meter>small{font-size:9px;margin-top:1px}.in-combat .enemy-card .meter-track{height:6px;margin-top:2px}.in-combat .enemy-card .status{font-size:7px;padding:1px 3px}.in-combat .reels-panel{grid-template-rows:14px minmax(0,1fr) 26px 36px}.in-combat .board-hint{display:none}.in-combat .rune-slot svg{width:15px;height:15px}.in-combat .rune-slot{padding:2px 4px}.in-combat .reel-board .tile .symbol-icon{height:min(70%,26px);width:min(65%,26px)}
}
@media(max-height:500px) and (orientation:landscape){
 .in-combat #app{padding:0 8px 5px}.in-combat .topbar{height:32px;min-height:32px}.in-combat .topbar .quiet-btn{padding:3px 7px;min-height:24px;font-size:9px}.in-combat .brand strong{font-size:11px}.in-combat .brand-mark{display:none}.in-combat main{grid-template-rows:42px 22px minmax(0,1fr)}.in-combat .run-hud{padding:3px;gap:10px}.in-combat .hero-badge{min-width:82px}.in-combat .hero-badge .portrait{width:27px}.in-combat .hero-badge strong{font-size:10px}.in-combat .hero-badge small{display:none}.in-combat .hud-gold b{font-size:12px}.in-combat .hud-gold small{display:none}.in-combat .hud-tokens small{display:none}.in-combat .screen-title h1{font-size:12px}.in-combat .screen-title .eyebrow{font-size:8px}.in-combat .combat-layout{grid-template-columns:minmax(0,1.3fr) minmax(230px,1fr);gap:9px}.in-combat .reels-panel{padding:6px;grid-template-rows:16px minmax(0,1fr) 28px 12px 34px;gap:4px}.in-combat .board-header h2{font-size:11px}.in-combat .phase-label{font-size:8px;padding:2px 5px}.in-combat .reel-board{padding:4px;gap:3px}.in-combat .reel-board .tile{padding:1px;border-radius:6px}.in-combat .reel-board .tile .symbol-icon{width:min(55%,29px);height:min(68%,29px)}.in-combat .reel-board .tile-name{font-size:7px}.in-combat .combat-stats .stat-chip b{font-size:14px}.in-combat .stat-chip svg{width:15px;height:15px}.in-combat .stat-chip small{font-size:8px}.in-combat .spin-button{font-size:16px;padding:3px 9px}.in-combat .spin-controls .quiet-btn{font-size:10px;padding:3px 8px}.in-combat .board-hint{font-size:8px;line-height:12px}.in-combat .combat-side{grid-template-rows:minmax(0,1fr) auto 36px;gap:5px}.in-combat .combat-side .enemy-card{grid-template-columns:90px minmax(0,1fr);grid-template-rows:19px 23px minmax(22px,1fr) 22px;padding:8px;gap:1px 6px}.in-combat .enemy-card>.portrait{grid-column:1;grid-row:1/5;width:85px;height:auto;max-width:85px;max-height:100px}.in-combat .enemy-card .enemy-heading{grid-column:2;grid-row:1}.in-combat .enemy-heading>b{font-size:11px}.in-combat .enemy-heading>span{font-size:8px;padding:2px 4px}.in-combat .enemy-card .intent{grid-column:2;grid-row:2;font-size:8px;padding:3px 4px;gap:3px;max-width:100%}.in-combat .enemy-effect{display:none}.in-combat .enemy-card .health-meter{grid-column:2;grid-row:3}.in-combat .enemy-card .health-meter>small{font-size:10px}.in-combat .enemy-card .status-row{grid-column:2;grid-row:4;gap:3px}.in-combat .enemy-card .status{font-size:8px;padding:2px 4px}.in-combat .combat-side>.player-status{padding:4px 7px;min-height:38px;grid-template-columns:52px minmax(0,1fr)}.in-combat .player-status .status{font-size:8px;padding:2px 4px}.in-combat .player-status>strong{font-size:9px}.in-combat .rune-slot{padding:4px;font-size:8px}.in-combat .rune-slot svg{width:18px;height:18px}.in-combat .rune-slot small{font-size:7px;margin-top:1px}.in-combat .battle-beat{left:48px;top:12px;font-size:8px}.in-combat .enemy-defeated .battle-beat{left:50%;top:50%}
}