/* ════════════════════════════════════
   VALORANT — AGENT ROULETTE  v8
   ════════════════════════════════════ */

:root {
  --bg:      #0F1923;
  --bg2:     #13212e;
  --red:     #FF4655;
  --white:   #ECE8E1;
  --off:     #9EACB4;
  --gold:    #F5C64C;
  --card-w:  clamp(130px, 17vw, 210px);
  --portrait-h: 400px;
  --reveal-h:   650px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: var(--bg); overflow: hidden; }
body { font-family: 'Barlow Condensed', 'Rajdhani', sans-serif; color: var(--white); }

/* scanlines */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px,
    rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
}

/* ═══════════════════════════════════
   SCREENS
   ═══════════════════════════════════ */
.screen {
  display: none; position: relative;
  width: 100%; height: 100vh;
  overflow-x: hidden; overflow-y: visible;
}
.screen.active { display: flex; }

#screen-disclaimer, #screen-loading, #screen-players, #screen-names {
  align-items: center; justify-content: center;
}
#screen-roulette {
  flex-direction: column; align-items: center;
  justify-content: center;
  padding: 80px 20px 20px; gap: 30px;
}
#screen-results {
  flex-direction: column; align-items: center;
  justify-content: flex-end; overflow: visible;
}

.bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,70,85,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,70,85,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.deco-stripe { position: absolute; top: 0; bottom: 0; width: 3px; opacity: 0.2; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--red), transparent); }
.deco-stripe.left  { left: 50px; }
.deco-stripe.right { right: 50px; }

.sc-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 48px 24px; width: 100%; }
.sc-inner.narrow { max-width: 520px; }

/* top labels */
.top-label { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 200; white-space: nowrap; pointer-events: none; }
.top-label-block { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
#roulette-label { position: absolute; top: 24px; left: 0; right: 0; text-align: center; z-index: 10; pointer-events: none; }

/* bottom zone */
.bottom-zone { position: relative; z-index: 1; width: 100%; max-width: 1400px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 16px 28px; overflow: visible; }

/* ═══════════════════════════════════
   DISCLAIMER
   ═══════════════════════════════════ */
.disclaimer-box {
  max-width: 520px; width: 90%;
  background: rgba(255,70,85,0.04);
  border: 1px solid rgba(255,70,85,0.25);
  padding: 36px 32px 32px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.disclaimer-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.4em; color: var(--gold);
  text-transform: uppercase; text-align: center;
}
.disclaimer-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem; line-height: 1.65;
  color: var(--off); text-align: center;
}
.disclaimer-text strong { color: var(--white); }

/* ═══════════════════════════════════
   LOADING
   ═══════════════════════════════════ */
#screen-loading { background: var(--bg); }
.loading-content { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.loading-vicon { width: 110px; height: auto; animation: vicon-pulse 2s ease-in-out infinite; filter: drop-shadow(0 0 24px rgba(255,70,85,0.7)); }
@keyframes vicon-pulse { 0%,100%{filter:drop-shadow(0 0 18px rgba(255,70,85,0.6));} 50%{filter:drop-shadow(0 0 40px rgba(255,70,85,1));} }
.loading-bar-outer { width: 300px; height: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.loading-bar-inner { height: 100%; width: 0%; background: var(--red); transition: width 0.12s linear; box-shadow: 0 0 12px var(--red); }
.loading-label { font-size: 0.75rem; letter-spacing: 0.35em; color: var(--off); text-transform: uppercase; }
.dots { animation: blink 1.2s steps(3,end) infinite; }
@keyframes blink { 0%{content:'';} 33%{content:'.';} 66%{content:'..';} 100%{content:'...';} }

/* ═══════════════════════════════════
   LOGO
   ═══════════════════════════════════ */
.logo-img { height: 62px; width: auto; display: block; filter: drop-shadow(0 0 14px rgba(255,70,85,0.45)); user-select: none; }
.logo-img.small { height: 42px; }

/* ═══════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════ */
.screen-eyebrow { font-size: 0.72rem; letter-spacing: 0.4em; color: var(--red); text-transform: uppercase; position: relative; }
.screen-eyebrow::before,.screen-eyebrow::after { content: ''; display: inline-block; vertical-align: middle; width: 28px; height: 1px; background: var(--red); margin: 0 10px; }
.screen-eyebrow.gold { color: var(--gold); }
.screen-eyebrow.gold::before,.screen-eyebrow.gold::after { background: var(--gold); }
.screen-eyebrow.anim-pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
.screen-heading { font-family: 'Barlow Condensed',sans-serif; font-weight: 800; font-size: 2.2rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ═══════════════════════════════════
   COUNT BUTTONS
   ═══════════════════════════════════ */
.count-grid { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.count-btn {
  width: 86px; height: 86px; background: transparent;
  border: 1px solid rgba(255,255,255,0.18); color: var(--white);
  font-family: 'Barlow Condensed',sans-serif; font-weight: 900; font-size: 2.4rem;
  cursor: pointer; position: relative; overflow: hidden;
  clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  transition: border-color 0.2s;
}
.count-btn::before { content: ''; position: absolute; inset: 0; background: var(--red); transform: scaleY(0); transform-origin: bottom; transition: transform 0.25s ease; z-index: -1; }
.count-btn:hover { border-color: var(--red); }
.count-btn:hover::before { transform: scaleY(1); }
.count-btn:focus { outline: none; }
.count-btn::after { content: ''; position: absolute; top: 0; right: 0; width: 14px; height: 14px; background: var(--red); clip-path: polygon(100% 0,100% 100%,0 0); z-index: 2; opacity: 0; transition: opacity 0.2s; }
.count-btn:hover::after { opacity: 1; }

/* ═══════════════════════════════════
   BUTTONS
   ═══════════════════════════════════ */
.valo-btn { font-family: 'Barlow Condensed',sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 13px 42px; cursor: pointer; clip-path: polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); transition: color 0.2s,transform 0.12s; position: relative; overflow: hidden; border: none; }
.valo-btn:focus { outline: none; }
.valo-btn:active { transform: scale(0.97); }
.valo-btn.solid { background: var(--red); color: var(--white); }
.valo-btn.solid:hover { background: #e63445; }
.valo-btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,0.25); color: var(--off); }
.valo-btn.ghost:hover { border-color: var(--red); color: var(--white); }
.valo-btn.big { font-size: 1.15rem; padding: 14px 56px; }

/* ═══════════════════════════════════
   SLIDE SYSTEM  (Screen 2)
   ═══════════════════════════════════ */
#slide-stage {
  position: relative; z-index: 1;
  width: 100%; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.slide-card {
  position: absolute;
  width: min(500px, 90vw);
  display: flex; flex-direction: column; align-items: center;
  gap: 0;
}

.slide-counter { display: flex; align-items: baseline; gap: 6px; margin-bottom: 28px; }
.slide-counter-num { font-family: 'Barlow Condensed',sans-serif; font-weight: 900; font-size: 4.5rem; color: var(--red); line-height: 1; text-shadow: 0 0 40px rgba(255,70,85,0.5); filter: drop-shadow(0 4px 16px rgba(255,70,85,0.3)); }
.slide-counter-sep { font-family: 'Barlow Condensed',sans-serif; font-weight: 700; font-size: 1.8rem; color: rgba(255,255,255,0.25); }
.slide-counter-total { font-family: 'Barlow Condensed',sans-serif; font-weight: 700; font-size: 1.8rem; color: rgba(255,255,255,0.25); }

.slide-name-block { width: 100%; margin-bottom: 32px; position: relative; }
.slide-name-label { display: block; font-size: 0.62rem; letter-spacing: 0.45em; color: var(--off); text-transform: uppercase; margin-bottom: 8px; }
.slide-name-input { width: 100%; background: transparent; border: none; font-family: 'Barlow Condensed',sans-serif; font-weight: 800; font-size: 2.4rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); outline: none; text-align: center; caret-color: var(--red); }
.slide-name-input::placeholder { color: rgba(255,255,255,0.18); }

.slide-underline { height: 2px; width: 100%; background: linear-gradient(90deg, transparent, var(--red), transparent); margin-top: 6px; box-shadow: 0 0 12px rgba(255,70,85,0.4); transition: background 0.2s, box-shadow 0.2s; }
.slide-name-block.invalid .slide-underline { background: linear-gradient(90deg, transparent, #ff1a2e, transparent); box-shadow: 0 0 20px rgba(255,26,46,0.8); }
.slide-name-block.invalid .slide-name-input { color: #ff6070; }
.slide-name-block.invalid .slide-name-input::placeholder { color: rgba(255,70,85,0.6); }
.slide-error-msg { font-size: 0.6rem; letter-spacing: 0.35em; color: var(--red); text-transform: uppercase; margin-top: 8px; opacity: 0; transition: opacity 0.2s; }
.slide-name-block.invalid .slide-error-msg { opacity: 1; }

@keyframes shake {
  0%,100% { transform: translateX(0); }
  15%      { transform: translateX(-8px); }
  35%      { transform: translateX(7px); }
  55%      { transform: translateX(-5px); }
  75%      { transform: translateX(4px); }
  90%      { transform: translateX(-2px); }
}

.slide-role-label { font-size: 0.62rem; letter-spacing: 0.45em; color: var(--off); text-transform: uppercase; margin-bottom: 14px; align-self: flex-start; }

.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-bottom: 36px; }
.role-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 18px 12px 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); transition: border-color 0.2s, background 0.2s; position: relative; overflow: hidden; }
.role-card::after { content: ''; position: absolute; top: 0; right: 0; width: 10px; height: 10px; background: rgba(255,255,255,0.08); clip-path: polygon(100% 0, 100% 100%, 0 0); transition: background 0.2s; }
.role-card img { width: 38px; height: 38px; object-fit: contain; filter: brightness(0) invert(1) opacity(0.35); transition: filter 0.25s; }
.role-card-name { font-family: 'Barlow Condensed',sans-serif; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.35); transition: color 0.25s; }
.role-card.libre { grid-column: 1 / -1; flex-direction: row; gap: 10px; padding: 14px 20px; justify-content: center; }
.role-card.libre .role-card-name { font-size: 0.75rem; letter-spacing: 0.4em; }
.role-card.active { background: rgba(255,70,85,0.12); border-color: var(--red); box-shadow: 0 0 28px rgba(255,70,85,0.2), inset 0 0 30px rgba(255,70,85,0.06); }
.role-card.active::after { background: var(--red); }
.role-card.active img { filter: brightness(0) invert(1) opacity(1); }
.role-card.active .role-card-name { color: var(--white); }

.slide-nav { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; }
.slide-nav-btn { font-family: 'Barlow Condensed',sans-serif; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; border: none; background: transparent; color: var(--off); padding: 10px 0; transition: color 0.2s, opacity 0.2s; min-width: 110px; }
.slide-nav-btn:focus { outline: none; }
.slide-nav-btn.prev { text-align: left; }
.slide-nav-btn.prev:hover { color: var(--white); }
.slide-nav-btn.next { text-align: right; color: var(--white); font-size: 1rem; letter-spacing: 0.18em; }
.slide-nav-btn.next:hover { color: var(--red); }
.slide-nav-btn.go { background: var(--red); color: var(--white); padding: 12px 28px; text-align: center; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); letter-spacing: 0.2em; font-size: 1rem; transition: background 0.2s, transform 0.1s; }
.slide-nav-btn.go:hover { background: #e63445; }
.slide-nav-btn.go:active { transform: scale(0.97); }
.slide-nav-btn.hidden { opacity: 0; pointer-events: none; }

.slide-dots { display: flex; gap: 8px; align-items: center; }
.slide-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.2); transition: background 0.3s, transform 0.3s; }
.slide-dot.active { background: var(--red); transform: scale(1.5); box-shadow: 0 0 8px rgba(255,70,85,0.7); }

/* ═══════════════════════════════════
   JACKPOT  (Screen 3)
   ═══════════════════════════════════ */
#jackpot-machine {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: flex-start;
  position: relative; z-index: 1;
  width: 100%;
  padding: 0 16px;
}

.jackpot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  transition: box-shadow 0.3s;
}

.jackpot-player-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(0.6rem, 1.1vw, 0.88rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.jackpot-window {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #060e12;
  border: 1px solid rgba(255,255,255,0.12);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: border-color 0.25s, box-shadow 0.25s;
}

.jackpot-col.stopped .jackpot-window {
  border-color: var(--red);
  box-shadow: 0 0 35px rgba(255,70,85,0.55), inset 0 0 24px rgba(255,70,85,0.07);
}

.jackpot-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.jackpot-cell {
  width: 100%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.jackpot-grad {
  position: absolute;
  left: 0; right: 0;
  height: 38%;
  z-index: 3;
  pointer-events: none;
}
.jackpot-grad.top    { top: 0;    background: linear-gradient(to bottom, rgba(6,14,18,0.92), transparent); }
.jackpot-grad.bottom { bottom: 0; background: linear-gradient(to top,    rgba(6,14,18,0.92), transparent); }

/* Red line at center of window */
.jackpot-center-line {
  position: absolute;
  left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  height: 2px;
  background: rgba(255,70,85,0.3);
  z-index: 4;
  pointer-events: none;
}

.jackpot-agent-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(0.6rem, 1.1vw, 0.88rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  text-align: center;
  text-shadow: 0 0 18px rgba(255,70,85,0.7);
  min-height: 1.4em;
  transform: translateY(4px);
}

/* Mobile: single column sequential */
@media (max-width: 599px) {
  #jackpot-machine {
    justify-content: center;
  }
  .jackpot-col {
    width: min(260px, 80vw) !important;
  }
}

/* ═══════════════════════════════════
   CARDS GRID  (Screen 4)
   ═══════════════════════════════════ */
.cards-grid {
  display: flex; flex-wrap: nowrap; gap: 10px;
  justify-content: center; align-items: flex-end;
  width: 100%; overflow: visible;
}

/* ════════════════════════════════════
   AGENT CARD  —  Victory screen style
   ════════════════════════════════════ */
.agent-card {
  width: var(--card-w); position: relative;
  overflow: visible; flex-shrink: 0;
  opacity: 0; transform: translateY(30px);
}
.card-portrait {
  position: relative; height: var(--portrait-h);
  overflow: hidden; background: #0a1a1e;
  border: 1px solid rgba(255,255,255,0.18); border-bottom: none;
}
.agent-card.revealed .card-portrait { overflow: visible; background: transparent; border-color: transparent; }

.card-portrait .agent-bg { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
.agent-card.revealed .agent-bg { opacity: 0.15; }

.full-portrait {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 220%; height: var(--portrait-h);
  background-size: auto 100%; background-position: bottom center; background-repeat: no-repeat;
  z-index: 3; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,0.85));
}

.card-panel {
  position: relative; z-index: 5;
  background: rgba(6,14,18,0.92);
  border: 1px solid rgba(255,255,255,0.22);
  text-align: center; padding: 10px 10px 12px;
}
.card-panel::before { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; background: rgba(255,255,255,0.55); }

.panel-agent { font-family: 'Barlow Condensed',sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.32em; color: rgba(255,255,255,0.5); text-transform: uppercase; margin-bottom: 1px; clip-path: inset(0 100% 0 0); }
.panel-player { font-family: 'Barlow Condensed',sans-serif; font-size: clamp(1.1rem,1.5vw,1.45rem); font-weight: 900; letter-spacing: 0.04em; color: #fff; text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 7px; opacity: 0; transform: translateY(5px); }
.panel-sep { width: 100%; height: 1px; background: rgba(255,255,255,0.15); margin-bottom: 6px; }
.panel-stat-label { font-size: 0.56rem; letter-spacing: 0.3em; color: rgba(255,255,255,0.4); text-transform: uppercase; margin-bottom: 2px; opacity: 0; }
.panel-stat-value { display: flex; align-items: center; justify-content: center; gap: 5px; opacity: 0; }
.role-icon { width: 13px; height: 13px; object-fit: contain; filter: brightness(0) invert(1) opacity(0.6); }
.panel-stat-text { font-family: 'Barlow Condensed',sans-serif; font-size: clamp(0.9rem,1.1vw,1.05rem); font-weight: 700; letter-spacing: 0.06em; color: rgba(255,255,255,0.88); text-transform: uppercase; }

/* ═══════════════════════════════════
   FX
   ═══════════════════════════════════ */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 100; overflow: hidden; }
.particle { position: absolute; width: 5px; height: 5px; border-radius: 50%; pointer-events: none; }