:root{color-scheme:dark;--bg:#0b201e;--panel:#12332c;--ink:#f6efd9;--gold:#efca77;--muted:#a8bfb1}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0,#244333 0,transparent 55%),var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,sans-serif;line-height:1.6}main{max-width:1180px;margin:auto;padding:25px 36px}header{display:flex;align-items:center;gap:24px;border-bottom:1px solid #789b7333;padding-bottom:20px}header span{font-size:12px;color:var(--muted);flex:1}.brand{text-decoration:none;color:var(--gold);font-weight:750;font-size:15px;letter-spacing:3px}button,select{background:#1b3d32;border:1px solid #638f634d;color:var(--ink);padding:9px 14px;border-radius:9px;font:inherit;font-size:13px;cursor:pointer;touch-action:manipulation}button:hover{background:#31523b;border-color:var(--gold)}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.35;cursor:default}.intro{padding:28px 0 25px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--gold);font-weight:700;margin:0}h1{font-family:Georgia,serif;font-weight:400;letter-spacing:-1.5px;font-size:clamp(30px,4vw,48px);line-height:1.12;margin:9px 0}.intro>p:last-child{color:var(--muted);margin:8px 0 0;font-size:14px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:32px}.game{min-width:0}.levelbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}h2{font-size:19px;font-weight:500;margin:2px 0}.levelbar label{font-size:12px;color:var(--muted)}select{padding:6px;max-width:90px;margin-left:5px}.board-wrap{background:#102d29;border:1px solid #86a46e55;border-radius:15px;padding:6px;box-shadow:0 20px 50px #0004;overflow:hidden}canvas{display:block;width:100%;height:auto;border-radius:10px;touch-action:none}.toolbar{display:flex;gap:8px;align-items:center;margin-top:15px}.toolbar span{margin-right:auto;font-size:12px;color:var(--muted)}#message{min-height:26px;font-size:14px;margin:12px 0;color:var(--gold)}#next{background:var(--gold);color:#152d23;font-weight:700;margin-bottom:15px}aside{padding-top:0}.aside-art{height:132px;width:132px;background:url('forest-atlas.webp') no-repeat top left;background-size:264px 264px;margin:0 auto 18px;border-radius:50%}#rules{display:flex;flex-direction:column;gap:6px;margin:13px 0 24px}.rule{font-size:11px;font-weight:650;letter-spacing:1px;padding:9px 12px;background:#224735;border:1px solid #789d6155;border-radius:7px}.rule b{color:var(--gold)}.note{border-top:1px solid #789b7333;padding-top:10px}.note h3{font-family:Georgia,serif;font-size:20px;font-weight:400}.note p{font-size:12px;color:var(--muted)}.note b{color:#e6d9b6}.keys{font-size:10px;letter-spacing:1px;line-height:2;color:#91aa95;margin-top:25px}#progress{font-size:12px;color:var(--gold)}footer{display:flex;justify-content:space-between;align-items:center;margin-top:30px;border-top:1px solid #789b7333;padding:18px 0;color:var(--muted);font-size:11px}footer button{border:0;background:none;color:var(--muted);padding:5px}.dpad{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:8px}.dpad div{display:flex;gap:6px}.dpad button{width:48px;height:40px;font-size:19px}dialog{max-width:530px;width:calc(100% - 30px);padding:32px;border:1px solid #7b9c6d;border-radius:18px;background:#15362d;color:var(--ink);box-shadow:0 25px 100px #000a}dialog::backdrop{background:#051612cc;backdrop-filter:blur(5px)}dialog h2{font-family:Georgia,serif;font-size:28px}dialog p{font-size:14px;color:#c6d4c4}dialog a{color:var(--gold)}#close{float:right} [hidden]{display:none!important}@media(max-width:760px){main{padding:18px 16px}.layout{grid-template-columns:1fr;gap:20px}header span{display:none}header{justify-content:space-between}.intro{padding:24px 0}aside{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}.aside-art{display:none}aside>.eyebrow{grid-column:1/-1}#rules{margin:6px 0}.note{grid-row:2/5;grid-column:2;padding:0;border:0}.note h3{margin:0 0 8px;font-size:18px}.keys{margin:0}#progress{margin:0}.toolbar{gap:5px}.toolbar button{font-size:11px;padding:8px}footer span{max-width:65%}h2{font-size:17px}}