/* SPIN & WIN — oyun kiti */
:root{ --gk-accent:#EA580C; --gk-accent-d:#9A3412; }
.sw-page .gk-chip, .sw-page .gk-iconbtn{ background:#3B1766; border-color:#5E2B96; border-bottom-color:#12062B; }
.sw-lives span{ font-size:22px; transition:filter .3s, opacity .3s; } .sw-lives span.off{ filter:grayscale(1); opacity:.3; }
.sw-stage{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:stretch; transition:grid-template-columns .4s; }
.sw-stage.asking{ grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); }
.sw-wheelbox{ position:relative; height:100%; min-height:0; display:flex; align-items:center; justify-content:center; }
.sw-wheelwrap{ position:relative; height:min(100%, 44vw); aspect-ratio:1; max-height:100%; }
.sw-wheelwrap canvas{ width:100%; height:100%; display:block; border-radius:50%; box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 60px rgba(250,204,21,.25); }
.sw-pointer{ position:absolute; left:50%; top:-4%; width:12%; transform:translateX(-50%); z-index:2; filter:drop-shadow(0 4px 4px rgba(0,0,0,.4)); }
.sw-land{ position:absolute; left:50%; top:50%; z-index:3; transform:translate(-50%,-50%) scale(.3); opacity:0; pointer-events:none; text-align:center;
  padding:18px 34px; border-radius:26px; background:#FFD23F; color:#1B1740; border-bottom:8px solid #C99A00; white-space:nowrap;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(40px,8vh,78px); line-height:1; transition:all .35s cubic-bezier(.34,1.56,.64,1); }
.sw-land small{ display:block; font-size:.3em; font-weight:600; margin-top:4px; }
.sw-land.show{ transform:translate(-50%,-50%) scale(1); opacity:1; }
.sw-land.bad{ background:#1F2937; color:#FDE047; border-bottom-color:#000; }
.sw-panel{ height:100%; min-height:0; display:flex; flex-direction:column; justify-content:center; }
.sw-spinbox{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; padding:28px; }
.sw-spinbox h2{ margin:0; font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(34px,6vh,54px); line-height:1.05; }
.sw-spinbox p{ margin:0; font-size:18px; font-weight:800; color:var(--gk-muted); }
.sw-spin{ min-width:260px; min-height:84px !important; font-size:38px !important; border-radius:26px !important; animation:swPulse 1.4s ease-in-out infinite; }
.sw-spin:disabled{ animation:none; }
.sw-ask{ display:flex; flex-direction:column; gap:12px; min-height:0; height:100%; justify-content:center; }
.sw-qhead{ display:flex; align-items:center; gap:12px; }
.sw-pts{ padding:6px 14px; border-radius:14px; background:#FFD23F; color:#1B1740; font-family:'Fredoka',sans-serif; font-weight:700; font-size:22px; border-bottom:4px solid #C99A00; }
.sw-timer{ position:relative; width:64px; height:64px; margin-left:auto; flex-shrink:0; }
.sw-timer svg{ width:100%; height:100%; transform:rotate(-90deg); }
.sw-timer circle{ fill:none; stroke-width:9; }
.sw-timer .bg{ stroke:rgba(255,255,255,.15); }
.sw-timer .fg{ stroke:#4ADE80; stroke-linecap:round; stroke-dasharray:283; transition:stroke-dashoffset 1s linear, stroke .3s; }
.sw-timer.urgent .fg{ stroke:#EF4444; } .sw-timer.urgent b{ color:#FCA5A5; animation:gkPulse .5s infinite alternate; }
.sw-timer b{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Fredoka',sans-serif; font-size:24px; }
.sw-card{ flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; padding:14px; }
.sw-img{ flex:1 1 0; min-height:0; display:flex; align-items:center; justify-content:center; }
.sw-img img{ width:100%; height:100%; object-fit:contain; border-radius:14px; }
.sw-q{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:clamp(20px,3.6vh,32px); line-height:1.2; text-align:center; }
.sw-blank{ display:inline-block; min-width:64px; padding:0 10px; margin:0 4px; border-radius:10px; background:rgba(255,210,63,.18); border-bottom:3px dashed #FFD23F; color:#FFD23F; }
.sw-opts{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.sw-opts .gk-opt{ min-height:64px; font-size:clamp(18px,2.6vh,24px); padding:8px 12px 8px 8px; gap:10px; background:#3B1766; border-color:#5E2B96; border-bottom-color:#12062B; }
.sw-foot{ display:flex; align-items:center; justify-content:center; gap:14px; min-height:58px; }
.sw-fb{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:26px; } .sw-fb.ok{ color:#4ADE80; } .sw-fb.bad{ color:#F87171; }
.sw-stage.asking .sw-wheelwrap{ height:min(62%, 26vw); opacity:.55; transition:all .4s; }
@keyframes swPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
@media (max-width:980px){
  .sw-stage, .sw-stage.asking{ grid-template-columns:1fr; align-items:start; }
  .sw-img{ flex:none; height:30vh; }
  .sw-opts{ grid-template-columns:1fr; }
  .sw-wheelwrap{ height:auto; width:min(78vw,420px); }
  .sw-stage.asking .sw-wheelbox{ display:none; }
  .sw-spinbox{ padding:8px; }
}
@media (max-width:640px){
  .sw-spin{ min-width:0; width:100%; font-size:30px !important; min-height:70px !important; }
  .sw-img{ flex:none; height:26vh; }
  .sw-opts .gk-opt{ font-size:20px; min-height:52px; }
  .sw-lives span{ font-size:16px; }
}

.sw-wheelwrap canvas{ touch-action:none; cursor:grab; }
.sw-wheelwrap canvas:active{ cursor:grabbing; }
.sw-hint{ position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); z-index:3; padding:6px 14px; border-radius:12px; background:rgba(0,0,0,.6); font-weight:800; font-size:14px; white-space:nowrap; }
.sw-swipe{ font-size:14px !important; color:#FDE68A !important; }
.sw-page .gk-card{ background:rgba(42,37,96,.82); backdrop-filter:blur(4px); }