:root{--bg:#10231f;--panel:#17342e;--cream:#f3e8cf;--muted:#9db6ae;--accent:#e7b65c}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:"Noto Sans KR",sans-serif}button,input,select{font:inherit}.game-app{min-height:100dvh;padding:0 38px;display:flex;flex-direction:column}
.game-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 308px;gap:20px;padding:0 0 14px}.play-stage,.participants-panel{border:1px solid rgba(255,255,255,.68);border-radius:18px;background:rgba(240,250,244,.55);box-shadow:0 16px 36px rgba(24,68,78,.18),inset 0 1px rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(130%)}.play-stage{position:relative;overflow:hidden;min-height:0;display:flex;flex-direction:column;align-items:center;padding:26px 32px 22px}.play-stage:before{content:"";position:absolute;inset:0;opacity:.09;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(to bottom,#000,transparent 80%)}
.game-heading{position:relative;z-index:1;text-align:center}.game-heading p,.panel-top p{margin:0 0 8px;color:#b50039;font-size:9px;font-weight:700;letter-spacing:.24em}.game-heading span{display:block;margin-top:12px;color:#527174;font-size:12px}
.roulette-wrap{position:relative;z-index:1;margin:auto;width:min(50vh,390px);aspect-ratio:1;filter:drop-shadow(0 24px 30px rgba(0,0,0,.35))}.roulette-wheel{width:100%;height:100%;display:grid;place-items:center;border:8px solid #ead49f;border-radius:50%;background:conic-gradient(#c45645 0 45deg,#e3a64e 45deg 90deg,#2f7668 90deg 135deg,#d97b4c 135deg 180deg,#385f76 180deg 225deg,#bf4f59 225deg 270deg,#799457 270deg 315deg,#d9bd70 315deg);box-shadow:inset 0 0 0 7px #69432f,inset 0 0 34px rgba(0,0,0,.4);transition:transform 2.2s cubic-bezier(.12,.72,.08,1)}.wheel-core{width:25%;aspect-ratio:1;display:grid;place-items:center;border:7px solid #e7c87f;border-radius:50%;background:#263f39;font:700 46px "Cormorant Garamond",serif}.wheel-pointer{position:absolute;z-index:2;left:50%;top:-14px;width:0;height:0;transform:translateX(-50%);border-left:18px solid transparent;border-right:18px solid transparent;border-top:42px solid #fff0c4}.roulette-wheel.is-spinning{transform:rotate(var(--wheel-turn,1440deg))}
.result-banner{position:relative;z-index:1;width:min(600px,100%);min-height:48px;display:grid;place-items:center;margin:16px 0;padding:12px 18px;border:1px solid rgba(87,137,129,.28);border-radius:12px;background:rgba(255,255,255,.5);color:#345f68;text-align:center;font-size:12px}.result-banner.has-winner{border-color:var(--accent);color:var(--cream);box-shadow:0 0 30px color-mix(in srgb,var(--accent) 22%,transparent)}.game-heading .result-banner{width:min(430px,100%);min-height:0;display:flex;justify-content:center;align-items:center;margin:10px auto 0;white-space:normal}.game-heading .result-banner strong{font-size:12px}.game-heading .result-banner span{display:inline;margin:0;font-size:11px}.game-heading .result-banner .result-separator{margin:0 8px}.primary-actions{position:relative;z-index:1;display:flex;gap:10px}.primary-button{min-width:150px;padding:13px 20px;font-weight:700}.primary-button:disabled{cursor:not-allowed;opacity:.4}.game-action-buttons{display:flex;align-items:center;gap:10px;width:fit-content;margin:0 auto}.game-panel-icon{position:absolute;top:50%;display:grid;place-items:center;width:32px;height:32px;padding:0;box-shadow:none;cursor:pointer;font:700 17px/1 "Cormorant Garamond",serif;transform:translateY(-50%);--round-button-offset:translateY(-50%)}.game-panel-icon:hover,.game-panel-icon:focus-visible{background:rgba(255,255,255,.9);color:#285959}.game-panel-icon:disabled{cursor:not-allowed;opacity:.42}.game-panel-icon:disabled:hover{background:rgba(255,255,255,.52);color:#527174;transform:translateY(-50%)}.game-panel-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.game-panel-help{right:40px}.game-panel-settings{right:0}.game-modal-layer{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:16px}.game-modal-panel{position:relative;width:min(382px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:28px;border:1px solid rgba(255,255,255,.82);border-radius:22px;box-shadow:0 22px 52px rgba(11,42,79,.28),inset 0 1px rgba(255,255,255,.95);color:#214c50}
.participants-panel{display:flex;flex-direction:column;min-height:0;padding:22px;overflow:hidden}.panel-top{display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid rgba(87,137,129,.25)}.panel-top h2{margin:0;font:700 16px "Cormorant Garamond","Noto Sans KR",serif}.panel-top>strong{font:700 48px/1 "Cormorant Garamond",serif;color:#46b8d3}.game-participant-list{flex:1;min-height:180px;max-height:calc(100vh - 340px);overflow:auto;list-style:none;margin:14px 0;padding:0}.participant-row{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:3px;min-height:30px;padding:5px 2px;border-bottom:1px solid rgba(87,137,129,.16);font-size:12px;line-height:1.15;color:#214c50}.participant-row .rank{color:#78999b;font:700 13px "Cormorant Garamond",serif}.participant-row small{margin-right:10px;color:#527174;font-size:8px;letter-spacing:.04em}.participant-row.winner{color:#ffe19b}.participant-row.lost{opacity:.46}.empty-list{padding:40px 8px;color:#527174;text-align:center;font-size:11px;line-height:1.7}
.manual-entry{display:flex;gap:7px}.manual-entry input{min-width:0;flex:1;padding:10px 11px;color:var(--cream);border:1px solid rgba(255,255,255,.13);background:rgba(0,0,0,.15)}.manual-entry button{padding:0 13px;border:0;color:#17342e;background:var(--accent);cursor:pointer}.collector-state{display:flex;gap:11px;align-items:center;margin-top:15px;padding:13px;border-radius:12px;background:rgba(224,243,233,.72)}.collector-state>span{width:9px;height:9px;border-radius:50%;background:#788c85}.collector-state>span.live{background:#75d59d;box-shadow:0 0 12px #75d59d}.collector-state p{margin:0}.collector-state strong,.collector-state small{display:block}.collector-state strong{font-size:11px;color:#214c50}.collector-state small{max-width:235px;margin-top:3px;color:#527174;font-size:9px;line-height:1.4}.game-footer{color:rgba(212,232,233,.6);font:7px/1 'Noto Sans KR',sans-serif;letter-spacing:.1em}.game-footer p{margin:0;color:inherit;opacity:1}
.hidden{display:none!important}
@media(max-width:900px){.game-app{padding:0 14px 14px}.game-layout{grid-template-columns:1fr}.play-stage{min-height:620px;padding:28px 16px}.participants-panel{min-height:420px}.game-participant-list{max-height:300px}}@media(max-width:520px){.play-stage{min-height:560px}.roulette-wrap{width:min(76vw,330px)}.primary-actions{width:100%}.primary-button{min-width:0;flex:1}.game-footer .copyright{display:none}}@media(prefers-reduced-motion:reduce){.roulette-wheel{transition-duration:.01ms}}
@media (min-width: 901px){.game-app,.game-layout,.participants-panel{min-height:0;overflow:hidden}.game-app{height:100dvh}.game-participant-list{flex:1 1 0;min-height:0;max-height:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}}

.game-participant-list,
.winner-history ol,
.race-ranking ol {
  scrollbar-width: thin;
  scrollbar-color: rgba(40, 89, 89, .45) rgba(255, 255, 255, .06);
}

.theme-roulette .roulette-wrap { width: min(56vh, 460px); margin: auto; filter: drop-shadow(0 20px 24px rgba(55, 84, 68, .26)); }
@media (min-width: 1101px) {
  .theme-roulette .roulette-wrap { width: min(56dvh, 46vw, 720px); }
}
.theme-roulette .roulette-wheel { border-color: #f4dfab; box-shadow: inset 0 0 0 7px #936343, inset 0 0 34px rgba(77, 55, 29, .22), 0 0 0 1px rgba(255, 255, 255, .72); }
.theme-roulette .wheel-core { border-color: #efcc75; background: #285959; color: #fff9e6; }
.theme-roulette .wheel-pointer { border-top-color: #fff7d9; filter: drop-shadow(0 3px 2px rgba(88, 61, 31, .22)); }

.theme-roulette .result-banner { border-color: rgba(87, 137, 129, .28); border-radius: 12px; background: rgba(255, 255, 255, .5); color: #345f68; }
.theme-roulette .manual-entry input { color: #214c50; border-color: rgba(87, 137, 129, .3); border-radius: 10px; background: rgba(255, 255, 255, .62); }
.theme-roulette .manual-entry button { border-radius: 10px; color: #fff; background: #285959; }

@media (max-width: 900px) {
  .theme-roulette .game-layout { grid-template-columns: 1fr; overflow: visible; }
  .theme-roulette .play-stage { min-height: 540px; }
  .theme-roulette .participants-panel { min-height: 400px; }
}

@media (max-width: 520px) {
  .theme-roulette .play-stage { min-height: 520px; padding: 24px 16px 18px; }
  .theme-roulette .roulette-wrap { width: min(74vw, 312px); }
  .theme-roulette .game-footer { padding-bottom: 16px; }
  .theme-roulette .game-footer .copyright { display: none; }
}
.collector-controls{margin-top:10px}.collector-controls label{display:block;margin-bottom:6px;color:#527174;font-size:10px;font-weight:700}.collector-controls div{display:flex;gap:7px}.collector-controls input{min-width:0;flex:1;padding:10px 11px;border:1px solid rgba(87,137,129,.3);border-radius:10px;background:rgba(255,255,255,.62);color:#214c50}.collector-controls button:not(.game-inline-icon){padding:0 13px;border:0;border-radius:10px;background:#285959;color:#fff;font-size:11px;font-weight:700;cursor:pointer}
.collector-controls button:not(.game-inline-icon){color:#fff;border-color:transparent;background:var(--roulette-action-blue);box-shadow:0 8px 16px var(--roulette-action-blue-shadow)}
.collector-controls button:not(.game-inline-icon):hover{background:var(--roulette-action-blue-hover)}
.game-notice>.game-modal-panel{width:min(340px,100%);padding:24px;border-radius:18px;box-shadow:0 18px 42px rgba(22,62,76,.25)}.game-notice p{margin:0 0 18px;line-height:1.6}.game-notice .game-modal-panel>div{display:flex;justify-content:flex-end;gap:8px}.game-notice button{padding:9px 14px;font-weight:700}
.theme-roulette .play-stage {
  background:
    radial-gradient(circle at 50% 54%, rgba(255, 236, 145, .8) 0%, rgba(255, 236, 145, .22) 26%, transparent 53%),
    linear-gradient(145deg, rgba(226, 249, 255, .86), rgba(191, 239, 239, .62));
}
.theme-roulette .play-stage::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 14% 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .72), transparent 65%);
  pointer-events: none;
}
.theme-roulette .roulette-wrap { filter: drop-shadow(0 24px 20px rgba(75, 145, 161, .28)); }
.theme-roulette .roulette-wheel {
  border-color: #ffe391;
  background: conic-gradient(var(--wheel-segments, #f98d83 0 45deg, #81cddf 45deg 90deg, #77c99a 90deg 135deg, #f9c66f 135deg 180deg, #8aaee7 180deg 225deg, #ef9ab4 225deg 270deg, #80c89b 270deg 315deg, #f8db94 315deg));
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 5px #c88935, inset 0 0 0 11px rgba(255, 250, 211, .9), inset 0 0 32px rgba(255, 255, 255, .36), 0 0 0 2px rgba(255, 255, 255, .86);
}
.theme-roulette .wheel-core {
  border-color: #ffd96e;
  background: radial-gradient(circle at 34% 28%, #baffea, #26ad9d 55%, #18766f);
  box-shadow: 0 0 0 5px rgba(255, 245, 191, .85), 0 8px 18px rgba(37, 133, 122, .25);
}
.theme-roulette .wheel-pointer {
  width: 36px;
  height: 42px;
  border: 0;
  background: var(--roulette-pointer-gold);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 4px 3px rgba(23, 61, 110, .34));
  pointer-events: none;
  transform: translateX(-50%) rotate(var(--roulette-pointer-angle, 0deg));
  transform-origin: 50% 0;
}
.theme-roulette .wheel-pointer.is-reacting { will-change: transform; }
.theme-roulette .wheel-pointer::before {
  position: absolute;
  inset: 1.5px 2px 3px;
  background: var(--roulette-action-blue);
  clip-path: inherit;
  content: '';
}
.theme-roulette .wheel-pointer::after {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--roulette-pointer-gold);
  box-shadow: 0 0 5px rgba(240, 186, 79, .72);
  content: '';
  transform: translateX(-50%) rotate(45deg);
}
.theme-roulette .wheel-segments { position: absolute; z-index: 0; inset: 11px; display: block; width: auto; height: auto; border-radius: 50%; overflow: hidden; shape-rendering: geometricPrecision; pointer-events: none; }
.theme-roulette .wheel-entry-label {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 0;
  overflow: visible;
  color: #214c50;
  font-size: var(--label-size, 10px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  text-align: center;
  white-space: nowrap;
  transform: rotate(var(--segment-angle)) translateX(44cqw);
  transform-origin: 0 50%;
}
.theme-roulette .wheel-entry-label-text { position: absolute; top: 50%; right: 0; display: block; width: max-content; max-width: 28cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: translateY(-50%); }
.theme-roulette .wheel-entry-label.is-dense { opacity: .82; letter-spacing: -.1em; }
.theme-roulette .wheel-entry-label.is-duplicate-reroll-highlight .wheel-entry-label-text {
  color: #765414;
  text-shadow: 0 0 5px #fff5bc, 0 0 12px rgba(240, 186, 79, .96), 0 0 24px rgba(240, 186, 79, .56);
  animation: roulette-reroll-label-pulse .096s linear;
}
@keyframes roulette-reroll-label-pulse { from { filter: brightness(1); } to { filter: brightness(1.48); } }

.theme-roulette .roulette-wrap {
  container-type: inline-size;
  filter: none;
  isolation: isolate;
}
.theme-roulette .roulette-wrap::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 12%;
  right: 12%;
  bottom: -5%;
  height: 17%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(73, 106, 97, .38), rgba(73, 106, 97, 0) 72%);
  filter: blur(10px);
  pointer-events: none;
  display: none;
}
.roulette-floor-shadow { position: absolute; z-index: 0; left: 12%; right: 12%; bottom: -5%; height: 17%; border-radius: 50%; background: radial-gradient(ellipse, rgba(73, 106, 97, .42), rgba(73, 106, 97, 0) 72%); filter: blur(10px); pointer-events: none; }
.collection-countdown { position: absolute; z-index: 3; top: clamp(170px, 24%, 190px); right: 18px; display: grid; min-width: 180px; height: 74px; padding: 12px 14px 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .72); border-radius: 14px; background: linear-gradient(145deg, rgba(255, 255, 255, .58), rgba(216, 239, 235, .28)); box-shadow: inset 0 1px rgba(255, 255, 255, .9), inset 0 -12px 24px rgba(61, 128, 121, .06), 0 12px 28px rgba(37, 91, 88, .14); color: #285959; backdrop-filter: blur(14px) saturate(125%); text-align: center; white-space: nowrap; }
.collection-countdown[hidden] { display: none; }
.collection-countdown::before { position: absolute; inset: 0; background: linear-gradient(112deg, rgba(255, 255, 255, .48), transparent 38%, rgba(140, 207, 196, .1)); content: ""; pointer-events: none; }
.collection-countdown span,.collection-countdown strong { position: relative; z-index: 1; display: block; }
.collection-countdown span { margin: 0 0 7px .28em; color: #527174; font: 700 8px/1 "Noto Sans KR", sans-serif; letter-spacing: .28em; }
.collection-countdown strong { display: flex; align-items: baseline; justify-content: center; color: #246364; font: 700 34px/.9 "Cormorant Garamond", "Noto Sans KR", serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-shadow: 0 0 12px rgba(65, 145, 139, .3); }
.collection-countdown strong b { font: inherit; }
.collection-countdown strong small { margin-left: 1px; font: inherit; font-size: .6667em; letter-spacing: 0; }
.collection-countdown.is-ending strong { color: #9f1e2f; animation: collection-countdown-warning .72s ease-in-out infinite alternate; }
.collection-countdown.is-time-over strong { color: #8f1527; font: 700 18px/1 "Noto Sans KR", sans-serif; letter-spacing: .12em; text-shadow: 0 0 16px rgba(143, 21, 39, .34); }
@keyframes collection-countdown-warning { from { opacity: .58; text-shadow: 0 0 8px rgba(159, 30, 47, .28); } to { opacity: 1; text-shadow: 0 0 18px rgba(159, 30, 47, .66); } }
.theme-roulette .roulette-wheel {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .theme-roulette .roulette-wheel { transition: none; }
}
.theme-roulette .roulette-wheel.is-idle-spinning { animation: roulette-idle-spin .72s linear infinite; }
@keyframes roulette-idle-spin { to { transform: rotate(calc(var(--wheel-turn, 0deg) + 360deg)); } }
.theme-roulette .primary-actions button { transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease; }
.theme-roulette .primary-actions button.is-stop-action {
  color: #fff7ed;
  border-color: #9d2428;
  background: #c83235;
  box-shadow: 0 0 0 3px rgba(255, 190, 162, .38), 0 0 22px rgba(200, 50, 53, .72);
  animation: roulette-stop-glow .76s ease-in-out infinite alternate;
}
.theme-roulette .primary-actions button.is-stop-action:disabled { cursor: wait; }
@keyframes roulette-stop-glow {
  from { box-shadow: 0 0 0 2px rgba(255, 190, 162, .26), 0 0 12px rgba(200, 50, 53, .42); }
  to { box-shadow: 0 0 0 4px rgba(255, 190, 162, .54), 0 0 30px rgba(200, 50, 53, .9); }
}
.winner-history {
  position: absolute;
  z-index: 1;
  left: clamp(18px, 3vw, 42px);
  top: clamp(120px, calc(24% - 50px), 140px);
  width: min(132px, 18%);
  color: #285959;
}
.winner-history-heading { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; }
.winner-history-crown { width: 27px; height: 27px; fill: #e3b84e; stroke: #7b4328; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; filter: drop-shadow(0 3px 2px rgba(123, 67, 40, .22)); }
.winner-history p { margin: 0; color: #285959; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.game-inline-icon { display:grid; place-items:center; width:32px; height:32px; padding:0; box-shadow:none; cursor:pointer; }
.game-inline-icon:hover,.game-inline-icon:focus-visible { color:#285959; background:rgba(255,255,255,.9); }
.game-inline-icon:focus-visible { outline:2px solid #e3b84e; outline-offset:2px; }
.game-inline-icon svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }
.winner-history-heading .game-inline-icon { margin-left:auto; }
.theme-roulette .primary-actions { width: 100%; }
.game-guide > .game-modal-panel { max-height: min(500px, calc(100dvh - 32px)); }
.game-guide h2, .game-settings-panel h2 { margin: 8px 30px 18px 0; }
.game-guide h2 { color: #214c50; font: 700 25px/1.1 "Cormorant Garamond", "Noto Sans KR", serif; }
.game-guide-kicker, .game-settings-panel > p { margin:0; color:#b50039; font-size:9px; font-weight:800; letter-spacing:.18em; }
.game-guide ol { display:grid; gap:10px; margin:0; padding-left:21px; color:#345f68; font-size:12px; line-height:1.55; }
.winner-history ol { display: grid; gap: 5px; max-height: 445px; margin: 0; padding: 0 3px 0 0; overflow-y: auto; list-style: none; }
@media (min-width: 1101px) and (min-height: 880px) { .winner-history ol { max-height: 490px; } }
@media (min-width: 1101px) and (min-height: 960px) { .winner-history ol { max-height: 535px; } }
@media (min-width: 1101px) and (min-height: 1040px) { .winner-history ol { max-height: 580px; } }
.winner-history li { display: flex; gap: 7px; align-items: center; min-width: 0; padding: 5px 7px; border: 1px solid rgba(40, 89, 89, .2); border-radius: 8px; background: rgba(255, 255, 255, .5); font-size: 11px; }
.winner-history li.is-standard-winner { border-color: rgba(212, 167, 76, .62); background: linear-gradient(135deg, rgba(255,253,240,.9), rgba(245,215,128,.75)); }
.winner-history li.is-final-two-winner { padding-block: 4px; color: #243449; border: 2px solid transparent; background: linear-gradient(#edf0f3, #edf0f3) padding-box, linear-gradient(108deg, #b94351 0 47%, #f0c869 48% 52%, #376fbd 53% 100%) border-box; box-shadow: inset 0 0 0 1px rgba(255,255,255,.78), 0 0 10px rgba(240,186,79,.22); }
.winner-history li.is-chaos-winner { color: #fff4c7; border-color: rgba(240,186,79,.9); background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.2), transparent 34%), linear-gradient(135deg, #4a3b79, #161b2b 58%, #080a10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 11px rgba(92,74,184,.38); }
.winner-history li.is-final-two-winner span { color: #a33745; }.winner-history li.is-chaos-winner span { color: #ffd66c; }
.winner-history li span { color: #b17c48; font: 700 13px/1 "Cormorant Garamond", serif; }
.winner-history li [data-winner-index] { min-width: 0; min-height: 28px; overflow: hidden; padding: 0; color: inherit; border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 700; text-align: left; text-decoration-thickness: 1.5px; text-overflow: ellipsis; white-space: nowrap; }
.winner-history li [data-winner-index].is-cancelled { color: #789391; text-decoration-line: line-through; }
.winner-history li [data-winner-index].is-cancelled { opacity: .42; }
.winner-history li button:focus-visible { outline: 2px solid #e3b84e; outline-offset: 2px; }
.winner-reveal { position: absolute; z-index: 6; top: 50%; left: 50%; width: min(390px, calc(100% - 64px)); transform: translate(-50%, -50%); text-align: center; }
.winner-reveal[hidden] { display: none; }
.winner-reveal > p { margin: 0 0 5px; color: #15130f; font-size: 14px; font-weight: 800; letter-spacing: .28em; -webkit-text-stroke: 0; text-shadow: none; }
.winner-reveal button { position: relative; width: 100%; padding: 14px 28px 12px; overflow: visible; border: 2px solid #f1c867; border-radius: 18px; background: linear-gradient(135deg, #fffdf0, #f5d780); box-shadow: 0 10px 22px rgba(139, 81, 38, .24), inset 0 1px rgba(255, 255, 255, .95); color: #563d28; cursor: pointer; }
.winner-reveal-title { display: flex; align-items: center; justify-content: center; min-width: 0; gap: 9px; }
.winner-reveal-title .winner-history-crown { flex: 0 0 auto; }
.winner-reveal strong,.winner-reveal small { display: block; }
.winner-reveal strong { min-width: 0; overflow: hidden; color: #15130f; font: 800 clamp(32px, 4vw, 50px)/1 "Cormorant Garamond", "Noto Sans KR", serif; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.winner-reveal small { margin-top: 5px; color: #936343; font-size: 10px; font-weight: 700; }
.winner-reveal.is-duplicate-reroll-result button { border-color: #ec8ca8; background: linear-gradient(135deg, #fff2f6, #f8b8ca); box-shadow: 0 10px 22px rgba(189, 68, 109, .28), inset 0 1px rgba(255, 255, 255, .95); color: #7d2748; }
.winner-reveal.is-duplicate-reroll-result strong { color: #6f1e3f; }
.winner-reveal.is-duplicate-reroll-result small { color: #a13661; }
.winner-reveal button:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 28px rgba(139, 81, 38, .32), inset 0 1px rgba(255, 255, 255, .95); }
.winner-reveal.is-duplicate-reroll-result button:hover { box-shadow: 0 14px 28px rgba(189, 68, 109, .36), inset 0 1px rgba(255, 255, 255, .95); }
.winner-reveal button:focus-visible { outline: 3px solid #285959; outline-offset: 4px; }
.winner-confetti { position: absolute; top: 50%; left: 50%; width: 100cqw; height: 100cqw; pointer-events: none; transform: translate(-50%, -50%); }
.winner-confetti i { position: absolute; top: 50%; left: 50%; width: 10px; height: 17px; border-radius: 3px; background: var(--confetti-color); box-shadow: 0 2px 4px rgba(62, 53, 36, .26); opacity: 0; transform: translate(-50%, -50%); }
.winner-confetti i:nth-child(4n + 1) { --confetti-color: #f16d72; }.winner-confetti i:nth-child(4n + 2) { --confetti-color: #5ab6ce; }.winner-confetti i:nth-child(4n + 3) { --confetti-color: #efbf4f; }.winner-confetti i:nth-child(4n) { --confetti-color: #6bbd84; }
.winner-reveal.is-visible .winner-confetti i { animation: winner-confetti 1.7s cubic-bezier(.15,.7,.25,1) infinite both; }
.winner-confetti i:nth-child(1) { animation-delay: 0s!important; }.winner-confetti i:nth-child(2) { animation-delay: -.12s!important; }.winner-confetti i:nth-child(3) { animation-delay: -.24s!important; }.winner-confetti i:nth-child(4) { animation-delay: -.36s!important; }.winner-confetti i:nth-child(5) { animation-delay: -.48s!important; }.winner-confetti i:nth-child(6) { animation-delay: -.6s!important; }.winner-confetti i:nth-child(7) { animation-delay: -.72s!important; }.winner-confetti i:nth-child(8) { animation-delay: -.84s!important; }.winner-confetti i:nth-child(9) { animation-delay: -.96s!important; }.winner-confetti i:nth-child(10) { animation-delay: -1.08s!important; }.winner-confetti i:nth-child(11) { animation-delay: -1.2s!important; }.winner-confetti i:nth-child(12) { animation-delay: -1.32s!important; }.winner-confetti i:nth-child(13) { animation-delay: -1.44s!important; }.winner-confetti i:nth-child(14) { animation-delay: -1.56s!important; }
@keyframes winner-confetti { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--confetti-x, 0px)), calc(-50% + var(--confetti-y, 0px))) rotate(260deg); } }
.winner-confetti i:nth-child(1) { --confetti-x: -218px; --confetti-y: -162px; }.winner-confetti i:nth-child(2) { --confetti-x: -174px; --confetti-y: 152px; }.winner-confetti i:nth-child(3) { --confetti-x: -106px; --confetti-y: -212px; }.winner-confetti i:nth-child(4) { --confetti-x: -48px; --confetti-y: 188px; }.winner-confetti i:nth-child(5) { --confetti-x: 24px; --confetti-y: -226px; }.winner-confetti i:nth-child(6) { --confetti-x: 78px; --confetti-y: 176px; }.winner-confetti i:nth-child(7) { --confetti-x: 132px; --confetti-y: -196px; }.winner-confetti i:nth-child(8) { --confetti-x: 202px; --confetti-y: 138px; }.winner-confetti i:nth-child(9) { --confetti-x: 228px; --confetti-y: -118px; }.winner-confetti i:nth-child(10) { --confetti-x: -236px; --confetti-y: 78px; }.winner-confetti i:nth-child(11) { --confetti-x: 236px; --confetti-y: 46px; }.winner-confetti i:nth-child(12) { --confetti-x: -174px; --confetti-y: -126px; }.winner-confetti i:nth-child(13) { --confetti-x: 158px; --confetti-y: -110px; }.winner-confetti i:nth-child(14) { --confetti-x: 0; --confetti-y: -238px; }
.winner-reveal.is-flying button { animation: winner-to-history .58s cubic-bezier(.2,.82,.3,1) forwards; pointer-events: none; }
.winner-reveal.is-source-hidden button { opacity: 0; pointer-events: none; }
.winner-reveal.is-source-hidden > p { opacity: 0; }
@keyframes winner-to-history { to { opacity: 0; transform: translate(var(--winner-flight-x), var(--winner-flight-y)) scale(.24); } }
.winner-flight-clone { position: fixed; z-index: 120; display: grid; place-items: center; padding: 0 18px; overflow: hidden; border: 2px solid #f1c867; border-radius: 18px; background: linear-gradient(135deg, #fffdf0, #f5d780); box-shadow: 0 10px 22px rgba(139, 81, 38, .24); color: #15130f; font: 800 clamp(32px, 4vw, 50px)/1 "Cormorant Garamond", "Noto Sans KR", serif; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; transform-origin: center; }
.wheel-entry-label.is-chaos-candidate { z-index: 4; color: #fffdf5; text-shadow: 0 0 3px #5c4ab8, 0 0 9px #5c4ab8, 0 0 18px #f0ba4f; animation: chaos-segment-radiance .48s ease-in-out infinite alternate; }
.wheel-entry-label.is-final-two { z-index: 5; --final-two-proximity: 0; color: #d9b461; opacity: calc(.58 + var(--final-two-proximity) * .42); text-shadow: 0 0 calc(2px + var(--final-two-proximity) * 5px) rgba(255,255,255,.76), 0 0 calc(6px + var(--final-two-proximity) * 25px) rgba(240,186,79,.78); filter: brightness(calc(.88 + var(--final-two-proximity) * .55)) drop-shadow(0 0 calc(2px + var(--final-two-proximity) * 12px) #f0ba4f); transition: color .12s ease, opacity .12s ease, text-shadow .12s ease, filter .12s ease, transform .12s ease; transform: rotate(var(--segment-angle)) translateX(44cqw) scale(calc(.82 + var(--final-two-proximity) * .5)); }
.wheel-entry-label.is-final-two-leading { z-index: 6; color: #fffdf5; }
.final-two { position: absolute; z-index: 7; top: 38%; left: 50%; display: grid; grid-template-columns: 54px minmax(0,1fr) 54px; align-items: center; width: min(88%, 380px); min-height: 82px; padding: 10px 14px; overflow: hidden; border: 2px solid rgba(255,226,132,.96); border-radius: 18px; background: linear-gradient(108deg, #9e3545 0 48%, #eec465 49% 51%, #2c69bb 52% 100%); box-shadow: 0 0 0 3px rgba(240,186,79,.2), 0 0 32px rgba(240,186,79,.86); color: #fff7d2; text-align: center; transform: translate(-50%, -50%); pointer-events: none; isolation: isolate; }.final-two[hidden] { display: none; }.final-two:after { position: absolute; z-index: -1; inset: 3px; border-radius: 14px; background: linear-gradient(108deg, rgba(49,7,16,.48) 0 47%, transparent 49% 51%, rgba(6,25,66,.5) 53% 100%); content: ""; }.final-two-copy { min-width: 0; }.final-two strong,.final-two-names { display: block; }.final-two strong { font: 900 clamp(20px, 5cqw, 34px)/1 "Cormorant Garamond", serif; letter-spacing: .14em; text-shadow: 0 0 12px rgba(255,255,255,.94), 0 0 22px rgba(240,186,79,.88); }.final-two-names { margin-top: 9px; overflow: hidden; color: #fff7dc; font: 900 clamp(15px, 3.8cqw, 23px)/1.2 "Noto Sans KR", sans-serif; letter-spacing: -.03em; text-shadow: 0 0 9px rgba(0,0,0,.62); text-overflow: ellipsis; white-space: nowrap; }
.wheel-entry-label.is-chaos-anchor { color: #fff; text-shadow: 0 0 4px #fff, 0 0 12px #f0ba4f, 0 0 28px #5c4ab8; animation-duration: .34s; }
.roulette-wheel.is-chaos-twist { animation: chaos-wheel-twist 1.05s cubic-bezier(.35,.02,.64,.98) forwards; }
@keyframes chaos-segment-radiance { from { filter: brightness(1); } to { filter: brightness(1.45) drop-shadow(0 0 5px #f0ba4f); } }
@keyframes chaos-wheel-twist { 0% { opacity: 1; filter: blur(0) saturate(1); transform: rotate(var(--wheel-turn, 0deg)) scale(1); } 65% { opacity: .8; filter: blur(1px) saturate(1.7); transform: rotate(calc(var(--wheel-turn, 0deg) + 120deg)) scale(.72) skew(12deg, -10deg); } 100% { opacity: 0; filter: blur(15px) saturate(2); transform: rotate(calc(var(--wheel-turn, 0deg) + 310deg)) scale(.08) skew(42deg, -34deg); } }
.chaos-round { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; pointer-events: none; isolation: isolate; }
.chaos-round[hidden] { display: none; }
.chaos-phase-message { position: absolute; z-index: 5; text-align: center; transform: translateY(-2px) scale(.88); opacity: 0; transition: transform .78s cubic-bezier(.22,.78,.24,1), opacity .28s ease; }
.chaos-round.is-announcing:not(.is-transitioning) .chaos-phase-message { animation: chaos-message-arrival 1s cubic-bezier(.18,.85,.28,1) forwards; }
.chaos-phase-message p { margin: 0; color: #fffdf5; font: 800 clamp(24px, 8cqw, 64px)/.9 "Cormorant Garamond", "Noto Sans KR", serif; letter-spacing: .02em; text-shadow: 0 0 5px #5c4ab8, 0 0 20px #5c4ab8, 0 0 46px #f0ba4f; white-space: nowrap; }
.chaos-phase-message span { display: block; margin-top: 10px; color: #fff7d2; font-size: 9px; font-weight: 800; letter-spacing: .28em; text-shadow: 0 1px 4px #24154c; }
.chaos-round.is-transitioning .chaos-phase-message { animation: chaos-message-settle .92s cubic-bezier(.22,.78,.24,1) forwards; }
@keyframes chaos-message-arrival { 0% { opacity: 0; transform: translateY(12px) scale(.72); filter: blur(10px); } 70% { opacity: 1; transform: translateY(-3px) scale(1.04); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes chaos-message-settle { 0% { opacity: 1; transform: translateY(0) scale(1); } 65% { opacity: 1; transform: translateY(-35cqw) scale(.54); } 100% { opacity: 1; transform: translateY(-32cqw) scale(.58); } }
.chaos-disc { position: absolute; display: grid; place-items: center; width: 86cqw; aspect-ratio: 1; overflow: hidden; border: 8px solid #fffdf5; border-radius: 50%; background: radial-gradient(circle at 30% 22%, #ffffff 0 5%, transparent 20%), radial-gradient(circle at 55% 45%, #fffdf5 0 28%, #e7e5fa 62%, #5c4ab8 100%); box-shadow: 0 0 0 6px rgba(240, 186, 79, .74), 0 0 0 11px rgba(92, 74, 184, .56), 0 0 32px rgba(255, 253, 245, .92), 0 0 72px rgba(92, 74, 184, .74), inset 0 0 34px rgba(255,255,255,.94); opacity: 0; transform: scale(.1) rotate(-140deg); }
.chaos-disc::before { content: ''; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: radial-gradient(circle at 28% 19%, rgba(88, 101, 128, .42), transparent 25%), radial-gradient(circle at 68% 72%, rgba(94, 62, 144, .38), transparent 31%), radial-gradient(circle at 50% 48%, #202832, #080b10 62%, #020305); box-shadow: inset 0 0 42px rgba(0, 0, 0, .96); opacity: 0; transition: opacity .62s ease; pointer-events: none; }
.chaos-round.is-slot .chaos-disc::before { opacity: 1; }
.chaos-round.is-transitioning .chaos-disc { animation: chaos-disc-unfurl 1.05s cubic-bezier(.12,.82,.2,1) forwards, chaos-disc-glint 1.7s ease-in-out infinite 1.05s; }
@keyframes chaos-disc-unfurl { 0% { opacity: 0; transform: scale(.1) rotate(-140deg); filter: blur(12px); } 70% { opacity: 1; transform: scale(1.05) rotate(5deg); filter: blur(0); } 100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); } }
@keyframes chaos-disc-glint { 0%,100% { box-shadow: 0 0 0 6px rgba(240,186,79,.74),0 0 0 11px rgba(92,74,184,.56),0 0 32px rgba(255,253,245,.92),0 0 72px rgba(92,74,184,.74),inset 0 0 34px rgba(255,255,255,.94); } 50% { box-shadow: 0 0 0 7px rgba(255,253,245,.98),0 0 0 14px rgba(240,186,79,.88),0 0 46px rgba(255,253,245,1),0 0 86px rgba(92,74,184,.86),inset 0 0 42px rgba(255,255,255,1); } }
.chaos-gold-particles,.chaos-winner-flash { position: absolute; z-index: 2; inset: 8%; border-radius: 50%; pointer-events: none; }
.chaos-gold-particles { overflow: hidden; mix-blend-mode: screen; }
.chaos-gold-particles canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.chaos-winner-flash { opacity: 0; background: radial-gradient(circle, rgba(255,255,255,1) 0 4%, rgba(255,244,191,.98) 11%, rgba(240,186,79,.82) 27%, rgba(240,186,79,.26) 51%, transparent 75%); box-shadow: 0 0 34px rgba(255,236,158,.9), inset 0 0 18px rgba(255,255,255,.92); transform: scale(.12); }
.chaos-round.is-final .chaos-winner-flash { animation: chaos-winner-flash 1.35s cubic-bezier(.16,.86,.22,1) infinite; }
@keyframes chaos-winner-flash { 0% { opacity: 0; filter: blur(2px) brightness(1); transform: scale(.12); } 14% { opacity: 1; filter: blur(0) brightness(1.35); transform: scale(.82); } 46% { opacity: .58; filter: blur(3px) brightness(1.1); transform: scale(1.38); } 100% { opacity: 0; filter: blur(11px) brightness(.9); transform: scale(1.72); } }
.chaos-sparkle { position: absolute; z-index: 3; width: 18%; aspect-ratio: 1; opacity: 0; background: linear-gradient(90deg, transparent 45%, #fffdf5 47% 53%, transparent 55%), linear-gradient(transparent 45%, #fffdf5 47% 53%, transparent 55%); filter: drop-shadow(0 0 8px #f0ba4f); }
.chaos-sparkle-one { top: 17%; right: 14%; }.chaos-sparkle-two { bottom: 19%; left: 13%; transform: scale(.62) rotate(45deg); }
.chaos-round.is-slot .chaos-sparkle { animation: chaos-sparkle 1.15s ease-in-out infinite alternate; }.chaos-round.is-slot .chaos-sparkle-two { animation-delay: -.48s; }
@keyframes chaos-sparkle { from { opacity: .18; transform: scale(.62) rotate(0); } to { opacity: 1; transform: scale(1.12) rotate(45deg); } }
.chaos-candidate-stack { display: grid; gap: 5px; width: min(74%, 276px); text-align: center; transform: translateY(18px); }
.chaos-candidate-stack span { display: block; padding: 4px 14px; overflow: hidden; color: #403576; border-radius: 999px; background: rgba(255,253,245,.76); box-shadow: 0 1px rgba(255,255,255,.96); font-size: clamp(14px, 3.6cqw, 19px); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; opacity: 0; transform: translateY(14px) scale(.94); }
.chaos-candidate-stack span.is-revealed { animation: chaos-candidate-in .46s cubic-bezier(.18,.85,.28,1) forwards; }
@keyframes chaos-candidate-in { to { opacity: 1; transform: translateY(0) scale(1); } }
.chaos-slot-machine { position: absolute; z-index: 4; width: min(68%, 258px); padding: 16px 17px 18px; border: 2px solid #f0ba4f; border-radius: 22px; background: linear-gradient(145deg, #303743, #0a0c10 54%, #171b23); box-shadow: inset 0 2px rgba(255,255,255,.14), inset 0 -8px rgba(0,0,0,.56), 0 12px 24px rgba(0,0,0,.52), 0 0 22px rgba(240,186,79,.22); opacity: 0; transform: scale(.76) translateY(12px); }
.chaos-slot-machine p { margin: 0 0 8px; color: #f7d97b; font-size: 9px; font-weight: 900; letter-spacing: .22em; text-align: center; text-shadow: 0 0 9px rgba(240,186,79,.58); }
.chaos-slot-window { position: relative; height: 52px; overflow: hidden; border: 3px solid #dca846; border-radius: 12px; background: #06080b; box-shadow: inset 0 7px 13px rgba(0,0,0,.85), inset 0 -7px 13px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); }
.chaos-slot-window::before,.chaos-slot-window::after { content: ''; position: absolute; z-index: 2; left: 0; right: 0; height: 12px; pointer-events: none; }.chaos-slot-window::before { top: 0; background: linear-gradient(#06080b, transparent); }.chaos-slot-window::after { bottom: 0; background: linear-gradient(transparent, #06080b); }
.chaos-slot-reel span { display: grid; height: 52px; box-sizing: border-box; place-items: center; overflow: hidden; padding: 0 12px; color: #fff3cd; border-top: 1px solid rgba(255,243,205,.18); border-bottom: 1px solid rgba(0,0,0,.82); background: linear-gradient(90deg, rgba(255,255,255,.025), transparent 22%, transparent 78%, rgba(255,255,255,.025)); font-size: clamp(16px, 4cqw, 24px); font-weight: 900; text-overflow: ellipsis; text-shadow: 0 0 10px rgba(240,186,79,.42); white-space: nowrap; }
.chaos-slot-machine > strong { display: block; height: 0; overflow: hidden; margin: 0; color: #ffe5a0; font: 800 clamp(11px, 2.5cqw, 14px)/1.35 "Noto Sans KR", sans-serif; text-align: center; word-break: keep-all; }
.chaos-round.is-slot .chaos-candidate-stack { opacity: 0; transform: scale(.88); transition: opacity .26s ease, transform .26s ease; }.chaos-round.is-slot .chaos-slot-machine { animation: chaos-slot-enter .38s cubic-bezier(.18,.85,.28,1) forwards; }
.chaos-round.is-final { pointer-events: auto; }.chaos-round.is-final .chaos-slot-machine { box-shadow: inset 0 2px rgba(255,255,255,.2), inset 0 -8px rgba(0,0,0,.6), 0 0 0 5px rgba(240,186,79,.56), 0 0 32px rgba(240,186,79,.8), 0 12px 24px rgba(0,0,0,.58); cursor: pointer; }.chaos-round.is-final .chaos-slot-machine:focus-visible { outline: 3px solid rgba(255,255,255,.9); outline-offset: 5px; }.chaos-round.is-final .chaos-slot-machine > strong { height: auto; margin-top: 10px; }
@keyframes chaos-slot-enter { to { opacity: 1; transform: scale(1) translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .theme-roulette .roulette-wheel.is-idle-spinning,
  .theme-roulette .primary-actions button.is-stop-action { animation: none; }
  .theme-roulette .wheel-pointer { transform: translateX(-50%); }
  .collection-countdown.is-ending { animation: none; }
  .winner-reveal.is-visible .winner-confetti i,.winner-reveal.is-flying button { animation: none; }
  .wheel-entry-label.is-chaos-candidate,.roulette-wheel.is-chaos-twist,.chaos-round.is-announcing .chaos-phase-message,.chaos-round.is-transitioning .chaos-disc,.chaos-candidate-stack span.is-revealed,.chaos-round.is-slot .chaos-sparkle,.chaos-round.is-final .chaos-winner-flash,.chaos-round.is-slot .chaos-slot-machine { animation: none; }
  .chaos-phase-message,.chaos-disc,.chaos-candidate-stack span,.chaos-slot-machine { opacity: 1; transform: none; }
  .chaos-candidate-stack { display: none; }
  .chaos-slot-machine { display: block; }
}
.theme-roulette .roulette-wrap > .wheel-core { position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: wheel-core-ambient 3.8s ease-in-out infinite; }
@keyframes wheel-core-ambient { 0%, 100% { transform: translate(-50%, -50%) translate(0, 0) scale(1); } 45% { transform: translate(-50%, -50%) translate(.65px, -.45px) scale(1.006); } 72% { transform: translate(-50%, -50%) translate(-.35px, .3px) scale(.998); } }
@media (min-width: 901px) {
  .theme-roulette {
    height: 100dvh;
    overflow: hidden;
  }
}

@media (max-width: 520px) {
  .theme-roulette .primary-actions { gap: 6px; }
  .theme-roulette .primary-actions { padding-right: 42px; }
  .theme-roulette .primary-actions .primary-button {
    padding: 10px 7px;
    font-size: 11px;
    white-space: nowrap;
  }
  .winner-history ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .theme-roulette .game-heading { order: 0; padding-top: 44px; }
  .theme-roulette .winner-history { position: static; width: min(390px, 100%); transform: none; order: 1; margin: 10px auto 14px; }
  .theme-roulette .winner-reveal { position: absolute; top: 50%; left: 50%; width: calc(100% - 40px); margin: 0; transform: translate(-50%, -50%); }
  .theme-roulette .collection-countdown { position: static; order: 3; width: min(180px, 100%); min-width: 0; margin: 0 auto 12px; }
  .theme-roulette .roulette-wrap { order: 4; margin: 0 auto; }
  .theme-roulette .primary-actions { order: 6; }
}

:root { --roulette-action-blue: #173d6e; --roulette-action-blue-hover: #0f2c55; --roulette-action-blue-shadow: rgba(23, 61, 110, .26); --roulette-pointer-gold: #f0ba4f; }

.final-two {
  top: 50%;
  grid-template-columns: 1fr;
  width: 100%;
  min-height: 168px;
  padding: 12px 90px 20px;
  border: 3px solid transparent;
  background: linear-gradient(#edf0f3, #edf0f3) padding-box, linear-gradient(108deg, #b94351 0 47%, #f0c869 48% 52%, #376fbd 53% 100%) border-box;
  box-shadow: 0 0 0 1px rgba(255,255,255,.94), 0 0 24px rgba(240,186,79,.52);
}
.final-two:after { display: none; }
.final-two-copy { align-self: start; padding-top: 0; }
.final-two strong { display: block; color: #213043; font-size: clamp(15px, 3.4cqw, 22px); letter-spacing: .12em; text-shadow: 0 1px 0 #fff, 0 0 12px rgba(240,186,79,.48); white-space: nowrap; }
.final-two-names { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 5px; margin-top: 10px; overflow: visible; color: #243449; white-space: normal; }
.final-two-names em { color: #7a8490; font: 900 16px/1 "Cormorant Garamond", serif; font-style: normal; letter-spacing: .08em; }
.final-two-name { --final-two-proximity: 0; display: block; min-width: 0; overflow: visible; font: 900 7px/1.1 "Noto Sans KR", sans-serif; letter-spacing: -.05em; text-align: center; text-overflow: ellipsis; white-space: nowrap; filter: brightness(.65) drop-shadow(0 0 2px currentColor); transition: font-size .12s ease-out, filter .12s ease-out, color .12s ease-out; }
.final-two-name-red { color: #ad3444; text-align: right; transform-origin: right center; text-shadow: 0 0 8px rgba(185,67,81,.72); }
.final-two-name-blue { color: #2e67b6; text-align: left; transform-origin: left center; text-shadow: 0 0 8px rgba(55,111,189,.72); }
.final-two-fighter { position: absolute; bottom: 8px; width: 129px; height: 129px; object-fit: contain; filter: brightness(.72) drop-shadow(0 0 2px rgba(240,186,79,.2)) drop-shadow(0 4px 4px rgba(0,0,0,.2)); animation: final-two-warrior-aura 1.35s ease-in-out infinite alternate; }
.final-two-fighter-left { left: 12px; }
.final-two-fighter-right { right: 12px; transform: scaleX(-1); animation-name: final-two-warrior-aura-right; }
@keyframes final-two-warrior-aura { to { transform: translateY(-1px) scale(1.02); } }
@keyframes final-two-warrior-aura-right { to { transform: scaleX(-1) translateY(-1px) scale(1.02); } }
.final-two-aura-burst { position: absolute; z-index: 0; top: 50%; left: 22%; width: 56%; height: 64px; border-radius: 999px; background: radial-gradient(ellipse at right, rgba(255,255,232,1) 0 6%, rgba(255,224,112,.98) 17%, rgba(255,211,93,.52) 35%, rgba(255,211,93,.14) 68%, transparent 86%); filter: blur(2px) drop-shadow(0 0 12px rgba(255,224,112,.94)); opacity: 0; pointer-events: none; transform: translateY(-50%) scaleX(.2); transform-origin: left center; }
.final-two.is-final-two-finish .final-two-aura-burst::before,.final-two.is-final-two-finish .final-two-aura-burst::after { position:absolute; top:50%; width:18px; height:18px; border-radius:50%; background:#fff9cb; box-shadow:0 0 10px 5px rgba(255,220,95,.94); content:""; opacity:0; transform:translate(-50%,-50%) scale(.35); }
.final-two.is-final-two-finish .final-two-aura-burst::before { animation:final-two-last-shot .28s ease-out both; }
.final-two.is-final-two-finish .final-two-aura-burst::after { animation:final-two-last-shot .28s .14s ease-out both; }
.final-two.is-final-two-finish.is-left-leading .final-two-fighter-left { animation:final-two-winner-last-attack .42s ease-out both; }
.final-two.is-final-two-finish.is-left-leading .final-two-fighter-right { animation:final-two-loser-knockback .42s ease-out both; }
.final-two.is-final-two-finish.is-right-leading .final-two-fighter-right { animation:final-two-winner-last-attack-right .42s ease-out both; }
.final-two.is-final-two-finish.is-right-leading .final-two-fighter-left { animation:final-two-loser-knockback-left .42s ease-out both; }
.final-two.is-final-two-finish.is-right-leading .final-two-aura-burst::before,
.final-two.is-final-two-finish.is-right-leading .final-two-aura-burst::after { animation-name: final-two-last-shot-right; }
.final-two.is-left-leading:not(.is-final-two-settled) .final-two-aura-burst { animation: final-two-gold-strike 1.05s ease-out infinite; }
.final-two.is-right-leading:not(.is-final-two-settled) .final-two-aura-burst { transform-origin: right center; background: radial-gradient(ellipse at left, rgba(255,255,232,1) 0 6%, rgba(255,224,112,.98) 17%, rgba(255,211,93,.52) 35%, rgba(255,211,93,.14) 68%, transparent 86%); animation: final-two-gold-strike 1.05s ease-out infinite; }
.final-two.is-final-two-settled { cursor: pointer; pointer-events: auto; }
.final-two.is-final-two-settled .final-two-aura-burst { left: 24%; width: 52%; animation: final-two-gold-strike 1s ease-out 2; }
.final-two.is-final-two-settled.is-right-leading .final-two-aura-burst { transform-origin: right center; background: radial-gradient(ellipse at left, rgba(255,255,232,1) 0 6%, rgba(255,224,112,.98) 17%, rgba(255,211,93,.52) 35%, rgba(255,211,93,.14) 68%, transparent 86%); }
.final-two-victory-confetti { position: absolute; z-index: 2; inset: 0; display: none; overflow: hidden; pointer-events: none; }
.final-two.is-final-two-settled .final-two-victory-confetti { display: block; }
.final-two-victory-confetti i { position: absolute; left: 26%; bottom: 24%; width: 5px; height: 9px; border-radius: 2px; background: #f0ba4f; box-shadow: 0 0 7px rgba(255,224,112,.92); opacity: 0; animation: final-two-victory-confetti 2.5s linear infinite; }
.final-two.is-right-leading .final-two-victory-confetti i { left: 74%; }
.final-two-victory-confetti i:nth-child(2n) { background: #fff5bc; }.final-two-victory-confetti i:nth-child(3n) { background: #fffdf5; }
.final-two-victory-confetti i:nth-child(1) { --confetti-x: -54px; --confetti-y: -72px; animation-delay: -.2s; }.final-two-victory-confetti i:nth-child(2) { --confetti-x: -28px; --confetti-y: -108px; animation-delay: -1.1s; }.final-two-victory-confetti i:nth-child(3) { --confetti-x: -5px; --confetti-y: -84px; animation-delay: -.7s; }.final-two-victory-confetti i:nth-child(4) { --confetti-x: 22px; --confetti-y: -118px; animation-delay: -1.7s; }.final-two-victory-confetti i:nth-child(5) { --confetti-x: 50px; --confetti-y: -66px; animation-delay: -1.4s; }.final-two-victory-confetti i:nth-child(6) { --confetti-x: 69px; --confetti-y: -96px; animation-delay: -.4s; }.final-two-victory-confetti i:nth-child(7) { --confetti-x: -70px; --confetti-y: -42px; animation-delay: -2.1s; }.final-two-victory-confetti i:nth-child(8) { --confetti-x: -42px; --confetti-y: -135px; animation-delay: -1.9s; }.final-two-victory-confetti i:nth-child(9) { --confetti-x: 2px; --confetti-y: -130px; animation-delay: -1.5s; }.final-two-victory-confetti i:nth-child(10) { --confetti-x: 42px; --confetti-y: -142px; animation-delay: -.9s; }.final-two-victory-confetti i:nth-child(11) { --confetti-x: 78px; --confetti-y: -52px; animation-delay: -2.3s; }.final-two-victory-confetti i:nth-child(12) { --confetti-x: 96px; --confetti-y: -102px; animation-delay: -1.3s; }
.final-two:is(.is-final-two-settled, .is-final-two-provisional) .final-two-names { grid-template-columns: 1fr; justify-items: center; margin-top: 10px; }
.final-two:is(.is-final-two-settled, .is-final-two-provisional) .final-two-names em,
.final-two.is-left-leading:is(.is-final-two-settled, .is-final-two-provisional) .final-two-name-blue,
.final-two.is-right-leading:is(.is-final-two-settled, .is-final-two-provisional) .final-two-name-red { display: none; }
.final-two:is(.is-final-two-settled, .is-final-two-provisional) .final-two-name { text-align: center; transform-origin: center; }
.final-two-winner-hint { display: none; position:absolute; right:14px; bottom:12px; left:14px; color: #765414; font-size: 11px; font-weight: 800; text-shadow: 0 1px 0 #fff; }
.final-two.is-final-two-settled .final-two-winner-hint { display: block; animation: final-two-winner-hint-pulse 1.2s ease-in-out infinite alternate; }
@keyframes final-two-gold-strike { 0% { opacity: 0; transform: translateY(-50%) scaleX(.18); } 20% { opacity: 1; } 58% { opacity: .92; transform: translateY(-50%) scaleX(1.16); } 100% { opacity: 0; transform: translateY(-50%) scaleX(1.38); } }
@keyframes final-two-last-shot { 0% { left:15%; opacity:0; transform:translate(-50%,-50%) scale(.35); } 28% { opacity:1; } 100% { left:88%; opacity:0; transform:translate(-50%,-50%) scale(1.35); } }
@keyframes final-two-last-shot-right { 0% { left:85%; opacity:0; transform:translate(-50%,-50%) scale(.35); } 28% { opacity:1; } 100% { left:12%; opacity:0; transform:translate(-50%,-50%) scale(1.35); } }
@keyframes final-two-winner-last-attack { 0% { transform:translateX(0) scale(1); } 38% { transform:translateX(13px) scale(1.07); } 100% { transform:translateX(0) scale(1.02); } }
@keyframes final-two-winner-last-attack-right { 0% { transform:translateX(0) scaleX(-1) scale(1); } 38% { transform:translateX(-13px) scaleX(-1) scale(1.07); } 100% { transform:translateX(0) scaleX(-1) scale(1.02); } }
@keyframes final-two-loser-knockback { 0% { filter:grayscale(0) brightness(1); opacity:1; transform:scaleX(-1); } 42% { filter:grayscale(.62) brightness(.82); } 100% { filter:grayscale(1) brightness(.62); opacity:.3; transform:translateX(32px) scaleX(-1); } }
@keyframes final-two-loser-knockback-left { 0% { filter:grayscale(0) brightness(1); opacity:1; transform:translateX(0); } 42% { filter:grayscale(.62) brightness(.82); } 100% { filter:grayscale(1) brightness(.62); opacity:.3; transform:translateX(-32px); } }
@keyframes final-two-victory-confetti { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.55); } 12% { opacity: 1; } 78% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--confetti-x), var(--confetti-y)) rotate(260deg) scale(1); } }
@keyframes final-two-winner-hint-pulse { to { color: #a27214; text-shadow: 0 0 10px rgba(255,211,93,.92); } }
@media (max-width: 520px) {
  .final-two { min-height: 138px; padding: 12px 65px 18px; }
  .final-two-fighter { bottom: 7px; width: 87px; height: 87px; }
  .final-two-fighter-left { left: 7px; }
  .final-two-fighter-right { right: 7px; }
  .final-two-name { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .final-two-name, .final-two-fighter, .final-two-victory-confetti i { transition: none; animation: none; }
  .theme-roulette .roulette-wrap > .wheel-core { animation: none; }
}

.game-settings-panel h2 { font:700 32px/1 "Cormorant Garamond", "Noto Sans KR", serif; }
.game-settings-panel label { display:block; margin-top:16px; color:#345f68; font-size:11px; font-weight:800; }
.game-settings-panel label > span { display:flex; justify-content:space-between; gap:12px; }.game-settings-panel output { color:#0f2c55; font-variant-numeric:tabular-nums; }
.game-settings-panel input[type=range] { display:block; width:100%; margin:8px 0 0; }.game-settings-toggle { display:flex!important; gap:9px; align-items:center; }.game-settings-toggle > span { display:block!important; }.game-settings-toggle output { margin-left:auto; }
.game-settings-panel small { display:block; margin:6px 0 0 23px; color:#638083; font-size:10px; line-height:1.45; }
.game-settings-panel > button[type=submit] { width:100%; margin-top:22px; padding:12px; font-weight:800; }
.roulette-scratch-reveal { position: absolute; z-index: 12; inset: -2%; overflow: hidden; border: 2px solid rgba(240,198,107,.9); border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,255,255,.36), 0 0 36px rgba(23,61,110,.72); opacity: 0; touch-action: none; transition: opacity 2.5s linear; }.roulette-scratch-reveal.is-visible { opacity: 1; }.roulette-scratch-reveal canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; pointer-events: none; touch-action: none; }.roulette-scratch-reveal.is-ready canvas { pointer-events: auto; }.roulette-scratch-reveal p,.roulette-scratch-reveal small { position: absolute; z-index: 1; left: 50%; margin: 0; color: #fff7d2; pointer-events: none; text-align: center; transform: translateX(-50%); text-shadow: 0 0 9px #102a52, 0 0 20px #102a52; }.roulette-scratch-reveal p { top: 46%; font: 800 clamp(20px, 5cqw, 34px)/1 "Cormorant Garamond", "Noto Sans KR", serif; letter-spacing: .08em; white-space: nowrap; }.roulette-scratch-reveal small { top: 46%; font: 800 clamp(38px, 9cqw, 64px)/1 "Cormorant Garamond", "Noto Sans KR", serif; font-variant-numeric: tabular-nums; white-space: nowrap; }.roulette-scratch-reveal.is-cleared { opacity: 0; transition: opacity .24s ease; }body.is-scratch-lock * { pointer-events: none!important; }body.is-scratch-lock .roulette-scratch-reveal.is-ready,body.is-scratch-lock .roulette-scratch-reveal.is-ready * { pointer-events: auto!important; }
.theme-roulette .play-stage, .theme-roulette .play-stage * { -webkit-user-select: none; user-select: none; }
.theme-roulette .collector-controls input { -webkit-user-select: text; user-select: text; }
@media (max-width: 520px) { .theme-roulette .primary-actions { padding-right: 80px; } }

.theme-sheep .play-stage {
  background:
    radial-gradient(circle at 50% 32%, rgba(214, 255, 224, .55) 0%, transparent 34%),
    rgba(240, 250, 244, .55);
}

.theme-sheep .primary-actions { width: 100%; margin: auto 0 0; }

/* All playable games share one sound control and utility-button spacing. */
.primary-actions.has-audio .game-panel-help { right: 80px; }
.primary-actions.has-audio .game-panel-settings { right: 40px; }
.game-audio { position:absolute; z-index:20; right:0; top:50%; width:32px; height:32px; transform:translateY(-50%); }
.game-audio.is-open { --round-button-hover-transform:rotate(0deg); }
.game-audio .game-panel-sound { right:0; z-index:1; }
.game-audio.is-open .game-panel-sound { background:transparent; border-color:transparent; }
.game-audio-close { display:none; font:400 23px/1 Arial,sans-serif; }
.game-audio.is-open .game-panel-sound svg { display:none; }
.game-audio.is-open .game-audio-close { display:block; }
.game-audio .sound-cross { display:none; }
.game-audio.is-muted .sound-cross { display:block; }
.game-audio.is-muted .sound-waves { display:none; }
.game-audio-popover { position:absolute; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; gap:8px; width:32px; padding:12px 0 35px; border:1px solid rgba(255,255,255,.75); border-radius:999px; background:rgba(255,255,255,.58); box-shadow:0 12px 30px rgba(20,60,70,.25); color:#214c50; visibility:hidden; opacity:0; pointer-events:none; transform:translateY(12px) scaleY(.15); transform-origin:center bottom; transition:opacity .2s ease,transform .24s ease,visibility .24s ease; }
.game-audio.is-open .game-audio-popover { visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0) scaleY(1); }
.game-audio-popover output { width:100%; font:700 9px/1.2 "Noto Sans KR",sans-serif; text-align:center; white-space:nowrap; }
.game-audio-popover input { writing-mode:vertical-lr; direction:rtl; width:24px; height:150px; margin:0; accent-color:#285959; cursor:pointer; }
.game-audio-mute { display:grid; flex:none; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:50%; color:#214c50; background:transparent; cursor:pointer; }
.game-audio-mute[aria-pressed=true] { color:#a53b48; }
.game-audio-mute:hover { background:rgba(255,255,255,.55); }
.game-audio-mute svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.game-audio :focus-visible { outline:2px solid #285959; outline-offset:3px; }
@media (prefers-reduced-motion: reduce) { .game-audio-popover { transition:none; } }
@media (max-width:600px) {
  .game-app .primary-actions.has-audio { padding-right:0; padding-bottom:44px; }
  .primary-actions.has-audio > .game-panel-icon { top:auto; bottom:0; transform:none; --round-button-offset:translateY(0); }
  .primary-actions.has-audio > .game-panel-icon:not(:disabled):is(:hover,:focus-visible),
  .game-audio .game-panel-sound:not(:disabled):is(:hover,:focus-visible) { transform:var(--round-button-hover-transform); }
  .primary-actions.has-audio .game-audio { top:auto; bottom:0; transform:none; }
  .game-audio .game-panel-sound { top:0; transform:none; }
  .game-audio-popover input { height:120px; }
}

.theme-sheep .sheep-wrap {
  position: absolute;
  inset: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 520px) {
  .theme-sheep .game-footer { padding-bottom: 16px; }
}