:root{font-family:Inter,"Noto Sans",sans-serif;color:#312c27;background:#eee4cd;font-synthesis:none;--ink:#312c27;--sage:#566650;--honey:#e4bc7c;--paper:#fff9eb}*{box-sizing:border-box}body{margin:0;background:linear-gradient(90deg,#eee4cdcf,#eee4cdbe),url(assets/courtyard.webp) center/cover fixed;min-width:0}button,select{font:inherit}button,select,summary{min-height:44px;min-width:44px}button{color:var(--ink);background:var(--paper);border:1px solid #c6b38f;border-radius:12px;padding:10px 13px;font-weight:650;cursor:pointer;overflow-wrap:anywhere}button:hover:not(:disabled){background:#f6e8cb}button:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #b8603d;outline-offset:2px}p{line-height:1.6;margin:.55em 0;overflow-wrap:anywhere}small{line-height:1.4}h1,h2{font-family:Georgia,"Noto Serif",serif;line-height:1.2}h2{font-size:1.28rem;margin:8px 0}main{max-width:1050px;padding:16px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;gap:10px}.brand{display:flex;align-items:center;gap:10px}.brand img{width:64px;height:84px;object-fit:contain}.brand strong{display:block;font:700 28px Georgia,serif;line-height:1}.brand strong span{font:600 11px Inter,sans-serif;letter-spacing:1.8px}.brand small{font-size:10px;letter-spacing:1.5px;color:var(--sage)}nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}nav button{font-size:12px;padding:8px}.hud{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff9ebee;border:1px solid #d7c5a4;border-radius:16px;padding:12px 16px;margin:8px 0 16px}.hud strong,.hud small{display:block}.hud strong{font-size:17px}.hud small{font-size:11px;color:var(--sage)}.players{display:grid;gap:4px;font-size:12px}.workspace{display:grid;grid-template-columns:minmax(0,480px) minmax(260px,1fr);gap:22px;align-items:start}.boardSection{min-width:0}#boardViewport{overflow:auto;border-radius:16px;border:2px solid #c09660;box-shadow:0 9px 0 #a98350,0 16px 32px #52422e30;background:#e0b577;max-width:100%;touch-action:pan-x pan-y;overscroll-behavior-x:contain;scrollbar-color:#9b7950 #e0b577}#boardWrap{position:relative;width:440px;height:440px;margin:auto}#board{display:block;width:440px;height:440px}#points{position:absolute;inset:0}#points button{position:absolute;width:44px;height:44px;min-width:44px;padding:0;background:transparent;border:0;border-radius:50%;touch-action:pan-x pan-y}#points button:hover{background:#fff5cd24}#points button:focus-visible{outline:2px dashed #526750;outline-offset:-4px}.panHelp{font-size:11px;text-align:center;color:#605848;margin-top:16px}aside>section{border:1px solid #d7c5a4;border-radius:16px;background:#fff9ebf5;padding:14px;margin-bottom:10px}.previewPanel{display:grid;grid-template-columns:80px minmax(0,1fr);gap:8px;align-items:center}.previewPanel canvas{width:80px;height:80px}.previewPanel p{font-size:12px}.previewPanel button,.previewPanel>small{grid-column:1/-1}.previewPanel>small{color:var(--sage);font-size:11px}#place,#agreeBlack,#newBot{background:var(--sage);color:#fff;border-color:#435140}#actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}#actions button{font-size:12px}#notice{font-size:12px;color:#704428;background:#fff9ebbc;border-radius:12px;padding:8px}#notice:empty{display:none}#reviewPanel p,#lessonPanel p{font-size:12px}#reviewPanel>button{width:100%;margin:4px 0}.agree{display:flex;gap:7px;margin:4px 0}.agree button{flex:1}#lessonPanel h2{color:var(--sage)}#lessonNumber,#lessonScope{color:#71634e}#answers{display:flex;gap:8px}#answers button{flex:1}#lessonHint,#lessonRetry,#lessonNext{margin:5px 2px 0}#lessonStatus{font-weight:650;color:var(--sage)}dialog{border:1px solid #c6b38f;color:var(--ink);background:var(--paper);border-radius:22px;padding:20px;width:min(640px,calc(100% - 20px));max-height:calc(100dvh - 24px);overflow:auto;box-shadow:0 20px 80px #241f1c55}dialog::backdrop{background:#29272080}dialog p{font-size:13px}dialog .cover{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px}dialog h1{font-size:26px;margin:13px 0 6px}dialog>button{margin:7px 4px 0 0}.modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}#continue{width:100%}#lessonList{display:grid;grid-template-columns:1fr 1fr;gap:7px}#lessonList button{text-align:left;font-size:12px;display:flex;gap:9px;align-items:center}#lessonList b{flex:none;display:grid;place-items:center;font-size:15px;background:#ebdebf;border-radius:50%;width:32px;height:32px}#lessonList button[data-complete=true] b{background:var(--sage);color:#fff}.settings{display:grid;gap:8px;padding:9px 0}.settings label{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}.settings input{width:24px;height:24px;accent-color:var(--sage)}select{background:#fff;border:1px solid #c6b38f;border-radius:8px;padding:8px;max-width:65%;color:var(--ink)}summary{padding:13px 0;cursor:pointer}.helper{width:80px;height:110px;object-fit:contain;float:right;margin:0 0 8px 12px}[hidden]{display:none!important}html[data-motion=false] *{scroll-behavior:auto!important}@media(max-width:740px){main{padding:8px}.workspace{grid-template-columns:minmax(0,1fr);gap:8px}.boardSection{max-width:480px;width:100%;margin:auto}aside{display:grid;grid-template-columns:1fr 1fr;gap:8px}aside>section{margin:0}#lessonPanel,#reviewPanel,#resultPanel,#notice{grid-column:1/-1}.previewPanel{grid-template-columns:64px minmax(0,1fr);padding:8px}.previewPanel canvas{width:64px;height:64px}#actions{padding:8px;align-content:center;gap:7px}.hud{padding:10px;font-size:12px;gap:6px;margin-bottom:10px}.hud strong{font-size:14px}.hud small{font-size:10px}.players{font-size:10px}.brand img{width:48px;height:70px}.brand strong{font-size:24px}.brand small{font-size:8px}.brand strong span{font-size:9px}nav{max-width:160px;gap:4px}nav button{padding:7px;font-size:10px}dialog{padding:14px}dialog h1{font-size:23px}}@media(max-width:360px){aside{display:block}aside>section{margin-bottom:7px}.previewPanel{grid-template-columns:64px minmax(0,1fr)}.modes{grid-template-columns:1fr}.hud{flex-wrap:wrap}.hud>small{width:100%}#lessonList{grid-template-columns:1fr}nav{max-width:130px}}
nav button{width:44px;height:44px;flex:none;padding:0;font-size:20px;line-height:1}nav{flex-wrap:nowrap;gap:4px;max-width:none}.panHelp{margin:12px 0 6px;font-size:10px;line-height:1.4}@media(max-width:740px){header{gap:7px}.brand{gap:7px}.brand img{width:40px;height:56px}nav{max-width:none}nav button{font-size:18px}.hud{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 6px;padding:8px 10px}.hud>small{grid-column:1/-1}}@media(max-width:360px){.previewPanel{grid-template-columns:56px minmax(0,1fr)}.previewPanel canvas{width:56px;height:56px}}
#boardViewport,#points button{touch-action:pan-y}
#lessonIntro{background:#fff9ebed;border:1px solid #d7c5a4;border-radius:14px;padding:12px 14px;margin-bottom:10px}#lessonIntro small{font-size:11px;color:var(--sage)}#lessonIntro h2{color:var(--sage);margin:5px 0;font-size:20px}#lessonIntro p{font-size:13px;margin:5px 0;line-height:1.5}@media(max-width:740px){main[data-view=lesson] .previewPanel{grid-column:1/-1}#lessonIntro h2{font-size:18px}}