:root{
  --bg-grad-1:#fff6e6;
  --bg-grad-2:#ffe7f5;
  --accent:#ff3fa8;
  --accent-2:#ff7a00;
  --accent-3:#00c2ff;
  --ok:#1ecb4f;
  --warn:#ffbf00;
  --danger:#ff3b30;
  --text:#2b2b2b;
  --muted:#7a7a7a;
  --panel:#ffffffcc;
  --ring:#ffd5ea;
  --reel-bg:#fffaf3;
  --symbol-size:88px; /* 모바일 우선 */
  --reel-gap:10px;
  --radius:16px;
  --shadow:0 8px 24px rgba(255,58,143,0.2), 0 4px 12px rgba(0,0,0,0.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 20% 10%, var(--bg-grad-1), #fff), radial-gradient(800px 400px at 80% 30%, var(--bg-grad-2), #fff);
  background-attachment: fixed;
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 16px;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand h1{font-size:22px; margin:0; letter-spacing:0.5px;}
.badge{font-size:12px; padding:4px 8px; background:#ffe2f2; color:#c40066; border-radius:999px;}
.disclaimer{font-size:12px; color:#555; background:#fff7fb; padding:6px 10px; border-radius:999px; border:1px solid #ffd1ea;}

.game{
  max-width:980px; margin:0 auto; padding:10px 16px 80px;
  display:flex; flex-direction:column; gap:14px;
}
.hud{
  display:grid; gap:10px; grid-template-columns:1fr 1fr 1fr auto; align-items:center;
}
.stat{background:var(--panel); border:1px solid var(--ring); border-radius:12px; padding:10px 12px; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:space-between; min-height:56px;}
.stat .label{font-size:13px; color:var(--muted);}
.stat .value{font-weight:700; font-size:18px;}
.bet-ctrl{display:flex; align-items:center; gap:8px;}
.toggles{display:flex; gap:8px; justify-content:flex-end;}

.stage{
  background:linear-gradient(180deg,#fff, #fff9fe);
  border:1px solid var(--ring);
  border-radius:var(--radius);
  padding:14px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:12px;
}
.reels{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--reel-gap);
  align-items:stretch; justify-content:center; position:relative;
  min-height: calc(var(--symbol-size)*3 + 24px);
}
.reel{
  background:var(--reel-bg);
  border-radius:14px; border:2px solid #ffd1ea;
  position:relative; overflow:hidden; height:calc(var(--symbol-size)*3 + 8px);
  box-shadow: inset 0 0 0 2px #fff, inset 0 8px 24px rgba(255,122,0,0.08);
}
.reel .strip{
  position:absolute; left:0; top:0; right:0;
  will-change: transform;
}
.symbol{
  height:var(--symbol-size);
  display:grid; place-items:center; border-bottom:1px dashed #ffe5f1;
  background: linear-gradient(180deg, #fff, #fffdf9);
}
.symbol svg{width:64px; height:64px;}

.payline{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:var(--symbol-size); pointer-events:none;
  border-top: 3px dashed rgba(255,122,0,0.4);
  border-bottom: 3px dashed rgba(255,43,160,0.4);
}

.controls{display:flex; justify-content:center; gap:10px;}
.btn{
  appearance:none; border:none; background:#fff; color:var(--text);
  padding:10px 14px; border-radius:12px; cursor:pointer; transition:transform .06s ease, box-shadow .2s ease, background .2s;
  box-shadow:0 2px 0 rgba(0,0,0,0.05);
  border:1px solid #ffdce9;
  user-select:none;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(180deg,#ff7fcc,#ff329b); color:#fff; border:none; box-shadow:0 8px 20px rgba(255,50,155,.25)}
.btn.big{font-size:20px; padding:14px 24px; border-radius:14px;}
.btn.small{padding:8px 10px; border-radius:10px;}
.btn.toggle{background:#fff5fb}
.btn.toggle[aria-pressed="false"]{opacity:.7}
.btn.ghost{background:#fff; border:1px dashed #ffc6e5; color:#b10058}

.fx-layer{
  position:relative; min-height:0; width:100%; height:0;
}
.confetti{
  position:absolute; width:10px; height:16px; opacity:0.9; will-change:transform;
  border-radius:3px;
  animation:fall 1200ms ease-in forwards;
}
@keyframes fall{
  0%{transform:translateY(0) rotate(0deg)}
  100%{transform:translateY(220px) rotate(540deg); opacity:.3}
}

.links{display:flex; gap:12px; justify-content:center; margin-top:6px; flex-wrap:wrap;}
.link{color:#b9006b; text-decoration:none; padding:6px 10px; background:#fff0f8; border-radius:999px; border:1px solid #ffd2ea;}
.link:hover{background:#ffe5f4}

.cookie-banner{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:50;
  background:#fff; border:1px solid #ffd9ee; box-shadow:var(--shadow);
  border-radius:14px; padding:10px 12px; display:flex; gap:10px; align-items:center; justify-content:space-between;
}
.cookie-banner.hidden{display:none}
.cookie-text{font-size:14px; color:#333}
.cookie-actions{display:flex; gap:8px;}

.win-glow{
  box-shadow:0 0 0 4px rgba(255,160,210,.4), 0 0 30px rgba(255,90,165,.6) inset;
  animation: glow 1000ms ease-in-out 2;
}
@keyframes glow{
  0%{box-shadow:0 0 0 0 rgba(255,160,210,.0), 0 0 0 rgba(255,90,165,0)}
  50%{box-shadow:0 0 0 8px rgba(255,160,210,.5), 0 0 30px rgba(255,90,165,.6) inset}
  100%{box-shadow:0 0 0 0 rgba(255,160,210,.0), 0 0 0 rgba(255,90,165,0)}
}

@media (min-width:720px){
  :root{ --symbol-size:110px; }
  .brand h1{font-size:26px}
  .stat .value{font-size:20px}
}
@media (max-width:720px){
  .topbar {
    display: flex;
    flex-direction: column !important;
  }
  .hud {
    grid-template-columns: 1fr 1fr;
  }
}