/* One visual system for preparation, room dialogs and the live court.
   Shot hit areas, layout presets and gesture coordinates are owned by the
   control system; only their surfaces and interaction colours change here. */
body {
  --ink:#f2f2e9; --muted:#aab8af; --paper:#14221e; --surface:#20312b;
  --line:#40544a; --soft:#273b31; --green:#c0dd94;
  --button-face:#c2dc9b; --button-edge:#9cb77c;
  color:var(--ink); color-scheme:dark; background:#101b18;
}
body button:focus-visible,body summary:focus-visible,body input:focus-visible { outline:2px solid #d6efac; outline-offset:3px; }
body .primary-btn,body .secondary-btn,body .dialog .primary-btn,body .dialog .secondary-btn { border-radius:3px; box-shadow:none; font-weight:550; }
body .primary-btn,body .dialog .primary-btn { background:#c2dc9b; color:#152218; border:1px solid #c2dc9b; }
body .secondary-btn,body .dialog .secondary-btn { background:#25392d; color:#e3eadc; border:1px solid #4b6451; }
body .primary-btn:hover { background:#d1e9ad; }
body .secondary-btn:hover { background:#314837; }
body .text-btn { color:#c5d4c2; }
body input:not([type=range]):not([type=checkbox]),body .dialog input { color:var(--ink); background:#101d19; border:1px solid #40544a; border-radius:3px; box-shadow:none; }
body input::placeholder { color:#8e9f92; }
body .segments { background:#10201a; border-radius:3px; }
body .segments button { color:#afbeb1; border-radius:2px; }
body .segments button.selected { color:#e1f1c5; background:#314837; box-shadow:inset 0 -2px #b8d88e; }

/* Home: the community entrance is always exposed, separate from More. */
body[data-screen=menu] #menu .menu-foot { position:relative; flex-direction:row; align-items:center; gap:26px; }
body[data-screen=menu] #menu .community-entry { width:auto; flex:none; min-height:44px; padding:0; border:0; background:none; color:#d5dfcc; white-space:nowrap; font-size:12px; line-height:16px; -webkit-text-size-adjust:none; text-size-adjust:none; }
body[data-screen=menu] #menu .community-entry:hover { color:#d6efac; }
body[data-screen=menu] .lobby-more { width:auto; position:static; }
body[data-screen=menu] #menu .lobby-more .menu-foot-actions { left:0; right:auto; }

/* Center each preparation view within the left side of the court. */
body[data-screen=menu] {
  --entry-gutter:max(clamp(20px,4vw,52px),var(--safe-left));
  --entry-width:min(390px,calc(52vw - 2 * var(--entry-gutter)));
  --entry-left:max(var(--entry-gutter),calc((52vw - var(--entry-width)) / 2));
  --entry-edge:max(12px,var(--safe-bottom));
  --entry-nav-top:max(8px,var(--safe-top));
  --entry-content-top:calc(var(--entry-nav-top) + 48px);
}
body[data-screen=menu]:has(#menu:not([data-entry=home])) .screen-vignette::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#07100e50 38%,transparent 56%);
}
body[data-screen=menu] #menu.menu-panel:not([data-entry=home]) {
  inset:var(--entry-content-top) auto var(--entry-edge) var(--entry-left);
  width:var(--entry-width);
  max-width:none;
  height:auto;
  padding:4px 8px 4px 0;
  overscroll-behavior:contain;
  touch-action:pan-y;
  text-shadow:0 1px 5px #07100e;
}
body[data-screen=menu] #menu.menu-panel:not([data-entry=home])::before,
body[data-screen=menu] #menu.menu-panel:not([data-entry=home])::after { content:""; flex:1 0 0; }
body[data-screen=menu] #menu[data-entry=solo] #mode-setup { flex:0 0 auto; padding:0; }
body[data-screen=menu] #menu :is(#solo-actions,.friend-actions) {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:0;
}
body[data-screen=menu] #menu:not([data-entry=home]) .lobby-action { font-size:20px; min-height:48px; }
body[data-screen=menu] #menu:not([data-entry=home]) .entry-heading {
  display:flex;
  align-items:center;
  min-height:44px;
  margin:0 0 4px;
}
body[data-screen=menu] #menu .entry-heading h2 { margin:0; font-size:clamp(20px,3.6vw,28px); font-weight:550; line-height:1.2; }
body[data-screen=menu] .entry-navigation {
  position:fixed;
  z-index:11;
  top:var(--entry-nav-top);
  left:max(12px,var(--safe-left));
  min-height:44px;
  margin:0;
  padding:6px 10px;
  border:1px solid #61745b66;
  border-radius:3px;
  background:#14221ee8;
  color:var(--ink);
  font-size:12px;
  text-decoration:none;
}
#entry-back,#leave-waiting { display:none; }
body[data-screen=menu]:has(#menu:not([data-entry=home])):not(:has(#dialog-backdrop:not([hidden]))) #entry-back,
body[data-screen=menu] #dialog-backdrop:has(#waiting-dialog:not([hidden])) #leave-waiting { display:block; }
body[data-screen=menu] .entry-navigation:hover { color:#d6efac; }
#waiting-dialog #copy-invite {
  flex:none;
  width:auto;
  min-height:44px;
  margin:0;
  padding:6px 0;
  background:none;
  text-decoration:none;
  font-size:11px;
}
#waiting-dialog #copy-invite:hover { color:#d6efac; }

body[data-screen=menu] #menu .field-label,
body[data-screen=menu] #menu .input-label { color:var(--muted); font-size:12px; font-weight:500; }
body[data-screen=menu] #menu .input-label { margin:0 0 6px; }
body[data-screen=menu] #menu .setup-row { display:grid; grid-template-columns:4.3em minmax(0,1fr); align-items:center; gap:8px; border:0; padding:0; margin:0; font-size:12px; }
body[data-screen=menu] #menu .setup-row + .setup-row { margin-top:5px; }
body[data-screen=menu] #menu .segments {
  padding:0;
  gap:4px;
  background:transparent;
  border:0;
  border-radius:0;
}
body[data-screen=menu] #menu .segments button {
  min-height:44px;
  font-size:12px;
  padding:4px;
  border:0;
  border-radius:0;
  background:transparent;
}
body[data-screen=menu] #menu .segments button.selected {
  color:#e1f1c5;
  background:transparent;
  box-shadow:inset 0 -2px var(--green);
}
body[data-screen=menu] #menu .format-choices { flex-wrap:nowrap; }
body[data-screen=menu] #menu .format-choices button { flex:1; }
body[data-screen=menu] #menu .format-choices button:last-child { flex:1.65; }
body[data-screen=menu] #menu .rules-note { min-height:0; margin:6px 0 0; font-size:11px; line-height:1.5; }
body[data-screen=menu] #menu .entry-rules { color:#d6dfd4; font-size:12px; line-height:1.45; }
body[data-screen=menu] #menu .challenge-skills-note { margin-bottom:4px; }
.setup-reference { margin-top:2px; color:var(--muted); font-size:12px; }
.setup-reference summary { cursor:pointer; min-height:44px; display:flex; align-items:center; gap:8px; list-style:none; }
.setup-reference summary::before { content:'＋'; }
.setup-reference[open] summary::before { content:'−'; }
.setup-reference summary::-webkit-details-marker { display:none; }
body[data-screen=menu] #menu .setup-reference .role-note { display:block; min-height:0; margin:0; }
body[data-screen=menu] #menu .entry-submit { width:min(100%,280px); margin:8px 0 0; border:0; }
body[data-screen=menu] #menu .entry-submit .primary-btn,
body #dialog-backdrop #waiting-dialog #ready-room {
  justify-content:flex-start;
  min-height:44px;
  padding:8px 12px;
  color:var(--ink);
  background:linear-gradient(90deg,#b3d78b29,transparent);
  border:0;
  border-left:3px solid #b8dc88;
  border-radius:0;
  font-size:15px;
  text-shadow:0 1px 4px #07100e;
}
body[data-screen=menu] #menu .entry-submit .primary-btn { margin:0; }
body[data-screen=menu] #menu .entry-submit .primary-btn:hover,
body #dialog-backdrop #waiting-dialog #ready-room:hover { background:linear-gradient(90deg,#b3d78b46,transparent); }
body[data-screen=menu] #menu :is(#player-name,#room-code) {
  background:#09140e60;
  border:0;
  border-bottom:1px solid #829586;
  border-radius:0;
}
body[data-screen=menu] #menu .entry-content { flex:none; overflow:visible; padding:0; }
body[data-screen=menu] #menu #player-name { height:44px; font-size:16px; }
body[data-screen=menu] #menu #player-profile-note { margin:6px 0 0; font-size:11px; line-height:1.5; }
body[data-screen=menu] #menu :is(#friend-join-options,#friend-create-options) { margin-top:6px; }
body[data-screen=menu] #menu .room-mode-picker { margin:6px 0 0; padding:0; background:none; border:0; }
body[data-screen=menu] #menu #friend-mode-note { display:block; font-size:11px; margin-top:5px; color:#e7c49b; }
body[data-screen=menu] #menu #room-code { font-family:'Rally Numerals','Rally UI',sans-serif; font-size:18px; letter-spacing:.12em; min-height:44px; }
body[data-screen=menu] #menu #room-code::placeholder { font-family:'Rally UI',sans-serif; font-size:13px; letter-spacing:0; }
body[data-screen=menu] #menu #friends-network-note { display:block; margin:6px 0 0; font-size:11px; }
body[data-screen=menu] #menu .hell-contract {
  gap:8px;
  justify-content:space-between;
  max-width:230px;
  padding:4px 0;
  background:none;
  border:0;
  text-align:center;
}
body[data-screen=menu] #menu .hell-contract strong { color:#deebba; font-family:'Rally Numerals','Rally UI',sans-serif; }
body[data-screen=menu] #menu .hell-contract small { font-family:'Rally UI',sans-serif; }
body[data-screen=menu] #menu .hell-skills { gap:0; margin:0; }
body[data-screen=menu] #menu .hell-skills article { padding:3px 0; border:0; border-radius:0; background:transparent; }
body[data-screen=menu] #menu .hell-skills article:first-child { padding-top:0; }
body[data-screen=menu] #menu .hell-skills b { color:var(--ink); font-weight:550; }
body[data-screen=menu] #menu .hell-skills p { color:var(--muted); opacity:1; }

/* The same matte surfaces continue through rooms, pause, results and settings. */
body #dialog-backdrop { background:#060d0ab8; }
body #dialog-backdrop .dialog { background:#14221efc; border:1px solid #40544a; border-top:2px solid #b8d88e; border-radius:4px; color:var(--ink); box-shadow:0 20px 70px #0006; scrollbar-color:#516454 #14221e; }
body #dialog-backdrop .dialog h2 { font-weight:500; letter-spacing:.04em; }
body #dialog-backdrop .dialog .eyebrow { display:none; }
body #dialog-backdrop .dialog .close-dialog { background:#25392d; color:#e3eadc; border-color:#40544a; min-width:44px; min-height:44px; border-radius:3px; }
body #dialog-backdrop .dialog .room-code,body #dialog-backdrop .dialog .pause-clock { color:#d6e7b5; background:transparent; border-color:#40544a; font-family:'Rally Numerals','Rally UI',sans-serif; }
body #dialog-backdrop .dialog :is(.rule-note,.room-mode-summary,.waiting-status,.lobby-players) { color:#b9c9b9; background:transparent; border-color:#40544a; }
body[data-screen=menu]:has(#waiting-dialog:not([hidden])) #menu { visibility:hidden; }
body #dialog-backdrop:has(#waiting-dialog:not([hidden])) {
  justify-content:flex-start;
  padding-top:var(--entry-content-top);
  padding-left:var(--entry-left);
  background:none;
  backdrop-filter:none;
}
body #dialog-backdrop #waiting-dialog {
  flex:0 1 390px;
  max-width:var(--entry-width);
  max-height:calc(100dvh - var(--entry-content-top) - max(16px,var(--safe-bottom)));
  padding:4px 8px 4px 0;
  border:0;
  background:none;
  box-shadow:none;
  text-shadow:0 1px 4px #07100e;
}
body #dialog-backdrop #waiting-dialog h2 { margin:0; padding:0; font-size:22px; font-weight:550; }
#waiting-dialog .waiting-invite {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 12px;
  margin:4px 0 8px;
}
body #dialog-backdrop #waiting-dialog .room-code { margin:0; padding:0; border:0; font-size:27px; letter-spacing:.1em; }
#waiting-dialog :is(.waiting-status,.lobby-players,.rule-note) { margin:0; overflow-wrap:anywhere; }
#waiting-dialog .waiting-status { text-align:left; font-size:12px; }
#waiting-dialog .lobby-players { margin:6px 0; font-size:12px; line-height:1.5; }
#waiting-dialog .room-mode-summary { font-size:11px; }
#waiting-dialog .rule-note { padding:0; font-size:11px; line-height:1.5; }
#waiting-dialog .rule-note + .rule-note { margin-top:4px; }
#waiting-dialog #ready-room { width:min(100%,220px); margin:8px 0 0; }
#waiting-dialog #ready-room:disabled { display:none; }
body .topbar .icon-btn,body[data-screen=match] :is(.camera-toggle,.palette-toggle,.match-settings-toggle) { background:#14221ee8; color:#e5eadf; border:1px solid #61745b66; border-radius:3px; box-shadow:none; }
body[data-screen=match] .topbar button { min-height:36px; }
body :is(.camera-panel,.palette-panel,.match-settings-panel) { background:#14221ef7; color:#e5eadf; border:1px solid #40544a; border-radius:3px; box-shadow:0 12px 30px #0004; }
body :is(.camera-panel,.palette-panel,.match-settings-panel) :is(strong,label,output,small,summary) { color:inherit; }
body .shot-layout-settings { background:#25392d; color:#e3eadc; border-color:#40544a; border-radius:3px; }
body .shot-layout-settings:hover { background:#314837; }
body .shot-layout-editor { background:linear-gradient(180deg,#14221e,#101b18); }
body .shot-layout-toolbar { border-color:#40544a; border-radius:3px; background:#14221ef7; box-shadow:0 12px 30px #0004; }
@media (max-width:600px) {
  .shot-layout-toolbar { width:calc(100% - 24px); display:grid; grid-template-columns:1fr auto; gap:6px 10px; padding:10px; }
  .shot-layout-title { grid-column:1/-1; }
  .shot-layout-title small,.shot-layout-status { display:none; }
  .shot-layout-presets { justify-self:start; }
  .shot-layout-actions { justify-self:end; }
  .shot-layout-toolbar .shot-layout-actions button,.shot-layout-presets button { min-height:36px; }
}
body .scoreboard { background:#14221ee8; border:1px solid #61745b66; border-radius:3px; box-shadow:none; color:#f0f0e6; }
body .scoreboard :is(.match-label,.score-player small) { color:#b3c2af; }
body .scoreboard .score-player { color:#f0f0e6; border-color:#40544a; }
body .scoreboard .score-player b { color:#deebba; }
body .hud .match-note { color:#bccbb7; text-shadow:0 1px 4px #07120b; }
body .hud .match-note strong { color:#edf2df; }
body .assist-panel>strong { background:#14221ee8; color:#dae6ce; border-left:2px solid #b8d88e; border-radius:0; box-shadow:none; }
body .joystick { border:1px solid #b3c6a766; background:#14221e99; box-shadow:inset 0 0 0 5px #c2dc9b08; }
body #knob { background:#b8c9ab66; border:1px solid #d5e5c4aa; box-shadow:none; }
body .stick-cross::before,body .stick-cross::after { background:#b3c6a744; }
body .joystick-wrap>small { color:#bacbb2; text-shadow:0 1px 4px #07120b; }
body .aim-heading { background:transparent; border:0; box-shadow:none; }
body .aim-heading b { color:#dce8ce; text-shadow:0 1px 4px #07120b; }
body[data-shot-skin=glass] .shot-btn { --key-accent:#c6d9b2; }
body[data-shot-skin=glass] [data-shot=drop] { --key-accent:#b9d6c4; }
body[data-shot-skin=glass] [data-shot=smash] { --key-accent:#e5d3a3; }
body[data-shot-skin=glass] .key-face { background:linear-gradient(145deg,#334638dd,#14221ee8); border-color:#a2b49399; color:#edf1e4; box-shadow:inset 0 1px #dae8c622,0 4px 16px #0003; text-shadow:none; }
body[data-shot-skin=glass] .shot-btn.smash .key-face { background:linear-gradient(145deg,#494b36dd,#1c2920e8); border-color:#d5c39399; }
body[data-shot-skin=glass] .shot-btn.charging .key-face { background:#314837ed; box-shadow:inset 0 0 0 1px #c2dc9b77; }
body[data-shot-skin=glass] .shot-btn.smash.ready .key-face { border-color:#f0d791; box-shadow:0 0 0 2px #e7d39833; }
body[data-shot-skin=glass] .shot-btn.smash.unavailable .key-face { border-color:#82917e66; color:#bcc7b5aa; }
body .hell-status { background:#14221ef0; border-color:#a48f65; border-radius:3px; }
body .hell-status b { color:#ead29f; }
body .hell-status span { color:#c6cdb9; }
@media (max-height:600px) and (orientation:landscape) {
  body[data-screen=menu] #menu .menu-foot { gap:20px; }
  body[data-screen=menu] #menu .community-entry { font-size:11px; }
}
@media (max-height:360px) and (orientation:landscape) {
  body[data-screen=menu] #menu:not([data-entry=home]) .entry-heading { min-height:28px; margin-bottom:0; }
  body[data-screen=menu] #menu .setup-row + .setup-row { margin-top:0; }
  body[data-screen=menu] #menu .entry-submit { margin-top:4px; }
  body[data-screen=menu] #menu .input-label { margin-bottom:2px; }
  body[data-screen=menu] #menu :is(#friend-join-options,#friend-create-options) { margin-top:4px; }
  body[data-screen=menu] #menu .entry-rules { margin-top:4px; }
}
@media (max-width:640px) and (orientation:landscape) {
  body[data-screen=menu] #menu :is(#friend-formats,#ai-formats) button { font-size:11px; padding-inline:1px; }
  body[data-screen=menu] #menu .setup-row { gap:4px; }
}
@media (orientation:portrait), (max-width:520px) {
  body[data-screen=menu] {
    --entry-gutter:max(16px,var(--safe-left),var(--safe-right));
    --entry-width:min(390px,calc(100vw - 2 * var(--entry-gutter)));
    --entry-left:calc((100vw - var(--entry-width)) / 2);
  }
  body[data-screen=menu]:has(#menu:not([data-entry=home])) .screen-vignette::after { background:#07100e40; }
  body[data-screen=menu] #menu.menu-panel:not([data-entry=home]) { top:max(68px,calc(var(--safe-top) + 52px)); }
  body #dialog-backdrop:has(#waiting-dialog:not([hidden])) { justify-content:center; padding-inline:var(--entry-gutter); }
}

@media (max-width:380px) and (orientation:portrait) {
  body[data-screen=menu]:has(#menu:not([data-entry=home])) .topbar .top-actions { gap:4px; }
  body[data-screen=menu] .entry-navigation { width:44px; padding:0; font-size:0; }
  body[data-screen=menu] .entry-navigation::before { content:"←" / ""; font-size:20px; }
}
/* Keep all match actions on screen even on a 320px portrait viewport. */
@media (max-width:360px) {
  body[data-screen=match] .topbar { gap:3px; left:max(4px,var(--safe-left)); right:max(4px,var(--safe-right)); }
  body[data-screen=match] .topbar .brand { display:none; }
  body[data-screen=match] .topbar .top-actions { gap:3px; }
  body[data-screen=match] .topbar .icon-btn:not(.display-btn) { width:26px; }
  body[data-screen=match] .topbar .display-btn { padding-inline:3px; }
  body[data-screen=match] :is(.camera-toggle,.palette-toggle,.match-settings-toggle) { white-space:nowrap; padding:4px; font-size:10px; }
  body[data-screen=match] .camera-toggle { margin-left:0; }
}

@media (hover:hover) {
  body button.primary-btn:hover:not(:disabled),body .dialog button.primary-btn:hover:not(:disabled) { background:#d1e9ad; }
  body button.secondary-btn:hover:not(:disabled),body .dialog button.secondary-btn:hover:not(:disabled),body .role-card:not(.selected):hover,body .icon-btn:hover { background:#314837; border-color:#a9bba0; }
  body .segments button:not(.selected):hover { background:#263e2e; }
  body[data-screen=menu] #menu .segments button:not(.selected):hover:not(:disabled) {
    color:var(--ink);
    background:transparent;
  }
}
body .shuttle-edge-indicator { color:#ead29f !important; border-color:#a48f65 !important; }

body[data-screen=match] .brand { color:#e6ecdc; }
body[data-screen=match] .brand small { color:#c0d2b5; }
body[data-screen=match] .brand-mark { background:#45634c; border-bottom-color:#a3bd83; }

/* Native dialogs are outside the shared backdrop but use the same palette. */
body :is(.onboarding-dialog,.pwa-dialog,.release-dialog) { color:#f2f2e9; background:#14221e; border:1px solid #40544a; border-top:2px solid #b8d88e; border-radius:4px; }
body :is(.onboarding-dialog,.pwa-dialog,.release-dialog)::backdrop { background:#060d0ab8; }
body :is(.onboarding-dialog,.pwa-dialog,.release-dialog) h2 { font-weight:500; letter-spacing:.03em; }
body :is(.onboarding-intro,.onboarding-keyboard,.onboarding-return-note,.pwa-note,.pwa-close,.release-close) { color:#aab8af; }
body :is(.onboarding-progress,.onboarding-instructions strong,.pwa-eyebrow) { color:#c0dd94; }
body .onboarding-visual,body .pwa-cache-detail { background:#1d3026; border-color:#40544a; }
body .onboarding-visual span { background:#314837; color:#e1f1c5; border-color:#829873; font-weight:550; }
body .pwa-actions button { background:#25392d; color:#e3eadc; border-color:#4b6451; }
body .pwa-actions #pwa-install,body .release-dialog .release-dismiss { background:#c2dc9b; color:#152218; border-color:#c2dc9b; }
body #dialog-backdrop .dialog .result-score { color:#deebba; }

/* The entrance never leaves live hit targets behind an invisible HUD. */
body[data-entering=true] :is(#hud,#game-controls,.topbar,.player-stamina-layer,#countdown) { visibility:hidden; pointer-events:none; }
body[data-screen=match]:not([data-entering=true]) :is(#hud,#game-controls) { animation:match-chrome-in 180ms ease-out; }
@keyframes match-chrome-in { from { opacity:0; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) { body[data-screen=match] :is(#hud,#game-controls) { animation:none; } }

/* Remove enclosing button frames; intentional one-sided dividers are restored
   below. Keep the existing hit areas, including navigation and dialogs. */
body button:not(.shot-btn) {
  border-color:transparent !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;
}
body :is(.primary-btn,.secondary-btn,.pwa-actions button,.release-dismiss,.onboarding-next) {
  color:var(--ink) !important;
}
body button:is(.selected,[aria-pressed=true],[aria-expanded=true]):not(.shot-btn) {
  color:#d6efac !important;
  text-decoration:underline;
  text-underline-offset:6px;
}
/* Open-ended rules frame the rhythm of each entry without enclosing it.
   The lower rule extends gently on intent; no permanent first-row accent. */
body[data-screen=menu] #menu .lobby-action,
body[data-screen=menu] #menu .entry-submit .primary-btn,
body #dialog-backdrop #waiting-dialog #ready-room {
  position:relative;
  border-color:transparent !important;
  text-decoration:none;
}
body[data-screen=menu] #menu .lobby-action::before,
body[data-screen=menu] #menu .lobby-action::after,
body[data-screen=menu] #menu .entry-submit .primary-btn::before,
body[data-screen=menu] #menu .entry-submit .primary-btn::after,
body #dialog-backdrop #waiting-dialog #ready-room::before,
body #dialog-backdrop #waiting-dialog #ready-room::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,#c3cec080,#c3cec033 72%,transparent);
}
body[data-screen=menu] #menu :is(.lobby-action,.entry-submit .primary-btn)::before,
body #dialog-backdrop #waiting-dialog #ready-room::before { top:0; opacity:.35; }
body[data-screen=menu] #menu :is(.lobby-action,.entry-submit .primary-btn)::after,
body #dialog-backdrop #waiting-dialog #ready-room::after {
  bottom:0;
  opacity:.45;
  transform:scaleX(.8);
  transform-origin:left center;
  transition:transform 320ms cubic-bezier(.22,.61,.36,1),opacity 320ms ease;
}
body[data-screen=menu] #menu :is(.lobby-action,.entry-submit .primary-btn):is(:focus-visible,:active)::after,
body #dialog-backdrop #waiting-dialog #ready-room:is(:focus-visible,:active)::after {
  transform:scaleX(1);
  opacity:1;
}
@media(hover:hover) {
  body[data-screen=menu] #menu :is(.lobby-action,.entry-submit .primary-btn):hover::after,
  body #dialog-backdrop #waiting-dialog #ready-room:hover::after { transform:scaleX(1); opacity:1; }
}
body[data-screen=menu] #menu .segments button.selected {
  box-shadow:inset 0 -2px var(--green) !important;
  text-decoration:none;
}
body button:not(.shot-btn):focus-visible {
  outline:none;
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-thickness:2px;
}
body button:not(.shot-btn):active:not(:disabled) { opacity:.72; }
@media(hover:hover) {
  body button:not(.shot-btn):hover:not(:disabled) { color:#d6efac !important; }
}

/* Results share the open, ruled composition of match preparation. */
body #dialog-backdrop #result-dialog {
  flex:0 1 720px; width:720px; display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(180px,1fr);
  gap:32px; padding:28px 32px; border:0; border-radius:0;
  background:linear-gradient(115deg,#14221efa,#101d19f5);
  box-shadow:0 20px 70px #0003;
}
#result-dialog .result-summary,#result-dialog .result-actions { min-width:0; }
#result-dialog .result-kicker,#result-dialog .result-actions-label {
  color:#9bab9d; font-size:11px; line-height:1.5; letter-spacing:.08em;
}
body #dialog-backdrop #result-dialog h2 {
  margin:6px 0 18px; padding:0; font-size:30px; line-height:1.25;
}
#result-dialog[data-outcome=win] #result-title { color:#d6e7b5; }
#result-dialog .result-scoreboard {
  padding:14px 0 12px; border-block:1px solid #b7c7ab30;
}
#result-dialog .result-team-names {
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
  text-align:center; color:#c1cdbf; font-size:12px; line-height:1.5;
}
#result-dialog .result-team-names span { min-width:0; overflow-wrap:anywhere; }
body #dialog-backdrop #result-dialog .result-score {
  display:grid; grid-template-columns:1fr 32px 1fr; align-items:center;
  margin:8px 0 4px; padding:0; border:0; font-size:64px;
  line-height:1.05; letter-spacing:0; color:#e2e9d9;
}
#result-dialog .result-colon { color:#7c8e7d; font-size:32px; font-weight:400; }
#result-dialog[data-outcome=win] #result-score-self,
#result-dialog[data-outcome=loss] #result-score-other { color:#d6e7b5; }
#result-dialog .result-score-label { text-align:center; color:#9bab9d; font-size:10px; line-height:1.5; letter-spacing:.12em; }
#result-dialog #result-reason { margin:12px 0 0; color:#afbfaf; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
#result-dialog .result-actions { align-self:center; padding-left:28px; border-left:1px solid #b7c7ab30; }
#result-dialog .result-actions-label { display:block; margin-bottom:8px; }
body #dialog-backdrop #result-dialog :is(.primary-btn,.secondary-btn,.text-btn) {
  position:relative; width:100%; min-height:48px; margin:0; padding:12px 0;
  border:0; border-radius:0; text-align:left; line-height:1.5;
}
body #dialog-backdrop #result-dialog .primary-btn { font-size:18px; font-weight:550; white-space:normal; }
#result-dialog #rematch::before,#result-dialog #rematch::after {
  content:''; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,#c3cec060,#c3cec018 85%,transparent);
  pointer-events:none;
}
#result-dialog #rematch::before { top:0; opacity:.55; }
#result-dialog #rematch::after {
  bottom:0; transform:scaleX(.8); transform-origin:left;
  transition:transform 320ms cubic-bezier(.22,.61,.36,1),opacity 320ms ease;
}
#result-dialog #rematch:is(:hover,:focus-visible)::after { transform:scaleX(1); }
body #dialog-backdrop #result-dialog .secondary-btn { font-size:13px; font-weight:500; }
body #dialog-backdrop #result-dialog .text-btn { color:#afbfaf; font-size:13px; }
#result-dialog .result-record { margin:10px 0 0; text-align:left; font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
@media (orientation:landscape) and (max-height:500px) {
  body #dialog-backdrop #result-dialog { padding:20px 24px; gap:24px; }
  body #dialog-backdrop #result-dialog h2 { margin:4px 0 12px; font-size:26px; }
  #result-dialog .result-scoreboard { padding:10px 0 8px; }
  body #dialog-backdrop #result-dialog .result-score { font-size:54px; }
  #result-dialog .result-actions { padding-left:24px; }
}
@media (max-width:540px) and (orientation:portrait) {
  body #dialog-backdrop #result-dialog { grid-template-columns:minmax(0,1fr); gap:20px; padding:24px; }
  #result-dialog .result-actions { padding:0; border:0; }
  #result-dialog .result-actions-label { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  #result-dialog #rematch::after { transition:none; }
}