:root{--black: #000000;--panel: #101018;--panel-strong: #171725;--white: #ffffff;--muted: #b9bfcb;--cyan: #18ddff;--cyan-soft: rgb(24 221 255 / 42%);--magenta: #ff2f9b;--magenta-soft: rgb(255 47 155 / 42%);--focus: #7df3ff;--safe: 8px}*{box-sizing:border-box;margin:0;padding:0}html,body{width:600px;height:600px;overflow:hidden;background:var(--black)}body{color:var(--white);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;touch-action:none}button{color:inherit;font:inherit}.app-root{position:relative;width:600px;height:600px;padding:var(--safe);overflow:hidden;background:var(--black)}.screen{position:absolute;inset:var(--safe);width:584px;height:584px;overflow:hidden}.hidden{display:none!important}.eyebrow{color:var(--cyan);font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.focusable{min-height:88px;border:2px solid transparent;opacity:.82;transition:transform 475ms cubic-bezier(.6,0,.4,1),opacity .3s cubic-bezier(.4,.04,.5,1),border-color .3s cubic-bezier(.4,.04,.5,1),box-shadow .3s cubic-bezier(.4,.04,.5,1)}.focusable:focus{outline:none;border-color:var(--focus);box-shadow:0 0 24px #18ddff61;opacity:1;transform:scale(.94)}.focusable:active{transform:scale(.9);transition-duration:.1s}.button-content{opacity:.82}.focusable:focus .button-content{opacity:1}#home-screen{display:grid;grid-template-rows:248px auto 88px auto;align-content:start}.home-visual{position:relative;overflow:hidden;border-radius:34px;background:radial-gradient(circle at center,rgb(255 255 255 / 13%),transparent 31%),linear-gradient(90deg,rgb(24 221 255 / 8%),transparent 48%,rgb(255 47 155 / 8%))}.home-visual:before,.home-visual:after{position:absolute;content:"";top:28px;bottom:28px;width:2px;background:linear-gradient(transparent,var(--white),transparent);opacity:.42}.home-visual:before{left:42px}.home-visual:after{right:42px}.hero-mallet,.hero-puck{position:absolute;display:block;object-fit:contain;filter:drop-shadow(0 0 12px currentColor)}.hero-mallet{width:172px;height:172px;top:35px}.hero-mallet-ai{right:54px;color:var(--magenta);transform:rotate(8deg)}.hero-mallet-player{left:54px;color:var(--cyan);transform:rotate(-8deg)}.hero-puck{z-index:2;top:78px;left:242px;width:100px;height:100px;color:var(--white)}.energy-line{position:absolute;left:50%;top:50%;width:390px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--white),var(--magenta));box-shadow:0 0 15px var(--white);transform:translate(-50%,-50%)}.home-copy{padding:20px 16px 14px;text-align:center}.home-copy h1{margin-top:3px;font-size:34px;line-height:1.05;letter-spacing:-.04em}.home-copy>p:last-child{margin-top:7px;color:var(--muted);font-size:16px;font-weight:650}.home-actions{display:grid;grid-template-columns:1.3fr 1fr 88px;gap:10px}.action-button,.icon-button,.back-button,.pause-button{border-radius:24px;background:var(--panel);border-color:#ffffff21;cursor:pointer;font-size:16px;font-weight:800}.action-primary{color:#001014;background:var(--cyan);border-color:var(--white);box-shadow:0 0 24px var(--cyan-soft)}.icon-button{font-size:27px}.best-score{padding-top:13px;color:var(--muted);font-size:14px;font-weight:700;text-align:center}#help-screen{display:flex;flex-direction:column;gap:18px;padding:16px}.panel-header{display:flex;align-items:center;gap:18px;min-height:104px;padding:8px 18px;border-radius:28px;background:var(--panel)}.panel-header h2{font-size:28px}.back-button{width:88px;height:88px;flex:0 0 88px;font-size:34px}.help-content{display:grid;gap:10px}.help-step{display:flex;align-items:center;min-height:92px;gap:18px;padding:12px 20px;border:1px solid rgb(255 255 255 / 12%);border-radius:22px;background:var(--panel-strong)}.step-number{display:grid;width:48px;height:48px;flex:0 0 48px;place-items:center;border:2px solid var(--cyan);border-radius:50%;color:var(--cyan);font-size:20px;font-weight:900}.help-step strong,.help-step span{display:block}.help-step strong{font-size:18px}.help-step div span{margin-top:3px;color:var(--muted);font-size:14px}.help-play{width:100%;margin-top:auto}.game-screen{background:var(--black);touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}#game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:584px;height:584px;background:var(--black);touch-action:none}#game-canvas:focus{outline:none}.scoreboard{position:absolute;z-index:4;top:10px;left:98px;right:98px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:58px;padding:7px 12px 9px;border:1px solid rgb(184 239 255 / 62%);border-radius:22px;background:linear-gradient(90deg,rgb(255 47 155 / 34%),transparent 35%,transparent 65%,rgb(24 221 255 / 34%)),linear-gradient(180deg,#261f4ff5,#0a1830f5);box-shadow:-10px 0 28px #ff2f9b40,10px 0 28px #18ddff40,inset 0 1px #ffffff59,0 8px 28px #0000009e;overflow:hidden}.scoreboard:after{position:absolute;right:14px;bottom:4px;left:14px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--magenta),#ffffff 50%,var(--cyan));box-shadow:0 0 10px #fff;content:""}.score{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.score strong{color:var(--white);font-size:29px;line-height:1}.score-ai,.score-player{min-height:38px;padding:5px 10px;border-radius:13px}.score-ai{background:linear-gradient(90deg,rgb(255 47 155 / 24%),transparent)}.score-player{justify-content:flex-end;background:linear-gradient(270deg,rgb(24 221 255 / 24%),transparent)}.score-ai strong{color:#ff6db8;text-shadow:0 0 12px var(--magenta)}.score-player strong{color:#72efff;text-shadow:0 0 12px var(--cyan)}.round-status{min-width:74px;padding:7px 8px;color:#fff;border:1px solid rgb(255 255 255 / 22%);border-radius:999px;background:#080c21b8;box-shadow:inset 0 0 12px #7ee0ff1f;font-size:12px;font-weight:800;text-align:center;text-shadow:0 0 8px rgb(255 255 255 / 55%)}.pause-button{position:absolute;z-index:5;top:8px;right:8px;width:80px;min-height:64px;color:#d9faff;border-color:#72efff7a;border-radius:20px;background:linear-gradient(145deg,#1b3c57f5,#141436f5);box-shadow:0 0 20px #18ddff2e,inset 0 1px #ffffff3d;font-size:20px}.game-message{position:absolute;z-index:10;top:88px;right:28px;bottom:28px;left:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;border:1px solid rgb(255 255 255 / 18%);border-radius:34px;background:#101018f5;box-shadow:0 0 60px #000000c7;text-align:center}.game-message h2{margin-top:6px;font-size:42px;line-height:1}.game-message>p:not(.eyebrow){margin-top:12px;color:var(--muted);font-size:16px}.message-actions{display:grid;grid-template-columns:1.2fr 1fr 1fr;width:100%;gap:10px;margin-top:28px}.message-actions .action-button{min-height:88px}.asset-status{position:absolute;z-index:20;left:50%;bottom:24px;transform:translate(-50%);padding:12px 22px;border:1px solid var(--cyan);border-radius:22px;color:var(--white);background:var(--panel);font-size:14px;font-weight:750}@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}