:root{--ink:#204969;--blue:#097ce1}*{box-sizing:border-box}body{margin:0;background:#f3f9fb;color:var(--ink);font-family:'Noto Sans Thai',system-ui,sans-serif}a{color:inherit;text-decoration:none}header,main,footer{max-width:1480px;margin:auto;padding:22px 4%}header{display:flex;justify-content:space-between;align-items:center;gap:15px}.brand{display:flex;align-items:center;gap:9px;font-size:22px;font-weight:800}.brand small{display:block;font-size:8px;letter-spacing:2px;color:#779cb2}.account{display:flex;align-items:center;gap:12px;font-size:11px}button,input,select{font:inherit}button{cursor:pointer;background:white;color:var(--ink);border:1px solid #cddfea;border-radius:10px;padding:9px 14px;font-size:12px}button:hover{background:#e6f3fc}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.viewport:focus-visible{outline:3px solid #e6b548;outline-offset:3px}button.primary{background:var(--blue);color:#fff;border-color:var(--blue)}.danger{color:#ad3948;background:#fff4f4}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow{font-size:10px;letter-spacing:2px;color:#6898b5;font-weight:700}h1{font-size:34px;letter-spacing:-1px;margin:12px 0}p{font-size:13px;line-height:1.9;color:#708ca0}.auth{margin-top:25px;padding:30px;background:white;border:1px solid #dce8ee;border-radius:20px;display:grid;grid-template-columns:1fr 1fr;gap:35px}.auth[hidden],[hidden]{display:none!important}h2{font-size:23px;margin:10px 0}label{display:grid;gap:6px;font-size:12px;font-weight:600;margin-bottom:13px}label small{font-size:10px;font-weight:400;color:#819bad}input,select{width:100%;min-width:0;border:1px solid #d3e1ea;border-radius:9px;padding:11px;background:#fff;color:var(--ink);font-size:13px}input[type=color]{height:45px;padding:5px}.buttons{display:flex;gap:10px;flex-wrap:wrap}.status{min-height:24px;padding:8px 0;margin:4px 0}.status.error{color:#b24947}.toolbar{display:flex;align-items:center;gap:20px;background:white;border:1px solid #dce8ee;border-radius:18px;padding:18px 24px;margin-bottom:18px}.toolbar h2{margin:4px 0;font-size:25px;overflow-wrap:anywhere}.toolbar>button{margin-left:auto}.stats{display:grid;gap:5px;font-size:11px;color:#8096a5}.stats span:first-child{font-size:16px;color:var(--ink);font-weight:600}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px}.world-panel,aside{border:1px solid #dce8ee;border-radius:20px;background:white;overflow:hidden}.world-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:15px;font-size:10px;color:#7894a7}.world-top button{padding:5px 10px;font-size:11px}.viewport{height:610px;overflow:auto;background:radial-gradient(ellipse at 50% 40%,#f3fbff,#dceff6);position:relative}.scene{position:relative;width:820px;height:600px;margin:auto;transform-origin:50% 45%;transition:transform .2s}.island{position:absolute;inset:0}.tile{position:absolute;width:100px;height:90px;border:0;border-radius:0;padding:0;background:none!important;transform:translate(-50%,-50%);isolation:isolate}.ground{position:absolute;width:100px;height:54px;top:30px;left:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:#c9e2b1;z-index:-2;filter:brightness(1)}.ground-side{position:absolute;left:0;top:50px;width:100px;height:57px;background:linear-gradient(90deg,#b4cbb1 50%,#d4e2c9 50%);clip-path:polygon(0 0,50% 45%,100% 0,100% 48%,50% 95%,0 48%);z-index:-3}.tile:nth-child(3n) .ground{background:#d4e9bd}.tile.road .ground{background:#f0e8d2}.tile.road{pointer-events:none}.road-mark{position:absolute;left:45px;top:48px;color:#e0c989;font-size:10px}.plot-plus{position:absolute;left:37px;top:42px;width:26px;height:26px;border:1px dashed #8caf8d;color:#769b77;background:#f7fff3b0;border-radius:50%;display:grid;place-items:center;font-size:18px}.tile:hover .ground,.tile:focus-visible .ground{background:#a6dcff}.tile.selected .ground{background:#8acfff}.building{position:absolute;left:16px;top:-13px;width:68px;height:88px;filter:drop-shadow(0 10px 5px #30566c22);pointer-events:none}.building .front{position:absolute;left:0;top:28px;width:34px;height:52px;background:var(--building);transform:skewY(28deg);border-radius:0 0 0 3px;filter:brightness(.88)}.building .side{position:absolute;left:34px;top:28px;width:34px;height:52px;background:var(--building);transform:skewY(-28deg);border-radius:0 0 3px;filter:brightness(1.1)}.building .roof{position:absolute;left:0;top:0;width:68px;height:48px;clip-path:polygon(50% 0,100% 38%,100% 62%,50% 100%,0 62%,0 38%);background:#f6f7ed;box-shadow:inset 0 -5px #d8e4dc}.building .front:before{content:'';position:absolute;left:7px;top:9px;width:20px;height:16px;background:#d6f5f5;border:2px solid #ffffff70;box-shadow:0 21px 0 -3px #bedce6}.building .side:before{content:'';position:absolute;left:6px;top:9px;width:7px;height:13px;background:#c9f2f4;box-shadow:13px 0 #c9f2f4,0 21px #b9e2eb,13px 21px #b9e2eb}.building .symbol{position:absolute;top:5px;left:20px;display:grid;place-items:center;width:29px;height:26px;background:var(--building);border:3px solid #fff;border-radius:7px;color:#fff;font-size:17px;box-shadow:0 3px 8px #346c7e22;z-index:2}.building.shop .front{background:repeating-linear-gradient(90deg,#fff6d8 0 7px,var(--building) 7px 14px)}.building.library{height:100px;top:-24px}.building.library .front,.building.library .side{height:64px}.building.lab .roof:after{content:'◉';position:absolute;top:4px;left:25px;color:#6bc9da;font-size:25px}.building.studio .roof{background:#f4e1f4}.building-label{position:absolute;top:75px;left:50%;transform:translateX(-50%);max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid #ffffffb0;background:#fffffff0;padding:3px 8px;border-radius:15px;color:#456d7c;font-size:8px;box-shadow:0 3px 8px #3b657516;pointer-events:none;z-index:8}.tree{position:absolute;left:55px;top:22px;font-size:26px;pointer-events:none;color:#659c76;text-shadow:2px 3px #437856}.ocean-ring{position:absolute;left:120px;top:100px;width:580px;height:420px;border:1px solid #b8dde6;border-radius:50%;transform:scaleY(.7)}.cloud{position:absolute;width:120px;height:34px;background:#fff;border-radius:50px;filter:drop-shadow(0 8px 8px #5a9ab315);z-index:0;animation:drift 12s ease-in-out infinite}.cloud:before,.cloud:after{content:'';position:absolute;background:white;border-radius:50%;width:50px;height:50px;bottom:10px;left:15px}.cloud:after{left:55px;width:40px;height:40px}.cloud.one{left:35px;top:110px}.cloud.two{right:10px;bottom:70px;animation-delay:-5s}.paused .cloud{animation-play-state:paused}@keyframes drift{50%{transform:translateX(20px)}}aside{padding:25px}aside p{font-size:12px}.note{border-top:1px solid #dce8ee;padding-top:20px;font-size:11px}.big-icon{font-size:50px;color:#86b1cc}aside form{display:grid;gap:5px}aside a{font-size:13px;text-align:center;padding:10px}.legend{display:flex;justify-content:space-between;padding:15px;font-size:9px;color:#7996aa;gap:10px}footer{display:flex;justify-content:space-between;font-size:11px;color:#8a9fac}dialog{border:1px solid #cfdfeb;border-radius:18px;padding:28px;max-width:440px;width:90%;color:var(--ink)}dialog::backdrop{background:#173e6b55}@media(max-width:1000px){.game-layout{grid-template-columns:1fr 270px}.viewport{height:560px}.scene{margin:0}.world-top{flex-wrap:wrap}}@media(max-width:760px){.intro{display:block}h1{font-size:27px}.intro>button{margin-top:10px}.auth{grid-template-columns:1fr;padding:22px;gap:15px}.game-layout{grid-template-columns:1fr}.toolbar{gap:12px;padding:15px;flex-wrap:wrap}.toolbar h2{font-size:21px}.toolbar>button{margin-left:0}.stats{margin-left:auto}.viewport{height:500px}.world-top>span{font-size:9px}.legend{flex-wrap:wrap}.brand{font-size:17px}.brand small{font-size:7px}.account{font-size:9px;gap:5px}.account button{font-size:10px;padding:7px}footer{display:block}footer span{display:block;margin-top:8px}}@media(prefers-reduced-motion:reduce){.cloud{animation:none}.scene{transition:none}}
input[type=checkbox]{width:18px;height:18px;padding:0;accent-color:#097ce1;justify-self:start}#onboarding-status.auth{display:block}