*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#cbb79a;color:#2a2622;font-family:system-ui,Segoe UI,Noto Sans SC,Noto Sans CJK SC,Source Han Sans SC,PingFang SC,Microsoft YaHei,Noto Sans TC,PingFang TC,sans-serif;line-height:1.5}body{min-height:100dvh;min-height:100svh}button,.btn{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.45}#app{min-height:100dvh;min-height:100svh}.screen{min-height:100dvh;min-height:100svh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:radial-gradient(120% 80% at 50% -10%,#efe6d6 0%,transparent 55%),linear-gradient(180deg,#d8c7ab,#cbb79a 40%,#b89d7c)}.screen[hidden]{display:none!important}.title-root{display:grid;min-height:100dvh;min-height:100svh;padding:1.5rem 1.25rem 1.25rem;gap:1.25rem}.title-root[data-orient=portrait]{grid-template-rows:auto auto 1fr auto;align-items:center;justify-items:center;text-align:center}.title-root[data-orient=landscape]{grid-template-columns:minmax(0,1.1fr) minmax(16rem,22rem);grid-template-rows:1fr auto;align-items:center;padding-inline:2rem}.title-brand{max-width:28rem}.title-mark{width:4.5rem;height:4.5rem;margin-inline:auto;margin-block-end:.75rem;display:block}.title-root[data-orient=landscape] .title-mark{margin-inline:0}h1{margin:0;font-weight:700;letter-spacing:.02em;font-size:clamp(1.75rem,1.2rem + 2vw,2.4rem);line-height:1.15;text-wrap:balance;color:#2a2622}.subtitle{margin:.5rem 0 0;color:#5a534c;font-size:clamp(.95rem,.85rem + .4vw,1.1rem);text-wrap:pretty;max-width:28rem}.howto{margin:.75rem 0 0;color:#5a534c;font-size:.95rem;max-width:28rem;text-wrap:pretty}.title-actions{display:flex;flex-direction:column;gap:.7rem;width:min(22rem,100%)}.title-root[data-orient=landscape] .title-actions{grid-row:1;grid-column:2}.title-foot{display:flex;flex-wrap:wrap;gap:.5rem .75rem;justify-content:center;width:100%}.title-root[data-orient=landscape] .title-foot{grid-column:1 / -1;justify-content:flex-end}.studio{margin:.25rem 0 0;color:#5a534c;font-size:.85rem}.seals-line{margin:.4rem 0 0;font-size:.95rem;color:#3f5c52}.btn{appearance:none;border:1px solid #8a7048;background:linear-gradient(180deg,#efe6d6,#e2d3bc);border-radius:.75rem;min-height:2.75rem;padding:.5rem 1rem;font-size:clamp(.95rem,.85rem + .4vw,1.05rem);font-weight:650;letter-spacing:.01em;box-shadow:0 1px #f7f1e6 inset,0 1px #a1845c}.btn:focus-visible{outline:2px solid #3f5c52;outline-offset:2px}.btn-primary{background:linear-gradient(180deg,#8aa897,#5f7f70);border-color:#3f5c52;color:#f4faf6;box-shadow:0 1px #c5d8cc inset,0 1px #2c443c}.btn-ghost{background:transparent;border-color:transparent;box-shadow:none;min-height:2.5rem;text-decoration:underline;text-underline-offset:.2em;font-weight:550;color:#3f5c52}.btn-danger{background:linear-gradient(180deg,#dcc1a8,#c9a07e);border-color:#8d6e52}.btn.wide{width:100%}.play-root{display:grid;min-height:100dvh;min-height:100svh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:radial-gradient(80% 60% at 50% 0%,#e6dccb 0%,transparent 55%),#cbb79a}.play-root[data-orient=portrait]{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto 1fr auto;grid-template-areas:"undo level hint" "lesson lesson lesson" "board board board" "pause . restart";column-gap:.5rem;row-gap:.35rem;padding-block:.55rem;padding-inline:.7rem}.play-root[data-orient=landscape]{grid-template-columns:minmax(0,1fr) minmax(11rem,16rem);grid-template-rows:auto auto auto auto auto auto 1fr;grid-template-areas:"board level" "board undo" "board hint" "board pause" "board restart" "board lesson" "board .";column-gap:.7rem;row-gap:.45rem;padding:.7rem .8rem;align-items:start}.hud-btn,.hud-label{min-height:2.75rem;min-width:2.75rem}#ctl-undo{grid-area:undo}#ctl-level{grid-area:level}#ctl-hint{grid-area:hint}#ctl-pause{grid-area:pause}#ctl-restart{grid-area:restart}#lesson{grid-area:lesson}.hud-label{display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:clamp(.95rem,.85rem + .5vw,1.15rem);padding:.25rem .5rem;color:#2a2622}.hud-btn .sub{display:block;font-size:.75rem;font-weight:550;color:#5a534c;line-height:1.2}.btn-primary .sub{color:#e7f1eb}.board-wrap{grid-area:board;min-width:0;min-height:0;display:grid;place-items:center;align-self:stretch}.board-wrap canvas{display:block;width:auto;height:auto;max-width:100%;max-height:100%;touch-action:none}#lesson{margin:0;text-align:center;color:#3f5c52;font-size:.95rem;text-wrap:pretty;min-height:1.4em;padding-inline:.4rem}.play-root[data-orient=landscape] #lesson{text-align:start;font-size:.9rem}.banner{position:fixed;inset-inline:.75rem;top:calc(env(safe-area-inset-top) + .4rem);z-index:8;background:#efe6d6;border:1px solid #8a7048;border-radius:.7rem;padding:.45rem .7rem;font-size:.9rem;text-wrap:pretty;box-shadow:0 1px #f7f1e6 inset}.overlay{position:fixed;inset:0;background:#2a262273;display:grid;place-items:center;padding:1rem;z-index:12}.overlay[hidden]{display:none!important}.panel{width:min(24rem,100%);background:#f3ebdf;border:1px solid #8a7048;border-radius:1rem;padding:1.15rem 1.15rem 1.05rem;box-shadow:0 1px #fff8ee inset}.panel h2{margin:0 0 .6rem;font-size:clamp(1.15rem,1rem + .6vw,1.45rem);text-wrap:balance}.panel p{margin:0 0 .8rem;text-wrap:pretty}.panel-actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}.seal{display:inline-flex;align-items:center;gap:.4rem;color:#3f5c52;font-weight:650}.doc-root,.settings-root,.daily-root{display:grid;grid-template-rows:auto minmax(0,1fr);height:100dvh;height:100svh;min-height:100dvh;min-height:100svh;padding:.85rem 1.15rem 1.25rem;gap:.7rem;overflow:hidden}.doc-head,.settings-head,.daily-head{display:flex;align-items:center;gap:.6rem}.doc-head h1,.settings-head h1,.daily-head h1{font-size:clamp(1.2rem,1rem + .8vw,1.6rem)}article.legal{max-width:40rem;margin-inline:auto;width:100%;min-height:0;overflow:auto;padding-block-end:1.5rem;overscroll-behavior:contain}article.legal p{margin:0 0 1rem;text-wrap:pretty;font-size:1rem;line-height:1.55}.settings-body,.daily-body{width:min(28rem,100%);margin-inline:auto;display:flex;flex-direction:column;gap:1rem}.field{display:grid;gap:.4rem}.field-label{font-weight:650}.segmented{display:flex;flex-wrap:wrap;gap:.4rem}.segmented .btn[aria-pressed=true]{background:linear-gradient(180deg,#8aa897,#5f7f70);border-color:#3f5c52;color:#f4faf6}.day-list{display:flex;flex-direction:column;gap:.45rem;margin:0;padding:0;list-style:none}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-height:440px){article.legal p{margin-block-end:.65rem;font-size:.95rem}.doc-root{padding-block:.55rem .7rem}.title-mark{width:3rem;height:3rem;margin-block-end:.35rem}.howto{display:none}.title-root{padding-block:.7rem;gap:.6rem}.title-actions{gap:.45rem}}.nowrap{white-space:nowrap}