:root{--ink:#242820;--muted:#767c6c;--bg:#f4f3eb;--orange:#d95f38;--line:#dedfd2}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 system-ui,sans-serif}header{padding:26px 5%;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.logo{font-weight:750;letter-spacing:-.5px;color:inherit;text-decoration:none;font-size:23px;display:flex;align-items:center;gap:12px}.logo>span:first-child{font-size:38px;color:var(--orange)}.badge{font-size:9px;letter-spacing:1px;border:1px solid var(--line);padding:3px 7px;margin-left:12px}.header-note{font-size:12px;color:var(--muted)}main{max-width:1240px;margin:auto;display:grid;grid-template-columns:225px 1fr;gap:55px;padding:42px 36px}.kicker{font-size:10px;font-weight:650;letter-spacing:1.8px;color:var(--muted);margin:0 0 14px}nav button{width:100%;text-align:left;padding:17px;margin:0 0 10px;border:1px solid var(--line);border-radius:10px;background:transparent;display:flex;gap:14px;align-items:center;color:inherit;cursor:pointer}nav button.selected{background:#fffdf5;border-color:#c9cfb9;box-shadow:0 3px 0 #dce1cd}nav button:hover{background:#fffdf5}.game-icon{font-size:26px;line-height:1}.game-name{font-weight:650;font-size:14px}.game-description{display:block;font-size:10px;color:var(--muted);font-weight:400}.aside-note{padding:32px 16px;margin-top:35px;border-top:1px dashed var(--line)}.aside-note>span{font-size:35px;color:#89986d}.aside-note h3{font:25px/1.3 Georgia}.aside-note p{font-size:12px;color:var(--muted)}.title-row{display:flex;justify-content:space-between;align-items:center}h1{font:58px/1 Georgia;margin:0}h1 span{color:var(--orange)}.live{font-size:9px;letter-spacing:1px;color:#839069}.subtitle{color:var(--muted);margin:17px 0 24px}.toolbar{display:flex;gap:12px;align-items:end;margin-bottom:18px}label{display:block;font-size:10px;color:var(--muted);letter-spacing:.3px}select,button{font:inherit}select{display:block;border:1px solid var(--line);background:#fffdf7;padding:9px 11px;border-radius:6px;color:var(--ink);font-size:12px;min-height:39px}button{border:1px solid var(--line);border-radius:6px;background:transparent;padding:9px 14px;color:var(--ink);cursor:pointer;font-size:12px;min-height:39px}button:disabled{opacity:.45;cursor:default}.primary{margin-left:auto;background:var(--ink);color:white;border-color:var(--ink)}.primary:hover{background:#454c3a}.arena{border:1px solid #d5d7c9;border-radius:14px;background:#e9eddf;overflow:hidden}.scoreline{display:flex;justify-content:space-between;align-items:center;padding:17px 22px;border-bottom:1px solid #d5dac9;font-size:12px;gap:12px}#status{font-weight:650;color:#576547;text-align:center}#board{max-width:530px;aspect-ratio:1;margin:25px auto;display:grid;width:calc(100% - 44px);position:relative}.cell{padding:0;min-height:0;border:0;border-radius:0;position:relative;background:transparent;display:grid;place-items:center;font-size:40px;line-height:1}.gomoku .cell{background-image:linear-gradient(#aeb89e,#aeb89e),linear-gradient(#aeb89e,#aeb89e);background-size:1px 100%,100% 1px;background-repeat:no-repeat;background-position:center}.stone{width:78%;height:78%;border-radius:50%;display:grid;place-items:center;box-shadow:0 2px 3px #0003}.black{background:#30362a;color:white}.white{background:#fffcf0;border:1px solid #c9ceba;color:#333}.last .stone::after{content:'';width:18%;height:18%;border-radius:50%;background:var(--orange)}.winning .stone{outline:3px solid var(--orange);outline-offset:1px}.tic{gap:8px}.tic .cell{background:#f8faef;border-radius:8px;font:60px Georgia}.tic .cell.p1{color:#3c503c}.tic .cell.p2{color:var(--orange)}.connect{gap:8px;padding:13px;background:#688160;border-radius:12px;aspect-ratio:7/6!important}.connect .cell{background:#e9eddf;border-radius:50%}.connect .stone{width:100%;height:100%;box-shadow:inset 0 2px 4px #0003}.connect .black{background:#edbb58}.connect .white{background:#d95f38;border:0}.cell:hover:enabled{background-color:#ffffff44}.cell:focus-visible{outline:2px solid var(--orange);z-index:2}.board-footer{display:flex;justify-content:space-between;padding:15px 22px;border-top:1px solid #d5dac9;font-size:10px;letter-spacing:1px;color:#6b785c}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:24px}.stat-card,.rules{padding:20px;border:1px solid var(--line);border-radius:10px}.stats{display:flex;justify-content:space-between}.stats strong{display:block;font:29px Georgia}.stats span,.small{font-size:10px;color:var(--muted)}.rules>p:not(.kicker){font-size:12px}footer{max-width:1240px;margin:10px auto 0;border-top:1px solid var(--line);padding:24px 36px;color:var(--muted);font-size:11px;display:flex;justify-content:space-between}@media(max-width:850px){main{grid-template-columns:1fr;gap:22px;padding:25px 18px}aside>p,.aside-note{display:none}nav{display:flex;gap:8px}nav button{padding:12px 8px;gap:8px}.game-icon{font-size:19px}.game-description{font-size:9px}.game-name{font-size:11px}header{padding:16px 20px}.badge,.header-note,.live{display:none}h1{font-size:45px}.toolbar{gap:8px;flex-wrap:wrap}.bottom-grid{gap:12px}.scoreline{padding:13px;font-size:10px}.board-footer{padding:12px;font-size:9px}footer{padding:20px;display:block}footer span{display:block}#board{width:calc(100% - 32px)}.connect{gap:5px;padding:9px}}
/* A sunny tabletop arcade palette. */
:root{--ink:#302747;--muted:#75617d;--bg:#fff6df;--orange:#e75135;--line:#e7cdaa}body{background:radial-gradient(ellipse at 95% 8%,#ffe9ad 0,transparent 40%),radial-gradient(ellipse at 0% 75%,#ffe0cc 0,transparent 40%),var(--bg)}header{background:#ffffff55}.logo>span:first-child{color:#e75135}.badge{background:#f9d966;border-color:#dab538;color:#624517}nav button{background:#fffaf0;border-color:#e7cdaa}nav button:nth-child(1) .game-icon{color:#d44a32}nav button:nth-child(2) .game-icon{color:#7652b4}nav button:nth-child(3) .game-icon{color:#3371b4}nav button.selected{background:#ffdf78;border-color:#d6a539;box-shadow:0 3px 0 #d6a539}nav button:hover{background:#ffecb3}.aside-note>span{color:#e77c35}.aside-note h3{color:#6951a6}.live{color:#8e4924}.primary{background:#df4a32;border-color:#c13928;box-shadow:0 3px 0 #b43525;color:#fff}.primary:hover{background:#c93c27}select{background:#fffaf0;border-color:#e3c79f}button:not(.cell):focus-visible,select:focus-visible{outline:3px solid #9674c2;outline-offset:3px}.arena{background:#ffe7ad;border-color:#dbb466;box-shadow:0 5px 0 #e8c582}.scoreline{background:#fff4d8;border-color:#e4c48c}#status{color:#694891}.board-footer{color:#7d5b30;background:#fff4d8;border-color:#e4c48c}.gomoku .cell{background-image:linear-gradient(#b79457,#b79457),linear-gradient(#b79457,#b79457)}.black{background:#34304e;color:white}.white{background:#fffdf6;border-color:#bda879}.last .stone::after{background:#ff6740}.winning .stone{outline-color:#b5442c}.tic .cell{background:#fff6dc;box-shadow:0 3px 0 #d8b47a}.tic .cell.p1{color:#6550a8}.tic .cell.p2{color:#d8462d}.connect{background:#417aca;box-shadow:0 4px 0 #2f569c}.connect .cell{background:#dcecff}.connect .black{background:#ffcf3f}.connect .white{background:#ec593c}.stat-card{background:#f0e6ff;border-color:#d2bde9}.stat-card strong{color:#65449a}.rules{background:#e8f1ff;border-color:#b9cde9}.rules .kicker{color:#3f6089}.small{color:#715d74}.rules .small{color:#61758d}footer{border-color:#e7cdaa}
/* Placed stones remain full-opacity even though their cells are disabled. */
.cell:disabled{opacity:1}
.gomoku .stone.black{background:radial-gradient(circle at 32% 25%,#353535,#080808 65%);border:1px solid #050505;box-shadow:0 2px 4px #0007,inset 0 1px 1px #ffffff22}
.gomoku .stone.white{background:radial-gradient(circle at 32% 25%,#fff,#f5f5f5 65%,#dedede);border:1px solid #777;box-shadow:0 2px 4px #0006,inset 0 1px 2px #fff}
/* Give the board more room while keeping every cell inside the viewport. */
main{max-width:1380px;grid-template-columns:210px minmax(0,1fr);gap:38px}
#board{max-width:700px;width:calc(100% - 36px);margin:22px auto}
#board.tic{max-width:600px}
#board.connect{max-width:700px}
@media(max-width:850px){main{grid-template-columns:minmax(0,1fr);gap:22px;padding:25px 12px}#board{width:calc(100% - 16px);margin:16px auto}.scoreline{padding:13px 10px}.board-footer{padding:12px 10px}}
.win-banner{display:flex;align-items:center;gap:15px;padding:17px 22px;background:#ffdb67;border-bottom:2px solid #d8a632;color:#51351d}.win-banner[hidden]{display:none}.win-icon{font-size:42px;color:#d64630}.win-banner strong{display:block;font:28px Georgia}.win-banner div>span{display:block;font-size:11px}.win-banner button{margin-left:auto;background:#6b45a2;color:#fff;border-color:#54307f;white-space:nowrap}.firework-layer{position:fixed;inset:0;pointer-events:none;z-index:20;overflow:hidden}.spark{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--spark-color);animation:firework 1.5s ease-out both;animation-delay:var(--delay)}@keyframes firework{0%{transform:translate(0,0) scale(.4);opacity:0}8%{opacity:1}75%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.15);opacity:0}}.arena.victory{border-color:#b78129;box-shadow:0 5px 0 #dcb852,0 0 0 4px #ffe194}@media(max-width:650px){.win-banner{padding:14px 12px;gap:10px;flex-wrap:wrap}.win-banner strong{font-size:24px}.win-banner button{margin-left:auto}.win-icon{font-size:30px}}@media(prefers-reduced-motion:reduce){.spark{animation:none;display:none}}
#soundToggle{font-size:11px;background:#fff2ce;white-space:nowrap}.win-banner.encouragement{background:#e9e0fa;border-color:#b6a0d3;color:#513c73}.win-banner.encouragement .win-icon{color:#7a59a9}.arena.encouragement{border-color:#a087be;box-shadow:0 5px 0 #c6b5dd,0 0 0 3px #e6dcf4}
/* Lighter grid lines keep the larger 19-by-19 board comfortable to scan. */
.gomoku .cell{background-image:linear-gradient(#c2a374,#c2a374),linear-gradient(#c2a374,#c2a374)}
#analyticsSettings{margin-left:12px;font-size:10px;min-height:30px}#analyticsNotice{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:800px;background:#fff8e6;border:1px solid #d8ba83;border-radius:12px;padding:18px 22px;box-shadow:0 6px 25px #30274722;z-index:30;display:flex;align-items:center;gap:20px}#analyticsNotice[hidden]{display:none}#analyticsNotice strong{font-size:14px}#analyticsNotice p{font-size:12px;line-height:1.5;color:var(--muted);margin:5px 0 0}#analyticsNotice>div:last-child{display:flex;gap:8px;flex-shrink:0}#allowAnalytics{background:#6b45a2;color:white;border-color:#59388a}@media(max-width:650px){#analyticsNotice{flex-direction:column;align-items:flex-start;gap:12px}#analyticsSettings{margin:10px 0 0}}
#board.go{max-width:620px}#board.reversi{max-width:620px;gap:3px;padding:10px;background:#537d70;border-radius:8px}.go .cell{background-image:linear-gradient(#b79457,#b79457),linear-gradient(#b79457,#b79457);background-size:1px 100%,100% 1px;background-repeat:no-repeat;background-position:center}.go .stone.black,.reversi .stone.black{background:radial-gradient(circle at 32% 25%,#353535,#080808 65%);border:1px solid #050505;box-shadow:0 2px 4px #0007}.go .stone.white,.reversi .stone.white{background:radial-gradient(circle at 32% 25%,#fff,#f5f5f5 65%,#dedede);border:1px solid #777;box-shadow:0 2px 4px #0006}.reversi .cell{background:#72a48e;border-radius:3px}.reversi .legal-move:empty::after{content:'';width:15%;height:15%;border-radius:50%;background:#f7edc8}.toolbar button[hidden]{display:none}.go .stone{width:76%;height:76%}