:root {
  /* Midnight, emerald, ivory and brass */
  --ink: #0b0d0c; --panel: rgba(12, 16, 15, 0.9); --line: rgba(243, 236, 224, 0.12);
  --emerald: #1f8a63; --emerald-hi: #34b083; --emerald-deep: #0e4c37; --ivory: #f3ece0; --brass: #c8a46a; --brass-hi: #dcc08a; --brass-deep: #8a6a3a;
  --mustard: #d4b47c; --ketchup: #e63946; --ok: #3ddc84; --warn: #e8a64a; --bad: #ff3b30;
  --text: #f3ece0; --muted: #a9a59a;
  --street-x: 0px; --street-y: 0px; --street-w: 100vw; --street-h: 50vh;
  --cart-x: 0px; --cart-y: 50vh; --cart-w: 100vw; --cart-h: 40vh; --bar-h: 84px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #070908; color: var(--text); font-family: Figtree, system-ui, sans-serif; }
body { touch-action: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
#loading { position: fixed; inset: 0; display: grid; place-items: center; font: 600 20px Fredoka, sans-serif; background: #070908; z-index: 90; }
#loading[hidden] { display: none; }
#loading .ld { display: grid; gap: 10px; justify-items: center; color: #f3ece0; }
#loading .ld i { width: 200px; height: 8px; border-radius: 6px; background: #262c33; overflow: hidden; display: block; }
#loading .ld u { display: block; height: 100%; background: #ffbe0b; transition: width .3s; }
#loading .ld small { font-size: 13px; opacity: .6; font-weight: 500; }

/* HUD across the top of the street view */
#hud {
  position: fixed; left: calc(var(--street-x) + 8px); top: calc(env(safe-area-inset-top) + 8px); width: calc(var(--street-w) - 16px);
  display: flex; align-items: center; gap: 6px; z-index: 30; pointer-events: none;
}
#hud > * { pointer-events: auto; }
#hud .time, #hud .stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 5px 8px; backdrop-filter: blur(6px); }
#hud .time { display: flex; flex-direction: column; gap: 4px; min-width: 82px; }
#hud .time b { font: 700 16px Fredoka, sans-serif; letter-spacing: 0.3px; white-space: nowrap; }
#hud .time i { display: block; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
#hud .time u { display: block; height: 100%; width: 0; background: var(--mustard); }
#hud .stat { display: flex; flex-direction: column; line-height: 1.1; }
#hud .stat span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); font-weight: 700; }
#hud .stat b { font: 700 16px Fredoka, sans-serif; white-space: nowrap; }
#hud .cash b { color: var(--mustard); }
#hud .lost b { color: #ff8a80; }
#combo { position: fixed; right: 10px; top: calc(var(--street-y) + var(--street-h) - 50px); font: 700 20px Fredoka, sans-serif; color: var(--ink); background: var(--mustard); border-radius: 12px; padding: 4px 10px; transform: scale(0); transition: transform 0.15s; }
#combo.on { transform: scale(1); }
#hud .tools { margin-left: auto; display: flex; gap: 6px; }
#hud .tools { flex-direction: column; gap: 4px; }
#hud .tools button { width: 34px; height: 30px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 14px; }
#btnMute.off { opacity: 0.45; text-decoration: line-through; }

/* Temperature and glove chips along the top edge of the cart view */
#chips { position: fixed; left: var(--cart-x); top: calc(var(--cart-y) + 6px); width: var(--cart-w); display: flex; justify-content: center; gap: 5px; z-index: 25; pointer-events: none; padding: 0 6px; flex-wrap: wrap; }
.chip { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 999px; background: var(--panel); border: 1.5px solid var(--line); white-space: nowrap; }
.chip strong { font-weight: 800; }
.chip.ok strong { color: var(--ok); }
.chip.warn { border-color: var(--warn); } .chip.warn strong { color: var(--warn); }
.chip.bad { border-color: var(--bad); background: rgba(120, 18, 14, 0.9); animation: throb 0.8s infinite; } .chip.bad strong { color: #fff; }
@keyframes throb { 50% { transform: scale(1.06); } }
.ic { font-style: normal; font-weight: 400; }
.ic.cooler::before { content: '❄️'; } .ic.tray::before { content: '♨️'; } .ic.glove::before { content: '🧤'; }
.ic.subway::before { content: '🚇'; } .ic.phone::before { content: '📱'; } .ic.tix::before { content: '🎫'; }
.ic.run::before { content: '🏃'; } .ic.ok::before { content: '✅'; } .ic.rival::before { content: '🌭'; }

/* Action bar */
#bar { position: fixed; z-index: 30; display: grid; grid-template-columns: 1fr 1fr 1fr 1.25fr; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  left: var(--cart-x); width: var(--cart-w); bottom: 0; height: calc(var(--bar-h) + env(safe-area-inset-bottom)); background: #15181d; border-top: 1px solid var(--line); }
.act { position: relative; overflow: hidden; border: 0; border-radius: 14px; background: #161b19; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; font-weight: 700; line-height: 1.1; }
.act .em { font-size: 24px; line-height: 1; }
.act small { font-size: 10px; color: var(--muted); font-weight: 600; }
.act::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: var(--cd, 0%); background: rgba(0, 0, 0, 0.55); pointer-events: none; }
.act:active { transform: scale(0.95); }
.act:disabled { opacity: 0.4; }
.act.alert { background: #7a1a14; box-shadow: inset 0 0 0 2px var(--bad); }
.act.shout { background: linear-gradient(180deg, #d4b47c, #a9824a); color: var(--ink); font: 700 16px Fredoka, sans-serif; }
.act.shout small { color: #5a3d00; }

/* Order bubbles over the line */
#bubbles, #floaters { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.bub { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; background: #fffdf6; color: var(--ink); border-radius: 14px; padding: 5px 8px 5px 5px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); transform-origin: 50% 100%; white-space: nowrap; }
.bub::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #fffdf6; }
.bub.front { box-shadow: 0 0 0 3px var(--mustard), 0 4px 14px rgba(0, 0, 0, 0.4); }
.bub.angry { animation: shake 0.35s infinite; }
@keyframes shake { 25% { margin-left: -2px; } 75% { margin-left: 2px; } }
.bub .ring { width: 24px; height: 24px; border-radius: 50%; flex: none; background: conic-gradient(var(--c) calc(var(--p) * 1%), #e4e0d4 0); position: relative; }
.bub .ring::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #fffdf6; }
.bub .ord { display: flex; gap: 6px; align-items: center; }
.bub .item { display: flex; align-items: center; gap: 2px; }
.bub .item.got { opacity: 0.35; }
.bub .item.got::after { content: '✓'; font-weight: 800; color: #1b8a4b; margin-left: 2px; }
.bub b.dog::before { content: '🌭'; font-size: 18px; }
.bub b.soda::before { content: '🥤'; font-size: 17px; }
.tp { font-style: normal; font: 700 12px Fredoka, sans-serif; min-width: 18px; height: 18px; border-radius: 5px; display: inline-grid; place-items: center; padding: 0 3px; }
.tp.mustard { background: #f2c400; color: #3a2d00; } .tp.ketchup { background: #c8102e; color: #fff; }
.tp.onions { background: #f3eee0; color: #555; box-shadow: inset 0 0 0 1px #c9c2ad; } .tp.kraut { background: #c9c27a; color: #3b3a12; }
.tp.plain { background: #e4e0d4; color: #555; font-size: 10px; }

.floater { position: absolute; transform: translate(-50%, -50%); font: 700 18px Fredoka, sans-serif; color: var(--mustard); text-shadow: 0 2px 0 #000, 0 0 8px rgba(0, 0, 0, 0.6); animation: rise 1.3s ease-out forwards; white-space: nowrap; }
.floater small { font-size: 13px; color: #fff; }
.floater.perfect { color: var(--ok); font-size: 16px; }
.floater.combo { font-size: 38px; color: var(--mustard); animation: pop 1.2s ease-out forwards; }
@keyframes rise { 0% { opacity: 0; margin-top: 10px; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -50px; } }
@keyframes pop { 0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 35% { transform: translate(-50%, -50%) scale(1); } 100% { transform: translate(-50%, -80%) scale(1); opacity: 0; } }
.speech { position: absolute; transform: translate(-50%, -100%); background: #fff; color: var(--ink); font-weight: 700; font-size: 13px; padding: 5px 9px; border-radius: 12px; max-width: 200px; white-space: normal; text-align: center; animation: say 2.2s ease-out forwards; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); }
.speech.me { background: var(--mustard); }
.speech.rival { background: #1d6fb8; color: #fff; }
.speech.angry { background: #ffe1df; color: #8a1410; }
@keyframes say { 0% { opacity: 0; margin-top: 6px; } 10% { opacity: 1; margin-top: 0; } 85% { opacity: 1; } 100% { opacity: 0; } }

/* Toasts sit near the top of the cart view; banners across the street view */
#toasts { position: fixed; left: var(--cart-x); width: var(--cart-w); top: calc(var(--cart-y) + var(--cart-h) - 46px); display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 40; pointer-events: none; }
.toast { background: rgba(10, 12, 15, 0.92); border: 1px solid var(--line); padding: 6px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; transition: opacity 0.4s, transform 0.4s; max-width: 92%; text-align: center; }
.toast.out { opacity: 0; transform: translateY(-6px); }
.toast.bad { border-color: var(--bad); } .toast.warn { border-color: var(--warn); color: #efe3c8; } .toast.good { border-color: var(--ok); }
#banner { position: fixed; left: calc(var(--street-x) + var(--street-w) / 2); top: calc(env(safe-area-inset-top) + 150px); transform: translate(-50%, 0) scale(0.8); z-index: 35; pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity 0.2s, transform 0.2s; font: 700 17px/1.25 Fredoka, sans-serif; color: var(--ink); background: var(--bg, var(--mustard)); padding: 8px 14px; border-radius: 14px; max-width: calc(var(--street-w) - 24px); text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
#banner.show { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
#banner b { margin-right: 4px; }
#banner.train { --bg: #ff8c42; } #banner.rival { --bg: #6fb1ff; } #banner.cop { --bg: #9be7a7; } #banner.warn { --bg: #ffb4a8; } #banner.end { --bg: #ffffff; }

/* Prompt (dropped dog, officer) */
#prompt { position: fixed; z-index: 60; display: none; background: #fffdf6; color: var(--ink); border-radius: 18px; padding: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); width: min(92vw, 380px); }
#prompt.show { display: block; animation: pin 0.18s ease-out; }
#prompt.cart { left: calc(var(--cart-x) + var(--cart-w) / 2); top: calc(var(--cart-y) + var(--cart-h) / 2); transform: translate(-50%, -50%); }
#prompt.street { left: calc(var(--street-x) + var(--street-w) / 2); top: calc(var(--street-y) + var(--street-h) * 0.55); transform: translate(-50%, -50%); }
@keyframes pin { from { opacity: 0; margin-top: 10px; } }
#prompt h3 { margin: 0 0 6px; font: 700 19px Fredoka, sans-serif; }
#prompt p { margin: 0 0 10px; font-size: 14px; color: #444; }
#prompt blockquote { margin: 0 0 12px; padding: 8px 10px; border-left: 4px solid #2f5d3a; background: #eef3ee; font-size: 14px; border-radius: 6px; }
#prompt cite { display: block; font-size: 11px; font-style: normal; color: #2f5d3a; font-weight: 700; margin-top: 4px; }
#prompt .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#prompt .opt { border: 0; border-radius: 12px; padding: 12px 8px; font: 700 15px Fredoka, sans-serif; background: #e9e5d8; }
#prompt .opt.good { background: #1f8a63; color: #fff; }
#prompt .opt.risky { background: var(--ketchup); color: #fff; }
#prompt .tbar { display: block; height: 4px; background: var(--ketchup); border-radius: 2px; margin-top: 10px; transition: width 0.1s linear; }

/* Full-screen cards */
#title, #report, #chaseEnd, #pauseCard, #spotPick, #levelup, #broke, #inspectCard { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; background: rgba(8, 10, 13, 0.62); backdrop-filter: blur(3px); overflow-y: auto; padding: 16px; touch-action: pan-y; }
#title.show, #report.show, #chaseEnd.show, #pauseCard.show, #spotPick.show, #levelup.show, #broke.show, #inspectCard.show { display: grid; }
.card { width: min(100%, 460px); background: #111614; border: 1px solid var(--line); border-radius: 22px; padding: 20px 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.kicker { margin: 0; text-transform: uppercase; letter-spacing: 1.4px; font-size: 11px; font-weight: 800; color: var(--mustard); }
.card h1 { margin: 4px 0 6px; font: 700 44px/1 Fredoka, sans-serif; letter-spacing: 1px; }
.card h1 span { color: var(--mustard); }
.card h2 { margin: 6px 0 10px; font: 700 30px Fredoka, sans-serif; }
.card h3 { margin: 16px 0 8px; font: 600 16px Fredoka, sans-serif; }
.where { margin: 0; color: var(--muted); font-size: 14px; }
.spots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spot { text-align: left; border: 2px solid var(--line); background: #151a18; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 3px; }
.spot.sel { border-color: var(--mustard); background: #2b2a22; }
.spot em { font-style: normal; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: var(--ketchup); }
.spot em.ok { color: var(--ok); }
.spot b { font: 600 16px Fredoka, sans-serif; }
.spot span { font-size: 12px; color: var(--muted); line-height: 1.35; }
.how { margin: 14px 0 14px; padding-left: 18px; font-size: 13px; line-height: 1.45; color: #dcd7c6; display: grid; gap: 4px; }
.how .ring { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2.5px solid; vertical-align: -1px; }
.how .ring.y { border-color: #d4b47c; } .how .ring.g { border-color: var(--ok); }
.big { width: 100%; border: 1px solid rgba(220, 192, 138, 0.35); border-radius: 16px; padding: 15px; font: 700 19px Fredoka, sans-serif; background: linear-gradient(180deg, #2a9e73, #17694c); color: var(--ivory); box-shadow: 0 4px 0 #0a3a2a, inset 0 1px 0 rgba(255, 255, 255, 0.18); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.big:active { transform: translateY(2px); box-shadow: 0 2px 0 #0a3a2a, inset 0 1px 0 rgba(255, 255, 255, 0.18); }

#report .profit { font: 700 46px/1 Fredoka, sans-serif; color: var(--mustard); margin: 8px 0 10px; }
#report .profit small { font-size: 14px; color: var(--muted); margin-left: 8px; font-family: Figtree, sans-serif; font-weight: 600; }
.rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.rows div { display: flex; justify-content: space-between; font-size: 14px; }
.rows span { color: var(--muted); }
.rows small { color: var(--muted); font-weight: 400; }
.inspect { display: flex; align-items: center; gap: 12px; }
.grade { width: 64px; height: 64px; flex: none; display: grid; place-items: center; font: 700 42px Fredoka, sans-serif; border-radius: 12px; background: #fff; border: 4px solid; }
.grade.gA { color: #1f5fbf; border-color: #1f5fbf; } .grade.gB { color: #2e8b3a; border-color: #2e8b3a; } .grade.gC { color: #8a6a3a; border-color: #8a6a3a; }
.gradeline { margin: 0; font-size: 13px; color: var(--muted); }
.viol { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.viol li { background: #151a18; border-radius: 12px; padding: 10px 12px; border-left: 4px solid var(--bad); }
.viol li.clean { border-left-color: var(--ok); }
.viol li div { display: flex; flex-direction: column; }
.viol li b { font-size: 14px; }
.viol li span { font-size: 11px; color: var(--muted); margin-top: 2px; }
.viol li p { margin: 6px 0 0; font-size: 13px; color: #dcd7c6; line-height: 1.4; }
.notes p { font-size: 13px; color: #dcd7c6; margin: 6px 0; }
.notes { margin-bottom: 14px; }


body.landscape #bar { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 380px) { #hud .stat span { font-size: 9px; } #hud .stat b, #hud .time b { font-size: 14px; } #hud .time { min-width: 74px; } .act { font-size: 11px; } }

/* Order tickets: one row under the HUD, in line order */
#rail { position: fixed; z-index: 28; left: calc(var(--street-x) + 8px); width: calc(var(--street-w) - 58px); top: calc(env(safe-area-inset-top) + 62px);
  display: flex; gap: 5px; pointer-events: none; transition: opacity 0.2s; }
#rail.empty { opacity: 0; }
.ticket { flex: 1 1 0; min-width: 0; max-width: 132px; position: relative; display: flex; flex-direction: column; gap: 3px; background: #fffdf6; color: var(--ink);
  border-radius: 10px 10px 4px 4px; padding: 5px 5px 7px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); overflow: hidden; }
.ticket .num { position: absolute; top: 4px; right: 5px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font: 700 11px Fredoka, sans-serif; background: var(--c); color: #111; }
.ticket.front { box-shadow: 0 0 0 3px var(--mustard), 0 3px 12px rgba(0, 0, 0, 0.4); }
.ticket.angry { animation: shake 0.35s infinite; }
.ticket .ord { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; padding-right: 18px; min-height: 22px; }
.ticket .item { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.ticket .item.got { opacity: 0.35; }
.ticket .item.got::after { content: '✓'; font-weight: 800; color: #1b8a4b; }
.ticket b.dog::before { content: '🌭'; font-size: 16px; }
.ticket b.soda::before { content: '🥤'; font-size: 15px; }
.ticket .pbar { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: #e4e0d4; }
.ticket .pbar u { display: block; height: 100%; background: var(--c); transition: width 0.2s linear; }
.ticket.more { flex: 0 0 auto; background: var(--panel); color: var(--text); font: 700 15px Fredoka, sans-serif; align-items: center; justify-content: center; padding: 4px 8px; }
.ticket.more small { font: 600 9px Figtree, sans-serif; color: var(--muted); }
.badge { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 13px Fredoka, sans-serif; color: #111;
  background: radial-gradient(#fffdf6 58%, transparent 60%), conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, 0.35) 0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.badge.angry { animation: shake 0.35s infinite; }

/* The chase */
body.chasing #hud, body.chasing #chips, body.chasing #bar, body.chasing #rail, body.chasing #bubbles, body.chasing #toasts, body.chasing #banner, body.chasing #floaters, body.chasing #prompt { display: none !important; }
#chaseHud { position: fixed; z-index: 50; left: 8px; right: 8px; top: calc(env(safe-area-inset-top) + 8px); display: flex; gap: 6px; align-items: stretch; pointer-events: none; }
#chaseHud[hidden], #chaseCtl[hidden] { display: none; }
.cstat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 5px 10px; display: flex; flex-direction: column; line-height: 1.1; }
.cstat span, .gap > span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); font-weight: 700; }
.cstat b { font: 700 18px Fredoka, sans-serif; font-variant-numeric: tabular-nums; }
.cstat.cash b { color: #7ee08a; }
.gap { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 5px 10px; display: flex; flex-direction: column; gap: 4px; }
.gap i { position: relative; display: block; height: 18px; border-radius: 9px; background: linear-gradient(90deg, #7a1a14, #3a3f47 35%, #2b4a35); }
.gap u { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--f, 0.4) * 100%); border-radius: 9px; background: rgba(255, 255, 255, 0.08); }
.gap em { position: absolute; left: 0; top: -3px; font-style: normal; font-size: 18px; }
.gap strong { position: absolute; top: -3px; left: calc(var(--f, 0.4) * (100% - 22px)); font-size: 18px; transition: left 0.15s linear; }
.gap.close { border-color: var(--bad); animation: throb 0.5s infinite; }
#chaseZone { position: fixed; z-index: 50; left: 50%; top: 20%; transform: translate(-50%, -10px); opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; text-align: center;
  background: #111; color: #fff; border-radius: 6px; padding: 8px 16px 10px; font: 700 24px/1.1 Fredoka, sans-serif; border-top: 6px solid #2e7d32; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); white-space: nowrap; }
#chaseZone small { display: block; font: 700 10px Figtree, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: #9be7a7; margin-bottom: 3px; }
#chaseZone em { display: block; font: 600 12px Figtree, sans-serif; color: #c9c9c9; font-style: normal; margin-top: 3px; }
#chaseZone.show { opacity: 1; transform: translate(-50%, 0); }
#chaseFlash { position: fixed; z-index: 51; left: 50%; top: 36%; transform: translate(-50%, -50%) scale(0.6); opacity: 0; pointer-events: none; font: 700 30px Fredoka, sans-serif; color: var(--mustard); text-shadow: 0 3px 0 #000, 0 0 14px rgba(0, 0, 0, 0.6); transition: opacity 0.15s, transform 0.15s; white-space: nowrap; }
#chaseFlash.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#chaseFlash.big { font-size: 58px; }
#chaseFlash.bad { color: #ff6b5e; } #chaseFlash.warn { color: #dcc08a; } #chaseFlash.good { color: #7ee08a; }
#chaseSay { position: fixed; z-index: 51; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 112px); transform: translateX(-50%); max-width: min(90vw, 420px); opacity: 0; transition: opacity 0.2s; pointer-events: none;
  background: #fffdf6; color: var(--ink); border-radius: 14px; padding: 8px 14px; font-weight: 700; font-size: 15px; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
#chaseSay b { display: block; font: 800 10px Figtree, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #2f5d3a; }
#chaseSay.me b { color: #c2410c; } #chaseSay.ped b { color: #555; }
#chaseSay.show { opacity: 1; }
#chaseCtl { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 10px; pointer-events: none; }
#chaseCtl button { pointer-events: auto; height: 74px; border-radius: 18px; border: 2px solid rgba(255, 255, 255, 0.35); background: rgba(15, 18, 22, 0.45); color: #fff; font: 700 26px Fredoka, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(4px); touch-action: none; }
#chaseCtl button small { font: 600 11px Figtree, sans-serif; }
#chaseCtl button:active { background: rgba(200, 164, 106, 0.6); }
#chaseEnd .card { text-align: center; }
#chaseEnd h2 { font-size: 48px; margin: 4px 0 10px; }
#chaseEnd.caught .card { border-color: var(--ketchup); } #chaseEnd.caught h2 { color: var(--ketchup); }
#chaseEnd.escaped .card { border-color: var(--ok); } #chaseEnd.escaped h2 { color: var(--ok); }
#chaseEnd .lines p { margin: 0 0 12px; color: #dcd7c6; font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
#chaseEnd .lines b.amt { font: 700 28px Fredoka, sans-serif; color: var(--text); }

.chip.stock { gap: 7px; font-variant-numeric: tabular-nums; }
.chip.stock .low { color: #ff8a80; font-weight: 800; }
#prompt .opt small { display: block; font: 600 11px Figtree, sans-serif; opacity: 0.85; margin-top: 2px; }

/* ---------- Daily life ---------- */
body.life #hud, body.life #chips, body.life #bar, body.life #rail, body.life #bubbles, body.life #toasts, body.life #banner, body.life #floaters { display: none !important; }
.titlebtns { display: grid; gap: 10px; margin-top: 18px; }
.big small { display: block; font: 600 12px Figtree, sans-serif; opacity: 0.75; }
.big.alt { background: #161b19; color: var(--text); border: 1px solid rgba(243, 236, 224, 0.12); box-shadow: 0 4px 0 #050706; text-shadow: none; }
.howbox { margin: 12px 0 14px; background: #151a18; border-radius: 12px; padding: 8px 12px; }
.howbox summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.howbox .how { margin: 10px 0 4px; }
#fade { position: fixed; inset: 0; background: #000; z-index: 95; opacity: 0; pointer-events: none; transition: opacity 0.45s; }
#fade.on { opacity: 1; }

.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; justify-content: center; padding: 0 10px calc(10px + env(safe-area-inset-bottom)); pointer-events: none; }
.sheet.show { display: flex; animation: sheetUp 0.3s ease-out; }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } }
.sheet > div { pointer-events: auto; width: min(100%, 470px); max-height: 74vh; overflow-y: auto; touch-action: pan-y; background: #111614; border: 1px solid var(--line); border-radius: 22px; padding: 16px; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5); }
.sheet h2 { margin: 2px 0 10px; font: 700 26px Fredoka, sans-serif; }

#morning .phone { border: 3px solid #1a201e; border-radius: 28px; background: linear-gradient(180deg, #1c2430, #151a21); }
#morning .when { margin: 0; font: 700 13px Figtree, sans-serif; color: var(--muted); letter-spacing: 0.4px; }
#morning .wx { font: 600 18px Fredoka, sans-serif; margin: 4px 0 8px; }
#morning .wx b { font-size: 34px; color: var(--mustard); margin-right: 6px; }
#morning .news { margin: 0 0 10px; padding-left: 18px; font-size: 14px; line-height: 1.4; color: #dcd7c6; display: grid; gap: 4px; }
#morning .alerts p { margin: 0 0 8px; background: #3a1e1a; border-left: 4px solid var(--ketchup); padding: 8px 10px; border-radius: 8px; font-size: 13px; }
#morning .goal { background: #2b2a22; border: 2px solid var(--mustard); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; display: flex; flex-direction: column; }
#morning .goal small { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--mustard); }
#morning .goal b { font: 600 17px Fredoka, sans-serif; }
#morning .goal em { font-style: normal; color: var(--ok); font-weight: 700; font-size: 13px; }
.prog { margin-bottom: 14px; }
.prog .row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 5px; color: var(--muted); }
.prog .row b { color: var(--ok); font: 700 18px Fredoka, sans-serif; font-variant-numeric: tabular-nums; }
.prog .row small { color: var(--muted); font-size: 12px; }
.prog i { display: block; height: 12px; border-radius: 6px; background: #1a201e; overflow: hidden; }
.prog u { display: block; height: 100%; background: linear-gradient(90deg, #2e8b57, #3ddc84); border-radius: 6px; }

#commute { position: fixed; inset: 0; z-index: 96; display: none; place-items: center; background: #0d0f13; }
#commute.show { display: grid; }
#commute .train { text-align: center; width: min(86vw, 380px); }
#commute .bullet { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #b933ad; color: #fff; font: 700 38px Arial, sans-serif; }
#commute h3 { font: 700 22px Fredoka, sans-serif; margin: 14px 0 4px; }
#commute .line { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
#commute .track { display: block; height: 6px; background: #1a201e; border-radius: 3px; overflow: hidden; }
#commute .track u { display: block; height: 100%; width: 0; background: #b933ad; }
#commute.show .track u { animation: ride 2.5s ease-in-out forwards; }
@keyframes ride { to { width: 100%; } }
#commute .fare { margin: 14px 0 0; font-weight: 700; color: #ff8a80; }

#shop .twist p { margin: 0 0 10px; background: #3a2e14; border-left: 4px solid var(--warn); padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.srow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.sname { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sname b { font-size: 15px; }
.sname small { font-size: 12px; color: var(--muted); }
.sname small span { color: #9be7a7; }
.sname .note { color: #8f8a7c; }
.sname .short { font-style: normal; font-size: 11px; font-weight: 800; color: var(--warn); }
.step { display: flex; align-items: center; gap: 6px; }
.step button { width: 38px; height: 38px; border-radius: 12px; border: 0; background: #1a201e; font: 700 20px Fredoka, sans-serif; }
.step output { min-width: 30px; text-align: center; font: 700 18px Fredoka, sans-serif; font-variant-numeric: tabular-nums; }
.cartsum { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 10px 0; }
.cartsum b { color: var(--text); }
.sum { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sum > div { flex: 1; background: #151a18; border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; }
.sum span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; }
.sum b { font: 700 20px Fredoka, sans-serif; font-variant-numeric: tabular-nums; }
.sum b.neg { color: var(--bad); }
.big:disabled { opacity: 0.45; }

.citem { background: #151a18; border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; border-left: 4px solid var(--warn); }
.citem.done { border-left-color: var(--ok); }
.citem b { font-size: 15px; }
.citem p { margin: 4px 0 8px; font-size: 13px; color: #dcd7c6; line-height: 1.4; }
.citem .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.citem .opt { border: 0; border-radius: 12px; padding: 10px 6px; font: 700 14px Fredoka, sans-serif; color: #fff; opacity: 0.85; }
.citem .opt.good { background: #1f8a63; } .citem .opt.risky { background: #8a2b26; }
.citem .opt.picked { opacity: 1; box-shadow: 0 0 0 3px var(--mustard); }
.leftover { font-size: 13px; color: var(--muted); margin: 8px 0 12px; }
.leftover b { color: var(--text); }

#ledger .profitBig { font: 700 52px/1 Fredoka, sans-serif; margin: 2px 0 12px; font-variant-numeric: tabular-nums; }
#ledger .profitBig.up { color: var(--ok); } #ledger .profitBig.down { color: var(--bad); }
#ledger .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#ledger h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); }
.rows2 { display: grid; gap: 4px; }
.rows2 div { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; }
.rows2 span { color: #c9c4b4; min-width: 0; }
.rows2 b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rows2 b.pos { color: var(--ok); } .rows2 b.neg { color: #ff8a80; }
.goalline { font-size: 14px; margin: 12px 0; }
.goalline .won { color: var(--mustard); } .goalline .miss { color: var(--muted); }
#ledger .notes p { font-size: 13px; color: #dcd7c6; margin: 4px 0; }
#ledger .notes { margin-bottom: 12px; }
@media (max-width: 380px) { #ledger .cols { grid-template-columns: 1fr; } }

#lifeSay { position: fixed; z-index: 72; left: 50%; top: calc(env(safe-area-inset-top) + 16px); transform: translateX(-50%); max-width: min(92vw, 440px); background: #fffdf6; color: var(--ink); border-radius: 14px; padding: 8px 14px; font-weight: 600; font-size: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
#lifeSay b { display: block; font: 800 10px Figtree, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #3d5a80; }
#lifeSay.show { opacity: 1; }
#milestone { position: fixed; z-index: 97; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(0.5); opacity: 0; pointer-events: none; font: 700 34px Fredoka, sans-serif; color: var(--mustard); text-shadow: 0 3px 0 #000; transition: all 0.3s; text-align: center; white-space: nowrap; }
#milestone.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#confetti { position: fixed; inset: 0; z-index: 96; pointer-events: none; overflow: hidden; }
#confetti i { position: absolute; top: -10px; width: 8px; height: 14px; border-radius: 2px; animation: fall 2.4s ease-in forwards; }
@keyframes fall { to { top: 110%; margin-left: 40px; transform: rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { #confetti i, .sheet.show, #commute.show .track u { animation-duration: 0.01s; } }

.toast .x { color: var(--mustard); margin-left: 4px; }
#hud .stat.bump { animation: bump 0.5s ease-out; border-color: var(--bad); }
@keyframes bump { 30% { transform: scale(1.18); } }

.ticket .item:not(.got) b.soda { display: inline-block; }
.ticket .item.got + .item:not(.got) b.soda { animation: wantSoda 0.6s ease-in-out infinite; }
@keyframes wantSoda { 50% { transform: scale(1.35); } }

/* Health inspection scramble */
#scramble { position: fixed; z-index: 45; left: calc(var(--street-x) + 8px); width: min(calc(var(--street-w) - 16px), 380px); top: calc(env(safe-area-inset-top) + 150px);
  background: rgba(15, 18, 22, 0.9); border: 2px solid var(--warn); border-radius: 16px; padding: 8px 10px; display: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
#scramble.show { display: block; animation: pin 0.2s ease-out; }
#scramble .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
#scramble .head b { font: 700 16px Fredoka, sans-serif; color: var(--warn); text-transform: uppercase; letter-spacing: 0.6px; }
#scramble .timer { font: 700 30px Fredoka, sans-serif; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
#scramble .timer.low { color: var(--bad); animation: throb 0.5s infinite; }
#scramble ul, #inspectCard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#scramble li { display: flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.25; }
#scramble li span, #inspectCard li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; }
#scramble li.ok span, #inspectCard li.ok span { background: var(--ok); color: #0b2a17; }
#scramble li.bad span, #inspectCard li.bad span { background: var(--bad); color: #fff; }
#scramble li p { margin: 0; flex: 1; min-width: 0; }
#scramble li.ok p { opacity: 0.6; }
#scramble li em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--mustard); white-space: nowrap; }
#scramble .acts { display: flex; gap: 6px; margin-top: 8px; }
#scramble .acts button { flex: 1; border: 0; border-radius: 12px; padding: 10px; background: var(--mustard); color: var(--ink); font: 700 15px Fredoka, sans-serif; }
#scramble .acts button small { display: block; font: 600 10px Figtree, sans-serif; }
#scramble .acts button[hidden] { display: none; }
#inspectCard li { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 0; }
#inspectCard li b { margin-left: auto; color: #ff8a80; }
#inspectCard .said { font-style: italic; color: #dcd7c6; margin: 0; }
#inspectCard .after { font-size: 14px; color: #dcd7c6; margin: 12px 0 14px; }
#fixBox { position: fixed; z-index: 46; left: calc(var(--cart-x) + var(--cart-w) / 2); top: calc(var(--cart-y) + var(--cart-h) / 2); transform: translate(-50%, -50%); display: none; flex-direction: column; gap: 8px; align-items: stretch; width: min(80vw, 300px); }
#fixBox.show { display: flex; }
#fixBox button { border: 0; border-radius: 18px; padding: 18px; background: linear-gradient(180deg, #d4b47c, #a9824a); color: var(--ink); font: 700 24px Fredoka, sans-serif; box-shadow: 0 6px 0 #5e4522, 0 10px 30px rgba(0, 0, 0, 0.5); touch-action: manipulation; }
#fixBox button:active { transform: translateY(3px); box-shadow: 0 3px 0 #0a3a2a; }
#fixBox button small { display: block; font: 600 13px Figtree, sans-serif; }
#fixBox i { display: block; height: 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.5); overflow: hidden; }
#fixBox i u { display: block; height: 100%; width: 0; background: var(--ok); }
body.chasing #scramble, body.chasing #fixBox, body.life #scramble, body.life #fixBox { display: none !important; }

#rainFx { position: fixed; left: var(--street-x); top: var(--street-y); width: var(--street-w); height: var(--street-h); z-index: 18; pointer-events: none; opacity: 0; transition: opacity 1s;
  background: repeating-linear-gradient(100deg, rgba(210, 225, 255, 0.0) 0 9px, rgba(210, 225, 255, 0.35) 9px 10px, rgba(210, 225, 255, 0) 10px 23px), rgba(40, 55, 75, 0.35);
  background-size: 140px 140px, auto; animation: rainfall 0.35s linear infinite; }
#rainFx.on { opacity: 1; }
@keyframes rainfall { to { background-position: -24px 140px, 0 0; } }
body.chasing #rainFx, body.life #rainFx { display: none; }
@media (prefers-reduced-motion: reduce) { #rainFx { animation: none; } }

.ticket .rname { flex-basis: 100%; font: 700 11px Fredoka, sans-serif; color: #7a3d00; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket .rname i { font-style: normal; color: #e63946; letter-spacing: -1px; }
.badge.reg { box-shadow: 0 0 0 3px var(--mustard), 0 2px 6px rgba(0, 0, 0, 0.4); }

#nightText { position: fixed; z-index: 75; left: 50%; top: calc(env(safe-area-inset-top) + 12px); transform: translate(-50%, -140%); width: min(92vw, 420px); transition: transform 0.4s cubic-bezier(0.2, 1.2, 0.4, 1);
  background: rgba(245, 245, 247, 0.97); color: #111; border-radius: 18px; padding: 10px 14px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); pointer-events: none; }
#nightText.show { transform: translate(-50%, 0); visibility: visible; }
#nightText:not(.show) { visibility: hidden; transition: transform 0.4s, visibility 0s 0.4s; }
#nightText small { display: block; font: 800 11px Figtree, sans-serif; color: #555; text-transform: uppercase; letter-spacing: 0.6px; }
#nightText small::before { content: '💬 '; }
#nightText p { margin: 3px 0 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
#ledger .notes .hearts { color: #e63946; letter-spacing: 1px; }

/* Wardrobe and clothing store */
.dressBtn { width: 100%; display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--line); background: #131816; color: var(--text); font: 600 14px Figtree, sans-serif; text-align: left; }
.dressBtn .sw { width: 22px; height: 22px; border-radius: 6px; border: 2px solid rgba(255,255,255,.25); flex: none; }
.dressBtn .lbl { flex: 1; color: var(--muted); } .dressBtn .lbl b { color: var(--text); }
.dressBtn em { font-style: normal; color: var(--mustard); font-weight: 800; }
#dress > div { padding: 14px 14px 12px; }
#dress .pick { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 8px; margin-top: 4px; }
#dress .pick button { height: 52px; border-radius: 14px; border: 0; background: #161b19; color: var(--text); font: 700 34px/1 Fredoka, sans-serif; }
#dress .pick button:active { transform: scale(0.95); }
#dress .nm { text-align: center; min-width: 0; }
#dress .nm h2 { margin: 0; font-size: 24px; }
#dress .nm .note { margin: 2px 0 0; font-size: 13px; color: var(--muted); min-height: 2.6em; }
#dress .dots { display: flex; justify-content: center; gap: 5px; margin: 8px 0 6px; flex-wrap: wrap; }
#dress .dots i { width: 9px; height: 9px; border-radius: 50%; background: #39404a; }
#dress .dots i.own { box-shadow: inset 0 0 0 2px #8a93a0; }
#dress .dots i.on { background: var(--mustard); }
#dress .price { margin: 0 0 10px; text-align: center; font: 600 15px Figtree, sans-serif; color: var(--muted); }
#dress .price b { color: var(--text); font: 700 20px Fredoka, sans-serif; }
#dress .price .ok { color: var(--ok); } #dress .price .no { color: var(--bad); }
#dress .back { margin-top: 8px; padding: 11px; font-size: 16px; }
#dress.busy .act { opacity: 0.6; }
#ledger #storeBtn { margin-bottom: 10px; }

/* The end of the day: pack up before the commissary closes */
#packBtn { position: fixed; z-index: 55; left: 50%; transform: translateX(-50%); top: calc(var(--street-y) + 108px); border: 0; border-radius: 16px; padding: 10px 18px; font: 700 17px Fredoka, sans-serif; background: linear-gradient(180deg, #3ddc84, #23a35f); color: #0d1f14; box-shadow: 0 4px 0 #136b3c, 0 8px 24px rgba(0,0,0,.4); animation: packPulse 1.4s ease-in-out infinite; white-space: nowrap; }
#packBtn small { display: block; font: 600 12px Figtree, sans-serif; opacity: .85; }
#packBtn.late { background: linear-gradient(180deg, #ff6b5e, #e63946); color: #fff; box-shadow: 0 4px 0 #8f1d26, 0 8px 24px rgba(0,0,0,.4); }
#packBtn[hidden] { display: none; }
@keyframes packPulse { 50% { transform: translateX(-50%) scale(1.04); } }
#clock.late { color: var(--bad); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .45; } }
#pauseCard #closeEarlyBtn { margin-top: 10px; }
/* switches inside a prompt (sign, cover) */
#prompt .togs { display: grid; gap: 6px; margin: 0 0 10px; }
#prompt .tog { display: flex; align-items: center; gap: 10px; text-align: left; border: 2px solid #ddd6c3; background: #fff; border-radius: 12px; padding: 9px 10px; font: 600 14px Figtree, sans-serif; color: var(--ink); }
#prompt .tog small { display: block; font-size: 11px; color: #777; font-weight: 600; }
#prompt .tog i { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid #b9b19c; background: #fff; }
#prompt .tog.on { border-color: #1f8a63; background: #e8f6f3; }
#prompt .tog.on i { background: #1f8a63; border-color: #1f8a63; box-shadow: inset 0 0 0 3px #fff; }
#prompt .opts:has(> :only-child) { grid-template-columns: 1fr; }

/* Bodega run: the button by the stock chip and the shopping list */
#chips .shop { pointer-events: auto; border: 1.5px solid var(--line); color: var(--text); font: 700 12px Figtree, sans-serif; cursor: pointer; }
#chips .shop .n:not(:empty) { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 3px; border-radius: 9px; background: var(--ketchup); color: #fff; font-size: 11px; padding: 0 4px; }
#chips .shop.want { border-color: var(--mustard); }
#chips .shop.slow { animation: shopPulse 1.2s ease-in-out infinite; }
@keyframes shopPulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(200, 164, 106, .35); } }
.chip.stock.flash { animation: stockFlash 1.2s ease-out; }
@keyframes stockFlash { 0% { background: #1f8a63; transform: scale(1.1); } 100% { background: var(--panel); transform: none; } }
#bodega { position: fixed; z-index: 62; display: none; left: calc(var(--cart-x) + var(--cart-w) / 2); bottom: calc(var(--bar-h) + 8px); transform: translateX(-50%); width: min(94vw, 390px); max-height: calc(100vh - var(--bar-h) - 24px); overflow-y: auto; background: #fffdf6; color: var(--ink); border-radius: 18px; padding: 12px 12px 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
#bodega.show { display: block; }
#bodega h3 { margin: 0; font: 700 19px Fredoka, sans-serif; }
#bodega .sub { margin: 2px 0 8px; font-size: 12px; color: #666; }
#bodega .brow { display: grid; grid-template-columns: 1fr 34px 26px 34px; align-items: center; gap: 4px; padding: 5px 6px; border-radius: 10px; }
#bodega .brow.on { background: #eef7f5; }
#bodega .brow.need .bn b::after { content: ' · on your list'; color: var(--ketchup); font: 700 11px Figtree, sans-serif; }
#bodega .bn b { font: 700 15px Fredoka, sans-serif; display: block; }
#bodega .bn small { font-size: 11px; color: #666; }
#bodega .brow button { height: 34px; border-radius: 10px; border: 0; background: #e9e5d8; font: 700 20px/1 Fredoka, sans-serif; color: var(--ink); }
#bodega .brow .q { text-align: center; font: 700 17px Fredoka, sans-serif; }
#bodega .togs { display: grid; gap: 6px; margin: 8px 0 6px; }
#bodega .tog { display: flex; align-items: center; gap: 10px; text-align: left; border: 2px solid #ddd6c3; background: #fff; border-radius: 12px; padding: 7px 10px; font: 600 13px Figtree, sans-serif; color: var(--ink); }
#bodega .tog small { display: block; font-size: 11px; color: #777; }
#bodega .tog i { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 2px solid #b9b19c; }
#bodega .tog.on { border-color: #1f8a63; background: #e8f6f3; }
#bodega .tog.on i { background: #1f8a63; border-color: #1f8a63; box-shadow: inset 0 0 0 3px #fff; }
#bodega .btot { margin: 4px 0 8px; font-size: 13px; text-align: center; color: #444; }
#bodega .btot b { font: 700 17px Fredoka, sans-serif; color: var(--ink); }
#bodega .acts { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
#bodega .acts button { border: 0; border-radius: 12px; padding: 12px; font: 700 16px Fredoka, sans-serif; background: #e9e5d8; color: var(--ink); }
#bodega .acts .go { background: #1f8a63; color: #fff; }
#bodega .acts .go:disabled { opacity: .45; }
body.chasing #bodega, body.life #bodega { display: none !important; }
/* how many of a thing an order still needs */
.ticket em.x { font-style: normal; font-weight: 800; font-size: 12px; color: var(--ketchup); margin-right: 1px; }
#ledger .notes .badnews { display: block; background: #3a1e1a; border-left: 4px solid var(--ketchup); padding: 8px 10px; border-radius: 8px; color: #fff; }
#ledger .paidline { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
#ledger .paidline:empty { display: none; }

/* ===================== SIDEWALK: the opening ===================== */
#intro { position: fixed; inset: 0; z-index: 84; display: grid; place-items: center; pointer-events: none; overflow: hidden; background: #000; transition: background 1.8s ease; }
#intro.lit { background: transparent; }
#intro.gone { opacity: 0; transition: opacity 0.9s ease; }
#intro.off { display: none; }
#intro .grade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 18, 15, 0.6) 0%, rgba(14, 76, 55, 0.22) 48%, rgba(200, 164, 106, 0.22) 100%); mix-blend-mode: overlay; }
#intro .grade::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0, 0, 0, 0.78) 100%); }
#intro .grain { position: absolute; inset: -50%; opacity: 0.09; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain 0.6s steps(3) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } }
#intro .bar { position: absolute; left: 0; right: 0; height: 9vh; background: #000; transition: height 1.2s cubic-bezier(.7, 0, .2, 1); }
#intro .bar.top { top: 0; } #intro .bar.bot { bottom: 0; }
#intro.menu .bar { height: 5vh; }
#intro .logo { position: relative; text-align: center; transition: transform 1s cubic-bezier(.6, 0, .2, 1); }
#intro.menu .logo { transform: translateY(-24vh) scale(0.62); }
.hustle { margin: 0; font: 400 clamp(56px, 16.5vw, 170px)/0.86 Anton, Impact, 'Arial Narrow', sans-serif; letter-spacing: 0.02em; color: transparent; display: flex; justify-content: center; }
.hustle span { display: inline-block; background: linear-gradient(180deg, #fffaf0 0%, #f1e6d0 42%, #c8a46a 72%, #7a5a2e 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 22px rgba(52, 176, 131, 0.38)) drop-shadow(0 6px 0 rgba(0, 0, 0, 0.6)); opacity: 0; transform: translateY(40%) scale(1.5); }
#intro.play .hustle span { animation: slam 0.55s cubic-bezier(.2, 1.4, .4, 1) forwards; }
#intro.play .hustle span:nth-child(2) { animation-delay: 0.08s; } #intro.play .hustle span:nth-child(3) { animation-delay: 0.16s; }
#intro.play .hustle span:nth-child(4) { animation-delay: 0.24s; } #intro.play .hustle span:nth-child(5) { animation-delay: 0.32s; }
#intro.play .hustle span:nth-child(6) { animation-delay: 0.40s; } #intro.play .hustle span:nth-child(7) { animation-delay: 0.48s; } #intro.play .hustle span:nth-child(8) { animation-delay: 0.56s; }
@keyframes slam { 0% { opacity: 0; transform: translateY(-30%) scale(1.8); filter: blur(8px); } 70% { opacity: 1; transform: translateY(0) scale(0.96); filter: blur(0); } 100% { opacity: 1; transform: none; } }
#intro .tag { margin: 14px 0 0; font: 700 clamp(12px, 3.4vw, 16px) Figtree, sans-serif; letter-spacing: 0.42em; text-transform: uppercase; color: #efe6d6; opacity: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }
#intro.play .tag { animation: fadeUp 0.9s 1.05s ease forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); letter-spacing: 0.7em; } to { opacity: 1; transform: none; } }
#intro .tap { position: absolute; bottom: 16vh; pointer-events: auto; border: 0; background: none; color: #fff; font: 700 15px Figtree, sans-serif; letter-spacing: 0.5em; text-transform: uppercase; padding: 18px 30px; animation: tapPulse 1.6s ease-in-out infinite; text-shadow: 0 0 12px rgba(52, 176, 131, 0.8); }
#intro .tap::before { content: ''; position: absolute; inset: -40vh -40vw; }
@keyframes tapPulse { 50% { opacity: 0.35; } }
#intro .iload { position: absolute; bottom: 12vh; display: grid; gap: 8px; justify-items: center; color: rgba(243, 236, 224, 0.7); font: 600 11px Figtree, sans-serif; letter-spacing: 0.3em; text-transform: uppercase; transition: opacity 0.5s; }
#intro .iload i { width: 160px; height: 2px; background: rgba(255, 255, 255, 0.15); display: block; overflow: hidden; }
#intro .iload u { display: block; height: 100%; width: 0; background: #d4b47c; transition: width 0.3s; box-shadow: 0 0 8px #d4b47c; }
#intro.ready .iload, #intro.menu .iload { opacity: 0; }
#intro.flash::after { content: ''; position: absolute; inset: 0; background: #fff; animation: flash 0.6s ease-out forwards; }
@keyframes flash { from { opacity: 0.85; } to { opacity: 0; } }
#title { background: transparent; backdrop-filter: none; z-index: 86; align-items: end; padding-bottom: calc(9vh + env(safe-area-inset-bottom)); }
#title .menu { width: min(92vw, 380px); text-align: center; animation: fadeUp 0.7s ease both; }
#title .kicker { color: #dcc08a; letter-spacing: 0.34em; }
#title .where { color: #efe6d6; font-size: 14px; line-height: 1.45; margin: 8px 0 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); }
#title .big { backdrop-filter: blur(6px); }
#title .big.alt { background: rgba(11, 14, 13, 0.72); border: 1px solid rgba(200, 164, 106, 0.35); box-shadow: none; }

/* ===================== Create your hustler ===================== */
#creator { position: fixed; inset: 0; z-index: 88; display: none; pointer-events: none; color: #fff; }
#creator.show { display: block; }
#creator .chead { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; pointer-events: auto; text-align: center; }
#creator .chead small { display: block; font: 700 10px Figtree, sans-serif; letter-spacing: 0.32em; text-transform: uppercase; color: #dcc08a; }
#creator .chead b { font: 400 24px/1.1 Anton, Impact, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7); }
#creator .chead button { width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(9, 13, 12, 0.55); color: #fff; font-size: 20px; backdrop-filter: blur(8px); }
#creator .chint { position: absolute; top: 76px; width: 100%; text-align: center; margin: 0; font: 600 11px Figtree, sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
#creator .cflash { position: absolute; left: 50%; top: 104px; transform: translateX(-50%); width: min(88vw, 360px); padding: 10px 14px; border-radius: 14px; background: rgba(9, 13, 12, 0.85); font: 600 13px Figtree, sans-serif; text-align: center; opacity: 0; transition: opacity 0.25s; }
#creator .cflash.show { opacity: 1; }
#creator .cpanel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 50vh; display: flex; flex-direction: column; pointer-events: auto; background: linear-gradient(180deg, rgba(9, 14, 12, 0.82), rgba(12, 9, 18, 0.96)); border-top: 1px solid rgba(200, 164, 106, 0.25); border-radius: 26px 26px 0 0; backdrop-filter: blur(14px); padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.5); }
body.landscape #creator .cpanel { left: auto; top: 0; width: min(420px, 44vw); max-height: none; border-radius: 26px 0 0 26px; border-top: 0; border-left: 1px solid rgba(200, 164, 106, 0.25); }
#creator .ctabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; flex: none; }
#creator .ctabs button { flex: 1; min-width: 58px; border: 0; background: none; color: rgba(255, 255, 255, 0.55); font: 700 13px Figtree, sans-serif; padding: 9px 4px; border-radius: 12px; letter-spacing: 0.04em; }
#creator .ctabs button.on { color: #0b0d0c; background: linear-gradient(180deg, #dcc08a, #a9824a); }
#creator .cbody { overflow-y: auto; flex: 1; min-height: 0; padding: 2px 2px 10px; }
#creator h4 { margin: 10px 0 7px; font: 700 11px Figtree, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
#creator h4 small { letter-spacing: 0; text-transform: none; font-weight: 600; color: rgba(255, 255, 255, 0.4); margin-left: 6px; }
#creator .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: rgba(255, 255, 255, 0.06); border-radius: 14px; padding: 4px; }
#creator .seg button { border: 0; border-radius: 11px; padding: 11px; font: 700 15px Fredoka, sans-serif; background: none; color: rgba(255, 255, 255, 0.7); }
#creator .seg button.on { background: #fff; color: #140f1c; }
#creator .chips { display: flex; flex-wrap: wrap; gap: 6px; }
#creator .chip { border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: #fff; border-radius: 999px; padding: 8px 13px; font: 600 13px Figtree, sans-serif; }
#creator .chip.on { border-color: #dcc08a; background: rgba(200, 164, 106, 0.16); color: #efe3c8; }
#creator .sw { display: flex; flex-wrap: wrap; gap: 9px; }
#creator .sw .s { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.2); background: var(--c); box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.25); }
#creator .sw .s.on { border-color: #fff; box-shadow: 0 0 0 3px #d4b47c, inset 0 -4px 8px rgba(0, 0, 0, 0.25); }
#creator .outfits { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 7px; }
#creator .of { position: relative; text-align: left; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: #fff; border-radius: 14px; padding: 9px; font: 600 12px Figtree, sans-serif; display: grid; gap: 6px; }
#creator .of i { height: 26px; border-radius: 8px; background: var(--c); box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.25); }
#creator .of em { font-style: normal; font-size: 11px; color: #dcc08a; }
#creator .of.locked { opacity: 0.62; }
#creator .of.on { border-color: #dcc08a; background: rgba(200, 164, 106, 0.14); opacity: 1; }
#creator .namebox { display: grid; grid-template-columns: 1fr 48px; gap: 8px; }
#creator .namebox input { border: 1px solid rgba(200, 164, 106, 0.4); background: rgba(0, 0, 0, 0.35); color: #fff; border-radius: 14px; padding: 13px 14px; font: 700 20px Fredoka, sans-serif; outline: none; min-width: 0; }
#creator .namebox input:focus { border-color: #d4b47c; box-shadow: 0 0 0 3px rgba(200, 164, 106, 0.25); }
#creator .namebox .dice { border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); border-radius: 14px; font-size: 20px; }
#creator .sign { margin: 12px 0 2px; text-align: center; }
#creator .sign span { display: inline-block; padding: 10px 18px; border-radius: 10px; background: #e76f51; color: #fff; font: 700 22px Arial, sans-serif; letter-spacing: 0.02em; box-shadow: 0 6px 0 #264653; }
#creator .sign small { display: block; margin-top: 10px; color: rgba(255, 255, 255, 0.5); font-size: 12px; }
#creator .cgo { flex: none; margin-top: 8px; font-size: 18px; }
#creator .cgo span { display: inline-block; transition: transform 0.2s; }
#creator .cgo:active span { transform: translateX(4px); }
#creator .cgo.need { background: #2a2433; color: #efe3c8; box-shadow: 0 4px 0 #0c0a10; }
#creator.busy .cbody { opacity: 0.7; }
body.creating #loading { background: rgba(10, 8, 14, 0.7); }
body.inmenu #hud, body.inmenu #chips, body.inmenu #bar, body.inmenu #rail, body.inmenu #bubbles, body.inmenu #toasts, body.inmenu #banner, body.inmenu #floaters, body.inmenu #packBtn { display: none !important; }
#shop .fromy { margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background: #1f2a24; border: 1px solid #2f4a3a; }
#shop .fromy small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ok); margin-bottom: 6px; }
#shop .fromy div { display: flex; flex-wrap: wrap; gap: 6px; }
#shop .fromy .lot { font-size: 13px; background: rgba(255,255,255,.06); border-radius: 999px; padding: 4px 10px; }
#shop .fromy .lot em { font-style: normal; font-weight: 800; }
#shop .fromy .lot em.warn { color: var(--warn); } #shop .fromy .lot em.hot { color: var(--ketchup); }
#shop .fromy .lot.gone { background: #3a1e1a; color: #ffb4a8; text-decoration: none; }

/* ===================== The phone ===================== */
#phone { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; background: rgba(4, 4, 8, 0.6); backdrop-filter: blur(6px); padding: 14px; gap: 10px; grid-template-rows: 1fr auto; }
#phone.show { display: grid; animation: phoneUp 0.35s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes phoneUp { from { transform: translateY(40px); opacity: 0; } }
#phone .pframe { position: relative; width: min(92vw, 380px); height: min(78vh, 760px); border-radius: 46px; padding: 12px; background: linear-gradient(145deg, #2c2c32, #0d0d10); box-shadow: 0 0 0 2px #3c3c44, 0 30px 80px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
#phone .pnotch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 110px; height: 30px; border-radius: 20px; background: #000; z-index: 3; }
#phone .phomebar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 120px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.7); z-index: 3; }
#phone .pscreen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; color: #fff; display: flex; flex-direction: column; background: radial-gradient(ellipse at 30% 0%, #4b2a6b 0%, #1a1630 45%, #0b0d18 100%); font-family: Figtree, sans-serif; }
#phone .pstat { display: flex; justify-content: space-between; padding: 16px 26px 6px; font-size: 13px; flex: none; }
#phone .pstat span { font-size: 11px; opacity: 0.8; }
#phone .papp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#phone .pdown { border: 0; background: none; color: rgba(255, 255, 255, 0.75); font: 700 14px Figtree, sans-serif; letter-spacing: 0.04em; padding: 10px 20px; }
#phone .phome { padding: 18px 18px 40px; display: flex; flex-direction: column; gap: 14px; height: 100%; }
#phone .pclock { text-align: center; margin-top: 8px; }
#phone .pclock b { display: block; font: 300 64px/1 Figtree, sans-serif; letter-spacing: -0.02em; }
#phone .pclock small { font-size: 14px; opacity: 0.8; }
#phone .pvibe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#phone .pvibe span { background: rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 8px 10px; font-size: 12px; font-weight: 700; }
#phone .pvibe i { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.15); margin-top: 6px; overflow: hidden; }
#phone .pvibe u { display: block; height: 100%; background: linear-gradient(90deg, #dcc08a, #3ddc84); }
#phone .pnote { background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(10px); border-radius: 18px; padding: 10px 14px; font-size: 13px; cursor: pointer; }
#phone .pnote b { display: block; font-size: 12px; margin-bottom: 2px; }
#phone .papps { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: rgba(255, 255, 255, 0.1); border-radius: 26px; padding: 12px 8px; }
#phone .papp { border: 0; background: none; color: #fff; display: grid; justify-items: center; gap: 5px; font: 600 11px Figtree, sans-serif; }
#phone .papp i { position: relative; width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; font-size: 28px; font-style: normal; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.15); }
#phone .papp em { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; border-radius: 10px; background: #ff3b30; font: 700 12px/20px Figtree, sans-serif; font-style: normal; padding: 0 5px; }
#phone .pbar { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 6px 10px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex: none; text-align: center; }
#phone .pbar button { border: 0; background: none; color: #1f8a63; font: 400 34px/1 Figtree, sans-serif; }
#phone .pbar b { display: block; font-size: 16px; }
#phone .pbar small { font-size: 11px; opacity: 0.6; }
#phone .app-messages, #phone .app-bank, #phone .app-reviews, #phone .app-tonight { background: #0f1015; }
#phone .plist, #phone .pthread, #phone .pbank, #phone .prev, #phone .pplaces, #phone .pgo { overflow-y: auto; flex: 1; padding: 6px 12px 56px; }
#phone .phomebar { pointer-events: none; }
#phone .prow { width: 100%; display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; text-align: left; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: none; color: #fff; padding: 10px 2px; }
#phone .prow i, #phone .pwith i { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 700 18px Figtree, sans-serif; font-style: normal; }
#phone .prow b { display: block; font-size: 14px; } #phone .prow span { font-size: 13px; opacity: 0.6; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
#phone .prow.un b::after { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1f8a63; margin-left: 6px; vertical-align: middle; }
#phone .hearts { color: #ff4d6d; font-size: 11px; letter-spacing: 1px; }
#phone .pthread { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; }
#phone .pmsg { max-width: 80%; padding: 9px 13px; border-radius: 19px; font-size: 14px; line-height: 1.35; }
#phone .pmsg.in { align-self: flex-start; background: #26262b; border-bottom-left-radius: 6px; }
#phone .pmsg.out { align-self: flex-end; background: #1f8a63; border-bottom-right-radius: 6px; }
#phone .pmsg .cash { display: block; color: #3ddc84; margin-top: 4px; }
#phone .preplies { display: grid; gap: 6px; align-self: flex-end; width: 82%; margin-top: 2px; }
#phone .preplies button { border: 1px solid #1f8a63; background: rgba(10, 132, 255, 0.12); color: #fff; border-radius: 18px; padding: 9px 12px; font: 600 14px Figtree, sans-serif; text-align: right; }
#phone .pempty { opacity: 0.5; text-align: center; margin-top: 30px; font-size: 14px; }
#phone .bcard { margin: 10px 0 16px; padding: 16px; border-radius: 20px; background: linear-gradient(135deg, #1f8a63, #5e5ce6); }
#phone .bcard small { font-size: 12px; opacity: 0.85; } #phone .bcard b { display: block; font: 700 34px Fredoka, sans-serif; }
#phone .bcard span { font-size: 12px; opacity: 0.9; } #phone .bcard i { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); margin-top: 10px; overflow: hidden; } #phone .bcard u { display: block; height: 100%; background: #fff; }
#phone h5 { margin: 12px 0 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; }
#phone .bchart { display: flex; justify-content: center; gap: 6px; align-items: flex-end; height: 130px; padding: 0 2px 30px; }
#phone .bchart div { flex: 1; max-width: 46px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
#phone .bchart u { display: block; width: 100%; border-radius: 6px 6px 2px 2px; background: #3ddc84; }
#phone .bchart .neg u { background: #ff453a; }
#phone .bchart small { position: absolute; bottom: -18px; font-size: 9px; opacity: 0.7; } #phone .bchart em { position: absolute; bottom: -30px; font-size: 9px; font-style: normal; opacity: 0.5; }
#phone .bbills div { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 14px; }
#phone .bbills em { font-style: normal; opacity: 0.55; font-size: 12px; }
#phone .rhead { text-align: center; padding: 14px 0 12px; } #phone .rhead b { font: 700 52px/1 Fredoka, sans-serif; display: block; }
#phone .stars { color: #d4b47c; letter-spacing: 1px; } #phone .rhead small { display: block; opacity: 0.6; font-size: 12px; margin-top: 4px; }
#phone .rcard { background: #1b1c22; border-radius: 16px; padding: 10px 12px; margin-bottom: 8px; }
#phone .rcard div { display: flex; gap: 8px; align-items: center; font-size: 13px; } #phone .rcard em { margin-left: auto; font-style: normal; opacity: 0.45; font-size: 11px; }
#phone .rcard p { margin: 5px 0 0; font-size: 13px; opacity: 0.85; }
#phone .pplaces { display: grid; gap: 9px; align-content: start; padding-top: 10px; }
#phone .place { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; text-align: left; border: 0; border-radius: 18px; padding: 12px; color: #fff; background: linear-gradient(120deg, var(--a), var(--b)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
#phone .place i { font-size: 30px; font-style: normal; text-align: center; }
#phone .place b { display: block; font: 700 16px Fredoka, sans-serif; } #phone .place small { display: block; font-size: 11px; opacity: 0.8; } #phone .place span { display: block; font-size: 12px; margin-top: 2px; font-weight: 700; }
#phone .place em { position: absolute; top: 8px; right: 10px; font-style: normal; font-size: 10px; font-weight: 800; background: #fff; color: #111; padding: 3px 7px; border-radius: 999px; }
#phone .gcard { margin: 10px 0 6px; padding: 22px 16px; border-radius: 22px; text-align: center; background: linear-gradient(140deg, var(--a), var(--b)); }
#phone .gcard i { display: block; font-size: 46px; font-style: normal; } #phone .gcard b { display: block; font: 700 22px Fredoka, sans-serif; } #phone .gcard span { font-size: 13px; opacity: 0.9; }
#phone .pwith { display: grid; gap: 6px; }
#phone .pwith button { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; text-align: left; border: 1px solid rgba(255, 255, 255, 0.12); background: #1b1c22; color: #fff; border-radius: 16px; padding: 8px 10px; font: 700 14px Figtree, sans-serif; }
#phone .pwith button:first-child { grid-template-columns: 1fr; padding: 12px; }
#phone .pwith button small { font-weight: 600; font-size: 11px; color: #ff4d6d; } #phone .pwith button.busy { opacity: 0.4; } #phone .pwith button.busy small { color: #999; }
#phone .pwith button.on { border-color: #dcc08a; background: rgba(200, 164, 106, 0.12); }
#phone .pgo-btn { width: 100%; margin-top: 14px; border: 0; border-radius: 16px; padding: 15px; font: 700 17px Fredoka, sans-serif; background: linear-gradient(180deg, #dcc08a, #a9824a); color: #0b0d0c; }
#night .vibe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 8px; }
#night .vibe span { background: #131816; border-radius: 12px; padding: 9px 11px; font: 700 13px Figtree, sans-serif; }
#night .vibe i { display: block; height: 5px; border-radius: 3px; background: #333a44; margin-top: 6px; overflow: hidden; } #night .vibe u { display: block; height: 100%; background: linear-gradient(90deg, #dcc08a, #3ddc84); }
#night .said { color: var(--muted); font-size: 14px; margin: 4px 0 12px; }
#night .big + .big { margin-top: 8px; }
.ledgerbtns { display: grid; gap: 8px; }
/* ===================== Nights out (3D) ===================== */
#outing { position: fixed; inset: 0; z-index: 75; display: none; pointer-events: none; }
#outing.show { display: block; }
#outing .obar { position: absolute; left: 0; right: 0; height: 7vh; background: #000; }
#outing .obar.top { top: 0; } #outing .obar.bot { bottom: 0; }
#outing .otitle { position: absolute; left: 0; right: 0; top: 14vh; text-align: center; opacity: 0; transition: opacity 0.8s; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8); }
#outing .otitle.on { opacity: 1; }
#outing .otitle small { display: block; font: 700 11px Figtree, sans-serif; letter-spacing: 0.4em; text-transform: uppercase; color: #dcc08a; }
#outing .otitle b { font: 400 clamp(40px, 12vw, 84px)/1 Anton, Impact, sans-serif; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; }
#outing .osub { position: absolute; left: 50%; bottom: calc(7vh + 18px); transform: translateX(-50%); width: min(92vw, 520px); text-align: center; opacity: 0; transition: opacity 0.3s; }
#outing .osub.on { opacity: 1; }
#outing .osub b { display: block; font: 800 11px Figtree, sans-serif; letter-spacing: 0.24em; text-transform: uppercase; color: #dcc08a; margin-bottom: 4px; text-shadow: 0 2px 8px #000; }
#outing .osub span { font: 600 17px/1.35 Figtree, sans-serif; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 0 2px #000; }
#outing .ochoice { position: absolute; left: 50%; bottom: calc(7vh + 14px); transform: translateX(-50%); width: min(92vw, 420px); display: none; gap: 8px; pointer-events: auto; }
#outing .ochoice.on { display: grid; animation: fadeIn 0.4s ease both; }
@keyframes fadeIn { from { opacity: 0; } }
#outing .ochoice p { margin: 0 0 4px; text-align: center; font: 700 15px Figtree, sans-serif; color: #fff; text-shadow: 0 2px 10px #000; }
#outing .ochoice button { border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(14, 12, 20, 0.78); backdrop-filter: blur(10px); color: #fff; border-radius: 16px; padding: 13px 14px; font: 700 15px Figtree, sans-serif; text-align: left; }
#outing .ochoice button small { display: block; font-weight: 600; font-size: 12px; color: #dcc08a; margin-top: 2px; }
#outing .ochoice button.gold { background: linear-gradient(180deg, #dcc08a, #a9824a); color: #0b0d0c; border: 0; text-align: center; }
#outing .ochoice button.gold small { color: #5a3b00; }
#outing .obarber { position: absolute; left: 0; right: 0; bottom: 0; display: none; pointer-events: auto; background: linear-gradient(180deg, rgba(14, 10, 20, 0.85), rgba(10, 8, 14, 0.97)); border-top: 1px solid rgba(200, 164, 106, 0.25); border-radius: 24px 24px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); max-height: 48vh; overflow-y: auto; color: #fff; }
#outing .obarber.on { display: block; }
#outing .obarber h4 { margin: 8px 0 7px; font: 700 11px Figtree, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
#outing .obarber .chips { display: flex; flex-wrap: wrap; gap: 6px; }
#outing .obarber .chip { border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: #fff; border-radius: 999px; padding: 8px 12px; font: 600 13px Figtree, sans-serif; }
#outing .obarber .chip.on { border-color: #dcc08a; background: rgba(200, 164, 106, 0.16); color: #efe3c8; }
#outing .obarber .sw { display: flex; flex-wrap: wrap; gap: 8px; }
#outing .obarber .s { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.2); background: var(--c); }
#outing .obarber .s.on { border-color: #fff; box-shadow: 0 0 0 3px #d4b47c; }
#outing .obarber .total { margin: 12px 0 8px; text-align: center; font: 600 14px Figtree, sans-serif; color: rgba(255, 255, 255, 0.7); }
#outing .obarber .total b { color: #fff; font: 700 20px Fredoka, sans-serif; }
#outing .obarber .acts { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
#outing .obarber .acts button { border: 0; border-radius: 14px; padding: 13px; font: 700 15px Fredoka, sans-serif; background: #2a2433; color: #fff; }
#outing .obarber .acts .pay { background: linear-gradient(180deg, #dcc08a, #a9824a); color: #0b0d0c; }
#morning .mvibe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; }
#morning .mvibe span { background: #131816; border-radius: 12px; padding: 8px 10px; font: 700 12px Figtree, sans-serif; }
#morning .mvibe span.low { background: #3a1e1a; }
#morning .mvibe i { display: block; height: 5px; border-radius: 3px; background: #333a44; margin-top: 6px; overflow: hidden; } #morning .mvibe u { display: block; height: 100%; background: linear-gradient(90deg, #dcc08a, #3ddc84); }
#morning .mvibe em { display: block; font-style: normal; font-weight: 600; font-size: 11px; color: var(--muted); margin-top: 4px; }
#offBtn { margin-top: 8px; padding: 10px; font-size: 15px; }
#ledger #phoneBtn { margin-bottom: 10px; }
body.outing #hud, body.outing #chips, body.outing #bar, body.outing #rail, body.outing #bubbles, body.outing #toasts, body.outing #banner, body.outing #floaters, body.outing #packBtn { display: none !important; }
.pbadge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: #ff3b30; color: #fff; font: 800 12px Figtree, sans-serif; padding: 0 6px; margin-left: 4px; vertical-align: 2px; }
#nightText { cursor: pointer; }

/* ---------- the weekend job: the diner ---------- */
#diner { position: fixed; inset: 0; z-index: 74; display: none; pointer-events: none; color: #fff; }
#diner.show { display: block; }
#diner .dhud { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; gap: 8px; justify-content: space-between; }
#diner .dhud > div { flex: 1; background: rgba(16, 14, 12, 0.72); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; padding: 6px 10px; text-align: center; }
#diner .dhud small { display: block; font: 700 9px Figtree, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: #cdb68a; }
#diner .dhud b { font: 700 18px Fredoka, sans-serif; }
#diner .dbub { position: absolute; left: 0; top: 0; width: 54px; height: 54px; margin: -27px 0 0 -27px; border: 0; padding: 0; border-radius: 50%; pointer-events: auto; background: conic-gradient(var(--rc, #3ddc84) calc(var(--p, 1) * 360deg), rgba(0, 0, 0, 0.35) 0); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); touch-action: manipulation; -webkit-tap-highlight-color: transparent; will-change: transform; }
#diner .dbub .ring { position: absolute; inset: 4px; border-radius: 50%; background: #fffdf6; }
#diner .dbub .ic { position: relative; font-size: 25px; line-height: 54px; }
#diner .dbub.idle { width: 40px; height: 40px; margin: -20px 0 0 -20px; opacity: 0.8; }
#diner .dbub.idle .ic { font-size: 18px; line-height: 40px; }
#diner .dbub.wait .ring { background: #e9e4d8; }
#diner .dbub.want { animation: dpulse 1.1s ease-in-out infinite; }
#diner .dbub.money .ring { background: #e3ffe9; }
#diner .dbub .n { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); font: 700 11px Fredoka, sans-serif; font-style: normal; background: #1f8f4e; color: #fff; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
#diner .dbub .n:empty, #diner .dbub .q:empty { display: none; }
#diner .dbub .q { position: absolute; right: -4px; top: -4px; min-width: 20px; height: 20px; border-radius: 10px; background: #1f8a63; color: #fff; font: 700 12px/20px Fredoka, sans-serif; }
@keyframes dpulse { 0%, 100% { scale: 1; } 50% { scale: 1.1; } }
#diner .dhands { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: rgba(16, 14, 12, 0.78); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; padding: 8px 12px; white-space: nowrap; }
#diner .dhands > small { font: 700 9px Figtree, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #cdb68a; }
#diner .dhands span { display: inline-flex; align-items: center; gap: 3px; background: #fffdf6; color: #0b0d0c; border-radius: 12px; padding: 4px 8px; font: 700 15px Fredoka, sans-serif; }
#diner .dhands span small { font-size: 11px; color: #555; }
#diner .dhands span.free { width: 34px; height: 26px; background: transparent; border: 2px dashed rgba(255, 255, 255, 0.25); padding: 0; }
#diner .dhands em { font: italic 600 13px Figtree, sans-serif; color: rgba(255, 255, 255, 0.55); }
#diner .dpop { position: absolute; transform: translate(-50%, -100%); font: 700 14px Fredoka, sans-serif; background: #fffdf6; color: #0b0d0c; padding: 4px 10px; border-radius: 12px; white-space: nowrap; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; animation: dpopUp 1.8s ease-out forwards; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
#diner .dpop.money { background: #3ddc84; font-size: 18px; }
@keyframes dpopUp { 0% { opacity: 0; margin-top: 10px; } 15% { opacity: 1; margin-top: 0; } 80% { opacity: 1; } 100% { opacity: 0; margin-top: -26px; } }
#diner .dsub { position: absolute; left: 50%; top: calc(76px + env(safe-area-inset-top)); transform: translateX(-50%); width: min(90vw, 460px); text-align: center; opacity: 0; transition: opacity 0.25s; }
#diner .dsub.on { opacity: 1; }
#diner .dsub b { display: block; font: 800 10px Figtree, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: #dcc08a; text-shadow: 0 2px 6px #000; }
#diner .dsub span { font: 600 15px/1.3 Figtree, sans-serif; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 2px #000; }
#diner .dcard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 420px); max-height: 86vh; overflow-y: auto; display: none; pointer-events: auto; background: rgba(18, 15, 12, 0.94); backdrop-filter: blur(12px); border: 1px solid rgba(200, 164, 106, 0.3); border-radius: 22px; padding: 18px 18px 16px; }
#diner .dcard.on { display: block; animation: fadeIn 0.35s ease both; }
#diner .dcard .kicker { margin: 0; font: 700 10px Figtree, sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: #cdb68a; }
#diner .dcard h2 { margin: 4px 0 8px; font: 400 32px/1.05 Anton, Impact, sans-serif; letter-spacing: 0.02em; text-transform: uppercase; }
#diner .dcard .lead { margin: 0 0 10px; font: 500 14px/1.45 Figtree, sans-serif; color: rgba(255, 255, 255, 0.85); }
#diner .dcard .how { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
#diner .dcard .how li { display: flex; gap: 10px; align-items: center; font: 600 13px/1.35 Figtree, sans-serif; background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 7px 10px; }
#diner .dcard .how b { font-size: 20px; }
#diner .dcard .small { font: 500 12px/1.4 Figtree, sans-serif; color: rgba(255, 255, 255, 0.6); margin: 0 0 12px; }
#diner .dcard .drows > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font: 600 14px Figtree, sans-serif; }
#diner .dcard .drows b { font: 700 15px Fredoka, sans-serif; color: #3ddc84; }
#diner .dcard .drows b.neg { color: #ff8a8a; }
#diner .dcard .dstats { font: 600 12px Figtree, sans-serif; color: rgba(255, 255, 255, 0.6); margin: 10px 0; }
#diner .dcard .dstory { background: rgba(200, 164, 106, 0.1); border-left: 3px solid #cdb68a; border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; }
#diner .dcard .dstory b { font: 800 10px Figtree, sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: #cdb68a; }
#diner .dcard .dstory p { margin: 4px 0; font: 500 italic 14px/1.45 Figtree, sans-serif; }
#diner .dcard .dstory em { display: block; font: 700 12px Figtree, sans-serif; font-style: normal; color: #dcc08a; margin-top: 6px; }

/* ---------- the dream: prologue, ladder, the week ---------- */
#prologue { position: fixed; inset: 0; z-index: 80; display: none; pointer-events: none; }
#prologue.show { display: block; }
#prologue .pbar { position: absolute; left: 0; right: 0; height: 11vh; background: #000; }
#prologue .pbar.top { top: 0; } #prologue .pbar.bot { bottom: 0; }
#prologue .pline { position: absolute; left: 50%; bottom: calc(11vh + 26px); transform: translateX(-50%); width: min(88vw, 520px); margin: 0; text-align: center; font: 600 19px/1.4 Figtree, sans-serif; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95); opacity: 0; transition: opacity 0.7s; }
#prologue .pline.on { opacity: 1; }
#prologue .pline.title { font: 400 clamp(30px, 9vw, 56px)/1.05 Anton, Impact, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; bottom: 44vh; }
#prologue .pline small { display: block; font: 700 11px Figtree, sans-serif; letter-spacing: 0.35em; color: #dcc08a; margin-bottom: 6px; }
#prologue .pskip { position: absolute; right: 14px; top: calc(11vh + 10px); pointer-events: auto; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.4); color: #fff; border-radius: 999px; padding: 6px 14px; font: 600 12px Figtree, sans-serif; }
.mdream { display: flex; align-items: center; gap: 10px; background: rgba(52, 176, 131, 0.08); border: 1px solid rgba(52, 176, 131, 0.25); border-radius: 14px; padding: 8px 10px; margin: 8px 0; font: 600 12px/1.35 Figtree, sans-serif; color: rgba(255, 255, 255, 0.85); }
.mdream:empty { display: none; }
.mdream .steps { display: flex; gap: 3px; }
.mdream .steps i { width: 14px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); }
.mdream .steps i.on { background: #34b083; }
.mdream .steps i.now { background: #dcc08a; }
.mdream b { color: #fff; }
.ladder { display: grid; gap: 6px; margin: 12px 0 14px; text-align: left; }
.ladder div { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); font: 600 13px/1.3 Figtree, sans-serif; }
.ladder div b { font: 700 15px Fredoka, sans-serif; min-width: 22px; text-align: center; }
.ladder div.done { background: rgba(61, 220, 132, 0.12); }
.ladder div.next { background: rgba(200, 164, 106, 0.14); border: 1px solid rgba(200, 164, 106, 0.4); }
.ladder div small { display: block; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
#week .wsum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
#week .wsum div { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 8px 10px; font: 600 12px Figtree, sans-serif; color: rgba(255, 255, 255, 0.65); }
#week .wsum b { display: block; font: 700 18px Fredoka, sans-serif; color: #fff; }
#week .wq { margin: 10px 0 4px; font: 700 14px Figtree, sans-serif; }
#week .wq small { display: block; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
#week .wopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
#week .wopts button { border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: #fff; border-radius: 12px; padding: 8px 6px; font: 700 13px Figtree, sans-serif; }
#week .wopts button small { display: block; font-weight: 500; font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; }
#week .wopts button.on { border-color: #dcc08a; background: rgba(200, 164, 106, 0.16); }
#week .wtotal { text-align: center; font: 600 14px Figtree, sans-serif; color: rgba(255, 255, 255, 0.75); }

/* ---------- choose your path ---------- */
#careers { position: fixed; inset: 0; z-index: 87; display: none; pointer-events: none; color: var(--ivory); }
#careers.show { display: block; }
#careers .khead { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; text-align: center; pointer-events: auto; }
#careers .khead small { display: block; font: 700 10px Figtree, sans-serif; letter-spacing: 0.32em; text-transform: uppercase; color: var(--brass-hi); }
#careers .khead b { font: 400 26px/1.1 Anton, Impact, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8); }
#careers .kback { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(243, 236, 224, 0.2); background: rgba(8, 12, 11, 0.6); color: var(--ivory); font-size: 18px; }
#careers .knum { font: 700 12px Figtree, sans-serif; color: rgba(243, 236, 224, 0.6); letter-spacing: 0.1em; }
#careers .karrow { position: absolute; top: 34%; width: 44px; height: 64px; border: 0; background: rgba(8, 12, 11, 0.45); color: var(--ivory); font: 300 40px/1 Figtree, sans-serif; pointer-events: auto; border-radius: 14px; backdrop-filter: blur(6px); }
#careers .kprev { left: 8px; } #careers .knext { right: 8px; }
#careers .kcard { position: absolute; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(94vw, 460px); pointer-events: auto; background: linear-gradient(180deg, rgba(12, 18, 16, 0.86), rgba(8, 11, 10, 0.96)); backdrop-filter: blur(14px); border: 1px solid rgba(200, 164, 106, 0.28); border-radius: 24px; padding: 14px 16px 12px; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5); }
#careers .kdots { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
#careers .kdots i { width: 18px; height: 4px; border-radius: 2px; background: rgba(243, 236, 224, 0.18); }
#careers .kdots i.open { background: rgba(52, 176, 131, 0.45); }
#careers .kdots i.on { background: var(--brass-hi); width: 28px; }
#careers .ktop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
#careers .kname { margin: 0; font: 400 34px/1 Anton, Impact, sans-serif; letter-spacing: 0.02em; text-transform: uppercase; }
#careers .kwhere { margin: 4px 0 0; font: 700 11px Figtree, sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-hi); }
#careers .kchip { flex: none; font: 800 10px Figtree, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; }
#careers .kchip.open { background: rgba(52, 176, 131, 0.18); color: #7fe3bb; border: 1px solid rgba(52, 176, 131, 0.5); }
#careers .kchip.soon { background: rgba(200, 164, 106, 0.14); color: var(--brass-hi); border: 1px solid rgba(200, 164, 106, 0.45); }
#careers .kline { margin: 10px 0 8px; font: 500 14px/1.45 Figtree, sans-serif; color: rgba(243, 236, 224, 0.88); }
#careers .kdream { margin: 0 0 10px; font: 600 13px/1.4 Figtree, sans-serif; padding: 8px 10px; border-radius: 12px; background: rgba(200, 164, 106, 0.08); border-left: 3px solid var(--brass); }
#careers .kdream small { display: block; font: 800 9px Figtree, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-hi); margin-bottom: 2px; }
#careers .kfacts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
#careers .kfacts span { font: 600 11px Figtree, sans-serif; padding: 5px 9px; border-radius: 999px; background: rgba(243, 236, 224, 0.06); border: 1px solid rgba(243, 236, 224, 0.1); color: rgba(243, 236, 224, 0.8); }
#careers .ktally { margin: 8px 0 0; min-height: 15px; text-align: center; font: 600 12px Figtree, sans-serif; color: rgba(243, 236, 224, 0.6); }
#careers .ktally b { color: var(--brass-hi); }
#careers .kload { position: absolute; left: 0; right: 0; top: 44%; text-align: center; font: 700 11px Figtree, sans-serif; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(243, 236, 224, 0.6); display: none; }
#careers.loading .kload { display: block; }

/* the loading card that replaces any long black screen */
#fade .fload { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: 12px; justify-items: center; opacity: 0; transition: opacity 0.35s; width: min(80vw, 320px); text-align: center; }
#fade.wait .fload { opacity: 1; }
#fade .fload b { font: 400 40px/1 Anton, Impact, sans-serif; letter-spacing: 0.06em; background: linear-gradient(180deg, #fffaf0 0%, #f1e6d0 42%, #c8a46a 72%, #7a5a2e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#fade .fload i { width: 180px; height: 3px; border-radius: 2px; background: rgba(243, 236, 224, 0.14); overflow: hidden; display: block; }
#fade .fload u { display: block; height: 100%; width: 30%; background: linear-gradient(90deg, #1f8a63, #34b083); transition: width 0.3s; animation: floadPulse 1.2s ease-in-out infinite; }
#fade .fload small { font: 600 12px/1.4 Figtree, sans-serif; color: rgba(243, 236, 224, 0.62); }
@keyframes floadPulse { 50% { opacity: 0.55; } }
#intro .tag { letter-spacing: 0.3em; }
#loading .ld u { background: linear-gradient(90deg, #1f8a63, #34b083); }

#glLost { position: fixed; inset: 0; z-index: 120; display: none; place-items: center; align-content: center; gap: 12px; background: #070908; color: var(--ivory); text-align: center; padding: 24px; }
#glLost.on { display: grid; }
#glLost b { font: 400 40px Anton, Impact, sans-serif; letter-spacing: 0.06em; color: var(--brass-hi); }
#glLost p { margin: 0; font: 600 14px Figtree, sans-serif; opacity: 0.75; }
#glLost .big { width: min(80vw, 300px); }

#title .tstats { display: grid; gap: 4px; margin: 14px 0 0; font: 600 12px Figtree, sans-serif; color: rgba(243, 236, 224, 0.75); text-shadow: 0 2px 8px #000; }
#title .tstats:empty { display: none; }
#title .tstats b { color: var(--brass-hi); }
#title .tstats .live i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; margin-right: 6px; box-shadow: 0 0 8px #3ddc84; animation: floadPulse 1.4s infinite; }
#board .btabs { display: flex; gap: 6px; margin: 4px 0 10px; }
#board .btabs button { flex: 1; border: 1px solid rgba(243, 236, 224, 0.15); background: rgba(243, 236, 224, 0.04); color: var(--ivory); border-radius: 12px; padding: 9px; font: 700 13px Figtree, sans-serif; }
#board .btabs button.on { border-color: var(--brass); background: rgba(200, 164, 106, 0.14); }
#board .brows > div { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; margin-bottom: 4px; background: rgba(243, 236, 224, 0.04); font: 600 14px Figtree, sans-serif; }
#board .brows > div.top { background: rgba(200, 164, 106, 0.1); }
#board .brows > div.me { background: rgba(52, 176, 131, 0.16); border: 1px solid rgba(52, 176, 131, 0.5); }
#board .brows b { font: 700 15px Fredoka, sans-serif; text-align: center; }
#board .brows em { font-style: normal; font: 800 9px Figtree, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #7fe3bb; margin-left: 4px; }
#board .brows strong { font: 700 15px Fredoka, sans-serif; color: var(--brass-hi); }
#board .bload { text-align: center; opacity: 0.7; font: 600 13px Figtree, sans-serif; }
#board .bnote { text-align: center; font: 700 13px Figtree, sans-serif; color: #7fe3bb; margin: 10px 0; }