@font-face{font-family:SkybreakDisplay;src:url('./fonts/display.woff2') format('woff2');font-display:swap}
@font-face{font-family:SkybreakBody;src:url('./fonts/body.woff2') format('woff2');font-display:swap}
:root{color-scheme:dark;font-family:SkybreakBody,sans-serif;color:#fff8de;background:#163e57;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,summary{font:inherit}button{padding:14px 24px;border:0;border-radius:5px;background:#18374b;color:#fff8de;cursor:pointer;min-height:48px;text-align:left}button:hover{background:#254f66}button:disabled{cursor:wait;opacity:.65}button:focus-visible,summary:focus-visible{outline:3px solid #fff8de;outline-offset:5px}.primary{background:#f5db62;color:#182d43;font-family:SkybreakDisplay,sans-serif;font-size:1.45rem}.primary:hover{background:#fff09b}[hidden]{display:none!important}
#world{display:block;width:100vw;height:100dvh;touch-action:none}.screen{position:fixed;inset:0;display:flex;align-items:center;padding:clamp(24px,5vw,80px);background:linear-gradient(90deg,rgba(10,31,48,.92),rgba(10,31,48,.55) 35%,transparent 70%)}.menu-copy{max-width:470px}.menu-copy h1{font-family:SkybreakDisplay,sans-serif;font-size:clamp(3.5rem,7vw,6rem);line-height:.96;letter-spacing:-.025em;margin:0 0 26px}.intro{font-size:1.2rem;line-height:1.55}.match-info{color:#d8edf2;margin:24px 0 16px}.menu-copy button{display:block;width:100%;margin:10px 0}.menu-copy details{margin-top:26px;max-width:42ch;line-height:1.6}.menu-copy summary{cursor:pointer}#loading{font-size:.88rem;color:#d8edf2;max-width:45ch;line-height:1.5}.scrim{justify-content:center;background:rgba(9,26,43,.82)}.dialog{width:min(460px,100%)}.dialog h2{font-family:SkybreakDisplay,sans-serif;font-size:3rem;line-height:1.05;margin:0 0 20px}.dialog p{line-height:1.6}.dialog button{display:block;width:100%;margin-top:12px}
#hud{position:fixed;inset:0;pointer-events:none;font-variant-numeric:tabular-nums}.topline{display:flex;justify-content:space-between;position:absolute;top:24px;left:24px;right:24px}.topline span,#storm{background:#132e43e8;padding:9px 14px;border-radius:4px}#remaining{position:absolute;right:0;top:194px;font-family:SkybreakBody,sans-serif;font-weight:800;font-size:1.4rem;background:#1023339c;padding:5px 9px}#storm{position:absolute;top:263px;right:24px;color:#eedbff;font-size:.8rem;padding:5px 9px;background:#1023339c}#crosshair{position:absolute;left:50%;top:50%;width:5px;height:5px;background:#fff;border:1px solid #17344b;border-radius:50%;transform:translate(-50%,-50%)}#notice{position:absolute;top:65%;left:50%;transform:translateX(-50%);text-align:center;background:#132e43e8;padding:10px 18px;border-radius:4px;max-width:80vw}#notice:empty{display:none}.vitals{position:absolute;bottom:28px;left:28px;width:min(280px,35vw);padding:10px 12px;background:linear-gradient(90deg,#102333a8,#10233300);text-shadow:0 2px 4px #071823}.vitals label{display:block;font-size:.8rem;font-weight:700;margin-top:5px}.vitals span{float:right}.vitals meter{width:100%;height:12px;display:block;accent-color:#7ad63d}.vitals meter::-webkit-meter-bar{background:#15283bad;border:1px solid #ffffff60;border-radius:0}.vitals meter::-webkit-meter-optimum-value{background:#7ad63d}#shield::-webkit-meter-optimum-value{background:#39a9eb}#shield{accent-color:#39a9eb}.vitals meter::-moz-meter-bar{background:#7ad63d}#shield::-moz-meter-bar{background:#39a9eb}.equipment{position:absolute;bottom:28px;right:28px;text-align:right;background:linear-gradient(270deg,#102333a8,#10233300);padding:10px 12px;text-shadow:0 2px 4px #071823}.equipment>*{display:block}.equipment strong{font-family:SkybreakBody,sans-serif;font-size:.9rem;font-weight:700}#ammo{font-size:clamp(1.8rem,3vw,3.2rem);font-weight:800;line-height:1.05;letter-spacing:-.025em}.equipment small{margin-top:12px;color:#d8edf2}.equipment span{margin-top:5px}
@media(max-width:650px){.screen{background:rgba(10,31,48,.8);padding:24px}.menu-copy{max-width:100%}.menu-copy h1{font-size:3.5rem}.topline{top:12px;left:12px;right:12px}#storm{top:68px;right:12px}.vitals{left:12px;bottom:12px;width:38vw;padding:10px}.equipment{right:12px;bottom:12px;max-width:52vw;padding:10px}.equipment small{font-size:.65rem}.menu-copy details{max-height:18dvh;overflow:auto}}
#map{position:absolute;top:24px;right:24px;width:180px;height:180px;border:1px solid #ffffffde;border-radius:0}
@media(max-width:650px){#map{top:12px;right:12px;width:120px;height:120px}#remaining{top:128px;font-size:1rem}#storm{top:174px;right:12px;font-size:.7rem}.equipment small{max-width:30ch;margin-left:auto}#ammo{font-size:1.8rem}}

/* The scene remains visible between the masthead and deployment dock. */
#menu.deployment{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;padding:clamp(20px,4vw,64px);background:linear-gradient(180deg,#102d46b8,transparent 32%,transparent 48%,#102d46ec)}
.deployment-heading{display:flex;align-items:center;gap:16px;text-shadow:0 2px 12px #0b233d}.deployment-heading h1{font-family:Arial,sans-serif;font-size:clamp(1.5rem,3vw,2.8rem);font-weight:900;letter-spacing:-.06em;text-transform:uppercase;margin:0;line-height:1}.deployment-heading h1 span{display:block;font-size:.45em;letter-spacing:.4em;margin:8px 0 0 3px}.deployment-heading>p{margin-left:auto;font-size:.85rem}.island-mark{font-size:3rem;color:#ffc888}.eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#ffd4a0;margin:0 0 12px}.entry-gate{margin:auto 0 0;max-width:460px}.entry-gate h2,.deployment-brief h2{font:700 clamp(1.7rem,3.5vw,3rem)/1.08 Arial,sans-serif;letter-spacing:-.04em;margin:0 0 18px}.entry-gate button{min-width:260px}.entry-gate #loading{min-height:3em}.deployment .primary{font:700 1rem SkybreakBody,sans-serif;background:#ffe1a0;border-radius:2px;padding:18px 28px}.deployment .primary:hover{background:#ffedc5}.deployment-dock{display:grid;grid-template-columns:1fr minmax(240px,360px);align-items:end;gap:20px 48px;padding-top:20px}.deployment-brief>p:last-child{line-height:1.5;margin:0;color:#e7eef2}.deployment-actions{display:grid;gap:8px}.deployment-options{grid-column:1/-1;display:flex;gap:18px;align-items:center;border-top:1px solid #ffffff38;padding-top:14px;position:relative}.deployment-options button{background:transparent;padding:8px 0;font-size:.85rem}.deployment-options details{font-size:.85rem}.deployment-options summary{cursor:pointer;padding:14px 4px}.deployment-options details p{position:absolute;bottom:64px;right:0;max-width:420px;background:#112b3ff5;padding:24px;line-height:1.7;border:1px solid #ffffff38;max-height:55dvh;overflow:auto}.deployment-options details[open] summary{color:#ffe1a0}
@media(max-width:650px){.deployment-heading>p{max-width:115px;text-align:right;font-size:.72rem}.deployment-dock{grid-template-columns:1fr;gap:18px}.deployment-brief h2{font-size:1.7rem;margin-bottom:8px}.deployment-brief>p:last-child{font-size:.88rem}.deployment-options{grid-column:1}.deployment-heading{gap:10px}.island-mark{font-size:2rem}.entry-gate button{width:100%;min-width:0}}
@media(max-height:520px){#menu.deployment{padding:16px 24px}.deployment-brief>p:last-child{display:none}.deployment-dock{gap:10px 24px}.deployment-options{padding-top:0}.deployment-heading>p{margin-top:0;margin-bottom:0}.entry-gate h2{font-size:1.7rem;margin-bottom:12px}}

#interact-prompt{position:absolute;top:55%;left:50%;transform:translateX(-50%);margin:0;padding:9px 15px;border:1px solid #ffffff80;border-radius:4px;background:#132e43ed;color:#fff;font-weight:700;text-align:center;white-space:nowrap}

#menu-film{position:absolute;inset:0;overflow:hidden;z-index:-2;background:#102536;pointer-events:none}.island-menu-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#menu.deployment{isolation:isolate;background:transparent}#menu.deployment::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#102d4680,transparent 32%,transparent 48%,#102d46ed)}

/* Raised controls keep each game's own face color, type and silhouette. The
   inset edge remains visible when motion is reduced or a control is disabled. */
button:not([data-key]):not([data-control]):not([data-dir]):not([data-card]):not([role="tab"]) {
  --control-depth: 3px;
  background-image: linear-gradient(180deg, #ffffff1c 0%, #ffffff03 47%, #00000010 100%);
  box-shadow: inset 0 1px 0 #ffffff66, inset 1px 0 0 #ffffff18,
    inset 0 -2px 0 #00000042, 0 var(--control-depth) 0 #060d18bd,
    0 5px 9px #00000030;
  text-shadow: 0 1px 0 #00000024;
  transition: translate 120ms cubic-bezier(0.2, 0, 0, 1),
    scale 120ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 120ms cubic-bezier(0.2, 0, 0, 1),
    background-color 120ms cubic-bezier(0.2, 0, 0, 1);
}
@media (hover:hover) {
  button:not([data-key]):not([data-control]):not([data-dir]):not([data-card]):not([role="tab"]):not(:disabled):hover {
    background-image: linear-gradient(180deg, #ffffff29, #ffffff05 47%, #0000000c);
    box-shadow: inset 0 1px 0 #ffffff88, inset 1px 0 0 #ffffff25,
      inset 0 -2px 0 #00000042, 0 var(--control-depth) 0 #060d18bd,
      0 6px 12px #00000038;
  }
}
button:not([data-key]):not([data-control]):not([data-dir]):not([data-card]):not([role="tab"]):not(:disabled):active {
  translate: 0 2px;
  scale: 0.96;
  box-shadow: inset 0 2px 3px #00000040, inset 0 -1px 0 #ffffff38, 0 1px 0 #060d18bd;
}
button:not([data-key]):not([data-control]):not([data-dir]):not([data-card]):not([role="tab"]):focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
button:not([data-key]):not([data-control]):not([data-dir]):not([data-card]):not([role="tab"]):disabled { --control-depth: 1px; text-shadow:none; }
@media (prefers-reduced-motion:reduce) {
  button:not([data-key]):not([data-control]):not([data-dir]):not([data-card]):not([role="tab"]) { transition:none; }
  button:not([data-key]):not([data-control]):not([data-dir]):not([data-card]):not([role="tab"]):not(:disabled):active { translate:none; scale:none; }
}
/* Confirmed hits remain legible against both pale stone and dark interiors. */
#hit-feedback{position:fixed;left:50%;top:50%;width:32px;height:32px;translate:-50% -50%;z-index:8;pointer-events:none;color:#fff;font:800 17px/1 SkybreakBody,sans-serif;text-align:center;padding-top:36px;white-space:nowrap;text-shadow:0 1px 3px #000,0 0 5px #000}
#hit-feedback::before,#hit-feedback::after{content:"";position:absolute;inset:0;border:0;background:linear-gradient(currentColor,currentColor) left center/10px 3px no-repeat,linear-gradient(currentColor,currentColor) right center/10px 3px no-repeat;filter:drop-shadow(0 1px 2px #000)}
#hit-feedback::before{rotate:45deg}#hit-feedback::after{rotate:-45deg}
#hit-feedback[data-shield="true"]{color:#7fe5ff}

/* Preferences share the pause surface and remain a draft until Apply. */
.settings-screen{padding:24px;overflow:auto;align-items:safe center}
.settings-sheet{width:min(820px,100%);margin:auto;background:#112b3ff5;padding:32px;color:#fff8de;border-radius:5px;box-shadow:0 18px 45px #05172580}
.settings-sheet h2{font:700 2rem/1.15 SkybreakBody,sans-serif;margin:0 0 10px;letter-spacing:-.02em}
#settings-status{font-size:.9rem;line-height:1.5;color:#d8edf2;margin:0;min-height:2.8em;max-width:65ch}
.settings-columns{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:22px 0 28px}
.settings-sheet fieldset{border:0;min-width:0;padding:0;margin:0}
.settings-sheet legend{font-size:1.15rem;font-weight:700;margin-bottom:20px;padding:0}
.setting-range{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;margin:0 0 12px;font-size:.94rem}
.setting-range output{font-variant-numeric:tabular-nums;color:#ffe1a0;min-width:4ch;text-align:right}
.setting-range input{grid-column:1/-1;width:100%;margin:0;height:32px;accent-color:#ffe1a0;cursor:pointer}
.setting-check{display:flex;align-items:center;gap:12px;min-height:48px;font-size:.94rem;cursor:pointer}
.setting-check input{width:20px;height:20px;accent-color:#ffe1a0;flex:none;margin:0}
.setting-note{font-size:.8rem;line-height:1.5;color:#d8edf2;margin:-4px 0 16px;max-width:40ch}
.setting-check+.setting-note{margin:0 0 16px 32px}
.settings-sheet input:focus-visible{outline:3px solid #fff8de;outline-offset:4px}
.settings-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;border-top:1px solid #ffffff30;padding-top:20px}
.settings-actions button{font:700 .94rem SkybreakBody,sans-serif;text-align:center}
.settings-actions #settings-reset{margin-right:auto}
#menu-settings-status,#pause-settings-status{font-size:.8rem;line-height:1.5;color:#d8edf2}
#menu-settings-status:empty,#pause-settings-status:empty{display:none}
.deployment-options{flex-wrap:wrap}
#scope{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.scope-lens{position:absolute;left:50%;top:50%;translate:-50% -50%;width:86vmin;height:86vmin;border-radius:50%;border:7px solid #0a1119;box-shadow:0 0 0 100vmax #080e16f5;overflow:hidden}
.scope-lens svg{display:block;width:100%;height:100%;stroke:#111b25;stroke-width:.18;fill:#111b25;filter:drop-shadow(0 1px 1px #ffffffa0)}
.scope-zoom{position:absolute;top:calc(50% + 33vmin);left:50%;translate:-50% 0;color:#fff;font:700 .8rem SkybreakBody,sans-serif;text-shadow:0 1px 3px #000}
@media(max-width:650px){.settings-screen{padding:12px}.settings-sheet{padding:24px 20px}.settings-columns{grid-template-columns:1fr;gap:30px}.settings-actions #settings-reset{flex-basis:100%;margin-right:0}.settings-actions #settings-cancel,.settings-actions #settings-apply{flex:1;padding-inline:14px}.deployment-options{gap:8px 18px}.scope-lens{border-width:4px}}

/* Real descent velocity and support clearance. */
.descent-speed{position:absolute;right:2.2rem;top:43%;width:10rem;display:grid;gap:.4rem;padding:.8rem .9rem;border-left:2px solid #dfbc71;background:linear-gradient(90deg,#09232cdd,#09232c00);color:#f4efd9;font-variant-numeric:tabular-nums;pointer-events:none}.descent-speed[hidden]{display:none}.descent-speed-mode{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#dfbc71}.descent-speed strong{font-size:1.4rem;font-weight:650}.descent-speed-detail{font-size:.7rem;color:#d0dcd9}.descent-speed-track{height:3px;background:#d2e5de33;overflow:hidden}.descent-speed-track i{display:block;height:100%;background:#dfbc71;transform-origin:left}

.picker-screen { z-index:80; display:flex; flex-direction:column; align-items:stretch; padding:0; background:#11151b; }
.picker-screen > header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 18px; color:#e5e8eb; background:#10151b; font-size:13px; }
.picker-screen > header button { margin:0; width:auto; color:#e5e8eb; border-color:#6b7681; }
.picker-screen #picker-host { display:block; width:100%; flex:1; min-height:0; overflow:hidden; }

@media(pointer:fine){.screen button:enabled,.screen a[href],.screen select:enabled,.screen summary{cursor:url("art/super-smash-royale/character-picker-v1/p1-cursor.svg") 14 5,pointer}.screen button:disabled{cursor:wait}}

/* The menu film occupies layers 1000/1001; the spoken countdown must be above
   both, including the final GO beat after the game takes input ownership. */
.match-countdown{position:fixed;inset:0;z-index:1100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;background:radial-gradient(ellipse,#0d111d70,#060b15d9);color:#ffdf65;text-align:center;isolation:isolate}
.match-countdown:before{content:'';position:absolute;width:min(54vmin,460px);aspect-ratio:1;border:2px solid #ffe38d44;border-radius:50%;box-shadow:0 0 0 14px #ffffff03,inset 0 0 55px #ffcd4410;z-index:-1}
.countdown-number{display:block;font:italic 900 clamp(130px,24vmin,260px)/1 SkybreakDisplay,sans-serif;letter-spacing:-.045em;color:#fff2b8;-webkit-text-stroke:2px #ffcf54;text-shadow:0 5px 0 #b36b1c,0 10px 0 #48202a,0 16px 32px #0009;transform-origin:center}
.match-countdown[data-step=ready] .countdown-number{font-size:clamp(70px,16vmin,170px);color:#fff}
.match-countdown .countdown-cancel{min-height:44px;padding:10px 24px;border:1px solid #c9d2df77;background:#111b2cde;color:#fff;font:700 13px SkybreakBody,sans-serif;border-radius:3px;text-align:center}
.match-countdown[data-step=go]{pointer-events:none;background:transparent;gap:0}
.match-countdown[data-step=go]:before,.match-countdown[data-step=go] .countdown-cancel{display:none}
.match-countdown[data-step=go] .countdown-number{color:#ffdc54;-webkit-text-stroke:2px #fff5c4;font-size:clamp(110px,23vmin,240px)}

/* Paused and result panels must remain reachable on short landscape windows. */
#pause,#result{overflow-y:auto;align-items:safe center}
#pause>.dialog,#result>.dialog{flex-shrink:0;margin-block:auto}
.picker-screen>header{flex-shrink:0;flex-wrap:wrap}
.picker-screen>header #picker-status{min-width:0;overflow-wrap:anywhere}
@media(max-width:540px){.picker-screen>header{gap:8px;padding:8px 12px}.picker-screen>header #picker-status{order:3;flex-basis:100%;font-size:12px}.picker-screen>header button{padding:10px 14px;min-height:44px}}

/* The picker has a persistent action at the bottom. Keep controller guidance
   in its command bar so the global hint cannot cover that action. */
body[data-input="gamepad"]:has(#fighter-picker:not([hidden])) #picker-status{visibility:hidden}
body[data-input="gamepad"]:has(#fighter-picker:not([hidden])) #controller-hint{top:18px;bottom:auto;max-width:calc(100vw - 360px);padding:0;background:none;border:0;box-shadow:none}
@media(min-width:541px) and (max-width:780px){body[data-input="gamepad"]:has(#fighter-picker:not([hidden])) #controller-hint{max-width:calc(100vw - 310px);font-size:9px;line-height:1.25}}
@media(max-width:540px){body[data-input="gamepad"]:has(#fighter-picker:not([hidden])) #controller-hint{top:60px;max-width:calc(100vw - 24px);font-size:9px;line-height:1.25}}

#scope[data-optic="holo"] .scope-lens{width:18px;height:18px;border:1px solid #f2d85dcc;border-radius:50%;box-shadow:0 0 3px #242819;overflow:visible;background:transparent}
#scope[data-optic="holo"] .scope-lens svg{display:none}
#scope[data-optic="holo"] .scope-lens:after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;translate:-50% -50%;background:#ffe976;box-shadow:0 0 4px #ffd841}
#scope[data-optic="holo"] .scope-zoom{display:none}

/* Keep preparation visible without changing the button size or focus. */
#play[aria-busy="true"]{display:flex;align-items:center;gap:.65em}
#play[aria-busy="true"]::before{content:"";display:inline-block;flex:0 0 auto;width:.85em;height:.85em;border:.12em solid currentColor;border-right-color:transparent;border-radius:50%;animation:start-loading-spin .8s linear infinite}
@keyframes start-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#play[aria-busy="true"]::before{animation:none}}