/*
 * ============================================================
 * ClutchSpin Studios — Match Point (Tennis)
 * FILE: css/tennis.css
 * PURPOSE: All visual styling for Match Point tennis game
 *
 * FOR TRUEIG TECH:
 * This file controls ALL visual appearance of the game.
 * Colors, fonts, layouts, animations, and component styles.
 * Safe to edit for graphics improvements.
 * ============================================================
 */
:root {
  --navy:   #05080f;
  --navy2:  #0a1020;
  --gold:   #f0c040;
  --gold2:  #d4a020;
  --gold3:  #ffe060;
  --white:  #dce8f8;
  --grey:   #4e607e;
  --red:    #e03838;
  --glass:  rgba(255,255,255,.032);
  --glass-b:rgba(255,255,255,.07);
}

/* Large, game-native bet editor opened from the compact bet display. */
.bet-input[readonly] {
  cursor: pointer;
  caret-color: transparent;
}

.bet-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 7000;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: rgba(0, 5, 10, .78);
  backdrop-filter: blur(9px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, visibility 0s linear 140ms;
}

.bet-editor-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 140ms ease;
}

.bet-editor-card {
  width: min(430px, 100%);
  padding: 24px;
  border: 2px solid rgba(245, 200, 66, .75);
  border-radius: 20px;
  background: linear-gradient(155deg, #071a21 0%, #02090d 68%, #000 100%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .72), inset 0 0 32px rgba(245, 200, 66, .07);
  color: #f8fbff;
  transform: scale(.94);
  transition: transform 140ms ease;
}

.bet-editor-overlay.open .bet-editor-card { transform: scale(1); }
.bet-editor-kicker { color: #69d6ff; font: 700 .72rem/1 'DM Sans', sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.bet-editor-title { margin-top: 6px; color: #f5c842; font: 400 2.2rem/1 'Bebas Neue', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.bet-editor-limit { margin-top: 6px; color: rgba(232, 240, 252, .68); font: 500 .78rem/1.3 'DM Sans', sans-serif; }
.bet-editor-stepper { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 10px; align-items: stretch; margin-top: 20px; }
.bet-editor-step,
.bet-editor-actions button {
  border: 1px solid rgba(245, 200, 66, .55);
  border-radius: 12px;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}
.bet-editor-step { min-height: 68px; background: rgba(245, 200, 66, .1); color: #f5c842; font-size: 2rem; }
.bet-editor-input-wrap { display: block; min-width: 0; }
.bet-editor-input-wrap > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#betEditorInput {
  width: 100%;
  height: 68px;
  padding: 0 12px;
  border: 2px solid rgba(105, 214, 255, .6);
  border-radius: 12px;
  outline: none;
  background: #02080b;
  color: #fff6c8;
  font: 900 2rem/1 'DM Mono', monospace;
  text-align: center;
  box-shadow: inset 0 0 20px rgba(105, 214, 255, .06);
  touch-action: manipulation;
}
#betEditorInput:focus { border-color: #69d6ff; box-shadow: 0 0 0 3px rgba(105, 214, 255, .18), inset 0 0 20px rgba(105, 214, 255, .08); }
.bet-editor-error { min-height: 20px; margin-top: 8px; color: #ff8585; font: 700 .78rem/1.3 'DM Sans', sans-serif; text-align: center; }
.bet-editor-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; margin-top: 8px; }
.bet-editor-actions button { min-height: 50px; padding: 0 14px; font: 800 .9rem/1 'DM Sans', sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.bet-editor-cancel { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .18) !important; }
.bet-editor-confirm { background: linear-gradient(180deg, #ffe578, #dba51f); color: #071015; }

@media (max-width: 560px) {
  .bet-editor-card { padding: 20px 16px 16px; border-radius: 18px; }
  .bet-editor-title { font-size: 2rem; }
  .bet-editor-stepper { grid-template-columns: 58px minmax(0, 1fr) 58px; gap: 8px; }
  .bet-editor-step,
  #betEditorInput { height: 64px; min-height: 64px; }
  #betEditorInput { font-size: clamp(1.55rem, 8vw, 2rem); }
}
* { margin:0; padding:0; box-sizing:border-box; }

html,
body,
.wrapper,
.court-wrap,
#courtCanvas {
  touch-action: none;
}

body {
  background: var(--navy);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-x: hidden;
}
body::before {
  content:'';
  position: fixed; inset:0;
  background:
    radial-gradient(ellipse 120% 55% at 50% 0%, #0c1830 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, #060a14 0%, transparent 60%),
    #05080f;
  z-index: 0;
}

.rotate-phone-lock {
  display: none;
}

.rotate-phone-icon {
  width: 34px;
  height: 54px;
  border: 3px solid #f0c040;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 0 22px rgba(240,192,64,.38);
}

.rotate-phone-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 5px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #f0c040;
}

.rotate-phone-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  letter-spacing: .08em;
  color: #ffe060;
}

.rotate-phone-copy {
  font-size: .9rem;
  color: rgba(220,232,248,.82);
}

@media (orientation: landscape) and (max-height: 520px) and (hover: none) and (pointer: coarse) {
  body {
    overflow: hidden;
  }

  body > :not(.rotate-phone-lock) {
    display: none !important;
  }

  .rotate-phone-lock {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    background:
      radial-gradient(ellipse 80% 70% at 50% 20%, rgba(20,42,76,.72), transparent 62%),
      #05080f;
  }
}

.wrapper {
  position: relative; z-index: 10;
  width: 100%; max-width: 480px;
  padding: 8px 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}

/* ── Header ── */
.header {
  text-align: center; position: relative;
  padding: 4px 0 2px;
}
.header h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.4rem; letter-spacing: 0.18em;
  background: linear-gradient(
    160deg,
    #ffe066 0%,
    #f5c842 28%,
    #fff4b0 52%,
    #f0b820 72%,
    #ffd84a 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter:
    drop-shadow(0 0 10px rgba(245,200,66,.75))
    drop-shadow(0 0 28px rgba(245,200,66,.35))
    drop-shadow(0 3px 0 rgba(0,0,0,.9));
  line-height: 1;
  margin: 0;
}
.info-btn {
  position: absolute; top: 4px; right: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(240,192,64,.08);
  border: 1px solid rgba(240,192,64,.25);
  color: var(--gold);
  font-family: 'DM Mono', monospace;
  font-size: .85rem; font-weight: bold;
  cursor: pointer; transition: all .15s;
  display: flex; align-items:center; justify-content:center;
}
.info-btn:hover { background:rgba(240,192,64,.18); border-color:var(--gold); }

/* ── Court wrap ── */
.court-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(240,192,64,.35),
    0 0 0 3px rgba(240,192,64,.08),
    0 0 40px rgba(240,192,64,.18),
    0 12px 60px rgba(0,0,0,.9);
}
.court-wrap::after {
  content:''; position:absolute; inset:0; z-index:3;
  border-radius:12px;
  box-shadow: inset 0 0 0 1px rgba(255,220,80,.2);
  pointer-events:none;
}
#courtCanvas {
  position: relative;
  z-index: 4;
  display:block;
  width:100%;
  height:auto;
  overflow: visible;
}

/* Canvas overlays */
.shot-label-overlay {
  position: absolute;
  top: 8px; left:50%; transform:translateX(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: .9rem; letter-spacing:.2em;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 6px rgba(0,0,0,1), 0 0 20px rgba(0,0,0,.8);
  white-space:nowrap; pointer-events:none; z-index:5;
  background: rgba(0,0,0,.35);
  padding: 2px 10px; border-radius: 20px;
  backdrop-filter: blur(4px);
}
.shot-flash {
  position: absolute; left:50%; transform:translateX(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.8rem; letter-spacing:.12em;
  pointer-events:none; z-index:6;
  opacity:0; top:50%;
  text-shadow: 0 0 24px currentColor, 0 0 50px currentColor, 0 2px 8px rgba(0,0,0,.95);
  will-change: transform, opacity;
}
@keyframes shotFlash {
  0%   { opacity:0;   top:58%; transform:translateX(-50%) scale(.55); filter:brightness(2); }
  12%  { opacity:1;   top:41%; transform:translateX(-50%) scale(1.12); filter:brightness(1.3); }
  40%  { opacity:.92; top:37%; transform:translateX(-50%) scale(1);    filter:brightness(1); }
  100% { opacity:0;   top:27%; transform:translateX(-50%) scale(.92);  filter:brightness(.8); }
}
.result-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transform: scale(1.018);
  transition:
    opacity .34s ease,
    transform .44s cubic-bezier(.16,.84,.24,1);
  border-radius:11px;
  overflow: hidden;
}
.result-overlay::before {
  content:''; position:absolute; inset:0;
  backdrop-filter: blur(9px);
  z-index:0;
  opacity: 0;
  transform: scale(1.045);
  transition:
    opacity .34s ease,
    transform .58s cubic-bezier(.16,.84,.24,1);
}
.result-overlay.show { opacity:1; transform: scale(1); }
.result-overlay.show::before { opacity: 1; transform: scale(1); }
.result-overlay.win::before  { background: radial-gradient(ellipse 90% 65% at 50% 48%, rgba(240,172,10,.22) 0%, rgba(0,0,0,.78) 70%); }
.result-overlay.lose::before {
  background:
    radial-gradient(ellipse 78% 52% at 50% 46%, rgba(255,56,56,.24) 0%, rgba(105,8,8,.48) 42%, rgba(0,0,0,.86) 78%),
    linear-gradient(145deg, rgba(10,18,28,.92), rgba(4,0,0,.96));
}
.result-overlay.ace-screen::before,
.result-overlay.big-win-screen::before {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  backdrop-filter: none;
}
.result-overlay.ace-screen::before {
  background-image: url("../assets/match-point-ace-screen.webp?v=tiered-assets1");
}
.result-overlay.ace-screen.ace-clay-screen::before {
  background-image: url("../assets/match-point-ace-screen-clay.webp?v=tiered-assets1");
}
.result-overlay.big-win-screen::before {
  background-image: url("../assets/match-point-big-win-screen.webp?v=tiered-assets1");
}

.result-overlay.big-win-screen {
  overflow: visible;
}

.result-overlay.big-win-screen::before {
  inset: 50% auto auto 50%;
  width: min(98%, 790px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(.985);
  background-size: contain;
  border-radius: clamp(18px, 2.6vmin, 34px);
  filter:
    drop-shadow(0 16px 30px rgba(0,0,0,.42))
    drop-shadow(0 0 42px rgba(92,255,48,.18));
  -webkit-mask-image:
    radial-gradient(circle at 50% 50%, #000 56%, rgba(0,0,0,.94) 68%, rgba(0,0,0,.68) 81%, rgba(0,0,0,.24) 92%, transparent 100%);
  mask-image:
    radial-gradient(circle at 50% 50%, #000 56%, rgba(0,0,0,.94) 68%, rgba(0,0,0,.68) 81%, rgba(0,0,0,.24) 92%, transparent 100%);
}

.result-overlay.show.big-win-screen::before {
  transform: translate(-50%, -50%) scale(1);
}

.result-main {
  font-family:'Bebas Neue',sans-serif;
  font-size:5.4rem; line-height:1;
  letter-spacing: .08em;
  position:relative; z-index:1;
  transform: scale(.5); opacity:0;
  transition: none;
}
.result-overlay.show .result-main {
  animation: resultStinger .38s cubic-bezier(.15,.85,.25,1.25) forwards;
}
@keyframes resultStinger {
  0%   { transform:scale(.45); opacity:0; }
  55%  { transform:scale(1.08); opacity:1; }
  100% { transform:scale(1);    opacity:1; }
}
.result-sub {
  font-family:'DM Mono',monospace;
  font-size:.82rem; margin-top:6px;
  opacity:0; letter-spacing:.10em;
  position:relative; z-index:1;
}
.result-overlay.show .result-sub {
  animation: resultSubFade .28s .22s ease forwards;
}
@keyframes resultSubFade {
  0%   { opacity:0; transform:translateY(7px); }
  100% { opacity:.82; transform:translateY(0); }
}
.result-overlay.win  .result-main { color:var(--gold); text-shadow:0 0 28px rgba(240,192,64,1),0 0 70px rgba(240,192,64,.55),0 0 130px rgba(240,192,64,.2); }
.result-overlay.lose .result-main { color:var(--red);  text-shadow:0 0 28px rgba(224,56,56,1),0 0 70px rgba(224,56,56,.45),0 0 130px rgba(224,56,56,.18); }
.result-overlay.ace-screen .result-main,
.result-overlay.big-win-screen .result-main {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
.result-overlay.ace-screen.ace-clay-screen .result-main {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
.result-overlay.ace-screen .result-sub {
  position: absolute;
  left: 24%;
  right: 24%;
  top: 64.8%;
  height: 7.4%;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff4bd;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.1rem, 4.2vmin, 2.8rem);
  letter-spacing: .08em;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 2px 0 rgba(40,20,0,.9),
    0 0 18px rgba(255,204,72,.85),
    0 0 34px rgba(255,148,24,.45);
}
.result-overlay.ace-screen.ace-clay-screen .result-sub {
  top: 65.1%;
  left: 24%;
  right: 24%;
  height: 7.8%;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.result-overlay.big-win-screen .result-sub {
  position: absolute;
  left: 50%;
  top: 64.9%;
  width: min(52%, 405px);
  height: min(13.5%, 100px);
  margin-top: 0;
  box-sizing: border-box;
  padding-bottom: .08em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff4a8;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.8rem, 8.9vmin, 6.7rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: .025em;
  line-height: .86;
  text-align: center;
  background:
    linear-gradient(180deg, #ffffff 0%, #fff6a8 18%, #ffd53d 42%, #8df242 64%, #fff3a1 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: clamp(1px, .18vmin, 2px) rgba(5, 52, 0, .95);
  filter:
    drop-shadow(0 3px 0 rgba(0, 32, 0, .98))
    drop-shadow(0 0 12px rgba(145, 255, 54, .95))
    drop-shadow(0 0 30px rgba(255, 221, 72, .82))
    drop-shadow(0 0 56px rgba(35, 255, 38, .42));
  transform: translate(-50%, 12px) scale(.92);
}
.result-overlay.show.ace-screen .result-sub {
  animation: resultSubPlate .32s .08s cubic-bezier(.15,.85,.25,1.12) forwards;
}

.result-overlay.show.big-win-screen .result-sub {
  animation: bigWinResultSubPlate .38s cubic-bezier(.15,.85,.25,1.12) forwards;
}
@keyframes resultSubPlate {
  0%   { opacity:0; transform:translateY(12px) scale(.92); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes bigWinResultSubPlate {
  0%   { opacity:0; transform:translate(-50%, 12px) scale(.92); }
  100% { opacity:1; transform:translate(-50%, 0) scale(1); }
}
.result-overlay.loss-screen .result-main,
.result-overlay.fault-screen .result-main {
  color: #ffeded;
  font-size: clamp(4.25rem, 14vmin, 8rem);
  letter-spacing: .06em;
  text-shadow:
    0 0 18px rgba(255,70,70,.95),
    0 0 50px rgba(255,22,22,.55),
    0 6px 0 rgba(55,0,0,.8);
}
.result-overlay.fault-screen .result-main {
  color: #ffd8d8;
}
.result-overlay.lose .result-sub {
  color: rgba(255,236,220,.92);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.1rem, 3.2vmin, 2rem);
  letter-spacing: .12em;
  text-shadow: 0 0 18px rgba(255,80,60,.65);
}

/* ── SERVE button (standalone, below court) ── */
.play-btn {
  width:100%; padding:15px;
  background: linear-gradient(175deg, #ffee80 0%, #f5c838 22%, #d49010 72%, #eba820 100%);
  color: #080400;
  border: none; border-radius: 12px;
  font-family:'Bebas Neue',sans-serif;
  font-size: 2rem; letter-spacing: .25em;
  cursor: pointer; transition: transform .1s, box-shadow .1s;
  box-shadow:
    0 4px 0 #704000,
    0 8px 32px rgba(240,192,64,.52),
    inset 0 1px 0 rgba(255,255,255,.25);
  position:relative; overflow:hidden;
  text-shadow: 0 1px 0 rgba(255,210,50,.35);
}
.play-btn::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:48%;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 100%);
  border-radius: 12px 12px 60% 60%; pointer-events:none;
}
.play-btn:hover:not(:disabled) {
  transform:translateY(-3px);
  box-shadow: 0 7px 0 #704000, 0 14px 44px rgba(240,192,64,.62), inset 0 1px 0 rgba(255,255,255,.28);
}
.play-btn:active:not(:disabled) {
  transform:translateY(3px);
  box-shadow: 0 1px 0 #704000, 0 3px 14px rgba(240,192,64,.32), inset 0 1px 0 rgba(255,255,255,.1);
}
.play-btn:disabled {
  background: linear-gradient(180deg, #151e2c, #0d1420);
  color: #222e40;
  cursor:not-allowed;
  box-shadow: none;
  border: 1px solid rgba(255,255,255,.04);
}

/* ── Action zone (SERVE ↔ multiplier, same slot) ── */
.action-zone {
  position: relative;
  min-height: 63px;
  display: flex; align-items: stretch;
}
.action-zone .play-btn,
.action-zone .multiplier-display {
  width: 100%;
}

/* ── Multiplier ── */
.multiplier-display {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(0,0,0,.25) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-top-color: rgba(255,255,255,.13);
  border-radius: 12px;
  padding: 0 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 20px rgba(0,0,0,.45);
}
.mult-value {
  font-family:'Bebas Neue',sans-serif;
  font-size: 3.8rem; line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 28px rgba(240,192,64,.55), 0 0 55px rgba(240,192,64,.2);
  display:inline-block;
}
.mult-value.pulse { animation:bigPulse .2s ease; }
@keyframes bigPulse {
  0%  { transform:scale(1); }
  38% { transform:scale(1.18); filter:brightness(1.5); }
  100%{ transform:scale(1); }
}
.mult-label {
  font-family:'DM Mono',monospace;
  font-size:.55rem; color:var(--grey);
  letter-spacing:.16em; text-transform:uppercase;
  padding-bottom: 4px;
}

/* ── Shot track ── */
.shot-track {
  display:flex; gap:2px;
  align-items:center; justify-content:center;
  padding: 0 1px;
}
.shot-pip {
  flex:1; height:6px; border-radius:3px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
  transition: background .14s, border-color .14s, box-shadow .14s;
  max-width: 20px;
  position: relative;
}
.shot-pip.done {
  background: linear-gradient(90deg, #1d5c0e, #2e8c18);
  border-color: #3a9820;
  box-shadow: 0 0 5px rgba(46,140,24,.45);
}
.shot-pip.current {
  background: var(--gold);
  border-color: var(--gold3);
  box-shadow: 0 0 10px rgba(240,192,64,1), 0 0 20px rgba(240,192,64,.55);
  animation: pipActive .55s ease-in-out infinite alternate;
}
@keyframes pipActive {
  0%   { box-shadow: 0 0 8px rgba(240,192,64,.9); }
  100% { box-shadow: 0 0 16px rgba(240,192,64,1), 0 0 28px rgba(240,192,64,.65); }
}
.shot-pip.win-pip  {
  background: linear-gradient(90deg, var(--gold2), var(--gold3));
  border-color: var(--gold3);
  box-shadow: 0 0 14px rgba(240,192,64,1), 0 0 30px rgba(240,192,64,.5);
}
.shot-pip.lose-pip {
  background: linear-gradient(90deg, #a82020, #e84040);
  border-color: #ff5555;
  box-shadow: 0 0 12px rgba(224,56,56,1), 0 0 24px rgba(224,56,56,.45);
}

/* ── Shot info row ── */
.shot-info-row {
  display:flex; justify-content:space-between; align-items:center;
  padding: 0 1px;
}
.shot-info-row span {
  font-family:'DM Mono',monospace;
  font-size:.58rem; color:var(--grey); letter-spacing:.07em;
}
.shot-info-row strong { color:var(--white); }
.shot-info-center {
  font-family:'DM Mono',monospace;
  font-size:.55rem; color:#2a3a52;
  letter-spacing:.14em; text-transform:uppercase;
}

/* ── Bet panel ── */
.bet-panel {
  background: var(--glass);
  border: 1px solid var(--glass-b);
  border-radius: 12px;
  padding: 11px 12px;
  display:flex; flex-direction:column; gap:8px;
  backdrop-filter: blur(16px);
}
.balance-row { display:flex; justify-content:space-between; align-items:center; }
.balance-label {
  font-family:'DM Mono',monospace;
  font-size:.55rem; color:var(--grey);
  letter-spacing:.14em; text-transform:uppercase;
}
.balance-right { display:flex; align-items:center; gap:8px; }
.balance-value {
  font-family:'Bebas Neue',sans-serif;
  font-size:1.5rem; color:var(--white); letter-spacing:.05em;
}
.deposit-btn {
  background: rgba(240,192,64,.1);
  border: 1px solid rgba(240,192,64,.3);
  border-radius: 6px; color:var(--gold);
  font-family:'DM Mono',monospace;
  font-size:.6rem; font-weight:500;
  padding: 4px 9px; cursor:pointer;
  transition:all .14s; letter-spacing:.06em; white-space:nowrap;
}
.deposit-btn:hover { background:rgba(240,192,64,.2); border-color:var(--gold); }

.bet-row { display:flex; gap:8px; align-items:center; }
.bet-label {
  font-family:'DM Mono',monospace;
  font-size:.55rem; color:var(--grey);
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}
.bet-input {
  flex:1;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.09);
  border-radius:7px; padding:7px 12px;
  color:var(--white);
  font-family:'DM Mono',monospace; font-size:.95rem;
  text-align:right; outline:none;
  transition:border-color .18s,box-shadow .18s;
}
.bet-input:focus { border-color:var(--gold); box-shadow:0 0 0 2px rgba(240,192,64,.1); }
.bet-input:disabled { opacity:.4; }

.quick-bets { display:flex; gap:3px; }
.qb {
  flex:1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius:5px; color:var(--grey);
  font-family:'DM Mono',monospace;
  font-size:.62rem; padding:5px 0;
  cursor:pointer; transition:all .1s; letter-spacing:.02em;
}
.qb:hover:not(:disabled) { background:rgba(255,255,255,.09); color:var(--white); border-color:rgba(255,255,255,.16); }
.qb:disabled { opacity:.3; cursor:not-allowed; }
.qb.deposit-qb { background:rgba(240,192,64,.07); border-color:rgba(240,192,64,.22); color:var(--gold); }
.qb.deposit-qb:hover:not(:disabled) { background:rgba(240,192,64,.18); border-color:var(--gold); }

.debug-panel {
  background: rgba(5,10,18,.88);
  border: 1px solid rgba(110,170,255,.22);
  border-radius: 12px;
  padding: 9px 10px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.35);
}
.debug-panel summary {
  cursor: pointer;
  color: #8fb8ff;
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  list-style-position: inside;
}
.debug-grid {
  display: grid;
  grid-template-columns: 1fr 72px 1fr;
  gap: 7px;
  margin-top: 9px;
}
.debug-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.debug-grid label span {
  color: #4f6d9d;
  font-family: 'DM Mono', monospace;
  font-size: .52rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.debug-grid select,
.debug-grid input {
  width: 100%;
  min-height: 34px;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: var(--white);
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  padding: 6px 8px;
  outline: none;
}
.debug-grid select:focus,
.debug-grid input:focus {
  border-color: rgba(143,184,255,.58);
  box-shadow: 0 0 0 2px rgba(80,140,255,.14);
}
.debug-test-btn {
  grid-column: 1 / -1;
  min-height: 36px;
  border: 1px solid rgba(240,192,64,.45);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(240,192,64,.22), rgba(106,64,0,.42));
  color: var(--gold);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: .16em;
  cursor: pointer;
}
.debug-test-btn:hover { filter: brightness(1.12); }
.debug-readout {
  margin-top: 8px;
  min-height: 18px;
  color: #6f86ab;
  font-family: 'DM Mono', monospace;
  font-size: .55rem;
  line-height: 1.35;
}

@keyframes shake {
  0%,100% { transform:translateX(0); }
  20% { transform:translateX(-8px) rotate(-.4deg); }
  40% { transform:translateX(8px)  rotate(.4deg); }
  60% { transform:translateX(-5px); }
  80% { transform:translateX(5px); }
}
.shake { animation:shake .4s ease; }

/* ── Modals ── */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.85); backdrop-filter:blur(10px);
  z-index:100; display:flex;
  align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .22s; padding:16px;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-card {
  background: linear-gradient(160deg, #0e1828 0%, #080f1c 100%);
  border: 1px solid rgba(240,192,64,.18);
  border-radius: 14px; padding: 20px 18px 16px;
  max-width: 340px; width: 100%;
  box-shadow: 0 20px 80px rgba(0,0,0,.98), 0 0 30px rgba(240,192,64,.06);
}
.modal-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 12px; padding-bottom:9px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.modal-title { font-family:'Bebas Neue',sans-serif; font-size:1.4rem; letter-spacing:.12em; color:var(--gold); }
.modal-close { background:none; border:none; color:var(--grey); font-size:.95rem; cursor:pointer; padding:3px 7px; transition:color .14s; border-radius:4px; }
.modal-close:hover { color:var(--white); background:rgba(255,255,255,.06); }
.how-item {
  font-size:.8rem; color:rgba(220,232,248,.8); line-height:1.45;
  padding:6px 0; border-bottom:1px solid rgba(255,255,255,.04);
  display:flex; gap:9px; align-items:flex-start;
}
.how-item:last-of-type { border-bottom:none; }
.how-icon { font-size:.85rem; flex-shrink:0; margin-top:2px; }
.modal-note { font-family:'DM Mono',monospace; font-size:.54rem; color:var(--grey); text-align:center; margin-top:10px; letter-spacing:.07em; line-height:1.6; }
.deposit-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:4px; }
.dep-opt {
  background: rgba(240,192,64,.05); border: 1px solid rgba(240,192,64,.18);
  border-radius:9px; padding:14px 8px; text-align:center; cursor:pointer; transition:all .14s;
  display:flex; align-items:center; justify-content:center;
  min-height: 58px;
}
.dep-opt:hover { background:rgba(240,192,64,.13); border-color:var(--gold); }
.dep-opt-amt { font-family:'Bebas Neue',sans-serif; font-size:1.85rem; color:var(--gold); letter-spacing:.05em; line-height:1; }
/* ── Mode selector row ── */
.mode-selector-row {
  display: flex;
  justify-content: center;
  padding: 2px 0;
}
.mode-dropdown-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.mode-select-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(245,200,66,.18) 0%, rgba(245,200,66,.08) 100%);
  border: 1px solid rgba(245,200,66,.42);
  border-bottom-color: rgba(245,200,66,.2);
  color: var(--gold);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: .15em;
  padding: 9px 22px;
  border-radius: 26px;
  cursor: pointer;
  min-width: 175px;
  transition: all .18s;
  white-space: nowrap;
  box-shadow: 0 2px 14px rgba(245,200,66,.14), inset 0 1px 0 rgba(255,255,255,.09);
  text-shadow: 0 0 14px rgba(245,200,66,.55);
}
.mode-select-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(245,200,66,.28) 0%, rgba(245,200,66,.14) 100%);
  box-shadow: 0 3px 20px rgba(245,200,66,.22), inset 0 1px 0 rgba(255,255,255,.1);
}
.mode-select-btn:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
.mode-caret { font-size: .75rem; opacity: .65; transition: transform .2s; }
.mode-select-btn.open .mode-caret { transform: rotate(180deg); }
.mode-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: #0d1929;
  border: 1px solid rgba(245,200,66,.32);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.7);
  z-index: 300;
  min-width: 190px;
  display: none;
}
.mode-dropdown.open { display: block; }
.mode-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 18px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: .1em;
  cursor: pointer;
  transition: background .14s, color .14s;
  text-align: left;
}
.mode-opt:last-child { border-bottom: none; }
.mode-opt:hover { background: rgba(245,200,66,.12); color: var(--gold); }
.mode-opt.active { color: var(--gold); }
.mode-opt-check { font-size: .85rem; color: var(--gold); }

/* ── Mode tab buttons inside settings modal ── */
body.match-point-big-win-test .mode-opt-check {
  font-size: 0;
}

body.match-point-big-win-test .mode-opt.active .mode-opt-check::before {
  content: "\2713";
  font-size: .85rem;
}

body.match-point-big-win-test .mode-caret {
  font-size: 0;
}

body.match-point-big-win-test .mode-caret::before {
  content: "\25BE";
  font-size: .75rem;
}

.mode-tab {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.45);
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  padding: 5px 2px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
  letter-spacing: .04em;
}
.mode-tab.active {
  background: rgba(245,200,66,.18);
  border-color: rgba(245,200,66,.4);
  color: var(--gold);
  font-weight: 700;
}

.dep-note { font-family:'DM Mono',monospace; font-size:.54rem; color:var(--grey); text-align:center; margin-top:10px; letter-spacing:.06em; }

/* ── Demo Banner ── */
#demoBanner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(6, 4, 1, 0.92);
  border-bottom: 1px solid rgba(240,192,64,0.25);
  backdrop-filter: blur(6px);
  gap: 10px;
}
#demoBackBtn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: #ccc;
  text-decoration: none;
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
  flex-shrink: 0;
}
#demoBackBtn:hover { background: rgba(0,0,0,0.8); color: #fff; }
#demoBadge {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #f0c040;
  background: rgba(240,192,64,0.1);
  border: 1px solid rgba(240,192,64,0.35);
  border-radius: 4px;
  padding: 3px 10px;
}
#demoNote {
  font-size: 11px;
  color: #555;
  letter-spacing: 0.3px;
  flex: 1;
  text-align: right;
}
body.has-demo-banner { padding-top: 37px; }

/* Square Match Point stadium layout */
html,
body {
  width: 100%;
  height: 100%;
}

:root {
  --match-viewport-h: 100svh;
  --match-square-size: min(100vw, var(--match-viewport-h));
}

@supports (height: 100dvh) {
  :root {
    --match-viewport-h: 100dvh;
  }
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

body::before {
  display: none;
}

.match-loader {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 58% at 50% 34%, rgba(28, 56, 78, .84), transparent 66%),
    linear-gradient(180deg, #020608 0%, #071015 46%, #020405 100%);
  color: var(--white);
}

body.match-point-loading .match-loader {
  display: flex;
}

body.match-point-loading .wrapper,
body.match-point-loading #demoBanner {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.match-loader-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 13vw, 5.5rem);
  line-height: .9;
  letter-spacing: .08em;
  color: #ffe060;
  text-shadow: 0 2px 0 #7d4810, 0 0 24px rgba(255, 210, 80, .34);
}

.match-loader-copy {
  font-family: 'DM Mono', monospace;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(220,232,248,.78);
}

.match-loader-bar {
  width: min(230px, 70vw);
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}

.match-loader-bar span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4fe3ff, #ffe060);
  animation: matchLoaderSweep 1s ease-in-out infinite;
}

@keyframes matchLoaderSweep {
  0% { transform: translateX(-115%); }
  100% { transform: translateX(265%); }
}

body.has-demo-banner {
  padding-top: 0;
}

#demoBanner {
  display: none;
}

.wrapper {
  position: relative;
  width: var(--match-square-size);
  max-width: none;
  height: var(--match-square-size);
  min-height: 0;
  padding: 0;
  display: block;
  overflow: visible;
  background: #000;
}

.header,
.debug-panel,
.shot-track,
.shot-info-row,
.quick-bets {
  display: none !important;
}

.court-wrap {
  position: absolute;
  inset: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  background: url("../assets/match-point-stadium.webp?v=tiered-assets1") 0 0 / 100% 100% no-repeat;
}

.court-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -3.2%;
  width: 34%;
  aspect-ratio: 1061 / 306;
  transform: translateX(-50%);
  z-index: 8;
  pointer-events: none;
  background: url("../assets/match-point-title-sign.webp?v=tiered-assets1") center / contain no-repeat;
  filter:
    drop-shadow(0 3px 4px rgba(0,0,0,.56))
    drop-shadow(0 0 10px rgba(255,188,38,.18));
}

.court-wrap::after {
  display: none;
}

#courtCanvas {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.match-top-actions {
  position: absolute;
  top: clamp(7px, 1.35vmin, 13px);
  right: clamp(4px, .85vmin, 9px);
  z-index: 46;
  display: flex;
  gap: clamp(5px, .85vmin, 8px);
}

.match-back-btn {
  position: absolute;
  top: clamp(7px, 1.35vmin, 13px);
  left: clamp(7px, 1.35vmin, 13px);
  z-index: 46;
  width: clamp(28px, 3.7vmin, 36px);
  height: clamp(28px, 3.7vmin, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,220,112,.48);
  border-radius: 9px;
  background:
    radial-gradient(circle at 36% 22%, rgba(255,255,255,.18), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, rgba(22,32,43,.86), rgba(5,10,15,.9));
  color: #ffe39b;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(.95rem, 2vmin, 1.18rem);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow:
    0 6px 16px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.16);
  text-shadow: 0 0 10px rgba(255,204,84,.52);
}

.match-settings-btn,
.match-sound-btn {
  position: relative;
  width: clamp(17px, 2.25vmin, 22px);
  height: clamp(17px, 2.25vmin, 22px);
  display: block;
  border: 0;
  border-radius: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: transparent;
  cursor: pointer;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
}

.match-settings-btn {
  background-image: url("../assets/match-point-settings-icon-clean.webp?v=tiered-assets1");
}

.match-sound-btn {
  background-image: url("../assets/match-point-sound-icon-clean.webp?v=tiered-assets1");
}

.match-sound-btn::after {
  content: "";
  position: absolute;
  left: 14%;
  top: 48%;
  width: 72%;
  height: max(3px, .38vmin);
  border-radius: 999px;
  background: #e31313;
  box-shadow:
    0 0 0 1px rgba(80,0,0,.78),
    0 0 7px rgba(255,0,0,.88);
  opacity: 0;
  transform: rotate(-37deg);
  transform-origin: center;
  pointer-events: none;
}

.match-sound-btn.is-muted::after {
  opacity: 1;
}

.match-settings-btn:hover,
.match-sound-btn:hover {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)) brightness(1.08);
}

.match-settings-btn:disabled {
  cursor: not-allowed;
  opacity: .48;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)) grayscale(.45);
}

.match-back-btn:hover {
  border-color: rgba(255,225,124,.78);
  filter: brightness(1.08);
}

.match-settings-btn:focus-visible,
.match-sound-btn:focus-visible {
  outline: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(255,225,124,.62)) brightness(1.08);
}

.settings-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: block;
  padding: 0;
  background: rgba(1,5,8,0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overscroll-behavior: contain;
  transition: opacity .2s ease, visibility 0s linear .2s, background .2s ease;
}

.settings-menu-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background: rgba(1,5,8,.98);
  transition: opacity .2s ease, background .2s ease;
}

.settings-menu-card {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 16% -8%, rgba(255,204,72,.16), rgba(255,204,72,0) 34%),
    radial-gradient(circle at 100% 24%, rgba(37,146,196,.12), rgba(37,146,196,0) 35%),
    linear-gradient(145deg, #111c25 0%, #071016 48%, #02070a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,230,152,.18),
    inset 0 0 0 1px rgba(255,205,83,.14);
  transform: scale(.985);
  transition: transform .24s cubic-bezier(.2,.8,.2,1);
}

.settings-menu-overlay.open .settings-menu-card {
  transform: scale(1);
}

.settings-menu-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: clamp(72px, 9vh, 92px);
  margin: 0;
  padding: max(16px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 14px max(22px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(255,220,126,.14);
  background: linear-gradient(180deg, rgba(19,31,41,.98), rgba(8,16,22,.94));
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
}

.settings-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.settings-brand-mark {
  width: clamp(42px, 5.4vmin, 54px);
  height: clamp(42px, 5.4vmin, 54px);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,218,104,.72);
  border-radius: 13px;
  background:
    radial-gradient(circle at 34% 20%, rgba(255,255,255,.32), rgba(255,255,255,0) 36%),
    linear-gradient(145deg, #b77b16, #4b2b07);
  color: #fff2bd;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.28rem, 2.4vmin, 1.8rem);
  letter-spacing: .08em;
  box-shadow: 0 8px 22px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.28);
}

.settings-kicker {
  color: rgba(164,188,207,.76);
  font-family: "DM Mono", monospace;
  font-size: clamp(.58rem, 1.05vmin, .72rem);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.settings-title {
  margin-top: 3px;
  color: #fff5d1;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.8rem, 4vmin, 3rem);
  line-height: .92;
  letter-spacing: .055em;
  text-shadow: 0 0 20px rgba(255,201,70,.28);
}

.settings-close-btn {
  flex: 0 0 auto;
  width: clamp(42px, 5.4vmin, 54px);
  height: clamp(42px, 5.4vmin, 54px);
  border: 1px solid rgba(255,226,140,.34);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(42,57,69,.9), rgba(10,19,26,.96));
  color: #fff4d1;
  font: 400 clamp(1.65rem, 3.2vmin, 2.15rem)/1 "DM Sans", sans-serif;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.13);
  transition: border-color .14s ease, filter .14s ease, transform .14s ease;
}

.settings-close-btn:hover,
.settings-close-btn:focus-visible {
  border-color: rgba(255,220,116,.74);
  filter: brightness(1.12);
  outline: none;
}

.settings-close-btn:active { transform: scale(.96); }

.settings-menu-nav {
  position: relative;
  z-index: 1;
  min-height: 42px;
  padding: 0 max(22px, env(safe-area-inset-right)) 0 max(22px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: clamp(22px, 4vw, 52px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(3,9,13,.72);
}

.settings-menu-nav-item {
  position: relative;
  height: 42px;
  display: flex;
  align-items: center;
  color: rgba(179,196,211,.62);
  font: 700 clamp(.67rem, 1.2vmin, .82rem)/1 "DM Sans", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.settings-menu-nav-item.active { color: #ffe18b; }

.settings-menu-nav-item.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: #f5c842;
  box-shadow: 0 0 10px rgba(245,200,66,.74);
}

.settings-menu-nav-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(245,200,66,.18), rgba(245,200,66,0));
}

.settings-content {
  width: min(1540px, 100%);
  min-height: 0;
  margin: 0 auto;
  padding: clamp(16px, 2.3vw, 34px);
  display: grid;
  grid-template-columns: minmax(270px, .72fr) minmax(520px, 1.55fr);
  gap: clamp(16px, 2.2vw, 30px);
  overflow: hidden;
}

.settings-sidebar {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.7vh, 18px);
  overflow-y: auto;
  padding-right: 3px;
}

.settings-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.settings-block {
  display: grid;
  gap: 11px;
  padding: clamp(14px, 1.8vw, 20px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(32,48,61,.72), rgba(9,18,25,.82));
  box-shadow: 0 13px 30px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.055);
}

.settings-section-heading {
  display: grid;
  gap: 3px;
}

.settings-section-title {
  margin: 0;
  color: #ffe08a;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.2rem, 2.25vmin, 1.72rem);
  line-height: 1;
  letter-spacing: .085em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(255,200,64,.28);
}

.settings-section-copy {
  color: rgba(180,199,216,.66);
  font-family: "DM Sans", sans-serif;
  font-size: clamp(.68rem, 1.15vmin, .78rem);
  line-height: 1.35;
}

.settings-rules {
  display: grid;
  gap: 7px;
  margin: 0;
}

.settings-rule {
  min-height: 44px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
}

.settings-rule > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245,200,66,.32);
  border-radius: 8px;
  background: rgba(245,200,66,.07);
  color: #f6d46e;
  font: 500 .61rem/1 "DM Mono", monospace;
}

.settings-rule p {
  margin: 0;
  color: rgba(226,237,248,.83);
  font: 500 clamp(.67rem, 1.1vmin, .76rem)/1.35 "DM Sans", sans-serif;
}

.settings-rule strong { color: #fff0b4; }

.settings-deposit-btn,
.settings-sound-toggle {
  min-width: 0;
  min-height: 72px;
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(255,226,132,.24);
  border-radius: 13px;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 10px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.11);
  transition: border-color .14s ease, filter .14s ease, transform .14s ease;
}

.settings-deposit-btn {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.24), rgba(255,255,255,0) 40%),
    linear-gradient(145deg, #9b6915, #4f3008);
}

.settings-sound-toggle {
  background:
    radial-gradient(circle at 18% 0%, rgba(87,201,255,.14), rgba(87,201,255,0) 42%),
    linear-gradient(145deg, #1d3442, #0a171f);
}

.settings-sound-toggle.is-muted {
  border-color: rgba(255,109,109,.32);
  background: linear-gradient(145deg, #342127, #160d11);
}

.settings-deposit-btn:hover,
.settings-sound-toggle:hover,
.settings-deposit-btn:focus-visible,
.settings-sound-toggle:focus-visible {
  border-color: rgba(255,225,126,.66);
  filter: brightness(1.1);
  outline: none;
}

.settings-deposit-btn:active,
.settings-sound-toggle:active { transform: translateY(1px); }

.settings-action-label {
  color: rgba(224,234,244,.62);
  font: 700 clamp(.56rem, 1vmin, .68rem)/1 "DM Sans", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.settings-action-value {
  max-width: 100%;
  overflow: hidden;
  color: #fff1bc;
  font: 400 clamp(1.05rem, 2vmin, 1.45rem)/1 "Bebas Neue", sans-serif;
  letter-spacing: .055em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.court-surface-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.court-surface-btn {
  min-height: 58px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: rgba(0,0,0,.24);
  color: rgba(235,243,255,.78);
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1rem, 1.75vmin, 1.25rem);
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, filter .14s ease;
}

.court-surface-btn small {
  color: rgba(177,197,214,.58);
  font: 600 clamp(.5rem, .9vmin, .62rem)/1 "DM Sans", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.court-surface-btn:hover {
  border-color: rgba(255,217,108,.55);
  color: #fff4d8;
}

.court-surface-btn.active {
  border-color: rgba(255,217,108,.82);
  background:
    radial-gradient(circle at 34% 12%, rgba(255,255,255,.24), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(255,217,108,.24), rgba(120,82,26,.46));
  color: #ffe18c;
  text-shadow: 0 0 12px rgba(255,201,70,.34);
}

.court-surface-btn.active small { color: rgba(255,239,185,.68); }

.settings-payout-panel {
  min-width: 0;
  min-height: 0;
  padding: clamp(15px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.5vh, 15px);
  border: 1px solid rgba(255,218,108,.17);
  border-radius: 17px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,202,68,.08), rgba(255,202,68,0) 32%),
    linear-gradient(145deg, rgba(24,38,49,.84), rgba(5,13,18,.92));
  box-shadow: 0 18px 42px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.055);
}

.settings-payout-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.settings-payout-legend {
  flex: 0 0 auto;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(80,214,255,.14);
  border-radius: 999px;
  background: rgba(31,101,126,.1);
  color: rgba(183,211,224,.68);
  font: 600 clamp(.54rem, .9vmin, .66rem)/1 "DM Sans", sans-serif;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.settings-payout-legend span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #55d8ff;
  box-shadow: 0 0 8px rgba(85,216,255,.9);
}

.settings-risk-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.settings-risk-card {
  min-width: 0;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: baseline;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(0,0,0,.22);
}

.settings-risk-card::before,
.risk-dot {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.settings-risk-card.low::before,
.risk-dot.low { background: #55d879; box-shadow: 0 0 8px rgba(85,216,121,.58); }
.settings-risk-card.medium::before,
.risk-dot.medium { background: #52c9ff; box-shadow: 0 0 8px rgba(82,201,255,.58); }
.settings-risk-card.high::before,
.risk-dot.high { background: #ffbf42; box-shadow: 0 0 8px rgba(255,191,66,.65); }

.settings-risk-card strong {
  color: #f4f8fb;
  font: 400 clamp(.92rem, 1.6vmin, 1.14rem)/1 "Bebas Neue", sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.settings-risk-card span {
  min-width: 0;
  color: rgba(177,198,214,.7);
  font: 500 clamp(.56rem, .9vmin, .65rem)/1 "DM Mono", monospace;
  text-align: center;
}

.settings-risk-card small {
  color: #f5d574;
  font: 600 clamp(.55rem, .9vmin, .65rem)/1 "DM Sans", sans-serif;
  white-space: nowrap;
}

.settings-payout-table-wrap {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  scrollbar-color: rgba(245,200,66,.46) rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 11px;
  background: rgba(0,0,0,.31);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -28px 46px rgba(0,0,0,.16);
}

.settings-payout-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "DM Mono", monospace;
  font-size: clamp(.62rem, 1.08vmin, .76rem);
  color: rgba(220,233,255,.88);
}

.settings-payout-table th,
.settings-payout-table td {
  height: clamp(34px, 4.6vh, 43px);
  padding: 7px clamp(8px, 1.2vw, 14px);
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.settings-payout-table th:first-child,
.settings-payout-table td:first-child {
  text-align: left;
  color: rgba(178,200,218,.92);
}

.settings-payout-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: #ffe18c;
  font: 700 clamp(.56rem, .95vmin, .68rem)/1 "DM Sans", sans-serif;
  letter-spacing: .065em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #202f3a, #111d25);
  box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.2);
}

.settings-payout-table tr:nth-child(even) td {
  background: rgba(255,255,255,.025);
}

.settings-rally-label {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.settings-rally-label strong {
  color: #f5f8fb;
  font-size: 1.05em;
}

.settings-rally-label small {
  color: rgba(144,168,188,.68);
  font: 600 .78em/1 "DM Sans", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.settings-payout-max-cell {
  color: #ffd96c;
  font-weight: 700;
  background: rgba(255,217,108,.07);
}

.settings-payout-max-cell::after {
  content: " MAX";
  margin-left: 5px;
  color: rgba(255,218,108,.72);
  font: 700 .68em/1 "DM Sans", sans-serif;
  letter-spacing: .06em;
}

.settings-payout-missing { color: rgba(126,148,165,.5); }

.settings-payout-footnote {
  color: rgba(157,179,197,.57);
  font: 500 clamp(.56rem, .92vmin, .67rem)/1.35 "DM Sans", sans-serif;
  letter-spacing: .025em;
}

@media (max-width: 820px) {
  .settings-menu-header {
    min-height: 66px;
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 9px max(12px, env(safe-area-inset-left));
  }

  .settings-brand { gap: 9px; }
  .settings-brand-mark { width: 42px; height: 42px; border-radius: 11px; }
  .settings-title { font-size: clamp(1.55rem, 7vw, 2rem); }
  .settings-close-btn { width: 42px; height: 42px; border-radius: 11px; }

  .settings-menu-nav {
    min-height: 38px;
    padding-left: max(13px, env(safe-area-inset-left));
    padding-right: max(13px, env(safe-area-inset-right));
    gap: 22px;
  }

  .settings-menu-nav-item { height: 38px; font-size: .62rem; }

  .settings-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px max(11px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(11px, env(safe-area-inset-left));
    overflow-y: auto;
  }

  .settings-sidebar { display: contents; }
  .settings-quick-actions { order: 1; }
  .settings-surface-block { order: 2; }
  .settings-payout-panel { order: 3; }
  .settings-how-block { order: 4; }

  .settings-deposit-btn,
  .settings-sound-toggle { min-height: 62px; padding: 10px 11px; }

  .settings-block { padding: 13px; border-radius: 13px; }
  .settings-surface-block { gap: 9px; }
  .court-surface-btn { min-height: 52px; }

  .settings-payout-panel {
    min-height: min(550px, 69vh);
    padding: 13px;
    border-radius: 14px;
  }

  .settings-payout-header { gap: 9px; }
  .settings-payout-legend { display: none; }
  .settings-risk-card { padding: 8px; grid-template-columns: auto 1fr; gap: 6px; }
  .settings-risk-card span { text-align: right; }
  .settings-risk-card small { grid-column: 1 / -1; padding-left: 13px; }
  .settings-payout-table-wrap { min-height: 360px; }
  .settings-payout-table { font-size: clamp(.58rem, 2.55vw, .72rem); }
  .settings-payout-table th,
  .settings-payout-table td { height: 38px; padding: 6px clamp(6px, 2.2vw, 10px); }
  .settings-payout-max-cell::after { display: none; }
}

@media (max-width: 370px) {
  .settings-menu-nav-line { display: none; }
  .settings-risk-card { display: flex; flex-wrap: wrap; }
  .settings-risk-card span { margin-left: auto; }
  .settings-risk-card small { width: 100%; padding-left: 13px; }
}

.shot-label-overlay,
.shot-flash,
.result-overlay {
  z-index: 10;
}

.scoreboard-multiplier {
  position: absolute;
  left: 34.8%;
  top: 4.8%;
  width: 31.5%;
  height: 14.2%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.scoreboard-multiplier.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.scoreboard-value {
  max-width: 100%;
  color: #fff6c8;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2.35rem, 6.9vw, 7.55rem);
  line-height: .78;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow:
    0 0 3px #7a3a00,
    0 0 11px rgba(255,184,18,.92),
    0 0 24px rgba(255,184,18,.66),
    0 4px 0 rgba(104,48,0,.8);
}

@media (orientation: landscape) and (min-width: 900px) and (hover: hover) and (pointer: fine) {
  body {
    background:
      url("../assets/match-point-desktop-background-initial.webp?v=tiered-assets1") center top / calc(var(--match-square-size) * 1.5333333333) var(--match-square-size) no-repeat fixed,
      #000;
  }

  body.match-point-full-background {
    background-image: url("../assets/match-point-desktop-background-final.webp?v=tiered-assets1");
  }

  .match-back-btn {
    position: fixed;
    top: clamp(12px, 1.6vmin, 18px);
    left: clamp(12px, 1.6vmin, 18px);
    width: clamp(36px, 4.2vmin, 44px);
    height: clamp(36px, 4.2vmin, 44px);
    border-color: rgba(255,226,126,.82);
    background:
      radial-gradient(circle at 36% 22%, rgba(255,255,255,.16), rgba(255,255,255,0) 45%),
      linear-gradient(180deg, #263441, #071017);
    box-shadow:
      0 8px 18px rgba(0,0,0,.58),
      inset 0 1px 0 rgba(255,255,255,.18);
  }

  .match-settings-btn,
  .match-sound-btn {
    width: clamp(34px, 4vmin, 40px);
    height: clamp(34px, 4vmin, 40px);
  }

  .match-top-actions {
    top: clamp(10px, 1.45vmin, 16px);
    right: clamp(8px, 1.25vmin, 14px);
    gap: clamp(8px, 1.15vmin, 12px);
  }

  .scoreboard-value {
    font-size: clamp(2.2rem, 6.35vw, 6.95rem);
  }
}

.bet-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: 36.5%;
  min-width: 430px;
  max-width: 490px;
  height: clamp(100px, 13.4vmin, 132px);
  min-height: 0;
  padding: clamp(8px, 1.05vmin, 13px) clamp(10px, 1.15vmin, 16px);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 31%;
  align-items: center;
  gap: clamp(7px, 1vmin, 13px);
  background:
    radial-gradient(circle at 22% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(31,45,58,.94) 0%, rgba(16,28,39,.94) 48%, rgba(9,18,27,.97) 100%);
  border: 2px solid rgba(236,174,68,.78);
  border-right-width: 0;
  border-bottom-width: 0;
  border-radius: 15px 0 0 0;
  box-shadow:
    0 -5px 24px rgba(0,0,0,.45),
    -8px -8px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 0 1px rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.bet-panel::before {
  content: "";
  position: absolute;
  inset: 1px 0 auto 1px;
  height: 44%;
  border-radius: 13px 0 40px 0;
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,0));
  pointer-events: none;
}

.wrapper.point-live .bet-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px) scale(.965);
}

.controls-left {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(3px, .6vh, 6px);
  align-content: center;
}

.balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 18px;
  gap: 10px;
}

.balance-label {
  color: rgba(255,255,255,.78);
  font-family: "DM Sans", sans-serif;
  font-size: clamp(.62rem, .78vw, .78rem);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.balance-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.deposit-btn {
  display: none;
}

.balance-value {
  color: #f6f8ff;
  font-family: "DM Sans", "Arial", sans-serif;
  font-size: clamp(.82rem, 1.14vw, 1.05rem);
  font-weight: 800;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero" 0;
  text-shadow:
    0 1px 0 rgba(0,0,0,.58),
    0 0 12px rgba(255,255,255,.3);
}

.panel-field {
  display: grid;
  grid-template-columns: minmax(100px, 33%) minmax(124px, 1fr);
  align-items: center;
  gap: clamp(5px, .65vmin, 8px);
}

.bet-label {
  color: rgba(255,255,255,.9);
  font-family: "DM Sans", sans-serif;
  font-size: clamp(.66rem, .92vw, .92rem);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0,0,0,.55);
}

.bet-stepper {
  display: grid;
  grid-template-columns: 29px minmax(90px, 1fr) 35px;
  height: clamp(28px, 3.8vmin, 39px);
  overflow: hidden;
  border: 1px solid rgba(233,188,82,.38);
  border-radius: 6px;
  background: #05080d;
  box-shadow:
    0 5px 10px rgba(0,0,0,.38),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 16px rgba(0,0,0,.68);
}

.bet-step {
  border: 0;
  border-right: 1px solid rgba(0,0,0,.72);
  background:
    linear-gradient(180deg, #f8dc80 0%, #d7a939 45%, #956d1f 100%);
  color: #07111a;
  font-family: "DM Sans", "Arial", sans-serif;
  font-size: clamp(1.1rem, 2.1vw, 1.8rem);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255,255,255,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52);
}

.bet-step:last-child {
  border-right: 0;
  border-left: 1px solid rgba(0,0,0,.72);
}

.bet-step:hover:not(:disabled) {
  filter: brightness(1.09);
}

.bet-step:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(.95);
}

.bet-step:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.bet-input {
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 0 clamp(6px, 1vw, 12px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #29313d 0%, #0c1118 100%);
  color: #e9edf7;
  font-family: "DM Sans", "Arial", sans-serif;
  font-size: clamp(.94rem, 1.3vw, 1.28rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero" 0;
  text-align: center;
  outline: none;
  box-shadow: inset 0 0 15px rgba(0,0,0,.7);
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
}

.bet-input:focus {
  border-color: transparent;
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.82),
    inset 0 0 0 2px rgba(255,198,34,.9),
    0 0 18px rgba(255,198,34,.38);
}

.bet-input:disabled {
  opacity: .55;
}

.bet-input::-webkit-outer-spin-button,
.bet-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mode-selector-row {
  display: block;
  padding: 0;
}

.mode-dropdown-wrap {
  display: block;
  width: 100%;
}

.mode-select-btn {
  width: 100%;
  min-width: 0;
  height: clamp(32px, 4.45vmin, 45px);
  padding: 0 clamp(9px, 1vmin, 14px);
  justify-content: center;
  gap: 14px;
  border: 1px solid rgba(255,235,150,.8);
  border-radius: 7px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.55), rgba(255,255,255,0) 30%),
    linear-gradient(180deg, #ffe89a 0%, #dcb34e 52%, #b58529 100%);
  color: #1b2734;
  font-size: clamp(.92rem, 1.5vmin, 1.28rem);
  font-weight: 900;
  letter-spacing: .03em;
  text-shadow: 0 1px 0 rgba(255,255,255,.32);
  box-shadow:
    0 5px 11px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.68);
}

#modeBtnIcon {
  display: none;
}

.mode-caret {
  margin-left: auto;
  color: #1a2532;
  opacity: .92;
  font-size: clamp(.75rem, 1vw, 1rem);
}

.mode-dropdown {
  top: auto;
  bottom: calc(100% + 2px);
  left: 0;
  right: 0;
  transform: none;
  min-width: 0;
  width: 100%;
  border: 2px solid #f0b51a;
  border-radius: 14px 14px 0 0;
  background: rgba(0,6,9,.96);
  box-shadow: 0 16px 32px rgba(0,0,0,.5);
}

.mode-opt {
  padding: 13px 20px;
  color: rgba(255,255,255,.82);
  font-size: 1.34rem;
  letter-spacing: .04em;
}

.mode-opt:hover,
.mode-opt.active {
  color: #ffd12b;
  background: rgba(255,199,35,.1);
}

.action-zone {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  align-items: stretch;
}

.play-btn {
  height: auto;
  min-height: 0;
  padding: 0 clamp(10px, 1.25vw, 17px);
  border: 1px solid rgba(120,255,110,.42);
  border-radius: 9px;
  background:
    radial-gradient(circle at 45% 12%, rgba(255,255,255,.23), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, #42d44b 0%, #1fa72d 48%, #087915 100%);
  color: #fff;
  font-size: clamp(1.68rem, 2.48vmin, 2.55rem);
  letter-spacing: .04em;
  text-shadow:
    0 3px 0 rgba(0,0,0,.42),
    0 0 18px rgba(255,255,255,.36);
  box-shadow:
    0 6px 12px rgba(0,0,0,.34),
    0 0 18px rgba(27,255,42,.35),
    inset 0 2px 0 rgba(255,255,255,.4),
    inset 0 -4px 0 rgba(0,40,0,.34);
}

.play-btn::before {
  border-radius: 14px 14px 58% 58%;
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0));
}

.play-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 8px 0 #002a00,
    0 18px 42px rgba(0,0,0,.36),
    0 0 26px rgba(27,255,42,.46),
    inset 0 2px 0 rgba(255,255,255,.46);
}

.play-btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow:
    0 2px 0 #002a00,
    0 8px 20px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.24);
}

.play-btn:disabled {
  border-color: #111a22;
  background: linear-gradient(180deg, #1a252e, #071016);
  color: rgba(255,255,255,.34);
  text-shadow: none;
}

.multiplier-display {
  min-height: 0;
  border: 1px solid rgba(233,188,82,.38);
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.09), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #101820 0%, #020609 100%);
  box-shadow:
    0 6px 0 rgba(73,37,0,.92),
    0 14px 34px rgba(0,0,0,.32),
    inset 0 0 28px rgba(0,0,0,.78);
}

.mult-value {
  font-size: clamp(2.2rem, 3.8vmin, 3.2rem);
}

.result-overlay {
  position: absolute;
  z-index: 80;
}

@media (max-width: 820px) {
  :root {
    --mobile-panel-h: clamp(84px, 22.7vw, 108px);
    --mobile-panel-lift: clamp(30px, 8vw, 40px);
    --mobile-panel-bleed: clamp(16px, 5vw, 24px);
    --mobile-stage-h: calc(var(--match-viewport-h) - var(--mobile-panel-h) - var(--mobile-panel-lift));
  }

  @supports (height: 100dvh) {
    :root {
      --mobile-panel-h: clamp(84px, 22.7vw, 108px);
    }
  }

  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .wrapper {
    width: 100vw;
    height: var(--match-viewport-h);
    transform: none;
    overflow: hidden;
  }

  .court-wrap {
    inset: 0 0 calc(var(--mobile-panel-h) + var(--mobile-panel-lift)) 0;
    height: auto;
    background-position: center top;
    background-size: cover;
  }

  .result-overlay.big-win-screen::before {
    width: min(99vw, calc(var(--mobile-stage-h) * .94));
    max-height: 96%;
    border-radius: clamp(14px, 5vw, 24px);
  }

  .result-overlay.big-win-screen .result-sub {
    top: 59.1%;
    width: min(62vw, calc(var(--mobile-stage-h) * .56));
    height: min(13.8vw, calc(var(--mobile-stage-h) * .125));
    font-size: clamp(2.5rem, 13.8vw, 4.6rem);
    letter-spacing: .018em;
    -webkit-text-stroke: clamp(1px, .42vw, 1.8px) rgba(5, 52, 0, .95);
    filter:
      drop-shadow(0 2px 0 rgba(0, 32, 0, .98))
      drop-shadow(0 0 9px rgba(145, 255, 54, .9))
      drop-shadow(0 0 22px rgba(255, 221, 72, .74));
  }

  .court-wrap::before {
    top: -2.8%;
    width: min(67vw, 365px);
  }

  #courtCanvas {
    left: 50%;
    right: auto;
    width: auto;
    min-width: 100%;
    height: 100%;
    transform: translateX(-50%);
  }

  .match-top-actions {
    top: max(12px, calc(env(safe-area-inset-top) + 7px));
    right: max(8px, calc(env(safe-area-inset-right) + 7px));
    gap: 8px;
  }

  .match-back-btn {
    top: max(12px, calc(env(safe-area-inset-top) + 7px));
    left: max(14px, calc(env(safe-area-inset-left) + 12px));
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .match-settings-btn,
  .match-sound-btn {
    width: 30px;
    height: 30px;
  }

  .settings-menu-overlay {
    padding: 0;
  }

  .settings-menu-card {
    width: 100%;
    height: 100%;
    max-height: none;
    padding: 0;
  }

  .scoreboard-multiplier {
    left: 21.5%;
    top: 6.15%;
    width: 56.8%;
    height: 15.6%;
  }

  .scoreboard-value {
    font-size: clamp(3.7rem, 18.2vw, 6.55rem);
    line-height: .7;
    transform: scaleX(1.08);
  }

  .settings-title {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }

  .bet-panel {
    --mobile-panel-bg: url("../assets/match-point-mobile-panel-high.webp?v=tiered-assets1");
    left: 50%;
    right: auto;
    top: auto;
    bottom: var(--mobile-panel-lift);
    width: calc(100% + var(--mobile-panel-bleed));
    min-width: 0;
    max-width: none;
    height: calc(var(--mobile-panel-h) + env(safe-area-inset-bottom));
    min-height: 0;
    padding: 0 max(0px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(0px, env(safe-area-inset-left));
    display: block;
    border: 0;
    border-radius: 0;
    background-color: #000;
    background-image: url("../assets/match-point-mobile-panel-high.webp?v=tiered-assets1");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% var(--mobile-panel-h);
    box-shadow: 0 -8px 24px rgba(0,0,0,.58);
    backdrop-filter: none;
    transform: translateX(-50%);
  }

  .bet-panel::before,
  .bet-panel::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    height: auto;
    border-radius: 0;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% var(--mobile-panel-h);
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    z-index: 1;
  }

  .bet-panel::before {
    background-image: url("../assets/match-point-mobile-panel-low.webp?v=tiered-assets1");
  }

  .bet-panel::after {
    background-image: url("../assets/match-point-mobile-panel-medium.webp?v=tiered-assets1");
  }

  .bet-panel[data-risk-mode="amateur"]::before,
  .bet-panel[data-risk-mode="medium"]::after {
    opacity: 1;
  }

  .wrapper.point-live .bet-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%);
  }

  .wrapper.point-live .bet-panel button,
  .wrapper.point-live .bet-panel input {
    pointer-events: none;
  }

  .wrapper.point-live .bet-panel .mode-dropdown,
  .wrapper.point-live .bet-panel .multiplier-display {
    display: none !important;
  }

  .controls-left {
    display: contents;
  }

  .balance-row {
    grid-column: 1;
    min-height: 0;
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    min-width: 0;
  }

  .balance-label,
  .bet-label {
    color: rgba(255,255,255,.94);
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(.78rem, 3vw, 1rem);
    line-height: .9;
    letter-spacing: .035em;
    text-shadow:
      0 2px 0 rgba(0,0,0,.85),
      0 0 8px rgba(255,255,255,.18);
  }

  .balance-value {
    font-size: clamp(.72rem, 3.18vw, .98rem);
    line-height: 1;
    white-space: nowrap;
  }

  .panel-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 7px;
    width: 100%;
    height: 100%;
    min-width: 0;
  }

  .panel-field .bet-label {
    flex: 0 0 auto;
    text-align: center;
  }

  .bet-field {
    grid-column: 2;
  }

  .risk-field {
    grid-column: 4;
  }

  .panel-field .bet-stepper,
  .panel-field .mode-selector-row,
  .panel-field .mode-dropdown-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .bet-stepper {
    height: clamp(34px, 8.4vw, 42px);
    grid-template-columns: clamp(28px, 7.3vw, 36px) minmax(52px, 1fr) clamp(28px, 7.3vw, 36px);
    width: 100%;
    gap: 4px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .bet-step {
    border: 1px solid rgba(255,222,96,.9);
    border-radius: 6px;
    font-size: clamp(1.12rem, 5.4vw, 1.72rem);
    box-shadow:
      0 3px 0 rgba(99,52,0,.9),
      inset 0 1px 0 rgba(255,255,255,.58);
  }

  .bet-step:last-child {
    border-left: 1px solid rgba(255,222,96,.9);
  }

  .bet-input {
    border: 1px solid rgba(255,183,25,.74);
    border-radius: 6px;
    padding: 0 3px;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 42%),
      linear-gradient(180deg, #05080d, #010305);
    color: #f8fbff;
    font-size: clamp(.74rem, 3.3vw, .98rem);
    box-shadow:
      inset 0 0 13px rgba(0,0,0,.86),
      0 2px 0 rgba(0,0,0,.36);
  }

  .mode-select-btn {
    height: clamp(36px, 8.8vw, 44px);
    font-size: clamp(.68rem, 3vw, .92rem);
    letter-spacing: 0;
    gap: 4px;
    padding: 0 7px;
    max-width: 100%;
    min-width: 0;
    border-radius: 7px;
  }

  #modeBtnName {
    min-width: 0;
    white-space: nowrap;
  }

  .mode-caret {
    flex: 0 0 auto;
    font-size: .7rem;
  }

  .mode-dropdown {
    bottom: calc(100% + 8px);
    border-radius: 12px;
  }

  .mode-opt {
    padding: 12px 14px;
    font-size: 1.12rem;
  }

  .action-zone,
  .play-btn,
  .multiplier-display {
    min-height: 0;
    height: 100%;
    min-width: 0;
  }

  .action-zone {
    grid-column: 3;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    overflow: visible;
    transform: translateY(-6px);
  }

  .play-btn {
    width: clamp(76px, 20vw, 88px);
    height: clamp(76px, 20vw, 88px);
    aspect-ratio: 1;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 4px solid #d89115;
    font-size: clamp(1.25rem, 5.25vw, 1.75rem);
    letter-spacing: .025em;
    line-height: 1;
    padding: 0;
    background:
      radial-gradient(circle at 44% 18%, rgba(255,255,255,.26), rgba(255,255,255,0) 34%),
      radial-gradient(circle at 50% 70%, #062b08, #075f10 56%, #0baa20 100%);
    box-shadow:
      0 6px 0 #613407,
      0 12px 24px rgba(0,0,0,.56),
      0 0 0 3px #ffbc1d,
      0 0 22px rgba(37,255,42,.32),
      inset 0 3px 0 rgba(255,255,255,.34),
      inset 0 -10px 20px rgba(0,0,0,.36);
  }

  .play-btn::before {
    border-radius: 50%;
  }

  .mult-value {
    font-size: clamp(1.55rem, 7vw, 2.35rem);
  }

  .bet-panel .controls-left,
  .bet-panel .balance-row,
  .bet-panel .panel-field,
  .bet-panel .action-zone {
    position: absolute;
    z-index: 2;
    min-width: 0;
    min-height: 0;
    height: auto;
    transform: none;
  }

  .bet-panel .controls-left {
    inset: 0;
    display: block;
    pointer-events: none;
  }

  .bet-panel .balance-row {
    left: 3.55%;
    top: 40.2%;
    width: 17.75%;
    height: 28%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .bet-panel .balance-label,
  .bet-panel .bet-label {
    display: none;
  }

  .bet-panel .balance-right {
    width: 100%;
    height: 100%;
    justify-content: center;
  }

  .bet-panel .balance-value {
    color: #f8fbff;
    font-family: "DM Mono", monospace;
    font-size: clamp(.58rem, 2.5vw, .78rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-shadow: 0 2px 0 rgba(0,0,0,.8), 0 0 8px rgba(255,255,255,.28);
  }

  .bet-panel .risk-field {
    left: 22.6%;
    top: 40.5%;
    width: 15.6%;
    height: 28%;
    display: block;
    pointer-events: auto;
  }

  .bet-panel .mode-selector-row,
  .bet-panel .mode-dropdown-wrap {
    position: static;
    width: 100%;
    height: 100%;
  }

  .bet-panel .mode-select-btn {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
    color: transparent;
  }

  .bet-panel .mode-select-btn:hover:not(:disabled),
  .bet-panel .mode-select-btn:active:not(:disabled) {
    filter: none;
    transform: none;
  }

  .bet-panel #modeBtnIcon,
  .bet-panel #modeBtnName,
  .bet-panel .mode-caret {
    visibility: hidden;
  }

  .bet-panel .mode-dropdown {
    left: -26%;
    right: auto;
    bottom: calc(100% + clamp(28px, 8vw, 38px));
    width: 152%;
    min-width: 112px;
    border-radius: 10px;
    background: #02090b;
    pointer-events: auto;
  }

  .bet-panel .mode-opt {
    padding: 10px 12px;
    font-size: clamp(.94rem, 4vw, 1.15rem);
    letter-spacing: 0;
  }

  .bet-panel .bet-field {
    left: 62.25%;
    top: 40.5%;
    width: 34.35%;
    height: 28%;
    display: block;
    pointer-events: auto;
  }

  .bet-panel .bet-stepper {
    position: absolute;
    inset: 0;
    display: block;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .bet-panel .bet-step,
  .bet-panel .bet-input {
    position: absolute;
    top: 0;
    height: 100%;
  }

  .bet-panel .bet-step {
    width: 18%;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: transparent;
    text-shadow: none;
  }

  .bet-panel .bet-step:first-child {
    left: 0;
  }

  .bet-panel .bet-step:last-child {
    right: 0;
    border: 0;
  }

  .bet-panel .bet-step:hover:not(:disabled),
  .bet-panel .bet-step:active:not(:disabled) {
    filter: none;
    transform: none;
  }

  .bet-panel .bet-input {
    left: 30.2%;
    width: 55.6%;
    min-width: 0;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #f8fbff;
    font-size: clamp(.7rem, 3.25vw, 1rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: 0 2px 0 rgba(0,0,0,.8), 0 0 8px rgba(255,255,255,.24);
  }

  .bet-panel .bet-input:focus {
    box-shadow: inset 0 0 0 1px rgba(255,198,34,.82);
  }

  .bet-panel .action-zone {
    left: 40.15%;
    top: 0;
    width: 19.65%;
    height: var(--mobile-panel-h);
    display: block;
    pointer-events: auto;
  }

  .bet-panel .play-btn {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: transparent;
    font-size: 0;
    text-shadow: none;
  }

  .bet-panel .play-btn::before {
    display: none;
  }

  .bet-panel .play-btn:hover:not(:disabled),
  .bet-panel .play-btn:active:not(:disabled) {
    transform: none;
    box-shadow: none;
  }

  .result-overlay.ace-screen .result-sub {
    top: 63.5%;
  }

  .result-overlay.ace-screen.ace-clay-screen .result-sub {
    top: 63.8%;
  }
}

/* Balance the complete phone composition within the available vertical space.
   Court/canvas dimensions stay unchanged, so players, ball, court, scoreboard,
   and controls translate together without changing animation coordinates. */
@media (max-width: 560px) and (orientation: portrait) {
  :root {
    --mobile-stage-center-offset: calc(var(--mobile-panel-lift) / 2);
  }

  .court-wrap {
    top: var(--mobile-stage-center-offset);
    bottom: calc(var(--mobile-panel-h) + var(--mobile-panel-lift) - var(--mobile-stage-center-offset));
  }

  .bet-panel {
    bottom: calc(var(--mobile-panel-lift) - var(--mobile-stage-center-offset));
  }
}

.result-overlay.result-panel {
  overflow: visible;
  transform: scale(1);
}

.result-overlay.result-panel::before {
  inset: auto;
  left: 50%;
  top: 52%;
  width: min(48%, 460px);
  aspect-ratio: 1755 / 318;
  border-radius: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  backdrop-filter: none;
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.58))
    drop-shadow(0 0 16px rgba(255,210,80,.18));
  opacity: 0;
  transform: translate(-50%, -46%) scale(.92);
  transition:
    opacity .22s ease,
    transform .34s cubic-bezier(.16,.84,.24,1.08);
}

.result-overlay.show.result-panel::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.result-overlay.win-panel::before {
  background-image: url("../assets/match-point-result-win.webp?v=tiered-assets1");
}

.result-overlay.loss-panel::before {
  background-image: url("../assets/match-point-result-loss.webp?v=tiered-assets1");
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.58))
    drop-shadow(0 0 13px rgba(255,58,58,.18));
}

.result-overlay.fault-panel::before {
  background-image: url("../assets/match-point-result-fault.webp?v=tiered-assets1");
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.58))
    drop-shadow(0 0 13px rgba(255,58,58,.18));
}

.result-overlay.result-panel .result-main {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
}

.result-overlay.show.result-panel .result-main {
  display: none !important;
  animation: none !important;
}

.result-overlay.result-panel .result-sub {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(48%, 460px);
  aspect-ratio: 1755 / 318;
  box-sizing: border-box;
  margin: 0;
  padding: 0 8.2% 0 43.5%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #fff7cc;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(.86rem, 2.52vmin, 1.72rem);
  line-height: 1;
  letter-spacing: .035em;
  text-align: right;
  white-space: nowrap;
  text-shadow:
    0 2px 0 rgba(38,16,0,.95),
    0 0 14px rgba(255,214,88,.6),
    0 0 24px rgba(255,130,28,.25);
  opacity: 0;
  transform: translate(-50%, -47%) scale(.95);
}

.result-overlay.win-panel .result-sub {
  color: #5b2e06;
  text-shadow:
    0 1px 0 rgba(255,238,158,.8),
    0 0 7px rgba(255,255,255,.32);
}

.result-overlay.loss-panel .result-sub,
.result-overlay.fault-panel .result-sub {
  color: #fff1f1;
  text-shadow:
    0 2px 0 rgba(54,0,0,.95),
    0 0 14px rgba(255,90,80,.58),
    0 0 24px rgba(255,20,20,.22);
}

.result-overlay.show.result-panel .result-sub {
  animation: resultPanelAmount .24s .06s cubic-bezier(.16,.84,.24,1.06) forwards;
}

@keyframes resultPanelAmount {
  0%   { opacity: 0; transform: translate(-50%, -47%) scale(.95); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 820px) {
  .result-overlay.result-panel::before,
  .result-overlay.result-panel .result-sub {
    width: min(66%, 360px);
  }

  .result-overlay.result-panel .result-sub {
    padding-left: 43%;
    padding-right: 7.6%;
    font-size: clamp(.72rem, 4.25vw, 1.24rem);
  }
}

/* ============================================================
   ISOLATED TENNIS PHYSICS LAB
   Scoped to the lab page's body class so normal presentation stays intact.
   ============================================================ */
.physics-lab .debug-panel {
  position: fixed;
  z-index: 7600;
  /* Keep the production game's top-right Settings and Sound controls clear. */
  top: max(56px, calc(env(safe-area-inset-top) + 44px));
  right: max(12px, env(safe-area-inset-right));
  display: block !important;
  width: min(342px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(105, 214, 255, .58);
  border-radius: 14px;
  background: rgba(2, 9, 14, .94);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .62), inset 0 0 28px rgba(105, 214, 255, .045);
  backdrop-filter: blur(12px);
  overscroll-behavior: contain;
}

.physics-lab .debug-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
  list-style: none;
  color: #69d6ff;
}

.physics-lab .debug-panel summary::-webkit-details-marker { display: none; }

.physics-lab .debug-panel summary::after {
  content: "Hide";
  flex: 0 0 auto;
  color: rgba(220, 232, 248, .52);
  font-size: .48rem;
  letter-spacing: .08em;
}

.physics-lab .debug-panel:not([open]) summary::after { content: "Open"; }

.physics-lab .debug-panel summary > span {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.08rem;
  letter-spacing: .1em;
}

.physics-lab .debug-panel summary > small {
  flex: 1 1 auto;
  color: rgba(220, 232, 248, .56);
  font-size: .48rem;
  letter-spacing: .04em;
  text-align: right;
  text-transform: none;
}

.debug-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.debug-preset-btn {
  min-width: 0;
  min-height: 47px;
  padding: 7px 5px 6px;
  border: 1px solid rgba(105, 214, 255, .24);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(105, 214, 255, .1), rgba(16, 55, 72, .24));
  color: #dce8f8;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  line-height: 1.05;
  touch-action: manipulation;
}

.debug-preset-btn strong,
.debug-preset-btn small {
  display: block;
}

.debug-preset-btn strong {
  font-size: .67rem;
  letter-spacing: .02em;
}

.debug-preset-btn small {
  margin-top: 4px;
  color: rgba(220, 232, 248, .48);
  font-family: "DM Mono", monospace;
  font-size: .46rem;
}

.debug-preset-btn:hover,
.debug-preset-btn:focus-visible {
  border-color: rgba(105, 214, 255, .72);
  filter: brightness(1.15);
  outline: none;
}

.debug-preset-btn.ace {
  border-color: rgba(240, 192, 64, .42);
  color: #ffe060;
}

.debug-preset-btn.fault {
  border-color: rgba(255, 105, 105, .34);
  color: #ffb0a8;
}

.debug-preset-btn.max-win {
  grid-column: 1 / -1;
  border-color: rgba(126, 238, 139, .34);
  color: #aef3b8;
}

.debug-story-section,
.debug-family-section {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(105, 214, 255, .12);
}

.debug-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 1px 5px;
  color: rgba(143, 184, 255, .78);
  font-family: "DM Mono", monospace;
  line-height: 1.1;
}

.debug-section-heading span {
  font-size: .49rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.debug-section-heading small {
  color: rgba(220, 232, 248, .4);
  font-size: .43rem;
  letter-spacing: .03em;
}

.debug-story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.debug-story-btn {
  min-width: 0;
  min-height: 43px;
  padding: 6px 7px;
  border: 1px solid rgba(167, 131, 255, .28);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(143, 105, 255, .1), rgba(44, 30, 80, .24));
  color: #e4dcff;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  line-height: 1.05;
  text-align: left;
  touch-action: manipulation;
}

.debug-story-btn strong,
.debug-story-btn small {
  display: block;
}

.debug-story-btn strong {
  font-size: .63rem;
  letter-spacing: .015em;
}

.debug-story-btn small {
  margin-top: 4px;
  color: rgba(228, 220, 255, .5);
  font-family: "DM Mono", monospace;
  font-size: .43rem;
}

.debug-story-btn:hover,
.debug-story-btn:focus-visible {
  border-color: rgba(167, 131, 255, .72);
  filter: brightness(1.14);
  outline: none;
}

.debug-story-reel {
  grid-column: 1 / -1;
  min-height: 39px;
  border-color: rgba(240, 192, 64, .34);
  background: linear-gradient(180deg, rgba(240, 192, 64, .1), rgba(91, 62, 12, .22));
  color: #ffe28a;
}

.debug-family-runner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 94px;
  gap: 5px;
}

.debug-family-runner select,
.debug-family-run {
  min-width: 0;
  min-height: 44px;
  border: 1px solid rgba(105, 214, 255, .24);
  border-radius: 7px;
  font-family: "DM Sans", sans-serif;
}

.debug-family-runner select {
  padding: 4px 8px;
  background: #07141e;
  color: #dce8f8;
  font-size: .62rem;
}

.debug-family-run {
  padding: 4px 8px;
  background: linear-gradient(180deg, rgba(105, 214, 255, .18), rgba(16, 55, 72, .38));
  color: #9ee7ff;
  cursor: pointer;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  touch-action: manipulation;
}

.debug-family-run:hover,
.debug-family-run:focus-visible,
.debug-family-runner select:focus-visible {
  border-color: rgba(105, 214, 255, .72);
  outline: none;
}

.debug-manual-label {
  margin-top: 9px;
  color: rgba(143, 184, 255, .62);
  font-family: "DM Mono", monospace;
  font-size: .48rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.physics-lab .debug-grid {
  grid-template-columns: 1fr 58px 1fr;
  gap: 5px;
  margin-top: 5px;
}

.physics-lab .debug-grid select,
.physics-lab .debug-grid input {
  min-height: 30px;
  padding: 4px 6px;
  font-size: .61rem;
}

.physics-lab .debug-test-btn {
  min-height: 31px;
  font-size: .9rem;
}

.physics-lab .debug-readout {
  min-height: 0;
  margin-top: 6px;
}

@media (max-width: 560px) {
  .physics-lab .debug-panel {
    top: max(52px, calc(env(safe-area-inset-top) + 42px));
    right: max(6px, env(safe-area-inset-right));
    width: min(318px, calc(100vw - 12px));
    max-height: min(48dvh, 390px);
    padding: 8px;
  }

  .physics-lab .debug-panel summary > small { display: none; }
  .debug-quick-grid { gap: 4px; }
  .debug-preset-btn { min-height: 44px; padding-inline: 3px; }
  .debug-preset-btn strong { font-size: .61rem; }
  .debug-preset-btn small { font-size: .42rem; }
  .debug-story-grid { gap: 4px; }
  .debug-story-btn { min-height: 44px; padding: 5px 6px; }
  .debug-story-btn strong { font-size: .59rem; }
  .debug-story-btn small { font-size: .4rem; }
  .debug-story-reel { min-height: 44px; }
  .physics-lab .debug-grid select,
  .physics-lab .debug-grid input,
  .physics-lab .debug-test-btn { min-height: 44px; }
}