* { margin:0; padding:0; box-sizing:border-box; }
body { background:#0a0a12; color:#ccc; font-family:'Segoe UI',sans-serif; overflow:hidden; height:100vh; display:flex; flex-direction:column; }

/* Top bar */
.topbar { display:flex; align-items:center; justify-content:space-between; padding:6px 16px; background:#12121e; border-bottom:1px solid #2a2a3a; font-size:13px; flex-shrink:0; }
.topbar-left { display:flex; gap:16px; align-items:center; }
.topbar-right { display:flex; gap:16px; align-items:center; }
.epoch-badge { background:#2a1a3a; color:#b88aff; padding:2px 10px; border-radius:10px; font-weight:600; }
.pop-badge { color:#88cc88; }
.tick-badge { color:#8888aa; }
.viewers-badge { color:#88aacc; }
.storage-line { color:#ccaa44; font-size:12px; }

/* Main area */
.main { display:flex; flex:1; overflow:hidden; }

/* Canvas area */
.canvas-wrap { flex:1; position:relative; overflow:hidden; background:#0e0e16; }
.canvas-wrap canvas { image-rendering:pixelated; display:block; }

/* Right panel */
.panel { width:240px; background:#10101c; border-left:1px solid #2a2a3a; display:flex; flex-direction:column; flex-shrink:0; }
.panel-section { padding:12px; border-bottom:1px solid #1e1e2e; }
.panel-title { font-size:11px; text-transform:uppercase; color:#666; letter-spacing:1px; margin-bottom:8px; }

/* God controls */
.god-status { text-align:center; margin-bottom:8px; }
.god-status .free { color:#44cc66; font-weight:600; }
.god-status .taken { color:#cc8844; }
.god-btn { display:block; width:100%; padding:10px; margin-bottom:6px; border:none; border-radius:6px; cursor:pointer; font-size:13px; font-weight:600; transition:all 0.2s; background:linear-gradient(135deg,#3a6adb,#5a3adb); color:#fff; }
.god-btn:hover { background:linear-gradient(135deg,#4a7aeb,#6a4aeb); }

.god-commands { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.cmd-btn { padding:6px 4px; border:1px solid #2a2a3a; border-radius:4px; background:#1a1a28; color:#aaa; font-size:11px; cursor:pointer; text-align:center; transition:all 0.15s; }
.cmd-btn:hover { background:#2a2a3e; color:#ddd; border-color:#4a4a6a; }
.cmd-btn.active { border-color:#5a8aff; color:#5a8aff; background:#1a1a30; }
.cmd-btn .icon { font-size:16px; display:block; margin-bottom:2px; }

/* Entity card */
.entity-card { background:#1a1a2a; border-radius:6px; padding:10px; }
.entity-name { font-weight:600; color:#e8c87a; margin-bottom:4px; }
.entity-stat { display:flex; justify-content:space-between; font-size:11px; margin:2px 0; }
.entity-stat .label { color:#777; }
.subtitle { color:#555; font-size:12px; text-align:center; padding:8px 0; }
.bar { height:4px; border-radius:2px; background:#222; margin-top:2px; }
.bar-fill { height:100%; border-radius:2px; }
.bar-health .bar-fill { background:linear-gradient(90deg,#cc3333,#44cc44); }
.bar-hunger .bar-fill { background:linear-gradient(90deg,#44cc44,#ccaa33); }
.entity-task { font-size:11px; color:#5a8aff; margin-top:6px; }

/* Tech tree mini */
.tech-item { display:flex; align-items:center; gap:6px; font-size:11px; margin:3px 0; }
.tech-done { color:#44cc66; }
.tech-current { color:#ccaa44; }
.tech-locked { color:#444; }
.tech-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.tech-dot.done { background:#44cc66; }
.tech-dot.current { background:#ccaa44; box-shadow:0 0 6px #ccaa44; }
.tech-dot.locked { background:#333; }
.tech-progress { height:3px; background:#222; border-radius:2px; margin-top:2px; flex:1; }
.tech-progress-fill { height:100%; background:#ccaa44; border-radius:2px; }

/* Event log */
.log { flex-shrink:0; background:#0c0c16; border-top:1px solid #2a2a3a; padding:8px 16px; max-height:120px; overflow-y:auto; }
.log-line { font-size:12px; padding:2px 0; color:#888; border-bottom:1px solid #14141e; }
.log-line .time { color:#555; margin-right:8px; font-size:10px; }
.log-line.important { color:#ccaa44; }
.log-line.birth { color:#88cc88; }
.log-line.death { color:#cc5555; }
.log-line.tech { color:#b88aff; }
.log-line.gather { color:#8ab4f8; }

/* Weather badge */
.weather-badge { font-weight:600; font-size:12px; padding:2px 8px; border-radius:10px; background:#1a1a2a; }

/* Era badge variants */
.epoch-badge.era-stone { background:#3a3a4a; color:#aaa; }
.epoch-badge.era-bronze { background:#4a3a1a; color:#dda644; }
.epoch-badge.era-iron { background:#1a2a4a; color:#6aacdd; }

/* Population trend arrows */
.pop-trend-up { color:#44cc44; font-weight:bold; }
.pop-trend-down { color:#cc4444; font-weight:bold; }
.pop-trend-stable { color:#cccc44; font-weight:bold; }

/* Epoch timeline bar */
#epoch-timeline { height:4px; background:#1a1a28; position:relative; flex-shrink:0; }
#epoch-timeline-fill { height:100%; width:0%; transition:width 0.3s ease; border-radius:0 2px 2px 0; }
.epoch-timeline-marker { position:absolute; top:-2px; width:4px; height:8px; background:#b88aff; border-radius:2px; transform:translateX(-50%); pointer-events:none; }

/* Tech notification */
#tech-notification {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:100; pointer-events:none;
  text-align:center; font-weight:700;
  opacity:0; visibility:hidden;
  text-shadow: 0 0 20px rgba(0,0,0,0.8);
}
#tech-notification.show {
  visibility:visible;
  animation: tech-notify 3s ease-out forwards;
}
#tech-notification.era-transition {
  font-size:28px;
}
@keyframes tech-notify {
  0% { opacity:0; transform:translate(-50%,-50%) scale(0.8); }
  10% { opacity:1; transform:translate(-50%,-50%) scale(1.05); }
  15% { transform:translate(-50%,-50%) scale(1); }
  70% { opacity:1; }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1); }
}

/* God button flash */
@keyframes god-flash { 0%{box-shadow:0 0 0 0 rgba(90,58,219,0.7)} 70%{box-shadow:0 0 0 10px rgba(90,58,219,0)} 100%{box-shadow:0 0 0 0 rgba(90,58,219,0)} }
.god-btn-flash { animation:god-flash 0.6s ease-out; }

/* Minimap */
.minimap { position:absolute; bottom:8px; left:8px; width:128px; height:128px; border:1px solid #2a2a3a; border-radius:4px; overflow:hidden; opacity:0.85; }
.minimap canvas { width:100%; height:100%; image-rendering:pixelated; }

/* Tooltip on hover */
.tile-tooltip { position:absolute; background:#1a1a2aee; border:1px solid #3a3a5a; border-radius:4px; padding:6px 10px; font-size:11px; pointer-events:none; display:none; z-index:10; }

/* === Mobile responsive === */
@media (max-width: 768px) {
  .main { flex-direction: column; }
  .panel {
    width: 100%; height: auto; max-height: 35vh;
    border-left: none; border-top: 1px solid #2a2a3a;
    overflow-y: auto; flex-shrink: 0;
  }
  .canvas-wrap { flex: 1; min-height: 40vh; }
  .topbar { padding: 4px 8px; font-size: 11px; flex-wrap: wrap; gap: 4px; }
  .topbar-left { gap: 8px; }
  .topbar-right { gap: 8px; }
  .log { max-height: 80px; padding: 4px 8px; }
  .log-line { font-size: 11px; }
  .minimap { width: 80px; height: 80px; bottom: 4px; left: 4px; }
  .god-commands { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .cmd-btn { padding: 8px 2px; font-size: 10px; }
  .cmd-btn .icon { font-size: 18px; }
  .panel-section { padding: 8px; }
  .entity-card { padding: 8px; }
  .storage-line { display: none; }
}

@media (max-width: 480px) {
  .topbar { font-size: 10px; }
  .epoch-badge { font-size: 10px; padding: 1px 6px; }
  .god-commands { grid-template-columns: 1fr 1fr; }
  .panel { max-height: 40vh; }
  .minimap { width: 60px; height: 60px; }
}

/* Prevent text selection on touch drag */
.canvas-wrap { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }