:root{--cream:#f4ede0;--cream-2:#ede4d2;--paper:#fbf6ec;--ink:#2b2a26;--ink-soft:#51504a;--muted:#8a8678;--line:#d9d0bd;--shadow:0 8px 24px #3c321e1a, 0 2px 6px #3c321e0f;--shadow-lg:0 18px 48px #3c321e29, 0 4px 12px #3c321e14;--cobalt:#1b5ba8;--cobalt-2:#2e6fbc;--cobalt-light:#d6e6f6;--terracotta:#c4622e;--leaf:#3d7355;--bougainvillea:#d85b8e;--sand:#e8d4a8;--water:#6ec8e0;--radius:14px;--radius-sm:10px;--radius-lg:22px;--edge-gap:16px;--left-rail-width:72px;--title-card-height:68px}*{box-sizing:border-box}html,body{width:100%;height:100%;color:var(--ink);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:linear-gradient(#f6efe1 0%,#ebe1cc 100%);height:100dvh;margin:0;padding:0;font-family:Inter,SF Pro Text,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;overflow:hidden}#app.hidden{display:none}#game-canvas{width:100vw;height:100vh;cursor:crosshair;touch-action:none;background:radial-gradient(at 50% 30%,#fbf6ec 0%,#f0e7d2 60%,#e3d6ba 100%);height:100dvh;display:block;position:fixed;top:0;bottom:0;left:0;right:0}.ins-grid--touch{display:none}#loading-screen{z-index:999;background:linear-gradient(#f6efe1,#e8dcc1);place-items:center;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}#loading-screen.hidden{display:none}.loading-card{background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);text-align:center;width:360px;padding:36px 48px}.loading-logo{background:radial-gradient(circle at 50% 40%, var(--cobalt) 0 18%, transparent 19%), linear-gradient(180deg, #fff 60%, #efe7d3 100%);border-radius:16px;width:72px;height:72px;margin:0 auto 12px;position:relative;box-shadow:inset 0 -6px #0000000a}.loading-logo:after{content:"";background:var(--cobalt);border-radius:2px;width:30px;height:4px;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.loading-title{letter-spacing:-.01em;font-size:22px;font-weight:700}.loading-sub{color:var(--muted);margin-top:4px;font-size:13px}.loading-bar{background:var(--cream-2);border-radius:999px;width:100%;height:6px;margin-top:20px;overflow:hidden}.loading-fill{background:linear-gradient(90deg, var(--cobalt), var(--cobalt-2));width:0%;height:100%;transition:width .18s}.loading-status{color:var(--muted);margin-top:10px;font-size:12px;font-style:italic}#title-card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);z-index:10;-webkit-user-select:none;user-select:none;align-items:center;gap:12px;padding:12px 18px 12px 12px;display:flex;position:fixed;top:16px;left:16px}.title-logo{background:linear-gradient(#fff,#f0e6cf);border-radius:10px;width:44px;height:44px;position:relative;box-shadow:inset 0 -4px #0000000a}.title-logo:before{content:"";background:var(--cobalt);border-radius:13px 13px 0 0;width:26px;height:14px;position:absolute;top:8px;left:50%;transform:translate(-50%)}.title-logo:after{content:"";background:var(--cobalt);border-radius:2px;width:4px;height:14px;position:absolute;top:22px;left:50%;transform:translate(-50%)}.title-text h1{letter-spacing:-.01em;color:var(--cobalt);margin:0;font-size:20px;font-weight:700}.title-text p{color:var(--muted);margin:2px 0 0;font-size:12px}#toolbar{top:calc(var(--edge-gap) + var(--title-card-height) + 12px);left:var(--edge-gap);background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);z-index:10;flex-direction:column;gap:8px;padding:10px 8px;display:flex;position:fixed}.tool{border-radius:var(--radius-sm);cursor:pointer;width:60px;color:var(--ink-soft);font:inherit;background:0 0;border:0;flex-direction:column;align-items:center;gap:4px;padding:10px 6px 8px;transition:background .15s,color .15s,transform 50ms;display:flex}.tool:hover{background:var(--cream-2)}.tool:active{transform:scale(.97)}.tool.active{background:var(--cobalt-light);color:var(--cobalt)}.tool .ti{width:36px;height:36px;display:block}.tool span.label{letter-spacing:.01em;font-size:11px;font-weight:600}#palette{background:var(--paper);border-radius:var(--radius-sm);width:168px;box-shadow:var(--shadow);z-index:10;flex-direction:column;min-height:200px;padding:6px;display:flex;position:fixed;top:12px;bottom:92px;right:12px}#palette-tabs{border-bottom:1px solid var(--line);scrollbar-width:none;flex-shrink:0;gap:2px;margin-bottom:6px;padding:0 2px 4px;display:flex;overflow-x:auto}#palette-tabs::-webkit-scrollbar{display:none}.tab{font:inherit;letter-spacing:.04em;color:var(--muted);cursor:pointer;text-transform:uppercase;white-space:nowrap;background:0 0;border:0;border-radius:6px 6px 0 0;flex-shrink:0;padding:4px 6px;font-size:9.5px;font-weight:700}.tab:hover{color:var(--ink-soft);background:var(--cream-2)}.tab.active{color:var(--cobalt);border-bottom:2px solid var(--cobalt);margin-bottom:-1px}#palette-grid{scroll-behavior:smooth;scrollbar-width:thin;flex:auto;grid-template-columns:1fr 1fr;align-content:start;gap:4px;padding:2px 2px 4px;display:grid;overflow:hidden auto}#palette-grid::-webkit-scrollbar{width:4px}#palette-grid::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}.swatch{background:var(--cream);cursor:pointer;text-align:center;-webkit-user-select:none;user-select:none;border:2px solid #0000;border-radius:8px;flex-direction:column;align-items:center;gap:2px;padding:4px 3px 3px;transition:transform 50ms,border-color .15s,background .15s;display:flex}.swatch:hover{background:#f6ecd5;transform:translateY(-1px)}.swatch.selected{border-color:var(--cobalt);background:var(--cobalt-light)}.swatch canvas,.swatch img{width:38px;height:38px;image-rendering:pixelated;object-fit:contain;pointer-events:none}.swatch .name{color:var(--ink-soft);text-align:center;align-items:center;height:20px;font-size:9px;font-weight:600;line-height:1.1;display:flex;overflow:hidden}#hud{background:var(--paper);border-radius:var(--radius-sm);width:168px;box-shadow:var(--shadow);z-index:10;flex-flow:wrap;align-items:center;gap:6px 8px;padding:6px 8px;font-size:11px;display:flex;position:fixed;bottom:12px;right:12px}.hud-row{align-items:center;gap:5px;display:flex}.hud-clock{color:var(--ink);align-items:center;gap:5px;font-size:11px;font-weight:700;display:flex}.sun-icon{background:radial-gradient(circle,#ffc24a 0 35%,#f0a623 36% 60%,#0000 61%);border-radius:50%;width:12px;height:12px;position:relative;box-shadow:0 0 5px #f0a62380}.hud-toggles{border-top:1px solid var(--line);flex-flow:wrap;gap:4px 8px;width:100%;margin-top:4px;padding-top:5px;display:flex}.toggle{color:var(--ink-soft);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;gap:4px;font-size:10px;display:flex}.toggle input{display:none}.toggle .switch{background:#d8d2c4;border-radius:999px;flex-shrink:0;width:22px;height:12px;transition:background .15s;position:relative}.toggle .switch:after{content:"";background:#fff;border-radius:50%;width:8px;height:8px;transition:transform .15s;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #0003}.toggle input:checked+.switch{background:#6ec07a}.toggle input:checked+.switch:after{transform:translate(10px)}.hud-layers{display:none}#instructions{left:var(--edge-gap);bottom:var(--edge-gap);z-index:30;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius-sm);box-shadow:var(--shadow);color:var(--ink-soft);background:#fbf6ecf0;max-width:280px;font-size:11px;transition:box-shadow .18s;position:fixed;overflow:hidden}#instructions[open]{box-shadow:var(--shadow-lg)}.ins-summary{cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--cobalt);letter-spacing:.02em;align-items:center;gap:8px;padding:8px 12px 8px 8px;font-size:12px;font-weight:700;list-style:none;transition:background .15s;display:flex}.ins-summary:hover{background:#d6e6f673}.ins-summary::-webkit-details-marker{display:none}.ins-summary::marker{content:"";display:none}.ins-badge{background:var(--cobalt);width:22px;height:22px;color:var(--paper);border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;font-size:13px;font-weight:800;line-height:1;display:inline-flex;box-shadow:inset 0 -2px #0000001a}.ins-summary-label{color:var(--cobalt)}.ins-summary-hint{color:var(--muted);letter-spacing:0;text-transform:none;margin-left:4px;font-size:10px;font-weight:500}#instructions[open] .ins-summary-hint{display:none}#instructions[open] .ins-summary{border-bottom:1px solid var(--line)}.ins-grid{grid-template-columns:auto 1fr;align-items:center;gap:4px 10px;padding:9px 12px 11px;line-height:1.2;display:grid}.key{min-width:60px;color:var(--cobalt);text-align:center;white-space:nowrap;background:#d6e6f6a6;border:1px solid #1b5ba82e;border-radius:5px;padding:2px 6px;font-size:9.5px;font-weight:800}#actionbar{background:var(--paper);box-shadow:var(--shadow);z-index:11;border-radius:999px;align-items:center;gap:2px;padding:6px;display:flex;position:fixed;top:16px;left:50%;transform:translate(-50%)}.action{height:36px;color:var(--cobalt);cursor:pointer;background:0 0;border:0;border-radius:999px;align-items:center;gap:6px;padding:0 12px;font:600 13px/1 inherit;transition:background .15s,opacity .15s;display:inline-flex}.action:hover:not(:disabled){background:var(--cream-2)}.action:active:not(:disabled){transform:scale(.97)}.action:disabled{opacity:.35;cursor:default}.action:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}.tool:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}.tab:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}.swatch:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}.template:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}.action svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.action--exit{color:var(--ink-soft)}.action-sep{background:var(--line);width:1px;height:22px;margin:0 4px}#new-island{background:0 0;border:0;width:100%;max-width:min(520px,100vw - 24px);padding:0}#new-island::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#2b2a2652}.dialog-card{background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);color:var(--ink);padding:22px}.dialog-card h2{color:var(--cobalt);margin:0 0 6px;font-size:19px}.dialog-card p{color:var(--ink-soft);margin:0 0 16px;font-size:13px;line-height:1.5}.template-list{gap:10px;display:grid}.template{text-align:left;border:1px solid var(--line);border-radius:var(--radius);min-height:68px;color:var(--ink);cursor:pointer;background:#fff;align-content:center;gap:3px;padding:14px 16px 14px 76px;font-family:inherit;transition:border-color .15s,transform .15s,box-shadow .15s;display:grid;position:relative}.template:hover{border-color:var(--cobalt-2);box-shadow:var(--shadow);transform:translateY(-1px)}.template strong{font-size:15px}.template-thumb{max-width:48px;max-height:48px;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.template span{color:var(--muted);font-size:12px}.dialog-actions{justify-content:flex-end;margin-top:16px;display:flex}.dialog-cancel{color:var(--ink-soft);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:10px 14px;font:600 13px inherit}.dialog-cancel:hover{background:var(--cream-2)}#toast{background:var(--ink);color:var(--paper);opacity:0;pointer-events:none;z-index:100;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:500;transition:opacity .2s,transform .2s;position:fixed;top:74px;left:50%;transform:translate(-50%,-20px)}#toast.show{opacity:1;transform:translate(-50%)}@media (max-width:1180px){.action span{display:none}.action{padding:0 10px}}@media (max-width:900px){#palette{width:calc(100vw - 32px);top:auto;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));height:180px}#palette-grid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr))}#hud{display:none}#instructions{bottom:calc(180px + 24px + env(safe-area-inset-bottom))}#instructions[open] .ins-grid{max-height:50vh;overflow-y:auto}}@media (max-width:640px){:root{--edge-gap:10px;--title-card-height:52px}#title-card{top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));border-radius:var(--radius-sm);gap:8px;padding:8px 12px 8px 8px}.title-logo{border-radius:8px;width:36px;height:36px}.title-logo:before{width:22px;height:12px;top:6px}.title-logo:after{width:3px;height:12px;top:18px}.title-text h1{font-size:15px;line-height:1.1}.title-text p{display:none}#toolbar{top:calc(10px + env(safe-area-inset-top) + var(--title-card-height) + 8px);left:calc(8px + env(safe-area-inset-left));border-radius:var(--radius-sm);gap:4px;padding:6px 5px}.tool{gap:2px;width:50px;padding:7px 4px}.tool .ti{width:32px;height:32px}.tool span.label{display:none}#palette{left:calc(8px + env(safe-area-inset-left));right:calc(8px + env(safe-area-inset-right));width:auto;bottom:calc(8px + env(safe-area-inset-bottom));height:200px;padding:4px 6px 6px}#palette-tabs{gap:4px;padding:2px 2px 4px}.tab{min-height:32px;padding:6px 10px;font-size:11px}#palette-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}.swatch{min-height:78px;padding:6px 4px 4px}.swatch canvas,.swatch img{width:44px;height:44px}.swatch .name{height:22px;font-size:10px}#instructions{left:calc(8px + env(safe-area-inset-left));bottom:calc(200px + 16px + env(safe-area-inset-bottom));max-width:calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))}.ins-summary{min-height:44px;padding:10px 14px 10px 10px}.ins-badge{width:26px;height:26px;font-size:14px}.ins-summary-hint{display:none}#instructions[open] .ins-grid{-webkit-overflow-scrolling:touch;max-height:40vh;overflow-y:auto}#actionbar{top:calc(10px + env(safe-area-inset-top));left:auto;right:calc(10px + env(safe-area-inset-right));gap:0;padding:4px;transform:none}.action{height:40px;padding:0 9px}.action-sep{margin:0 2px}#toast{top:calc(env(safe-area-inset-top) + 66px);padding:7px 14px;font-size:12px}}@media (max-width:380px){.tool{width:46px;padding:6px 3px}.tool .ti{width:28px;height:28px}#palette{height:184px}#palette-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}.swatch canvas,.swatch img{width:38px;height:38px}#instructions{bottom:calc(184px + 14px + env(safe-area-inset-bottom))}}@media (max-height:480px) and (orientation:landscape){#title-card{padding:6px 10px 6px 6px}.title-logo{width:32px;height:32px}.title-text h1{font-size:14px}.title-text p{display:none}#toolbar{top:calc(8px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));gap:3px;padding:5px 4px}.tool{width:44px;padding:6px 3px}.tool .ti{width:26px;height:26px}.tool span.label{display:none}#palette{top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));bottom:calc(8px + env(safe-area-inset-bottom));width:200px;height:auto;left:auto}#palette-grid{grid-template-columns:repeat(2,1fr)}#actionbar{top:calc(8px + env(safe-area-inset-top));left:50%;right:auto;transform:translate(-50%)}#instructions{bottom:calc(8px + env(safe-area-inset-bottom));left:calc(8px + env(safe-area-inset-left))}}@media (pointer:coarse){.ins-grid--mouse{display:none}.ins-grid--touch{display:grid}#game-canvas{cursor:default}}