:root{font:16px Nunito,system-ui,"Noto Sans",sans-serif;color:#583429;background:#fff0d5;--mint:#a9dac5;--coral:#db6558;--ink:#583429}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 10%,#ffe2ae,transparent 45%),#fff0d5}button,select{font:inherit;font-weight:900;color:var(--ink);min-height:44px;border:2px solid #ae8463;border-radius:12px;background:#fff9e9;padding:8px 12px}button{cursor:pointer;box-shadow:0 3px #c8a287;touch-action:manipulation}button:active{transform:translateY(2px)}button:disabled{opacity:.45;cursor:default}button:focus-visible,select:focus-visible{outline:3px solid var(--coral);outline-offset:2px}[hidden]{display:none!important}.primary{background:var(--coral);color:#fff9e9;border-color:#ae4a44}.settings [aria-pressed=false]{opacity:.5}#app{max-width:1000px;margin:auto;padding:12px 20px max(25px,env(safe-area-inset-bottom))}header{display:flex;align-items:center;gap:12px;border-bottom:2px dashed #d1aa83;padding:4px 0 12px}header a{text-decoration:none;color:var(--coral);font-size:27px}header div{flex:1}h1{font-size:28px;line-height:1;margin:0}header small{font-size:12px;line-height:1.2;display:block;margin-top:5px}header button{font-size:12px}.scoreboard{display:flex;justify-content:space-between;gap:10px;margin:10px 0}.scoreboard section{display:flex;align-items:center;gap:8px;padding:5px 12px;background:#ffe2b9;border:2px solid #c29872;border-radius:16px;flex:1;max-width:46%;min-width:0}.scoreboard section:last-child{background:#fcf7e8;justify-content:flex-end}.scoreboard strong{font-size:14px;line-height:1.15}.scoreboard b{font-size:28px;display:block}.baker{display:block;width:64px;height:64px;background:url('assets/cookies.webp') 0 100%/128px 128px no-repeat;flex-shrink:0}.light-baker{background-position:100% 100%}.layout{display:grid;grid-template-columns:minmax(0,640px) minmax(180px,1fr);gap:20px}#turn{min-height:35px;text-align:center;font-size:14px;font-weight:900;line-height:1.3;padding:4px}.boardwrap{position:relative;border:8px solid #96634f;border-radius:14px;overflow:hidden;box-shadow:0 8px #d4b68e;background:#a9dac5;aspect-ratio:1}#board{display:block;width:100%;height:100%}#grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}.square{background:transparent;border:1px solid transparent;box-shadow:none;border-radius:5px;min-height:0;padding:0;min-width:0;aspect-ratio:1}.square:active{transform:none}.square:focus-visible{outline:3px solid var(--coral);outline-offset:-4px;z-index:2}.square.selected{border:3px solid #e36156;background:#fff5ce44}.square.capture{border:3px dashed #d17b48}.coordinates{text-align:center;font-size:10px;color:#907255;margin-top:7px;letter-spacing:.9em;padding-left:.9em}.previewbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:10px 0}.previewbar span{flex:1;min-width:130px;font-size:12px;font-weight:900}.previewbar button{font-size:12px}aside{padding-top:35px}aside>button{width:100%;display:block;margin:9px 0;font-size:13px}aside p{font-size:12px;line-height:1.45}#matchlabel{font-weight:900}#practicehint{background:#f2cd8f;border-radius:8px;padding:8px;color:#603a30}#savehint{opacity:.7}#lastmove{font-weight:900}dialog{width:min(94vw,520px);max-height:94dvh;border:3px solid #b98560;border-radius:20px;background:#fff1d7;color:var(--ink);padding:22px;box-shadow:0 15px 65px #58342955;overflow:auto}dialog::backdrop{background:#48362b88;backdrop-filter:blur(4px)}dialog h2{font-size:28px;line-height:1.1;margin:0 0 12px}dialog p,dialog li{font-size:14px;line-height:1.5}dialog>button,.menucontent>button{display:block;width:100%;margin:10px 0}#menu{padding:0}.cover{height:185px;background:#a9dac5 url('cover.webp') center/cover}.menucontent{padding:22px}.menucontent label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:9px 0;font-size:13px;font-weight:900}.menucontent select{max-width:65%;font-size:13px}.settings{display:flex;gap:6px;flex-wrap:wrap;margin-top:15px}.settings button{font-size:11px}.settings select{max-width:160px}.reviewboards{display:grid;grid-template-columns:1fr 1fr;gap:10px}.reviewboards canvas{width:100%;height:auto;border:3px solid #96634f;border-radius:6px}.reviewboards h3{font-size:13px;margin:0 0 6px}#resultcounts{font-size:20px;font-weight:900}#resultscore{font-size:26px;color:#af4c47;font-weight:900}#records{font-size:12px;font-weight:900}.baker[data-mood=lost]{filter:saturate(.55)}.baker[data-mood=won]{filter:drop-shadow(0 0 5px #f5bc55)}
@media(max-width:700px){:root{font-size:14px}#app{padding:8px 10px max(20px,env(safe-area-inset-bottom))}header{gap:7px;padding-bottom:8px}header small{font-size:10px}header h1{font-size:23px}.scoreboard{margin:8px 0}.scoreboard section{padding:4px 7px;gap:4px;max-width:49%}.scoreboard strong{font-size:11px}.scoreboard b{font-size:24px}.baker{width:48px;height:48px;background-size:96px 96px}.layout{display:flex;flex-direction:column;gap:4px}#turn{min-height:30px;font-size:12px}.boardwrap{border-width:5px;border-radius:10px}.coordinates{letter-spacing:.6em}.previewbar{margin:8px 0}.previewbar span{font-size:11px;min-width:105px}.previewbar button{padding:7px 9px;font-size:11px}aside{padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}aside>button{margin:0;min-width:0;font-size:11px;padding:6px}aside p{margin:0;font-size:11px}#matchlabel,#practicehint,#tip{grid-column:1/-1}#savehint{grid-column:1/3}#lastmove{grid-column:3/4}.cover{height:145px}.menucontent{padding:18px}dialog{padding:17px}dialog h2{font-size:24px}dialog p,dialog li{font-size:12px}#reviewtext{font-size:12px}}
@media(max-height:460px) and (min-width:560px){#app{max-width:850px}header small{display:none}.layout{display:grid;grid-template-columns:minmax(0,290px) 1fr}.scoreboard{max-width:290px;position:absolute;right:12px;top:8px;margin:0;pointer-events:none}.scoreboard section{border:0;background:none!important;padding:0}.scoreboard .baker{width:38px;height:38px;background-size:76px 76px}.scoreboard b{font-size:20px}header{padding-bottom:4px;max-width:290px}header button{font-size:10px;min-height:44px}#turn{font-size:11px;min-height:24px}aside{padding-top:55px;display:flex;gap:5px;flex-wrap:wrap;align-content:flex-start}aside>button{width:48%;margin:0;min-height:44px}aside p{width:100%}#tip{display:none}.cover{height:90px}.menucontent{padding:13px}dialog{padding:14px}.previewbar{margin:6px 0}.previewbar span{width:100%;flex-basis:100%}}
@media(prefers-reduced-motion:reduce){button:active{transform:none}dialog::backdrop{backdrop-filter:none}}

#app{position:relative}@media(min-width:701px) and (min-height:461px){.layout{grid-template-columns:minmax(0,520px) minmax(180px,1fr)}.boardwrap{max-width:min(100%,calc(100dvh - 350px))}.boardsection{max-width:min(100%,calc(100dvh - 350px))}.previewbar span{flex-basis:100%}.previewbar{gap:5px}}
@media(max-height:460px) and (min-width:560px){.layout{grid-template-columns:minmax(0,240px) 1fr}header{max-width:240px}.boardwrap{width:100%;max-width:none}.boardsection{max-width:none}.previewbar{position:fixed;bottom:8px;right:12px;width:calc(100vw - 278px);max-width:490px;z-index:3;padding:7px;border:1px solid #d4b68e;border-radius:12px;background:#fff1d7}.previewbar span{flex-basis:100%}aside{padding-bottom:90px}.scoreboard{right:12px;top:8px}.coordinates{letter-spacing:.7em}#app{padding-bottom:12px}}

@media(max-height:460px) and (min-width:560px){aside>button{width:calc((100% - 10px)/3);min-width:0}aside{padding-bottom:12px}}