:root{color-scheme:dark;--bg:#090f15;--ink:#c5d0d6;--muted:#687d8e;--accent:#d7e9ad;--line:#26323c}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:13px;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:0;border-radius:5px;padding:10px 12px;cursor:pointer;transition:background .15s,color .15s}button:hover{background:#25313b;color:#fff}button:focus-visible,a:focus-visible{outline:1px solid var(--accent);outline-offset:4px}button:disabled{opacity:.25;cursor:default}canvas{display:block;width:100vw;height:100dvh;touch-action:none;outline:none}header{position:absolute;left:30px;right:30px;top:24px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand,nav{pointer-events:auto}.brand{text-decoration:none;color:#dbe4e9;display:flex;align-items:center;gap:12px;font-size:14px;letter-spacing:2px}.brand svg{width:33px;height:33px;color:#95b4ca}.brand-light{font-weight:normal;color:#8ea1af;margin-left:6px}.edition{font:9px monospace;color:#526574;border-left:1px solid #2c3943;padding-left:18px;letter-spacing:1.4px;margin-left:10px}nav{display:flex;gap:4px;align-items:center;background:#090f15bd;border-radius:6px}i{display:block;width:1px;height:20px;background:var(--line);margin:0 8px}.outlined{border:1px solid #34414b;margin-left:10px}nav .outlined span{margin-left:15px;color:#a8be8a}#help{margin-left:10px;border:1px solid #34414b;border-radius:50%;width:25px;height:25px;padding:0;font:12px Georgia}.eyebrow{font:9px monospace;letter-spacing:1.8px;color:#7f939f;display:flex;align-items:center;gap:8px}.live-dot{display:inline-block;width:5px;height:5px;background:#b9d29d;border-radius:50%;box-shadow:0 0 8px #b9d29d22}.side-tools{position:absolute;right:30px;top:42%;display:flex;flex-direction:column;align-items:center;background:#101921dd;border:1px solid var(--line);border-radius:7px;padding:4px;width:43px}.side-tools button{font-size:20px;width:33px;padding:6px}.side-tools output{font:9px monospace;color:#94a6b2;padding:4px 0}.side-tools>div{width:20px;border-top:1px solid var(--line);margin:5px}.canvas-note{position:absolute;left:42px;bottom:135px;font:9px monospace;letter-spacing:1.2px;color:#586e7e;display:flex;flex-wrap:wrap;width:145px;gap:18px;pointer-events:none}.scale-line{width:130px;height:6px;border:1px solid #405563;border-top:0;margin-top:-10px}.bottom{position:absolute;bottom:25px;left:35px;right:35px;display:flex;align-items:center;justify-content:space-between;gap:20px;pointer-events:none}.bottom>*{pointer-events:auto}.world-info{font:10px monospace;letter-spacing:.3px;min-width:180px;color:#9cb0be}.world-info .live-dot{margin-right:8px}.divider{color:#3b4e5d;margin:0 7px}.world-info small{display:block;font-size:8px;color:#4e6576;margin:10px 0 0 14px;letter-spacing:1.2px}.dock{display:flex;align-items:center;padding:7px;background:#121c24f2;border:1px solid #2c3b47;border-radius:9px;box-shadow:0 8px 35px #0005}.modes{display:flex;gap:3px}.modes button{font-size:11px;padding:10px 12px;white-space:nowrap}.modes button span{font-size:16px;vertical-align:-1px;margin-right:5px}.modes .active{background:#283a46;color:#d6e6ef}.swatches{display:flex;gap:10px;padding:0 8px}.swatches button{background:var(--ink);width:13px;height:13px;border-radius:50%;padding:0;position:relative}.swatches .selected:after{content:'';position:absolute;inset:-4px;border:1px solid var(--ink);border-radius:50%}#variation{font-size:24px;padding:3px 9px;color:#a3b5c1}#toast{position:absolute;left:50%;bottom:105px;transform:translateX(-50%);padding:10px 18px;border:1px solid #374b57;background:#14212a;color:#bed5e4;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s;font-size:12px}#toast.show{opacity:1}dialog{width:430px;max-width:90vw;border:1px solid #344854;background:#111c25;color:var(--ink);padding:35px;border-radius:12px;box-shadow:0 20px 100px #000b}dialog::backdrop{background:#050b12bb;backdrop-filter:blur(5px)}dialog h2{font:normal 34px/1.12 Georgia;margin:20px 0}dialog p{line-height:1.7;color:#91a8b9;font-size:12px}dialog dl{display:grid;grid-template-columns:1fr 1fr;gap:13px 10px;font-size:11px;margin:25px 0}dialog dt{color:#cad8df}dialog dd{margin:0;color:#7e97a8}dialog .fine{font-size:10px}dialog .close:first-child{position:absolute;right:12px;top:10px;font-size:24px}.primary{background:#c4d8a4;color:#18251b;padding:13px 20px;margin-top:15px}.primary:hover{background:#e0eccb;color:#18251b}#new-dialog button{display:block;width:100%;margin:10px 0} @media(max-width:1100px){.edition{display:none}.bottom{gap:10px}.world-info{min-width:150px}.dock{margin-left:auto}.modes button{padding:9px}.swatches{gap:9px}}@media(max-width:700px){header{left:15px;right:15px;top:15px}.brand{font-size:10px;gap:6px;letter-spacing:1px}.brand svg{width:26px}.brand-light{display:block;margin:3px 0 0}nav button{padding:8px}nav button span,nav i,#redo{display:none}nav .outlined{font-size:10px;margin-left:2px}#help{margin-left:4px}.bottom{bottom:20px;left:12px;right:12px;flex-direction:column;gap:15px}.dock{margin:0;padding:6px}.world-info{position:absolute;bottom:65px;left:8px;font-size:9px}.world-info small{display:none}.modes button{padding:9px 7px;font-size:10px}.modes button span{display:none}.swatches{padding:0 5px;gap:10px}.dock i{margin:0 7px}.side-tools{right:15px;top:38%}.canvas-note{display:none}}

body[data-theme=haunted]{--bg:#100d17;--ink:#ddd0df;--muted:#9a86aa;--accent:#e5af77;--line:#42334e}body[data-theme=haunted] nav{background:#100d17df}body[data-theme=haunted] .brand svg,body[data-theme=haunted] .brand-light{color:#b4a1de}body[data-theme=haunted] .eyebrow{color:#a795b4}body[data-theme=haunted] .live-dot{background:#e5af77}body[data-theme=haunted] .dock,body[data-theme=haunted] .side-tools,body[data-theme=haunted] dialog{background:#1a1422f2;border-color:#493655}body[data-theme=haunted] .modes .active{background:#3d2b49;color:#edd4e8}body[data-theme=haunted] button:hover{background:#3d2b49}body[data-theme=haunted] .world-info{color:#b7a1c4}body[data-theme=haunted] .canvas-note{color:#8d739f}
@media(max-width:1100px){nav{gap:1px}nav button{padding-left:8px;padding-right:8px}nav i{margin:0 5px}}

#atmosphere{position:absolute;right:30px;top:76px;display:flex;align-items:center;gap:5px;padding:3px 6px;border:1px solid #42334e;border-radius:6px;background:#1a1422e8;color:#c5afd1;font-size:10px}#atmosphere[hidden]{display:none}#atmosphere button{padding:7px 9px}#atmosphere button[aria-pressed=true]{color:#e5af77}#volume{width:65px;accent-color:#b4a1de;height:15px}.volume-label{font-size:9px;color:#9a86aa}#lightning-flash{position:fixed;inset:0;background:#fff;mix-blend-mode:difference;pointer-events:none;opacity:0;z-index:10000;transition:opacity .7s ease-out}#lightning-flash.active{opacity:1;transition:none}@media(max-width:700px){#atmosphere{top:102px;right:15px;font-size:9px}#atmosphere button{padding:5px}#atmosphere .volume-label{display:none}#volume{width:45px}}@media(prefers-reduced-motion:reduce){#lightning-flash{display:none}}

#bats{position:fixed;inset:0;pointer-events:none}body:not([data-theme=haunted]) #bats{display:none}@media(prefers-reduced-motion:reduce){#bats{display:none}}

#smoke{position:fixed;inset:0;pointer-events:none}#lightning[hidden]{display:none}body:not([data-theme=haunted]) #atmosphere{background:#121c24e8;border-color:var(--line);color:var(--ink)}


body{overscroll-behavior:none}button{touch-action:manipulation}#world{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}dialog{max-height:85dvh;overflow-y:auto;overscroll-behavior:contain}#toast{max-width:calc(100vw - 32px);text-align:center;z-index:4}
@media(max-width:1200px){.bottom{flex-wrap:wrap;justify-content:center;gap:12px}.dock{margin:0}.world-info{min-width:0}.world-info small{display:none}}
@media(any-pointer:coarse),(max-width:1100px){
  button,#atmosphere button,#help{min-width:44px;min-height:44px}
  header{top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}
  .bottom{bottom:max(16px,env(safe-area-inset-bottom));left:16px;right:16px;flex-direction:column;gap:10px}
  .world-info{position:static;align-self:flex-start;font-size:10px}.dock{margin:0;max-width:100%;padding:6px}.modes button{min-height:44px;padding:10px 12px}
  .swatches{gap:0;padding:0}.swatches button{width:44px;height:44px;min-width:44px;background:radial-gradient(circle,var(--ink) 0 7px,transparent 8px)}.swatches .selected:after{inset:10px}
  .side-tools{width:52px;right:max(16px,env(safe-area-inset-right))}.side-tools button{width:44px}#volume{width:80px;height:44px}#atmosphere{top:76px;padding:0 5px}
}
@media(max-width:850px){.edition{display:none}.brand{font-size:10px;letter-spacing:.7px;gap:6px}.brand-light{display:block;margin:2px 0 0}.brand svg{width:26px}nav i{display:none}nav button{padding:8px}nav button span{display:none}nav .outlined{margin-left:0;font-size:10px}#help{margin-left:0}.canvas-note{display:none}}
@media(max-width:700px){
  header{left:10px;right:10px;top:max(10px,env(safe-area-inset-top))}.brand{display:none}nav{width:100%;justify-content:space-between}#redo{display:block}nav .outlined{font-size:11px}
  #atmosphere{right:10px;top:64px;font-size:10px}#volume{width:65px}#atmosphere .volume-label{display:none}.bottom{left:10px;right:10px;gap:6px}.dock{flex-wrap:wrap;justify-content:center;width:min(440px,100%);gap:2px;padding:5px}.modes{width:100%;justify-content:space-between}.modes button{flex:1;font-size:11px;padding:7px 8px}.dock>i{display:none}.swatches{flex:1;justify-content:space-around}.side-tools{right:10px;top:40%}#toast{bottom:175px}.world-info{font-size:9px}
}
@media(max-height:550px){.side-tools{top:120px}.side-tools #grid,.side-tools output{display:none}.bottom{bottom:8px}.world-info{display:none}}

@media(max-width:420px){#new{font-size:0}#new:before{content:'New';font-size:11px}nav{gap:0}}

#witch{position:fixed;left:0;top:0;width:80px;height:60px;min-width:80px;min-height:60px;padding:0;border:0;background:transparent;z-index:2;cursor:pointer;touch-action:manipulation;transition:none;-webkit-user-select:none;user-select:none}#witch[hidden]{display:none}#witch:hover{background:transparent}#witch svg{width:80px;height:60px;display:block;pointer-events:none}#witch:focus-visible{outline:1px dashed #e5af77;border-radius:50%}dialog .fine a{color:inherit}

#build-tools{display:flex;align-items:center}#build-tools[hidden],#explore-hud[hidden]{display:none}
#explore-hud{position:fixed;left:max(20px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));padding:12px;border:1px solid var(--line);background:var(--bg);border-radius:12px;z-index:3;width:180px;user-select:none;-webkit-user-select:none}
#explorer-status{font:10px/1.5 monospace;color:#e3bc87;min-height:30px;text-align:center;margin-bottom:6px}
.direction-pad{display:grid;grid-template:repeat(3,48px)/repeat(3,48px);gap:4px;justify-content:center}.direction-pad button{font-size:24px;border:1px solid var(--line);background:#ffffff08;touch-action:none;padding:0;min-width:48px;min-height:48px}.direction-pad button:active{background:#e3bc8733}.direction-pad [data-direction=up]{grid-area:1/2}.direction-pad [data-direction=left]{grid-area:2/1}#explorer-home{grid-area:2/2;color:#e3bc87}.direction-pad [data-direction=right]{grid-area:2/3}.direction-pad [data-direction=down]{grid-area:3/2}
body[data-mode=explore] .world-info,body[data-mode=explore] .canvas-note{display:none}body[data-mode=explore] .bottom{justify-content:flex-end}body[data-mode=explore] .dock{margin-left:auto;width:auto}body[data-mode=explore] .modes{width:auto}
@media(max-width:700px){#build-tools{width:100%;justify-content:center}#build-tools>i{display:none}#explore-hud{left:10px;bottom:max(16px,env(safe-area-inset-bottom));width:174px;padding:9px}body[data-mode=explore] .bottom{align-items:flex-end}body[data-mode=explore] .dock .modes button{padding:8px}body[data-mode=explore] .dock{max-width:calc(100vw - 200px)}}

.bat-target{position:fixed;left:0;top:0;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;background:transparent;z-index:1;transition:none;touch-action:manipulation}.bat-target[hidden]{display:none}.bat-target:hover,body[data-theme=haunted] .bat-target:hover{background:transparent}.bat-target:focus-visible{outline:1px dashed #e5af77;border-radius:50%}header,#atmosphere,.side-tools,.bottom{z-index:3}

#hunt-hud{position:fixed;left:max(30px,env(safe-area-inset-left));top:84px;z-index:3;display:flex;align-items:center;gap:14px;padding:6px 10px 6px 15px;border:1px solid #685343;border-radius:8px;background:#1a1422ef;color:#dcc9b0;font:12px monospace}#hunt-hud[hidden]{display:none}#hunt-hud button{min-width:44px;min-height:44px;font-size:11px}body[data-mode=hunt] .world-info,body[data-mode=hunt] .canvas-note{display:none}body[data-mode=hunt] .bottom{justify-content:flex-end}body[data-mode=hunt] .dock{margin-left:auto}body[data-mode=explore] .modes{flex-wrap:wrap}body[data-mode=explore] [data-mode=hunt]{width:100%}
@media(max-width:700px){#hunt-hud{top:118px;left:10px;font-size:11px;padding:2px 6px 2px 12px}body[data-mode=explore] .modes{width:100%}body[data-mode=explore] .modes button{flex:1;padding:6px;font-size:10px}body[data-mode=hunt] .dock{width:100%}}

@media(max-width:1100px){body[data-mode=build] .dock{flex-wrap:wrap;justify-content:center}body[data-mode=build] #build-tools{width:100%;justify-content:center}}
@media(max-width:700px){#build-tools .swatches{display:grid;grid-template-columns:repeat(4,44px);gap:0;flex:0 0 auto}}

#hunt-complete{margin:auto;width:440px;max-width:calc(100vw - 32px);text-align:center;padding:32px;border-color:#b89362;box-shadow:0 0 60px #d8a56320,0 24px 100px #000c}
#hunt-complete[open]{animation:hunt-arrival .24s ease-out}
#hunt-complete .eyebrow{justify-content:center;color:#d6b785;letter-spacing:2px}
#hunt-complete h2{font-size:clamp(32px,7vw,44px);color:#f4dfbd;margin:18px 0 10px}
#hunt-complete p{color:#c1abc9;margin:0 0 20px}
.hunt-trophy{font-size:62px;line-height:1.3;color:#edcf96;margin-bottom:14px;text-shadow:0 0 28px #e5af7740}
.hunt-trophy span{font-size:24px;vertical-align:middle;display:inline-block;margin:0 14px}
#hunt-complete button{display:block;width:100%;min-height:48px;margin-top:10px;font-size:14px}
body[data-theme=haunted] #hunt-complete .primary{background:#edcf96;color:#24182c}
body[data-theme=haunted] #hunt-complete .primary:hover{background:#ffe6b8}
@keyframes hunt-arrival{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){#hunt-complete[open]{animation:none}}
