:root{color:#fff;touch-action:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:#061b3a;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{min-height:100dvh;position:fixed;inset:0}button{color:#fff;letter-spacing:0;cursor:pointer;touch-action:manipulation;background:#0b2a54;border:2px solid #ffffffc2;border-radius:2px;min-height:44px;padding:0 18px;font:800 clamp(.7rem,1.65vw,.95rem)/1 Arial,Helvetica,sans-serif}button:focus-visible{outline-offset:3px;outline:3px solid #ffd82f}button:active{transform:translateY(2px)}#game-canvas{z-index:0;background:#061b3a;width:100vw;height:100dvh;display:block;position:fixed;inset:0}#ui{z-index:1;pointer-events:none;position:fixed;inset:0}.screen{padding:max(20px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));pointer-events:none;place-items:center;display:none;position:absolute;inset:0}.screen.is-active{pointer-events:auto;display:grid}.title-screen{background:#061b3a url(./ultimate-pong-cover-CzEZwjsH.png) 64%/cover no-repeat;align-content:center;justify-items:start;gap:clamp(20px,4vh,38px);padding-left:clamp(38px,11vw,180px)}.title-lockup{color:#fff;text-transform:uppercase;max-width:min(72vw,720px);font-weight:900;line-height:.74;display:grid}.title-lockup>span{color:#ff5050;letter-spacing:.18em;padding-left:.16em;font-size:clamp(1.1rem,3vw,2.4rem)}.title-lockup strong{letter-spacing:0;text-shadow:5px 5px #061b3a,8px 8px #ffd82fdb;font-size:clamp(4.2rem,13vw,10.5rem)}.title-lockup strong span{color:#ffd82f}.title-actions,.panel-actions{align-items:center;gap:12px;display:flex}.primary{color:#061b3a;border-color:#0000;min-width:154px}.primary.red{background:#ff5050}.primary.yellow{background:#ffd82f}.text-button{background:#061b3abd}.game-panel{background:#061b3ac7;border-top:2px solid #ffffffe6;border-bottom:2px solid #ffffffe6;gap:clamp(14px,2.4vh,24px);width:min(82vw,860px);padding:clamp(18px,3.4vw,40px) 0;display:grid;box-shadow:0 0 0 100vmax #010a1b3d}.setup-panel{grid-template-columns:minmax(0,1fr) minmax(250px,1.2fr);align-items:center}.panel-heading{gap:7px;display:grid}.panel-heading span,.difficulty-row>span,.entry-eyebrow{color:#ffd82f;letter-spacing:.14em;font-size:clamp(.66rem,1.5vw,.88rem);font-weight:900}.panel-heading h1{letter-spacing:0;max-width:8ch;margin:0;font-size:clamp(2.1rem,5vw,4.4rem);line-height:.84}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.mode-card{background:#082a55c2;border-color:#ffffff73;align-content:center;justify-items:center;gap:7px;min-height:clamp(110px,20vh,170px);padding:12px;display:grid}.mode-card.is-selected{background:#123d70;border-color:#fff;box-shadow:inset 0 -5px #ff5050}.mode-card:nth-child(2).is-selected{box-shadow:inset 0 -5px #ffd82f}.mode-card strong{font-size:clamp(.9rem,2vw,1.2rem)}.mode-card small{color:#ffffffad;letter-spacing:.09em;font-size:.64rem;font-weight:800}.mode-mark{color:#061b3a;place-items:center;width:32px;height:32px;font-size:1rem;display:grid}.red-mark{background:#ff5050}.yellow-mark{background:#ffd82f}.difficulty-row{grid-column:2;gap:8px;display:grid}.difficulty-row.is-hidden{visibility:hidden}.segmented{grid-template-columns:repeat(3,1fr);gap:5px;display:grid}.segmented button{color:#ffffffb8;background:#0b2a54;border-width:1px;min-height:36px;padding:0 8px;font-size:.64rem}.segmented button.is-selected{color:#061b3a;background:#ffd82f;border-color:#ffd82f}.setup-panel .panel-actions{grid-column:1/-1;justify-content:space-between}.tutorial-panel{width:min(88vw,1060px)}.tutorial-grid{grid-template-columns:repeat(3,1fr);gap:clamp(10px,2vw,26px);display:grid}.tutorial-step{border-top:1px solid #fff6;align-content:start;gap:9px;min-height:168px;padding:12px 8px;display:grid}.tutorial-step h2{margin:0;font-size:clamp(.9rem,1.8vw,1.18rem)}.tutorial-step p{color:#ffffffc7;margin:0;font-size:clamp(.66rem,1.35vw,.82rem);font-weight:700;line-height:1.38}.tutorial-icon{width:56px;height:42px;position:relative}.paddle-icon{width:14px;height:46px}.red-fill{background:#ff5050}.yellow-fill{background:#ffd82f}.meter-icon{border:2px solid #fff;grid-template-columns:repeat(5,1fr);gap:4px;width:88px;height:22px;padding:4px;display:grid}.meter-icon i{background:#ffd82f}.meter-icon i:nth-child(odd){background:#ff5050}.pressure-icon{align-items:end;gap:8px;display:flex}.pressure-icon i{width:18px}.pressure-icon i:first-child{height:24px}.pressure-icon i:last-child{height:42px}.tutorial-panel .panel-actions{justify-content:space-between}.court-entry{background:#061b3a2e}.entry-content{text-align:center;justify-items:center;gap:16px;display:grid}.entry-content strong{text-shadow:4px 4px #ff5050;font-size:clamp(2.7rem,7vw,6.2rem);line-height:.82}.entry-lanes{grid-template-columns:repeat(3,72px);gap:7px;display:grid}.entry-lanes i{background:#fff;height:8px;animation:.92s steps(2,end) infinite lane-flash}.entry-lanes i:nth-child(2){background:#ff5050;animation-delay:.12s}.entry-lanes i:nth-child(3){background:#ffd82f;animation-delay:.24s}@keyframes lane-flash{50%{opacity:.22}}.hud{top:max(10px, env(safe-area-inset-top));left:max(14px, env(safe-area-inset-left));right:max(14px, env(safe-area-inset-right));z-index:2;pointer-events:none;grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) minmax(150px,1fr);align-items:start;gap:clamp(10px,2.2vw,32px);display:none;position:absolute}.hud.is-active{display:grid}.side-status{gap:4px;display:grid}.opponent-status{justify-items:end}.status-label{letter-spacing:.1em;justify-content:space-between;align-items:baseline;gap:12px;width:100%;font-size:.75rem;font-weight:900;display:flex}.status-label strong{letter-spacing:0;font-size:clamp(1.6rem,3.5vw,2.9rem);line-height:.75}.player-status .status-label span{color:#ff5050}.opponent-status .status-label span{color:#ffd82f}.meter{background:#061b3aad;border:1px solid #ffffffb8;width:100%;height:8px;overflow:hidden}.meter i{width:0%;height:100%;transition:width .13s linear;display:block}.player-status .meter i{background:#ff5050}.opponent-status .meter i{background:#ffd82f}.side-status small{color:#ffffffbf;letter-spacing:.08em;font-size:.56rem;font-weight:800}.match-center{text-align:center;justify-items:center;gap:5px;padding-top:2px;display:grid}.match-center span{letter-spacing:.12em;font-size:clamp(.56rem,1.3vw,.72rem);font-weight:900}.match-center b{color:#ffffffd1;letter-spacing:.08em;font-size:clamp(.52rem,1.1vw,.64rem)}.match-center b.is-fireball{color:#ffd82f}.pause-button{top:max(8px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));pointer-events:auto;background:#061b3ab3;border-color:#ffffffa3;grid-template-columns:repeat(2,5px);place-content:center;gap:4px;min-width:34px;min-height:34px;padding:0;display:grid;position:fixed}.pause-button span{background:#fff;width:5px;height:13px}.overlay{background:#010a1ba8}.compact-panel{text-align:center;justify-items:center;width:min(58vw,480px)}.compact-panel .panel-heading h1{max-width:none}.stacked-actions{width:min(100%,290px);display:grid}.final-score{color:#fff;align-items:center;gap:18px;font-size:clamp(3rem,7vw,5.2rem);font-weight:900;line-height:1;display:flex}.final-score span:first-child{color:#ff5050}.final-score span:last-child{color:#ffd82f}.final-score i{background:#fff;width:10px;height:10px}.orientation-notice{z-index:8;color:#fff;letter-spacing:.12em;text-align:center;background:#061b3a;place-content:center;justify-items:center;gap:18px;font-size:.9rem;font-weight:900;display:none;position:absolute;inset:0}.rotate-mark{border:3px solid #fff;width:62px;height:42px;position:relative}.rotate-mark i:first-child{border-top:3px solid #ffd82f;border-right:3px solid #ffd82f;width:18px;height:18px;position:absolute;top:-12px;right:-12px}.rotate-mark i:last-child{border-bottom:3px solid #ff5050;border-left:3px solid #ff5050;width:18px;height:18px;position:absolute;bottom:-12px;left:-12px}@media (height<=520px){.title-screen{gap:16px}.game-panel{gap:12px;padding-top:14px;padding-bottom:14px}.tutorial-step{min-height:132px}.tutorial-icon{transform-origin:0 0;margin-bottom:-8px;transform:scale(.82)}.mode-card{min-height:92px}}@media (width<=760px) and (orientation:landscape){.title-screen{padding-left:28px}.title-lockup{max-width:80vw}.game-panel{width:min(92vw,860px)}.setup-panel{grid-template-columns:minmax(150px,.85fr) minmax(250px,1.35fr)}.hud{grid-template-columns:minmax(100px,1fr) minmax(110px,.9fr) minmax(100px,1fr);gap:9px}.side-status small{font-size:.47rem}}@media (orientation:portrait){.orientation-notice{display:grid}}