:root{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;color:#192b43;background:#f4f6fa;font-size:16px}*{box-sizing:border-box}body{margin:0}main{max-width:1160px;margin:auto;padding:28px 36px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dce2ec;padding-bottom:22px}.brand{color:#172e50;text-decoration:none;font-size:20px;font-weight:800}.brand span{font-size:14px;font-weight:500;margin-left:14px;color:#596b80}.badge{font-size:14px;border:1px solid #d0d9e7;padding:6px 12px;border-radius:30px}.heading{display:flex;align-items:center;justify-content:space-between;margin:32px 0 24px}.eyebrow{font-size:12px;letter-spacing:2px;color:#566b8b;font-weight:700;margin:0 0 8px}h1{font-size:42px;letter-spacing:-2px;margin:0}h1 span{font-size:21px;color:#7a899e;letter-spacing:3px;margin-left:12px}.heading p:last-child{margin:10px 0 0;color:#53657c}button,select{font:inherit;border:1px solid #cdd7e5;background:#fff;color:#243b59;border-radius:10px;min-height:44px;padding:10px 15px;cursor:pointer}button:hover{background:#eef3fc}button:disabled{opacity:.45;cursor:default}button:focus-visible,select:focus-visible{outline:3px solid #153d92;outline-offset:3px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:24px}.play,.match{background:#fff;border:1px solid #dce3ec;border-radius:20px}.status{padding:24px 26px;display:flex;justify-content:space-between;align-items:center;gap:12px}.turn{font-size:14px;color:#285bd4;font-weight:700}h2{font-size:20px;margin:8px 0 0}#count{color:#6a7b90;font-size:14px;white-space:nowrap}.boardWrap{padding:0 12px}svg{display:block;width:100%;height:auto}.cell{fill:#f1f4f9;stroke:#c1ccde;stroke-width:1.4;cursor:pointer;transition:fill .15s}.cell.empty:hover,.cell.empty:focus{fill:#d6e2ff;stroke:#285bd4;stroke-width:3;outline:none}.cell.p1{fill:#285bd4;stroke:#1d47a8}.cell.p2{fill:#ce5244;stroke:#a73b30}.cell.win{fill:#113db2;stroke:#f0be52;stroke-width:4}.cell.p2.win{fill:#ae3228}.legend{display:flex;justify-content:center;gap:28px;padding:12px 16px 28px;font-size:14px;font-weight:650}.blue{color:#285bd4}.red{color:#b73e32}.match{padding:24px}.match h2{margin-bottom:24px}label{display:block;font-size:14px;margin-bottom:8px}select{width:100%}.small{font-size:14px;color:#63738a;line-height:1.7}.actions{display:grid;gap:10px;margin:24px 0 16px}.primary{background:#1e3556;color:#fff;border-color:#1e3556}.primary:hover{background:#29476f}.tip{padding:25px 12px}.tip>span{font-size:14px;color:#546986}.tip>p:not(.small){font-size:21px;line-height:1.65;font-weight:650;margin:10px 0}.tip .small{margin-bottom:0}footer{font-size:13px;color:#6c7b90;margin-top:24px;line-height:1.7}#rules{padding:20px 25px;margin-bottom:24px;border:1px solid #cad8f1;background:#fff;border-radius:14px;line-height:1.8}#rules h2{margin:0}#rules ol{padding-left:22px}#rules p{font-size:14px;color:#64738a}@media(max-width:760px){main{padding:20px 16px}.heading{margin:25px 0 20px}h1{font-size:34px}.layout{grid-template-columns:1fr;gap:16px}.status{padding:20px}h2{font-size:18px}.boardWrap{padding:0 4px}.legend{gap:18px;padding-bottom:22px}.match{padding:20px}.match h2{margin-bottom:16px}.actions{grid-template-columns:1fr 1fr;margin:16px 0}.tip{display:none}.brand span{display:none}footer{margin-top:16px}}

[hidden]{display:none!important}
.flatBoardWrap{padding:12px 22px 20px;background:#fff}
#board{display:block;width:100%;height:auto;position:static;transform:none;filter:none}
.flatCell{cursor:pointer;stroke:none;transition:fill .12s}
.flatCell.empty:hover,.flatCell.empty:focus-visible{fill:#bcd3ff;outline:none;stroke:#80a8f7;stroke-width:2}
.flatCell.occupied{cursor:default}
.result{margin:0 24px 22px;padding:22px;border-radius:14px;background:#eef4ff;border:1px solid #adc4eb}.result[data-winner="2"]{background:#fff1ee;border-color:#e9b8b1}.result h2{font-size:26px;margin:0}.result p{margin:10px 0 18px;line-height:1.6}.result>div{display:flex;gap:10px}.stopped{background:white;border:1px solid #d6dfea;border-radius:20px;text-align:center;padding:60px 20px}.stopped h2{font-size:28px}.stopped p{margin:18px 0 28px;color:#63738a}
@media(max-width:760px){.flatBoardWrap{padding:8px 8px 16px}.result{margin:0 14px 18px;padding:18px}.result h2{font-size:23px}.legend{gap:16px;font-size:13px}}

#board{max-width:540px;margin-inline:auto}.flatBoardWrap{padding:8px 22px 20px}@media(max-width:760px){.flatBoardWrap{padding:4px 8px 16px}}
.thinking{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#8b4b16;margin-left:12px}.hourglass{display:inline-block;font-size:22px;animation:hourglass-turn 1.4s ease-in-out infinite}@keyframes hourglass-turn{0%,20%{transform:rotate(0deg)}60%,100%{transform:rotate(180deg)}}.challengeInfo{margin:0 24px 14px;padding:14px 16px;background:#f0f4ff;border:1px solid #c9d6f2;border-radius:10px;line-height:1.7;font-size:15px}.actions button{font-size:15px}@media(prefers-reduced-motion:reduce){.hourglass{animation:none}}@media(max-width:760px){.thinking{margin:6px 0;display:flex}.challengeInfo{margin:0 14px 12px}.actions{grid-template-columns:1fr}}
.result>div{flex-wrap:wrap}.result button{font-size:15px}

.secondary{background:#f5f6f8;color:#667085;border-color:#e0e4eb;font-weight:400}.secondary:hover{background:#e9edf3;color:#445064}.primary{font-weight:750}

/* 3D game surface */
.flatBoardWrap{background:radial-gradient(ellipse at 50% 50%,#f6f5f2 0%,#fff 72%);padding:0 6px 6px}
#board{max-width:760px;width:100%;overflow:visible;touch-action:manipulation}
.boardCell{cursor:pointer;outline:none}.boardCell.occupied,.boardCell[aria-disabled="true"]{cursor:default}
.boardCell.empty[aria-disabled="false"]:hover .tileTop,.boardCell.empty:focus-visible .tileTop{fill:#c8dfff;stroke:#2563eb;stroke-width:2}
.boardCell:focus-visible .tileTop{stroke:#154bb0;stroke-width:3}
@media(max-width:760px){.flatBoardWrap{padding:0}.legend{padding-top:0}.layout{gap:16px}}

.flatBoardWrap{padding:4px 14px 16px;background:#fff}#board{border-radius:18px;overflow:hidden}.boardCell.empty[aria-disabled="false"]:hover .tileTop{stroke-width:1.2;fill:#dce9fb}.legend{padding-top:0}@media(max-width:760px){.flatBoardWrap{padding:0 6px 12px}#board{border-radius:12px}}

.backToPlayground{font-size:14px;color:#2447a0;text-decoration:none;border:1px solid #d3dce9;padding:10px 12px;border-radius:9px}.backToPlayground:hover{background:#edf2fc}.backToPlayground:focus-visible{outline:3px solid #2447e8;outline-offset:3px}