.cg{position:relative;overflow:hidden;border-radius:40px;padding:clamp(24px,4vw,48px);color:#eaf3ff;background:radial-gradient(70% 90% at 80% 0%,#1d6fe0 0%,transparent 60%),linear-gradient(160deg,#0b2a57,#071a38);min-height:520px}
.cg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(156,200,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(156,200,255,.07) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.cg > *{position:relative}
.cg-intro{display:grid;gap:18px;justify-items:start}
.cg-intro small{letter-spacing:.2em;font-weight:700;color:#9cc8ff}
.cg-intro h3{font-family:var(--h);font-size:clamp(2.6rem,7vw,5rem);line-height:.95;color:#fff;letter-spacing:-.02em}
.cg-intro h3 span{color:#ffd36b}
.cg-intro p{max-width:46ch;color:#c4d6ec;font-size:1.05rem}
.cg-bons{display:flex;flex-wrap:wrap;gap:18px;margin:6px 0 6px}
.cg-bon{display:grid;justify-items:center;text-align:center;gap:6px;width:160px}
.cg-bon i{display:grid;place-items:center;width:82px;height:82px;border-radius:50%;border:2px dashed var(--c);font-style:normal;font-size:2rem;background:color-mix(in srgb,var(--c) 14%,transparent);animation:cgspin 14s linear infinite}
.cg-bon:nth-child(2) i{animation-duration:10s}.cg-bon:nth-child(3) i{animation-duration:18s}
@keyframes cgspin{to{transform:rotate(360deg)}}
.cg-bon b{font-size:.92rem;color:#fff}
.cg-bon span{font-size:.78rem;color:#9fb3cc}
.cg-play{border:0;cursor:pointer;font:700 1.1rem var(--h);padding:16px 32px;border-radius:999px;background:#ffd36b;color:#0d2242;box-shadow:0 14px 30px -12px rgba(255,211,107,.8);transition:transform .2s}
.cg-play:hover{transform:translateY(-2px) scale(1.03)}
.cg-game{display:grid;justify-items:center;gap:18px}
.cg-top{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;width:100%;font-weight:700}
.cg-chip{padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--c,#5aa6ff) 25%,transparent);border:1px solid var(--c,#5aa6ff)}
.cg-pump{position:relative;width:min(380px,100%);padding:22px;border-radius:30px;background:#f5f9ff;color:#0d2242;box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.cg-head{display:grid;gap:10px}
.cg-head > small{justify-self:center;padding:4px 16px;border-radius:999px;background:#1d6fe0;color:#fff;font-weight:800;letter-spacing:.3em}
.cg-screen{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-radius:14px;background:#0d2242;color:#7dffb3;font-family:ui-monospace,Menlo,monospace}
.cg-screen em{font-style:normal;font-size:.72rem;color:#9fb3cc;letter-spacing:.12em}
.cg-screen b{font-size:1.3rem}
.cg-screen.big b{font-size:2.2rem;color:#ffd36b}
.cg-bar{position:relative;height:12px;margin-top:16px;border-radius:12px;background:#dbe6f5;overflow:visible}
.cg-bar i{display:block;height:100%;width:0;border-radius:12px;background:linear-gradient(90deg,#34c3a3,#1d6fe0)}
.cg-bar s{position:absolute;top:-6px;width:3px;height:24px;background:#ff5b6e;border-radius:3px;transform:translateX(-50%)}
.cg-nozzle{position:absolute;right:-26px;bottom:30px;font-size:2.4rem;transform-origin:20% 80%;transition:transform .2s}
.pumping .cg-nozzle{transform:rotate(-18deg);animation:cgshake .12s linear infinite}
@keyframes cgshake{50%{transform:rotate(-14deg) translateY(1px)}}
.cg-hold{user-select:none;-webkit-user-select:none;touch-action:none;border:0;cursor:pointer;font:800 1rem var(--h);letter-spacing:.06em;padding:20px 30px;border-radius:999px;background:#25d366;color:#053d1d;box-shadow:0 14px 30px -12px rgba(37,211,102,.8);transition:transform .1s}
.pumping .cg-hold{transform:scale(.96);background:#1fb457}
.cg-hold:disabled{opacity:.5;cursor:default}
.cg-tip{font-size:.82rem;color:#9fb3cc}
.cg-res{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:12px;padding:24px;background:rgba(7,26,56,.88);backdrop-filter:blur(6px);z-index:3;animation:fadeup .4s ease}
.cg-res[hidden],.cg-game[hidden],.cg-intro[hidden]{display:none!important}
.cg-res h3{font-family:var(--h);font-size:clamp(1.8rem,5vw,3rem);color:#fff}
.cg-res p{color:#c4d6ec;max-width:42ch}
.cg-claps{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cg-claps span{position:absolute;bottom:-40px;animation:cgup 2.2s ease-out forwards}
@keyframes cgup{to{transform:translateY(-560px) rotate(25deg);opacity:0}}
.cg-toast{position:absolute;left:50%;top:18px;transform:translateX(-50%);padding:10px 18px;border-radius:999px;background:#fff;color:#0d2242;font-weight:700;z-index:4;animation:fadeup .3s ease}
@media (max-width:560px){.cg-bon{width:30%}.cg-bon i{width:62px;height:62px;font-size:1.5rem}.cg-nozzle{right:-8px}}