:root{color-scheme:dark;--accent:#e8cb93;--ink:#f1f0e9;--muted:#adb9ca;--line:#3b485a}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0%,#2b394a80,transparent 48%),#10161f;color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}button,input,select{font:inherit}button{cursor:pointer;min-height:44px;padding:10px 14px;border:1px solid #47566c;border-radius:11px;background:#263142;color:var(--ink);touch-action:manipulation}button:hover{filter:brightness(1.13)}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus,select:focus{outline:3px solid var(--accent);outline-offset:3px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}header{max-width:1480px;margin:auto;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:15px;flex-wrap:wrap}.brand{font-size:24px;font-weight:850;display:flex;align-items:center;gap:12px;letter-spacing:-.6px}.brand>span{display:grid;place-items:center;background:var(--accent);color:#151c27;width:44px;height:44px;border-radius:12px}nav{display:flex;align-items:center;gap:10px}nav a{color:var(--muted);font-size:14px;margin-right:12px}main{max-width:1480px;margin:auto;padding:30px 28px}.eyebrow{letter-spacing:2px;font-size:12px;font-weight:750;color:var(--muted)}h1{font-size:clamp(34px,5vw,58px);letter-spacing:-1.8px;margin:8px 0 14px;line-height:1.1}h2{font-size:23px;margin:8px 0 20px}.intro>p:last-child{color:var(--muted);max-width:800px;margin-bottom:28px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px;align-items:start}.panel{background:linear-gradient(145deg,#222c3a,#171f2c);border:1px solid var(--line);border-radius:22px;box-shadow:0 14px 40px #0002}.stage{position:relative;min-width:0;overflow:hidden}.stagehead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}.stagehead>div{display:flex;gap:8px}.stagehead button{font-size:14px}.hud{display:grid;grid-template-columns:repeat(4,1fr);padding:12px 4px;border-bottom:1px solid var(--line)}.hud div{text-align:center;border-right:1px solid var(--line)}.hud div:last-child{border:0}.hud small{display:block;color:var(--muted);font-size:12px}.hud b{font-size:23px;color:var(--accent)}.message{padding:0 16px;min-height:24px;color:#ced6e0;font-size:15px;text-align:center}.board{position:relative;display:grid;gap:5px;padding:18px;margin:12px;background:radial-gradient(ellipse at center,#294b46,#172d31);border:1px solid #60777565;border-radius:15px;isolation:isolate}.board .tile{padding:4px;min-width:0;min-height:34px;aspect-ratio:1;border-radius:8px;box-shadow:0 3px 0 #060d1b5c;font-size:clamp(15px,2.1vw,27px);font-weight:750;position:relative;background:#e5d7b7;color:#253243;border:1px solid #f5e9cb;white-space:pre-line;line-height:1.1}.board .tile.empty{background:#0b202950;color:#aabbb5;border:1px dashed #80938a88;box-shadow:none}.board .tile.blank{visibility:hidden;pointer-events:none}.board .tile.dark{background:#677d8b;color:#f9ead0;border-color:#849ba4}.board .tile.light{background:#d7c6a5;color:#182735}.board .tile.p0{color:#fff0d5;background:#ba8e63;border-color:#edd0a5}.board .tile.p1{color:#151f2c;background:#a8d0d8;border-color:#deedf1}.board .tile.p2{background:#b6a8db}.board .tile.p3{background:#b8d7a0}.board .tile.red{color:#b94b50;background:#f1e8d2}.board .tile.back{color:#d0bd8f;background:repeating-linear-gradient(45deg,#223c58,#223c58 4px,#284962 4px,#284962 7px);border:2px solid #b0bdbe}.board .tile.card{aspect-ratio:.7;min-height:75px;text-align:left;align-content:start;z-index:2;box-shadow:0 3px 4px #0006}.board .tile.selected{outline:3px solid #fff3c4;outline-offset:1px;z-index:4;transform:translateY(-2px)}.board .tile.target{box-shadow:inset 0 0 0 3px var(--accent),0 0 14px #f0dcb12b}.board .tile.matched{opacity:.2;pointer-events:none}.board .tile.open{background:#b5c9bc;color:#20332e}.board .tile.flag{background:#d3b990;color:#3f2d24}.board .tile.bomb{background:#d99891;color:#4e2531}.board.mahjong{gap:6px;background:radial-gradient(ellipse,#395853,#172d31)}.mahjong .tile{font-family:serif;border-bottom:5px solid #b6a17e;border-right:3px solid #c6b28d}.board.chess .tile{border-radius:2px;box-shadow:none;border:0;font-size:clamp(23px,4.5vw,58px)}.board.checkers .tile{border-radius:3px}.board.mill{background:#d1ba91}.mill .tile{border-radius:50%;aspect-ratio:1}.mill:before{content:'';position:absolute;inset:5%;background:linear-gradient(90deg,transparent 49.5%,#5c5746 49.5%,#5c5746 50.5%,transparent 50.5%),linear-gradient(transparent 49.5%,#5c5746 49.5%,#5c5746 50.5%,transparent 50.5%);z-index:-1}.mill:after{content:'';position:absolute;inset:7%;border:3px solid #5c5746;box-shadow:inset 0 0 0 30px #d1ba91,inset 0 0 0 33px #5c5746,inset 0 0 0 62px #d1ba91,inset 0 0 0 65px #5c5746;z-index:-2}.gammon .tile{border-radius:4px 4px 45% 45%;min-height:115px;white-space:pre-line;font-size:18px;background:linear-gradient(100deg,#bc986e,#e2c49c)}.gammon .tile:nth-child(2n){background:linear-gradient(100deg,#586778,#a5b7c2)}.loop .tile{border-radius:50%;font-size:20px}.actions,.touch,.tools{display:flex;flex-wrap:wrap;gap:9px;padding:0 16px 16px}.actions button{font-size:14px}.tools{align-items:center}.tools span{color:var(--muted);font-size:14px}.primary{background:linear-gradient(120deg,color-mix(in srgb,var(--accent),white 15%),var(--accent));color:#1a2230;border:1px solid #fff3c27a;font-weight:800;box-shadow:0 4px 0 color-mix(in srgb,var(--accent),#151c27 60%)}.setup,.records,.rules{padding:24px}.setup label{display:block;font-size:14px;font-weight:650;color:#d3dbe7;margin:18px 0 8px}input,select{width:100%;padding:12px;border-radius:12px;border:1px solid #45566e;background:#111a27;color:#f4f1e9;min-height:48px}.setup>.primary{width:100%;margin:24px 0 10px}.muted{color:var(--muted);font-size:14px}.records{margin-top:20px}.records h2{font-size:28px;color:var(--accent)}.records ol{padding-left:23px;font-size:14px;color:var(--muted)}.records .tools{padding:0}.records li{padding:6px 0}.rules{margin-bottom:24px}#online button{width:100%;margin-top:10px}.canvaswrap{position:relative;display:flex;justify-content:center;background:#0b1523;margin:12px;border-radius:14px;overflow:hidden}.canvaswrap canvas{display:block;width:100%;height:auto;max-height:calc(100dvh - 170px);object-fit:contain;touch-action:none;user-select:none}.start{position:absolute;left:15%;right:15%;top:45%;min-height:62px}.touch button{flex:1;min-height:57px;font-weight:800;font-size:21px;touch-action:none;user-select:none}.result{margin:16px;padding:25px;text-align:center;background:#111d2b;border:1px solid var(--accent);border-radius:16px}.result h2{color:var(--accent);font-size:32px}footer{max-width:1480px;margin:auto;padding:24px 28px;display:flex;justify-content:space-between;color:var(--muted);font-size:13px}.focused header,.focused .intro,.focused footer,.focused aside{display:none}.focused main{padding:10px}.focused .layout{display:block;max-width:1100px;margin:auto}.focused .board{max-width:820px;margin:10px auto}.focused .canvaswrap canvas{max-height:calc(100dvh - 170px)}@media(max-width:850px){main{padding:20px 12px}.layout{grid-template-columns:1fr}.intro{padding:0 6px}header{padding:14px 16px}.brand{font-size:21px}nav a{display:none}nav button{font-size:13px;padding:8px 10px}.board{padding:10px;margin:8px;gap:3px}.board .tile{font-size:clamp(13px,4vw,25px);min-height:25px;border-radius:5px}.board .tile.card{min-height:57px;font-size:16px}.stagehead{padding:10px 12px;font-size:14px}.hud b{font-size:21px}.hud small{font-size:11px}.setup,.records{padding:20px}.canvaswrap canvas{max-height:none}.message{font-size:14px}.gammon .tile{font-size:14px;min-height:105px;padding:1px}.tools button{font-size:14px}.board.chess{gap:0}.board.chess .tile{font-size:clamp(26px,8vw,58px)}.mill:after{box-shadow:inset 0 0 0 20px #d1ba91,inset 0 0 0 23px #5c5746,inset 0 0 0 43px #d1ba91,inset 0 0 0 46px #5c5746}footer{font-size:12px;gap:18px}.board.loop{gap:2px}.board.loop .tile{font-size:14px}}@media(pointer:fine){.touch{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.board.solitaire{padding-bottom:65px;min-height:430px}.chess .tile.whitepiece{color:#fff7df;text-shadow:0 1px 2px #000,1px 0 2px #000}.chess .tile.blackpiece{color:#182332;text-shadow:0 1px 1px #ffffff90}

.board.mill:before{display:none}.board.mill:after{inset:calc(18px + (100% - 66px)/14);border:0;box-shadow:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%235c5746' stroke-width='5'%3E%3Cpath d='M0 0H600V600H0ZM100 100H500V500H100ZM200 200H400V400H200ZM300 0V200M300 400V600M0 300H200M400 300H600'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}.gammon .tile{line-height:1.05;font-size:15px}@media(max-width:850px){.board.mill:after{inset:calc(10px + (100% - 38px)/14)}.gammon .tile{font-size:12px;min-height:125px;padding:1px}}