/* ============================================================
   Huboxel — voxel / low-poly world & level designer
   Design tokens: greys + cool pastels (blue / green / pink)
   Rounded geometric type. Light + dark chrome.
   ============================================================ */

:root {
  /* pastel accents (cool) */
  --blue:  #8FB6DC;
  --blue-2:#A8C5E0;
  --green: #9FCBB1;
  --green-2:#B8D8C2;
  --pink:  #D6A9C2;
  --pink-2:#E0C2D2;
  --amber: #E2C79B;
  --accent: var(--blue);
  --accent-soft: color-mix(in oklab, var(--accent) 22%, transparent);
}

/* ---------- LIGHT (default) ---------- */
:root, [data-theme="light"] {
  --bg-0:#E6E6E9;     /* app backdrop */
  --bg-1:#EEEEF1;     /* panels */
  --bg-2:#F5F5F7;     /* raised */
  --bg-3:#FBFBFC;     /* inputs / hover */
  --line:#D7D7DD;     /* hairlines */
  --line-2:#E4E4E9;
  --ink-0:#2B2C31;    /* primary text */
  --ink-1:#5B5C64;    /* secondary */
  --ink-2:#8A8B93;    /* tertiary */
  --ink-3:#AEAFB7;    /* faint */
  --viewport-top:#D9E2EC;
  --viewport-bot:#EEF1F4;
  --shadow: 0 1px 2px rgba(30,32,40,.06), 0 8px 24px rgba(30,32,40,.08);
  --shadow-sm: 0 1px 2px rgba(30,32,40,.07);
  --hud-glass: rgba(250,250,252,.78);
  --hud-line: rgba(60,62,72,.10);
}

/* ---------- DARK ---------- */
[data-theme="dark"] {
  --bg-0:#1A1B1F;
  --bg-1:#212329;
  --bg-2:#282A31;
  --bg-3:#30323A;
  --line:#34363E;
  --line-2:#2C2E35;
  --ink-0:#ECEDF1;
  --ink-1:#B4B6BF;
  --ink-2:#83858F;
  --ink-3:#5C5E68;
  --viewport-top:#2A3340;
  --viewport-bot:#1C2128;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.35);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --hud-glass: rgba(33,35,41,.74);
  --hud-line: rgba(255,255,255,.08);
  --accent-soft: color-mix(in oklab, var(--accent) 30%, transparent);
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  font-family:"Nunito", system-ui, sans-serif;
  background:var(--bg-0);
  color:var(--ink-0);
  font-size:13px;
  line-height:1.35;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.005em;
}
.brand-font { font-family:"Quicksand", sans-serif; }
.mono { font-family:"JetBrains Mono", ui-monospace, monospace; font-feature-settings:"tnum"; }
button { font-family:inherit; color:inherit; cursor:pointer; border:none; background:none; }
input, select { font-family:inherit; color:inherit; }
::selection { background:var(--accent-soft); }

/* scrollbars */
*::-webkit-scrollbar { width:9px; height:9px; }
*::-webkit-scrollbar-thumb { background:var(--line); border-radius:6px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:var(--ink-3); background-clip:padding-box; }
*::-webkit-scrollbar-track { background:transparent; }

/* ============================================================
   APP GRID
   ============================================================ */
#app {
  display:grid;
  grid-template-rows: 46px 1fr 26px;
  grid-template-columns: 52px 248px 1fr 272px;
  grid-template-areas:
    "top  top   top   top"
    "rail left  view  right"
    "stat stat  stat  stat";
  height:100vh;
  gap:0;
}
/* layout variants set by Tweaks */
#app[data-layout="right-tools"] {
  grid-template-columns: 248px 1fr 272px 52px;
  grid-template-areas:
    "top  top  top   top"
    "left view right rail"
    "stat stat stat  stat";
}
#app[data-layout="wide-view"] {
  grid-template-columns: 52px 210px 1fr 232px;
}
#app[data-layout="float"] .panel { box-shadow:var(--shadow); }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  grid-area:top;
  display:flex; align-items:center; gap:4px;
  padding:0 10px 0 12px;
  background:var(--bg-1);
  border-bottom:1px solid var(--line);
  z-index:30;
}
.logo { display:flex; align-items:center; gap:9px; padding-right:10px; }
.logo .mark {
  width:24px; height:24px; border-radius:7px; flex:none;
  background:
    conic-gradient(from 210deg, var(--blue), var(--green), var(--pink), var(--blue));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), var(--shadow-sm);
  position:relative;
}
.logo .mark::after{
  content:""; position:absolute; inset:6px; border-radius:3px;
  background:var(--bg-1); opacity:.85;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.logo .name { font-family:"Quicksand",sans-serif; font-weight:700; font-size:15px; letter-spacing:.01em; }
.logo .name b { font-weight:700; }
.logo .name span { color:var(--ink-2); font-weight:600; }

.menu { display:flex; align-items:center; gap:1px; margin-left:4px; }
.menu button {
  font-size:12.5px; color:var(--ink-1); font-weight:600;
  padding:5px 9px; border-radius:6px;
}
.menu button:hover { background:var(--bg-2); color:var(--ink-0); }

.modetabs {
  display:flex; gap:2px; margin:0 auto;
  background:var(--bg-2); padding:3px; border-radius:9px;
  border:1px solid var(--line-2);
}
.modetabs button {
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; color:var(--ink-1);
  padding:5px 13px; border-radius:7px;
}
.modetabs button svg { width:14px; height:14px; }
.modetabs button:hover { color:var(--ink-0); }
.modetabs button.active {
  background:var(--bg-3); color:var(--ink-0);
  box-shadow:var(--shadow-sm);
}
.modetabs button.active svg { color:var(--accent); }

.topright { display:flex; align-items:center; gap:6px; }
.icon-btn {
  width:30px; height:30px; border-radius:8px;
  display:grid; place-items:center; color:var(--ink-1);
}
.icon-btn:hover { background:var(--bg-2); color:var(--ink-0); }
.icon-btn svg { width:16px; height:16px; }
.icon-btn.on { color:var(--accent); background:var(--accent-soft); }

.play-btn {
  display:flex; align-items:center; gap:7px;
  background:var(--accent); color:#23303c;
  font-weight:800; font-size:12.5px;
  padding:7px 15px 7px 13px; border-radius:8px;
  box-shadow:var(--shadow-sm);
}
[data-theme="dark"] .play-btn { color:#16202a; }
.play-btn:hover { filter:brightness(1.05); }
.play-btn svg { width:13px; height:13px; }

.avatar {
  width:28px; height:28px; border-radius:50%; flex:none;
  background:linear-gradient(135deg, var(--pink-2), var(--blue-2));
  box-shadow: inset 0 0 0 1.5px var(--bg-1);
  margin-left:4px;
}

/* ============================================================
   TOOL RAIL
   ============================================================ */
.rail {
  grid-area:rail;
  background:var(--bg-1);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center;
  padding:8px 0; gap:3px; overflow-y:auto;
}
.rail .sep { width:24px; height:1px; background:var(--line); margin:5px 0; }
.tool {
  width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center; color:var(--ink-1);
  position:relative;
}
.tool svg { width:19px; height:19px; }
.tool:hover { background:var(--bg-2); color:var(--ink-0); }
.tool.active { background:var(--accent-soft); color:var(--accent); }
.tool.active::before {
  content:""; position:absolute; left:-8px; top:9px; bottom:9px; width:3px;
  border-radius:3px; background:var(--accent);
}
#app[data-toolbar="flat"] .tool { border-radius:8px; }
#app[data-toolbar="flat"] .tool.active { background:transparent; color:var(--accent); }
#app[data-toolbar="flat"] .tool.active::before { left:-8px; }
#app[data-toolbar="labeled"] .tool { border-radius:9px; }
#app[data-toolbar="labeled"] .tool .tlabel {
  display:none;
}

/* tooltip */
.tool .tip, .icon-btn .tip {
  position:absolute; left:46px; top:50%; transform:translateY(-50%) scale(.96);
  background:var(--ink-0); color:var(--bg-1);
  font-size:11px; font-weight:700; white-space:nowrap;
  padding:4px 8px; border-radius:6px; pointer-events:none;
  opacity:0; transition:opacity .12s, transform .12s; z-index:60;
  box-shadow:var(--shadow);
}
.tool .tip kbd, .icon-btn .tip kbd { opacity:.6; margin-left:5px; font-family:inherit; }
.tool:hover .tip { opacity:1; transform:translateY(-50%) scale(1); transition-delay:.35s; }

/* ============================================================
   PANELS (generic)
   ============================================================ */
.panel {
  background:var(--bg-1);
  display:flex; flex-direction:column;
  min-height:0; overflow:hidden;
}
.panel.left  { grid-area:left;  border-right:1px solid var(--line); }
.panel.right { grid-area:right; border-left:1px solid var(--line); }

.panel-tabs {
  display:flex; align-items:center; gap:2px;
  padding:7px 8px 0; flex:none;
}
.panel-tabs button {
  font-size:11.5px; font-weight:700; color:var(--ink-2);
  padding:6px 10px 8px; border-radius:7px 7px 0 0;
  display:flex; align-items:center; gap:6px;
}
.panel-tabs button svg { width:13px; height:13px; }
.panel-tabs button:hover { color:var(--ink-0); }
.panel-tabs button.active { color:var(--ink-0); background:var(--bg-2); }
.panel-body { flex:1; min-height:0; overflow-y:auto; }

.section { border-bottom:1px solid var(--line-2); }
.section-head {
  display:flex; align-items:center; gap:7px;
  padding:9px 12px; cursor:pointer; user-select:none;
}
.section-head .chev { width:12px; height:12px; color:var(--ink-2); transition:transform .15s; }
.section.collapsed .chev { transform:rotate(-90deg); }
.section-head h4 {
  font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-1); flex:1;
}
.section-head .badge {
  font-size:10px; font-weight:800; color:var(--ink-2);
  background:var(--bg-2); padding:1px 7px; border-radius:20px;
}
.section-content { padding:2px 12px 13px; }
.section.collapsed .section-content { display:none; }

/* ============================================================
   ASSET BROWSER
   ============================================================ */
.search {
  display:flex; align-items:center; gap:7px;
  margin:9px 10px; padding:6px 9px;
  background:var(--bg-2); border:1px solid var(--line-2);
  border-radius:8px; color:var(--ink-2);
}
.search svg { width:13px; height:13px; flex:none; }
.search input { flex:1; border:none; background:none; outline:none; font-size:12px; color:var(--ink-0); }
.search input::placeholder { color:var(--ink-3); }

.chips { display:flex; flex-wrap:wrap; gap:5px; padding:0 10px 9px; }
.chip {
  font-size:11px; font-weight:700; color:var(--ink-1);
  padding:4px 10px; border-radius:20px;
  background:var(--bg-2); border:1px solid var(--line-2);
}
.chip:hover { color:var(--ink-0); }
.chip.active { background:var(--accent-soft); color:var(--accent); border-color:transparent; }

.asset-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:7px;
  padding:2px 10px 14px;
}
#app[data-layout="wide-view"] .asset-grid { grid-template-columns:repeat(2,1fr); }
.asset {
  aspect-ratio:1; border-radius:10px;
  background:
    linear-gradient(145deg, var(--bg-3), var(--bg-2));
  border:1px solid var(--line-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; padding:6px; cursor:grab; position:relative;
  transition:transform .1s, border-color .12s, box-shadow .12s;
}
.asset:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:var(--shadow-sm); }
.asset:active { cursor:grabbing; transform:scale(.97); }
.asset .thumb { width:40px; height:40px; }
.asset .thumb svg { width:100%; height:100%; }
.asset .nm { font-size:10px; font-weight:700; color:var(--ink-1); text-align:center; line-height:1.1; }
.asset .pill {
  position:absolute; top:5px; right:5px;
  font-size:8.5px; font-weight:800; letter-spacing:.03em;
  padding:1px 5px; border-radius:10px; text-transform:uppercase;
  background:var(--accent-soft); color:var(--accent);
}

/* ============================================================
   OUTLINER
   ============================================================ */
.tree { padding:6px 6px 14px; }
.node {
  display:flex; align-items:center; gap:6px;
  padding:5px 8px; border-radius:7px; cursor:pointer;
  font-size:12px; color:var(--ink-0); position:relative;
}
.node:hover { background:var(--bg-2); }
.node.sel { background:var(--accent-soft); }
.node.sel .nlabel { color:var(--accent); font-weight:700; }
.node .twirl { width:11px; height:11px; color:var(--ink-3); flex:none; }
.node .nicon { width:14px; height:14px; color:var(--ink-2); flex:none; }
.node.sel .nicon { color:var(--accent); }
.node .nlabel { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.node .vis { width:14px; height:14px; color:var(--ink-3); opacity:0; flex:none; }
.node:hover .vis { opacity:1; }
.node .vis:hover { color:var(--ink-0); }
.node .vis.off { opacity:1; color:var(--ink-3); }
.node.child { margin-left:18px; }
.node.child2 { margin-left:34px; }

/* ============================================================
   INSPECTOR / CONTROLS
   ============================================================ */
.field { margin:9px 0; }
.field > label {
  display:block; font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-2); margin-bottom:5px;
}
.vec3 { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.num {
  display:flex; align-items:center; gap:4px;
  background:var(--bg-2); border:1px solid var(--line-2);
  border-radius:7px; padding:5px 7px;
}
.num:focus-within { border-color:var(--accent); }
.num .axis { font-size:10px; font-weight:800; color:var(--ink-3); }
.num .axis.x { color:var(--pink); }
.num .axis.y { color:var(--green); }
.num .axis.z { color:var(--blue); }
.num input {
  width:100%; border:none; background:none; outline:none;
  font-size:12px; font-family:"JetBrains Mono",monospace; color:var(--ink-0);
}
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

.slider-row { display:flex; align-items:center; gap:10px; }
.slider-row .val { font-size:11px; font-family:"JetBrains Mono",monospace; color:var(--ink-1); width:42px; text-align:right; }
input[type="range"] {
  -webkit-appearance:none; appearance:none; flex:1; height:4px;
  background:var(--line); border-radius:4px; outline:none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--bg-3); border:2px solid var(--accent); cursor:pointer;
  box-shadow:var(--shadow-sm);
}
input[type="range"]::-moz-range-thumb {
  width:14px; height:14px; border-radius:50%;
  background:var(--bg-3); border:2px solid var(--accent); cursor:pointer;
}

.swatches { display:grid; grid-template-columns:repeat(8,1fr); gap:6px; }
.swatch {
  aspect-ratio:1; border-radius:7px; cursor:pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  transition:transform .1s;
}
.swatch:hover { transform:scale(1.12); }
.swatch.sel { box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 2px var(--bg-1), 0 0 0 4px var(--accent); }

.mat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.mat {
  aspect-ratio:1; border-radius:9px; cursor:pointer; position:relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  display:grid; place-items:end; padding:5px;
}
.mat span { font-size:8.5px; font-weight:800; color:rgba(0,0,0,.5); }
.mat.sel { box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 0 0 2px var(--bg-1), 0 0 0 4px var(--accent); }

.seg {
  display:flex; background:var(--bg-2); border-radius:8px; padding:3px;
  border:1px solid var(--line-2); gap:2px;
}
.seg button {
  flex:1; font-size:11px; font-weight:700; color:var(--ink-2);
  padding:5px 6px; border-radius:6px;
}
.seg button.active { background:var(--bg-3); color:var(--ink-0); box-shadow:var(--shadow-sm); }

.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:6px 0; }
.toggle-row span { font-size:12px; color:var(--ink-0); }
.switch { width:34px; height:19px; border-radius:20px; background:var(--line); position:relative; transition:background .15s; flex:none; }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:left .15s; }
.switch.on { background:var(--accent); }
.switch.on::after { left:17px; }

/* gradient/time bar */
.daybar { height:26px; border-radius:8px; position:relative; cursor:pointer;
  background:linear-gradient(90deg,#1c2740,#5a6f96 18%,#cdb89a 32%,#8fb6dc 50%,#e6c79b 70%,#c98f9a 82%,#2a2540);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); }
.daybar .knob { position:absolute; top:-3px; width:8px; height:32px; border-radius:5px; background:#fff; box-shadow:var(--shadow); transform:translateX(-50%); }

/* ============================================================
   VIEWPORT
   ============================================================ */
.viewport { grid-area:view; position:relative; overflow:hidden; background:var(--viewport-bot); }
#scene { position:absolute; inset:0; display:block; }
.vp-overlay { position:absolute; inset:0; pointer-events:none; }
.vp-overlay > * { pointer-events:auto; }

/* floating contextual toolbar */
.vp-toolbar {
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:3px;
  background:var(--hud-glass); backdrop-filter:blur(12px);
  border:1px solid var(--hud-line); border-radius:11px;
  padding:4px; box-shadow:var(--shadow);
}
.vp-toolbar .vt {
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; color:var(--ink-1);
  padding:5px 9px; border-radius:8px;
}
.vp-toolbar .vt svg { width:14px; height:14px; }
.vp-toolbar .vt:hover { background:var(--bg-2); color:var(--ink-0); }
.vp-toolbar .vt.on { background:var(--accent-soft); color:var(--accent); }
.vp-toolbar .vsep { width:1px; height:18px; background:var(--hud-line); margin:0 2px; }

/* power-tool region action bar (bottom-centre, shown only with a live region) */
.pt-bar {
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%) translateY(8px);
  display:none; align-items:center; gap:3px;
  background:var(--hud-glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--hud-line); border-radius:11px;
  padding:4px; box-shadow:var(--shadow); z-index:6;
  opacity:0; transition:opacity .14s ease, transform .14s ease;
}
.pt-bar.show { display:flex; opacity:1; transform:translateX(-50%) translateY(0); }
.pt-bar .pt-info {
  font-family:"JetBrains Mono",monospace; font-size:10.5px; font-weight:700;
  color:var(--accent); padding:0 9px 0 7px; white-space:nowrap;
}
.pt-bar button {
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; color:var(--ink-1);
  padding:5px 9px; border-radius:8px;
}
.pt-bar button svg { width:14px; height:14px; }
.pt-bar button:hover { background:var(--bg-2); color:var(--ink-0); }
.pt-bar button:disabled { opacity:.4; pointer-events:none; }
.pt-bar .pt-sep { width:1px; height:18px; background:var(--hud-line); margin:0 2px; }
#app.immersive .pt-bar { display:none !important; }

/* view cube / axis gizmo */
.vp-gizmo {
  position:absolute; top:12px; right:12px;
  width:72px; height:72px;
  background:var(--hud-glass); backdrop-filter:blur(12px);
  border:1px solid var(--hud-line); border-radius:12px;
  box-shadow:var(--shadow);
}
.vp-gizmo svg { width:100%; height:100%; }

/* minimap (top-left) */
.minimap {
  position:absolute; bottom:12px; left:12px;
  width:160px; height:160px; border-radius:13px;
  background:var(--hud-glass); backdrop-filter:blur(12px);
  border:1px solid var(--hud-line); box-shadow:var(--shadow);
  padding:5px; overflow:hidden;
}
.minimap canvas { width:150px; height:150px; display:block; border-radius:9px; cursor:crosshair; }
.minimap-label {
  position:absolute; top:9px; left:9px; display:flex; align-items:center; gap:5px;
  font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-1);
  background:var(--hud-glass); padding:2px 7px 2px 5px; border-radius:7px; pointer-events:none;
}
.minimap-label svg { width:11px; height:11px; color:var(--accent); }
#app.immersive .minimap { display:none; }

/* coords readout bottom-left */
.vp-readout {
  position:absolute; top:12px; left:12px;
  display:flex; gap:10px; align-items:center;
  background:var(--hud-glass); backdrop-filter:blur(12px);
  border:1px solid var(--hud-line); border-radius:9px;
  padding:6px 11px; box-shadow:var(--shadow);
  font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-1);
}
.vp-readout b { color:var(--ink-0); font-weight:700; }
.vp-readout .k { color:var(--ink-3); }

/* nav helper bottom-right */
.vp-nav {
  position:absolute; bottom:12px; right:12px;
  display:flex; flex-direction:column; gap:5px;
  background:var(--hud-glass); backdrop-filter:blur(12px);
  border:1px solid var(--hud-line); border-radius:10px;
  padding:5px; box-shadow:var(--shadow);
}
.vp-nav button { width:28px; height:28px; border-radius:7px; display:grid; place-items:center; color:var(--ink-1); }
.vp-nav button:hover { background:var(--bg-2); color:var(--ink-0); }
.vp-nav button svg { width:15px; height:15px; }

/* loading */
.vp-loading {
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(180deg,var(--viewport-top),var(--viewport-bot)); z-index:5;
  transition:opacity .5s; 
}
.vp-loading.hide { opacity:0; pointer-events:none; }
.vp-loading .lwrap { text-align:center; }
.vp-loading .spinner {
  width:42px; height:42px; margin:0 auto 14px;
  border-radius:11px;
  background:conic-gradient(from 0deg, var(--blue), var(--green), var(--pink), var(--blue));
  animation:spin 1.4s linear infinite;
  position:relative;
}
.vp-loading .spinner::after { content:""; position:absolute; inset:5px; border-radius:7px; background:var(--viewport-bot); }
.vp-loading p { font-size:12px; color:var(--ink-1); font-weight:700; font-family:"Quicksand",sans-serif; }
@keyframes spin { to { transform:rotate(360deg); } }

/* drag-place ghost cursor hint */
.vp-hint {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:12px; color:var(--ink-2); font-weight:700;
  background:var(--hud-glass); padding:7px 14px; border-radius:20px;
  border:1px solid var(--hud-line); pointer-events:none; opacity:0;
  transition:opacity .2s;
}
.vp-hint.show { opacity:1; }

/* ============================================================
   STATUS BAR
   ============================================================ */
.statusbar {
  grid-area:stat;
  display:flex; align-items:center; gap:0;
  background:var(--bg-1); border-top:1px solid var(--line);
  padding:0 12px; font-size:11px; color:var(--ink-2);
}
.statusbar .si { display:flex; align-items:center; gap:6px; padding:0 12px; height:100%; }
.statusbar .si:not(:last-child) { border-right:1px solid var(--line-2); }
.statusbar .si svg { width:13px; height:13px; }
.statusbar .si b { color:var(--ink-0); font-weight:700; font-family:"JetBrains Mono",monospace; }
.statusbar .spacer { flex:1; }
.statusbar .si.good { color:var(--green); }
.statusbar .dot { width:7px; height:7px; border-radius:50%; background:var(--green); }

/* ============================================================
   GAME STUDIO OVERLAY (play-test)
   ============================================================ */
.studio { position:absolute; inset:0; z-index:40; display:none; }
.studio.active { display:block; }
.studio-canvas { position:absolute; inset:0; }

/* controller picker (pre-play) */
.studio-picker {
  position:absolute; inset:0; display:grid; place-items:center;
  background:color-mix(in oklab, var(--bg-0) 80%, transparent);
  backdrop-filter:blur(8px); z-index:3;
}
.studio-picker .card {
  width:92%; max-width:680px; max-height:88%; overflow-y:auto;
  background:var(--bg-1); border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow); padding:24px;
}
.studio-picker h2 { font-family:"Quicksand",sans-serif; font-size:19px; font-weight:700; margin-bottom:3px; }
.studio-picker .sub { font-size:12.5px; color:var(--ink-2); margin-bottom:18px; }
.ctrl-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.ctrl {
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:13px;
  padding:14px 12px; cursor:pointer; text-align:left;
  transition:transform .1s, border-color .12s, box-shadow .12s;
}
.ctrl:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-sm); }
.ctrl.sel { border-color:var(--accent); background:var(--accent-soft); }
.ctrl .ci { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; margin-bottom:10px;
  background:var(--bg-3); color:var(--accent); }
.ctrl .ci svg { width:19px; height:19px; }
.ctrl h5 { font-size:13px; font-weight:800; margin-bottom:3px; }
.ctrl p { font-size:10.5px; color:var(--ink-2); line-height:1.3; }
.studio-picker .actions { display:flex; align-items:center; gap:10px; margin-top:20px; }
.studio-picker .start {
  background:var(--accent); color:#1c2630; font-weight:800; font-size:13px;
  padding:10px 22px; border-radius:10px; display:flex; align-items:center; gap:8px;
}
.studio-picker .start svg { width:14px; height:14px; }
.studio-picker .ghost { font-weight:700; color:var(--ink-1); padding:10px 16px; border-radius:10px; }
.studio-picker .ghost:hover { background:var(--bg-2); }

/* in-play HUD */
.play-hud { position:absolute; inset:0; pointer-events:none; z-index:2; }
.play-hud > * { pointer-events:auto; }
.play-top {
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  background:var(--hud-glass); backdrop-filter:blur(12px);
  border:1px solid var(--hud-line); border-radius:11px; padding:6px 8px 6px 14px;
  box-shadow:var(--shadow);
}
.play-top .mode-name { font-size:12px; font-weight:800; color:var(--ink-0); display:flex; align-items:center; gap:7px; }
.play-top .mode-name svg { width:14px; height:14px; color:var(--accent); }
.play-top .exit {
  display:flex; align-items:center; gap:6px;
  background:var(--bg-2); color:var(--ink-1); font-weight:700; font-size:11.5px;
  padding:6px 12px; border-radius:8px;
}
.play-top .exit:hover { color:var(--ink-0); }
.play-top .exit svg { width:12px; height:12px; }

/* immersive full-screen play — viewport fills the window, chrome hidden */
#app.immersive .viewport { position:fixed; inset:0; z-index:560; }
#app.immersive .play-top { top:16px; }
#app.immersive .exit { background:var(--hud-glass); }

.crosshair { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:20px; height:20px; }
.crosshair::before, .crosshair::after { content:""; position:absolute; background:rgba(255,255,255,.85); box-shadow:0 0 2px rgba(0,0,0,.4); }
.crosshair::before { left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); }
.crosshair::after { top:50%; left:0; height:2px; width:100%; transform:translateY(-50%); }

.play-controls {
  position:absolute; bottom:14px; left:14px;
  background:var(--hud-glass); backdrop-filter:blur(12px);
  border:1px solid var(--hud-line); border-radius:10px; padding:11px 13px;
  box-shadow:var(--shadow); font-size:11px; color:var(--ink-1);
}
.play-controls h6 { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); margin-bottom:7px; font-weight:800; }
.play-controls .keyrow { display:flex; align-items:center; gap:8px; margin:4px 0; }
.play-controls .keys { display:flex; gap:3px; }
.key {
  min-width:18px; height:18px; padding:0 4px; border-radius:4px;
  background:var(--bg-3); border:1px solid var(--line);
  font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:700; color:var(--ink-0);
  display:grid; place-items:center;
}
.play-controls .keyrow span { color:var(--ink-2); }

.play-stats {
  position:absolute; bottom:14px; right:14px;
  display:flex; gap:9px;
}
.play-stat {
  background:var(--hud-glass); backdrop-filter:blur(12px);
  border:1px solid var(--hud-line); border-radius:10px; padding:8px 13px;
  box-shadow:var(--shadow); text-align:center; min-width:62px;
}
.play-stat .pv { font-size:16px; font-weight:800; font-family:"JetBrains Mono",monospace; color:var(--ink-0); }
.play-stat .pl { font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); font-weight:800; margin-top:1px; }

/* health/ammo bars for game modes */
.hbar { width:120px; height:8px; border-radius:5px; background:var(--bg-3); overflow:hidden; margin-top:4px; }
.hbar > div { height:100%; border-radius:5px; transition:width .3s; }

/* vitals panel (health / stamina / hunger) */
.play-bars {
  position:absolute; top:58px; left:14px;
  display:flex; flex-direction:column; gap:8px;
  background:var(--hud-glass); backdrop-filter:blur(12px);
  border:1px solid var(--hud-line); border-radius:12px; padding:11px 13px;
  box-shadow:var(--shadow);
}
.play-bars:empty { display:none; }
.bar-row { display:flex; align-items:center; gap:9px; }
.bar-row .bl { width:56px; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); }
.bar-row .hbar { margin-top:0; }

/* ---- logic authoring (inspector) ---- */
.logic-select {
  width:100%; appearance:none; -webkit-appearance:none;
  background:var(--bg-2); border:1px solid var(--line); color:var(--ink-0);
  border-radius:8px; padding:8px 30px 8px 11px; font:inherit; font-size:12.5px; font-weight:700;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8B93' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.logic-select:focus { outline:none; border-color:var(--accent); }
.logic-desc { font-size:10.5px; color:var(--ink-3); margin-top:8px; line-height:1.45; }

/* ---- objective HUD (play) ---- */
.obj-hud {
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  display:none; flex-direction:column; gap:5px;
  background:var(--hud-glass); backdrop-filter:blur(12px);
  border:1px solid var(--hud-line); border-radius:12px; padding:11px 16px;
  box-shadow:var(--shadow); min-width:172px; z-index:30;
}
.obj-hud.show { display:flex; }
.obj-hud .oh-title { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2); margin-bottom:1px; }
.obj-hud .oh-item { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--ink-0); }
.obj-hud .oh-item b { font-family:"JetBrains Mono",monospace; }
.obj-hud .oh-sub { font-weight:600; color:var(--ink-2); font-size:11px; }
.obj-hud .oh-dot { width:8px; height:8px; border-radius:3px; flex:0 0 auto; }

/* ---- win / lose overlay ---- */
.end-overlay {
  position:absolute; inset:0; z-index:60;
  display:none; align-items:center; justify-content:center;
  background:color-mix(in oklab, var(--bg-0) 62%, transparent); backdrop-filter:blur(6px);
}
.end-overlay.show { display:flex; animation:endIn .25s ease; }
@keyframes endIn { from{ opacity:0; } to{ opacity:1; } }
.end-card {
  background:var(--bg-3); border:1px solid var(--line); border-radius:20px;
  padding:34px 38px; text-align:center; box-shadow:var(--shadow); max-width:380px;
  border-top:4px solid var(--accent);
}
.end-card.win  { border-top-color:#9FCBB1; }
.end-card.lose { border-top-color:#D69A9A; }
.end-card .end-kicker { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-2); }
.end-card h2 { font-size:32px; font-weight:800; margin:6px 0 8px; color:var(--ink-0); letter-spacing:-.01em; }
.end-card p { font-size:13.5px; color:var(--ink-1); line-height:1.5; }
.end-actions { display:flex; gap:10px; justify-content:center; margin-top:22px; }
.end-btn {
  border:1px solid var(--line); background:var(--bg-2); color:var(--ink-1);
  border-radius:10px; padding:10px 20px; font:inherit; font-size:13px; font-weight:800; cursor:pointer;
  transition:transform .12s ease, border-color .12s ease;
}
.end-btn:hover { transform:translateY(-1px); border-color:var(--ink-3); }
.end-btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---- survival inventory + gather prompt ---- */
.inv-hud {
  position:absolute; left:14px; bottom:14px; z-index:30;
  display:none; flex-direction:column; gap:7px; min-width:150px;
  background:var(--hud-glass); backdrop-filter:blur(12px);
  border:1px solid var(--hud-line); border-radius:12px; padding:11px 13px;
  box-shadow:var(--shadow);
}
.inv-hud.show { display:flex; }
.inv-title { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2); }
.inv-item { display:flex; align-items:center; gap:8px; font-size:13px; }
.inv-item .ig { font-size:15px; width:20px; text-align:center; }
.inv-item .iv { font-family:"JetBrains Mono",monospace; font-weight:700; color:var(--ink-0); min-width:18px; }
.inv-item .il { color:var(--ink-2); font-weight:600; text-transform:capitalize; font-size:11.5px; }
.inv-keys { display:flex; gap:9px; flex-wrap:wrap; margin-top:4px; padding-top:7px; border-top:1px solid var(--hud-line); }
.inv-keys span { font-size:10px; color:var(--ink-2); }
.inv-keys b { font-family:"JetBrains Mono",monospace; color:var(--ink-1); background:var(--bg-2); border:1px solid var(--line); border-radius:4px; padding:0 4px; }

.gather-prompt {
  position:absolute; left:50%; bottom:88px; transform:translateX(-50%); z-index:30;
  display:none; align-items:center; gap:8px;
  background:var(--hud-glass); backdrop-filter:blur(12px);
  border:1px solid var(--hud-line); border-radius:999px; padding:7px 15px 7px 9px;
  box-shadow:var(--shadow); font-size:12.5px; color:var(--ink-1);
}
.gather-prompt.show { display:flex; }
.gather-prompt b { color:var(--ink-0); }
.gather-prompt .gk {
  font-family:"JetBrains Mono",monospace; font-weight:700; font-size:11px;
  background:var(--accent); color:#fff; border-radius:6px; padding:2px 8px;
}

.hidden { display:none !important; }

/* ============================================================
   EXPORT GAME MODAL
   ============================================================ */
.export-body { padding:18px; overflow-y:auto; }
.export-intro { font-size:13px; color:var(--ink-2); line-height:1.5; margin-bottom:16px; }
.export-field { margin-bottom:18px; }
.export-field > label { display:block; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); margin-bottom:8px; }
.export-chars { display:flex; flex-wrap:wrap; gap:6px; }
.exch { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--ink-1);
  padding:7px 11px; border-radius:9px; background:var(--bg-2); border:1px solid var(--line-2); transition:all var(--t-fast,.12s); }
.exch svg { width:14px; height:14px; }
.exch:hover { color:var(--ink-0); }
.exch.on { background:var(--accent-soft); color:var(--accent); border-color:transparent; }

.export-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
.export-card { display:flex; align-items:flex-start; gap:12px; text-align:left; padding:15px;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:13px; cursor:pointer;
  transition:transform .1s, border-color .12s, box-shadow .12s; }
.export-card:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:var(--shadow-sm); }
.export-card.primary { background:var(--accent-soft); border-color:transparent; }
.ec-ic { width:38px; height:38px; flex:none; border-radius:10px; display:grid; place-items:center; background:var(--bg-3); color:var(--accent); }
.export-card.primary .ec-ic { background:var(--accent); color:#1c2630; }
.ec-ic svg { width:19px; height:19px; }
.ec-tx b { display:block; font-size:13.5px; font-weight:800; margin-bottom:3px; }
.ec-tx span { font-size:11px; color:var(--ink-2); line-height:1.4; }

.export-note { display:flex; align-items:flex-start; gap:9px; margin-top:16px; padding:11px 13px;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:11px; font-size:11.5px; color:var(--ink-2); line-height:1.5; }
.export-note svg { width:15px; height:15px; flex:none; color:var(--green); margin-top:1px; }

/* colour palette presets + custom editor */
.pal-presets { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.pal-preset {
  font-size:11px; font-weight:700; color:var(--ink-1);
  padding:6px 4px; border-radius:7px; background:var(--bg-2); border:1px solid var(--line-2);
  transition:all var(--t-fast,.12s);
}
.pal-preset:hover { color:var(--ink-0); }
.pal-preset.on { background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.pal-custom { display:grid; grid-template-columns:repeat(8,1fr); gap:6px; }
.pal-cc {
  position:relative; aspect-ratio:1; border-radius:7px; cursor:pointer; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.pal-cc input[type="color"] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:none; }

/* measurement label */
.measure-label {
  position:absolute; transform:translate(-50%,-130%); z-index:6; pointer-events:none;
  background:var(--hud-glass); backdrop-filter:blur(12px);
  border:1px solid var(--hud-line); border-radius:9px; padding:5px 10px; box-shadow:var(--shadow);
  text-align:center; white-space:nowrap;
}
.measure-label b { display:block; font-size:14px; font-weight:800; color:var(--accent); font-family:"JetBrains Mono",monospace; }
.measure-label span { font-size:9.5px; color:var(--ink-2); font-family:"JetBrains Mono",monospace; }

/* animation rig grid (inspector) */
.anim-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.anim-btn {
  font-size:10.5px; font-weight:700; color:var(--ink-1);
  padding:6px 4px; border-radius:7px; background:var(--bg-2); border:1px solid var(--line-2);
  transition:all var(--t-fast,.12s);
}
.anim-btn:hover { color:var(--ink-0); }
.anim-btn.on { background:var(--accent-soft); color:var(--accent); border-color:transparent; }

/* ============================================================
   VOXEL MODEL EDITOR (overlay)
   ============================================================ */
.model-editor {
  position:fixed; inset:0; z-index:580; background:var(--bg-0);
  display:none;
}
.model-editor.show { display:block; }
#modelCanvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.me-top {
  position:absolute; top:0; left:0; right:0; height:50px; z-index:2;
  display:flex; align-items:center; gap:14px; padding:0 14px;
  background:var(--bg-1); border-bottom:1px solid var(--line);
}
.me-brand { display:flex; align-items:center; gap:8px; }
.me-dot { width:11px; height:11px; border-radius:4px; background:conic-gradient(from 200deg,var(--blue),var(--green),var(--pink),var(--blue)); }
.me-brand b { font-size:15px; }
.me-sub { font-size:11px; color:var(--ink-3); font-weight:700; }
.me-name {
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:8px;
  padding:7px 11px; font-size:13px; font-weight:700; color:var(--ink-0); outline:none; width:180px;
}
.me-name:focus { border-color:var(--accent); }
.me-top-actions { margin-left:auto; display:flex; gap:8px; }
.me-tbtn {
  display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--ink-1);
  padding:8px 13px; border-radius:9px; background:var(--bg-2); border:1px solid var(--line-2);
}
.me-tbtn svg { width:14px; height:14px; }
.me-tbtn:hover { color:var(--ink-0); }
.me-tbtn.primary { background:var(--accent); color:#1c2630; border-color:transparent; }
[data-theme="dark"] .me-tbtn.primary { color:#15202a; }
.me-tbtn.ghost { background:transparent; }

.me-rail {
  position:absolute; top:66px; left:14px; z-index:2;
  display:flex; flex-direction:column; gap:4px; padding:6px;
  background:var(--hud-glass); backdrop-filter:blur(12px);
  border:1px solid var(--hud-line); border-radius:12px; box-shadow:var(--shadow);
}
.me-tool { position:relative; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; color:var(--ink-1); }
.me-tool svg { width:19px; height:19px; }
.me-tool:hover { background:var(--bg-2); color:var(--ink-0); }
.me-tool.active { background:var(--accent-soft); color:var(--accent); }
.me-tool.dim { opacity:.32; pointer-events:none; }
.me-railsep { height:1px; background:var(--hud-line); margin:3px 4px; }
.me-tool .tip { position:absolute; left:48px; top:50%; transform:translateY(-50%); background:var(--ink-0); color:var(--bg-1); font-size:11px; font-weight:700; padding:4px 8px; border-radius:6px; opacity:0; pointer-events:none; white-space:nowrap; transition:opacity .12s; }
.me-tool:hover .tip { opacity:1; transition-delay:.3s; }

.me-bottom {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; gap:10px; align-items:center;
  background:var(--hud-glass); backdrop-filter:blur(12px);
  border:1px solid var(--hud-line); border-radius:14px; box-shadow:var(--shadow); padding:12px 14px;
}
.me-palette { display:grid; grid-template-columns:repeat(16,1fr); gap:5px; }
.me-sw { width:22px; height:22px; border-radius:6px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); transition:transform .1s; }
.me-sw:hover { transform:scale(1.14); }
.me-sw.on { box-shadow:inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 2px var(--bg-1), 0 0 0 4px var(--accent); }
.me-templates { display:flex; align-items:center; gap:6px; }
.me-tlabel { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin-right:2px; }
.me-chip { font-size:11.5px; font-weight:700; color:var(--ink-1); padding:5px 12px; border-radius:20px; background:var(--bg-2); border:1px solid var(--line-2); }
.me-chip:hover { color:var(--ink-0); }
.me-chip.on { background:var(--accent-soft); color:var(--accent); border-color:transparent; }

.me-stats {
  position:absolute; bottom:16px; right:16px; z-index:2;
  background:var(--hud-glass); backdrop-filter:blur(12px);
  border:1px solid var(--hud-line); border-radius:9px; padding:7px 12px; box-shadow:var(--shadow);
  font-size:11px; color:var(--ink-2); font-family:"JetBrains Mono",monospace;
}
.me-stats b { color:var(--ink-0); }

/* marquee box-select */
.marquee {
  position:fixed; z-index:480; pointer-events:none;
  border:1.5px solid var(--accent);
  background:color-mix(in oklab, var(--accent) 16%, transparent);
  border-radius:3px;
}

/* ============================================================
   BIOME PICKER (world panel)
   ============================================================ */
.biome-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.biome {
  display:flex; align-items:center; gap:8px; padding:7px 9px;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:9px;
  font-size:11.5px; font-weight:700; color:var(--ink-1); transition:all var(--t-fast,.12s);
}
.biome:hover { color:var(--ink-0); border-color:var(--line-strong,var(--line)); }
.biome.sel { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.bswatch { width:16px; height:16px; border-radius:5px; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }

/* ============================================================
   WORLDS MODAL
   ============================================================ */
.modal-scrim {
  position:fixed; inset:0; z-index:600; display:grid; place-items:center;
  background:color-mix(in oklab, #15161b 52%, transparent); backdrop-filter:blur(7px);
  opacity:0; pointer-events:none; transition:opacity .18s;
}
.modal-scrim.show { opacity:1; pointer-events:auto; }
.modal {
  width:min(720px,92vw); max-height:84vh; display:flex; flex-direction:column;
  background:var(--bg-1); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow-lg,var(--shadow)); overflow:hidden;
  transform:translateY(10px) scale(.985); transition:transform .2s;
}
.modal-scrim.show .modal { transform:none; }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 14px; border-bottom:1px solid var(--line-2); }
.modal-title { display:flex; align-items:center; gap:10px; }
.modal-title svg { width:19px; height:19px; color:var(--accent); }
.modal-title h2 { font-size:17px; font-weight:700; }
.modal-x { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:var(--ink-2); }
.modal-x:hover { background:var(--bg-2); color:var(--ink-0); }
.modal-x svg { width:15px; height:15px; }
.modal-toolbar { display:flex; align-items:center; gap:8px; padding:13px 18px; border-bottom:1px solid var(--line-2); background:var(--bg-2); flex-wrap:wrap; }
.mbtn {
  display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--ink-1);
  padding:8px 13px; border-radius:9px; background:var(--bg-1); border:1px solid var(--line-2);
  transition:all var(--t-fast,.12s);
}
.mbtn:hover { color:var(--ink-0); border-color:var(--line-strong,var(--line)); }
.mbtn svg { width:14px; height:14px; }
.mbtn.primary { background:var(--accent); color:#1c2630; border-color:transparent; }
[data-theme="dark"] .mbtn.primary { color:#15202a; }
.mbtn.primary:hover { filter:brightness(1.05); }

.world-grid { padding:16px 18px; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:13px; }

/* ---- template starter strip ---- */
.tpl-strip { padding:15px 18px 4px; border-bottom:1px solid var(--line-2); }
.tpl-head { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); margin-bottom:11px; }
.tpl-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(204px,1fr)); gap:12px; }
.tpl-card {
  display:flex; flex-direction:column; text-align:left; padding:0; cursor:pointer;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:13px; overflow:hidden;
  transition:transform .1s, border-color .12s, box-shadow .12s; font:inherit;
}
.tpl-card:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:var(--shadow); }
.tpl-thumb { height:74px; position:relative; display:grid; place-items:center; }
.tpl-thumb svg { width:50px; height:42px; filter:drop-shadow(0 2px 3px rgba(20,22,30,.18)); }
.tpl-tag {
  position:absolute; top:7px; right:7px; font-size:8.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; padding:2px 7px; border-radius:20px;
  background:rgba(255,255,255,.82); color:#33353d;
}
.tpl-body { padding:10px 12px 12px; }
.tpl-name { font-size:13px; font-weight:800; color:var(--ink-0); }
.tpl-mode { font-size:10px; font-weight:700; color:var(--accent); margin-top:1px; }
.tpl-blurb { font-size:11px; color:var(--ink-2); line-height:1.4; margin-top:6px; }
@media (max-width:560px){ .tpl-row { grid-template-columns:1fr 1fr; } }
.world-empty { grid-column:1/-1; text-align:center; padding:46px 20px; color:var(--ink-3); }
.world-empty svg { width:42px; height:42px; opacity:.45; margin-bottom:12px; }
.world-empty p { font-size:14px; font-weight:800; color:var(--ink-2); }
.world-empty span { font-size:12px; }
.world-empty b { color:var(--ink-1); }

.world-card { background:var(--bg-2); border:1px solid var(--line-2); border-radius:13px; overflow:hidden; transition:transform .1s, border-color .12s, box-shadow .12s; }
.world-card:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:var(--shadow); }
.world-card.confirm { border-color:var(--pink); }
.wc-thumb {
  height:112px; background:linear-gradient(160deg,var(--viewport-top),var(--viewport-bot));
  background-size:cover; background-position:center; cursor:pointer; position:relative;
  display:grid; place-items:center; color:var(--ink-3);
}
.wc-thumb svg { width:34px; height:34px; opacity:.5; }
.wc-tag { position:absolute; top:8px; left:8px; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:20px; background:var(--accent); color:#1c2630; }
.wc-body { padding:10px 11px 11px; }
.wc-name { font-size:13px; font-weight:800; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wc-name:hover { color:var(--accent); }
.wc-meta { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:4px; font-size:10.5px; color:var(--ink-3); }
.wc-biome { text-transform:capitalize; color:var(--ink-2); font-weight:700; }
.wc-foot { display:flex; align-items:center; justify-content:space-between; margin-top:9px; }
.wc-time { font-size:10px; color:var(--ink-3); font-family:"JetBrains Mono",monospace; }
.wc-actions { display:flex; gap:4px; }
.wc-btn { width:25px; height:25px; border-radius:7px; display:grid; place-items:center; color:var(--ink-2); }
.wc-btn svg { width:13px; height:13px; }
.wc-btn:hover { background:var(--bg-3); color:var(--ink-0); }
.wc-btn.danger:hover, .wc-btn.armed { background:color-mix(in oklab,var(--pink) 30%,transparent); color:var(--pink); }
.wc-btn.armed { color:#fff; background:var(--pink); }

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.tw-panel {
  position:fixed; right:16px; bottom:16px; z-index:500;
  width:236px; background:var(--bg-1); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); overflow:hidden;
  opacity:0; transform:translateY(8px) scale(.98); pointer-events:none;
  transition:opacity .16s, transform .16s;
}
.tw-panel.show { opacity:1; transform:none; pointer-events:auto; }
.tw-head { display:flex; align-items:center; justify-content:space-between; padding:11px 12px; border-bottom:1px solid var(--line-2); background:var(--bg-2); }
.tw-title { display:flex; align-items:center; gap:8px; font-family:"Quicksand",sans-serif; font-weight:700; font-size:13px; }
.tw-dot { width:9px; height:9px; border-radius:50%; background:conic-gradient(from 200deg,var(--blue),var(--green),var(--pink),var(--blue)); }
.tw-close { width:24px; height:24px; border-radius:6px; display:grid; place-items:center; color:var(--ink-2); }
.tw-close:hover { background:var(--bg-3); color:var(--ink-0); }
.tw-close svg { width:13px; height:13px; }
.tw-body { padding:12px; max-height:70vh; overflow-y:auto; }
.tw-sec { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-2); margin:13px 0 7px; }
.tw-sec:first-child { margin-top:0; }
.tw-seg { display:flex; flex-wrap:wrap; gap:4px; background:var(--bg-2); padding:4px; border-radius:9px; border:1px solid var(--line-2); }
.tw-seg button { flex:1; min-width:fit-content; font-size:11px; font-weight:700; color:var(--ink-2); padding:6px 8px; border-radius:6px; white-space:nowrap; transition:all var(--t-fast); }
.tw-seg button:hover { color:var(--ink-0); }
.tw-seg button.on { background:var(--bg-3); color:var(--accent); box-shadow:var(--shadow-sm); }
.tw-swatches { display:flex; gap:7px; }
.tw-sw { width:30px; height:30px; border-radius:9px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); transition:transform .1s; }
.tw-sw:hover { transform:scale(1.1); }
.tw-sw.on { box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 0 0 2px var(--bg-1), 0 0 0 4px var(--accent); }

/* studio immersive variant — hide the card picker chrome, full-bleed */
.studio[data-style="immersive"] .studio-picker .card { background:transparent; border:none; box-shadow:none; backdrop-filter:none; }
.studio[data-style="immersive"] .studio-picker { background:color-mix(in oklab, var(--bg-0) 92%, transparent); }

/* context menu */
.ctxmenu {
  position:fixed; z-index:200; min-width:180px;
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow); padding:5px;
  font-size:12px;
}
.ctxmenu button { display:flex; align-items:center; gap:9px; width:100%; padding:7px 9px; border-radius:6px; color:var(--ink-0); font-weight:600; }
.ctxmenu button:hover { background:var(--accent-soft); }
.ctxmenu button svg { width:14px; height:14px; color:var(--ink-2); }
.ctxmenu button .sc { margin-left:auto; color:var(--ink-3); font-family:"JetBrains Mono",monospace; font-size:10px; }
.ctxmenu .msep { height:1px; background:var(--line-2); margin:4px 6px; }

/* toast */
.toast-wrap { position:fixed; bottom:40px; left:50%; transform:translateX(-50%); z-index:300; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast {
  background:var(--ink-0); color:var(--bg-1); font-size:12px; font-weight:700;
  padding:9px 16px; border-radius:10px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:9px;
  animation:toastin .25s ease both;
}
.toast svg { width:15px; height:15px; color:var(--green); }
@keyframes toastin { from { opacity:0; transform:translateY(10px); } }