:root{color-scheme:light;--ink:#283e3a;--muted:#61716a;--cream:#f5eedf;--teal:#087d79;--coral:#c94d38;--line:#d6cdbb;--paper:#fffbf2;--shadow:#614b2c}
*{box-sizing:border-box}html,body{margin:0;min-width:280px;min-height:100%;background:#f1e8d6;color:var(--ink)}body{font-family:"Trebuchet MS","Avenir Next",sans-serif}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:48px}button:focus-visible{outline:3px solid #133f60;outline-offset:4px}button:active{transform:translateY(2px)}[hidden]{display:none!important}h1,h2,p{margin:0}h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:normal;letter-spacing:-.055em}h2{font-size:clamp(32px,4vw,54px);line-height:1.04}button,dialog{border:0}.eyebrow{font-size:10px;letter-spacing:.19em;font-weight:bold;line-height:1.5}.accent{color:var(--teal)}
#app{min-height:100vh;min-height:100svh;min-height:100dvh;padding:clamp(16px,3.6vw,44px);padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 17% 23%,#fff9ea 0,transparent 47%),radial-gradient(ellipse at 100% 98%,#cdd8c2 0,transparent 44%),repeating-linear-gradient(97deg,#c4ab8210 0 1px,transparent 1px 6px),#f1e8d6}#app:before{content:"";position:absolute;width:78vw;height:78vw;border:1px solid #bca57d29;border-radius:50%;left:-23vw;top:12vh;box-shadow:0 0 0 50px #e1d4b820,0 0 0 110px #e1d4b813;z-index:-1;pointer-events:none}#app:fullscreen{overflow:auto}.masthead{width:100%;max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:14px}.brand h1{font-size:clamp(27px,3.4vw,39px);line-height:1.1}.brand h1>span{color:var(--coral)}.brand-icon{width:45px;height:48px;border-radius:13px;background:#e5b279;box-shadow:0 4px 0 #a2754b,0 8px 12px #8e6c4233,inset 0 2px 2px #fff2c7;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:34px;font-weight:bold;color:#096b68;transform:rotate(-7deg)}.brand-icon span{font-size:22px;color:#bb412e;margin:15px 0 0 -3px}.toolbar{display:flex;gap:6px}.tool{background:#fffaf06e;border:1px solid #d0c8b7;border-radius:50px;display:flex;gap:7px;align-items:center;justify-content:center;padding:0 15px;font-size:12px;font-weight:bold}.tool>span:first-child{font-size:21px;line-height:1}.tool[aria-pressed=false]{background:#ded6c7}.layout{width:100%;max-width:1040px;flex:1;margin:clamp(22px,4vh,54px) auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,330px);align-items:center;gap:clamp(28px,6vw,96px)}.board-area{min-width:0;text-align:center}.table-label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.18em;max-width:430px;margin:0 auto 8px;color:#7c735f}.board-wrap{width:100%;max-width:min(520px,65vh);max-width:min(520px,65dvh);aspect-ratio:1;position:relative;margin:auto;filter:drop-shadow(0 25px 18px #6c50272b)}canvas{display:block;width:100%;height:100%}.board-controls{position:absolute;inset:12.5%;display:grid;grid-template-rows:repeat(3,1fr);gap:3.333%}.board-row{display:grid;grid-template-columns:repeat(3,1fr);gap:3.571%}.cell{min-width:0;min-height:44px;padding:0;background:transparent;border-radius:22%;width:100%;height:100%;position:relative}.cell[aria-disabled=true]{cursor:default}.cell:focus-visible{outline:4px solid #fff6d8;outline-offset:-5px;box-shadow:inset 0 0 0 7px #174e51}.cell:not([aria-disabled=true]):hover{background:#fff9d511}.cell:active{transform:none;background:#48250a15}.board-caption{font-family:Georgia,serif;font-style:italic;color:#68654f;font-size:16px;margin:10px 0 0}.panel{min-width:0}.panel>h2{margin:13px 0}.intro{line-height:1.6;font-size:14px;color:var(--muted);margin-bottom:22px}fieldset{padding:0;border:0;margin:0 0 19px}legend{padding:0;margin-bottom:9px;font-size:12px;font-weight:bold}.segmented{display:flex;border:1px solid var(--line);background:#e7dfcf;border-radius:13px;padding:4px;gap:4px}.segmented button{flex:1;border-radius:9px;background:transparent;padding:8px 6px;min-width:0;font-size:13px;transition:background .14s,box-shadow .14s}.segmented button[aria-pressed=true]{background:var(--paper);box-shadow:0 2px 4px #4c412926;color:var(--teal);font-weight:bold}.modes button{padding:10px 6px}.modes span{display:block;font-size:11px;font-weight:normal;margin-top:3px;color:var(--muted)}.micro{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.5;min-height:17px}.primary{border-radius:14px;background:linear-gradient(145deg,#178f85,#096963);color:#fffcf0;min-height:54px;width:100%;font-weight:bold;text-align:left;padding:0 21px;box-shadow:0 4px 0 #064c48,0 8px 14px #16605a22,inset 0 1px 0 #69b7a8;display:flex;align-items:center;justify-content:space-between;gap:12px}.primary>span{font-size:24px}.primary:hover{filter:brightness(1.07)}.start-note{font-size:11px;line-height:1.7;color:var(--muted);margin-top:17px}.start-note:focus{outline:none}footer{display:flex;justify-content:space-between;gap:14px;max-width:1160px;width:100%;margin:auto auto 0;color:#686e61;font-size:9px;letter-spacing:.1em}.turn-card h2{font-size:clamp(32px,4vw,47px);margin:12px 0}.turn-card #status-detail{font-size:14px;color:var(--muted);line-height:1.5;min-height:42px}.score-card{margin:25px 0;background:#fffbef69;border:1px solid #d2cbbb;border-radius:17px;padding:15px}.score-heading{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.09em;font-weight:bold;gap:8px;color:#58675b}.scores{display:grid;grid-template-columns:repeat(3,1fr);margin-top:13px;text-align:center}.scores>div{display:flex;flex-direction:column;align-items:center;gap:3px;border-right:1px solid #d5c9b770}.scores>div:last-child{border:0}.score-mark{font-weight:bold;font-size:18px}.teal{color:var(--teal)}.coral{color:var(--coral)}.neutral{color:#7b776c}.scores strong{font-family:Georgia,serif;font-size:32px;font-weight:normal}.scores>div>span:last-child{font-size:10px;color:var(--muted)}#end-actions>.micro{text-align:center}dialog{width:min(360px,calc(100vw - 32px));padding:30px;border-radius:23px;background:var(--paper);color:var(--ink);box-shadow:0 30px 100px #1b332e66}dialog::backdrop{background:#243b365e;backdrop-filter:blur(7px)}dialog h2{font-size:39px;margin:12px 0}dialog>p:not(.eyebrow){color:var(--muted);font-size:14px;margin-bottom:25px}.secondary,.text-button{width:100%;margin-top:12px;border-radius:12px;background:#e8e5d7;font-size:13px}.text-button{background:transparent;text-decoration:underline;text-underline-offset:3px}#app[data-screen=menu] .board-controls{visibility:hidden}#app[data-screen=paused] .board-controls{pointer-events:none}
@media(min-width:760px) and (min-height:700px){.board-wrap{animation:settle .65s ease-out both}.panel{animation:arrive .55s ease-out both}.masthead{padding-top:9px}}
@keyframes settle{from{opacity:0;transform:translateY(14px) rotate(-2deg)}to{opacity:1;transform:none}}@keyframes arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(max-width:700px) and (orientation:portrait){#app{padding:18px 20px 15px;padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(15px,env(safe-area-inset-bottom))}.brand-icon{display:none}.brand h1{font-size:31px}.toolbar{gap:4px}.tool{min-width:46px;min-height:46px;padding:0 10px}.tool>span:last-child{display:none}.layout{display:flex;flex-direction:column;gap:15px;margin:21px auto;max-width:430px;justify-content:center}.board-area{width:100%}.table-label{display:none}.board-wrap{max-width:min(94vw,44dvh,400px)}.board-caption{font-size:14px;margin-top:7px}.panel{width:100%}.panel>h2{font-size:34px;margin:8px 0}.panel>h2 br{display:none}.panel>.eyebrow,.intro{display:none}fieldset{margin-bottom:14px}.start-note{text-align:center;margin-top:13px;font-size:10px}.layout:has(#setup:not([hidden])){gap:7px;margin:10px auto 18px}.layout:has(#setup:not([hidden])) .board-wrap{max-width:min(220px,27dvh)}.layout:has(#setup:not([hidden])) .board-caption{display:none}#setup>h2{display:none}.play-panel{display:flex;flex-direction:column}.turn-card{order:-1;text-align:center}.turn-card h2{font-size:34px;margin:3px 0 7px}.turn-card #status-detail{min-height:0;font-size:13px}.turn-card .eyebrow{font-size:9px}.score-card{margin:17px 0 0;padding:12px 15px}.scores{margin-top:9px;display:flex;justify-content:space-around}.scores>div{width:33.333%;display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;padding:0 10px}.scores>div>span:last-child{grid-column:1 / -1}.scores strong{font-size:27px;justify-self:start}.scores .score-mark{justify-self:end;align-self:center}.play-panel .start-note{display:none}#end-actions{margin-top:16px}.play-panel:has(#end-actions:not([hidden])) .score-card{margin-top:12px}footer{font-size:8px;letter-spacing:.03em}footer>span:first-child{display:none}footer{justify-content:center}#app:not([data-screen=menu]) .layout{gap:16px}.brand .eyebrow{font-size:9px}}
@media(orientation:landscape) and (max-height:600px){#app{padding:12px max(20px,env(safe-area-inset-right)) 10px max(20px,env(safe-area-inset-left))}.brand-icon{width:32px;height:34px;font-size:27px;border-radius:9px}.brand-icon span{font-size:17px}.brand{gap:10px}.brand h1{font-size:27px}.brand .eyebrow{font-size:8px}.tool{min-height:44px}.layout{margin:10px auto;grid-template-columns:minmax(0,1fr) minmax(265px,.8fr);gap:22px;max-width:820px}.board-wrap{max-width:min(100%,calc(100dvh - 94px))}.table-label,.board-caption,.panel>.eyebrow,.panel>h2,.intro,.start-note,footer{display:none}fieldset{margin-bottom:11px}legend{margin-bottom:5px;font-size:11px}.modes button{padding:5px}.micro{font-size:10px;margin-top:5px}.primary{min-height:48px}.turn-card h2{font-size:34px;margin:5px 0}.turn-card #status-detail{font-size:12px;min-height:0}.score-card{margin:14px 0;padding:10px}.scores{margin-top:6px}.scores>div{display:grid;grid-template-columns:1fr 1fr;gap:1px 8px;padding:0 8px}.scores>div>span:last-child{grid-column:1 / -1}.scores strong{font-size:25px;justify-self:start}.score-mark{justify-self:end}dialog{padding:18px 24px}dialog h2{font-size:30px;margin:7px 0}dialog>p:not(.eyebrow){margin-bottom:13px}.secondary,.text-button{margin-top:7px;min-height:44px}}
@media(max-width:360px) and (orientation:portrait){#app{padding-left:12px;padding-right:12px}.brand h1{font-size:27px}.tool{min-width:44px;padding:0 8px}.board-wrap{max-width:min(89vw,41dvh)}.layout{margin:14px auto}.modes button{padding:6px}.micro{font-size:10px}.score-card{margin-top:12px}.layout:has(#setup:not([hidden])) .board-wrap{max-width:24dvh}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}button:active{transform:none}}
.tool[aria-pressed=false]>span:first-child{position:relative}.tool[aria-pressed=false]>span:first-child:after{content:"";position:absolute;width:24px;height:2px;background:var(--ink);left:-4px;top:50%;transform:rotate(-45deg)}
@media(orientation:landscape) and (max-height:350px){.layout{margin:4px auto}fieldset{margin-bottom:8px}.turn-card h2{font-size:29px}.score-card{margin:10px 0}}
@media(max-width:700px) and (orientation:portrait) and (max-height:690px){.board-caption{display:none}#app:not([data-screen=menu]) .layout{margin:10px auto;gap:10px}.board-wrap{max-width:min(80vw,36dvh,260px)}.turn-card h2{font-size:28px;margin:2px 0 4px}.turn-card #status-detail{font-size:12px}.score-card{padding:8px 12px;margin-top:10px}.scores{margin-top:6px}.scores strong{font-size:24px}#end-actions{margin-top:10px}.primary{min-height:48px}.layout:has(#setup:not([hidden])) .board-wrap{max-width:21dvh}.layout:has(#setup:not([hidden])){margin-top:8px;margin-bottom:10px}.start-note{margin-top:10px}}