/* roulette-themes.css — 포인트룰렛 화면 테마. 어드민(어드민 > 룰렛 화면 테마)에서 고른
   값이 /api/roulette/info 의 theme 로 내려오고, roulette.js 가 #app 에 클래스로 건다.
   클래스가 걸릴 때만 적용되므로 다른 화면에는 영향이 없다.
   서버 화이트리스트: roulette_theme.go 의 rouletteThemes 와 키가 1:1 이어야 한다. */

/* ═══════════════════════════════════════════════════════════════════════
   fest-a — 카니발 레드
   참고 이미지를 가장 직역한 시안. 진홍 무대 전체 + 금색 리본 배너 +
   두꺼운 금링/스터드 + 붉은 SPIN 돔 + 금색 받침대.

   지켜야 할 제약 (JS 소관 — 어기면 화면이 깨진다):
     · .rl-rotor 에 transform 금지 — 스핀 회전이 여기에 실린다. 링 두께는 inset 으로만.
     · .rl-dots i 에 transform 금지 — 전구 원주 배치(반지름 134px 고정)가 인라인으로 들어온다.
       animation 주기는 1.6s 유지 (JS 가 delay 를 1.6s/20 단위로 계산한다).
     · .rl-wheel / .rl-lines / .rl-labels 의 background·color 금지 — 조각 색은 JS 담당.
   모든 선택자는 .fest-a 로 시작하고, @keyframes 는 -a 접미사를 붙인다.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. 무대 ───────────────────────────────────────────────────────── */
.fest-a .rl-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 -6px;
  padding: 14px 8px 18px;
  border: 2px solid #e0b64b;
  border-radius: 20px;
  background:
    radial-gradient(circle closest-side at 50% 30%, #c9242e 0%, #a1151d 42%, #6d0a11 72%, #3d0308 100%);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 226, 160, .28);
}

/* 무대 조명 — 아주 느리게 도는 방사형 광선. transform 은 wrap 의사요소에만 쓴다. */
.fest-a .rl-wrap::before {
  content: '';
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 190px;
  width: 900px;
  height: 900px;
  margin: -450px 0 0 -450px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 214, 130, .13) 0deg 7deg, rgba(255, 214, 130, 0) 7deg 20deg);
  animation: festRaysA 46s linear infinite;
  pointer-events: none;
}

/* 색종이·금화 — 외부 이미지 없이 배경 레이어로만 흩뿌린다.
   radial-gradient 는 반드시 closest-side — 기본값(farthest-corner)이면
   원이 background-size 상자를 넘어 네모로 잘린다. */
.fest-a .rl-wrap::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .75;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle closest-side, #ffd76a 0 100%, transparent 0),
    radial-gradient(circle closest-side, #ffd76a 0 100%, transparent 0),
    radial-gradient(circle closest-side, #ffe9a8 0 100%, transparent 0),
    radial-gradient(circle closest-side, #ff8f97 0 100%, transparent 0),
    radial-gradient(circle closest-side, #ffd76a 0 100%, transparent 0),
    radial-gradient(circle closest-side, #ffe9a8 0 100%, transparent 0),
    linear-gradient(38deg, #ffcf5c 0 100%),
    linear-gradient(-24deg, #ff9aa1 0 100%),
    linear-gradient(64deg, #ffe9a8 0 100%),
    linear-gradient(-52deg, #ffcf5c 0 100%),
    linear-gradient(16deg, #ff9aa1 0 100%),
    linear-gradient(-70deg, #ffe9a8 0 100%);
  background-size:
    9px 9px, 7px 7px, 6px 6px, 8px 8px, 5px 5px, 7px 7px,
    11px 5px, 9px 4px, 12px 5px, 8px 4px, 10px 5px, 9px 4px;
  background-position:
    6% 12%, 92% 18%, 14% 62%, 88% 55%, 78% 8%, 22% 88%,
    4% 34%, 95% 38%, 30% 6%, 68% 92%, 9% 74%, 84% 78%;
}

/* ── 2. 머리말 — 금판 리본 배너 ────────────────────────────────────── */
.fest-a .rl-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  text-align: center;
}
.fest-a .rl-head .rl-eyebrow {
  padding: 3px 14px;
  border: 1px solid #f3d484;
  border-radius: 999px;
  background: linear-gradient(180deg, #7d0d14, #4d060b);
  color: #ffdf9a;
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .16em;
}
/* 제목 금판 — 좌우 삼각 꼬리는 의사요소로 붙인다 */
.fest-a .rl-head h2 {
  position: relative;
  margin: 2px 22px 0;
  padding: 8px 20px;
  border: 2px solid #8a5c10;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffeeb6 0%, #e8b845 52%, #c8901f 100%);
  color: #4a1206;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.fest-a .rl-head h2::before,
.fest-a .rl-head h2::after {
  content: '';
  position: absolute;
  top: 7px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
}
.fest-a .rl-head h2::before {
  left: -22px;
  border-right-color: #8e1119;
  filter: drop-shadow(-1px 2px 2px rgba(0, 0, 0, .5));
}
.fest-a .rl-head h2::after {
  right: -22px;
  border-left-color: #8e1119;
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, .5));
}
.fest-a .rl-head p {
  margin: 0;
  padding: 5px 14px;
  border: 1px solid #e6bd5c;
  border-radius: 999px;
  background: linear-gradient(180deg, #8d1018, #5a070d);
  color: #ffe6ae;
  font-size: 11.5px;
  font-weight: 800;
}

/* ── 3. 보유 포인트 ───────────────────────────────────────────────── */
.fest-a .rl-balance {
  border: 1.5px solid #e0b64b;
  border-radius: 13px;
  background: linear-gradient(180deg, #6f0c13, #48060b);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 226, 160, .22);
}
.fest-a .rl-balance > span { color: #f0c88a; }
.fest-a .rl-balance > strong { color: #fff3d0; }
.fest-a .rl-balance-shop {
  border-color: #f0cd7d;
  background: linear-gradient(180deg, #f6dc9b, #d8ab41);
  color: #4a1206;
}
.fest-a .rl-balance-shop:active { filter: brightness(.92); }

/* ── 4. 휠 ────────────────────────────────────────────────────────── */
/* 아래 받침대가 zone 밖으로 나가므로 여백을 준다. 포인터가 위 카드를 파고들지 않게
   위쪽에도 여유를 둔다. */
.fest-a .rl-zone { margin: 12px auto 46px; }

/* 받침대 — 첫 의사요소라 형제(.rl-rim 등)보다 먼저 칠해져 링 뒤로 들어간다.
   z-index 를 -1 로 내리면 무대 배경 뒤로 사라지므로 건드리지 않는다. */
.fest-a .rl-zone::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 232px;
  width: 96px;
  height: 92px;
  margin-left: -48px;
  background: linear-gradient(90deg, #9a6c18 0%, #f4dc9c 30%, #e2bd58 55%, #96690f 100%);
  clip-path: polygon(38% 0%, 62% 0%, 78% 64%, 100% 64%, 100% 100%, 0% 100%, 0% 64%, 22% 64%);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .5);
}

/* 링 — 금속 결이 도는 두꺼운 금테 */
.fest-a .rl-rim {
  background:
    repeating-conic-gradient(from 0deg,
      #f6e2ab 0deg 6deg, #d9ab3e 6deg 12deg, #9a6c18 12deg 18deg, #d9ab3e 18deg 24deg);
  box-shadow:
    0 0 0 2px #6d4a0d,
    0 10px 32px rgba(0, 0, 0, .6),
    inset 0 0 0 2px rgba(255, 246, 214, .55);
}
/* 링 안쪽 어두운 홈 — closest-side 필수 (기본값이면 검은 원판이 링을 먹는다) */
.fest-a .rl-rim::before {
  content: '';
  position: absolute;
  inset: 23px;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, #4a060b 0 74%, rgba(74, 6, 11, 0) 76%);
  box-shadow: inset 0 0 0 2px #7a5410;
}

/* 로터를 안쪽으로 밀어 링 두께를 만든다. inset 27px → 밴드 반지름 121~148px,
   JS 가 전구를 놓는 134px 가 정확히 밴드 한가운데다(위아래 여유 7/8px). */
.fest-a .rl-rotor { inset: 27px; }
/* 로터 반지름 121px — 기본(104/131) 비율에 맞춰 라벨 반지름을 당긴다. */
.fest-a .rl-labels { --rl-label-r: 96px; }
.fest-a .rl-wheel {
  border: 3px solid #7a5410;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .55);
}
.fest-a .rl-labels span.dim { opacity: .88; }

/* 스터드(금구슬) — 위치와 점등 순서는 JS 담당. 크기·색·그림자만 손댄다. */
.fest-a .rl-dots i {
  width: 12px;
  height: 12px;
  margin: -6px;
  background: radial-gradient(circle closest-side at 34% 30%, #fffaea 0 18%, #ffdd8a 55%, #b8831c 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  animation: festBulbA 1.6s linear infinite;
}

/* 포인터 — 붉은 화살촉. 금링 위에서 확실히 분리돼야 멈춘 칸이 읽힌다. */
.fest-a .rl-pointer {
  top: -12px;
  border-width: 13px;
  border-top-width: 24px;
  border-top-color: #ff3b46;
  filter: drop-shadow(0 0 7px rgba(255, 70, 80, .85)) drop-shadow(0 2px 2px rgba(0, 0, 0, .6));
}

/* SPIN 돔 */
.fest-a .rl-spin {
  width: 92px;
  height: 92px;
  border: 5px solid #f2d489;
  background: radial-gradient(circle closest-side at 50% 30%, #ef3d47 0%, #c2151f 55%, #8c0a12 100%);
  color: #fff6d8;
  font-size: 19px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .5);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55), 0 0 24px rgba(255, 90, 90, .4), inset 0 2px 0 rgba(255, 255, 255, .28);
}
.fest-a .rl-spin small { color: #ffd88a; }
/* 비활성은 filter 대신 색을 직접 지정한다 — grayscale 로 누르면 금테 위에서 고장난 요소처럼 보인다. */
.fest-a .rl-spin:disabled {
  filter: none;
  border-color: #8d7434;
  background: linear-gradient(180deg, #5e2a2d, #3c1719);
  color: #e8d6bd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.fest-a .rl-spin:disabled small { color: #cbb98d; }

/* ── 5. 상태 바 · 버튼 ────────────────────────────────────────────── */
.fest-a .rl-bar {
  border: 1.5px solid #d8ab41;
  border-radius: 12px;
  background: linear-gradient(180deg, #6b0b12, #45060a);
  color: #ffe6ae;
}
.fest-a .rl-bar b { color: #ffd76a; }
.fest-a .rl-bar.rl-tip {
  border-color: rgba(216, 171, 65, .5);
  background: rgba(60, 5, 9, .72);
  color: #f4d6a8;
  word-break: keep-all;   /* 한국어 안내문이 낱말 가운데서 끊기는 것 방지 */
}
.fest-a .rl-btns button {
  border: 1.5px solid #e0b64b;
  border-radius: 12px;
  background: linear-gradient(180deg, #b8202a, #7c0d15);
  color: #ffeabc;
  font-weight: 850;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 226, 160, .25);
}
.fest-a .rl-btns button:active { filter: brightness(.9); }
.fest-a .rl-extra {
  border: 1.5px solid rgba(224, 182, 75, .55);
  border-radius: 12px;
  background: rgba(52, 4, 8, .8);
  color: #f4d6a8;
}
.fest-a .rl-shop-cta {
  border: 2px solid #fff0c4;
  background: linear-gradient(180deg, #f8e3a6, #d6a83c);
  color: #4a1206;
  font-weight: 900;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.fest-a .rl-shop-cta:active { filter: brightness(.93); }

/* ── 6. 애니메이션 ────────────────────────────────────────────────── */
@keyframes festRaysA {
  to { transform: rotate(360deg); }
}
@keyframes festBulbA {
  0%, 100% { background: radial-gradient(circle closest-side at 34% 30%, #d8c08a 0 18%, #a8842f 60%, #6d4d10 100%);
             box-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
  12%      { background: radial-gradient(circle closest-side at 34% 30%, #fffdf2 0 22%, #ffe9a8 58%, #d8a52c 100%);
             box-shadow: 0 0 12px 3px rgba(255, 226, 150, .95), 0 1px 2px rgba(0, 0, 0, .55); }
  38%      { background: radial-gradient(circle closest-side at 34% 30%, #fff6de 0 18%, #ffd76a 58%, #b8831c 100%);
             box-shadow: 0 0 6px 1px rgba(255, 214, 120, .55), 0 1px 2px rgba(0, 0, 0, .55); }
}

/* ── 7. 좁은 화면 ─────────────────────────────────────────────────── */
/* .rl-zone 은 296px 고정이라 #app 좌우 패딩(14px) 안에 안 들어간다.
   무대를 패딩 밖으로 빼서 링이 평평하게 깎이는 것을 막는다. */
@media (max-width: 359px) {
  .fest-a .rl-wrap {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .fest-a .rl-head h2 { margin-inline: 18px; font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .fest-a .rl-wrap::before { animation: none; }
  .fest-a .rl-dots i {
    animation: none;
    background: radial-gradient(circle closest-side at 34% 30%, #fff6de 0 18%, #ffd76a 58%, #b8831c 100%);
    box-shadow: 0 0 8px 2px rgba(255, 214, 120, .6), 0 1px 2px rgba(0, 0, 0, .55);
  }
}
/* fest_b.css — 시안 B "79 골드 카니발"
 *
 * 79TV 절충안: 배경은 앱의 미드나잇 블랙 톤을 유지하되 휠 뒤에 붉은 무대 조명과
 * 방사형 스포트라이트를 깔고, 배너·링·버튼만 참고 이미지처럼 두꺼운 금색으로 올린다.
 * 다른 화면(로비/상점) 옆에 놓아도 같은 앱으로 보이게 채도는 한 단계 눌렀다.
 *
 * 모든 선택자는 .fest-b 하위로만 적용된다. @keyframes 는 전부 b 접미사.
 * 색은 전부 raw hex — 다른 시안과 섞였을 때 var() 재정의 사고를 막기 위함.
 *
 * 건드리지 않은 것 (JS 소관):
 *   .rl-rotor 의 transform    — 스핀 회전
 *   .rl-dots i 의 transform   — 전구 원주 배치 (반지름 134px 고정)
 *   .rl-wheel/.rl-lines/.rl-labels 의 배경·글자색 — 조각 conic-gradient 와 라벨 등급색
 * 링 두께는 .rl-rotor { inset } 만 키워서 확보했다 (27px → 전구가 밴드 정중앙).
 */

/* ─────────────────────────────────────────────────────────
   1. 무대 — 어두운 바탕 + 붉은 스포트라이트 + 색종이
   ───────────────────────────────────────────────────────── */

.fest-b .rl-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 14px;
  padding: 18px 12px 22px;
  border: 1px solid #6d4f1c;
  border-radius: 22px;
  background:
    radial-gradient(112% 46% at 50% 41%, rgba(196, 40, 52, .40) 0%, rgba(126, 20, 32, .22) 42%, rgba(10, 8, 10, 0) 74%),
    radial-gradient(78% 30% at 50% 100%, rgba(150, 28, 38, .26), rgba(10, 8, 10, 0) 76%),
    linear-gradient(180deg, #150c0e 0%, #0d0809 46%, #08080a 100%);
  box-shadow:
    0 0 0 1px rgba(255, 226, 160, .10),
    0 18px 44px rgba(0, 0, 0, .62),
    inset 0 1px 0 rgba(255, 232, 176, .14);
}

/* 방사형 무대 조명 — 휠 중심(50% 41%) 에서 뻗는 아주 옅은 금빛 광선. */
.fest-b .rl-wrap::before {
  content: '';
  position: absolute;
  inset: -34% -46%;
  z-index: 0;
  pointer-events: none;
  transform-origin: 50% 41%;
  background: repeating-conic-gradient(from 0deg at 50% 41%,
    rgba(255, 202, 118, .085) 0deg 4.5deg,
    rgba(255, 202, 118, 0) 4.5deg 11deg);
  -webkit-mask-image: radial-gradient(56% 40% at 50% 41%, #000 0%, rgba(0, 0, 0, .5) 46%, rgba(0, 0, 0, 0) 80%);
  mask-image: radial-gradient(56% 40% at 50% 41%, #000 0%, rgba(0, 0, 0, .5) 46%, rgba(0, 0, 0, 0) 80%);
  animation: fbRaysb 54s linear infinite;
}

/* 색종이·금화·보석 — 외부 이미지 없이 background 레이어로만 흩뿌린다.
   각 레이어는 background-size 로 크기를, background-position 으로 자리를 잡는다. */
.fest-b .rl-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .85;
  background-repeat: no-repeat;
  /* closest-side 필수 — 기본값(farthest-corner)이면 원이 background-size 상자를
     넘어가 네모로 잘린다. 정사각 상자에서 closest-side = 정확히 반지름. */
  background-image:
    /* 금화 4 */
    radial-gradient(circle closest-side at 50% 50%, #fff4c6 0 16%, #f5d05c 44%, #b47b16 88%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side at 50% 50%, #fff4c6 0 16%, #f5d05c 44%, #b47b16 88%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side at 50% 50%, #fff4c6 0 16%, #f5d05c 44%, #b47b16 88%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side at 50% 50%, #fff4c6 0 16%, #f5d05c 44%, #b47b16 88%, rgba(0, 0, 0, 0) 100%),
    /* 루비 · 에메랄드 · 사파이어 · 루비 */
    radial-gradient(circle closest-side at 50% 50%, #ffd3d8 0 14%, #dd4b59 50%, #8c1524 92%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side at 50% 50%, #d8ffe8 0 14%, #38b071 50%, #115c36 92%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side at 50% 50%, #d4ecff 0 14%, #418ed8 50%, #133f74 92%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side at 50% 50%, #ffd3d8 0 14%, #dd4b59 50%, #8c1524 92%, rgba(0, 0, 0, 0) 100%),
    /* 반짝임 */
    radial-gradient(circle closest-side at 50% 50%, #fff8dd 0 24%, rgba(255, 226, 156, .45) 58%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side at 50% 50%, #fff8dd 0 24%, rgba(255, 226, 156, .45) 58%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side at 50% 50%, #fff8dd 0 24%, rgba(255, 226, 156, .45) 58%, rgba(0, 0, 0, 0) 100%),
    /* 색종이 조각 (가로/세로 리본) */
    linear-gradient(#f0cd7d, #f0cd7d),
    linear-gradient(#e0575f, #e0575f),
    linear-gradient(#5fbf8b, #5fbf8b),
    linear-gradient(#d9a441, #d9a441),
    linear-gradient(#e0575f, #e0575f),
    linear-gradient(#7fb6e8, #7fb6e8),
    linear-gradient(#f0cd7d, #f0cd7d);
  background-size:
    12px 12px, 9px 9px, 10px 10px, 8px 8px,
    9px 9px, 8px 8px, 9px 9px, 7px 7px,
    6px 6px, 5px 5px, 6px 6px,
    10px 3px, 3px 10px, 9px 3px, 3px 9px, 8px 3px, 3px 8px, 9px 3px;
  background-position:
    7% 5%, 93% 7%, 89% 90%, 9% 87%,
    23% 8%, 77% 4.5%, 13% 72%, 90% 76%,
    37% 3.5%, 64% 9%, 50% 95%,
    15% 13%, 84% 17%, 31% 92%, 69% 89%, 7% 55%, 93% 47%, 59% 2.5%;
}

/* 실제 콘텐츠는 조명·색종이 위로. (.rl-zone 은 이미 relative 라 무해하다) */
.fest-b .rl-wrap > * {
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────
   2. 헤드 — 금색 리본 배너 + 작은 안내 배너
   ───────────────────────────────────────────────────────── */

/* 세로 flex — eyebrow(span)·h2·p 가 각자 한 줄을 차지하면서도 폭은 내용에
   맞춰 줄어든다. (inline-block 만 쓰면 span 과 h2 가 같은 줄에 붙어버린다) */
.fest-b .rl-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

/* LUCKY SPIN — 작은 금색 알약 */
.fest-b .rl-eyebrow {
  display: inline-block;
  padding: 3px 13px 4px;
  border: 1px solid #8a5c17;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffeeb6 0%, #eec964 42%, #c9942c 100%);
  color: #3b1406;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  text-indent: .2em;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* 79 보너스 룰렛 — 금판 배너 */
.fest-b .rl-head h2 {
  position: relative;
  display: inline-block;
  margin: 11px 0 0;
  padding: 8px 26px 9px;
  border: 2px solid #7c4d12;
  border-radius: 9px;
  background:
    linear-gradient(180deg, #fff6d2 0%, #f7dd97 22%, #e2b249 52%, #b9821f 78%, #f0cf7e 100%);
  color: #3b1406;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.24;
  letter-spacing: -.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .58);
  box-shadow:
    0 4px 0 #7c4d12,
    0 12px 24px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -2px 6px rgba(120, 74, 14, .45);
}

/* 리본 꼬리 — clip-path 가 무시되는 웹뷰에선 각진 리본으로 자연스럽게 폴백된다. */
.fest-b .rl-head h2::before,
.fest-b .rl-head h2::after {
  content: '';
  position: absolute;
  top: 50%;
  z-index: -1;
  width: 24px;
  height: 34px;
  margin-top: -17px;
  background: linear-gradient(180deg, #b7242c 0%, #8d151c 55%, #66090f 100%);
}

.fest-b .rl-head h2::before {
  left: -21px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 30% 50%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 30% 50%);
  box-shadow: inset -7px 0 9px rgba(0, 0, 0, .5);
}

.fest-b .rl-head h2::after {
  right: -21px;
  -webkit-clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%);
  box-shadow: inset 7px 0 9px rgba(0, 0, 0, .5);
}

/* 5분마다 하루 288번 도전 가능! — 작은 진홍 배너 */
.fest-b .rl-head p {
  display: inline-block;
  margin: 12px 0 0;
  padding: 5px 15px 6px;
  border: 1px solid #c99a3c;
  border-radius: 999px;
  background: linear-gradient(180deg, #3d1015 0%, #24080c 100%);
  color: #ffe1a4;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 231, 174, .16);
}

/* ─────────────────────────────────────────────────────────
   3. 보유 포인트 카드
   ───────────────────────────────────────────────────────── */

.fest-b .rl-balance {
  padding: 12px 14px;
  border: 1.5px solid #c99a3c;
  border-radius: 15px;
  background: linear-gradient(180deg, #3d1116 0%, #250a0e 62%, #1b070a 100%);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 234, 176, .18),
    inset 0 -8px 16px rgba(0, 0, 0, .3);
}

/* 금화 아이콘 (flex 첫 아이템으로 들어간다) */
.fest-b .rl-balance::before {
  content: '';
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff6d4 0 20%, #f4cd63 48%, #b8811b 88%, #7d5410 100%);
  box-shadow: inset 0 0 0 2px rgba(112, 72, 12, .55), 0 2px 5px rgba(0, 0, 0, .5);
}

.fest-b .rl-balance > span {
  color: #f2d5a4;
  font-size: 11.5px;
  font-weight: 800;
}

.fest-b .rl-balance > strong {
  font-size: 17.5px;
  font-weight: 900;
  color: #ffdc6a;
  text-shadow: 0 0 12px rgba(255, 198, 70, .5), 0 1px 2px rgba(0, 0, 0, .7);
}

.fest-b .rl-balance-shop {
  padding: 6px 12px;
  border: 1px solid #8a5c17;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffeeb6 0%, #eec964 45%, #cb972e 100%);
  color: #3b1406;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 2px 0 #7c4d12, 0 4px 10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.fest-b .rl-balance-shop:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #7c4d12, 0 2px 6px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* ─────────────────────────────────────────────────────────
   4. 휠 — 두꺼운 금색 링 + 금색 스터드 + 금색 받침대
   ───────────────────────────────────────────────────────── */

/* 위: 포인터 금색 캡이 zone 위로 22px 솟으므로 여유를 준다 (gap 14 + 10 = 24px).
   아래: 받침대가 zone 밖으로 44px 내려온다 (gap 14 + 34 = 48px). */
.fest-b .rl-zone {
  margin: 10px 0 34px;
}

/* 받침대 아랫판 — .rl-zone::before 는 .rl-rim 보다 먼저 칠해져 휠 뒤로 간다 */
.fest-b .rl-zone::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -44px;
  width: 186px;
  height: 24px;
  margin-left: -93px;
  border-radius: 7px 7px 11px 11px;
  background: linear-gradient(180deg, #ffeeb8 0%, #edcb79 26%, #c2912b 62%, #8a5c15 88%, #e3c078 100%);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, .62),
    0 0 0 2px #7c4d12,
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -4px 8px rgba(94, 58, 10, .45);
}

.fest-b .rl-dots {
  z-index: 2;   /* 스터드가 링 위, 휠 옆에서 보이도록 */
}

/* 바깥 금색 링 — 밑판 위에 얹히는 두꺼운 금테 */
.fest-b .rl-rim {
  border: 2px solid #7c4d12;
  background:
    /* 안쪽 그림자 테 — 휠과 링의 경계 */
    radial-gradient(circle at 50% 50%,
      rgba(0, 0, 0, 0) 0 79%,
      rgba(52, 26, 4, .85) 81%,
      rgba(52, 26, 4, .25) 84%,
      rgba(0, 0, 0, 0) 86%),
    /* 촘촘한 로프 결(knurling) */
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(255, 245, 214, .20) 0deg 1.4deg,
      rgba(84, 52, 8, .22) 1.4deg 3deg,
      rgba(0, 0, 0, 0) 3deg 6deg),
    /* 금속 광택 */
    conic-gradient(from 202deg at 50% 50%,
      #8a5c15 0deg, #f9e7ae 26deg, #cf9c33 60deg, #7d5211 96deg,
      #f4d894 132deg, #c08f2c 170deg, #85570f 208deg, #fff0bd 246deg,
      #cb9830 284deg, #7a4d12 322deg, #8a5c15 360deg);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, .68),
    0 0 0 1px rgba(255, 232, 170, .28),
    0 0 34px rgba(214, 96, 60, .22),
    inset 0 2px 4px rgba(255, 255, 255, .35),
    inset 0 -7px 15px rgba(0, 0, 0, .42);
}

/* 받침대 목 — border 사다리꼴(clip-path 불필요). box-sizing:border-box 라
   width 70px 가 아랫변, 좌우 border 14px 를 뺀 42px 가 윗변이다.
   윗변은 zone 바닥에서 22px 위 → 그 높이의 휠 폭(155px) 안쪽이라 뒤로 숨는다. */
.fest-b .rl-rim::after {
  /* 링 밴드 위로 올라와 아래쪽 호와 전구를 덮어서 뒤로 내린다 */
  z-index: -1;
  content: '';
  position: absolute;
  left: 50%;
  bottom: -22px;
  width: 70px;
  height: 0;
  margin-left: -35px;
  border-style: solid;
  border-width: 0 14px 44px 14px;
  border-color: transparent transparent #cf9c33 transparent;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55));
}

/* 스터드(전구) — 12px 금구슬. JS 가 transform 으로 반지름 134px 원주에 배치하고
   animation-delay 로 순차 점등하므로 여기선 크기·색·그림자만 손댄다.
   주기는 반드시 1.6s 유지 (JS delay 가 1.6s/20 단위로 계산돼 있다). */
.fest-b .rl-dots i {
  width: 12px;
  height: 12px;
  margin: -6px;
  background: radial-gradient(circle at 34% 28%, #fff2c4 0 18%, #e7c268 48%, #9c6d1b 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(90, 58, 10, .65);
  animation: fbBulbb 1.6s linear infinite;
}

@keyframes fbBulbb {
  0%, 100% {
    background: radial-gradient(circle at 34% 28%, #f0dda8 0 16%, #c6a044 46%, #7a5412 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(90, 58, 10, .7), 0 0 5px rgba(255, 190, 80, .3);
  }
  12% {
    background: radial-gradient(circle at 34% 28%, #fffdf3 0 26%, #ffeaa8 54%, #d9a839 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(126, 84, 16, .45), 0 0 14px 4px rgba(255, 226, 142, .92);
  }
  38% {
    background: radial-gradient(circle at 34% 28%, #fff5d1 0 18%, #e8c168 48%, #9a6d1b 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(100, 66, 12, .6), 0 0 8px rgba(255, 206, 108, .5);
  }
}

/* 금테를 두껍게 만드는 유일한 손잡이 — 회전자를 안쪽으로 더 밀어넣는다.
   inset 27px → 링 밴드가 반지름 121~148px(27px 두께)이 되고, JS 가 반지름
   134px 에 고정 배치하는 전구가 밴드 정중앙(위아래 여유 7/8px)에 앉는다.
   transform 은 절대 쓰지 않는다 — 스핀 회전이 여기에 실린다. */
.fest-b .rl-rotor {
  inset: 27px;
}
/* 로터 반지름 121px — 기본(104/131) 비율에 맞춰 라벨 반지름을 당긴다. */
.fest-b .rl-labels { --rl-label-r: 96px; }

/* 휠 본체 — 배경(conic)은 JS 소관. 테두리·그림자만 금테에 맞춰 어둡게. */
.fest-b .rl-wheel {
  border: 3px solid #57380c;
  box-shadow:
    inset 0 0 0 2px rgba(255, 232, 170, .22),
    inset 0 0 30px rgba(0, 0, 0, .5);
}

/* 포인터 — 금테 두른 진홍 화살촉 + 금색 캡 */
.fest-b .rl-pointer {
  top: -15px;
  border-style: solid;
  border-width: 30px 14px 0 14px;
  border-color: #e2333f transparent transparent transparent;
  filter:
    drop-shadow(0 1.6px 0 #f8dfa0)
    drop-shadow(0 -1.6px 0 #f8dfa0)
    drop-shadow(1.6px 0 0 #f8dfa0)
    drop-shadow(-1.6px 0 0 #f8dfa0)
    drop-shadow(0 7px 9px rgba(0, 0, 0, .7));
}

.fest-b .rl-pointer::before {
  content: '';
  position: absolute;
  left: -11px;
  top: -37px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff8dc 0 20%, #f2cd75 52%, #b3831f 100%);
  box-shadow: inset 0 0 0 2px rgba(112, 72, 12, .6);
}

/* 중앙 SPIN — 진홍 원형 + 굵은 금테 */
.fest-b .rl-spin {
  width: 96px;
  height: 96px;
  transform: translate(-50%, -50%);
  border: 4px solid #f0cd7d;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, #e33f42 0%, #bb2027 46%, #7d0f14 100%);
  color: #fff4d6;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.12;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .65), 0 0 12px rgba(255, 190, 90, .45);
  box-shadow:
    0 0 0 2px #7c4d12,
    0 9px 20px rgba(0, 0, 0, .62),
    0 0 24px rgba(255, 148, 62, .3),
    inset 0 3px 7px rgba(255, 255, 255, .32),
    inset 0 -9px 18px rgba(0, 0, 0, .45);
}

.fest-b .rl-spin small {
  color: #ffd88a;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .16em;
  text-indent: .16em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.fest-b .rl-spin:not(:disabled) {
  animation: fbSpinGlowb 2s ease-in-out infinite;
}

@keyframes fbSpinGlowb {
  0%, 100% {
    box-shadow:
      0 0 0 2px #7c4d12,
      0 9px 20px rgba(0, 0, 0, .62),
      0 0 20px rgba(255, 148, 62, .26),
      inset 0 3px 7px rgba(255, 255, 255, .32),
      inset 0 -9px 18px rgba(0, 0, 0, .45);
  }
  50% {
    box-shadow:
      0 0 0 2px #a06d1c,
      0 9px 20px rgba(0, 0, 0, .62),
      0 0 40px 6px rgba(255, 176, 74, .55),
      inset 0 3px 7px rgba(255, 255, 255, .42),
      inset 0 -9px 18px rgba(0, 0, 0, .4);
  }
}

.fest-b .rl-spin:active:not(:disabled) {
  transform: translate(-50%, -50%) scale(.955);
}

.fest-b .rl-spin:disabled {
  filter: saturate(.45) brightness(.72);
}

/* ─────────────────────────────────────────────────────────
   5. 상태 바 / 버튼
   ───────────────────────────────────────────────────────── */

.fest-b .rl-bar {
  padding: 11px 12px;
  border: 1.5px solid #b98f38;
  border-radius: 13px;
  background: linear-gradient(180deg, #2e0f14 0%, #1b070a 100%);
  color: #ffe9c0;
  font-size: 12.5px;
  font-weight: 800;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 231, 174, .14);
}

.fest-b .rl-bar b {
  color: #ffd24a;
  font-weight: 900;
  text-shadow: 0 0 9px rgba(255, 190, 60, .4);
}

.fest-b .rl-bar.rl-tip {
  padding: 9px 12px;
  border-color: rgba(201, 154, 60, .42);
  background: linear-gradient(180deg, #1e0a0d 0%, #140609 100%);
  color: #e9cfa6;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  word-break: keep-all;   /* 한국어가 낱말 가운데서 끊기지 않게 */
}

.fest-b .rl-btns {
  gap: 9px;
}

.fest-b .rl-btns button {
  padding: 13px 8px;
  border: 1.5px solid #d3a54c;
  border-radius: 13px;
  background: linear-gradient(180deg, #b02128 0%, #8b141b 55%, #6e0d13 100%);
  color: #ffeabc;
  font-size: 12.5px;
  font-weight: 850;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  box-shadow:
    0 3px 0 #520810,
    0 8px 16px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 226, 170, .28);
}

.fest-b .rl-btns button:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 #520810, 0 3px 8px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 226, 170, .2);
}

/* 상점 CTA — 가장 화려한 금판 + 광택 스윕 */
.fest-b .rl-shop-cta {
  position: relative;
  overflow: hidden;
  padding: 15px;
  border: 2px solid #7c4d12;
  border-radius: 15px;
  background: linear-gradient(180deg, #fff6d2 0%, #f7dd97 22%, #e2b249 52%, #b9821f 78%, #f0cf7e 100%);
  color: #3b1406;
  font-size: 14.5px;
  font-weight: 900;
  letter-spacing: -.01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
  box-shadow:
    0 4px 0 #7c4d12,
    0 12px 24px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -3px 8px rgba(120, 74, 14, .4);
}

.fest-b .rl-shop-cta::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -40%;
  width: 34%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .72) 50%, rgba(255, 255, 255, 0) 100%);
  animation: fbSweepb 3.6s ease-in-out infinite;
}

@keyframes fbSweepb {
  0%, 62% { left: -40%; }
  92%, 100% { left: 116%; }
}

.fest-b .rl-shop-cta:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #7c4d12, 0 4px 10px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* ─────────────────────────────────────────────────────────
   6. 당첨내역 / 참여 안내 패널
   ───────────────────────────────────────────────────────── */

.fest-b .rl-extra {
  padding: 13px 14px;
  border: 1.5px solid #a8813a;
  border-radius: 15px;
  background: linear-gradient(180deg, #2a0c11 0%, #190709 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 231, 174, .12);
}

.fest-b .rl-extra > b {
  margin-bottom: 9px;
  color: #ffd76a;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.01em;
}

.fest-b .rl-extra-empty {
  color: #dcbf95;
  font-size: 11.5px;
}

.fest-b .rl-hist-row {
  border-top: 1px solid rgba(201, 154, 60, .22);
  color: #f5e6c9;
  font-weight: 650;
}

.fest-b .rl-hist-time {
  color: #cba97a;
}

.fest-b .rl-hist-row b.win {
  color: #83e8ab;
  text-shadow: 0 0 8px rgba(95, 191, 139, .35);
}

.fest-b .rl-hist-row b.lose {
  color: #c5a47c;
}

.fest-b .rl-guide-line {
  color: #ebd8b8;
  font-size: 11.5px;
}

.fest-b .rl-guide-line i {
  color: #ffcf5a;
}

/* ─────────────────────────────────────────────────────────
   7. 좁은 화면 / 모션 최소화
   ───────────────────────────────────────────────────────── */

/* .rl-zone 은 296px 고정이라 좁은 화면에선 무대 여백부터 줄여 잘림을 막는다.
     375px: #app 15 + wrap 12 → 345-24 = 321px (여유 12.5px/변)
     360px: #app 14.4 + wrap 6 → 331-12 = 319px (여유 11.6px/변)
     344px: #app 14   + wrap 6 → 316-12 = 304px (여유  4px/변)
   그 아래는 wrap 여백을 기존 app.css 와 같은 2px 까지 줄여, 원래 스타일보다
   좁아지는 구간이 생기지 않게 한다. */
@media (max-width: 360px) {
  .fest-b .rl-wrap {
    padding: 14px 6px 18px;
    border-radius: 18px;
  }
  .fest-b .rl-head h2 {
    padding: 8px 20px 9px;
    font-size: 20px;
  }
}

@media (max-width: 342px) {
  .fest-b .rl-wrap {
    padding: 12px 2px 16px;
    border-radius: 14px;
  
    /* .rl-zone 은 296px 고정이라 #app 패딩 안에 안 들어간다 — 무대를 밖으로 뺀다 */
    margin-left: -12px; margin-right: -12px;
    padding-left: 4px; padding-right: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fest-b .rl-wrap::before { animation: none; }
  .fest-b .rl-shop-cta::after { animation: none; opacity: 0; }
  .fest-b .rl-spin:not(:disabled) { animation: none; }
  .fest-b .rl-dots i {
    animation: none;
    background: radial-gradient(circle at 34% 28%, #fffaea 0 24%, #ffe4a2 52%, #cb9a30 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(120, 80, 16, .5), 0 0 9px rgba(255, 214, 122, .6);
  }
}

@keyframes fbRaysb {
  to { transform: rotate(360deg); }
}
/* fest_c.css — 시안 C "블랙골드 프리미엄"
 *
 * 카니발 룰렛의 구조(리본 배너 / 두꺼운 스터드 링 / 중앙 원형 버튼 / 금색 스탠드 /
 * 금테두리로 감싼 카드들)는 참고 이미지 그대로 두되, 붉은색 대신 깊은 검정 무대 위에
 * 샴페인골드를 얹어 고급스럽게 만든다. 색종이 대신 금박 조각과 반짝이는 입자를 뿌린다.
 *
 * 규칙:
 *  - 모든 선택자는 .fest-c 로 시작 (여러 시안 동시 비교용)
 *  - @keyframes 이름은 전부 -c 접미사
 *  - CSS 변수 / 외부 이미지 / 외부 폰트 없음. 색은 16진수 직접 기입.
 *  - .rl-rotor 와 .rl-dots i 에는 transform 을 절대 쓰지 않는다 (JS 가 인라인으로 쓴다)
 *  - .rl-wheel / .rl-lines / .rl-labels 의 배경·글자색은 JS 담당이라 손대지 않는다
 *    (테두리 / 그림자 / 가독성용 text-shadow 만 조정)
 */

/* ══════════════════════════════════════════════════════════════
   1. 무대 — 금테를 두른 검은 극장, 위쪽 스포트라이트에서 광선이 퍼진다
   ══════════════════════════════════════════════════════════════ */
.fest-c .rl-wrap {
  position: relative;
  overflow: hidden;
  gap: 14px;
  margin: 4px 0 12px;
  padding: 18px 12px 20px;
  border: 2px solid #8a6414;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 78% 34% at 50% -4%, rgba(240, 205, 125, .22), rgba(0, 0, 0, 0) 72%),
    radial-gradient(circle at 50% 34%, rgba(217, 180, 95, .13), rgba(0, 0, 0, 0) 56%),
    repeating-conic-gradient(from 0deg at 50% 34%,
      rgba(240, 205, 125, .065) 0deg 5deg, rgba(240, 205, 125, 0) 5deg 11deg),
    radial-gradient(ellipse 130% 62% at 50% 108%, #000000 0%, rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #16130d 0%, #0b0a08 44%, #060607 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 200, .18),
    inset 0 0 46px rgba(0, 0, 0, .85),
    0 14px 40px rgba(0, 0, 0, .8);
}

/* 금박 조각 / 금화 — 외부 이미지 없이 그라데이션 점으로만 뿌린다 */
.fest-c .rl-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 18px;
  background:
    radial-gradient(circle at 7% 5%, rgba(255, 244, 205, .95) 0 1.6px, rgba(255, 244, 205, 0) 2.8px),
    radial-gradient(circle at 21% 12%, rgba(217, 180, 95, .8) 0 2.4px, rgba(217, 180, 95, 0) 3.6px),
    radial-gradient(circle at 38% 4%, rgba(255, 250, 228, .9) 0 1.2px, rgba(255, 250, 228, 0) 2.2px),
    radial-gradient(circle at 63% 9%, rgba(240, 205, 125, .7) 0 2px, rgba(240, 205, 125, 0) 3.2px),
    radial-gradient(circle at 82% 3%, rgba(255, 244, 205, .85) 0 1.4px, rgba(255, 244, 205, 0) 2.6px),
    radial-gradient(circle at 94% 15%, rgba(198, 154, 55, .85) 0 2.6px, rgba(198, 154, 55, 0) 3.8px),
    radial-gradient(circle at 4% 27%, rgba(255, 246, 214, .8) 0 1.5px, rgba(255, 246, 214, 0) 2.6px),
    radial-gradient(circle at 96% 34%, rgba(240, 205, 125, .72) 0 1.8px, rgba(240, 205, 125, 0) 3px),
    radial-gradient(circle at 3% 52%, rgba(255, 244, 205, .5) 0 1.6px, rgba(198, 154, 55, .5) 2.2px 5.4px, rgba(198, 154, 55, 0) 6.6px),
    radial-gradient(circle at 97% 58%, rgba(255, 244, 205, .5) 0 1.4px, rgba(198, 154, 55, .45) 2px 4.8px, rgba(198, 154, 55, 0) 6px),
    radial-gradient(circle at 9% 71%, rgba(255, 250, 228, .8) 0 1.3px, rgba(255, 250, 228, 0) 2.4px),
    radial-gradient(circle at 90% 76%, rgba(240, 205, 125, .7) 0 2.1px, rgba(240, 205, 125, 0) 3.4px),
    radial-gradient(circle at 17% 88%, rgba(255, 244, 205, .7) 0 1.5px, rgba(255, 244, 205, 0) 2.7px),
    radial-gradient(circle at 74% 93%, rgba(217, 180, 95, .65) 0 2.2px, rgba(217, 180, 95, 0) 3.5px),
    radial-gradient(circle at 45% 97%, rgba(255, 250, 228, .6) 0 1.2px, rgba(255, 250, 228, 0) 2.3px),
    radial-gradient(circle at 31% 63%, rgba(240, 205, 125, .35) 0 1.6px, rgba(240, 205, 125, 0) 2.8px);
  animation: fest-spark-c 3.4s ease-in-out infinite;
}

/* 두 번째 입자 레이어 — 주기를 어긋나게 해서 반짝임이 겹치지 않게 한다 */
.fest-c .rl-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 19%, rgba(255, 250, 228, .9) 0 1.3px, rgba(255, 250, 228, 0) 2.4px),
    radial-gradient(circle at 29% 7%, rgba(240, 205, 125, .75) 0 1.7px, rgba(240, 205, 125, 0) 2.9px),
    radial-gradient(circle at 52% 3%, rgba(255, 244, 205, .8) 0 1.4px, rgba(255, 244, 205, 0) 2.5px),
    radial-gradient(circle at 71% 16%, rgba(255, 250, 228, .7) 0 1.2px, rgba(255, 250, 228, 0) 2.2px),
    radial-gradient(circle at 88% 24%, rgba(217, 180, 95, .7) 0 2px, rgba(217, 180, 95, 0) 3.2px),
    radial-gradient(circle at 6% 40%, rgba(255, 244, 205, .7) 0 1.3px, rgba(255, 244, 205, 0) 2.4px),
    radial-gradient(circle at 95% 46%, rgba(255, 250, 228, .75) 0 1.5px, rgba(255, 250, 228, 0) 2.6px),
    radial-gradient(circle at 11% 60%, rgba(240, 205, 125, .6) 0 1.9px, rgba(240, 205, 125, 0) 3.1px),
    radial-gradient(circle at 92% 67%, rgba(255, 244, 205, .7) 0 1.3px, rgba(255, 244, 205, 0) 2.4px),
    radial-gradient(circle at 25% 80%, rgba(240, 205, 125, .6) 0 1.6px, rgba(240, 205, 125, 0) 2.8px),
    radial-gradient(circle at 60% 87%, rgba(255, 250, 228, .65) 0 1.2px, rgba(255, 250, 228, 0) 2.3px),
    radial-gradient(circle at 84% 95%, rgba(255, 244, 205, .6) 0 1.4px, rgba(255, 244, 205, 0) 2.5px);
  animation: fest-spark-c 4.9s ease-in-out infinite reverse;
}

@keyframes fest-spark-c {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

/* 내용은 항상 장식 위로 */
.fest-c .rl-wrap > * {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   2. 헤드 — 리본 배너 제목 + 작은 안내 배너
   ══════════════════════════════════════════════════════════════ */
.fest-c .rl-head {
  width: 100%;
  max-width: 310px;
  padding: 2px 0 0;
}

/* "LUCKY SPIN" — 금테 알약 + 양옆 다이아 */
.fest-c .rl-eyebrow {
  position: relative;
  display: inline-block;
  padding: 4px 15px 4px 17px;
  border: 1px solid #a8801f;
  border-radius: 999px;
  background: linear-gradient(180deg, #1c1810 0%, #0b0a07 100%);
  color: #f7e0a4;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .26em;
  box-shadow:
    0 0 16px rgba(217, 180, 95, .3),
    inset 0 1px 0 rgba(255, 240, 200, .16);
}
.fest-c .rl-eyebrow::before,
.fest-c .rl-eyebrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  background: linear-gradient(135deg, #fff6d8, #c69a37);
  transform: rotate(45deg);
  box-shadow: 0 0 7px rgba(255, 232, 168, .8);
}
.fest-c .rl-eyebrow::before { left: -11px; }
.fest-c .rl-eyebrow::after  { right: -11px; }

/* "79 보너스 룰렛" — 금박 리본 배너 (양끝 제비꼬리 + 금박 스윕) */
.fest-c .rl-head h2 {
  position: relative;
  display: block;
  margin: 12px 26px 0;
  padding: 12px 10px 13px;
  border-radius: 5px;
  color: #150f02;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(255, 251, 232, .6);
  background-image:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 62%),
    repeating-linear-gradient(112deg, rgba(255, 252, 236, .14) 0 2px, rgba(120, 86, 20, .1) 2px 5px),
    linear-gradient(180deg, #fff6d8 0%, #f4d68c 16%, #dcb14c 42%, #b98a2a 58%, #d7ab48 74%, #f8ecc4 100%);
  background-size: 240% 100%, auto, auto;
  background-repeat: no-repeat, repeat, no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(109, 79, 20, .55),
    inset 0 1px 0 rgba(255, 253, 240, .9),
    0 7px 18px rgba(0, 0, 0, .8),
    0 0 26px rgba(217, 180, 95, .22);
  animation: fest-foil-c 4.6s linear infinite;
}
@keyframes fest-foil-c {
  0%   { background-position: 165% 0, 0 0, 0 0; }
  100% { background-position: -65% 0, 0 0, 0 0; }
}
/* 리본 제비꼬리 — z-index -1 로 배너 뒤에 깔린다 (h2 는 stacking context 를 만들지 않는다) */
.fest-c .rl-head h2::before,
.fest-c .rl-head h2::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 7px;
  bottom: 7px;
  width: 28px;
  background: linear-gradient(180deg, #c2942f 0%, #8a6414 45%, #4e380c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .3);
}
.fest-c .rl-head h2::before {
  left: -26px;
  clip-path: polygon(0 0, 100% 16%, 100% 84%, 0 100%, 32% 50%);
}
.fest-c .rl-head h2::after {
  right: -26px;
  clip-path: polygon(100% 0, 0 16%, 0 84%, 100% 100%, 68% 50%);
}

/* "5분마다 하루 288번 도전 가능!" — 작은 배너 */
.fest-c .rl-head p {
  position: relative;
  display: inline-block;
  margin: 13px 0 0;
  padding: 5px 13px 6px;
  border: 1px solid #9a7620;
  border-radius: 5px;
  background: linear-gradient(180deg, #2e2310 0%, #171106 100%);
  color: #f3e2b0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, .16),
    0 4px 12px rgba(0, 0, 0, .7);
}
.fest-c .rl-head p::before,
.fest-c .rl-head p::after {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -6px;
  border: 6px solid transparent;
}
.fest-c .rl-head p::before { left: -12px;  border-right-color: #9a7620; }
.fest-c .rl-head p::after  { right: -12px; border-left-color: #9a7620; }

/* ══════════════════════════════════════════════════════════════
   3. 보유 포인트 — 금화가 놓인 검은 금고 카드
   ══════════════════════════════════════════════════════════════ */
.fest-c .rl-balance {
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid #8a6414;
  border-radius: 14px;
  background: linear-gradient(180deg, #17140d 0%, #0b0a07 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 200, .1),
    inset 0 1px 0 rgba(255, 240, 200, .18),
    0 6px 18px rgba(0, 0, 0, .7);
}
.fest-c .rl-balance::before {
  content: '';
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fffbe9 0%, #f6dda0 30%, #c69a37 66%, #7a5714 90%, #4a3409 100%);
  box-shadow:
    0 0 12px rgba(240, 205, 125, .55),
    inset 0 -2px 3px rgba(74, 52, 9, .7);
}
.fest-c .rl-balance > span {
  color: #c9b78b;
  font-size: 11.5px;
  font-weight: 800;
}
.fest-c .rl-balance > strong {
  font-size: 19px;
  font-weight: 900;
  color: #ffe193;
  letter-spacing: -.02em;
  text-shadow: 0 0 14px rgba(255, 215, 130, .5);
}
.fest-c .rl-balance-shop {
  padding: 6px 13px;
  border: 1px solid #6d4f14;
  border-radius: 999px;
  background: linear-gradient(180deg, #f9e7b3 0%, #cda03a 100%);
  color: #171103;
  font-size: 11px;
  font-weight: 900;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, .65),
    inset 0 1px 0 rgba(255, 253, 240, .85);
}

/* ══════════════════════════════════════════════════════════════
   4. 휠 — 두꺼운 금속 링 + 금색 스터드 + 금색 스탠드
   ══════════════════════════════════════════════════════════════
   링 두께는 .rl-rotor inset 28px 으로 만든다 (로터 반지름 120, 존 반지름 148
   → 밴드 120~148, 중앙 134). JS 가 전구를 반지름 134px 에 고정 배치하므로
   .rl-dots 에 scale 을 걸 필요 없이 정확히 밴드 한가운데에 박힌다. */
.fest-c .rl-zone {
  width: 296px;
  height: 296px;
  margin: 8px 0;
}

/* 링을 두껍게 만드는 유일한 수단: 로터를 안쪽으로 더 밀어넣는다.
   transform 은 JS 스핀 전용이므로 절대 지정하지 않는다 — inset 만 쓴다. */
.fest-c .rl-rotor { inset: 28px; }
/* 로터 반지름 120px — 기본(104/131) 비율에 맞춰 라벨 반지름을 당긴다. */
.fest-c .rl-labels { --rl-label-r: 95px; }

/* 링 본체 — conic 으로 금속 하이라이트를 돌린다 */
.fest-c .rl-rim {
  background:
    conic-gradient(from 212deg,
      #5a4110 0deg, #a87d22 20deg, #f8e9bd 46deg, #d3a441 70deg, #7d5a17 98deg,
      #3a2907 126deg, #9d7420 156deg, #fff3cd 180deg, #dcb14c 204deg, #6b4d12 234deg,
      #382707 262deg, #b0842a 292deg, #f6e2ae 318deg, #c69a37 342deg, #5a4110 360deg);
  box-shadow:
    0 0 0 2px #2a1e07,
    0 0 0 3px #9a7620,
    0 0 0 5px #14100a,
    0 10px 26px rgba(0, 0, 0, .7),
    0 0 54px rgba(217, 180, 95, .3),
    inset 0 0 30px rgba(0, 0, 0, .6);
}
/* 링 안쪽 홈 — 휠과 링 사이를 파낸 듯한 경계 */
.fest-c .rl-rim::before {
  content: '';
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  /* closest-side 필수 — 기본값(farthest-corner)이면 72% 가 반지름을 넘겨
     부드러운 홈이 아니라 불투명 검정 원판이 되어 금색 링을 먹는다 */
  background: radial-gradient(circle closest-side, #0d0b07 0 72%, rgba(13, 11, 7, 0) 74%);
  box-shadow:
    inset 0 0 0 2px #6d4f14,
    0 0 0 1px rgba(255, 244, 205, .3);
}
/* 링 바깥쪽 하이라이트 테두리 */
.fest-c .rl-rim::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 220, .55),
    inset 0 3px 8px rgba(255, 248, 220, .2),
    inset 0 -8px 18px rgba(0, 0, 0, .55);
}

/* 스터드(전구) — 위치와 animation-delay 는 JS 담당. 크기/색/그림자만 바꾼다. */
.fest-c .rl-dots i {
  width: 11px;
  height: 11px;
  margin: -5.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fffbe9 0%, #f7e0a4 28%, #c69a37 62%, #7a5714 86%, #463108 100%);
  animation: fest-stud-c 1.6s linear infinite;
}
@keyframes fest-stud-c {
  0%, 100% {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .9), inset 0 -1px 2px rgba(60, 42, 8, .75), 0 0 5px rgba(217, 180, 95, .4);
  }
  10% {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .9), inset 0 -1px 2px rgba(255, 250, 228, .55), 0 0 15px 4px rgba(255, 232, 168, .95);
  }
  34% {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .9), inset 0 -1px 2px rgba(60, 42, 8, .75), 0 0 8px 1px rgba(226, 190, 110, .65);
  }
}

/* 조각 색은 JS 의 conic-gradient — 배경은 건드리지 않고 테두리/그림자만 */
.fest-c .rl-wheel {
  border: 4px solid #c69a37;
  box-shadow:
    0 0 0 2px #382707,
    inset 0 0 26px rgba(0, 0, 0, .5);
}
/* 라벨은 색을 바꾸지 않고, 원색 조각 위에서 읽히도록 외곽 그림자만 강화한다 */
.fest-c .rl-labels span {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .95),
    0 0 3px rgba(0, 0, 0, .9),
    0 0 9px rgba(0, 0, 0, .6);
}

/* 포인터 — 금박 화살촉 + 보석 캡 */
.fest-c .rl-pointer {
  top: -11px;
  width: 34px;
  height: 42px;
  border: 0;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #fff6d8 0%, #f4d68c 24%, #d3a441 58%, #a87d22 82%, #6d4f14 100%);
  clip-path: polygon(50% 100%, 6% 36%, 0 0, 100% 0, 94% 36%);
  filter:
    drop-shadow(0 3px 6px rgba(0, 0, 0, .9))
    drop-shadow(0 0 10px rgba(240, 205, 125, .65));
}
.fest-c .rl-pointer::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #fff2c9 32%, #d3a441 68%, #7a5714 100%);
  box-shadow: inset 0 -1px 2px rgba(74, 52, 9, .7);
}

/* SPIN — 중앙 금색 돔 버튼 (붉은색 대신 금+먹색 글씨로 대비 확보) */
.fest-c .rl-spin {
  width: 92px;
  height: 92px;
  border: 4px solid #6d4f14;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 26%,
    #fffbe9 0%, #f7e0a4 24%, #dcb14c 52%, #b0842a 78%, #7a5714 94%, #57400f 100%);
  color: #171103;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.05;
  text-shadow: 0 1px 0 rgba(255, 253, 240, .55);
  animation: fest-spin-glow-c 2.4s ease-in-out infinite;
  transition: filter .15s;
}
@keyframes fest-spin-glow-c {
  0%, 100% {
    box-shadow:
      0 5px 13px rgba(0, 0, 0, .55),
      0 0 22px rgba(255, 220, 140, .45),
      inset 0 5px 11px rgba(255, 253, 240, .7),
      inset 0 -7px 14px rgba(90, 62, 12, .55);
  }
  50% {
    box-shadow:
      0 5px 13px rgba(0, 0, 0, .55),
      0 0 40px rgba(255, 220, 140, .85),
      inset 0 5px 11px rgba(255, 253, 240, .8),
      inset 0 -7px 14px rgba(90, 62, 12, .55);
  }
}
.fest-c .rl-spin small {
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .18em;
  text-indent: .18em; /* letter-spacing 끝공백 광학 보정 — fest-b 와 동일한 방식 */
  color: #5a4110;
  text-shadow: none;
}
/* 안쪽 각인 링 */
.fest-c .rl-spin::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(90, 62, 12, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 253, 240, .5);
  pointer-events: none;
}
/* 바깥으로 퍼지는 펄스 링 */
.fest-c .rl-spin::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 226, 150, .55);
  animation: fest-pulse-c 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes fest-pulse-c {
  0%   { transform: scale(.9);  opacity: .85; }
  100% { transform: scale(1.3); opacity: 0; }
}
.fest-c .rl-spin:disabled {
  animation: none;
  filter: grayscale(.55) brightness(.7);
  box-shadow: 0 4px 11px rgba(0, 0, 0, .6), inset 0 -6px 12px rgba(60, 42, 8, .6);
}
.fest-c .rl-spin:disabled::after { animation: none; opacity: 0; }

/* ══════════════════════════════════════════════════════════════
   5. 상태 바 / 안내 — 금테를 두른 검은 패널
   ══════════════════════════════════════════════════════════════ */
.fest-c .rl-bar {
  padding: 11px 12px;
  border: 1px solid #8a6414;
  border-radius: 12px;
  background: linear-gradient(180deg, #17140d 0%, #0a0906 100%);
  color: #efe0b8;
  font-size: 12.5px;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, .12),
    0 5px 14px rgba(0, 0, 0, .65);
}
.fest-c .rl-bar b {
  color: #ffdf8e;
  font-weight: 900;
  text-shadow: 0 0 11px rgba(255, 215, 130, .45);
}
.fest-c .rl-bar.rl-tip {
  word-break: keep-all;  /* 한국어 안내문이 낱말 가운데서 끊기는 것 방지 */
  border-color: #5e4310;
  background: linear-gradient(180deg, #120f0a 0%, #080705 100%);
  color: #c4b184;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   6. 하단 버튼 — 검은 바탕 + 이중 금테
   ══════════════════════════════════════════════════════════════ */
.fest-c .rl-btns { gap: 9px; }
.fest-c .rl-btns button {
  position: relative;
  padding: 13px 8px;
  border: 1px solid #9a7620;
  border-radius: 12px;
  background: linear-gradient(180deg, #1e190f 0%, #0f0c07 100%);
  color: #f5e5ba;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: -.01em;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, .16),
    0 5px 14px rgba(0, 0, 0, .65);
}
.fest-c .rl-btns button::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 9px;
  border: 1px solid rgba(217, 180, 95, .26);
  pointer-events: none;
}

/* 상점 CTA — 통금박 바 + 스윕 하이라이트 */
.fest-c .rl-shop-cta {
  position: relative;
  overflow: hidden;
  padding: 15px;
  border: 1px solid #6d4f14;
  border-radius: 14px;
  background: linear-gradient(180deg,
    #fff6d8 0%, #f4d68c 18%, #dcb14c 46%, #b0842a 74%, #e2ba5c 100%);
  color: #161003;
  font-size: 14.5px;
  font-weight: 900;
  letter-spacing: -.01em;
  text-shadow: 0 1px 0 rgba(255, 253, 240, .6);
  box-shadow:
    0 9px 24px rgba(0, 0, 0, .75),
    0 0 26px rgba(217, 180, 95, .28),
    inset 0 1px 0 rgba(255, 253, 240, .85),
    inset 0 -3px 8px rgba(90, 62, 12, .35);
}
.fest-c .rl-shop-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -45%;
  width: 34%;
  height: 100%;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .65) 50%, rgba(255, 255, 255, 0) 100%);
  animation: fest-sweep-c 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fest-sweep-c {
  0%        { left: -45%; }
  55%, 100% { left: 118%; }
}

/* ══════════════════════════════════════════════════════════════
   7. 당첨내역 / 참여 안내 패널
   ══════════════════════════════════════════════════════════════ */
.fest-c .rl-extra {
  padding: 13px 14px;
  border: 1px solid #8a6414;
  border-radius: 14px;
  background: linear-gradient(180deg, #17140d 0%, #0a0906 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 200, .07),
    0 6px 18px rgba(0, 0, 0, .65);
}
.fest-c .rl-extra > b {
  margin-bottom: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(217, 180, 95, .28);
  color: #ffdf8e;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.01em;
}
.fest-c .rl-extra-empty { color: #b9a678; font-size: 11.5px; }
.fest-c .rl-hist-row {
  border-top: 1px solid rgba(217, 180, 95, .16);
  color: #ede1c0;
  font-weight: 650;
}
.fest-c .rl-hist-time { color: #ab9868; }
.fest-c .rl-hist-row b.win { color: #7fe0a6; }
.fest-c .rl-hist-row b.lose { color: #93855f; }
.fest-c .rl-guide-line { color: #cfbd93; font-size: 11.5px; }
.fest-c .rl-guide-line i { color: #f0cd7d; font-weight: 900; }

/* ══════════════════════════════════════════════════════════════
   8. 접근성 / 좁은 화면
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .fest-c .rl-wrap::before,
  .fest-c .rl-wrap::after,
  .fest-c .rl-head h2,
  .fest-c .rl-spin,
  .fest-c .rl-spin::after,
  .fest-c .rl-shop-cta::after {
    animation: none;
  }
  .fest-c .rl-wrap::before,
  .fest-c .rl-wrap::after { opacity: .85; }
  .fest-c .rl-spin::after { opacity: 0; }
  .fest-c .rl-spin {
    box-shadow:
      0 5px 13px rgba(0, 0, 0, .55),
      0 0 30px rgba(255, 220, 140, .6),
      inset 0 5px 11px rgba(255, 253, 240, .7),
      inset 0 -7px 14px rgba(90, 62, 12, .55);
  }
  .fest-c .rl-dots i {
    animation: none;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, .9),
      inset 0 -1px 2px rgba(60, 42, 8, .75),
      0 0 11px 2px rgba(255, 232, 168, .6);
  }
}

/* 휠 존은 296px 고정이라 좁은 기기에서는 무대 안쪽 폭이 모자란다.
   여백을 줄이고 무대를 #app 패딩 바깥으로 조금 내보내 휠이 잘리지 않게 한다. */
@media (max-width: 359px) {
  .fest-c .rl-wrap {
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .fest-c .rl-head { max-width: 290px; }
  .fest-c .rl-head h2 { margin-left: 22px; margin-right: 22px; font-size: 21px; }
  .fest-c .rl-head h2::before { left: -22px; width: 24px; }
  .fest-c .rl-head h2::after  { right: -22px; width: 24px; }
}