/* mobile.css — skrin PLAY, menu, butang sentuh */

/* ---- skrin PLAY (home) ---- */
#startScreen{position:fixed;left:0;top:0;right:0;bottom:var(--banner-h);z-index:100;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding:max(14px,env(safe-area-inset-top)) 18px max(14px,env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 62% at 50% 30%,#0f2d52 0%,#08122a 52%,#03040a 100%)}
body.playing #startScreen{display:none}

/* bintang berkelip */
#startScreen .stars{position:absolute;inset:0;pointer-events:none;opacity:.9;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,#fff,transparent 60%),
    radial-gradient(1px 1px at 28% 8%,#bfe9ff,transparent 60%),
    radial-gradient(1.6px 1.6px at 44% 22%,#fff,transparent 60%),
    radial-gradient(1px 1px at 63% 12%,#ffe9a8,transparent 60%),
    radial-gradient(1.4px 1.4px at 80% 20%,#fff,transparent 60%),
    radial-gradient(1px 1px at 92% 9%,#bfe9ff,transparent 60%),
    radial-gradient(1.2px 1.2px at 7% 52%,#fff,transparent 60%),
    radial-gradient(1px 1px at 95% 48%,#fff,transparent 60%),
    radial-gradient(1.4px 1.4px at 18% 82%,#bfe9ff,transparent 60%),
    radial-gradient(1px 1px at 38% 92%,#fff,transparent 60%),
    radial-gradient(1.4px 1.4px at 70% 88%,#ffe9a8,transparent 60%),
    radial-gradient(1px 1px at 88% 76%,#fff,transparent 60%);
  animation:twinkle 4.5s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.45}to{opacity:1}}
#startScreen .glow{position:absolute;left:50%;top:34%;width:120vw;height:120vw;max-width:760px;max-height:760px;
  transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(41,209,255,.22) 0%,rgba(41,209,255,.06) 40%,transparent 68%)}

#startCard{position:relative;width:min(94vw,440px);max-height:100%;text-align:center;
  display:flex;flex-direction:column;gap:clamp(8px,1.8vh,16px);align-items:center;justify-content:center}

.livePill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  font-size:11px;letter-spacing:3px;font-weight:800;color:#a9b8e8}
.livePill i{width:8px;height:8px;border-radius:50%;background:#ff4d5e;box-shadow:0 0 10px #ff4d5e;animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}

/* arena kecil berputar */
#hero{--S:min(74vw,40vh,330px);position:relative;width:var(--S);height:var(--S);flex:none;margin:2px 0}
#hero .heroRing{position:absolute;inset:0;border-radius:50%;
  border:clamp(4px,1.3vw,6px) solid #27e0f0;
  box-shadow:0 0 28px rgba(39,224,240,.65),0 0 70px rgba(39,224,240,.25),inset 0 0 40px rgba(39,224,240,.18);
  background:radial-gradient(circle,#0a1530 0%,#060a1a 70%)}
.orbit{position:absolute;inset:0;border-radius:50%;animation:orbitSpin var(--dur) linear infinite}
.orbitOuter{--dur:46s}
.orbitInner{--dur:34s;animation-direction:reverse}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
.slot{position:absolute;left:50%;top:50%;width:0;height:0;
  transform:rotate(var(--a)) translateY(calc(var(--r) * -1))}
.badge{position:absolute;left:calc(var(--d) / -2);top:calc(var(--d) / -2);width:var(--d);height:var(--d);
  border-radius:50%;background-size:cover;background-position:center;
  border:2px solid rgba(255,255,255,.85);box-shadow:0 3px 10px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.3);
  transform:rotate(calc(var(--a) * -1));
  animation:badgeFloat 3.4s ease-in-out infinite;animation-delay:var(--dl)}
@keyframes badgeFloat{50%{filter:brightness(1.18)}}
.orbitOuter .slot{--r:calc(var(--S) * .405);--d:calc(var(--S) * .125)}
.orbitInner .slot{--r:calc(var(--S) * .255);--d:calc(var(--S) * .105)}
/* lubang hitam */
#hero .hole{position:absolute;left:50%;top:50%;width:calc(var(--S) * .27);height:calc(var(--S) * .27);
  transform:translate(-50%,-50%);border-radius:50%;
  border:clamp(3px,1vw,5px) solid #ffd21a;box-shadow:0 0 22px rgba(255,210,26,.55),inset 0 0 22px rgba(0,0,0,.9);
  background:radial-gradient(circle,#000 0 30%,#12082e 62%,#2a1180 100%);overflow:hidden}
#hero .hole i{position:absolute;inset:-30%;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 20%,rgba(120,80,255,.55) 32%,transparent 46%,rgba(41,209,255,.4) 62%,transparent 78%);
  animation:orbitSpin 3.2s linear infinite;filter:blur(2px)}

/* tajuk */
#mainTitle{margin:0;display:flex;flex-direction:column;align-items:center;line-height:.95;font-weight:900}
#mainTitle em{font-style:normal;font-size:clamp(34px,10.4vw,54px);letter-spacing:2px;color:#fff;
  text-shadow:0 0 22px rgba(41,209,255,.45),0 3px 0 rgba(0,0,0,.35)}
#mainTitle span{font-size:clamp(46px,14.6vw,76px);letter-spacing:5px;
  background:linear-gradient(180deg,#fff2a8 0%,#ffd21a 38%,#ff8a00 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 14px rgba(255,150,0,.45))}
#startCard .tag{margin:0;color:#c3d0f2;line-height:1.45;font-size:clamp(13px,3.7vw,16px)}
#startCard .tag b{color:#fff}

/* butang PLAY */
#playBtn{position:relative;overflow:hidden;margin-top:4px;width:min(80vw,320px);padding:clamp(14px,2.4vh,20px) 18px;
  border:none;border-radius:999px;color:#2a1a00;font-size:clamp(22px,6.6vw,28px);font-weight:900;letter-spacing:3px;
  background:linear-gradient(180deg,#ffe56a 0%,#ffc21a 55%,#ff9d00 100%);
  box-shadow:0 6px 0 #b86a00,0 10px 30px rgba(255,170,0,.45),inset 0 2px 0 rgba(255,255,255,.55);
  animation:playPulse 1.8s ease-in-out infinite}
#playBtn .ico{display:inline-block;margin-right:6px;font-size:.8em;vertical-align:1px}
#playBtn::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-60%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shine 3.2s ease-in-out infinite}
@keyframes shine{0%,55%{left:-60%}100%{left:130%}}
@keyframes playPulse{50%{transform:scale(1.035)}}
#playBtn:active{transform:translateY(4px) scale(.98);box-shadow:0 2px 0 #b86a00,0 6px 18px rgba(255,170,0,.4)}
#playBtn:disabled{animation:none;filter:grayscale(.35) brightness(.9)}
body.starting #playBtn{letter-spacing:2px}

.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chips span{padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);font-size:12px;color:#b9c6ea;white-space:nowrap}
.chips b{color:#fff}
#gameWatermark{margin-top:2px;font-size:11px;color:#5C74A8;letter-spacing:1.5px}
#gameWatermark .watermarkPro{font-size:15px;font-weight:900;color:#ffd21a;letter-spacing:2px}

@media (max-height:640px){
  .chips{display:none}
  .livePill{display:none}
}
@media (prefers-reduced-motion:reduce){
  .orbit,#hero .hole i,#playBtn,#playBtn::after,.badge,.stars,.livePill i{animation:none}
}

/* ---- hamburger + menu ---- */
#menuToggle{position:fixed;right:max(12px,env(safe-area-inset-right));
  bottom:calc(var(--banner-h) + 12px);z-index:50;width:48px;height:48px;border-radius:50%;
  border:2px solid #29D1FF;background:rgba(11,30,51,.82);color:#29D1FF;font-size:24px;line-height:1;
  display:none}
body.playing #menuToggle{display:block}
body.menuOpen #menuToggle{display:none}
#menuOverlay{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:none}
body.menuOpen #menuOverlay{display:block}
#touchControls{position:fixed;left:0;right:0;bottom:var(--banner-h);z-index:70;
  background:#0B1E33;border-top:2px solid #29D1FF;border-radius:18px 18px 0 0;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .2s ease;visibility:hidden}
body.menuOpen #touchControls{transform:none;visibility:visible}
.menuTitle{display:flex;justify-content:space-between;align-items:center;font-weight:900;
  letter-spacing:3px;color:#29D1FF;margin-bottom:12px}
#menuCloseBtn{background:none;border:1px solid #29D1FF;color:#29D1FF;border-radius:50%;width:32px;height:32px;font-size:16px}
.menuGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tBtn{padding:15px 8px;border:none;border-radius:12px;background:#17324f;color:#EAF6FF;
  font-size:15px;font-weight:700}
.tBtn:active{background:#29D1FF;color:#04202E}
a.tBtn{display:flex;align-items:center;justify-content:center;text-decoration:none}
.tBtn.tYT{background:#e62117;color:#fff}
.tBtn.tYT:active{background:#ff4a3d;color:#fff}
.tBtn.tPro{grid-column:1 / -1;background:#ffd54a;color:#1a1400;font-size:17px;font-weight:900}