/* OBSブラウザソース用：背景は完全透過 */
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: rgba(0,0,0,0);
  font-family: "Yu Gothic UI", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
}
/* --h はバーの実高さ(px)。JSがセットする。サイズ指定は全て--h基準 */
#bar {
  --h: 100px;
  display: flex;
  align-items: stretch;
  width: 100%; height: 100%;
}
/* 左側の固定ラベル */
#label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--h)*0.32) 0 calc(var(--h)*0.26);
  background: linear-gradient(135deg, #d40000 0%, #ff4e00 100%);
  color: #fff;
  font-weight: 900;
  font-size: calc(var(--h)*0.46);
  letter-spacing: 0.08em;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--h)*0.24) 100%, 0 100%);
  text-shadow: 0 0.06em 0.12em rgba(0,0,0,.45);
  white-space: nowrap;
  z-index: 2;
}
/* スクロール領域 */
#tickerWrap {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.55);
}
#ticker {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
}
/* inline-flexだとspan境界の半角スペースが潰れるため、通常のインラインフローで描画する */
.item {
  display: inline-block;
  font-size: calc(var(--h)*0.44);
  font-weight: 700;
  color: #fff;
  text-shadow:
    0 0 0.14em rgba(0,0,0,.9),
    0 0.05em 0.1em rgba(0,0,0,.8);
  padding-right: calc(var(--h)*0.5);
  white-space: nowrap;
}
.badge {
  display: inline-block;
  vertical-align: middle;
  font-size: calc(var(--h)*0.30);
  font-weight: 900;
  color: #fff;
  border-radius: 0.85em;
  padding: 0.12em 0.6em;
  margin-right: calc(var(--h)*0.16);
  letter-spacing: 0.05em;
  text-shadow: none;
  transform: translateY(-0.2em);
}
.b-news    { background: #d40000; }
.b-robin   { background: #0059c9; }
.b-qualify { background: #0c8a3e; }
.b-sko     { background: #7a1fd1; }
.b-champ   { background: linear-gradient(135deg, #c98f00, #ffcf40); color: #402c00; }
.b-info    { background: #555; }
.score { color: #ffe45c; font-weight: 900; padding: 0 0.18em; }
.win   { color: #ffe45c; }
.sep {
  display: inline-block;
  width: calc(var(--h)*0.012); height: calc(var(--h)*0.46);
  background: rgba(255,255,255,.45);
  transform: skewX(-18deg);
  margin-right: calc(var(--h)*0.5);
}