/* SEEDLIFE - interface styling */
:root {
  --bg: #131a22;
  --panel: #1b2430;
  --panel-2: #222e3d;
  --line: #2e3d4f;
  --text: #e8eef4;
  --muted: #93a5b8;
  --accent: #8fd48a;
  --accent-2: #79e0d8;
  --danger: #e05a5a;
  --radius: 10px;
  font-size: 15px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#app { position: fixed; inset: 0; }
#game-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  user-select: none;
  cursor: crosshair;
  z-index: 0;
}

#app > :not(#game-canvas) { position: absolute; }

/* ---------- top bar ---------- */
.topbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: linear-gradient(180deg, rgba(19,26,34,0.92), rgba(19,26,34,0.65) 70%, transparent);
  z-index: 20;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand {
  font-weight: 800; letter-spacing: 2.5px; font-size: 15px;
  display: flex; align-items: center; gap: 8px;
}
.brand-mark {
  width: 14px; height: 14px; border-radius: 50% 50% 50% 0;
  background: linear-gradient(135deg, #8fd48a, #4d9e4f);
  box-shadow: 0 0 8px rgba(143, 212, 138, 0.7);
}
.top-stats { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.chip {
  background: rgba(34, 46, 61, 0.85);
  border: 1px solid var(--line);
  padding: 4px 10px;
  font-size: 12.5px;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.chip b { color: var(--text); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.top-actions { display: flex; gap: 6px; align-items: center; }

.btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: #2c3c50; }
.btn.on { background: #2f4a3a; border-color: var(--accent); color: var(--accent); }
.btn.small { padding: 5px 10px; font-size: 12.5px; }
.btn.tiny { padding: 3px 8px; font-size: 12px; }
.btn.primary { background: #2f5a3a; border-color: var(--accent); color: #d7f0d2; font-weight: 600; }
.btn.primary:hover { background: #356943; }
.tax-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tax-controls button {
  min-width: 32px;
}

#tax-rate-display {
  min-width: 40px;
  text-align: center;
}

.mood-indicator {
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
}

.btn.danger { color: #e8a0a0; }
.speed-group { display: flex; }
.speed-group .btn { border-radius: 0; border-right-width: 0; }
.speed-group .btn:first-child { border-radius: 4px 0 0 4px; }
.speed-group .btn:last-child { border-radius: 0 4px 4px 0; border-right-width: 1px; }
.speed.active { background: #2f4a3a; color: var(--accent); }

/* ---------- belief & alignment ---------- */
.chip.wide { gap: 8px; padding: 4px 10px; }
.mana-label, .align-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.mana-bar, .align-bar {
  display: inline-block; width: 74px; height: 8px; background: #24303f;
  border-radius: 4px; overflow: hidden; position: relative;
}
.mana-fill { display: block; height: 100%; background: linear-gradient(90deg, #4a90c2, #79e0d8); transition: width 0.3s; }
.align-fill { display: block; height: 100%; transition: width 0.4s, background 0.4s; }
#mana-val { font-size: 11.5px; color: var(--text); min-width: 20px; text-align: right; }
.cost-tag {
  margin-left: auto; font-size: 11px; color: #79e0d8;
  background: rgba(121, 224, 216, 0.12);
  padding: 1px 7px; border-radius: 8px;
}
.miracle-note { font-size: 11.5px; color: var(--muted); font-style: italic; padding: 6px 10px; max-width: 220px; }

/* life cooldown fill on the tool button */
.tool-cooldown {
  position: absolute; left: 0; bottom: 0; height: 3px;
  width: var(--fill, 0%);
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.5s;
}
.tool-btn { position: relative; }
.tool-btn.cooling .tool-icon { opacity: 0.35; }

/* ---------- Age-of-Empires style resource bar ---------- */
.resource-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(24, 32, 43, 0.9);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 10px;
}
.resource {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 0 8px;
  border-right: 1px solid #2a3848;
}
.resource:last-child { border-right: none; }
.resource b { font-weight: 700; }
.res-icon { display: inline-block; width: 12px; height: 12px; flex: none; }
.res-icon.food { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #a8d97a, #4d8e3f); }
.res-icon.wood { border-radius: 3px; background: linear-gradient(135deg, #c99a6a, #8a5a32); }
.res-icon.pop { border-radius: 50% 50% 50% 0; background: #e8eef4; }
.res-icon.worker { border-radius: 2px; background: linear-gradient(180deg, #e8eef4 55%, #93a5b8 55%); }
.res-icon.belief { border-radius: 50%; background: radial-gradient(circle at 40% 40%, #b8f0ea, #3a9a90); }

/* people items palette */
.palette-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted); padding: 2px 8px 6px;
}
.cost-tag.wood-tag { color: #d9b45a; background: rgba(217, 180, 90, 0.12); }
.pal-preview {
  width: 56px; height: 56px; object-fit: contain;
  background: #22303f; border: 1px solid var(--line);
  border-radius: 6px; margin: 4px 8px 0; align-self: flex-start;
}

/* day dial */
.day-dial { gap: 7px; }
.dial-icon {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  background: conic-gradient(#ffd98a 0deg, rgba(36,48,63,0.9) 0deg);
  border: 1px solid #3a4a5e; flex: none;
  position: relative;
}
.dial-icon::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: #ffd98a;
}
.dial-icon.night::after { background: #a8c5e8; }
.belief-counter b { color: var(--accent-2); }
.mat-icon.iron { border-radius: 2px; background: linear-gradient(135deg, #c9c9d4, #7a7a8a); }
.mat-icon.clay { border-radius: 50% 50% 50% 0; background: #b0714a; }
.mat-icon.steel { border-radius: 2px; background: linear-gradient(135deg, #e8e8f0, #505060); box-shadow: inset 0 0 3px rgba(255,255,255,0.5); }
.mat-icon.wool { border-radius: 50%; background: #f5f5dc; }
.mat-icon.gold { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1a8, #d89b28 65%, #8f5e15); }
.mat-icon.time { border-radius: 50%; background: linear-gradient(180deg, #ffd700 0%, #ffd700 50%, #4a4a6a 50%, #4a4a6a 100%); }

/* placement confirm bar */
.confirmbar {
  position: absolute; bottom: 46px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  background: rgba(24, 32, 43, 0.95);
  border: 1px solid var(--accent);
  border-radius: 8px; padding: 8px 14px;
  z-index: 30; font-size: 13px;
}
.confirmbar.hidden { display: none; }
.confirmbar #confirm-text { color: var(--text); max-width: 380px; }

/* hide palette when placing */
.palette.placing { display: none !important; }

/* material counter (replaces minimap) */
.materials {
  position: absolute; right: 12px; bottom: 40px;
  background: rgba(24, 32, 43, 0.92);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  z-index: 18;
  min-width: 168px;
}
.mat-row { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: 12px; }
.mat-label { color: var(--muted); width: 32px; }
.mat-row b { min-width: 44px; text-align: right; font-size: 11.5px; }
.mat-icon { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mat-icon.food { background: radial-gradient(circle at 35% 35%, #a8d97a, #4d8e3f); }
.mat-icon.wood { border-radius: 2px; background: linear-gradient(135deg, #c99a6a, #8a5a32); }
.mat-bar { flex: 1; height: 6px; background: #24303f; border-radius: 3px; overflow: hidden; }
.mat-fill { display: block; height: 100%; transition: width 0.4s; }
.mat-fill.food { background: linear-gradient(90deg, #6aa86f, #8fd48a); }
.mat-fill.wood { background: linear-gradient(90deg, #a87848, #d9b45a); }
@media (max-width: 900px) {
  .materials { right: 8px; bottom: 116px; min-width: 140px; padding: 6px 9px; }
}

/* god hand cursor aura */
.hand-aura { pointer-events: none; }

/* ---------- tool rail ---------- */
.toolrail {
  position: absolute; left: 12px; top: 64px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 20;
}
.tool-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 62px; padding: 8px 4px;
  background: rgba(27, 36, 48, 0.92);
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.tool-btn:hover { color: var(--text); border-color: #3d5066; }
.tool-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(47, 74, 58, 0.92); }
.tool-icon { width: 20px; height: 20px; border-radius: 4px; position: relative; background: currentColor; opacity: 0.85; }
.tool-label { font-size: 10.5px; letter-spacing: 0.3px; }
.ti-inspect { border-radius: 50%; background: transparent; border: 2.5px solid currentColor; }
.ti-pan { border-radius: 50%; background: transparent; border: 2.5px solid currentColor; }
.ti-pan::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: currentColor; }
.ti-spawn { border-radius: 50% 50% 50% 0; background: #8fd48a; }
.ti-remove { border-radius: 2px; background: #e05a5a; transform: rotate(45deg); }
.ti-paint { border-radius: 0 0 6px 0; background: #4d9e4f; }
.ti-rule { border-radius: 3px; background: #c95fd9; }
.ti-zone { border-radius: 3px; background: transparent; border: 2.5px solid #e8b45a; }
.ti-disaster { border-radius: 50%; background: radial-gradient(circle, #ffd08a 20%, #e05a5a 60%); }
.ti-hand { border-radius: 50% 50% 50% 0; background: transparent; border: 2.5px solid currentColor; transform: rotate(45deg); }
.ti-hand::after { content: ''; position: absolute; left: 4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ti-miracle { border-radius: 50%; background: radial-gradient(circle, #ffe08a 25%, #4a90c2 100%); box-shadow: 0 0 6px rgba(121, 224, 216, 0.6); }

.tag {
  display: inline-block;
  background: rgba(127, 168, 217, 0.2);
  border: 1px solid rgba(127, 168, 217, 0.4);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  margin: 2px;
  color: var(--text);
}

.tax-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tax-controls button {
  min-width: 32px;
}

#tax-rate-display {
  min-width: 40px;
  text-align: center;
}

.mood-indicator {
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
}

.btn.danger {
  background: rgba(224, 90, 90, 0.2);
  border-color: #e05a5a;
  color: #e05a5a;
}

.btn.danger:hover {
  background: #e05a5a;
  color: white;
}

/* ---------- palette ---------- */
.palette {
  position: absolute; left: 82px; top: 64px;
  display: flex; flex-direction: column; gap: 5px;
  background: rgba(27, 36, 48, 0.94);
  border: 1px solid var(--line);
  padding: 10px;
  z-index: 19;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
.palette.hidden { display: none; }
.palette-cancel {
  position: absolute; top: -10px; right: -10px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #2c3c50; color: var(--text);
  border: 1px solid var(--line);
  font-size: 13px; line-height: 1;
  cursor: pointer; z-index: 5;
}
.palette-cancel:hover { background: #e05a5a; border-color: #e05a5a; }
.palette { position: absolute; }
.pal-btn {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid transparent;
  color: var(--text);
  padding: 6px 10px; font-size: 13px;
  cursor: pointer; text-align: left;
  border-radius: 6px;
}
.pal-btn:hover { background: #2c3c50; }
.pal-btn.active { border-color: var(--accent); background: rgba(47, 74, 58, 0.6); }
.pal-dot { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.brush-wrap { display: flex; align-items: center; gap: 8px; padding: 6px 10px; color: var(--muted); font-size: 12.5px; }
.brush-wrap input { width: 90px; accent-color: var(--accent); }
.brush-val { color: var(--text); width: 14px; text-align: center; }

/* ---------- side panel ---------- */
.panel {
  position: absolute; top: 60px; right: 12px; bottom: 44px;
  width: 320px;
  background: rgba(24, 32, 43, 0.95);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  z-index: 20;
  backdrop-filter: blur(6px);
}
.panel.hidden { display: none; }
.panel-tabs { display: flex; border-bottom: 1px solid var(--line); }
.panel-tabs button {
  flex: 1; padding: 10px 4px;
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font-size: 13px; cursor: pointer;
}
.panel-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.panel-body { flex: 1; overflow-y: auto; padding: 12px; }
.panel-body::-webkit-scrollbar { width: 8px; }
.panel-body::-webkit-scrollbar-thumb { background: #2e3d4f; border-radius: 4px; }

.section-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin: 14px 0 8px; }
.section-title:first-child { margin-top: 0; }
.empty-note { color: var(--muted); font-size: 13px; font-style: italic; padding: 8px 0; }
.era-desc { color: var(--muted); font-size: 13px; margin-bottom: 8px; font-style: italic; }

.story-list { display: flex; flex-direction: column; gap: 4px; }
.story-item { display: flex; gap: 9px; padding: 7px 8px; border-radius: 6px; cursor: pointer; align-items: flex-start; }
.story-item:hover { background: #24303f; }
.story-item.small { cursor: default; padding: 4px 6px; }
.story-item .dot { margin-top: 5px; }
.story-text { font-size: 13px; line-height: 1.45; }
.story-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.story-group { border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; background: rgba(18,24,32,0.65); overflow: hidden; }
.story-group summary { cursor: pointer; padding: 8px 10px; font-size: 13px; font-weight: 700; color: var(--text); }
.group-body { display: flex; flex-direction: column; gap: 3px; padding: 0 8px 8px; }
.group-item { display: flex; gap: 8px; padding: 5px 4px; align-items: flex-start; }
.group-item .dot { margin-top: 5px; }

.inspector .agent-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.portrait {
  width: 64px; height: 64px;
  background: #22303f;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: contain;
}
.agent-name { font-size: 17px; font-weight: 700; }
.agent-sub { font-size: 12.5px; color: var(--muted); }
.thought { font-size: 12.5px; color: var(--accent-2); font-style: italic; margin-top: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.trait-chip, .idea-chip {
  font-size: 11px; padding: 3px 8px; border-radius: 10px;
  background: #2c3c50; color: var(--text);
}
.idea-chip { background: #2e3d52; color: #a8c5e8; }
.kv { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; border-bottom: 1px solid #24303f; }
.kv span { color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kv b { font-weight: 600; }

.need-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.need-name { width: 64px; font-size: 12.5px; color: var(--muted); text-transform: capitalize; }
.bar { flex: 1; height: 8px; background: #24303f; border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, #6aa86f, #8fd48a); border-radius: 4px; transition: width 0.4s; }
.bar-fill.low { background: linear-gradient(90deg, #c25a3a, #e08a5a); }
.need-val { width: 26px; text-align: right; font-size: 12px; color: var(--muted); }

.dir-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.directive-note { font-size: 12px; color: var(--muted); font-style: italic; margin-bottom: 8px; }

.seed-input-row { display: flex; gap: 8px; margin-bottom: 6px; }
.seed-input-row input {
  flex: 1; background: #22303f; border: 1px solid var(--line);
  color: var(--text); padding: 8px 10px; font-size: 14px; border-radius: 6px;
}
.seed-input-row input:focus { outline: none; border-color: var(--accent); }
.seed-input-row.big input { font-size: 16px; padding: 12px 14px; }
.seed-row { display: flex; justify-content: space-between; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 6px; }
.seed-actions { display: flex; gap: 4px; }
.seed-actions-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* ---------- hint bar ---------- */
.hintbar {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 9px 14px;
  padding-bottom: max(9px, env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(19,26,34,0.9), transparent);
  font-size: 12.5px; color: var(--muted);
  z-index: 15; pointer-events: none;
}

/* ---------- toast ---------- */
.toast {
  position: absolute; bottom: 56px; left: 50%;
  transform: translate(-50%, 16px);
  background: #2f4a3a; border: 1px solid var(--accent);
  color: #d7f0d2; padding: 10px 18px; border-radius: 8px;
  font-size: 13.5px; opacity: 0; transition: all 0.3s; z-index: 50;
  pointer-events: none; max-width: 80vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- save slots ---------- */
.save-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin: 16px 0;
  max-height: min(46vh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 2px 8px 12px 2px;
  scrollbar-width: thin;
}

.save-slot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  width: 100%;
  background: rgba(24, 32, 43, 0.6);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.save-slot:hover {
  border-color: var(--accent);
  background: rgba(24, 32, 43, 0.8);
}

.save-slot.empty {
  border-style: dashed;
  opacity: 0.6;
}

.slot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.slot-label {
  font-weight: 600;
  color: var(--accent);
}

.slot-era {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
}

.slot-seed {
  font-family: monospace;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 8px;
}

.slot-stats {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
}

.slot-offline {
  font-size: 11px;
  color: #fbbf24;
  margin-top: 8px;
}

.slot-empty-text {
  color: var(--text-dim);
  font-size: 13px;
}

.menu-section {
  margin: 24px 0;
}

.menu-section h3 {
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.new-slot-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.new-slot-picker label {
  font-size: 12px;
  color: var(--text-dim);
}

.slot-btn {
  width: 36px;
  height: 36px;
  border: 2px solid var(--line);
  background: transparent;
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.slot-btn:hover {
  border-color: var(--accent);
}

.slot-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}


/* ---------- confirmation dialog ---------- */
.confirm-warning {
  margin: 24px 0;
}

.confirm-warning p {
  color: var(--text-dim);
  margin-bottom: 12px;
}

.warning-text {
  color: #f87171 !important;
  font-weight: 600;
  margin-top: 16px !important;
}

.existing-world-card {
  background: rgba(24, 32, 43, 0.6);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin: 12px 0;
}

.confirm-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

.btn.danger {
  background: #dc2626;
  border-color: #dc2626;
}

.btn.danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}
.request-scroll { border-color: #d9a95b; color: #ffe1a0; background: #493822; }
.request-scroll.has-requests { animation: requestPulse 1s ease-in-out infinite; }
.request-scroll.hidden { display: none; }
.request-card { border: 1px solid var(--line); background: rgba(24,32,43,.72); padding: 14px; margin: 10px 0; border-radius: 6px; }
.request-card p { color: var(--muted); font-size: 13px; margin: 7px 0; }
.request-card small { color: #fbbf24; }
@keyframes requestPulse { 50% { box-shadow: 0 0 0 3px rgba(217,169,91,.35); } }

/* ---------- offline modal ---------- */
.offline-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s;
}

.offline-modal.gone {
  animation: fadeOut 0.3s;
  opacity: 0;
}

.offline-card {
  background: var(--bg);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 32px;
  max-width: 600px;
  width: 90%;
  max-height: calc(100svh - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: slideUp 0.3s;
}

.offline-card h2 {
  font-size: 24px;
  color: var(--accent);
  margin-bottom: 24px;
}

.offline-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.offline-stat {
  text-align: center;
}

.offline-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.offline-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.offline-events {
  margin: 24px 0;
}

.offline-events h3 {
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 12px;
}

.event {
  background: rgba(24, 32, 43, 0.4);
  border-left: 3px solid var(--line);
  padding: 8px 12px;
  margin: 8px 0;
  font-size: 13px;
}

.event.milestone {
  border-left-color: #4ade80;
}

.event.extinction {
  border-left-color: #f87171;
}

@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- start overlay ---------- */
.start-overlay {
  position: absolute; inset: 0; z-index: 100;
  background: rgba(10, 14, 19, 0.88);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  overflow-y: auto;
  transition: opacity 0.6s;
}
.start-overlay.gone { opacity: 0; pointer-events: none; }
.start-card {
  width: min(680px, 92vw);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin: 20px 0;
}
.start-hero { width: 100%; display: block; aspect-ratio: 3/2; object-fit: cover; }
.start-body { padding: 22px 26px 26px; }
.start-tag { font-size: 17px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.start-desc { font-size: 14px; color: var(--muted); line-height: 1.55; margin-bottom: 16px; }
.start-challenges { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 0; }
.start-challenges .pal-btn { border: 1px solid var(--line); }
.start-hints { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.start-hints div { font-size: 12.5px; color: var(--muted); }
.start-hints b { color: var(--text); }
.title-logo { text-align: center; font-size: 34px; letter-spacing: 6px; margin: 4px 0 20px; color: var(--text); }
.title-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.title-actions.only-actions { margin: 10px auto 4px; max-width: 390px; }
.title-panel { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 12px; }
.title-panel.hidden { display: none; }
.title-panel h3 { color: var(--accent); font-size: 14px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.start-hints.compact { gap: 4px; }
.reborn-card { max-height: calc(100vh - 34px); overflow-y: auto; }
.reborn-card .start-body { min-height: 0; }
.reborn-card #continue-panel { min-height: 0; }
@media (max-width: 900px) {
  .reborn-card { max-height: calc(100svh - 20px); margin: 10px 0; }
  .reborn-card .start-hero { max-height: 24svh; }
  .reborn-card .start-body { padding: 14px 16px 18px; }
  .reborn-card .save-slots { max-height: 42svh; grid-template-columns: 1fr; }
  .reborn-card .save-slot { min-height: 92px; }
}
.simple-title-card .start-body { padding-top: 20px; }
.simple-title-card .start-hero { max-height: 330px; object-fit: cover; }
.btn.large { min-height: 44px; font-size: 15px; }

/* ---------- observer mode ---------- */
body.observer .topbar { opacity: 0.35; transition: opacity 0.4s; }
body.observer .topbar:hover { opacity: 1; }
body.observer .hintbar { display: none; }
body.observer #game-canvas { cursor: default; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  :root { font-size: 14px; }
  .offline-modal { align-items: flex-start; padding: 12px 0; overflow-y: auto; }
  .offline-card { width: min(94vw, 600px); padding: 22px 18px; margin: auto 0; }
  .slot-choice-card .confirm-buttons { position: sticky; bottom: -22px; padding: 12px 0 4px; background: var(--bg); flex-wrap: wrap; }
  .slot-choice-card .confirm-buttons .btn { flex: 1 1 140px; min-height: 44px; }
  .toolrail {
    top: auto; bottom: 40px; left: 8px; right: 8px;
    flex-direction: row; overflow-x: auto; gap: 5px;
    padding: 6px 4px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    background: rgba(19, 26, 34, 0.9);
  }
  .tool-btn { width: 56px; flex: none; padding: 6px 2px; }
  .palette {
    left: 8px; right: 8px; top: auto; bottom: 112px;
    flex-direction: row; flex-wrap: wrap; align-items: center;
  }
  .panel {
    top: auto; left: 8px; right: 8px; bottom: 112px;
    width: auto; max-height: 55vh;
    border-radius: 10px;
  }
  .panel.hidden { display: none; }
  .top-stats { order: 3; width: 100%; }
  .brand { font-size: 13px; }
  .top-actions { margin-left: auto; }
  .start-challenges { grid-template-columns: 1fr; }
  .hintbar { bottom: auto; top: 54px; padding: 4px 10px; font-size: 11.5px; }
}