:root {
  --navy: #141c45;
  --navy2: #0c1233;
  --gold: #ffcc33;
  --green: #31d52b;
  --red: #e2322c;
  --hud-h: 52px;   /* set from renderer.js (HUD_H, SIDE_W) */
  --side-w: 96px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #070a1f; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
body { font-family: 'Fira Sans', system-ui, sans-serif; font-weight: 800; color: #fff; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }

#viewport { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage {
  position: relative; width: 1600px; height: 900px; flex: none; /* sized by App.fit() */ transform-origin: 50% 50%;
  background: url(../assets/ui/BackgroundPattern.png) repeat, radial-gradient(ellipse at center, #1f2c6e 0%, #0d1440 75%);
  background-blend-mode: soft-light, normal; background-size: 256px, cover; overflow: hidden;
}
.screen { position: absolute; inset: 0; }
.hidden { display: none !important; }

/* ---------------- match ---------------- */
#gl { position: absolute; inset: 0; width: 100%; height: 100%; }
#hud-top { position: absolute; left: 0; right: 0; top: 0; height: var(--hud-h); display: flex; justify-content: center; align-items: center; gap: 28px; pointer-events: none; }
.player { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.player.p0 { flex-direction: row-reverse; }
.pname { font-size: 22px; text-shadow: 0 2px 2px #000a; white-space: nowrap; }
.avatar { position: relative; flex: none; width: 40px; height: 40px; border-radius: 5px; background: #20284e; box-shadow: 0 0 0 2px #8b8fa8; }
.avatar .pic { position: absolute; inset: 2px; width: 36px; height: 36px; object-fit: cover; border-radius: 3px; }
.avatar .timer { position: absolute; inset: -3px; width: 46px; height: 46px; transform: scaleX(-1); }
.avatar .timer rect { fill: none; stroke: var(--green); stroke-width: 9; stroke-dasharray: 100 100; stroke-dashoffset: 0; opacity: 0; }
.player.active .avatar .timer rect { opacity: 1; }
.player.active .avatar { box-shadow: 0 0 0 2px var(--green), 0 0 12px #31d52b88; }
.player.warn .avatar .timer rect { stroke: var(--red); }
.slots { display: flex; gap: 5px; }
.p0 .slots { flex-direction: row-reverse; }
.slot { width: 32px; height: 32px; background: url(../assets/ui/BallSlot.png) center/100% 100%; border-radius: 50%; position: relative; }
.slot img { position: absolute; inset: -1px; width: 34px; height: 34px; }
.slot.target { box-shadow: 0 0 8px 2px #ffe56a; }

#side { position: absolute; left: 0; top: var(--hud-h); bottom: 0; width: var(--side-w); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
#spin-btn { position: relative; width: 68px; height: 68px; }
#spin-btn img { width: 100%; height: 100%; }
#spin-btn .dot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; left: 50%; top: 50%; border-radius: 50%; border: 4px solid var(--red); background: #fff; }

#power { position: relative; width: 68px; height: 480px; touch-action: none; cursor: ns-resize; }
#power .bg { position: absolute; left: 8px; right: 8px; top: 8px; bottom: 8px; background: url(../assets/ui/ShotControlBG.png) center/100% 100%; border-radius: 4px; }
#power .fg { position: absolute; inset: 0; background: url(../assets/ui/ShotControlFG.png) center/100% 100%; pointer-events: none; }
#power .cue { position: absolute; left: 27px; width: 14px; top: 300px; height: 460px; background: url(../assets/ui/ShotControlCue.png) center top/100% 100% no-repeat; pointer-events: none; }
#power .hit { position: absolute; inset: -20px -14px; }
#power.disabled { filter: grayscale(.8) brightness(.7); }

.round { width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(#3b4a9b, #1b2257); box-shadow: 0 0 0 3px #9aa6e6, 0 4px 8px #0008; display: flex; align-items: center; justify-content: center; }
.round img { width: 42px; }

#banner { position: absolute; left: 0; right: 0; top: calc(50% - 60px); height: 120px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#banner .txt { font-size: 64px; font-weight: 900; padding: 6px 70px; letter-spacing: 1px; text-transform: uppercase;
  background: linear-gradient(90deg, transparent, rgba(10, 20, 70, .85) 20%, rgba(10, 20, 70, .85) 80%, transparent);
  text-shadow: 0 4px 0 #0a1640, 0 0 18px #4da3ff; animation: pop .35s ease-out; }
#banner.mine .txt { color: #fff; text-shadow: 0 4px 0 #0a5a10, 0 0 22px #5dff57; }
#banner.theirs .txt { color: #ffd1d1; text-shadow: 0 4px 0 #5a0a0a, 0 0 22px #ff5757; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

#foul { position: absolute; left: calc(50% - 190px); top: calc(50% - 170px); width: 380px; pointer-events: none; text-align: center; animation: pop .3s ease-out; }
#foul img { width: 380px; border-radius: 18px; box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--red), 0 10px 30px #000a; }
#foul .txt { margin-top: 14px; font-size: 34px; background: var(--red); border-radius: 10px; padding: 6px 12px; box-shadow: 0 4px 0 #7a0d0a; }
#foul.ok .txt { background: #1e8f2a; box-shadow: 0 4px 0 #0d4a14; }

.modal { position: absolute; inset: 0; background: rgba(0, 0, 10, .55); display: flex; align-items: center; justify-content: center; }
.panel { min-width: 420px; padding: 28px 34px; border-radius: 20px; background: linear-gradient(#2d3e9a, #151d55); box-shadow: 0 0 0 4px #8fa0ff, 0 20px 50px #000b; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.panel .title { font-size: 34px; text-align: center; }
.panel .sub { font-size: 24px; opacity: .85; }
.panel.big { min-width: 620px; padding: 40px; }
.panel .row { display: flex; gap: 18px; }
.panel .note { font-size: 17px; font-weight: 600; opacity: .7; }
.btn { min-width: 220px; padding: 14px 26px; font-size: 26px; border-radius: 14px; background: linear-gradient(#ffd84a, #f39a12); color: #3b1c00; box-shadow: 0 5px 0 #a0560a, 0 8px 14px #0007; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #a0560a; }
.btn.red { background: linear-gradient(#ff7a6a, #d42a1f); color: #fff; box-shadow: 0 5px 0 #7d140e; }
#spin-dialog .ballwrap { position: relative; width: 300px; height: 300px; touch-action: none; cursor: crosshair; }
#spin-dialog .ballwrap img { width: 100%; height: 100%; pointer-events: none; }
#spin-dialog .sight { position: absolute; width: 70px !important; height: 70px !important; margin: -35px 0 0 -35px; left: 50%; top: 50%; }
#spin-dialog .labels { font-size: 18px; opacity: .8; }

#loading { background: var(--navy2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; z-index: 50; }
#loading .bar { width: 600px; height: 24px; border-radius: 12px; background: #1f2a66; overflow: hidden; box-shadow: 0 0 0 3px #4a5bb5; }
#loading .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd84a, #f39a12); transition: width .2s; }
#loading .lbl { font-size: 26px; }