:root{
  --navy:#14102A; --ember:#FF7A3C; --gold:#FFC24B; --pink:#FF9EC4;
  --teal:#2ED3C6; --cream:#F4E7D3; --ink:#180F26;
}
*{box-sizing:border-box;}
html,body{
  height:100%; margin:0; overflow:hidden; background:var(--navy); color:var(--cream);
  font-family:'Cairo',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none; touch-action:none;
}
button{font-family:inherit; color:inherit; border:0; background:none; cursor:pointer; user-select:none; touch-action:manipulation;}
#app{position:fixed; inset:0; overflow:hidden;}
#game{position:absolute; inset:0; display:block;}
.hidden{display:none !important;}

/* ═══════════ HUD ═══════════ */
.hud{
  position:absolute; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:flex-start; gap:6px;
  padding:6px 8px; pointer-events:none;
}
.hud__side{flex:1 1 0; min-width:0;}
.hud__side--e{text-align:right;}
.hud__name{
  font-size:clamp(9px,1.9vmin,13px); font-weight:900; letter-spacing:.02em;
  color:var(--cream); text-shadow:0 2px 0 var(--ink),0 0 6px rgba(0,0,0,.6);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bar{
  position:relative; height:clamp(9px,2.1vmin,14px); margin-top:2px;
  background:rgba(20,16,42,.78);
  border:1.5px solid var(--gold);
  transform:skewX(-16deg);
  overflow:hidden;
  box-shadow:0 2px 0 rgba(0,0,0,.35);
}
.bar i{display:block; height:100%; width:100%; transition:width .16s linear;}
.hud__side--p .bar i{margin-left:auto;}
.hud__side--p .bar{transform:skewX(16deg);}
.bar--hp i{background:linear-gradient(90deg,#FF7A3C,#FFC24B);}
.hud__side--e .bar--hp i{background:linear-gradient(90deg,#FF9EC4,#FF7A3C);}
.bar--ch{height:clamp(5px,1.3vmin,8px); border-color:rgba(244,231,211,.65); margin-top:3px;}
.bar--ch i{background:linear-gradient(90deg,#2ED3C6,#8FF1E9);}
.hud__side--e .bar--ch i{margin-left:auto;}

.hud__mid{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:1px;
  min-width:56px; pointer-events:none;
}
.timer{
  font-size:clamp(17px,4vmin,30px); font-weight:900; line-height:1;
  color:var(--gold); text-shadow:0 2px 0 var(--ink),0 0 14px rgba(255,122,60,.65);
  font-variant-numeric:tabular-nums;
}
.pips{display:flex; gap:3px;}
.pips b{
  width:clamp(5px,1.2vmin,8px); height:clamp(5px,1.2vmin,8px);
  border-radius:50%; border:1px solid rgba(255,194,75,.7); background:transparent;
}
.pips b.on{background:var(--gold); box-shadow:0 0 6px var(--gold);}
.hud__tools{display:flex; gap:4px; margin-top:2px; pointer-events:auto;}
.icon-btn{
  width:24px; height:24px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(244,231,211,.45); background:rgba(20,16,42,.6); color:var(--cream);
}
.icon-btn:active{background:rgba(255,122,60,.5);}

/* ═══════════ CONTROLS ═══════════ */
.controls{position:absolute; inset:0; z-index:15; pointer-events:none;}
.pad{
  position:absolute; left:12px; bottom:12px;
  width:clamp(84px,21vmin,132px); height:clamp(84px,21vmin,132px);
  border-radius:50%;
  border:2px solid rgba(244,231,211,.42);
  background:radial-gradient(circle at 50% 50%, rgba(46,211,198,.10), rgba(20,16,42,.30));
  pointer-events:auto; touch-action:none;
  box-shadow:inset 0 0 22px rgba(20,16,42,.6);
}
.pad__cross{
  position:absolute; inset:22%;
  border-radius:50%;
  border:1px dashed rgba(244,231,211,.18);
}
.pad__stick{
  position:absolute; left:50%; top:50%;
  width:44%; height:44%; border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 38% 34%, rgba(244,231,211,.55), rgba(255,122,60,.42));
  border:1.5px solid rgba(244,231,211,.85);
  box-shadow:0 0 14px rgba(255,122,60,.35);
  transition:box-shadow .12s;
}
.pad.is-down .pad__stick{box-shadow:0 0 22px rgba(255,122,60,.8);}

.actions{
  position:absolute; right:12px; bottom:12px;
  display:grid; grid-template-columns:auto auto; gap:clamp(6px,1.4vmin,10px);
  pointer-events:none;
}
.abtn{
  pointer-events:auto; touch-action:none;
  width:clamp(54px,14.5vmin,78px); height:clamp(54px,14.5vmin,78px);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(11px,2.5vmin,16px); font-weight:900;
  color:var(--cream);
  text-shadow:0 2px 0 var(--ink);
  border:2px solid rgba(244,231,211,.8);
  background:rgba(20,16,42,.42);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:transform .07s, background .12s, box-shadow .12s;
}
.abtn:active,.abtn.is-down{
  transform:scale(.92);
  background:rgba(255,122,60,.55);
  box-shadow:0 0 22px rgba(255,122,60,.75);
}
.abtn--punch{grid-column:2; grid-row:2; border-color:var(--gold);}
.abtn--kick{grid-column:1; grid-row:2; border-color:var(--ember);}
.abtn--block{grid-column:1; grid-row:1; border-color:var(--cream);}
.abtn--special{grid-column:2; grid-row:1; border-color:var(--pink); color:var(--pink);}
.abtn--special.is-ready{
  color:#0F3B37; background:linear-gradient(160deg,#8FF1E9,#2ED3C6);
  border-color:#CFFFFB; box-shadow:0 0 20px rgba(46,211,198,.85);
  animation:pulseReady 1.1s ease-in-out infinite;
}
@keyframes pulseReady{
  0%,100%{box-shadow:0 0 14px rgba(46,211,198,.55);}
  50%{box-shadow:0 0 28px rgba(46,211,198,1);}
}

/* ═══════════ SCREENS ═══════════ */
.screen{
  position:absolute; inset:0; z-index:40; display:flex;
  align-items:center; justify-content:center; padding:10px;
  overflow-y:auto; overflow-x:hidden;
}
.screen--dark{background:radial-gradient(circle at 50% 38%, rgba(20,16,42,.62), rgba(10,7,20,.94)); backdrop-filter:blur(3px);}
.screen--mid{pointer-events:none; background:transparent;}
.screen--title{background:radial-gradient(circle at 50% 45%, rgba(20,16,42,.30), rgba(12,8,22,.82));}

.tw{
  width:100%; max-width:820px; display:flex; align-items:center;
  justify-content:center; gap:clamp(10px,3vw,34px); flex-wrap:wrap;
}
.tw__hero{flex:1 1 290px; display:flex; flex-direction:column; align-items:center; gap:clamp(5px,1.2vmin,12px); text-align:center;}
.tw__side{flex:1 1 250px; display:flex; flex-direction:column; align-items:center; gap:clamp(5px,1.2vmin,12px);}

.kicker{font-size:clamp(10px,2.2vmin,14px); font-weight:700; color:var(--pink); letter-spacing:.04em;}
.logo{
  margin:0; font-size:clamp(34px,9.5vmin,72px); font-weight:900; line-height:.95;
  color:var(--gold); letter-spacing:.01em;
  text-shadow:
    2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink),
    3px 3px 0 var(--ink), 4px 6px 0 rgba(20,16,42,.85),
    0 0 26px rgba(255,122,60,.55);
}
.byline{
  font-size:clamp(12px,2.6vmin,18px); font-weight:900; color:var(--cream);
  padding:2px 12px; border-radius:999px;
  border:1.5px solid rgba(255,194,75,.6);
  background:rgba(20,16,42,.55);
}

.diff{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center;}
.diff__lbl{font-size:clamp(10px,2.1vmin,13px); color:rgba(244,231,211,.75); font-weight:700;}
.diff__row{display:flex; gap:5px;}
.diff__b{
  padding:5px 10px; border-radius:999px; font-size:clamp(10px,2.1vmin,13px); font-weight:700;
  border:1.5px solid rgba(244,231,211,.4); color:var(--cream); background:rgba(20,16,42,.5);
  min-height:34px;
}
.diff__b.is-on{background:linear-gradient(160deg,#FFC24B,#FF7A3C); color:#241307; border-color:#FFE6A8; box-shadow:0 0 14px rgba(255,122,60,.6);}

.cta{
  padding:12px 34px; border-radius:999px; font-weight:900; font-size:clamp(15px,3.2vmin,20px);
  color:#241307; background:linear-gradient(160deg,#FFE6A8,#FFC24B 45%,#FF7A3C);
  border:2px solid #FFE6A8;
  box-shadow:0 6px 0 rgba(20,16,42,.75), 0 0 26px rgba(255,122,60,.55);
  transition:transform .08s;
  min-height:46px;
}
.cta:active{transform:translateY(3px); box-shadow:0 3px 0 rgba(20,16,42,.75);}
.cta--sm{padding:9px 22px; font-size:clamp(13px,2.6vmin,16px); box-shadow:0 4px 0 rgba(20,16,42,.75);}

.btn2{
  padding:9px 18px; border-radius:999px; font-weight:700; font-size:clamp(12px,2.4vmin,15px);
  border:1.5px solid rgba(244,231,211,.55); color:var(--cream); background:rgba(20,16,42,.6);
  min-height:42px;
}
.btn2:active{background:rgba(255,122,60,.4);}
.btn2--ghost{font-size:clamp(11px,2.1vmin,13px); padding:6px 14px; min-height:36px; opacity:.85;}
.btn2--gold{background:linear-gradient(160deg,#FFC24B,#FF7A3C); color:#241307; border-color:#FFE6A8;}

.roster{display:flex; gap:clamp(5px,1.2vmin,10px); justify-content:center; flex-wrap:wrap;}
.card{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 7px 5px; border-radius:14px;
  border:1.5px solid rgba(244,231,211,.25);
  background:rgba(20,16,42,.55);
  width:clamp(72px,18vmin,110px);
}
.card.is-on{border-color:var(--gold); box-shadow:0 0 18px rgba(255,194,75,.45); background:rgba(60,30,20,.55);}
.card img{height:clamp(56px,15vmin,100px); width:auto; object-fit:contain; display:block; filter:drop-shadow(0 4px 8px rgba(0,0,0,.55));}
.card__body{display:flex; flex-direction:column; align-items:center; line-height:1.15;}
.card__n{font-size:clamp(9px,2vmin,12px); font-weight:900; color:var(--cream);}
.card__t{font-size:clamp(8px,1.7vmin,10px); color:rgba(244,231,211,.6);}
.card.is-on .card__t{color:var(--gold);}

.hints{display:flex; flex-direction:column; gap:2px; align-items:center; text-align:center;}
.hints span{font-size:clamp(9px,1.9vmin,12px); color:rgba(244,231,211,.58); line-height:1.5;}
.bestline{
  font-size:clamp(10px,2.1vmin,13px); font-weight:900; color:var(--teal);
  padding:3px 12px; border-radius:999px;
  border:1px solid rgba(46,211,198,.45); background:rgba(20,16,42,.55);
}

/* round intro */
.screen--mid{
  position:absolute; inset:0; z-index:35; display:flex; align-items:center; justify-content:center;
}
.roundbox{text-align:center; pointer-events:none;}
.round__no{
  font-size:clamp(16px,4vmin,28px); font-weight:900; color:var(--cream);
  text-shadow:0 3px 0 var(--ink),0 0 18px rgba(255,122,60,.7);
}
.round__go{
  font-size:clamp(34px,10vmin,74px); font-weight:900; color:var(--gold);
  text-shadow:0 4px 0 var(--ink), 0 0 30px rgba(255,122,60,.85);
  animation:goPop .45s ease-out;
}
@keyframes goPop{from{transform:scale(.6); opacity:0;} to{transform:scale(1); opacity:1;}}

.panel{
  width:min(94vw,520px); border-radius:20px; padding:clamp(12px,3vmin,24px);
  background:linear-gradient(170deg, rgba(30,22,52,.96), rgba(16,11,30,.97));
  border:2px solid rgba(255,194,75,.55);
  box-shadow:0 18px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  display:flex; flex-direction:column; align-items:center; gap:clamp(6px,1.5vmin,14px);
  text-align:center;
}
.panel__big{
  font-size:clamp(30px,8vmin,58px); font-weight:900; line-height:1;
  color:var(--gold); text-shadow:0 4px 0 var(--ink), 0 0 28px rgba(255,122,60,.75);
}
.panel__big--sm{font-size:clamp(18px,4.4vmin,30px);}
.panel__sub{font-size:clamp(13px,2.8vmin,17px); color:var(--cream); font-weight:700;}
.panel__score{font-size:clamp(11px,2.3vmin,14px); color:var(--teal); font-weight:900;}
.panel__row{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:2px;}

.board-list{
  width:100%; max-height:46vh; overflow-y:auto; display:flex; flex-direction:column; gap:4px;
  font-size:clamp(11px,2.3vmin,14px); color:var(--cream);
}
.board-list .brow{display:flex; justify-content:space-between; gap:8px; padding:5px 10px; border-radius:9px; background:rgba(255,255,255,.05);}
.board-list .brow.me{background:rgba(46,211,198,.18); border:1px solid rgba(46,211,198,.5);}
.board-list .brow span:first-child{color:var(--gold); font-weight:900;}
.board-list .note{opacity:.75; line-height:1.6; font-size:clamp(11px,2.2vmin,13px);}

/* rotate */
.screen--rotate{background:rgba(10,7,20,.94); z-index:60;}
.rot{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;}
.rot p{font-size:15px; font-weight:700; margin:0; color:var(--cream);}

/* short screens */
@media (max-height:430px){
  .kicker{display:none;}
  .hints{display:none;}
  .logo{font-size:clamp(26px,7.4vmin,46px);}
  .byline{font-size:11px; padding:1px 10px;}
  .cta{padding:8px 22px; font-size:15px; min-height:38px;}
  .cta--sm{padding:7px 16px; font-size:13px; min-height:34px;}
  .btn2{min-height:34px; padding:6px 14px; font-size:12px;}
  .card img{height:44px;}
  .card{width:58px; padding:3px 4px;}
  .panel{padding:10px; gap:6px; border-radius:14px;}
  .panel__big{font-size:30px;}
  .panel__big--sm{font-size:19px;}
  .diff__b{min-height:30px; padding:3px 9px;}
}
@media (max-width:520px){
  .tw{gap:8px;}
}

/* ═══════════ INTRO / SPLASH — فخم ═══════════ */
.screen--splash{
  z-index:70; overflow:hidden;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,194,75,.20), rgba(20,16,42,0) 58%),
    radial-gradient(circle at 50% 88%, rgba(255,122,60,.16), rgba(20,16,42,0) 58%),
    linear-gradient(180deg,#0A0614 0%,#14102A 44%,#1D1023 100%);
  transition:opacity .5s ease, transform .5s ease;
}
.screen--splash.is-out{opacity:0; transform:scale(1.06);}
.screen--splash::before{
  content:''; position:absolute; inset:-30%; pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 42%, rgba(255,194,75,.075) 0deg 2.4deg, rgba(255,194,75,0) 2.4deg 11deg);
  animation:spinSlow 120s linear infinite;
}
@keyframes spinSlow{to{transform:rotate(360deg);}}

.splash__frame{
  position:absolute; inset:max(9px,1.8vmin);
  border:1px solid rgba(255,194,75,.42);
  border-radius:6px;
  box-shadow:inset 0 0 0 4px rgba(255,194,75,.07), inset 0 0 46px rgba(255,122,60,.13);
  pointer-events:none;
}
.splash__frame::before,.splash__frame::after{
  content:''; position:absolute; width:24px; height:24px;
  border:2px solid rgba(255,194,75,.9);
}
.splash__frame::before{top:-2px; left:-2px; border-width:2px 0 0 2px; border-radius:5px 0 0 0;}
.splash__frame::after{bottom:-2px; right:-2px; border-width:0 2px 2px 0; border-radius:0 0 5px 0;}

.splash__dust{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.splash__dust i{
  position:absolute; top:-8%; border-radius:50%; opacity:0;
  background:radial-gradient(circle,#FFF6DC,#FFC24B 55%,rgba(255,122,60,0) 72%);
  animation-name:floatDown; animation-timing-function:linear; animation-iteration-count:infinite;
}
@keyframes floatDown{
  0%{opacity:0; transform:translateY(0) scale(.55);}
  12%{opacity:.95;}
  78%{opacity:.62;}
  100%{opacity:0; transform:translateY(112vh) translateX(26px) scale(1);}
}

.splash__inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(5px,1.5vmin,13px); text-align:center; padding:16px;
  max-width:min(96vw,620px);
}
.splash__crest{
  animation:crestIn .95s cubic-bezier(.2,.9,.25,1) both;
  filter:drop-shadow(0 8px 20px rgba(255,122,60,.45));
}
@keyframes crestIn{
  from{opacity:0; transform:scale(.66) rotate(-14deg);}
  to{opacity:1; transform:none;}
}
.splash__eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:clamp(9px,2vmin,12px); font-weight:900;
  letter-spacing:.36em; color:rgba(255,194,75,.92);
  animation:fadeUp .9s .22s both;
}
.splash__eyebrow span{display:block; width:clamp(24px,8vw,54px); height:1px; background:linear-gradient(90deg,transparent,rgba(255,194,75,.9));}
.splash__eyebrow span:last-child{background:linear-gradient(90deg,rgba(255,194,75,.9),transparent);}

.splash__name{
  margin:0; font-weight:900; line-height:1.12; letter-spacing:0;
  font-size:clamp(32px,9.4vmin,76px);
  color:#FFC24B;
  text-shadow:0 4px 0 rgba(24,15,38,.92), 0 0 34px rgba(255,122,60,.5);
  animation:fadeUp .95s .34s both;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .splash__name{
    background:linear-gradient(100deg,#FFE9B0,#FFC24B 22%,#FFF9E6 42%,#FF7A3C 60%,#FFC24B 80%,#FFE9B0 100%);
    background-size:260% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    text-shadow:none;
    filter:drop-shadow(0 6px 16px rgba(255,122,60,.45));
    animation:fadeUp .95s .34s both, goldSweep 7s 1.2s linear infinite;
  }
}
@keyframes goldSweep{0%{background-position:0% 50%;}100%{background-position:260% 50%;}}
@keyframes fadeUp{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}

.splash__rule{
  position:relative; width:clamp(88px,34vw,210px); height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,194,75,.85),transparent);
  animation:fadeUp .9s .5s both;
}
.splash__rule::after{
  content:''; position:absolute; left:50%; top:50%;
  width:7px; height:7px; transform:translate(-50%,-50%) rotate(45deg);
  background:#FFC24B; box-shadow:0 0 12px rgba(255,194,75,.9);
}
.splash__tag{
  margin:0; font-size:clamp(11px,2.4vmin,15px); font-weight:700;
  color:rgba(244,231,211,.82); animation:fadeUp .9s .58s both;
}
.splash__enter{
  margin-top:clamp(4px,1.4vmin,12px);
  padding:12px 40px; border-radius:999px; min-height:48px;
  font-weight:900; font-size:clamp(14px,3vmin,18px);
  color:#241307;
  background:linear-gradient(160deg,#FFF3D0,#FFC24B 42%,#FF7A3C);
  border:2px solid #FFF3D0;
  box-shadow:0 8px 0 rgba(12,6,20,.8), 0 0 24px rgba(255,122,60,.5);
  animation:fadeUp .9s .7s both, enterGlow 2.6s 1.7s ease-in-out infinite;
  transition:transform .08s;
}
.splash__enter:active{transform:translateY(3px);}
@keyframes enterGlow{
  0%,100%{box-shadow:0 8px 0 rgba(12,6,20,.8), 0 0 22px rgba(255,122,60,.45);}
  50%{box-shadow:0 8px 0 rgba(12,6,20,.8), 0 0 44px rgba(255,194,75,.95);}
}
.splash__hint{
  margin:0; font-size:clamp(10px,2vmin,12px);
  color:rgba(244,231,211,.55); animation:hintPulse 2.2s ease-in-out infinite;
}
@keyframes hintPulse{0%,100%{opacity:.42;}50%{opacity:.95;}}

/* byline ornament on the menu */
.byline{display:inline-flex; align-items:center; gap:9px;}
.byline::before,.byline::after{content:''; width:14px; height:1px; background:rgba(255,194,75,.8);}

@media (max-height:430px){
  .splash__crest{display:none;}
  .splash__name{font-size:clamp(24px,6.6vmin,40px);}
  .splash__inner{gap:4px; padding:8px 12px;}
  .splash__enter{padding:8px 26px; min-height:38px; font-size:14px;}
  .splash__rule{width:100px;}
}
@media (prefers-reduced-motion:reduce){
  .screen--splash::before,.screen--splash.is-out,
  .splash__dust i,.splash__crest,.splash__eyebrow,.splash__name,
  .splash__rule,.splash__tag,.splash__enter,.splash__hint,
  .abtn--special.is-ready{animation:none !important;}
  .screen--splash{transition:none;}
}