/* In-world overlays: passenger fare tags, rival labels, cash popups, loading screen */
#passenger-tags { position: fixed; inset: 0; z-index: 15; pointer-events: none; } /* above the conductor banner so no fare is ever hidden behind it */
.passenger-tag { position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 5px 10px 6px; min-width: 52px;
  background: #ffd43b; color: #1a1208; border: 2px solid #1a1208; border-radius: 6px; box-shadow: 3px 3px 0 #1a1208; cursor: pointer; font: 600 10px 'Oswald', sans-serif; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transition: background .12s; }
.passenger-tag b { font: 400 18px 'Anton', sans-serif; letter-spacing: .02em; line-height: 1; }
.passenger-tag span { opacity: .75; }
.passenger-tag::after { content: ''; position: absolute; bottom: -9px; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #1a1208; }
.passenger-tag:hover { background: #fff3bf; }
.passenger-tag.rich { background: #ff922b; }
.passenger-tag.claimed { background: #2b2b2b; color: #aaa; border-color: #555; box-shadow: none; pointer-events: none; opacity: .7; }
.passenger-tag.mine { background: #51cf66; color: #0b2410; border-color: #0b2410; opacity: 1; }
.world-label { position: absolute; left: 0; top: 0; color: #fff; font: 600 11px 'Oswald', sans-serif; letter-spacing: .08em; text-transform: uppercase; background: #120e0acc; border-left: 4px solid var(--c, #ffd43b); padding: 3px 8px; white-space: nowrap; pointer-events: none; }
#popups { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
.popup { position: absolute; transform: translate(-50%, -50%); font: 400 30px 'Anton', sans-serif; letter-spacing: .02em; -webkit-text-stroke: 1.5px #1a1208; text-shadow: 3px 3px 0 #1a1208; animation: pop 1.5s cubic-bezier(.2,.8,.2,1) forwards; }
.popup-gain { color: #ffd43b; }
.popup-loss { color: #ff6b6b; font-size: 24px; }
.popup-drop { color: #8ce99a; font-size: 22px; font-family: 'Baloo Da 2', 'Anton', sans-serif; font-weight: 800; }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 12% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 30% { transform: translate(-50%, -80%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(.95); } }
#loading-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #15100c; color: #f1e3c4; transition: opacity .8s; }
#loading-screen.done { opacity: 0; pointer-events: none; }
#loading-screen .ld-title { font: 400 min(18vw, 140px) 'Anton', sans-serif; letter-spacing: .02em; color: #ffd43b; -webkit-text-stroke: 3px #1a1208; text-shadow: 6px 6px 0 #c92a2a; line-height: .9; text-align: center; }
#loading-screen .ld-bn { font: 400 min(8vw, 54px) 'Galada', sans-serif; color: #f1e3c4; text-align: center; margin-top: 8px; }
#loading-screen .ld-status { font: 500 13px 'Oswald', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #a8957a; text-align: center; margin-top: 26px; }
.fatal { position: fixed; inset: 20%; padding: 40px; background: #181e1e; color: white; z-index: 999; font: 16px sans-serif; }
#loading-screen .ld-bar { width: min(60vw, 360px); height: 10px; margin: 22px auto 0; border: 3px solid #000; background: #2a221b; overflow: hidden; }
#loading-screen .ld-bar span { display: block; height: 100%; width: 40%; background: repeating-linear-gradient(90deg, #e03131 0 14px, #ffd43b 14px 28px, #2f9e44 28px 42px, #1c5bb8 42px 56px); animation: ldbar 1.1s linear infinite; }
@keyframes ldbar { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* big centre announcements: countdown, new day, nightfall, rush hour, hustle combos */
.center-banner { position: fixed; left: 50%; top: 34%; transform: translate(-50%, -50%); z-index: 25; text-align: center; pointer-events: none; opacity: 0; }
.center-banner.show { animation: banner 2.4s cubic-bezier(.2,.9,.2,1) forwards; }
.center-banner.count { animation: count .9s cubic-bezier(.2,1.4,.3,1) forwards; }
.center-banner::before { content: ''; position: absolute; inset: -46px -110px; z-index: -1; background: radial-gradient(closest-side, rgba(12,9,6,0.62), rgba(12,9,6,0.35) 55%, rgba(12,9,6,0)); } /* soft backing so the big numbers never sit on busy livery */
.cb-big { font: 400 min(16vw, 120px) 'Anton', sans-serif; letter-spacing: .02em; color: #ffd43b; -webkit-text-stroke: 3px #1a1208; text-shadow: 6px 6px 0 #c92a2a, 10px 10px 0 #1a1208; line-height: .95; }
.cb-big.bn { font-family: 'Galada', sans-serif; -webkit-text-stroke: 2px #1a1208; }
.cb-small { margin-top: 6px; font: 600 16px 'Oswald', sans-serif; letter-spacing: .22em; color: #fff4dc; text-shadow: 0 2px 6px #000; text-transform: uppercase; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.85); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } 20% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -56%); } }
@keyframes count { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.9); } }
.combo { position: fixed; z-index: 31; pointer-events: none; font: 400 26px 'Anton', sans-serif; color: #ff922b; -webkit-text-stroke: 1.5px #1a1208; text-shadow: 3px 3px 0 #1a1208; animation: pop 1.2s cubic-bezier(.2,.8,.2,1) forwards; transform: translate(-50%, -50%); }