:root{--bg: #e8ece3;--surface: #fbfaf3;--surface-2: #ece5d2;--ink: #20251f;--muted: #657064;--border: #c7bea5;--board: #2f8a63;--board-dark: #287655;--board-light: #34946b;--board-line: #1d6348;--black: #161a18;--black-edge: #6a756f;--white: #fff8e8;--white-edge: #8f856a;--gold: #c7913c;--danger: #a65347;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}button{font:inherit}h1,h2,p{margin:0}.appShell{min-height:100vh;padding:24px;display:grid;place-items:center;background:linear-gradient(135deg,#ffffffb3,#fff0 44%),linear-gradient(180deg,#e8ece3,#d9dfd2)}.gameSurface{width:min(1260px,100%);min-height:min(840px,calc(100vh - 48px));display:flex;flex-direction:column;gap:16px}.topBar{border:1px solid var(--border);border-radius:8px;background:#fbfaf3eb;box-shadow:0 16px 46px #20251f14}.topBar{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brandLockup{display:flex;align-items:center;gap:14px;min-width:0}.brandMark{width:clamp(48px,7vw,68px);aspect-ratio:1;flex:0 0 auto;border-radius:8px;display:block;background:#d9e5d8;box-shadow:inset 0 0 0 7px #ffffff3d,0 8px 22px #20251f1f}.brandMark rect{fill:var(--board);stroke:#143f2d;stroke-width:4}.brandMark path{stroke:#133f2d94;stroke-width:1.3}.brandMark circle{stroke-width:2.2}.brandMark .markBlack{fill:var(--black);stroke:var(--black-edge)}.brandMark .markWhite{fill:var(--white);stroke:var(--white-edge)}.titleStack{display:grid;gap:4px;min-width:0}.eyebrow,.modalEyebrow{color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase}h1{font-size:clamp(34px,5vw,58px);line-height:.95;letter-spacing:0;white-space:nowrap}h2{font-size:15px;letter-spacing:0}.titleHelpLink{width:fit-content;border:0;padding:0;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;font-weight:800;line-height:1;text-decoration:underline;text-underline-offset:3px}.titleHelpLink:hover,.titleHelpLink:focus-visible{color:var(--ink)}.topActions,.modeSwitch,.difficultySwitch{display:flex;align-items:center;gap:8px}.topActions{flex-wrap:wrap;justify-content:flex-end}.modeSwitch,.difficultySwitch{padding:4px;border:1px solid var(--border);border-radius:8px;background:#e7dfc9}.modeSwitch button,.difficultySwitch button,.resetButton{min-width:48px;min-height:38px;border:0;border-radius:6px;cursor:pointer;font-weight:850;color:var(--ink)}.difficultySwitch button{min-width:68px}.modeSwitch button,.difficultySwitch button{background:transparent}.modeSwitch button.active,.difficultySwitch button.active{background:var(--surface);box-shadow:0 2px 10px #20251f21}.resetButton{padding:0 14px;background:var(--ink);color:#fff8e8}.playArea{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(188px,242px) minmax(360px,1fr) minmax(188px,242px);gap:18px;align-items:stretch}.sidePanel{display:flex;flex-direction:column;gap:14px}.playerPanel,.rulePanel{border:1px solid var(--border);border-radius:8px;padding:16px;background:#fbfaf3ed;box-shadow:0 14px 36px #20251f12}.playerPanel{min-height:238px;display:flex;flex-direction:column;justify-content:space-between}.playerPanel.active{outline:3px solid rgba(199,145,60,.35)}.playerHeader{display:flex;align-items:center;gap:12px}.playerHeader p,.rulePanel span{color:var(--muted);font-size:13px;line-height:1.35}.disc{width:36px;height:36px;border-radius:50%;display:inline-block;flex:0 0 auto;overflow:hidden;position:relative;transform-style:preserve-3d;box-shadow:inset -4px -5px 10px #0000003d,0 5px 10px #0f14113d}.disc.black{border:1px solid var(--black-edge);background:radial-gradient(circle at 34% 28%,#58635d,var(--black) 58%,#111514)}.disc.white{border:1px solid var(--white-edge);background:radial-gradient(circle at 34% 28%,#fffdf4,var(--white) 58%,#d6cab0)}.disc.flipDisc{animation:discFlip .46s cubic-bezier(.2,.72,.18,1);will-change:transform}.disc.flipDisc:before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:inherit;opacity:0;pointer-events:none;animation:flipOldFace .46s linear}.disc.flipDisc.from-black:before{border:1px solid var(--black-edge);background:radial-gradient(circle at 34% 28%,#58635d,var(--black) 58%,#111514);box-shadow:inset -4px -5px 10px #0000003d}.disc.flipDisc.from-white:before{border:1px solid var(--white-edge);background:radial-gradient(circle at 34% 28%,#fffdf4,var(--white) 58%,#d6cab0);box-shadow:inset -4px -5px 10px #0000003d}@keyframes discFlip{0%{transform:rotateY(0) scale(1)}46%{transform:rotateY(88deg) scale(.98)}54%{transform:rotateY(88deg) scale(.98)}to{transform:rotateY(0) scale(1)}}@keyframes flipOldFace{0%,49%{opacity:1}50%,to{opacity:0}}@media(prefers-reduced-motion:reduce){.disc.flipDisc,.disc.flipDisc:before{animation:none}}.metricGrid{display:grid;gap:8px;margin-top:18px}.metricGrid span{min-height:34px;padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:#efe8d7;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}.metricGrid b{font-weight:760}.metricGrid strong{color:var(--ink);font-size:18px}.rulePanel{display:grid;gap:8px}.rulePanel p{font-weight:850;line-height:1.2}.boardWrap{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px solid #8da58e;border-radius:8px;padding:12px;background:linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 100%),linear-gradient(0deg,rgba(255,255,255,.13) 0 1px,transparent 1px 100%),#d4decc;background-size:28px 28px;box-shadow:inset 0 0 0 8px #ffffff2e,0 18px 60px #20251f1f}.noticeBanner{width:min(650px,100%);min-height:76px;padding:12px 14px;border:2px solid rgba(199,145,60,.55);border-radius:8px;background:#fbfaf3f7;display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:0 16px 42px #20251f24}.noticeBanner>div{display:flex;align-items:center;gap:12px;min-width:0}.noticeBanner strong{display:block;font-size:21px;line-height:1}.noticeBanner p{margin-top:5px;color:var(--muted);font-size:13px;line-height:1.3}.noticeBanner button{min-height:38px;flex:0 0 auto;border:0;border-radius:6px;padding:0 14px;background:var(--board-dark);color:#fff8e8;cursor:pointer;font-weight:850}.drawIcon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);font-size:24px;font-weight:900}.board{width:min(68vh,100%);max-width:650px;aspect-ratio:1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));border:7px solid #183c2d;border-radius:8px;background:#183c2d;box-shadow:0 24px 54px #15271e33;overflow:hidden}.square{min-width:0;min-height:0;aspect-ratio:1;position:relative;border:1px solid rgba(16,61,43,.58);display:grid;place-items:center;cursor:pointer;background:var(--board)}.square.light{background:var(--board-light)}.square.dark{background:var(--board-dark)}.square:disabled{cursor:default}.square .disc{width:min(68%,54px);height:auto;aspect-ratio:1;z-index:1}.bottomDock{flex:0 0 auto;padding:8px 8px 0;border-top:1px solid rgba(199,190,165,.76)}.footerNav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0}.footerNav a{color:var(--muted);font-size:12px;line-height:1.4;font-weight:850;text-decoration:none}.footerNav a:hover,.footerNav a:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.footerNav a+a:before{content:"|";margin:0 8px;color:var(--border)}.modalOverlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;padding:18px;display:grid;place-items:center;overflow-y:auto;background:#20251f5c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modalDialog{width:min(430px,100%);max-height:calc(100vh - 36px);overflow-y:auto;padding:20px;border:1px solid var(--border);border-radius:8px;background:var(--surface);box-shadow:0 24px 80px #20251f47}.howToDialog{width:min(560px,100%)}.modalDialog h2{font-size:24px;line-height:1.1}.modalDialog p:not(.modalEyebrow){margin-top:10px;color:var(--muted);line-height:1.45}.howToList{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none;counter-reset:how-to}.howToList li{counter-increment:how-to;display:grid;grid-template-columns:30px 1fr;gap:10px;padding:10px;border:1px solid var(--border);border-radius:8px;background:#ece5d29e}.howToList li:before{content:counter(how-to);width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff8e8;font-size:13px;font-weight:900}.howToList strong,.howToList span{grid-column:2}.howToList strong{margin-top:1px}.howToList span{color:var(--muted);line-height:1.35;font-size:13px}.quickTip{margin-top:12px;padding:10px 12px;border-left:4px solid var(--board-dark);border-radius:8px;background:#edf3e9;color:var(--muted);line-height:1.4;font-size:13px}.modalActions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.secondaryButton,.dangerButton,.rulesLinkButton{min-height:40px;border:0;border-radius:6px;padding:0 14px;cursor:pointer;font-weight:850}.rulesLinkButton{display:inline-grid;place-items:center;background:var(--surface-2);color:var(--ink);text-decoration:none}.secondaryButton{background:var(--surface-2);color:var(--ink)}.dangerButton{background:var(--danger);color:#fff8e8}@media(max-width:1040px){.playArea{grid-template-columns:1fr 1fr}.boardWrap{grid-column:1 / -1;order:-1}.board{width:min(78vw,640px)}}@media(max-width:720px){.appShell{padding:12px;align-items:start}.gameSurface{min-height:auto}.topBar{align-items:flex-start;flex-direction:column}h1{font-size:clamp(32px,13vw,48px)}.topActions{width:100%;justify-content:stretch}.modeSwitch,.difficultySwitch{flex:1 1 auto}.modeSwitch button,.difficultySwitch button{flex:1;min-width:0}.playArea{grid-template-columns:1fr}.sidePanel{display:grid;grid-template-columns:1fr}.playerPanel{min-height:0}.boardWrap{padding:10px}.board{width:min(92vw,560px);border-width:5px}.noticeBanner{align-items:flex-start;flex-direction:column}}