:root { color-scheme: dark; font-family: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; background: #0b0820; color: #fff; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body, #app { min-height: 100%; min-height: 100dvh; margin: 0; overflow-x: hidden; }
body { background: radial-gradient(circle at 50% -20%, #3e1972 0, #130b2c 40%, #070612 100%); }
button, input { font: inherit; }
button { cursor: pointer; color: white; border: 0; font-weight: 900; letter-spacing: .07em; }
.screen { min-height: 100dvh; }
.hidden { display: none !important; }

.lobby-screen { position: relative; display: grid; place-items: start center; overflow: hidden; padding: clamp(205px, 26dvh, 236px) 16px max(16px, env(safe-area-inset-bottom)); isolation: isolate; background: linear-gradient(180deg, rgba(7,5,19,.06) 0, rgba(7,5,19,.16) 28%, rgba(7,5,19,.9) 68%, #070612 100%), linear-gradient(90deg, rgba(6,4,18,.38), rgba(6,4,18,.02) 50%, rgba(6,4,18,.38)), url('/assets/q-ball-lobby-marquee-v1.jpg') center top / cover no-repeat, #0b0820; }
.lobby-screen::before, .lobby-screen::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(20px); opacity: .7; }
.lobby-screen::before { width: 50vw; height: 50vw; min-width: 330px; min-height: 330px; background: #fb16bd; top: -16%; left: -27%; }
.lobby-screen::after { width: 60vw; height: 60vw; min-width: 380px; min-height: 380px; background: #056ef8; bottom: -28%; right: -30%; }
.arcade-glow { position: absolute; z-index: -1; border-radius: 45%; filter: blur(40px); opacity: .4; animation: breathe 5s ease-in-out infinite alternate; }
.glow-one { width: 240px; height: 450px; background: #a41cff; transform: rotate(40deg); top: 8%; right: -70px; }
.glow-two { width: 190px; height: 340px; background: #00d5e8; transform: rotate(-40deg); bottom: 4%; left: -60px; animation-delay: -2.5s; }
@keyframes breathe { from { transform: scale(.9) rotate(35deg); opacity: .23; } to { transform: scale(1.12) rotate(35deg); opacity: .55; } }
.lobby-marquee { position: absolute; z-index: 0; isolation: isolate; top: clamp(58px, 9dvh, 82px); left: 50%; width: min(86vw, 360px); transform: translateX(-50%); text-align: center; pointer-events: none; }
.lobby-marquee::before { position: absolute; z-index: -2; inset: -36% -12% -42%; border-radius: 50%; background: radial-gradient(ellipse at 31% 47%, rgba(43,229,255,.34), transparent 42%), radial-gradient(ellipse at 70% 53%, rgba(255,43,194,.31), transparent 46%); filter: blur(17px); opacity: .46; transform: scale(.94); transition: opacity 180ms ease, transform 180ms ease; content: ""; }
.lobby-marquee::after { position: absolute; z-index: -1; inset: 46% 5% -31%; border-radius: 50%; background: radial-gradient(ellipse, rgba(2,0,13,.88) 0 24%, rgba(0,0,0,.48) 46%, transparent 73%); filter: blur(12px); opacity: .86; transform: translateY(8px); content: ""; }
.lobby-marquee.powered::before { opacity: 1; transform: scale(1.08); }
.neon-sign { position: relative; z-index: 1; display: block; width: 100%; height: auto; opacity: .9; filter: brightness(1.02) contrast(1.07) saturate(1.08) drop-shadow(0 3px 1px rgba(2,0,12,.92)) drop-shadow(0 7px 5px rgba(0,0,0,.7)) drop-shadow(0 0 7px rgba(84,246,255,.42)) drop-shadow(0 0 14px rgba(255,75,204,.25)); transform-origin: 50% 50%; transition: opacity 55ms linear, filter 55ms linear; will-change: opacity, filter; }
.neon-sign.powered { opacity: 1; filter: brightness(1.34) contrast(1.12) saturate(1.23) drop-shadow(0 1px 1px rgba(255,255,255,.72)) drop-shadow(0 4px 1px rgba(2,0,12,.96)) drop-shadow(0 9px 7px rgba(0,0,0,.78)) drop-shadow(0 0 3px rgba(235,255,255,.95)) drop-shadow(0 0 10px rgba(84,246,255,.88)) drop-shadow(0 0 21px rgba(255,75,204,.68)) drop-shadow(0 0 39px rgba(84,246,255,.42)) drop-shadow(0 0 58px rgba(255,75,204,.25)); }
.neon-sign.sag { opacity: .77; filter: brightness(.9) contrast(1.08) saturate(1.03) drop-shadow(0 4px 1px rgba(2,0,12,.94)) drop-shadow(0 8px 6px rgba(0,0,0,.72)) drop-shadow(0 0 8px rgba(84,246,255,.35)) drop-shadow(0 0 15px rgba(255,75,204,.24)); }
.neon-sign.flicker { opacity: .28; filter: brightness(.48) contrast(1.08) saturate(.82) drop-shadow(0 4px 1px rgba(2,0,12,.94)) drop-shadow(0 8px 6px rgba(0,0,0,.72)) drop-shadow(0 0 4px rgba(84,246,255,.14)); }
.neon-sign.recover { opacity: .98; filter: brightness(1.4) contrast(1.12) saturate(1.25) drop-shadow(0 1px 1px rgba(255,255,255,.76)) drop-shadow(0 4px 1px rgba(2,0,12,.96)) drop-shadow(0 9px 7px rgba(0,0,0,.78)) drop-shadow(0 0 4px rgba(235,255,255,.98)) drop-shadow(0 0 12px rgba(84,246,255,.92)) drop-shadow(0 0 24px rgba(255,75,204,.7)) drop-shadow(0 0 43px rgba(84,246,255,.46)); }
.neon-sign.flash { opacity: 1; filter: brightness(1.52) contrast(1.14) saturate(1.27) drop-shadow(0 1px 1px rgba(255,255,255,.82)) drop-shadow(0 4px 1px rgba(2,0,12,.96)) drop-shadow(0 9px 7px rgba(0,0,0,.78)) drop-shadow(0 0 5px rgba(255,255,255,1)) drop-shadow(0 0 15px rgba(84,246,255,.98)) drop-shadow(0 0 29px rgba(255,75,204,.78)) drop-shadow(0 0 51px rgba(84,246,255,.52)); }
@media (prefers-reduced-motion: reduce) { .neon-sign { transition: none; } }
.lobby-card { position: relative; z-index: 1; width: min(100%, 425px); padding: 19px 24px 22px; text-align: center; border: 1px solid rgba(119, 237, 255, .52); border-radius: 24px; background: linear-gradient(155deg, rgba(24, 13, 57, .92), rgba(8, 7, 25, .9)); box-shadow: 0 0 0 2px rgba(255, 33, 192, .16), 0 16px 60px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.22); backdrop-filter: blur(16px); }
.lobby-intro { margin-bottom: 15px; padding-bottom: 13px; border-bottom: 1px solid rgba(84,246,255,.18); }
.eyebrow { color: #75f8ff; letter-spacing: .19em; font-size: .65rem; font-weight: 900; margin: 0 0 5px; }
.lobby-deck { margin: 0; color: #e5e0f2; font: 700 .79rem/1.35 system-ui,sans-serif; }
.lobby-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }.lobby-pills span { padding: 5px 8px; border: 1px solid rgba(84,246,255,.32); border-radius: 999px; color: #b8faff; background: rgba(11,25,54,.58); font-size: .49rem; font-weight: 900; letter-spacing: .1em; }.lobby-pills span:last-child { color: #ffc6ef; border-color: rgba(255,75,204,.34); background: rgba(55,14,57,.54); }
.neon-audio-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; padding: 7px 10px; border: 1px solid rgba(137,126,168,.62); border-radius: 999px; color: #c5bfd5; background: rgba(10,8,27,.7); box-shadow: inset 0 1px rgba(255,255,255,.08); font-size: .49rem; font-weight: 900; letter-spacing: .1em; }.neon-audio-toggle::before { width: 6px; height: 6px; border-radius: 50%; background: #777186; content: ""; }.neon-audio-toggle[aria-pressed="true"] { color: #e8feff; border-color: rgba(84,246,255,.72); background: rgba(15,48,68,.78); box-shadow: 0 0 14px rgba(84,246,255,.25), 0 0 22px rgba(255,75,204,.1), inset 0 1px rgba(255,255,255,.12); }.neon-audio-toggle[aria-pressed="true"]::before { background: #54f6ff; box-shadow: 0 0 7px #54f6ff, 0 0 11px #ff4bcc; }
h1 { margin: 0; font-size: clamp(3.3rem, 17vw, 5.6rem); line-height: .82; letter-spacing: -.1em; text-shadow: 0 5px 0 #621a96, 0 0 22px #ff2dc2; color: #edfaff; }
h1 span, .brand span { color: #54f6ff; }
.tagline { margin: 15px 0 28px; color: #ff79e4; font-style: italic; font-weight: 800; letter-spacing: .03em; }
label { display: block; color: #a5d8ff; font-size: .66rem; font-weight: 900; letter-spacing: .14em; text-align: left; }
input { width: 100%; margin-top: 7px; padding: 14px 13px; color: #fff; border: 1px solid #5c68a9; border-radius: 11px; outline: none; background: rgba(2, 4, 21, .72); font-size: 1rem; font-weight: 900; letter-spacing: .08em; }
input:focus { border-color: #55f9ff; box-shadow: 0 0 0 3px rgba(85,249,255,.16); }
.primary, .join-row button, .winner-overlay button { width: 100%; margin-top: 15px; padding: 15px 12px; border-radius: 12px; background: linear-gradient(180deg, #ff4bcc, #b91cad); box-shadow: 0 4px 0 #65145e, 0 0 19px rgba(255, 38, 199, .6); }
.mode-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }
.mode-option { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; border: 1px solid #514b70; border-radius: 11px; color: #85829d; background: #151329; }
.mode-option strong { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: #f8faff; background: #16151e; box-shadow: inset -4px -5px 8px rgba(0,0,0,.6), inset 3px 3px 5px rgba(255,255,255,.22); font-size: .9rem; }
.mode-option span { font-size: .68rem; }
.mode-option.active { color: #fff5a4; border-color: #58edff; background: linear-gradient(145deg, rgba(31,132,166,.38), rgba(115,26,133,.4)); box-shadow: 0 0 14px rgba(64,231,255,.22); }
.mode-option.active strong { box-shadow: 0 0 12px rgba(255,80,205,.7), inset -4px -5px 8px rgba(0,0,0,.6), inset 3px 3px 5px rgba(255,255,255,.25); }
.play-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 9px; }
.play-actions .primary { padding-inline: 7px; font-size: .72rem; }
.primary.solo { background: linear-gradient(180deg, #22dfea, #147ab8); box-shadow: 0 4px 0 #0d4973, 0 0 19px rgba(39,225,255,.45); }
.primary:active, .join-row button:active, .winner-overlay button:active { transform: translateY(3px); box-shadow: 0 1px 0 #65145e; }
.or { display: flex; align-items: center; gap: 8px; margin: 22px 0 8px; color: #9697be; font-size: .62rem; font-weight: 900; letter-spacing: .09em; }
.or span { height: 1px; flex: 1; background: #4a426c; }
.join-row { display: grid; grid-template-columns: 1fr 105px; gap: 8px; }
.join-row input { margin: 0; text-align: center; }
.join-row button { margin: 0; padding: 11px 4px; background: linear-gradient(180deg, #32e1ef, #1386c7); box-shadow: 0 4px 0 #0d4e90; }
.lobby-message { min-height: 1.3em; margin: 19px 0 0; color: #ffe58c; font-size: .83rem; font-weight: 800; }
.microcopy { margin: 18px 0 0; color: #a5a0bd; font-size: .69rem; line-height: 1.45; }

.game-screen { padding: max(11px, env(safe-area-inset-top)) 12px max(13px, env(safe-area-inset-bottom)); background: radial-gradient(ellipse at 50% 0, #38216d 0, #0b0920 52%, #06050e 100%); }
.game-header { display: flex; align-items: center; justify-content: space-between; width: min(100%, 540px); margin: 0 auto 9px; }
.brand { font-size: 1.12rem; font-weight: 1000; letter-spacing: -.06em; color: #f9fbff; text-shadow: 0 2px 7px #fa2fc8; }
.brand small { color: #eb5bd2; font-size: .43rem; letter-spacing: .14em; margin-left: 4px; vertical-align: middle; }
.room-tag { padding: 5px 8px; border: 1px solid rgba(86,243,255,.55); border-radius: 6px; color: #71f3ff; font-size: .52rem; font-weight: 900; letter-spacing: .12em; }
.room-tag strong { color: #fff1aa; font-size: .78rem; margin-left: 4px; letter-spacing: .13em; }
.room-tag span { color: #ff7add; }

.player-account { margin: 2px 0 12px; border: 1px solid rgba(84,246,255,.28); border-radius: 12px; background: linear-gradient(135deg, rgba(84,246,255,.07), rgba(255,75,204,.05)); box-shadow: inset 0 0 22px rgba(84,246,255,.035); overflow: hidden; }
.account-summary { min-height: 52px; padding: 8px 9px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 9px; }
.account-avatar { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(84,246,255,.72); border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff 0 6%, #54f6ff 8%, #1b3d66 34%, #100a29 72%); color: #fff; font-size: .66rem; font-weight: 950; letter-spacing: .06em; box-shadow: 0 0 14px rgba(84,246,255,.32); }
.account-copy { min-width: 0; display: grid; gap: 2px; }
.account-copy strong { color: #fff; font-size: .7rem; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-copy small { color: #8edfe8; font-size: .43rem; font-weight: 800; line-height: 1.25; letter-spacing: .055em; }
.account-copy small[data-kind="success"] { color: #ffdc72; }
.account-copy small[data-kind="error"] { color: #ff91c8; }
.account-button { min-height: 32px; padding: 0 9px; border: 1px solid rgba(255,220,114,.52); border-radius: 7px; background: rgba(11,8,32,.7); color: #ffdc72; font-size: .48rem; font-weight: 950; letter-spacing: .08em; }
.account-panel { padding: 11px; border-top: 1px solid rgba(84,246,255,.18); background: rgba(8,6,26,.76); }
.account-auth, .profile-form { display: grid; gap: 9px; }
.account-auth label, .profile-form label { display: grid; gap: 5px; color: #9feef4; font-size: .48rem; font-weight: 900; letter-spacing: .1em; }
.account-auth input, .profile-form input, .profile-form textarea, .profile-form select { width: 100%; box-sizing: border-box; border: 1px solid rgba(84,246,255,.32); border-radius: 7px; background: rgba(255,255,255,.055); color: #fff; padding: 9px 10px; font: inherit; font-size: .68rem; outline: none; }
.profile-form textarea { resize: vertical; min-height: 52px; }
.profile-form select option { background: #130b2c; }
.account-auth > button, .account-social button, .profile-actions button { min-height: 36px; border: 1px solid rgba(84,246,255,.42); border-radius: 7px; background: linear-gradient(135deg, rgba(84,246,255,.16), rgba(255,75,204,.11)); color: #fff; font-size: .54rem; font-weight: 950; letter-spacing: .075em; }
.account-social, .profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wallet-status { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.09); color: #ac9dcf; font-size: .46rem; font-weight: 850; letter-spacing: .075em; text-align: center; }
.scoreboard { display: grid; grid-template-columns: minmax(0,1fr) 30px minmax(0,1fr); align-items: stretch; width: min(100%, 540px); margin: auto; border: 1px solid rgba(93,92,145,.68); border-radius: 15px; overflow: hidden; background: linear-gradient(180deg, rgba(16,13,43,.92), rgba(7,7,24,.88)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 7px 22px rgba(0,0,0,.24); }
.player-panel { position: relative; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 8px; min-width: 0; min-height: 58px; padding: 7px 9px; color: #aaa6c0; transition: background .18s, color .18s, box-shadow .18s; }
.player-panel::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; opacity: .34; background: #54f6ff; box-shadow: 0 0 9px #54f6ff; }
.player-panel.player-right { grid-template-columns: auto minmax(0,1fr) 40px; text-align: right; }
.player-panel.player-right .player-avatar { grid-column: 3; grid-row: 1; }
.player-panel.player-right .player-copy { grid-column: 2; grid-row: 1; align-items: flex-end; }
.player-panel.player-right .player-score { grid-column: 1; grid-row: 1; align-items: flex-start; }
.player-panel.player-right::after { background: #ff4bcc; box-shadow: 0 0 9px #ff4bcc; }
.player-panel.active { color: #fff; background: linear-gradient(110deg, rgba(43,207,239,.2), rgba(124,36,157,.24)); box-shadow: inset 0 -3px rgba(255,255,255,.08); }
.player-panel.active::after { height: 3px; opacity: 1; }
.player-panel.disconnected { filter: saturate(.45); }
.player-avatar { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid rgba(129,245,255,.72); border-radius: 50%; color: #f8feff; background: radial-gradient(circle at 34% 27%, #526a8d, #17172d 55%, #080712); box-shadow: inset -5px -7px 9px rgba(0,0,0,.42), inset 3px 3px 5px rgba(255,255,255,.16), 0 0 11px rgba(84,246,255,.22); }
.player-right .player-avatar { border-color: rgba(255,106,218,.76); box-shadow: inset -5px -7px 9px rgba(0,0,0,.42), inset 3px 3px 5px rgba(255,255,255,.16), 0 0 11px rgba(255,75,204,.22); }
.player-initials { font-size: .62rem; font-weight: 1000; letter-spacing: .02em; }
.connection-dot { position: absolute; right: -1px; bottom: 0; width: 9px; height: 9px; border: 2px solid #101029; border-radius: 50%; background: #5dffb1; box-shadow: 0 0 7px rgba(76,255,171,.8); }
.player-panel.disconnected .connection-dot, .player-panel.empty .connection-dot { background: #79758d; box-shadow: none; }
.player-copy, .player-score { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.player-copy { align-items: flex-start; }
.player-score { align-items: flex-end; }
.player-name { max-width: 100%; overflow: hidden; color: #f6f3ff; text-overflow: ellipsis; white-space: nowrap; font-size: .61rem; font-weight: 1000; letter-spacing: .05em; }
.player-state { overflow: hidden; color: #75f8ff; font-size: .43rem; font-weight: 900; letter-spacing: .13em; text-overflow: ellipsis; white-space: nowrap; }
.player-right .player-state { color: #ff8ade; }
.score { font-size: 1.26rem; line-height: .92; color: #ffdc72; text-shadow: 0 0 10px rgba(231,103,221,.76); }
.balls-label { color: #aeb5d2; font-size: .42rem; font-weight: 900; letter-spacing: .1em; white-space: nowrap; }
.versus { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #b39be0; background: rgba(5,5,18,.36); font-size: .56rem; font-weight: 1000; }
.versus::before { content: ""; position: absolute; inset: 8px 50%; width: 1px; background: linear-gradient(#54f6ff00, #54f6ff88 30%, #ff4bcc88 70%, #ff4bcc00); }
.versus span { position: relative; padding: 4px 0; background: #0c0a21; }
.versus small { display: none; position: relative; color: #fff1aa; background: #0c0a21; font-size: .34rem; letter-spacing: .04em; }
.status { width: min(100%, 540px); min-height: 1.2em; margin: 9px auto; text-align: center; color: #bbebff; font-size: .76rem; font-weight: 800; }
.table-shell { position: relative; contain: layout paint; width: min(100%, 540px); margin: auto; aspect-ratio: 1 / 1.6; border: 1px solid rgba(128,247,255,.5); border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 3px rgba(253, 38, 190, .18), 0 0 35px rgba(25, 168, 255, .2), 0 17px 42px rgba(0,0,0,.55); background: #100d24; touch-action: none; }
.table-shell.rack-hit { animation: rack-hit .24s ease-out; }
@keyframes rack-hit { 0%, 100% { transform: translate(0, 0) scale(1); filter: brightness(1); } 18% { transform: translate(-2px, 1px) scale(1.002); filter: brightness(1.14); } 42% { transform: translate(2px, -1px) scale(1.001); } 66% { transform: translate(-1px, 0); } }
canvas { display: block; width: 100%; height: 100%; }
.spin-trigger { position: absolute; z-index: 3; left: 10px; bottom: 12px; display: grid; place-items: center; gap: 2px; width: 58px; min-height: 66px; padding: 5px 6px 4px; border: 1px solid rgba(111,240,255,.72); border-radius: 16px; color: #dffcff; background: rgba(9,11,35,.86); box-shadow: 0 0 16px rgba(56,226,255,.26); backdrop-filter: blur(5px); }
.spin-trigger:disabled { opacity: .38; cursor: default; filter: grayscale(.4); }
.spin-trigger:focus-visible, .spin-panel button:focus-visible, .spin-pad:focus-visible, .spin-panel input:focus-visible { outline: 3px solid #fff29a; outline-offset: 2px; }
.spin-trigger strong { font-size: .48rem; letter-spacing: .12em; }
.spin-preview { position: relative; width: 42px; height: 42px; border: 2px solid #e9fbff; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff 0 18%, #d7ecf7 48%, #8aa5b8 100%); box-shadow: inset -5px -7px 10px rgba(17,36,60,.28), 0 0 9px rgba(120,241,255,.42); }
.spin-preview::before, .spin-preview::after, .spin-pad::before, .spin-pad::after { content: ""; position: absolute; inset: 50% auto auto 50%; background: rgba(28,79,105,.23); transform: translate(-50%,-50%); pointer-events: none; }
.spin-preview::before, .spin-pad::before { width: 62%; height: 1px; }
.spin-preview::after, .spin-pad::after { width: 1px; height: 62%; }
.spin-preview i, .spin-pad i { position: absolute; z-index: 2; left: 50%; top: 50%; width: 9px; height: 9px; border: 2px solid white; border-radius: 50%; background: #ff3abf; box-shadow: 0 0 9px #ff45ca; transform: translate(-50%,-50%); pointer-events: none; }
.spin-panel { position: absolute; z-index: 4; left: 10px; bottom: 10px; width: min(214px, calc(100% - 20px)); padding: 11px; border: 1px solid rgba(111,240,255,.82); border-radius: 17px; color: #e9fbff; background: linear-gradient(155deg, rgba(15,15,49,.97), rgba(33,13,53,.97)); box-shadow: 0 16px 34px rgba(0,0,0,.58), 0 0 21px rgba(255,54,195,.22); backdrop-filter: blur(9px); touch-action: none; }
.spin-panel header { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.spin-panel header strong { color: #77f5ff; font-size: .66rem; letter-spacing: .13em; }
.spin-panel header span { overflow: hidden; color: #fff09a; font-size: .56rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.spin-panel p { margin: 4px 0 8px; color: #aeb5d2; font-size: .52rem; line-height: 1.25; }
.spin-pad { position: relative; width: 124px; height: 124px; margin: 0 auto 7px; border: 3px solid #e9fbff; border-radius: 50%; background: radial-gradient(circle at 35% 27%, #fff 0 17%, #d9edf8 48%, #87a4b9 100%); box-shadow: inset -15px -20px 25px rgba(18,36,64,.28), 0 0 15px rgba(109,241,255,.34); cursor: crosshair; }
.spin-pad i { width: 15px; height: 15px; border-width: 3px; }
.spin-panel label { display: grid; grid-template-columns: 34px 1fr 29px; align-items: center; min-height: 38px; gap: 5px; color: #b9c1df; font-size: .49rem; font-weight: 900; letter-spacing: .08em; }
.spin-panel input { width: 100%; min-height: 30px; accent-color: #f642c4; }
.spin-panel output { color: #fff09a; font-size: .54rem; text-align: right; }
.spin-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 7px; margin-top: 4px; }
.spin-actions button { min-height: 44px; border: 1px solid #716895; border-radius: 9px; color: #bfc5de; background: #24213e; font-size: .56rem; }
.spin-actions button:last-child { color: #06151d; border-color: #7af5ff; background: linear-gradient(180deg, #a2fbff, #48d6e8); box-shadow: 0 0 11px rgba(75,230,247,.3); }
.controls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px 7px; align-items: center; width: min(100%, 540px); margin: 11px auto 0; }
.power-wrap { --power: 0; --power-shift: 0%; grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(95px,1fr) 27px minmax(105px,auto); align-items: center; gap: 7px; color: #a6b2d7; font-size: .56rem; font-weight: 900; letter-spacing: .09em; }
.power-label { color: #75f8ff; text-shadow: 0 0 8px rgba(84,246,255,.55); }
.power-track { position: relative; height: 24px; overflow: hidden; border: 1px solid rgba(120,116,174,.9); border-radius: 8px; background: repeating-linear-gradient(90deg, transparent 0 9%, rgba(255,255,255,.1) 9.5% 10%, transparent 10.5% 20%), linear-gradient(180deg, #24203f, #0c0b1b); box-shadow: inset 0 2px 5px rgba(0,0,0,.7), 0 0 0 2px rgba(91,239,255,.06); }
.power-track i { position: absolute; inset: auto 0 0; display: block; width: 100%; height: 4px; background: linear-gradient(90deg, #47f6ff, #f72cc7 62%, #ffd45a); box-shadow: 0 0 10px #ff40cd; transform: scaleX(var(--power)); transform-origin: left center; transition: transform .035s linear; }
.power-cue-meter { position: absolute; z-index: 2; top: 1px; right: calc(14px + var(--power-shift)); width: 82%; height: 21px; background: url('/assets/q-ball-cue-v2.png') center / 100% auto no-repeat; filter: drop-shadow(0 0 4px rgba(83,242,255,.34)); transform: scaleX(-1); transform-origin: center; transition: right .035s linear, filter .1s; }
.power-stop { position: absolute; z-index: 3; top: 5px; right: 3px; width: 12px; height: 12px; border: 1px solid #fff; border-radius: 50%; background: radial-gradient(circle at 33% 27%, #fff 0 20%, #d7edf8 55%, #8098a9); box-shadow: 0 0 8px rgba(117,248,255,.55); }
.power-value { color: #ffdc72; font-size: .58rem; font-weight: 1000; text-align: right; text-shadow: 0 0 8px rgba(255,220,114,.5); }
.power-value::after { content: "%"; font-size: .4rem; }
.power-wrap strong { min-width: 105px; overflow: hidden; color: #fff09a; font-size: .51rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 7px rgba(255,210,77,.45); }
.power-wrap.charging .power-track { border-color: #75f8ff; box-shadow: inset 0 2px 5px rgba(0,0,0,.7), 0 0 12px rgba(84,246,255,.22); }
.power-wrap.charging .power-cue-meter { filter: drop-shadow(0 0 6px #ff4bcc) brightness(1.08); }
.power-wrap.firing .power-cue-meter { animation: meter-cue-strike .2s cubic-bezier(.2,.82,.3,1); }
@keyframes meter-cue-strike { 0% { transform: translateX(-8px) scaleX(-1); } 42% { transform: translateX(13px) scaleX(-1); filter: drop-shadow(0 0 9px #ffd45a) brightness(1.2); } 100% { transform: translateX(0) scaleX(-1); } }
.rematch, .lobby-return, .sound-toggle, .music-toggle, .sky-toggle { min-width: 0; padding: 8px 3px; border: 1px solid #745a99; border-radius: 8px; background: #252142; font-size: .49rem; white-space: nowrap; }.lobby-return { color: #ffc7ee; border-color: #8e3d79; background: #32152e; }.sound-toggle, .music-toggle, .sky-toggle { color: #7bf7ff; border-color: #287d91; background: #102a3a; }.sound-toggle[aria-pressed="false"], .music-toggle[aria-pressed="false"], .sky-toggle[aria-pressed="false"] { color: #858198; border-color: #49435d; background: #191725; }.music-toggle[aria-pressed="true"] { color: #fff3a6; border-color: #e84dbf; background: #3b1742; box-shadow: 0 0 10px rgba(255,61,196,.3); }.sky-toggle[aria-pressed="true"] { color: #fff3a6; border-color: #8d72dc; background: #241b52; box-shadow: 0 0 10px rgba(139,104,255,.32); }.music-now { grid-column: 1 / -1; min-width: 0; overflow: hidden; padding: 4px 8px; border: 1px solid rgba(255,72,205,.3); border-radius: 7px; color: #f8b8ec; background: rgba(43,14,58,.7); font-size: .53rem; text-overflow: ellipsis; white-space: nowrap; }.music-now:disabled { color: #70687d; border-color: #383344; background: rgba(19,17,30,.65); cursor: default; }.controls p { grid-column: 1 / -1; margin: 0; text-align: center; color: #9f9abc; font-size: .66rem; font-weight: 700; }
.rule-action { grid-column: 1 / -1; padding: 9px; border: 1px solid #ffe16c; border-radius: 8px; color: #ffe88c; background: rgba(101,60,16,.58); font-size: .6rem; }
.rule-action[aria-pressed="true"] { color: #130c28; background: linear-gradient(180deg, #fff49b, #ffbd3c); box-shadow: 0 0 15px rgba(255,211,71,.6); }
.choice-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.choice-actions button { padding: 10px 6px; border: 1px solid #5aefff; border-radius: 8px; color: #eaffff; background: linear-gradient(180deg, #16425b, #102438); font-size: .57rem; }
.choice-actions button:last-child { border-color: #ff71d8; background: linear-gradient(180deg, #59214f, #2f1533); }
.winner-overlay { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 25px; background: rgba(5,3,14,.72); backdrop-filter: blur(8px); }.winner-overlay > div { width: min(100%, 390px); padding: 32px 25px; text-align: center; border: 2px solid #71efff; border-radius: 22px; background: linear-gradient(145deg, #41206a, #150b33); box-shadow: 0 0 45px #f82fcb; }.winner-overlay p { margin: 0; color: #ffe478; letter-spacing: .16em; font-size: .66rem; font-weight: 900; }.winner-overlay h2 { margin: 8px 0 21px; color: #e9fbff; font-size: 3.2rem; line-height: .9; text-shadow: 0 4px 0 #69249e, 0 0 20px #fe3bc9; }.winner-overlay button { margin: 0; }
@media (min-width: 700px) { .game-screen { padding-top: 19px; }.table-shell { max-height: calc(100dvh - 195px); width: auto; }.lobby-screen { padding-top: min(26dvh, 236px); }.lobby-card { padding: 22px 34px 26px; } }
@media (max-height: 720px) {
  .lobby-screen { padding-top: 164px; }
  .lobby-marquee { top: 39px; width: min(82vw, 325px); }
  .lobby-card { padding: 10px 15px 11px; }
  .lobby-intro { margin-bottom: 5px; padding-bottom: 5px; }
  .lobby-pills, .microcopy { display: none; }
  .lobby-card input { margin-top: 4px; padding: 10px 11px; }
  .mode-picker { gap: 6px; margin-top: 9px; }
  .mode-option { padding: 6px; }
  .primary, .lobby-card .join-row button { margin-top: 9px; padding-block: 10px; }
  .or { margin: 10px 0 5px; }
  .join-row { gap: 6px; }
  .join-row button { margin: 0; }
  .lobby-message { margin-top: 8px; font-size: .72rem; }
  .game-screen { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(9px, env(safe-area-inset-bottom)); }
}
@media (max-height: 720px) and (max-width: 699px) {
  .game-header { display: none; }
  .scoreboard { grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr); }
  .player-panel { grid-template-columns: 29px minmax(0,1fr) auto; gap: 5px; min-height: 39px; padding: 3px 6px; }
  .player-panel.player-right { grid-template-columns: auto minmax(0,1fr) 29px; }
  .player-avatar { width: 28px; height: 28px; }
  .player-initials { font-size: .48rem; }
  .connection-dot { width: 8px; height: 8px; }
  .player-name { font-size: .49rem; }
  .player-state { font-size: .34rem; }
  .score { font-size: .98rem; }
  .balls-label { font-size: .34rem; }
  .versus span { padding: 1px 0; font-size: .45rem; }
  .versus small { display: block; }
  .status { min-height: 1em; margin: 3px auto; font-size: .62rem; }
  .table-shell { width: auto; height: min(calc(100dvh - 129px), calc((100vw - 24px) * 1.6)); max-width: 100%; }
  .controls { margin-top: 4px; gap: 3px 5px; }
  .power-wrap { grid-template-columns: auto minmax(70px,1fr) 22px minmax(68px,auto); gap: 4px; font-size: .45rem; }
  .power-track { height: 19px; }
  .power-cue-meter { top: 0; height: 18px; }
  .power-stop { top: 4px; width: 10px; height: 10px; }
  .power-value { font-size: .48rem; }
  .power-wrap strong { min-width: 68px; font-size: .39rem; }
  .rematch, .lobby-return, .sound-toggle, .music-toggle, .sky-toggle { padding: 5px 2px; font-size: .4rem; }
  .music-now, .controls p { display: none; }
}
@media (max-width: 380px) {
  .account-summary { grid-template-columns: 32px minmax(0,1fr) auto; gap: 7px; padding: 7px; }
  .account-avatar { width: 32px; height: 32px; font-size: .58rem; }
  .account-copy strong { font-size: .62rem; }
  .account-copy small { display: none; }
  .account-copy::after { content: "LOCAL PREVIEW"; color: #8edfe8; font-size: .39rem; font-weight: 850; letter-spacing: .06em; }
  .player-account[data-state="signed-out"] .account-copy::after { content: "SIGN IN TO SAVE"; }
  .player-account[data-state="signed-in"] .account-copy::after { content: "PROFILE CONNECTED"; color: #ffdc72; }
  .account-button { min-height: 30px; padding: 0 6px; font-size: .42rem; }
}
@media (prefers-reduced-motion: reduce) { .lobby-marquee *, .arcade-glow { animation: none !important; } }