.qc-page { max-width: none; padding: 0; margin: 0; }
.qc-page-header {
  padding: 6px 16px;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.qc-page-header h1 { font-size: 16px; margin: 0; }
.qc-page-header .gp-tag { font-size: 12px; color: #9aa; }

.qc-layout {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: calc(100vh - 72px);
}

@media (min-width: 900px) {
  .qc-layout { grid-template-columns: 1fr 340px !important; }
}

.qc-stream-pane {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.qc-stream-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border: 0;
  border-radius: 0;
}
.qc-stream-embed { position: absolute; inset: 0; }
.qc-stream-embed iframe,
.qc-stream-embed video,
.qc-stream-embed img.qc-mjpeg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
  
  object-fit: fill;
  background: #000;
}

.qc-line-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 5;
}
.qc-line-svg line {
  stroke: #ff3030;
  stroke-width: 0.8;
  stroke-dasharray: 2 2;
  filter: drop-shadow(0 0 6px rgba(255,48,48,.7));
}

#qc-boxes rect {
  fill: none;
  stroke: #7ff800;
  stroke-width: 1;
  filter: drop-shadow(0 0 4px rgba(127,248,0,.6));
  vector-effect: non-scaling-stroke;
  transition: x .22s linear, y .22s linear, width .22s linear, height .22s linear;
}

.qc-stream-shield {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: default;
}

.qc-stream-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  padding: 14px;
  z-index: 3;
}
.qc-target-hud,
.qc-count-hud {
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 700;
  min-width: 90px;
  text-align: center;
}
.qc-target-hud-label,
.qc-count-hud-label {
  font-size: 10px;
  color: #9aa;
  display: block;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.qc-target-hud-val,
.qc-count-hud-val {
  font-size: 28px;
  color: #fce403;
  display: block;
  font-variant-numeric: tabular-nums;
}

.qc-count-hud { display: none; }
.qc-layout[data-phase="counting"] .qc-count-hud { display: block; }
.qc-layout[data-phase="waiting"] .qc-target-hud { display: none; }
.qc-layout[data-phase="settled"] .qc-target-hud { display: none; }
.qc-layout[data-phase="cancelled"] .qc-target-hud { display: none; }

.qc-stream-status {
  font-size: 13px;
  color: #9aa;
  text-align: center;
  padding: 4px 0;
}

.qc-pool-meter {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.3));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.qc-pool-bar {
  position: relative;
  flex: 1;
  min-height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .12s ease, border-color .12s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.qc-pool-bar:hover { transform: translateY(-1px); }
.qc-pool-bar > span { position: relative; z-index: 1; }
.qc-pool-bar .qc-pool-bar-label {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  flex: 0 0 auto;
}
.qc-pool-bar .qc-pool-bar-amt {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  flex: 1 1 auto;
  text-align: right;
}
.qc-pool-bar .qc-pool-bar-pct {
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  min-width: 32px;
  text-align: center;
}
.qc-pool-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  transition: width .5s cubic-bezier(.2,.8,.2,1);
  z-index: 0;
}
.qc-pool-bar-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 60%);
  pointer-events: none;
}

.qc-pool-under   { border-color: rgba(58,143,255,.35); }
.qc-pool-under   .qc-pool-bar-fill {
  background: linear-gradient(90deg, rgba(58,143,255,.55), rgba(58,143,255,.2));
}
.qc-pool-under   .qc-pool-bar-pct {
  color: #cfe3ff; border-color: rgba(58,143,255,.35); background: rgba(58,143,255,.18);
}

.qc-pool-between { border-color: rgba(252,228,3,.35); }
.qc-pool-between .qc-pool-bar-fill {
  background: linear-gradient(90deg, rgba(252,228,3,.5), rgba(252,228,3,.18));
}
.qc-pool-between .qc-pool-bar-pct {
  color: #fff4a1; border-color: rgba(252,228,3,.4); background: rgba(252,228,3,.15);
}

.qc-pool-over    { border-color: rgba(239,60,78,.35); }
.qc-pool-over    .qc-pool-bar-fill {
  background: linear-gradient(90deg, rgba(239,60,78,.55), rgba(239,60,78,.2));
}
.qc-pool-over    .qc-pool-bar-pct {
  color: #ffc7cd; border-color: rgba(239,60,78,.4); background: rgba(239,60,78,.15);
}

.qc-phase-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: clamp(16px, 2.5vw, 26px);
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.qc-phase-banner[data-phase-color="waiting"]   { background: linear-gradient(90deg, rgba(154,170,170,.25), rgba(154,170,170,.08)); }
.qc-phase-banner[data-phase-color="betting"]   { background: linear-gradient(90deg, rgba(127,248,0,.3), rgba(127,248,0,.08)); color: #7ff800; }
.qc-phase-banner[data-phase-color="counting"]  { background: linear-gradient(90deg, rgba(252,228,3,.3), rgba(252,228,3,.08)); color: #fce403; }
.qc-phase-banner[data-phase-color="settled"]   { background: linear-gradient(90deg, rgba(58,143,255,.3), rgba(58,143,255,.08)); color: #3a8fff; }
.qc-phase-banner[data-phase-color="cancelled"] { background: linear-gradient(90deg, rgba(239,60,78,.3), rgba(239,60,78,.08)); color: #ef3c4e; }
.qc-phase-banner[data-phase-color="paused"]    { background: linear-gradient(90deg, rgba(154,170,170,.2), rgba(154,170,170,.06)); color: #9aa; }

.qc-bet-pane {
  background: var(--s-bg-2, #101827);
  border-left: 1px solid var(--s-line, rgba(255, 255, 255, .08));
  border-radius: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  min-width: 0;
}

@media (max-width: 899px) {
  .qc-layout { grid-template-columns: 1fr; }
  .qc-bet-pane {
    border-left: 0;
    border-top: 1px solid var(--s-line, rgba(255, 255, 255, .08));
  }
  .qc-stream-box { aspect-ratio: 16 / 9; }
}

.qc-timer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: #ccd;
}
.qc-timer strong {
  color: #7ff800;
  font-variant-numeric: tabular-nums;
  font-size: 20px;
}

.qc-bet-pane label {
  font-size: 12px;
  color: #9aa;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: -6px;
}

#qc-amount {
  width: 100%;
  padding: 10px 12px;
  background: #0a0e18;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  box-sizing: border-box;
}
#qc-amount:focus { outline: 2px solid rgba(127, 248, 0, .4); border-color: #7ff800; }

.qc-buckets {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qc-bucket {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.2));
  cursor: pointer;
  transition: all .15s;
  text-align: center;
  font-family: inherit;
  color: #fff;
}
.qc-bucket-under  { --acc: #3a8fff; }
.qc-bucket-between { --acc: #fce403; }
.qc-bucket-over   { --acc: #ef3c4e; }
.qc-bucket:hover:not(:disabled) {
  border-color: var(--acc);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--acc) 30%, transparent);
}
.qc-bucket.is-active {
  border-color: var(--acc);
  box-shadow: 0 0 16px color-mix(in srgb, var(--acc) 40%, transparent);
}
.qc-bucket:disabled {
  opacity: .5;
  cursor: default;
}
.qc-bucket-icon { width: 48px; height: 48px; }

.qc-bucket-mult {
  font-size: 26px;
  font-weight: 900;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--acc) 40%, transparent);
}
.qc-bucket-label {
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 800;
  color: var(--acc);
  opacity: .85;
}

.qc-bucket-range {
  font-size: 17px;
  font-weight: 900;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  margin-top: 3px;
  text-shadow: 0 0 8px color-mix(in srgb, var(--acc) 35%, transparent);
}

.qc-bucket-payout {
  font-size: 20px;
  font-weight: 900;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
}
.qc-bucket-win-label {
  font-size: 10px;
  color: #9aa;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: -4px;
}

.qc-bucket-mypos:empty { display: none; }
.qc-bucket-mypos {
  font-size: 11px;
  color: #4caf50;
  font-weight: 700;
  margin-top: 2px;
}

.qc-my-bet:empty { display: none; }
.qc-my-bet {
  font-size: 13px;
  padding: 8px 10px;
  background: rgba(252, 228, 3, .12);
  border: 1px solid rgba(252, 228, 3, .35);
  border-radius: 8px;
  color: #fce403;
  margin: 0;
}

.qc-reveal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}
.qc-reveal[hidden] { display: none; }
.qc-reveal-inner {
  text-align: center;
  animation: qcPop .5s cubic-bezier(.2, 1.4, .3, 1);
  padding: 24px;
}
.qc-reveal-count {
  font-size: clamp(80px, 16vw, 220px);
  font-weight: 900;
  color: #fce403;
  line-height: 1;
  text-shadow: 0 0 40px rgba(252, 228, 3, .6);
  font-variant-numeric: tabular-nums;
}
.qc-reveal-label {
  font-size: 14px;
  color: #9aa;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-top: -8px;
}
.qc-reveal-bucket {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin-top: 14px;
}
.qc-reveal-payout {
  font-size: 22px;
  color: #7ff800;
  margin-top: 8px;
}
@keyframes qcPop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.qc-recent {
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 16px;
}
.qc-video { background: #000; }
.qc-recent h2 {
  font-size: 18px;
  margin: 0 0 12px;
  color: #fff;
}
.qc-recent-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--s-bg-2, #101827);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .06);
}
.qc-recent-table th,
.qc-recent-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: 13px;
  color: #ddd;
}
.qc-recent-table tr:last-child td { border-bottom: 0; }
.qc-recent-table th { color: #9aa; font-weight: 600; background: rgba(255, 255, 255, .02); }
.qc-recent-empty { text-align: center; color: #788; font-style: italic; }