/* ===== CSS Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: #1a1a2e;
  color: #e8e8e8;
}

#app {
  width: 100vw; height: 100vh; height: 100dvh;
  position: relative;
  overflow: hidden;
}

canvas { display: block; }
#gameCanvas { position:absolute; inset:0; touch-action:none; user-select:none; -webkit-user-select:none; }
[hidden] { display:none !important; }
.hidden { display: none !important; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
button, select, input { font: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid #7bdcff;
  outline-offset: 3px;
}

/* ===== Screens ===== */
.screen {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  transition: opacity .2s ease;
}
.screen.hidden { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; }
.screen.active:not(.hidden) { opacity: 1; pointer-events: all; visibility: visible; }

/* ===== Main Menu ===== */
#mainMenu { background: linear-gradient(145deg, #0f2b46, #1a3a5c); overflow-y: auto; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); }
.menu-content { text-align: center; max-width: 500px; padding: 2rem; }
.title { font-size: clamp(2.5rem, 8vw, 4rem); color: #ffd700; margin-bottom: .2em; text-shadow: 0 2px 10px rgba(255,215,0,.3); }
.subtitle { color: #a0b8d0; font-size: 1.1rem; margin-bottom: 2rem; }

.menu-nav { display: flex; flex-direction: column; gap: .75rem; align-items: stretch; }
.menu-btn {
  padding: .9em 1.5em; border: none; border-radius: 8px; font-size: 1.05rem;
  cursor: pointer; transition: all .2s ease; font-weight: 600; letter-spacing: .3px;
}
.menu-btn.primary { background: linear-gradient(135deg, #ffd700, #ffaa00); color: #1a1a2e; }
.menu-btn.online-primary { background:linear-gradient(135deg,#42e6c8,#31a8ff); color:#04151f; border:1px solid rgba(255,255,255,.45); box-shadow:0 0 20px rgba(49,168,255,.2); }
.menu-btn.pool-primary { background: linear-gradient(135deg,#35d7d0,#2176c7); color:#06151f; border:1px solid rgba(255,255,255,.35); box-shadow:0 0 18px rgba(53,215,208,.16); }
.menu-btn:not(.primary):not(.online-primary):not(.pool-primary) { background: rgba(255,255,255,.08); color: #d0dce8; border: 1px solid rgba(255,255,255,.1); }
.menu-btn.danger { color: #ffb6b6; border-color: rgba(255,90,90,.45); }
.menu-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,.3); }
.rules-page-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.button-row { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* ===== HUD ===== */
#gameHUD { background: transparent; z-index: 5; pointer-events: none; }
#gameHUD > * { pointer-events: auto; }

#scoreboard {
  position: absolute; top: 0; left: 0; right: 0; height: clamp(48px, 7vh, 64px);
  display: flex; align-items: center; justify-content: space-between; padding: .5rem 1.5rem;
  background: rgba(10,20,30,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
body[data-game-portal="snooker-pro"] #scoreboard { top:var(--game-portal-content-top); }
body[data-game-portal="snooker-pro"] #topBar { top:calc(var(--game-portal-content-top) + clamp(48px, 7vh, 64px) + .5rem); }
body[data-game-portal="snooker-pro"] #gameChat { top:calc(var(--game-portal-content-top) + clamp(48px, 7vh, 64px) + 3.4rem); }

.player-panel { display: flex; align-items: center; gap: .75rem; min-width: 140px; }
.player-panel.left { justify-content: flex-start; }
.player-panel.right { justify-content: flex-end; flex-direction: row-reverse; }
.player-panel.local-online-player .player-name::before { content:"● "; color:#42e6c8; }
.player-name { font-size: clamp(.8rem, 2vw, .95rem); color: #c0d0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.player-score { font-size: clamp(1.3rem, 3.5vw, 1.8rem); font-weight: 700; color: #ffd700; min-width: 3em; text-align: center; }
.current-break { font-size: .7rem; color: #ff6b35; white-space: nowrap; }

.game-info { display: flex; align-items: center; gap: 1.5rem; }
#frameInfo, #shotClock { font-size: .85rem; color: #a0b0c0; }

#bottomBar {
  position: absolute; bottom: 0; left: 0; right: 0; height: clamp(48px, 7vh, 64px);
  display: flex; align-items: center; justify-content: space-between; padding: .5rem 1.5rem;
  background: rgba(10,20,30,.9); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.07);
}
#bottomBar.spin-open { z-index:46; }

#shotInfo { display: flex; align-items: center; gap: .5rem; font-size: clamp(.7rem, 1.8vw, .85rem); }
#ballOnLabel { color: #e0e8f0; }

#powerMeterContainer { width: clamp(60px, 20vw, 140px); height: 8px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; }
#powerMeterFill { width: 0%; height: 100%; background: linear-gradient(90deg, #3aff5a, #ffdd00, #ff4444); border-radius: 4px; transition: width .05s ease; }

#spinSelector { position: relative; display: flex; gap: .45rem; align-items: center; flex-wrap: nowrap; }
.spin-compact-label { color:#aebfce; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.spin-toggle {
  width: 42px; height: 42px; padding: 3px; border-radius: 50%; border: 2px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.spin-toggle:hover,.spin-toggle[aria-expanded="true"] { border-color:#ffd700; background:rgba(255,215,0,.14); }
.spin-toggle:active { transform:scale(.96); }
.spin-preview-ball,.spin-pad {
  position:relative; display:block; border-radius:50%; overflow:hidden;
  background:
    radial-gradient(circle at 35% 28%,#fff 0 7%,transparent 8%),
    radial-gradient(circle at 38% 32%,#fffdf2 0 20%,#eee6d1 58%,#c9bfa7 100%);
  box-shadow:inset -5px -6px 10px rgba(45,32,15,.24),inset 3px 3px 7px rgba(255,255,255,.75);
}
.spin-preview-ball { width:32px; height:32px; }
.spin-contact-dot {
  position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%);
  background:#d72f2f; border:2px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.72); pointer-events:none;
}
.spin-preview-ball .spin-contact-dot { width:7px; height:7px; border-width:1px; }
.spin-panel {
  position:absolute; right:0; bottom:calc(100% + 12px); z-index:45; width:190px; padding:12px;
  border:1px solid rgba(255,215,0,.4); border-radius:13px; background:rgba(7,18,28,.97);
  box-shadow:0 12px 32px rgba(0,0,0,.52); backdrop-filter:blur(12px);
}
.spin-panel::after { content:""; position:absolute; right:14px; bottom:-7px; width:12px; height:12px; background:rgba(7,18,28,.97); border-right:1px solid rgba(255,215,0,.4); border-bottom:1px solid rgba(255,215,0,.4); transform:rotate(45deg); }
.spin-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:9px; color:#f4f7f9; font-size:.78rem; }
.spin-center-btn { border:1px solid rgba(123,220,255,.4); border-radius:6px; padding:.28rem .42rem; background:rgba(123,220,255,.1); color:#bfeeff; cursor:pointer; font-size:.68rem; }
.spin-center-btn:hover { background:rgba(123,220,255,.2); }
.spin-pad { width:116px; height:116px; margin:0 auto; border:2px solid #f6f0df; cursor:crosshair; touch-action:none; user-select:none; }
.spin-pad:focus-visible { outline:3px solid #7bdcff; outline-offset:4px; }
.spin-axis { position:absolute; background:rgba(22,41,52,.22); pointer-events:none; }
.spin-axis-horizontal { left:8%; right:8%; top:50%; height:1px; }
.spin-axis-vertical { top:8%; bottom:8%; left:50%; width:1px; }
.spin-value { display:block; min-height:2.4em; margin-top:8px; color:#ffd75e; font-size:.7rem; line-height:1.2; text-align:center; }
.spin-instructions { display:block; margin-top:5px; color:#93a9b9; font-size:.62rem; line-height:1.25; text-align:center; }

/* Top Bar */
#topBar { position: absolute; top: calc(clamp(48px, 7vh, 64px) + .5rem); right: 1rem; display: flex; gap: .5rem; z-index: 20; pointer-events: auto; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,.1); border: none; color: #c0d0e0; cursor: pointer; font-size: 1.1rem; transition: all .15s ease; display: flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: rgba(255,255,255,.2); color: #fff; }
.online-status { min-height:36px; max-width:190px; display:flex; align-items:center; padding:.4rem .7rem; border-radius:999px; background:rgba(5,20,29,.9); border:1px solid rgba(255,255,255,.16); color:#cde0eb; font-size:.68rem; line-height:1.15; }
.online-status::before { content:""; width:7px; height:7px; flex:0 0 7px; margin-right:.4rem; border-radius:50%; background:#ffd35d; box-shadow:0 0 8px currentColor; }
.online-status[data-state="online"]::before { background:#42e68d; }
.online-status[data-state="offline"]::before { background:#ff6c78; }
.chat-toggle { position:relative; }
.chat-unread { position:absolute; right:-5px; top:-5px; min-width:18px; height:18px; padding:0 4px; display:grid; place-items:center; border-radius:999px; background:#ff4968; color:white; font-size:.62rem; font-weight:800; border:2px solid #102337; }

/* Match chat */
.game-chat { position:absolute; z-index:28; top:calc(clamp(48px,7vh,64px) + 3.4rem); right:1rem; width:min(330px,calc(100vw - 2rem)); height:min(430px,calc(100vh - 155px)); display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(66,230,200,.42); border-radius:14px; background:rgba(5,18,29,.97); box-shadow:0 18px 45px rgba(0,0,0,.55); backdrop-filter:blur(14px); pointer-events:auto; }
.game-chat header { display:flex; align-items:center; justify-content:space-between; padding:.75rem .85rem; color:#f3fbff; border-bottom:1px solid rgba(255,255,255,.1); }
.game-chat header button { width:30px; height:30px; border:0; border-radius:7px; background:rgba(255,255,255,.08); color:#dcebf2; cursor:pointer; }
.chat-messages { flex:1; min-height:80px; display:flex; flex-direction:column; gap:.55rem; overflow-y:auto; padding:.75rem; overscroll-behavior:contain; }
.chat-message { align-self:flex-start; max-width:88%; display:flex; flex-direction:column; gap:.15rem; padding:.48rem .62rem; border-radius:4px 11px 11px 11px; background:rgba(255,255,255,.09); color:#edf8fb; overflow-wrap:anywhere; }
.chat-message.own { align-self:flex-end; border-radius:11px 4px 11px 11px; background:rgba(49,168,255,.22); }
.chat-message strong { color:#71e5d3; font-size:.66rem; }
.chat-message.own strong { color:#9fd8ff; }
.chat-message span { font-size:.82rem; line-height:1.35; }
.chat-form { display:flex; gap:.45rem; padding:.7rem; border-top:1px solid rgba(255,255,255,.1); }
.chat-form input { min-width:0; flex:1; padding:.65rem .72rem; border:1px solid rgba(255,255,255,.18); border-radius:8px; background:rgba(0,0,0,.28); color:white; }
.chat-form button { padding:.55rem .7rem; border:0; border-radius:8px; background:#42e6c8; color:#04151f; font-weight:700; cursor:pointer; }

/* Mobile orientation gate: gameplay remains unavailable until the phone is horizontal. */
.mobile-orientation-gate {
  position:fixed; inset:0; z-index:130; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem;
  padding:max(1.25rem,var(--safe-top)) max(1.25rem,var(--safe-right)) max(1.25rem,var(--safe-bottom)) max(1.25rem,var(--safe-left));
  background:radial-gradient(circle at 50% 35%,#173854 0,#0b1d2d 48%,#06101a 100%); color:#edf8ff; text-align:center;
}
.mobile-orientation-gate h2 { color:#ffd75d; font-size:clamp(1.55rem,7vw,2.2rem); }
.mobile-orientation-gate p { max-width:320px; color:#c9dfeb; line-height:1.4; }
.mobile-orientation-gate small { color:#89a4b4; }
.mobile-orientation-gate .menu-btn { min-height:48px; }
.orientation-phone { position:relative; width:48px; height:78px; border:4px solid #71e5d3; border-radius:11px; box-shadow:0 0 24px rgba(66,230,200,.2); animation:turnPhone 1.8s ease-in-out infinite; }
.orientation-phone::after { content:""; position:absolute; left:50%; bottom:4px; width:12px; height:3px; border-radius:3px; background:#71e5d3; transform:translateX(-50%); }
.orientation-phone i { position:absolute; inset:8px 5px 12px; border-radius:5px; background:linear-gradient(145deg,rgba(49,168,255,.35),rgba(66,230,200,.08)); }
@keyframes turnPhone { 0%,18% { transform:rotate(0); } 65%,100% { transform:rotate(90deg); } }

/* ===== Overlays ===== */
.overlay-screen {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 30;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem;
}
.overlay-screen.hidden { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; }
.overlay-screen:not(.hidden) { background: rgba(5,12,24,.85); backdrop-filter: blur(6px); visibility: visible; pointer-events: auto; }
/* Shot result/turn banner is a non-blocking toast so the player can start aiming immediately. */
#shotResultPopup {
  top: clamp(70px, 10vh, 96px);
  left: 50%;
  width: min(420px, calc(100vw - 24px));
  height: auto;
  transform: translateX(-50%);
  padding: .9rem 1.2rem;
  border-radius: 12px;
  background: rgba(5,12,24,.86) !important;
  border: 1px solid rgba(255,255,255,.12);
  pointer-events: none !important;
}
body[data-game-portal="snooker-pro"] #shotResultPopup { top:calc(var(--game-portal-content-top) + clamp(48px, 7vh, 64px) + 52px); }
#shotResultPopup h2 { font-size: 1.1rem; color: #ffd700; }
#shotResultPopup p { font-size: .9rem; color: #d8e8f0; text-align: center; }
#shotResultPopup button { display: none; }
#pauseOverlay h2 { font-size: clamp(2rem, 6vw, 3rem); color: #ffd700; margin-bottom: .5em; }
.thinking-overlay.hidden { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; }
.thinking-overlay:not(.hidden) { background: rgba(5,12,24,.5); visibility: visible; pointer-events: auto; }
.thinking-overlay span { font-size: 1.2rem; color: #ffd700; padding: .8em 1.5em; background: rgba(0,0,0,.6); border-radius: 8px; animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .7; transform: scale(.98); } to { opacity: 1; transform: scale(1.02); } }
.placement-hint, .rotate-hint {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 21;
  padding: .55rem .9rem; border-radius: 999px; color: #fff; text-align: center;
  background: rgba(4,18,29,.9); border: 1px solid rgba(123,220,255,.45);
  font-size: .82rem; pointer-events: none !important;
}
.challenge-banner {
  position:absolute; top:calc(clamp(48px,7vh,64px) + .65rem); left:1rem; z-index:19;
  max-width:min(340px,calc(100vw - 170px)); padding:.55rem .8rem; border-radius:8px;
  background:rgba(4,18,29,.88); border-left:3px solid #ffd700; color:#e8f4ff;
  font-size:.78rem; pointer-events:none !important;
}
.placement-hint { bottom: calc(clamp(48px, 7vh, 64px) + .7rem); }
.rotate-hint { display: none; }

/* ===== Settings Screen ===== */
#settingsScreen, #rulesScreen, #statsScreen, #challengeScreen, #setupScreen, .online-screen { background: rgba(15,43,70,.97); backdrop-filter: blur(8px); flex-direction: column; gap: 1rem; padding: 2rem; overflow-y: auto; }
#settingsScreen h2, #rulesScreen h2, #statsScreen h2, #challengeScreen h2, #setupScreen h2, .online-screen h2 { color: #ffd700; font-size: clamp(1.5rem, 5vw, 2.2rem); text-align: center; }

.options-grid { display: grid; gap: 1rem; max-width: 480px; width: 100%; margin: auto; padding-bottom: 2rem; }
.options-grid label { font-size: .95rem; color: #c0dce0; display: flex; align-items: center; gap: .75rem; justify-content: space-between; background: rgba(255,255,255,.04); padding: .6em 1em; border-radius: 6px; }
.options-grid select, .options-grid input[type="number"] { background: rgba(0,0,0,.3); color: #e0e8f0; border: 1px solid rgba(255,255,255,.15); padding: .4em .6em; border-radius: 4px; font-size: .9rem; min-width: 100px; }
.options-grid input[type="checkbox"] { width: 1.3em; height: 1.3em; accent-color: #ffd700; cursor: pointer; }
.setup-description { max-width:480px; color:#b8d6e6; text-align:center; line-height:1.45; }
.online-options input { min-width:160px; max-width:230px; background:rgba(0,0,0,.3); color:#e0e8f0; border:1px solid rgba(255,255,255,.15); padding:.5em .65em; border-radius:5px; }
.matchmaking-card { width:min(390px,100%); display:flex; flex-direction:column; align-items:center; gap:.8rem; padding:2rem; border:1px solid rgba(66,230,200,.28); border-radius:18px; background:rgba(4,20,32,.62); text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.28); }
.matchmaking-card strong { color:#6bf0da; font-size:1.12rem; }
.matchmaking-card p { color:#d5e8f1; min-height:1.5em; }
.matchmaking-card small { color:#91aebe; }
.matchmaking-radar { position:relative; width:88px; height:88px; border:1px solid rgba(66,230,200,.5); border-radius:50%; background:repeating-radial-gradient(circle,rgba(66,230,200,.1) 0 1px,transparent 2px 19px); overflow:hidden; }
.matchmaking-radar::before { content:""; position:absolute; inset:50% 0 0 50%; transform-origin:0 0; background:linear-gradient(45deg,rgba(66,230,200,.48),transparent 70%); animation:radarSweep 1.4s linear infinite; }
.matchmaking-radar i { position:absolute; width:7px; height:7px; left:62%; top:29%; border-radius:50%; background:#ffd75d; box-shadow:0 0 12px #ffd75d; animation:pulse 1s ease-in-out infinite alternate; }
@keyframes radarSweep { to { transform:rotate(360deg); } }

/* Rules */
.rules-content { max-width: 560px; text-align: left; line-height: 1.6; overflow-y: auto; flex: 1; padding-bottom: 2rem; }
.rules-content h3 { color: #ffd700; margin-top: 1em; font-size: 1.1rem; }
.rules-content ul, .rules-content ol { padding-left: 1.5em; margin: .5em 0; }
.rules-content li { margin-bottom: .3em; color: #c0d8e8; }
.color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; margin-right: .4em; border: 1px solid rgba(0,0,0,.3); }

/* Stats */
#statsContent { max-width: 560px; width: 100%; overflow-y: auto; flex: 1; padding-bottom: 2rem; }
.stat-row { display: flex; justify-content: space-between; padding: .4em 1em; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .9rem; color: #b0c8d8; }
.stat-value { color: #ffd700; font-weight: 600; text-align: right; min-width: 3em; }

/* Challenges */
#challengeList { display: grid; gap: .5rem; max-width: 480px; width: 100%; overflow-y: auto; flex: 1; padding-bottom: 2rem; }
.challenge-card { width:100%; background:rgba(255,255,255,.06); color:inherit; text-align:left; border:0; border-left:3px solid #ffd700; border-radius:8px; padding:.8em 1.2em; cursor:pointer; transition:all .15s ease; }
.challenge-card:hover { background: rgba(255,255,255,.1); transform: translateX(4px); }
.challenge-name { font-weight: 600; color: #e8f0f8; }
.challenge-name, .challenge-desc { display:block; }
.challenge-desc { font-size: .8rem; color: #90a8b8; margin-top: .2em; }

/* Nomination Panel */
.nomination-panel { position: absolute; top: calc(clamp(48px, 7vh, 64px) + .5rem); left: 50%; transform: translateX(-50%); background: rgba(10,20,30,.95); border-radius: 10px; padding: .8em 1.2em; z-index: 25; display: flex; gap: .4em; align-items: center; border: 1px solid rgba(255,255,255,.1); }
.nomination-panel.hidden { opacity: 0; pointer-events: none; }
.nomination-panel p { font-size: .85rem; color: #c0d0e0; margin-right: .4em; white-space: nowrap; }
.color-choice-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); cursor: pointer; transition: all .15s ease; }
.color-choice-btn:hover { transform: scale(1.15); border-color: #fff; }
.pool-pocket-panel { align-items:flex-start; max-width:min(680px,calc(100vw - 150px)); }
.pool-call-column { display:flex; flex-direction:column; gap:.35rem; }
.pool-call-column p { margin:0; }
.pool-ball-grid { display:flex; flex-wrap:wrap; gap:.28rem; max-width:300px; }
.pool-ball-call { width:32px; height:32px; border-radius:50%; border:2px solid rgba(255,255,255,.32); background:var(--ball-color); color:#fff; text-shadow:0 1px 2px #000; font-size:.76rem; font-weight:800; cursor:pointer; }
.pool-ball-call.stripe { background:linear-gradient(to bottom,#f8f1da 0 30%,var(--ball-color) 30% 70%,#f8f1da 70%); }
.pool-ball-call.selected { outline:3px solid #ffd700; outline-offset:2px; transform:scale(1.07); }
.pool-safety-btn { border:1px solid rgba(123,220,255,.4); border-radius:6px; padding:.35rem .55rem; background:rgba(123,220,255,.1); color:#bfeeff; cursor:pointer; }
.pool-pocket-grid { display:grid; grid-template-columns:repeat(3,40px); gap:.35rem; }
.pool-pocket-grid button { width:40px; height:36px; border:1px solid rgba(255,215,0,.4); border-radius:7px; background:rgba(255,255,255,.08); color:#ffd700; cursor:pointer; font-size:1.1rem; }
.pool-pocket-grid button:hover,.pool-pocket-grid button:focus-visible { background:rgba(255,215,0,.2); border-color:#ffd700; }

/* Responsive */
@media (max-width: 768px) {
  #scoreboard { height: 42px; padding: .3rem 1rem; gap: .5rem; }
  .player-panel { min-width: auto; }
  .player-name { max-width: 80px; font-size: .7rem; }
  .player-score { font-size: 1.2rem; min-width: 2em; }
  #topBar { right: .5rem; top: calc(clamp(42px, 6vh, 56px) + .3rem); }
  body[data-game-portal="snooker-pro"] #topBar { top:calc(var(--game-portal-content-top) + 42px + .3rem); }
  body[data-game-portal="snooker-pro"] #shotResultPopup { top:calc(var(--game-portal-content-top) + 42px + 44px); }
  body[data-game-portal="snooker-pro"] #gameChat { top:calc(var(--game-portal-content-top) + 42px + 3rem); }
  .online-status { max-width:126px; font-size:.6rem; padding:.35rem .5rem; }
  .game-chat { top:calc(42px + 3rem); right:.5rem; width:min(330px,calc(100vw - 1rem)); height:min(390px,calc(100vh - 142px)); }
  .icon-btn { width: 36px; height: 36px; font-size: .95rem; }
  #bottomBar { height: 48px; padding: .3rem .65rem; }
  .spin-toggle { width:38px; height:38px; }
  .spin-preview-ball { width:28px; height:28px; }
  .nomination-panel p { display: none; }
  .pool-pocket-panel { top:calc(42px + .35rem); }
  .pool-pocket-panel { max-width:calc(100vw - 110px); padding:.55em .7em; }
  .pool-ball-grid { max-width:230px; }
  .pool-ball-call { width:30px; height:30px; }
  .challenge-banner { top:calc(42px + .5rem); left:.5rem; max-width:calc(100vw - 130px); font-size:.68rem; }
}

@media (max-width: 480px) {
  #scoreboard { padding:.25rem .35rem; }
  .player-name { max-width: 60px; font-size: .6rem; }
  .current-break { display:none; }
  .game-info { gap: .5rem; font-size: .7rem; }
  #frameInfo { white-space:nowrap; font-size:.7rem; }
  #bottomBar { height: 82px; padding: .2rem .55rem max(.2rem,env(safe-area-inset-bottom)); flex-wrap: wrap; align-content: center; row-gap: .15rem; }
  #shotInfo { order: 0; width: 100%; justify-content: center; min-width: 0; font-size: .65rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #ballOnLabel { overflow: hidden; text-overflow: ellipsis; }
  #powerMeterContainer { order: 1; width: clamp(54px,18vw,80px); }
  #spinSelector { order: 2; margin-left: auto; }
  .spin-compact-label { font-size:.62rem; }
  .placement-hint { bottom: calc(82px + .5rem); }
  .menu-content { padding: 1rem .5rem; }
  .menu-nav { gap: .5rem; }
  .menu-btn { padding: .75em 1.1em; }
  .pool-pocket-panel { left:12px; right:12px; width:auto; max-width:none; transform:none; flex-wrap:wrap; justify-content:center; }
  .pool-call-column:first-child { flex:1 1 210px; }
  .pool-ball-grid { max-width:none; }
  .pool-pocket-panel p { display:block; font-size:.7rem; }
  .game-chat { left:.5rem; right:.5rem; width:auto; height:calc(100vh - 142px); }
}

@media (max-height: 500px) {
  #bottomBar { padding-top: .2rem; padding-bottom: .2rem; }
  .spin-panel { width:172px; padding:10px; }
  .spin-pad { width:104px; height:104px; }
  #shotResultPopup { top: 52px; width: min(360px,calc(100vw - 180px)); padding: .4rem .8rem; gap: .2rem; }
  #shotResultPopup h2 { font-size: .9rem; }
  #shotResultPopup p { font-size: .72rem; }
}

/* During a mobile match, use the rails as the HUD edge and give the cloth almost the full viewport. */
@media (orientation: landscape) and (max-height: 560px) {
  body.snooker-gameplay.snooker-mobile .game-portal-utility { display:none !important; }
  body.snooker-gameplay.snooker-mobile { --game-portal-content-top:0px; }
  body.snooker-gameplay.snooker-mobile #scoreboard {
    top:max(4px,var(--safe-top)) !important; left:calc(var(--safe-left) + 4px); right:calc(var(--safe-right) + 4px); height:34px;
    padding:0; gap:4px; background:transparent; border:0; backdrop-filter:none;
  }
  body.snooker-gameplay.snooker-mobile #scoreboard .player-panel,
  body.snooker-gameplay.snooker-mobile #scoreboard .game-info {
    min-width:0; height:32px; padding:0 .5rem; border:1px solid rgba(255,255,255,.14); border-radius:999px;
    background:rgba(5,18,29,.9); box-shadow:0 3px 12px rgba(0,0,0,.28); backdrop-filter:blur(6px);
  }
  body.snooker-gameplay.snooker-mobile #scoreboard .player-panel { max-width:31vw; gap:.3rem; }
  body.snooker-gameplay.snooker-mobile .player-name { max-width:84px; font-size:.66rem; }
  body.snooker-gameplay.snooker-mobile .player-score { min-width:1.35em; font-size:1rem; }
  body.snooker-gameplay.snooker-mobile .current-break { display:none; }
  body.snooker-gameplay.snooker-mobile #scoreboard .game-info { position:absolute; left:50%; transform:translateX(-50%); gap:.35rem; }
  body.snooker-gameplay.snooker-mobile #frameInfo,
  body.snooker-gameplay.snooker-mobile #shotClock { font-size:.63rem; white-space:nowrap; }
  body.snooker-gameplay.snooker-mobile #topBar {
    top:calc(var(--safe-top) + 40px) !important; right:calc(var(--safe-right) + 5px); gap:4px;
  }
  body.snooker-gameplay.snooker-mobile .icon-btn { width:44px; height:44px; border:1px solid rgba(255,255,255,.14); background:rgba(5,18,29,.88); }
  body.snooker-gameplay.snooker-mobile .online-status { min-height:42px; max-width:112px; padding:.3rem .45rem; background:rgba(5,18,29,.9); }
  body.snooker-gameplay.snooker-mobile #bottomBar {
    left:calc(var(--safe-left) + 5px); right:calc(var(--safe-right) + 5px); bottom:var(--safe-bottom); height:46px;
    padding:2px 0; gap:5px; background:transparent; border:0; backdrop-filter:none;
  }
  body.snooker-gameplay.snooker-mobile #shotInfo,
  body.snooker-gameplay.snooker-mobile #spinSelector {
    min-height:40px; padding:.3rem .55rem; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(5,18,29,.9); box-shadow:0 3px 12px rgba(0,0,0,.3);
  }
  body.snooker-gameplay.snooker-mobile #shotInfo { max-width:48vw; font-size:.64rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  body.snooker-gameplay.snooker-mobile #ballOnLabel { overflow:hidden; text-overflow:ellipsis; }
  body.snooker-gameplay.snooker-mobile #powerMeterContainer { width:clamp(68px,15vw,112px); flex:0 0 auto; background:rgba(5,18,29,.9); outline:5px solid rgba(5,18,29,.9); }
  body.snooker-gameplay.snooker-mobile #spinSelector { margin-left:0; padding:.15rem; }
  body.snooker-gameplay.snooker-mobile .spin-compact-label { display:none; }
  body.snooker-gameplay.snooker-mobile .spin-toggle { width:42px; height:42px; }
  body.snooker-gameplay.snooker-mobile .spin-panel { right:0; bottom:calc(100% + 6px); width:172px; padding:10px; }
  body.snooker-gameplay.snooker-mobile .spin-pad { width:104px; height:104px; }
  body.snooker-gameplay.snooker-mobile .placement-hint { bottom:calc(var(--safe-bottom) + 50px); max-width:52vw; padding:.35rem .65rem; font-size:.68rem; }
  body.snooker-gameplay.snooker-mobile .challenge-banner { top:calc(var(--safe-top) + 40px); left:calc(var(--safe-left) + 5px); max-width:42vw; }
  body.snooker-gameplay.snooker-mobile #shotResultPopup {
    top:calc(var(--safe-top) + 39px) !important; width:min(360px,calc(100vw - 205px)); padding:.35rem .7rem; gap:.15rem;
  }
  body.snooker-gameplay.snooker-mobile #shotResultPopup h2 { font-size:.86rem; }
  body.snooker-gameplay.snooker-mobile #shotResultPopup p { font-size:.68rem; }
  body.snooker-gameplay.snooker-mobile .game-chat {
    top:calc(var(--safe-top) + 6px) !important; right:calc(var(--safe-right) + 6px); width:min(330px,48vw); height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 12px);
  }
  body.snooker-gameplay.snooker-mobile .pool-pocket-panel { top:calc(var(--safe-top) + 40px); max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 88px); overflow:auto; }
  body.snooker-gameplay.snooker-mobile .pool-ball-call { width:40px; height:40px; }
  body.snooker-gameplay.snooker-mobile .pool-pocket-grid { grid-template-columns:repeat(3,44px); }
  body.snooker-gameplay.snooker-mobile .pool-pocket-grid button,
  body.snooker-gameplay.snooker-mobile .color-choice-btn { width:44px; height:44px; }
  body.snooker-gameplay.snooker-mobile .pool-safety-btn { min-height:44px; }
  body.snooker-gameplay.snooker-mobile .rotate-hint { display:none; }
}

@media (orientation: portrait) and (max-width: 600px) {
  .rotate-hint { display: block; bottom: calc(82px + .5rem); width: min(310px,calc(100vw - 24px)); opacity: .8; }
  body.snooker-gameplay.snooker-mobile .rotate-hint { display:none; }
  .placement-hint:not(.hidden) + .rotate-hint { display: none; }
}

/* Accessibility */
.high-contrast .color-dot { outline: 2px solid #fff; }
.high-contrast .menu-btn { border-width: 2px; }
.high-contrast .spin-toggle,.high-contrast .spin-pad { outline: 2px solid #ffd700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}