.pg-play .g-layout{gap:var(--sp-6);padding:var(--sp-8) 0 var(--sp-24);grid-template-columns:minmax(0,1fr) 320px;display:grid}.pg-play .side-col{gap:var(--sp-5);flex-direction:column;display:flex}.pg-play .stage{background:var(--code-bg);color:var(--code-fg);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);flex-direction:column;min-height:520px;display:flex;overflow:hidden}.pg-play .stage .muted{color:var(--muted)}.pg-play .lobby{padding:var(--sp-8);gap:var(--sp-6);flex-direction:column;flex:1;display:flex}.pg-play .lobby h2{color:#fff;margin-top:var(--sp-2);font-size:clamp(28px,4vw,40px);line-height:1.2}.pg-play .lobby h2+p{margin-top:var(--sp-2)}.pg-play .lobby h2 em{color:var(--volt-hi);font-style:normal}.pg-play .pick h4{font-family:var(--display);font-size:var(--fs-md);color:var(--ink);margin-bottom:var(--sp-2);font-weight:600}.pg-play .seg{gap:var(--sp-2);flex-wrap:wrap;display:flex}.pg-play .seg button{font-family:var(--mono);font-size:var(--fs-ui);min-height:var(--h-control);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-md);border:1px solid var(--line-strong);color:var(--code-fg);background:#ffffff08}.pg-play .seg button:hover{border-color:var(--sky)}.pg-play .seg button[aria-pressed=true]{color:var(--volt-soft);background:#3b9bff29;border-color:#3b9bff80;font-weight:700}.pg-play .seg button small{font-size:var(--fs-xs);opacity:.7;font-weight:400;display:block}.pg-play .rules{gap:var(--sp-3);grid-template-columns:repeat(3,1fr);display:grid}.pg-play .rules div{border:1px solid var(--line-strong);border-radius:var(--r-md);padding:var(--sp-3);font-size:var(--fs-ui);color:var(--ink-soft)}.pg-play .rules b{font-family:var(--mono);color:#fff;font-size:var(--fs-lg);display:block}.pg-play .lobby-foot{justify-content:space-between;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-top:auto;display:flex}.pg-play .start{min-height:var(--h-control-lg);font-size:var(--fs-md);padding:var(--sp-3) var(--sp-6)}.pg-play .keys-hint{font-size:var(--fs-sm)}.pg-play .hud{gap:var(--sp-4);padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:var(--fs-sm);grid-template-columns:auto 1fr auto auto;align-items:center;display:grid}.pg-play .hud>span{align-items:center;gap:var(--sp-1);display:inline-flex}.pg-play .hud b{color:#fff;font-size:var(--fs-md)}.pg-play .timer{background:var(--soft);border-radius:var(--r-pill);height:8px;overflow:hidden}.pg-play .timer i{background:var(--grad);transform-origin:0;height:100%;display:block}.pg-play .timer.low i{background:var(--signal)}.pg-play .combo{padding:var(--sp-1) var(--sp-2);border-radius:var(--r-pill);border:1px solid var(--line-strong)}.pg-play .combo.hot{background:var(--signal);border-color:var(--signal);color:#fff}.pg-play .combo.hot b{color:#fff}.pg-play .play-area{flex:1;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);display:grid}.pg-play .code-pane{padding:var(--sp-6);border-right:1px solid var(--line);gap:var(--sp-3);flex-direction:column;display:flex}.pg-play .code-pane .q{font-size:var(--fs-lg);color:#fff}.pg-play .code-head{justify-content:space-between;align-items:center;gap:var(--sp-3);display:flex}.pg-play .code-pane pre{font-size:var(--fs-md);background:var(--paper);color:var(--code-fg);flex:1;line-height:1.8}.pg-play .ans-pane{padding:var(--sp-6);gap:var(--sp-2);flex-direction:column;display:flex}.pg-play .ans{gap:var(--sp-3);text-align:left;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);border:1px solid var(--line-strong);color:var(--code-fg);font-family:var(--mono);font-size:var(--fs-md);background:#ffffff08;align-items:center;transition:border-color .12s,transform .12s;display:flex}.pg-play .ans:hover:not(:disabled){border-color:var(--volt);background:#3b9bff14;transform:translate(3px)}.pg-play .ans .k{font-size:var(--fs-xs);border-radius:var(--r-sm);border:1px solid var(--line-strong);width:24px;height:24px;color:var(--muted);flex:none;place-items:center;display:grid}.pg-play .ans:disabled{cursor:default}.pg-play .ans.right{color:var(--ok-soft);background:#34d39924;border-color:#34d39999}.pg-play .ans.right .k{color:var(--ok-soft);border-color:#34d39999}.pg-play .ans.wrong{color:var(--signal-soft);background:#ff6a3d1a;border-color:#ff6a3d99}.pg-play .ans.dim{opacity:.4}.pg-play .feedback{border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);background:var(--card);border:1px dashed var(--line-strong);font-size:var(--fs-ui);color:var(--ink-soft);margin-top:auto;line-height:1.7}.pg-play .feedback .head{font-family:var(--mono);margin-bottom:var(--sp-1);justify-content:space-between;align-items:center;display:flex}.pg-play .feedback .head .muted{font-weight:400}.pg-play .feedback .ok{color:var(--ok-soft);font-weight:700}.pg-play .feedback .bad{color:var(--signal);font-weight:700}.pg-play .pts-pop{font-family:var(--mono);color:#fff;font-weight:700}.pg-play .next-row{justify-content:space-between;align-items:center;gap:var(--sp-2);display:flex}.pg-play .result{padding:var(--sp-8);gap:var(--sp-6);flex-direction:column;flex:1;display:flex}.pg-play .res-top{justify-content:space-between;align-items:end;gap:var(--sp-5);flex-wrap:wrap;display:flex}.pg-play .res-top .score{font-family:var(--mono);color:var(--volt-hi);margin-top:var(--sp-2);font-size:clamp(48px,8vw,80px);font-weight:700;line-height:1}.pg-play .res-top h2{color:#fff;font-size:var(--fs-2xl);margin-top:var(--sp-2)}.pg-play .res-top .muted{font-size:var(--fs-sm)}.pg-play .newbest{align-items:center;gap:var(--sp-1);font-family:var(--mono);font-size:var(--fs-xs);color:var(--volt-soft);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-pill);background:#2962ff33;border:1px solid #3b9bff80;display:inline-flex}.pg-play .res-grid{gap:var(--sp-3);grid-template-columns:repeat(4,1fr);display:grid}.pg-play .res-grid div{border:1px solid var(--line-strong);border-radius:var(--r-md);padding:var(--sp-3)}.pg-play .res-grid b{align-items:center;gap:var(--sp-1);font-family:var(--mono);font-size:var(--fs-2xl);color:#fff;display:flex}.pg-play .res-grid span{font-size:var(--fs-sm);color:var(--muted)}.pg-play .res-label{font-size:var(--fs-xs);margin-bottom:var(--sp-2)}.pg-play .result .muted b{color:#fff}.pg-play .result .muted a{color:#fff;text-underline-offset:3px;text-decoration:underline}.pg-play .strip{gap:var(--sp-2);flex-wrap:wrap;display:flex}.pg-play .strip span{border-radius:var(--r-sm);width:34px;height:34px;font-family:var(--mono);font-size:var(--fs-xs);place-items:center;font-weight:700;display:grid}.pg-play .strip .o{color:var(--ok-soft);background:#34d39924;border:1px solid #34d39980}.pg-play .strip .x{color:var(--signal-soft);background:#ff6a3d1a;border:1px solid #ff6a3d80}.pg-play .res-actions{gap:var(--sp-2);flex-wrap:wrap;margin-top:auto;display:flex}.pg-play .side{padding:var(--sp-5)}.pg-play .side h4{font-family:var(--display);font-size:var(--fs-md);color:var(--ink);margin-bottom:var(--sp-3);font-weight:600}.pg-play .formula{font-family:var(--mono);font-size:var(--fs-sm);line-height:1.9}.pg-play .formula b{color:var(--volt)}.pg-play .formula ul{margin-top:var(--sp-2);color:var(--muted);list-style:none}.pg-play .my-stats{gap:var(--sp-2);grid-template-columns:1fr 1fr;display:grid}.pg-play .my-stats div{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3)}.pg-play .my-stats b{font-family:var(--mono);font-size:var(--fs-xl);display:block}.pg-play .my-stats span{font-size:var(--fs-xs);color:var(--muted)}.pg-play .board .row{padding:var(--sp-2) var(--sp-4);grid-template-columns:34px 34px 1fr auto}.pg-play .board .ava{width:34px;height:34px;font-size:var(--fs-xs)}@media (max-width:1000px){.pg-play .g-layout{grid-template-columns:1fr}.pg-play .side-col{grid-template-columns:1fr 1fr;display:grid}.pg-play .side-col .board{grid-column:1/-1}}@media (max-width:700px){.pg-play .play-area{grid-template-columns:minmax(0,1fr)}.pg-play .code-pane{border-right:none;border-bottom:1px solid var(--line)}.pg-play .lobby,.pg-play .result{padding:var(--sp-5)}.pg-play .rules,.pg-play .side-col{grid-template-columns:1fr}.pg-play .res-grid{grid-template-columns:1fr 1fr}.pg-play .hud{gap:var(--sp-2);grid-template-columns:auto auto 1fr}.pg-play .hud .timer{grid-area:2/1/auto/-1}.pg-play .hud-keys{display:none}}.pg-play .stage-err{color:var(--signal-soft);font-size:var(--fs-ui)}.pg-play .side-note{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted)}.pg-play .side-note a{color:var(--ink);text-decoration:underline}.pg-play .code-pane pre{white-space:pre-wrap;word-break:break-word}.pg-play .start:disabled,.pg-play .btn:disabled{opacity:.6;cursor:progress}