/* Phone battle: viewport-sized portrait stage, with board and controls below it. */
.board .tile.hinted{outline:3px solid #86ddff;outline-offset:-5px;background:#d4ece5}.board .tile.hinted small{font-weight:bold;color:#18566b}
.controls [data-action="hint"]{border-color:#94d7ce;color:#d2fff3}.controls button:disabled{opacity:.5}
@media(max-width:760px){
 body[data-screen="battle"]{height:var(--play-height,100vh);min-height:0;overflow:hidden;overscroll-behavior:none}
 body[data-screen="battle"] #app{height:100%;min-height:0;display:flex;flex-direction:column;gap:5px;padding:7px 10px max(7px,env(safe-area-inset-bottom));margin:0 auto;box-sizing:border-box}
 body[data-screen="battle"] .top{flex:none;height:40px;min-height:40px;padding:3px 5px;box-shadow:2px 2px #071521}
 body[data-screen="battle"] .top .brand{font-size:12px;letter-spacing:1px}body[data-screen="battle"] .top .tag{font-size:9px}body[data-screen="battle"] .top .ghost{font-size:11px;padding:5px 8px}
 body[data-screen="battle"] .stage-line{flex:none;height:27px;margin:0;min-height:0}
 body[data-screen="battle"] .stage-line .eyebrow{display:none}
 body[data-screen="battle"] .stage-line h1{font-size:15px;margin:0;line-height:23px}
 body[data-screen="battle"] .battle-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:stretch;gap:5px;flex:1;min-height:0}
 body[data-screen="battle"] .battle-view{display:grid;grid-template-rows:minmax(0,1fr) 31px;gap:5px;min-height:0;overflow:hidden}
 body[data-screen="battle"] .battle-view .arena{height:100%;min-height:0;margin:0;padding:7px 7px 3px;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);box-shadow:none}
 body[data-screen="battle"] .fighter{display:flex;flex-direction:column;min-height:0;min-width:0}
 body[data-screen="battle"] .battle-view .fighter h2{font-size:12px;line-height:16px;min-height:16px;height:16px;margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
 body[data-screen="battle"] .battle-view .hp{min-height:0;width:100%;font-size:8px;line-height:1.2;flex:none}
 body[data-screen="battle"] .battle-view .hp span{font-size:11px;line-height:14px}
 body[data-screen="battle"] .bar{height:6px;margin:3px 0}
 body[data-screen="battle"] .battle-view .actor{height:auto;min-height:0;width:100%;flex:1;margin:0}
 body[data-screen="battle"] .battle-view .sprite-frame{scale:var(--actor-scale,.7);bottom:2px;transform-origin:50% 100%}
 body[data-screen="battle"] .battle-view .notice{font:10px/15px 'Microsoft YaHei',sans-serif;height:31px;min-height:0;max-height:31px;overflow:hidden;margin:0;padding:0 0 0 7px;box-sizing:border-box}
 body[data-screen="battle"] .history{display:none}
 body[data-screen="battle"] .spell{display:grid;grid-template-rows:17px 27px var(--board-side) 39px 14px;gap:4px;min-height:0;max-width:100%}
 body[data-screen="battle"] .tutorial-copy{font-size:10px;line-height:17px;height:17px;min-height:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body[data-screen="battle"] .word{height:27px;min-height:0;max-height:27px;line-height:27px;margin:0;padding:0;font-size:var(--word-size,24px);letter-spacing:1px;white-space:nowrap;overflow:hidden}
 body[data-screen="battle"] .board{width:var(--board-side);height:var(--board-side);max-width:none;max-height:none;min-height:0;grid-template-rows:repeat(5,minmax(0,1fr));gap:6px;padding:8px;margin:0 auto;box-shadow:none;box-sizing:border-box}
 body[data-screen="battle"] .board .tile{width:100%;height:100%;max-width:none;min-height:0;font-size:clamp(20px,6vw,30px);border-width:1px;line-height:1;margin:0;padding:0;touch-action:manipulation}
 body[data-screen="battle"] .board .tile small{font-size:9px;bottom:3px;right:4px}
 body[data-screen="battle"] .controls{display:grid;grid-template-columns:.85fr 1.5fr 1.1fr .85fr;gap:6px;margin:0;padding:0;width:100%;max-width:390px;justify-self:center;min-height:0}
 body[data-screen="battle"] .controls.guide-controls{grid-template-columns:1fr 1.6fr 1.2fr}
 body[data-screen="battle"] .controls button{min-width:0;width:100%;height:37px;min-height:0;padding:3px 2px;font-size:11px;line-height:15px;box-shadow:2px 2px #071521;white-space:nowrap}
 body[data-screen="battle"] .controls .primary{min-width:0}
 body[data-screen="battle"] .rules{margin:0;font:9px/14px 'Microsoft YaHei',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body[data-screen="battle"] footer{display:none}
}