:root{
  --neon: #00eaff;
  --neon-soft: #7df9ff;
  --neon-dim: #0090a8;
  --neon-magenta: #ff2df0;
  --neon-magenta-soft: #ff8ef8;
  --matrix-green: #39ff14;
  --win-face: #c0c0c0;
  --win-face-dark: #808080;
  --win-shadow: #000000;
  --win-hi: #ffffff;
  --bg: #000000;
  --danger: #ff2d55;
  --font-pixel: 'Press Start 2P', 'Courier New', monospace;
}
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--neon);
  font-family: var(--font-pixel);
  overflow-x:hidden;
  overscroll-behavior:none;
  -webkit-tap-highlight-color: transparent;
  image-rendering: pixelated;
}
body{ min-height:100vh; }
img{ image-rendering: pixelated; }
a{ color:var(--neon); }
button{ font-family:var(--font-pixel); cursor:pointer; }

::selection{ background:var(--neon); color:#000; }

/* ---------- scrollbar, cypherpunk ---------- */
::-webkit-scrollbar{ width:16px; height:16px; }
::-webkit-scrollbar-track{ background:#000; border-left:1px solid var(--neon-dim); border-top:2px solid var(--neon); border-bottom:2px solid var(--neon); }
::-webkit-scrollbar-thumb{ background:var(--neon-dim); border:1px solid var(--neon); box-shadow:0 0 4px var(--neon); }
::-webkit-scrollbar-thumb:hover{ background:var(--neon); }
::-webkit-scrollbar-button{
  display:block; height:14px; width:16px; background:var(--win-face);
  border-top:1px solid var(--win-hi); border-left:1px solid var(--win-hi);
  border-right:1px solid var(--win-shadow); border-bottom:1px solid var(--win-shadow);
}

/* ==================== BOOT SEQUENCE ==================== */
#boot-screen{
  position:fixed; inset:0; z-index:9999;
  background:var(--matrix-green);
  display:flex; align-items:center; justify-content:center;
  transition: background-color 1.4s ease, opacity 1.4s ease;
  overflow:hidden;
}
#boot-screen.to-black{ background:#000; }
#boot-screen.hide{ opacity:0; pointer-events:none; }
#boot-bot{
  position:absolute; top:50%; left:-15%;
  transform:translateY(-50%);
  font-size:48px; filter:drop-shadow(0 0 6px #000);
  animation: boot-cross 4.6s linear forwards;
  image-rendering:pixelated;
}
@keyframes boot-cross{
  0%{ left:-15%; }
  100%{ left:115%; }
}
#boot-glitchtext{
  position:absolute; bottom:8%; left:0; right:0; text-align:center;
  color:#001a00; font-size:10px; letter-spacing:2px; opacity:.8;
}
#boot-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  background:#000;
}
#boot-bot-fallback{ position:absolute; inset:0; z-index:0; display:none; }
#boot-bot-fallback.show{ display:block; }
#boot-box-wrap{
  position:absolute; inset:0; z-index:2; display:none;
  align-items:center; justify-content:center; flex-direction:column;
  background:#000; cursor:pointer;
}
#boot-box-wrap.show{ display:flex; }
#boot-box-canvas{ width:min(60vw,420px); height:min(60vw,420px); }
#boot-box-caption{
  margin-top:22px; font-size:12px; color:var(--neon); letter-spacing:2px;
  max-width:min(90vw,560px); text-align:center; line-height:2.1; padding:10px 16px;
  background:rgba(0,20,26,.55); border:1px solid var(--neon-dim); border-radius:3px;
  text-shadow:0 0 10px var(--neon), 0 0 20px var(--neon);
  opacity:0; visibility:hidden; transition:opacity .5s ease;
}
#boot-box-caption.show{ opacity:1; visibility:visible; animation:boot-caption-pulse 1.5s ease-in-out infinite; }

#boot-loading-popup{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:5; width:min(82vw,280px); display:none;
}
#boot-loading-popup.show{ display:block; }
#boot-loading-body{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.boot-spinner{
  width:20px; height:20px; border:3px solid #99a; border-top-color:var(--neon-dim);
  border-radius:50%; animation:boot-spin 0.9s linear infinite;
}
@keyframes boot-spin{ to{ transform:rotate(360deg); } }
#boot-loading-text{ font-size:8px; letter-spacing:1px; color:#003; text-align:center; }
.boot-progress{ width:100%; height:6px; background:#001a1f; border:1px solid var(--neon-dim); overflow:hidden; }
.boot-progress-fill{ height:100%; width:0%; background:var(--neon); box-shadow:0 0 6px var(--neon); transition:width .25s ease; }

.boot-box-stage{ position:relative; }
#boot-corner-badge{
  position:absolute; top:-8px; right:-10px; z-index:3;
  background:#0000aa; color:#fff; font-size:6px; letter-spacing:.5px;
  padding:3px 6px; border:1px solid #fff; box-shadow:1px 1px 0 #000;
}
#boot-entry-links{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px;
  opacity:0; visibility:hidden; transition:opacity .5s ease;
}
#boot-entry-links.show{ opacity:1; visibility:visible; }
#boot-entry-links button{
  background:#000; color:var(--neon); border:1px solid var(--neon);
  font-family:var(--font-pixel); font-size:7px; padding:6px 9px; letter-spacing:.5px;
}
#boot-entry-links button:hover{ background:var(--neon); color:#000; }

.boot-exit-fx{
  position:fixed; z-index:9998; color:#4aa8ff; font-family:var(--font-pixel);
  font-size:9px; text-shadow:0 0 8px #4aa8ff; pointer-events:none; white-space:nowrap;
  animation: boot-exit-float 2.4s ease-out forwards;
}
@keyframes boot-exit-float{
  0%{ opacity:0; transform:translateY(0) scale(0.8); }
  15%{ opacity:1; transform:translateY(-10px) scale(1); }
  100%{ opacity:0; transform:translateY(-90px) scale(1.1); }
}
@keyframes boot-caption-pulse{
  0%,100%{ opacity:.75; box-shadow:0 0 10px rgba(0,234,255,.25); }
  50%{ opacity:1; box-shadow:0 0 24px rgba(0,234,255,.55); }
}

/* ==================== TASKBAR / NAV ==================== */
#taskbar{
  position:fixed; top:0; left:0; right:0; z-index:500;
  background:linear-gradient(180deg,#0a0a0a,#000);
  border-bottom:2px solid var(--neon);
  box-shadow:0 0 12px rgba(0,234,255,.5);
  display:flex; align-items:center; gap:6px;
  padding:calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 6px calc(8px + env(safe-area-inset-left));
  flex-wrap:wrap;
}
.brand{ font-size:11px; letter-spacing:1px; margin-right:10px; text-shadow:0 0 6px var(--neon); white-space:nowrap; }
.nav-btn, .icon-btn, select.chrome-select{
  background:var(--win-face); color:#000;
  border-top:2px solid var(--win-hi); border-left:2px solid var(--win-hi);
  border-right:2px solid var(--win-shadow); border-bottom:2px solid var(--win-shadow);
  padding:6px 10px; font-size:9px; letter-spacing:1px;
}
.nav-btn:hover, .icon-btn:hover{
  background:var(--neon); color:#000;
  box-shadow:0 0 10px var(--neon), 0 0 20px var(--neon);
}
.nav-btn.active{ background:#00131a; color:var(--neon); border-color:var(--neon); box-shadow:inset 0 0 8px var(--neon); }
.nav-btn:active, .icon-btn:active{
  border-top:2px solid var(--win-shadow); border-left:2px solid var(--win-shadow);
  border-right:2px solid var(--win-hi); border-bottom:2px solid var(--win-hi);
}
#taskbar-right{ margin-left:auto; display:flex; gap:6px; align-items:center; }
select.chrome-select{ padding:4px 6px; }

/* ==================== SECTIONS ==================== */
.section{
  display:none; min-height:100vh;
  padding:calc(70px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(60px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  position:relative;
}
.section.active{ display:block; }
.section-header{ text-align:center; margin:18px auto 26px; max-width:820px; }
.section-header h1{ font-size:16px; text-shadow:0 0 10px var(--neon); letter-spacing:2px; }
.section-header p{ font-size:9px; line-height:1.9; color:var(--neon-soft); opacity:.85; }

/* Workshop uses neon magenta instead of the site-wide cyan for contrast */
#section-workshop .section-header h1{ color:var(--neon-magenta); text-shadow:0 0 10px var(--neon-magenta); }
#section-workshop .section-header p{ color:var(--neon-magenta-soft); }

/* ==================== WIN95 WINDOW ==================== */
.win95-window{
  position:absolute;
  background:var(--win-face);
  border-top:2px solid var(--win-hi); border-left:2px solid var(--win-hi);
  border-right:2px solid var(--win-shadow); border-bottom:2px solid var(--win-shadow);
  box-shadow:4px 4px 0 rgba(0,0,0,.6), 0 0 28px rgba(0,234,255,.45), 0 0 54px rgba(0,234,255,.18);
  color:#000; min-width:220px; max-width:94vw;
}
.win95-titlebar{
  background:linear-gradient(90deg,#000428,#0090a8);
  color:#fff; font-size:9px; padding:6px 6px; display:flex; align-items:center;
  gap:6px; cursor:grab; letter-spacing:1px; user-select:none;
  border-bottom:1px solid #000; touch-action:none;
}
.win95-titlebar:active{ cursor:grabbing; }
.win95-titlebar .spacer{ flex:1; }
.win95-ctrl{
  width:24px; height:22px; background:#000; color:#00eaff; font-size:15px; font-weight:bold;
  border-top:2px solid var(--win-hi); border-left:2px solid var(--win-hi);
  border-right:2px solid var(--win-shadow); border-bottom:2px solid var(--win-shadow);
  display:flex; align-items:center; justify-content:center; line-height:0;
  text-shadow:0 0 6px currentColor; animation:ctrl-neon-cycle 4s linear infinite;
}
.win95-ctrl:hover{ background:var(--neon); color:#000; text-shadow:none; animation-play-state:paused; }
@keyframes ctrl-neon-cycle{ from{ filter:hue-rotate(0deg); } to{ filter:hue-rotate(360deg); } }
.win95-body{ padding:10px; font-size:9px; line-height:1.8; background:#dcdcdc; max-height:70vh; overflow:auto; }
.win95-window.minimized .win95-body{ display:none; }
.win95-window.closed{ display:none; }

/* generic content styles inside windows */
.win95-body h3{ font-size:10px; margin:0 0 8px; color:#003; }
.win95-body a.link-row{ display:block; margin:4px 0; word-break:break-all; color:#0000cc; }
.mono{ font-family:'Courier New',monospace; font-size:9px; word-break:break-all; }
.thumb-placeholder{
  width:100%; aspect-ratio:1; background:
    repeating-linear-gradient(45deg,#001a1f,#001a1f 6px,#000 6px,#000 12px);
  border:2px solid var(--neon-dim); display:flex; align-items:center; justify-content:center;
  color:var(--neon); font-size:8px; text-align:center; padding:6px;
}

/* ==================== HOME ==================== */
#matrix-bg{ position:fixed; inset:0; z-index:-1; opacity:.16; background:#000; }
.vox-window{ position:relative; width:min(52vw,340px); margin:0 auto; }
.vox-window .win95-titlebar{ cursor:default; }
.vox-body{ padding:4px; background:#000; }
#home-3d-canvas{ width:100%; height:min(52vw,340px); touch-action:none; }
.home-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:20px; }
.big-btn{
  background:#000; color:var(--neon); border:2px solid var(--neon);
  padding:14px 20px; font-size:10px; letter-spacing:1px;
  animation:big-btn-glow 2.2s ease-in-out infinite;
}
.big-btn:hover{ background:var(--neon); color:#000; box-shadow:0 0 26px var(--neon); animation-play-state:paused; }
@keyframes big-btn-glow{
  0%,100%{ box-shadow:0 0 8px rgba(0,234,255,.35); }
  50%{ box-shadow:0 0 18px rgba(0,234,255,.7); }
}
.proof-form label{ display:block; margin:8px 0 3px; }
.proof-form input, .proof-form textarea{
  width:100%; font-family:var(--font-pixel); font-size:9px; padding:6px;
  border:2px inset #808080; background:#fff;
}
.proof-note{ font-size:8px; color:#333; margin-top:6px; line-height:1.6; }

/* ==================== WORKSHOP ==================== */
.workshop-studio-box{ width:min(50vw,320px); height:min(50vw,320px); margin:0 auto; }
.studio-links{ max-width:640px; margin:14px auto; font-size:9px; line-height:2; background:#dcdcdc; color:#000; border:2px solid var(--win-shadow); padding:14px; }
.studio-links h4{ margin:10px 0 4px; color:#003; font-size:9.5px; }
.studio-links a.link-row{
  display:inline-block; background:#000; color:var(--neon);
  padding:3px 7px; border-radius:2px; margin:3px 0;
}
.studio-links a.link-row:hover{ background:var(--neon); color:#000; }
.copy-chip{ background:var(--win-face); border:1px solid #000; padding:2px 6px; font-size:8px; margin-left:6px; }
.folder-icon-wrap{ display:flex; justify-content:center; margin:24px 0 4px; }
.folder-icon{ display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; width:100px; }
.folder-icon-glyph{ font-size:42px; filter:drop-shadow(0 0 6px var(--neon)); transition:filter .2s ease, transform .2s ease; }
.folder-icon-label{ font-size:7.5px; color:var(--neon); text-align:center; letter-spacing:.5px; line-height:1.6; }
.folder-icon:hover .folder-icon-glyph{ filter:drop-shadow(0 0 14px var(--neon)); transform:scale(1.08); }

/* ==================== MAP ==================== */
#globe-canvas-wrap{ width:min(80vw,560px); height:min(80vw,560px); margin:0 auto; touch-action:none; position:relative; }
#map-card{
  position:fixed; z-index:600; width:240px; display:none;
}
#map-card.show{ display:block; }

.notice-window{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:400; width:min(90vw,420px); display:none;
  box-shadow:4px 4px 0 rgba(0,0,0,.6), 0 0 28px rgba(255,190,0,.5), 0 0 54px rgba(255,190,0,.2);
}
.notice-window.show{ display:block; }
.notice-body{ background:#fdfdea; color:#000; }
.notice-heading{ font-weight:bold; margin:0 0 8px; font-size:9px; color:#7a4b00; }
.notice-body pre{
  white-space:pre-wrap; font-family:'Courier New',monospace; font-size:8.5px;
  line-height:1.7; margin:0;
}

.chat-window{
  position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  z-index:390; width:min(90vw,380px);
}
.chat-body{ display:flex; flex-direction:column; padding:0; background:#000; }
#chat-messages{
  height:200px; overflow-y:auto; padding:8px; background:#050505;
  font-size:8px; line-height:1.6; color:var(--neon-soft);
}
.chat-msg-item{ margin-bottom:4px; word-break:break-word; }
.chat-msg-item b{ color:var(--neon); }
.chat-empty{ opacity:.6; text-align:center; padding:20px 8px; }
#chat-form{ display:flex; flex-direction:column; gap:6px; padding:8px; background:#111; border-top:1px solid var(--neon-dim); }
#chat-form input{
  font-family:var(--font-pixel); font-size:8px; padding:6px; background:#000;
  color:var(--neon); border:1px solid var(--neon-dim);
}
.chat-input-row{ display:flex; gap:6px; }
.chat-input-row input{ flex:1; min-width:0; }
.chat-input-row button{
  font-family:var(--font-pixel); font-size:7.5px; padding:6px 10px;
  background:var(--win-face); color:#000; border:1px solid #000; white-space:nowrap;
}
.chat-input-row button:hover{ background:var(--neon); }
.chat-input-row button:disabled{ opacity:.5; cursor:not-allowed; }

/* ==================== ASSETS / EXPLORER ==================== */
.stats-bar{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:12px auto 20px; max-width:900px;
}
.stat-chip{ border:1px solid var(--neon-dim); padding:8px 12px; font-size:8px; text-align:center; }
.stat-chip b{ display:block; font-size:12px; color:var(--neon); }
#assets-progress{ text-align:center; font-size:9px; margin-bottom:10px; color:var(--neon-soft); }
#assets-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px; max-width:1400px; margin:0 auto;
}
.bot-card{
  background:#050505; border:1px solid var(--neon-dim); padding:6px; cursor:pointer; position:relative;
}
.bot-card:hover{ border-color:var(--neon); box-shadow:0 0 12px rgba(0,234,255,.5); }
.bot-card .art{ width:100%; aspect-ratio:1; background:#000; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.bot-card .art canvas, .bot-card .art img{ width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.bot-card .id{ font-size:8px; margin-top:6px; text-align:center; }
.bot-card .badge-demo{ position:absolute; top:2px; right:2px; background:#402; color:#ffb347; font-size:6px; padding:2px 4px; }
.bot-card.skeleton .art{ animation:pulse 1.4s infinite; }
@keyframes pulse{ 0%,100%{opacity:.35;} 50%{opacity:.7;} }

.bot-detail-window{
  width:min(92vw,620px); max-height:80vh; overflow:auto;
  box-shadow:4px 4px 0 rgba(0,0,0,.6), 0 0 28px rgba(0,234,255,.45), 0 0 54px rgba(0,234,255,.18);
}
.overlay-content{ display:flex; gap:16px; padding:14px; flex-wrap:wrap; }
.overlay-img{ width:220px; height:220px; background:#000; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.overlay-img img, .overlay-img canvas{ width:100%; height:100%; object-fit:contain; }
.overlay-info{ flex:1; min-width:240px; font-size:9px; line-height:2; }
.overlay-info table{ width:100%; border-collapse:collapse; }
.overlay-info td{ vertical-align:top; padding:2px 4px; border-bottom:1px solid #aaa; }
.overlay-info a.link-row{
  display:inline-block; background:#000; color:var(--neon);
  padding:3px 7px; border-radius:2px; margin:2px 0;
}
.overlay-info a.link-row:hover{ background:var(--neon); color:#000; }
.trait-pill{ display:inline-block; background:#000; color:var(--neon); border:1px solid var(--neon-dim); padding:2px 6px; margin:2px; font-size:7.5px; }

.onchain-data-box{ padding:0 14px 14px; }
.onchain-data-box h4{ margin:0 0 6px; font-size:9px; color:#003; }
.onchain-data-box label{ display:block; font-size:7.5px; color:#334; margin:6px 0 3px; letter-spacing:.5px; }
.hex-box{
  width:100%; height:80px; resize:vertical; box-sizing:border-box;
  font-family:'Courier New',monospace; font-size:8px; line-height:1.5;
  background:#000; color:var(--neon); border:2px inset #808080; padding:6px;
  word-break:break-all; white-space:pre-wrap;
}

/* iframe verification popup */
#chain-verify-modal, #traits-modal{ position:fixed; inset:0; z-index:5000; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; }
#chain-verify-modal.show, #traits-modal.show{ display:flex; }
.verify-panel{
  width:min(92vw,900px); height:min(85vh,700px); background:#000; border:2px solid var(--neon);
  position:relative; display:flex; flex-direction:column;
  box-shadow:0 0 28px rgba(0,234,255,.45), 0 0 54px rgba(0,234,255,.18);
}
.verify-panel iframe{ width:100%; flex:1; border:0; background:#111; }
.verify-fallback-link{
  background:#00131a; color:var(--neon-soft); font-size:7.5px; padding:6px 10px;
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; border-bottom:1px solid var(--neon-dim);
}
.verify-fallback-link a{ color:var(--neon); text-decoration:underline; white-space:nowrap; }
.link-preview{
  display:none; flex:1; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:10px; padding:24px; background:#050505;
}
.link-preview.show{ display:flex; }
.link-preview-icon{ font-size:40px; }
.link-preview p{ max-width:480px; font-size:9px; line-height:1.9; color:var(--neon-soft); }
.link-preview-host{ font-size:8px; color:var(--neon-dim); word-break:break-all; }
.link-preview-btn{ text-decoration:none; }

/* trait rarity database modal */
.traits-panel .win95-body{
  background:#050505; color:var(--neon); overflow:auto; flex:1; padding:12px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; align-content:start;
}
.traits-group{ border:1px solid var(--neon-dim); padding:8px; }
.traits-group h4{ margin:0 0 6px; font-size:9px; color:var(--neon-magenta); }
.traits-group .traits-count{ color:var(--neon-soft); font-weight:normal; }
.traits-table{ width:100%; border-collapse:collapse; font-size:7.5px; }
.traits-table td{ padding:3px 2px; border-bottom:1px solid #113; }
.traits-table td:first-child{ color:#fff; }
.traits-table td:last-child{ text-align:right; color:var(--neon-soft); white-space:nowrap; }
.traits-table tr.rarest td{ color:var(--neon-magenta-soft); }
.traits-table tr[data-trait-type]{ cursor:pointer; }
.traits-table tr[data-trait-type]:hover td{ background:rgba(0,234,255,.15); }

/* trait picker — small grid of matching BOTs, opened from the traits db */
.trait-picker-window{ width:min(90vw,420px); max-height:70vh; overflow:auto; }
.trait-picker-grid{
  background:#050505; padding:10px; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:8px;
}
.trait-picker-item{ cursor:pointer; text-align:center; font-size:7px; color:var(--neon-soft); }
.trait-picker-item img{
  width:100%; aspect-ratio:1; object-fit:cover; border:1px solid var(--neon-dim); display:block; margin-bottom:3px;
}
.trait-picker-item:hover img{ border-color:var(--neon); box-shadow:0 0 8px rgba(0,234,255,.5); }

/* ==================== FLOATING GALLERY (Workshop) ==================== */
.gallery-window{
  position:fixed; top:130px; left:50%; transform:translateX(-50%); z-index:300;
  width:min(64vw,460px); height:min(42vh,380px);
  box-shadow:4px 4px 0 rgba(0,0,0,.6), 0 0 28px rgba(255,45,240,.45), 0 0 54px rgba(255,45,240,.18);
}
.gallery-window.maximized{ width:min(94vw,1000px); height:min(84vh,860px); }
.gallery-window-caption{
  background:#00131a; color:var(--neon-magenta-soft); font-size:7.5px; letter-spacing:.5px;
  padding:5px 10px; border-bottom:1px solid var(--neon-dim);
}
.gallery-window .win95-body{ padding:0; background:#000; max-height:none; overflow:visible; height:calc(100% - 48px); }
#workshop-gallery{
  position:relative; width:100%; height:100%;
  border:1px solid var(--neon-dim); background:rgba(0,20,26,.35); overflow:hidden;
}
#workshop-gallery .gallery-empty-note{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; font-size:8px; color:var(--neon-soft); opacity:.7; padding:24px; line-height:1.8;
}
.float-img{
  position:absolute; width:110px; height:110px; cursor:pointer;
  border:2px solid var(--neon); box-shadow:0 0 10px rgba(0,234,255,.4);
  overflow:hidden; background:#000;
}
.float-img:hover{ box-shadow:0 0 18px var(--neon); z-index:5; }
.float-img img, .float-img video{ width:100%; height:100%; object-fit:cover; image-rendering:pixelated; pointer-events:none; }

#gallery-overlay{
  position:fixed; inset:0; z-index:5000; background:rgba(0,0,0,.92);
  display:none; align-items:center; justify-content:center; padding:24px;
}
#gallery-overlay.show{ display:flex; }
#gallery-overlay-img{ max-width:92vw; max-height:88vh; object-fit:contain; border:2px solid var(--neon); }

/* ==================== CHATBOT (burn-to-resin guide) ==================== */
#chatbot-toggle{
  position:fixed; left:calc(14px + env(safe-area-inset-left)); bottom:calc(32px + env(safe-area-inset-bottom)); z-index:950;
  width:44px; height:44px; border-radius:50%; font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  background:#000; color:var(--neon); border:2px solid var(--neon);
  box-shadow:0 0 10px rgba(0,234,255,.6);
}
#chatbot-toggle:hover{ background:var(--neon); box-shadow:0 0 18px var(--neon); }
#chatbot-panel{
  position:fixed; left:calc(14px + env(safe-area-inset-left)); bottom:calc(88px + env(safe-area-inset-bottom)); z-index:951;
  width:min(92vw,320px); display:none;
}
#chatbot-panel.show{ display:block; }
#chatbot-body{ max-height:min(60vh,420px); overflow:auto; }
.chat-msg{
  background:#fff; color:#000; border:1px solid #000; border-radius:3px;
  padding:8px; margin-bottom:8px; font-size:8.5px; line-height:1.7;
}
.chat-cta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.chat-cta button{
  font-family:var(--font-pixel); font-size:7.5px; padding:6px 8px;
  background:var(--win-face); color:#000;
  border-top:1px solid var(--win-hi); border-left:1px solid var(--win-hi);
  border-right:1px solid var(--win-shadow); border-bottom:1px solid var(--win-shadow);
}
.chat-cta button:hover{ background:var(--neon); }

/* ==================== FOOTER / PERSISTENT ==================== */
#dcot-badge{
  position:fixed; right:calc(14px + env(safe-area-inset-right)); bottom:calc(32px + env(safe-area-inset-bottom)); z-index:950;
  background:#000; border:2px solid var(--neon); color:var(--neon);
  padding:8px 12px; font-size:9px; text-decoration:none; letter-spacing:1px;
  box-shadow:0 0 10px rgba(0,234,255,.6);
}
#dcot-badge:hover{ background:var(--neon); color:#000; }
#signoff{
  position:fixed; left:0; right:0; bottom:0; z-index:400;
  text-align:center; font-size:7px; letter-spacing:1px; color:var(--neon-dim);
  background:#000; border-top:1px solid var(--neon-dim);
  padding:4px 4px calc(4px + env(safe-area-inset-bottom));
}

/* generic modal (proof of possession) */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:5000; display:none; align-items:center; justify-content:center; padding:14px;}
.modal-backdrop.show{ display:flex; }

/* responsive */
@media (max-width:760px){
  .brand{ font-size:9px; }
  .nav-btn, .icon-btn{ font-size:8px; padding:10px 10px; }
  .section-header h1{ font-size:12px; }
  .vox-window{ width:64vw; }
  #home-3d-canvas{ height:64vw; }
  .gallery-window{ width:88vw; height:min(50vh,380px); }
  .big-btn{ padding-top:8px; padding-bottom:8px; }
  #globe-canvas-wrap{ width:88vw; height:88vw; }
  #map-card{ left:6vw !important; right:6vw; width:auto; }
  .win95-ctrl{ width:30px; height:28px; font-size:16px; }
  .copy-chip{ padding:6px 10px; }
  .chat-input-row button, #chat-form input, .chat-cta button{ padding:10px; }
  .folder-icon{ width:80px; }
  .folder-icon-glyph{ font-size:36px; }
}