/* Bus Company Tycoon : page-specific styles (shared: arcade-kit.css, sim3d.css for the banner / result card) */
.bt-wrap { position: relative; width: 100%; }
.bt-wrap .ak-stage { background: #0f172a; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.bt-hud { position: absolute; inset: 0; pointer-events: none; font-family: system-ui, sans-serif; container-type: inline-size; color: #e2e8f0; }
.bt-hud button, .bt-hud .sim-result, .bt-panel { pointer-events: auto; }
.bt-top { position: absolute; left: 1.2%; right: 1%; top: 1.2%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bt-top > span:not(.bt-tb) { background: rgba(15, 23, 42, .85); border: 1px solid rgba(255, 255, 255, .15); border-radius: 10px; padding: 4px 10px; font: 900 15px system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bt-money { color: #bbf7d0; }
.bt-tb { margin-left: auto; display: flex; gap: 5px; }
.bt-tb button, .bt-tb .ak-mute { min-width: 38px; height: 36px; padding: 0 8px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(15, 23, 42, .85); color: #fff; font: 800 14px system-ui, sans-serif; cursor: pointer; }
/* the control panel: right of the map on wide screens, under it on phones */
.bt-panel { position: absolute; left: 69%; right: 1%; top: 9.5%; bottom: 1.5%; overflow-y: auto; background: rgba(15, 23, 42, .9); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 10px; font-size: 13px; }
.is-phone .bt-panel { left: 1.6%; right: 1.6%; top: 54%; }
.bt-panel h3 { margin: 6px 0 6px; font-size: 15px; }
.bt-panel p { margin: 4px 0 8px; line-height: 1.35; opacity: .9; }
.bt-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.bt-panel button { border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: inherit; padding: 6px 9px; font: 800 12.5px system-ui, sans-serif; cursor: pointer; }
.bt-panel button.is-go { background: #16a34a; border-color: #4ade80; color: #fff; }
.bt-panel button:disabled { opacity: .45; cursor: not-allowed; }
.bt-panel button[aria-pressed="true"] { border-color: #facc15; background: rgba(250, 204, 21, .18); }
.bt-fare { display: inline-flex; gap: 4px; align-items: center; margin-left: auto; font-weight: 800; }
.bt-fare button { padding: 4px 8px; }
.bt-routes { display: flex; flex-direction: column; gap: 5px; }
.bt-route { display: flex; justify-content: space-between; align-items: center; text-align: left; border-left: 6px solid var(--rc) !important; }
.bt-route span { font-weight: 600; opacity: .85; }
.bt-route.is-sel { background: rgba(255, 255, 255, .16) !important; }
.bt-sel { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .12); }
.bt-types { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 8px; }
.bt-types button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.bt-types small { font-weight: 600; opacity: .8; }
.bt-goals { margin-top: 10px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; }
.bt-goals div { padding: 2px 0; opacity: .75; } .bt-goals div.is-done { opacity: 1; color: #fde047; }
.bt-hint { color: #fde047; }
.bt-draft b { color: #fde047; }
.bt-report table { margin: 6px auto; border-collapse: collapse; font-size: 14px; }
.bt-report td { padding: 2px 10px; text-align: left; } .bt-report td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.bt-report tr.is-net td { border-top: 1px solid rgba(255, 255, 255, .3); font-weight: 900; }
.bt-hud .sim-banner { pointer-events: none; }
.bt-hud .sim-result[hidden] { display: none; }
.bt-opts { margin-top: 12px; } .bt-reset { border-radius: 10px; padding: 7px 12px; border: 2px solid rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .1); color: inherit; cursor: pointer; font-weight: 700; }
@container (max-width: 700px) { .bt-top > span:not(.bt-tb) { font-size: 12px; padding: 3px 7px; } .bt-tb button, .bt-tb .ak-mute { height: 32px; min-width: 32px; font-size: 12px; } .bt-panel { font-size: 12px; } }
@container (max-width: 420px) { .bt-top { gap: 4px; } .bt-rep { display: none; } }