/* Landscape arena with a shared Festly D-pad + A/B control pattern. */
.home-screen-guide{max-width:1180px;margin:8px auto;padding:0 16px;color:#dce8ed;font:14px/1.5 system-ui,sans-serif}
.home-screen-guide summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:#86e3d5;font-weight:700}
.home-screen-guide summary:focus-visible{outline:3px solid #86e3d5;outline-offset:3px}
.home-screen-guide p{max-width:680px;margin:8px 0}
.home-screen-guide[data-install=required]{border:1px solid #86e3d580;border-radius:10px;background:#112035;padding:8px 16px 12px;box-shadow:0 8px 24px #0006}
.home-screen-guide[data-install=required] summary{color:#fff;font-size:16px}
@media(display-mode:standalone),(display-mode:fullscreen){.home-screen-guide{display:none}}
body.game-mode{overflow:hidden;overscroll-behavior:none}
.game-display-toolbar,.game-display-controls,.game-display-rotate,.mobile-control-help{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));
  --pad-size:clamp(144px,24vh,176px);--action-size:clamp(64px,18vh,82px);
  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));
  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}
.screen.game-display-active dialog button{min-width:44px;min-height:44px}
.game-display-active .game-display-toolbar{
  position:absolute;z-index:10;
  top:calc(var(--game-safe-top) + (var(--game-height) - var(--game-render-height)) / 2 + var(--game-render-height) * .22);
  left:calc(8px + var(--game-safe-left));right:calc(8px + 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 #afc5dd88;border-radius:50%;background:#101d32b8;color:#fff;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:not(.game-display-menu) .game-display-toolbar button:last-child{display:none}
body:has(.game-display-active:not(.game-display-menu)) festly-music{display:none!important}
.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(14px + var(--game-safe-bottom));touch-action:none;-webkit-touch-callout:none}
.game-display-pad{
  left:calc(18px + var(--game-safe-left));width:var(--pad-size);height:var(--pad-size);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:0;pointer-events:auto;
  border-radius:50%;background:radial-gradient(circle,#0c172c38,#0c172c05 70%);
}
.game-display-input{min-width:44px;min-height:44px;margin:0;padding:0;touch-action:none;-webkit-touch-callout:none;letter-spacing:0;text-align:center;color:#fff;border:1px solid #d2e3ee90;background:#18283ba8;box-shadow:0 3px 0 #02070c70;font:800 24px/1 Arial,Helvetica,sans-serif}
.game-display-direction{border-radius:5px;background:#16273c9c}
/* The cross is visible; its generous corner hit areas still accept diagonals. */
.game-display-direction:nth-child(1),.game-display-direction:nth-child(3),.game-display-direction:nth-child(7),.game-display-direction:nth-child(9){border-color:transparent;background:transparent;box-shadow:none;color:#d9f6ff66;font-size:17px}
.game-display-pad-center{background:#16273c9c;pointer-events:none;position:relative}
.game-display-pad-center::after{content:'';position:absolute;inset:32%;border:2px solid #d4e8f480;border-radius:50%}
.game-display-attacks{right:calc(20px + var(--game-safe-right));width:calc(var(--action-size) * 2 + 14px);height:calc(var(--action-size) + 36px);pointer-events:none}
.game-display-attacks .game-display-input{position:absolute;width:var(--action-size);height:var(--action-size);border-radius:50%;border:2px solid #ffe9da9c;pointer-events:auto;font-size:28px;box-shadow:0 4px 0 #180c1860,inset 0 2px 0 #ffffff30}
.game-display-b{left:0;bottom:0;background:#af3542c9}
.game-display-a{right:0;top:0;background:#e34e45ce}
.game-display-input[aria-pressed=true]{color:#09202b!important;background:#9cf7f3!important;border-color:#fff!important;box-shadow:inset 0 2px 0 #184550;transform:translateY(2px)}
.game-display-toolbar button:focus-visible,.game-display-input:focus-visible{outline:3px solid #fff4a5;outline-offset:2px}
/* Rotation refusal never creates a blocking screen. Upright remains a fallback. */
.screen.game-display-upright>canvas{top:calc(52px + var(--game-safe-top));height:calc(100% - 222px - var(--game-safe-top) - var(--game-safe-bottom))}
.game-display-upright .game-display-toolbar{top:calc(6px + var(--game-safe-top))}
.screen.game-display-active.game-display-upright{--pad-size:144px;--action-size:64px}
.game-display-upright .game-display-pad{left:calc(6px + var(--game-safe-left))}
.game-display-upright .game-display-attacks{right:calc(6px + var(--game-safe-right))}
@media(any-pointer:coarse),(max-width:900px){.mobile-control-help{display:block;color:#dfebee;font:14px/1.5 system-ui,sans-serif;max-width:560px;margin:12px auto}.mobile-control-help strong{color:#8ef2e9}}
@media(orientation:landscape) and (max-height:420px){
  .screen.game-display-active .pause-overlay h2,.screen.game-display-active .result-overlay h2{font-size:28px;margin:0 0 8px}
  .screen.game-display-active .pause-overlay .eyebrow{display:none}
  .screen.game-display-active .pause-overlay .mobile-control-help{font-size:12px;margin:6px auto}
}
@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}}

/* Flap Fights controller treatment, retaining this fighter's eight-way input. */
.game-display-attacks .game-display-input{font-size:25px;line-height:28px;outline:3px solid #081525;border-color:#fce0a7;box-shadow:inset 0 2px #fff9,inset 0 -3px #0003,0 4px #725635,0 6px 0 2px #020a15}
.game-display-attacks .game-display-input::after{content:attr(data-action-label);display:block;font:900 9px/12px Arial,Helvetica,sans-serif;letter-spacing:.04em}
.game-display-a{background:radial-gradient(circle at 35% 20%,#ffe7aa,#eac274 50%,#b77d3e);color:#192237}
.game-display-b{background:radial-gradient(circle at 35% 20%,#abebe2,#69b9b6 55%,#376b83);color:#102b3b;border-color:#b4e7e2!important}
.game-display-direction,.game-display-pad-center{background:linear-gradient(145deg,#526d80,#20394d 45%,#112435)}
.game-display-touch .game-display-toolbar{top:calc(6px + var(--game-safe-top))}
/* Separate thumb zones in landscape; the full 1280 x 720 view fits between them. */
.screen.game-display-touch{--fight-width:var(--game-width);--fight-height:calc(var(--game-height) - 222px);--fight-top:52px;--fight-render-width:min(var(--fight-width),calc(var(--fight-height) * 1.7777777778))}
.screen.game-display-touch:not(.game-display-upright){--pad-size:132px;--action-size:56px;--fight-width:calc(var(--game-width) - 296px);--fight-height:calc(var(--game-height) - 62px);--fight-top:54px}
.screen.game-display-active.game-display-touch>canvas{
  left:calc(var(--game-safe-left) + (var(--game-width) - var(--fight-render-width)) / 2);
  top:calc(var(--game-safe-top) + var(--fight-top) + (var(--fight-height) - var(--fight-render-width) * .5625) / 2);
  width:var(--fight-render-width);height:calc(var(--fight-render-width) * .5625);
}
.game-display-touch:not(.game-display-upright) .game-display-pad,
.game-display-touch:not(.game-display-upright) .game-display-attacks{top:calc(50% + 23px);bottom:auto;transform:translateY(-50%)}
.game-display-touch:not(.game-display-upright) .game-display-pad{left:calc(8px + var(--game-safe-left))}
.game-display-touch:not(.game-display-upright) .game-display-attacks{right:calc(8px + var(--game-safe-right))}
.fight-stage-open{min-height:44px}
.game-display-attacks{display:grid;grid-template-columns:repeat(2,56px);grid-auto-rows:52px;gap:8px;width:120px;height:172px}
.game-display-attacks .game-display-input{position:static!important;width:56px;height:52px;min-width:44px;min-height:44px;border-radius:16px}
.game-display-attacks .game-display-special{font-size:15px;line-height:19px;background:linear-gradient(145deg,#594e88,#213954);color:#f7eddb}
.game-display-attacks .game-display-special::after{font-size:8px}