/* style.css — the town is the interface, so this is intentionally thin (§16). */
:root {
  --ink: #101620;
  --panel: rgba(16, 22, 32, 0.86);
  --panel-brd: rgba(255, 255, 255, 0.10);
  --muted: rgba(255, 255, 255, 0.55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #dfe7ef;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  /* stop iOS rubber-banding the page while you drag the town */
  overscroll-behavior: none;
  touch-action: none;
}

#scene {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  cursor: grab;
}
#scene:active { cursor: grabbing; }

/* ---------- chrome ---------- */
.chrome { transition: opacity .35s ease, transform .35s ease; }

#topbar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) 18px 14px;
  pointer-events: none;
}
.brand {
  font-weight: 800; font-size: 19px; letter-spacing: -.4px;
  color: #16203040; color: rgba(20, 30, 45, .78);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.brand span { color: #3f9e35; }

.status {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600;
  color: rgba(20, 30, 45, .62);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.7);
  padding: 6px 11px; border-radius: 999px;
  backdrop-filter: blur(8px);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: #9aa3ad; }
.dot.live { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.dot.sim  { background: #eab308; box-shadow: 0 0 0 3px rgba(234,179,8,.18); }

#controls {
  position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px;
}
#controls button {
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(8px);
  color: rgba(20,30,45,.8);
  font-size: 17px; font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
#controls button:hover { background: rgba(255,255,255,.85); }
#controls button:active { transform: scale(.94); }

#hint {
  position: fixed; left: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  font-size: 11.5px; font-weight: 500;
  color: rgba(20,30,45,.5);
  background: rgba(255,255,255,.5);
  border-radius: 999px; padding: 6px 12px;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
#hint b { color: rgba(20,30,45,.75); }

/* ---------- display mode (§13): the town, and nothing else ---------- */
body.display-mode .chrome {
  opacity: 0; pointer-events: none; transform: translateY(6px);
}
body.display-mode #scene { cursor: default; }

/* ---------- detail card (§11) ---------- */
#card {
  position: fixed;
  right: 16px; top: 50%; transform: translate(12px, -50%) scale(.97);
  width: 288px;
  background: var(--panel);
  border: 1px solid var(--panel-brd);
  border-radius: 18px;
  padding: 18px 18px 14px;
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(8, 14, 24, .38);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 20;
}
#card.open { opacity: 1; pointer-events: auto; transform: translate(0, -50%) scale(1); }

#card-close {
  position: absolute; top: 10px; right: 12px;
  width: 26px; height: 26px; border-radius: 8px;
  background: transparent; border: 0;
  color: var(--muted); font-size: 19px; line-height: 1; cursor: pointer;
}
#card-close:hover { color: #fff; background: rgba(255,255,255,.08); }

.card-name   { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.72); padding-right: 22px; }
.card-symbol { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; color: var(--muted); margin-top: 1px; }
.card-price  { font-size: 30px; font-weight: 800; letter-spacing: -.6px; margin-top: 10px; }
.card-change { font-size: 14px; font-weight: 700; margin-top: 2px; }
.card-chart  { width: 100%; height: 92px; margin-top: 14px; display: block; }
.card-note   { font-size: 10.5px; color: rgba(255,255,255,.38); margin-top: 8px; letter-spacing: .3px; }

/* On a phone the card becomes a bottom sheet instead of a side panel. */
@media (max-width: 560px) {
  #card {
    left: 12px; right: 12px; width: auto;
    top: auto; bottom: max(12px, env(safe-area-inset-bottom));
    transform: translateY(12px) scale(.98);
  }
  #card.open { transform: translateY(0) scale(1); }
  #hint { display: none; }
}

/* ---- auth overlay (platform-managed accounts) ----
   Deliberately styled like the app, not like a login page: this can appear on a desk
   display, and a jarring modal would ruin the effect. */
.authOverlay{position:fixed;inset:0;background:rgba(20,28,40,.72);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}
.authCard{width:100%;max-width:330px;background:rgba(16,22,32,.94);
  border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:22px;
  box-shadow:0 22px 60px rgba(8,14,24,.45)}
.authBrand{font-size:19px;font-weight:800;letter-spacing:-.4px;color:#fff}
.authBrand span{color:#4ade80}
.authTitle{font-size:13px;color:rgba(255,255,255,.55);margin:2px 0 14px}
.authInput{width:100%;box-sizing:border-box;background:#070a10;
  border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:10px 12px;
  color:#fff;font-size:14px;margin-top:8px}
.authInput:focus{outline:none;border-color:#3b6cf0}
.authBtn{width:100%;margin-top:14px;background:#3b6cf0;border:0;border-radius:9px;
  padding:11px;color:#fff;font-weight:600;font-size:14px;cursor:pointer}
.authSwitch{margin-top:13px;font-size:12px;color:rgba(255,255,255,.45)}
.authSwitch a{color:#7aa2ff;text-decoration:none}
.authMsg{font-size:12px;border-radius:9px;padding:8px 10px;margin-bottom:12px}
.authMsg.ok{background:#12351f;color:#7ee2a8}
.authMsg.info{background:#12233a;color:#8bb6ff}
.authMsg.err{background:#3a1620;color:#ff9aa8}

/* ---- positions panel (opened from the in-world button) ---- */
#pos-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-48%) scale(.97);
  width:min(420px,calc(100vw - 32px));max-height:min(78vh,640px);overflow:auto;
  background:rgba(14,19,28,.94);border:1px solid rgba(255,255,255,.10);border-radius:20px;
  padding:22px;backdrop-filter:blur(20px);box-shadow:0 26px 70px rgba(6,10,18,.5);
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:60}
#pos-panel.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
#pos-close{position:absolute;top:12px;right:14px;width:28px;height:28px;border:0;border-radius:8px;
  background:transparent;color:rgba(255,255,255,.5);font-size:20px;line-height:1;cursor:pointer}
#pos-close:hover{color:#fff;background:rgba(255,255,255,.08)}
.pos-title{font-size:17px;font-weight:800;letter-spacing:-.3px}
.pos-sub{font-size:12px;color:rgba(255,255,255,.45);margin-top:3px}
.pos-list{margin:16px 0 6px;display:flex;flex-direction:column;gap:7px}
.pos-item{display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:10px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);
  border-radius:11px;padding:9px 11px}
.pos-sym{font-weight:800;font-size:13.5px;letter-spacing:.4px}
.pos-meta{font-size:11px;color:rgba(255,255,255,.42)}
.pos-gain{font-weight:800;font-size:13px;text-align:right}
.pos-gear{font-size:10px;font-weight:700;letter-spacing:.5px;color:#f0c65a;
  border:1px solid rgba(240,198,90,.35);border-radius:6px;padding:2px 6px}
.pos-del{background:transparent;border:0;color:rgba(255,255,255,.3);cursor:pointer;font-size:15px;padding:0 2px}
.pos-del:hover{color:#ff9aa8}
.pos-empty{font-size:12.5px;color:rgba(255,255,255,.4);padding:14px 2px;line-height:1.55}
.pos-form{border-top:1px solid rgba(255,255,255,.08);padding-top:14px;margin-top:8px}
.pos-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.pos-input{background:#070a10;border:1px solid rgba(255,255,255,.12);border-radius:9px;
  padding:10px;color:#fff;font-size:13.5px;width:100%;box-sizing:border-box}
.pos-input.sym{text-transform:uppercase;font-weight:700;letter-spacing:.6px}
.pos-input:focus{outline:none;border-color:#3f9e35}
.pos-add{width:100%;margin-top:10px;background:#2f7f28;border:0;border-radius:9px;padding:11px;
  color:#fff;font-weight:700;font-size:14px;cursor:pointer}
.pos-add:hover{background:#3f9e35}
.pos-add:disabled{opacity:.6;cursor:default}
.pos-msg{font-size:11.5px;margin-top:9px;min-height:15px;color:rgba(255,255,255,.5)}
.pos-msg.err{color:#ff9aa8}
.pos-msg.ok{color:#7ee2a8}

/* ---- roster rows: demo residents, inline editor ---- */
.pos-note{font-size:11.5px;color:rgba(255,255,255,.45);background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:8px 10px;line-height:1.5}
.pos-item.demo{opacity:.72}
.pos-tag{font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:#8bb6ff;border:1px solid rgba(139,182,255,.32);border-radius:5px;padding:1px 5px;margin-right:5px}
.pos-actions{display:flex;gap:2px;align-items:center}
.pos-edit,.pos-add-one{background:transparent;border:0;color:rgba(255,255,255,.35);
  cursor:pointer;font-size:14px;padding:2px 5px;border-radius:6px;line-height:1}
.pos-edit:hover{color:#8bb6ff;background:rgba(255,255,255,.07)}
.pos-add-one{font-size:17px;font-weight:700;color:#7ee2a8}
.pos-add-one:hover{background:rgba(126,226,168,.14)}
/* editor is collapsed until its row's pencil is clicked — the list stays scannable */
.pos-editor{display:none;grid-template-columns:1fr 1fr auto auto;gap:7px;
  padding:9px 11px;margin-top:-3px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);border-top:0;border-radius:0 0 11px 11px}
.pos-editor.open{display:grid}
.pos-editor .pos-input{padding:8px 9px;font-size:12.5px}
.pos-save,.pos-cancel{border:0;border-radius:8px;padding:8px 12px;font-size:12.5px;
  font-weight:700;cursor:pointer;white-space:nowrap}
.pos-save{background:#2f7f28;color:#fff}
.pos-save:hover{background:#3f9e35}
.pos-cancel{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6)}
.pos-cancel:hover{background:rgba(255,255,255,.14);color:#fff}

/* ---- screenshot import + draft rows ---- */
.shot-box{margin:12px 0 4px}
.shot-btn{width:100%;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.2);
  border-radius:11px;padding:12px;color:rgba(255,255,255,.7);font-size:13px;font-weight:600;cursor:pointer}
.shot-btn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.34);color:#fff}
.shot-btn:disabled{opacity:.55;cursor:default}
.draft-wrap{display:none;margin-top:10px;border:1px solid rgba(126,226,168,.28);
  background:rgba(126,226,168,.06);border-radius:12px;padding:11px}
.draft-wrap.open{display:block}
.draft-head{display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-size:11.5px;color:rgba(255,255,255,.62);margin-bottom:9px}
.draft-all{background:#2f7f28;border:0;border-radius:7px;padding:6px 11px;color:#fff;
  font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.draft-all:hover{background:#3f9e35}
.draft-row{display:grid;grid-template-columns:74px 1fr 1fr auto auto;gap:6px;align-items:center;margin-bottom:6px}
.draft-row .pos-input{padding:7px 8px;font-size:12px}
.draft-row .d-sym{font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.draft-ok{background:#2f7f28;border:0;border-radius:7px;color:#fff;font-size:13px;
  font-weight:700;padding:7px 10px;cursor:pointer}
.draft-ok:hover{background:#3f9e35}
.draft-x{background:transparent;border:0;color:rgba(255,255,255,.3);font-size:15px;cursor:pointer;padding:0 4px}
.draft-x:hover{color:#ff9aa8}
.draft-warn{grid-column:1/-1;font-size:10.5px;color:#eab308;margin:-2px 0 4px 2px}
.pos-clear-demos{width:100%;background:transparent;border:1px solid rgba(255,255,255,.14);
  border-radius:9px;padding:8px;color:rgba(255,255,255,.5);font-size:11.5px;font-weight:600;
  cursor:pointer;margin-top:2px}
.pos-clear-demos:hover{border-color:#ff9aa8;color:#ff9aa8}

/* ---- "why did it move" speech bubble ---- */
#bubble{
  position:fixed;z-index:30;max-width:250px;
  transform:translate(-50%,-100%) scale(.95);
  background:rgba(16,22,32,.95);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:11px 13px;
  box-shadow:0 14px 36px rgba(6,10,18,.45);
  opacity:0;pointer-events:none;transition:opacity .16s ease, transform .16s ease;
}
#bubble.open{opacity:1;transform:translate(-50%,-100%) scale(1)}
#bubble-text{font-size:12.5px;line-height:1.45;color:#fff}
.bubble-src{font-size:10px;color:rgba(255,255,255,.38);margin-top:6px;letter-spacing:.2px}
.bubble-tail{
  position:absolute;left:50%;bottom:-7px;transform:translateX(-50%) rotate(45deg);
  width:13px;height:13px;background:rgba(16,22,32,.95);
  border-right:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);
  border-bottom-right-radius:3px;
}