:root{color-scheme:dark}body{font-family:Inter,ui-sans-serif,system-ui,sans-serif;max-width:640px;margin:1.25rem auto;padding:.5rem 1rem 2rem;background:#0a0a0a;color:#eee;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}h1{margin:0 0 .25rem;letter-spacing:-.025em;font-size:clamp(2.25rem,6vw,3rem)}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:.75rem 0}.controls label{display:inline-flex;align-items:center;gap:.35rem;color:#cfcfcf;font-size:.95rem}.controls select{background:#2a2a2a;color:#eee;border:1px solid #444;padding:.45rem .6rem;border-radius:4px;font-size:.95rem}.status{margin:.5rem 0 1rem;min-height:1.5em;font-size:1rem;color:#cfcfcf;display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .85rem}.counts{display:inline-flex;gap:1rem;font-variant-numeric:tabular-nums;color:#9a9a9a}.counts b{color:#eee;font-weight:500}#board{display:grid;grid-template-columns:.5fr repeat(8,1fr);grid-template-rows:.5fr repeat(8,1fr);gap:clamp(2px,.6vw,3px);padding:clamp(6px,1.6vw,10px);background:#222;border-radius:8px;user-select:none;width:100%;max-width:480px;aspect-ratio:1;box-sizing:border-box;margin:0 auto;touch-action:manipulation}.label{display:flex;align-items:center;justify-content:center;color:#888;font-size:clamp(.6rem,1.9vw,.8rem)}.square{background:#2e7d32;border-radius:4px;display:flex;align-items:center;justify-content:center;position:relative;transition:background 80ms ease;min-width:0;min-height:0}.square.legal{cursor:pointer}.square.legal:after{content:"";width:28%;aspect-ratio:1;border-radius:50%;background:#ffffff38}.square.legal:hover{background:#3f9c43}.square.last{box-shadow:inset 0 0 0 2px #ff6b4a}.piece{width:78%;aspect-ratio:1;border-radius:50%;box-shadow:0 2px 4px #0006}.piece.B{background:radial-gradient(circle at 35% 30%,#444,#000 70%)}.piece.W{background:radial-gradient(circle at 35% 30%,#fff,#cfcfcf 80%)}button{background:#3a3a3a;color:#eee;border:1px solid #4a4a4a;padding:.55rem 1rem;border-radius:4px;cursor:pointer;font-size:.95rem;min-height:40px;touch-action:manipulation}button:hover:not(:disabled){background:#4a4a4a}button:disabled{opacity:.4;cursor:not-allowed}.row{display:flex;align-items:center;gap:.75rem;margin-top:1rem}.error{color:#ff8a80}.thinking{color:#ff6b4a;font-style:italic}#rules-tab{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:20;background:#2a2a2a;border:1px solid #4a4a4a;border-right:0;border-radius:6px 0 0 6px;padding:.85rem .6rem;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.06em;font-size:.85rem;color:#eee}#rules-tab:hover{background:#3a3a3a}#rules-scrim{position:fixed;inset:0;background:#00000073;z-index:25;opacity:0;pointer-events:none;transition:opacity .2s ease}#rules-scrim.open{opacity:1;pointer-events:auto}.rules{position:fixed;top:0;right:0;height:100dvh;width:min(380px,92vw);background:#1c1c1c;border-left:1px solid #2a2a2a;box-shadow:-8px 0 24px #0006;transform:translate(100%);transition:transform .22s ease;z-index:30;display:flex;flex-direction:column}.rules.open{transform:translate(0)}.rules-header{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;border-bottom:1px solid #2a2a2a}.rules-header h2{margin:0;font-weight:500;letter-spacing:.02em;font-size:1.1rem}#rules-close{background:transparent;border:0;color:#cfcfcf;font-size:1.5rem;line-height:1;padding:.1rem .5rem;border-radius:4px}#rules-close:hover{background:#2a2a2a;color:#fff}.rules-body{padding:.75rem 1rem 1.25rem;overflow-y:auto;flex:1;font-size:.9rem}.rule{border-top:1px solid #2a2a2a;padding:.85rem 0}.rule:first-child{border-top:0;padding-top:.25rem}.rule h3{margin:0 0 .4rem;font-weight:500;color:#ff6b4a;font-size:.95rem}.rule p{margin:0 0 .5rem;color:#bdbdbd;line-height:1.45}.rule p:last-child{margin-bottom:0}.example{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}.arrow{color:#888;font-size:1.25rem;line-height:1}.mini-board{display:grid;gap:2px;padding:4px;background:#222;border-radius:4px}.mini-board.size-4{grid-template-columns:repeat(4,22px);grid-template-rows:repeat(4,22px)}.mini-square{background:#2e7d32;border-radius:2px;display:flex;align-items:center;justify-content:center;position:relative}.mini-square.target:after{content:"";width:10px;height:10px;border-radius:50%;border:2px dashed rgba(255,255,255,.55);box-sizing:border-box}.mini-square.flipped{box-shadow:inset 0 0 0 2px #ff6b4a}.mini-square.placed{box-shadow:inset 0 0 0 2px #66bb6a}.mini-piece{width:16px;height:16px;border-radius:50%;box-shadow:0 1px 2px #0006}.mini-piece.B{background:radial-gradient(circle at 35% 30%,#444,#000 70%)}.mini-piece.W{background:radial-gradient(circle at 35% 30%,#fff,#cfcfcf 80%)}.legend{display:flex;flex-wrap:wrap;gap:.6rem .9rem;font-size:.8rem;color:#9a9a9a;margin-top:.75rem;padding-top:.75rem;border-top:1px solid #2a2a2a}.legend span{display:inline-flex;align-items:center;gap:.3rem}.swatch{width:14px;height:14px;border-radius:3px;background:#2e7d32;box-sizing:border-box}.swatch.target{position:relative}.swatch.target:after{content:"";position:absolute;inset:2px;border-radius:50%;border:2px dashed rgba(255,255,255,.6);box-sizing:border-box}.swatch.flipped{box-shadow:inset 0 0 0 2px #ff6b4a}.swatch.placed{box-shadow:inset 0 0 0 2px #66bb6a}[hidden]{display:none!important}.setup-scrim{position:fixed;inset:0;background:#000000a6;z-index:40;display:flex;align-items:center;justify-content:center;padding:1rem}.setup-modal{background:#1c1c1c;border:1px solid #2a2a2a;border-radius:8px;padding:1.5rem;width:min(360px,100%);display:flex;flex-direction:column;gap:1rem;box-shadow:0 8px 32px #0009}.setup-modal h2{margin:0;font-weight:500;font-size:1.2rem;letter-spacing:.02em}.setup-field{display:flex;flex-direction:column;gap:.35rem;color:#cfcfcf;font-size:.9rem}.setup-field select{background:#2a2a2a;color:#eee;border:1px solid #444;padding:.45rem .5rem;border-radius:4px;font-size:.95rem}.difficulty-desc{color:#9a9a9a;font-size:.8rem;line-height:1.4;min-height:1.05rem}.difficulty-desc:empty{display:none}button.primary{background:#2e7d32;border-color:#388e3c}button.primary:hover:not(:disabled){background:#388e3c}.tony-panel{margin-top:1.25rem;display:flex;flex-direction:column;gap:.5rem}.tony-panel h2{margin:0;font-weight:500;letter-spacing:.02em;font-size:1.1rem;color:#ff6b4a}.tony-chat{display:flex;flex-direction:column;gap:.5rem;background:#1c1c1c;border:1px solid #2a2a2a;border-radius:6px;padding:.75rem;min-height:160px;max-height:min(360px,50vh);overflow-y:auto;-webkit-overflow-scrolling:touch}.tony-bubble{background:#2a2a2a;color:#f1f1f1;padding:.55rem .75rem;border-radius:12px 12px 12px 4px;max-width:90%;align-self:flex-start;font-size:.93rem;line-height:1.4;box-shadow:0 1px 2px #00000040;white-space:pre-wrap;word-wrap:break-word}.tony-bubble.tony-intro{background:#3a1d16;color:#ffc7b8}.tony-bubble.tony-thinking{color:#888;font-style:italic}.tony-footnote{margin:0;color:#777;font-size:.78rem;line-height:1.4}@media(max-width:480px){body{margin:.5rem auto;padding:.25rem .625rem 1.5rem}.controls{gap:.5rem}.status{font-size:.9rem;gap:.4rem .75rem}.counts{gap:.75rem}button{padding:.5rem .75rem;font-size:.9rem}#rules-tab{padding:.7rem .4rem;font-size:.72rem;letter-spacing:.05em;border-radius:5px 0 0 5px}.rules-body{padding:.65rem .85rem 1rem}.setup-modal{padding:1.25rem;gap:.85rem}.tony-panel{margin-top:1rem}.tony-panel h2{font-size:1rem}.tony-bubble{max-width:95%;font-size:.9rem}}@media(hover:none){.square.legal:hover{background:#2e7d32}button:hover:not(:disabled){background:#3a3a3a}#rules-tab:hover{background:#2a2a2a}}