body{background:#f5f6f9;color:#202d40}button,a{-webkit-tap-highlight-color:transparent}#connect-app{max-width:1050px;margin:auto;padding:0 28px 48px}.live-label{font-size:10px;letter-spacing:1.5px;color:#648476}.cf-nav{display:flex;align-items:center;justify-content:space-between;margin:24px 0 30px;font-size:11px;gap:15px}.cf-nav>a{color:#738197;text-decoration:none}.cf-nav>span{letter-spacing:2px;color:#6e7e97;font-size:10px}.cf-nav>div{display:flex;gap:7px}.cf-nav button{border:1px solid #d8e1ed;background:#fff;border-radius:8px;padding:9px 12px;color:#3978c5;cursor:pointer}#fullscreen{font-size:18px;padding:4px 10px}.cf-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:28px}.cf-heading h1{font-size:38px;letter-spacing:-1.5px;margin:0 0 9px}.cf-heading p{font-size:13px;color:#7b8798}.cf-heading button{display:grid;gap:5px;text-align:left;border:1px solid #dce4ee;background:white;border-radius:10px;padding:12px 18px;cursor:pointer}.cf-heading small{font-size:8px;letter-spacing:1.4px;color:#8996a8}.cf-heading strong{font-size:18px;letter-spacing:3px}.cf-heading span{font-size:10px;color:#447bc6}.cf-lobby{display:grid;grid-template-columns:1fr 1fr;background:white;border:1px solid #e2e7f0;border-radius:18px;overflow:hidden}.cf-lobby form{padding:35px}.cf-lobby h2{font-size:22px;letter-spacing:-.6px;margin-bottom:10px}.cf-lobby p{font-size:12px;color:#7b8798;line-height:1.8}.cf-lobby label{display:block;font-size:11px;margin-top:24px}.cf-lobby input{width:100%;margin:8px 0 12px}.cf-lobby .primary{width:100%}.cf-join{display:flex;gap:10px;align-items:center;margin-top:15px}.cf-join input{min-width:0;margin:0}.cf-join button{white-space:nowrap}.lobby-preview{background:#eaf0fc;position:relative;display:flex;justify-content:center;align-items:center;min-height:300px;overflow:hidden}.lobby-preview>span{position:absolute;bottom:25px;left:30px;color:#42669c;font-size:10px;line-height:1.7;letter-spacing:2px}.preview-disc{width:120px;height:120px;border-radius:50%;box-shadow:inset 0 0 0 6px #ffffff50,inset 0 0 0 10px #00000016,0 14px 0 #00000015,0 25px 25px #24447120}.preview-disc.orange{transform:translate(-15px,25px)}.preview-disc.green{transform:translate(15px,-25px)}.green{background:linear-gradient(155deg,#aff32f 0%,#6dd615 45%,#4bac0c 100%);--disc-edge:#438b0c}.orange{background:linear-gradient(155deg,#ffbf43 0%,#ff8c0c 50%,#e56905 100%);--disc-edge:#bb5004}.cf-players{display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid #e1e7ee;background:white;border-radius:12px;padding:16px 23px;margin-bottom:15px}.cf-players>div{display:flex;gap:10px;align-items:center;flex:1;min-width:0}.cf-players>div:last-child{justify-content:flex-end}.player-chip{width:26px;height:26px;border-radius:50%;flex:none;border:2px solid #ffffff80;box-shadow:0 1px 3px #0002}.player-text{min-width:0}.player-text strong{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis}.player-text small{font-size:10px;color:#8b97a8;display:block;margin-top:4px}#series{font-size:17px;letter-spacing:4px;color:#94a1b1}.cf-stage{display:flex;align-items:center;justify-content:center;gap:32px;padding:20px 20px 36px;border-radius:16px;background:radial-gradient(ellipse at 50% 100%,#d7dfed 0,transparent 60%),#eef1f6;overflow:hidden}.cf-board-wrap{width:min(100%,620px);position:relative;flex:1;min-width:0;padding-bottom:20px}#column-controls{display:grid;grid-template-columns:repeat(7,1fr);padding:0 13px;height:49px;gap:0}#column-controls button{position:relative;border:0;background:none;color:#6c8bad;font-size:18px;cursor:pointer;border-radius:9px}#column-controls button:enabled:hover,#column-controls button:focus-visible{background:#dce7fb;color:#1968db;outline:2px solid #7eabeb;outline-offset:-3px}#column-controls button:disabled{opacity:.3;cursor:default}#cf-board{position:relative;width:100%;aspect-ratio:7/6;background:#cdd8e9;border-radius:13px;border:3px solid #173b80;box-shadow:0 7px 0 #123e8e,0 16px 22px #15316030;overflow:hidden}#discs,#board-face{position:absolute;inset:8px;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr)}#discs{z-index:1}#board-face{z-index:2;pointer-events:none;box-shadow:0 0 0 12px #2063ec;border-radius:3px}.cf-hole{background:radial-gradient(circle closest-side,transparent 70%,#164499 72%,#0d438f 78%,#75b3ff 80%,#2469e7 85%,#2063ec 87%)}.disc{border-radius:50%;border:2px solid var(--disc-edge);box-shadow:inset 0 0 0 3px #ffffff65,inset 0 -5px 5px #0002,0 2px 1px #0002}.board-disc{position:relative;width:75%;height:75%;align-self:center;justify-self:center;will-change:transform}.board-disc.winning{z-index:3;outline:3px solid #fff;outline-offset:2px;animation:win-glow 1.2s ease-in-out infinite}.board-disc.drop{animation:disc-drop var(--duration,650ms) cubic-bezier(.32,.02,.7,.45) both}.board-disc.drop.winning{animation:disc-drop var(--duration,650ms) cubic-bezier(.32,.02,.7,.45) both,win-glow 1.2s var(--duration,650ms) ease-in-out infinite}.board-feet:before,.board-feet:after{content:'';position:absolute;bottom:0;width:14%;height:27px;background:linear-gradient(#277bf6,#1654c5);border:3px solid #173b80;border-radius:5px 5px 3px 3px;box-shadow:0 4px 0 #bac5d5;z-index:3}.board-feet:before{left:-1%}.board-feet:after{right:-1%}.turn-card{width:126px;flex:none;display:flex;align-items:center;flex-direction:column;background:white;border:1px solid #dae2ee;padding:16px;border-radius:13px;box-shadow:0 5px 0 #d4deec;gap:12px;text-align:center}.turn-card>small{font-size:8px;color:#6883a6;letter-spacing:1px}.turn-card .disc{width:64px;height:64px}.turn-card strong{font-size:11px;max-width:100%;overflow-wrap:anywhere}#timer{font-variant-numeric:tabular-nums;color:#7f91aa;font-size:16px}.cf-under{display:flex;justify-content:space-between;font-size:10px;color:#94a0b1;margin-top:17px;gap:12px}.cf-help{font-size:12px;line-height:1.8;text-align:center;color:#8592a4;margin:28px auto;max-width:600px}#connection{background:#fff1d4;color:#947035;padding:14px;border-radius:8px;margin-bottom:15px;font-size:12px}#result{background:white;border:1px solid #d8e5d5;border-radius:12px;margin-top:24px;padding:24px;text-align:center}#result h2{font-size:26px;margin-bottom:8px}#result p{font-size:12px;color:#7f8f9f;margin:10px}#result .button{margin:8px}.cf-bottom{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:40px;border-top:1px solid #dfe5ed;padding-top:24px}.cf-bottom summary{cursor:pointer;font-size:13px}.cf-bottom p{font-size:12px;color:#8391a2;line-height:1.8;margin-top:12px}.cf-rankings h2{font-size:13px;display:flex;justify-content:space-between}.cf-rankings small{font-size:9px;color:#91a0b3}.cf-rankings ol{padding:0;list-style:none;margin:10px 0}.cf-rankings li{display:flex;justify-content:space-between;font-size:12px;border-bottom:1px solid #e4e9ef;padding:10px 0}#error{color:#b24e42}.cf-stage:fullscreen{background:#edf1f7}.cf-nav a:focus-visible{outline:2px solid #216aec}
@keyframes disc-drop{0%{transform:translateY(var(--fall))}80%{transform:translateY(0)}90%{transform:translateY(-12%)}100%{transform:translateY(0)}}@keyframes win-glow{50%{filter:brightness(1.2);box-shadow:0 0 15px #fff9,inset 0 0 0 3px #ffffff65}}
@media(max-width:680px){#connect-app{padding:0 14px 30px}.cf-nav{margin:15px 0 25px}.cf-nav>span{display:none}.cf-heading h1{font-size:29px}.cf-heading p{font-size:11px;line-height:1.6}.cf-heading button{padding:10px}.cf-heading strong{font-size:14px}.cf-lobby{grid-template-columns:1fr}.cf-lobby form{padding:23px}.lobby-preview{min-height:180px}.preview-disc{width:85px;height:85px}.lobby-preview>span{left:18px;bottom:12px;font-size:8px}.cf-players{padding:12px}.player-text strong{font-size:11px}.player-text small{font-size:9px}.player-chip{width:20px;height:20px}.cf-stage{padding:8px 10px 20px;display:flex;flex-direction:column;gap:15px}.cf-board-wrap{width:100%;flex:auto}#column-controls{height:40px;padding:0 8px}#discs,#board-face{inset:5px}.turn-card{width:100%;flex-direction:row;justify-content:center;padding:10px;gap:12px;box-shadow:none}.turn-card .disc{width:30px;height:30px}.turn-card small{font-size:8px}.turn-card strong{max-width:100px}.turn-card #timer{margin-left:auto;font-size:13px}.board-disc{border-width:1px;box-shadow:inset 0 0 0 2px #ffffff65,inset 0 -3px 3px #0002}.board-disc.winning{outline-width:2px;outline-offset:0}.cf-bottom{grid-template-columns:1fr;gap:25px;margin-top:25px}.cf-under{font-size:9px}.cf-help{font-size:11px}}

.cf-board-wrap{max-width:540px}.cf-heading{margin-bottom:20px}.cf-nav{margin:18px 0 24px}.cf-players{margin-bottom:12px}.cf-stage{padding-top:12px}.turn-card .disc{transition:background .25s,transform .25s}.cf-players .player-chip{transition:box-shadow .25s}#result:not([hidden]){animation:result-in .4s ease-out}.cf-board-wrap button:enabled:hover:before{content:'';display:block;position:absolute;width:18px;height:18px;border-radius:50%;background:#76c4fa;left:calc(50% - 9px);top:5px;opacity:.35}#cf-board.new-round{animation:board-ready .45s ease-out}@keyframes board-ready{from{opacity:.4;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes result-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.cf-turn-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;margin:16px 0 4px;border:1px solid #dce5ef;border-radius:10px;background:white}.cf-turn-bar strong{font-size:11px;letter-spacing:.9px;color:#8591a5}.cf-turn-bar strong.your-turn{color:#237342}.cf-turn-bar span{font-size:11px;color:#7e8da1}.cf-players>div{padding:8px;border-radius:8px;transition:background .2s,box-shadow .2s}.cf-players .active-turn{background:#edf5ff;box-shadow:inset 0 0 0 1px #c5dcfb}.cf-stage{position:relative}#cf-board{cursor:default}#cf-board.can-play{cursor:pointer}#cf-board[aria-disabled=true]{cursor:default}#result{scroll-margin-top:18px;position:relative}#outcome-icon{display:inline-grid;place-items:center;width:52px;height:52px;margin-bottom:12px;border-radius:50%;font-size:28px}#result[data-outcome=win]{background:#f0faed;border-color:#b7dbac}#result[data-outcome=win] #outcome-icon{background:#ddf2d2;color:#4a8d30}#result[data-outcome=loss]{background:#f1f4fa;border-color:#d4ddec}#result[data-outcome=loss] #outcome-icon{background:#e0e7f2;color:#62799c}#result[data-outcome=draw] #outcome-icon{background:#fff0d4;color:#aa791e}#match[data-outcome=loss] .board-disc:not(.winning){opacity:.55;transition:opacity .6s}#result.outcome-enter[data-outcome=win] #outcome-icon{animation:win-badge .7s ease-out}#result.outcome-enter[data-outcome=loss] #outcome-icon{animation:loss-badge .6s ease-out}#result.outcome-enter[data-outcome=draw] #outcome-icon{animation:draw-badge .6s ease-out}#celebration{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}#celebration i{position:absolute;left:var(--x);top:-20px;width:9px;height:16px;background:#71cf3c;animation:confetti-fall 2s var(--delay) ease-in both}#celebration i:nth-child(3n){background:#ffac3c}#celebration i:nth-child(3n+1){background:#5c9bf3}@keyframes confetti-fall{from{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(700px) rotate(var(--spin));opacity:0}}@keyframes win-badge{0%{transform:scale(.4) rotate(-35deg)}65%{transform:scale(1.15) rotate(8deg)}100%{transform:scale(1)}}@keyframes loss-badge{0%,100%{transform:translateX(0)}30%{transform:translateX(-7px)}60%{transform:translateX(7px)}}@keyframes draw-badge{from{transform:rotate(-90deg);opacity:0}to{transform:rotate(0);opacity:1}}@media(max-width:680px){.cf-turn-bar{padding:12px;flex-direction:column;align-items:flex-start;gap:5px}.cf-turn-bar strong{font-size:10px}.cf-players{padding:6px}.cf-players>div{padding:6px}}
#result{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:4px 18px;text-align:left;padding:18px 22px;margin:16px 0}#result #outcome-icon{grid-column:1;grid-row:1/4;margin:0}#result h2{grid-column:2;margin:0;font-size:24px}#result #result-copy{grid-column:2;margin:0;line-height:1.6}#result #rematch{grid-column:3;grid-row:1/3;margin:0}#result #rematch-status{grid-column:3;grid-row:3;margin:0;font-size:10px;max-width:180px}@media(max-width:680px){#result{grid-template-columns:42px 1fr;padding:16px;gap:8px 12px}#result #outcome-icon{width:42px;height:42px;grid-row:1/3}#result h2{font-size:21px}#result #rematch{grid-column:1/-1;grid-row:3;width:100%;margin-top:5px}#result #rematch-status{grid-column:1/-1;grid-row:4;max-width:none}}
#result:focus{outline:none}#match[data-outcome] .cf-board-wrap{max-width:440px}

/* Full-width phone board, generous controls and compact landscape play. */
@media(max-width:680px){
  #connect-app{width:100%;padding:0 14px 28px}
  .cf-nav{margin:10px 0 18px;gap:8px}.cf-nav>a{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
  .cf-nav button,#fullscreen{min-width:44px;min-height:44px;font-size:13px;padding:8px 10px}
  .cf-heading{gap:12px;align-items:flex-start}.cf-heading>div{min-width:0}.cf-heading h1{font-size:28px}.cf-heading p{font-size:13px;overflow-wrap:anywhere}
  .cf-heading button{flex-shrink:0}.cf-heading strong{letter-spacing:2px}
  .cf-lobby form{padding:20px}.cf-lobby p,.cf-lobby label{font-size:13px}.cf-lobby input{font-size:16px}
  .cf-join{gap:8px}.cf-join button{padding-inline:12px}
  .lobby-preview{min-height:145px}.preview-disc{width:72px;height:72px}
  .cf-players{gap:7px}.player-text strong{white-space:nowrap;font-size:12px}.player-text small{font-size:11px;overflow-wrap:anywhere}
  .cf-players>div{gap:6px}#series{font-size:14px;letter-spacing:1px;white-space:nowrap}
  .cf-turn-bar strong,.cf-turn-bar span{font-size:12px}
  .cf-stage{padding:8px 4px 16px}#column-controls{height:48px;padding:0 8px}
  #cf-board{touch-action:manipulation}
  .turn-card{gap:8px;padding:10px 8px}.turn-card strong{font-size:12px;max-width:110px}.turn-card>small{font-size:9px}
  .cf-under{font-size:11px;flex-wrap:wrap}.cf-help{font-size:13px;margin:18px auto}
  .cf-bottom summary,.cf-rankings h2{font-size:14px}.cf-bottom p,.cf-rankings li{font-size:13px}
  #result{padding:14px;gap:8px 10px}#result #result-copy,#result #rematch-status{font-size:13px}

}
@media(max-height:500px) and (orientation:landscape){
  .cf-stage{flex-direction:row;gap:20px;padding:10px 24px}
  .cf-stage .cf-board-wrap{flex:0 1 auto;width:min(65vw,calc((100dvh - 90px)*7/6))}
  .cf-stage .turn-card{width:120px;flex:none;flex-direction:column}.cf-stage #timer{margin:0}
}

/* Gravity, a visible landing bounce, then a line drawn through the winning discs. */
@keyframes disc-drop{
  0%{transform:translateY(var(--fall)) scale(1,1)}
  66%{transform:translateY(0) scale(1.12,.88)}
  78%{transform:translateY(-30%) scale(.96,1.04)}
  89%{transform:translateY(0) scale(1.06,.94)}
  95%{transform:translateY(-8%) scale(1,1)}
  100%{transform:translateY(0) scale(1,1)}
}
.board-disc.winning{animation:win-glow 1.2s var(--win-delay,0ms) ease-in-out infinite}
.board-disc.drop.winning{animation:disc-drop var(--duration,800ms) cubic-bezier(.32,.02,.7,.45) both,win-glow 1.2s var(--win-delay,800ms) ease-in-out infinite}
#winning-line{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);z-index:4;pointer-events:none;overflow:visible}
#winning-stroke{stroke:#fff5a7;stroke-width:12;stroke-linecap:round;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #ffd75b);stroke-dasharray:1;stroke-dashoffset:0;opacity:.95}
#winning-line.draw-line #winning-stroke{animation:winning-line-draw .7s var(--line-delay,0ms) ease-out both,winning-line-glow 1.4s calc(var(--line-delay,0ms) + .7s) ease-in-out infinite}
@keyframes winning-line-draw{from{stroke-dashoffset:1;opacity:0}10%{opacity:.95}to{stroke-dashoffset:0;opacity:.95}}
@keyframes winning-line-glow{50%{stroke-width:17;opacity:.7}}
@media(max-width:680px){#winning-line{inset:5px;width:calc(100% - 10px);height:calc(100% - 10px)}}
#winning-line svg{display:block;width:100%;height:100%;overflow:visible}

#outcome-dialog{text-align:center;padding:36px 28px 26px;border-radius:20px;border:1px solid #dbe4ef}
#outcome-dialog::backdrop{background:#122440b8;backdrop-filter:blur(7px)}
#popup-icon{display:grid;place-items:center;width:82px;height:82px;margin:4px auto 20px;border-radius:50%;font-size:44px;background:#e3eaf6;color:#6880a4}
#outcome-dialog[data-outcome=win] #popup-icon{background:#dff2d5;color:#4b8d2f}
#outcome-dialog[data-outcome=loss] #popup-icon{background:#f5e2dc;color:#ab634f}
#outcome-dialog h2{padding:0;font-size:36px;letter-spacing:-1px;margin:0 0 12px}
#popup-copy{font-size:14px;color:#748399;line-height:1.7}
.popup-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}.popup-actions .button{min-height:50px;font-size:15px}
#popup-status{font-size:13px;color:#73839b;margin-top:14px}
#outcome-dialog[open]{animation:result-in .35s ease-out}#outcome-dialog[open] #popup-icon{animation:win-badge .65s ease-out}
@media(max-width:360px){#outcome-dialog{padding:30px 20px 22px}.popup-actions{grid-template-columns:1fr}.popup-actions .button{width:100%}}