/* Suburban Trail — UI layer (DOM on top of the PixiJS stage) */
:root {
  --ink: #2b2118;
  --ink-soft: #5b4a3a;
  --paper: #fff8ea;
  --paper-2: #f6ead2;
  --paper-3: #ecdcbc;
  --teal: #0f4c5c;
  --teal-2: #16697a;
  --orange: #f28c28;
  --orange-2: #d9701a;
  --red: #d64933;
  --mustard: #f2c14e;
  --green: #4f9d69;
  --sky: #bfe3ec;
  --shadow: 0 10px 30px rgba(20, 14, 8, .35);
  --shadow-sm: 0 3px 0 rgba(43, 33, 24, .25);
  --radius: 16px;
  --head: 'Bungee', 'Arial Black', Impact, sans-serif;
  --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d2a33; color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; }
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(10, 20, 25, .35) 100%); }
#ui { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
#ui > * { pointer-events: auto; }

/* ───────── boot ───────── */
.boot { position: fixed; inset: 0; display: grid; place-content: center; gap: 18px; text-align: center; background: linear-gradient(#0f4c5c, #0b3440); color: var(--paper); z-index: 50; transition: opacity .5s; }
.boot.gone { opacity: 0; pointer-events: none; }
.boot-sign { font-family: var(--head); font-size: 42px; line-height: 1; background: var(--green); color: #fff; padding: 18px 26px; border-radius: 12px; border: 4px solid #fff; box-shadow: 0 0 0 4px var(--green), var(--shadow); }
.boot-text { opacity: .8; font-weight: 700; }

/* ───────── generic panels ───────── */
.screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
.screen.top { align-items: flex-start; }
.panel { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); border: 3px solid var(--ink); position: relative; }
.panel-pad { padding: 22px 24px; }
.panel h2 { font-family: var(--head); font-weight: 400; margin: 0 0 6px; font-size: 26px; color: var(--teal); letter-spacing: .5px; }
.panel h3 { font-family: var(--head); font-weight: 400; margin: 14px 0 8px; font-size: 16px; color: var(--teal); }
.muted { color: var(--ink-soft); }
.small { font-size: 13px; }
.center { text-align: center; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.spread { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.hide { display: none !important; }

.btn { appearance: none; border: 3px solid var(--ink); background: var(--orange); color: #fff; font-weight: 900; letter-spacing: .3px; padding: 10px 18px; border-radius: 12px; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .08s, box-shadow .08s, background .15s; text-shadow: 0 1px 0 rgba(0,0,0,.25); font-size: 15px; line-height: 1.2; }
.btn:hover { background: var(--orange-2); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0,0,0,0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.teal { background: var(--teal-2); } .btn.teal:hover { background: var(--teal); }
.btn.red { background: var(--red); }
.btn.ghost { background: var(--paper-2); color: var(--ink); text-shadow: none; }
.btn.ghost:hover { background: var(--paper-3); }
.btn.big { font-size: 18px; padding: 14px 24px; }
.tag-ribbon { display: inline-block; font-family: var(--head); font-size: 12px; padding: 4px 10px; border-radius: 6px; color: #fff; background: var(--teal); margin-bottom: 6px; letter-spacing: .5px; }
.btn.sm { font-size: 13px; padding: 6px 10px; border-width: 2px; border-radius: 9px; }
.btn.block { width: 100%; }
.btn:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-weight: 800; font-size: 13px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .6px; }
.input { border: 3px solid var(--ink); border-radius: 10px; background: #fff; padding: 10px 12px; font-size: 16px; width: 100%; }
.err { color: var(--red); font-weight: 800; min-height: 1.2em; font-size: 14px; }
.ok-msg { color: var(--green); font-weight: 800; font-size: 14px; }

/* ───────── title / auth ───────── */
.title-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 400px); gap: 28px; align-items: center; max-width: 1040px; width: 100%; }
.logo { text-align: left; color: #fff; }
.logo-sign { display: inline-block; background: var(--green); border: 5px solid #fff; box-shadow: 0 0 0 5px var(--green), var(--shadow); border-radius: 16px; padding: 14px 26px 16px; transform: rotate(-2deg); }
.logo-sign .l1 { font-family: var(--head); font-size: clamp(40px, 7vw, 76px); line-height: .95; display: block; }
.logo-sign .l2 { font-family: var(--head); font-size: clamp(16px, 2.2vw, 22px); display: block; margin-top: 8px; color: #e7ffe9; }
.logo .tag { margin-top: 26px; font-size: 19px; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.6); max-width: 520px; }
.logo .shield { display: inline-grid; place-items: center; width: 64px; height: 70px; background: var(--teal); border: 3px solid #fff; border-radius: 8px 8px 30px 30px; font-family: var(--head); font-size: 22px; margin-right: 8px; vertical-align: middle; box-shadow: var(--shadow-sm); }
.tabs { display: flex; gap: 6px; margin: -6px 0 16px; }
.tab { flex: 1; border: 3px solid var(--ink); background: var(--paper-2); border-radius: 10px; padding: 8px; font-weight: 900; cursor: pointer; }
.tab.on { background: var(--teal-2); color: #fff; }
.linkish { background: none; border: 0; color: var(--teal-2); font-weight: 800; cursor: pointer; text-decoration: underline; padding: 0; }
.banner { background: var(--mustard); border: 3px solid var(--ink); border-radius: 10px; padding: 8px 12px; font-weight: 800; font-size: 13px; }

/* ───────── main menu ───────── */
.menu-card { width: min(560px, 100%); }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.menu-grid .btn { padding: 16px 12px; font-size: 16px; }
.statline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.stat-chip { background: var(--paper-2); border: 2px solid var(--paper-3); border-radius: 10px; padding: 8px; text-align: center; }
.stat-chip b { display: block; font-family: var(--head); font-weight: 400; font-size: 20px; color: var(--teal); }
.stat-chip span { font-size: 11px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .5px; }

/* ───────── garage ───────── */
.garage { width: min(1180px, 100%); height: min(100%, 900px); display: flex; flex-direction: column; }
.garage-head { padding: 16px 20px 10px; border-bottom: 3px dashed var(--paper-3); }
.garage-body { flex: 1; overflow: auto; padding: 14px 20px 22px; }
.tier-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.chip { border: 2px solid var(--ink); background: var(--paper-2); border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: 13px; cursor: pointer; }
.chip.on { background: var(--ink); color: var(--paper); }
.chip .count { opacity: .65; margin-left: 4px; }
.tier-title { font-family: var(--head); font-size: 15px; color: var(--teal); margin: 18px 0 2px; }
.tier-blurb { font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.vcard { background: #fff; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform .12s, box-shadow .12s; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.vcard:hover { transform: translateY(-3px); box-shadow: 0 8px 0 rgba(43,33,24,.18); }
.vcard.sel { outline: 4px solid var(--orange); outline-offset: 2px; }
.vcard .pic { background: linear-gradient(#cfeaf1 0%, #eaf6f8 62%, #d8c9a8 62%, #cdbb96 100%); aspect-ratio: 2 / 1; display: grid; place-items: center; position: relative; }
.vcard .pic img { width: 100%; height: 100%; object-fit: contain; }
.vcard.locked .pic img { filter: brightness(0) opacity(.55); }
.vcard .tierbadge { position: absolute; top: 8px; left: 8px; font-family: var(--head); font-size: 11px; background: var(--ink); color: var(--paper); padding: 3px 8px; border-radius: 6px; }
.vcard .lockbadge { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--head); font-size: 44px; color: #fff; text-shadow: 0 3px 0 var(--ink); }
.vcard .meta { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.vcard .name { font-weight: 900; font-size: 16px; line-height: 1.15; }
.vcard .flav { font-size: 12.5px; color: var(--ink-soft); font-style: italic; line-height: 1.3; }
.vcard .quick { display: flex; gap: 8px; font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.unlock-hint { font-size: 12.5px; font-weight: 800; color: var(--teal-2); background: #e6f3f5; border-radius: 8px; padding: 6px 8px; }

.bars { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px; align-items: center; font-size: 12.5px; }
.bars .lbl { font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.bars .num { font-weight: 900; font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right; }
.seg { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.seg i { height: 10px; border-radius: 2px; background: #e5dccb; }
.seg i.on { background: var(--c, var(--green)); }
.bars.lg { font-size: 14px; gap: 7px 10px; }
.bars.lg .seg i { height: 14px; }

/* vehicle detail */
.vdetail { width: min(860px, 100%); }
.vdetail .hero { background: linear-gradient(#bfe3ec 0%, #e8f5f7 60%, #d4c29d 60%, #c7b38a 100%); border-bottom: 3px solid var(--ink); border-radius: 13px 13px 0 0; aspect-ratio: 2.4/1; display: grid; place-items: center; }
.vdetail .hero img { height: 100%; max-width: 100%; object-fit: contain; }
.vdetail .cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; }
.quote { font-size: 17px; font-style: italic; color: var(--ink-soft); margin: 4px 0 12px; }
.pk { border-left: 5px solid var(--green); background: #eef7f0; padding: 8px 10px; border-radius: 0 8px 8px 0; margin-bottom: 8px; }
.pk.bad { border-color: var(--red); background: #fbeeea; }
.pk b { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); }
.derived { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 13px; }
.derived div { background: var(--paper-2); border-radius: 8px; padding: 6px 8px; }
.derived b { font-variant-numeric: tabular-nums; }
.close-x { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); font-weight: 900; font-size: 18px; cursor: pointer; z-index: 2; }

/* ───────── setup ───────── */
.setup { width: min(900px, 100%); }
.steps { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.step { font-weight: 900; font-size: 12px; padding: 5px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); border: 2px solid var(--paper-3); }
.step.on { background: var(--teal-2); color: #fff; border-color: var(--teal); }
.member { display: grid; grid-template-columns: 34px 1fr 190px auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.member.baby { background: #fdf0f4; border-radius: 10px; padding: 4px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font-weight: 900; color: #fff; font-size: 14px; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.opt { border: 3px solid var(--ink); border-radius: 12px; background: #fff; padding: 10px 12px; cursor: pointer; text-align: left; }
.opt.on { background: #fff1dd; outline: 3px solid var(--orange); }
.opt b { display: block; font-size: 15px; }
.opt span { font-size: 12.5px; color: var(--ink-soft); }

/* store */
.store { width: min(980px, 100%); max-height: 100%; display: flex; flex-direction: column; }
.store-body { overflow: auto; padding: 0 24px 16px; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.sitem { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; background: #fff; border: 2px solid var(--paper-3); border-radius: 12px; padding: 8px 10px; }
.sitem .ico { font-size: 26px; text-align: center; }
.sitem .nm { font-weight: 900; }
.sitem .ds { font-size: 12px; color: var(--ink-soft); line-height: 1.25; }
.qty { display: flex; align-items: center; gap: 4px; }
.qty button { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--ink); background: var(--paper-2); font-weight: 900; cursor: pointer; }
.qty .n { min-width: 26px; text-align: center; font-weight: 900; font-variant-numeric: tabular-nums; }
.wallet { position: sticky; bottom: 0; background: var(--paper); border-top: 3px dashed var(--paper-3); padding: 12px 24px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; border-radius: 0 0 13px 13px; }
.wallet .money { font-family: var(--head); font-size: 22px; color: var(--green); }
.wallet .money.neg { color: var(--red); }
.cap { font-weight: 800; font-size: 13px; color: var(--ink-soft); }

/* ───────── HUD ───────── */
.hud-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.sign { background: var(--green); color: #fff; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--green), var(--shadow); border-radius: 10px; padding: 6px 12px; min-width: 200px; }
.sign .a { font-family: var(--head); font-size: 15px; line-height: 1.1; }
.sign .b { font-weight: 800; font-size: 13px; opacity: .92; }
.progress { position: relative; height: 8px; background: rgba(255,255,255,.3); border-radius: 4px; margin-top: 6px; overflow: hidden; }
.progress > i { position: absolute; inset: 0 auto 0 0; background: var(--mustard); border-radius: 4px; }
.datebox { background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; padding: 6px 12px; box-shadow: var(--shadow); text-align: right; }
.datebox .d { font-family: var(--head); font-size: 15px; color: var(--teal); }
.datebox .w { font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.hud-bottom { position: absolute; left: 10px; right: 10px; bottom: 6px; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; pointer-events: none; }
.hud-bottom > * { pointer-events: auto; }
.dash { background: rgba(255, 248, 234, .96); border: 3px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow); padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }
.gauge { background: #fff; border: 2px solid var(--paper-3); border-radius: 10px; padding: 4px 8px; }
.gauge .k { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-soft); }
.gauge .v { font-weight: 900; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gauge .meter { height: 5px; background: #eee3cf; border-radius: 3px; overflow: hidden; margin-top: 2px; }
.gauge .meter i { display: block; height: 100%; background: var(--green); transition: width .4s; }
.gauge.warn .v { color: var(--orange-2); } .gauge.warn .meter i { background: var(--orange); }
.gauge.bad .v { color: var(--red); } .gauge.bad .meter i { background: var(--red); }
.party { display: flex; gap: 6px; flex-wrap: wrap; }
.pm { display: grid; grid-template-columns: 28px auto; gap: 1px 6px; align-items: center; background: #fff; border: 2px solid var(--paper-3); border-radius: 10px; padding: 3px 8px 4px 4px; min-width: 104px; }
.pm .avatar { width: 28px; height: 28px; font-size: 12px; grid-row: span 2; }
.pm .n { font-weight: 900; font-size: 12.5px; line-height: 1; white-space: nowrap; max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.pm .hb { height: 5px; width: 70px; background: #eee3cf; border-radius: 3px; overflow: hidden; }
.pm .hb i { display: block; height: 100%; background: var(--green); }
.pm.dead { opacity: .5; } .pm.dead .n { text-decoration: line-through; }
.pm .st { font-size: 10px; font-weight: 900; color: var(--red); text-transform: uppercase; }
.controls { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.controls .row { gap: 6px; flex-wrap: nowrap; }
.seg-ctl { display: flex; background: #fff; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.seg-ctl button { border: 0; background: transparent; padding: 6px 9px; font-weight: 900; font-size: 12px; cursor: pointer; white-space: nowrap; }
.seg-ctl button + button { border-left: 2px solid var(--paper-3); }
.seg-ctl button.on { background: var(--teal-2); color: #fff; }
.seg-ctl .lab { padding: 6px 8px; font-size: 10px; font-weight: 900; color: var(--ink-soft); text-transform: uppercase; background: var(--paper-2); display: grid; place-items: center; }
.ticker { position: absolute; left: 50%; transform: translateX(-50%); top: 70px; max-width: min(620px, 90vw); pointer-events: none; }
.ticker .line { background: rgba(43, 33, 24, .82); color: #fff; font-weight: 800; padding: 6px 14px; border-radius: 999px; font-size: 14px; margin-bottom: 6px; text-align: center; animation: tick-in .35s ease-out; }
@keyframes tick-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ───────── modal / event card ───────── */
.modal-bg { position: absolute; inset: 0; background: rgba(12, 20, 24, .45); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .25s; z-index: 10; }
@keyframes fade { from { opacity: 0; } }
.event { width: min(620px, 100%); max-height: 100%; overflow: auto; animation: pop .3s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.85) translateY(20px); opacity: 0; } }
.event .ribbon { display: inline-block; font-family: var(--head); font-size: 12px; padding: 4px 10px; border-radius: 6px; color: #fff; background: var(--teal-2); margin-bottom: 8px; letter-spacing: .5px; }
.event .ribbon.weather { background: #3b6fb0; } .event .ribbon.breakdown { background: var(--red); } .event .ribbon.terrain { background: #8a5a2b; }
.event .ribbon.people { background: var(--green); } .event .ribbon.weird { background: #8e5bd6; } .event .ribbon.job { background: var(--orange-2); }
.event .ribbon.animal { background: #6b7a4b; } .event .ribbon.attraction { background: #d64d8f; } .event .ribbon.town { background: var(--teal); }
.event .ribbon.health { background: #b5452f; } .event .ribbon.story { background: #555; }
.event .body { font-size: 16.5px; line-height: 1.5; }
.event .body p { margin: 0 0 10px; }
.choices { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.choice { text-align: left; border: 3px solid var(--ink); background: #fff; border-radius: 12px; padding: 10px 14px; cursor: pointer; font-weight: 800; box-shadow: var(--shadow-sm); display: flex; justify-content: space-between; gap: 10px; align-items: center; transition: background .12s; }
.choice:hover { background: #fff1dd; }
.choice:disabled { opacity: .45; cursor: not-allowed; }
.choice .odds { font-size: 12px; font-weight: 900; padding: 3px 8px; border-radius: 999px; background: var(--paper-2); white-space: nowrap; }
.choice .odds.hi { background: #dff0e3; color: #2c6b40; } .choice .odds.mid { background: #fdf0cf; color: #8a6200; } .choice .odds.lo { background: #fbe1da; color: #9a2a17; }
.choice small { display: block; font-weight: 700; color: var(--ink-soft); font-size: 12.5px; }
.outcome { margin-top: 12px; border-radius: 12px; padding: 10px 14px; font-weight: 700; }
.outcome.good { background: #e6f4ea; border: 2px solid #9fd0ad; }
.outcome.bad { background: #fbe9e4; border: 2px solid #eeb2a3; }
.outcome.neutral { background: var(--paper-2); border: 2px solid var(--paper-3); }
.deltas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.delta { font-size: 12.5px; font-weight: 900; padding: 3px 8px; border-radius: 999px; background: #fff; border: 2px solid var(--paper-3); }
.delta.up { color: #2c6b40; } .delta.down { color: #9a2a17; }
.roll { font-size: 12px; font-weight: 800; color: var(--ink-soft); margin-top: 4px; }

/* town */
.town { width: min(880px, 100%); }
.town .services { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 12px; }
.svc { border: 3px solid var(--ink); background: #fff; border-radius: 12px; padding: 12px; text-align: left; cursor: pointer; box-shadow: var(--shadow-sm); }
.svc:hover { background: #fff1dd; }
.svc .i { font-size: 26px; } .svc b { display: block; font-size: 15px; margin-top: 2px; } .svc span { font-size: 12.5px; color: var(--ink-soft); }
.svc:disabled { opacity: .45; cursor: not-allowed; }

/* map */
.map-line { position: relative; height: 70px; margin: 24px 8px 10px 34px; }
.map-line .road { position: absolute; left: 0; right: 0; top: 30px; height: 8px; background: #4b4b4b; border-radius: 4px; }
.map-line .done { position: absolute; left: 0; top: 30px; height: 8px; background: var(--orange); border-radius: 4px; }
.map-line .stop { position: absolute; top: 24px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); }
.map-line .stop.past { background: var(--orange); }
.map-line .stop .nm { position: absolute; top: 24px; left: 50%; transform: translateX(-50%) rotate(35deg); transform-origin: left top; font-size: 11px; font-weight: 800; white-space: nowrap; }
.map-line .car { position: absolute; top: 2px; font-size: 22px; margin-left: -12px; }
.log { max-height: 220px; overflow: auto; font-size: 13.5px; background: var(--paper-2); border-radius: 10px; padding: 8px 12px; }
.log div { padding: 3px 0; border-bottom: 1px dashed var(--paper-3); }

/* end */
.end { width: min(720px, 100%); text-align: center; }
.end .headline { font-family: var(--head); font-size: 40px; color: var(--teal); margin: 6px 0; }
.end .unlocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 10px; }
.end .unlocks .u { background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 8px; }
.end .unlocks img { width: 100%; }
.ach-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.ach { display: grid; grid-template-columns: 36px 1fr; gap: 8px; background: #fff; border: 2px solid var(--paper-3); border-radius: 10px; padding: 8px; align-items: center; }
.ach .i { font-size: 24px; text-align: center; filter: grayscale(1); opacity: .5; }
.ach.got .i { filter: none; opacity: 1; }
.ach b { display: block; font-size: 13.5px; } .ach span { font-size: 12px; color: var(--ink-soft); }
.ach .bar { height: 5px; background: #eee3cf; border-radius: 3px; overflow: hidden; margin-top: 3px; } .ach .bar i { display: block; height: 100%; background: var(--teal-2); }

/* toasts */
#toasts { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 12px; font-weight: 800; box-shadow: var(--shadow); animation: tick-in .3s; max-width: 90vw; }
.toast.gold { background: var(--mustard); color: var(--ink); border: 3px solid var(--ink); }
.toast .t { font-family: var(--head); font-size: 13px; display: block; }

.corner-btns { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 3px solid var(--ink); background: var(--paper); cursor: pointer; font-size: 18px; box-shadow: var(--shadow-sm); display: grid; place-items: center; }

/* ───────── responsive ───────── */
@media (max-width: 860px) {
  .title-wrap { grid-template-columns: 1fr; gap: 18px; }
  .logo { text-align: center; }
  .logo .tag { margin: 18px auto 0; font-size: 16px; }
  .vdetail .cols { grid-template-columns: 1fr; }
  .hud-bottom { grid-template-columns: 1fr; }
  .gauges { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); }
  .gauge { padding: 3px 5px; } .gauge .v { font-size: 14px; } .gauge .k { font-size: 9.5px; }
  .controls { flex-direction: row; flex-wrap: wrap; }
  .sign { min-width: 0; }
  .member { grid-template-columns: 34px 1fr 120px auto; }
  .statline { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .panel-pad { padding: 16px; }
  .menu-grid { grid-template-columns: 1fr; }
  .gauges { grid-template-columns: repeat(3, 1fr); }
  .datebox .w { display: none; }
  .member { grid-template-columns: 30px 1fr; }
  .member select, .member > .row { grid-column: 2; }
  .cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* snack stop bar, extra ribbons */
.snackbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; background: var(--paper-2); border: 2px dashed var(--paper-3); border-radius: 12px; padding: 8px 10px; }
.snackbar .lab { font-weight: 900; font-size: 13px; margin-right: 4px; }
.event .ribbon.food { background: #d9701a; } .event .ribbon.rest { background: #3b4a6b; }

/* hazards, babies, stock, road reports */
.event .ribbon.hazard { background: #9a2a17; } .event .ribbon.baby { background: #d64d8f; }
.sitem.out { opacity: .6; background: #f6efe2; }
.pm.baby { background: #fdf0f4; }
.notice { background: #fff; border: 2px solid var(--paper-3); border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; }
.notice b { display: block; margin-bottom: 2px; }

/* version tag (lower-right). Filled in from js/version.js, so it shows the code that actually loaded. */
#version { position: fixed; right: 6px; bottom: 1px; z-index: 9999; font: 700 10px/1.2 system-ui, sans-serif; color: rgba(255,255,255,.75); text-shadow: 0 1px 2px rgba(0,0,0,.7); pointer-events: none; user-select: none; }
.memorial { text-align: left; max-height: 260px; overflow: auto; margin-bottom: 8px; }
.fallen { background: #fff; border: 2px solid var(--paper-3); border-left: 5px solid #555; border-radius: 10px; padding: 8px 12px; margin: 0 0 8px; }
.fallen p { margin: 4px 0 0; font-size: 14px; line-height: 1.35; }
.pm { cursor: help; }
.pm-card { position: fixed; z-index: 20; width: 280px; background: var(--paper, #fff8ea); border: 3px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 12px; display: none; pointer-events: none; }
.pm-card.on { display: block; }
.pm-card .hbar { height: 6px; background: #eee3cf; border-radius: 3px; overflow: hidden; margin-top: 4px; }
.pm-card .hbar i { display: block; height: 100%; }

/* sign-up security check */
.captcha-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.captcha-img { width: 220px; max-width: calc(100% - 50px); min-height: 70px; display: flex; align-items: center; justify-content: center; font-size: 12px; border-radius: 8px; border: 2px solid #ecdcbc; background: #fff6e3; }
.captcha-img svg { width: 100%; height: auto; display: block; }

/* v1.4: Safe choice bubble, treatment rows, hunger bar */
.choice .odds.safe { background: #4f9d69; color: #fff; }
.treat-box { margin-top: 12px; padding: 10px 12px; border: 2px dashed #ecdcbc; border-radius: 10px; background: #fffaf0; display: flex; flex-direction: column; gap: 8px; }
.treat { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.treat .treated { color: #2f7a4a; font-weight: 800; }
.hbar.hunger { margin-top: 2px; }

/* v1.4.1: Hall of Fame */
.hof { max-width: 860px; }
.hof-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.hof-tabs .tab { flex: 1 1 auto; font-size: 13px; padding: 6px 8px; }
.hof-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 6px; }
.hof-table th { text-align: left; padding: 4px 6px; border-bottom: 2px solid var(--ink); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.hof-table td { padding: 5px 6px; border-bottom: 1px dashed #ecdcbc; }
.hof-table tr.you td { background: #fdf0cf; font-weight: 800; }
.hof h3 { margin: 12px 0 6px; }
.hof-stats { flex-wrap: wrap; }
.banner.announce { background: #dff0e3; }
@media (max-width: 640px) { .hof-table { font-size: 12px; } .hof-table th, .hof-table td { padding: 4px 3px; } }

/* v1.5: Pawn & Scrap / trunk */
.pawn { max-width: 720px; }
.loot-row { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px dashed #ecdcbc; }
.loot-row .li { font-size: 26px; width: 34px; text-align: center; flex: none; }
.loot-row .lt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.loot-row .lt small { color: #7a6d5f; font-size: 12px; }
.loot-row .la { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* v1.5: Adventure mode */
.adv { position: absolute; inset: 0; background: #1d1813; display: flex; flex-direction: column; align-items: center; padding: 10px 12px 12px; gap: 8px; overflow-y: auto; pointer-events: auto; }
.adv-head { width: min(100%, 1280px); color: #f4ead8; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.adv-head b { font-size: 20px; } .adv-head .muted { color: #b9ab94; font-size: 14px; }
.adv-stage { position: relative; width: min(100%, 1280px, calc((100vh - 230px) * 16 / 9)); aspect-ratio: 16 / 9; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.4); flex: none; }
.adv-canvas { width: 100%; height: 100%; display: block; }
.adv-layer { position: absolute; inset: 0; }
.adv-spot { position: absolute; border: 2px dashed transparent; background: transparent; border-radius: 10px; cursor: pointer; padding: 0; }
.adv-spot .tag { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px); white-space: nowrap; font: 800 12px/1.2 system-ui, sans-serif; background: rgba(255,248,234,.96); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 3px 9px; opacity: 0; transition: opacity .12s; pointer-events: none; }
.adv-spot:hover, .adv-spot:focus-visible { border-color: #ffd36b; background: rgba(255,211,107,.16); outline: none; }
.adv-spot:hover .tag, .adv-spot:focus-visible .tag { opacity: 1; }
.adv-spot.done { cursor: default; } .adv-spot.done:hover { border-color: rgba(255,255,255,.3); background: rgba(0,0,0,.12); }
.adv-spot.locked:hover { border-color: #f28c28; }
.adv-spot.npc:hover { border-color: #9ed8f0; }
.adv-spot.stash { border-color: rgba(255,211,107,.8); background: radial-gradient(circle, rgba(255,230,140,.45), transparent 70%); animation: advGlint 1.6s ease-in-out infinite; }
.adv-spot.stash .tag { opacity: 1; }
.adv-spot.hidden { cursor: help; } .adv-spot.hidden:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
@keyframes advGlint { 50% { box-shadow: 0 0 22px 4px rgba(255,220,120,.55); } }
.adv-bar { width: min(100%, 1280px); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: rgba(255,248,234,.97); border: 3px solid var(--ink); border-radius: 12px; padding: 8px 12px; }
.adv-who-chip { display: flex; gap: 8px; align-items: center; min-width: 170px; } .adv-who-chip small { display: block; font-size: 11px; color: #7a6d5f; } .adv-who-chip .hbar { width: 110px; }
.adv-meter { flex: 1 1 140px; min-width: 130px; } .adv-meter small { display: block; font-size: 11px; font-weight: 800; color: #5a4d3f; }
.adv-meter .m { height: 10px; background: #e8dcc8; border-radius: 6px; overflow: hidden; border: 2px solid var(--ink); margin: 2px 0; } .adv-meter .m i { display: block; height: 100%; }
.adv-back { margin-left: auto; }
.adv-log { width: min(100%, 1280px); color: #d8ccb6; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.adv-log div:first-child { color: #f4ead8; }
.adv-modal { z-index: 30; }
.choice.ghost { background: transparent; }
.adv-pick { max-width: 760px; }
.adv-locs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 10px 0; }
.adv-loc { text-align: left; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper-2); padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; font: inherit; color: inherit; }
.adv-loc.on { background: #dff0e3; box-shadow: 0 0 0 3px #4f9d69 inset; }
.adv-loc .i { font-size: 28px; } .adv-loc small { color: #6b5d4c; font-size: 12px; } .adv-loc .danger { font-size: 12px; font-weight: 800; color: #9a2a17; }
.adv-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 8px; }
.adv-person { display: flex; gap: 8px; align-items: center; text-align: left; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper-2); padding: 8px; cursor: pointer; font: inherit; color: inherit; }
.adv-person.on { background: #dff0e3; box-shadow: 0 0 0 3px #4f9d69 inset; }
.adv-person small { display: block; font-size: 11px; color: #6b5d4c; }
@media (max-width: 700px) { .adv-stage { width: 100%; } .adv-spot .tag { font-size: 10px; } .adv-back { width: 100%; margin-left: 0; } }
.adv-who-chip .hbar { height: 6px; background: #eee3cf; border-radius: 3px; overflow: hidden; margin-top: 3px; } .adv-who-chip .hbar i { display: block; height: 100%; }
.adv-loc.used, .adv-loc:disabled { opacity: .5; cursor: default; }

/* ── How to play (tutorial) ── */
.tutorial { max-width: 520px; width: 100%; }
.tutorial .tut-head { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.tutorial .tut-head h2 { margin: 0; }
.tutorial .tut-icon { font-size: 40px; line-height: 1; }
.tutorial .tut-step { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .6; }
.tutorial p { line-height: 1.5; }
.tut-notice { background: #fff1d6; border: 2px solid #e0a531; color: #5a3b06; border-radius: 10px; padding: 10px 12px; margin: 10px 0 4px; font-size: 14px; line-height: 1.45; }
.tut-dots { display: flex; justify-content: center; gap: 6px; margin: 14px 0 10px; }
.tut-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: rgba(0,0,0,.2); cursor: pointer; }
.tut-dots button.on { background: #16697a; transform: scale(1.25); }
.tut-nav { gap: 8px; flex-wrap: nowrap; }
.newbadge { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 900; background: #e0a531; color: #3a2400; border-radius: 99px; padding: 1px 6px; vertical-align: middle; }

/* v1.5.3: secret places on the Explore menu */
.adv-locs.secret { margin-bottom: 4px; }
.adv-loc.secret { background: linear-gradient(135deg, #fff4d0, #f7e2a8); border-color: #8a5a12; box-shadow: 0 0 0 2px #e1bf5c inset; }
.adv-loc.secret.on { background: linear-gradient(135deg, #fff0b8, #f2d47a); box-shadow: 0 0 0 4px #b07a12 inset; }
.adv-loc.secret small:nth-of-type(1) { color: #7a4a08; }

/* ═════════════════════ v1.5.5: phones and tablets ═════════════════════ */
/* no double-tap zoom on controls, no grey tap flash, no rubber-band scrolling of the whole page */
html, body { overscroll-behavior: none; height: 100dvh; }
button, .btn, .chip, .choice, .adv-spot, .seg-ctl button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* notched phones: keep the HUD out of the notch and the home bar */
.hud-top { top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); }
.hud-bottom { bottom: max(6px, env(safe-area-inset-bottom)); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); }
.modal-bg { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
#version { bottom: max(4px, env(safe-area-inset-bottom)); right: max(6px, env(safe-area-inset-right)); }

/* finger-sized targets on touch screens (about 40px) */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }               /* stops iPhones zooming into a field */
  .btn.sm { min-height: 40px; padding: 8px 12px; }
  .seg-ctl button { min-height: 40px; padding: 8px 11px; }
  .chip { min-height: 38px; padding: 7px 14px; }
  .linkish { padding: 10px 2px; }
  .tut-dots { gap: 2px; }
  .tut-dots button { width: 28px; height: 28px; background: transparent; position: relative; }
  .tut-dots button::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: rgba(0,0,0,.2); }
  .tut-dots button.on { transform: none; } .tut-dots button.on::after { background: #16697a; inset: 8px; }
  .close-x { width: 44px; height: 44px; }
  .adv-spot:active { border-color: #ffd36b; background: rgba(255,211,107,.16); }
  .pm { min-height: 40px; }
}

/* ── driving screen on a narrow (portrait) phone ── */
@media (max-width: 600px) {
  .hud-top { gap: 6px; }
  .sign { padding: 5px 9px; min-width: 0; flex: 1 1 auto; }
  .sign .a { font-size: 13px; } .sign .b { font-size: 11px; }
  .datebox { padding: 5px 8px; flex: none; } .datebox .d { font-size: 13px; }
  .ticker { top: calc(max(10px, env(safe-area-inset-top)) + 64px); }
  .ticker .line { font-size: 12.5px; padding: 5px 12px; }
  .hud-bottom { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .dash { padding: 6px; gap: 6px; border-radius: 12px; }
  .gauges { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .gauge { padding: 3px 5px; min-width: 0; } .gauge .k { font-size: 10px; letter-spacing: .3px; } .gauge .v { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
  .party { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .party::-webkit-scrollbar { display: none; }
  .pm { min-width: 96px; flex: none; }
  .controls { align-items: stretch; gap: 6px; }
  .controls .row { flex-wrap: wrap; gap: 6px; }
  .controls .row > * { flex: 1 1 auto; }
  .controls .seg-ctl { justify-content: stretch; }
  .controls .seg-ctl button { flex: 1 1 auto; }
  .controls .btn.sm { padding-left: 6px; padding-right: 6px; }
  .seg-ctl .lab { font-size: 10.5px; padding: 6px; }
  .event { border-radius: 14px; }
  .panel-pad { padding: 14px; }
  .panel h2 { font-size: 22px; }
}
/* ── short screens (a phone held sideways): everything slimmer so the road stays visible ── */
@media (max-height: 500px) {
  .hud-top { top: max(6px, env(safe-area-inset-top)); }
  .sign { padding: 4px 10px; } .sign .a { font-size: 13px; } .sign .b { font-size: 11px; } .sign .progress { margin-top: 3px; height: 5px; }
  .datebox { padding: 4px 10px; } .datebox .d { font-size: 13px; } .datebox .w { font-size: 11px; }
  .ticker { top: 50px; } .ticker .line { font-size: 12.5px; padding: 4px 12px; }
  .hud-bottom { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; bottom: max(4px, env(safe-area-inset-bottom)); }
  .dash { padding: 5px 6px; gap: 5px; border-radius: 12px; }
  .gauges { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .gauge { padding: 2px 6px; } .gauge .k { font-size: 10px; } .gauge .v { font-size: 13px; } .gauge .meter { height: 4px; }
  .party { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .party::-webkit-scrollbar { display: none; }
  .pm { min-width: 92px; flex: none; padding: 2px 6px 2px 3px; } .pm .avatar { width: 24px; height: 24px; }
  .controls { gap: 4px; max-width: 46vw; }
  .controls .row { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  .seg-ctl button { padding: 4px 8px; min-height: 34px; } .btn.sm { min-height: 34px; padding: 4px 9px; }
  .seg-ctl .lab { display: none; }
  .modal-bg { align-items: flex-start; }
  .event { max-height: 100%; }
  .panel-pad { padding: 12px 16px; }
  .panel h2 { font-size: 21px; }
  .vdetail .hero { aspect-ratio: 3.4 / 1; }
}

/* ── the trail map turns vertical on narrow screens ── */
.map-line.vert { height: 460px; margin: 8px 0 8px 8px; }
.map-line.vert .road { left: 6px; right: auto; top: 0; bottom: 0; width: 8px; height: auto; }
.map-line.vert .done { left: 6px; top: 0; width: 8px; }
.map-line.vert .stop { left: 0 !important; margin: -10px 0 0 0; }
.map-line.vert .stop .nm { top: -1px; left: 30px; transform: none; font-size: 13px; }
.map-line.vert .car { left: -32px !important; margin: -14px 0 0 0; }

/* ── Explore on phones: the scene keeps a usable size and you swipe across it ── */
.adv-scroll { width: min(100%, 1280px); display: flex; justify-content: center; flex: none; }
.adv-swipe { display: none; color: #d8ccb6; font-size: 12px; font-weight: 800; }
@media (max-width: 700px) and (orientation: portrait) {
  .adv { padding: max(8px, env(safe-area-inset-top)) 0 max(10px, env(safe-area-inset-bottom)); gap: 6px; }
  .adv-head, .adv-bar, .adv-log { width: calc(100% - 20px); }
  .adv-head b { font-size: 17px; } .adv-head .muted { font-size: 12px; }
  .adv-scroll { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .adv-stage { width: auto; height: min(56dvh, 420px); aspect-ratio: 16 / 9; border-radius: 0; border-left: 0; border-right: 0; }
  .adv-swipe { display: block; }
  .adv-bar { padding: 8px; gap: 8px; }
  .adv-who-chip { min-width: 0; flex: 1 1 100%; }
  .adv-meter { min-width: 0; flex: 1 1 28%; }
  .adv-back { width: 100%; margin-left: 0; }
}
@media (max-height: 500px) {
  .adv { padding: max(4px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); gap: 4px; }
  .adv-head .muted, .adv-log { display: none; }
  .adv-head b { font-size: 15px; }
  .adv-stage { width: min(100%, calc((100dvh - 96px) * 16 / 9)); }
  .adv-bar { padding: 4px 8px; gap: 6px; flex-wrap: nowrap; }
  .adv-who-chip { min-width: 0; } .adv-who-chip .hbar { width: 60px; } .adv-who-chip small { display: none; }
  .adv-meter { min-width: 70px; flex: 1 1 70px; } .adv-meter small:last-child { display: none; }
  .adv-back { font-size: 14px; padding: 8px 12px; white-space: nowrap; }
}
/* screens: respect the notch, and never cut off the top of a tall screen on a short phone
   (centered flex content that overflows gets clipped at the top; auto margins don't) */
.screen { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); align-items: flex-start; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
.screen > * { margin: auto; }
.screen.top > * { margin: 0 auto auto; }

/* v1.5.6: temperature and comfort */
.datebox .temp { font-weight: 900; font-size: 14px; font-variant-numeric: tabular-nums; }
.datebox .temp span { font-size: 11.5px; color: var(--ink-soft); font-weight: 800; }
.pm .cb { height: 3px; width: 70px; background: #eee3cf; border-radius: 2px; overflow: hidden; margin-top: 2px; grid-column: 2; }
.pm .cb i { display: block; height: 100%; background: var(--c, #4f9d69); }
.pm .cb.low { animation: cbPulse 1.2s ease-in-out infinite; } @keyframes cbPulse { 50% { opacity: .45; } }
@media (max-width: 600px) { .datebox .temp { font-size: 12.5px; } .datebox .temp span { display: none; } }
@media (max-height: 500px) { .datebox .temp span { display: none; } }
.pm .avatar { grid-row: span 3; }

/* ═════ v1.5.7: car parts ═════ */
.seg.seg12 { grid-template-columns: repeat(12, 1fr); }
.seg i.up { background: #3fae6a; box-shadow: inset 0 0 0 2px #1f7a45; }
.seg i.down { background: transparent; box-shadow: inset 0 0 0 2px #d64933; }
.seg i.cap { margin-right: 3px; }
.bars .num.up { color: #1f7a45; } .bars .num.down { color: #b5452f; }
.upgrades { display: grid; gap: 6px; margin-top: 6px; }
.slot-btn { display: grid; grid-template-columns: 34px 1fr auto; gap: 2px 8px; align-items: center; text-align: left; border: 2px dashed #b9ab94; background: var(--paper-2); border-radius: 12px; padding: 7px 10px; cursor: pointer; font: inherit; color: inherit; min-height: 48px; }
.slot-btn.full { border-style: solid; border-color: var(--rc, var(--ink)); background: #fff; box-shadow: inset 4px 0 0 var(--rc, var(--ink)); }
.slot-btn .si { font-size: 22px; grid-row: span 2; text-align: center; }
.slot-btn b { font-size: 14px; } .slot-btn small { grid-column: 2 / 4; font-size: 12px; color: #5a4d3f; }
.slot-btn .st { font-size: 11px; font-weight: 900; text-transform: uppercase; color: var(--ink-soft); }
.rar { display: inline-block; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; color: #fff; background: var(--rc, #7a6d5f); border-radius: 99px; padding: 1px 7px; vertical-align: middle; }
.part-list { display: grid; gap: 8px; margin: 10px 0; }
.part-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 2px 10px; align-items: center; border: 2px solid var(--rc, var(--ink)); border-radius: 12px; padding: 8px 10px; background: #fff; }
.part-row .pi { font-size: 26px; grid-row: span 3; text-align: center; }
.part-row .pd { font-size: 12.5px; font-weight: 800; color: #2b2118; grid-column: 2; } .part-row .pd .good { color: #1f7a45; } .part-row .pd .bad { color: #b5452f; }
.part-row .pf { font-size: 12px; color: #6b5d4c; font-style: italic; grid-column: 2; }
.part-row .pa { grid-row: 1 / span 3; grid-column: 3; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.part-row.missing { opacity: .55; border-style: dashed; background: var(--paper-2); }
.parts-btn { white-space: nowrap; }
.vcard .partbadge { position: absolute; right: 8px; bottom: 8px; background: #1b1f26; color: #fff; font-size: 11px; font-weight: 900; border-radius: 99px; padding: 2px 8px; }