body.pong-realtime{margin:0;color:#ecf7fa;background:#081925;font:16px/1.45 system-ui,sans-serif}
.pong-realtime *{box-sizing:border-box}.pong-realtime [hidden]{display:none!important}
.pong-realtime button,.pong-realtime select{font:inherit;color:inherit;min-height:48px;border:1px solid #49616d;border-radius:12px;background:#223b49;padding:10px 16px;cursor:pointer}
.pong-realtime button:focus-visible,.pong-realtime a:focus-visible,.pong-realtime canvas:focus-visible{outline:3px solid #ffe29b;outline-offset:3px}.pong-realtime button:disabled{opacity:.5;cursor:default}
.pong-realtime .pw-primary{color:#17232a;background:linear-gradient(120deg,#ffeaaa,#ffc94d);border-color:#ffdc78;font-weight:800}
.pw-main{max-width:920px;margin:auto;padding:16px}.pw-header{display:grid;grid-template-columns:58px 1fr 58px;gap:8px;align-items:center;min-height:64px;margin-bottom:16px}.pw-header h1{margin:0;text-align:center;font-size:24px}
.pw-return{display:flex;align-items:center;justify-content:center;width:58px;height:48px;border-radius:12px;background:#ffe098;color:#253843;text-decoration:none;font-weight:900;font-size:24px}.pw-return img{width:26px;height:26px;object-fit:contain}
.pong-realtime .pw-icon{width:48px;height:48px;padding:0;font-size:24px}.pw-intro{display:grid;grid-template-columns:420px minmax(0,1fr);align-items:center;gap:24px}.pw-poster{width:420px;height:420px;display:block;object-fit:contain;border:2px solid #73e7d2;border-radius:22px}.pw-copy{min-width:0}.pw-copy p{margin:0 0 12px}#record{color:#73e7d2;font-size:14px}.pong-realtime #startBtn{height:52px;width:100%}
.pw-guide-link{display:block;margin:16px auto}.pw-guide{border:1px solid #355968;background:#102c3a;border-radius:18px;padding:16px;color:#f4fbff}.pw-guide :is(h2,p){color:inherit}.pw-guide p:first-of-type{margin-top:0}.pw-guide p:last-child{margin-bottom:0}
html.pw-active,html.pw-active body{height:100%;overflow:hidden;overscroll-behavior:none}
.pw-battle{position:fixed;inset:0;max-width:920px;margin:auto;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:grid;grid-template-rows:minmax(0,1fr) 56px}.pw-canvas{min-height:0;overflow:hidden;background:#102432}.pw-reserve{height:56px;background:#09131e;pointer-events:none}
#livePanel{height:100%;min-height:0;display:grid;grid-template-rows:56px minmax(0,1fr) 64px 56px;gap:8px;padding:10px}.pw-hud{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:8px}.pw-score{display:flex;align-items:center;justify-content:center;gap:20px;font-weight:800;font-size:clamp(16px,3vw,23px)}.pw-score .you{color:#81eed1}.pw-score .cpu{color:#ffb1a5}
#courtWrap{min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;position:relative;container-type:size}#court{width:min(100cqw,100cqh);height:min(100cqw,100cqh);max-width:100%;max-height:100%;aspect-ratio:1;touch-action:none;border-radius:12px;display:block}.pw-court-cue{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#0a1d2dee;border:1px solid #698290;border-radius:16px;padding:12px 20px;max-width:90%;text-align:center;pointer-events:none;font-weight:700}
#gameMessage{margin:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:15px;line-height:1.4;min-width:0}.pw-controls{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;gap:12px;direction:ltr}.pw-controls button{touch-action:none}
#resultPanel{height:100%;overflow:auto;padding:24px;display:flex;flex-direction:column;justify-content:center;text-align:center;align-items:center;gap:20px}#resultPanel h2,#resultPanel p{margin:0}#resultTitle{font-size:32px}#resultScore{font-size:56px;font-weight:850;color:#ffe098}.pw-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:480px}
.pong-realtime dialog{width:min(92vw,500px);max-height:80dvh;overflow:auto;margin:auto;padding:22px;background:#133141;color:#eef8ff;border:1px solid #7dabae;border-radius:20px}.pong-realtime dialog::backdrop{background:#020b16bb}.pong-realtime dialog h2{margin:0 0 12px}.pong-realtime dialog button,.pong-realtime dialog select{display:block;width:100%;margin:10px 0}
@media(min-width:700px) and (max-height:500px){#mainScreen.pw-main{padding:6px 12px}.pw-header{min-height:48px;margin-bottom:12px}.pw-intro{grid-template-columns:420px minmax(0,1fr)}.pw-poster{width:420px;height:420px}}
@media(max-width:699px){.pw-main{padding:12px}.pw-header{grid-template-columns:58px 1fr 58px;grid-template-rows:48px 32px;height:88px;min-height:88px;margin-bottom:12px}.pw-header h1{grid-row:2;grid-column:1/4;font-size:24px}.pw-header .pw-icon{grid-column:3;grid-row:1;justify-self:end}.pw-intro{display:flex;flex-direction:column;gap:12px}.pw-poster{width:100%;height:auto;aspect-ratio:1}.pw-copy{width:100%}}
@media(orientation:landscape) and (max-height:500px){#livePanel{grid-template-columns:minmax(0,1fr) minmax(230px,.85fr);grid-template-rows:56px minmax(0,1fr) 56px;gap:8px 16px}#courtWrap{grid-column:1;grid-row:1/4}.pw-hud{grid-column:2;grid-row:1}#gameMessage{grid-column:2;grid-row:2}.pw-controls{grid-column:2;grid-row:3}.pw-score{font-size:16px;gap:10px}#resultPanel{justify-content:flex-start;gap:12px;padding:12px}#resultScore{font-size:36px}}