@font-face {
  font-family: "ColoverpitKR";
  src: url("fonts/font.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
}

:root {
  color-scheme: dark;
  --bg: #09000f;
  --panel: #170622;
  --purple: #a329ff;
  --pink: #ff2abf;
  --gold: #ffd464;
  --deep-gold: #a95a00;
  --cream: #fff8e4;
  --line: rgba(255, 255, 255, .13);
  --muted: #cdbbda;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--cream);
  font-family: "ColoverpitKR", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(circle at 50% -10%, rgba(160, 41, 255, .35), transparent 42%),
    radial-gradient(circle at 10% 70%, rgba(255, 42, 191, .15), transparent 30%),
    radial-gradient(circle at 90% 70%, rgba(255, 191, 0, .14), transparent 30%),
    linear-gradient(180deg, #12001e, #050007 72%);
}
button, input { font: inherit; }
button { cursor: pointer; }

.ambient {
  position: fixed;
  width: 36vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .18;
  pointer-events: none;
  animation: floatGlow 8s ease-in-out infinite alternate;
}
.ambient-a { left: -12vw; top: 20vh; background: #d300ff; }
.ambient-b { right: -12vw; bottom: 0; background: #ff9c00; animation-delay: -4s; }

.stars,
.stars::before,
.stars::after {
  position: fixed;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,207,89,.8) 0 1px, transparent 1.8px);
  background-size: 95px 95px, 137px 137px;
  background-position: 0 0, 30px 46px;
  opacity: .24;
  animation: starDrift 24s linear infinite;
}
.stars::before { transform: scale(1.3); opacity: .3; animation-duration: 34s; }
.stars::after { transform: scale(.8); opacity: .18; animation-direction: reverse; }

.page-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 16px;
}

.casino {
  position: relative;
  width: min(1180px, 100%);
  padding: 22px 24px 16px;
  border: 1px solid rgba(255, 211, 100, .28);
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(31, 4, 49, .97), rgba(8, 1, 15, .97));
  box-shadow:
    0 40px 130px rgba(0, 0, 0, .75),
    0 0 70px rgba(163, 41, 255, .18),
    inset 0 0 0 2px rgba(255, 255, 255, .035);
}

.marquee {
  position: relative;
  z-index: 2;
  margin: -4px auto 26px;
  padding: 18px 36px 14px;
  text-align: center;
  border: 4px solid var(--gold);
  border-radius: 28px 28px 16px 16px;
  background: linear-gradient(180deg, #67121c, #21000e 80%);
  box-shadow:
    0 0 0 4px #7d2900,
    0 0 0 8px rgba(255, 205, 63, .25),
    0 0 34px rgba(255, 42, 191, .75),
    inset 0 0 32px rgba(255, 172, 0, .28);
}
.marquee::before,
.marquee::after {
  content: "★";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: clamp(22px, 3vw, 38px);
  text-shadow: 0 0 15px #ff8a00;
  animation: starPulse 1.4s ease-in-out infinite alternate;
}
.marquee::before { left: 3%; }
.marquee::after { right: 3%; animation-delay: -.7s; }
.marquee-kicker {
  margin: 0 0 2px;
  color: #ff74d6;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .35em;
}
.marquee h1 {
  position: relative;
  margin: 0;
  font-family: "ColoverpitKR", Georgia, "Times New Roman", serif;
  font-size: clamp(46px, 8vw, 96px);
  line-height: .92;
  letter-spacing: -.04em;
  color: #fff2a6;
  background: linear-gradient(180deg, #fffbe0 8%, #ffd251 32%, #c97000 62%, #fff0a0 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 5px 0 #6a1900) drop-shadow(0 0 14px rgba(255, 206, 61, .65));
  animation: titleGlow 2.3s ease-in-out infinite alternate;
}
.subtitle {
  margin: 7px 0 0;
  color: #ff9be1;
  font-weight: 800;
  letter-spacing: .15em;
}
.subtitle span { margin-left: 10px; color: #fff0ad; font-size: 12px; }

.layout {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr) 205px;
  align-items: center;
  gap: 22px;
}
.side-panel { display: grid; gap: 14px; }
.info-card,
.payout-panel {
  border: 2px solid #ffb42e;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(56, 7, 72, .96), rgba(18, 4, 30, .96));
  box-shadow: inset 0 0 22px rgba(255, 42, 191, .12), 0 0 18px rgba(255, 169, 0, .12);
}
.info-card { padding: 18px 16px; text-align: center; }
.info-card span { color: #f5b6ff; font-size: 12px; font-weight: 900; letter-spacing: .18em; }
.info-card strong { display: block; margin-top: 8px; color: var(--gold); font-size: 20px; }
.info-card strong b { font-size: 42px; line-height: 1; }
.bet-card { border-color: #d63cff; }
.charge-open {
  min-height: 56px;
  border: 2px solid #b54cff;
  border-radius: 16px;
  color: #fff;
  font-weight: 900;
  letter-spacing: .08em;
  background: linear-gradient(135deg, #42105e, #7d148c);
  box-shadow: 0 0 20px rgba(181, 76, 255, .28), inset 0 1px 0 rgba(255,255,255,.2);
  transition: .2s;
}
.charge-open:hover { transform: translateY(-2px); filter: brightness(1.16); }
.charge-open:disabled {
  cursor: not-allowed;
  opacity: .42;
  filter: grayscale(.55) brightness(.72);
  transform: none;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .55);
}
.charge-open:disabled:hover { transform: none; filter: grayscale(.55) brightness(.72); }
.charge-open span { color: #ffe263; font-size: 20px; }

.machine-column { min-width: 0; text-align: center; }
.machine-frame {
  position: relative;
  padding: 22px;
  border: 5px solid #ffcf58;
  border-radius: 34px;
  background: linear-gradient(145deg, #9a4400, #ffcc52 16%, #733000 36%, #ffce58 62%, #7c3400);
  box-shadow:
    0 0 0 5px #5e2000,
    0 0 0 8px rgba(255, 210, 87, .35),
    0 18px 40px rgba(0,0,0,.5),
    0 0 36px rgba(255, 191, 28, .25);
}
.machine-frame::before,
.machine-frame::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 24px;
  pointer-events: none;
}
.machine-frame::after { inset: -10px; border-style: dotted; border-width: 5px; border-color: #ffe675; animation: bulbsBlink 1s steps(2) infinite; }

.reel-window {
  position: relative;
  overflow: hidden;
  padding: 14px;
  border: 7px solid #16070a;
  border-radius: 22px;
  background: #14080b;
  box-shadow: inset 0 0 24px #000;
}
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.reel {
  position: relative;
  aspect-ratio: 1 / 1.12;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-left: 2px solid #8f754c;
  border-right: 2px solid #8f754c;
  background:
    linear-gradient(90deg, rgba(0,0,0,.14), transparent 18% 82%, rgba(0,0,0,.15)),
    linear-gradient(180deg, #c9bdac, #fffdf5 35%, #efe5d5 68%, #b8aa96);
  box-shadow: inset 0 15px 25px rgba(0,0,0,.22), inset 0 -15px 25px rgba(0,0,0,.2);
}
.reel img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.28));
}
.reel.spinning img { animation: reelBlur .11s linear infinite; filter: blur(4px) saturate(1.5); }
.payline {
  position: absolute;
  z-index: 5;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 4px;
  background: linear-gradient(90deg, transparent, #fff3a5 12%, #ffbe00 50%, #fff3a5 88%, transparent);
  box-shadow: 0 0 10px #ff8a00, 0 0 20px #ff4d00;
  transform: translateY(-50%);
  pointer-events: none;
}
.glass-shine {
  position: absolute;
  z-index: 6;
  top: -60%;
  left: -30%;
  width: 35%;
  height: 220%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: glassSweep 4s linear infinite;
  pointer-events: none;
}

.message {
  min-height: 48px;
  display: grid;
  place-items: center;
  margin: 18px auto 12px;
  padding: 10px 16px;
  border: 2px solid #8e4b05;
  border-radius: 15px;
  color: #ffe7a5;
  font-weight: 800;
  background: #11070e;
  box-shadow: inset 0 0 18px rgba(255, 143, 0, .13);
}
.message.win { color: #fff6a6; animation: messageWin .48s ease-in-out 3; }
.message.lose { color: #ff9bae; }

.spin-button {
  position: relative;
  min-width: 290px;
  padding: 14px 44px 13px;
  border: 5px solid #ffd86a;
  border-radius: 28px;
  color: #ffd767;
  background: radial-gradient(circle at 50% 15%, #a72dff, #4b076d 58%, #22002e);
  box-shadow:
    0 0 0 5px #6b2700,
    0 12px 0 #3b1200,
    0 18px 28px rgba(0,0,0,.45),
    0 0 28px rgba(186, 43, 255, .45),
    inset 0 2px 0 rgba(255,255,255,.35);
  transition: transform .14s, filter .14s;
}
.spin-button:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.13); }
.spin-button:active { transform: translateY(6px); box-shadow: 0 0 0 5px #6b2700, 0 6px 0 #3b1200, 0 10px 20px rgba(0,0,0,.4); }
.spin-button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.spin-label { display: block; font-family: "ColoverpitKR", Georgia, serif; font-size: 47px; font-weight: 900; line-height: .88; text-shadow: 0 3px 0 #5c1800, 0 0 12px #ffb700; }
.spin-button small { display: block; margin-top: 7px; color: white; font-weight: 800; }

.payout-panel { padding: 16px 14px; border-color: #d83dff; }
.payout-panel h2 { margin: 0 0 8px; color: #ffd765; font-size: 17px; }
.payout-list { display: grid; }
.payout-list div {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  min-height: 62px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.payout-list img { width: 48px; height: 48px; object-fit: contain; margin: auto; }
.payout-list span { color: #ffd660; font-size: 23px; font-weight: 950; text-align: right; }
.footer { margin-top: 18px; color: #755f84; font-size: 11px; letter-spacing: .18em; text-align: center; }

.charge-dialog {
  width: min(520px, calc(100% - 28px));
  padding: 0;
  border: 2px solid #d54cff;
  border-radius: 25px;
  color: #fff;
  background: linear-gradient(180deg, #351047, #100619);
  box-shadow: 0 0 60px rgba(213, 76, 255, .38), 0 30px 80px rgba(0,0,0,.7);
}
.charge-dialog::backdrop { background: rgba(4, 0, 8, .82); backdrop-filter: blur(8px); }
.charge-dialog form { position: relative; padding: 28px; }
.dialog-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  color: #d7bedf;
  background: transparent;
  font-size: 28px;
}
.dialog-kicker { margin: 0; color: #ff81dd; font-size: 11px; font-weight: 900; letter-spacing: .24em; }
.charge-dialog h2 { margin: 5px 0 7px; color: #ffdc72; font-size: 31px; }
.dialog-copy { color: var(--muted); }
.phrase-list { display: grid; gap: 8px; margin: 16px 0; }
.phrase-list button {
  padding: 11px 12px;
  border: 1px solid #9b33c4;
  border-radius: 10px;
  color: #f0c7ff;
  background: #2b0a39;
  transition: .15s;
}
.phrase-list button:hover { border-color: #ff63d2; background: #481054; }
.charge-dialog input {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid #754182;
  border-radius: 12px;
  outline: none;
  color: #fff;
  background: #100716;
}
.charge-dialog input:focus { border-color: #ff5ed7; box-shadow: 0 0 0 4px rgba(255,94,215,.12); }
.error { min-height: 20px; margin: 8px 0 12px; color: #ff8aa0; font-size: 13px; }
.dialog-submit {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 13px;
  color: #3d1500;
  font-weight: 950;
  background: linear-gradient(180deg, #fff095, #ffb20d);
}

.win-overlay {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(.45);
}
.win-overlay.show { animation: overlayWin 1.55s cubic-bezier(.2,.9,.2,1); }
.win-overlay strong {
  font-family: "ColoverpitKR", Georgia, serif;
  font-size: clamp(55px, 11vw, 140px);
  color: #fff4a6;
  text-shadow: 0 6px 0 #8e3400, 0 0 20px #ffca1a, 0 0 50px #ff2ccb;
}
.win-overlay span { color: white; font-size: clamp(26px, 5vw, 55px); font-weight: 950; text-shadow: 0 0 18px #ff34c8; }

.confetti { position: fixed; z-index: 25; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-piece { position: absolute; top: -20px; width: 10px; height: 18px; border-radius: 2px; animation: confettiFall 1.9s ease-in forwards; }
.hantang-rain-piece {
  position: absolute;
  top: -120px;
  height: auto;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .48));
  animation: hantangRainFall 4s linear forwards;
  will-change: transform, opacity;
}
.casino.jackpot { animation: jackpotShake .14s linear 8; }
.casino.win-tier-low { filter: brightness(1.03); }
.casino.win-tier-mid { animation: jackpotShake .18s linear 5; filter: brightness(1.08) saturate(1.08); }
.casino.win-tier-high { animation: jackpotShake .13s linear 10; filter: brightness(1.14) saturate(1.18); }
.casino.win-tier-jackpot { animation: jackpotShake .09s linear 18; filter: brightness(1.24) saturate(1.3) drop-shadow(0 0 28px rgba(255, 215, 64, .75)); }

@keyframes reelBlur {
  0% { transform: translateY(-28%) scale(.92); }
  50% { transform: translateY(28%) scale(1.08); }
  100% { transform: translateY(-28%) scale(.92); }
}
@keyframes glassSweep { from { left: -40%; } to { left: 130%; } }
@keyframes floatGlow { to { transform: translate(7vw, 4vh) scale(1.2); } }
@keyframes starDrift { to { background-position: 95px 190px, -107px 183px; } }
@keyframes titleGlow { to { filter: drop-shadow(0 5px 0 #6a1900) drop-shadow(0 0 24px rgba(255, 233, 117, .95)); } }
@keyframes starPulse { to { transform: translateY(-50%) scale(1.35) rotate(20deg); } }
@keyframes bulbsBlink { 50% { border-color: #ff8a00; filter: brightness(.8); } }
@keyframes messageWin { 50% { transform: scale(1.035); box-shadow: 0 0 24px rgba(255,205,51,.45); } }
@keyframes jackpotShake { 25% { transform: translateX(-3px) rotate(-.15deg); } 75% { transform: translateX(3px) rotate(.15deg); } }
@keyframes overlayWin { 0% { opacity: 0; transform: scale(.4) rotate(-8deg); } 22%, 72% { opacity: 1; transform: scale(1) rotate(0); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes confettiFall { to { transform: translate3d(var(--x), 110vh, 0) rotate(900deg); opacity: 0; } }
@keyframes hantangRainFall {
  0% { transform: translate3d(0, -12vh, 0) rotate(0deg) scale(.88); opacity: 0; }
  8% { opacity: 1; }
  35% { transform: translate3d(var(--sway), 30vh, 0) rotate(calc(var(--spin) * .28)) scale(.96); opacity: 1; }
  70% { transform: translate3d(calc(var(--drift) * .45), 72vh, 0) rotate(calc(var(--spin) * .68)) scale(1); opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translate3d(var(--drift), 118vh, 0) rotate(var(--spin)) scale(1.03); opacity: 0; }
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .status-panel { grid-template-columns: 1fr 1fr; }
  .charge-open { grid-column: 1 / -1; }
  .payout-panel { order: 3; }
  .payout-list { grid-template-columns: repeat(3, 1fr); }
  .payout-list div { grid-template-columns: 46px 1fr; padding: 0 8px; }
}

@media (max-width: 560px) {
  .page-shell { padding: 10px; }
  .casino { padding: 13px 12px; border-radius: 22px; }
  .marquee { padding: 16px 24px 12px; border-width: 3px; }
  .marquee::before, .marquee::after { display: none; }
  .subtitle span { display: block; margin: 5px 0 0; }
  .machine-frame { padding: 12px; border-width: 4px; }
  .reel-window { padding: 7px; border-width: 5px; }
  .reels { gap: 5px; }
  .spin-button { min-width: min(280px, 90%); }
  .spin-label { font-size: 39px; }
  .payout-list { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* Royal fortune theme: CSS-only palace glow, coins and floating clovers */
:root {
  --royal-black: #090603;
  --royal-brown: #221205;
  --royal-red: #431005;
  --royal-gold: #ffd968;
  --royal-gold-2: #b86b08;
  --emerald: #0c6b37;
  --emerald-bright: #47e277;
}

body {
  background:
    radial-gradient(ellipse at 50% -12%, rgba(255, 211, 92, .44), transparent 40%),
    radial-gradient(circle at 15% 24%, rgba(255, 166, 28, .18), transparent 24%),
    radial-gradient(circle at 86% 30%, rgba(255, 195, 63, .18), transparent 25%),
    repeating-linear-gradient(90deg, rgba(255, 220, 118, .035) 0 2px, transparent 2px 95px),
    linear-gradient(180deg, #2d1705 0%, #120904 48%, #050301 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(255, 210, 91, .16) 7.2% 7.7%, transparent 8% 92%, rgba(255, 210, 91, .16) 92.3% 92.8%, transparent 93%),
    radial-gradient(ellipse at 8% 60%, rgba(255, 190, 44, .17), transparent 20%),
    radial-gradient(ellipse at 92% 60%, rgba(255, 190, 44, .17), transparent 20%);
  box-shadow: inset 0 0 180px #000, inset 0 -100px 150px rgba(0,0,0,.8);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .55;
  background-image:
    radial-gradient(circle, #fff7bb 0 1px, transparent 2px),
    radial-gradient(circle, #ffbe25 0 1.4px, transparent 2.5px);
  background-size: 92px 92px, 157px 157px;
  animation: royalDust 26s linear infinite;
}

.ambient-a { background: #ffb000; opacity: .16; }
.ambient-b { background: #0da44e; opacity: .12; }
.stars { opacity: .38; }

.royal-effects {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.royal-effects i,
.royal-effects b { position: absolute; font-style: normal; user-select: none; }

.clover {
  color: #48d873;
  font-family: "ColoverpitKR", Georgia, serif;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 8px #baffbf, 0 0 22px rgba(42,255,102,.75), 0 5px 8px rgba(0,0,0,.65);
  filter: drop-shadow(0 0 4px #d9ffac);
  animation: cloverFloat 8s ease-in-out infinite, cloverSpin 19s linear infinite;
}
.clover::after {
  content: "";
  position: absolute;
  left: 48%;
  top: 72%;
  width: .12em;
  height: .7em;
  border-radius: 999px;
  background: linear-gradient(#52d66f, #0b6d31);
  transform: rotate(-18deg);
  transform-origin: top;
  z-index: -1;
}
.c1 { left: 3%; top: 15%; font-size: 56px; animation-delay: -1s, -4s; }
.c2 { left: 12%; top: 68%; font-size: 34px; animation-delay: -5s, -12s; }
.c3 { right: 4%; top: 19%; font-size: 62px; animation-delay: -3s, -8s; }
.c4 { right: 12%; top: 73%; font-size: 39px; animation-delay: -7s, -2s; }
.c5 { left: 42%; top: 5%; font-size: 27px; animation-delay: -2s, -14s; }
.c6 { right: 34%; bottom: 3%; font-size: 31px; animation-delay: -6s, -6s; }

.coin {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 3px solid #ffe79d;
  border-radius: 50%;
  color: #7b3900;
  font-family: "ColoverpitKR", Georgia, serif;
  font-weight: 950;
  background:
    radial-gradient(circle at 35% 28%, #fff8bd 0 8%, transparent 9%),
    radial-gradient(circle, #ffd85c 0 53%, #c77408 55% 64%, #ffe57e 66% 72%, #8e4300 74%);
  box-shadow: 0 0 18px rgba(255,199,52,.7), inset 0 0 0 2px rgba(113,52,0,.55), 0 9px 12px rgba(0,0,0,.45);
  animation: coinDrift 9s ease-in-out infinite, coinFlip 2.7s linear infinite;
}
.coin1 { left: 5%; bottom: 8%; animation-delay: -1s, -.4s; }
.coin2 { left: 23%; top: 8%; width: 34px; height: 34px; font-size: 12px; animation-delay: -6s, -1s; }
.coin3 { right: 5%; bottom: 9%; width: 54px; height: 54px; animation-delay: -3s, -1.8s; }
.coin4 { right: 21%; top: 10%; width: 30px; height: 30px; font-size: 11px; animation-delay: -7s, -.2s; }
.coin5 { left: 49%; bottom: 1%; width: 31px; height: 31px; font-size: 11px; animation-delay: -4s, -2.2s; }

.spark {
  color: #fff8bd;
  text-shadow: 0 0 7px #fff, 0 0 16px #ffbd18, 0 0 30px #ff7a00;
  animation: royalSpark 2.2s ease-in-out infinite;
}
.s1 { left: 9%; top: 38%; font-size: 25px; }
.s2 { right: 8%; top: 45%; font-size: 19px; animation-delay: -.7s; }
.s3 { left: 27%; top: 16%; font-size: 14px; animation-delay: -1.2s; }
.s4 { right: 29%; top: 19%; font-size: 23px; animation-delay: -.3s; }
.s5 { left: 16%; bottom: 24%; font-size: 18px; animation-delay: -1.6s; }
.s6 { right: 17%; bottom: 20%; font-size: 26px; animation-delay: -.9s; }

.page-shell { position: relative; z-index: 1; }
.casino {
  border-color: rgba(255, 220, 113, .6);
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent),
    radial-gradient(circle at 50% -15%, rgba(255,213,103,.18), transparent 45%),
    linear-gradient(180deg, rgba(47, 21, 5, .97), rgba(12, 7, 3, .98));
  box-shadow:
    0 45px 140px rgba(0,0,0,.82),
    0 0 90px rgba(255, 177, 29, .22),
    inset 0 0 0 2px rgba(255,238,172,.06),
    inset 0 -45px 100px rgba(0,0,0,.38);
}
.casino::before,
.casino::after {
  content: "♛";
  position: absolute;
  top: 22px;
  color: rgba(255,217,104,.45);
  font-size: 30px;
  text-shadow: 0 0 12px rgba(255,181,25,.55);
}
.casino::before { left: 28px; }
.casino::after { right: 28px; transform: scaleX(-1); }

.marquee {
  border-color: #ffe080;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 22%),
    radial-gradient(circle at 50% -25%, #8f3c05, transparent 50%),
    linear-gradient(180deg, #571a04, #180b03 78%);
  box-shadow:
    0 0 0 4px #8a4709,
    0 0 0 8px rgba(255,214,91,.24),
    0 0 42px rgba(255,180,26,.55),
    inset 0 0 36px rgba(255,211,80,.2);
}
.marquee-kicker { color: #f1c965; }
.subtitle { color: #f3dca1; }

.info-card,
.payout-panel {
  border-color: #e9b54d;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 28%),
    linear-gradient(180deg, rgba(62,29,7,.98), rgba(16,9,4,.98));
  box-shadow: inset 0 0 26px rgba(255,192,52,.09), 0 0 22px rgba(255,169,0,.12);
}
.info-card span { color: #efd18c; }
.bet-card { border-color: #c98925; }

.charge-open,
.spin-button {
  color: #ffe17b;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 24%),
    radial-gradient(circle at 50% 0%, #16864a, #07512c 55%, #032817);
  box-shadow:
    0 0 0 3px #6f3705,
    0 8px 0 #321700,
    0 18px 30px rgba(0,0,0,.5),
    0 0 28px rgba(52,218,111,.2),
    inset 0 2px 0 rgba(255,255,255,.35);
}
.charge-open { border-color: #ffd870; }
.charge-open:hover,
.spin-button:hover { filter: brightness(1.18) saturate(1.08); }
.spin-button:active { box-shadow: 0 0 0 3px #6f3705, 0 3px 0 #321700, 0 9px 18px rgba(0,0,0,.45); }

.machine-frame {
  background:
    linear-gradient(110deg, transparent 0 14%, rgba(255,255,255,.55) 17%, transparent 20% 66%, rgba(255,255,255,.3) 70%, transparent 73%),
    linear-gradient(145deg, #7a3500, #ffda69 14%, #8e4503 30%, #ffe17b 52%, #9a4a04 72%, #ffd15c 88%, #6c2c00);
  box-shadow:
    0 0 0 5px #4f2200,
    0 0 0 9px rgba(255,225,129,.36),
    0 20px 48px rgba(0,0,0,.62),
    0 0 48px rgba(255,190,38,.4),
    inset 0 0 32px rgba(255,255,255,.18);
}
.reel-window { background: linear-gradient(180deg, #080603, #1c1005); }
.reel {
  background:
    linear-gradient(90deg, rgba(82,41,0,.2), transparent 18% 82%, rgba(82,41,0,.2)),
    radial-gradient(circle at 50% 36%, #fffdf1, #f4e2bd 62%, #b79762);
}
.message {
  border-color: #a66c16;
  color: #ffe7a5;
  background: linear-gradient(180deg, #241306, #0b0703);
  box-shadow: inset 0 0 20px rgba(255,186,37,.12), 0 0 18px rgba(255,181,23,.08);
}
.payout-panel { border-color: #d3a33a; }
.payout-list div { border-top-color: rgba(255,220,137,.18); }
.footer { color: #9f7e44; }

.charge-dialog {
  border-color: #e0b553;
  background: linear-gradient(180deg, #3c2008, #100a04);
  box-shadow: 0 0 65px rgba(255,181,34,.3), 0 30px 80px rgba(0,0,0,.75);
}
.dialog-kicker { color: #eac36d; }
.charge-dialog input { border-color: #80602c; background: #120b04; }
.charge-dialog input:focus { border-color: #e8bc50; box-shadow: 0 0 0 4px rgba(232,188,80,.13); }

@keyframes cloverFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 14px -28px; }
}
@keyframes cloverSpin {
  from { rotate: -8deg; }
  to { rotate: 352deg; }
}
@keyframes coinDrift {
  0%, 100% { translate: 0 0; }
  50% { translate: -13px -24px; }
}
@keyframes coinFlip {
  0% { transform: rotateY(0deg) rotateZ(-7deg); }
  100% { transform: rotateY(360deg) rotateZ(7deg); }
}
@keyframes royalSpark {
  0%, 100% { opacity: .15; transform: scale(.45) rotate(0deg); }
  48% { opacity: 1; transform: scale(1.4) rotate(25deg); }
}
@keyframes royalDust {
  to { background-position: 92px 184px, -157px 157px; }
}

@media (max-width: 760px) {
  .clover.c1, .clover.c3 { font-size: 38px; }
  .coin { opacity: .65; transform: scale(.75); }
  .casino::before, .casino::after { display: none; }
}


/* 춘희희님의 가호 */
.blessing-card {
  border-color: #73d98c;
  background:
    radial-gradient(circle at 50% 0%, rgba(83, 230, 126, .18), transparent 58%),
    linear-gradient(180deg, rgba(35, 68, 26, .98), rgba(12, 24, 8, .98));
  box-shadow: inset 0 0 26px rgba(94, 255, 137, .1), 0 0 22px rgba(66, 221, 108, .13);
}
.blessing-card > span { color: #d7ffb4; letter-spacing: .05em; }
.blessing-card strong { font-size: 16px; color: #f6df83; }
.blessing-card strong b { display: inline; font-size: 27px; }
.blessing-card small { display: block; margin-top: 9px; color: #b9dbaf; font-size: 11px; }
.blessing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 8px;
  border: 1px solid rgba(161, 255, 170, .35);
  border-radius: 10px;
  color: #f7ffe9;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  background: rgba(0, 0, 0, .22);
}
.blessing-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #34c96b;
}
.blessing-toggle:has(input:disabled) { opacity: .42; cursor: not-allowed; }

.blessing-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(circle at 50% 62%, rgba(64, 190, 89, .28), rgba(0, 0, 0, .9) 66%);
  backdrop-filter: blur(5px);
}
.blessing-overlay.show {
  visibility: visible;
  animation: blessingBackdrop 2.45s ease both;
}
.blessing-burst {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  width: min(680px, 94vw);
  min-height: 92vh;
  padding: 20px;
  text-align: center;
}
.blessing-burst::before,
.blessing-burst::after {
  content: "✦  ♣  ✦  ♣  ✦";
  position: absolute;
  left: 50%;
  color: #bcff89;
  font-size: clamp(24px, 5vw, 54px);
  white-space: nowrap;
  text-shadow: 0 0 18px #36e977, 0 0 42px #ffc940;
  transform: translateX(-50%);
  animation: blessingOrbit 2.1s ease-out both;
}
.blessing-burst::before { top: 7%; }
.blessing-burst::after { bottom: 5%; animation-direction: reverse; }
.blessing-burst img {
  position: relative;
  z-index: 2;
  display: block;
  width: min(340px, 70vw);
  max-height: 50vh;
  height: auto;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.45)) drop-shadow(0 0 18px #fff5a0) drop-shadow(0 0 48px #37ef78);
}
.blessing-overlay.show .blessing-burst img {
  animation: blessingRise 2.35s cubic-bezier(.18,.78,.2,1) both;
}
.blessing-burst strong {
  position: relative;
  z-index: 3;
  margin-top: 12px;
  color: #fff3a2;
  font-family: "ColoverpitKR", Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 6vw, 62px);
  line-height: 1;
  text-shadow: 0 3px 0 #7a3900, 0 0 16px #ffdd57, 0 0 35px #48e87b;
  opacity: 0;
}
.blessing-burst span {
  position: relative;
  z-index: 3;
  margin-top: 14px;
  color: #efffd9;
  font-size: clamp(17px, 3vw, 27px);
  font-weight: 900;
  text-shadow: 0 0 14px #4be580;
  opacity: 0;
}
.blessing-overlay.show .blessing-burst strong {
  animation: blessingText 2.2s .3s ease both;
}
.blessing-overlay.show .blessing-burst span {
  animation: blessingText 2.1s .45s ease both;
}
@keyframes blessingBackdrop {
  0% { opacity: 0; }
  10%, 82% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes blessingRise {
  0% { opacity: 0; transform: translateY(75vh) scale(.82); }
  28% { opacity: 1; transform: translateY(4vh) scale(1.04); }
  42% { opacity: 1; transform: translateY(0) scale(1); }
  76% { opacity: 1; transform: translateY(-3vh) scale(1); }
  100% { opacity: 0; transform: translateY(-45vh) scale(.94); }
}
@keyframes blessingText {
  0%, 12% { opacity: 0; transform: translateY(28px) scale(.88); }
  30%, 78% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-24px) scale(1.03); }
}
@keyframes blessingOrbit {
  0% { opacity: 0; letter-spacing: 0; transform: translateX(-50%) scale(.4); }
  30%, 72% { opacity: 1; letter-spacing: .25em; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; letter-spacing: .55em; transform: translateX(-50%) scale(1.25); }
}
  35%, 75% { opacity: 1; letter-spacing: .25em; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; letter-spacing: .55em; transform: translateX(-50%) scale(1.25); }
}


/* Tajiriri blessing item */
.tajiri-card { border-color: rgba(255, 199, 68, .52); background: linear-gradient(145deg, rgba(69, 28, 8, .92), rgba(24, 8, 3, .95)); }
.tajiri-card > span { color: #ffe6a0; letter-spacing: .05em; }
.tajiri-card strong { font-size: 16px; color: #ffd45b; }
.tajiri-card strong b { display: inline; font-size: 27px; }
.tajiri-card small { display:block; margin-top:8px; color:#e7c88a; font-size:11px; }
.tajiri-use { display:grid; grid-template-columns:1fr 66px 18px; align-items:center; gap:6px; margin-top:10px; font-size:12px; color:#fff1c5; }
.tajiri-use input { width:100%; box-sizing:border-box; border:1px solid rgba(255,211,103,.7); border-radius:8px; background:rgba(10,4,1,.72); color:#fff2bd; padding:7px 6px; text-align:center; font-weight:900; outline:none; }
.tajiri-use input:focus { box-shadow:0 0 0 3px rgba(255,194,55,.18), 0 0 16px rgba(255,174,31,.25); }
.tajiri-use input:disabled { opacity:.42; cursor:not-allowed; }
.tajiri-use em { font-style:normal; }

.tajiri-overlay { position:fixed; inset:0; z-index:95; display:grid; place-items:center; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 65%, rgba(255,191,42,.22), transparent 45%); }
.tajiri-overlay.show { opacity:1; animation:tajiriBackdrop 2.1s ease both; }
.tajiri-burst { display:flex; flex-direction:column; align-items:center; justify-content:center; filter:drop-shadow(0 18px 32px rgba(0,0,0,.6)); }
.tajiri-burst img { width:min(55vw, 440px); max-height:58vh; object-fit:contain; opacity:0; transform:translateY(65vh) scale(.78); }
.tajiri-overlay.show .tajiri-burst img { animation:tajiriRise 2s cubic-bezier(.18,.78,.2,1) both; }
.tajiri-burst strong { margin-top:-18px; font-size:clamp(28px,5vw,64px); color:#fff4bf; -webkit-text-stroke:2px #6f3900; text-shadow:0 4px 0 #9a5000,0 0 20px #ffbe2f,0 0 44px #ff8b00; opacity:0; }
.tajiri-burst span { margin-top:8px; padding:6px 16px; border:1px solid rgba(255,225,145,.8); border-radius:999px; background:rgba(41,15,2,.82); color:#ffe9a8; font-weight:900; opacity:0; }
.tajiri-overlay.show .tajiri-burst strong { animation:tajiriText 1.75s .22s ease both; }
.tajiri-overlay.show .tajiri-burst span { animation:tajiriText 1.6s .34s ease both; }
@keyframes tajiriBackdrop { 0%,100%{opacity:0} 12%,78%{opacity:1} }
@keyframes tajiriRise { 0%{opacity:0;transform:translateY(65vh) scale(.78)} 25%{opacity:1} 52%{opacity:1;transform:translateY(0) scale(1)} 78%{opacity:1;transform:translateY(-4vh) scale(1.02)} 100%{opacity:0;transform:translateY(-70vh) scale(.9)} }
@keyframes tajiriText { 0%{opacity:0;transform:translateY(24px) scale(.9)} 20%,72%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-22px) scale(.95)} }


/* Unified blessing inventory */
.blessing-panel {
  padding: 14px;
  text-align: left;
  border-color: rgba(255, 213, 102, .58);
  background: linear-gradient(155deg, rgba(20, 50, 29, .96), rgba(38, 19, 4, .96));
}
.blessing-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.blessing-panel-head > span {
  color: #ffe39a;
  font-weight: 950;
  letter-spacing: .08em;
}
.blessing-help-button {
  padding: 7px 10px;
  border: 1px solid rgba(255, 221, 132, .7);
  border-radius: 999px;
  color: #fff0bc;
  background: rgba(18, 9, 2, .58);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.blessing-help-button:hover { filter: brightness(1.18); }
.blessing-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 11px 10px;
  border: 1px solid rgba(255, 223, 139, .28);
  border-radius: 12px;
  background: rgba(0, 0, 0, .24);
}
.blessing-item-chunhee { box-shadow: inset 3px 0 #67df7c; }
.blessing-item-tajiri { box-shadow: inset 3px 0 #f6b83f; }
.blessing-item-hantang { box-shadow: inset 3px 0 #ff7d47; }
.blessing-item-clover { box-shadow: inset 3px 0 #75f08a; }
.blessing-item-joygo { box-shadow: inset 3px 0 #63a9ff; }
.blessing-item-copy { min-width: 0; }
.blessing-item-copy strong {
  display: block;
  margin: 0;
  color: #fff0b7;
  font-size: 13px;
  white-space: nowrap;
}
.blessing-item-copy small {
  display: block;
  margin-top: 4px;
  color: #d8caa4;
  font-size: 11px;
}
.blessing-item-copy small b { color: #ffe176; font-size: 15px; }
.blessing-panel .blessing-toggle {
  margin: 0;
  padding: 7px 9px;
  min-width: 64px;
  justify-content: center;
}
.blessing-panel .tajiri-use {
  display: grid;
  grid-template-columns: 54px auto;
  align-items: center;
  gap: 5px;
  margin: 0;
}
.blessing-panel .tajiri-use input { width: 54px; }
.blessing-panel .tajiri-use em { color: #ead39a; font-size: 11px; white-space: nowrap; }

.blessing-help-dialog {
  width: min(590px, calc(100% - 28px));
  max-height: 82vh;
  padding: 0;
  border: 2px solid #d9ad45;
  border-radius: 22px;
  color: #fff7d7;
  background: linear-gradient(155deg, #2b1808, #082e1b 72%);
  box-shadow: 0 0 55px rgba(239, 188, 62, .42), 0 28px 80px rgba(0,0,0,.75);
}
.blessing-help-dialog::backdrop { background: rgba(3, 2, 1, .82); backdrop-filter: blur(7px); }
.blessing-help-content { position: relative; padding: 27px; overflow-y: auto; }
.blessing-help-content h2 { margin: 5px 0 14px; color: #ffe08a; }
.blessing-help-content section {
  margin-top: 11px;
  padding: 14px;
  border: 1px solid rgba(255, 220, 128, .3);
  border-radius: 13px;
  background: rgba(0, 0, 0, .24);
}
.blessing-help-content h3 { margin: 0 0 7px; color: #ffe9ae; font-size: 17px; }
.blessing-help-content p { margin: 0; color: #e2d8bd; line-height: 1.65; font-size: 13px; }

.hantang-overlay {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 68%, rgba(255, 99, 22, .25), transparent 45%);
}
.hantang-overlay.show { opacity: 1; animation: hantangBackdrop 2.1s ease both; }
.hantang-burst { display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 18px 34px rgba(0,0,0,.65)); }
.hantang-burst img { width: min(55vw, 440px); max-height: 58vh; object-fit: contain; opacity: 0; transform: translateY(65vh) scale(.8); }
.hantang-overlay.show .hantang-burst img { animation: hantangRise 2s cubic-bezier(.18,.78,.2,1) both; }
.hantang-burst strong {
  margin-top: -18px;
  color: #fff2bd;
  font-size: clamp(28px, 5vw, 64px);
  -webkit-text-stroke: 2px #702600;
  text-shadow: 0 4px 0 #9b3700, 0 0 22px #ffad2f, 0 0 45px #ff4c00;
  opacity: 0;
}
.hantang-overlay.show .hantang-burst strong { animation: hantangText 1.75s .22s ease both; }
@keyframes hantangBackdrop { 0%,100%{opacity:0} 12%,78%{opacity:1} }
@keyframes hantangRise { 0%{opacity:0;transform:translateY(65vh) scale(.8)} 25%{opacity:1} 52%{opacity:1;transform:translateY(0) scale(1)} 78%{opacity:1;transform:translateY(-4vh) scale(1.02)} 100%{opacity:0;transform:translateY(-70vh) scale(.9)} }
@keyframes hantangText { 0%{opacity:0;transform:translateY(24px) scale(.9)} 20%,72%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-22px) scale(.95)} }

@media (max-width: 900px) {
  .blessing-panel { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .blessing-item { grid-template-columns: 1fr auto; }
  .blessing-item-copy strong { white-space: normal; }
  .blessing-help-content { padding: 24px 18px; }
}

/* Blessing panel narrow-column layout fix */
.blessing-panel {
  min-width: 0;
  overflow: hidden;
}

.blessing-item {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  padding: 12px 11px;
}

.blessing-item-copy {
  width: 100%;
}

.blessing-item-copy strong {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
  font-size: 12px;
}

.blessing-item-copy small {
  margin-top: 3px;
}

.blessing-panel .blessing-toggle {
  justify-self: end;
  min-width: 72px;
  padding: 6px 9px;
}

.blessing-panel .tajiri-use {
  justify-self: end;
  grid-template-columns: 58px auto;
  width: auto;
}

.blessing-panel .tajiri-use input {
  width: 58px;
  min-width: 0;
}

@media (min-width: 1180px) {
  .blessing-item {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .blessing-item-copy strong {
    white-space: normal;
  }
}

/* Wide desktop layout: give both side panels enough room */
.casino {
  width: min(1380px, calc(100vw - 28px));
}

.layout {
  grid-template-columns: 260px minmax(620px, 1fr) 260px;
  gap: 26px;
  align-items: start;
}

.status-panel,
.payout-panel {
  min-width: 0;
}

.blessing-panel {
  overflow: visible;
}

.blessing-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 11px;
}

.blessing-item-copy strong {
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  line-height: 1.35;
  font-size: 13px;
}

.blessing-panel .blessing-toggle {
  justify-self: end;
  min-width: 72px;
}

.blessing-panel .tajiri-use {
  justify-self: end;
  grid-template-columns: 58px auto;
}

/* At widths too small for three healthy columns, stack instead of crushing them. */
@media (max-width: 1180px) {
  .casino {
    width: min(900px, calc(100vw - 24px));
  }

  .layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .machine-column {
    order: 1;
  }

  .status-panel {
    order: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .status-panel .blessing-panel,
  .status-panel .charge-open {
    grid-column: 1 / -1;
  }

  .payout-panel {
    order: 3;
  }

  .blessing-panel {
    width: 100%;
  }

  .blessing-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (max-width: 620px) {
  .casino {
    width: calc(100vw - 14px);
    padding-inline: 12px;
  }

  .status-panel {
    grid-template-columns: 1fr;
  }

  .status-panel .blessing-panel,
  .status-panel .charge-open {
    grid-column: auto;
  }

  .blessing-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .blessing-panel-head {
    align-items: flex-start;
  }
}


/* Lucky clover energy */
.clover-energy-overlay {
  position: fixed;
  inset: 0;
  z-index: 97;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 68%, rgba(84, 255, 122, .25), transparent 46%);
}
.clover-energy-overlay.show { opacity: 1; animation: cloverEnergyBackdrop 2.1s ease both; }
.clover-energy-burst { display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 18px 34px rgba(0,0,0,.65)); }
.clover-energy-burst img { width: min(55vw, 440px); max-height: 58vh; object-fit: contain; opacity: 0; transform: translateY(65vh) scale(.8); }
.clover-energy-overlay.show .clover-energy-burst img { animation: cloverEnergyRise 2s cubic-bezier(.18,.78,.2,1) both; }
.clover-energy-burst strong {
  margin-top: -18px;
  color: #e8ffe9;
  font-size: clamp(28px, 5vw, 64px);
  -webkit-text-stroke: 2px #0d5d24;
  text-shadow: 0 4px 0 #157d30, 0 0 22px #6fff87, 0 0 48px #18ff5a;
  opacity: 0;
}
.clover-energy-overlay.show .clover-energy-burst strong { animation: cloverEnergyText 1.75s .22s ease both; }
@keyframes cloverEnergyBackdrop { 0%,100%{opacity:0} 12%,78%{opacity:1} }
@keyframes cloverEnergyRise { 0%{opacity:0;transform:translateY(65vh) scale(.8)} 25%{opacity:1} 52%{opacity:1;transform:translateY(0) scale(1)} 78%{opacity:1;transform:translateY(-4vh) scale(1.02)} 100%{opacity:0;transform:translateY(-70vh) scale(.9)} }
@keyframes cloverEnergyText { 0%{opacity:0;transform:translateY(24px) scale(.9)} 20%,72%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-22px) scale(.95)} }


/* Ending unlock card */
.payout-panel {
  align-content: start;
}

.ending-card {
  margin-top: 14px;
  padding: 15px 13px;
  border: 1px solid rgba(255, 214, 98, .58);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 221, 105, .18), transparent 56%),
    linear-gradient(150deg, rgba(67, 35, 5, .92), rgba(11, 50, 31, .94));
  box-shadow:
    inset 0 0 18px rgba(255, 221, 100, .08),
    0 8px 22px rgba(0, 0, 0, .28);
  text-align: center;
}

.ending-card-kicker {
  display: block;
  color: #e9bd50;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
}

.ending-card strong {
  display: block;
  margin: 7px 0 11px;
  color: #fff1b4;
  font-size: 13px;
}

.ending-button {
  width: 100%;
  min-height: 44px;
  padding: 10px 9px;
  border: 1px solid #ffe18b;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffe989, #c58b16 54%, #744309);
  box-shadow: 0 0 18px rgba(255, 211, 76, .32), inset 0 1px 0 rgba(255,255,255,.55);
  color: #271300;
  font: inherit;
  font-size: 12px;
  font-weight: 1000;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}

.ending-button:not(:disabled):hover {
  transform: translateY(-2px);
  filter: brightness(1.13);
}

.ending-button:disabled {
  border-color: rgba(181, 152, 92, .38);
  background: linear-gradient(180deg, #5a4c38, #302820);
  box-shadow: none;
  color: #a99578;
  cursor: not-allowed;
  opacity: .72;
}


/* Eunpyeong Hill blessing */
.blessing-item-joygo {
  background: linear-gradient(145deg, rgba(42, 64, 39, .42), rgba(12, 27, 18, .62));
}


/* Automatic spin controls */
.auto-spin-panel {
  width: min(520px, 100%);
  margin: 18px auto 0;
  padding: 15px;
  border: 1px solid rgba(255, 218, 107, .52);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 224, 116, .13), transparent 58%),
    linear-gradient(145deg, rgba(52, 27, 5, .92), rgba(8, 42, 27, .94));
  box-shadow: inset 0 0 20px rgba(255, 222, 112, .06), 0 10px 28px rgba(0, 0, 0, .26);
  text-align: left;
}

.auto-spin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 11px;
}

.auto-spin-head > div {
  display: grid;
  gap: 2px;
}

.auto-spin-kicker {
  color: #d9ae43;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .17em;
}

.auto-spin-head strong {
  color: #fff0a9;
  font-size: 16px;
}

.auto-spin-progress {
  min-width: 104px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 222, 123, .3);
  border-radius: 999px;
  background: rgba(0, 0, 0, .25);
  color: #f8dc7a;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.auto-spin-controls {
  display: grid;
  grid-template-columns: auto minmax(110px, .8fr) minmax(145px, 1.2fr) 78px;
  align-items: center;
  gap: 8px;
}

.auto-spin-controls label {
  color: #d9c58d;
  font-size: 11px;
  font-weight: 900;
}

.auto-spin-controls select,
.auto-spin-controls button {
  min-height: 40px;
  border-radius: 11px;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
}

.auto-spin-controls select {
  padding: 0 10px;
  border: 1px solid rgba(255, 224, 128, .42);
  background: #19120a;
  color: #fff0b0;
}

.auto-spin-start {
  border: 1px solid #ffe18b;
  background: linear-gradient(180deg, #ffe98a, #c88c17 56%, #754308);
  color: #261200;
  cursor: pointer;
}

.auto-spin-stop {
  border: 1px solid #ff9b9b;
  background: linear-gradient(180deg, #d94a4a, #741919);
  color: #fff;
  cursor: pointer;
}

.auto-spin-controls button:disabled,
.auto-spin-controls select:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.auto-spin-note {
  margin: 10px 0 0;
  color: #b9aa80;
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 620px) {
  .auto-spin-controls {
    grid-template-columns: 1fr 1fr;
  }

  .auto-spin-controls label {
    display: none;
  }

  .auto-spin-controls select,
  .auto-spin-start {
    grid-column: span 1;
  }

  .auto-spin-stop {
    grid-column: 1 / -1;
  }
}

/* Main site return button */
.home-return-button {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 10020;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 15px;
  border: 2px solid #ffd464;
  border-radius: 999px;
  color: #fff8e4;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .02em;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(92, 19, 20, .96), rgba(47, 5, 59, .96));
  box-shadow:
    0 0 0 2px rgba(119, 45, 0, .65),
    0 8px 22px rgba(0, 0, 0, .45),
    0 0 18px rgba(255, 197, 56, .24),
    inset 0 1px 0 rgba(255, 255, 255, .2);
  backdrop-filter: blur(8px);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.home-return-button span {
  color: #ffe582;
  font-size: 19px;
  line-height: 1;
}
.home-return-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.16);
  box-shadow:
    0 0 0 2px rgba(119, 45, 0, .75),
    0 10px 26px rgba(0, 0, 0, .5),
    0 0 24px rgba(255, 197, 56, .4),
    inset 0 1px 0 rgba(255, 255, 255, .25);
}
.home-return-button:focus-visible {
  outline: 3px solid #fff4a8;
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .home-return-button {
    top: 10px;
    left: 10px;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 12px;
  }
  .page-shell { padding-top: 66px; }
}


/* Audio settings */
.top-right-actions {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10020;
  display: flex;
  align-items: center;
  gap: 10px;
}
.top-action-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid #ffd464;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(47, 5, 59, .96), rgba(92, 19, 20, .96));
  color: #fff8e4;
  box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 18px rgba(255,197,56,.24), inset 0 1px 0 rgba(255,255,255,.2);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.top-action-button span { color: #ffe582; font-size: 18px; line-height: 1; }
.top-action-button:hover { transform: translateY(-2px); filter: brightness(1.16); box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 0 24px rgba(255,197,56,.4); }
.top-action-button:focus-visible { outline: 3px solid #fff4a8; outline-offset: 3px; }

.settings-dialog {
  width: min(480px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: #fff4c5;
}
.settings-dialog::backdrop { background: rgba(8, 2, 12, .78); backdrop-filter: blur(7px); }
.settings-content {
  position: relative;
  padding: 28px;
  border: 2px solid #e8bd55;
  border-radius: 22px;
  background: linear-gradient(145deg, #2b1607, #102f20 72%, #07160f);
  box-shadow: 0 0 36px rgba(255, 205, 76, .35), inset 0 0 28px rgba(255, 224, 130, .08);
}
.settings-content h2 { margin: 2px 0 22px; color: #ffe68d; text-align: center; }
.volume-control {
  display: block;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 220, 120, .3);
  border-radius: 15px;
  background: rgba(0, 0, 0, .24);
}
.volume-control > span { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #fff0b2; }
.volume-control output { min-width: 48px; color: #ffe06d; font-weight: 900; text-align: right; }
.volume-control input[type="range"] { width: 100%; margin: 15px 0 8px; accent-color: #e5b842; cursor: pointer; }
.volume-control small { display: block; color: #bdaa7b; font-size: 11px; line-height: 1.5; }
.settings-save-note { margin: 16px 0 0; color: #cbb985; font-size: 11px; text-align: center; }

.data-reset-control {
  width: 100%;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 220, 120, .3);
  border-radius: 15px;
  background: rgba(0, 0, 0, .24);
}
.data-reset-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
  color: #fff0b2;
}
.data-reset-heading small {
  color: #bdaa7b;
  font-size: 11px;
  text-align: right;
}
.data-reset-button {
  width: 100%;
  min-height: 44px;
  border: 1px solid #e2665f;
  border-radius: 11px;
  background: linear-gradient(135deg, #7d201d, #3e0e13);
  color: #fff3e9;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 7px 18px rgba(0,0,0,.25);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.data-reset-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 9px 22px rgba(0,0,0,.34), 0 0 16px rgba(226,102,95,.2);
}
.data-reset-button:focus-visible {
  outline: 3px solid #ffb2aa;
  outline-offset: 3px;
}


@media (max-width: 720px) {
  .top-right-actions { top: 10px; right: 10px; gap: 7px; }
  .top-action-button { min-height: 40px; padding: 8px 12px; font-size: 12px; }
}


/* Reliable custom settings overlay (works even where dialog.showModal is unavailable) */
.settings-dialog:not(.is-open) {
  display: none;
}
.settings-dialog.is-open {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 16px;
  border: 0;
  border-radius: 0;
  background: rgba(8, 2, 12, .78);
  backdrop-filter: blur(7px);
  overflow: auto;
}
.settings-dialog.is-open .settings-content {
  width: min(480px, calc(100vw - 32px));
  margin: auto;
}
body.settings-open {
  overflow: hidden;
}


/* Player statistics */
.stats-content {
  width: min(680px, calc(100vw - 32px));
  max-height: min(86vh, 820px);
  overflow: auto;
}
.stats-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.stat-summary-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 220, 120, .28);
  border-radius: 14px;
  background: rgba(0, 0, 0, .24);
  text-align: center;
}
.stat-summary-card span { display: block; color: #cbb985; font-size: 11px; }
.stat-summary-card strong { display: block; margin-top: 7px; color: #ffe271; font-size: 18px; overflow-wrap: anywhere; }
.stats-section {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 220, 120, .28);
  border-radius: 15px;
  background: rgba(0, 0, 0, .24);
}
.stats-section h3 { margin: 0 0 12px; color: #fff0b2; font-size: 14px; }
.stats-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.stats-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.stats-list span { color: #d8c898; font-size: 12px; }
.stats-list strong { color: #ffe271; font-size: 12px; white-space: nowrap; }
.stats-note { margin: 15px 0 0; color: #ad9b70; font-size: 10px; text-align: center; }
@media (max-width: 620px) {
  .top-action-button { padding-inline: 10px; }
  .stats-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-list { grid-template-columns: 1fr; }
}


/* Jukebox */
.jukebox-panel {
  width: min(520px, 100%);
  margin: 10px auto 0;
  padding: 15px;
  border: 1px solid rgba(255, 218, 107, .52);
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 0%, rgba(255, 224, 116, .13), transparent 46%),
    linear-gradient(145deg, rgba(18, 35, 28, .96), rgba(46, 24, 5, .94));
  box-shadow: inset 0 0 20px rgba(255, 222, 112, .05), 0 10px 28px rgba(0, 0, 0, .22);
  text-align: left;
}

.jukebox-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.jukebox-head > div { display: grid; gap: 2px; }
.jukebox-kicker { color: #d9ae43; font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.jukebox-head strong { color: #fff0a9; font-size: 16px; }
.jukebox-disc { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255,225,139,.55); border-radius: 50%; background: radial-gradient(circle, #f4d36c 0 11%, #17110a 12% 35%, #c18a22 36% 43%, #211407 44%); color: #fff1ae; font-size: 11px; box-shadow: 0 0 14px rgba(255,214,91,.16); }
.jukebox-track { display: grid; gap: 3px; min-width: 0; padding: 10px 12px; border: 1px solid rgba(255,224,128,.25); border-radius: 11px; background: rgba(0,0,0,.24); }
.jukebox-track-label { color: #aa9a72; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.jukebox-track strong { overflow: hidden; color: #fff0b0; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.jukebox-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.jukebox-controls button { min-height: 40px; border-radius: 11px; font: inherit; font-size: 11px; font-weight: 900; cursor: pointer; }
.jukebox-play { border: 1px solid #ffe18b; background: linear-gradient(180deg, #ffe98a, #c88c17 56%, #754308); color: #261200; }
.jukebox-next { border: 1px solid rgba(255,225,139,.5); background: linear-gradient(180deg, #315b45, #183324); color: #fff1b5; }
.jukebox-controls button:disabled { cursor: not-allowed; opacity: .48; }