@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');
:root{color-scheme:light;--ink:#24463d;--forest:#173f35;--cream:#fff9e8;--gold:#f4c66c}*{box-sizing:border-box}body{margin:0;background:#10342f;background-image:radial-gradient(ellipse at 50% 0,#285749 0,transparent 65%);font-family:'DM Sans',sans-serif;color:var(--cream);min-height:100vh;padding:25px 32px 18px}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #f8d179;outline-offset:4px}button:disabled{opacity:.5;cursor:wait}.game-shell{max-width:1240px;margin:auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 3px 20px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--cream);font:500 27px 'Fraunces',serif;letter-spacing:-.8px}.brand-mark{font-size:46px;line-height:1;color:var(--gold)}.brand small{display:block;font:600 9px 'DM Sans',sans-serif;letter-spacing:2.6px;margin-top:5px;color:#b4c8b3}.room-label{display:flex;align-items:center;gap:9px;font-size:12px;color:#c0d1bc}.online-dot{height:6px;width:6px;border-radius:50%;background:#bad890;box-shadow:0 0 0 4px #bad89015}.button{border:1px solid #b89b50;border-radius:9px;background:var(--gold);color:#294031;padding:10px 16px;font-size:12px;font-weight:700;white-space:nowrap;transition:transform .15s,background .15s}.button:hover{transform:translateY(-1px);background:#ffdb89}.button.quiet{background:transparent;border-color:#c6d1b63d;color:#e2e8ce}.button.quiet:hover{background:#ffffff0c}.button[aria-pressed=true]{background:#e0f0ba;border-color:#aec881}.game-room{position:relative;border:2px solid #80996965;border-radius:17px;overflow:hidden;background:#678962;box-shadow:0 18px 65px #001c2250;isolation:isolate}#world{display:block;width:100%;height:auto;aspect-ratio:3/2;cursor:crosshair;touch-action:none}.welcome{position:absolute;left:4%;top:4.5%;padding:17px 22px 20px;background:#fff9e8f0;border:1px solid #fffbeabb;border-radius:12px;color:var(--ink);box-shadow:0 4px 18px #23362015;pointer-events:none;transition:opacity .5s,transform .5s}.welcome.dismissed{opacity:0;transform:translateY(-8px)}.eyebrow{font-size:8px;letter-spacing:1.7px;font-weight:700;color:#6a7c52}h1{font:500 27px/1.1 'Fraunces',serif;letter-spacing:-.6px;margin:9px 0}h2{font:500 23px 'Fraunces',serif;margin:5px 0 0}.welcome p{font-size:10px;margin:9px 0 0;color:#607450}.room-badge{position:absolute;left:21px;bottom:20px;display:flex;align-items:center;gap:8px;border:1px solid #eef3da55;background:#163c34e8;border-radius:8px;padding:8px 12px;font-size:10px;pointer-events:none}.room-badge span{color:var(--gold);font-size:19px}.move-status{position:absolute;right:20px;bottom:24px;background:#fff9e8e6;color:#446144;padding:8px 11px;border-radius:7px;font-size:10px;pointer-events:none}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px 0}.instructions{display:flex;align-items:center;gap:12px;font-size:11px;color:#b7cdb8}.keys{display:flex;gap:4px}kbd{display:inline-grid;place-items:center;min-width:21px;height:23px;border:1px solid #67846b;border-bottom-width:3px;border-radius:4px;font:600 9px 'DM Sans',sans-serif;color:#e9eed7}i{font-style:normal;padding:0 6px;color:#789c81}.test-actions{display:flex;align-items:center;gap:8px}.prototype-note{margin:16px 0 0;font-size:9px;text-align:center;color:#829d86;letter-spacing:.5px}.prototype-note span{padding:0 7px}.loading{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:#214b3d;font:500 22px 'Fraunces',serif}.loading[hidden]{display:none}.wardrobe{position:absolute;top:16px;right:16px;bottom:16px;width:270px;max-width:calc(100% - 32px);background:#fff9ebfa;color:var(--ink);padding:20px;border:1px solid #fffbea;border-radius:13px;box-shadow:0 8px 40px #16382240;overflow:auto;z-index:4}.wardrobe[hidden]{display:none}.wardrobe-heading{display:flex;justify-content:space-between;align-items:center}.close{border:0;background:#e8e9d8;color:#3d5a3c;width:27px;height:27px;border-radius:50%;font-size:21px;line-height:1}.mini-preview{height:150px;display:grid;place-items:center;background:radial-gradient(ellipse,#e6eaca 0,transparent 68%)}#avatar{width:155px;height:155px}.color-label{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;margin:10px 0}input[type=color]{height:25px;width:35px;padding:1px;background:#fff;border:1px solid #c3ccaf;border-radius:5px;cursor:pointer}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.swatch{width:100%;aspect-ratio:1;border:2px solid #9fae8966;border-radius:7px;position:relative}.swatch[aria-pressed=true]{outline:2px solid #3f664a;outline-offset:2px}.swatch[aria-pressed=true]:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;font-size:15px;color:#fff;text-shadow:0 1px 3px #000}.wardrobe-note{font-size:10px;color:#7a8966;line-height:1.5;margin-top:18px}.touch-controls{display:none;position:absolute;bottom:14px;right:14px;text-align:center}.touch-controls div{display:flex;gap:5px;margin-top:5px}.touch-controls button{width:38px;height:38px;background:#fff9e8da;color:#34593b;border:1px solid #839b6c;border-radius:8px;font-size:20px;touch-action:none;user-select:none}.touch-controls>button{margin:auto}.game-room:has(.wardrobe:not([hidden])) .touch-controls{display:none}@media(min-width:900px){.game-shell{max-width:min(1240px,calc((100svh - 210px)*1.5))}}@media(max-width:760px){body{padding:15px 12px}.topbar{gap:10px;padding-bottom:15px}.brand{font-size:22px}.brand-mark{font-size:35px}.brand small{font-size:7px;letter-spacing:2px}.room-label{display:none}.topbar .button{padding:8px 10px}.toolbar{flex-direction:column;padding-top:13px;gap:12px}.instructions{font-size:10px}.welcome{padding:11px 13px}.welcome h1{font-size:20px}.welcome .eyebrow{font-size:6px}.welcome p{font-size:8px}.room-badge{left:10px;bottom:10px;padding:4px 8px;font-size:8px}.move-status{font-size:8px;right:10px;bottom:12px}.game-room{border-radius:12px}.wardrobe{padding:15px;top:8px;bottom:8px;right:8px;width:250px}.mini-preview{height:85px}#avatar{width:100px;height:100px}.wardrobe h2{font-size:20px}.wardrobe-note{margin-top:10px}.swatches{gap:7px}.wardrobe .eyebrow{font-size:7px}}@media(pointer:coarse){.touch-controls{display:block}.move-status{right:auto;left:12px;bottom:46px}.instructions .keys{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}