:root{
  --pink:#EC4899;
  --violet:#8B5CF6;
  --gold:#F59E0B;
  --ok:#34D399;
  --bg:#120a1f;
  --bg-2:#1c1132;
  --card:rgba(255,255,255,.055);
  --card-2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.11);
  --text:#f7f3ff;
  --muted:#b3a5d6;
  --radius:20px;
  --font:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:radial-gradient(120% 80% at 15% 0%,#2a1650 0%,#160c28 45%,#0d0718 100%);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.glow{
  position:fixed;
  border-radius:50%;
  filter:blur(90px);
  opacity:.5;
  pointer-events:none;
  z-index:0;
}
.glow-a{width:340px;height:340px;background:var(--pink);top:-120px;inset-inline-start:-80px}
.glow-b{width:380px;height:380px;background:var(--violet);bottom:-140px;inset-inline-end:-100px;opacity:.45}
.app{
  position:relative;
  z-index:1;
  min-height:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:14px clamp(12px,4vw,28px) 22px;
  max-width:720px;
  margin:0 auto;
}

/* ---------- header ---------- */
.hud{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:clamp(18px,4.6vw,22px);
  font-weight:800;
  letter-spacing:.2px;
}
.brand-dot{
  width:22px;height:22px;border-radius:9px;
  background:linear-gradient(135deg,var(--pink),var(--violet) 60%,var(--gold));
  box-shadow:0 0 18px rgba(236,72,153,.55);
  animation:pulseDot 2.6s ease-in-out infinite;
}
@keyframes pulseDot{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.hud-btns{display:flex;gap:8px;flex-wrap:wrap}
.icon-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:9px 12px;
  cursor:pointer;
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
  backdrop-filter:blur(10px);
}
.icon-btn svg{width:16px;height:16px;stroke-width:1.9}
.icon-btn:hover{transform:translateY(-2px);background:var(--card-2);box-shadow:0 8px 22px rgba(0,0,0,.35)}
.icon-btn:active{transform:translateY(0)}
.icon-btn.is-off{opacity:.55}

/* ---------- stats + level bar ---------- */
.main{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.stat{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 6px;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  backdrop-filter:blur(10px);
}
.stat b{font-size:clamp(16px,4.2vw,19px);font-weight:800;font-variant-numeric:tabular-nums}
.stat span{font-size:11px;color:var(--muted)}
.stat b.up{animation:pop .35s ease}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.28);color:var(--gold)}100%{transform:scale(1)}}
.levelbar{
  display:flex;flex-direction:column;gap:3px;
  padding:0 4px;
  text-align:center;
}
.levelbar b{font-size:clamp(15px,3.9vw,17px);font-weight:800}
.levelbar span{font-size:12.5px;color:var(--muted);line-height:1.5}

/* ---------- board ---------- */
.board-wrap{display:flex;justify-content:center;padding:2px 0}
#board{
  position:relative;
  width:min(92vw,50vh,430px);
  aspect-ratio:1/1;
  border-radius:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  border:1px solid var(--stroke);
  box-shadow:0 26px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
#board.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{
  10%,90%{transform:translate3d(-3px,0,0)}
  20%,80%{transform:translate3d(5px,0,0)}
  30%,50%,70%{transform:translate3d(-8px,0,0)}
  40%,60%{transform:translate3d(8px,0,0)}
}
.tiles{
  position:absolute;inset:0;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
}
.cell{position:relative}
.cell.floor::after{
  content:'';position:absolute;inset:3px;border-radius:11px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.cell.wall::after{
  content:'';position:absolute;inset:2px;border-radius:12px;
  background:linear-gradient(150deg,#3c2a63,#251741);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 10px rgba(0,0,0,.35);
}
.cell.exit::before{
  content:'';position:absolute;inset:16%;border-radius:50%;
  border:2px dashed var(--gold);
  box-shadow:0 0 18px rgba(245,158,11,.45),inset 0 0 14px rgba(245,158,11,.25);
  animation:spinRing 9s linear infinite;
}
@keyframes spinRing{to{transform:rotate(360deg)}}

/* ---------- pieces ---------- */
.ents{position:absolute;inset:0;pointer-events:none}
.ent{
  position:absolute;top:0;left:0;
  width:12.5%;height:12.5%;
  display:grid;place-items:center;
  transition:transform .14s cubic-bezier(.36,1.35,.5,1),opacity .24s ease;
  will-change:transform;
}
.orb{
  width:74%;height:74%;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#fff 0%,#ffd9f0 18%,var(--pink) 52%,#7a2ecb 100%);
  box-shadow:0 0 16px rgba(236,72,153,.75),0 0 34px rgba(139,92,246,.45);
}
.ent.dead .orb{
  background:radial-gradient(circle at 32% 28%,#fff,#fca5a5 30%,#dc2626 70%,#7f1d1d 100%);
  box-shadow:0 0 22px rgba(220,38,38,.9);
  animation:squash .5s ease forwards;
}
@keyframes squash{to{transform:scale(.35);opacity:.25}}
.ent.taken{opacity:0;transform:scale(.4) !important}
.gem{
  width:52%;height:52%;
  background:linear-gradient(140deg,#fff2c4,var(--gold) 55%,#b45309);
  clip-path:polygon(50% 0%,100% 38%,78% 100%,22% 100%,0% 38%);
  box-shadow:0 0 14px rgba(245,158,11,.7);
  animation:bob 2.1s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(-6%) scale(1)}50%{transform:translateY(8%) scale(1.06)}}
.spike{
  width:62%;height:62%;
  background:linear-gradient(140deg,#fca5a5,#ef4444 45%,#7f1d1d);
  border-radius:22%;
  transform:rotate(45deg);
  box-shadow:0 0 16px rgba(239,68,68,.75),inset 0 0 8px rgba(0,0,0,.4);
  animation:throb 1.1s ease-in-out infinite;
}
@keyframes throb{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}

/* ---------- control pad ---------- */
.pad{
  direction:ltr;
  display:grid;
  grid-template-columns:repeat(3,58px);
  grid-template-rows:repeat(3,58px);
  gap:8px;
  justify-content:center;
  justify-items:center;
  align-items:center;
  margin-top:4px;
}
.pad-btn{
  width:58px;height:58px;
  display:grid;place-items:center;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:18px;
  color:var(--text);
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}
.pad-btn:hover{background:var(--card-2);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.pad-btn:active,.pad-btn.press{transform:scale(.92);background:rgba(236,72,153,.22)}
.pad-btn.up{grid-area:1/2}
.pad-btn.left{grid-area:2/1}
.pad-btn.wait{grid-area:2/2;background:rgba(139,92,246,.18);border-color:rgba(139,92,246,.45)}
.pad-btn.right{grid-area:2/3}
.pad-btn.down{grid-area:3/2}
.chev{
  width:13px;height:13px;
  border-top:3px solid currentColor;
  border-left:3px solid currentColor;
  border-radius:2px;
}
.chev-up{transform:rotate(45deg) translate(2px,2px)}
.chev-left{transform:rotate(-45deg) translate(2px,-2px)}
.chev-right{transform:rotate(135deg) translate(-2px,2px)}
.chev-down{transform:rotate(225deg) translate(-2px,-2px)}
.wait-dot{
  width:13px;height:13px;border-radius:50%;
  background:var(--violet);
  box-shadow:0 0 12px rgba(139,92,246,.9);
}
.kbd-hint{
  margin:2px 0 0;
  text-align:center;
  font-size:11.5px;
  color:var(--muted);
  opacity:.85;
  line-height:1.6;
}

/* ---------- toast + overlay ---------- */
.toast{
  position:fixed;
  inset-inline:0;
  bottom:26px;
  margin:0 auto;
  width:max-content;
  max-width:88vw;
  padding:11px 18px;
  border-radius:16px;
  background:rgba(28,17,50,.92);
  border:1px solid var(--stroke);
  backdrop-filter:blur(14px);
  font-size:13.5px;
  font-weight:700;
  text-align:center;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  opacity:0;
  transform:translateY(16px);
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
  z-index:40;
}
.toast.show{opacity:1;transform:translateY(0)}
.overlay{
  position:fixed;inset:0;z-index:50;
  display:grid;place-items:center;
  padding:18px;
  background:rgba(9,5,18,.72);
  backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .22s ease;
}
.overlay.show{opacity:1}
.overlay.hidden{display:none}
.sheet{
  width:100%;
  max-width:440px;
  max-height:86vh;
  overflow:auto;
  padding:22px clamp(16px,5vw,26px);
  border-radius:26px;
  background:linear-gradient(165deg,rgba(48,29,84,.95),rgba(22,13,40,.97));
  border:1px solid var(--stroke);
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  text-align:center;
  transform:translateY(14px) scale(.97);
  transition:transform .26s cubic-bezier(.3,1.3,.5,1);
}
.overlay.show .sheet{transform:translateY(0) scale(1)}
.sheet h2{margin:0 0 6px;font-size:clamp(19px,5vw,23px);font-weight:800}
.sheet p{margin:0 0 14px;color:var(--muted);font-size:13.5px;line-height:1.75}
.sheet .big-num{font-size:34px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}

.acts{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.btn{
  font-family:inherit;
  font-size:14.5px;
  font-weight:800;
  padding:13px 16px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:var(--card);
  color:var(--text);
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn:hover{transform:translateY(-2px);background:var(--card-2);box-shadow:0 12px 26px rgba(0,0,0,.35)}
.btn.primary{
  background:linear-gradient(135deg,var(--pink),var(--violet));
  border-color:transparent;
  box-shadow:0 14px 30px rgba(236,72,153,.35);
}
.starrow{display:flex;justify-content:center;gap:8px;margin:8px 0 4px}
.star{width:34px;height:34px;color:rgba(255,255,255,.18)}
.star.on{color:var(--gold);animation:starIn .45s cubic-bezier(.2,1.6,.4,1) both}
.star.on:nth-child(2){animation-delay:.1s}
.star.on:nth-child(3){animation-delay:.2s}
@keyframes starIn{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
.lv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:6px 0 4px}
.lv{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 6px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background:var(--card);
  color:var(--text);
  font-family:inherit;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.lv:hover{transform:translateY(-3px);background:var(--card-2);box-shadow:0 12px 26px rgba(0,0,0,.35)}
.lv.cur{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink),0 10px 24px rgba(236,72,153,.3)}
.lv b{font-size:17px;font-weight:800}
.lv small{font-size:10.5px;color:var(--muted);line-height:1.35;text-align:center}
.lv .mini{display:flex;gap:2px;color:rgba(255,255,255,.2)}
.lv .mini i{width:9px;height:9px;display:block}
.lv .mini i.on{color:var(--gold)}

/* ---------- a11y + responsive ---------- */
button:focus-visible,
.pad-btn:focus-visible,
.lv:focus-visible{
  outline:2px solid var(--pink);
  outline-offset:2px;
}
@media (max-width:420px){
  .pad{grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px)}
  .pad-btn{width:52px;height:52px;border-radius:16px}
  .icon-btn span{display:none}
  .icon-btn{padding:10px}
  .kbd-hint{display:none}
}
@media (max-height:720px){
  #board{width:min(86vw,44vh,400px)}
  .pad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px)}
  .pad-btn{width:48px;height:48px;border-radius:14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ---------- mini stars + muted icon ---------- */
.lv .mini svg{width:100%;height:100%;display:block}
.lv .mini i{width:11px;height:11px;display:block}
.icon-btn{position:relative}
.icon-btn.is-off svg{opacity:.4}
.icon-btn.is-off::after{
  content:'';position:absolute;top:50%;inset-inline-start:9px;
  width:18px;height:2px;border-radius:2px;
  background:var(--pink);transform:rotate(-45deg);
}