/* Shared 16:9 broadcast artwork. Interface surfaces remain a separate alpha layer. */
:root { color-scheme: light; }
html { min-height: 100%; background: #f6f6f4; }
body {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #f6f6f4 !important;
  background-image: url('/online/background.jpg') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

header, nav, .tatami-tabs, .login-card,
.prod-board, .leader, .recent-item, .empty,
.connection, .online-state {
  backdrop-filter: blur(9px) saturate(112%);
  -webkit-backdrop-filter: blur(9px) saturate(112%);
}
header { background: rgba(10, 18, 24, .84) !important; }
nav, .tatami-tabs { background: rgba(15, 25, 31, .80) !important; }
.login-card, .prod-board, .leader, .recent-item, .empty {
  background-color: rgba(255, 255, 255, .84) !important;
}
.tatami-head { background: rgba(167, 22, 45, .91) !important; }
.bout-row .weight { background: rgba(168, 25, 47, .91) !important; }
.bout-row .white { background: rgba(255, 255, 255, .88) !important; }
.bout-row .blue { background: rgba(39, 105, 180, .88) !important; }
.connection, .online-state { background: rgba(7, 18, 24, .86) !important; }

@media (orientation: portrait) {
  body {
    background-size: auto 125% !important;
    background-position: center 43% !important;
    background-attachment: scroll !important;
  }
}

/* Mobile rows may be longer than one viewport: keep the clean central artwork
   moving with the document instead of ending above the last bout. */
@media (max-width:720px) {
  html { background:#f6f6f4; }
  body { background:transparent !important; isolation:isolate; }
  body::before {
    content:''; position:absolute; z-index:-1; inset:0;
    background:#f6f6f4 url('/online/background.jpg') center center / auto 100% no-repeat;
    pointer-events:none;
  }
  body[data-showcase="custom"]::before { display:none; }
}

@media (orientation: landscape) and (max-height:600px) {
  body {
    /* Same clean-centre crop as portrait: sponsor logos stay outside view. */
    background-size: auto 145% !important;
    background-position: center 39% !important;
    background-attachment: scroll !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  header, nav, .tatami-tabs, .login-card,
  .prod-board, .leader, .recent-item, .empty,
  .connection, .online-state {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}