:root { --accent: #ff3b5c; --accent-2: #ffd23f; --bg: #2b2d42; --bg-2: #15162a; --good: #1fa2ff; --bad: #ff3b5c; }
#stage { background: #2b2d42; }
#gl { z-index: 0; }
#fx { z-index: 2; pointer-events: none; }
#vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .5s;
  background: radial-gradient(ellipse 70% 62% at 50% 52%, rgba(12,12,30,0) 55%, rgba(12,12,30,.72) 100%); }
#stage.frenzy #vignette { opacity: 1; }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 8; }
#flash.go { animation: flash .7s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
[hidden] { display: none !important; }

/* ---------- HUD (Hole.io-like: timer left, counter centre) ---------- */
.hud { z-index: 4; align-items: flex-start; }
#timer { font-family: "Dela"; font-weight: 400; font-size: 6cqw; color: #fff; display: flex; flex-direction: column; align-items: center; line-height: 1.1;
  padding: 1.4cqw 3.4cqw; min-width: 21cqw; border-radius: 18px; }
#timer-s { font-family: "Maru"; font-weight: 900; font-size: 4cqw; color: #ffd23f; letter-spacing: .3cqw; display: inline-block; }
#timer-s.pop { animation: pop .4s cubic-bezier(.2, 1.8, .4, 1); }
#timer.hurry { background: rgba(255, 59, 92, .92); animation: pulse .5s ease-in-out infinite; }
#counter { position: absolute; left: 50%; top: 2.4cqw; transform: translateX(-50%); text-align: center; pointer-events: none; }
.c-label { display: inline-block; font-size: 3.6cqw; font-weight: 900; color: #fff; background: var(--bad); border: .6cqw solid var(--ink);
  border-radius: 99px; padding: .3cqw 3cqw; }
.c-num { font-family: "Dela"; font-weight: 400; font-size: 10.5cqw; line-height: 1.05; color: #fff; -webkit-text-stroke: 1.3cqw var(--ink);
  paint-order: stroke fill; text-shadow: 0 1cqw 0 var(--ink); white-space: nowrap; }
#counter.bump .c-num { animation: pop .18s ease-out; }
@keyframes pop { 0% { scale: 1.25; } 100% { scale: 1; } }
#mute { font-size: 4.6cqw; }

/* ---------- big level callouts ---------- */
.lvl-callout { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 5; pointer-events: none; text-align: center; white-space: nowrap; }
.lvl-callout.go { animation: lvlc 1.45s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.lc-main { font-family: "Dela"; font-weight: 400; font-size: 15cqw; line-height: 1; -webkit-text-stroke: 1.4cqw var(--ink); paint-order: stroke fill; text-shadow: 0 1.3cqw 0 var(--ink); }
.lc-sub { display: inline-block; margin-top: 1.4cqw; font-family: "Maru"; font-weight: 900; font-size: 6cqw; color: #fff; background: var(--bad);
  border: .8cqw solid var(--ink); border-radius: 16px; padding: .6cqw 4cqw 1cqw; box-shadow: 0 1cqw 0 var(--ink); transform: rotate(-3deg); }
.lvl-callout.star .lc-main { font-size: 17cqw; letter-spacing: -1cqw; }
.lvl-callout.red .lc-main { font-size: 12cqw; }
.lvl-callout.big .lc-main { font-size: 13.5cqw; }
@keyframes lvlc { 0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); opacity: 1; } 22% { transform: translate(-50%, -50%) scale(1.15) rotate(-4deg); }
  36% { transform: translate(-50%, -50%) scale(1) rotate(-4deg); } 80% { opacity: 1; } 100% { transform: translate(-50%, -62%) scale(1) rotate(-4deg); opacity: 0; } }

/* ---------- stage card (scale intro) ---------- */
#stage-card { position: absolute; left: 50%; top: 40%; z-index: 5; pointer-events: none; display: flex; align-items: center; gap: 3cqw;
  transform: translate(-50%, -50%); background: rgba(26, 26, 46, .88); border: .8cqw solid #fff; border-radius: 26px; padding: 2.4cqw 6cqw 2.4cqw 3cqw;
  box-shadow: 0 1.4cqw 0 rgba(0, 0, 0, .35); }
#stage-card.go { animation: card 2.3s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes card { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 14% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  24% { transform: translate(-50%, -50%) scale(1); } 82% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -80%) scale(.9); opacity: 0; } }
#sc-icon { width: 22cqw; height: 22cqw; object-fit: contain; }
#stage-card { white-space: nowrap; }
#sc-num { font-family: "Dela"; font-weight: 400; font-size: 4.6cqw; color: var(--accent-2); }
#sc-name { font-family: "Dela"; font-weight: 400; font-size: 11cqw; color: #fff; line-height: 1.1; }

/* ---------- first play hint: drag the hole around ---------- */
#hint { position: absolute; left: 50%; top: 80%; width: 0; height: 0; z-index: 5; pointer-events: none; }
.hint-ring { position: absolute; left: -11cqw; top: -11cqw; width: 22cqw; height: 22cqw; border-radius: 50%; border: 1cqw solid rgba(255, 255, 255, .55); }
#hint img { position: absolute; width: 17cqw; left: -3cqw; top: -2cqw; filter: drop-shadow(0 1cqw 0 rgba(0, 0, 0, .35)); animation: drag 2.2s ease-in-out infinite; }
@keyframes drag { 0% { transform: translate(0, 0) scale(1.1); } 12% { transform: translate(0, 0) scale(.95); } 35% { transform: translate(11cqw, -10cqw) scale(.95); }
  60% { transform: translate(-11cqw, -10cqw) scale(.95); } 85% { transform: translate(0, 0) scale(.95); } 100% { transform: translate(0, 0) scale(1.1); } }

/* ---------- title ---------- */
.screen { z-index: 6; }
#title { justify-content: space-between; padding: 7cqh 6cqw 9cqh; overflow: hidden; }
.title-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.title-bg img { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; animation: kb 7s ease-in-out infinite alternate; }
.title-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 22, 50, 0) 55%, rgba(20, 22, 50, .55) 100%); }
@keyframes kb { 0% { transform: scale(1) rotate(0deg); } 100% { transform: scale(1.06) rotate(-1.2deg) translateY(-1%); } }
.title-top { animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-1.2cqh); } }
#title .title-logo { font-size: 15.5cqw; line-height: 1.02; transform: rotate(-4deg); color: #fff; }
#title .title-logo .io { color: #ff3b5c; font-size: 11cqw; margin-left: 1cqw; }
.title-bottom { display: flex; flex-direction: column; align-items: center; gap: 2.4cqh; }
#start { font-size: 9cqw; padding: 2.6cqw 13cqw; }
.title-meta { display: flex; gap: 2.4cqw; align-items: center; }
.title-meta .chip { font-size: 4.2cqw; color: #fff; display: flex; align-items: center; gap: 1.6cqw; }
.skin-chip { font-family: "Maru"; font-weight: 900; cursor: pointer; border: .5cqw solid rgba(255, 255, 255, .35); }
#skin-dot { width: 6cqw; height: 6cqw; border-radius: 50%; background: #ff2a2a; box-shadow: inset 0 0 0 1.4cqw #000, 0 0 2cqw currentColor; display: inline-block; border: .5cqw solid #fff; }
.skin-chip::after { content: "▶"; font-size: 3cqw; opacity: .7; }
.back-link { text-shadow: 0 .4cqw 0 rgba(0, 0, 0, .5); }
.screen:not(.on) .back-link, .screen:not(.on) .skin-chip { pointer-events: none !important; }

/* ---------- result ---------- */
#result { background: radial-gradient(circle at 50% 30%, rgba(60, 20, 40, .82), rgba(15, 15, 32, .94)); }
.res-card { display: flex; flex-direction: column; align-items: center; gap: 1.6cqh; }
.res-art { width: 40cqw; max-height: 22cqh; object-fit: contain; filter: drop-shadow(0 1cqw 0 rgba(0, 0, 0, .35)); animation: bob 1.4s ease-in-out infinite; }
#result.cleared .res-art { width: 52cqw; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(-360deg); } }
.res-head { font-family: "Dela"; font-weight: 400; font-size: 8cqw; color: #fff; -webkit-text-stroke: 1cqw var(--ink); paint-order: stroke fill; text-shadow: 0 1cqw 0 var(--ink); }
.result-label { font-size: 4.4cqw; background: var(--bad); color: #fff; border: .7cqw solid var(--ink); border-radius: 99px; padding: .4cqw 4cqw; }
.result-big { font-size: 18cqw; }
.result-unit { font-family: "Dela"; font-weight: 400; font-size: 8cqw; margin-left: 1cqw; -webkit-text-stroke: .8cqw var(--ink); paint-order: stroke fill; }
.res-stars { display: flex; gap: 1.4cqw; }
.rs { display: flex; flex-direction: column; align-items: center; background: rgba(255, 255, 255, .1); border-radius: 14px; padding: 1cqw 1cqw .6cqw; width: 16cqw; }
.rs img { width: 12cqw; height: 11cqw; object-fit: contain; }
.rs span { font-size: 3.2cqw; color: var(--accent-2); letter-spacing: -.2cqw; }
.rs.off { opacity: .35; filter: grayscale(1); }
.res-new { font-size: 4.6cqw; background: var(--accent-2); color: var(--ink); border: .7cqw solid var(--ink); border-radius: 14px; padding: 1cqw 4cqw; transform: rotate(2deg);
  box-shadow: inset 0 0 0 .6cqw var(--c, #fff); }
.link-btn { background: none; border: 0; color: #fff; opacity: .7; font-family: "Maru"; font-weight: 800; font-size: 4cqw; text-decoration: underline; cursor: pointer; }