/* Needs widget, bottom nav, place cards, toasts, the Me sheet and the phone (src/ui/life.js). */
body:not(.mode-play) .life-ui { display: none !important; }
.life-ui { font-family: var(--ui); color: var(--ink); }
#needsW { position: fixed; left: 14px; bottom: 16px; z-index: 3; display: flex; align-items: center; gap: 8px; cursor: pointer; }
#needsW .av { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); display: grid; place-items: center; font-size: 22px; /* the profile face (smaller: the user, 18 Oct 2026) */ box-shadow: 0 3px 12px rgba(0,0,0,.2); }
#needsW .bars { background: #fff; border-radius: 999px; padding: 9px 16px; display: grid; grid-template-columns: repeat(3, 62px); gap: 6px 12px; box-shadow: 0 3px 12px rgba(0,0,0,.15); }
#needsW .nb { display: flex; align-items: center; gap: 5px; font-size: 12px; }
#needsW .nb i { flex: 1; height: 6px; border-radius: 4px; background: #e8ecea; overflow: hidden; }
#needsW .nb i b { display: block; height: 100%; border-radius: 4px; transition: width .4s; }
#lifeNav { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; display: flex; gap: 4px; background: #fff; border-radius: 22px; padding: 6px; box-shadow: 0 4px 18px rgba(0,0,0,.18); }
#lifeNav button { border: 0; background: transparent; border-radius: 16px; padding: 7px 18px; font: 700 12px var(--ui); color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
#lifeNav button b { font-size: 20px; line-height: 1; }
#lifeNav button:hover, #lifeNav button.on { background: var(--ink); color: #fff; }
#lifeNav kbd { font: 600 9px var(--ui); opacity: .55; }
.touch #lifeNav kbd { display: none; }
#locCard { position: fixed; left: 0; right: 0; margin: 0 auto; bottom: 86px; z-index: 3; width: min(640px, calc(100vw - 24px)); background: #fff; border-radius: 22px; box-shadow: 0 8px 30px rgba(0,0,0,.2); padding: 12px 14px; display: none; }
#locCard.show { display: block; animation: rise .25s ease-out; }
#locCard .hd { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#locCard .hd .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--soft); display: grid; place-items: center; font-size: 22px; }
#locCard .hd strong { font: 800 15px var(--ui); display: block; } #locCard .hd small { font: 500 12px var(--ui); color: var(--muted); }
#locCard .acts { display: flex; gap: 8px; flex-wrap: wrap; }
#locCard .acts button { border: 0; background: var(--soft); border-radius: 999px; padding: 9px 14px; font: 700 13px var(--ui); color: var(--ink); cursor: pointer; display: flex; gap: 6px; align-items: center; }
#locCard .acts button:hover { background: #e3ebe6; }
#locCard .acts button em { font-style: normal; font-weight: 600; color: var(--muted); }
#locCard .acts button kbd { font: 700 10px var(--ui); background: #fff; border-radius: 5px; padding: 1px 5px; color: var(--muted); }
#locCard .prog { display: none; height: 8px; border-radius: 6px; background: var(--soft); overflow: hidden; margin-top: 10px; }
#locCard .prog b { display: block; height: 100%; width: 0; background: var(--brand); }
#locCard.busy .prog { display: block; } #locCard.busy .acts { opacity: .45; pointer-events: none; }
#toasts { position: fixed; top: 110px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
#toasts div { background: var(--ink); color: #fff; border-radius: 999px; padding: 8px 16px; font: 700 13px var(--ui); box-shadow: 0 4px 14px rgba(0,0,0,.25); animation: rise .25s ease-out; }
#toasts div.bad { background: #c0392b; }
#sleepFade { position: fixed; inset: 0; z-index: 7; background: #050912; color: #fff; display: none; place-items: center; font: 800 26px var(--ui); }
#sleepFade.on { display: grid; animation: fadein .6s; }
@keyframes fadein { from { opacity: 0; } }
.sheet-back { position: fixed; inset: 0; z-index: 8; background: rgba(8,20,14,.45); display: none; align-items: center; justify-content: center; }
.sheet-back.open { display: flex; }
.sheet { width: min(560px, calc(100vw - 24px)); max-height: calc(var(--vh) - 40px); background: #fff; border-radius: 26px; box-shadow: 0 20px 60px rgba(0,0,0,.3); display: flex; flex-direction: column; overflow: hidden; animation: rise .25s ease-out; }
.sheet .hd { display: flex; align-items: center; gap: 12px; padding: 18px 20px 10px; }
.sheet .hd .av { width: 50px; height: 50px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-size: 28px; }
.sheet .hd strong { font: 800 18px var(--ui); display: block; } .sheet .hd small { font: 600 13px var(--ui); color: var(--muted); }
.sheet .hd .x { margin-left: auto; border: 0; background: var(--soft); width: 36px; height: 36px; border-radius: 50%; font: 700 16px var(--ui); cursor: pointer; }
.tabs { display: flex; gap: 6px; padding: 0 20px 10px; }
.tabs button { border: 0; background: var(--soft); border-radius: 999px; padding: 8px 16px; font: 700 13px var(--ui); color: var(--ink); cursor: pointer; }
.tabs button.on { background: var(--ink); color: #fff; }
.sheet .bd { overflow-y: auto; padding: 4px 20px 20px; }
.needrow { display: grid; grid-template-columns: 36px 1fr 46px; align-items: center; gap: 10px; margin: 10px 0; }
.needrow .ic { width: 36px; height: 36px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-size: 17px; }
.needrow .nm { font: 700 14px var(--ui); } .needrow .pc { font: 700 13px var(--ui); color: var(--muted); text-align: right; }
.needrow .tr { grid-column: 2; height: 9px; border-radius: 6px; background: #edf1ef; overflow: hidden; margin-top: 4px; }
.needrow .tr b { display: block; height: 100%; border-radius: 6px; }
.sect { font: 700 12px var(--ui); letter-spacing: 1px; color: var(--muted); text-transform: uppercase; margin: 18px 0 8px; }
.feel { display: flex; align-items: center; gap: 12px; background: #f4f6f5; border-radius: 16px; padding: 11px 14px; margin-bottom: 8px; }
.feel b { font-size: 24px; } .feel div { flex: 1; } .feel strong { font: 800 14px var(--ui); display: block; } .feel span { font: 500 12px var(--ui); color: var(--muted); }
.feel em { font: 800 14px var(--ui); font-style: normal; color: var(--brand); } .feel em.neg { color: #c0392b; }
.pcard { background: linear-gradient(135deg, #ffe9a0, var(--gold)); border-radius: 20px; padding: 14px 16px; margin: 6px 0 4px; }
.pcard strong { font: 800 17px var(--ui); } .pcard span { display: block; font: 500 13px var(--ui); margin-top: 2px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; } .pills span { background: var(--soft); border-radius: 999px; padding: 8px 14px; font: 700 13px var(--ui); }
#phoneBack { position: fixed; inset: 0; z-index: 8; background: rgba(8,20,14,.35); display: none; align-items: center; justify-content: center; }
#phoneBack.open { display: flex; }
#phoneClose { position: absolute; top: 14px; right: 18px; border: 0; background: #fff; border-radius: 999px; padding: 9px 16px; font: 700 14px var(--ui); cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.2); }
#phone { width: 372px; height: min(760px, calc(var(--vh) - 30px)); border-radius: 48px; background: #0e0f12; padding: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.45); animation: rise .3s ease-out; }
#phone .scr { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: #f5f7f6; display: flex; flex-direction: column; }
#phone .sb { display: flex; justify-content: space-between; align-items: center; padding: 12px 26px 4px; font: 700 13px var(--ui); position: relative; z-index: 2; }
#phone .notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 96px; height: 26px; border-radius: 16px; background: #0e0f12; z-index: 3; }
#phone .home { position: absolute; inset: 0; color: #fff; background: #0f2f6b url(../assets/ui/wallpaper.jpg) center / cover; display: flex; flex-direction: column; }
#phone .home .app { text-shadow: 0 1px 4px rgba(0,0,0,.6); }
#phone .home .sb { color: #fff; }
#phone .clock { padding: 28px 26px 18px; } #phone .clock b { font: 800 64px/1 var(--ui); display: block; letter-spacing: -2px; }
#phone .clock span { font: 600 14px var(--ui); opacity: .9; }
#phone .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 8px; padding: 6px 18px; }
#phone .app { border: 0; background: none; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 600 11.5px var(--ui); cursor: pointer; position: relative; }
#phone .app img { width: 60px; height: 60px; border-radius: 17px; box-shadow: 0 4px 12px rgba(0,0,0,.25); object-fit: cover; }
#phone .app sup { position: absolute; top: -6px; right: 2px; background: #e8433b; color: #fff; border-radius: 999px; font: 800 9px var(--ui); padding: 2px 6px; }
#phone .skyline { margin-top: auto; height: 90px; opacity: .9; }
#phone .view { position: absolute; inset: 0; background: #f5f7f6; display: flex; flex-direction: column; }
#phone .vh { display: flex; align-items: center; gap: 8px; padding: 4px 16px 10px; }
#phone .vh button { border: 0; background: none; font: 800 26px var(--ui); color: var(--brand); cursor: pointer; padding: 0 6px; }
#phone .vh strong { font: 800 19px var(--ui); }
#phone .vb { flex: 1; overflow-y: auto; padding: 0 16px 16px; }
#phone .tile { background: #fff; border-radius: 18px; padding: 13px 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); display: flex; align-items: center; gap: 12px; width: 100%; border: 0; text-align: left; font-family: var(--ui); color: var(--ink); }
#phone button.tile { cursor: pointer; }
#phone .tile b { font-size: 26px; } #phone .tile div { flex: 1; } #phone .tile strong { display: block; font: 800 14.5px var(--ui); }
#phone .tile span { font: 500 12px var(--ui); color: var(--muted); } #phone .tile em { font: 800 13px var(--ui); font-style: normal; }
#phone .tile.locked { opacity: .5; }
#phone .bigbal { background: linear-gradient(135deg, #ffd84d, #f5a800); border-radius: 22px; padding: 20px; margin-bottom: 14px; }
#phone .bigbal span { font: 700 13px var(--ui); } #phone .bigbal b { display: block; font: 800 32px var(--ui); margin-top: 4px; }
#phone .msgs { flex: 1; overflow-y: auto; padding: 4px 14px; display: flex; flex-direction: column; gap: 6px; }
#phone .msg { max-width: 76%; padding: 9px 13px; border-radius: 18px; font: 500 14px var(--ui); background: #fff; align-self: flex-start; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
#phone .msg.me { align-self: flex-end; background: #2f6fd0; color: #fff; }
/* chat cards (ui/social.js cardHtml): money sent, a location, "join me", "come over" */
#phone .msg.hasCard { min-width: 200px; }
#phone .mCard { display: flex; gap: 10px; align-items: center; }
#phone .mCard > b { font-size: 26px; line-height: 1; }
#phone .mCard strong { display: block; font: 800 14px var(--ui); }
#phone .mCard span { display: block; font: 500 12px var(--ui); opacity: .75; margin-top: 2px; }
#phone .mCard.money strong { font-size: 17px; }
#phone .mCardB { display: flex; gap: 6px; margin-top: 8px; }
#phone .mCardB button { flex: 1; white-space: nowrap; border: 0; border-radius: 999px; padding: 7px 10px; font: 700 12px var(--ui); cursor: pointer; background: #eef2f8; color: #1d2b44; }
#phone .msg.me .mCardB button { background: rgba(255,255,255,.2); color: #fff; }
/* replies (ui/social.js): swipe a bubble right to answer it; the quote at the top of a reply; the bar over the input */
#phone .msg[data-ri] { position: relative; touch-action: pan-y; transition: transform .15s; user-select: none; -webkit-user-select: none; }
#phone .msg.swiping { transition: none; }
#phone .msg[data-ri]::before { content: '↩️'; position: absolute; left: -30px; top: 50%; transform: translateY(-50%) scale(.6); opacity: 0; transition: opacity .1s, transform .1s; }
#phone .msg.swiping::before { opacity: .45; }
#phone .msg.swipeOk::before { opacity: 1; transform: translateY(-50%) scale(1); }
#phone .mQuote { margin: -2px -5px 5px; padding: 5px 8px; border-left: 3px solid; border-radius: 8px; background: rgba(0,0,0,.06); font: 500 12px var(--ui); line-height: 1.3; max-height: 3.9em; overflow: hidden; }
#phone .msg.me .mQuote { background: rgba(255,255,255,.18); }
#phone .mQuote b { display: block; font-size: 11px; }
#phone .msg.me .mQuote b { color: #fff !important; }
#phone .mReply { display: flex; align-items: center; gap: 8px; margin: 0 10px 6px; padding: 7px 10px; border-left: 4px solid; border-radius: 10px; background: #eef2f7; }
#phone .mReply div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#phone .mReply b { font: 700 12px var(--ui); }
#phone .mReply span { font: 500 12px var(--ui); color: #4a5568; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#phone .mReply button { border: 0; background: none; font-size: 16px; padding: 4px 6px; cursor: pointer; }
#phone .quick { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px 4px; }
#phone .quick button { border: 0; background: #fff; border-radius: 999px; padding: 8px 12px; font: 700 12px var(--ui); white-space: nowrap; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
#phone form { display: flex; gap: 8px; padding: 8px 12px 14px; }
#phone form input { flex: 1; border: 2px solid #cfe0f7; border-radius: 999px; padding: 10px 14px; font: 500 14px var(--ui); outline: none; }
#phone form button { border: 0; background: var(--brand); color: #fff; border-radius: 50%; width: 42px; font-size: 18px; cursor: pointer; }
#phone .primary { border: 0; width: 100%; background: var(--brand); color: #fff; border-radius: 999px; padding: 13px; font: 800 15px var(--ui); cursor: pointer; margin: 4px 0 12px; }
#phone .primary:disabled { opacity: .5; }
@media (max-width: 760px), (max-height: 560px) { #phone { width: min(372px, 100vw); height: var(--vh); border-radius: 0; padding: 0; } #phone .scr { border-radius: 0; } }
/* full-screen phone on a notched / Dynamic Island iPhone: its screen starts below the island and ends above the home bar */
@media (max-width: 760px), (max-height: 560px) { #phone { box-sizing: border-box; width: 100vw; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); } }

/* Chat app: sender name above other players' messages */
#phone .msg small { display: block; font-size: 10px; font-weight: 700; color: var(--brand); margin-bottom: 2px; }


/* ---------- dreams (ui/dreams-ui.js): Goals tab, Sabi app, chapter celebration ---------- */
.dreamhd { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #e8f0fd, #fff6d8); border-radius: 18px; padding: 12px 14px; }
.dreamhd b { font-size: 30px; } .dreamhd div { flex: 1; } .dreamhd strong { font: 800 15px var(--ui); display: block; } .dreamhd span { font: 500 12px var(--ui); color: var(--muted); }
.mini { border: 0; background: var(--brand); color: #fff; border-radius: 999px; padding: 7px 12px; font: 800 12px var(--ui); cursor: pointer; flex: none; }
.steps { display: flex; align-items: center; margin: 14px 4px 0; }
.steps span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #edf1ef; color: var(--muted); font: 800 13px var(--ui); flex: none; }
.steps span.ok { background: var(--brand); color: #fff; } .steps span.cur { background: var(--gold); color: var(--ink); box-shadow: 0 0 0 4px rgba(240,180,0,.25); }
.steps i { flex: 1; height: 3px; background: #edf1ef; margin: 0 4px; border-radius: 2px; }
.goal { display: flex; align-items: center; gap: 12px; background: #f4f6f5; border-radius: 16px; padding: 10px 14px; margin-bottom: 8px; }
.goal > b { font-size: 22px; width: 28px; text-align: center; } .goal > div { flex: 1; min-width: 0; }
.goal strong { font: 700 13.5px var(--ui); display: block; } .goal span { font: 600 11.5px var(--ui); color: var(--muted); }
.goal i { display: block; height: 7px; border-radius: 5px; background: #e2e8e5; overflow: hidden; margin: 5px 0 3px; }
.goal i u { display: block; height: 100%; background: var(--brand); border-radius: 5px; }
.goal.done { opacity: .7; } .goal.done i u { background: #2fae66; }
.feel.pick { width: 100%; border: 2px solid transparent; text-align: left; cursor: pointer; font-family: var(--ui); color: var(--ink); }
.feel.pick.on { border-color: var(--brand); }
#phone .app .emo { width: 60px; height: 60px; border-radius: 17px; box-shadow: 0 4px 12px rgba(0,0,0,.25); display: grid; place-items: center; font-size: 32px; font-style: normal;
  background: linear-gradient(135deg, #1f6fe5, #f5b301); text-shadow: none; }
#phone .bigbal.sabi { background: linear-gradient(135deg, #1554b8, #1f6fe5); color: #fff; }
#phone .lesson p { font: 500 14px/1.5 var(--ui); color: var(--ink); margin: 0 0 12px; }
#phone .lesson p.q { font: 800 16px/1.4 var(--ui); margin: 6px 0 14px; }
#phone .lesson p.why { background: #fff; border-radius: 14px; padding: 10px 12px; font-size: 13px; }
#phone .lesson .src { display: block; font: 500 11px var(--ui); color: var(--muted); margin: 0 0 12px; }
#phone .tile.ans b { width: 32px; height: 32px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-size: 15px; flex: none; }
#phone .tile.ans.right { background: #dff5e7; } #phone .tile.ans.wrong { background: #fbe1df; }
#phone .tile.ans:disabled { opacity: 1; cursor: default; }
#phone .primary.ghost { background: #fff; color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
#dreamPop { position: fixed; inset: 0; z-index: 20; background: rgba(8,20,14,.55); display: none; align-items: center; justify-content: center; }
#dreamPop.open { display: flex; }
#dreamPop .card { width: min(380px, calc(100vw - 32px)); background: #fff; border-radius: 26px; padding: 24px 22px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35); animation: rise .3s ease-out; font-family: var(--ui); }
#dreamPop .big { font-size: 56px; } #dreamPop small { font: 700 12px var(--ui); color: var(--muted); }
#dreamPop h3 { font: 800 22px var(--ui); margin: 6px 0 4px; } #dreamPop p { font: 500 13.5px/1.45 var(--ui); margin: 8px 0; }
#dreamPop .rw { background: #fff6d8; border-radius: 14px; padding: 10px; margin: 8px 0; font: 700 14px var(--ui); } #dreamPop .rw span { font: 500 12px var(--ui); color: var(--muted); }
#dreamPop button { border: 0; background: var(--brand); color: #fff; border-radius: 999px; padding: 12px 26px; font: 800 15px var(--ui); cursor: pointer; margin-top: 10px; }
#dreamPop p b, #dreamPop .rw b { font: inherit; font-weight: 800; }

/* ---------- Fako Bank (ui/bank-ui.js) ---------- */
#phone .bigbal.bank { background: linear-gradient(135deg, #5b2bd6, #1f3fa8); color: #fff; }
#phone .bigbal.bank span:last-child { display: block; margin-top: 8px; opacity: .85; font-weight: 600; }
#phone .primary.topup { background: #22b573; box-shadow: 0 6px 16px rgba(34,181,115,.35); font-size: 16px; }
#phone .fako { border-radius: 22px; overflow: hidden; background: #fdf3e6; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
#phone .fk-hd { display: flex; gap: 12px; align-items: center; padding: 14px 14px 10px; background: linear-gradient(135deg, #b8640f, #3b2a6b); color: #fff; }
#phone .fk-hd b { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 22px; border: 2px solid #f5b301; }
#phone .fk-hd strong { display: block; font: 800 13px var(--ui); letter-spacing: 1.5px; } #phone .fk-hd span { font: 600 11.5px var(--ui); opacity: .9; }
#phone .fk-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px 12px; background: linear-gradient(135deg, #b8640f, #3b2a6b); }
#phone .fk-tiles div { background: rgba(255,255,255,.16); border-radius: 16px; padding: 10px 12px; color: #fff; }
#phone .fk-tiles span { display: block; font: 600 11px var(--ui); opacity: .85; } #phone .fk-tiles b { font: 800 18px var(--ui); }
#phone .fk-body { padding: 12px; }
#phone .btabs { display: flex; gap: 6px; background: #e9edf3; border-radius: 999px; padding: 4px; margin: 0 0 10px; }
#phone .btabs button { flex: 1; border: 0; background: none; border-radius: 999px; padding: 9px; font: 800 13px var(--ui); color: var(--muted); cursor: pointer; }
#phone .btabs button.on { background: var(--ink); color: #fff; }
#phone .bchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
#phone .bchips button { border: 1.5px solid #e2e6ee; background: #fff; border-radius: 999px; padding: 8px 12px; font: 800 12.5px var(--ui); color: var(--ink); cursor: pointer; }
#phone .amt { display: flex; gap: 8px; margin-bottom: 10px; }
#phone .amt input { flex: 1; min-width: 0; border: 0; border-radius: 999px; padding: 13px 16px; font: 700 15px var(--ui); box-shadow: inset 0 0 0 1.5px #d5dbe5; background: #fff; }
#phone .row2 { display: flex; gap: 8px; } #phone .row2 .primary { margin: 0; }
#phone .lvbar { display: block; height: 7px; border-radius: 5px; background: #e2e8e5; overflow: hidden; margin: 5px 0 3px; }
#phone .lvbar u { display: block; height: 100%; background: var(--gold); }
#phone .card, #phone .receipt { background: #fff; border-radius: 20px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); font-family: var(--ui); }
#phone .cd-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } #phone .cd-hd strong { font: 800 15px var(--ui); }
#phone .cd-hd em { font: 700 11.5px var(--ui); font-style: normal; background: var(--soft); border-radius: 999px; padding: 5px 10px; }
#phone .cd-row { display: flex; justify-content: space-between; gap: 8px; font: 600 13px var(--ui); padding: 6px 0; color: var(--muted); }
#phone .cd-row b { color: var(--ink); } #phone .cd-row b.ok { color: #22a35a; }
#phone .cd-row.tot { border-top: 1.5px dashed #e2e6ee; margin-top: 4px; padding-top: 10px; color: var(--ink); font-weight: 800; }
#phone .receipt { text-align: center; } #phone .receipt strong { display: block; font: 800 15px var(--ui); } #phone .receipt span { font: 500 12px var(--ui); color: var(--muted); }
#phone .packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
#phone .pack { position: relative; border: 0; background: #fff; border-radius: 20px; padding: 16px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.08); font-family: var(--ui); color: var(--ink); }
#phone .pack:disabled { opacity: .5; }
#phone .pack b { font: 800 20px var(--ui); } #phone .pack span { font: 600 11px var(--ui); color: var(--muted); }
#phone .pack u { text-decoration: none; font: 800 11px var(--ui); color: #22a35a; min-height: 14px; }
#phone .pack em { font-style: normal; margin-top: 6px; background: #22b573; color: #fff; border-radius: 999px; padding: 6px 12px; font: 800 13px var(--ui); }
#phone .pack i { position: absolute; top: -8px; font: 800 10px var(--ui); font-style: normal; background: var(--gold); border-radius: 999px; padding: 3px 9px; }
#phone .lead.small { font-size: 11.5px; }
#phone .tile.wait { background: #fff6d8; }
#phone .tile.sel { box-shadow: inset 0 0 0 2px var(--brand); }
#phone .primary.danger { background: #2b2b2b; } #phone .tile.heat { background: #fff1ef; }
#phone .tile { box-sizing: border-box; }
#phone .tile > div { min-width: 0; } #phone .tile span { overflow-wrap: anywhere; }

/* ---------- UB Courses (ui/courses-ui.js) ---------- */
#phone .crs-hero { background: linear-gradient(135deg, #1f3fa8, #1f6fe5); color: #fff; border-radius: 22px; padding: 16px; margin-bottom: 6px; font-family: var(--ui); }
#phone .crs-hero .tag { background: #fbe38a; color: var(--ink); border-radius: 999px; padding: 4px 10px; font: 800 12px var(--ui); margin-right: 8px; }
#phone .crs-hero > span:not(.tag) { font: 700 12px var(--ui); opacity: .85; }
#phone .crs-hero h3 { font: 800 21px/1.2 var(--ui); margin: 10px 0 6px; } #phone .crs-hero p { font: 500 13px/1.45 var(--ui); margin: 0 0 10px; opacity: .92; }
#phone .crs-hero em { font-style: normal; display: inline-block; background: rgba(255,255,255,.18); border-radius: 999px; padding: 6px 12px; font: 700 12px var(--ui); margin-right: 6px; }
#phone .crs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#phone .crs { border: 0; background: #fff; border-radius: 20px; padding: 12px; text-align: left; cursor: pointer; font-family: var(--ui); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 2px; }
#phone .crs-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
#phone .crs-top b { width: 44px; height: 44px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-size: 22px; }
#phone .crs-top i { font: 800 11px var(--ui); font-style: normal; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(#fff 58%, transparent 60%), conic-gradient(var(--brand) calc(var(--k) * 1turn), #e6eaf0 0); }
#phone .crs span { font: 600 11px var(--ui); color: var(--muted); } #phone .crs strong { font: 800 15px var(--ui); } #phone .crs small { font: 600 10.5px var(--ui); color: var(--muted); }
#phone .crs-bar { display: flex; gap: 5px; margin: 6px 0 12px; } #phone .crs-bar i { flex: 1; height: 6px; border-radius: 4px; background: #e2e6ee; } #phone .crs-bar i.on { background: #5b3bd6; }
#phone .lesson .kick { font: 800 11px var(--ui); letter-spacing: 1px; color: #5b3bd6; } #phone .lesson .l-title { font: 800 20px/1.25 var(--ui); margin: 4px 0 10px; }
#phone .primary.go { background: #22b573; }

/* ---------- La Cave (ui/club-ui.js) ---------- */
#phone .bigbal.club { background: linear-gradient(135deg, #2a0f3d, #8a1f6b); color: #fff; }
#phone .btabs.sm button { padding: 7px; font-size: 12px; }
#phone .tile.vip em { background: #2a0f3d; color: #fbe38a; border-radius: 999px; padding: 6px 11px; }
#phone .tile.vip:disabled { opacity: .45; }
#phone .tile.spender b { width: 32px; text-align: center; font-size: 20px; } #phone .tile.spender em { color: #1f8a4c; font-size: 15px; }
#phone .tile.king { background: #fff7dc; box-shadow: inset 0 0 0 2px #f0c94d; }
#clubFx { position: fixed; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; display: none; }
#clubFx.on { display: block; }
#clubFx .fx-msg { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); width: min(92vw, 720px); text-align: center; animation: fxIn .5s ease-out; }
#clubFx .fx-msg b { display: block; font: 900 clamp(30px, 7vw, 64px)/1.05 var(--ui); color: #ffd84d; text-shadow: 0 3px 0 #9a6b00, 0 8px 24px rgba(0,0,0,.6); letter-spacing: .5px; }
#clubFx .fx-msg span { display: inline-block; margin-top: 10px; background: rgba(10,10,20,.72); color: #ffe9a3; border-radius: 18px; padding: 8px 16px; font: 800 clamp(14px, 3.4vw, 20px)/1.3 var(--ui); }
#clubFx.hype .fx-msg { background: rgba(20,6,30,.85); border: 3px solid #ff2d8f; border-radius: 26px; padding: 16px 12px 18px; }
#clubFx.hype .fx-msg small { display: block; color: #ff6fb5; font: 900 13px var(--ui); letter-spacing: 3px; margin-bottom: 6px; }
#clubFx.hype .fx-msg b { color: #fff; text-shadow: 0 4px 18px rgba(255,45,143,.6); font-size: clamp(26px, 6vw, 52px); }
#clubFx.hype .fx-msg span { background: none; color: #fff; }
#clubFx i { position: absolute; top: -60px; font-style: normal; animation: fxFall linear forwards; will-change: transform; }
@keyframes fxFall { to { transform: translateY(115vh) rotate(260deg); } }
@keyframes fxIn { from { transform: translateX(-50%) scale(.6); opacity: 0; } }

/* ---------- music promotion (ui/promo-ui.js) ---------- */
#phone .pr-hero { background: linear-gradient(160deg, #3b1466, #7a1b4f 55%, #241016); color: #fff; border-radius: 24px; padding: 18px; margin-bottom: 8px; font-family: var(--ui); }
#phone .pr-hero small { color: #f5c542; font: 800 12px var(--ui); letter-spacing: 2px; } #phone .pr-hero h3 { font: 800 22px/1.2 var(--ui); margin: 8px 0 10px; }
#phone .pr-hero p { font: 500 13px/1.4 var(--ui); margin: 0 0 8px; opacity: .92; } #phone .pr-hero b { display: block; color: #f5c542; font: 900 30px var(--ui); margin-top: 6px; } #phone .pr-hero span { font: 600 12px var(--ui); opacity: .8; }
#phone .pr-choose { width: 100%; display: flex; gap: 12px; align-items: center; border: 2px dashed #c9d0dc; background: #fff; border-radius: 20px; padding: 14px; cursor: pointer; text-align: left; font-family: var(--ui); color: var(--ink); margin-bottom: 8px; box-sizing: border-box; }
#phone .pr-choose b { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; font-size: 22px; } #phone .pr-choose strong { display: block; font: 800 15px var(--ui); } #phone .pr-choose span { font: 600 12px var(--ui); color: var(--muted); }
#phone .pr-up { display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: 20px; padding: 12px; margin-bottom: 8px; }
#phone .pr-up input { border: 0; border-radius: 12px; padding: 11px 12px; font: 600 13.5px var(--ui); box-shadow: inset 0 0 0 1.5px #d5dbe5; } #phone .pr-up .primary { margin: 0; }
#phone .pr-free { float: right; font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; }
#phone .pr-spread { display: flex; align-items: center; gap: 8px; background: #eef1f6; border-radius: 999px; padding: 6px 6px 6px 16px; margin-bottom: 10px; font: 700 14px var(--ui); }
#phone .pr-spread button { border: 0; width: 34px; height: 34px; border-radius: 50%; background: #fff; font: 800 16px var(--ui); cursor: pointer; } #phone .pr-spread b { min-width: 22px; text-align: center; }
#phone .pr-spread .go { margin-left: auto; width: auto; height: auto; border-radius: 999px; padding: 9px 14px; background: #6a2bd6; color: #fff; font-size: 13px; }
#phone .pr-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font: 600 11.5px var(--ui); color: var(--muted); margin-bottom: 8px; }
#phone .pr-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 4px; vertical-align: -1px; border: 1.5px solid #d5dbe5; }
#phone .pr-legend i.mine { background: #6a2bd6; border-color: #6a2bd6; } #phone .pr-legend i.taken { background: #eef1f6; } #phone .pr-legend i.close { background: #e6dcfb; border-color: #e6dcfb; }
#phone .pr-grid { background: #fff; border-radius: 20px; padding: 8px 10px; max-height: 300px; overflow-y: auto; margin-bottom: 10px; }
#phone .pr-hour { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f0f2f6; } #phone .pr-hour > b { width: 44px; flex: none; font: 700 12px var(--ui); color: var(--muted); padding-top: 8px; }
#phone .pr-hour > div { display: flex; flex-wrap: wrap; gap: 6px; }
#phone .pr-slot { border: 0; border-radius: 999px; padding: 7px 10px; font: 700 12px var(--ui); background: #eef1f6; color: var(--ink); cursor: pointer; }
#phone .pr-slot.sel { background: #22b573; color: #fff; } #phone .pr-slot.yours { background: #6a2bd6; color: #fff; }
#phone .pr-slot.taken { text-decoration: line-through; color: #a7afbd; background: #f6f7fa; } #phone .pr-slot.close { background: #e6dcfb; color: #8a7bb0; }
#phone .pr-agree { display: flex; gap: 10px; background: #fff; border-radius: 18px; padding: 12px; font: 600 12.5px/1.4 var(--ui); margin-bottom: 10px; }
#phone .pr-agree input { width: 20px; height: 20px; flex: none; }
#phone .tile.sel { box-shadow: inset 0 0 0 2px var(--brand); }
#nowPlaying { position: fixed; left: 50%; transform: translateX(-50%); top: 112px; z-index: 4; display: none; align-items: center; gap: 10px; background: rgba(20,10,30,.86); color: #fff; border-radius: 999px; padding: 6px 8px 6px 14px; max-width: min(92vw, 520px); box-shadow: 0 4px 16px rgba(0,0,0,.35); }
#nowPlaying.show { display: flex; animation: rise .3s ease-out; }
#nowPlaying > b { font-size: 20px; } #nowPlaying div { min-width: 0; } #nowPlaying strong { display: block; font: 800 13px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nowPlaying span { font: 600 11px var(--ui); opacity: .8; }
#nowPlaying a { background: #f5c542; color: var(--ink); border-radius: 999px; padding: 7px 12px; font: 800 12px var(--ui); text-decoration: none; white-space: nowrap; }
#nowPlaying button { border: 0; background: rgba(255,255,255,.12); border-radius: 50%; width: 30px; height: 30px; cursor: pointer; }
.touch #nowPlaying { top: calc(var(--sat, 0px) + 96px); }
@media (orientation: portrait) { .touch #nowPlaying { top: calc(var(--sat, 0px) + 150px); } }

/* ---------- player sheet (ui/people-ui.js) ---------- */
.sheet.ppl .bd { padding-bottom: 18px; }
.sheet.ppl .primary, .sheet.pol .primary { width: 100%; border: 0; border-radius: 999px; padding: 14px; font: 800 16px var(--ui); color: #fff; background: #22b573; cursor: pointer; margin-bottom: 10px; }
.ppl-close { background: #fdf0f6; border-radius: 16px; padding: 10px 14px; margin-bottom: 8px; }
.ppl-close div { display: flex; justify-content: space-between; font: 700 13px var(--ui); } .ppl-close span { color: var(--muted); }
.ppl-close i { display: block; height: 8px; border-radius: 6px; background: #f3d6e4; overflow: hidden; margin-top: 6px; } .ppl-close u { display: block; height: 100%; background: #e84393; }
.ppl-note { background: var(--soft); border-radius: 16px; padding: 10px 14px; font: 500 13px/1.4 var(--ui); color: var(--muted); text-align: center; margin-bottom: 8px; } .ppl-note b { color: var(--ink); }
.ppl-btn { width: 100%; border: 1.5px solid #e2e6ee; background: #fff; border-radius: 999px; padding: 12px; font: 700 15px var(--ui); cursor: pointer; margin-bottom: 8px; color: var(--ink); }
.ppl-btn.bae { background: #e84393; border-color: #e84393; color: #fff; }
.ppl-btn.cop { background: #1b3a6b; border-color: #1b3a6b; color: #fff; }
.ppl-small { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 12px; }
.ppl-small button { border: 0; background: var(--soft); border-radius: 999px; padding: 8px 12px; font: 700 12.5px var(--ui); cursor: pointer; color: var(--ink); }
.ppl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ppl-grid button { display: flex; align-items: center; gap: 10px; border: 0; background: var(--soft); border-radius: 18px; padding: 12px; text-align: left; cursor: pointer; font-family: var(--ui); color: var(--ink); }
.ppl-grid b { font-size: 24px; } .ppl-grid strong { display: block; font: 800 14px var(--ui); } .ppl-grid span { font: 600 11px var(--ui); color: var(--muted); }
.ppl-cv { background: #f4f7fb; border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; font: 600 13px/1.6 var(--ui); } .ppl-cv strong { display: block; font: 800 14px var(--ui); margin-bottom: 2px; }
#reqPop { position: fixed; inset: 0; z-index: 9; display: none; align-items: center; justify-content: center; background: rgba(8,20,14,.4); }
#reqPop.open { display: flex; }
#reqPop .card { background: #fff; border-radius: 24px; padding: 20px; width: min(340px, 86vw); text-align: center; font-family: var(--ui); animation: rise .25s ease-out; }
#reqPop .card > b { font-size: 44px; } #reqPop p { font: 700 15px/1.4 var(--ui); }
#reqPop .card div { display: flex; gap: 8px; } #reqPop button { flex: 1; border: 0; border-radius: 999px; padding: 12px; font: 800 14px var(--ui); cursor: pointer; background: var(--soft); }
#reqPop button[data-yes] { background: #e84393; color: #fff; }

/* ---------- voice rooms (ui/voice-room-ui.js) ---------- */
#vroom { position: fixed; left: 50%; transform: translateX(-50%); top: 152px; z-index: 4; display: none; align-items: center; gap: 10px; background: rgba(15,29,51,.9); color: #fff; border-radius: 999px; padding: 6px 6px 6px 14px; max-width: min(94vw, 520px); box-shadow: 0 4px 16px rgba(0,0,0,.3); font-family: var(--ui); }
#vroom.show { display: flex; animation: rise .3s ease-out; }
#vroom > b { font-size: 18px; } #vroom div { min-width: 0; } #vroom strong { display: block; font: 800 13px var(--ui); white-space: nowrap; } #vroom span { font: 600 11px var(--ui); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
#vroom button { border: 0; border-radius: 999px; padding: 8px 12px; font: 800 12px var(--ui); cursor: pointer; background: rgba(255,255,255,.14); color: #fff; white-space: nowrap; }
#vroom button[data-join] { background: #22b573; } #vroom button[data-mic].on { background: var(--brand); }
.touch #vroom { top: calc(var(--sat, 0px) + 132px); }
@media (orientation: portrait) { .touch #vroom { top: calc(var(--sat, 0px) + 190px); } }

/* ---------- police stops (ui/police-ui.js) ---------- */
.sheet.pol .hd .av { background: #1b3a6b; }
.pol-say { background: var(--soft); border-radius: 16px; padding: 12px 14px; font: 700 14px/1.4 var(--ui); margin: 4px 0 10px; }
.pol-say.res { background: #fff7d6; }
.pol-docs { display: grid; gap: 6px; margin-bottom: 10px; }
.pol-doc { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: #eefaf1; font: 700 13px var(--ui); }
.pol-doc.no { background: #fdeceb; } .pol-doc b { font-size: 20px; } .pol-doc em { margin-left: auto; font-style: normal; white-space: nowrap; }
.pol-fine { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 600 12px var(--ui); color: var(--muted); margin: 6px 2px 10px; }
.pol-fine b { font: 800 18px var(--ui); color: #c0392b; white-space: nowrap; }
.pol-alt { display: flex; gap: 8px; margin-top: 8px; } .pol-alt button { flex: 1; border: 0; border-radius: 999px; padding: 12px 8px; background: var(--soft); font: 800 13px var(--ui); cursor: pointer; }
.pol-tile.no strong { color: #c0392b; }
.pol-mood { font: 700 12.5px var(--ui); color: var(--muted); text-align: center; margin: 2px 0 8px; }
.pol-bribe { display: flex; gap: 8px; margin-top: 4px; }
.pol-bribe button { flex: 1; border: 0; border-radius: 16px; padding: 10px 6px; background: #2b2b2b; color: #fff; font: 800 13px var(--ui); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pol-bribe button b { font: 800 15px var(--ui); } .pol-bribe button span { font: 600 11px var(--ui); opacity: .8; }
.pol-bribe button.hot { background: #8a5a00; } .pol-bribe button[data-nomore] { background: var(--soft); color: var(--ink); }
#reqPop .card div.bribe { margin-top: 8px; } #reqPop button[data-bribe] { background: #2b2b2b; color: #fff; font-size: 12.5px; }
#dispatch { position: fixed; left: 50%; transform: translateX(-50%); top: 196px; z-index: 5; display: none; align-items: center; gap: 10px; background: rgba(27,58,107,.95); color: #fff; border-radius: 18px; padding: 8px 8px 8px 14px; width: max-content; max-width: min(94vw, 520px); box-shadow: 0 4px 16px rgba(0,0,0,.3); font-family: var(--ui); }
#dispatch.show { display: flex; animation: rise .3s ease-out; }
#dispatch > b { font-size: 20px; } #dispatch div { min-width: 0; } #dispatch strong { display: block; font: 800 13px var(--ui); } #dispatch span { font: 600 11px var(--ui); opacity: .85; display: block; }
#dispatch button { border: 0; border-radius: 999px; padding: 8px 10px; font: 800 12px var(--ui); cursor: pointer; background: rgba(255,255,255,.16); color: #fff; white-space: nowrap; }

/* ---------- New in Buea mission pill (ui/newbie-ui.js) ---------- */
#newbie { position: fixed; left: 14px; bottom: 158px; /* above the voice button (#micBtn, bottom 96px) */ z-index: 3; display: none; align-items: center; gap: 10px; max-width: min(380px, 64vw); border: 0; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.96); border-radius: 18px; padding: 8px 12px 8px 10px; box-shadow: 0 4px 16px rgba(0,0,0,.2); font-family: var(--ui); color: var(--ink); }
body.mode-play #newbie.show { display: flex; animation: rise .3s ease-out; }
body.has-spot:not(.touch) #newbie { bottom: 206px; } /* above the place card (#locCard) */
#newbie > b { font-size: 22px; } #newbie div { min-width: 0; }
#newbie small { display: block; font: 800 10.5px var(--ui); color: var(--brand); letter-spacing: .02em; }
#newbie strong { display: block; font: 800 13px/1.25 var(--ui); }
#newbie em { font: 800 12px var(--ui); font-style: normal; color: var(--brand); white-space: nowrap; }
.touch #newbie { bottom: auto; top: calc(var(--sat) + 106px); left: calc(var(--sal) + var(--edge)); padding: 6px 10px 6px 8px; }
.touch #newbie strong { font-size: 12px; }
body.clean #newbie, body.map-open #newbie, body.building #newbie, body.dressing #newbie, body.spot-open #newbie, body.driving #newbie { display: none !important; }
@media (orientation: portrait) { .touch #newbie { top: calc(var(--sat) + 192px); } .touch #dispatch { top: calc(var(--sat) + 240px); } }
.sheet.pol .primary.ghost-btn { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px #d5dbe5; }
/* crisis notice on the phone home screen (ui/crisis-ui.js) */
#phone .crisis-line { margin: 6px 14px 4px; padding: 9px 12px; border-radius: 14px; background: rgba(15,29,51,.82); color: #fff; font: 600 11.5px/1.35 var(--ui); }
#meBody .goal span.story { display: block; margin-top: 3px; font-style: italic; opacity: .85; }

/* ---------- street mode (ui/street-ui.js) ---------- */
#streetHud { position: fixed; left: 50%; transform: translateX(-50%); top: 112px; z-index: 4; display: none; align-items: center; gap: 8px; font-family: var(--ui); pointer-events: none; }
#streetHud.show { display: flex; }
#streetHud .hpw { display: flex; align-items: center; gap: 8px; background: rgba(15,15,20,.75); border-radius: 999px; padding: 6px 12px; }
#streetHud .hpw i { position: relative; width: 120px; height: 8px; border-radius: 6px; background: rgba(255,255,255,.18); overflow: hidden; }
#streetHud .hpw b { position: absolute; inset: 0 auto 0 0; background: #2ecc71; transition: width .2s; }
#streetHud .hpw u { position: absolute; inset: 0 auto 0 0; height: 3px; top: auto; background: #5dade2; }
#streetHud #shStars { color: #ffd23f; font: 800 15px var(--ui); letter-spacing: 1px; text-shadow: 0 1px 2px #000; }
#streetHud #shGiveUp { pointer-events: auto; border: 0; border-radius: 999px; padding: 7px 12px; font: 800 12px var(--ui); background: #fff; cursor: pointer; }
#gunPad { position: fixed; right: 16px; bottom: 210px; z-index: 4; display: none; flex-direction: column; align-items: flex-end; gap: 8px; }
#gunPad.show { display: flex; }
#gunPad button { border: 0; border-radius: 18px; min-width: 64px; padding: 8px 10px; background: rgba(15,15,20,.78); color: #fff; font: 800 11px var(--ui); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
#gunPad button b { font-size: 20px; }
#gunPad #gpFire, #gunPad #gpReload, #gunPad #gpRob { display: none; }
#gunPad.drawn #gpFire, #gunPad.drawn #gpReload, #gunPad.drawn #gpRob { display: flex; }
#gunPad #gpFire { width: 86px; height: 86px; border-radius: 50%; background: rgba(192,57,43,.92); justify-content: center; font-size: 12px; }
#gunPad #gpFire b { font-size: 30px; }
.touch #gunPad { right: calc(var(--sar) + var(--edge)); bottom: calc(var(--sab) + 240px); }
#heldPop { position: fixed; inset: 0; z-index: 9; display: none; align-items: center; justify-content: center; background: rgba(60,0,0,.45); }
#heldPop.open { display: flex; }
#heldPop .card { background: #fff; border-radius: 24px; padding: 20px; width: min(340px, 88vw); text-align: center; font-family: var(--ui); animation: rise .2s ease-out; }
#heldPop .card > b { font-size: 46px; } #heldPop p { font: 800 15px/1.4 var(--ui); margin: 6px 0; } #heldPop small { font: 800 13px var(--ui); color: #c0392b; }
#heldPop .card div { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
#heldPop button { border: 0; border-radius: 999px; padding: 12px; font: 800 13px var(--ui); cursor: pointer; background: var(--soft); }
#heldPop button[data-comply] { background: #2b2b2b; color: #fff; }
#hurtFx { position: fixed; inset: 0; z-index: 6; pointer-events: none; box-shadow: inset 0 0 120px 40px rgba(200,0,0,.0); }
#hurtFx.on { animation: hurt .45s ease-out; }
@keyframes hurt { from { box-shadow: inset 0 0 140px 50px rgba(200,0,0,.65); } to { box-shadow: inset 0 0 140px 50px rgba(200,0,0,0); } }
#phone label.agree { display: flex; gap: 10px; align-items: flex-start; font: 600 12.5px/1.4 var(--ui); margin: 8px 2px 10px; }
#phone .kmiss { opacity: .35; filter: grayscale(1); }
#phone .msg i { display: block; font: 600 10px var(--ui); opacity: .6; margin-top: 3px; text-align: right; font-style: normal; }
#phone .dmnew input { flex: 1; min-width: 0; border: 0; background: #eef2f7; border-radius: 999px; padding: 9px 12px; font: 600 14px var(--ui); color: var(--ink); outline: none; }

/* Cars app (ui/cars-ui.js) */
#phone .car-tile > b { font-size: 26px; }
#phone .car-tile > b.car-thumb { width: 64px; height: 36px; flex: none; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: #e9edf1; }
#phone .car-thumb img { width: 100%; height: 100%; object-fit: cover; }
#phone .showroom { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
#phone .car-card { display: flex; flex-direction: column; }
#phone .car-info { flex: 1; }
#phone .car-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
#phone .car-photo { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(#dfe5ea, #c9d1d8); display: grid; place-items: center; font-size: 46px; }
#phone .car-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#phone .car-photo i { position: absolute; left: 8px; top: 8px; font: 800 10px var(--ui); font-style: normal; background: rgba(0,0,0,.6); color: #fff; padding: 3px 7px; border-radius: 99px; }
#phone .car-info { padding: 10px 12px 2px; }
#phone .car-info strong { display: block; font: 800 15px var(--ui); }
#phone .car-info > span:not(.car-stats) { display: block; font-size: 12px; color: #5b6570; margin-top: 2px; }
#phone .car-buy { padding: 8px 12px 12px; display: flex; justify-content: flex-end; }
#phone .car-tile > div:nth-child(2) { flex: 1; }
#phone .car-tile .car-stats { display: block; margin-top: 3px; font: 700 11px var(--ui); color: var(--brand); }
#phone .car-tile .owned { font: 800 12px var(--ui); font-style: normal; color: #1e8a4c; white-space: nowrap; }
/* paint & plate */
#phone .paints { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px; margin-bottom: 6px; }
#phone .paint-swatch { aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(0,0,0,.15); background: repeating-linear-gradient(45deg, #e9edf1 0 6px, #fff 6px 12px); font: 800 9px var(--ui); color: #5b6570; padding: 0; cursor: pointer; }
#phone .paint-swatch.on { outline: 3px solid var(--brand); outline-offset: 2px; }
#phone .plate-preview { display: flex; align-items: stretch; width: 100%; max-width: 280px; height: 58px; margin: 4px 0 10px; border: 3px solid #111; border-radius: 8px; overflow: hidden; background: #f4f4ef; }
#phone .plate-preview i { width: 44px; display: grid; place-items: center; background: #007a3d; color: #fff; font: 800 16px var(--ui); font-style: normal; }
#phone .plate-preview b { flex: 1; display: grid; place-items: center; font: 900 30px/1 var(--ui); letter-spacing: 3px; color: #111; }
#phone .plate-input { width: 100%; max-width: 280px; box-sizing: border-box; border: 0; background: #eef2f7; border-radius: 10px; padding: 11px 12px; font: 800 18px var(--ui); letter-spacing: 3px; text-transform: uppercase; color: var(--ink); outline: none; margin-bottom: 10px; display: block; }
#phone .car-tile .plate-mini { display: inline-block; margin-top: 4px; padding: 1px 6px; border: 1.5px solid #111; border-radius: 4px; font: 800 10px var(--ui); letter-spacing: 1px; background: #f4f4ef; color: #111; }
#phone .car-btns { display: flex; flex-direction: column; gap: 5px; align-items: stretch; flex: none; }
#phone .car-btns > div, #phone .car-btns { min-width: 0; }
.mini.ghost { background: #eef1f6; color: var(--ink); }

/* Driving lesson (ui/driving-lesson.js) */
#lessonCard { position: fixed; left: 50%; transform: translateX(-50%); top: 112px; z-index: 5; display: none; align-items: center; gap: 12px; width: max-content; max-width: min(94vw, 560px);
  background: rgba(255,255,255,.97); border-radius: 18px; padding: 10px 12px 10px 14px; box-shadow: 0 6px 22px rgba(0,0,0,.25); font-family: var(--ui); color: var(--ink); }
#lessonCard.show { display: flex; animation: rise .3s ease-out; }
#lessonCard > b { font-size: 26px; } #lessonCard > div { min-width: 0; }
#lessonCard small { display: block; font: 800 10.5px var(--ui); color: var(--brand); letter-spacing: .02em; }
#lessonCard strong { display: block; font: 800 15px/1.25 var(--ui); }
#lessonCard span { display: block; font: 600 12px/1.35 var(--ui); opacity: .8; margin-top: 2px; }
.touch #lessonCard { top: calc(var(--sat) + 60px); padding: 8px 10px; } .touch #lessonCard strong { font-size: 13px; }
body.map-open #lessonCard { display: none !important; }
body.in-lesson #newbie { display: none !important; }

/* ---------- Realistic phone (home screen) ---------- */
#phone { position: relative; background: linear-gradient(145deg, #3a3d44, #15161a 40%, #2b2d33 70%, #0d0e11); padding: 11px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1.5px #5b5f68, inset 0 0 0 4px #121317; }
#phone::before, #phone::after { content: ''; position: absolute; width: 4px; border-radius: 3px; background: linear-gradient(90deg, #2a2c31, #50545c); }
#phone::before { left: -3px; top: 150px; height: 64px; box-shadow: 0 80px 0 #3c3f46, 0 -52px 0 -0px #3c3f46; } /* volume buttons + action button */
#phone::after { right: -3px; top: 190px; height: 96px; } /* side button */
#phone .scr { background: #000; }
#phone .notch { top: 11px; width: 104px; height: 30px; border-radius: 20px; background: #000; }
#phone .sb { padding: 15px 28px 6px 34px; font: 650 14px/1 -apple-system, 'SF Pro Text', var(--ui); letter-spacing: .01em; }
#phone .sbi { display: flex; align-items: center; gap: 5px; } #phone .sbi b { font: 700 12px var(--ui); }
#phone .sbi svg { fill: currentColor; } #phone .sbi .sig { width: 17px; height: 11px; } #phone .sbi .bat { width: 25px; height: 12px; }
#phone .home { background: #10213f url(../assets/ui/wallpaper.jpg) center bottom / cover; }
#phone .home::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 32%, rgba(0,0,0,0) 62%, rgba(0,0,0,.35)); pointer-events: none; }
#phone .home > * { position: relative; }
#phone .clock { padding: 18px 24px 14px; text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
#phone .clock b { font: 300 76px/1 -apple-system, 'SF Pro Display', var(--ui); letter-spacing: -1px; margin: 2px 0 4px; }
#phone .clock span { display: block; font: 600 14px var(--ui); opacity: .95; }
#phone .apps-scroll { flex: 1; overflow-y: auto; scrollbar-width: none; padding-bottom: 8px; } #phone .apps-scroll::-webkit-scrollbar { display: none; }
#phone .grid { gap: 16px 6px; padding: 8px 16px; }
#phone .app { gap: 5px; font: 500 11px var(--ui); letter-spacing: .01em; }
#phone .app > span { max-width: 74px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
#phone .app img, #phone .app .emo { width: 60px; height: 60px; border-radius: 14px; box-shadow: 0 3px 10px rgba(0,0,0,.28); }
#phone .app:active img { transform: scale(.92); filter: brightness(.85); }
#phone .dock { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; margin: 0 10px 8px; padding: 10px 6px 7px; border-radius: 30px;
  background: rgba(255,255,255,.22); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3); }
#phone .homebar { width: 134px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.85); margin: 0 auto 8px; flex: none; }
@media (max-width: 760px), (max-height: 560px) { #phone { box-shadow: none; padding: 0; border-radius: 0; background: #000; } #phone::before, #phone::after { display: none; } #phone .notch { top: calc(var(--sat, 0px) + 8px); } }

/* Shooting (ui/street-ui.js): AIM button, crosshair, hit marker, damage numbers, reload, low ammo */
#gunPad #gpAim { display: none; } #gunPad.drawn #gpAim { display: flex; }
#gunPad #gpAim.on { background: #e8433b; }
#gunPad #gpReload { position: relative; overflow: hidden; }
#gunPad #gpReload.low { animation: lowAmmo .8s ease-in-out infinite; }
@keyframes lowAmmo { 50% { background: #b8860b; } }
#gunPad #gpReload.loading::after { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: #2ecc71; transform-origin: left; animation: reloadBar var(--rl, 1.6s) linear forwards; }
@keyframes reloadBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#crosshair { position: fixed; left: calc(50% + 0px); top: 50%; width: 0; height: 0; z-index: 4; pointer-events: none; display: none; --gap: 7px; }
#crosshair.show { display: block; }
#crosshair i { position: absolute; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.9); transition: transform .12s ease-out; }
#crosshair i:nth-child(1) { width: 2px; height: 9px; left: -1px; bottom: var(--gap); } #crosshair i:nth-child(2) { width: 2px; height: 9px; left: -1px; top: var(--gap); }
#crosshair i:nth-child(3) { width: 9px; height: 2px; top: -1px; right: var(--gap); } #crosshair i:nth-child(4) { width: 9px; height: 2px; top: -1px; left: var(--gap); }
#crosshair b { position: absolute; width: 3px; height: 3px; left: -1.5px; top: -1.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 2px #000; }
#crosshair.kick { animation: xkick .18s ease-out; } @keyframes xkick { 40% { --gap: 15px; } }
#crosshair.kick i:nth-child(1) { animation: xk1 .18s ease-out; } #crosshair.kick i:nth-child(2) { animation: xk2 .18s ease-out; }
#crosshair.kick i:nth-child(3) { animation: xk3 .18s ease-out; } #crosshair.kick i:nth-child(4) { animation: xk4 .18s ease-out; }
@keyframes xk1 { 40% { transform: translateY(-6px); } } @keyframes xk2 { 40% { transform: translateY(6px); } }
@keyframes xk3 { 40% { transform: translateX(-6px); } } @keyframes xk4 { 40% { transform: translateX(6px); } }
#crosshair.hit i { background: #ff3b30; } #crosshair.hit::after { content: '✕'; position: absolute; left: -9px; top: -13px; color: #ff3b30; font: 900 20px system-ui; text-shadow: 0 0 3px #000; animation: fade .35s forwards; }
@keyframes fade { to { opacity: 0; } }
.dmgNum { position: fixed; left: 50%; top: 44%; z-index: 6; pointer-events: none; font: 900 22px var(--ui); text-shadow: 0 2px 6px rgba(0,0,0,.8); animation: dmgUp .9s ease-out forwards; }
.dmgNum.me { color: #ff4d4d; left: 50%; top: 58%; } .dmgNum.them { color: #ffd23f; margin-left: 26px; font-size: 16px; }
@keyframes dmgUp { from { transform: translate(-50%, 0) scale(1.2); opacity: 1; } to { transform: translate(-50%, -40px) scale(1); opacity: 0; } }
#phone .car-keyform { display: flex; gap: 8px; margin: 4px 0 12px; }
#phone .car-keyform input { flex: 1; min-width: 0; border: 1px solid #d9dee8; border-radius: 12px; padding: 9px 12px; font: 600 14px var(--ui); }
#phone .car-btns { flex-wrap: wrap; justify-content: flex-end; max-width: 150px; flex-direction: row; }
/* shooter mode (mouse locked): a small hip crosshair until you aim */
#crosshair.hip { opacity: .75; --gap: 10px; } #crosshair.hip i:nth-child(1), #crosshair.hip i:nth-child(2) { height: 6px; } #crosshair.hip i:nth-child(3), #crosshair.hip i:nth-child(4) { width: 6px; }
body.shooter canvas { cursor: none; }
/* someone you'd hit is under the crosshair: red; someone there but too far: faded */
#crosshair.lock i, #crosshair.lock b { background: #ff3b30; } #crosshair.far { opacity: .4; }
/* shooter mode (mouse locked): a small hip crosshair until you aim */
#crosshair.hip { opacity: .75; --gap: 10px; } #crosshair.hip i:nth-child(1), #crosshair.hip i:nth-child(2) { height: 6px; } #crosshair.hip i:nth-child(3), #crosshair.hip i:nth-child(4) { width: 6px; }
body.shooter canvas { cursor: none; }
/* Me > Skills: how levels work, what they open, where to train (ui/dreams-ui.js skillsHtml) */
.lvhow { margin: 2px 0 8px; font: 12px var(--ui); color: var(--muted); }
.lvopen { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.lvopen span { font: 600 12px var(--ui); color: var(--muted); background: var(--soft); border-radius: 10px; padding: 6px 10px; }
.lvopen span.on { color: #17703a; background: #e3f6e8; }
button.needrow.skillrow { width: 100%; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.train { margin: -4px 0 10px 46px; padding: 8px 10px; border-radius: 10px; background: var(--brand-soft); font: 13px var(--ui); display: flex; flex-direction: column; gap: 6px; }
.train .mini { margin-left: 6px; }

/* sitting / lying on furniture (ui/life.js stay): get up when you want */
#getUp, #eatBtn { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 230px); z-index: 8; display: none; padding: 12px 24px; border: 0; border-radius: 999px; background: #fff; color: #10131a; font: 800 16px var(--ui); box-shadow: 0 6px 20px rgba(0,0,0,.35); cursor: pointer; }
#getUp.on, #eatBtn.on { display: block; animation: fadein .25s; }
body.asleep::after { content: '💤'; position: fixed; inset: 0; z-index: 6; background: rgba(5, 9, 18, .55); color: #fff; display: grid; place-items: center; font: 800 54px var(--ui); pointer-events: none; animation: fadein .8s; }
/* unread badge (new messages, friend requests) on the Phone button and on app icons */
#lifeNav button, #phone .app { position: relative; }
#lifeNav .badge, #phone .app .badge { position: absolute; top: 0; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e53935; color: #fff; font: 800 11px/18px var(--ui); font-style: normal; text-align: center; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
#phone .app .badge { top: -4px; right: -4px; }
/* the Home button's "which home?" sheet */
#pickBack .sheet { width: min(420px, calc(100vw - 32px)); }
#pickBack .tile { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 13px 14px; border: 1.5px solid #e2e6ee; border-radius: 18px; background: #fff; text-align: left; font-family: var(--ui); color: var(--ink); cursor: pointer; }
#pickBack .tile b { font-size: 22px; } #pickBack .tile div { flex: 1; display: flex; flex-direction: column; } #pickBack .tile span { font-size: 12px; opacity: .65; } #pickBack .tile em { font-style: normal; opacity: .4; }

/* Messages app (ui/social.js): chats + groups, after the user's Lagos Life screens (14 Oct 2026) */
#phone .vh > .mHeadBtn { margin-left: auto; }
#phone .mHeadBtn { position: relative; border: 0; width: 38px; height: 38px; border-radius: 50%; background: #eef1f6; font-size: 17px; cursor: pointer; display: grid; place-items: center; padding: 0; }
#phone .mHeadBtn em { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #e8435a; color: #fff; font: 800 10px/18px var(--ui); font-style: normal; box-sizing: border-box; }
#phone .vh .mOnline { font: 700 11px var(--ui); font-style: normal; color: #22a35a; margin-left: 4px; }
#phone .mApp { display: flex; flex-direction: column; gap: 10px; }
#phone .mSeg { display: flex; background: #eceff4; border-radius: 16px; padding: 4px; gap: 4px; }
#phone .mSeg button { flex: 1; border: 0; background: transparent; border-radius: 12px; padding: 9px 0; font: 700 14px var(--ui); color: #6b7280; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
#phone .mSeg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
#phone .mBadge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e8435a; color: #fff; font: 800 10.5px/18px var(--ui); font-style: normal; box-sizing: border-box; }
#phone .mBanner { border: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #e7f0fd; color: #2f6fd0; border-radius: 16px; padding: 11px 14px; font: 700 13px var(--ui); text-align: left; cursor: pointer; }
#phone .mBanner b { white-space: nowrap; }
#phone .mSearch { display: flex; align-items: center; gap: 8px; background: #eef1f6; border-radius: 999px; padding: 4px 4px 4px 14px; }
#phone .mSearch input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 9px 0; font: 600 14px var(--ui); color: var(--ink); outline: none; }
#phone .mInput { width: 100%; box-sizing: border-box; border: 0; background: #eef1f6; border-radius: 14px; padding: 12px 14px; font: 600 14px var(--ui); color: var(--ink); outline: none; }
#phone .mFilters { display: flex; gap: 8px; align-items: center; }
#phone .mFilters button { border: 0; background: #eef1f6; color: var(--ink); border-radius: 999px; padding: 7px 14px; font: 700 12.5px var(--ui); cursor: pointer; display: flex; align-items: center; gap: 6px; }
#phone .mFilters button.on { background: #dfeafc; color: #2f6fd0; box-shadow: inset 0 0 0 1.5px #a9c6f3; }
#phone .mFilters .mMore { margin-left: auto; background: transparent; font-size: 18px; padding: 4px 8px; }
#phone .mMenu { display: flex; gap: 8px; }
#phone .mMenu button { flex: 1; border: 0; background: #fff; border-radius: 12px; padding: 10px; font: 700 12.5px var(--ui); box-shadow: 0 1px 3px rgba(0,0,0,.08); cursor: pointer; }
#phone .mRow { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; padding: 8px 2px; text-align: left; cursor: pointer; border-bottom: 1px solid #edf0f4; box-sizing: border-box; }
#phone .mRow[hidden] { display: none; }
/* touch-sized targets in the phone (the user, 15 Oct 2026: "the hit boxes ... are too small, I touch it doesn't work"):
   at least ~44 px for everything you tap */
#phone .vh button { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
#phone .mHeadBtn { width: 44px; height: 44px; }
#phone .mSeg button { min-height: 44px; }
#phone .mFilters button { min-height: 40px; padding: 9px 16px; }
#phone .mFilters .mMore { min-width: 44px; min-height: 40px; justify-content: center; }
#phone .mSearch .mini, #phone .mRow .mini { min-height: 38px; padding: 9px 16px; }
#phone .mRow { min-height: 64px; padding: 10px 4px; }
#phone .mMenu button, #phone .quick button { min-height: 40px; }
#phone .mRow > div:not(.mMeta) { flex: 1; min-width: 0; }
#phone .mRow strong { display: block; font: 800 15px var(--ui); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#phone .mRow span { display: block; font: 500 13px var(--ui); color: #4b5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#phone .mMeta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
#phone .mMeta time { font: 600 11px var(--ui); color: #8a93a0; } #phone .mMeta time.new { color: #e8435a; }
#phone .mMeta em { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #e8435a; color: #fff; font: 800 11px/20px var(--ui); font-style: normal; text-align: center; box-sizing: border-box; }
#phone .mAv { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 19px var(--ui); }
#phone .mAv.grp { background: linear-gradient(135deg, #7b3fe4, #e8613a); font-size: 20px; }
#phone .mAv i { position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
#phone .mEmpty { text-align: center; padding: 28px 10px; color: #6b7280; display: flex; flex-direction: column; gap: 6px; }
#phone .mEmpty b { font-size: 34px; } #phone .mEmpty strong { font: 800 15px var(--ui); color: var(--ink); } #phone .mEmpty span { font: 500 13px var(--ui); }
#phone .mGrpHead { display: flex; align-items: center; justify-content: space-between; }
#phone .mGrpHead span { font: 700 12px var(--ui); letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
#phone .mNew { border: 0; background: #e7f0fd; color: #2f6fd0; border-radius: 999px; padding: 6px 12px; font: 800 12px var(--ui); cursor: pointer; }
#phone .mPromo { display: flex; align-items: center; gap: 12px; border: 0; width: 100%; text-align: left; border-radius: 18px; padding: 14px; cursor: pointer; background: linear-gradient(90deg, #efe7fb, #fdeee4); }
#phone .mPromo strong { display: block; font: 800 14.5px var(--ui); color: var(--ink); } #phone .mPromo span { display: block; font: 500 12.5px var(--ui); color: #4b5563; margin-top: 2px; }
#phone .mChips { display: flex; flex-wrap: wrap; gap: 6px; }
#phone .mChips button { border: 0; background: #eef1f6; border-radius: 999px; padding: 6px 11px; font: 700 12px var(--ui); cursor: pointer; }
#phone .mChips.on button { background: #2f6fd0; color: #fff; }
#phone .mInfoTop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0; }
#phone .mInfoTop .mAv { width: 70px; height: 70px; font-size: 30px; } #phone .mInfoTop strong { font: 800 18px var(--ui); } #phone .mInfoTop span { font: 600 12px var(--ui); color: var(--muted); }
#phone .mDanger { color: #d63c3c !important; box-shadow: inset 0 0 0 2px #f1b3b3 !important; margin-top: 8px; }
#phone .mNote { align-self: center; max-width: 86%; text-align: center; font: 600 11.5px var(--ui); color: #6b7280; background: #eceff4; border-radius: 10px; padding: 5px 10px; }
/* Riding in another player's car (ui/car-ride.js) */
#rideAsk, #rideOut { display: none; position: fixed; left: 50%; bottom: calc(var(--sab, 0px) + 92px); transform: translateX(-50%); z-index: 4; border: 0; border-radius: 999px;
  padding: 12px 20px; font: 800 14px var(--ui); color: #fff; background: #1f6fe5; box-shadow: 0 6px 18px rgba(0,0,0,.25); cursor: pointer; white-space: nowrap; }
#rideAsk.show, #rideOut.show { display: block; } #rideAsk:disabled { background: #6b7a90; } #rideOut { background: #1f2330; }
#rideReq { display: none; position: fixed; left: 50%; top: calc(var(--sat, 0px) + 70px); transform: translateX(-50%); z-index: 6; background: #fff; border-radius: 18px; padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); font-family: var(--ui); text-align: center; min-width: 240px; }
#rideReq.open { display: block; } #rideReq strong { display: block; font: 800 16px var(--ui); } #rideReq span { display: block; font: 600 13px var(--ui); color: #6b7280; margin: 2px 0 10px; }
#rideReq div { display: flex; gap: 8px; } #rideReq button { flex: 1; border: 0; border-radius: 999px; padding: 10px; font: 800 13px var(--ui); cursor: pointer; background: #eef1f6; }
#rideReq button[data-r="yes"] { background: #1d7a3e; color: #fff; }

/* tap to use (ui/tap-use.js): what you can do with the thing you tapped */
#tapCard { display: none; position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; width: min(420px, calc(100vw - 24px));
  background: #fff; color: #0f1d33; border-radius: 18px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-family: var(--ui, system-ui); }
#tapCard.open { display: block; animation: tcIn .16s ease-out; }
@keyframes tcIn { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
#tapCard .tc-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#tapCard .tc-hd b { font-size: 24px; } #tapCard .tc-hd strong { flex: 1; font: 800 16px var(--ui, system-ui); }
#tapCard .tc-hd button { border: 0; background: #eef3fb; border-radius: 10px; padding: 6px 10px; font: 800 14px var(--ui, system-ui); color: #0f1d33; }
#tapCard .tc-acts { display: flex; flex-wrap: wrap; gap: 8px; }
#tapCard .tc-acts button { flex: 1 1 45%; border: 0; border-radius: 14px; padding: 11px 10px; background: #eef3fb; color: #0f1d33; font: 800 14px var(--ui, system-ui); text-align: left; }
#tapCard .tc-acts .tc-walk { background: #1f6fe5; color: #fff; text-align: center; flex-basis: 100%; }
#tapCard .tc-acts p { margin: 0 0 4px; color: #6b7a90; font: 600 13px var(--ui, system-ui); flex-basis: 100%; }

/* visits (ui/visits.js): a knock at your door, an invite */
#visitCard { display: none; position: fixed; left: 50%; top: calc(70px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 31; width: min(400px, calc(100vw - 24px));
  background: #fff; color: #0f1d33; border-radius: 18px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-family: var(--ui, system-ui);
  grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; }
#visitCard.open { display: grid; animation: tcIn .16s ease-out; }
#visitCard > b { font-size: 30px; grid-row: span 1; } #visitCard strong { display: block; font: 800 16px var(--ui, system-ui); } #visitCard span { color: #6b7a90; font: 600 13px var(--ui, system-ui); }
#visitCard .vc-b { grid-column: 1 / -1; display: flex; gap: 8px; }
#visitCard .vc-b button { flex: 1; border: 0; border-radius: 14px; padding: 11px; font: 800 14px var(--ui, system-ui); background: #eef3fb; color: #0f1d33; }
#visitCard .vc-b button[data-v="yes"] { background: #1f6fe5; color: #fff; }

/* reporting someone at the Police Post (ui/report-ui.js) */
#reportBack .bd { display: flex; flex-direction: column; gap: 8px; }
#reportBack .rp-lb { font: 700 13px var(--ui, system-ui); color: #51606f; margin-top: 4px; }
#reportBack input, #reportBack textarea { width: 100%; box-sizing: border-box; border: 1px solid #d4dbe4; border-radius: 12px; padding: 10px 12px; font: 600 15px var(--ui, system-ui); background: #f7f9fc; color: #0f1d33; }
#reportBack textarea { font-weight: 400; resize: none; }
#reportBack .rp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#reportBack .rp-chips button { border: 1px solid #d4dbe4; background: #fff; color: #0f1d33; border-radius: 99px; padding: 7px 12px; font: 700 13px var(--ui, system-ui); }
#reportBack .rp-chips button.on { background: #1f6fe5; border-color: #1f6fe5; color: #fff; }
#reportBack .rp-chips button i { font-style: normal; font-weight: 600; color: #c0392b; font-size: 11px; }

/* a timed shift at work (ui/work-shift.js): the clock and pay at the top, tasks above the bottom bar */
#shiftHud { display: none; position: fixed; left: 50%; top: calc(62px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 29; width: min(440px, calc(100vw - 24px));
  box-sizing: border-box; padding: 10px 12px; border-radius: 16px; background: rgba(12, 22, 38, .88); color: #fff; font-family: var(--ui, system-ui);
  grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
#shiftHud.on { display: grid; }
#shiftHud > b { font-size: 26px; }
#shiftHud strong { display: block; font: 800 14px var(--ui, system-ui); }
#shiftHud span { display: block; font: 600 12.5px var(--ui, system-ui); color: #c9d6e8; font-variant-numeric: tabular-nums; }
#shiftHud .sh-bar { display: block; height: 5px; margin-top: 6px; border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; }
#shiftHud .sh-bar u { display: block; height: 100%; width: 0; background: #2ecc71; transition: width .5s linear; }
#shiftHud button { border: 0; border-radius: 12px; padding: 9px 12px; background: #e74c3c; color: #fff; font: 800 13px var(--ui, system-ui); }
#shiftTask { display: none; position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 31; width: min(420px, calc(100vw - 24px));
  box-sizing: border-box; padding: 12px; border-radius: 18px; background: #fff7d6; color: #2b2100; border: 2px solid #f1c40f; font-family: var(--ui, system-ui);
  grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; box-shadow: 0 10px 28px rgba(0,0,0,.3); }
#shiftTask.on { display: grid; animation: tcIn .18s ease-out; }
#shiftTask > b { font-size: 30px; grid-row: span 2; }
#shiftTask strong { display: block; font: 800 15px var(--ui, system-ui); } #shiftTask span { font: 700 12px var(--ui, system-ui); color: #8a6d00; }
#shiftTask button { grid-column: 2; border: 0; border-radius: 12px; padding: 10px; background: #1f6fe5; color: #fff; font: 800 14px var(--ui, system-ui); }

/* buying a house: choose your plot (ui/housing-ui.js) */
#plotSheet { display: none; position: fixed; inset: 0; z-index: 40; background: rgba(8,14,24,.55); align-items: flex-end; justify-content: center; font-family: var(--ui, system-ui); }
#plotSheet.open { display: flex; }
#plotSheet .ps-box { width: min(520px, 100vw); max-height: 82vh; overflow-y: auto; background: #fff; color: #0f1d33; border-radius: 20px 20px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(0,0,0,.3); animation: tcIn .18s ease-out; }
#plotSheet .ps-top { display: flex; align-items: center; gap: 10px; } #plotSheet .ps-top strong { flex: 1; font: 800 17px var(--ui, system-ui); }
#plotSheet .ps-top button { border: 0; background: #eef3fb; border-radius: 12px; width: 36px; height: 36px; font: 800 16px var(--ui, system-ui); color: #0f1d33; }
#plotSheet .ps-lead { color: #51606f; font: 600 13px var(--ui, system-ui); margin: 6px 0 10px; }
#plotSheet .ps-area { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 0; border-top: 1px solid #edf1f6; }
#plotSheet .ps-area > b { flex: 1 0 100%; font: 800 14px var(--ui, system-ui); }
#plotSheet .ps-plot { display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--ui, system-ui); color: #51606f; }
#plotSheet .ps-plot button, #plotSheet .ps-here { border: 0; border-radius: 12px; padding: 8px 12px; font: 800 13px var(--ui, system-ui); background: #eef3fb; color: #0f1d33; }
#plotSheet .ps-plot button.go { background: #1f6fe5; color: #fff; }
#plotSheet .ps-here { width: 100%; margin-top: 10px; padding: 12px; }
#plotSheet.peek { display: none; }

/* inside La Cave: the club panel (ui/club-panel.js) */
#clubPanel { display: none; position: fixed; left: 50%; top: calc(58px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 7; width: min(720px, calc(100vw - 16px));
  background: rgba(255,255,255,.94); color: #0f1d33; border-radius: 20px; padding: 10px 12px 12px; box-shadow: 0 8px 26px rgba(0,0,0,.35); font-family: var(--ui, system-ui); backdrop-filter: blur(6px); }
#clubPanel.on { display: block; }
body:has(#phoneBack.open) #clubPanel, body.map-open #clubPanel { display: none; } /* (the phone or the map on top) */
#clubPanel .cp-head { display: flex; align-items: center; gap: 10px; }
#clubPanel .cp-av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #ff2fb0, #3fd8ff); display: grid; place-items: center; font-size: 21px; flex: none; }
#clubPanel .cp-who { flex: 1; min-width: 0; } #clubPanel .cp-who strong { display: block; font: 800 15px var(--ui, system-ui); }
#clubPanel .cp-vibe { display: block; color: #51606f; font: 600 12.5px var(--ui, system-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#clubPanel .cp-head > button { border: 0; background: #eef3fb; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; flex: none; }
#clubPanel .cp-chat { margin: 6px 2px 0; font: 600 12.5px var(--ui, system-ui); color: #26364a; } #clubPanel .cp-chat b { color: #1f6fe5; }
#clubPanel .cp-say { display: flex; gap: 8px; margin-top: 8px; }
#clubPanel .cp-say input { flex: 1; min-width: 0; border: 1px solid #d4dbe4; border-radius: 22px; padding: 9px 14px; font: 600 14px var(--ui, system-ui); background: #f3f6fa; color: #0f1d33; }
#clubPanel .cp-say button { border: 0; width: 40px; border-radius: 50%; background: #2ecc71; color: #fff; font-size: 16px; }
#clubPanel .cp-run { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 800 13px var(--ui, system-ui); }
#clubPanel .cp-run b { flex: 1; height: 8px; border-radius: 6px; background: #e5ebf2; overflow: hidden; } #clubPanel .cp-run b i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff2fb0, #3fd8ff); }
#clubPanel .cp-run em { font-style: normal; color: #51606f; min-width: 26px; text-align: right; }
#clubPanel .cp-tabs, #clubPanel .cp-styles { display: flex; gap: 6px; overflow-x: auto; margin-top: 10px; scrollbar-width: none; } #clubPanel .cp-tabs::-webkit-scrollbar { display: none; }
#clubPanel .cp-tabs button, #clubPanel .cp-styles button { flex: none; border: 0; border-radius: 18px; padding: 8px 13px; background: #eef1f6; color: #26364a; font: 700 13px var(--ui, system-ui); }
#clubPanel .cp-tabs button.on { background: #121826; color: #fff; } #clubPanel .cp-tabs button[data-ct="top"] { background: linear-gradient(135deg, #e8c872, #b98a2e); color: #2a1d05; }
#clubPanel .cp-styles button { padding: 6px 11px; font-size: 12px; } #clubPanel .cp-styles button.on { background: #ff2fb0; color: #fff; }
#clubPanel .cp-cards { display: flex; gap: 10px; overflow-x: auto; margin-top: 10px; padding-bottom: 2px; scrollbar-width: none; } #clubPanel .cp-cards::-webkit-scrollbar { display: none; }
#clubPanel .cp-card { position: relative; flex: none; width: 150px; min-height: 128px; border: 1px solid #edf0f4; border-radius: 16px; background: #fff; text-align: left; padding: 10px; display: flex; flex-direction: column; gap: 4px; color: #0f1d33; }
#clubPanel .cp-card.wide { width: 260px; }
#clubPanel .cp-card .cp-ic { width: 40px; height: 40px; border-radius: 50%; background: #fdf3e2; display: grid; place-items: center; font-size: 21px; }
#clubPanel .cp-card .cp-t { position: absolute; top: 10px; right: 10px; font: 700 11px var(--ui, system-ui); color: #51606f; background: #f3f5f8; border-radius: 10px; padding: 2px 7px; }
#clubPanel .cp-card strong { font: 800 14px var(--ui, system-ui); line-height: 1.2; }
#clubPanel .cp-card .cp-price { font: 800 13px var(--ui, system-ui); color: #0f1d33; } #clubPanel .cp-card .cp-lock { font: 700 12px var(--ui, system-ui); color: #c0392b; }
#clubPanel .cp-card .cp-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
#clubPanel .cp-card .cp-tags i { font-style: normal; font: 700 11px var(--ui, system-ui); border-radius: 8px; padding: 2px 6px; background: #fff3d6; color: #b07a12; }
#clubPanel .cp-card .cp-tags i:nth-child(2n) { background: #fde4ef; color: #c2185b; }
#clubPanel .cp-card.locked { opacity: .6; }
#clubPanel { max-height: 52vh; overflow-y: auto; } #clubPanel .cp-who, #clubPanel .cp-av, #clubPanel .cp-run { cursor: pointer; } /* tap the line: open / fold */
#clubPanel .cp-chat:empty { display: none; }
#clubPanel .cp-vip { display: block; font: 700 11.5px var(--ui, system-ui); color: #9a6b0c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#clubPanel .cp-leave { background: #ffe9e6 !important; } #clubPanel .cp-stop { background: #ffe0f1 !important; }
@media (max-width: 520px) { /* phones: a slim line, small cards (the user, 15 Oct 2026: it took the whole screen) */
  #clubPanel { top: calc(52px + env(safe-area-inset-top)); padding: 6px 8px 8px; }
  #clubPanel .cp-head { gap: 8px; } #clubPanel .cp-av { width: 32px; height: 32px; font-size: 17px; }
  #clubPanel .cp-head > button { width: 34px; height: 34px; font-size: 14px; } #clubPanel .cp-who strong { font-size: 14px; }
  #clubPanel .cp-tabs, #clubPanel .cp-styles, #clubPanel .cp-cards { margin-top: 8px; }
  #clubPanel .cp-tabs button { padding: 8px 11px; font-size: 12px; }
  #clubPanel .cp-card { width: 118px; min-height: 0; padding: 8px; gap: 2px; } #clubPanel .cp-card.wide { width: 220px; }
  #clubPanel .cp-card .cp-ic { width: 30px; height: 30px; font-size: 16px; } #clubPanel .cp-card strong { font-size: 13px; }
  #clubPanel .cp-card .cp-tags { display: none; } }

/* a shift: a dishonest act on offer, an off-screen moment (ui/work-shift.js) */
#shiftTask.cheat { background: #2b1830; color: #fff; border: 2px solid #c0392b; }
#shiftTask.cheat span { color: #ffb3a7; } #shiftTask.cheat em { font-style: normal; }
#shiftTask button.ok { background: #27ae60; } #shiftTask button.bad { background: #c0392b; margin-top: 6px; }
#shiftTask em { font-style: normal; }
#shiftVeil { display: none; position: fixed; inset: 0; z-index: 30; background: rgba(5, 6, 14, .94); place-items: center; color: #fff; text-align: center; }
#shiftVeil.on { display: grid; animation: tcIn .4s ease-out; }
#shiftVeil b { display: block; font-size: 48px; } #shiftVeil span { font: 700 15px var(--ui, system-ui); opacity: .8; }

/* the Jobs app: your career (ui/jobs-ui.js) */
.jb-hero { display: flex; gap: 12px; align-items: center; background: #eef3fb; border-radius: 18px; padding: 14px; margin-bottom: 12px; }
.jb-hero.crime { background: #fbe9e7; }
.jb-hero > b { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 26px; flex: none; }
.jb-hero small { display: block; font: 700 12px var(--ui, system-ui); color: #5c6b7c; }
.jb-hero strong { display: block; font: 800 19px var(--ui, system-ui); color: #0f1d33; margin: 1px 0; }
.jb-hero span { font: 600 13px var(--ui, system-ui); color: #51606f; }
.jb-ladder { display: flex; gap: 5px; align-items: center; }
.jb-ladder span { flex: 1; display: flex; gap: 2px; } .jb-ladder i { flex: 1; height: 7px; border-radius: 4px; background: #e1e7ef; }
.jb-ladder i.on { background: #27ae60; } .jb-ladder span.cur i.on:last-of-type { box-shadow: 0 0 0 2px rgba(39, 174, 96, .25); }
.jb-ladder em { font-style: normal; font-size: 14px; }
.jb-ends { display: flex; justify-content: space-between; font: 600 11.5px var(--ui, system-ui); color: #5c6b7c; margin: 4px 0 12px; }
.jb-perf div { display: flex; justify-content: space-between; font: 700 14px var(--ui, system-ui); color: #0f1d33; }
.jb-perf i { display: block; height: 7px; border-radius: 4px; background: #e1e7ef; margin: 6px 0 12px; overflow: hidden; } .jb-perf u { display: block; height: 100%; background: #27ae60; }
.jb-next { background: #f4f6fa; border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; }
.jb-next.top { font: 700 14px var(--ui, system-ui); }
.jb-nt { display: flex; justify-content: space-between; font: 600 13.5px var(--ui, system-ui); color: #26364a; margin-bottom: 6px; } .jb-nt em { font-style: normal; color: #1e8449; font-weight: 800; }
.jb-req { display: flex; align-items: center; gap: 8px; font: 600 13px var(--ui, system-ui); color: #3b4a5c; padding: 4px 0; }
.jb-req i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c8d1dc; display: grid; place-items: center; font: 900 11px var(--ui, system-ui); font-style: normal; flex: none; }
.jb-req.ok i { background: #27ae60; border-color: #27ae60; color: #fff; } .jb-req span { flex: 1; } .jb-req em { font-style: normal; color: #5c6b7c; }
.jb-next p { font: 500 11.5px var(--ui, system-ui); color: #6b7a8c; margin: 6px 0 0; }
.jb-week { display: flex; gap: 6px; margin: 10px 0 6px; }
.jb-week span { flex: 1; text-align: center; padding: 8px 0; border-radius: 999px; background: #eef1f6; font: 800 13px var(--ui, system-ui); color: #5c6b7c; }
.jb-week span.on { background: #27ae60; color: #fff; } .jb-week span.today { box-shadow: 0 0 0 2px #0f1d33 inset; }
.jb-status { font: 700 13.5px var(--ui, system-ui); color: #3b4a5c; margin: 6px 2px 10px; } .jb-status.ok { color: #1e8449; } .jb-status.bad { color: #c0392b; }
button.primary.off { opacity: .55; }
.jb-rules { margin: 4px 0 8px 18px; padding: 0; font: 500 12.5px var(--ui, system-ui); color: #51606f; } .jb-rules li { margin: 2px 0; }
.jb-back { border: 0; background: none; color: #1f6fe5; font: 800 14px var(--ui, system-ui); padding: 2px 0 10px; }
.tile.mine { box-shadow: 0 0 0 2px #27ae60 inset; } .tile.cheat b { filter: saturate(.8); } .tile.ok { background: #eafaf0; }
.jb-foot { margin-top: 14px; }

/* Forbes: the richest in Buea (ui/forbes-ui.js) */
.vb.fb { padding-top: 0; }
.fb-head { background: radial-gradient(120% 90% at 50% 0%, #1d4a33 0%, #0c1f16 70%); color: #fff; text-align: center; padding: 18px 12px 14px; margin: 0 -14px 0; border-radius: 0 0 22px 22px; }
.fb-head > b { display: block; font: 900 34px Georgia, 'Times New Roman', serif; letter-spacing: 3px; color: #e8c872; }
.fb-head > span { font: 600 12px var(--ui, system-ui); color: #cfe3d6; }
.fb-tabs { display: inline-flex; gap: 4px; background: rgba(255,255,255,.08); border-radius: 999px; padding: 4px; margin-top: 10px; }
.fb-tabs button { border: 0; border-radius: 999px; padding: 7px 14px; background: none; color: #dfeee5; font: 800 12.5px var(--ui, system-ui); }
.fb-tabs button.on { background: #f3dc97; color: #3a2a05; }
.fb-soon { text-align: center; margin-top: 18px; }
.fb-podium { display: flex; align-items: flex-end; gap: 6px; background: #0c1f16; margin: 0 -14px; padding: 14px 10px 0; }
.fb-step { flex: 1; text-align: center; color: #fff; min-width: 0; }
.fb-step em { display: block; font-style: normal; font-size: 22px; height: 26px; }
.fb-step strong { display: block; font: 800 12px var(--ui, system-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.fb-step > b { display: block; font: 900 13px var(--ui, system-ui); color: #f3dc97; margin: 2px 0 6px; }
.fb-face { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto; background: radial-gradient(#ffffff, #dfe7ef); border: 3px solid #c9d3dc; overflow: hidden; display: grid; place-items: center; font-size: 30px; }
.fb-step.s1 .fb-face { width: 82px; height: 82px; border-color: #e8c872; } .fb-step.s3 .fb-face { border-color: #d69a6a; }
.fb-face img { width: 100%; height: 100%; object-fit: cover; }
.fb-face.sm { width: 40px; height: 40px; font-size: 20px; border-width: 2px; flex: none; }
.fb-block { border-radius: 14px 14px 0 0; font: 900 20px var(--ui, system-ui); color: #1b1b1b; display: grid; place-items: center; }
.fb-step.s1 .fb-block { height: 70px; background: linear-gradient(135deg, #f6d77a, #b98a2e); }
.fb-step.s2 .fb-block { height: 52px; background: linear-gradient(135deg, #eef1f5, #b9c2cc); }
.fb-step.s3 .fb-block { height: 42px; background: linear-gradient(135deg, #f2c49c, #b87140); }
.fb-me { margin: 10px 0; background: #fff6da; border-radius: 12px; padding: 10px 12px; font: 700 13px var(--ui, system-ui); color: #5a4300; }
.fb-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid #edf0f4; }
.fb-row.me { background: #eafaf0; border-radius: 10px; }
.fb-row > i { font-style: normal; width: 22px; text-align: center; font: 800 14px var(--ui, system-ui); color: #5c6b7c; }
.fb-row > div:not(.fb-face) { flex: 1; min-width: 0; } .fb-row strong { display: block; font: 700 14px var(--ui, system-ui); color: #0f1d33; }
.fb-row span { display: block; font: 500 11.5px var(--ui, system-ui); color: #6b7a8c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-row > b { font: 900 13.5px var(--ui, system-ui); color: #1e8449; }

/* Gist: the town's feed (ui/gist-ui.js) */
.gs-new { background: #f1f4f9; border-radius: 18px; padding: 10px; margin-bottom: 10px; }
.gs-new textarea { width: 100%; box-sizing: border-box; border: 0; border-radius: 12px; padding: 10px 12px; font: 600 14px var(--ui, system-ui); resize: none; background: #fff; color: #0f1d33; }
.gs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.gs-chips button { border: 0; border-radius: 999px; padding: 5px 10px; background: #fff; color: #8a97a8; font: 700 11.5px var(--ui, system-ui); }
.gs-chips button.on { color: #26364a; box-shadow: 0 0 0 1px #c9d3dc inset; }
.gs-row { display: flex; align-items: center; justify-content: space-between; } .gs-row span { font: 600 12px var(--ui, system-ui); color: #6b7a8c; }
.gs-row button { border: 0; border-radius: 999px; padding: 9px 22px; background: #27ae60; color: #fff; font: 800 14px var(--ui, system-ui); } .gs-row button:disabled { opacity: .45; }
.gs-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 8px; scrollbar-width: none; }
.gs-tabs button { flex: none; border: 0; border-radius: 999px; padding: 7px 13px; background: #eef1f6; color: #26364a; font: 700 12.5px var(--ui, system-ui); } .gs-tabs button.on { background: #121826; color: #fff; }
.gs-post { background: #fff; border: 1px solid #edf0f4; border-radius: 18px; padding: 12px; margin-bottom: 10px; }
.gs-top { display: flex; gap: 10px; align-items: flex-start; } .gs-top > div { flex: 1; min-width: 0; }
.gs-av { width: 38px; height: 38px; border-radius: 50%; background: #eef3fb; display: grid; place-items: center; font-size: 20px; flex: none; }
.gs-top strong { font: 800 14px var(--ui, system-ui); color: #0f1d33; } .gs-top span { font: 600 12px var(--ui, system-ui); color: #8a97a8; }
.gs-top small { display: block; font: 600 11px var(--ui, system-ui); color: #6b7a8c; margin-top: 1px; }
.gs-dots { border: 0; background: none; font-size: 18px; color: #8a97a8; padding: 0 4px; }
.gs-menu button { border: 0; background: #f4f6fa; border-radius: 10px; padding: 7px 12px; font: 700 12.5px var(--ui, system-ui); color: #c0392b; margin: 6px 0 0 48px; }
.gs-text { font: 500 14.5px var(--ui, system-ui); color: #1b2a3c; margin: 8px 0 6px; line-height: 1.4; word-break: break-word; }
.gs-acts { display: flex; gap: 16px; } .gs-acts button { border: 0; background: none; font: 700 13px var(--ui, system-ui); color: #6b7a8c; padding: 2px 0; } .gs-acts button.on { color: #8e44ad; }
.gs-comments { border-top: 1px solid #edf0f4; margin-top: 8px; padding-top: 8px; font: 500 13px var(--ui, system-ui); color: #26364a; }
.gs-comments > div { margin: 4px 0; } .gs-comments b { color: #1f6fe5; } .gs-comments span { font-size: 11px; color: #8a97a8; } .gs-none { color: #8a97a8; }
.gs-cform { display: flex; gap: 6px; margin-top: 6px; } .gs-cform input { flex: 1; min-width: 0; border: 1px solid #d4dbe4; border-radius: 999px; padding: 8px 12px; font: 600 13px var(--ui, system-ui); }
.gs-cform button { border: 0; border-radius: 50%; width: 36px; background: #27ae60; color: #fff; }
.gs-more { width: 100%; border: 0; border-radius: 12px; padding: 10px; background: #eef1f6; font: 800 13px var(--ui, system-ui); color: #26364a; }

/* the phone, rendered (assets/tools/phone_frame.py: a graphite band, black glass, the Dynamic Island, the side buttons) laid
   over #phone as a 9-slice frame: the top slice (the buttons, the island) and the bottom one never stretch, the sides do */
@media (min-width: 761px) and (min-height: 561px) {
  #phone { position: relative; background: #050506; padding: 11px; border-radius: 48px; }
  #phone::after { content: ''; position: absolute; top: 0; bottom: 0; left: -4px; right: -4px; width: auto; height: auto; background: none; border-radius: 0; box-sizing: border-box; z-index: 6; pointer-events: none;
    border-style: solid; border-color: transparent; border-width: 330px 15px 70px; border-image: url(../assets/ui/phone_frame.webp?v=3) 660 30 140 / 330px 15px 70px stretch; }
  #phone::before { display: none; } /* the side buttons are in the rendered frame (the old CSS buttons' size squeezed it into a bar) */
  #phone .notch { display: none; }
}

/* Feedback (src/ui/feedback-ui.js): the phone's form and the invitation after 20 minutes of play */
#phone #fbText { width: 100%; box-sizing: border-box; border: 1px solid #d4dbe4; border-radius: 14px; padding: 10px 12px; font: 600 14px/1.4 var(--ui, system-ui); color: var(--ink, #14213d); background: #fff; resize: vertical; min-height: 120px; margin-bottom: 6px; }
#phone #fbText:focus { outline: 2px solid var(--brand); border-color: transparent; }
#phone .fbStars { display: flex; gap: 6px; margin: 2px 0 12px; }
#phone .fbStars button { border: 0; background: none; font-size: 30px; line-height: 1; color: #d4dbe4; cursor: pointer; padding: 2px; }
#phone .fbStars button.on { color: #f5b301; }
#fbAsk { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); z-index: 7; width: min(380px, calc(100vw - 24px)); box-sizing: border-box;
  display: none; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; background: #fff; color: #14213d; border-radius: 18px; padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3); font-family: var(--ui, system-ui); }
#fbAsk.show { display: grid; animation: fbRise .3s ease-out; }
@keyframes fbRise { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
#fbAsk > b { font-size: 28px; } #fbAsk strong { display: block; font: 800 15px var(--ui, system-ui); } #fbAsk span { display: block; font: 600 12.5px/1.35 var(--ui, system-ui); color: #51606f; }
#fbAsk .fbAskBtns { grid-column: 1 / -1; display: flex; gap: 8px; }
#fbAsk .fbAskBtns button { flex: 1; border: 0; border-radius: 999px; padding: 10px; font: 800 13px var(--ui, system-ui); cursor: pointer; background: #eef1f6; color: #26364a; }
#fbAsk .fbAskBtns button[data-a="go"] { background: var(--brand, #1f6fe5); color: #fff; }
body:has(#phoneBack.open) #fbAsk, body.map-open #fbAsk { display: none; }

/* the robbery mini-game (ui/rob-game.js) */
#robGame { position: fixed; inset: 0; z-index: 48; display: none; align-items: center; justify-content: center; background: rgba(6,10,20,.62); backdrop-filter: blur(3px); padding: 12px; }
#robGame.open { display: flex; }
#robGame .rg-card { position: relative; width: min(380px, 100%); max-height: 100%; overflow: auto; background: #141a2b; color: #fff; border-radius: 26px; padding: 14px 16px 16px; font-family: var(--ui); box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: rise .25s ease-out; }
#robGame .rg-card.victim { box-shadow: 0 0 0 3px #e74c3c, 0 20px 60px rgba(0,0,0,.5); }
#robGame .rg-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#robGame .rg-top b { font: 800 16px var(--ui); }
#robGame .rg-dots { display: flex; gap: 5px; flex: none; }
#robGame .rg-dots i { width: 12px; height: 12px; border-radius: 50%; background: #2c3550; }
#robGame .rg-dots i.now { background: #f5c542; box-shadow: 0 0 0 3px rgba(245,197,66,.3); }
#robGame .rg-dots i.w { background: #2ecc71; } #robGame .rg-dots i.b { background: #e74c3c; } #robGame .rg-dots i.m { background: #7f8aa8; }
#robGame .rg-hint { margin: 8px 0 10px; font: 600 13px/1.35 var(--ui); color: #c9d2ea; min-height: 36px; }
#robGame .rg-hint b.g { color: #2ecc71; }
#robGame .rg-meter { position: relative; height: 26px; border-radius: 13px; background: #e74c3c; overflow: hidden; }
#robGame .rg-meter i { position: absolute; top: 0; bottom: 0; }
#robGame .rg-meter i.y { background: #f5c542; } #robGame .rg-meter i.gr { background: #2ecc71; }
#robGame .rg-meter u { position: absolute; top: -2px; bottom: -2px; width: 5px; margin-left: -2.5px; left: 0; background: #fff; border-radius: 3px; box-shadow: 0 0 6px rgba(0,0,0,.6); }
#robGame .rg-time { height: 5px; border-radius: 3px; background: #2c3550; margin-top: 8px; overflow: hidden; }
#robGame .rg-time i { display: block; height: 100%; width: 100%; background: #6aa3ff; }
#robGame .rg-body { position: relative; margin: 10px auto 4px; width: min(260px, 74vw); aspect-ratio: 200 / 260; }
#robGame .rg-body svg { width: 100%; height: 100%; display: block; }
#robGame .rg-body.moved svg { animation: rgShake .3s; }
@keyframes rgShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
#robGame .rg-pocket { position: absolute; transform: translate(-50%, -50%); width: 78px; min-height: 70px; border: 3px solid rgba(255,255,255,.75); border-radius: 18px; background: rgba(20,26,43,.78); color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px; font-family: var(--ui); transition: transform .12s, background .2s, border-color .2s; }
#robGame .rg-pocket span { font-size: 24px; line-height: 1; }
#robGame .rg-pocket small { font: 700 10.5px/1.15 var(--ui); margin-top: 3px; }
#robGame .rg-pocket em { position: absolute; top: -16px; right: -12px; font-style: normal; font-size: 22px; line-height: 1; padding: 4px; border-radius: 50%; background: #f5c542; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
#robGame .rg-pocket em:empty { display: none; }
#robGame .rg-pocket.p0 { left: 22%; top: 66%; } #robGame .rg-pocket.p1 { left: 50%; top: 80%; } #robGame .rg-pocket.p2 { left: 78%; top: 66%; }
#robGame .rg-pocket:active:not(:disabled) { transform: translate(-50%, -50%) scale(.94); }
#robGame .rg-pocket:disabled { cursor: default; opacity: .8; }
#robGame .rg-pocket.guard { border-color: #2ecc71; background: rgba(46,204,113,.3); }
#robGame .rg-pocket.guard::after { content: '🖐️'; position: absolute; font-size: 30px; bottom: -14px; left: -10px; }
#robGame .rg-pocket.pick { border-color: #f5c542; background: rgba(245,197,66,.3); }
#robGame .rg-flash { position: absolute; left: 50%; top: 28%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; white-space: nowrap; padding: 8px 14px; border-radius: 14px; font: 900 19px var(--ui); background: #2c3550; transition: opacity .15s, transform .2s; }
#robGame .rg-flash.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#robGame .rg-flash.good { background: #1f9d55; } #robGame .rg-flash.bad { background: #c0392b; }
#robGame .rg-take { display: flex; align-items: center; gap: 8px; font: 700 12px var(--ui); color: #c9d2ea; margin-top: 6px; }
#robGame .rg-take i { flex: 1; height: 10px; border-radius: 5px; background: #2c3550; overflow: hidden; }
#robGame .rg-take u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f5c542, #2ecc71); transition: width .4s; }
#robGame .rg-take b { color: #fff; min-width: 38px; text-align: right; }
#robGame .rg-blocks { margin-top: 6px; font-size: 16px; } #robGame .rg-blocks span { opacity: .25; } #robGame .rg-blocks small { font: 600 11px var(--ui); color: #8e98b5; }
#robGame .rg-end { display: none; }
#robGame .done .rg-end { display: block; margin-top: 10px; text-align: center; animation: rise .25s ease-out; }
#robGame .rg-end h3 { margin: 4px 0; font: 900 20px var(--ui); } #robGame .rg-end p { margin: 4px 0 10px; font: 600 14px/1.4 var(--ui); color: #dbe2f4; } #robGame .rg-end p.small { font-size: 12px; color: #f5a142; }
#robGame .rg-end div { display: flex; gap: 8px; justify-content: center; }
#robGame .rg-end button { border: 0; border-radius: 999px; padding: 11px 20px; font: 800 14px var(--ui); background: #fff; color: #141a2b; cursor: pointer; }
#robGame .rg-end button[data-police] { background: #1f6fe5; color: #fff; }

/* the update notice (ui/whats-new.js) */
#whatsNew { position: fixed; inset: 0; z-index: 44; display: none; align-items: center; justify-content: center; background: rgba(6,10,20,.55); padding: 14px; }
#whatsNew.open { display: flex; }
#whatsNew .wn-card { width: min(420px, 100%); max-height: 100%; display: flex; flex-direction: column; background: #fff; border-radius: 26px; overflow: hidden; font-family: var(--ui); box-shadow: 0 20px 60px rgba(0,0,0,.4); animation: rise .25s ease-out; }
#whatsNew .wn-head { display: flex; gap: 12px; align-items: center; padding: 16px 18px 12px; background: linear-gradient(135deg, #1f6fe5, #7b3fe4); color: #fff; }
#whatsNew .wn-head b { font-size: 34px; }
#whatsNew .wn-head h2 { margin: 0; font: 900 19px var(--ui); } #whatsNew .wn-head span { font: 600 12px var(--ui); opacity: .85; }
#whatsNew .wn-list { overflow-y: auto; padding: 4px 16px 8px; -webkit-overflow-scrolling: touch; }
#whatsNew h3 { margin: 12px 0 6px; font: 800 13px var(--ui); color: #6b7a90; text-transform: uppercase; letter-spacing: .04em; }
#whatsNew .wn-item { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid #eef1f6; }
#whatsNew .wn-item:last-child { border-bottom: 0; }
#whatsNew .wn-item b { font-size: 22px; width: 30px; text-align: center; flex: none; }
#whatsNew .wn-item strong { display: block; font: 800 14px var(--ui); color: #16243a; } #whatsNew .wn-item span { display: block; font: 500 12.5px/1.35 var(--ui); color: #4d5c72; margin-top: 1px; }
#whatsNew .wn-go { margin: 8px 16px 16px; border: 0; border-radius: 999px; padding: 14px; font: 800 15px var(--ui); background: var(--brand, #1f6fe5); color: #fff; cursor: pointer; }

/* this account joined from another device or tab (main.js net:replaced) */
#replacedCard { position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; background: rgba(6,10,20,.6); padding: 16px; }
#replacedCard.open { display: flex; }
#replacedCard > div { width: min(340px, 100%); background: #fff; border-radius: 24px; padding: 20px; text-align: center; font-family: var(--ui); display: flex; flex-direction: column; gap: 6px; animation: rise .25s ease-out; }
#replacedCard b { font-size: 38px; } #replacedCard strong { font: 800 17px var(--ui); color: #16243a; } #replacedCard span { font: 500 13.5px/1.4 var(--ui); color: #4d5c72; }
#replacedCard button { margin-top: 8px; border: 0; border-radius: 999px; padding: 13px; font: 800 15px var(--ui); background: var(--brand, #1f6fe5); color: #fff; cursor: pointer; }

/* the Yahoo mini-game (ui/cyber-game.js): a laptop screen */
#cyberGame { position: fixed; inset: 0; z-index: 48; display: none; align-items: center; justify-content: center; background: rgba(4,8,6,.6); backdrop-filter: blur(3px); padding: 12px; }
#cyberGame.open { display: flex; }
#cyberGame .cy-card { position: relative; width: min(370px, 100%); max-height: 100%; overflow: auto; background: #07130d; color: #b8ffd2; border: 2px solid #1d4a32; border-radius: 22px; padding: 14px 16px 16px; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; box-shadow: 0 0 0 6px #111, 0 20px 60px rgba(0,0,0,.55), inset 0 0 40px rgba(46,204,113,.08); animation: rise .25s ease-out; }
#cyberGame .cy-top { display: flex; align-items: center; gap: 8px; font-size: 13px; }
#cyberGame .cy-top b { font: 800 15px var(--ui); color: #fff; flex: 1; }
#cyberGame .cy-lv { display: flex; align-items: center; gap: 4px; color: #7fd8a0; }
#cyberGame .cy-lv i { width: 9px; height: 9px; border-radius: 50%; background: #1d4a32; }
#cyberGame .cy-lv i.done { background: #2ecc71; } #cyberGame .cy-lv i.now { background: #f5c542; box-shadow: 0 0 0 3px rgba(245,197,66,.25); }
#cyberGame .cy-bank { color: #f5c542; font-weight: 700; }
#cyberGame .cy-trace { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11px; font-weight: 700; color: #ff9a8f; }
#cyberGame .cy-trace i { flex: 1; height: 10px; border-radius: 5px; background: #1a0d0d; overflow: hidden; border: 1px solid #4a1d1d; }
#cyberGame .cy-trace u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f5a142, #e74c3c); }
#cyberGame .cy-trace b { min-width: 36px; text-align: right; color: #fff; }
#cyberGame .cy-trace.hot i { animation: cyPulse .5s infinite alternate; }
@keyframes cyPulse { to { box-shadow: 0 0 10px #e74c3c; } }
#cyberGame .cy-msg { margin: 10px 0 6px; min-height: 34px; font: 600 13px/1.35 var(--ui); color: #b8ffd2; }
#cyberGame .cy-msg.good { color: #2ecc71; } #cyberGame .cy-msg.bad { color: #ff7a6e; }
#cyberGame .cy-dots { display: flex; gap: 6px; justify-content: center; min-height: 12px; margin-bottom: 10px; }
#cyberGame .cy-dots i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #2ecc71; }
#cyberGame .cy-dots i.on { background: #2ecc71; }
#cyberGame .cy-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
#cyberGame .cy-pad button { aspect-ratio: 1.25; border: 2px solid #1d4a32; border-radius: 16px; background: #0c2016; font-size: 30px; cursor: pointer; transition: transform .08s, background .12s, border-color .12s, box-shadow .12s; }
#cyberGame .cy-pad button:disabled { cursor: default; }
#cyberGame .cy-pad button:not(:disabled):active { transform: scale(.94); }
#cyberGame .cy-pad button.lit { background: #2ecc71; border-color: #b8ffd2; box-shadow: 0 0 18px #2ecc71; transform: scale(1.06); }
#cyberGame .cy-pad button.hit { background: #1f9d55; border-color: #2ecc71; }
#cyberGame .cy-pad button.miss { background: #c0392b; border-color: #ff7a6e; }
#cyberGame .cy-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; }
#cyberGame .cy-foot button { border: 0; border-radius: 999px; padding: 12px 22px; font: 800 14px var(--ui); background: #f5c542; color: #1a1300; cursor: pointer; }
#cyberGame .cy-foot button:disabled { opacity: .35; cursor: default; }
#cyberGame .cy-foot small { font: 500 11.5px var(--ui); color: #7fd8a0; text-align: center; } #cyberGame .cy-foot small b { color: #f5c542; }
#cyberGame .cy-end { display: none; }
#cyberGame .done .cy-end { display: block; position: absolute; inset: 0; background: rgba(7,19,13,.94); border-radius: 20px; padding: 24px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: rise .2s ease-out; }
#cyberGame .done .cy-end h3 { margin: 0 0 8px; font: 900 24px var(--ui); color: #2ecc71; } #cyberGame .lost .cy-end h3 { color: #ff6b5e; }
#cyberGame .done .cy-end p { margin: 0 0 16px; font: 600 14px/1.45 var(--ui); color: #dff7e8; } #cyberGame .done .cy-end p b { color: #f5c542; font-size: 18px; }
#cyberGame .done .cy-end button { border: 0; border-radius: 999px; padding: 12px 30px; font: 800 14px var(--ui); background: #fff; color: #07130d; cursor: pointer; }

/* the coding mini-game (ui/code-game.js): a code editor */
#codeGame { position: fixed; inset: 0; z-index: 48; display: none; align-items: center; justify-content: center; background: rgba(8,10,20,.6); backdrop-filter: blur(3px); padding: 12px; }
#codeGame.open { display: flex; }
#codeGame .cg-card { position: relative; width: min(380px, 100%); max-height: 100%; overflow: auto; background: #1e1f2b; color: #e4e6f0; border-radius: 20px; padding: 14px 14px 12px; font-family: var(--ui); box-shadow: 0 20px 60px rgba(0,0,0,.5); border-top: 4px solid #7c6cf0; animation: rise .25s ease-out; }
#codeGame .cg-top { display: flex; align-items: center; gap: 8px; font-size: 12px; }
#codeGame .cg-top b { flex: 1; font: 800 14.5px var(--ui); color: #fff; }
#codeGame .cg-n { color: #a9b0cc; font-weight: 700; } #codeGame .cg-got { color: #f5c542; font-weight: 800; }
#codeGame .cg-time { height: 6px; border-radius: 3px; background: #2c2e3e; margin-top: 10px; overflow: hidden; }
#codeGame .cg-time i { display: block; height: 100%; width: 100%; background: #7c6cf0; }
#codeGame .cg-time i.low { background: #e74c3c; }
#codeGame .cg-ask { margin: 10px 0 8px; font: 700 13.5px var(--ui); color: #fff; }
#codeGame .cg-code { background: #15161f; border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 3px; }
#codeGame .cg-line { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; min-width: 0; text-align: left; border: 1px solid transparent; border-radius: 8px; padding: 7px 8px; background: transparent; color: #e4e6f0; cursor: pointer; font-family: inherit; }
#codeGame button.cg-line:not(:disabled):active { background: #2c2e3e; }
#codeGame .cg-line.ro { cursor: default; }
#codeGame .cg-line i { font: 600 11px ui-monospace, Menlo, Consolas, monospace; color: #5d6280; min-width: 14px; text-align: right; font-style: normal; }
#codeGame code { font: 500 12.5px/1.35 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; white-space: pre; color: #c9d1ff; overflow: hidden; text-overflow: ellipsis; }
#codeGame button.cg-line { background: #1b1c27; border-color: #2c2e3e; }
#codeGame .cg-line.good { background: rgba(46,204,113,.18); border-color: #2ecc71; }
#codeGame .cg-line.bad, #codeGame .cg-opts button.bad { background: rgba(231,76,60,.2); border-color: #e74c3c; }
#codeGame .cg-caret { display: inline-block; margin-left: 2px; color: #f5c542; animation: cgBlink 1s steps(2) infinite; }
@keyframes cgBlink { 50% { opacity: 0; } }
#codeGame .cg-built { min-height: 44px; margin-bottom: 8px; }
#codeGame .cg-empty { margin: 8px; font: 600 12px var(--ui); color: #7d83a3; text-align: center; }
#codeGame .cg-pool { display: flex; flex-direction: column; gap: 5px; }
#codeGame .cg-pool .cg-line { border-style: dashed; border-color: #4a4d66; }
#codeGame .cg-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
#codeGame .cg-opts button { border: 1px solid #3a3d55; border-radius: 12px; padding: 12px 6px; background: #262838; cursor: pointer; }
#codeGame .cg-opts button code { font-size: 14px; color: #fff; }
#codeGame .cg-opts button.good { background: rgba(46,204,113,.22); border-color: #2ecc71; }
#codeGame .cg-why { min-height: 20px; margin-top: 8px; font: 700 12.5px/1.35 var(--ui); }
#codeGame .cg-why.good { color: #2ecc71; } #codeGame .cg-why.bad { color: #ff7a6e; } #codeGame .cg-why span { color: #c3c8de; font-weight: 600; }
#codeGame .cg-foot { margin-top: 6px; font: 500 11.5px var(--ui); color: #8a90ad; text-align: center; } #codeGame .cg-foot b { color: #f5c542; }
#codeGame .cg-end { display: none; }
#codeGame .done .cg-end { position: absolute; inset: 0; border-radius: 18px; background: rgba(30,31,43,.95); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; animation: rise .2s ease-out; }
#codeGame .cg-end h3 { margin: 0 0 8px; font: 900 23px var(--ui); color: #fff; }
#codeGame .cg-end p { margin: 0 0 16px; font: 600 14px/1.5 var(--ui); color: #c3c8de; } #codeGame .cg-end p b { color: #f5c542; font-size: 18px; }
#codeGame .cg-end button { border: 0; border-radius: 999px; padding: 12px 30px; font: 800 14px var(--ui); background: #7c6cf0; color: #fff; cursor: pointer; }

/* The phone on a small phone held sideways (the user, 17 Oct 2026: "the phone interface on landscape for small phone should
   occupy less space"): not the whole screen - a phone-shaped column on the right, the game still showing beside it; its
   home screen tighter so the apps and the dock fit the short height */
@media (orientation: landscape) and (max-height: 560px) {
  #phoneBack { justify-content: flex-end; background: rgba(8,20,14,.22); }
  #phone { box-sizing: border-box; width: min(340px, 46vw); height: var(--vh); border-radius: 24px 0 0 24px; background: #0e0f12; box-shadow: -10px 0 40px rgba(0,0,0,.35);
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) 6px; }
  #phone .scr { border-radius: 20px 0 0 20px; }
  #phoneClose { top: calc(var(--sat, 0px) + 10px); right: calc(min(340px, 46vw) + 10px); }
  #phone .notch { display: none; }
  #phone .sb { padding: 6px 16px 2px; font-size: 11.5px; }
  #phone .clock { padding: 2px 16px 4px; } #phone .clock b { font-size: 38px; letter-spacing: -1px; } #phone .clock span { font-size: 11.5px; }
  #phone .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 2px; padding: 4px 8px; }
  #phone .app { gap: 3px; font-size: 10px; }
  #phone .app img, #phone .app .emo { width: 44px; height: 44px; border-radius: 11px; }
  #phone .dock { margin: 0 8px 4px; padding: 6px 4px 4px; border-radius: 20px; }
  #phone .homebar { margin-bottom: 4px; width: 100px; }
  #phone .skyline { display: none; }
  #phone .vh { padding: 2px 12px 6px; } #phone .vh strong { font-size: 16px; } #phone .vb { padding: 0 12px 12px; }
}

/* every home on its own land (ui/plot-ui.js): the tool panel over the map, the question after the update */
#plotTool { display: none; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 12; width: min(520px, calc(100vw - 24px));
  background: #fff; color: #0f1d33; border-radius: 18px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-family: var(--ui, system-ui); box-sizing: border-box; }
#plotTool.open { display: block; }
#plotTool .pt-hd { display: flex; align-items: center; gap: 10px; } #plotTool .pt-hd strong { flex: 1; font: 800 15px var(--ui, system-ui); }
#plotTool .pt-hd button { border: 0; background: #eef3fb; border-radius: 10px; width: 34px; height: 34px; font: 800 15px var(--ui, system-ui); color: #0f1d33; }
#plotTool .pt-lead { margin: 8px 0; font: 600 13px var(--ui, system-ui); color: #51606f; }
#plotTool .pt-lead .bad { color: #c92a2a; } #plotTool .pt-lead .ok { color: #2b8a3e; }
#plotTool .pt-note { margin: 6px 0 0; font: 600 12px var(--ui, system-ui); color: #8a96a3; }
#plotTool .pt-btns { display: flex; gap: 8px; } #plotTool .pt-btns button { flex: 1; border: 0; border-radius: 12px; padding: 11px 8px; font: 800 13px var(--ui, system-ui); background: #eef3fb; color: #0f1d33; }
#plotTool .pt-btns button.go { background: #1f6fe5; color: #fff; flex: 2; } #plotTool button:disabled { opacity: .45; }
#plotTool .pt-chips { display: flex; gap: 6px; overflow-x: auto; margin-top: 8px; padding-bottom: 2px; scrollbar-width: none; }
#plotTool .pt-chips button { flex: none; border: 0; border-radius: 999px; padding: 7px 11px; font: 700 12px var(--ui, system-ui); background: #eef3fb; color: #0f1d33; white-space: nowrap; }
#plotTool .pt-chips button.on { background: #0f1d33; color: #fff; }
#landAsk { display: none; position: fixed; inset: 0; z-index: 40; background: rgba(8,14,24,.6); align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; font-family: var(--ui, system-ui); }
#landAsk.open { display: flex; }
#landAsk .la-box { width: min(440px, 100%); background: #fff; color: #0f1d33; border-radius: 20px; padding: 18px; text-align: center; }
#landAsk .la-ic { font-size: 40px; display: block; } #landAsk strong { display: block; font: 800 18px var(--ui, system-ui); margin: 6px 0; }
#landAsk p { font: 600 14px/1.4 var(--ui, system-ui); color: #51606f; margin: 8px 0; } #landAsk .la-more { color: #1f6fe5; }
#landAsk .la-btns { display: flex; gap: 10px; margin-top: 14px; } #landAsk .la-btns button { flex: 1; border: 0; border-radius: 14px; padding: 13px; font: 800 14px var(--ui, system-ui); background: #eef3fb; color: #0f1d33; }
#landAsk .la-btns button.go { flex: 2; background: #1f6fe5; color: #fff; }
.hcard .hland { display: block; margin: 6px 0 0; font: 700 12px var(--ui, system-ui); color: #2b8a3e; } .hcard .hland.need { color: #e8590c; }
/* the admin's message to everyone (ui/notice.js): above the update notice */
#kNotice { position: fixed; inset: 0; z-index: 46; display: none; align-items: center; justify-content: center; background: rgba(6,10,20,.55); padding: 14px; }
#kNotice.open { display: flex; }
#kNotice .kn-card { width: min(400px, 100%); max-height: 100%; display: flex; flex-direction: column; background: #fff; border-radius: 26px; overflow: hidden; font-family: var(--ui); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
#kNotice .kn-head { display: flex; gap: 12px; align-items: center; padding: 16px 18px 12px; background: linear-gradient(135deg, #e5641f, #c4243a); color: #fff; }
#kNotice .kn-head b { font-size: 32px; }
#kNotice .kn-head h2 { margin: 0; font: 900 19px var(--ui); } #kNotice .kn-head span { font: 600 12px var(--ui); opacity: .85; }
#kNotice .kn-text { overflow-y: auto; padding: 14px 18px 6px; font: 500 15px/1.45 var(--ui); color: #16243a; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-overflow-scrolling: touch; }
#kNotice .kn-ok { margin: 10px 16px 16px; padding: 13px; border: 0; border-radius: 16px; background: #16243a; color: #fff; font: 800 15px var(--ui); cursor: pointer; }

/* the community card, WhatsApp + Discord (ui/community.js) - over the welcome screen too, under the team's notices */
#kCommunity { position: fixed; inset: 0; z-index: 45; display: none; align-items: center; justify-content: center; background: rgba(6,10,20,.55); padding: 14px; }
#kCommunity.open { display: flex; }
#kCommunity .kc-card { width: min(380px, 100%); display: flex; flex-direction: column; background: #fff; border-radius: 26px; overflow: hidden; font-family: var(--ui); box-shadow: 0 20px 60px rgba(0,0,0,.35); animation: rise .25s ease-out; }
#kCommunity .kc-head { display: flex; gap: 12px; align-items: center; padding: 16px 18px 12px; background: linear-gradient(135deg, #25d366, #128c7e 55%, #5865f2); color: #fff; }
#kCommunity .kc-head b { font-size: 32px; }
#kCommunity .kc-head h2 { margin: 0; font: 900 19px var(--ui); } #kCommunity .kc-head span { font: 600 12px var(--ui); opacity: .9; }
#kCommunity .kc-text { margin: 0; padding: 14px 18px 4px; font: 500 15px/1.45 var(--ui); color: #16243a; }
#kCommunity .kc-join { margin: 12px 16px 6px; padding: 13px; border: 0; border-radius: 16px; background: #25d366; color: #fff; font: 800 15px var(--ui); cursor: pointer; }
#kCommunity .kc-no { margin: 0 16px 14px; padding: 10px; border: 0; background: none; color: #5b6b82; font: 700 14px var(--ui); cursor: pointer; }
#kCommunity .kc-join.kc-dc { background: #5865f2; } #kCommunity .kc-join + .kc-join { margin-top: 0; }
.primary.kc-app { background: #25d366; } .primary.kc-app.kc-dc { background: #5865f2; margin-top: 10px; }
#kCommunity .kc-join.kc-tt, .primary.kc-app.kc-tt { background: #111; box-shadow: inset 3px 0 0 #25f4ee, inset -3px 0 0 #fe2c55; } .primary.kc-app.kc-tt { margin-top: 10px; } /* TikTok black, its cyan and red edges */
#kCommunity .kc-join small { font: 800 12px var(--ui); color: #ffd84d; margin-left: 4px; }

/* 🏡 the outside of your house (ui/exterior-ui.js): a panel along the bottom, the compound's front above it */
#extTool { display: none; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 12; width: min(560px, calc(100vw - 24px));
  max-height: 46vh; overflow: hidden; flex-direction: column; background: #fff; color: #0f1d33; border-radius: 18px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-family: var(--ui, system-ui); box-sizing: border-box; }
#extTool.open { display: flex; }
#extTool button { font-family: var(--ui, system-ui); cursor: pointer; }
#extTool .xt-hd { display: flex; align-items: center; gap: 10px; } #extTool .xt-hd strong { flex: 1; font: 800 15px var(--ui, system-ui); }
#extTool .xt-hd button { border: 0; background: #eef3fb; border-radius: 10px; width: 34px; height: 34px; font: 800 15px var(--ui, system-ui); color: #0f1d33; }
#extTool .xt-tabs, #extTool .xt-chips { display: flex; gap: 6px; overflow-x: auto; margin-top: 8px; padding-bottom: 2px; scrollbar-width: none; flex: none; }
#extTool .xt-tabs button, #extTool .xt-chips button { flex: none; border: 0; border-radius: 999px; padding: 7px 11px; font: 700 12px var(--ui, system-ui); background: #eef3fb; color: #0f1d33; white-space: nowrap; }
#extTool .xt-tabs button.on, #extTool .xt-chips button.on { background: #0f1d33; color: #fff; }
#extTool .xt-body { overflow-y: auto; margin-top: 8px; min-height: 0; }
#extTool .xt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
#extTool .xt-opt { border: 2px solid #e3e9f2; background: #f7f9fc; border-radius: 14px; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #0f1d33; }
#extTool .xt-opt.on { border-color: #1f6fe5; background: #eaf2ff; }
#extTool .xt-pic { width: 64px; height: 64px; background: center / contain no-repeat; }
#extTool .xt-opt b { font: 700 12px var(--ui, system-ui); text-align: center; } #extTool em { font: 800 11px var(--ui, system-ui); font-style: normal; color: #b0560b; } #extTool em.own { color: #2b8a3e; }
#extTool .xt-list { display: flex; flex-direction: column; gap: 6px; }
#extTool .xt-row { display: flex; align-items: center; gap: 10px; border: 2px solid #e3e9f2; background: #f7f9fc; border-radius: 12px; padding: 8px 10px; text-align: left; color: #0f1d33; }
#extTool .xt-row.on { border-color: #2b8a3e; background: #ebfbee; } #extTool .xt-row b { font-size: 20px; } #extTool .xt-row span { flex: 1; font: 700 13px var(--ui, system-ui); }
#extTool .xt-row i { font: 800 11px var(--ui, system-ui); font-style: normal; color: #51606f; }
#extTool .xt-plate { display: flex; gap: 6px; align-items: center; } #extTool .xt-plate label { font: 700 12px var(--ui, system-ui); white-space: nowrap; }
#extTool .xt-plate input { flex: 1; min-width: 0; border: 2px solid #e3e9f2; border-radius: 10px; padding: 8px; font: 700 16px Georgia, serif; }
#extTool .xt-plate button, #extTool .xt-btns button { border: 0; border-radius: 10px; padding: 9px 12px; font: 800 13px var(--ui, system-ui); background: #0f1d33; color: #fff; }
#extTool .xt-btns { display: flex; gap: 8px; margin-top: 6px; }
#extTool .xt-note { margin: 6px 0; font: 600 12px var(--ui, system-ui); color: #51606f; }
#extTool .xt-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
#extTool .sw { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #c9d3df; padding: 0; }
#extTool .sw.on { box-shadow: 0 0 0 3px #1f6fe5; } #extTool .sw.def { background: #eef3fb; font: 800 16px var(--ui, system-ui); color: #0f1d33; }
#extTool .xt-yardbox { display: flex; gap: 10px; align-items: flex-start; } #extTool .xt-side { flex: 1; min-width: 0; }
#extTool .xt-yard { width: 46%; max-width: 230px; flex: none; }
#extTool .xt-yard .yd { fill: #b49a78; stroke: #6e6a64; stroke-width: 0.4; } #extTool .xt-yard .hs { fill: #e8e2d4; stroke: #8a8378; stroke-width: 0.25; }
#extTool .xt-yard .gt { fill: #1f3f7a; } #extTool .xt-yard .lb { font: 700 1.4px var(--ui, system-ui); fill: #51606f; text-anchor: middle; }
#extTool .xt-yard .sp { fill: rgba(255,255,255,.65); stroke: #2b8a3e; stroke-width: 0.25; stroke-dasharray: 0.5 0.35; cursor: pointer; }
#extTool .xt-yard .sp.full { fill: #d3f9d8; stroke-dasharray: none; } #extTool .xt-yard .sp.sel { stroke: #1f6fe5; stroke-width: 0.5; fill: #d0e3ff; }
#extTool .xt-yard .ic { font-size: 1.5px; text-anchor: middle; pointer-events: none; } #extTool .xt-yard g { cursor: pointer; }
#extTool .xt-buy { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e3e9f2; flex: none; }
#extTool .xt-buy span { flex: 1; font: 700 13px var(--ui, system-ui); }
#extTool .xt-buy button { border: 0; border-radius: 12px; padding: 10px 12px; font: 800 13px var(--ui, system-ui); background: #eef3fb; color: #0f1d33; }
#extTool .xt-buy button.go { background: #2b8a3e; color: #fff; }
/* a new player just arrived nearby: say hi (ui/newcomer.js) */
#kNewbie { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 7; width: min(420px, calc(100% - 24px)); display: none; }
#kNewbie.open { display: block; animation: rise .25s ease-out; }
#kNewbie .kb-card { display: flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); border-radius: 18px; padding: 10px 10px 10px 14px; font: 600 13px/1.35 var(--ui); box-shadow: 0 8px 26px rgba(0,0,0,.28); }
#kNewbie .kb-card > b { font-size: 22px; }
#kNewbie .kb-text { flex: 1; min-width: 0; }
#kNewbie .kb-btns { display: flex; gap: 6px; flex-shrink: 0; }
#kNewbie button { border: 0; border-radius: 999px; font: 700 13px var(--ui); cursor: pointer; }
#kNewbie .kb-go { background: #1f8a4c; color: #fff; padding: 8px 12px; }
#kNewbie .kb-x { background: #eef0f3; color: var(--ink); width: 32px; height: 32px; }

/* the beta game (config.js IS_BETA, https://beta.kamerlife.com) */
#betaTag { position: fixed; top: max(6px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 9999; border: 0; cursor: pointer; padding: 2px 10px; border-radius: 999px; background: #e8590c; color: #fff; font: 800 11px/1.6 system-ui, sans-serif; letter-spacing: .04em; opacity: .95; white-space: nowrap; } /* tap: Feedback (main.js) */