/* rkc-dev v00.02 (261105) — full-window player. Video, FastData and Map share one stage; a bar floats over it. */

html, body { height: 100%; margin: 0; background: #000; color: #e9ecef; overflow: hidden; }
body { -webkit-tap-highlight-color: transparent; }

/* ---- Login (from the 261013 page) ---- */
.login-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at top, #2a2f36 0%, #111418 70%); overflow: auto; }
.login-card { width: 100%; max-width: 380px; background: #1b1f24; border: 1px solid #30363d; border-radius: 12px;
  padding: 28px 24px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.login-card .form-control { background: #0d1117; border-color: #30363d; color: #e6edf3; font-size: 16px; }
.login-card .form-control:focus { border-color: #dc3545; box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .25); }
.login-logo { height: 60px; max-width: 100%; }
.login-shake { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ---- Stage ---- */
#app { position: fixed; inset: 0; height: 100dvh; }
#stage { position: absolute; inset: 0; background: #000; }
.view { position: absolute; inset: 0; display: none; }
#app[data-mode="map"] #view-map,
#app[data-mode="fastdata"] #view-fastdata { display: block; }
.view-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 24px; color: #adb5bd; pointer-events: none; }

/* Video: whole stage in Player (16:9 letterboxed on black), corner window elsewhere */
.video-box { position: absolute; inset: 0; background: #000; z-index: 3; transition: all .2s ease; }
.video-box video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
#app:not([data-mode="player"]) .video-box { inset: auto; right: 12px; bottom: calc(64px + env(safe-area-inset-bottom));
  width: min(32vw, 360px); aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .25); }
#app:not([data-mode="player"]) .video-box.off { display: none; }          /* nothing on air: no empty corner box */
#app:not([data-mode="player"]) .video-msg { font-size: .75rem; }
#app:not([data-mode="player"]) .unmute { display: none !important; }
.video-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 16px; color: #ced4da; font-size: 1rem; pointer-events: none; }
.video-msg:empty { display: none; }
.video-msg { flex-direction: column; gap: .35rem; }
.video-msg .vm-line { font-size: 1.15rem; color: #fff; }
.video-msg .vm-count { font-size: 3.5rem; font-weight: 700; line-height: 1; color: #dc3545; font-variant-numeric: tabular-nums; }
.video-msg .vm-sub { font-size: .9rem; color: #adb5bd; }
/* promo playing: who isn't streaming, top centre, faint */
.video-note { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 4;
  max-width: calc(100% - 140px); padding: .25rem .8rem; border-radius: 999px; background: rgba(0, 0, 0, .55);
  color: #e9ecef; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
#app:not([data-mode="player"]) .video-note { display: none; }
.unmute { position: absolute; top: 12px; right: 12px; z-index: 4; border: 0; border-radius: 999px; padding: .3rem .8rem;
  background: rgba(220, 53, 69, .9); color: #fff; font-size: .85rem; }

/* FastData iframe: leave room for the bar */
#fd-frame { position: absolute; inset: 0 0 calc(56px + env(safe-area-inset-bottom)) 0; width: 100%;
  height: calc(100% - 56px - env(safe-area-inset-bottom)); border: 0; background: #0b0d10; }

/* Map: Paddock's TeamMap CSS, full stage */
.tm-wrap { position: absolute; inset: 0; overflow: hidden; }
.tm-map { position: absolute; inset: 0; }
.tm-panel { position: absolute; top: 10px; left: 10px; z-index: 5; width: 300px; max-width: calc(100% - 20px);
  max-height: calc(100% - 90px); overflow: auto; background: rgba(20, 22, 26, .88); color: #f1f3f5;
  border: 1px solid rgba(255, 255, 255, .15); border-radius: .5rem; font-size: .85rem; }
.tm-panel-head { display: flex; align-items: center; gap: .4rem; padding: .4rem .55rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.tm-panel-body { padding: .35rem .55rem .5rem; }
.tm-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; flex: none; }
.tm-dot.hollow { background: transparent !important; }
.tm-row { display: flex; align-items: center; gap: .5rem; padding: .2rem 0; cursor: pointer; }
.tm-row .tm-id { font-family: var(--bs-font-monospace); font-weight: 600; }
.tm-row .tm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ced4da; }
.tm-row .tm-spd { font-family: var(--bs-font-monospace); font-weight: 700; font-size: 1rem; min-width: 4.2em; text-align: right; }
.tm-row.stale { opacity: .5; }
.tm-row .tm-tag { font-size: .7rem; padding: 0 .3rem; border-radius: .25rem; background: rgba(255, 193, 7, .25); color: #ffd54f; }
.tm-row .tm-tag.tm-tag-kds { background: rgba(13, 202, 240, .22); color: #6edff6; }
.tm-loc { margin-top: .45rem; }
.tm-loc-head { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: #fff; }
.tm-loc.disabled { opacity: .45; }
.tm-loc .form-check { margin: .1rem 0 .1rem .2rem; min-height: 0; }
.tm-ctl { position: absolute; top: 10px; right: 10px; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.tm-ctl .tm-ctl-box { background: rgba(20, 22, 26, .88); color: #f1f3f5; border: 1px solid rgba(255, 255, 255, .15);
  border-radius: .5rem; padding: .35rem .6rem; font-size: .85rem; display: flex; flex-direction: column; gap: .2rem; }
.tm-ctl .form-check { margin: 0; min-height: 0; }
.tm-ctl .btn-group .btn { padding: .05rem .5rem; font-size: .78rem; }
.tm-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2;
  color: #adb5bd; pointer-events: none; font-size: .95rem; }
.tm-debug { position: absolute; bottom: 70px; left: 10px; z-index: 5; background: rgba(0, 0, 0, .75); color: #e9ecef;
  font: .75rem var(--bs-font-monospace); padding: .35rem .5rem; border-radius: .375rem; }
.mapboxgl-ctrl-bottom-right { bottom: 56px; }
@media (max-width: 576px) {
  .tm-panel { width: 220px; }
  .tm-ctl .tm-ctl-box { font-size: .75rem; }
}

/* ---- Branding: one small logo, top left, faint ---- */
.corner-logo { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 12px; height: 22px; z-index: 6;
  opacity: .55; pointer-events: none; }
#app[data-mode="map"] .corner-logo,                           /* the map's own panel sits there */
#app[data-mode="fastdata"] .corner-logo { display: none; }  /* and the FastData page's own title */

/* ---- Bar ---- */
.bar { position: absolute; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 10; display: flex; align-items: center; gap: .4rem; flex-wrap: nowrap; max-width: calc(100vw - 16px);
  padding: .35rem .45rem; border-radius: 999px; background: rgba(18, 20, 24, .82); border: 1px solid rgba(255, 255, 255, .15);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .25s ease; }
.bar .btn { border-radius: 999px; white-space: nowrap; }
.bar.hidden { opacity: 0; pointer-events: none; }
.seg { display: inline-flex; background: rgba(255, 255, 255, .08); border-radius: 999px; padding: 2px; }
.seg button { border: 0; background: transparent; color: #ced4da; padding: .25rem .8rem; border-radius: 999px;
  font-size: .875rem; font-weight: 600; white-space: nowrap; }
.seg button.on { background: #dc3545; color: #fff; }
.car-sel { width: auto; max-width: 15rem; border-radius: 999px; background-color: rgba(0, 0, 0, .4); }
.car-one { font-size: .85rem; color: #ced4da; padding: 0 .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
#app:not([data-mode="player"]) #sound { display: none; }

/* phones: tighter bar; wraps to two rows when it has to (portrait) */
@media (max-width: 640px) {
  .bar { gap: .25rem; padding: .3rem; flex-wrap: wrap; justify-content: center; border-radius: 18px; width: max-content; }
  .seg button { padding: .25rem .55rem; font-size: .8rem; }
  .bar .btn { padding: .2rem .5rem; font-size: .78rem; }
  .car-sel { max-width: 9rem; font-size: .8rem; }
  #fd-frame { height: calc(100% - 92px - env(safe-area-inset-bottom)); }
  #app:not([data-mode="player"]) .video-box { width: 42vw; bottom: calc(100px + env(safe-area-inset-bottom)); }
}