:root {
  --primary:#7c3aed;
  --pink:#ec4899;
  --gold:#f59e0b;
  --mint:#10b981;
  --sky:#38bdf8;
  --ink:#1e1b4b;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; touch-action:none; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:Tajawal, Arial, sans-serif;
  background:#0a001a;
  color:#fff;
  user-select:none;
  -webkit-user-select:none;
  position:fixed;
  inset:0;
  direction:rtl;
}
button,a { font:inherit; color:inherit; }
button { border:0; cursor:pointer; }
a { text-decoration:none; }
.game-wrap { position:relative; width:100vw; height:100dvh; min-height:100vh; overflow:hidden; background:#0a001a; }
#gameCanvas { display:block; width:100%; height:100%; image-rendering:auto; touch-action:none; }
.hud {
  position:absolute;
  top:calc(8px + var(--safe-t));
  left:10px;
  right:10px;
  z-index:20;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
}
.hud-pill,.round-action {
  background:rgba(255,255,255,.16);
  border:1.5px solid rgba(255,255,255,.26);
  border-radius:999px;
  backdrop-filter:blur(8px);
  box-shadow:0 8px 20px rgba(0,0,0,.16);
}
.hud-pill { padding:7px 13px; font-size:14px; font-weight:900; min-width:64px; text-align:center; }
.hud-title { color:#fde68a; font-size:15px; font-weight:900; text-shadow:0 2px 10px rgba(0,0,0,.55); text-align:center; }
.hud-sub { color:rgba(255,255,255,.72); font-size:10px; font-weight:800; text-align:center; }
.top-actions {
  position:absolute;
  top:calc(54px + var(--safe-t));
  left:10px;
  right:10px;
  z-index:22;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
}
.round-action {
  pointer-events:auto;
  min-height:42px;
  padding:9px 13px;
  font-size:12px;
  font-weight:900;
}
#soundBtn { min-width:48px; }
.ctrl-bar {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  z-index:25;
  display:flex;
  gap:8px;
  padding:8px 10px calc(8px + var(--safe-b));
}
.ctrl-btn {
  flex:1;
  min-height:58px;
  border-radius:20px;
  color:#fff;
  border:2px solid rgba(255,255,255,.22);
  box-shadow:0 6px 0 rgba(0,0,0,.3), 0 16px 24px rgba(0,0,0,.14);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  font-weight:900;
}
.ctrl-btn:active,.primary-start:active,.overlay-close:active,.center-link:active,.overlay-link:active,.round-action:active,.item-chip:active,.wtab:active { transform:translateY(3px) scale(.98); }
.btn-icon { font-size:23px; line-height:1; }
.btn-lbl { font-size:11px; opacity:.9; }
.btn-jump { background:linear-gradient(135deg,#7c3aed,#6366f1); }
.btn-run { background:linear-gradient(135deg,#ec4899,#f97316); }
.btn-dance { background:linear-gradient(135deg,#10b981,#38bdf8); }
.btn-wardrobe { background:linear-gradient(135deg,#f59e0b,#ec4899); }
.wardrobe {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  z-index:30;
  padding:10px 10px calc(12px + var(--safe-b));
  background:linear-gradient(0deg,rgba(10,0,26,.98),rgba(28,8,70,.96));
  border-top:2px solid rgba(255,255,255,.14);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.wardrobe.hidden { transform:translateY(105%); }
.wardrobe-tabs,.items-row { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
.wardrobe-tabs::-webkit-scrollbar,.items-row::-webkit-scrollbar { display:none; }
.wardrobe-tabs { margin-bottom:8px; }
.wtab {
  flex-shrink:0;
  min-height:36px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  border:1.5px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.74);
  font-size:12px;
  font-weight:900;
}
.wtab.active { background:linear-gradient(135deg,var(--primary),var(--pink)); color:#fff; border-color:transparent; }
.item-chip {
  flex-shrink:0;
  min-width:62px;
  min-height:72px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:8px 6px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  border:2px solid rgba(255,255,255,.14);
}
.item-chip.equipped { border-color:var(--gold); background:rgba(245,158,11,.16); box-shadow:0 0 14px rgba(245,158,11,.3); }
.chip-icon { font-size:27px; line-height:1; }
.chip-name { font-size:9px; font-weight:900; color:rgba(255,255,255,.72); white-space:nowrap; }
.chip-new { background:var(--pink); color:#fff; font-size:8px; font-weight:900; padding:1px 5px; border-radius:999px; }
.start-screen,.overlay {
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:22px;
  background:radial-gradient(circle at 50% 15%, rgba(236,72,153,.32), transparent 32%), rgba(10,0,26,.88);
  backdrop-filter:blur(9px);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.start-screen.show,.overlay.show { opacity:1; pointer-events:auto; }
.start-card,.overlay-card {
  width:min(340px, 94vw);
  border-radius:30px;
  padding:24px 22px;
  text-align:center;
  background:linear-gradient(135deg,rgba(53,16,108,.98),rgba(21,5,58,.98));
  border:2px solid rgba(255,255,255,.16);
  box-shadow:0 0 0 5px rgba(245,158,11,.16), 0 20px 70px rgba(0,0,0,.32);
}
.start-icon,.overlay-icon { font-size:62px; filter:drop-shadow(0 8px 18px rgba(245,158,11,.35)); animation:iconPop .55s ease-in-out infinite alternate; }
h1,.overlay-card h2 { color:#fde68a; font-size:25px; font-weight:900; margin:8px 0; }
.start-card p,.overlay-card p { color:rgba(255,255,255,.78); font-size:14px; font-weight:800; line-height:1.6; }
.best-box {
  display:grid;
  gap:7px;
  margin:14px 0;
  padding:10px;
  border-radius:18px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);
  font-size:13px;
  font-weight:900;
}
.best-box.compact { margin-bottom:0; }
.primary-start,.overlay-close,.center-link,.overlay-link {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:54px;
  border-radius:999px;
  font-weight:900;
  border:2.5px solid rgba(255,255,255,.28);
  box-shadow:0 6px 0 rgba(0,0,0,.22);
}
.primary-start,.overlay-close { background:linear-gradient(135deg,var(--primary),var(--pink)); font-size:18px; }
.center-link,.overlay-link { margin-top:10px; background:rgba(255,255,255,.1); font-size:15px; }
.overlay-actions { width:min(340px, 94vw); }
.score-pop {
  position:fixed;
  z-index:45;
  color:#fde68a;
  font-size:21px;
  font-weight:900;
  pointer-events:none;
  text-shadow:0 2px 9px rgba(0,0,0,.65);
  animation:scorePop .9s ease forwards;
}
.confetti { position:fixed; top:-32px; z-index:65; font-size:23px; pointer-events:none; animation:cfFall linear forwards; }
@keyframes scorePop { to { transform:translateY(-58px) scale(1.25); opacity:0; } }
@keyframes cfFall { to { transform:translateY(110vh) rotate(420deg); opacity:.05; } }
@keyframes iconPop { from { transform:scale(1); } to { transform:scale(1.1); } }
@media (max-width:400px) {
  .ctrl-bar { gap:6px; padding-inline:7px; }
  .ctrl-btn { min-height:52px; border-radius:17px; }
  .btn-icon { font-size:20px; }
  .btn-lbl { font-size:10px; }
  .hud-pill { padding:6px 10px; min-width:58px; font-size:13px; }
  .hud-title { font-size:13px; }
  .round-action { min-height:38px; font-size:11px; padding:8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}