/* Not Connect 4: the standing grid, the discs and the table (TV and phones).
   Discs sit behind the frame; the column glow, the aim and the winning line sit on top.
   Dark rules first, then the light theme. */
.c4-stage { position: relative; flex: none; user-select: none; -webkit-user-select: none; }
.c4-stage > * { position: absolute; }
.c4-legs { left: 0; top: 0; z-index: 0; overflow: visible; }
.c4-discs { inset: 0; z-index: 1; pointer-events: none; }
.c4-board { z-index: 2; filter: drop-shadow(0 calc(var(--cell) * .12) calc(var(--cell) * .16) rgba(0,0,0,.42)); }
.c4-frame { display: block; width: 100%; height: 100%; }
.c4-slider { z-index: 3; border-radius: 999px; background: linear-gradient(180deg, #2a68d8, #143c8f); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.35); }
.c4-slider i { position: absolute; right: calc(var(--cell) * -.26); top: -30%; height: 160%; border-radius: 999px; background: linear-gradient(180deg, #4b8df5, #1a4cae); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 5px rgba(0,0,0,.35); }
.c4-slider.pull { animation: c4-pull 1.1s cubic-bezier(.3,.9,.4,1) both; }
@keyframes c4-pull { 0% { transform: none; } 22%, 60% { transform: translateX(calc(var(--cell) * -.55)); } 100% { transform: none; } }
.c4-col { left: 0; z-index: 3; border-radius: calc(var(--cell) * .2); pointer-events: none; transition: transform .14s cubic-bezier(.3,.8,.4,1); background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 30%, transparent), color-mix(in srgb, var(--cc) 6%, transparent) 85%); box-shadow: 0 0 0 calc(var(--cell) * .05) var(--cc), 0 0 calc(var(--cell) * .5) color-mix(in srgb, var(--cc) 75%, transparent), inset 0 0 calc(var(--cell) * .3) color-mix(in srgb, var(--cc) 45%, transparent); }
.c4-col.red, .c4-ghost.red { --cc: #ff3b30; }
.c4-col.yellow, .c4-ghost.yellow { --cc: #ffc700; }
.c4-col.full { --cc: #9aa3b5; background: repeating-linear-gradient(-45deg, rgba(20,24,34,.25) 0 10px, transparent 10px 20px); }
.c4-ghost { left: 0; top: 0; z-index: 4; width: var(--d); height: var(--d); pointer-events: none; transition: transform .14s cubic-bezier(.3,.8,.4,1); }
.c4-ghost .c4d { position: absolute; inset: 0; width: 100%; height: 100%; animation: c4-hover 1.1s ease-in-out infinite; box-shadow: 0 calc(var(--d) * .14) calc(var(--d) * .22) rgba(0,0,0,.35), inset 0 0 0 calc(var(--d) * .06) var(--rim), inset 0 calc(var(--d) * -.05) calc(var(--d) * .1) rgba(0,0,0,.25), inset 0 calc(var(--d) * .04) calc(var(--d) * .08) rgba(255,255,255,.45); }
.c4-ghost.idle .c4d { animation-duration: 1.8s; }
.c4-ghost.full .c4d { filter: grayscale(.8) brightness(.8); }
.c4-ghost b { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; font-size: max(13px, calc(var(--cell) * .2)); font-weight: 900; letter-spacing: .08em; padding: .2em .7em; border-radius: 999px; background: #ffb800; color: #1b1b1b; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.c4-ghost b::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: #ffb800; }
@keyframes c4-hover { 50% { transform: translateY(calc(var(--d) * -.08)); } }
.c4-win { left: 0; top: 0; z-index: 5; pointer-events: none; overflow: visible; }
.c4-win line { stroke-linecap: round; }
.c4-win .band line { stroke: rgba(255,255,255,.2); }
.c4-win .edge { fill: #fff; filter: drop-shadow(0 0 8px rgba(255,255,255,.95)) drop-shadow(0 0 22px rgba(255,220,120,.7)); }
.c4-win .rings circle { fill: none; stroke: #fff; filter: drop-shadow(0 0 8px #fff); animation: c4-ring 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes c4-ring { 50% { transform: scale(1.08); opacity: .55; } }
.c4-stage.won .c4-win { animation: c4-winin .5s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes c4-winin { from { opacity: 0; transform: scale(.96); } }

/* Discs: moulded plastic, a raised rim and two rings. */
.c4d { position: absolute; display: block; width: var(--d); height: var(--d); border-radius: 50%;
  --hi: #ff7d70; --base: #e3262f; --lo: #9e121a; --rim: #c41c24;
  background:
    radial-gradient(circle, transparent 0 27%, rgba(0,0,0,.2) 28.5% 31%, rgba(255,255,255,.22) 32% 33.5%, transparent 35%),
    radial-gradient(circle, transparent 0 56%, rgba(255,255,255,.26) 57.5% 59.5%, rgba(0,0,0,.2) 61% 63.5%, transparent 65%),
    radial-gradient(circle at 36% 30%, var(--hi) 0%, var(--base) 46%, var(--lo) 100%);
  box-shadow: inset 0 0 0 calc(var(--d) * .06) var(--rim), inset 0 calc(var(--d) * -.05) calc(var(--d) * .1) rgba(0,0,0,.28), inset 0 calc(var(--d) * .04) calc(var(--d) * .08) rgba(255,255,255,.4);
}
.c4d.yellow { --hi: #fff6a8; --base: #fbcb17; --lo: #c38c00; --rim: #e9ae06; }
.c4d.preview { opacity: .32; filter: saturate(.7); box-shadow: inset 0 0 0 calc(var(--d) * .05) rgba(255,255,255,.6); }
.c4d.lit { animation: c4-lit 1.1s ease-in-out infinite; }
@keyframes c4-lit { 50% { filter: brightness(1.35) saturate(1.15); } }

/* Edge-on discs, stacked like checkers by the board. */
.c4-stack { position: relative; width: 104px; }
.c4-stack i { position: absolute; left: 0; width: 100%; height: var(--ch, 18px); border-radius: 50% / 46%; background: linear-gradient(180deg, var(--hi) 0 30%, var(--base) 34% 62%, var(--lo) 100%); box-shadow: 0 2px 0 var(--lo), 0 3px 6px rgba(0,0,0,.25); }
.c4-stack.red { --hi: #ff8a7e; --base: #e3262f; --lo: #8f0f16; }
.c4-stack.yellow { --hi: #fff3a0; --base: #f6c414; --lo: #a87900; }

/* The wordmark */
.c4-mark { display: inline-flex; align-items: center; gap: 10px; line-height: .9; font-family: "Avenir Next", "Inter", Arial, sans-serif; }
.c4-mark small { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 22px; font-weight: 900; letter-spacing: .28em; color: #ffd23f; }
.c4-mark b { font-size: 66px; font-weight: 900; letter-spacing: -.02em; color: #fff; text-shadow: 0 3px 0 #1a4db5, 0 6px 0 rgba(0,0,0,.25); }
.c4-four { position: relative; width: 92px; height: 92px; flex: none; --d: 92px; }
.c4-four .c4d { left: 0; top: 0; transform: rotate(-8deg); }
.c4-four u { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 54px; font-weight: 900; color: #7a5600; text-shadow: 0 1px 0 rgba(255,255,255,.6); transform: rotate(-8deg); }
.c4-mark.st { flex-direction: column; align-items: flex-start; gap: 6px; }
.c4-mark.st b { font-size: 50px; }
.c4-mark.st span { font-size: 26px; font-weight: 900; letter-spacing: .14em; color: #ffd23f; }
.c4-mark.st em { position: relative; display: flex; gap: 6px; --d: 26px; }
.c4-mark.st em .c4d { position: relative; }

/* The table: a warm lamp over a dark wood games table (dark), a sunny maple one (light). */
.tbl-c4 {
  --tbl-edge: #120c08; --tbl-rim: #4a3524; --tbl-glow: rgba(255,200,130,.14);
  background:
    radial-gradient(ellipse 42% 58% at 50% 46%, rgba(255,214,150,.20), transparent 70%),
    radial-gradient(ellipse 90% 40% at 50% 100%, rgba(0,0,0,.35), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 238px, rgba(0,0,0,.32) 238px 240px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, transparent 2px 11px, rgba(0,0,0,.05) 11px 13px, transparent 13px 19px),
    linear-gradient(180deg, #3a271a 0%, #2e1f15 55%, #24170f 100%);
}
[data-theme="light"] .tbl-c4 {
  --tbl-edge: #ffffff; --tbl-rim: #e7d8bf; --tbl-glow: rgba(255,255,255,.3);
  background:
    radial-gradient(ellipse 40% 55% at 50% 44%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(ellipse 90% 35% at 50% 100%, rgba(150,110,60,.12), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 238px, rgba(150,105,50,.16) 238px 240px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 11px, rgba(150,105,50,.04) 11px 13px, transparent 13px 19px),
    linear-gradient(180deg, #f6ead5 0%, #efdfc3 60%, #e8d4b3 100%);
}
[data-theme="light"] .c4-mark b { color: #1d4fb6; text-shadow: 0 3px 0 #b9d2ff, 0 6px 0 rgba(30,40,80,.12); }
[data-theme="light"] .c4-mark small, [data-theme="light"] .c4-mark.st span { color: #d23a2a; }
[data-theme="light"] .c4-board { filter: drop-shadow(0 calc(var(--cell) * .12) calc(var(--cell) * .16) rgba(80,50,20,.3)); }