html, body { margin:0; padding:0; overflow:hidden; background:#050208; height:100%; font-size:16px;}
#stage { position:fixed; inset:0; }
canvas { display: block; }

ul{
  padding-left:10px;
}
li{
  inset: 10px;
  list-style-position: outside;
}

/* ── base UI ──────────────────────────────────────────────── */
.ui { position:fixed; color:#E8E4FF; pointer-events:none; user-select:none; }
.ui-ol {
  top:30px; left:34px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.title {
  font-family:'Optima','Futura','Century Gothic',sans-serif;
  font-weight:300; text-transform:uppercase; letter-spacing:6px;
  font-size:150%; opacity:.9;
}
.subtitle {
  font-family:'Optima','Futura','Century Gothic',sans-serif;
  font-weight:300; font-size:80%; letter-spacing:1px; opacity:.8;
}
.stats {
  bottom:30px; left:34px;
  font-family:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  font-size:80%; line-height:1.5; opacity:.8; white-space:pre;
}
.stats .k { opacity:.5; display:inline-block; width:64px; }
.depth {
  display: inline-block;
  align-self: flex-end;
  margin-bottom:40px;
  margin-right:20px;
  text-align:right; white-space:pre-line;
  font-family:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  font-size:80%; line-height:1.5; opacity:.7;
}
.depth .big { font-size:100%; opacity:.95; letter-spacing:1px; }
.depth-wrapper {
  display: flex;
  flex-direction: row-reverse;
  gap: 4px;
}
.legend {
  background:rgba(15,10,30,0.95);
  border:1px solid rgba(232,228,255,0.15);
  border-radius:12px; padding:24px 32px;
  text-align:left;
  font-family:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  font-size:80%; line-height:1.3; max-width:440px;
  color:#E8E4FF;
  opacity:0; pointer-events:none;
  transition:opacity 0.4s ease;
  max-height: calc(100vh - 480px); 
  overflow-y: auto;
  pointer-events: auto;
  
}


body.info-visible .legend { opacity:.75; }
.category-legend {
  font-family:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  font-size:80%; line-height:1.9; opacity:.8;
}
.category-legend .row { display:flex; align-items:center; gap:8px; }
.category-legend .swatch {
  display:inline-block; width:16px; height:16px; border-radius:50%;
  flex:none;
  filter: brightness(1.5) saturate(1.4);
}
.live {
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:#FFD166; margin-right:8px;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.3;} 50%{opacity:1;} }
@media (prefers-reduced-motion: reduce) { .live { animation:none; opacity:.8; } }
.tooltip {
  position:fixed; display:none; pointer-events:none; z-index:10;
  font-family:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  font-size:10px; line-height:1.7; color:#E8E4FF; white-space:pre;
  background:rgba(10,8,20,.85); border:1px solid rgba(232,228,255,.15);
  border-radius:6px; padding:8px 12px;
}
.tooltip .k { opacity:.5; display:inline-block; width:48px; }

/* ── buttons ──────────────────────────────────────────────── */
.btn-container {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}
.now-btn, .timetravel-btn, .color-mode-btn {
  background: rgba(4,0,27,0.7);
  border: 1px solid rgba(232,228,255,0.3);
  border-radius: 20px;
  padding: 8px 20px;
  color: #E8E4FF;
  font-family: 'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  font-size: 80%;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.7;
}
.now-btn:hover, .timetravel-btn:hover, .color-mode-btn:hover {
  background: rgba(232,228,255,0.2);
  border-color: rgba(232,228,255,0.5);
  opacity: 1;
}
.now-btn:active, .timetravel-btn:active, .color-mode-btn:active {
  transform: scale(0.95);
}
.timetravel-btn.active, .color-mode-btn.active {
  background: rgba(255,209,102,0.2);
  border-color: rgba(255,209,102,0.5);
  color: #FFD166;
  opacity: 1;
}
.now-btn.inactive, .timetravel-btn.inactive, .color-mode-btn.inactive,
.now-btn:disabled, .timetravel-btn:disabled, .color-mode-btn:disabled {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}

/* Zen-mode collapsible elements — simple fade transition */
#colorModeBtn, #paletteBtn, #rainbowBtn, #fullscreenBtn, #infoBtn, .ui.depth {
  transition: opacity 0.4s ease;
}
.timetravel-group { display: flex; align-items: center; gap: 8px; }
.speed-group {
  display: flex; gap: 4px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(232,228,255,0.15);
  border-radius: 16px; padding: 3px;
}
.speed-btn {
  background: transparent; border: none; border-radius: 13px;
  padding: 5px 6px; color: #E8E4FF;
  font-family: 'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  font-size: 10px; letter-spacing: .5px; cursor: pointer;
  transition: all 0.2s ease; opacity: 0.5;
}
.speed-btn:hover { opacity: 0.85; }
.speed-btn.active { background: rgba(255,209,102,0.22); color: #FFD166; opacity: 1; }

/* ── Mute Button ──────────────────────────────────────────── */
#muteBtn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(4,0,27,0.7);
  border: 1px solid rgba(232,228,255,0.3);
  color: #E8E4FF;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#muteBtn:hover {
  background: rgba(232,228,255,0.2);
  border-color: rgba(232,228,255,0.5);
  opacity: 1;
}
#muteBtn:active {
  transform: scale(0.95);
}
#muteBtn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ZEN mode */
body.zen .ui.stats, body.zen .ui.subtitle, body.zen .legend, body.zen .category-legend, body.zen .tooltip {
  opacity: 0 !important; pointer-events: none !important; transition: opacity 0.6s ease;
}
body.zen .ui.depth, body.zen #colorModeBtn, body.zen #paletteBtn, body.zen #rainbowBtn, body.zen #fullscreenBtn, body.zen #infoBtn, body.zen #muteBtn {
  display: none !important;
}
body.zen #wallet-badge, body.zen #footer-info {
  opacity: 0 !important; pointer-events: none !important;
  transition: opacity 0.6s ease;
}
body.zen .ui.title, body.zen #nowBtn, body.zen #timetravelBtn, body.zen .speed-group, body.zen #zenBtn {
  opacity: 1 !important; pointer-events: auto !important;
}

/* ── Baker Legend Modal ───────────────────────────────────── */
.baker-legend-overlay {
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:rgba(5,2,8,0.85);
  opacity:0; pointer-events:none;
  transition: opacity 0.3s ease;
}
.baker-legend-overlay.visible { opacity:1; pointer-events:auto; }
.baker-legend-panel {
  background:rgba(15,10,30,0.95);
  border:1px solid rgba(232,228,255,0.15);
  border-radius:12px; padding:24px 32px;
  max-height:70vh; overflow-y:auto;
  font-family:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  font-size:80%; color:#E8E4FF;
}
.baker-legend-panel h3 { margin:0 0 16px; font-weight:400; letter-spacing:2px; text-transform:uppercase; color:#FFD166; }
.baker-legend-panel .row { display:flex; align-items:center; gap:10px; padding:3px 0; }
.baker-legend-panel .swatch { display:inline-block; width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.baker-legend-panel .baker-name { opacity:0.8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px; }

/* ── Navigate Modal ───────────────────────────────────────── */
.navigate-overlay {
  position:fixed; inset:0; z-index:150;
  display:flex; align-items:center; justify-content:center;
  background:rgba(5,2,8,0.85);
  opacity:0; pointer-events:none;
  transition: opacity 0.3s ease;
}
.navigate-overlay.visible { opacity:1; pointer-events:auto; }
.navigate-panel {
  background:rgba(15,10,30,0.97);
  border:1px solid rgba(232,228,255,0.15);
  border-radius:12px; padding:28px 32px 24px;
  width:340px;
  font-family:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  font-size:80%; color:#E8E4FF;
}
.navigate-panel h3 {
  margin:0 0 20px; font-weight:400; letter-spacing:2px;
  text-transform:uppercase; color:#FFD166; text-align:center;
}
.navigate-body { margin-bottom:20px; }
.navigate-field { margin-bottom:16px; }
.navigate-field label {
  display:flex; align-items:center; gap:6px;
  margin-bottom:6px;
  font-size:70%; opacity:0.5; letter-spacing:1px; text-transform:uppercase;
}
.calendar-icon {
  flex-shrink:0;
}
.navigate-field input[type="number"],
.navigate-field input[type="datetime-local"] {
  width:100%; box-sizing:border-box;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(232,228,255,0.2);
  border-radius:8px; padding:10px 12px;
  color:#E8E4FF; font-family:inherit; font-size:90%;
  outline:none; transition: border-color 0.2s ease;
  color-scheme: dark;
}
.navigate-field input:focus {
  border-color:rgba(255,209,102,0.5);
}
/* Remove number input spinners */
.navigate-field input[type="number"]::-webkit-inner-spin-button,
.navigate-field input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
.navigate-field input[type="number"] { -moz-appearance: textfield; appearance: textfield;}
/* datetime-local calendar icon visibility */
.navigate-field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) saturate(3) hue-rotate(180deg);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.navigate-field input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
.navigate-hint {
  display:block; margin-top:6px;
  font-size:70%; opacity:0.5; min-height:1em;
}
.navigate-actions {
  display:flex; gap:10px; justify-content:center;
}
.navigate-btn {
  background:rgba(232,228,255,0.1);
  border:1px solid rgba(232,228,255,0.3);
  border-radius:16px; padding:8px 24px;
  color:#E8E4FF; font-family:inherit; font-size:80%;
  letter-spacing:2px; cursor:pointer;
  transition: all 0.2s ease; opacity:0.8;
}
.navigate-btn:hover { background:rgba(232,228,255,0.2); opacity:1; }
.navigate-btn:active { transform:scale(0.95); }
.navigate-cancel {
  opacity:0.4;
}
.navigate-cancel:hover { opacity:0.7; }

/* ── Save Toast ───────────────────────────────────────────── */
.save-toast {
  position:fixed; top:20px; left:50%; transform:translateX(-50%);
  background:rgba(10,8,20,0.9); border:1px solid rgba(255,209,102,0.4);
  color:#FFD166; font-family:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  font-size:80%; padding:8px 20px; border-radius:20px; z-index:200;
  opacity:0; transition:opacity 0.3s ease; pointer-events:none;
}
.save-toast.visible { opacity:1; }

/* ── loading indicator ────────────────────────────────────── */
#loadingIndicator {
  position: fixed;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#loadingIndicator.visible {
  opacity: 1;
}
.loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(232,228,255,0.15);
  border-top-color: #FFD166;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.loading-text {
  font-family: 'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  font-size: 80%;
  color: #E8E4FF;
  opacity: 0.7;
  letter-spacing: 1px;
}

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 1210px) {
  .btn-container {
    flex-direction: column-reverse; align-items: flex-end;
    right: 18px; left: auto; bottom: 30px; transform: none; gap: 12px;
  }
  .timetravel-group { gap: 8px; }
  .legend{
    padding:15px 18px;
  }
}
@media (max-width: 800px) {
  body { font-size: 2vmin; }
  .ui-ol { gap: 1vh; }
  .category-legend .swatch { width: 2vmin; height: 2vmin; }
  .legend {
    max-height: calc(30vh); 
    max-width: 300px;
    
  }
  
}

/* ── LANDING PAGE SPECIFIC ────────────────────────────────── */
#wallet-badge {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
#wallet-badge button {
  background: rgba(255,209,102,0.12);
  border: 1px solid rgba(255,209,102,0.4);
  border-radius: 18px;
  padding: 6px 16px;
  color: #FFD166;
  font-family: 'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  font-size: 70%;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
}
#wallet-badge button:hover {
  background: rgba(255,209,102,0.22);
  border-color: rgba(255,209,102,0.7);
}
#wallet-badge button:disabled {
  opacity: 0.3;
  cursor: default;
}
#wallet-badge .status {
  font-family: 'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  font-size: 80%;
  color: #E8E4FF;
  opacity: 0.5;
  pointer-events: none;
}
#non-owner-toast {
  position: fixed;
  top: 80px;
  right: 30px;
  z-index: 500;
  background: rgba(10,8,20,0.9);
  border: 1px solid rgba(232,228,255,0.15);
  border-radius: 12px;
  padding: 10px 20px;
  font-family: 'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  font-size: 100%;
  color: #E8E4FF;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  text-align: center;
  line-height: 1.6;
}
#non-owner-toast.visible {
  opacity: 1;
  pointer-events: auto;
}
#non-owner-toast a {
  color: #FFD166;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,209,102,0.3);
}
#non-owner-toast a:hover {
  border-color: #FFD166;
}
/* Footer info */
#footer-info {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  font-size: 65%;
  color: #E8E4FF;
  opacity: 0.3;
  text-align: center;
  z-index: 501;
}
#footer-info a {
  color: #E8E4FF;
  opacity: 0.6;
  text-decoration: none;
}
#footer-info a:hover { opacity: 1; }