/* =========================================================================
   Basketbol Connect — Online Isınma Turu (hero mini-game, index page)
   Markup is generated by assets/js/connect-game.js. Component prefix: cg-.
   Geometry: the board is drawn in 740-unit "board space" (7 columns × 100u,
   20u wooden side rails), so every layer lines up in percentages.
   ========================================================================= */
:where(.cg-host) { width: 100%; max-width: 560px; }
.cg {
  --cg-you-1: #ff7a6e; --cg-you-2: #e01b24; --cg-you-3: #640307; --cg-you-seam: rgba(48,3,6,.85);
  --cg-ai-1: #fff5b3; --cg-ai-2: #ffc81f; --cg-ai-3: #a26600; --cg-ai-seam: rgba(84,46,0,.78);
  --cg-rim: #ff6a13; --cg-rim-back: #b4470b;
  --cg-led-red: #ff4a3d; --cg-led-yel: #ffd23a;
  --cg-rw: max(2px, .62cqw);
  position: relative; width: 100%; container-type: inline-size;
  color: var(--chalk); font-family: var(--body); line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
.cg button { font: inherit; color: inherit; margin: 0; }
.cg kbd { font-family: var(--body); font-size: .78em; font-weight: 700; padding: .1em .45em; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); }

/* ---------- basketball skin (ghost, flying ball, placed balls, LED dots) ---------- */
.cg-skin {
  --c1: var(--cg-you-1); --c2: var(--cg-you-2); --c3: var(--cg-you-3); --seam: var(--cg-you-seam);
  display: block; border-radius: 50%;
  background:
    radial-gradient(circle at 31% 25%, rgba(255,255,255,.62) 0, rgba(255,255,255,0) 26%),
    radial-gradient(ellipse 72% 72% at -42% 50%, transparent 92%, var(--seam) 93% 99%, transparent 100%),
    radial-gradient(ellipse 72% 72% at 142% 50%, transparent 92%, var(--seam) 93% 99%, transparent 100%),
    linear-gradient(90deg, transparent 48.3%, var(--seam) 48.3% 51.7%, transparent 51.7%),
    linear-gradient(0deg, transparent 48.3%, var(--seam) 48.3% 51.7%, transparent 51.7%),
    radial-gradient(circle at 42% 36%, transparent 58%, rgba(0,0,0,.34) 100%),
    radial-gradient(circle at 36% 30%, var(--c1) 0, var(--c2) 52%, var(--c3) 100%);
}
.cg-skin.is-ai { --c1: var(--cg-ai-1); --c2: var(--cg-ai-2); --c3: var(--cg-ai-3); --seam: var(--cg-ai-seam); }

/* ---------- stage ---------- */
.cg-stage {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 24px;
  background:
    radial-gradient(95% 52% at 50% -8%, rgba(255,214,120,.17), transparent 62%),
    radial-gradient(70% 34% at 50% 104%, rgba(214,17,28,.2), transparent 70%),
    linear-gradient(180deg, #0d1832 0%, #080e1f 100%);
  box-shadow: 0 34px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(244,239,228,.1), inset 0 1px 0 rgba(255,255,255,.07);
}
.cg-stage::after { content: ""; position: absolute; inset: 0; z-index: 14; pointer-events: none; opacity: 0; background: radial-gradient(80% 60% at 50% 20%, rgba(255,240,200,.28), transparent 70%); }
.cg-stage.is-roar::after { animation: cgRoar .8s var(--ease); }
@keyframes cgRoar { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

.cg-play { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin: 12px 12px 0; margin: 3cqw 3cqw 0; }

/* backboard (rows 1–2: LED head + hoop zone) */
.cg-bb {
  grid-row: 1 / 3; grid-column: 1; position: relative; border-radius: 16px 16px 4px 4px;
  background:
    linear-gradient(45deg, transparent 0 83%, rgba(214,17,28,.34) 83% 86.5%, transparent 86.5% 88.2%, rgba(224,169,59,.26) 88.2% 89.2%, transparent 89.2%),
    linear-gradient(-45deg, transparent 0 83%, rgba(214,17,28,.34) 83% 86.5%, transparent 86.5% 88.2%, rgba(224,169,59,.26) 88.2% 89.2%, transparent 89.2%),
    radial-gradient(60% 80% at 50% 100%, rgba(58,160,255,.08), transparent 70%),
    linear-gradient(180deg, #18244a 0%, #0c1329 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.05);
}
.cg-bb::before { content: ""; position: absolute; inset: 5px 5px 0; border: 2px solid rgba(214,17,28,.85); border-bottom: 0; border-radius: 12px 12px 0 0; }

/* LED scoreboard head with the Mathvivor plate */
.cg-head { grid-row: 1; grid-column: 1; position: relative; display: flex; align-items: center; gap: 10px; gap: 2.4cqw; padding: 14px 14px 4px; padding: 3.2cqw 3.4cqw .4cqw; }
.cg-plate { flex: none; width: clamp(46px, 15cqw, 84px); padding: 3px; border-radius: 12px; background: linear-gradient(150deg, #f6d68a, #c38b31 52%, #7c5112); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 8px 18px rgba(0,0,0,.5); transform: rotate(-4deg); }
.cg-plate img { width: 100%; height: auto; padding: 7%; border-radius: 9px; background: radial-gradient(circle at 50% 38%, #213465, #0a1124 75%); }
.cg-led {
  flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 2cqw;
  padding: 1.2cqw 2.6cqw; border-radius: 12px; background: linear-gradient(180deg, #04060c, #0a0e19);
  box-shadow: inset 0 0 0 2px #222d4b, inset 0 8px 20px rgba(0,0,0,.85), 0 3px 0 #040812;
}
.cg-team { display: flex; align-items: center; justify-content: space-between; gap: 1.6cqw; min-width: 0; }
.cg-tname { display: inline-flex; align-items: center; gap: .4em; font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(.78rem, 3.7cqw, 1.22rem); line-height: 1; color: rgba(244,239,228,.55); transition: color .2s; }
.cg-tname .cg-skin { width: 1.1em; height: 1.1em; flex: none; }
.cg-stage[data-turn="you"] .cg-team--you .cg-tname, .cg-stage[data-turn="ai"] .cg-team--ai .cg-tname { color: #fff; }
.cg-dig { position: relative; display: inline-block; flex: none; font-family: var(--display); font-weight: 800; font-style: normal; line-height: 1; font-size: clamp(1.8rem, 10.4cqw, 3.4rem); font-variant-numeric: tabular-nums; }
.cg-dig::before { content: "88"; color: rgba(255,255,255,.045); }
.cg-dig b { position: absolute; right: 0; top: 0; font-weight: 800; }
.cg-dig::after { content: ""; position: absolute; inset: -2px; pointer-events: none; background: radial-gradient(circle, transparent 52%, rgba(4,6,12,.6) 62%) 0 0 / 3px 3px; }
.cg-team--you .cg-dig b { color: var(--cg-led-red); text-shadow: 0 0 .28em rgba(255,74,61,.85), 0 0 .05em #ffd2cd; }
.cg-team--ai .cg-dig b { color: var(--cg-led-yel); text-shadow: 0 0 .28em rgba(255,210,58,.75), 0 0 .05em #fff3c4; }
.cg-dig.is-bump b { animation: cgBump .7s steps(2, jump-none) 1; }
@keyframes cgBump { 0%, 40%, 80% { opacity: 1; } 20%, 60% { opacity: .15; } 100% { opacity: 1; } }
.cg-mid { display: flex; flex-direction: column; align-items: center; gap: .3cqw; }
.cg-poss { display: flex; gap: 5px; margin-bottom: 2px; }
.cg-poss i { width: 0; height: 0; border-block: 6px solid transparent; transition: border-color .2s; }
.cg-poss i:first-child { border-right: 10px solid #27314f; }
.cg-poss i:last-child { border-left: 10px solid #27314f; }
.cg-stage[data-turn="you"] .cg-poss i:first-child { border-right-color: var(--cg-led-red); filter: drop-shadow(0 0 4px var(--cg-led-red)); }
.cg-stage[data-turn="ai"] .cg-poss i:last-child { border-left-color: var(--cg-led-yel); filter: drop-shadow(0 0 4px var(--cg-led-yel)); }
.cg-mini { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(.62rem, 2.4cqw, .84rem); line-height: 1.3; color: rgba(244,239,228,.5); white-space: nowrap; }
.cg-mini b { display: inline-block; min-width: 1.2em; text-align: right; font-weight: 800; color: var(--cg-led-yel); text-shadow: 0 0 6px rgba(255,210,58,.55); }
.cg-mini.is-hot { color: #ffb685; }
.cg-mini.is-hot b { color: #ff8a3d; text-shadow: 0 0 5px #ff5a1f, 0 0 14px rgba(255,90,31,.75); }
.cg-mini b.is-bump { animation: cgPopNum .45s var(--spring); }
@keyframes cgPopNum { 40% { transform: scale(1.6); color: #fff; } }

/* hoop zone (row 2): seven hoops above the seven columns */
.cg-hz { grid-row: 2; grid-column: 1; position: relative; aspect-ratio: 740 / 118; }
.cg-hoops { position: absolute; inset: 0 2.7027%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cg-hoop { position: relative; }
.cg-hoop::before {
  --sq: rgba(255,96,84,.85); --lw: max(1.5px, .3cqw);
  content: ""; position: absolute; left: 25%; width: 50%; top: 22%; height: 56%;
  border: var(--lw) solid rgba(255,255,255,.55); border-bottom: 0; border-radius: 3px 3px 0 0;
  background:
    linear-gradient(var(--sq), var(--sq)) 50% 56% / 44% var(--lw) no-repeat,
    linear-gradient(var(--sq), var(--sq)) 28% 100% / var(--lw) 44% no-repeat,
    linear-gradient(var(--sq), var(--sq)) 72% 100% / var(--lw) 44% no-repeat,
    linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 55%, rgba(255,255,255,.07));
}
.cg-hoop::after { content: ""; position: absolute; left: 43%; width: 14%; top: 63%; height: 12%; border-radius: 2px; background: linear-gradient(#3a4566, #1b2340); }
.cg-rimb, .cg-rimf { position: absolute; left: 9%; width: 82%; top: 71.19%; height: 13.56%; border-radius: 50%; border: var(--cg-rw) solid; transform-origin: 50% 0; }
.cg-rimb { z-index: 2; border-color: var(--cg-rim-back) var(--cg-rim-back) transparent; }
.cg-rimf { z-index: 6; border-color: transparent transparent var(--cg-rim); filter: drop-shadow(0 1px 0 rgba(0,0,0,.4)); }
.cg-net {
  position: absolute; z-index: 5; left: 13%; width: 74%; top: 77.97%; height: 39%; transform-origin: 50% 0; opacity: .92;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  background:
    linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)) 50% 100% / 100% max(1px, .22cqw) no-repeat,
    repeating-linear-gradient(64deg, rgba(255,255,255,.9) 0 1px, transparent 1px max(5px, 1.3cqw)),
    repeating-linear-gradient(-64deg, rgba(255,255,255,.9) 0 1px, transparent 1px max(5px, 1.3cqw));
}
.cg-hoop.is-swish .cg-net { animation: cgSwish .6s var(--ease); }
.cg-hoop.is-swish .cg-rimf { animation: cgRimHit .6s var(--ease); }
.cg-hoop.is-shake .cg-rimb, .cg-hoop.is-shake .cg-rimf, .cg-hoop.is-shake .cg-net { animation: cgRim .55s ease-out; }
@keyframes cgSwish { 0% { transform: none; } 28% { transform: scale(.82, 1.34) skewX(4deg); } 55% { transform: scale(1.05, .92) skewX(-3deg); } 78% { transform: scale(.98, 1.04); } 100% { transform: none; } }
@keyframes cgRimHit { 30% { filter: drop-shadow(0 0 6px #ffd23a) brightness(1.4); } }
@keyframes cgRim { 0%, 100% { transform: none; } 18% { transform: rotate(-8deg); } 38% { transform: rotate(6deg); } 58% { transform: rotate(-4deg); } 78% { transform: rotate(2deg); } }

/* ghost ball: hover/keyboard preview above the chosen hoop */
.cg-ghost { position: absolute; z-index: 7; left: calc(2.7027% + (var(--c, 3) + .5) * 13.5135%); top: 33.9%; width: 10%; aspect-ratio: 1; margin: -5% 0 0 -5%; opacity: 0; pointer-events: none; transition: left .24s var(--ease), opacity .2s; }
.cg-ghost.is-on { opacity: 1; }
.cg-ghost > i { width: 100%; height: 100%; box-shadow: 0 6px 14px rgba(0,0,0,.45); animation: cgBob 1s ease-in-out infinite alternate; }
@keyframes cgBob { from { transform: translateY(-7%) rotate(-8deg); } to { transform: translateY(9%) rotate(8deg); } }

/* rack (row 3): well behind the holes, balls, front face, win marks */
.cg-rack { grid-row: 3; grid-column: 1; position: relative; aspect-ratio: 740 / 656; }
.cg-rack.is-thud { animation: cgThud .32s ease-out; }
@keyframes cgThud { 25% { transform: translateY(.45%); } 60% { transform: translateY(-.12%); } }
.cg-well, .cg-balls, .cg-marks { position: absolute; left: 2.7027%; top: 3.3537%; width: 94.5946%; height: 91.4634%; }
.cg-well { z-index: 2; overflow: hidden; background: radial-gradient(120% 90% at 50% 25%, #0f1b38 0%, #050913 72%); }
.cg-glow { position: absolute; top: 0; bottom: 0; left: calc(var(--c, 3) * 14.2857%); width: 14.2857%; opacity: 0; transition: opacity .2s, left .2s var(--ease); background: linear-gradient(180deg, rgba(255,110,96,0), rgba(255,110,96,.34)); }
.cg-glow[data-p="is-ai"] { background: linear-gradient(180deg, rgba(255,210,58,0), rgba(255,210,58,.3)); }
.cg-glow.is-on { opacity: 1; }
.cg-balls { z-index: 3; }
.cg-ball { position: absolute; left: calc((var(--c) + .5) * 14.2857%); top: calc((var(--r) + .5) * 16.6667%); width: 10.5714%; aspect-ratio: 1; margin: -5.2857% 0 0 -5.2857%; transform-origin: 50% 88%; }
.cg-ball.is-win { animation: cgWin .9s ease-in-out infinite alternate; }
@keyframes cgWin { to { filter: brightness(1.3) saturate(1.15); } }
.cg-rack.is-over .cg-ball:not(.is-win) { filter: saturate(.45) brightness(.55); transition: filter .4s; }
.cg-face { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.cg-grain path { stroke: rgba(92,42,10,.32); stroke-width: 1.3; }
.cg-brand { font-family: var(--display); font-weight: 800; font-style: italic; font-size: 21px; letter-spacing: 7px; fill: rgba(70,28,4,.78); }
.cg-brand--lit { fill: rgba(255,232,196,.42); }
.cg-marks { z-index: 6; overflow: visible; pointer-events: none; }
.cg-target { fill: none; stroke: #ff8f84; stroke-width: 4; stroke-dasharray: 9 8; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .2s; }
.cg-target.is-ai { stroke: #ffd84d; }
.cg-target.is-on { opacity: .95; animation: cgSpin 5s linear infinite; }
@keyframes cgSpin { to { transform: rotate(360deg); } }
.cg-wring { fill: none; stroke: #ffd84d; stroke-width: 5; filter: drop-shadow(0 0 6px rgba(255,210,58,.9)); }
.cg-wline { fill: none; stroke: #fff6cf; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 8px #ffd23a) drop-shadow(0 0 3px #ffb800); animation: cgDraw .5s .1s var(--ease) forwards; }
@keyframes cgDraw { to { stroke-dashoffset: 0; } }

/* column buttons span hoop zone + rack (rows 2–3) */
.cg-cols { grid-row: 2 / 4; grid-column: 1; position: relative; z-index: 8; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0 2.7027%; }
.cg .cg-col { display: block; min-width: 0; padding: 0; border: 0; border-radius: 14px; background: transparent; cursor: pointer; touch-action: manipulation; transition: background .2s; }
.cg .cg-col[aria-disabled="true"] { cursor: default; }
.cg-stage[data-turn="you"] .cg-col:not([aria-disabled="true"]):hover { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 45%, transparent); }
.cg .cg-col:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; background: linear-gradient(180deg, rgba(255,205,31,.12), rgba(255,205,31,.03) 50%, transparent); }

/* pop text: "Sayı!" / "Iska!" */
.cg-fx { grid-row: 2 / 4; grid-column: 1; position: relative; z-index: 10; pointer-events: none; }
.cg-pop { position: absolute; left: var(--x, 50%); top: 1%; transform: translate(-50%, 0); opacity: 0; white-space: nowrap; font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; line-height: 1; font-size: clamp(1.9rem, 11cqw, 3.6rem); letter-spacing: .01em; color: var(--yellow); -webkit-text-stroke: max(1px, .25cqw) #3d0a00; paint-order: stroke fill; text-shadow: 0 .07em 0 var(--red-2), 0 .14em 0 rgba(0,0,0,.35), 0 0 .6em rgba(255,205,31,.45); }
.cg-pop.is-miss { top: 22%; color: #fff; -webkit-text-stroke-color: #2a0003; text-shadow: 0 .07em 0 var(--red), 0 .14em 0 rgba(0,0,0,.35); }
.cg-pop.is-show { animation: cgPop .95s var(--ease) forwards; }
.cg-pop.is-static { opacity: 1; }
@keyframes cgPop { 0% { opacity: 0; transform: translate(-50%, 30%) scale(.4) rotate(-8deg); } 22% { opacity: 1; transform: translate(-50%, 0) scale(1.14) rotate(-4deg); } 38% { transform: translate(-50%, 0) scale(1) rotate(-4deg); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -40%) scale(1) rotate(-4deg); } }

.cg-fly { position: absolute; left: 0; top: 0; z-index: 9; pointer-events: none; will-change: transform; filter: drop-shadow(0 10px 12px rgba(0,0,0,.4)); }

/* court + status line */
.cg-court {
  position: relative; z-index: 1; overflow: hidden; display: flex; align-items: center; justify-content: center;
  min-height: 58px; padding: 12px 14px 14px; padding: 2.6cqw 3cqw 3cqw;
  background:
    radial-gradient(52% 70% at 50% 0%, rgba(0,0,0,.6), transparent 72%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.2) 0 1px, transparent 1px 9.1%),
    linear-gradient(180deg, #5a3a1f 0%, #3c2513 100%);
  box-shadow: inset 0 1px 0 rgba(255,214,150,.18);
}
.cg-court::before { content: ""; position: absolute; left: 50%; top: -120%; width: 56%; height: 190%; transform: translateX(-50%); border-radius: 50%; border: 2px solid rgba(255,255,255,.3); }
.cg-court::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--red), var(--gold) 50%, var(--red)); opacity: .7; }
.cg-status { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .6em; max-width: 100%; margin: 0; padding: .5em 1.05em .5em .8em; border-radius: 999px; background: rgba(6,10,20,.86); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 8px 20px rgba(0,0,0,.35); font-weight: 700; font-size: .9rem; font-size: clamp(.8rem, 3.1cqw, .95rem); line-height: 1.3; color: #fff; text-align: left; }
.cg-status::before { content: ""; flex: none; width: .7em; height: .7em; border-radius: 50%; background: var(--cg-led-red); box-shadow: 0 0 8px var(--cg-led-red); }
.cg-stage[data-turn="ai"] .cg-status::before { background: var(--cg-led-yel); box-shadow: 0 0 8px var(--cg-led-yel); }
.cg-stage[data-turn="over"] .cg-status::before { background: #fff; box-shadow: 0 0 8px #fff; }

/* crowd flashes on a score */
.cg-flashes { position: absolute; inset: 0; z-index: 15; pointer-events: none; }
.cg-flashes i { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #fff 0 18%, rgba(255,255,255,.55) 32%, rgba(255,255,255,0) 70%); animation: cgFlash .42s ease-out forwards; }
@keyframes cgFlash { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(.8); } }

/* ---------- question card ---------- */
.cg-q { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 12px; padding: 3.4cqw; background: rgba(4,7,16,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cg-card {
  position: relative; width: min(100%, 410px); overflow: hidden; border-radius: 22px; padding: 18px 18px 0; padding: clamp(14px, 4.4cqw, 22px) clamp(14px, 4.4cqw, 22px) 0;
  background:
    radial-gradient(70% 50% at 85% 0%, rgba(244,239,228,.07), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(244,239,228,.05), transparent 70%),
    linear-gradient(160deg, #1b3466 0%, #0f1f45 60%, #0b1736 100%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1);
}
.cg-card::before { content: "× ÷ + −"; position: absolute; right: -4px; bottom: 26px; font-family: var(--hand); font-weight: 700; font-size: 3.4rem; line-height: 1; letter-spacing: .1em; color: rgba(244,239,228,.05); transform: rotate(-10deg); pointer-events: none; }
.cg-q:not([hidden]) .cg-card { animation: cgCardIn .42s var(--spring); }
@keyframes cgCardIn { from { opacity: 0; transform: translateY(18px) scale(.9) rotate(-1.5deg); } }
.cg-qtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cg-qhead { min-width: 0; }
.cg-qt { margin: 0; font-family: var(--hand); font-weight: 700; font-size: 1.55rem; font-size: clamp(1.3rem, 6cqw, 1.8rem); line-height: 1; color: var(--gold-2); }
.cg-qcol { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(214,17,28,.22); border: 1px solid rgba(255,90,80,.5); font-family: var(--display); font-weight: 800; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: #ffb3ab; }
.cg-clock { position: relative; flex: none; display: inline-block; padding: 4px 10px 2px; border-radius: 10px; background: #040509; box-shadow: inset 0 0 0 2px #262f4a, 0 4px 12px rgba(0,0,0,.4); font-family: var(--display); font-weight: 800; font-size: 2.3rem; font-size: clamp(2.1rem, 9.5cqw, 2.8rem); line-height: 1; font-variant-numeric: tabular-nums; }
.cg-clock::before { content: "88"; color: rgba(255,255,255,.04); }
.cg-clock b { position: absolute; right: 10px; top: 4px; font-weight: 800; color: var(--yellow); text-shadow: 0 0 .3em rgba(255,205,31,.8); }
.cg-clock::after { content: ""; position: absolute; inset: 2px; border-radius: 8px; pointer-events: none; background: radial-gradient(circle, transparent 52%, rgba(4,5,9,.6) 62%) 0 0 / 3px 3px; }
.cg-card.is-low .cg-clock b { color: var(--cg-led-red); text-shadow: 0 0 .3em rgba(255,74,61,.9); }
.cg-card.is-low .cg-clock { animation: cgTick 1s steps(1) infinite; }
@keyframes cgTick { 50% { box-shadow: inset 0 0 0 2px var(--red), 0 0 18px rgba(214,17,28,.55); } }
.cg-qx { margin: 14px 0 16px; margin: clamp(10px, 3.4cqw, 18px) 0 clamp(12px, 3.8cqw, 20px); text-align: center; }
.cg-qv { display: block; font-family: var(--display); font-weight: 800; font-style: italic; line-height: 1.02; white-space: nowrap; font-size: 2.4rem; font-size: clamp(2rem, 11.5cqw, 3.5rem); color: #fff; letter-spacing: .01em; }
.cg-qx.is-long .cg-qv { white-space: normal; font-size: clamp(1.7rem, 9cqw, 2.8rem); }
.cg-qv small { display: block; margin-bottom: .2em; font-size: .5em; letter-spacing: .06em; text-transform: uppercase; color: var(--chalk-dim); }
.cg-qm { display: inline-grid; place-items: center; min-width: 1.05em; padding: 0 .12em; border-radius: .16em; font-weight: 800; color: var(--ink); background: var(--yellow); transform: rotate(-3deg); box-shadow: 0 .08em 0 #b58700; }
.cg-ans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; gap: clamp(8px, 2.4cqw, 12px); }
.cg .cg-a { position: relative; min-height: 60px; padding: 6px 4px; border-radius: 16px; border: 2px solid rgba(255,255,255,.2); background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.8rem; font-size: clamp(1.5rem, 7cqw, 2.2rem); line-height: 1; font-variant-numeric: tabular-nums; cursor: pointer; transition: transform .22s var(--spring), border-color .2s, background .2s, opacity .2s; box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.cg .cg-a:hover { transform: translateY(-3px); border-color: var(--yellow); }
.cg .cg-a:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.cg .cg-a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-color: var(--yellow); }
.cg .cg-a[aria-disabled="true"] { cursor: default; transform: none; }
.cg .cg-key { display: none; position: absolute; left: 7px; top: 6px; min-width: 18px; padding: 1px 4px; border-radius: 5px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.22); font-family: var(--body); font-size: .62rem; font-weight: 800; line-height: 1.35; color: rgba(255,255,255,.62); }
@media (hover: hover) and (pointer: fine) { .cg .cg-key { display: block; } }
@media (hover: none) { .cg .cg-cancel kbd { display: none; } }
.cg .cg-a.is-right { border-color: #5be39a; background: linear-gradient(180deg, #23a463, #157a46); box-shadow: 0 0 0 4px rgba(91,227,154,.25), 0 6px 0 rgba(0,0,0,.25); }
.cg .cg-a.is-right::after { content: ""; position: absolute; right: 7px; top: 7px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.cg .cg-a.is-wrong { border-color: #ff8a80; background: linear-gradient(180deg, #e3262f, #a10c14); animation: cgNo .4s; }
.cg .cg-a.is-dim { opacity: .38; }
@keyframes cgNo { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.cg-qfoot { display: flex; justify-content: center; margin-top: 6px; }
.cg .cg-cancel { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--chalk-dim); font-size: .88rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.cg .cg-cancel:hover { color: #fff; background: rgba(255,255,255,.06); }
.cg-bar { height: 8px; margin: 4px calc(-1 * clamp(14px, 4.4cqw, 22px)) 0; background: rgba(255,255,255,.08); }
.cg-bar i { display: block; height: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, #ffb300, var(--yellow) 60%, #fff07a); box-shadow: 0 0 12px rgba(255,205,31,.55); }
.cg-card.is-low .cg-bar i { background: linear-gradient(90deg, var(--red-2), #ff4a3d); box-shadow: 0 0 12px rgba(255,74,61,.6); }

/* ---------- result banner ---------- */
.cg-banner { position: absolute; left: 0; right: 0; top: 0; z-index: 20; padding: 18px 16px 30px; padding: 4.6cqw 4cqw 8cqw; text-align: center; background: linear-gradient(180deg, rgba(6,10,22,.95) 0%, rgba(6,10,22,.9) 72%, rgba(6,10,22,0) 100%); }
.cg-banner:not([hidden]) { animation: cgBanner .6s var(--spring); }
@keyframes cgBanner { from { opacity: 0; transform: translateY(-34px); } }
.cg-bt { margin: 0; font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; line-height: .9; font-size: clamp(2.6rem, 16cqw, 5.2rem); letter-spacing: .01em; color: var(--yellow); text-shadow: 0 .05em 0 var(--red-2), 0 .1em 0 rgba(0,0,0,.4), 0 0 .5em rgba(255,205,31,.35); }
.cg-banner.is-ai .cg-bt, .cg-banner.is-draw .cg-bt { font-size: clamp(2rem, 11cqw, 3.6rem); color: #fff; text-shadow: 0 .06em 0 var(--red), 0 .12em 0 rgba(0,0,0,.4); }
.cg-bs { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; margin: .45em 0 .85em; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: clamp(1rem, 4.4cqw, 1.4rem); color: #fff; }
.cg-bscore { font-weight: 700; letter-spacing: .14em; font-size: .8em; color: var(--gold-2); }
.cg .cg-bbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--yellow); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.12rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 28px rgba(255,205,31,.3); transition: transform .25s var(--spring); }
.cg .cg-bbtn:hover { transform: translateY(-2px) rotate(-1deg); }
.cg-bbtn svg, .cg-btn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- controls under the board ---------- */
.cg-ctrl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-top: 14px; }
.cg-lv { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cg-lvlabel { font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.cg-levels { display: inline-flex; gap: 3px; padding: 4px; border-radius: 999px; background: rgba(7,11,22,.7); border: 1px solid var(--line); }
.cg .cg-chip { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--chalk-dim); font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.cg .cg-chip:hover { color: #fff; background: rgba(255,255,255,.07); }
.cg .cg-chip[aria-pressed="true"] { background: var(--yellow); color: var(--ink); box-shadow: 0 6px 16px rgba(255,205,31,.25); }
.cg-acts { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 0 100%; }
.cg .cg-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(7,11,22,.6); color: #fff; font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s, transform .25s var(--spring); }
.cg .cg-btn:hover { border-color: var(--yellow); background: rgba(255,205,31,.08); transform: translateY(-2px); }
.cg .cg-btn[aria-expanded="true"] { border-color: var(--yellow); color: var(--yellow); }
.cg-lvdesc { flex: 1 1 150px; min-width: 0; margin: 0; font-size: .84rem; line-height: 1.35; color: var(--chalk-dim); }
.cg-help { list-style: none; counter-reset: cg; display: grid; gap: 10px; margin: 12px 0 0; padding: 16px; border-radius: 16px; background: rgba(7,11,22,.72); border: 1px solid var(--line); }
.cg-help li { counter-increment: cg; position: relative; padding-left: 44px; font-size: .93rem; line-height: 1.5; color: var(--chalk-dim); }
.cg-help li::before { content: counter(cg); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--red); color: #fff; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 1.05rem; }
.cg-help b { color: #fff; }

/* ---------- narrow boards ---------- */
@container (max-width: 430px) {
  .cg-team { flex-direction: column; justify-content: center; gap: 3px; }
  .cg-team--ai { flex-direction: column-reverse; }
  .cg-led { gap: 1.4cqw; }
  .cg-ctrl { gap: 10px; }
  .cg-lv { width: 100%; justify-content: space-between; }
  .cg-acts .cg-btn { flex: 1 1 0; justify-content: center; padding: 0 10px; }
}
@container (max-width: 340px) {
  .cg-lvlabel { display: none; }
  .cg-lv { justify-content: center; }
  .cg .cg-chip { padding: 0 11px; }
  .cg-acts .cg-btn { font-size: .92rem; }
}

/* ---------- off screen: idle loops rest ---------- */
.cg.is-off .cg-ghost > i, .cg.is-off .cg-target.is-on, .cg.is-off .cg-ball.is-win, .cg.is-off .cg-card.is-low .cg-clock { animation-play-state: paused; }

/* ---------- reduced motion: no arcs, no wobble; state changes stay visible ---------- */
@media (prefers-reduced-motion: reduce) {
  .cg-ghost > i, .cg-target.is-on, .cg-ball.is-win, .cg-pop.is-show, .cg-card.is-low .cg-clock { animation: none !important; }
  .cg-ghost, .cg-glow { transition: none; }
  .cg-ball.is-win { filter: brightness(1.25); }
}