:root{
  color-scheme:dark;
  --gold:#ffd86a;
  --panel-text:#3a2408;
  --amount:#d85a17;
  --muted:#7a6a52;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#0b5e2f}
body{font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
button{font:inherit;background:transparent;appearance:none;-webkit-appearance:none}
img{max-width:100%}

/* background always fills the full viewport, on any device */
.bg-fill{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  object-fit:cover;
  object-position:center top;
  pointer-events:none;
  user-select:none;
}

.language-switcher{
  position:fixed;
  top:max(10px,env(safe-area-inset-top));
  right:max(10px,env(safe-area-inset-right));
  z-index:50;
  display:flex;
  gap:4px;
  padding:3px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:rgba(4,39,22,.62);
  backdrop-filter:blur(6px);
}
html[dir="rtl"] .language-switcher{right:auto;left:max(10px,env(safe-area-inset-left))}
.lang-btn{
  min-width:40px;
  padding:6px 10px;
  border:0;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  color:rgba(255,255,255,.78);
  background:transparent;
  cursor:pointer;
}
.lang-btn.is-active{color:#0b5e2f;background:var(--gold)}

.page{
  position:relative;
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  justify-content:center;
  padding:max(12px,env(safe-area-inset-top)) 12px max(18px,env(safe-area-inset-bottom));
}
.stack{
  position:relative;
  width:100%;
  max-width:520px;
  min-width:0;
}

/* header bar: whole bar is the download hit-area */
.top-bar{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:999px;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.top-bar img{display:block;width:100%;height:auto;aspect-ratio:356/74;object-fit:contain}

.hero{
  position:relative;
  width:100%;
  margin-top:clamp(6px,2vw,12px);
  text-align:center;
}
.reel-img{
  position:relative;
  z-index:1;
  width:76%;
  height:auto;
  display:inline-block;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
  transform:translateY(clamp(-27px,-5.13vw,-16px));
}
.logo-img{
  position:relative;
  z-index:3;
  width:88%;
  height:auto;
  aspect-ratio:968/463;
  object-fit:contain;
  display:block;
  margin:-9% auto 0;
  transform:translate(clamp(-27px,-5.13vw,-16px),clamp(-27px,-5.13vw,-16px));
}
.tagline-img{
  position:relative;
  z-index:2;
  width:88%;
  height:auto;
  aspect-ratio:893/141;
  object-fit:contain;
  display:block;
  margin:-2.5% auto 0;
  transform:translate(-5px,clamp(-34px,-6.41vw,-21px));
}

.main-download-btn{
  width:84%;
  margin:clamp(10px,3.5vw,18px) auto 0;
  display:block;
  transform:translateY(calc(clamp(-60px,-11.54vw,-37px) + 20px));
}
.main-download-btn img{width:100%;height:auto;aspect-ratio:948/183;object-fit:contain;display:block}

.panel{
  position:relative;
  width:calc(100% - 60px);
  margin:clamp(16px,5vw,26px) auto 0;
  transform:translateY(calc(clamp(-107px,-20.51vw,-66px) + 40px));
}
.panel-title-img{
  position:relative;
  z-index:2;
  display:block;
  width:min(84%,360px);
  height:auto;
  aspect-ratio:642/74;
  object-fit:contain;
  margin:0 auto -6%;
  transform:translateY(clamp(29px,8.97vw,47px));
}
.panel-body{
  position:relative;
  width:100%;
  padding:13% 6% 4%;
  border-style:solid;
  border-width:clamp(16px,5.48vw,32px);
  border-image-source:url(../assets/use_bg.png);
  border-image-slice:55 fill;
  border-image-width:clamp(16px,5.48vw,32px);
  border-image-repeat:stretch;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.32));
}
.players-viewport{
  position:relative;
  overflow:hidden;
  height:clamp(220px,58vw,300px);
}
.players-track{width:100%}
.fx-winner-group{display:flex;flex-direction:column;gap:clamp(8px,2.4vw,14px);padding-bottom:clamp(8px,2.4vw,14px)}

.player-row{
  display:grid;
  grid-template-columns:17% 1fr;
  align-items:center;
  gap:3.5%;
  width:100%;
  padding:2.6% 5%;
  background-image:url(../assets/use_item_bg.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
  color:var(--panel-text);
}
.player-avatar{
  width:100%;
  aspect-ratio:1;
  border-radius:50%;
  object-fit:cover;
  display:block;
  border:2px solid #b9791f;
  box-shadow:0 1px 3px rgba(0,0,0,.28);
}
.player-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.player-topline{display:flex;align-items:baseline;gap:5px;flex-wrap:nowrap;justify-content:space-between}
.player-name{font-weight:800;font-size:clamp(12px,3.3vw,16px);white-space:nowrap;flex:0 0 auto}
.player-status{font-weight:600;font-size:clamp(10px,2.5vw,13px);color:#5a3e12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.player-amount{font-weight:900;font-size:clamp(14px,3.7vw,18px);color:var(--amount)}
.player-time{font-weight:600;font-size:clamp(9px,2.4vw,11px);color:var(--muted)}

html[dir="rtl"] .player-copy{text-align:right}
html[dir="rtl"] .player-topline{flex-direction:row-reverse}
html[dir="rtl"] .player-name,html[dir="rtl"] .player-amount{direction:ltr;unicode-bidi:isolate}

.toast{
  position:fixed;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  transform:translate(-50%,18px);
  width:min(86%,440px);
  padding:14px 16px;
  border:2px solid rgba(255,216,106,.72);
  border-radius:16px;
  background:rgba(4,39,22,.96);
  box-shadow:0 14px 36px rgba(0,0,0,.42),0 0 28px rgba(124,255,92,.2);
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  line-height:1.25;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
  z-index:60;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast-check{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(180deg,#9cff55,#30a90f);color:#fff;font-size:22px;font-weight:900}
.toast strong{display:block;margin-bottom:4px;color:var(--gold);font-size:15px;line-height:1.1}
.toast span{display:block;font-size:12.5px;line-height:1.2}

@media(min-width:600px){
  .players-viewport{height:320px}
}