:root { --cream: #f1dfb2; --red: #a82013; --ink: #102f2c; --brass: #c78b28; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #0e211f; }
body { font-family: Georgia, "Times New Roman", serif; color: var(--cream); }
button { font: inherit; }
.player-shell { min-height: 100svh; position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; isolation: isolate; }
.background { position: absolute; inset: 0; z-index: -3; background: url('/bus-driver.png') center 43% / cover no-repeat; transform: scale(1.02); }
.background::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,30,28,.84), rgba(9,24,22,.16) 38%, rgba(34,18,6,.32) 70%, rgba(7,23,22,.82)), linear-gradient(0deg, rgba(7,24,22,.9), transparent 42%, rgba(12,20,17,.45)); }
.vignette { position: absolute; inset: 0; z-index: -2; pointer-events: none; box-shadow: inset 0 0 180px 45px rgba(0,0,0,.7); background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 3px 3px; mix-blend-mode: screen; }
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 2rem; padding: 28px 42px; border-bottom: 1px solid rgba(241,223,178,.3); background: linear-gradient(#751a11e8, #9d2516d9); box-shadow: 0 8px 30px #091c18aa; }
.datetime span { display: block; font: 700 clamp(1.5rem,3vw,2.5rem)/.9 ui-monospace, monospace; letter-spacing: .05em; }
.datetime small { display: block; margin-top: 9px; font: 700 .65rem ui-monospace, monospace; letter-spacing: .22em; opacity: .8; }
.brand { font-size: clamp(1.8rem,4vw,3.5rem); font-weight: 900; letter-spacing: -.03em; text-shadow: 2px 3px #4a110d; }
.brand span { display: block; text-align: center; font: 700 .52rem ui-monospace, monospace; letter-spacing: .5em; margin-top: 3px; }
.live { justify-self: end; padding-top: 10px; font: 700 .68rem ui-monospace, monospace; letter-spacing: .12em; }
.live i { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: #ffda70; box-shadow: 0 0 0 5px #ffda7030, 0 0 18px #ffda70; animation: pulse 1.8s infinite; }
.route-card { position: absolute; top: 24%; left: 42px; transform: rotate(-1deg); width: min(390px,38vw); padding: 9px 14px 11px; color: #f4d89c; background: #123c36e8; border: 3px solid #dec589; outline: 1px solid #142b27; box-shadow: 0 12px 32px #0009; }
.route-label { font: 700 .62rem ui-monospace, monospace; letter-spacing: .22em; text-align: center; color: #ddb15c; margin-bottom: 10px; }
.marquee-window { overflow: hidden; border-block: 1px solid #d5b36b66; padding: 8px 0 10px; }
.train-title { width: max-content; display: flex; align-items: center; gap: 12px; font-weight: 900; font-size: clamp(1.25rem,2.2vw,2.15rem); line-height: 1; text-transform: uppercase; text-shadow: 2px 2px #081d1b; animation: arrive 1s cubic-bezier(.16,.8,.25,1); }
.engine { color: #d64022; font-size: .7em; }
.carriage { color: #bc8030; font-size: .36em; letter-spacing: .2em; }
.route-line { display: flex; justify-content: space-between; padding-top: 10px; font: 700 .68rem ui-monospace, monospace; letter-spacing: .14em; color: #d8bd7e; }
.ticket { position: absolute; left: 42px; top: 46%; width: 155px; padding: 21px 15px; color: #421d10; background: #d9b86e; border: 2px solid #6c401a; transform: rotate(-4deg); text-align: center; box-shadow: 7px 10px 22px #0008; background-image: repeating-linear-gradient(0deg, transparent 0 7px, #7f5b2320 8px); }
.ticket::before { content: ""; position: absolute; inset: 7px; border: 1px dashed #76501e; }
.ticket p, .ticket small, .ticket strong { position: relative; display: block; margin: 0; }
.ticket p { font-weight: 900; font-size: 1.1rem; }
.ticket strong { font: 900 1.3rem ui-monospace, monospace; margin: 13px 0 7px; }
.ticket small { font: 700 .55rem ui-monospace, monospace; letter-spacing: .15em; }
.ticket-cut { position: absolute; left: -9px; width: 16px; height: 16px; border-radius: 50%; background: #18332f; }.ticket-cut.top{top:20px}.ticket-cut.bottom{bottom:20px}
.horn { position: absolute; left: 66px; bottom: 16%; width: 100px; height: 100px; border-radius: 50%; border: 5px double #e2c47d; color: #f0d99f; background: radial-gradient(circle at 35% 30%, #b72c1d, #67170f 68%); box-shadow: 0 8px 0 #3c110c, 0 13px 28px #000a; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.horn:active { transform: translateY(7px); box-shadow: 0 2px 0 #3c110c, 0 6px 15px #000a; }
.horn span,.horn b,.horn small { display:block }.horn span{font-size:1.8rem}.horn b{font:900 .72rem ui-monospace,monospace;letter-spacing:.13em}.horn small{font-size:.65rem}
.controls { align-self: end; justify-self: center; display: flex; align-items: center; gap: 22px; padding-bottom: 58px; }
.controls.radio-only { gap: 18px; transform: translateX(41px); }
.controls .fast-forward { width: 68px; height: 68px; display: grid; place-content: center; gap: 3px; color: #efd28d; font: 900 .82rem ui-monospace,monospace; letter-spacing: -.08em; touch-action: none; user-select: none; }
.controls .fast-forward small { display: block; font-size: .42rem; letter-spacing: .08em; }
.controls .fast-forward.speeding { transform: translateY(4px); color: #52140d; background: #e0bd69; box-shadow: 0 5px 18px #000b; }
.tagline { position: absolute; left: 50%; bottom: 27%; transform: translateX(-50%); width: min(620px,72vw); color: #f2d998; font: 800 clamp(.72rem,1.15vw,1rem) ui-monospace,monospace; letter-spacing: .11em; text-align: center; text-transform: uppercase; text-shadow: 2px 2px #071b18; transition: opacity .3s, transform .3s; }
.tagline.changing { opacity: 0; transform: translate(-50%,6px); }
.controls button { width: 62px; height: 62px; border-radius: 50%; border: 2px solid #e2c47d; color: #f2daa0; background: #112e2bdc; box-shadow: 0 10px 28px #000b; cursor: pointer; transition: transform .2s, background .2s; }
.controls button:hover { transform: translateY(-3px); background: #9e2518; }
.controls .play { width: 92px; height: 92px; padding-left: 5px; font-size: 1.75rem; color: #51150e; background: #e0bd69; border: 7px double #711d14; }
footer { position: absolute; right: 42px; bottom: 32px; text-align: right; }
footer p { font: 700 .56rem ui-monospace, monospace; letter-spacing: .18em; opacity: .7; }
.equalizer { height: 34px; display: flex; align-items: end; justify-content: end; gap: 4px; }
.equalizer i { display: block; width: 3px; height: 5px; background: #e2bd66; }.equalizer.moving i { animation: equalize .7s ease-in-out infinite alternate; }
@keyframes equalize { to { height: 30px; } } @keyframes pulse { 50% { opacity: .45; } } @keyframes arrive { from { transform: translateX(75vw); } to { transform: translateX(0); } }
@media (max-width: 700px) {
  .topbar { padding: 18px; gap: .5rem; }.brand { font-size: 1.65rem; }.brand span { display:none }.live { font-size:.5rem }.datetime span{font-size:1.25rem}.datetime small{font-size:.48rem}
  .background { background-image: url('/bus-driver-portrait.png'); background-position: 50% 48%; }
  .route-card { top: 24%; left: 18px; width: 72vw; }.route-label{font-size:.48rem}.train-title{font-size:1.35rem}.route-line{font-size:.46rem}
  .ticket { left: 20px; top: 49%; transform: scale(.82) rotate(-4deg); transform-origin: left center; }
  .horn { left: 28px; bottom: 15%; width: 82px; height: 82px; }
  .controls { gap: 10px; padding-bottom: 55px; }.controls.radio-only{transform:translateX(31px)}.controls button{width:52px;height:52px}.controls .play{width:78px;height:78px}.controls .fast-forward{width:58px;height:58px;font-size:.7rem}.tagline{bottom:24%;width:82vw;font-size:.62rem}
  footer { right: 18px; bottom: 15px; } footer p{display:none}
}