:root {
  --cc-blue: #0b5ed7;
  --cc-navy: #071b47;
  --cc-cyan: #00c8f5;
  --cc-pink: #f72cac;
  --cc-yellow: #ffd928;
  --cc-paper: #f4f8ff;
  --cc-line: rgba(7, 27, 71, .14);
}

.cc-live-directory-launch {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 .75rem;
  border: 1px solid rgba(255, 255, 255, .52);
  border-radius: .55rem;
  color: #fff;
  background: #df225e;
  box-shadow: 0 .45rem 1.2rem rgba(223, 34, 94, .2);
  font: 900 .68rem/1 system-ui, sans-serif;
  letter-spacing: .045em;
  white-space: nowrap;
  cursor: pointer;
}
.cc-live-directory-launch[hidden], .cc-live-directory-dialog[hidden] { display: none !important; }
.cc-live-directory-launch > span { color: #fff0a6; }
.cc-live-directory-launch > b {
  min-width: 1.15rem;
  margin-left: .25rem;
  padding: .18rem .3rem;
  border-radius: 999px;
  color: var(--cc-navy);
  background: #fff;
}
.cc-live-directory-dialog {
  position: fixed;
  z-index: 190;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(.65rem, env(safe-area-inset-top)) max(.65rem, env(safe-area-inset-right)) max(.65rem, env(safe-area-inset-bottom)) max(.65rem, env(safe-area-inset-left));
  background: rgba(7, 27, 71, .58);
  backdrop-filter: blur(8px);
}
.cc-live-directory-sheet {
  width: min(62rem, 96vw);
  max-height: min(88dvh, 48rem);
  overflow: hidden;
  border: 2px solid rgba(11, 94, 215, .22);
  border-radius: 1rem;
  color: var(--cc-navy);
  background: #f6f9ff;
  box-shadow: 0 2rem 8rem rgba(7, 27, 71, .48);
  font-family: Inter, ui-rounded, system-ui, sans-serif;
}
.cc-live-directory-sheet > header {
  padding: clamp(.8rem, 2vw, 1.3rem);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--cc-line);
  background: #fff;
}
.cc-live-directory-sheet header p,
.cc-live-directory-sheet header h2,
.cc-live-directory-sheet header span { margin: 0; }
.cc-live-directory-sheet header p { color: #df225e; font-size: .66rem; font-weight: 950; letter-spacing: .13em; }
.cc-live-directory-sheet header h2 { margin-top: .15rem; color: var(--cc-blue); font-size: clamp(1.35rem, 3vw, 2.25rem); line-height: 1; }
.cc-live-directory-sheet header span { display: block; margin-top: .35rem; color: #60708a; font-size: clamp(.68rem, 1.2vw, .88rem); }
.cc-live-directory-sheet header button {
  flex: 0 0 auto;
  width: 2.65rem;
  height: 2.65rem;
  border: 1px solid var(--cc-line);
  border-radius: 50%;
  color: var(--cc-navy);
  background: #edf3fb;
  font: 500 1.7rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.cc-live-directory-list {
  max-height: calc(min(88dvh, 48rem) - 6.5rem);
  padding: clamp(.7rem, 1.5vw, 1rem);
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}
.cc-live-directory-card {
  min-width: 0;
  min-height: 8.5rem;
  padding: .85rem;
  display: grid;
  align-content: center;
  gap: .28rem;
  border: 1px solid rgba(11, 94, 215, .16);
  border-radius: .85rem;
  color: var(--cc-navy);
  background: linear-gradient(135deg, #fff, #edf7ff 72%, #fff4cf);
  text-decoration: none;
  box-shadow: 0 .6rem 1.5rem rgba(19, 63, 127, .08);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.cc-live-directory-card:hover,
.cc-live-directory-card:focus-visible { transform: translateY(-2px); border-color: var(--cc-blue); box-shadow: 0 .9rem 2rem rgba(19, 63, 127, .16); }
.cc-live-directory-card > small { color: #df225e; font-size: .62rem; font-weight: 950; letter-spacing: .08em; }
.cc-live-directory-card > small[data-state="lobby"],
.cc-live-directory-card > small[data-state="results"] { color: var(--cc-blue); }
.cc-live-directory-card > strong { overflow: hidden; color: var(--cc-blue); font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.cc-live-directory-card > span { overflow: hidden; color: #52627b; font-size: .78rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.cc-live-directory-card > div { margin-top: .3rem; display: flex; justify-content: space-between; gap: .6rem; }
.cc-live-directory-card > div b { color: #5d6d86; font-size: .72rem; }
.cc-live-directory-card[data-demo="true"] { border-style: dashed; background: linear-gradient(135deg, #fff8dc, #edf7ff 72%); }
.cc-live-directory-card[data-demo="true"] > small { color: #a44a00; }
.cc-live-directory-empty { grid-column: 1 / -1; min-height: 9rem; display: grid; place-content: center; gap: .35rem; padding: 1rem; border: 1px dashed var(--cc-line); border-radius: .85rem; color: #60708a; background: #fff; text-align: center; }
.cc-live-directory-empty strong { color: var(--cc-blue); font-size: 1.25rem; }

.cc-live-tv-badge,
.cc-live-host-badge {
  position: fixed;
  z-index: 80;
  top: max(.65rem, env(safe-area-inset-top));
  right: max(.65rem, env(safe-area-inset-right));
  padding: .45rem .72rem;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  color: #fff;
  background: rgba(220, 20, 75, .92);
  box-shadow: 0 .4rem 1.4rem rgba(7, 27, 71, .2);
  font: 900 .72rem/1 system-ui, sans-serif;
  letter-spacing: .05em;
  pointer-events: none;
}

.cc-live-host-launch { border-color: #f72c62 !important; background: #f72c62 !important; color: #fff !important; }
.cc-live-host-entry .cc-live-host-launch { width: 100%; min-height: 3rem; border-radius: .65rem; font-weight: 900; }
.cc-live-host-launch.is-floating { position: fixed; z-index: 90; right: max(.7rem, env(safe-area-inset-right)); bottom: max(.7rem, env(safe-area-inset-bottom)); min-height: 2.8rem; padding: .55rem .8rem; border-radius: 999px; font: 900 .72rem system-ui, sans-serif; }
.cc-live-host-dialog,
.cc-live-consent-dialog {
  position: fixed;
  z-index: 200;
  inset: 50% auto auto 50%;
  width: min(calc(100vw - 1.2rem), 34rem);
  max-height: calc(100dvh - 1.2rem);
  overflow: auto;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  display: grid;
  gap: .75rem;
  padding: 1rem;
  border: 2px solid var(--cc-blue);
  border-radius: 1rem;
  color: var(--cc-navy);
  background: #fff;
  box-shadow: 0 2rem 7rem rgba(7, 27, 71, .42);
  font-family: system-ui, sans-serif;
}
.cc-live-consent-dialog { z-index: 230; width: min(calc(100vw - 1.2rem), 31rem); gap: .85rem; padding: clamp(1rem, 4vw, 1.45rem); border-color: #f72cac; }
.cc-live-host-dialog[hidden], .cc-live-consent-dialog[hidden], .cc-live-host-badge[hidden], .cc-live-tv-badge[hidden] { display: none !important; }
.cc-live-host-dialog h2, .cc-live-host-dialog p, .cc-live-consent-dialog h2, .cc-live-consent-dialog p { margin: 0; }
.cc-live-host-dialog h2, .cc-live-consent-dialog h2 { color: var(--cc-blue); font-size: clamp(1.55rem, 7vw, 2rem); line-height: 1.02; }
.cc-live-host-dialog > p:not(.cc-live-kicker) { color: #53627b; line-height: 1.42; }
.cc-live-kicker { color: #df1c65; font-size: .7rem; font-weight: 950; letter-spacing: .12em; }
.cc-live-host-state { padding: .65rem; border-radius: .65rem; color: var(--cc-blue); background: #edf5ff; text-align: center; }
.cc-live-host-url { width: 100%; box-sizing: border-box; padding: .72rem; border: 1px solid var(--cc-line); border-radius: .55rem; color: var(--cc-navy); background: #f7f9fd; font: 700 .8rem system-ui, sans-serif; }
.cc-live-host-toggles { display: grid; gap: .45rem; }
.cc-live-host-toggles label { display: flex; align-items: center; gap: .55rem; color: #37465e; font-weight: 750; }
.cc-live-host-toggles input { width: 1.2rem; height: 1.2rem; }
.cc-live-host-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cc-live-host-actions button { min-height: 3rem; padding: .6rem; border: 1px solid var(--cc-blue); border-radius: .6rem; color: #fff; background: var(--cc-blue); font-weight: 900; }
.cc-live-host-actions .cc-live-danger { border-color: #e32e58; background: #e32e58; }
.cc-live-host-actions .cc-live-quiet { color: var(--cc-navy); border-color: var(--cc-line); background: #edf1f7; }
.cc-live-host-feedback { min-height: 1.2em; color: #53627b; text-align: center; }
.cc-live-consent-dialog > p:not(.cc-live-kicker) { color: #40516c; line-height: 1.42; }
.cc-live-consent-privacy { padding: .8rem; border-radius: .7rem; background: #eef6ff; font-size: .82rem; }
.cc-live-consent-actions { display: grid; gap: .55rem; }
.cc-live-consent-actions button { width: 100%; min-height: 3.4rem; padding: .7rem; border: 1px solid var(--cc-blue); border-radius: .7rem; color: #fff; background: var(--cc-blue); font: 900 .88rem/1.15 system-ui, sans-serif; }
.cc-live-consent-actions button.cc-live-quiet { color: var(--cc-navy); border-color: var(--cc-line); background: #edf1f7; }
.cc-live-consent-actions button:disabled { opacity: .55; }

.cc-live-watch { min-height: 100dvh; margin: 0; color: var(--cc-navy); background: var(--cc-paper); font-family: Inter, ui-rounded, system-ui, sans-serif; }
.cc-live-watch * { box-sizing: border-box; }
.cc-live-watch [hidden] { display: none !important; }
.cc-live-watch-header { min-height: 4.4rem; padding: .55rem clamp(.7rem, 2vw, 1.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--cc-line); background: rgba(255, 255, 255, .92); }
.cc-live-watch-header img { display: block; width: min(12rem, 42vw); height: 3.25rem; object-fit: contain; object-position: left center; }
.cc-live-watch-header > div { display: flex; align-items: center; gap: .65rem; }
.cc-live-watch-header strong { padding: .42rem .65rem; border-radius: 999px; color: #fff; background: #e52a5c; font-size: .72rem; }
.cc-live-watch-header strong[data-state="lobby"], .cc-live-watch-header strong[data-state="results"] { background: var(--cc-blue); }
.cc-live-watch-header span, .cc-live-watch-header small { color: #5d6d86; font-size: .75rem; font-weight: 800; }
.cc-live-watch-layout { height: calc(100dvh - 4.4rem); padding: clamp(.55rem, 1.5vw, 1rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem); gap: clamp(.55rem, 1.3vw, 1rem); }
.cc-live-stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: .5rem; }
.cc-live-game-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.cc-live-game-heading > div { min-width: 0; display: grid; gap: .18rem; }
.cc-live-game-heading h1 { margin: 0; color: var(--cc-blue); font-size: clamp(1.25rem, 3vw, 2.4rem); line-height: .95; letter-spacing: -.035em; }
.cc-live-game-heading small { color: #a44a00; font-size: .65rem; font-weight: 850; }
.cc-live-game-heading span { color: #5d6d86; font-size: clamp(.72rem, 1.25vw, .95rem); font-weight: 900; }
.cc-live-scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .7rem; width: min(27rem, 100%); margin: auto; }
.cc-live-scoreboard span { min-width: 0; padding: .35rem .6rem; display: flex; align-items: center; justify-content: space-between; gap: .4rem; border: 1px solid var(--cc-line); border-radius: .65rem; background: #fff; }
.cc-live-scoreboard small { overflow: hidden; color: #66748b; font-size: .65rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.cc-live-scoreboard strong { color: var(--cc-blue); font-size: 1.5rem; }
.cc-live-scoreboard span:last-child strong { color: var(--cc-pink); }
.cc-live-scoreboard i { color: #8290a5; font-style: normal; font-weight: 950; }
.cc-live-canvas-shell { position: relative; min-height: 0; overflow: hidden; border: 1px solid var(--cc-line); border-radius: 1rem; background: #eaf4ff; box-shadow: 0 1rem 3rem rgba(20, 55, 110, .1); }
#liveCanvas { display: block; width: 100%; height: 100%; }
.cc-live-stale, .cc-live-game-change, .cc-live-ended { position: absolute; z-index: 4; inset: 50% auto auto 50%; transform: translate(-50%, -50%); padding: .75rem 1rem; border-radius: .7rem; color: #fff; background: rgba(7, 27, 71, .9); text-align: center; font-weight: 900; }
.cc-live-game-change { display: grid; gap: .2rem; min-width: min(22rem, 80%); }
.cc-live-game-change small { color: var(--cc-yellow); letter-spacing: .13em; }
.cc-live-game-change strong { font-size: clamp(1.5rem, 5vw, 3.2rem); }
.cc-live-ended { width: min(28rem, 85%); padding: 1.25rem; }
.cc-live-ended strong { color: var(--cc-yellow); font-size: 1.35rem; }
.cc-live-ended a { display: inline-block; padding: .65rem .85rem; border-radius: .55rem; color: var(--cc-navy); background: var(--cc-yellow); font-weight: 950; text-decoration: none; }
.cc-live-reaction-stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cc-live-reaction-burst { position: absolute; left: var(--burst-x); bottom: -3rem; font-size: clamp(2rem, 6vw, 4rem); animation: cc-live-burst 1.2s ease-out forwards; }
@keyframes cc-live-burst { 70% { opacity: 1; } 100% { bottom: 82%; opacity: 0; transform: rotate(14deg) scale(1.25); } }
.cc-live-reactions { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; }
.cc-live-reactions button { min-height: 2.8rem; padding: .35rem; border: 1px solid var(--cc-line); border-radius: 999px; background: #fff; font-size: 1.25rem; }
.cc-live-reactions small { color: #55657e; font-size: .62rem; font-weight: 900; }
.cc-live-chat { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; border: 1px solid var(--cc-line); border-radius: 1rem; overflow: hidden; background: #fff; }
.cc-live-chat > header { padding: .85rem; display: grid; gap: .15rem; border-bottom: 1px solid var(--cc-line); }
.cc-live-chat > header strong { color: var(--cc-blue); }
.cc-live-chat > header small { color: #718097; }
.cc-live-chat-list { min-height: 0; padding: .75rem; overflow: auto; display: grid; align-content: start; gap: .55rem; }
.cc-live-chat-list p { margin: 0; display: grid; gap: .12rem; }
.cc-live-chat-list strong { color: var(--cc-blue); font-size: .72rem; }
.cc-live-chat-list span { overflow-wrap: anywhere; color: #34445e; font-size: .88rem; line-height: 1.35; }
.cc-live-chat form { padding: .7rem; display: grid; grid-template-columns: minmax(5rem, .7fr) minmax(8rem, 1.3fr) auto; gap: .4rem; border-top: 1px solid var(--cc-line); }
.cc-live-chat label { display: grid; gap: .15rem; color: #75839a; font-size: .58rem; font-weight: 850; }
.cc-live-chat input { min-width: 0; width: 100%; padding: .6rem; border: 1px solid var(--cc-line); border-radius: .5rem; color: var(--cc-navy); background: #f8faff; }
.cc-live-chat button { align-self: end; min-height: 2.45rem; border: 0; border-radius: .5rem; color: #fff; background: var(--cc-blue); font-weight: 900; }
.cc-live-chat form small { grid-column: 1 / -1; color: #dc315c; }
.cc-live-chat[data-enabled="false"] form button { opacity: .45; pointer-events: none; }
.cc-live-safety { margin: 0; padding: .55rem .7rem; color: #8290a5; background: #f5f7fb; font-size: .62rem; line-height: 1.35; }

@media (max-width: 760px) {
  .cc-live-directory-launch { min-height: 36px; padding: 0 .55rem; font-size: .61rem; }
  .cc-live-directory-list { grid-template-columns: 1fr; }
  .cc-live-directory-card { min-height: 7.4rem; }
  .cc-live-watch-header { min-height: 3.8rem; }
  .cc-live-watch-header img { height: 2.7rem; }
  .cc-live-watch-header small { display: none; }
  .cc-live-watch-layout { height: auto; min-height: calc(100dvh - 3.8rem); grid-template-columns: 1fr; grid-template-rows: minmax(23rem, 62dvh) minmax(18rem, 38dvh); }
  .cc-live-chat form { grid-template-columns: minmax(4rem, .65fr) minmax(7rem, 1.35fr); }
  .cc-live-chat form button { grid-column: 1 / -1; }
  .cc-live-reactions button { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-live-reaction-burst { animation-duration: .01ms; }
}