:root{ --rg-bg:#0f172a; --rg-card:#0b1220; --rg-text:#e5e7eb; --rg-accent:#22c55e; --rg-danger:#ef4444; --rg-blue:#2563eb; --rg-muted:#9ca3af; }
.is-hidden{ display:none !important; }
.rg-viewport{ width:100%; display:flex; justify-content:center; }
.rg-frame{ width:min(1080px,100%); aspect-ratio:1080/1920; background:linear-gradient(180deg,#0b1220,#0f172a); color:var(--rg-text); border-radius:24px; box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden; position:relative; padding:24px; box-sizing:border-box; }
.rg-topbar{ display:flex; align-items:center; justify-content:center; gap:12px; }
.rg-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; }
.rg-score{ opacity:.9; font-size:clamp(16px,2.2vw,22px); }
.rg-teambar{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:10px 0; }
.rg-team-wrap{ display:flex; flex-direction:column; gap:6px; }
.rg-team{ appearance:none; border:none; cursor:pointer; background:#dc2626; color:#fff; padding:10px 12px; border-radius:12px; font-weight:700; }
.rg-team.is-live{ background:var(--rg-blue); }
.rg-team.is-active{ outline:2px solid #fff; }
.rg-team-score{ text-align:center; color:var(--rg-muted); font-weight:700; }
.rg-controls{ display:flex; gap:10px; justify-content:center; margin:10px 0; }
.rg-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); }
.rg-btn.rg-start{ background:var(--rg-accent); color:#052e14; }
.rg-btn.rg-restart{ background:#8b5e34; color:#fff; }
.rg-stage{ margin-top:8px; }
.rg-grid-wrap{ background:#0b1220; border:1px solid #1f2937; border-radius:16px; overflow:hidden; padding:10px; }
.rg-grid{ --cols:6; --rows:8; display:grid; grid-template-columns:repeat(var(--cols), 1fr); grid-template-rows:repeat(var(--rows), 1fr); gap:6px; height:58vh; }
.rg-cell{ background:#0b1220; border:1px solid #1f2937; position:relative; border-radius:8px; }
.rg-target{ position:absolute; inset:0; margin:auto; width:70%; height:70%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 50%, #ffffff 0 28%, #e11d48 28% 48%, #ffffff 48% 62%, #e11d48 62% 100%); border:none; border-radius:50%; box-shadow:0 6px 16px rgba(0,0,0,.25); cursor:pointer; }
.rg-target img{ max-width:100%; max-height:100%; object-fit:contain; pointer-events:none; user-select:none; opacity:.0; }
.rg-settings{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.rg-settings label{ display:flex; flex-direction:column; gap:6px; font-size:14px; color:#fff; }
.rg-settings select{ padding:8px 10px; border-radius:10px; background:#0b1220; color:var(--rg-text); border:1px solid #1f2937; }
.rg-winner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.rg-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); }
.rg-winner canvas{ position:absolute; inset:0; z-index:1; }
@media (max-width:700px){
.rg-settings{ grid-template-columns:repeat(2,1fr); }
}