/* Màn xoay ngẫu nhiên linh vật + vật thể cho người mới (js/onboard.js).
   Figma: Random Setting Theme (5939-10239). Máy jackpot hai cuộn: trái là
   thú cưng, phải là đồ chơi. Xoay xong → rèm sáo (nan dọc thu lên, lệch
   nhau trái → phải) mở ra sổ Daily phía sau.
   Nằm trên app (z 90), dưới cổng đăng nhập (z 100): phiên hỏng thì cổng
   vẫn che được nó. */

.roll{
  position:fixed; inset:0; z-index:90; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(var(--spacing-24) + env(safe-area-inset-top)) var(--spacing-24) calc(var(--spacing-24) + env(safe-area-inset-bottom));
  background:var(--blue-500);
  font-family:"Saira", var(--font-sans);
  user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.roll[hidden]{display:none}
.roll__in{
  position:relative; width:100%; max-width:var(--page-w);
  display:flex; flex-direction:column; align-items:center; gap:40px;
}

/* tia nắng + quầng sáng: tâm lệch xuống dưới máy 41px như Figma (máy ở
   381, tâm tia ở 422 trên khung 844) */
.roll__rays, .roll__glow{
  position:absolute; left:50%; top:calc(50% + 41px); pointer-events:none;
}
.roll__rays{width:406px; height:406px; margin:-203px 0 0 -203px; animation:roll-rays 60s linear infinite}
.roll__glow{width:316px; height:316px; margin:-158px 0 0 -158px}
@keyframes roll-rays{ to{ transform:rotate(1turn) } }

/* chữ */
.roll__text{display:flex; flex-direction:column; gap:var(--spacing-12); width:100%; text-align:center; color:var(--neutral-0); position:relative}
.roll__hi{margin:0; font-weight:600; font-size:17px; line-height:22px; letter-spacing:-.1px}
.roll__title{
  margin:0; font-weight:800; font-size:22px; line-height:1.5; letter-spacing:-.2px;
  --stroke:var(--blue-900);
  text-shadow:
    -2px -2px 0 var(--stroke), 0 -2px 0 var(--stroke), 2px -2px 0 var(--stroke),
    -2px 0 0 var(--stroke), 2px 0 0 var(--stroke),
    -2px 2px 0 var(--stroke), 0 2px 0 var(--stroke), 2px 2px 0 var(--stroke),
    0 3px 0 var(--stroke);
}
.roll__title span{display:block}

/* ---------- máy jackpot ----------
   Viền 6px là gradient (vàng nhạt → vàng → nâu) nên vẽ bằng nền của khung
   ngoài + padding, không dùng border. */
.roll__machine{
  position:relative; padding:6px; border-radius:var(--radius-16);
  background:linear-gradient(180deg, var(--yellow-100) 0%, #ffcc00 50%, #a85800 100%);
}
.roll__reels{
  position:relative; display:flex; gap:var(--spacing-12); padding:var(--spacing-12);
  border-radius:calc(var(--radius-16) - 6px); background:var(--neutral-800); overflow:hidden;
}
/* cuộn: thấy trọn ô giữa, hai ô trên / dưới ló 18px */
.roll__reel{position:relative; width:100px; height:160px; overflow:hidden}
.roll__strip{position:absolute; left:0; top:0; display:flex; flex-direction:column; gap:var(--spacing-12); will-change:transform}
/* che mép trên / dưới: ô ló ra mờ dần vào khung */
.roll__reels::before, .roll__reels::after{
  content:""; position:absolute; left:0; right:0; height:50px; z-index:1; pointer-events:none;
}
.roll__reels::before{top:0; background:linear-gradient(var(--neutral-800), rgb(44 44 46 / 0))}
.roll__reels::after{bottom:0; background:linear-gradient(rgb(44 44 46 / 0), var(--neutral-800))}

/* ô — Figma .Pet-Item / .Toy-Item (giống ô của sheet Giao diện) */
.roll__tile{
  position:relative; flex:0 0 auto; width:100px; height:100px; box-sizing:border-box; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--color-border-subtle); border-radius:var(--radius-8);
  background:var(--neutral-100);
}
.roll__tile img{width:100%; height:100%; object-fit:contain; pointer-events:none}
/* ảnh linh vật gốc quay trái — lật cho quay phải */
.roll__reel--pet .roll__tile img, .roll__sprite{transform:scaleX(-1)}
.roll__reel--toy .roll__tile{padding:var(--spacing-24)}
/* ô trúng: viền vàng sáng lên */
.roll__tile.win{border-color:#ffcc00; box-shadow:inset 0 0 0 2px #ffcc00}

/* linh vật trúng chạy Idle thật (cùng khung cắt với ảnh tĩnh — build.py) */
.roll__sprite{position:absolute; inset:0; overflow:hidden}
.roll__sprite .sy{
  position:absolute; left:0; top:0;
  width:calc(100% * var(--cols)); height:calc(100% * var(--rows));
  animation:mascot-sy var(--T) steps(var(--rows)) infinite;
}
.roll__sprite .sx{
  width:100%; height:100%; background:var(--img) 0 0 / 100% 100% no-repeat;
  animation:mascot-sx calc(var(--T) / var(--rows)) steps(var(--cols)) infinite;
}
@media (prefers-reduced-motion:reduce){
  .roll__rays, .roll__sprite .sy, .roll__sprite .sx{animation:none}
}

/* ---------- nút Xoay — Figma Button / Filled (bản game) ---------- */
.roll__btn{
  position:relative; width:200px; height:52px; padding:0 var(--spacing-20) var(--spacing-6);
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--blue-200); border-radius:var(--radius-pill);
  background:linear-gradient(180deg, #ffcc00, #f0a800);
  box-shadow:0 4px 0 3px var(--blue-900);
  font:700 22px/22px "Saira", var(--font-sans); letter-spacing:-.1px; color:var(--neutral-0);
  --stroke:var(--neutral-1000);
  text-shadow:
    -1.5px -1.5px 0 var(--stroke), 0 -1.5px 0 var(--stroke), 1.5px -1.5px 0 var(--stroke),
    -1.5px 0 0 var(--stroke), 1.5px 0 0 var(--stroke),
    -1.5px 1.5px 0 var(--stroke), 0 1.5px 0 var(--stroke), 1.5px 1.5px 0 var(--stroke),
    0 2.5px 0 var(--stroke);
  cursor:pointer; transition:transform .08s ease-out, box-shadow .08s ease-out;
}
.roll__btn:focus-visible{outline:3px solid var(--neutral-0); outline-offset:6px}
/* bấm: lún xuống, bóng dưới ngắn lại — đang xoay thì giữ nguyên dáng lún */
.roll__btn:active, .roll__btn[aria-disabled="true"]{transform:translateY(3px); box-shadow:0 1px 0 3px var(--blue-900)}
.roll__btn[aria-disabled="true"]{cursor:default}

/* ---------- rèm sáo ----------
   Mỗi nan giữ một bản sao của màn, dịch về đúng chỗ của nó: ghép lại trông
   như màn còn nguyên. Nan trượt lên (khung) trong khi bản sao trượt xuống
   đúng bằng → mép dưới thu lên, nội dung đứng yên. */
.roll-blind{position:fixed; top:0; bottom:0; z-index:90; overflow:hidden; will-change:transform}
.roll-blind > .roll{position:absolute; top:0; bottom:0; left:auto; right:auto; will-change:transform}