@font-face{font-family:Manrope;src:url('/worlds/fonts/manrope-normal-400.woff2') format('woff2');font-display:swap}
@font-face{font-family:Manrope;font-weight:600;src:url('/worlds/fonts/manrope-normal-600.woff2') format('woff2');font-display:swap}

/* Wallpapers. Static gradients paint once; switching crossfades opacity only. */
#doodleland{
  --ink:#24402f;--panel:#fffdf4f0;--panel-line:#ffffffb8;--line:#24402f1f;--press:#dfeccc;--press-edge:#b9cfa2;
  --meadow:radial-gradient(95% 80% at 100% 100%,#e5e8c6 0%,#e5e8c600 62%),radial-gradient(70% 60% at 0% 0%,#c8dc92 0%,#c8dc9200 70%),linear-gradient(160deg,#a8d08f 0%,#86bd8b 42%,#5fa58b 100%);
  --peach:radial-gradient(95% 80% at 100% 100%,#fff1dc 0%,#fff1dc00 62%),radial-gradient(70% 60% at 0% 0%,#ffe0a8 0%,#ffe0a800 70%),linear-gradient(160deg,#ffcfa6 0%,#f6a894 45%,#e48896 100%);
  --lagoon:radial-gradient(95% 80% at 100% 100%,#e3f6ea 0%,#e3f6ea00 62%),radial-gradient(70% 60% at 0% 0%,#bfeadb 0%,#bfeadb00 70%),linear-gradient(160deg,#9fdcd6 0%,#6cbfc9 45%,#4595b3 100%);
  --lilac:radial-gradient(95% 80% at 100% 100%,#f7eefe 0%,#f7eefe00 62%),radial-gradient(70% 60% at 0% 0%,#f1d6ee 0%,#f1d6ee00 70%),linear-gradient(160deg,#dccbf3 0%,#b6a2e1 45%,#8c86cf 100%);
  --night:radial-gradient(95% 80% at 100% 100%,#3b4d8c 0%,#3b4d8c00 62%),radial-gradient(70% 60% at 0% 0%,#34457a 0%,#34457a00 70%),linear-gradient(160deg,#27366a 0%,#1c2452 45%,#111838 100%);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#86bd8b;color:var(--ink);font-family:Manrope,"Avenir Next",Arial,sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
button:disabled{opacity:.3;cursor:default}
button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
#world:focus-visible{outline:none}
[hidden]{display:none!important}

.sky,.sky i{position:fixed;inset:0}
.sky i{opacity:0;transition:opacity .9s ease}
.sky-meadow{background:var(--meadow)}.sky-peach{background:var(--peach)}.sky-lagoon{background:var(--lagoon)}.sky-lilac{background:var(--lilac)}.sky-night{background:var(--night)}
[data-theme=meadow] .sky-meadow,[data-theme=peach] .sky-peach,[data-theme=lagoon] .sky-lagoon,[data-theme=lilac] .sky-lilac,[data-theme=night] .sky-night{opacity:1}

#scene{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#world{position:fixed;inset:0;touch-action:none;cursor:pointer}
#world.panning{cursor:grabbing}
#world[data-tool=draw]{cursor:crosshair}
#world[data-tool=color]{cursor:cell}

.arca-nav{position:fixed;inset:0 0 auto;z-index:5;height:64px;padding:12px 28px;pointer-events:none}
.arca-nav a{pointer-events:auto}
[data-theme=night] .arca-nav,[data-theme=night] .hint{color:#f4f1ff}

/* Floating panels */
.atmosphere,.pill,.toolbar{background:var(--panel);border:1px solid var(--panel-line);box-shadow:0 8px 26px #1e3a2a1f}
.atmosphere{position:fixed;z-index:4;top:76px;right:24px;display:flex;align-items:center;gap:10px;padding:6px 8px 6px 10px;border-radius:999px}
.themes{display:flex;gap:6px}
.themes button{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);transition:transform .18s}
.themes button[aria-checked=true]{box-shadow:0 0 0 2px var(--ink);transform:scale(1.1)}
.themes [data-theme-choice=meadow]{background:var(--meadow)}.themes [data-theme-choice=peach]{background:var(--peach)}.themes [data-theme-choice=lagoon]{background:var(--lagoon)}.themes [data-theme-choice=lilac]{background:var(--lilac)}.themes [data-theme-choice=night]{background:var(--night)}
.icon-button{width:34px;height:34px;display:grid;place-items:center;border-radius:50%}
@media(hover:hover){.icon-button:hover,.pill:not(.palette) button:not(:disabled):hover{background:var(--press)}.tool:hover{background:#f1f5e6}}
.icon-button svg,.pill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#sound[aria-pressed=false] .sound-waves,#sound[aria-pressed=true] .sound-off{display:none}
.pause-switch{width:46px;height:26px;background:#d8e2cb;border-radius:20px;padding:3px;flex:none}
.pause-switch .switch-thumb{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fffdf4;box-shadow:0 1px 3px #24402f33;transition:transform .18s}
.switch-thumb svg{width:12px;height:12px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.pause-switch[aria-checked=true]{background:#7fa276}
.pause-switch[aria-checked=true] .switch-thumb{transform:translateX(20px)}

.shop-entry{position:fixed;z-index:4;top:76px;left:24px;border-radius:999px}
#doodleland .shop-entry button{display:flex;align-items:center;gap:4px;width:auto;height:36px;padding:0 14px;font-size:12px;font-weight:600;white-space:nowrap}
@media(hover:hover){#doodleland .shop-entry button:hover{background:var(--press)}}
#doodleland .shop-entry button+button{border-left:1px solid var(--line)}
.commerce-status{position:fixed;z-index:6;left:50%;top:128px;transform:translateX(-50%);max-width:90%;margin:0;padding:10px 14px;border-radius:12px;background:#fffdf4;font-size:12px}
.commerce-status:empty{display:none}
.dock{position:fixed;z-index:4;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:440px;max-width:calc(100% - 20px)}
.secondary{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;margin-bottom:8px}
.pill{display:flex;border-radius:999px;overflow:hidden}
.pill:not(.palette) button{display:grid;place-items:center;width:38px;height:36px}
.pill:not(.palette) button+button{border-left:1px solid var(--line)}
.palette{gap:3px;padding:4px 6px;overflow:visible}
.palette button{width:24px;height:24px;border:2px solid #fff;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px var(--line);transition:transform .15s}
.palette button[aria-checked=true]{transform:translateY(-3px) scale(1.12);box-shadow:0 0 0 2px var(--ink)}
.palette .eraser{background:linear-gradient(135deg,#fff 45%,#e16a6a 45% 55%,#fff 55%)}

.toolbar{display:flex;gap:4px;padding:6px;border-radius:20px}
.tool{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 6px;border-radius:14px;transition:transform .18s,background .18s}
.tool svg{width:40px;height:34px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tool .fill{stroke:none;fill:#ffe08a}.tool .crayon{fill:#f7a8c4}.tool .paper{fill:#9fd4f5}.tool .party{fill:#c9b3f0}
.tool span{font-size:11px;font-weight:600;letter-spacing:.01em}
.tool[aria-pressed=true]{background:var(--press);transform:translateY(-3px);box-shadow:0 3px 0 var(--press-edge)}
.tool.surprise:active svg{transform:rotate(-12deg) scale(1.08)}
.sep{width:1px;background:var(--line);margin:8px 2px}

.hint{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:999px;background:#fffdf4cc;font-size:12px;white-space:nowrap;pointer-events:none;transition:opacity .5s,transform .5s}
[data-theme=night] .hint{background:#1c245099}
.hint.gone{opacity:0;transform:translate(-50%,8px)}
.toast{position:fixed;z-index:6;left:50%;top:128px;transform:translateX(-50%);max-width:min(420px,90vw);margin:0;padding:10px 14px;border-radius:12px;background:var(--ink);color:#fffdf4;font-size:12px;opacity:0;pointer-events:none;transition:opacity .25s;text-align:center}
.toast.show{opacity:1}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.startup-message{position:fixed;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:24px;background:#fffdf4;width:min(340px,90vw);border-radius:14px;box-shadow:0 15px 70px #1e3a2a33}
.startup-message h2{margin:0 0 8px;font-size:20px;font-weight:400}.startup-message p{margin:0;font-size:12px}

@media(max-width:759px){
  .arca-nav{height:56px;padding:10px 16px}
  .atmosphere{top:62px;right:12px;gap:6px;padding:4px 6px 4px 8px}
  .shop-entry{top:106px;right:12px;left:auto}
  #doodleland .shop-entry button{height:32px;padding:0 11px;font-size:11px}
  .themes{gap:4px}.themes button{width:20px;height:20px}
  .dock{bottom:max(12px,env(safe-area-inset-bottom))}
  .tool{padding:7px 0 5px}.tool svg{width:34px;height:29px}.tool span{font-size:10px}
  .secondary{flex-wrap:wrap}
  .palette{order:-1;flex-basis:100%;justify-content:space-between;border-radius:18px}
  .palette button{width:26px;height:26px}
}
@media(max-width:380px){.palette button{width:24px;height:24px}.pill:not(.palette) button{width:34px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}