:root{
  --max-w: 480px;
  --grid-width: 93%;
  --grid-top: -65px;
  --cta-bottom: 13%;
  --times-up: -15px;

  --grid-row-gap: 3px;
  --grid-col-gap: 5px;
  --cell-aspect: 121 / 112;
  --cell-bg-bleed: 0.5%;
  --icon-size: 55%;
  --icon-raise: -14%;
  --cap-bottom: 10px;
  --cap-font-size: clamp(11px, 3.2vw, 14px);
  --cap-font-weight: 700;
  --cap-color: #ffd86e;
}

body.claim{ background:none !important; }

.rt-page{
  width:100%;
  min-height:100svh;
  background-size:cover;
  background-position:center top;
  position:relative;
  padding-bottom:var(--tabbar-h,120px);
}

.rt-head{
  position:absolute; z-index:5;
  top:10px; left:10px; right:10px;
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none;
}
.rt-head .rt-icon{ pointer-events:auto; }
.rt-icon{ width:48px; height:48px; border:0; background:transparent; padding:0; }
.rt-icon img{ width:100%; height:100%; display:block; }
.rt-righticons{ display:flex; gap:10px; }

.rt-title{ position:relative; width:100%; margin:0; }
.rt-title img{ width:100%; height:auto; display:block; }

.rt-cta{
  position:absolute; left:0; right:0;
  bottom:var(--cta-bottom);
  text-align:center;
}

.rt-spin{ display:inline-block; border:0; background:transparent; padding:0; position:relative; }
.rt-spin img{ display:block; width:min(62%, 420px); height:auto; margin:0 auto; }
.rt-spin .press{ display:none; }
.rt-spin .disabled{ display:none; }
.rt-spin[disabled] .normal{ display:none; }
.rt-spin[disabled] .disabled{ display:block; }
.rt-spin.spinning .normal{ display:none; }
.rt-spin.spinning .press{ display:block; }
.rt-spin[disabled] .press{ display:none; }

.rt-spin.need-login .normal{ display:none; }
.rt-spin.need-login .press{ display:none; }
.rt-spin.need-login .disabled{ display:block; }

.rt-times{
  margin-top:6px;
  transform:translateY(var(--times-up));
  text-align:center; color:#ffd86e; font-weight:800;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}

.rt-main{ width:100%; }

.rt-grid{
  position:relative;
  list-style:none; padding:0;
  width:min(var(--grid-width), var(--max-w));
  margin:calc(6px + var(--grid-top)) auto 12px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(5, auto);
  grid-auto-flow:column;
  row-gap:var(--grid-row-gap);
  column-gap:var(--grid-col-gap);
  justify-content:center;
  align-content:start;
  align-items:start;
  overflow:visible;
}

.rt-grid li.prize{
  position:relative;
  aspect-ratio:var(--cell-aspect);
  border-radius:16px;
  background-image:url('/claim/assets/img/roulette/prizes/cell-bg.png');
  background-position:center;
  background-repeat:no-repeat;
  background-size:calc(100% + var(--cell-bg-bleed)) calc(100% + var(--cell-bg-bleed));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  overflow:hidden;
  contain:paint;
  will-change:filter, transform;
}

.rt-grid li.prize[data-col="1"]{ transform:translateY(-50%); }
.rt-grid li.prize[data-col="4"]{ transform:translateY( 50%); }

.rt-grid li.gap{ visibility:hidden; pointer-events:none; }

.rt-grid img.icon{
  width:var(--icon-size);
  height:auto;
  display:block;
  transform:translateY(var(--icon-raise));
  transition:transform .18s ease, filter .18s ease;
}
.rt-grid .cap{
  position:absolute; left:6px; right:6px; bottom:var(--cap-bottom);
  color:var(--cap-color); font-weight:var(--cap-font-weight);
  font-size:var(--cap-font-size); text-align:center;
}


.rt-grid.rt-animating li.prize:not(.active){
  filter:brightness(.55) saturate(.65) contrast(.95);
  opacity:.70;
}

.rt-grid.rt-stopped li.prize:not(.win){
  filter:brightness(.72) saturate(.75) contrast(.95);
  opacity:.78;
}

.rt-grid li.prize.active::after,
.rt-grid li.prize.win::after,
.rt-grid li.prize.active::before,
.rt-grid li.prize.win::before{
  content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none;
}
.rt-grid li.prize.active::after,
.rt-grid li.prize.win::after{
  border:3px solid #ffe27a;
  box-shadow:
    0 0 0 3px #fff3a0,
    0 0 18px 6px rgba(255,213,84,.95),
    0 0 42px 16px rgba(255,170,0,.70);
}
.rt-grid li.prize.active::before,
.rt-grid li.prize.win::before{
  background:radial-gradient(closest-side, rgba(255,240,160,.65), rgba(255,240,160,0) 70%);
  filter:blur(6px);
}

.rt-grid li.prize.active img.icon,
.rt-grid li.prize.win img.icon{
  transform:translateY(var(--icon-raise)) scale(1.10);
  filter:brightness(1.10) saturate(1.10);
}
.rt-grid li.prize.active .cap,
.rt-grid li.prize.win .cap{
  text-shadow:0 2px 0 rgba(0,0,0,.25), 0 0 14px rgba(255,200,0,1);
}

.rt-grid li.prize.active,
.rt-grid li.prize.win{ z-index:2; }

@media (prefers-reduced-motion: reduce){
  .rt-grid li.prize.active::before,
  .rt-grid li.prize.active::after,
  .rt-grid li.prize.win::before,
  .rt-grid li.prize.win::after{ animation:none; }
}

.rt-modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:none; z-index:1000;
  align-items:center; justify-content:center; padding:12px;
}
.rt-modal.show{ display:flex; }

.rt-dialog{
  width:min(92%, 520px);
  background:linear-gradient(180deg,#35a8bb,#167382);
  color:#fff; border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.rt-dialog-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; }
.rt-dialog-head h3{ margin:0; font-size:18px; font-weight:900; letter-spacing:.03em; }
.rt-close{ background:transparent; border:0; width:32px; height:32px; padding:0; }
.rt-close img{ width:100%; height:100%; }
.rt-dialog-body{ background:rgba(0,0,0,.2); padding:12px; border-radius:0 0 14px 14px; max-height:50vh; overflow:auto; }

.rt-rules{ white-space:normal; line-height:1.35; }

.rt-hist-list .row{ display:flex; align-items:center; gap:8px; padding:8px; background:rgba(255,255,255,.06); border-radius:10px; margin-bottom:8px; }
.rt-hist-list .row img{ width:38px; height:38px; }
.rt-hist-list .meta{ font-size:12px; color:#cfefff; }
.rt-hist-list .name{ font-weight:800; color:#fff; }
.rt-hist-list .status{ margin-left:auto; font-weight:700; }
.rt-pager{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:8px; }
.rt-pager button{ background:#fff; border:0; border-radius:999px; padding:6px 12px; font-weight:700; }
.rt-pager button:disabled{ opacity:.4; }


.rt-ok{
  display:block;
  margin:16px auto 0;
  padding:.6em 1.4em;
  font-weight:800;
  font-size:16px;
  line-height:1;
  color:#0a3a43;
  background:linear-gradient(180deg,#fff4a6,#ffd34a);
  border:0;
  border-radius:999px;
  box-shadow:0 6px 0 #c79a1f, 0 10px 20px rgba(0,0,0,.25);
  cursor:pointer;
  transition:transform .06s ease, filter .18s ease, box-shadow .18s ease;
}
.rt-ok:hover{ filter:brightness(1.05); }
.rt-ok:active{
  transform: translateY(2px);
  box-shadow:0 4px 0 #c79a1f, 0 8px 16px rgba(0,0,0,.2);
}
.rt-ok:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.rt-ok[disabled]{ opacity:.5; filter:grayscale(1); pointer-events:none; }