/* ============================================================
   APEX VENTURES — style.css
   Edit CSS variables in :root to retheme the whole game.
   ============================================================ */
:root {
  --bg: #0e0f13;
  --bg2: #14161c;
  --bg3: #1c1f28;
  --panel: #20232e;
  --border: #2c3044;
  --border2: #3a3f58;
  --gold: #d4a843;
  --gold-dim: #7a6025;
  --cyan: #4ec9d4;
  --pink: #d46e8a;
  --green: #5ac97a;
  --red: #c95a5a;
  --purple: #8b6ed4;
  --orange: #d4843a;
  --rose: #e8a0b4;
  --lavender: #a89fd4;
  --teal: #4ec9b8;
  --text: #e4ddd0;
  --text2: #8890a8;
  --text3: #4a5068;
  --font-head: 'Syne', sans-serif;
  --font-body: 'Lora', serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius: 4px;
  --t: .2s ease;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); height: 100vh; overflow: hidden; user-select: none; }
button { cursor: pointer; font-family: inherit; }
input { font-family: inherit; user-select: auto; }

.screen { display: none; width: 100vw; height: 100vh; flex-direction: column; }
.screen.active { display: flex; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes savePulse { 0% { opacity: 1; background: var(--gold); } 80% { opacity: 1; background: var(--green); } 100% { opacity: 0; } }

/* ── DISCLAIMER ── */
#s-disclaimer { align-items: center; justify-content: center; background: var(--bg); position: relative; overflow: hidden; }
#s-disclaimer::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%); }
.disc-box { position: relative; background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--red); max-width: 480px; width: 90%; padding: 2.5rem; border-radius: var(--radius); text-align: center; animation: fadeUp .5s ease; }
.disc-icon { font-size: 2.5rem; margin-bottom: 1rem; display: block; }
.disc-title { font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; color: var(--red); margin-bottom: .4rem; }
.disc-age { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--text3); margin-bottom: 1.1rem; }
.disc-body { font-size: .93rem; line-height: 1.75; color: var(--text2); margin-bottom: 1.5rem; }
.disc-body strong { color: var(--text); }
.disc-hr { height: 1px; background: var(--border); margin: 1rem 0; }
.disc-confirm { font-family: var(--font-head); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--bg); background: var(--gold); border: none; padding: .8rem 2rem; border-radius: var(--radius); cursor: pointer; width: 100%; margin-bottom: .5rem; transition: var(--t); }
.disc-confirm:hover { background: #e0b85a; }
.disc-leave { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); background: transparent; border: 1px solid var(--border); padding: .6rem 1.5rem; border-radius: var(--radius); cursor: pointer; width: 100%; transition: var(--t); }
.disc-leave:hover { border-color: var(--red); color: var(--red); }

/* ── CONTINUE SCREEN (save system) ── */
#s-continue { align-items: center; justify-content: center; background: radial-gradient(ellipse at 40% 50%, rgba(212,168,67,.06) 0%, transparent 60%), var(--bg); }
.cont-box { background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--gold); max-width: 460px; width: 90%; padding: 2.25rem; border-radius: var(--radius); text-align: center; animation: fadeUp .45s ease; }
.cont-title { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--gold); margin-bottom: .35rem; }
.cont-sub { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text3); margin-bottom: 1.5rem; }
.cont-save-info { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: 1.5rem; display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
.cont-stat { display: flex; flex-direction: column; gap: .1rem; }
.cont-stat-val { font-family: var(--font-mono); font-size: .88rem; color: var(--text); font-weight: 500; }
.cont-stat-lbl { font-family: var(--font-mono); font-size: .48rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text3); }
.cont-btn { font-family: var(--font-head); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; border: none; padding: .8rem 2rem; border-radius: var(--radius); cursor: pointer; width: 100%; transition: var(--t); margin-bottom: .5rem; }
.cont-btn.primary { color: var(--bg); background: var(--gold); }
.cont-btn.primary:hover { background: #e0b85a; }
.cont-btn.secondary { color: var(--text2); background: transparent; border: 1px solid var(--border); }
.cont-btn.secondary:hover { border-color: var(--red); color: var(--red); }
.cont-btn.export { color: var(--cyan); background: transparent; border: 1px solid rgba(78,201,212,.35); font-size: .6rem; padding: .5rem 1rem; margin-bottom: .35rem; }
.cont-btn.export:hover { background: rgba(78,201,212,.08); }
.cont-divider { height: 1px; background: var(--border); margin: .75rem 0; }
.cont-premium-label { font-family: var(--font-mono); font-size: .5rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; }

/* ── NAME ENTRY ── */
#s-nameentry { align-items: center; justify-content: center; background: radial-gradient(ellipse at 40% 50%, rgba(212,168,67,.06) 0%, transparent 60%), var(--bg); }
.ne-wrap { text-align: center; max-width: 420px; width: 90%; }
.ne-eyebrow { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .5em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; opacity: 0; animation: fadeUp .5s .1s forwards; }
.ne-heading { font-family: var(--font-head); font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 800; margin-bottom: .5rem; opacity: 0; animation: fadeUp .5s .25s forwards; }
.ne-sub { font-style: italic; font-size: .93rem; color: var(--text2); margin-bottom: 1.75rem; line-height: 1.6; opacity: 0; animation: fadeUp .5s .4s forwards; }
.ne-row { display: flex; gap: .5rem; opacity: 0; animation: fadeUp .5s .55s forwards; }
.ne-input { flex: 1; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; font-family: var(--font-head); font-size: 1rem; font-weight: 600; color: var(--text); outline: none; transition: border-color var(--t); }
.ne-input:focus { border-color: var(--gold); }
.ne-input::placeholder { color: var(--text3); font-weight: 400; font-style: italic; }
.ne-submit { font-family: var(--font-head); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bg); background: var(--gold); border: none; padding: .75rem 1.5rem; border-radius: var(--radius); cursor: pointer; transition: var(--t); white-space: nowrap; }
.ne-submit:hover { background: #e0b85a; }
.ne-hint { font-family: var(--font-mono); font-size: .52rem; color: var(--text3); margin-top: .7rem; opacity: 0; animation: fadeUp .5s .7s forwards; }

/* ── HUD ── */
#hud { display: none; position: fixed; top: 0; left: 0; right: 0; height: 48px; background: rgba(14,15,19,.97); border-bottom: 1px solid var(--border); align-items: center; padding: 0 1.25rem; gap: 1rem; z-index: 500; backdrop-filter: blur(8px); }
#hud.show { display: flex; }
.hud-brand { font-family: var(--font-head); font-weight: 800; font-size: .95rem; color: var(--gold); margin-right: auto; }
.hud-chip { display: flex; align-items: center; gap: .35rem; font-family: var(--font-mono); font-size: .62rem; }
.hud-lbl { color: var(--text3); }
.hud-val { color: var(--text); }
.hud-val.money { color: var(--gold); font-weight: 500; }
.hud-sep { width: 1px; height: 20px; background: var(--border); }
.hud-lvl-badge { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .12em; text-transform: uppercase; background: rgba(212,168,67,.1); border: 1px solid rgba(212,168,67,.25); color: var(--gold); padding: .2rem .6rem; border-radius: var(--radius); }
.btn-hub { font-family: var(--font-head); font-size: .62rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--text2); background: transparent; border: 1px solid var(--border); padding: .3rem .85rem; border-radius: var(--radius); transition: var(--t); }
.btn-hub:hover { border-color: var(--gold); color: var(--gold); }
.save-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: inline-block; margin-left: .3rem; opacity: 0; }
.save-dot.pulse { animation: savePulse 1.2s ease forwards; }

/* ── HUB MAP ── */
#s-hub { padding-top: 48px; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(28,31,40,.8) 0%, var(--bg) 70%); position: relative; }
.hub-title { position: absolute; top: 64px; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .4em; text-transform: uppercase; color: var(--text3); }
#hub-svg { position: absolute; top: 48px; left: 0; right: 0; bottom: 0; width: 100%; height: calc(100% - 48px); pointer-events: none; }
.hub-grid { position: relative; width: min(700px, 94vw); height: min(500px, 70vh); }
.hub-node { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 110px; height: 110px; border-radius: 50%; background: var(--panel); border: 2px solid var(--border); cursor: pointer; transition: all .25s; text-align: center; transform: translate(-50%, -50%); }
.hub-node:hover:not(.locked) { border-color: var(--gold); box-shadow: 0 0 28px rgba(212,168,67,.2); transform: translate(-50%, -50%) scale(1.06); }
.hub-node.home-node { width: 130px; height: 130px; border-color: var(--gold-dim); }
.hub-node.home-node:hover { border-color: var(--gold); }
.hub-icon { font-size: 1.7rem; line-height: 1; margin-bottom: .25rem; }
.hub-label { font-family: var(--font-head); font-size: .72rem; font-weight: 700; }
.hub-sub { font-family: var(--font-mono); font-size: .48rem; letter-spacing: .08em; color: var(--text3); margin-top: .1rem; }
.hub-lvl-tag { font-family: var(--font-mono); font-size: .42rem; letter-spacing: .08em; text-transform: uppercase; background: rgba(212,168,67,.12); border: 1px solid rgba(212,168,67,.2); color: var(--gold); padding: .1rem .3rem; border-radius: 2px; margin-top: .2rem; }
.sleep-btn { position: absolute; bottom: 1.5rem; font-family: var(--font-head); font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--text2); background: transparent; border: 1px solid var(--border); padding: .55rem 1.5rem; border-radius: var(--radius); transition: var(--t); }
.sleep-btn:hover { border-color: var(--cyan); color: var(--cyan); }

/* ── LOCATION SHELL ── */
.loc-screen { padding-top: 48px; flex-direction: row; }
.loc-sidebar { width: 240px; min-width: 240px; background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 1.25rem; gap: .5rem; overflow-y: auto; }
.loc-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.sb-eyebrow { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .3em; text-transform: uppercase; color: var(--text3); }
.sb-title { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; margin-top: .15rem; }
.s-div { height: 1px; background: var(--border); margin: .35rem 0; }
.s-lbl { font-family: var(--font-mono); font-size: .5rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text3); margin-top: .2rem; }
.stat-row { display: flex; align-items: center; justify-content: space-between; padding: .28rem 0; border-bottom: 1px solid rgba(255,255,255,.03); }
.sk { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .1em; color: var(--text3); }
.sv { font-family: var(--font-mono); font-size: .65rem; }
.sv.g { color: var(--green); } .sv.r { color: var(--red); } .sv.go { color: var(--gold); }
.sv.cy { color: var(--cyan); } .sv.pk { color: var(--pink); } .sv.pu { color: var(--purple); }
.act-btn { font-family: var(--font-head); font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); background: transparent; border: 1px solid var(--border); padding: .52rem .85rem; border-radius: var(--radius); text-align: left; width: 100%; display: flex; align-items: center; gap: .45rem; transition: var(--t); }
.act-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); background: rgba(212,168,67,.04); }
.act-btn:disabled { opacity: .28; cursor: not-allowed; }
.act-btn .ico { font-size: .85rem; }
.act-btn .rwd { margin-left: auto; color: var(--green); font-size: .52rem; }

/* ── MESSAGES ── */
.msg-area { flex: 1; padding: 1.5rem 2rem; overflow-y: auto; display: flex; flex-direction: column; gap: .75rem; }
.msg-narrator { font-style: italic; font-size: .95rem; line-height: 1.75; color: var(--text2); border-left: 2px solid var(--border); padding-left: 1rem; animation: fadeUp .3s ease; }
.msg-char { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--gold); padding: .85rem 1.1rem; max-width: 580px; animation: fadeUp .3s ease; }
.msg-char.pink { border-left-color: var(--pink); } .msg-char.cyan { border-left-color: var(--cyan); }
.msg-char.green { border-left-color: var(--green); } .msg-char.purple { border-left-color: var(--purple); }
.msg-char.rose { border-left-color: var(--rose); } .msg-char.lavender { border-left-color: var(--lavender); }
.msg-char.teal { border-left-color: var(--teal); } .msg-char.orange { border-left-color: var(--orange); }
.msg-char.gold { border-left-color: var(--gold); } .msg-char.self { border-left-color: var(--text3); align-self: flex-end; }
.char-name { font-family: var(--font-mono); font-size: .5rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .3rem; }
.char-name.pink { color: var(--pink); } .char-name.cyan { color: var(--cyan); } .char-name.green { color: var(--green); }
.char-name.purple { color: var(--purple); } .char-name.rose { color: var(--rose); } .char-name.lavender { color: var(--lavender); }
.char-name.teal { color: var(--teal); } .char-name.orange { color: var(--orange); } .char-name.gold { color: var(--gold); }
.char-name.self { color: var(--text3); }
.char-text { font-size: 1rem; line-height: 1.6; }
.msg-reward { align-self: center; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; color: var(--green); background: rgba(90,201,122,.07); border: 1px solid rgba(90,201,122,.2); padding: .4rem 1rem; animation: fadeUp .3s ease; }
.msg-penalty { align-self: center; font-family: var(--font-mono); font-size: .6rem; color: var(--red); background: rgba(201,90,90,.07); border: 1px solid rgba(201,90,90,.2); padding: .4rem 1rem; animation: fadeUp .3s ease; }
.msg-info { align-self: center; font-family: var(--font-mono); font-size: .6rem; color: var(--cyan); background: rgba(78,201,212,.07); border: 1px solid rgba(78,201,212,.2); padding: .4rem 1rem; animation: fadeUp .3s ease; }
.choice-bar { border-top: 1px solid var(--border); background: var(--bg2); padding: .75rem 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem; min-height: 52px; }
.choice-btn { font-family: var(--font-head); font-size: .6rem; font-weight: 600; letter-spacing: .08em; color: var(--text); background: var(--panel); border: 1px solid var(--border); padding: .5rem 1rem; border-radius: var(--radius); transition: var(--t); flex: 1; min-width: 130px; text-align: center; }
.choice-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ── CONVERSATION BANNER
   Drop files in assets/banners/[id]-banner.mp4/.gif/.jpg
   Shown at top of conversation screen, 160px tall ── */
.convo-banner { width: 100%; height: 160px; object-fit: cover; display: block; flex-shrink: 0; }
.convo-banner-fallback { width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; background: var(--bg3); border-bottom: 1px solid var(--border); flex-shrink: 0; font-size: 3rem; }
video.convo-banner { width: 100%; height: 160px; object-fit: cover; }

/* ── MARKETPLACE ── */
.mkt-wrap { flex: 1; display: flex; overflow: hidden; }
.mkt-panel { flex: 1; display: flex; flex-direction: column; border-right: 1px solid var(--border); }
.mkt-panel:last-child { border-right: none; }
.mkt-hdr { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--bg2); }
.mkt-hdr-title { font-family: var(--font-head); font-size: .85rem; font-weight: 700; }
.mkt-hdr-sub { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .1em; color: var(--text3); margin-top: .15rem; }
.mkt-list { flex: 1; overflow-y: auto; padding: .75rem; display: flex; flex-direction: column; gap: .4rem; }
.mkt-item { display: flex; align-items: center; justify-content: space-between; background: var(--panel); border: 1px solid var(--border); padding: .6rem .9rem; border-radius: var(--radius); gap: .5rem; }
.item-name { font-size: .88rem; flex: 1; }
.item-price { font-family: var(--font-mono); font-size: .7rem; color: var(--gold); white-space: nowrap; }
.item-price.good { color: var(--green); } .item-price.bad { color: var(--red); }
.item-btn { font-family: var(--font-head); font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .28rem .65rem; border-radius: var(--radius); border: 1px solid; transition: var(--t); white-space: nowrap; }
.item-btn.buy { color: var(--cyan); border-color: rgba(78,201,212,.4); background: rgba(78,201,212,.06); }
.item-btn.buy:hover { background: rgba(78,201,212,.15); }
.item-btn.sell { color: var(--green); border-color: rgba(90,201,122,.4); background: rgba(90,201,122,.06); }
.item-btn.sell:hover { background: rgba(90,201,122,.15); }
.item-btn:disabled { opacity: .3; cursor: not-allowed; }
.mkt-foot { padding: .7rem 1.25rem; border-top: 1px solid var(--border); background: var(--bg2); display: flex; align-items: center; gap: 1rem; }
.mkt-stat { font-family: var(--font-mono); font-size: .6rem; color: var(--text2); }
.mkt-stat span { color: var(--gold); }
.mkt-empty { display: flex; align-items: center; justify-content: center; flex: 1; font-style: italic; font-size: .9rem; color: var(--text3); }
.refresh-btn { font-family: var(--font-head); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); background: transparent; border: 1px solid var(--border); padding: .32rem .85rem; border-radius: var(--radius); transition: var(--t); margin-left: auto; }
.refresh-btn:hover { border-color: var(--cyan); color: var(--cyan); }

/* ── YARD WORK ── */
.yw-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; padding: 2rem; }
.job-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: .75rem; width: 100%; max-width: 620px; }
.job-card { background: var(--panel); border: 1px solid var(--border); padding: 1.1rem; border-radius: var(--radius); cursor: pointer; transition: all .2s; text-align: center; }
.job-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.jc-icon { font-size: 1.6rem; margin-bottom: .4rem; }
.jc-name { font-family: var(--font-head); font-size: .8rem; font-weight: 700; }
.jc-pay { font-family: var(--font-mono); font-size: .63rem; color: var(--gold); margin-top: .2rem; }
.jc-diff { font-family: var(--font-mono); font-size: .5rem; color: var(--text3); margin-top: .15rem; }
.yw-active-card { background: var(--panel); border: 1px solid var(--border); padding: 1.5rem 2rem; border-radius: var(--radius); text-align: center; max-width: 420px; width: 100%; }
.yw-job-name { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; margin-bottom: .3rem; }
.yw-job-pay { font-family: var(--font-mono); font-size: .78rem; color: var(--gold); margin-bottom: 1rem; }
.yw-ring { width: 88px; height: 88px; border-radius: 50%; background: conic-gradient(var(--gold) 100%, var(--border) 0%); display: flex; align-items: center; justify-content: center; margin: 0 auto .85rem; transition: background .1s; }
.yw-ring-inner { width: 70px; height: 70px; border-radius: 50%; background: var(--panel); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 1.3rem; }
.yw-click-btn { font-family: var(--font-head); font-size: 1rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--bg); background: var(--gold); border: none; padding: 1rem 2.5rem; border-radius: var(--radius); width: 100%; max-width: 260px; transition: transform .08s; }
.yw-click-btn:active { transform: scale(.95); }
.yw-click-btn:disabled { background: var(--border); color: var(--text3); cursor: not-allowed; transform: none; }
.yw-counter { font-family: var(--font-mono); font-size: .68rem; color: var(--text2); }
.yw-counter span { font-size: .82rem; }
.yw-bonus { font-family: var(--font-mono); font-size: .6rem; color: var(--green); min-height: 1.2em; }
.yw-result { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; padding: .85rem 1.5rem; border-radius: var(--radius); display: none; text-align: center; }
.yw-result.win { color: var(--green); background: rgba(90,201,122,.1); border: 1px solid rgba(90,201,122,.3); }
.yw-result.lose { color: var(--red); background: rgba(201,90,90,.1); border: 1px solid rgba(201,90,90,.3); }

/* ── TECH PROJECTS ── */
.tech-wrap { flex: 1; padding: 1.5rem 2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }
.tech-project-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.tech-proj-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.tech-proj-name { font-family: var(--font-head); font-size: .9rem; font-weight: 700; }
.tech-proj-reward { font-family: var(--font-mono); font-size: .65rem; color: var(--gold); }
.tech-proj-desc { font-size: .85rem; color: var(--text2); line-height: 1.55; margin-bottom: .85rem; }
.tech-progress-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: .5rem; }
.tech-progress-fill { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--purple)); border-radius: 3px; transition: width .5s ease; }
.tech-proj-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tech-time-label { font-family: var(--font-mono); font-size: .55rem; color: var(--text3); }
.tech-start-btn { font-family: var(--font-head); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bg); background: var(--cyan); border: none; padding: .38rem .9rem; border-radius: var(--radius); cursor: pointer; transition: var(--t); }
.tech-start-btn:hover { background: #72d8e0; }
.tech-start-btn:disabled { background: var(--border); color: var(--text3); cursor: not-allowed; }
.tech-collect-btn { font-family: var(--font-head); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bg); background: var(--green); border: none; padding: .38rem .9rem; border-radius: var(--radius); cursor: pointer; }
.tech-section-hdr { font-family: var(--font-head); font-size: .85rem; font-weight: 700; margin: .75rem 0 .35rem; }

/* ── NEIGHBORHOOD
   Drop portrait images in assets/portraits/[id].jpg
   72px circle in grid, 52px circle in sidebar ── */
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: .85rem; padding: 1.25rem; overflow-y: auto; flex: 1; }
.char-card { background: var(--panel); border: 1px solid var(--border); padding: 1rem .85rem; border-radius: var(--radius); cursor: pointer; transition: all .22s; text-align: center; position: relative; }
.char-card.locked { opacity: .35; cursor: not-allowed; filter: grayscale(1); }
.char-card:not(.locked):hover { transform: translateY(-2px); }
.char-card.dating { border-color: rgba(212,110,138,.4); }
.char-portrait { width: 72px; height: 72px; border-radius: 50%; background: var(--bg3); border: 2px solid var(--border); margin: 0 auto .5rem; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }
.char-portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.char-portrait .emoji-fb { font-size: 1.6rem; }
.char-card:not(.locked) .char-portrait { border-color: var(--pink); }
.char-card.dating .char-portrait { box-shadow: 0 0 12px rgba(212,110,138,.4); }
.char-card-name { font-family: var(--font-head); font-size: .8rem; font-weight: 700; }
.char-card-role { font-family: var(--font-mono); font-size: .48rem; letter-spacing: .08em; color: var(--text3); margin-top: .1rem; }
.char-stars { margin-top: .3rem; font-size: .72rem; color: var(--gold); letter-spacing: 1px; }
.char-badge { display: inline-block; font-family: var(--font-mono); font-size: .44rem; letter-spacing: .08em; text-transform: uppercase; padding: .1rem .3rem; border-radius: 2px; margin-top: .2rem; }
.badge-dating { background: rgba(212,110,138,.1); border: 1px solid rgba(212,110,138,.3); color: var(--pink); }
.badge-hired { background: rgba(90,201,122,.1); border: 1px solid rgba(90,201,122,.3); color: var(--green); }
.badge-premium { background: rgba(212,168,67,.15); border: 1px solid rgba(212,168,67,.4); color: var(--gold); }
.char-lock-icon { position: absolute; top: .4rem; right: .4rem; font-size: .68rem; color: var(--text3); }
.char-unlock-hint { font-family: var(--font-mono); font-size: .46rem; color: var(--text3); margin-top: .2rem; line-height: 1.4; }
.bar-track { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: .25rem; }
.bar-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }
.bar-fill.aff { background: linear-gradient(90deg, var(--pink), #e8a0b8); }
.bar-fill.trust { background: linear-gradient(90deg, var(--cyan), #a0dce8); }

/* ── CONVO SIDEBAR PORTRAIT ── */
.cv-portrait-wrap { width: 52px; height: 52px; border-radius: 50%; background: var(--bg3); border: 2px solid var(--border2); overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cv-portrait-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* ── QUEST PANEL ── */
.quest-list { display: flex; flex-direction: column; gap: .35rem; }
.quest-item { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .75rem; }
.quest-item.done { border-color: rgba(90,201,122,.3); background: rgba(90,201,122,.04); }
.quest-name { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .08em; color: var(--text2); }
.quest-item.done .quest-name { color: var(--green); }
.quest-prog { font-family: var(--font-mono); font-size: .48rem; color: var(--text3); margin-top: .1rem; }
.quest-bar-track { height: 3px; background: var(--border); border-radius: 2px; margin-top: .25rem; overflow: hidden; }
.quest-bar-fill { height: 100%; background: var(--gold); border-radius: 2px; transition: width .4s; }
.quest-item.done .quest-bar-fill { background: var(--green); }

/* ── RELATIONSHIP BANNER ── */
.rel-level-banner { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: .65rem .85rem; display: flex; align-items: center; justify-content: space-between; }
.rel-level-label { font-family: var(--font-mono); font-size: .5rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text3); }
.rel-stars { font-size: .9rem; color: var(--gold); letter-spacing: 2px; }
.rel-title { font-family: var(--font-head); font-size: .72rem; font-weight: 700; margin-top: .15rem; }

/* ── UPGRADE MODAL ── */
#upgrade-modal { position: fixed; inset: 0; background: rgba(0,0,0,.78); z-index: 800; display: none; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
#upgrade-modal.open { display: flex; }
.up-box { background: var(--bg2); border: 1px solid var(--border); border-top: 3px solid var(--gold); padding: 2rem; max-width: 480px; width: 90%; border-radius: var(--radius); animation: fadeUp .35s ease; text-align: center; }
.up-box h2 { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--gold); margin-bottom: .5rem; }
.up-box p { font-style: italic; color: var(--text2); line-height: 1.65; margin-bottom: 1.25rem; }
.up-confirm { font-family: var(--font-head); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--bg); background: var(--gold); border: none; padding: .8rem 2rem; border-radius: var(--radius); cursor: pointer; transition: var(--t); }
.up-confirm:hover { background: #e0b85a; }

/* ── QUEST COMPLETE MODAL
   Drop video files in assets/video/[id]-levelup-[1-5].mp4 ── */
#quest-modal { position: fixed; inset: 0; background: rgba(0,0,0,.82); z-index: 810; display: none; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
#quest-modal.open { display: flex; }
.qm-box { background: var(--bg2); border: 1px solid var(--border); border-top: 3px solid var(--pink); padding: 2rem; max-width: 440px; width: 90%; border-radius: var(--radius); animation: fadeUp .35s ease; text-align: center; }
.qm-video-slot { width: 100%; height: 140px; background: var(--bg3); border-radius: var(--radius); margin-bottom: .85rem; overflow: hidden; display: none; }
.qm-video-slot video { width: 100%; height: 100%; object-fit: cover; }
.qm-portrait { width: 80px; height: 80px; border-radius: 50%; background: var(--bg3); border: 3px solid var(--pink); margin: 0 auto .85rem; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.qm-portrait img { width: 100%; height: 100%; object-fit: cover; }
.qm-stars { font-size: 1.4rem; letter-spacing: 3px; color: var(--gold); margin-bottom: .35rem; }
.qm-title { font-family: var(--font-head); font-size: 1.2rem; font-weight: 800; margin-bottom: .25rem; }
.qm-sub { font-style: italic; font-size: .88rem; color: var(--text2); line-height: 1.6; margin-bottom: 1.25rem; }
.qm-bonus { font-family: var(--font-mono); font-size: .6rem; color: var(--green); background: rgba(90,201,122,.07); border: 1px solid rgba(90,201,122,.2); padding: .4rem 1rem; margin-bottom: 1rem; border-radius: var(--radius); }
.qm-confirm { font-family: var(--font-head); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--bg); background: var(--pink); border: none; padding: .8rem 2rem; border-radius: var(--radius); cursor: pointer; transition: var(--t); }
.qm-confirm:hover { background: #e090a8; }

/* ── TOAST ── */
#toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: var(--panel); border: 1px solid var(--gold); padding: .75rem 1.1rem; max-width: 290px; z-index: 999; display: none; animation: slideIn .3s ease; border-radius: var(--radius); }
#toast.show { display: block; }
#toast.t-red { border-color: var(--red); } #toast.t-green { border-color: var(--green); }
#toast.t-cyan { border-color: var(--cyan); } #toast.t-pink { border-color: var(--pink); }
#toast.t-purple { border-color: var(--purple); }
.toast-title { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .2rem; }
#toast.t-red .toast-title { color: var(--red); } #toast.t-green .toast-title { color: var(--green); }
#toast.t-cyan .toast-title { color: var(--cyan); } #toast.t-pink .toast-title { color: var(--pink); }
.toast-msg { font-size: .85rem; }

/* ── INTRO SEQUENCE ── */
#s-intro { align-items: center; justify-content: center; background: var(--bg); position: relative; overflow: hidden; }
#s-intro::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%); }
.intro-box { position: relative; background: var(--panel); border: 1px solid var(--border); max-width: 520px; width: 90%; padding: 2.75rem 2.5rem; border-radius: var(--radius); text-align: center; }
.intro-label { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .4em; text-transform: uppercase; color: var(--text3); margin-bottom: .85rem; }
.intro-heading { font-family: var(--font-head); font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800; line-height: 1.2; margin-bottom: .75rem; }
.intro-divider { width: 48px; height: 2px; background: var(--gold); margin: 1.1rem auto; }
.intro-body { font-style: italic; font-size: .97rem; line-height: 1.85; color: var(--text2); margin-bottom: 1.75rem; }
.intro-body strong { color: var(--text); font-style: normal; }
.intro-btn { font-family: var(--font-head); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; background: transparent; border: 1px solid var(--border2); color: var(--text2); padding: .7rem 2rem; border-radius: var(--radius); cursor: pointer; transition: var(--t); }
.intro-btn:hover { border-color: var(--gold); color: var(--gold); }
.intro-counter { font-family: var(--font-mono); font-size: .48rem; color: var(--text3); margin-top: 1.25rem; letter-spacing: .2em; }

/* ── HUB MAP (image card grid) ── */
#s-hub { padding-top: 48px; background: var(--bg); overflow-y: auto; align-items: flex-start; justify-content: flex-start; }
.hub-inner { width: 100%; max-width: 860px; margin: 0 auto; padding: 1.5rem 1.25rem 2rem; }
.hub-section-lbl { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .3em; text-transform: uppercase; color: var(--text3); margin-bottom: .75rem; }
#hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: .75rem; }
.hub-card { position: relative; border-radius: 6px; overflow: hidden; cursor: pointer; border: 1px solid var(--border); transition: all .22s; aspect-ratio: 4 / 3; background: var(--bg3); }
.hub-card:hover:not(.locked) { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.4); }
.hub-card.locked { opacity: .4; filter: grayscale(.7); cursor: not-allowed; }
.hub-card-home { grid-column: span 2; aspect-ratio: auto; min-height: 140px; }
.hub-card-img-wrap { width: 100%; height: 100%; position: absolute; inset: 0; }
.hub-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-card-emoji { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; background: var(--bg3); }
.hub-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(10,11,16,.93) 55%); padding: .6rem .75rem .65rem; }
.hub-card-name { font-family: var(--font-head); font-size: .82rem; font-weight: 700; color: #fff; }
.hub-card-sub { font-family: var(--font-mono); font-size: .46rem; letter-spacing: .1em; color: rgba(255,255,255,.42); margin-top: .1rem; }
.hub-card-lock { position: absolute; top: .5rem; right: .6rem; font-size: .9rem; opacity: .7; }
.hub-card-badge { position: absolute; top: .5rem; left: .6rem; font-family: var(--font-mono); font-size: .42rem; letter-spacing: .1em; text-transform: uppercase; background: rgba(212,168,67,.85); color: #0e0f13; padding: .15rem .45rem; border-radius: 2px; font-weight: 600; }

/* ── DIALOGUE BUBBLES ── */
.dlg-bubble { display: flex; align-items: flex-start; gap: .75rem; animation: fadeUp .3s ease; }
.dlg-bubble.self { flex-direction: row-reverse; }
.dlg-avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: var(--bg3); border: 2px solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.dlg-avatar.self-av { border-color: var(--text3); }
.dlg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dlg-content { max-width: 74%; }
.dlg-name { font-family: var(--font-mono); font-size: .5rem; letter-spacing: .15em; text-transform: uppercase; margin-bottom: .28rem; }
.dlg-name.self { color: var(--text3); text-align: right; }
.dlg-name.pink { color: var(--pink); } .dlg-name.cyan { color: var(--cyan); }
.dlg-name.green { color: var(--green); } .dlg-name.purple { color: var(--purple); }
.dlg-name.rose { color: var(--rose); } .dlg-name.lavender { color: var(--lavender); }
.dlg-name.teal { color: var(--teal); } .dlg-name.orange { color: var(--orange); }
.dlg-name.gold { color: var(--gold); }
.dlg-text { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid currentColor; padding: .8rem 1rem; font-size: 1rem; line-height: 1.65; border-radius: 0 4px 4px 0; }
.dlg-bubble .dlg-text { border-color: var(--border); }
.dlg-bubble.self .dlg-text { border-left: none; border-right: 3px solid var(--text3); border-radius: 4px 0 0 4px; background: var(--bg2); }

/* Colour the border-left to match character accent */
.dlg-bubble:not(.self) .dlg-name.pink   ~ .dlg-text,
.dlg-bubble:not(.self) .dlg-content:has(.dlg-name.pink) .dlg-text   { border-left-color: var(--pink); }
.dlg-bubble:not(.self) .dlg-content:has(.dlg-name.cyan) .dlg-text   { border-left-color: var(--cyan); }
.dlg-bubble:not(.self) .dlg-content:has(.dlg-name.green) .dlg-text  { border-left-color: var(--green); }
.dlg-bubble:not(.self) .dlg-content:has(.dlg-name.purple) .dlg-text { border-left-color: var(--purple); }
.dlg-bubble:not(.self) .dlg-content:has(.dlg-name.rose) .dlg-text   { border-left-color: var(--rose); }
.dlg-bubble:not(.self) .dlg-content:has(.dlg-name.lavender) .dlg-text { border-left-color: var(--lavender); }
.dlg-bubble:not(.self) .dlg-content:has(.dlg-name.teal) .dlg-text   { border-left-color: var(--teal); }
.dlg-bubble:not(.self) .dlg-content:has(.dlg-name.orange) .dlg-text { border-left-color: var(--orange); }
.dlg-bubble:not(.self) .dlg-content:has(.dlg-name.gold) .dlg-text   { border-left-color: var(--gold); }

/* ── CONTINUE BUTTON ── */
.dlg-continue-btn { font-family: var(--font-head); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--bg); background: var(--gold); border: none; padding: .8rem 2rem; border-radius: var(--radius); cursor: pointer; width: 100%; margin-bottom: .4rem; transition: var(--t); }
.dlg-continue-btn:hover { background: #e0b85a; }
.dlg-continue-btn.secondary { background: transparent; color: var(--text2); border: 1px solid var(--border); }
.dlg-continue-btn.secondary:hover { border-color: var(--text2); color: var(--text); }

/* ── CHOICE BAR (now just holds Continue) ── */
.choice-bar { border-top: 1px solid var(--border); background: var(--bg2); padding: .85rem 1.5rem; display: flex; flex-direction: column; gap: .4rem; min-height: 60px; }


/* ── MARKETPLACE ITEM CARDS ── */
.mkt-item { display: flex; align-items: flex-start; justify-content: space-between; background: var(--panel); border: 1px solid var(--border); padding: .7rem .9rem; border-radius: var(--radius); gap: .5rem; flex-direction: column; }
.mkt-item-main { display: flex; flex-direction: column; gap: .3rem; flex: 1; width: 100%; }
.mkt-item-right { display: flex; align-items: center; gap: .5rem; width: 100%; justify-content: space-between; }
.mkt-item-inv { border-left: 2px solid var(--border2); }
.mkt-item-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; width: 100%; margin-top: .3rem; }
.mkt-sell-row { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.item-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.item-badge { font-family: var(--font-mono); font-size: .46rem; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .45rem; border-radius: 2px; font-weight: 600; }

/* Condition badges */
.badge-mint        { background: rgba(90,201,122,.15);  color: var(--green);  border: 1px solid rgba(90,201,122,.3);  }
.badge-good        { background: rgba(78,201,212,.12);  color: var(--cyan);   border: 1px solid rgba(78,201,212,.3);  }
.badge-worn        { background: rgba(212,132,58,.12);  color: var(--orange); border: 1px solid rgba(212,132,58,.3);  }
.badge-damaged     { background: rgba(201,90,90,.12);   color: var(--red);    border: 1px solid rgba(201,90,90,.3);   }

/* Authenticity badges */
.badge-verified    { background: rgba(90,201,122,.1);   color: var(--green);  border: 1px solid rgba(90,201,122,.25); }
.badge-unverified  { background: rgba(212,168,67,.1);   color: var(--gold);   border: 1px solid rgba(212,168,67,.25); }
.badge-questionable{ background: rgba(201,90,90,.1);    color: var(--red);    border: 1px solid rgba(201,90,90,.25);  }

/* Info badges */
.badge-known       { background: rgba(78,201,212,.1);   color: var(--cyan);   border: 1px solid rgba(78,201,212,.25); }
.badge-investigated{ background: rgba(139,110,212,.1);  color: var(--purple); border: 1px solid rgba(139,110,212,.25); max-width: 100%; white-space: normal; }

/* Action buttons on inventory items */
.item-action-btn { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .06em; color: var(--text2); background: transparent; border: 1px solid var(--border); padding: .28rem .65rem; border-radius: var(--radius); cursor: pointer; transition: var(--t); white-space: nowrap; }
.item-action-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.item-action-btn.warn { border-color: rgba(201,90,90,.4); color: var(--red); }
.item-action-btn.warn:hover { background: rgba(201,90,90,.08); }

/* ── HUD EVENT BADGE ── */
.hud-event-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .05em;
  min-width: 22px;
  height: 22px;
  padding: 0 .4rem;
  border-radius: 99px;
  cursor: pointer;
  transition: var(--t);
  margin-left: .25rem;
}
.hud-event-badge:hover { background: #e06060; }

/* ── CHARACTER CARD EVENT DOT ── */
.char-portrait { position: relative; }
.char-event-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .55rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  z-index: 2;
}
.char-card.has-event { border-color: rgba(201,90,90,.5); cursor: pointer; }
.char-card.has-event:hover { border-color: var(--red); transform: translateY(-2px); }

/* ── NEXT EVENT HINT ON CARD ── */
.char-next-hint {
  font-family: var(--font-mono);
  font-size: .46rem;
  color: var(--text3);
  margin-top: .3rem;
  line-height: 1.5;
  text-align: center;
}

/* ── EVENT BADGE ON CARD ── */
.badge-event {
  background: rgba(201,90,90,.12);
  border: 1px solid rgba(201,90,90,.3);
  color: var(--red);
  font-family: var(--font-mono);
  font-size: .44rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .1rem .3rem;
  border-radius: 2px;
  margin-top: .2rem;
  display: inline-block;
}

/* ── PORTRAIT PICKER MODAL ─────────────────────────────────── */
/* Opens after a dating event (forced first pick) and from the
   conversation sidebar Change Photo button (re-pick). 2x2 grid
   of photo options. Missing assets fall back to the character
   emoji on each tile. */
#portrait-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 820;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}
#portrait-modal.open { display: flex; }

.pp-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-top: 3px solid var(--pink);
  padding: 1.75rem;
  max-width: 520px;
  width: 92%;
  border-radius: var(--radius);
  animation: fadeUp .35s ease;
  text-align: center;
}
.pp-title {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--pink);
  margin-bottom: .35rem;
}
.pp-title span { color: var(--text); }
.pp-sub {
  font-style: italic;
  color: var(--text2);
  font-size: .85rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.pp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.pp-option {
  background: var(--bg3);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease, transform .15s ease;
}
.pp-option:hover {
  border-color: var(--pink);
  transform: translateY(-2px);
}
.pp-option.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(212,168,67,.25);
}
.pp-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pp-option .pp-emoji-fb {
  font-size: 2.6rem;
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.pp-option .pp-label {
  position: absolute;
  bottom: .3rem;
  left: 0;
  right: 0;
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .06em;
  color: var(--text2);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  pointer-events: none;
}
.pp-cancel {
  margin-top: 1rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  padding: .55rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .15s ease, border-color .15s ease;
}
.pp-cancel:hover {
  color: var(--text);
  border-color: var(--border2);
}

/* ── CHANGE PHOTO BUTTON IN CONVO SIDEBAR ──────────────────── */
.cv-photo-btn {
  margin-top: .5rem;
  font-size: .55rem;
}

/* ── 2x5 NEIGHBOURHOOD GRID + BIGGER SQUARE CARDS ──────────── */
/* Override the earlier auto-fill grid: exactly 5 columns, 2 rows. */
.char-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
  padding: 1.5rem;
}
.char-card {
  padding: 1.4rem 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
}
.char-portrait {
  width: 96px;
  height: 96px;
}
.char-portrait .emoji-fb { font-size: 2.2rem; }
.char-card-name {
  font-size: 1rem;
  margin-top: .1rem;
}
.char-card-role { font-size: .54rem; margin-top: .15rem; }
.char-stars { margin-top: .45rem; font-size: .85rem; letter-spacing: 2px; }
.char-event-dot { width: 22px; height: 22px; font-size: .62rem; top: 4px; right: 4px; }
.char-card .char-badge { margin-top: .35rem; }
.char-next-hint { margin-top: .45rem; font-size: .48rem; }

/* On narrow screens (< ~1100px viewport, where 5 columns get tight)
   drop back to auto-fill so cards stay legible. */
@media (max-width: 1100px) {
  .char-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    grid-template-rows: none;
  }
}

/* ── CHARACTER STORY SCREEN ──────────────────────────────── */
/* Lives at s-charstory. Sidebar mirrors the convo sidebar styling.
   Main area is a vertical event timeline. */
.story-wrap {
  flex: 1;
  padding: 1.5rem 2rem 2rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.story-section-hdr {
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text3);
  margin-top: 1rem;
  margin-bottom: -.25rem;
}
.story-section-hdr:first-child { margin-top: 0; }

/* Big Talk button — always available */
.story-talk-btn {
  display: flex;
  align-items: center;
  gap: .65rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text);
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
  text-align: left;
  width: 100%;
}
.story-talk-btn .story-talk-ico { font-size: 1.1rem; }
.story-talk-btn .story-talk-sub {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .52rem;
  letter-spacing: .12em;
  color: var(--text3);
  font-weight: 400;
  text-transform: uppercase;
}
.story-talk-btn:hover {
  background: var(--panel);
  border-left-color: #6ad7e0;
}

/* Event cards in the timeline */
.story-event-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  animation: fadeUp .25s ease;
}
.story-event-card.pending {
  border-color: rgba(201,90,90,.4);
  border-left-color: var(--red);
  background: rgba(201,90,90,.04);
}
.story-event-card.done {
  border-left-color: var(--green);
}
.story-event-card.locked {
  opacity: .55;
  border-left-color: var(--border2);
}
.story-event-num {
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text3);
  min-width: 64px;
}
.story-event-card.pending .story-event-num { color: var(--red); }
.story-event-card.done    .story-event-num { color: var(--green); }
.story-event-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.story-event-title {
  font-family: var(--font-body);
  font-size: .9rem;
  font-style: italic;
  color: var(--text2);
  line-height: 1.5;
}
.story-event-card.done .story-event-title { color: var(--text); font-style: normal; }
.story-event-hint {
  font-family: var(--font-mono);
  font-size: .52rem;
  letter-spacing: .06em;
  color: var(--text3);
  margin-top: .15rem;
}
.story-event-btn {
  font-family: var(--font-head);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .42rem .85rem;
  border-radius: var(--radius);
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  transition: var(--t);
  white-space: nowrap;
}
.story-event-btn.begin {
  color: var(--red);
  border-color: rgba(201,90,90,.5);
  background: rgba(201,90,90,.08);
}
.story-event-btn.begin:hover { background: rgba(201,90,90,.18); }
.story-event-btn.replay {
  color: var(--green);
  border-color: rgba(90,201,122,.4);
  background: rgba(90,201,122,.06);
}
.story-event-btn.replay:hover { background: rgba(90,201,122,.15); }
.story-event-lock-ico { font-size: .9rem; opacity: .6; }

.story-empty {
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .08em;
  color: var(--text3);
  text-align: center;
  padding: 1.5rem 1rem;
  font-style: italic;
}

/* ── DAILY ROUTINE PICKER MODAL ────────────────────────────── */
/* Shown each morning right after sleep. 3 cards in a row. */
#routine-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  z-index: 830;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
#routine-modal.open { display: flex; }

.routine-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding: 2rem 2.25rem;
  max-width: 720px;
  width: 94%;
  border-radius: var(--radius);
  animation: fadeUp .35s ease;
  text-align: center;
}
.routine-eyebrow {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem;
}
.routine-title {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: .35rem;
}
.routine-sub {
  font-style: italic;
  color: var(--text2);
  font-size: .9rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.routine-rest-note {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(78,201,212,.08);
  border: 1px solid rgba(78,201,212,.25);
  padding: .5rem .85rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
}
.routine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .85rem;
}
.routine-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border2);
  padding: 1.4rem 1.1rem 1.2rem;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  text-align: center;
  font-family: var(--font-body);
  color: var(--text);
  transition: var(--t);
}
.routine-card:hover {
  border-color: var(--border2);
  background: var(--panel);
  transform: translateY(-2px);
}
.routine-card.r-hustle { border-top-color: var(--red); }
.routine-card.r-hustle:hover { border-color: var(--red); }
.routine-card.r-normal { border-top-color: var(--gold); }
.routine-card.r-normal:hover { border-color: var(--gold); }
.routine-card.r-rest   { border-top-color: var(--cyan); }
.routine-card.r-rest:hover { border-color: var(--cyan); }
.r-icon { font-size: 2rem; line-height: 1; }
.r-label {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  margin-top: .2rem;
}
.r-desc {
  font-style: italic;
  color: var(--text2);
  font-size: .82rem;
  line-height: 1.45;
  margin-top: .25rem;
  min-height: 2.5em;
}
.r-short {
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .08em;
  color: var(--text3);
  text-transform: uppercase;
  margin-top: .35rem;
}

/* ── HOME UPGRADES SCREEN ─────────────────────────────────── */
.home-upgrades-wrap {
  flex: 1;
  padding: 1.5rem 2rem 2rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Current tier card (image + intro) */
.home-tier-card {
  display: flex;
  gap: 1.25rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.home-tier-img-wrap {
  width: 140px;
  height: 100px;
  background: var(--bg3);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.home-tier-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-tier-emoji {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; background: var(--bg3);
}
.home-tier-body { flex: 1; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.home-tier-eyebrow {
  font-family: var(--font-mono);
  font-size: .52rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.home-tier-name {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
}
.home-tier-desc {
  font-style: italic;
  color: var(--text2);
  font-size: .95rem;
  line-height: 1.55;
}

/* Next-tier teaser card */
.home-next-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border2);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.home-next-card.available {
  border-left-color: var(--cyan);
  background: rgba(78,201,212,.04);
}
.home-next-card.locked { opacity: .8; }
.home-next-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.home-next-body { flex: 1; min-width: 0; }
.home-next-eyebrow {
  font-family: var(--font-mono);
  font-size: .52rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cyan);
}
.home-next-card.locked .home-next-eyebrow { color: var(--text3); }
.home-next-desc {
  font-style: italic;
  color: var(--text2);
  font-size: .88rem;
  line-height: 1.5;
  margin-top: .25rem;
}
.home-next-cost {
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .08em;
  color: var(--gold);
  margin-top: .35rem;
}
.home-next-lock {
  font-family: var(--font-mono);
  font-size: .52rem;
  letter-spacing: .08em;
  color: var(--red);
  margin-top: .25rem;
}
.home-locked-ico { font-size: 1.2rem; opacity: .6; }

/* Section header in upgrades wrap */
.home-section-hdr {
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text3);
  margin-top: 1rem;
  margin-bottom: -.25rem;
}

/* Room upgrade cards */
.home-room-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.home-room-head {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.home-room-icon { font-size: 1.5rem; line-height: 1; }
.home-room-name {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .65rem;
}
.home-room-level {
  font-family: var(--font-mono);
  font-size: .52rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(212,168,67,.08);
  border: 1px solid rgba(212,168,67,.2);
  padding: .15rem .45rem;
  border-radius: 2px;
}
.home-room-desc {
  font-size: .85rem;
  line-height: 1.55;
  color: var(--text2);
}
.home-room-pips {
  display: flex;
  gap: .35rem;
}
.home-room-pip {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--bg3);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: var(--text3);
}
.home-room-pip.filled {
  background: rgba(90,201,122,.1);
  border-color: rgba(90,201,122,.4);
  color: var(--green);
}
.home-room-buy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .3rem;
  padding-top: .55rem;
  border-top: 1px solid var(--border);
}
.home-room-next {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.home-room-next-lbl {
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .08em;
  color: var(--text2);
}
.home-room-next-cost {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--gold);
}
.home-room-maxed {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .1em;
  color: var(--green);
  flex: 1;
}

/* Upgrade button — used for both room and tier moves */
.home-upgrade-btn {
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--gold);
  border: none;
  padding: .65rem 1.25rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--t);
  white-space: nowrap;
}
.home-upgrade-btn:hover:not(:disabled) { background: #e0b85a; }
.home-upgrade-btn.small {
  font-size: .58rem;
  padding: .42rem .85rem;
}
.home-upgrade-btn.disabled,
.home-upgrade-btn:disabled {
  background: var(--border);
  color: var(--text3);
  cursor: not-allowed;
}

/* ── HOME TIER NARRATIVE MODAL ────────────────────────────── */
#home-tier-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  z-index: 815;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
#home-tier-modal.open { display: flex; }
.hth-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding: 2rem 2.25rem;
  max-width: 520px;
  width: 92%;
  border-radius: var(--radius);
  animation: fadeUp .35s ease;
  text-align: center;
}
.hth-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: .5rem;
}
.hth-eyebrow {
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .35rem;
}
.hth-title {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 1.1rem;
}
.hth-lines {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-bottom: 1.5rem;
}
.hth-line {
  font-style: italic;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--text2);
}
.hth-confirm {
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--gold);
  border: none;
  padding: .8rem 2rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--t);
}
.hth-confirm:hover { background: #e0b85a; }

/* ── MARKETPLACE SELLER REPUTATION GAUGE ──────────────────── */
.rep-gauge {
  margin-top: .65rem;
  padding: .55rem .7rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.rep-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
}
.rep-eyebrow {
  font-family: var(--font-mono);
  font-size: .48rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text3);
}
.rep-tier {
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .08em;
  font-weight: 600;
}
.rep-untrusted { color: var(--red);    }
.rep-suspect   { color: var(--orange); }
.rep-average   { color: var(--text2);  }
.rep-trusted   { color: var(--cyan);   }
.rep-renowned  { color: var(--gold);   }

.rep-bar-track {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.rep-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease, background .25s ease;
}
.rep-fill-untrusted { background: linear-gradient(90deg, #8a3a3a, var(--red)); }
.rep-fill-suspect   { background: linear-gradient(90deg, #8a5b30, var(--orange)); }
.rep-fill-average   { background: linear-gradient(90deg, #5a6080, var(--text2)); }
.rep-fill-trusted   { background: linear-gradient(90deg, #2b8d96, var(--cyan)); }
.rep-fill-renowned  { background: linear-gradient(90deg, #9c7d2f, var(--gold)); }

.rep-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.rep-num {
  font-family: var(--font-mono);
  font-size: .5rem;
  color: var(--text2);
}
.rep-desc {
  font-style: italic;
  font-size: .58rem;
  color: var(--text3);
  text-align: right;
  flex: 1;
  line-height: 1.4;
}

/* ── JOINT EVENT VISUAL TREATMENT ──────────────────────────── */
/* Convo sidebar second portrait — overlaps the primary, visible
   only when the active event is a joint event. */
.cv-portrait-wrap { position: relative; }
.cv-partner-portrait {
  display: none;
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg3);
  border: 2px solid var(--bg);
  overflow: hidden;
  z-index: 2;
}
.cv-portrait-wrap.joint .cv-partner-portrait { display: block; }
.cv-partner-portrait img { width: 100%; height: 100%; object-fit: cover; }
.cv-partner-portrait span {
  display: none;
  width: 100%; height: 100%;
  align-items: center; justify-content: center;
}

/* Joint event card in the STORY timeline — gold border */
.story-event-card.joint {
  border-left-color: var(--gold);
  background: rgba(212,168,67,.04);
}
.story-event-card.joint .story-event-num { color: var(--gold); }
.story-event-card.joint .story-event-title::before {
  content: '★ ';
  color: var(--gold);
}

/* ── NEW CONVERSATION SCREEN — big portrait left, dialogue right ── */
.convo-screen {
  padding-top: 48px;
  flex-direction: row;
  height: 100vh;
}
.convo-hero {
  width: 380px;
  min-width: 380px;
  max-width: 380px;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 1.25rem;
  gap: .75rem;
}
.convo-hero-portrait {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--bg3);
  border: 2px solid var(--border2);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.convo-hero-portrait.joint .cv-partner-portrait {
  display: block;
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg3);
  border: 3px solid var(--bg);
  overflow: hidden;
  z-index: 2;
}
.convo-hero-portrait .cv-partner-portrait { display: none; }
.convo-hero-portrait .cv-partner-portrait img { width: 100%; height: 100%; object-fit: cover; }
.convo-hero-info { display: flex; flex-direction: column; gap: .5rem; }
.convo-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: .52rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text3);
}
.convo-hero-name {
  font-family: var(--font-head);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
.convo-hero-relbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .75rem;
}
.convo-hero-relbar .rel-title { font-size: .7rem; }
.convo-hero-bars { display: flex; flex-direction: column; gap: .15rem; }
.convo-bar-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .54rem;
  letter-spacing: .08em;
}
.convo-bar-lbl { color: var(--text3); text-transform: uppercase; }
.convo-bar-val { color: var(--text2); }
.convo-hero-stats {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .75rem;
}
.convo-back-btn { margin-top: auto; }

.convo-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
.convo-main .msg-area {
  flex: 1;
  padding: 2rem 2.5rem;
  overflow-y: auto;
}

/* Inline media inside dialogue — shows at natural size, conversation
   scrolls past large images. width caps at the dialogue container so
   ultra-wide images don't break layout. height grows to match. */
.dlg-inline-img,
.dlg-inline-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 1rem auto;
  border-radius: var(--radius);
  background: transparent;
  animation: fadeUp .35s ease;
  flex-shrink: 0;   /* don't let the flex column squish tall media */
}
.dlg-inline-img img,
.dlg-inline-video video {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg3);
}
.dlg-inline-caption {
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .1em;
  color: var(--text3);
  text-align: center;
  margin-top: .25rem;
  font-style: italic;
}

/* On narrower screens shrink the hero panel */
@media (max-width: 1100px) {
  .convo-hero { width: 300px; min-width: 300px; max-width: 300px; padding: 1rem; }
  .convo-hero-name { font-size: 1.4rem; }
  .convo-main .msg-area { padding: 1.5rem 1.5rem; }
}

/* ── BIGGER RECTANGULAR GRID PORTRAITS ─────────────────────── */
/* Overrides earlier .char-portrait circle styling. Now a soft-cornered
   rectangle that gives the artwork more breathing room. */
.char-portrait {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  background: var(--bg3);
  border: 2px solid var(--border);
  margin: 0 0 .65rem;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.char-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;  /* slightly tighter to sit inside the border */
  display: block;
}
.char-portrait .emoji-fb {
  font-size: 3rem;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.char-card:not(.locked) .char-portrait { border-color: var(--pink); }
.char-card.dating .char-portrait {
  box-shadow: 0 0 16px rgba(212,110,138,.5);
  border-color: var(--pink);
}
/* Bump the card itself to fit the taller portrait */
.char-card {
  padding: .85rem .75rem 1rem;
  aspect-ratio: auto;
}
.char-event-dot { top: 6px; right: 6px; width: 26px; height: 26px; font-size: .7rem; }

/* ── STORY SCREEN HERO PORTRAIT (matches convo hero) ──────── */
.cs-hero-portrait {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--bg3);
  border: 2px solid var(--border2);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.cs-hero-portrait img { width: 100%; height: 100%; object-fit: cover; }


/* ── Tech Choice Modal ───────────────────────────────────── */
#tech-choice-modal { position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; z-index:9999; }
#tech-choice-modal.open { display:flex; }
#tech-choice-modal .tc-box { background:var(--bg2,#1a1a22); border:1px solid var(--border,#3a3a45); border-radius:12px; padding:2rem; max-width:640px; width:90%; text-align:center; }
#tech-choice-modal .tc-eyebrow { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; color:var(--text3); }
#tech-choice-modal .tc-title { font-family:var(--font-serif); margin:.5rem 0 .25rem; }
#tech-choice-modal .tc-sub { font-family:var(--font-mono); font-size:.65rem; color:var(--text3); margin-bottom:1.5rem; }
#tech-choice-modal .tc-options { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
#tech-choice-modal .tc-opt { background:var(--bg3,#26262f); border:1px solid var(--border,#3a3a45); border-radius:10px; padding:1.25rem; cursor:pointer; color:var(--text1); transition:.15s; }
#tech-choice-modal .tc-opt:hover { border-color:var(--pink); transform:translateY(-2px); }
#tech-choice-modal .tc-emoji { font-size:2.5rem; }
#tech-choice-modal .tc-name { font-family:var(--font-serif); font-size:1.2rem; margin-top:.4rem; }
#tech-choice-modal .tc-role { font-family:var(--font-mono); font-size:.6rem; color:var(--text3); letter-spacing:.1em; margin-top:.15rem; }
#tech-choice-modal .tc-blurb { font-family:var(--font-mono); font-size:.65rem; color:var(--text2); margin-top:.6rem; line-height:1.5; }


/* ── Patreon HUD button ──────────────────────────────────── */
.btn-patreon { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:#FF424D; color:#fff; border-radius:6px; font-family:var(--font-mono); font-size:.6rem; font-weight:600; text-decoration:none; margin-left:8px; }
.btn-patreon:hover { background:#e63946; }

/* ── Codeword inline UI in dialogue ───────────────────────── */
.dlg-codeword { background:rgba(0,0,0,.4); border:1px solid var(--border,#3a3a45); border-radius:8px; padding:1rem; margin:.8rem 0; }
.dlg-codeword .cw-prompt { font-family:var(--font-mono); font-size:.7rem; color:var(--text2); margin-bottom:.6rem; }
.dlg-codeword .cw-row { display:flex; gap:.5rem; }
.dlg-codeword .cw-input { flex:1; padding:.5rem .7rem; background:var(--bg3,#26262f); border:1px solid var(--border,#3a3a45); color:var(--text1); border-radius:4px; font-family:var(--font-mono); }
.dlg-codeword .cw-btn { padding:.5rem 1rem; background:var(--pink); border:none; color:#fff; border-radius:4px; cursor:pointer; font-family:var(--font-mono); }
.dlg-codeword .cw-msg { margin-top:.5rem; font-family:var(--font-mono); font-size:.65rem; min-height:.9rem; }

/* ── Shop ────────────────────────────────────────────────── */
.shop-wrap { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; padding:1rem; }
.shop-card { background:var(--bg3,#26262f); border:1px solid var(--border,#3a3a45); border-radius:10px; padding:1.25rem; text-align:center; }
.shop-emoji { font-size:2.5rem; margin-bottom:.5rem; }
.shop-name { font-family:var(--font-serif); font-size:1.05rem; color:var(--text1); }
.shop-desc { font-family:var(--font-mono); font-size:.6rem; color:var(--text3); margin-top:.3rem; line-height:1.4; }
.shop-price { font-family:var(--font-mono); font-size:.75rem; color:var(--gold); margin-top:.6rem; }
.shop-buy { margin-top:.7rem; padding:.5rem 1rem; background:var(--pink); border:none; color:#fff; border-radius:6px; font-family:var(--font-mono); font-size:.6rem; cursor:pointer; }
.shop-buy:hover { filter:brightness(1.1); }

/* ── Tech Office Mgr Modal ───────────────────────────────── */
#tech-office-mgr-modal { position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index:9999; }
#tech-office-mgr-modal.open { display:flex; }
#tech-office-mgr-modal .tom-box { background:var(--bg2,#1a1a22); border:1px solid var(--border,#3a3a45); border-radius:12px; padding:2rem; max-width:760px; width:90%; text-align:center; }
#tech-office-mgr-modal .tom-eyebrow { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; color:var(--text3); }
#tech-office-mgr-modal .tom-title { font-family:var(--font-serif); margin:.5rem 0 .25rem; }
#tech-office-mgr-modal .tom-sub { font-family:var(--font-mono); font-size:.65rem; color:var(--text3); margin-bottom:1.5rem; }
#tech-office-mgr-modal .tom-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; }
#tech-office-mgr-modal .tom-opt { background:var(--bg3,#26262f); border:1px solid var(--border,#3a3a45); border-radius:10px; padding:1.1rem; cursor:pointer; color:var(--text1); }
#tech-office-mgr-modal .tom-opt:hover { border-color:var(--pink); }
#tech-office-mgr-modal .tom-emoji { font-size:2.2rem; }
#tech-office-mgr-modal .tom-name { font-family:var(--font-serif); font-size:1.05rem; margin-top:.4rem; }
#tech-office-mgr-modal .tom-blurb { font-family:var(--font-mono); font-size:.6rem; color:var(--text2); margin-top:.4rem; line-height:1.4; }


/* ── HUD secondary button (Credits) ─────────────────────── */
.btn-hud-secondary {
  background: transparent; border: 1px solid var(--border, #3a3a45);
  color: var(--text2); padding: 4px 10px; border-radius: 6px;
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .08em;
  cursor: pointer; margin-left: 6px;
}
.btn-hud-secondary:hover { color: var(--text1); border-color: var(--text2); }

/* ── Home / Desk card grid — same look & feel as the map cards ─ */
.home-card-grid {
  display: grid;
  /* Auto-fit grid (2-up on wide screens, wraps to 1 on narrow) */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  max-width: 760px;
  margin: 1.5rem auto 0;
}
/* Override the legacy `.hub-card-home` rule so home/desk cards
   match the map: 4:3 aspect ratio with the white label overlay. */
.home-card-grid .hub-card { position: relative; }
.home-card-grid .hub-card-home {
  grid-column: auto;          /* don't span 2 cols like on the map */
  aspect-ratio: 4 / 3;        /* same shape as map cards */
  min-height: 0;              /* let aspect-ratio drive height */
}
.home-card-grid .hub-card.locked { opacity: .45; cursor: default; }


/* ── Pre-event gate modal ─────────────────────────────── */
#gate-modal { position:fixed; inset:0; background:rgba(0,0,0,.82); display:none; align-items:center; justify-content:center; z-index:9999; }
#gate-modal.open { display:flex; }
#gate-modal .gate-box { background:var(--bg2,#1a1a22); border:1px solid var(--border,#3a3a45); border-radius:12px; padding:2rem; max-width:440px; width:90%; text-align:center; }
#gate-modal .gate-eyebrow { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; color:var(--text3); }
#gate-modal .gate-title { font-family:var(--font-serif); margin:.5rem 0 1rem; color:var(--text1); }
#gate-modal .gate-hint { font-family:var(--font-mono); font-size:.65rem; color:var(--text2); margin-bottom:1.2rem; line-height:1.5; padding:.7rem; background:rgba(255,255,255,.04); border-radius:6px; }
#gate-modal .gate-input { width:100%; padding:.7rem .9rem; background:var(--bg3,#26262f); border:1px solid var(--border,#3a3a45); color:var(--text1); border-radius:6px; font-family:var(--font-mono); margin-bottom:.7rem; }
#gate-modal .gate-submit { display:block; width:100%; padding:.7rem; background:var(--pink); border:none; color:#fff; border-radius:6px; font-family:var(--font-mono); cursor:pointer; }
#gate-modal .gate-msg { font-family:var(--font-mono); font-size:.65rem; color:var(--red); margin-top:.6rem; min-height:.9rem; }
#gate-modal .gate-cancel { margin-top:.8rem; background:transparent; border:1px solid var(--border,#3a3a45); color:var(--text2); padding:.4rem .8rem; border-radius:6px; font-family:var(--font-mono); font-size:.6rem; cursor:pointer; }


/* ── Gallery ──────────────────────────────────────────────── */
.gallery-wrap { padding: 1.5rem; }

.gallery-char-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.gallery-char-card {
  background: var(--bg3, #26262f); border: 1px solid var(--border, #3a3a45);
  border-radius: 10px; padding: 1rem; text-align: center; cursor: pointer;
  transition: .15s;
}
.gallery-char-card:hover { border-color: var(--pink); transform: translateY(-2px); }
.gallery-char-portrait {
  width: 120px; height: 120px; margin: 0 auto .6rem;
  border-radius: 50%; overflow: hidden; background: var(--bg2, #1a1a22);
  display: flex; align-items: center; justify-content: center;
}
.gallery-char-portrait img { width: 100%; height: 100%; object-fit: cover; }
.gallery-char-name {
  font-family: var(--font-serif); font-size: 1rem; color: var(--text1);
}
.gallery-char-count {
  font-family: var(--font-mono); font-size: .55rem; color: var(--text3);
  margin-top: .3rem; letter-spacing: .08em;
}

.gallery-media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.gallery-media-cell {
  background: var(--bg2, #1a1a22); border: 1px solid var(--border, #3a3a45);
  border-radius: 8px; overflow: hidden;
}
.gallery-media-cell img,
.gallery-media-cell video { width: 100%; height: auto; display: block; }


/* ── Corn random picture viewer ───────────────────────────── */
.corn-wrap { padding: 1.5rem; display: flex; align-items: center; justify-content: center; min-height: 400px; }
.corn-card {
  background: var(--bg2, #1a1a22); border: 1px solid var(--border, #3a3a45);
  border-radius: 12px; overflow: hidden; max-width: 90%; max-height: 80vh;
  display: flex; align-items: center; justify-content: center;
}
.corn-card img { max-width: 100%; max-height: 80vh; display: block; }


/* ── Story Complete badge + banner ───────────────────────── */
.char-badge.badge-arc-done {
  background: linear-gradient(135deg, #c79428, #f0b84a);
  color: #1a1a22; font-weight: 600;
}
.story-arc-complete {
  background: linear-gradient(135deg, rgba(199,148,40,.15), rgba(240,184,74,.08));
  border: 1px solid rgba(240,184,74,.4); border-radius: 10px;
  padding: 1.5rem; margin-top: 1.5rem; text-align: center;
}
.story-arc-complete .sac-icon {
  font-size: 2.2rem; color: var(--gold, #f0b84a); margin-bottom: .4rem;
}
.story-arc-complete .sac-title {
  font-family: var(--font-serif); font-size: 1.1rem; color: var(--text1);
  letter-spacing: .04em;
}
.story-arc-complete .sac-sub {
  font-family: var(--font-mono); font-size: .65rem; color: var(--text3);
  margin-top: .6rem; line-height: 1.6;
}


/* ── Job completion picture (legacy, replaced by buyer popup) — kept for safety */

/* ── Marketplace buyer reaction popup ───────────────────── */
#buyer-popup {
  position: fixed; inset: 0; background: rgba(0,0,0,.85);
  display: none; align-items: center; justify-content: center;
  z-index: 9999; cursor: pointer;
}
#buyer-popup.open { display: flex; }
#buyer-popup .bp-box {
  background: var(--bg2, #1a1a22); border: 1px solid var(--border, #3a3a45);
  border-radius: 14px; padding: 1.5rem 2rem 1.5rem 1.5rem;
  display: flex; gap: 1.25rem; max-width: 520px; width: 90%; align-items: center;
  box-shadow: 0 0 50px rgba(0,0,0,.7);
}
#buyer-popup .bp-portrait {
  width: 110px; height: 110px; border-radius: 50%; overflow: hidden;
  background: var(--bg3, #26262f); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--gold, #f0b84a);
}
#buyer-popup .bp-portrait img { width: 100%; height: 100%; object-fit: cover; }
#buyer-popup .bp-portrait span { font-size: 3rem; }
#buyer-popup .bp-body { flex: 1; min-width: 0; }
#buyer-popup .bp-name {
  font-family: var(--font-serif); font-size: 1.15rem; color: var(--text1);
  margin-bottom: .35rem;
}
#buyer-popup .bp-quote {
  font-family: var(--font-mono); font-size: .8rem; color: var(--text1);
  line-height: 1.5; font-style: italic;
}
#buyer-popup .bp-hint {
  font-family: var(--font-mono); font-size: .5rem; color: var(--text3);
  letter-spacing: .1em; margin-top: .8rem;
}


/* ── Buyer popup — picture area + restructured layout ────── */
#buyer-popup .bp-box {
  flex-direction: column;   /* stack header → picture → hint */
  align-items: stretch;
  padding: 1.25rem;
  max-width: 560px;
}
#buyer-popup .bp-header {
  display: flex; gap: 1rem; align-items: center;
}
#buyer-popup .bp-pic-wrap {
  margin-top: 1rem; border-radius: 10px; overflow: hidden;
  background: var(--bg3, #26262f); border: 1px solid var(--border, #3a3a45);
  display: none; max-height: 60vh;
}
#buyer-popup .bp-pic-wrap img {
  width: 100%; height: auto; max-height: 60vh; object-fit: contain; display: block;
}
#buyer-popup .bp-hint {
  margin-top: .8rem; text-align: center;
}


/* ── HUD rent-penalty indicator ─────────────────────────── */
.hud-rent-badge {
  display: inline-flex; align-items: center; margin-left: 8px;
  padding: 4px 10px; background: var(--red, #d4504a); color: #fff;
  font-family: var(--font-mono); font-size: .55rem; font-weight: 700;
  letter-spacing: .12em; border-radius: 4px; cursor: help;
  animation: rentBlink 1.4s ease-in-out infinite;
}
@keyframes rentBlink {
  0%,100% { opacity: 1; }
  50%     { opacity: .55; }
}


/* ── Dee's Shop item images ─────────────────────────────── */
.shop-img-wrap {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 8px;
  overflow: hidden; background: var(--bg2, #1a1a22);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .6rem;
}
.shop-img-wrap .shop-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.shop-img-wrap .shop-emoji {
  display: none; font-size: 3rem;
  width: 100%; height: 100%; align-items: center; justify-content: center;
}
.shop