@layer components{.pg-stage{min-width:0;color:var(--on-dark);background:radial-gradient(90% 60% at 30% 0,#123526 0%,#07120d 70%);grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:20px;padding:16px 18px 14px;display:grid}.pg-stage .kb{width:100%}.pg-cell:focus-visible,.pg-score:focus-visible{outline:2px solid var(--rn);outline-offset:2px}.pg-board{place-items:center;min-width:0;min-height:0;display:grid;container-type:size}.pg-grid{aspect-ratio:1.06;grid-template-rows:auto repeat(3,minmax(0,1fr));grid-template-columns:minmax(64px,.85fr) repeat(3,minmax(0,1fr));gap:7px;width:min(100cqw,106cqh,600px);display:grid}.pg-h,.pg-cell{border-radius:14px;min-width:0;overflow:hidden}.pg-h{text-align:center;letter-spacing:-.02em;min-height:52px;color:var(--on-dark);background:#ffffff0a;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:4px 6px;font-size:12.5px;font-weight:750;line-height:1.12;display:flex}.pg-h span{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.pg-h .pg-hx{-webkit-line-clamp:4}.pg-hx small{letter-spacing:.02em;opacity:.62;font-size:.78em;font-weight:600;display:block}.pg-h.is-x{box-shadow:inset 0 0 0 1px #ffffff24}.pg-flag{background:50%/cover no-repeat;border-radius:3px;flex:none;width:24px;height:16px;box-shadow:0 0 0 1px #00000059}.pg-corner{min-height:52px}.pg-cell{text-align:center;letter-spacing:-.02em;color:var(--on-dark);transition:box-shadow .16s ease, background .2s ease, transform .16s var(--ease-spring);background:linear-gradient(#ffffff17,#ffffff0d);justify-content:center;align-items:center;padding:6px;font-size:clamp(12px,2.6cqw,17px);font-weight:750;line-height:1.15;display:flex;box-shadow:inset 0 0 0 1.5px #ffffff14}.pg-cell.is-on{box-shadow:inset 0 0 0 3px var(--rn);background:#ccff3d14}.pg-cell.is-fill{color:#0d0d0f;background:linear-gradient(#d8ff66, var(--rn));box-shadow:none;animation:pop .38s var(--ease-pop) both}.pg-cell.is-fill.is-on{box-shadow:inset 0 0 0 3px #0d0d0f}.pg-cell.is-miss{animation:pg-miss .42s var(--ease-out);box-shadow:inset 0 0 0 3px #ff4d4f}@keyframes pg-miss{20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.pg-pick{gap:2px;min-width:0;display:grid}.pg-pick small{letter-spacing:.02em;opacity:.6;font-size:10.5px;font-weight:700}.pg-answers{color:var(--on-dark-dim);gap:1px;font-size:10.5px;font-weight:650;display:grid}.pg-side{flex-direction:column;justify-content:flex-end;gap:8px;min-width:0;min-height:0;display:flex}.pg-left{color:var(--on-dark-dim);gap:2px;margin:0;font-size:13.5px;font-weight:700;display:grid}.pg-misses{white-space:nowrap;text-overflow:ellipsis;color:#ff8a80;font-size:12.5px;font-weight:600;overflow:hidden}.pg-ask{color:var(--on-dark-dim);background:#ffffff0d;border-radius:12px;margin:0;padding:10px 12px;font-size:14px;font-weight:600;line-height:1.35}.pg-ask b{color:var(--on-dark)}.pg-note{color:var(--on-dark-dim);margin:0;font-size:14px}.pg-score{align-self:flex-start}.pg-wait{color:var(--on-dark-dim);margin:auto;font-size:16px;font-weight:650}.pg-toast{z-index:7;text-align:center;color:#0d0d0f;max-width:calc(100% - 24px);animation:pop .24s var(--ease-pop) both;background:#fff;border-radius:999px;padding:9px 15px;font-size:14px;font-weight:650;position:absolute;top:12px;left:50%;translate:-50%}.pg-mini{gap:8px;display:grid}.pg-mini .pg-grid{aspect-ratio:auto;background:#0c1a13;border-radius:16px;grid-template-rows:auto;width:min(100%,420px);padding:8px}.pg-mini .pg-cell{cursor:pointer;min-height:58px}.pg-mini .pg-h{color:#fff;min-height:40px;font-size:11.5px}.pg-mini .pg-cell:not(.is-fill){color:#ffffffbf}.pg-mini .pg-note{color:var(--stage-dim)}@container (min-width:760px){.pg-toast{left:calc(50% - 220px)}}@container (max-width:759px){.pg-ask{padding:6px 10px;font-size:13px}.pg-stage{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);gap:8px;padding:10px 10px 8px}.pg-grid{gap:5px}.pg-h,.pg-corner{min-height:40px}.pg-h{gap:3px;padding:3px;font-size:11px}.pg-flag{width:18px;height:12px}.pg-cell{border-radius:11px;font-size:clamp(11px,3.4cqw,15px)}.pg-side{gap:6px}}@media (prefers-reduced-motion:reduce){.pg-cell,.pg-toast{animation:none}}}
