
:root{
  --bg:#070a12;--panel:rgba(9,14,25,.86);--panel2:#11192b;--line:rgba(255,255,255,.12);
  --text:#f6f8ff;--muted:#9da9c2;--accent:#7367ff;--accent2:#31b7ff;--danger:#e65762;--ok:#58d39b;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;touch-action:none}
button,input,select{font:inherit}button{cursor:pointer}canvas{display:block}.hidden{display:none!important}
.screen{position:fixed;inset:0;display:none}.screen.active{display:block}
.glass{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(18px);box-shadow:0 18px 60px rgba(0,0,0,.34)}
.glass-soft{background:rgba(255,255,255,.04);border:1px solid var(--line)}
.btn,.icon-btn,.hud-button,.round-btn,.admin-open,.file-button{
  border:1px solid var(--line);background:#151d30;color:var(--text);border-radius:12px;font-weight:800;letter-spacing:.03em
}
.btn{padding:12px 15px}.btn.primary{border:0;background:linear-gradient(135deg,var(--accent),#4c78ff)}.btn.wide{width:100%}.btn.subtle{background:transparent;color:var(--muted)}
.icon-btn{width:38px;height:38px;padding:0}.danger{background:#642c36!important}.danger-soft{background:#392027!important;color:#ff9da5!important}
.logo-mark{font-size:clamp(42px,8vw,92px);font-weight:950;letter-spacing:.28em;line-height:1}.logo-mark.compact{font-size:31px}
.eyebrow{color:#c0caff;font-size:11px;letter-spacing:.35em;font-weight:800}

/* loading */
.loading-screen{overflow:hidden;background:#070a12}.loading-art{position:absolute;inset:-4%;background:
  radial-gradient(circle at 72% 26%,rgba(66,104,190,.8) 0,transparent 23%),
  radial-gradient(circle at 82% 78%,rgba(105,69,180,.35) 0,transparent 24%),
  linear-gradient(135deg,#07101d,#121c32 52%,#22183e);transform:scale(1.06)}
.loading-art:before,.loading-art:after{content:"";position:absolute;bottom:0;background:linear-gradient(#1e2d4d,#080b12);clip-path:polygon(5% 100%,5% 38%,11% 38%,11% 17%,17% 17%,17% 55%,23% 55%,23% 26%,30% 26%,30% 62%,39% 62%,39% 12%,46% 12%,46% 42%,53% 42%,53% 24%,61% 24%,61% 58%,70% 58%,70% 34%,78% 34%,78% 14%,84% 14%,84% 48%,91% 48%,91% 27%,97% 27%,97% 100%);opacity:.7}
.loading-art:before{left:30%;right:-5%;height:63%}.loading-art:after{left:46%;right:-12%;height:43%;filter:blur(3px);opacity:.28}
.loading-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.15) 60%),linear-gradient(0deg,rgba(0,0,0,.78),transparent 55%)}
.loading-copy{position:absolute;left:7vw;bottom:9vh;width:min(560px,86vw)}.loading-copy p{color:#c8d0e6;margin:28px 0 12px}
.progress-track{height:7px;border:1px solid #ffffff4a;border-radius:20px;overflow:hidden}.progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:.2s}
.loading-meta{display:flex;justify-content:space-between;color:#a6b2d0;font-size:11px;margin-top:8px}

/* login */
.auth-screen{background:#080c15}.auth-bg{position:absolute;inset:0;background:radial-gradient(circle at 75% 22%,#2a3b70,transparent 33%),linear-gradient(145deg,#080b13,#11182a 65%,#251c3e)}
.auth-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(430px,92vw);padding:30px;border-radius:24px}.auth-card h1{margin:24px 0 6px}.auth-card>p{color:var(--muted);margin:0 0 20px}
.auth-card label{display:block;color:#bcc6dc;font-size:12px;font-weight:700;margin-top:11px}.auth-card input{width:100%;margin-top:6px;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:#0d1423;color:white;outline:none}
.auth-card .primary{margin-top:16px}.error{min-height:20px;color:#ff8a94;font-size:12px;margin-top:8px}.prototype-note{margin-top:14px;color:var(--muted);font-size:11px}.prototype-note summary{cursor:pointer}

/* lobby */
.lobby-screen{background:#0d1421}.lobby-screen>canvas{position:absolute;inset:0;width:100%;height:100%}.lobby-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.7),transparent 45%),linear-gradient(0deg,rgba(0,0,0,.45),transparent 45%)}
.lobby-header{position:absolute;top:20px;left:24px;right:24px;display:flex;justify-content:space-between}.lobby-brand b{font-size:27px;letter-spacing:.2em}.lobby-brand span{display:block;margin-top:3px;color:#bcc7e7;font-size:10px;letter-spacing:.2em}
.lobby-account{padding:9px 13px;border-radius:16px;text-align:right}.lobby-account span{display:block;color:#aebad7;font-size:9px;letter-spacing:.12em}.lobby-account b{font-size:14px}
.lobby-menu{position:absolute;left:24px;top:128px;width:260px;padding:12px;border-radius:20px;display:grid;gap:8px}.lobby-menu .btn{text-align:left}
.district-preview{position:absolute;right:24px;bottom:24px;width:min(385px,44vw);padding:20px;border-radius:20px}.district-preview>small{color:#8797bd;letter-spacing:.16em}.district-preview h2{margin:6px 0}.district-preview p{color:#b5c0d9;margin:0 0 12px}.district-chips{display:flex;gap:6px;flex-wrap:wrap}.district-chips span{font-size:10px;border:1px solid var(--line);border-radius:20px;padding:6px 9px;background:#ffffff08}
.admin-only{display:none!important}body.admin-session .admin-only{display:block!important}

/* modal */
.modal-screen{z-index:30;background:rgba(2,4,9,.77)}.modal-shell{position:absolute;inset:5vh 5vw;border-radius:24px;overflow:hidden}.modal-shell>header{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px}.modal-shell>header b{font-size:17px}.modal-shell>header small{display:block;color:var(--muted);margin-top:2px}.modal-body{height:calc(100% - 72px);padding:22px;overflow:auto}
.panel-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}.panel-tabs button{border:1px solid var(--line);background:#11192a;color:white;border-radius:12px;padding:9px 12px}.panel-tabs button.active{background:#5e60e8}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:13px}.ui-card{background:#0c1322;border:1px solid var(--line);border-radius:16px;padding:15px}.ui-card b{display:block}.ui-card small{display:block;color:var(--muted);margin:4px 0 11px}.ui-card button{width:100%;border:1px solid var(--line);background:#182238;color:white;border-radius:10px;padding:9px}
.settings-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);gap:16px}.settings-row select{background:#101827;color:white;border:1px solid var(--line);padding:9px;border-radius:10px}
.wallet-big{font-size:34px;margin-bottom:18px}.info-banner{padding:15px;border:1px solid #5365a366;background:#31406b33;border-radius:14px;margin-bottom:16px;color:#c7d2f3}

/* game */
.game-screen{background:#8fb3c9}.game-screen>canvas{position:absolute;inset:0;width:100%;height:100%}#hud{position:absolute;inset:0;pointer-events:none}
.hud-status{position:absolute;top:14px;left:50%;transform:translateX(-50%);padding:8px 13px;border-radius:14px;white-space:nowrap}.hud-status span{font-size:10px;color:#98a9d0;margin-left:10px}
.hud-button{position:absolute;left:14px;top:14px;padding:9px 12px;pointer-events:auto}.hud-button.travel{top:61px}
.minimap{position:absolute;top:14px;right:14px;padding:5px;border-radius:15px}.minimap canvas{width:132px;height:132px;border-radius:11px}
.joystick{position:absolute;left:25px;bottom:max(24px,env(safe-area-inset-bottom));width:124px;height:124px;border-radius:50%;pointer-events:auto;touch-action:none}.joy-ring{position:absolute;inset:4px;border-radius:50%;background:#0d152755;border:2px solid #ffffff30}.joy-knob{position:absolute;width:48px;height:48px;left:38px;top:38px;border-radius:50%;background:#6d82d8bb;border:2px solid #ffffff55;box-shadow:0 5px 18px #0007}
.play-actions{position:absolute;right:22px;bottom:max(24px,env(safe-area-inset-bottom));display:grid;grid-template-columns:72px 72px;gap:9px;pointer-events:auto}.round-btn{width:72px;height:72px;padding:0;border-radius:50%;background:#11192bbb}.wide-round{grid-column:span 2;width:153px;height:48px;border-radius:24px}
.interaction-prompt{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);padding:8px 12px;border-radius:12px;font-size:11px;opacity:0;transition:.15s}.interaction-prompt.show{opacity:1}
.admin-open{position:absolute;right:15px;bottom:164px;z-index:5;padding:10px 13px;pointer-events:auto}
#toast{position:absolute;left:50%;bottom:132px;transform:translateX(-50%);padding:9px 13px;border-radius:12px;background:#070a12e8;border:1px solid var(--line);font-size:11px;opacity:0;transition:.15s;z-index:20}#toast.show{opacity:1}

/* admin */
.admin-drawer{position:absolute;right:12px;top:12px;bottom:12px;width:min(355px,92vw);z-index:15;border-radius:19px;padding:12px;display:none;pointer-events:auto}.admin-drawer.open{display:block}
.admin-drawer-head{height:43px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:9px}.admin-drawer-head b{font-size:11px;letter-spacing:.1em}.admin-drawer-head small{display:block;color:var(--muted);font-size:9px;margin-top:2px}
.admin-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:10px 0}.admin-tabs button{border:1px solid var(--line);border-radius:9px;background:#11192a;color:white;padding:8px 5px;font-size:9px;font-weight:800}.admin-tabs button.active{background:#4546a9}
.admin-tab{display:none;height:calc(100% - 92px);overflow:auto}.admin-tab.active{display:block}.admin-tab input,.admin-tab select{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:#0d1423;color:white;margin-bottom:7px;outline:none}
.filter-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}.admin-note{color:var(--muted);font-size:10px;line-height:1.45}.asset-list{display:grid;gap:5px;max-height:calc(100vh - 290px);overflow:auto;padding-right:2px}.asset-item{border:1px solid var(--line);background:#0d1423;color:white;border-radius:10px;padding:9px 10px;text-align:left}.asset-item b{display:block;font-size:10px}.asset-item small{display:block;color:#8492af;font-size:9px;margin-top:2px}.asset-item.active{outline:2px solid #6875ff}.placement-note{font-size:9px;color:#8190ad;margin-top:8px}
.empty-state{padding:28px 12px;text-align:center;color:var(--muted)}.object-title{padding:10px;border:1px solid var(--line);border-radius:12px;background:#0d1422;margin-bottom:8px}.object-title small{display:block;color:var(--muted);margin-top:4px;font-size:9px}
.transform-modes,.quick-row,.object-actions{display:grid;gap:5px;margin:7px 0}.transform-modes{grid-template-columns:repeat(3,1fr)}.quick-row{grid-template-columns:repeat(4,1fr)}.quick-row:nth-of-type(3){grid-template-columns:repeat(2,1fr)}.object-actions{grid-template-columns:1fr 1fr}
.transform-modes button,.quick-row button,.object-actions button,.world-actions button,.file-button{border:1px solid var(--line);background:#131c2e;color:white;border-radius:9px;padding:8px 4px;font-size:9px;font-weight:800}.transform-modes button.active{background:#4a51bc}
.nudge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:8px 0}.nudge-grid button{height:39px;border:1px solid var(--line);background:#141d30;color:white;border-radius:9px}.nudge-grid [data-nudge="z+"]{grid-column:2}.nudge-grid [data-nudge="x-"]{grid-column:1;grid-row:2}.nudge-grid [data-nudge="x+"]{grid-column:3;grid-row:2}.nudge-grid [data-nudge="z-"]{grid-column:2;grid-row:3}
.toggle{display:flex;gap:8px;align-items:center;font-size:10px;color:#b1bdd5;margin:8px 0}.toggle input{width:auto;margin:0}.world-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.file-button{text-align:center;display:flex;align-items:center;justify-content:center}.file-button input{display:none}.world-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:10px;border-radius:12px;margin:10px 0}.world-stats div{text-align:center}.world-stats small{display:block;color:var(--muted);font-size:8px}.world-stats b{font-size:13px}

/* responsive */
@media(max-width:760px){
  .district-preview{display:none}.lobby-menu{top:auto;left:13px;bottom:13px;width:215px}.lobby-header{left:14px;right:14px;top:14px}.lobby-brand b{font-size:22px}
  .modal-shell{inset:2vh 2vw}.modal-body{padding:14px}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .minimap{top:62px}.minimap canvas{width:104px;height:104px}.hud-status{top:11px}.admin-open{bottom:151px}.joystick{width:108px;height:108px}.joy-knob{width:42px;height:42px;left:33px;top:33px}
  .play-actions{grid-template-columns:65px 65px}.round-btn{width:65px;height:65px}.wide-round{width:139px;height:43px}.interaction-prompt{bottom:145px}
}
@media(max-width:420px){.lobby-account{display:none}.logo-mark{letter-spacing:.18em}.admin-drawer{width:calc(100vw - 12px);right:6px;top:6px;bottom:6px}.card-grid{grid-template-columns:1fr 1fr}}

#gameLoadingOverlay{position:absolute;inset:0;display:none;z-index:40;background:#070a12aa;align-items:center;justify-content:center}
#gameLoadingOverlay.show{display:flex}
#gameLoadingOverlay .glass{padding:14px 18px;border-radius:14px;font-size:12px}
