/* The banner owns its own space, including the phone's home-indicator inset. */
#advertisement-space{height:auto;min-height:calc(60px + env(safe-area-inset-bottom));padding:5px 0 calc(5px + env(safe-area-inset-bottom));box-sizing:border-box;pointer-events:auto;overflow:hidden}
html:has(.stage-combat),body:has(.stage-combat){height:100%;min-height:0;overflow:hidden;overscroll-behavior:none}
.shell.stage.stage-combat{position:fixed;inset:0 0 var(--ad-space);height:calc(100dvh - var(--ad-space));min-height:0;overflow:clip;padding:0;container-type:size;container-name:battle-stage}
.stage-combat .gate-world{height:calc(100dvh - var(--ad-space))}
/* Controls have a stable footprint. The creature uses the remaining height. */
.stage-combat .combat.screen{--board-height:clamp(118px,calc(30dvh - 60px),184px);--key-height:clamp(32px,calc(5.5dvh - 2px),43px);box-sizing:border-box;height:100%;min-height:0;max-height:100%;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));display:grid;grid-template-rows:18px 70px minmax(0,1fr) auto;gap:0;overflow:visible}
.stage-combat .combat .delve-path{height:18px;margin:0 auto;align-self:start;min-height:0;line-height:1;font-size:6px}
.stage-combat .combat .combat-head{height:70px;min-height:0;display:block;margin:0;padding:0}
.stage-combat .combat .combat-head .eyebrow{font-size:7px;line-height:9px;margin:0 0 3px;letter-spacing:1.5px}
.stage-combat .combat .combat-head h1{font-size:23px;line-height:26px;margin:0 0 4px;letter-spacing:2px;white-space:nowrap}
.stage-combat .combat .enemy-frame{margin:0 auto;width:min(88%,340px);max-width:88%}
.stage-combat .combat .enemy-health{height:clamp(12px,var(--hp-thickness),18px)}
.stage-combat .combat .enemy-vitals{margin-top:3px;font-size:7px;line-height:10px}
.stage-combat .combat .enemy-vitals>span:first-child{font-size:10px;line-height:10px}
.stage-combat .combat .enemy-vitals .threat{font-size:6px;line-height:10px}
.stage-combat .combat .battle-wrap,.stage-combat .combat:not(.room-0) .battle-wrap,.stage-combat .combat.room-5 .battle-wrap{grid-row:3;flex:none;height:100%;min-height:0;max-height:none;width:100%;margin:0 auto}
.stage-combat .combat .battle-scene{max-height:none}
/* The review-only answer card overlays the encounter and consumes no height. */
.stage-combat .combat .test-oracle{position:absolute;left:0;top:3px;z-index:3;margin:0;min-height:0;padding:3px 4px;display:grid;grid-template-columns:18px auto 18px;gap:2px 4px;width:108px;background:#111a12c7;border:1px solid #a38d552e;line-height:1.2;text-align:center;font-size:8px}
.stage-combat .combat .test-oracle>span{grid-column:1/-1;font-size:4px;letter-spacing:.7px}
.stage-combat .combat .test-oracle strong{grid-column:2;grid-row:2;letter-spacing:1px}
.stage-combat .combat .test-oracle .test-step{width:18px;height:19px;min-width:0;padding:0;font-size:14px}
.stage-combat .combat .test-oracle .test-step:first-of-type{grid-column:1;grid-row:2}
.stage-combat .combat .test-oracle .test-step:last-of-type{grid-column:3;grid-row:2}
.stage-combat .combat .combat-foot{display:grid;grid-template-rows:29px var(--board-height) 21px 18px auto 34px;row-gap:3px;min-height:0;flex:none;margin:0;padding:0;position:relative}
.stage-combat .combat .command-line,.stage-combat .combat .command-line.has-elixir{height:29px;min-height:0;padding:0 2px;margin:0;gap:6px;overflow:visible}
.stage-combat .combat .knight-status{margin:0 auto 0 0;padding:0;gap:4px;flex-shrink:0}
.stage-combat .combat .heart-rack{gap:2px}.stage-combat .combat .heart-icon{width:19px;height:20px;min-width:0}
.stage-combat .combat .knight-status>span{font-size:11px;white-space:nowrap}.stage-combat .combat .knight-status small{font-size:8px}
.stage-combat .combat .attack-count b{font-size:20px;line-height:1}.stage-combat .combat .attack-label{font-size:5px}
.stage-combat .combat .xp-boost-icon{width:25px;height:15px;bottom:calc(100% + 3px)}.stage-combat .combat .xp-boost-icon svg{width:25px;height:15px}
.stage-combat .combat .rune-board-controls{height:var(--board-height);width:min(248px,calc(100vw - 112px));max-width:100%;margin:0 auto;padding:0}
.stage-combat .combat.boss-combat .rune-board-controls{width:min(350px,calc(100vw - 112px))}
.stage-combat .combat .guess-board{display:grid;grid-template-rows:repeat(var(--guess-rows,6),minmax(0,1fr));gap:3px;width:100%;height:100%;max-height:100%;padding:0;margin:0;min-height:0}
.stage-combat .combat .guess-row,.stage-combat .combat .guess-row.current,.stage-combat .combat .guess-row.last-attack{display:flex;width:100%;height:100%;min-height:0;gap:4px;align-items:stretch}
.stage-combat .combat .guess-row>.tile,.stage-combat .combat .guess-row.current>.tile,.stage-combat .combat .guess-row.last-attack>.tile{width:auto;min-width:0;flex:1 1 0;height:100%;min-height:0;font-size:17px;line-height:1;padding:0}
.stage-combat .combat .seven-runes{--dragon-gap:3px;--dragon-tile:calc((100% - 18px)/7)}
.stage-combat .combat .seven-runes>.guess-row{gap:3px;translate:0 0}
.stage-combat .combat .tile .cipher-glyph{height:17px;width:16px}
.stage-combat .combat .rune-board-controls .row-damage{right:calc(100% + 4px);width:42px;font-size:6px}
.stage-combat .combat .rune-board-controls .consumable-belt{left:calc(100% + 7px);top:1px;width:38px;gap:2px}
.stage-combat .combat .rune-board-controls .draught-slot{width:38px;min-width:38px;min-height:52px;padding:0}
.stage-combat .combat .rune-board-controls .draught-slot>.provision-icon{width:29px;height:33px}
.stage-combat .combat .rune-board-controls .draught-slot b{font-size:12px;line-height:14px}.stage-combat .combat .draught-slot b span{font-size:9px}
.stage-combat .combat .rune-board-controls .combat-purse{left:calc((100% - min(100vw - 24px,606px))/2);bottom:-23px;margin:0}
.stage-combat .combat .combat-purse>div{min-height:20px;gap:4px}.stage-combat .combat .combat-purse .coin-icon{width:16px;height:16px}.stage-combat .combat .combat-purse b{font-size:9px}
.stage-combat .combat .turn-clock{height:21px;min-height:0;margin:0 auto;padding:0;width:150px;max-width:calc(100% - 150px);font-size:5px;line-height:1;letter-spacing:.5px;gap:4px}
.stage-combat .combat .turn-clock b{font-size:14px;line-height:1}
.stage-combat .combat .inscription{height:18px;min-height:0;margin:0;gap:5px}
.stage-combat .combat .inscription>span{width:12px}
.stage-combat .combat .combat-hint{min-height:0;margin:0;font-size:9px;line-height:1.1;display:block}
.stage-combat .combat .combat-controls{margin:0;width:100%;max-width:none;min-height:0;padding:0}
.stage-combat .combat .keyboard{height:calc(3 * var(--key-height) + 6px);display:grid;grid-template-rows:repeat(3,var(--key-height));gap:3px;padding:0;margin:0 auto;width:100%;max-width:540px}
.stage-combat .combat .key-row{height:var(--key-height);gap:3px}
.stage-combat .combat .key{height:var(--key-height);min-height:0;font-size:17px;max-width:none;min-width:0;padding:0;flex:1 1 0}
.stage-combat .combat .key.wide{font-size:8px;min-width:40px;flex:1.5 1 0}
/* The lower rail stays above the ad: feat on the left, wards in the middle. */
.combat-bottom-rail{position:relative;height:34px;min-height:34px;width:100%;display:flex;align-items:center;justify-content:flex-end}
.stage-combat .combat .combat-bottom-rail .ward-rack{position:absolute;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);margin:0;gap:2px;min-height:0;z-index:2;pointer-events:none}
.stage-combat .combat .combat-bottom-rail .armed-ward,.stage-combat .combat .combat-bottom-rail .ward-half canvas{width:27px;height:33px}
.stage-combat .combat .combat-legend{width:calc(50% - 36px);max-width:190px;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:3px 7px;margin:0;font-size:5px;line-height:1.4;text-align:right;min-height:0}
.stage-combat .combat .combat-legend>span:first-child{font-size:5px;width:100%}
#achievement-toast,body:has(.stage-combat) #achievement-toast{top:auto;left:max(8px,calc((100vw - 606px)/2));right:auto;bottom:calc(var(--ad-space) + 8px);width:min(136px,calc(50vw - 38px));max-width:none;min-width:0;height:34px;transform:translateX(-30px);border:0;border-left:2px solid #ba9b5d99;background:linear-gradient(90deg,#263027f5,#111d15ed);box-shadow:none;transition:opacity .22s,transform .26s}
#achievement-toast.show,body:has(.stage-combat) #achievement-toast.show{transform:translateX(0)}
#achievement-toast .notice-dismiss{min-height:34px;height:34px;gap:5px;padding:3px 4px}
#achievement-toast .notice-seal,#achievement-toast .notice-seal canvas{width:19px;height:21px;min-width:19px}
#achievement-toast .notice-copy{gap:2px}#achievement-toast small{font-size:4px;letter-spacing:.6px}
#achievement-toast strong{font-size:9px;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#achievement-toast .notice-close{font-size:12px}
@media(min-width:701px) and (min-height:700px){
 .stage-combat .combat.screen{grid-template-rows:23px 83px minmax(0,1fr) auto;--board-height:196px}
 .stage-combat .combat .combat-head h1{font-size:28px;line-height:30px}
 .stage-combat .combat .combat-head .eyebrow{font-size:8px;line-height:12px}
 .stage-combat .combat .combat-head{height:83px}
}
@media(max-height:650px){
 .stage-combat .combat.screen{padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left));grid-template-rows:15px 63px minmax(0,1fr) auto}
 .stage-combat .combat .combat-head{height:63px}.stage-combat .combat .combat-head h1{font-size:21px;line-height:23px;margin-bottom:3px}
 .stage-combat .combat .combat-head .eyebrow{font-size:6px;line-height:8px;margin-bottom:2px}
 .stage-combat .combat .enemy-health{height:14px}.stage-combat .combat .enemy-vitals{margin-top:2px}
 .stage-combat .combat .combat-foot{grid-template-rows:25px var(--board-height) 19px 16px auto 34px;row-gap:2px}
 .stage-combat .combat .command-line,.stage-combat .combat .command-line.has-elixir{height:25px}
 .stage-combat .combat .turn-clock{height:19px}.stage-combat .combat .inscription{height:16px}
 .stage-combat .combat .combat-hint{font-size:8px}.stage-combat .combat .heart-icon{width:16px;height:18px}
 .stage-combat .combat .knight-status>span{font-size:10px}.stage-combat .combat .knight-status small{font-size:7px}
 .stage-combat .combat .guess-row>.tile,.stage-combat .combat .guess-row.current>.tile,.stage-combat .combat .guess-row.last-attack>.tile{font-size:15px}
 #achievement-toast,body:has(.stage-combat) #achievement-toast{bottom:calc(var(--ad-space) + 6px)}
}


/* Normal type loses its shape in three ink folds, then seals into a rune. */
.cipher-keyboard .key:not(.wide){position:relative;overflow:hidden}
.cipher-symbol,.cipher-symbol.rune-changing{position:relative;display:grid;place-items:center;margin:auto;width:24px;height:26px;min-height:0;color:inherit;filter:none!important}
.cipher-origin{position:absolute;inset:0;display:grid;place-items:center;font:inherit;opacity:var(--letter-ink,1);transform:rotate(var(--ink-turn,0deg));text-shadow:0 0 calc(var(--ink-charge,0)*8px) #e6b8ff}
.cipher-ink{position:absolute;left:2px;top:1px;width:20px;height:24px;opacity:var(--sigil-ink,0);overflow:visible}
.cipher-ink .ink-live{filter:drop-shadow(0 0 calc(var(--ink-charge,0)*3px) #be79ef);stroke-width:calc(1.6px + var(--ink-charge,0)*.5px)}
.cipher-symbol.rune-changing{color:#edc6ff}
.cipher-ink .ink-echo{opacity:calc(var(--ink-charge,0)*.5);stroke:#9861c1;transform:translate(-1px,1px)}
.cipher-ink .ink-cinders{opacity:var(--ink-charge,0);stroke:#f5d6ff;stroke-width:1.8px;transform:rotate(var(--ink-turn,0deg));transform-origin:center}
@media(prefers-reduced-motion:reduce){.cipher-ink .ink-echo,.cipher-ink .ink-cinders{display:none}.cipher-ink .ink-live{filter:none}}

/* A short usable viewport (including a taller ad) gets tighter chrome, not
   hidden keys. Keep all six/seven rows, and retain space for the creature. */
@container battle-stage (max-height:480px){
 .stage-combat .combat.screen{--board-height:118px;--key-height:32px;grid-template-rows:12px 52px minmax(0,1fr) auto;padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left))}
 .stage-combat .combat .delve-path{height:12px;font-size:5px}
 .stage-combat .combat .combat-head{height:52px}
 .stage-combat .combat .combat-head .eyebrow{font-size:5px;line-height:7px;margin-bottom:1px}
 .stage-combat .combat .combat-head h1{font-size:20px;line-height:22px;margin-bottom:1px}
 .stage-combat .combat .enemy-health{height:10px}
 .stage-combat .combat .enemy-vitals{margin-top:1px;line-height:8px}
 .stage-combat .combat .enemy-vitals>span:first-child{font-size:8px;line-height:8px}
 .stage-combat .combat .enemy-vitals .threat{font-size:5px;line-height:8px}
 .stage-combat .combat .combat-foot{grid-template-rows:25px var(--board-height) 19px 0 auto 34px;row-gap:2px}
 .stage-combat .combat .inscription{height:0;visibility:hidden}
 .stage-combat .combat .trait-emblem{bottom:2px;transform:scale(.7);transform-origin:bottom left}
}

/* Previous guesses stay legible when a revive adds its seventh row. */
.stage-combat .combat .guess-row>.tile,.stage-combat .combat .guess-row.current>.tile,.stage-combat .combat .guess-row.last-attack>.tile{font-size:clamp(11px,calc((var(--board-height) - 18px) / var(--guess-rows) * .78),17px)}
@media(orientation:landscape) and (max-height:500px){
 /* Use width on a sideways phone: creature, history, keyboard. */
 .stage-combat .combat.screen{max-width:1000px;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.4fr);grid-template-rows:25px 52px minmax(0,1fr) 34px;column-gap:12px;--board-height:calc(100dvh - var(--ad-space) - 71px);--key-height:clamp(28px,calc((100dvh - var(--ad-space) - 129px)/3),43px)}
 .stage-combat .combat .delve-path{grid-column:1;grid-row:1;width:calc(100% - 26px);margin-right:0;font-size:4px}
 .stage-combat>.stage-back,.stage-combat>.menu-toggle{top:5px;width:26px;height:26px;font-size:15px}
 .stage-combat>.stage-back{left:8px}.stage-combat>.menu-toggle{right:8px}
 .stage-combat .combat .command-line{padding-right:32px}
 #achievement-toast,body:has(.stage-combat) #achievement-toast{left:10px;bottom:calc(var(--ad-space) + 6px)}
 .stage-combat .combat .combat-head{grid-column:1;grid-row:2;height:52px}
 .stage-combat .combat .combat-head h1{font-size:14px;letter-spacing:.5px;line-height:20px}
 .stage-combat .combat .battle-wrap{grid-column:1;grid-row:3}
 .stage-combat .combat .combat-foot{display:contents}
 .stage-combat .combat .command-line{grid-column:2/4;grid-row:1;height:25px}
 .stage-combat .combat .rune-board-controls,.stage-combat .combat.boss-combat .rune-board-controls{grid-column:2;grid-row:2/4;height:100%;width:calc(100% - 39px);margin:0;align-self:stretch}
 .stage-combat .combat .combat-controls{grid-column:3;grid-row:3;align-self:end}
 .stage-combat .combat .turn-clock{grid-column:3;grid-row:2;align-self:end;margin-bottom:5px;max-width:100%}
 .stage-combat .combat .inscription{display:none}
 .stage-combat .combat .combat-bottom-rail{grid-column:1/4;grid-row:4;height:34px;min-height:34px}
 .stage-combat .combat .rune-board-controls .combat-purse{left:0;bottom:-32px}
 .stage-combat .combat .attack-count .xp-boost-icon{bottom:auto;top:4px;left:-34px}
 .stage-combat .combat .test-oracle{width:92px;font-size:7px}
 .stage-combat .combat .combat-bottom-rail .armed-ward,.stage-combat .combat .combat-bottom-rail .ward-half canvas{width:27px;height:33px}
}

@media(max-width:350px){.stage-combat .combat .combat-head h1{font-size:18px;letter-spacing:1px}}