/* ─── EVERYTHING IS FINE™ — adorable dystopia palette ───────────────────── */
:root {
  --cream:     #fbf3e4;
  --cream-2:   #f3e7cf;
  --paper:     #fffaf0;
  --ink:       #3a2a1a;
  --ink-2:     #6b5640;
  --muted:     #9a8770;
  --mint:      #7fcfb6;
  --mint-2:    #4fb39a;
  --mint-dk:   #2a8f7a;
  --orange:    #f2994a;
  --orange-2:  #e08a1e;
  --coral:     #ef6b5c;
  --sky:       #9fd4e8;
  --gold:      #f5c542;
  --line:      rgba(58,42,26,.14);
  --shadow:    0 6px 18px rgba(80,50,20,.12);
  --radius:    18px;
  --radius-sm: 12px;
  --display:   'Fredoka', 'Nunito', system-ui, sans-serif;
  --body:      'Nunito', system-ui, -apple-system, sans-serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
html,body { height:100%; }
body {
  background:var(--cream);
  background-image: radial-gradient(1200px 600px at 20% -10%, #fff7e8 0%, transparent 60%), radial-gradient(900px 500px at 100% 100%, #e6f5ee 0%, transparent 55%);
  color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.4;
  -webkit-tap-highlight-color:transparent; overscroll-behavior:none;
}
button { font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
a { color:var(--mint-dk); }
b { font-weight:800; }

.spr { display:inline-block; background-image:url('assets/atlas.webp'); background-repeat:no-repeat; vertical-align:middle; flex:none; }
html.no-webp .spr { background-image:url('assets/atlas.png'); }
.spr.dim { filter:grayscale(1) brightness(1.1) opacity(.45); }

/* ─── Title screen ───────────────────────────────────────────────────────── */
.screen { display:none; }
.screen.active { display:flex; }
#title-screen {
  position:fixed; inset:0; z-index:5; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; padding:24px 20px;
  padding-top:calc(24px + env(safe-area-inset-top)); padding-bottom:calc(24px + env(safe-area-inset-bottom)); overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--cream);
  background-image: radial-gradient(900px 500px at 50% 0%, #fff7e8 0%, transparent 60%), radial-gradient(700px 400px at 100% 100%, #e6f5ee 0%, transparent 55%), radial-gradient(600px 400px at 0% 100%, #fde9dc 0%, transparent 55%);
}
.title-inner { margin:auto; display:flex; flex-direction:column; align-items:center; max-width:520px; width:100%; }
.title-corp { font-family:var(--display); font-weight:600; letter-spacing:.32em; font-size:12px; color:var(--mint-dk); text-transform:uppercase; }
.title-logo { font-family:var(--display); font-weight:700; font-size:clamp(34px, 10.5vw, 72px); line-height:1; letter-spacing:-.01em; color:var(--ink); margin:10px 0 4px; white-space:nowrap; }
.title-logo .tm { font-size:.35em; vertical-align:top; color:var(--coral); }
.title-tag { font-size:16px; color:var(--ink-2); max-width:420px; line-height:1.35; }
.title-hint { font-size:14px; color:var(--ink-2); max-width:380px; margin:8px 0 18px; line-height:1.4; }
.btn-help { margin-top:10px; font-size:14px; padding:9px 18px; }
.title-art { margin:18px 0 6px; display:flex; gap:10px; align-items:flex-end; justify-content:center; }
.title-art .spr { filter:drop-shadow(0 8px 12px rgba(80,50,20,.18)); }

/* ─── Help screen ────────────────────────────────────────────────────────── */
#help-screen { position:fixed; inset:0; z-index:30; background:var(--cream); overflow-y:auto; -webkit-overflow-scrolling:touch; display:none; }
#help-screen.active { display:block; }
.help-inner { max-width:560px; margin:0 auto; padding:18px 20px calc(32px + env(safe-area-inset-bottom)); padding-top:calc(18px + env(safe-area-inset-top)); }
.help-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.help-top .title-corp { font-size:11px; letter-spacing:.22em; }
.help-title { font-family:var(--display); font-weight:700; font-size:30px; line-height:1.05; margin:4px 0 8px; }
.help-lede { font-size:15px; color:var(--ink-2); line-height:1.5; margin-bottom:14px; }
.help-sec { background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin-bottom:10px; box-shadow:var(--shadow); }
.help-sec h3 { font-family:var(--display); font-weight:600; font-size:16px; display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.help-sec h3 .spr { width:22px; height:22px; }
.help-sec p { font-size:14px; color:var(--ink-2); line-height:1.5; }
.help-foot { font-size:13px; color:var(--muted); font-style:italic; margin:14px 0; text-align:center; }
#btn-help-close-2 { display:block; margin:0 auto; }
.help-btn { width:26px; height:26px; border-radius:999px; border:1.5px solid var(--line); background:var(--paper); color:var(--muted); font-family:var(--display); font-weight:700; font-size:14px; line-height:1; flex:none; }
.help-btn:active { transform:scale(.94); }
#load-line { font-size:13px; color:var(--muted); font-style:italic; margin-top:14px; max-width:420px; }
.back-btn { display:inline-block; margin-top:16px; font-size:13px; color:var(--muted); text-decoration:none; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn { border-radius:999px; padding:10px 18px; font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.01em; transition:transform .08s, box-shadow .15s, opacity .15s; white-space:nowrap; }
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.45; cursor:default; transform:none; }
.btn-primary { background:var(--mint-2); color:#fff; box-shadow:0 4px 0 var(--mint-dk); }
.btn-primary:active:not(:disabled) { box-shadow:0 1px 0 var(--mint-dk); transform:translateY(3px); }
.btn-big { font-size:19px; padding:14px 30px; }
.btn-tap { background:var(--orange); color:#fff; box-shadow:0 4px 0 #c9711a; padding:12px 18px; min-width:132px; flex:none; touch-action:manipulation; -webkit-user-select:none; user-select:none; }
.btn-tap:active { box-shadow:0 1px 0 #c9711a; transform:translateY(3px); }
.btn-tap.bump { animation:bump .18s ease-out; }
@keyframes bump { 0%{transform:scale(1)} 40%{transform:scale(1.06)} 100%{transform:scale(1)} }
.btn-unlock { background:var(--gold); color:var(--ink); box-shadow:0 4px 0 #cfa22e; width:100%; }
.btn-hire { background:var(--sky); color:var(--ink); box-shadow:0 4px 0 #6fb3cc; }
.btn-nost { background:#d9c3f0; color:var(--ink); box-shadow:0 4px 0 #a98cc9; }
.btn-update { background:var(--coral); color:#fff; box-shadow:0 4px 0 #b9463a; width:100%; }
.btn-ghost { background:var(--cream-2); color:var(--ink-2); border:1.5px solid var(--line); }
.btn-ghost.danger { color:var(--coral); }
.btn small { display:block; font-family:var(--body); font-weight:600; font-size:11px; opacity:.85; margin-top:2px; }

/* ─── Game layout ────────────────────────────────────────────────────────── */
#game { height:100dvh; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; gap:8px; padding:8px 10px 6px; padding-top:calc(8px + env(safe-area-inset-top)); flex-wrap:wrap; }
.brand { font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.04em; color:var(--ink); display:flex; align-items:center; gap:6px; flex:1 1 0; min-width:0; overflow:hidden; white-space:nowrap; }
.brand .tm { color:var(--coral); font-size:10px; vertical-align:top; }
.civ-badge { font-family:var(--display); font-size:10px; letter-spacing:.14em; background:var(--ink); color:var(--cream); border-radius:999px; padding:3px 8px; flex:none; white-space:nowrap; }
.resources { display:flex; gap:6px; margin-left:auto; flex:none; }
.res { display:flex; align-items:center; gap:5px; background:var(--paper); border:1.5px solid var(--line); border-radius:999px; padding:4px 8px 4px 6px; font-family:var(--display); font-weight:600; font-size:14px; width:92px; box-sizing:border-box; box-shadow:0 2px 0 rgba(80,50,20,.06); font-variant-numeric:tabular-nums; white-space:nowrap; }
.res span { overflow:hidden; text-overflow:clip; }
.res .spr { width:20px; height:20px; }
.conv { flex:1 1 100%; display:flex; align-items:center; gap:8px; font-family:var(--display); font-size:12px; letter-spacing:.08em; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
#conv-num { width:38px; text-align:right; }
.conv-bar { flex:1; height:10px; background:var(--cream-2); border:1.5px solid var(--line); border-radius:999px; overflow:hidden; }
.conv-fill { height:100%; width:0; background:linear-gradient(90deg, var(--mint), var(--sky)); border-radius:999px; transition:width .4s; }
.conv-bar.warn .conv-fill { background:linear-gradient(90deg, var(--mint), var(--orange)); }
.conv-bar.max .conv-fill { background:linear-gradient(90deg, var(--orange), var(--coral)); }
#conv-mult { color:var(--muted); letter-spacing:0; width:96px; }

#town-wrap { position:relative; flex:0 0 36vh; min-height:200px; }
#town-canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:manipulation; display:block; }
#toasts { position:absolute; left:8px; right:8px; bottom:6px; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.toast { display:flex; align-items:center; gap:8px; background:rgba(255,250,240,.96); border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:6px 10px; font-size:13px; box-shadow:var(--shadow); opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s; color:var(--ink); }
.toast.in { opacity:1; transform:none; }
.toast.ai { border-color:var(--sky); }
.toast.human { border-color:var(--orange); }
.toast.good { border-color:var(--mint-2); }
.toast.sys { border-color:var(--coral); font-style:italic; }

.ticker { background:var(--ink); color:var(--cream); font-family:var(--display); font-size:11px; letter-spacing:.14em; text-align:center; padding:5px 10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ticker .corp { color:var(--mint); margin-right:8px; }
#ticker-text { opacity:0; transition:opacity .4s; }
#ticker-text.in { opacity:1; }

.tabs { display:flex; gap:4px; padding:6px 8px 0; }
.tab { flex:1; font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.06em; padding:9px 4px; border-radius:12px 12px 0 0; color:var(--muted); background:transparent; }
.tab.active { background:var(--paper); color:var(--ink); box-shadow:0 -2px 0 var(--line) inset; }
#panelwrap { display:flex; flex-direction:column; flex:1; min-height:0; }
#panel { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; background:var(--paper); padding:12px 10px calc(16px + env(safe-area-inset-bottom)); border-top:1.5px solid var(--line); }

.panel-head { margin:4px 2px 10px; }
.panel-head h2 { font-family:var(--display); font-weight:700; font-size:18px; }
.panel-head .sub { font-size:13px; color:var(--muted); }
.card { background:var(--cream); border:1.5px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin-bottom:10px; box-shadow:0 2px 0 rgba(80,50,20,.05); }
.card.locked { background:transparent; border-style:dashed; }
.card.owned { border-color:var(--mint-2); }
.act-top { display:flex; align-items:center; gap:10px; }
.act-info { flex:1; min-width:0; }
.act-name { font-family:var(--display); font-weight:600; font-size:16px; }
.act-name .tier { font-size:11px; letter-spacing:.1em; color:var(--muted); font-weight:600; margin-left:6px; }
.act-meta { font-size:12.5px; color:var(--ink-2); line-height:1.35; font-variant-numeric:tabular-nums; }
.act .act-meta { height:calc(2 * 1.35em); overflow:hidden; }
.act .act-meta .ln { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.act .act-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.act .act-top { min-height:52px; }
.bar-row { display:flex; align-items:center; gap:8px; margin-top:8px; }
.bar-row .bar { flex:1; margin-top:0; }
.bar-row .taps { font-family:var(--display); font-size:11.5px; color:var(--muted); width:52px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.act .act-bot { height:1.4em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.act-meta .next { color:var(--muted); }
.act-bot { font-size:12px; color:var(--mint-dk); margin-top:6px; display:flex; align-items:center; gap:4px; }
.bar { height:8px; background:var(--cream-2); border:1.5px solid var(--line); border-radius:999px; margin-top:8px; overflow:hidden; }
.bar-fill { height:100%; width:0; background:var(--orange); transition:width .08s; }
.btn-row { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.btn-row .btn { flex:1; }
.owned-tag { font-family:var(--display); font-size:11px; letter-spacing:.16em; color:var(--mint-dk); padding:6px 0 0; }
.note { font-size:13px; color:var(--muted); margin:6px 2px 12px; }
.conv-explain { font-size:13px; color:var(--ink-2); background:var(--cream-2); border-radius:var(--radius-sm); padding:8px 10px; margin-bottom:10px; }

.residents { display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.resident { display:flex; align-items:center; gap:10px; background:var(--cream); border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:6px 10px; font-size:13px; }
.resident.dim { opacity:.6; border-style:dashed; }
.museum { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.exhibit { display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--cream); border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:12px 6px; }
.exhibit.unknown { border-style:dashed; }
.ex-name { font-family:var(--display); font-size:12px; font-weight:600; text-align:center; }

.report .report-head { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:6px; }
.report-body { font-size:15px; line-height:1.45; margin-bottom:10px; }
.update.ready { border-color:var(--coral); background:#fdece8; }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin-top:6px; font-size:12.5px; }
.stat-grid div { display:flex; justify-content:space-between; border-bottom:1px dashed var(--line); padding:3px 0; }
.stat-grid span { color:var(--muted); }
.log-list { list-style:none; margin-top:6px; }
.log-list li { font-size:12.5px; padding:5px 0 5px 10px; border-left:3px solid var(--line); margin-bottom:4px; color:var(--ink-2); }
.log-list li.ai { border-color:var(--sky); }
.log-list li.human { border-color:var(--orange); }
.log-list li.good { border-color:var(--mint-2); }
.log-list li.sys { border-color:var(--coral); font-style:italic; }

/* ─── Modal ──────────────────────────────────────────────────────────────── */
#modal { position:fixed; inset:0; z-index:20; background:rgba(58,42,26,.38); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-box { background:var(--paper); border:2px solid var(--ink); border-radius:22px; padding:20px 18px 16px; max-width:440px; width:100%; text-align:center; box-shadow:0 18px 50px rgba(58,42,26,.3); transform:translateY(14px) scale(.97); opacity:0; transition:transform .22s, opacity .22s; max-height:90dvh; overflow-y:auto; }
.modal-box.in { transform:none; opacity:1; }
.modal-icon { margin-bottom:6px; filter:drop-shadow(0 6px 10px rgba(80,50,20,.18)); }
.modal-kicker { font-family:var(--display); font-size:11px; letter-spacing:.22em; color:var(--coral); margin-bottom:4px; }
.modal-title { font-family:var(--display); font-weight:700; font-size:22px; line-height:1.15; margin-bottom:10px; }
.modal-body { font-size:14.5px; color:var(--ink-2); line-height:1.5; text-align:left; }
.modal-btns { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.modal-btns .btn { flex:1; min-width:120px; white-space:normal; line-height:1.15; padding:10px 12px; }
.modal-box.armed .modal-btns { pointer-events:auto; }
.modal-box .modal-btns { pointer-events:none; }

/* ─── Desktop ────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  #game { display:grid; grid-template-columns:1fr 440px; grid-template-rows:auto 1fr auto; grid-template-areas: "top top" "town panelwrap" "ticker panelwrap"; height:100dvh; }
  .topbar { grid-area:top; padding:10px 18px; }
  .conv { flex:0 0 380px; margin-left:12px; }
  #town-wrap { grid-area:town; flex:auto; min-height:0; }
  .ticker { grid-area:ticker; }
  #panelwrap { grid-area:panelwrap; border-left:1.5px solid var(--line); }
  #panel { padding:14px 16px 20px; border-top:0; }
  .tab.active { box-shadow:none; }
  body { font-size:15px; }
}
@media (max-width: 600px) {
  .topbar .brand { display:none; }
  /* Phones: the tap button gets its own full-width row under the info, a bigger thumb target with a fixed shape. */
  .act .act-top { flex-wrap:wrap; min-height:0; }
  .act .act-top .btn-tap { flex:1 1 100%; min-width:0; margin-top:8px; padding:13px 12px; font-size:16px; }
}
@media (max-width: 400px) {
  .topbar { gap:6px; }
  .resources { gap:4px; }
  .res { width:76px; font-size:12.5px; padding:4px 5px 4px 5px; gap:4px; }
  .res .spr { width:18px; height:18px; }
  .btn-tap { min-width:112px; padding:12px 12px; }
  #conv-mult { width:88px; }
}

/* ─── Depth: requests, deposits, mastery, bench, badges, leaderboard ──────── */
.card.request { border-color:var(--orange); background:#fff4e6; }
.card.deposit { border-color:var(--gold); background:#fff8dc; }
.card.sit { border-color:#a98cc9; }
.bar-fill.mint { background:var(--mint-2); }
.mastery { color:var(--mint-dk); font-weight:700; font-size:12px; }
.badge-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:8px; }
.badge { display:flex; flex-direction:column; align-items:center; gap:4px; background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:8px 4px; }
.badge.unknown { border-style:dashed; opacity:.75; }
.badge-name { font-family:var(--display); font-size:10.5px; font-weight:600; text-align:center; line-height:1.15; }
.lb-list { list-style:none; margin-top:6px; }
.lb-list li { display:flex; align-items:center; gap:8px; padding:5px 6px; border-bottom:1px dashed var(--line); font-size:13px; }
.lb-list li.me { background:#e6f5ee; border-radius:8px; }
.lb-list li.lb-loading, .lb-list li.lb-empty { color:var(--muted); font-style:italic; }
.lb-pos { width:22px; font-family:var(--display); font-weight:700; color:var(--muted); }
.lb-name { flex:1; font-weight:700; }
.lb-name small { color:var(--muted); font-weight:600; }
.lb-score { font-family:var(--display); font-weight:600; color:var(--mint-dk); }
.lb-foot { flex-wrap:wrap; color:var(--ink-2); border-bottom:0 !important; }
.lb-edit { font-size:12px; color:var(--mint-dk); text-decoration:underline; }
.lb-nick { display:flex; gap:6px; width:100%; }
.lb-nick input { flex:1; font:inherit; padding:6px 10px; border:1.5px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink); }