:root{--sky:#8fd4f5;--sky2:#c8ecff;--wood:#c48a48;--wood-dk:#8a5424;--ink:#2a1c10;--gold:#f4d15a;--ok:#3dbd5a;--bad:#e23b3b;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--font:"Noto Sans Thai", system-ui, sans-serif}*{box-sizing:border-box}html,body{background:var(--sky);height:100%;font-family:var(--font);color:var(--ink);-webkit-tap-highlight-color:transparent;touch-action:manipulation;margin:0;overflow:hidden}canvas{z-index:0;image-rendering:pixelated;display:block;position:fixed;inset:0}#boot[hidden]{display:none!important}#boot{z-index:40;padding:calc(8px + var(--safe-t)) calc(12px + var(--safe-r)) calc(8px + var(--safe-b)) calc(12px + var(--safe-l));background:radial-gradient(at 50% 0,#fff8 0 30%,#0000 55%),linear-gradient(#7ec8ea 0%,#b7e7fb 55%,#8fd4f5 100%);flex-direction:column;justify-content:flex-start;align-items:center;display:flex;position:fixed;inset:0;overflow-y:auto}.boot-header{text-align:center;margin-bottom:6px}.boot-header h1{color:#fff;text-shadow:0 2px 4px #1c2834,0 0 12px #3884ff;letter-spacing:.5px;margin:0;font-size:20px;font-weight:900}.boot-header .subtitle{color:#1c344d;margin:2px 0 0;font-size:12px;font-weight:700}.boot-stage{flex:1;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1.7fr) minmax(220px,.9fr);gap:10px;width:100%;max-width:960px;min-height:0;display:grid}.monggi-col{flex-direction:row;grid-area:1/1;align-items:center;gap:10px;display:flex}.monggi-col img{width:min(14vw,84px);height:auto;image-rendering:pixelated;filter:drop-shadow(0 8px #0002)}.monggi-col p{background:#fffde8;border:3px solid #5a3a18;border-radius:14px;max-width:320px;margin:0;padding:6px 10px;font-size:12px;line-height:1.35;box-shadow:0 4px 6px #0002}.wood{grid-area:2/1}.preview{grid-area:1/2/span 2}.wood{background:repeating-linear-gradient(90deg,#d9a05a 0 18px,#c4863e 18px 20px),linear-gradient(#c48a48,#a86b32);border:6px solid #6b3d16;border-radius:16px;grid-template-rows:auto 1fr;min-height:0;padding:10px;display:grid;box-shadow:inset 0 0 0 4px #e8c07a,0 8px #5a3010}.wood h2{text-align:center;color:#fff8e8;text-shadow:0 2px #5a3010;margin:0 0 6px;font-size:15px}.char-grid{grid-template-columns:repeat(3,1fr);gap:6px;min-height:0;display:grid;overflow:auto}.avatar{appearance:none;cursor:pointer;background:#f3e2c0;border:3px solid #5a3a18;border-radius:10px;flex-direction:column;align-items:center;gap:2px;min-height:80px;padding:4px;display:flex}.avatar img{object-fit:contain;width:100%;height:76px;image-rendering:pixelated}.avatar span{color:#3a2410;font-size:11px;font-weight:700}.avatar.sel{background:#fff6d8;border-color:#2f8a3a;box-shadow:0 0 0 3px #7dff9a}.preview{background:#fffde8dd;border:4px solid #5a3a18;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:12px 10px;display:flex;box-shadow:0 8px 12px #0002}.preview-card{flex-direction:column;align-items:center;gap:4px;display:flex}.preview img{object-fit:contain;width:min(28vw,140px);height:min(28vh,180px);image-rendering:pixelated;filter:drop-shadow(0 6px #0002);background:#fff8;border:3px solid #5a3a18;border-radius:12px}#preview-name-label{color:#3a2410;font-size:14px;font-weight:800}.input-group{flex-direction:column;align-items:center;gap:2px;width:100%;display:flex}.input-group label{color:#5a3a18;font-size:12px;font-weight:700}.preview input{width:90%;height:38px;font:14px var(--font);text-align:center;background:#fff;border:3px solid #5a3a18;border-radius:8px;padding:0 8px;font-weight:700}.preview .err{min-height:14px;color:var(--bad);font-size:11px;font-weight:700}.boot-btns{justify-content:center;width:100%;display:flex}.btn-start{cursor:pointer;color:#fff;text-shadow:0 2px 2px #0a541c;background:linear-gradient(#5ae87a,#2eb84e);border:3px solid #fff;border-radius:12px;width:90%;height:46px;font-size:15px;font-weight:800;box-shadow:0 4px #18682a}.btn-start:disabled{opacity:.5;filter:grayscale(.8)}@media (width<=700px){.boot-header h1{font-size:17px}.boot-stage{grid-template-rows:auto 1fr auto;grid-template-columns:1fr;gap:6px}.monggi-col{flex-direction:row;grid-area:1/1;justify-content:center;gap:6px}.monggi-col img{width:44px}.monggi-col p{max-width:280px;padding:3px 6px;font-size:10px}.wood{border-width:4px;grid-area:2/1;padding:6px}.wood h2{margin-bottom:2px;font-size:13px}.char-grid{grid-template-columns:repeat(3,1fr);gap:4px}.avatar{min-height:56px;padding:2px}.avatar img{height:48px}.avatar span{font-size:9px}.preview{flex-flow:wrap;grid-area:3/1;gap:6px;padding:6px}.preview img{width:42px;height:54px}.input-group{flex:1;width:auto;min-width:140px}.preview input{width:100%;height:32px;font-size:12px}.btn-start{width:100%;height:38px;font-size:13px}}#game[hidden]{display:none!important}#game{z-index:10;pointer-events:none;position:relative}#game>*{pointer-events:auto}#hud{z-index:21;padding:calc(6px + var(--safe-t)) calc(8px + var(--safe-r)) 6px calc(8px + var(--safe-l));background:linear-gradient(#0006,#0000);align-items:center;gap:8px;display:flex;position:fixed;top:0;left:0;right:0}.hud-chip{color:#fff;background:#1c2834ee;border:2px solid #fff4;border-radius:999px;align-items:center;gap:6px;min-height:36px;padding:6px 12px;font-size:14px;font-weight:700;display:flex}.hud-chip.coins i{background:radial-gradient(circle at 35% 30%,#ffe9a0,#c99212);border-radius:50%;width:16px;height:16px}.hud-chip.coins b{color:var(--gold);font-variant-numeric:tabular-nums}.hud-chip.xp{flex-direction:column;align-items:flex-start;gap:2px;padding:4px 10px}.hud-chip.xp i{background:#3a90ff;border-radius:99px;width:80px;height:6px;display:block}#hud-energy-pips{gap:3px;display:flex}#hud-energy-pips i{background:#314050;border-radius:2px;width:10px;height:14px}#hud-energy-pips i.on{background:#5ee0a0}.hud-mayor{color:#fffde8;text-shadow:0 1px 2px #000;cursor:pointer;font-size:13px;font:inherit;background:#1c2834ee;border:2px solid #fff4;border-radius:999px;align-items:center;gap:6px;margin-left:auto;padding:4px 12px 4px 4px;display:flex}.hud-mayor img{object-fit:contain;width:28px;height:28px;image-rendering:pixelated}.hud-fs{color:#fff;cursor:pointer;background:#1c2834ee;border:2px solid #fff6;border-radius:10px;min-width:40px;min-height:40px;font-size:18px}#quest,#detail{z-index:22;background:#fffde8ee;border:3px solid #5a3a18;border-radius:12px;max-width:min(360px,46vw);padding:8px 10px;font-size:13px;line-height:1.35;position:fixed}#toast{z-index:30;top:calc(64px + var(--safe-t));color:#fff9e6;pointer-events:none;background:#22160cf2;border:2px solid #e0be6c;border-radius:20px;padding:6px 14px;font-size:12px;font-weight:700;transition:opacity .2s;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #0000004d}#toast[hidden]{display:none!important}#quest{top:calc(52px + var(--safe-t));left:calc(8px + var(--safe-l));align-items:flex-start;gap:8px;display:flex}#quest[hidden],#detail[hidden]{display:none!important}#quest .monggi-face{object-fit:contain;width:48px;height:48px;image-rendering:pixelated}#detail{right:calc(8px + var(--safe-r));top:calc(52px + var(--safe-t))}#detail h3{margin:0 0 4px;font-size:15px}#detail dl{grid-template-columns:auto 1fr;gap:2px 8px;margin:0;font-size:12px;display:grid}#detail dt{color:#6a4a28}#detail dd{margin:0}#detail-hint{color:#2f8a3a;margin:6px 0 0;font-size:12px}#dock{z-index:21;padding:8px calc(8px + var(--safe-r)) calc(8px + var(--safe-b)) calc(8px + var(--safe-l));background:linear-gradient(#0000,#0000 8%,#6b3d16 8%,#c48a48 18%,#8a5424 100%);border-top:0;align-items:stretch;gap:8px;display:flex;position:fixed;bottom:0;left:0;right:0}#shop-tabs{flex-direction:column;gap:3px;display:flex}.shop-tab{color:#fffde8;min-width:52px;min-height:26px;font:11px var(--font);cursor:pointer;background:#1c2834ee;border:2px solid #fff4;border-radius:8px;padding:2px 6px}.shop-tab.sel{background:#2f8a3a;border-color:#7dff9a}#build-scroller{flex:1;gap:8px;display:flex;overflow-x:auto}.bldg{cursor:pointer;min-width:168px;min-height:78px;color:var(--ink);text-align:left;background:#fff6d8;border:3px solid #5a3a18;border-radius:10px;align-items:center;gap:8px;padding:6px 8px;display:flex}.bldg-art{object-fit:contain;width:56px;height:56px;image-rendering:pixelated;flex:none}.bldg h4{margin:0 0 2px;font-size:13px}.bldg p{margin:0;font-size:11px}.bldg.sel{background:#fff6d8;outline:3px solid #2f8a3a}.bldg.lock{opacity:.45}.dock-collect{background:var(--gold);cursor:pointer;border:3px solid #5a3a18;border-radius:10px;min-width:72px;padding:8px 10px;font-weight:700}.dock-zoom{flex-direction:column;gap:4px;display:flex}.dock-zoom button{color:#fff;cursor:pointer;background:#1c2834ee;border:2px solid #fff6;border-radius:10px;width:40px;height:40px;font-size:18px}