@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink:#f8fafc; --muted:#a3adc2; --paper:#09090b; --white:#111827; --line:rgba(255,255,255,.1); --cyan:#4de4f2; --purple:#a78bfa; --pink:#fb7185; --yellow:#facc15; --shadow:0 24px 70px rgba(0,0,0,.35); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 85% 5%,rgba(124,92,255,.18),transparent 28rem),#09090b; font-family:Inter,ui-sans-serif,system-ui,sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.container { width:min(1160px,calc(100% - 36px)); margin:0 auto; }
.site-header { height:64px; background:rgba(9,9,11,.82); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; backdrop-filter:blur(18px); }
.nav-wrap { height:100%; display:flex; align-items:center; gap:24px; }
.brand { font-size:20px; font-weight:900; letter-spacing:-1px; }
.brand span { color:var(--purple); }
.main-nav { display:flex; gap:20px; margin-left:auto; color:#a1a1aa; font-size:12px; font-weight:700; }
.main-nav a:hover { color:#fff; }
.nav-cta { border:1px solid var(--line); border-radius:10px; padding:8px 12px; font-size:11px; font-weight:800; }
.nav-cta span { color:var(--cyan); margin-left:6px; }
.game-header { padding:38px 0 18px; }
.breadcrumb { color:#71717a; font-size:11px; margin-bottom:16px; }
.breadcrumb a { color:var(--cyan); }
.game-intro h1 { font-size:clamp(32px,5vw,54px); line-height:1; letter-spacing:-3px; margin:8px 0 12px; }
.game-intro p { color:var(--muted); max-width:650px; margin:0; }
.section-kicker { color:var(--cyan); font-size:10px; font-weight:900; letter-spacing:1.5px; }
.game-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:18px; padding:18px 0 70px; align-items:start; }
.play-card,.info-card { border:1px solid var(--line); background:rgba(17,24,39,.8); border-radius:18px; box-shadow:var(--shadow); }
.play-card { padding:18px; }
.game-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:15px; border-bottom:1px solid var(--line); }
.status-line { display:flex; align-items:center; gap:9px; color:#cbd5e1; font-size:12px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px rgba(77,228,242,.8); }
.status-dot.thinking { background:var(--yellow); }
.status-dot.over { background:var(--pink); }
.toolbar-actions { display:flex; gap:8px; }
.online-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 0 2px; }
.online-controls[hidden] { display:none; }
.room-input { width:92px; border:1px solid var(--line); border-radius:8px; padding:8px 10px; color:#fff; background:rgba(255,255,255,.05); font-size:11px; text-transform:uppercase; outline:none; }
.room-input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(77,228,242,.12); }
.online-status { color:#8290aa; font-size:10px; }
.select-control,.reset-button { border:1px solid var(--line); color:#e2e8f0; background:rgba(255,255,255,.05); border-radius:8px; padding:8px 10px; font-size:11px; }
.select-control:disabled { cursor:not-allowed; opacity:.4; }
.reset-button { cursor:pointer; background:var(--purple); color:#09090b; border-color:var(--purple); font-weight:800; }
.board-wrap { padding:22px 0 7px; display:flex; justify-content:center; overflow:hidden; }
.gomoku-board { width:min(600px,calc(100vw - 40px)); max-width:600px; aspect-ratio:1; display:grid; grid-template-columns:repeat(15,minmax(0,1fr)); grid-template-rows:repeat(15,minmax(0,1fr)); padding:9px; gap:3px; border-radius:14px; background:linear-gradient(135deg,#132e4f,#1c1744); box-shadow:inset 0 0 0 1px rgba(103,232,249,.2),0 18px 30px rgba(45,70,173,.2); }
.gomoku-cell { min-width:0; min-height:0; width:100%; height:100%; display:grid; place-items:center; line-height:1; padding:0; border:0; border-radius:5px; background:rgba(255,255,255,.06); color:var(--cyan); cursor:pointer; font-family:'Space Grotesk',Inter,sans-serif; font-size:clamp(12px,2.1vw,24px); font-weight:900; transition:background .12s,box-shadow .12s; }
.gomoku-cell:hover:not(:disabled) { background:rgba(255,255,255,.15); }
.gomoku-cell:focus-visible { outline:2px solid rgba(103,232,249,.85); outline-offset:-2px; }
.gomoku-cell:disabled { cursor:default; }
.gomoku-cell.o { color:var(--purple); }
.gomoku-cell.winner { background:rgba(250,204,21,.25); animation:pop .35s ease; }
.board-help { color:#71717a; text-align:center; font-size:10px; margin:10px 0 0; }
.info-stack { display:grid; gap:13px; }
.info-card { padding:18px; }
.info-card h2 { font-size:16px; letter-spacing:-.4px; margin:0 0 10px; }
.info-card p,.info-card li { color:var(--muted); font-size:11px; line-height:1.65; }
.info-card ul { margin:0; padding-left:17px; }
.mini-stat { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding:8px 0; font-size:11px; }
.mini-stat:last-child { border:0; }
.mini-stat span { color:var(--muted); }
.mini-stat strong { font-size:17px; }
.site-footer { border-top:1px solid var(--line); padding:22px 0; color:#71717a; }
.footer-wrap { display:flex; align-items:center; gap:16px; }
.footer-wrap p,.footer-copy { font-size:10px; margin:0; }
.footer-copy { margin-left:auto; }
.canvas-card { padding:18px; background:linear-gradient(160deg,#0b1430,#1c1e53); color:#fff; border-radius:18px; }
.canvas-toolbar { display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; }
.canvas-toolbar .status-line { color:#aab6d1; }
.canvas-score { font-size:21px; }
.canvas-wrap { position:relative; width:min(480px,100%); margin:0 auto; border-radius:14px; overflow:hidden; background:#111a42; box-shadow:0 15px 35px rgba(7,13,45,.35); }
.sky-canvas { display:block; width:100%; height:auto; touch-action:manipulation; }
.canvas-overlay { position:absolute; inset:0; display:grid; place-items:center; text-align:center; background:linear-gradient(180deg,rgba(10,16,46,.1),rgba(10,16,46,.52)); }
.canvas-overlay.hidden { display:none; }
.overlay-box { padding:22px; }
.overlay-box h2 { font-size:27px; margin:0 0 8px; }
.overlay-box p { color:#bdc9e2; font-size:12px; margin-bottom:18px; }
.canvas-tip { color:#91a1c4; font-size:10px; text-align:center; padding-top:12px; margin:0; }
@keyframes pop { 50% { transform:scale(1.08); } }
@media(max-width:850px) { .main-nav{display:none}.game-layout{grid-template-columns:1fr}.info-stack{grid-template-columns:repeat(2,1fr)}.game-intro{display:block} }
@media(max-width:560px) { .container{width:calc(100% - 26px)}.site-header{height:58px}.game-header{padding-top:28px}.game-toolbar{align-items:stretch;flex-direction:column}.toolbar-actions{justify-content:space-between;flex-wrap:wrap}.toolbar-actions .select-control{flex:1;min-width:140px}.online-controls{align-items:stretch}.online-controls .online-status{width:100%}.info-stack{grid-template-columns:1fr}.play-card{padding:12px}.gomoku-board{width:min(100%,calc(100vw - 38px));padding:6px;gap:2px}.footer-wrap{flex-wrap:wrap}.footer-copy{margin-left:0;width:100%} }

/* Facebook Messenger light theme for the Caro board. */
.caro-page { color:#0f172a; background:#f8fafc; }
.caro-page .site-header { background:rgba(255,255,255,.9); border-bottom-color:#e2e8f0; }
.caro-page .brand { color:#0f172a; }
.caro-page .main-nav { color:#64748b; }
.caro-page .main-nav a:hover { color:#1877f2; }
.caro-page .nav-cta { color:#1877f2; border-color:#bfdbfe; }
.caro-page .game-intro p { color:#64748b; }
.caro-page .play-card,.caro-page .info-card { background:#fff; border-color:#e2e8f0; box-shadow:0 10px 30px rgba(15,23,42,.08); }
.caro-page .game-toolbar { border-bottom-color:#e2e8f0; }
.caro-page .status-line { color:#334155; }
.caro-page .select-control,.caro-page .room-input { color:#0f172a; background:#fff; border-color:#cbd5e1; }
.caro-page .reset-button { color:#fff; background:#1877f2; border-color:#1877f2; }
.caro-page .online-status { color:#64748b; }
.caro-page .gomoku-board { padding:10px; gap:0; border:1px solid #e2e8f0; border-radius:16px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.1); }
.caro-page .gomoku-board { width:min(760px,calc(100vw - 40px)); max-width:760px; grid-template-columns:repeat(20,minmax(0,1fr)); grid-template-rows:repeat(20,minmax(0,1fr)); }
.caro-page .gomoku-cell { position:relative; min-width:0; min-height:0; width:100%; height:100%; border:1px solid #e2e8f0; border-radius:0; margin:-.5px; background:#fff; color:#1877f2; font-family:'Space Grotesk',Inter,sans-serif; font-size:clamp(14px,2.2vw,28px); font-weight:700; transition:background .12s,color .12s,box-shadow .12s; }
.caro-page .gomoku-cell.o { color:#ef4444; }
.caro-page .gomoku-cell:hover:not(:disabled) { background:#f8fafc; transform:none; }
.caro-page .gomoku-cell[data-preview]::after { content:attr(data-preview); position:absolute; inset:0; display:grid; place-items:center; opacity:0; pointer-events:none; }
.caro-page .gomoku-cell[data-preview]:hover::after { opacity:.28; }
.caro-page .gomoku-cell[data-preview="X"]::after { color:#1877f2; }
.caro-page .gomoku-cell[data-preview="O"]::after { color:#ef4444; }
.caro-page .gomoku-cell.last-move { z-index:2; background:#fef9c3; border:2px solid #fbbf24; animation:gomoku-mark-pop .28s ease-out; }
.caro-page .gomoku-cell.last-move::before { content:""; position:absolute; top:3px; right:3px; width:7px; height:7px; border-radius:999px; background:#ef4444; box-shadow:0 0 0 2px rgba(239,68,68,.12); }
.caro-page .gomoku-cell.winner { z-index:3; background:#d1fae5; border-color:#34d399; animation:gomoku-winner 1.1s ease-in-out infinite; }
.caro-page .gomoku-cell.winner::before { background:#f97316; }
.caro-page .gomoku-cell:focus-visible { outline:2px solid #1877f2; outline-offset:-2px; }
.caro-page .board-help { color:#64748b; }
@keyframes gomoku-mark-pop { 0% { transform:scale(.78); opacity:.45; } 70% { transform:scale(1.06); } 100% { transform:scale(1); opacity:1; } }
@keyframes gomoku-winner { 0%,100% { box-shadow:inset 0 0 0 1px rgba(16,185,129,.16); } 50% { box-shadow:inset 0 0 0 3px rgba(16,185,129,.38),0 0 18px rgba(16,185,129,.24); } }