.cg-shell { --cg-bg:#101218; --cg-fg:#fff; --cg-muted:#b7becd; --cg-pass:#a86f00; --cg-correct:#177a3d; --cg-wrong:#a62b2b; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.cg-screen { background:var(--cg-bg); color:var(--cg-fg); }
.cg-setup { min-height:420px; display:grid; place-items:center; padding:2rem; border-radius:1rem; }
.cg-panel { width:min(100%,540px); text-align:center; }
.cg-panel h2 { font-size:clamp(2.5rem,8vw,5rem); margin:0 0 .75rem; }
.cg-category-label { font-size:1.3rem; }
.cg-primary,.cg-secondary,.cg-danger,.cg-button,.cg-exit { border:0; border-radius:.8rem; min-height:48px; padding:.75rem 1rem; font:inherit; font-weight:700; cursor:pointer; }
.cg-primary { background:#fff; color:#111; }
.cg-secondary { background:#333946; color:#fff; }
.cg-danger { background:var(--cg-wrong); color:#fff; }
.cg-shell.cg-active { position:fixed; inset:0; z-index:2147483000; width:100%; height:100vh; height:100dvh; overflow:hidden; background:var(--cg-bg); }
html.cg-page-playing,html.cg-page-playing body { overflow:hidden!important; overscroll-behavior:none; }
.cg-countdown,.cg-round,.cg-results { width:100%; height:100%; min-height:0; }
.cg-countdown { display:grid; place-items:center; }
.cg-countdown-number { font-size:clamp(7rem,35vw,20rem); font-weight:800; }
.cg-round { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:.5rem; padding:max(.75rem,env(safe-area-inset-top)) max(.75rem,env(safe-area-inset-right)) max(.75rem,env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left)); box-sizing:border-box; overflow:hidden; }
.cg-topbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:48px; }
.cg-exit { position:relative; overflow:hidden; background:#242936; color:#fff; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
.cg-exit * { user-select:none; -webkit-user-select:none; -webkit-user-drag:none; pointer-events:none; }
.cg-exit-progress { position:absolute; left:0; bottom:0; width:var(--exit-progress,0%); height:5px; background:#fff; }
.cg-timer { font-size:clamp(1.5rem,5vw,3.2rem); font-variant-numeric:tabular-nums; font-weight:800; }
.cg-prompt-wrap { min-width:0; min-height:0; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:.5rem; box-sizing:border-box; }
.cg-prompt { max-width:100%; max-height:100%; overflow:hidden; overflow-wrap:anywhere; hyphens:auto; font-size:clamp(2rem,13vw,9rem); line-height:.92; font-weight:850; }
.cg-feedback { flex:0 0 auto; min-height:1.4rem; margin-top:.25rem; color:var(--cg-muted); }
.cg-controls { flex:0 0 auto; display:grid; grid-template-columns:1fr 1fr; gap:.75rem; min-height:72px; }
.cg-controls--secondary { opacity:.82; }
.cg-button { min-height:68px; color:#fff; font-size:clamp(1.1rem,4vw,1.8rem); touch-action:manipulation; }
.cg-pass { background:var(--cg-pass); }
.cg-correct { background:var(--cg-correct); }
.cg-results { overflow:hidden; padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left)); box-sizing:border-box; }
.cg-results-inner { width:min(100%,760px); height:100%; min-height:0; margin:0 auto; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:.65rem; }
.cg-results-inner h2 { font-size:clamp(2rem,7vw,4rem); margin:0; }
.cg-score { font-size:1.5rem; margin:0; }
.cg-results-list { min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; list-style:none; margin:0; padding:0 .25rem 0 0; display:grid; align-content:start; gap:.65rem; }
.cg-result { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1rem; border-radius:.8rem; font-size:1.2rem; font-weight:700; }
.cg-result > :first-child { min-width:0; overflow-wrap:anywhere; }
.cg-result > :last-child { flex:0 0 auto; white-space:nowrap; }
.cg-result--correct { background:#dff4e6; color:#125d2f; }
.cg-result--passed { background:#fff1c9; color:#6d4a00; }
.cg-result--wrong { background:#f8dddd; color:#7e2020; }
.cg-results-actions,.cg-dialog-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.25rem; }
.cg-dialog-backdrop { position:absolute; inset:0; z-index:10; display:grid; place-items:center; padding:1rem; background:rgba(0,0,0,.7); }
.cg-dialog { width:min(100%,480px); padding:1.5rem; border-radius:1rem; background:#fff; color:#111; }
[hidden] { display:none!important; }
@media (max-width:520px) { .cg-controls { gap:.5rem; } .cg-exit span:nth-child(2) { position:absolute; clip:rect(0 0 0 0); } }
@media (max-height:520px) { .cg-round { gap:.25rem; padding:.5rem max(.5rem,env(safe-area-inset-right)) max(.5rem,env(safe-area-inset-bottom)) max(.5rem,env(safe-area-inset-left)); } .cg-topbar { min-height:40px; } .cg-exit { min-height:40px; padding:.45rem .75rem; } .cg-controls { min-height:58px; } .cg-button { min-height:56px; } .cg-feedback { display:none; } }

.cg-rotate-overlay { position:absolute; inset:0; z-index:20; display:grid; place-items:center; padding:1rem; background:rgba(8,10,15,.96); color:#fff; text-align:center; }
.cg-rotate-card { display:grid; gap:.65rem; max-width:28rem; }
.cg-rotate-icon { font-size:4rem; line-height:1; }
.cg-rotate-card strong { font-size:1.5rem; }
.cg-rotate-card span { color:var(--cg-muted); }

/* Touch devices use swipe gestures; buttons are reserved for pointer devices. */
.cg-swipe-hint { width:min(92%,34rem); display:flex; justify-content:space-between; gap:1rem; color:var(--cg-muted); font-size:clamp(.9rem,3vw,1.15rem); font-weight:700; user-select:none; }
.cg-touch-device .cg-prompt-wrap { touch-action:none; user-select:none; -webkit-user-select:none; }
.cg-feedback--correct,.cg-feedback--passed { min-width:7rem; padding:.25rem .7rem; border-radius:999px; color:#fff; font-weight:800; text-align:center; }
.cg-feedback--correct { background:var(--cg-correct); }
.cg-feedback--passed { background:var(--cg-pass); }
@media (pointer:coarse), (hover:none) {
  .cg-controls { display:none!important; }
  .cg-round { grid-template-rows:auto minmax(0,1fr); }
}
@media (pointer:fine) and (hover:hover) {
  .cg-swipe-hint { display:none!important; }
}

/* Full-screen action feedback. The overlay does not affect layout or input. */
.cg-shell.cg-active::after { content:""; position:fixed; inset:0; z-index:2147482999; pointer-events:none; opacity:0; }
.cg-shell.cg-active.cg-flash--correct::after { background:rgba(23,122,61,.72); animation:cg-action-flash 1.05s cubic-bezier(.16,.72,.25,1); }
.cg-shell.cg-active.cg-flash--passed::after { background:rgba(168,111,0,.72); animation:cg-action-flash 1.05s cubic-bezier(.16,.72,.25,1); }
@keyframes cg-action-flash { 0% { opacity:.92; } 18% { opacity:.78; } 100% { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .cg-shell.cg-active.cg-flash--correct::after,.cg-shell.cg-active.cg-flash--passed::after { animation-duration:.35s; } }

.cg-sensor-help-backdrop { position:absolute; inset:0; z-index:30; display:grid; place-items:center; padding:1rem; background:rgba(0,0,0,.82); }
.cg-sensor-help { width:min(100%,560px); max-height:calc(100dvh - 2rem); overflow-y:auto; padding:1.5rem; border-radius:1rem; background:#fff; color:#111; box-shadow:0 1rem 3rem rgba(0,0,0,.35); }
.cg-sensor-help h2 { margin:0 0 .75rem; font-size:clamp(1.6rem,5vw,2.4rem); }
.cg-sensor-help p { line-height:1.45; }
.cg-sensor-help-android { margin:1rem 0; padding:1rem; border-radius:.75rem; background:#f0f2f6; }
.cg-sensor-help-android p { margin:.35rem 0 0; }
.cg-sensor-help-note { color:#555; font-size:.95rem; }