*,
*::before,
*::after{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;font-family:Arial,Helvetica,sans-serif;background:#080810;color:#fff}
body{overflow:hidden}
.page-bg{position:fixed;inset:0;z-index:0;background:url('/bg-w.webp') center/cover no-repeat}
.page-shade{position:fixed;inset:0;z-index:1;background:rgba(8,8,16,.2)}
#confetti{position:fixed;inset:0;z-index:2;width:100vw;height:100vh;pointer-events:none}

.app{
  position:relative;z-index:5;width:100%;height:100vh;
  display:flex;flex-direction:column;align-items:center;
  padding-top:128px;padding-bottom:40px;
}
.wheel-stage{
  position:relative;flex:0 0 auto;
  width:500px;height:500px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;
}

/* SPINX303 layering */
.wheel-rink{
  position:absolute;z-index:3;top:50%;left:50%;
  width:92%;height:92%;object-fit:contain;
  transform:translate(-50%,-50%);
  pointer-events:none;user-select:none;
}
.wheel-img{
  position:absolute;
  z-index:2;
  top:50.5%;
  left:50%;
  width:92%;
  height:92%;
  object-fit:contain;
  transform:translate(-50%,-50%) rotate(0deg);
  transform-origin:50% 50%;
  will-change:transform;
  pointer-events:none;
  user-select:none;
}
.coin-decor{
  position:absolute;z-index:1;left:50%;bottom:-48px;
  width:130%;max-width:650px;
  transform:translateX(-50%);
  pointer-events:none;user-select:none;
}
.pointer{
  position:absolute;
  z-index:6;
  top:0;
  left:50%;
  width:81px;
  height:81px;
  object-fit:contain;

  transform:translateX(-50%) translateY(0) rotate(135deg);

  transform-origin:50% 50%;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.6));
}

.fish-decor{
  position:absolute;
  z-index:5;

  width:250px;
  height:auto;

  left:-35px;
  bottom:-25px;

  object-fit:contain;

  pointer-events:none;
  user-select:none;

  filter:drop-shadow(0 5px 8px rgba(0,0,0,.35));
}

/* same central result treatment as original */
.result-card{
  display:none;position:absolute;z-index:20;
  left:50%;top:45%;width:min(320px,85vw);
  transform:translate(-50%,-50%) scale(.85);
  opacity:0;padding:0;
}
.result-card.show{display:block;animation:resultIn .5s cubic-bezier(.18,1.35,.38,1) .4s forwards}
.result-card{
  border-radius:16px;overflow:hidden;text-align:center;
  background:linear-gradient(160deg,rgba(10,10,20,.96) 0%,rgba(20,15,5,.96) 100%);
  border:2px solid var(--result-color,#c9a84c);
  box-shadow:0 0 40px rgba(201,168,76,.25),0 8px 48px rgba(0,0,0,.7);
  backdrop-filter:blur(10px);
}
.result-card::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);
  transform:translateX(-120%) skewX(-20deg);
  animation:glassShimmer 2.2s ease-in-out infinite;
}
.result-glow{
  position:absolute;inset:0;opacity:.5;filter:blur(24px);pointer-events:none;
  background:radial-gradient(ellipse at center,var(--result-color,#c9a84c),transparent 80%);
}
.result-inner{position:relative;z-index:2;padding:28px 16px}
.sensational{margin:0 0 4px;color:var(--result-color,#c9a84c);font-size:18px;font-weight:700;letter-spacing:.25em}
.sub{margin:0 0 8px;color:#888;font-size:9px;letter-spacing:.15em;text-transform:uppercase}
.result-label{margin:0;color:#ffe066;font-size:24px;font-weight:900;line-height:1.15;letter-spacing:.05em;text-shadow:0 0 30px rgba(255,224,102,.7)}
.proof-wrap{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.proof{margin:0;color:#666;font-size:11px;line-height:1.5}

.controls{
  width:420px;
  max-width:92vw;
  display:flex;
  flex-direction:row;
  align-items:stretch;
  justify-content:center;
  gap:10px;
  z-index:10;

  padding:8px;
  border-radius:18px;

  background:
    linear-gradient(
      180deg,
      rgba(18,16,28,.96),
      rgba(8,8,14,.96)
    );

  border:1px solid rgba(255,214,92,.65);

  box-shadow:
    0 12px 35px rgba(0,0,0,.55),
    0 0 18px rgba(255,199,43,.10),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter:blur(10px);
}

.token-wrap{
  flex:1;
  min-width:0;
  position:relative;
  display:flex;
  flex-direction:column;
}

.token-input{
  width:100%;
  height:52px;

  padding:0 18px;

  border-radius:11px;
  border:1px solid rgba(255,255,255,.10);

  background:
    linear-gradient(
      180deg,
      rgba(22,22,30,.98),
      rgba(9,9,15,.98)
    );

  color:#f4d66a;

  font-size:17px;
  font-weight:800;

  letter-spacing:.28em;
  text-align:center;
  text-transform:uppercase;

  outline:none;

  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.02);

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    transform .2s ease,
    background .25s ease;
}

.token-input::placeholder{
  color:rgba(255,255,255,.42);
  letter-spacing:.25em;
  font-size:13px;
  font-weight:700;
}

.token-input:hover{
  border-color:rgba(255,215,85,.35);
}

.token-input:focus{
  border-color:#f5cc4c;

  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.55),
    0 0 0 3px rgba(245,204,76,.10),
    0 0 18px rgba(245,204,76,.16);
}

.token-input.error{
  border-color:#ff4d5f;

  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.55),
    0 0 0 3px rgba(255,77,95,.08);
}

.token-input.valid{
  border-color:#43d17a;

  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.55),
    0 0 0 3px rgba(67,209,122,.08);
}

.token-input.locked{
  opacity:.55;
  cursor:not-allowed;
}

.error-text{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 5px);

  min-height:12px;

  color:#ff6674;
  font-size:10px;
  font-weight:600;
  text-align:center;
}

.spin-btn{
  position:relative;
  overflow:hidden;

  width:120px;
  min-width:120px;
  height:52px;

  padding:0 18px;

  border:0;
  border-radius:11px;

  background:
    linear-gradient(
      180deg,
      #ffe276 0%,
      #eebc32 45%,
      #b87512 100%
    );

  color:#3b1b61;

  font-size:16px;
  font-weight:900;
  letter-spacing:.12em;

  cursor:pointer;

  box-shadow:
    0 5px 0 #82520d,
    0 9px 20px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -2px 5px rgba(120,66,0,.20);

  transition:
    transform .15s ease,
    filter .2s ease,
    box-shadow .15s ease;
}

.spin-btn::before{
  content:"";
  position:absolute;

  top:-40%;
  left:-60%;

  width:40%;
  height:180%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.65),
      transparent
    );

  transform:skewX(-20deg);
  transition:left .5s ease;
}

.spin-btn:hover:not(:disabled){
  transform:translateY(-2px);
  filter:brightness(1.08);

  box-shadow:
    0 7px 0 #82520d,
    0 12px 26px rgba(0,0,0,.45),
    0 0 22px rgba(255,202,55,.25);
}

.spin-btn:hover:not(:disabled)::before{
  left:125%;
}

.spin-btn:active:not(:disabled){
  transform:translateY(3px);

  box-shadow:
    0 2px 0 #82520d,
    0 5px 12px rgba(0,0,0,.4);
}

.spin-btn:disabled{
  cursor:not-allowed;
  opacity:.38;

  filter:saturate(.5);

  box-shadow:
    0 3px 0 #514225,
    0 5px 10px rgba(0,0,0,.25);
}

@keyframes glassShimmer{
  0%{transform:translateX(-120%) skewX(-20deg)}
  100%{transform:translateX(220%) skewX(-20deg)}
}
@keyframes resultIn{
  from{opacity:0;transform:translate(-50%,-50%) scale(.85) translateY(20px)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1) translateY(0)}
}
@keyframes pointerWin{
  from{
    transform:translateX(-50%) translateY(0) rotate(135deg);
  }
  to{
    transform:translateX(-50%) translateY(10px) rotate(135deg);
  }
}
@keyframes rinkGlow{
  from{filter:drop-shadow(0 0 0 rgba(255,224,102,0))}
  to{filter:drop-shadow(0 0 18px rgba(255,224,102,.85))}
}
.pointer-win{animation:pointerWin .12s ease-out 6 alternate}
.rink-win{animation:rinkGlow .3s ease-out 6 alternate}

@media(max-width:600px){
  .page-bg{background-image:url('/bg-h.webp')}
  .app{padding-top:128px}
  .wheel-stage{width:400px;height:400px;margin-bottom:24px}
  .pointer{width:67px;height:67px}
}
@media(max-width:420px){
  .wheel-stage{width:min(400px,100vw);height:min(400px,100vw)}
}
@media(max-height:760px){
  .app{padding-top:36px}
  .wheel-stage{width:min(430px,65vh);height:min(430px,65vh);margin-bottom:8px}
  .pointer{width:calc(min(430px,65vh)/7 + 10px);height:calc(min(430px,65vh)/7 + 10px)}
  .controls{gap:7px}
}
/* Tablet / HP besar */
@media(max-width:600px){
  .fish-decor{
    width:245px;
    left:-18px;
    bottom:-30px;
  }
}

/* HP normal: iPhone, Android umum */
@media(max-width:480px){
  .fish-decor{
    width:210px;
    left:-12px;
    bottom:-26px;
  }
}

/* HP kecil */
@media(max-width:390px){
  .fish-decor{
    width:185px;
    left:-8px;
    bottom:-24px;
  }
}

/* HP sangat kecil */
@media(max-width:350px){
  .fish-decor{
    width:165px;
    left:-5px;
    bottom:-22px;
  }
}