/* Lovebug Air Hockey: the stage, the words over it and the little HUD. */

.hockey-wrap{position:relative}
#hockeyStage{height:clamp(360px,64vh,720px);border-radius:24px;overflow:hidden;touch-action:none;background:#120a1f;box-shadow:0 0 0 1px rgba(255,95,168,.35),0 0 40px rgba(255,95,168,.18),0 20px 50px rgba(18,12,26,.55);cursor:none;user-select:none;-webkit-user-select:none}
#hockeyStage canvas{display:block;width:100%;height:100%;touch-action:none}
.hockey-overlay{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:#fff;font:italic 700 clamp(26px,5vw,52px) Georgia,serif;text-shadow:0 0 18px #ff5fa8,0 0 38px #ff5fa8;letter-spacing:.02em;text-align:center;padding:0 18px}
.hockey-overlay.is-big{font-size:clamp(64px,14vw,150px);animation:hockey-pop .5s ease-out}
.hockey-overlay:empty{display:none}
@keyframes hockey-pop{from{transform:scale(1.35);opacity:0}to{transform:none;opacity:1}}
.hockey-hud{position:absolute;left:14px;bottom:14px;display:flex;gap:10px;align-items:center;pointer-events:none}
.hockey-hud b{padding:7px 12px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(18,10,31,.72);color:#ffe3f1;font:600 15px/1.2 Georgia,serif;backdrop-filter:blur(6px)}
.hockey-ping{padding:6px 10px;border-radius:999px;background:rgba(40,190,120,.2);border:1px solid rgba(80,230,150,.45);color:#b6ffd6;font:600 12px/1 ui-monospace,Menlo,monospace}
.hockey-ping.is-slow{background:rgba(240,170,40,.2);border-color:rgba(255,200,80,.5);color:#ffe2a2}
.hockey-row{align-items:center;justify-content:space-between}
.hockey-targets{display:flex;gap:8px;flex-wrap:wrap}
.hockey-targets button[aria-pressed="true"]{border-color:#b34978;background:#f7e2ea;color:#8f2f55}
#hockeyReady.is-waiting{background:#fff;color:#b34978;border:1px solid #b34978}
/* Full screen, or the fallback when a browser will not go full screen. */
.hockey-wrap:fullscreen{background:#120a1f}
.hockey-wrap:fullscreen #hockeyStage,.hockey-wrap.is-expanded #hockeyStage{height:100vh;height:100dvh;border-radius:0}
.hockey-wrap.is-expanded{position:fixed;inset:0;z-index:3000;background:#120a1f;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
body.hockey-expanded{overflow:hidden}
.hockey-wrap .bowl-expand{z-index:5}
.hockey-wrap:fullscreen .bowl-expand,.hockey-wrap.is-expanded .bowl-expand{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
@media(max-width:600px){.hockey-row{flex-direction:column;align-items:stretch}.hockey-row .primary{width:100%}.hockey-hud{left:10px;bottom:10px}.hockey-hud b{font-size:13px}}
@media(prefers-reduced-motion:reduce){.hockey-overlay.is-big{animation:none}}

/* Ready, on the table: big, centred, above the countdown words. */
.hockey-ready{position:absolute;left:50%;bottom:max(64px,calc(env(safe-area-inset-bottom) + 56px));transform:translateX(-50%);z-index:6;min-width:200px;min-height:52px;font-size:18px;box-shadow:0 0 0 2px rgba(255,255,255,.25),0 10px 30px rgba(255,79,154,.45)}
.hockey-ready[hidden]{display:none}
.hockey-ready.is-waiting{background:#fff;color:#b34978;border:1px solid #b34978}