.pb-live{padding:12px;max-width:1100px;margin:auto;color:#eef7ff;font-family:var(--sp-font-body)}
body.pb-game .sp-stage{background:#101c36;overflow:auto}.pb-live *{box-sizing:border-box}
.pb-head{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}.pb-head h2{margin:0;font:800 clamp(20px,3vw,28px)/1.35 var(--sp-font-display)}.pb-chips{display:flex;gap:8px;flex-wrap:wrap}.pb-chip{padding:8px 12px;border:1px solid #6482ad;border-radius:12px;background:#243859;font-weight:800}
.pb-layout{display:grid;grid-template-columns:minmax(250px,480px) minmax(250px,1fr);gap:16px;align-items:start;justify-content:center}
.pb-table{position:relative;width:100%;max-width:480px;aspect-ratio:480/620;margin:0 auto;border:3px solid #6597df;border-radius:24px;overflow:hidden;background:#10213d;box-shadow:0 10px 30px #0005}.pb-table canvas{display:block;width:100%;height:100%}
.pb-pad{position:absolute;bottom:3%;width:22%;min-width:60px;min-height:56px;padding:10px 3px;border:2px solid #bfd6ff;border-radius:16px;background:#153253df;color:#fff;font:800 16px/1.2 var(--sp-font-body);cursor:pointer;touch-action:manipulation}.pb-pad.left{left:5%}.pb-pad.right{right:5%}.pb-pad.launch{left:34%;width:32%;background:#235f78ed}.pb-pad:active,.pb-btn:active{transform:translateY(2px)}.pb-pad:disabled,.pb-btn:disabled{opacity:.45;cursor:default}
.pb-side{display:flex;flex-direction:column;gap:10px}.pb-side>.pb-chip{margin:0;padding:8px}.pb-value{padding:10px;border:2px solid #6b9cd7;border-radius:16px;background:#223958;display:grid;grid-template-columns:1fr 1fr;text-align:center;font-size:16px}.pb-value strong{display:block;font:900 30px/1.2 var(--sp-font-num);color:#ffdf8a}.pb-ops{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pb-op{padding:8px;border-radius:12px;border:2px solid #708cbb;background:#21385c;font:800 20px/1.2 var(--sp-font-num);text-align:center}.pb-op b{display:block;font:700 14px/1.4 var(--sp-font-body);color:#d5e5ff}
.pb-future{display:flex;flex-direction:column;gap:4px;padding:8px;border:1px solid #6783ad;border-radius:12px;background:#172c47}.pb-future p{margin:0;line-height:1.4;font-size:16px}.pb-future .passed{color:#a4dfc4}.pb-future .active{color:#ffdf8a;font-weight:800}
.pb-controls{display:flex;gap:8px;flex-wrap:wrap}.pb-btn{min-height:52px;min-width:52px;padding:10px 14px;border:2px solid #b2c9eb;border-radius:12px;background:#ecf4ff;color:#1a3554;font:800 16px/1.4 var(--sp-font-body);touch-action:manipulation;cursor:pointer}.pb-btn.primary{background:#08786a;color:white;border-color:#66c8b7}.pb-btn.is-on{background:#ffdf8a;color:#1e3048;border-color:#fcba48}.pb-btn:focus-visible,.pb-pad:focus-visible{outline:4px solid #ffe99a;outline-offset:3px}
.pb-status{min-height:72px;margin:0;padding:12px;background:#243859;border-left:5px solid #75bcf2;border-radius:12px;font-size:17px;line-height:1.55}.pb-status.good{border-color:#7be4b2}.pb-status.bad{border-color:#ffba8a}.pb-done{padding:24px;border:2px solid #81bfdf;border-radius:20px;background:#213652;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.pb-done h2,.pb-done p{margin:0}.pb-score{font-size:42px;color:#ffdf8a;font-weight:900}
@media(max-width:760px){.pb-layout{grid-template-columns:1fr}.pb-live{padding:10px}.pb-side{max-width:480px;width:100%;margin:auto}.pb-table{max-width:400px}.pb-pad{font-size:14px}.pb-value strong{font-size:30px}.pb-status{min-height:0}.pb-head{justify-content:center}.pb-head h2{text-align:center}}
@media(max-height:500px) and (min-width:600px){.pb-layout{grid-template-columns:minmax(240px,330px) minmax(250px,1fr)}.pb-table{max-width:300px}.pb-live{padding:8px}.pb-pad{font-size:13px}.pb-side{gap:8px}}
@media(prefers-reduced-motion:reduce){.pb-btn:active,.pb-pad:active{transform:none}}