.auto-draw-options {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.auto-draw-options .check-toggle { position: relative; }
.auto-draw-options .check-toggle > div { display: grid; gap: 4px; }
.auto-draw-options .check-toggle input {
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.auto-draw-options .check-toggle:has(input:focus-visible) {
  outline: 2px solid #f3b94f;
  outline-offset: 2px;
}
.auto-draw-style-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.auto-draw-style-options > label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  cursor: pointer;
}
.auto-draw-style-options > label:has(input:checked) {
  border-color: #f3b94f;
  background: rgba(243,185,79,.08);
}
.auto-draw-style-options input[type="radio"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #f3b94f;
}
.auto-draw-style-options span {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.auto-draw-style-options small {
  color: var(--muted, #a0a8b3);
  line-height: 1.5;
}
.live-draw-band.is-box-draw {
  --box-gold: #efc576;
  --box-card-width: clamp(132px, 18vw, 180px);
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  min-width: 0;
  padding: clamp(18px, 3vw, 32px);
  border: 1px solid #2b3039;
  border-radius: 18px;
  background: radial-gradient(ellipse at 50% 100%, rgba(178,122,47,.08), transparent 65%), #0e1117;
}
.auto-draw-panel .live-draw-band.is-box-draw { width: min(100%, 1120px); }
.is-box-draw .live-draw-copy,
.is-box-draw .live-draw-page-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 20px;
  row-gap: 9px;
  max-width: none;
  min-width: 0;
  text-align: left;
}
.is-box-draw .live-draw-copy > *,
.is-box-draw .live-draw-page-copy > * { grid-column: 1; }
.is-box-draw .eyebrow {
  margin: 0;
  color: #54d9be;
  font-size: 10px;
  letter-spacing: .14em;
}
.live-draw-band.is-box-draw [data-live-draw-title] {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  text-transform: none;
  overflow-wrap: anywhere;
}
.live-draw-band.is-box-draw [data-live-draw-status] {
  color: #9ba7b6;
  font-size: 13px;
  line-height: 1.5;
}
.is-box-draw .box-draw-proof {
  position: relative;
  z-index: 5;
  align-self: start;
  grid-column: 2;
  grid-row: 1 / span 3;
  width: 170px;
  min-width: 0;
  color: #8a97a8;
  font-size: 11px;
}
.box-draw-proof summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #303844;
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
}
.box-draw-proof summary::-webkit-details-marker { display: none; }
.box-draw-proof summary::after { content: "+"; color: #d0d7df; }
.box-draw-proof[open] summary::after { content: "−"; }
.box-draw-proof-content {
  position: absolute;
  z-index: 6;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 12px;
  width: min(360px, calc(100vw - 72px));
  max-height: min(360px, 70vh);
  padding: 14px;
  overflow: auto;
  border: 1px solid #35404e;
  border-radius: 8px;
  background: #121923;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  text-align: left;
}
.box-draw-proof:not([open]) .box-draw-proof-content,
.box-draw-proof-content [hidden] { display: none; }
.box-draw-proof [data-live-draw-hash] {
  display: block;
  margin: 0;
  font: 10px/1.6 Consolas, monospace;
  overflow-wrap: anywhere;
}
.box-draw-proof-code { display: grid; gap: 4px; min-width: 0; }
.box-draw-proof-code small { color: #8a97a8; font-size: 10px; }
.box-draw-proof-code b { color: #c8d2df; font: 11px/1.6 Consolas, monospace; overflow-wrap: anywhere; }
.box-draw-proof-content a { color: #efc576; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.is-box-draw .live-draw-wheel-group { display: none; }
.is-box-draw [data-live-draw-wheel],
.is-box-draw [data-live-draw-sound] { display: none !important; }
.campaign-auto-draw.is-box-draw { max-width: 1120px; margin-inline: auto; }
.campaign-auto-draw.is-box-draw .campaign-auto-draw-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: start;
  justify-items: stretch;
  gap: 9px 20px;
  width: 100%;
  max-width: none;
  min-width: 0;
  text-align: left;
}
.campaign-auto-draw.is-box-draw .campaign-auto-draw-copy > :not(.box-draw-proof) { grid-column: 1; min-width: 0; }
.campaign-auto-draw.is-box-draw .campaign-auto-draw-progress { width: 100%; }
.campaign-auto-draw.is-box-draw .campaign-auto-draw-copy > span { color: #54d9be; }
.campaign-auto-draw.is-box-draw .campaign-auto-draw-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  gap: 12px;
}
.campaign-auto-draw.is-box-draw.is-auto-waiting .campaign-auto-draw-stage,
.campaign-auto-draw.is-box-draw.is-auto-final-countdown .campaign-auto-draw-stage { display: none; }
.campaign-auto-draw.is-box-draw .box-draw-proof {
  grid-column: 2;
  grid-row: 1 / span 4;
  width: 220px;
  margin: 0;
}
.live-draw-band.is-box-draw .live-draw-stage {
  width: 100%;
  min-width: 0;
  min-height: 0;
  gap: 12px;
}
.box-draw-reel {
  display: none;
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #323b47;
  border-radius: 12px;
  background: #10151d;
  box-shadow: 0 16px 36px rgba(0,0,0,.22);
}
.is-box-draw .box-draw-reel { display: block; }
.box-draw-heading,
.box-draw-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
}
.box-draw-heading {
  border-bottom: 1px solid #242e3a;
  background: linear-gradient(100deg, rgba(255,255,255,.025), transparent);
}
.box-draw-heading > div { display: grid; gap: 5px; min-width: 0; }
.box-draw-kicker {
  color: #8a98aa;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .17em;
}
.box-draw-heading strong {
  color: #ecf0f5;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.box-draw-heading > span {
  flex-shrink: 0;
  padding: 7px 10px;
  border: 1px solid rgba(239,197,118,.24);
  border-radius: 5px;
  color: var(--box-gold);
  background: rgba(239,197,118,.05);
  font-size: 10px;
  letter-spacing: .06em;
}
.box-draw-viewport {
  position: relative;
  overflow: hidden;
  padding: 22px 0;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 50%, #25303e, #10151d 75%);
}
.box-draw-viewport::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #10151d, transparent 16%, transparent 84%, #10151d);
}
.box-draw-track {
  position: relative;
  display: flex;
  gap: 12px;
  width: max-content;
  will-change: transform;
}
.box-draw-card {
  --box-color: #5e9fff;
  position: relative;
  isolation: isolate;
  display: grid;
  flex: 0 0 var(--box-card-width);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  justify-items: center;
  gap: 7px;
  width: var(--box-card-width);
  height: 202px;
  padding: 14px 10px 12px;
  overflow: hidden;
  border: 1px solid #3b4758;
  border-bottom: 3px solid var(--box-color);
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 15%, rgba(121,143,177,.13), transparent 70%), #1a2330;
  text-align: center;
  transition: opacity .35s, border-color .35s, background .35s;
}
.box-draw-card > :not(.box-draw-card-background) {
  position: relative;
  z-index: 2;
}
.box-draw-card-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  pointer-events: none;
}
.box-draw-card.has-steam-avatar .box-draw-card-background { opacity: 1; }
.box-draw-card.has-steam-avatar::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,12,18,.42), rgba(8,12,18,.12) 35%, rgba(8,12,18,.72) 67%, rgba(8,12,18,.97));
  pointer-events: none;
}
.box-draw-card.has-steam-avatar .box-draw-card-art { visibility: hidden; }
.box-draw-card.has-steam-avatar .box-draw-card-label { color: #e0e6ef; text-shadow: 0 1px 4px #000; }
.box-draw-card.has-steam-avatar strong { text-shadow: 0 2px 8px #000, 0 0 2px #000; }
.box-draw-card.has-steam-avatar .box-draw-card-owner { color: #e0e6ef; }
.box-draw-tier-1 { --box-color: #b884ff; }
.box-draw-tier-2 { --box-color: #df77af; }
.box-draw-tier-3 { --box-color: #efbd60; }
.box-draw-card-label {
  color: #8290a3;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .15em;
}
.box-draw-card-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}
.box-draw-card-art svg {
  width: 54px;
  height: 42px;
  stroke: #74849b;
  stroke-width: 1.6;
  opacity: .7;
}
.box-draw-card-art.has-image svg { display: none; }
.box-draw-card-art img {
  width: 100%;
  height: 100%;
  max-height: 69px;
  object-fit: contain;
  filter: drop-shadow(0 6px 5px rgba(0,0,0,.3));
}
.box-draw-card strong {
  color: #f5f7fa;
  font: 800 clamp(34px, 5vw, 48px)/1.1 Consolas, monospace;
  letter-spacing: -.045em;
}
.box-draw-card.is-long-number strong { font-size: clamp(24px, 3.5vw, 34px); }
.box-draw-card-owner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #c1cbd8;
  font-size: 10px;
  line-height: 1.4;
}
.box-draw-card-owner > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.box-draw-card-avatar {
  display: grid;
  flex: 0 0 21px;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: #9daec4;
  background: rgba(255,255,255,.04);
  font-size: 8px;
}
.box-draw-focus {
  position: absolute;
  z-index: -1;
  inset-block: 12px;
  left: 50%;
  width: calc(var(--box-card-width) + 14px);
  border: 1px solid rgba(239,197,118,.18);
  border-radius: 11px;
  background: rgba(239,197,118,.035);
  box-shadow: 0 0 45px rgba(239,197,118,.06);
  transform: translateX(-50%);
  pointer-events: none;
}
.box-draw-marker {
  position: absolute;
  z-index: 3;
  inset-block: 0;
  left: 50%;
  width: 2px;
  pointer-events: none;
  transform: translateX(-50%);
}
.box-draw-marker::before,
.box-draw-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  border-right: 9px solid transparent;
  border-left: 9px solid transparent;
  filter: drop-shadow(0 0 7px rgba(239,197,118,.5));
  transform: translateX(-50%);
}
.box-draw-marker::before { top: 0; border-top: 13px solid var(--box-gold); }
.box-draw-marker::after { bottom: 0; border-bottom: 13px solid var(--box-gold); }
.box-draw-reel.is-complete .box-draw-card:not(.is-winner) { opacity: .38; }
.box-draw-card.is-winner {
  border-color: var(--box-gold);
  background: radial-gradient(ellipse at 50% 0%, rgba(248,192,84,.2), transparent 80%), #302719;
  box-shadow: inset 0 0 25px rgba(239,197,118,.07), 0 0 20px rgba(239,197,118,.12);
}
.box-draw-card.is-winner strong { color: #ffe1a3; text-shadow: 0 0 25px rgba(239,197,118,.18); }
.box-draw-card.is-winner .box-draw-card-label { color: #ccb27d; }
.box-draw-card.is-winner .box-draw-card-art svg { stroke: var(--box-gold); opacity: .9; }
.box-draw-card.is-winner .box-draw-card-avatar { color: #efd09a; border-color: rgba(239,197,118,.25); }
.box-draw-footer {
  min-height: 43px;
  padding-block: 11px;
  border-top: 1px solid #242e3a;
  color: #7f8d9f;
  font-size: 10px;
}
.box-draw-state { display: inline-flex; align-items: center; gap: 7px; color: #b2becf; }
.box-draw-state > i { width: 5px; height: 5px; border-radius: 50%; background: #6c7e94; }
.is-opening .box-draw-state > i { background: var(--box-gold); box-shadow: 0 0 8px rgba(239,197,118,.5); }
.is-complete .box-draw-state > i { background: #54d9be; }
.box-draw-progress { height: 2px; background: #242c37; }
.box-draw-progress > i { display: block; width: var(--box-progress, 0%); height: 100%; background: var(--box-gold); }
.box-draw-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px 16px;
  border-top: 1px solid #242e3a;
  background: #0f141b;
}
.box-draw-controls[hidden] { display: none; }
.box-draw-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #394351;
  border-radius: 6px;
  color: #c0ccdc;
  background: #18202b;
  font: 600 11px/1.3 Arial, sans-serif;
  cursor: pointer;
}
.box-draw-controls button[hidden] { display: none; }
.box-draw-controls button:hover { color: var(--box-gold); border-color: rgba(239,197,118,.45); }
.box-draw-controls button:focus-visible { outline: 2px solid var(--box-gold); outline-offset: 2px; }
.box-draw-controls button:disabled { opacity: .5; cursor: default; }
.box-draw-controls svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; }
.box-draw-controls [data-box-replay] { margin-left: auto; }
.is-box-draw [data-live-draw-sound] { display: none; }
.is-box-draw .live-draw-result.is-box-result {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  min-height: 112px;
  padding: 20px 24px;
  border: 1px solid rgba(239,197,118,.28);
  border-radius: 10px;
  background: linear-gradient(105deg, rgba(118,83,32,.17), transparent 75%), #13171c;
  box-shadow: none;
  text-align: left;
}
.box-draw-result-symbol {
  display: grid;
  flex: 0 0 50px;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(239,197,118,.2);
  border-radius: 12px;
  background: rgba(239,197,118,.06);
}
.box-draw-result-symbol svg { width: 30px; height: 30px; stroke: var(--box-gold); stroke-width: 1.5; }
.box-draw-result-copy { display: grid; gap: 6px; min-width: 0; }
.is-box-draw .box-draw-result-copy small,
.is-box-draw .box-draw-result-prize small {
  color: #a99269;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .11em;
}
.is-box-draw .box-draw-result-copy strong {
  color: #ffe1a3;
  font: 800 clamp(30px, 4vw, 44px)/1 Consolas, monospace;
  letter-spacing: -.04em;
}
.is-box-draw .box-draw-result-copy .box-draw-winner-name { color: #e3e8ee; font-size: 13px; font-weight: 500; }
.box-draw-result-prize {
  display: grid;
  gap: 6px;
  max-width: 40%;
  min-width: 0;
  margin-left: auto;
  padding-left: 20px;
  border-left: 1px solid rgba(239,197,118,.16);
}
.is-box-draw .box-draw-result-prize span { color: #c5cdd8; font-size: 12px; font-weight: 500; line-height: 1.5; }
.is-box-draw .live-draw-result.is-pending { border-color: #303b48; background: #121923; }
.is-pending .box-draw-result-symbol { opacity: .5; }
.is-box-draw .is-pending .box-draw-result-copy strong { color: #e5ebf3; font-size: 26px; }
.is-box-draw .is-pending .box-draw-result-copy span { color: #94a3b6; font-size: 12px; font-weight: 400; }
.box-draw-result-wait { display: flex; gap: 5px; margin-left: auto; }
.box-draw-result-wait i { width: 5px; height: 5px; border-radius: 50%; background: var(--box-gold); animation: box-draw-wait 1s ease-in-out infinite alternate; }
.box-draw-result-wait i:nth-child(2) { animation-delay: .2s; }
.box-draw-result-wait i:nth-child(3) { animation-delay: .4s; }
@keyframes box-draw-wait { to { opacity: .2; transform: translateY(-3px); } }
@media (max-width: 640px) {
  .is-box-draw .live-draw-copy,
  .is-box-draw .live-draw-page-copy { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .is-box-draw .box-draw-proof { grid-column: 1; grid-row: auto; width: 170px; margin-top: 3px; }
  .campaign-auto-draw.is-box-draw .campaign-auto-draw-copy { grid-template-columns: minmax(0, 1fr); }
  .campaign-auto-draw.is-box-draw .box-draw-proof { grid-column: 1; grid-row: auto; width: 170px; justify-self: start; }
  .box-draw-proof-content { right: auto; left: 0; }
  .box-draw-proof summary { padding-block: 7px; }
  .live-draw-band.is-box-draw [data-live-draw-title] { font-size: 26px; }
  .box-draw-heading, .box-draw-footer { padding-inline: 12px; gap: 10px; }
  .box-draw-heading strong { font-size: 13px; }
  .box-draw-heading > span { padding: 6px 8px; font-size: 9px; }
  .box-draw-card { height: 188px; padding-inline: 8px; }
  .box-draw-card-label { font-size: 7px; letter-spacing: .1em; }
  .box-draw-card-owner { gap: 4px; font-size: 9px; }
  .box-draw-card-avatar { width: 18px; height: 18px; flex-basis: 18px; font-size: 7px; }
  .box-draw-footer { font-size: 9px; }
  .is-box-draw .live-draw-result.is-box-result { flex-wrap: wrap; gap: 12px; padding: 16px; }
  .box-draw-result-symbol { width: 40px; height: 40px; flex-basis: 40px; border-radius: 9px; }
  .box-draw-result-symbol svg { width: 25px; height: 25px; }
  .box-draw-result-copy { flex: 1; }
  .box-draw-result-prize { width: 100%; max-width: none; margin: 0; padding: 10px 0 0; border: 0; border-top: 1px solid rgba(239,197,118,.12); }
}
@media (max-width: 540px) {
  .auto-draw-style-options { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .box-draw-card { transition: none; }
  .box-draw-result-wait i { animation: none; }
}