: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;
  cursor: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='3,2 3,20 8,15.5 11,22 14.5,20.5 11.5,14 19,13.5' fill='%2339ff14' stroke='%23000000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, auto;
}
/* Bright-green/black pointer (desktop only, mobile has no real cursor);
   inverts to black-fill/green-stroke over anything clickable, so hover
   state is unmistakable at a glance. */
@media (hover:hover) and (pointer:fine){
  button, a, select, input[type=submit], input[type=button], label[for],
  .nav-btn, .icon-btn, .big-btn, .win95-ctrl, .popup-link, .copy-chip,
  .folder-icon, .bot-card, .float-img, .trait-picker-item, .chrome-select{
    cursor: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='3,2 3,20 8,15.5 11,22 14.5,20.5 11.5,14 19,13.5' fill='%23000000' stroke='%2339ff14' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, pointer;
  }
}
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-entry-links button.deep-link-target{
  background:var(--neon); color:#000; box-shadow:0 0 10px var(--neon), 0 0 20px var(--neon);
}

.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;
}

/* ==================== MOBILE SCROLL INDICATOR ==================== */
#mobile-scroll-track{
  display:none; position:fixed; top:0; right:0; width:7px; height:100vh; z-index:500;
  background:rgba(0,234,255,.10); pointer-events:none;
}
#mobile-scroll-thumb{
  position:absolute; left:0; right:0; top:0; height:40px;
  background:var(--neon); box-shadow:0 0 8px var(--neon), 0 0 14px rgba(0,234,255,.7);
  border-radius:3px;
}
@media (max-width:760px){
  #mobile-scroll-track{ display:block; }
}

/* Per-window scroll indicator (mobile only) — the page-level bar above
   covers scrolling the whole page; this is the same idea for scrolling
   inside an individual window (BOT card, traits list, chat...), placed on
   the LEFT edge so the two are never confused for each other. Draggable
   with a finger, not just a passive readout. */
.mobile-win-scroll-track{
  display:none; position:absolute; left:2px; width:6px; z-index:5; pointer-events:none;
}
.mobile-win-scroll-thumb{
  position:absolute; left:0; width:6px; height:30px; top:0;
  background:var(--neon); box-shadow:0 0 6px var(--neon), 0 0 10px rgba(0,234,255,.6);
  border-radius:3px; pointer-events:auto; touch-action:none;
}
@media (max-width:760px){
  .mobile-win-scroll-track{ display:block; }
}

/* ==================== 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(78vw,380px); max-height:70vh; overflow:auto; 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(78vw,340px);
}
.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{
  position:fixed;
  width:min(80vw,420px); max-height:64vh; 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:960; 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(80vw,560px); height:min(66vh,480px); 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-shot{
  max-width:100%; max-height:220px; object-fit:contain; border:1px solid var(--neon-dim);
  box-shadow:0 0 14px rgba(0,234,255,.35);
}
.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{ position:fixed; width:min(72vw,300px); max-height:55vh; 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:960; 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:960; 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:78vw; height:min(42vh,340px); }
  .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; }
}