.c4-main{max-width:1280px;margin:0 auto;padding:36px 28px 80px;display:grid;grid-template-columns:320px 1fr 280px;grid-gap:32px;gap:32px;align-items:start}@media (max-width:1100px){.c4-main{grid-template-columns:1fr}}.c4-page .opp-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}.c4-page .opp-head>div:not(.opp-avatar){flex:1 1;min-width:0}.c4-page .opp-avatar{width:56px;height:56px;background:var(--bg-3);border:1px solid var(--rule);position:relative;overflow:hidden;flex:0 0 56px}.c4-page .opp-avatar svg{width:100%;height:100%;display:block}.c4-page .opp-name{font-family:var(--pixel);font-size:12px;letter-spacing:.04em;margin:0 0 6px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.c4-page .opp-meta{font-size:10px;color:var(--fg-dim);letter-spacing:.1em;font-family:var(--mono)}.c4-page .opp-meta .pill{display:inline-block;padding:2px 6px;margin-right:8px;background:var(--magenta);color:var(--bg);border-radius:0;text-transform:uppercase;font-family:var(--pixel);font-size:8px;letter-spacing:.1em}.c4-page .opp-bio{font-size:12.5px;color:var(--fg-dim);line-height:1.55;margin:0 0 12px}.c4-page .opp-select{display:grid;grid-gap:6px;gap:6px}.c4-page .opp-option{display:flex;align-items:center;gap:10px;padding:10px 12px;background:transparent;border:1px solid var(--rule);color:var(--fg);font-family:var(--mono);font-size:12px;text-align:left;cursor:pointer;border-radius:0;transition:border-color .12s,background .12s}.c4-page .opp-option:hover{border-color:var(--magenta)}.c4-page .opp-option[aria-selected=true]{border-color:var(--magenta);background:color-mix(in oklab,var(--magenta) 10%,transparent);box-shadow:0 0 0 1px var(--magenta) inset}.c4-page .opp-option .dot{width:10px;height:10px;background:var(--fg-faint);flex:0 0 10px}.c4-page .opp-option[aria-selected=true] .dot{background:var(--magenta);box-shadow:0 0 8px var(--magenta)}.c4-page .opp-option .ver{color:var(--cyan);margin-left:8px;font-size:10px;font-family:var(--pixel);letter-spacing:.08em}.c4-page .opp-option .desc{color:var(--fg-dim);font-size:11px;display:block;margin-top:4px}.c4-page .opp-option>div{font-family:var(--pixel);font-size:9px;letter-spacing:.06em;line-height:1.5}.c4-page .color-picker{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px}.c4-page .color-pick{border:1px solid var(--rule);background:transparent;padding:14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--fg);font-family:var(--pixel);font-size:9px;letter-spacing:.1em;text-transform:uppercase;border-radius:0;transition:border-color .12s}.c4-page .color-pick:hover{border-color:var(--magenta)}.c4-page .color-pick[aria-selected=true]{border-color:var(--magenta);background:color-mix(in oklab,var(--magenta) 8%,transparent);box-shadow:0 0 0 1px var(--magenta) inset}.c4-page .color-disc{width:36px;height:36px;border-radius:50%;box-shadow:inset 0 -4px 8px rgba(0,0,0,.3),inset 0 4px 6px rgba(255,255,255,.18)}.c4-page .color-disc.red{background:radial-gradient(circle at 35% 30%,var(--red-hi),var(--red) 55%,var(--red-deep))}.c4-page .color-disc.yellow{background:radial-gradient(circle at 35% 30%,var(--c4-yellow-hi),var(--c4-yellow) 55%,var(--c4-yellow-deep))}.c4-page .stage{display:flex;flex-direction:column;align-items:center;gap:18px}.c4-page .turn-strip{width:100%;max-width:640px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border:2px solid var(--rule);background:var(--bg-2);border-radius:0;overflow:hidden;position:relative}.c4-page .turn-strip:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;height:3px;background:linear-gradient(to right,var(--magenta) 0 40%,transparent 40% 60%,var(--cyan) 60% 100%)}.c4-page .turn-side{padding:14px 18px;display:flex;align-items:center;gap:12px;transition:background .2s,color .2s}.c4-page .turn-side.right{justify-content:flex-end}.c4-page .turn-side .who{font-family:var(--pixel);font-size:8px;text-transform:uppercase;letter-spacing:.16em;color:var(--fg-dim);margin-bottom:6px}.c4-page .turn-side .name{font-family:var(--pixel);font-size:12px;letter-spacing:.04em;white-space:nowrap;line-height:1.3}.c4-page .turn-side>div{min-width:0;flex:1 1}.c4-page .turn-side .disc-sm{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 -3px 6px rgba(0,0,0,.3),inset 0 3px 5px rgba(255,255,255,.18);flex:0 0 28px}.c4-page .turn-side .disc-sm.red{background:radial-gradient(circle at 35% 30%,var(--red-hi),var(--red) 55%,var(--red-deep))}.c4-page .turn-side .disc-sm.yellow{background:radial-gradient(circle at 35% 30%,var(--c4-yellow-hi),var(--c4-yellow) 55%,var(--c4-yellow-deep))}.c4-page .turn-side.active{background:color-mix(in oklab,var(--magenta) 14%,transparent)}.c4-page .turn-side.active .name{color:var(--fg);text-shadow:0 0 8px var(--magenta)}:root[data-theme=light] .c4-page .turn-side.active .name{text-shadow:none}@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .c4-page .turn-side.active .name{text-shadow:none}}.c4-page .turn-arrow{padding:0 14px;color:var(--cyan);font-family:var(--pixel);font-size:18px}.c4-page .board-wrap{--cell:78px;--gap:8px;--pad:14px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.c4-page .board{background:linear-gradient(180deg,var(--board-hi) 0,var(--board) 8%,var(--board) 92%,var(--board-deep) 100%);padding:var(--pad);padding-top:calc(var(--cell) + var(--pad) + 6px);border-radius:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55),inset 0 0 0 2px rgba(255,255,255,.06),inset 0 6px 14px rgba(255,255,255,.08),inset 0 -10px 18px rgba(0,0,0,.25);position:relative;display:inline-block}.c4-page .board:before{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.1),transparent 30%),radial-gradient(circle at 88% 100%,rgba(0,0,0,.18),transparent 40%)}.c4-page .board-grid{position:relative;display:grid;grid-template-columns:repeat(7,var(--cell));grid-template-rows:repeat(6,var(--cell));grid-gap:var(--gap);gap:var(--gap)}.c4-page .cell{width:var(--cell);height:var(--cell);border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--board-deep) 0 50%,transparent 51%),var(--board);box-shadow:inset 0 4px 6px rgba(0,0,0,.55),inset 0 -2px 3px rgba(255,255,255,.08);position:relative;overflow:hidden}.c4-page .disc{position:absolute;inset:6px;border-radius:50%;box-shadow:inset 0 -5px 10px rgba(0,0,0,.35),inset 0 5px 8px rgba(255,255,255,.22),0 1px 2px rgba(0,0,0,.4)}.c4-page .disc.red{background:radial-gradient(circle at 35% 30%,var(--red-hi),var(--red) 55%,var(--red-deep))}.c4-page .disc.yellow{background:radial-gradient(circle at 35% 30%,var(--c4-yellow-hi),var(--c4-yellow) 55%,var(--c4-yellow-deep))}.c4-page .disc:after{content:"";position:absolute;inset:18% 25% 55% 25%;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.4),transparent 70%)}.c4-page .disc.dropping{animation:c4-drop var(--dur,.55s) cubic-bezier(.55,.05,.95,.6) forwards}@keyframes c4-drop{0%{transform:translateY(calc(-1 * (var(--row) * (var(--cell) + var(--gap)) + var(--cell) + var(--pad))))}70%{transform:translateY(8px)}85%{transform:translateY(-4px)}to{transform:translateY(0)}}.c4-page .disc.winner{animation:c4-drop var(--dur,.55s) cubic-bezier(.55,.05,.95,.6) forwards,c4-winpulse 1.2s ease-in-out infinite .6s}.c4-page .disc.winner.static{animation:c4-winpulse 1.2s ease-in-out infinite}@keyframes c4-winpulse{0%,to{box-shadow:inset 0 -5px 10px rgba(0,0,0,.35),inset 0 5px 8px rgba(255,255,255,.22),0 0 0 0 rgba(255,255,255,0),0 0 0 0 currentColor}50%{box-shadow:inset 0 -5px 10px rgba(0,0,0,.35),inset 0 5px 8px rgba(255,255,255,.22),0 0 0 4px rgba(255,255,255,.7),0 0 22px 4px currentColor}}.c4-page .disc.winner.red{color:var(--red-hi)}.c4-page .disc.winner.yellow{color:var(--c4-yellow-hi)}.c4-page .drop-zone{position:absolute;top:0;left:0;right:0;height:calc(var(--cell) + var(--pad));display:grid;grid-template-columns:repeat(7,1fr);padding:var(--pad) var(--pad) 0;grid-column-gap:var(--gap);column-gap:var(--gap)}.c4-page .col-btn{background:transparent;border:0;cursor:pointer;position:relative;color:transparent;transition:color .15s}.c4-page .col-btn:disabled{cursor:not-allowed}.c4-page .col-btn .ghost{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:calc(var(--cell) - 12px);height:calc(var(--cell) - 12px);border-radius:50%;opacity:0;transition:opacity .15s;box-shadow:inset 0 -5px 10px rgba(0,0,0,.25),inset 0 5px 8px rgba(255,255,255,.22)}.c4-page .col-btn .ghost.red{background:radial-gradient(circle at 35% 30%,var(--red-hi),var(--red) 55%,var(--red-deep))}.c4-page .col-btn .ghost.yellow{background:radial-gradient(circle at 35% 30%,var(--c4-yellow-hi),var(--c4-yellow) 55%,var(--c4-yellow-deep))}.c4-page .col-btn:hover:not(:disabled) .ghost{opacity:.6}.c4-page .col-btn .arrow{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-family:var(--term);font-size:24px;color:rgba(255,255,255,.8);opacity:0;transition:opacity .15s}.c4-page .col-btn:hover:not(:disabled) .arrow{opacity:1}.c4-page .col-indicators{position:absolute;bottom:-28px;left:var(--pad);right:var(--pad);display:grid;grid-template-columns:repeat(7,var(--cell));grid-gap:var(--gap);gap:var(--gap);pointer-events:none}.c4-page .col-indicators span{text-align:center;font-size:10px;color:var(--fg-faint);letter-spacing:.08em;font-family:var(--mono)}.c4-page .score-row{display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:8px;gap:8px;text-align:center}.c4-page .score-row>div{border:1px solid var(--rule);padding:14px 8px 12px;border-radius:0}.c4-page .score-row .label{font-family:var(--pixel);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint)}.c4-page .score-row .value{font-family:var(--pixel);font-size:22px;letter-spacing:.02em;margin-top:10px;color:var(--fg);font-feature-settings:"tnum"}.c4-page .score-row .value.w{color:var(--lime)}.c4-page .score-row .value.l{color:var(--magenta)}.c4-page .log{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--fg);background:var(--bg-3);padding:12px 14px;border-radius:0;max-height:200px;overflow-y:auto;border:1px solid var(--rule);letter-spacing:.02em}.c4-page .log .ln{display:block}.c4-page .log .ln .t{color:var(--fg-faint);margin-right:8px}.c4-page .log .ln .you{color:var(--cyan)}.c4-page .log .ln .ai{color:var(--magenta)}.c4-page .log .ln .sys{color:var(--fg-dim)}.c4-page .log .ln .win{color:var(--lime)}.c4-page .thinking{display:inline-flex;align-items:center;gap:6px;color:var(--magenta);font-family:var(--pixel);font-size:9px;letter-spacing:.1em;text-transform:uppercase}.c4-page .thinking .dots{display:inline-flex;gap:3px}.c4-page .thinking .dots i{width:5px;height:5px;background:var(--magenta);animation:c4-think 1s ease-in-out infinite;box-shadow:0 0 6px var(--magenta)}.c4-page .thinking .dots i:nth-child(2){animation-delay:.15s}.c4-page .thinking .dots i:nth-child(3){animation-delay:.3s}@keyframes c4-think{0%,80%,to{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.c4-page .result{position:absolute;inset:0;background:color-mix(in oklab,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:14px;text-align:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s}.c4-page .result.show{opacity:1;pointer-events:auto}.c4-page .result h2{font-family:var(--pixel);font-size:42px;line-height:1.05;margin:0 0 16px;letter-spacing:.04em;text-shadow:4px 4px 0 var(--cyan)}.c4-page .result.win h2{color:var(--lime);text-shadow:4px 4px 0 var(--cyan)}.c4-page .result.loss h2{color:var(--magenta);text-shadow:4px 4px 0 var(--cyan)}.c4-page .result.draw h2{color:var(--cyan);text-shadow:4px 4px 0 var(--magenta)}.c4-page .result p{font-family:var(--pixel);font-size:9px;color:var(--fg-dim);margin:0 0 22px;letter-spacing:.16em;text-transform:uppercase}.c4-page .stage-help{color:var(--fg-faint);text-align:center}.c4-page .stage-help,.c4-page .turn-meta{font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-top:14px}.c4-page .turn-meta{justify-content:space-between}.c4-page .api-banner,.c4-page .turn-meta{display:flex;align-items:center;color:var(--fg-dim)}.c4-page .api-banner{margin:0 0 18px;padding:10px 12px;border:1px solid var(--rule);background:color-mix(in oklab,var(--magenta) 6%,transparent);font-family:var(--mono);font-size:11px;letter-spacing:.04em;gap:10px}.c4-page .api-banner strong{color:var(--magenta);font-weight:500;flex:0 0 auto}.c4-page .api-banner-msg{flex:1 1 auto;min-width:0}.c4-page .api-banner-actions{display:inline-flex;gap:6px;flex:0 0 auto}.c4-page .api-banner-actions .btn{padding:6px 10px;font-size:8px}.c4-page .api-banner-actions .api-banner-dismiss{padding:6px 8px;font-family:var(--mono);font-size:11px;letter-spacing:0}.c4-page .api-banner-transient{border-color:color-mix(in oklab,var(--yellow) 50%,var(--rule));background:color-mix(in oklab,var(--yellow) 6%,transparent)}.c4-page .api-banner-transient strong{color:var(--yellow)}.c4-page .api-banner-expired{border-color:color-mix(in oklab,var(--cyan) 50%,var(--rule));background:color-mix(in oklab,var(--cyan) 6%,transparent)}.c4-page .api-banner-expired strong{color:var(--cyan)}