:root{
  --bg-a:#fef6ff;
  --bg-b:#e6fbff;
  --bg-c:#fffde7;
  --accent:#ff6f61;
  --accent-2:#30c9a7;
  --accent-3:#5c7cfa;
  --ink:#19324d;
  --muted:#55718f;
  --panel:#ffffffcc;
  --panel-strong:#ffffffee;
  --shadow:0 12px 28px rgba(25,50,77,.12),0 2px 8px rgba(25,50,77,.08);
  --gold:#FFC107;
  --win:#32d296;
  --lose:#ff3860;
  --reel-gap:10px;
  --cell-h:120px;
  --cell-w:120px;
  --border-r:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-rounded, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color:var(--ink);
  background: radial-gradient(1200px 800px at 10% -10%, var(--bg-a), transparent),
              radial-gradient(1000px 900px at 110% 10%, var(--bg-b), transparent),
              radial-gradient(900px 700px at 50% 120%, var(--bg-c), transparent),
              linear-gradient(135deg, #fff, #f8fdff 60%, #fff9fe);
  background-attachment: fixed;
}

.topbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:12px clamp(12px,2vw,24px);
  backdrop-filter:saturate(1.2) blur(6px);
  background:linear-gradient(90deg,#ffffffaa,#ffffff77);
  position:sticky;top:0;z-index:5;border-bottom:1px solid #e7eef7;
}
.brand{display:flex;align-items:center;gap:10px}
.logo{font-size:28px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.06))}
.title{font-size:20px;line-height:1.2;margin:0;color:var(--ink);letter-spacing:.5px}
.disclaimer{font-size:12px;color:var(--muted);margin-left:auto;margin-right:auto}

.controls-inline{display:flex;align-items:center;gap:14px;margin-left:auto}
.balance{display:flex;align-items:baseline;gap:8px;background:var(--panel);padding:8px 12px;border-radius:999px;box-shadow:var(--shadow)}
.balance .label{font-size:12px;color:var(--muted)}
#balanceText{font-variant-numeric:tabular-nums;min-width:70px;text-align:right}

.switch{position:relative;display:inline-block;width:44px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#d5e2f0;transition:.2s;border-radius:999px}
.slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:white;transition:.2s;border-radius:50%}
.switch input:checked + .slider{background:linear-gradient(45deg, var(--accent-2), var(--accent-3))}
.switch input:checked + .slider:before{transform:translateX(20px)}
.switch-label{font-size:12px;color:var(--muted);margin-left:6px}

.app{max-width:980px;margin:16px auto;padding:0 12px;display:grid;gap:16px}
.hud{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.betbox{display:flex;align-items:center;gap:10px;background:var(--panel-strong);padding:10px 12px;border-radius:999px;box-shadow:var(--shadow)}
.bet-display .label{font-size:12px;color:var(--muted);margin-right:6px}
#betText{min-width:64px;text-align:center;display:inline-block;font-variant-numeric:tabular-nums}

.btn{border:none;border-radius:12px;padding:10px 14px;background:#eef6ff;color:var(--ink);cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.04) inset, var(--shadow);transition:transform .05s ease, filter .2s ease}
.btn:hover{filter:saturate(1.1)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg, #ffdbe0, #ffc3cb);color:#8b1130}
.btn.ghost{background:#ffffffaa}
.btn.round{border-radius:999px;width:44px;height:44px;display:grid;place-items:center;font-size:20px}
.btn.big{padding:14px 24px;font-size:18px;border-radius:16px;min-width:160px}

.stage{
  position:relative;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#ffffff,#f4fbff);
  border-radius:24px;
  padding:14px;
  box-shadow:var(--shadow);
  border:1px solid #e7eef7;
}
.reels{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:var(--reel-gap);
  width:100%;
  max-width:820px;
  padding:12px;
  border-radius:18px;
  background:linear-gradient(180deg,#fff,#f6fbff);
  position:relative;
  overflow:hidden;
}
.reel{
  background:linear-gradient(180deg,#ffffff,#fcfeff);
  border-radius:16px;
  border:1px solid #e8eef6;
  height:calc(var(--cell-h) * 3 + 16px);
  padding:8px 0;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 8px 20px rgba(25,50,77,.06), inset 0 -8px 20px rgba(25,50,77,.05);
}
.reel .strip{position:absolute;left:50%;transform:translateX(-50%);will-change:transform}
.cell{
  width:var(--cell-w);
  height:var(--cell-h);
  display:grid;
  place-items:center;
}
.icon-wrap{
  width:84px;height:84px;border-radius:18px;
  background:linear-gradient(180deg,#ffffff, #f1f8ff);
  display:grid;place-items:center;
  box-shadow:0 6px 14px rgba(25,50,77,.08), inset 0 -2px 0 rgba(25,50,77,.04);
  transition:transform .2s ease, filter .2s ease;
}
.icon-wrap.win{animation:pop .7s ease both}
@keyframes pop{
  0%{transform:scale(1)}
  30%{transform:scale(1.2)}
  60%{transform:scale(0.94)}
  100%{transform:scale(1.02)}
}

.payline{
  pointer-events:none;
  position:absolute;left:6%;right:6%;
  top:50%;height:2px;transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, var(--accent) 20%, var(--gold) 50%, var(--accent-2) 80%, transparent);
  opacity:.65;border-radius:2px;filter:blur(.3px)
}

.footer-hud{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.lastwin{padding:8px 12px;background:var(--panel);border-radius:999px;box-shadow:var(--shadow)}
.msg{min-height:20px;color:var(--muted)}

.win-burst{
  position:absolute;inset:0;pointer-events:none;
  animation:burst .8s ease-out forwards
}
@keyframes burst{
  0%{background:radial-gradient(200px 80px at 50% 50%, rgba(255,239,90,.8), transparent)}
  100%{background:radial-gradient(600px 240px at 50% 50%, rgba(48,201,167,0), transparent)}
}

.site-footer{
  padding:20px 12px;margin:8px auto 24px;max-width:980px;text-align:center;color:var(--muted)
}
.legal-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.legal-links a{color:#4a6cf7;text-decoration:none}
.legal-links a:hover{text-decoration:underline}

.cookie-banner{
  position:fixed;inset:auto 12px 12px 12px;z-index:10;display:none;
}
.cookie-banner.show{display:block}
.cookie-card{
  background:var(--panel-strong);backdrop-filter:blur(6px) saturate(1.2);
  border:1px solid #e7eef7;border-radius:16px;padding:14px;box-shadow:var(--shadow)
}
.cookie-card h2{margin:0 0 6px 0;font-size:16px}
.cookie-actions{display:flex;gap:10px;margin-top:8px}

.spin-disabled #spinBtn{filter:grayscale(1);opacity:.6;cursor:not-allowed}
.balance-low #spinBtn{animation:denied .6s ease}
@keyframes denied{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  50%{transform:translateX(4px)}
  75%{transform:translateX(-2px)}
}

/* SVG symbol base style */
.svg-sym{width:64px;height:64px}

/* Responsive */
@media (min-width:720px){
  :root{--cell-h:140px;--cell-w:140px}
  .title{font-size:22px}
}