/*
  룰렛 오버레이 기본 스타일입니다.
  OBS 오버레이(src/views/RouletteOverlay.vue)와 관리 화면 미리보기가 같은 클래스
  이름과 이 파일을 그대로 씁니다. 그래서 디자이너는 이 파일 하나만 고치면 되고,
  스트리머별 사용자 CSS(GET /v1/streamer-profiles/:profileId/roulette-overlay)는
  @layer 밖에 주입되어 같은 명시도에서 이 기본값을 덮어씁니다.

  DOM 구조(재생 1건):
    main.roulette-overlay[.roulette-tier-white|green|gold|red][.is-spinning|.is-result]
                        [data-playback="playing|idle"][data-phase][data-profile]
      p.roulette-setup                      UID·재생 키 안내(idle, 카드 대신)
      section.roulette-card
        header.roulette-header
          span.roulette-donor
          span.roulette-amount
        div.roulette-media                 선택: 미디어가 없으면 렌더하지 않습니다.
          video | img.roulette-media-el
        div.roulette-grid[style="--roulette-slot-count: N"]
          div.roulette-slot                 (1..10개 동시 진행)
            div.roulette-reel[style="--roulette-reel-steps: S"]
              div.roulette-cell              결과 셀이 항상 첫 번째(DOM index 0)
              div.roulette-cell ...
              div.roulette-cell.roulette-result 는 첫 셀에 함께 붙습니다.

  JS 가 넣는 값(인라인 스타일):
    루트      --roulette-spin-duration / --roulette-result-duration (서버 값 ms)
    .roulette-grid  --roulette-slot-count (슬롯 수)
    .roulette-reel  --roulette-reel-steps (칸 수 - 1, 단위 없는 숫자)

  릴 애니메이션: 위에서 아래로 흐릅니다. 정지 상태(translateY(0))에서 첫 셀이
  보이므로 결과 셀을 스트립 맨 앞에 두고, 시작 위치에서 (칸 수 - 1)칸만큼 위로
  올린 뒤 0 까지 내려오게 합니다.
*/

@layer roulette {
  .roulette-overlay {
    --roulette-cell-h: 96px;
    --roulette-media-max-h: 30vh;
    --roulette-radius: 18px;
    --roulette-gap: 18px;
    --roulette-text: #fff;
    --roulette-muted: #c4c8d0;
    --roulette-spin-duration: 6500ms;
    --roulette-result-duration: 2500ms;
    position: fixed;
    inset: 0;
    padding: 28px;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--roulette-text);
    font-family: 'Pretendard', 'Noto Sans KR', system-ui, sans-serif;
    background: transparent;
  }
  .roulette-overlay * { box-sizing: border-box; }
  :where(.roulette-overlay) :where(p, h1, h2) { margin: 0; }
  .roulette-overlay .roulette-setup { display: inline-block; max-width: min(100%, 46rem); padding: 14px 20px; border-radius: 12px; background: rgb(16 20 29 / .82); font-size: 18px; line-height: 1.5; }

  /* 후원 금액 구간입니다. 루트 클래스 하나만 바뀌고 아래 값들이 함께 바뀝니다. */
  .roulette-tier-white { --roulette-tier-bg: linear-gradient(180deg, #ffffff, #e8ecf4); --roulette-tier-fg: #16181f; --roulette-tier-accent: #4b5468; --roulette-cell-bg: rgb(255 255 255 / .78); --roulette-cell-fg: #16181f; }
  .roulette-tier-green { --roulette-tier-bg: linear-gradient(180deg, #2fc077, #12874c); --roulette-tier-fg: #ffffff; --roulette-tier-accent: #d9ffee; --roulette-cell-bg: rgb(255 255 255 / .16); --roulette-cell-fg: #ffffff; }
  .roulette-tier-gold { --roulette-tier-bg: linear-gradient(180deg, #ffe08a, #dd9c12); --roulette-tier-fg: #2d1f00; --roulette-tier-accent: #6d4a00; --roulette-cell-bg: rgb(0 0 0 / .16); --roulette-cell-fg: #2d1f00; }
  .roulette-tier-red { --roulette-tier-bg: linear-gradient(180deg, #ff5f52, #b2100c); --roulette-tier-fg: #ffffff; --roulette-tier-accent: #ffe0dc; --roulette-cell-bg: rgb(0 0 0 / .2); --roulette-cell-fg: #ffffff; }

  .roulette-card {
    display: grid;
    justify-items: center;
    gap: var(--roulette-gap);
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: 26px 28px 30px;
    border: 1px solid rgb(255 255 255 / .14);
    border-radius: var(--roulette-radius);
    background: var(--roulette-tier-bg, rgb(16 20 29 / .86));
    color: var(--roulette-tier-fg, var(--roulette-text));
    box-shadow: 0 14px 40px rgb(0 0 0 / .22);
    overflow: hidden;
  }
  .roulette-header { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 8px 16px; width: 100%; text-align: center; }
  .roulette-donor { font-size: clamp(16px, 1.5vw, 26px); font-weight: 700; overflow-wrap: anywhere; }
  .roulette-amount { color: var(--roulette-tier-accent, var(--roulette-muted)); font-size: clamp(18px, 1.7vw, 30px); font-weight: 800; font-variant-numeric: tabular-nums; }

  /* 미디어는 카드 위쪽 가운데에 놓고, 카드를 덮지 않도록 높이를 제한합니다. */
  .roulette-media { display: flex; justify-content: center; width: 100%; }
  .roulette-media-el { display: block; width: auto; height: auto; max-width: min(100%, 44rem); max-height: var(--roulette-media-max-h); object-fit: contain; border-radius: 12px; }

  .roulette-grid { display: grid; grid-template-columns: repeat(var(--roulette-slot-count, 1), minmax(0, 1fr)); gap: var(--roulette-gap); width: 100%; }
  .roulette-slot { height: var(--roulette-cell-h); overflow: hidden; border-radius: 12px; background: var(--roulette-cell-bg); }
  .roulette-reel { display: flex; flex-direction: column; }
  .roulette-cell { flex: 0 0 var(--roulette-cell-h); height: var(--roulette-cell-h); display: grid; place-items: center; padding: 0 10px; text-align: center; font-size: clamp(15px, 1.45vw, 26px); font-weight: 700; line-height: 1.25; color: var(--roulette-cell-fg); overflow-wrap: anywhere; }
  .roulette-result { font-weight: 800; }

  /* 위에서 아래로 흐르는 릴입니다. 서버가 준 spinDurationMs 만큼만 움직이고,
     마지막 프레임에서 결과 셀이 정확히 창 안에 멈춥니다. */
  .roulette-overlay.is-spinning .roulette-reel { animation: roulette-reel var(--roulette-spin-duration, 6500ms) cubic-bezier(.12, .62, .02, 1) forwards; }
  @keyframes roulette-reel {
    from { transform: translateY(calc(-1 * var(--roulette-reel-steps, 0) * var(--roulette-cell-h))); }
    to { transform: translateY(0); }
  }

  /* 결과 공개 펄스입니다. 디자인마다 이 키프레임만 바꾸면 됩니다. */
  .roulette-overlay.is-result .roulette-result { animation: roulette-result-pulse var(--roulette-result-duration, 2500ms) ease-out both; }
  @keyframes roulette-result-pulse {
    0% { transform: scale(.86); }
    45% { transform: scale(1.12); }
    100% { transform: scale(1); }
  }

  @media (max-width: 600px) {
    .roulette-overlay { padding: 12px; --roulette-cell-h: 68px; --roulette-gap: 10px; --roulette-radius: 14px; }
    .roulette-card { padding: 18px 16px 22px; }
    .roulette-donor { font-size: 15px; }
    .roulette-amount { font-size: 17px; }
    .roulette-media { --roulette-media-max-h: 24vh; }
    .roulette-cell { font-size: 13px; padding: 0 6px; }
  }

  /* 움직임 최소화 설정에서는 애니메이션을 사실상 끝 상태로 넘깁니다. */
  @media (prefers-reduced-motion: reduce) {
    .roulette-overlay *, .roulette-overlay *::before, .roulette-overlay *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  }
}