#connect-four{background:#100c08;overflow:hidden}
#c4-stage{position:absolute;width:min(100vw,197.64svh);aspect-ratio:1672/846;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden}
#c4-photo{position:absolute;width:100%;height:111.23%;top:-11.23%;left:0;max-width:none;object-fit:fill}
#c4-canvas{position:absolute;inset:0}#c4-canvas canvas{display:block}
.c4-bar{position:absolute;z-index:4;left:28px;right:28px;top:25px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.c4-bar button,#c4-controls button,#c4-lobby button{font:13px Georgia;color:#f5e5c6;background:#261b13e8;border:1px solid #a7865866;border-radius:4px;padding:10px 17px;cursor:pointer}
.c4-bar button:hover,#c4-controls button:hover,#c4-lobby button:hover{background:#493322}
#c4-status{font:16px Georgia;color:#fff0d8;text-shadow:0 2px 6px #000;text-align:center;margin:0}
#c4-controls{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:8px;white-space:nowrap}
#c4-lobby{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 36px));max-height:70svh;overflow:auto;background:#211810ed;border:1px solid #92754888;box-shadow:0 20px 90px #0008;padding:28px;box-sizing:border-box;border-radius:8px;color:#f2dfbb;font:15px/1.5 Georgia}
#c4-lobby h2{font-size:28px;font-weight:normal;margin:0 0 8px}#c4-lobby p{color:#c5b292}#c4-tables{display:grid;gap:10px;margin:18px 0}#c4-tables button{text-align:left}#c4-error{position:absolute;z-index:6;bottom:80px;left:50%;transform:translateX(-50%);color:#ffe3b8;background:#25190de8;padding:8px 16px;border-radius:4px;font:14px Georgia;max-width:85%;text-align:center}#c4-error:empty{display:none}
#c4-columns{position:absolute;bottom:77px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:4}#c4-columns button{width:33px;height:30px;border:1px solid #b7955f66;background:#241910cf;color:#efdab5;border-radius:50%;cursor:pointer}#c4-columns button:disabled{opacity:.35;cursor:default}#c4-columns button:focus-visible{outline:2px solid #ffe4a8;outline-offset:3px}
#games-connect-four{position:absolute;left:38%;top:55%;width:25%;height:13%;background:none;border:0;cursor:pointer;border-radius:8px}#games-connect-four:hover,#games-connect-four:focus-visible{outline:1px solid #f7d798;box-shadow:0 0 25px #f4c57133}
body[data-view=connect-four] #playback,body[data-view=connect-four] #skip{display:none}
@media(max-width:650px){#c4-stage{width:150vw;max-width:none}.c4-bar{left:12px;right:12px;top:65px;gap:7px}.c4-bar button{padding:8px;font-size:11px}#c4-status{font-size:13px}#c4-controls{bottom:80px}#c4-columns{bottom:130px;gap:6px}#c4-error{bottom:176px}#c4-lobby{max-height:60svh}}
@media(prefers-reduced-motion:reduce){#connect-four{transition:none}}
#connect-four [hidden]{display:none!important}
body[data-view=connect-four] #home{display:none}
.c4-bar{right:150px}
body[data-view=games] #home{display:none}
@media(max-width:650px){.c4-bar{right:12px}}
/* Clip oversized inactive scenes without creating a focus-scroll container. */
#experience{overflow:clip}
#c4-ghost{display:block;width:100%;margin:10px 0;background:linear-gradient(110deg,#3e472e,#293121);border-color:#b89c5d77}
#connect-four.c4-won #c4-rematch{animation:c4-invitation .9s 1.8s both;color:#f2d8a3;border-color:#b99357;background:#322417e8}
.c4-winning-counter{animation:c4-firelight 1.6s .55s both}
@keyframes c4-firelight{from{stroke:#80623c;stroke-width:2;filter:brightness(1)}to{stroke:#ebcb7e;stroke-width:3;filter:brightness(1.14)}}
@keyframes c4-invitation{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#connect-four.c4-won #c4-rematch,.c4-winning-counter{animation:none}.c4-winning-counter{stroke:#ebcb7e;stroke-width:3}}
#c4-score{position:absolute;z-index:4;top:66px;left:50%;transform:translateX(-50%) rotate(-1deg);margin:0;padding:8px 19px;background:linear-gradient(105deg,#eee0bf,#fff1d2 45%,#e4d3ad);border:1px solid #b39969;color:#513a25;box-shadow:0 3px 12px #170c0655;font:15px Georgia;white-space:nowrap}
#c4-result{position:absolute;z-index:5;bottom:24px;left:50%;transform:translateX(-50%);width:min(580px,calc(100% - 32px));box-sizing:border-box;text-align:center;padding:18px 24px;background:repeating-linear-gradient(12deg,#fff1d508 0 1px,transparent 1px 4px),linear-gradient(105deg,#e9d6af,#fff0d1 50%,#e6cda2);border:1px solid #b18d51;border-radius:3px;box-shadow:0 8px 28px #1b100877,inset 0 0 0 4px #fff0cd,inset 0 0 0 5px #b18d5155;color:#49311e}
.c4-result-label{font:10px Georgia;letter-spacing:3px;color:#84602c}#c4-winner{font:normal clamp(22px,3vw,30px)/1.15 Georgia;margin:7px 0}#c4-quote{font:italic 15px/1.4 Georgia;margin:8px 0 15px}.c4-result-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:9px}.c4-result-actions button{font:14px Georgia;border:1px solid #8f703f;border-radius:3px;padding:10px 14px;background:#35402b;color:#fff0d1;cursor:pointer}.c4-result-actions button+button{background:transparent;color:#523b24}.c4-result-actions button:disabled{opacity:.6;cursor:default}.c4-result-actions button:focus-visible{outline:2px solid #764c20;outline-offset:3px}
#connect-four.c4-won #c4-controls,#connect-four.c4-won #c4-columns{display:none}
.c4-reveal{animation:c4-result-in .7s .8s both}@keyframes c4-result-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
.c4-winning-counter{animation-duration:.4s;filter:brightness(1.2)}
@media(max-width:650px){#c4-score{top:115px;font-size:13px}#c4-result{bottom:74px;padding:14px 16px}#c4-quote{font-size:14px}.c4-result-actions button{font-size:12px;padding:9px 10px}}
@media(prefers-reduced-motion:reduce){.c4-reveal{animation:none}}

#c4-signin{position:absolute;z-index:6;bottom:47px;left:50%;transform:translateX(-50%);font:14px Georgia;color:#f3d6a5;background:#25190de8;padding:8px 16px;border-radius:4px}@media(max-width:650px){#c4-signin{bottom:135px}}