/* In-game phone layout. The page returns unchanged when game-mode is removed. */
body.game-mode{overflow:hidden;overscroll-behavior:none}
.game-display-toolbar,.game-display-controls,.game-display-rotate{display:none}
.screen.game-display-active{
  --game-safe-top:env(safe-area-inset-top,0px);
  --game-safe-right:env(safe-area-inset-right,0px);
  --game-safe-bottom:env(safe-area-inset-bottom,0px);
  --game-safe-left:env(safe-area-inset-left,0px);
  --game-viewport-height:100vh;
  --game-width:calc(100vw - var(--game-safe-left) - var(--game-safe-right));
  --game-height:calc(var(--game-viewport-height) - var(--game-safe-top) - var(--game-safe-bottom));
  --game-render-height:min(var(--game-height),calc(var(--game-width) * .5625));
  --game-control-space:0px;
  position:fixed!important;inset:0!important;z-index:1000;isolation:isolate;
  width:100vw!important;height:100vh!important;height:100dvh!important;
  min-width:0!important;min-height:0!important;max-width:none!important;
  aspect-ratio:auto!important;overflow:hidden;background:#080e1a;touch-action:none;
}
.screen.game-display-active>canvas{
  position:absolute;left:var(--game-safe-left);top:var(--game-safe-top);
  width:calc(100% - var(--game-safe-left) - var(--game-safe-right));
  height:calc(100% - var(--game-safe-top) - var(--game-safe-bottom) - var(--game-control-space));
  display:block;object-fit:contain;object-position:center;outline-offset:-3px;
}
.screen.game-display-active>.overlay{
  z-index:5;inset:0;padding:calc(50px + var(--game-safe-top)) 20px calc(12px + var(--game-safe-bottom));
  overflow:auto;min-height:0;
}
.screen.game-display-active>.overlay .start-actions{flex-wrap:wrap;max-width:100%}
.screen.game-display-active>.overlay button,.screen.game-display-active>.overlay select{min-width:44px;min-height:44px}
.game-display-active .game-display-toolbar{
  /* Side controls sit below the actual rendered health/meter band, even on 16:9 phones. */
  position:absolute;z-index:10;
  top:calc(var(--game-safe-top) + (var(--game-height) - var(--game-render-height)) / 2 + var(--game-render-height) * .2 + 6px);
  left:calc(4px + var(--game-safe-left));right:calc(4px + var(--game-safe-right));
  display:flex;justify-content:space-between;gap:8px;pointer-events:none;
}
.game-display-toolbar button{
  pointer-events:auto;width:44px;height:44px;min-width:44px;min-height:44px;padding:4px;
  border:1px solid #7e91b3;border-radius:5px;background:#101d32e8;color:#f6eed7;
  font:700 11px/1.2 Arial,Helvetica,sans-serif;touch-action:manipulation;
}
.game-display-toolbar button:last-child{font-size:0}
.game-display-toolbar button:last-child::before{content:'⛶';font:25px/1 Arial,Helvetica,sans-serif}
.game-display-active.game-display-menu .game-display-toolbar{top:calc(6px + var(--game-safe-top))}
.game-display-active .game-display-controls{
  position:absolute;z-index:3;inset:0;display:block;pointer-events:none;user-select:none;-webkit-user-select:none;
}
.game-display-pad,.game-display-attacks{
  position:absolute;bottom:calc(6px + var(--game-safe-bottom));display:grid;gap:4px;
  pointer-events:auto;touch-action:none;-webkit-touch-callout:none;
}
.game-display-pad{
  left:calc(8px + var(--game-safe-left));width:140px;height:140px;
  grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);
}
.game-display-attacks{
  right:calc(8px + var(--game-safe-right));grid-template-columns:repeat(4,minmax(44px,52px));
  grid-auto-rows:48px;gap:5px;
}
.game-display-input{
  min-width:44px;min-height:44px;margin:0;padding:4px 2px;
  border:1px solid #8b9bbc;border-radius:9px;box-shadow:0 2px 0 #02070c;
  background:#162640b8;color:#f6eed7;touch-action:none;-webkit-touch-callout:none;
  font:700 10px/1.1 Arial,Helvetica,sans-serif;letter-spacing:0;text-align:center;
}
.game-display-direction{font-size:23px;border-color:#6fc1ce;background:#122a3dab}
.game-display-pad-center{border:1px solid #6fc1ce50;border-radius:50%;background:#142a3d80;pointer-events:none}
.game-display-input[aria-pressed=true]{color:#09202b;background:#78e4e6;border-color:#bafff9;box-shadow:inset 0 2px 0 #184550}
.game-display-attacks .game-display-super{grid-column:3 / 5;border-color:#ffc476;color:#ffe0b3;background:#4c332acf}
.game-display-attacks .game-display-super[aria-pressed=true]{color:#231714;background:#ffc476}
.game-display-toolbar button:focus-visible,.game-display-input:focus-visible{outline:3px solid #fff4a5;outline-offset:2px}
.game-display-active .game-display-rotate{
  position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:18px;padding:calc(64px + var(--game-safe-top)) 24px calc(24px + var(--game-safe-bottom));
  background:#0a1226f5;color:#f6eed7;text-align:center;
}
.game-display-rotate strong{font-size:26px;line-height:1.15}
.game-display-rotate p{max-width:250px;margin:0;color:#c9d7e9;font-size:15px;line-height:1.5}
.game-display-phone{width:72px;height:40px;border:3px solid #66dce5;border-radius:7px;position:relative}
.game-display-phone::after{content:'';position:absolute;right:4px;top:50%;width:3px;height:12px;border-radius:2px;transform:translateY(-50%);background:#66dce5}
@media(orientation:portrait){
  .screen.game-display-active{--game-control-space:0px}
  .game-display-active .game-display-toolbar{top:calc(6px + var(--game-safe-top))}
}
@media(orientation:landscape) and (max-height:420px){
  .game-display-attacks{grid-template-columns:repeat(4,46px);grid-auto-rows:44px;gap:4px}
  .game-display-pad{left:calc(6px + var(--game-safe-left))}
  .game-display-attacks{right:calc(6px + var(--game-safe-right))}
  .screen.game-display-active .pause-overlay h2,.screen.game-display-active .result-overlay h2{font-size:34px;margin:0 0 15px}
}
@supports(height:100dvh){.screen.game-display-active{--game-viewport-height:100dvh}}
@media(prefers-reduced-motion:reduce){
  .game-display-active,.game-display-active *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}