:root{
  --bg1:#B9F0FF;
  --bg2:#FFD6F5;
  --bg3:#FFFBD5;
  --frame:#FFD35A;
  --frame-dark:#DB9722;
  --text:#2B1A00;
  --accent:#7B4DFF;
  --accent-2:#20C37A;
  --danger:#FF4D6D;
  --win:#00C853;
  --tile-size:92px; /* 기본 타일 크기 모바일 기준 */
  --tile-gap:10px;
  --radius:14px;
  --shadow:0 10px 20px rgba(0,0,0,.12);
  --glow:0 0 0 0 rgba(255,197,61,0.0);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-rounded,system-ui,Apple SD Gothic Neo,Malgun Gothic,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 0% 0%, var(--bg1), transparent 60%),
              radial-gradient(1000px 800px at 100% 0%, var(--bg2), transparent 60%),
              linear-gradient(160deg, #C8FFEE 0%, #FFF6D9 35%, #FFDDF0 100%);
}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  background:linear-gradient(180deg,#FFF6D0,#FFE5AA);
  border-bottom:3px solid var(--frame-dark);
  box-shadow:var(--shadow);
}
.brand{display:flex;align-items:center;gap:10px}
.logo-emoji{font-size:28px}
.title{font-size:20px;margin:0;color:#7B4D00;letter-spacing:.5px}
.controls-top{display:flex;gap:8px}

.disclaimer{
  margin:10px auto 0;
  max-width:980px;
  background:#FFF7E5;
  border:2px dashed var(--frame-dark);
  padding:10px 12px;
  border-radius:10px;
}
@media (max-width: 700px) {
  .disclaimer{
   flex-direction: column; 
  }
}
.game{
  max-width:980px;margin:16px auto;padding:0 12px 40px;
  display:grid;gap:16px;
  grid-template-columns:1fr;
}

.panel.status{
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(180deg,#FFFFFFBB,#FFFFFF90);
  border:3px solid var(--frame);
  border-radius:var(--radius);
  padding:10px 12px;
  box-shadow:var(--shadow);
}
.stat{display:flex;align-items:center;gap:10px}
.stat .label{opacity:.8}
.stat .value{font-weight:800;font-size:20px}
.stat.bet .bet-controls{display:flex;align-items:center;gap:8px}

.slot-frame{
  position:relative;
  background:linear-gradient(180deg,#FFF,#FFF6E0);
  border:5px solid var(--frame);
  border-radius:20px;
  box-shadow:0 12px 30px rgba(0,0,0,.15), inset 0 0 0 4px #FFF4C9, inset 0 0 40px rgba(255,234,134,.6);
  padding:16px;
}
.reels{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--tile-gap);
  height:calc(var(--tile-size)*3 + var(--tile-gap)*2);
  overflow:hidden;
  border-radius:12px;
  background:linear-gradient(180deg,#EAF7FF,#FFF);
  position:relative;
}
.reel{
  background:linear-gradient(180deg,#F8FBFF,#FFF);
  border:2px solid #E7E2FF;
  border-radius:12px;
  overflow:hidden;
  position:relative;
}
.reel-track{
  will-change:transform;
}
.tile{
  height:var(--tile-size);
  display:flex;align-items:center;justify-content:center;
  user-select:none;
  touch-action:none;
  transform:translateZ(0);
  background:linear-gradient(180deg,#FFFFFF,#F7F9FF);
}
.tile .icon{
  width:64px;height:64px;display:block;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.12));
}
.tile--1{background:linear-gradient(180deg,#FFF7D1,#FFF2B6)}
.tile--2{background:linear-gradient(180deg,#EAF3FF,#D7E8FF)}
.tile--3{background:linear-gradient(180deg,#F2E6FF,#E9DAFF)}
.tile--4{background:linear-gradient(180deg,#E7FFF4,#D2FFE9)}
.tile--5{background:linear-gradient(180deg,#FFEAF3,#FFD6E8)}
.tile--6{background:linear-gradient(180deg,#EFFFF8,#D5FFF0)}

.glass{
  pointer-events:none;
  position:absolute;inset:0;
  border-radius:16px;
  box-shadow:inset 0 90px 60px -60px rgba(255,255,255,.8),
             inset 0 -90px 60px -60px rgba(0,0,0,.06);
}

.actions{display:flex;justify-content:center}
.btn{
  appearance:none;border:2px solid var(--accent);
  background:#fff;border-radius:12px;padding:10px 14px;
  color:var(--accent);font-weight:800;cursor:pointer;
  box-shadow:var(--shadow);transition:transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn[disabled], .btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}

.btn-ghost{
  background:#FFF;border-color:#B9A1FF;color:#7B4DFF;
}
.btn-primary{
  background:linear-gradient(180deg,#9EE7FF,#7DD7FF);
  border-color:#2BA4FF;color:#003968;
}
.btn-primary.big{font-size:20px;padding:14px 26px;border-width:3px}

.message{
  min-height:28px;text-align:center;font-weight:900;font-size:18px;
}
.message.win{color:var(--win);animation:pop .8s ease}
.message.lose{color:var(--danger);animation:pop .8s ease}
@keyframes pop{
  0%{transform:scale(.96);opacity:.2}
  60%{transform:scale(1.08);opacity:1}
  100%{transform:scale(1)}
}

.links{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:6px
}
.link{color:#5736C9;text-decoration:none;font-weight:700}
.link:hover{text-decoration:underline}

.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;
  padding:12px;z-index:50;
  background:linear-gradient(180deg,#FFFFFF,#F6FBFF);
  border-top:3px solid var(--frame-dark);
  box-shadow:0 -10px 20px rgba(0,0,0,.08);
}
.cookie-content{max-width:980px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cookie-actions{display:flex;gap:8px}

.win-glow{
  animation:glow 1.2s ease-in-out 0s 1 forwards
}
@keyframes glow{
  0%{box-shadow:var(--glow)}
  30%{box-shadow:0 0 0 12px rgba(0,255,102,0.18)}
  100%{box-shadow:0 0 0 0 rgba(0,255,102,0.0)}
}

@media (min-width:720px){
  .title{font-size:26px}
  :root{--tile-size:112px}
  .panel.status{padding:14px 16px}
}