:root{ --pp-bg:#0f172a; --pp-card:#0b1220; --pp-text:#e5e7eb; --pp-accent:#22c55e; --pp-danger:#ef4444; --pp-info:#2563eb; --pp-muted:#9ca3af; }
.is-hidden{ display:none !important; }
.pp-viewport{ width:100%; display:flex; justify-content:center; }
.pp-frame{ width:min(1080px,100%); aspect-ratio:1080/1920; background:linear-gradient(180deg,#0b1220,#0f172a); color:var(--pp-text); border-radius:24px; box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden; position:relative; padding:24px; box-sizing:border-box; }
.pp-topbar{ display:flex; align-items:center; justify-content:center; gap:12px; }
.pp-timer{ font-size:clamp(28px,4.2vw,56px); font-weight:800; padding:8px 16px; background:#111827; border-radius:12px; min-width:180px; text-align:center; }
.pp-last{ opacity:.8; font-size:clamp(16px,2.2vw,22px); }
.pp-teambar{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:10px 0; }
.pp-team-wrap{ display:flex; flex-direction:column; gap:6px; }
.pp-team{ appearance:none; border:none; cursor:pointer; background:#dc2626; color:#fff; padding:10px 12px; border-radius:12px; font-weight:700; }
.pp-team.is-live{ background:#2563eb; }
.pp-team.is-active{ outline:2px solid #fff; }
.pp-team-time{ text-align:center; color:var(--pp-muted); font-variant-numeric:tabular-nums; }
.pp-controls{ display:flex; gap:10px; justify-content:center; margin:10px 0; }
.pp-btn{ appearance:none; border:none; cursor:pointer; border-radius:14px; padding:12px 18px; font-weight:800; box-shadow:0 8px 18px rgba(0,0,0,.25); }
.pp-btn.pp-start{ background:var(--pp-accent); color:#052e14; }
.pp-btn.pp-undo{ background:#3b82f6; color:#081b3a; }
.pp-btn.pp-restart{ background:#8b5e34; color:#fff; }
.pp-stage{ display:flex; flex-direction:column; gap:12px; }
.pp-order{ background:#0b1220; border-radius:14px; padding:10px; border:1px solid #1f2937; }
.pp-order h3{ margin:0 0 8px 0; font-size:18px; color:#fff; }
.pp-order-list{ display:flex; flex-wrap:wrap; gap:10px; }
.pp-order-item{ display:flex; align-items:center; gap:8px; background:#0b1220; border:1px solid #1f2937; padding:6px 10px; border-radius:10px; }
.pp-order-item.is-done{ opacity:.6; }
.pp-order-item img{ width:32px; height:32px; object-fit:contain; } .pp-palette{ display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:10px; background:#0b1220; border:1px solid #1f2937; border-radius:12px; padding:8px; position:relative; }
.pp-top-btn{ appearance:none; border:1px solid #1f2937; background:#0b1220; border-radius:12px; padding:8px; cursor:pointer; }
.pp-top-btn img{ width:64px; height:64px; object-fit:contain; }
.pp-board{ position:relative; border-radius:16px; overflow:hidden; background:#0b1220; border:1px solid #1f2937; min-height:360px; display:flex; align-items:center; justify-content:center; }
.pp-base{ width:75%; height:auto; pointer-events:none; user-select:none; }
.pp-drop{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.pp-piece{ position:absolute; transform:translate(-50%,-50%); pointer-events:none; }
.pp-settings{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.pp-settings label{ display:flex; flex-direction:column; gap:6px; font-size:14px; color:#fff; opacity:1; }
.pp-settings select{ padding:8px 10px; border-radius:10px; background:#0b1220; color:var(--pp-text); border:1px solid #1f2937; }
.pp-winner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.pp-winner-text{ position:relative; z-index:2; padding:16px 22px; border-radius:14px; background:#111827; color:#fff; font-size:clamp(36px,6vw,80px); font-weight:900; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.pp-winner canvas{ position:absolute; inset:0; z-index:1; }
.pp-toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%,10px); background:#111827; color:#fff; padding:10px 16px; border-radius:10px; opacity:0; transition:transform .2s, opacity .2s; border:1px solid #1f2937; z-index:9999; }
.pp-toast.is-show{ opacity:1; transform:translate(-50%,0); }
@media (max-width:700px){
.pp-palette{ grid-template-columns:repeat(3,1fr); }
.pp-settings{ grid-template-columns:repeat(2,1fr); }
}