:root {
  --bg-0:#0e1730; --bg-1:#152b45; --panel:#1d2846; --panel-2:#26335a;
  --off:#39415f;
  --line:rgba(255,255,255,0.08);
  --accent:#ffb703; --accent-2:#fb8500; --accent-d:#241500;
  --text:#eef2ff; --dim:#9aa6c7;
  --good:#2ec27e; --bad:#ff4d5e; --gold:#ffd166;
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; font-family:"Baloo Bhaijaan 2","Segoe UI",Tahoma,system-ui,sans-serif; color:var(--text); overflow:hidden; user-select:none; }
body { background:radial-gradient(130% 100% at 50% -10%, #24325e 0%, #131c38 45%, #0b1226 100%); }

#app { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }

/* ---------- screens ---------- */
.screen { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; }
.screen.hidden { display:none; }

/* ---------- buttons ---------- */
.btn {
  font-family:inherit; font-size:18px; font-weight:800; color:var(--text);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:16px; padding:15px 22px; cursor:pointer;
  transition:transform .07s ease, filter .15s ease; box-shadow:0 5px 0 rgba(0,0,0,0.25);
}
@media (hover: hover) and (pointer: fine) { .btn:hover{ filter:brightness(1.12); } }
.btn:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,0.25); }
.btn-primary{ background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:var(--accent-d); box-shadow:0 5px 0 #a85e00; }
.btn-primary:active{ box-shadow:0 2px 0 #a85e00; }
.btn.big{ font-size:22px; padding:18px 30px; }
.btn-ghost{ background:rgba(255,255,255,0.05); box-shadow:none; }
.btn.danger{ background:linear-gradient(180deg,#e0453a,#b5342b); box-shadow:0 5px 0 #7c231c; }
.icon-btn{ font-size:26px; font-weight:800; background:rgba(255,255,255,0.07); border:1px solid var(--line); color:var(--text);
  width:48px; height:48px; border-radius:14px; cursor:pointer; line-height:1; }
.icon-btn:active{ transform:translateY(2px); }

/* ---------- main menu ---------- */
.menu-card{ position:relative; z-index:2; text-align:center; max-width:460px; width:100%; animation:pop .35s cubic-bezier(.2,1.3,.4,1); }

/* animated ambient backdrop — a living depot behind the title */
.menu-fx{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.menu-fx .cloud{ position:absolute; font-size:44px; opacity:.16; filter:blur(1px); animation:drift linear infinite; }
.menu-fx .c1{ top:12%; animation-duration:46s; font-size:56px; }
.menu-fx .c2{ top:26%; animation-duration:64s; animation-delay:-20s; opacity:.11; }
.menu-fx .c3{ top:6%;  animation-duration:80s; animation-delay:-46s; font-size:70px; opacity:.09; }
.menu-fx .float{ position:absolute; bottom:-40px; font-size:30px; opacity:0; animation:rise linear infinite; filter:drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.menu-fx .f1{ left:14%; animation-duration:15s; }
.menu-fx .f2{ left:38%; animation-duration:19s; animation-delay:-6s; }
.menu-fx .f3{ left:64%; animation-duration:17s; animation-delay:-11s; }
.menu-fx .f4{ left:84%; animation-duration:21s; animation-delay:-3s; }
.menu-fx .road{ position:absolute; left:0; right:0; bottom:0; height:64px;
  background:linear-gradient(180deg, rgba(10,15,32,0) 0%, rgba(10,15,32,.55) 45%, rgba(8,12,26,.85) 100%);
  border-top:2px dashed rgba(255,183,3,.22); }
.menu-fx .truck{ position:absolute; bottom:8px; font-size:40px; filter:drop-shadow(0 6px 8px rgba(0,0,0,.45));
  animation:drive linear infinite; }
.menu-fx .t1{ animation-duration:9s; }
.menu-fx .t2{ animation-duration:13s; animation-delay:-5s; font-size:46px; bottom:4px; }

@keyframes drift{ from{ transform:translateX(-90px); } to{ transform:translateX(calc(100vw + 90px)); } }
@keyframes rise{ 0%{ transform:translateY(0) rotate(0); opacity:0; } 12%{ opacity:.5; } 88%{ opacity:.5; } 100%{ transform:translateY(-82vh) rotate(28deg); opacity:0; } }
@keyframes drive{ from{ transform:translateX(-70px) scaleX(-1); } to{ transform:translateX(calc(100vw + 70px)) scaleX(-1); } }
@media (prefers-reduced-motion:reduce){ .menu-fx{ display:none; } }

.logo{ font-size:clamp(70px,14vw,120px); filter:drop-shadow(0 10px 22px rgba(0,0,0,.45)); }
.logo-emblem{ width:clamp(112px,24vw,170px); height:auto; display:block; margin:0 auto; animation:logofloat 3.8s ease-in-out infinite; }
@keyframes logofloat{ 50%{ transform:translateY(-6px); } }
@media (prefers-reduced-motion:reduce){ .logo-emblem{ animation:none; } }
/* لون صلب بلا تباعد حروف: letter-spacing يقطع وصل الحروف العربية */
.title{ font-size:clamp(40px,9vw,74px); font-weight:800; line-height:1.15; color:#fff1c9; }
.tagline{ color:var(--dim); font-size:clamp(15px,3.4vw,20px); margin:6px 0 26px; }
.menu-buttons{ display:flex; flex-direction:column; gap:14px; align-items:stretch; }
.menu-stats{ display:flex; justify-content:center; gap:22px; margin-top:24px; color:var(--gold); font-weight:800; font-size:18px; }
/* أرقام معزولة: بدونها يقلب اتجاه الصفحة «17 / 108» إلى «108 / 17» */
.menu-stats span{ display:inline-flex; align-items:center; gap:6px; direction:ltr; unicode-bidi:isolate; }
.menu-stats b{ font-weight:800; font-variant-numeric:tabular-nums; }
.ms-ic{ width:20px; height:20px; flex:none; }

/* ---------- top bar (level select / settings) ---------- */
.bar{ display:flex; align-items:center; justify-content:space-between; width:100%; max-width:820px; margin-bottom:18px; gap:12px; }
.bar h2{ font-size:26px; font-weight:900; }
.bar-right{ min-width:48px; text-align:left; color:var(--gold); font-weight:800; }

/* ---------- level select ---------- */
.levels-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:14px;
  width:100%; max-width:820px; overflow-y:auto; padding:6px; align-content:start; max-height:78vh;
  grid-auto-rows:max-content; overscroll-behavior:contain; }
.lvl{ aspect-ratio:1; border-radius:18px; border:1px solid var(--line); cursor:pointer;
  background:linear-gradient(180deg,var(--panel-2),var(--panel)); box-shadow:0 4px 0 rgba(0,0,0,.25);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; position:relative; transition:transform .07s; }
.lvl:active{ transform:translateY(3px); }
.lvl .num{ font-size:28px; font-weight:900; }
.lvl .lvl-stars{ font-size:13px; letter-spacing:1px; color:var(--gold); height:14px; }
.lvl.locked{ filter:grayscale(.7) brightness(.6); cursor:not-allowed; }
.lvl.locked::after{ content:""; position:absolute; top:50%; left:50%; width:26px; height:26px; margin:-13px 0 0 -13px;
  border-radius:0; box-shadow:none; opacity:.85;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4.5' y='10.5' width='15' height='11' rx='3' fill='%23c9d3ea'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5' fill='none' stroke='%23c9d3ea' stroke-width='2.4'/%3E%3Ccircle cx='12' cy='16' r='1.7' fill='%23243150'/%3E%3C/svg%3E") center/contain no-repeat; }
.lvl.locked .num,.lvl.locked .lvl-stars{ opacity:0; }
.lvl.current{ outline:3px solid var(--accent); }
.lvl.test{ border-color:color-mix(in srgb,var(--accent) 55%, var(--line)); background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%, var(--panel-2)),var(--panel)); }
.lvl.test .lvl-stars{ font-size:15px; }

/* ---------- profile / player card ---------- */
.menu-stats[data-nav]{ cursor:pointer; transition:filter .15s; }
@media (hover: hover) and (pointer: fine) { .menu-stats[data-nav]:hover{ filter:brightness(1.25); } }

.profile-body{ width:100%; max-width:600px; max-height:82vh; overflow-y:auto; padding:4px 4px 24px;
  display:flex; flex-direction:column; gap:16px; overscroll-behavior:contain; }
.profile-body > *{ flex-shrink:0; }

.profile-hero{ position:relative; overflow:hidden; border-radius:24px; padding:20px 22px; display:flex; align-items:center; gap:18px;
  background:linear-gradient(135deg,#2b3670,#1a2247 70%);
  border:1px solid rgba(255,209,102,.28);
  box-shadow:0 14px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
  animation:pop .35s cubic-bezier(.2,1.3,.4,1); }
.pf-glow{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(140px 140px at 16% 22%, rgba(255,183,3,.28), transparent 68%); }
.pf-sheen{ position:absolute; top:-60%; bottom:-60%; width:60px; left:-80px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform:skewX(-18deg); animation:sheen 5.5s ease-in-out infinite; }
@keyframes sheen{ 0%,100%{ left:-80px; } 55%,100%{ left:120%; } }

.pf-avatar{ position:relative; z-index:1; flex:none; width:82px; height:82px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:44px;
  background:radial-gradient(circle at 34% 28%, #3d4d8c, #1c2448);
  border:3px solid var(--gold);
  box-shadow:0 0 26px rgba(255,209,102,.42), inset 0 2px 8px rgba(0,0,0,.45);
  animation:bobble 3.2s ease-in-out infinite; }
@keyframes bobble{ 50%{ transform:translateY(-5px); } }
.pf-id{ position:relative; z-index:1; flex:1; min-width:0; }
.pf-rank{ font-size:clamp(20px,5.4vw,27px); font-weight:900; line-height:1.15;
  background:linear-gradient(180deg,#fff,#ffd166); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pf-rankbar{ height:11px; border-radius:7px; background:rgba(0,0,0,.38); margin:11px 0 7px; overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4); }
.pf-rankbar span{ display:block; height:100%; width:0; border-radius:7px;
  background:linear-gradient(90deg,var(--accent-2),var(--gold));
  box-shadow:0 0 12px rgba(255,209,102,.7); transition:width .7s cubic-bezier(.2,1,.3,1); }
.pf-next{ font-size:13px; color:var(--dim); }

.pf-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.pf-tile{ background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line);
  border-radius:16px; padding:13px 4px; text-align:center; box-shadow:0 4px 0 rgba(0,0,0,.22); }
.pf-tile .pf-ic{ font-size:23px; display:block; line-height:1; }
.pf-tile b{ display:block; font-size:24px; font-weight:900; margin-top:3px; }
.pf-tile small{ color:var(--dim); font-size:11px; }

.pf-section-title{ font-size:16px; font-weight:800; color:var(--gold); margin:2px 2px -4px;
  display:flex; align-items:center; gap:8px; }
.pf-badgecount{ color:var(--dim); font-size:13px; font-weight:700; }

.pf-mastery{ display:grid; grid-template-columns:repeat(10,1fr); gap:5px; }
.pf-cell{ aspect-ratio:1; border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; background:var(--off); color:var(--dim); border:1px solid var(--line); }
.pf-cell.locked{ opacity:.32; }
.pf-cell.open{ background:var(--panel-2); color:var(--text); }
.pf-cell.s1{ background:linear-gradient(180deg,#cd8944,#9c5f27); color:#fff; font-size:9px; letter-spacing:-1px; }
.pf-cell.s2{ background:linear-gradient(180deg,#cbd4df,#8a97ab); color:#1c2338; font-size:9px; letter-spacing:-1px; }
.pf-cell.s3{ background:linear-gradient(180deg,#ffd94a,#f0a713); color:#5a3b00; font-size:9px; letter-spacing:-1px;
  box-shadow:0 0 10px rgba(255,209,102,.55); }

.pf-badges{ display:grid; grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); gap:10px; }
.pf-badge{ text-align:center; border-radius:16px; padding:14px 8px; border:1px solid var(--line);
  background:var(--panel); filter:grayscale(.85) brightness(.68); opacity:.72; }
.pf-badge.got{ filter:none; opacity:1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 12%,var(--panel-2)),var(--panel));
  border-color:rgba(255,209,102,.42); box-shadow:0 6px 20px rgba(255,183,3,.16), inset 0 1px 0 rgba(255,255,255,.06); }
.pf-badge .pf-b-ic{ font-size:34px; display:block; line-height:1; }
.pf-badge.got .pf-b-ic{ filter:drop-shadow(0 3px 9px rgba(255,183,3,.5)); animation:badgePop .45s backwards; }
.pf-badge b{ display:block; font-size:13px; margin-top:7px; }
.pf-badge small{ display:block; color:var(--dim); font-size:10.5px; margin-top:3px; line-height:1.35; }
@keyframes badgePop{ from{ transform:scale(0) rotate(-30deg); } }

/* ---------- settings ---------- */
.settings-body{ width:100%; max-width:460px; display:flex; flex-direction:column; gap:16px; }
.toggle{ display:flex; align-items:center; justify-content:space-between; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:16px 18px; font-size:18px; font-weight:700; cursor:pointer; }
.toggle input{ width:52px; height:30px; -webkit-appearance:none; appearance:none; background:var(--off); border-radius:20px; position:relative; cursor:pointer; outline:none; }
.toggle input:checked{ background:var(--good); }
.toggle input::before{ content:""; position:absolute; width:24px; height:24px; border-radius:50%; background:#fff; top:3px; right:3px; transition:.2s; }
.toggle input:checked::before{ right:25px; }
.hint-text{ color:var(--dim); font-size:14px; text-align:center; }

/* ---------- game screen ---------- */
#game{ padding:10px; gap:10px; justify-content:flex-start; }
#topbar{ display:flex; align-items:center; gap:8px; width:100%; max-width:980px; }
.ctrl-cluster{ display:flex; gap:6px; flex:none; }
.stat-card{ flex:1; display:flex; align-items:stretch; overflow:hidden;
  background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 4px 0 rgba(0,0,0,.22); }
.stat{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 6px; }
.stat + .stat{ border-inline-start:1px solid var(--line); }
.stat-ic{ flex:none; width:24px; height:24px; }
.stat-ic svg{ width:100%; height:100%; display:block; }
.stat-text{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; min-width:0; }
.stat-label{ font-size:11px; color:var(--dim); white-space:nowrap; }
.stat-value{ font-size:21px; font-weight:900; white-space:nowrap; }
.stat-wallet{ display:block; color:var(--dim); font-size:10px; line-height:1.1; margin-top:3px; white-space:nowrap; }
.stat-wallet b{ color:var(--gold); font-weight:900; }
.stat-value.hearts{ display:flex; gap:2px; align-items:center; }
.hrt{ width:18px; height:18px; }
.hrt path{ fill:var(--bad); }
.hrt.empty path{ fill:#39415f; }
.hearts .hx{ font-size:18px; font-weight:900; }
#livesBox.low .hrt path{ animation:heartpulse .7s ease-in-out infinite; }
@keyframes heartpulse{ 50%{ opacity:.35; } }
.btn-ic{ width:24px; height:24px; fill:var(--text); }
.btn-ic.stroke{ fill:none; stroke:var(--text); }
.icon-btn{ display:flex; align-items:center; justify-content:center; }
#timerBox.warning .stat-value{ color:var(--bad); }
#stage{ flex:1; width:100%; display:flex; align-items:center; justify-content:center; min-height:0; }
#board{ border-radius:20px; box-shadow:0 18px 50px rgba(0,0,0,.5); touch-action:none; max-width:100%; max-height:100%; }
#controls{ display:flex; gap:10px; width:100%; max-width:520px; justify-content:center; }
#controls .btn{ flex:1; max-width:240px; }
#controls.tools{ max-width:600px; gap:8px; }
.tool{ flex:1; max-width:150px; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:9px 4px; border-radius:14px; font-family:inherit; color:var(--text); cursor:pointer;
  background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line);
  box-shadow:0 4px 0 rgba(0,0,0,.22); transition:transform .07s ease, filter .15s ease; }
.tool:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.22); }
.tool .tool-ic{ font-size:24px; line-height:1; }
.tool .tool-cost{ font-size:12px; font-weight:800; color:var(--gold); white-space:nowrap; }
.tool.cant{ filter:grayscale(.7) brightness(.62); }
.tool.armed{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent), 0 4px 0 rgba(0,0,0,.22); }

/* ---------- overlays ---------- */
.overlay{ position:fixed; inset:0; background:rgba(6,10,25,.8); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:30; }
.overlay.hidden{ display:none; }
.overlay-card{ background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line);
  border-radius:26px; padding:30px 26px; text-align:center; max-width:400px; width:88%;
  box-shadow:0 24px 70px rgba(0,0,0,.55); animation:pop .3s cubic-bezier(.2,1.3,.4,1); }
.overlay-card h1{ font-size:30px; margin-bottom:10px; }
.overlay-card p{ color:var(--dim); font-size:16px; line-height:1.6; margin-bottom:22px; }
.overlay-card .menu-buttons{ margin-top:8px; }
.stars{ display:flex; justify-content:center; gap:10px; margin-bottom:12px; font-size:46px; }
.stars span{ color:var(--off); transition:transform .3s, color .3s; }
.stars span.on{ color:var(--gold); text-shadow:0 0 18px rgba(255,209,102,.6); animation:star-pop .4s backwards; }
.stars span.on:nth-child(2){ animation-delay:.12s; }
.stars span.on:nth-child(3){ animation-delay:.24s; }
.coin-transfer{ display:flex; align-items:center; justify-content:center; gap:14px; margin:4px 0 20px; padding:12px 10px; border:1px solid rgba(255,209,102,.25); border-radius:16px; background:rgba(10,16,34,.32); }
.coin-step{ display:flex; flex-direction:column; gap:3px; min-width:92px; }
.coin-step span{ color:var(--dim); font-size:12px; }
.coin-step strong{ color:var(--gold); font-size:22px; font-weight:900; }
.coin-arrow{ color:var(--accent); font-size:24px; font-weight:900; }
.coin-transfer.hidden{ display:none; }

@keyframes pop{ from{ transform:scale(.85); opacity:0; } }
@keyframes star-pop{ from{ transform:scale(0) rotate(-40deg); } }

@media (min-width:820px){
  #topbar,#controls{ max-width:1100px; }
  .stat-value{ font-size:26px; }
}

/* ---------- phones: compact chrome so the board gets the room ---------- */
@media (max-width:560px){
  #game{ padding:6px; gap:6px; }
  #topbar{ gap:5px; }
  .stat{ padding:5px 3px; border-radius:10px; gap:5px; }
  .stat-label{ font-size:9px; }
  .stat-value{ font-size:16px; }
  .stat-ic{ width:19px; height:19px; }
  .hrt{ width:15px; height:15px; }
  .icon-btn{ width:40px; height:40px; border-radius:11px; }
  .btn-ic{ width:20px; height:20px; }
  #controls{ gap:8px; }
  #controls .btn{ font-size:15px; padding:11px 8px; border-radius:12px; }
  .tool{ padding:6px 2px; border-radius:11px; }
  .tool .tool-ic{ font-size:20px; }
  .tool .tool-cost{ font-size:10px; }
  .levels-grid{ grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:10px; }
  .lvl .num{ font-size:22px; }
  .overlay-card{ padding:24px 18px; border-radius:20px; }
  .overlay-card h1{ font-size:24px; }
  .stars{ font-size:38px; }
  .profile-hero{ padding:16px; gap:14px; }
  .pf-avatar{ width:66px; height:66px; font-size:36px; }
  .pf-tile b{ font-size:20px; }
  .pf-badges{ grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; }
  .pf-badge .pf-b-ic{ font-size:28px; }
}
/* landscape phones: keep the board visible */
@media (max-height:520px){
  #game{ padding:4px; gap:4px; }
  .stat-label{ display:none; }
  .stat-value{ font-size:14px; }
  #controls .btn{ padding:8px; font-size:13px; }
}

/* ---------- Cargo depot visual theme pass ---------- */
:root{
  --metal-0:#101827; --metal-1:#1c2940; --metal-2:#2d3b55;
  --steel-edge:rgba(201,214,234,.22); --gold-glow:rgba(255,183,3,.24);
}
body{ background:
  radial-gradient(900px 500px at 50% -18%,rgba(68,92,146,.42),transparent 70%),
  linear-gradient(180deg,#0b1328 0%,#111c34 54%,#081020 100%); }
.screen{ background:radial-gradient(900px 620px at 50% 35%,rgba(43,61,96,.16),transparent 70%); }
.btn,.icon-btn,.tool,.lvl{ position:relative; overflow:hidden; border-color:var(--steel-edge); }
.btn::before,.tool::before,.lvl::before,.icon-btn::before{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,rgba(255,255,255,.09),transparent 28%,transparent 72%,rgba(255,183,3,.06)); opacity:.7; }
.btn::after,.tool::after{ content:""; position:absolute; left:10%; right:10%; top:0; height:1px; background:rgba(255,255,255,.18); pointer-events:none; }
.btn{ border-radius:13px; box-shadow:0 5px 0 #0a1020, inset 0 1px 0 rgba(255,255,255,.08), inset 0 -8px 18px rgba(0,0,0,.12); }
@media (hover: hover) and (pointer: fine) { .btn:hover,.tool:hover,.lvl:hover{ filter:brightness(1.14) saturate(1.08); border-color:rgba(255,209,102,.42); } }
.btn-primary{ background:linear-gradient(180deg,#ffd966 0%,#f4a51c 54%,#bc6710 100%); border-color:#ffe28a; box-shadow:0 5px 0 #713b0a, inset 0 1px 0 rgba(255,255,255,.55), inset 0 -10px 20px rgba(111,44,0,.17); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover{ filter:brightness(1.08) saturate(1.12); } }
.icon-btn{ background:linear-gradient(180deg,#33435f,#1a263d); box-shadow:0 4px 0 #0a1020, inset 0 1px 0 rgba(255,255,255,.12); }
.menu-card{ padding:24px 22px 20px; border:1px solid rgba(255,209,102,.16); border-radius:28px; background:linear-gradient(145deg,rgba(30,44,72,.78),rgba(10,17,34,.54)); box-shadow:0 24px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06); }
.title{ text-shadow:0 5px 0 #19233e,0 10px 26px rgba(0,0,0,.55); }
.menu-stats{ padding:11px 18px; border:1px solid rgba(255,209,102,.2); border-radius:14px; background:rgba(5,11,25,.34); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.bar{ padding:12px 16px; border:1px solid var(--steel-edge); border-radius:16px; background:linear-gradient(180deg,rgba(45,59,85,.92),rgba(18,28,49,.94)); box-shadow:0 7px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.09); }
.bar h2{ text-shadow:0 2px 0 #0a1020; }
.levels-grid{ padding:12px; border:1px solid rgba(201,214,234,.14); border-radius:20px; background:rgba(8,15,30,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.lvl{ border-radius:14px; background:linear-gradient(155deg,#344563,#1a2942 62%,#111b30); box-shadow:0 5px 0 #09101f, inset 0 1px 0 rgba(255,255,255,.12); }
.lvl .num{ color:#f5f7ff; text-shadow:0 2px 0 #10182b; }
.lvl.current{ outline:2px solid var(--gold); box-shadow:0 0 0 4px rgba(255,183,3,.13),0 5px 0 #09101f; }
.lvl.test{ background:linear-gradient(155deg,#554b37,#2c3040 62%,#151d30); }
.stat-card{ background:linear-gradient(180deg,#2e3e5d,#17243c); border-color:rgba(201,214,234,.24); box-shadow:0 5px 0 #09101f, inset 0 1px 0 rgba(255,255,255,.1), inset 0 -14px 22px rgba(0,0,0,.1); }
.stat{ position:relative; }
.stat + .stat{ border-inline-start-color:rgba(201,214,234,.18); }
.stat-label{ color:#b4c0d9; text-transform:none; }
.stat-value{ text-shadow:0 2px 0 #0b1222; }
.tool{ background:linear-gradient(180deg,#344664,#1a2943 66%,#111b30); border-color:rgba(201,214,234,.2); box-shadow:0 5px 0 #09101f, inset 0 1px 0 rgba(255,255,255,.1); }
.tool .tool-ic{ filter:drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.overlay{ background:rgba(3,8,20,.84); }
.overlay-card{ background:linear-gradient(155deg,#30415f,#17243e 66%,#10192d); border-color:rgba(255,209,102,.3); box-shadow:0 26px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.1); }
.overlay-card h1{ text-shadow:0 3px 0 #0b1222; }
.toggle{ background:linear-gradient(155deg,#30415f,#17243e); border-color:var(--steel-edge); box-shadow:0 4px 0 #09101f, inset 0 1px 0 rgba(255,255,255,.08); }
button:focus-visible,.lvl:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
@media (max-width:560px){
  .menu-card{ padding:18px 14px 16px; border-radius:22px; }
  .bar{ padding:9px 10px; }
  .stat-card{ border-radius:12px; }
  .stat{ padding:6px 3px; gap:4px; }
  .stat-ic{ width:19px; height:19px; }
  .stat-label{ font-size:9px; }
  .stat-value{ font-size:18px; }
  .stat-wallet{ font-size:8px; }
  .coin-transfer{ gap:7px; padding:10px 6px; }
  .coin-step{ min-width:76px; }
  .coin-step strong{ font-size:19px; }
}

/* ---------- Playful game UI polish ---------- */
.menu-buttons .btn{ min-height:56px; }
.menu-buttons .btn:not(.btn-primary){ background:linear-gradient(180deg,#354b70 0%,#223453 52%,#14223a 100%); }
.menu-buttons .btn:not(.btn-primary)::before{ background:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 2px,transparent 2px 12px); opacity:.5; }
.menu-buttons .btn-primary.big{ animation:button-idle-glow 2.8s ease-in-out infinite; }
@keyframes button-idle-glow{ 50%{ box-shadow:0 5px 0 #713b0a,0 0 26px rgba(255,183,3,.22),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -10px 20px rgba(111,44,0,.17); } }
.btn:active,.tool:active,.icon-btn:active{ filter:brightness(.9); }
.tool{ min-height:70px; justify-content:center; gap:5px; border-radius:16px; }
.tool .tool-ic{ display:grid; place-items:center; width:36px; height:36px; border-radius:11px; font-size:23px; background:linear-gradient(145deg,#445a7e,#1d2b46); border:1px solid rgba(255,255,255,.13); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 3px 0 #0a1120; }
.tool .tool-cost{ padding:2px 8px; border-radius:999px; background:rgba(5,11,24,.42); border:1px solid rgba(255,209,102,.18); }
.tool.cant .tool-ic{ opacity:.48; }
.tool.armed{ background:linear-gradient(180deg,#6a5425,#3e321c 70%,#211b13); border-color:var(--gold); }
.tool.armed .tool-ic{ background:linear-gradient(145deg,#ffd866,#b86c0b); color:#241500; }
#controls.tools{ padding:8px; border-radius:20px; background:linear-gradient(180deg,rgba(38,54,82,.88),rgba(12,21,37,.92)); border:1px solid rgba(201,214,234,.2); box-shadow:0 8px 0 rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.08); }
.stat-card .stat:first-child{ background:linear-gradient(90deg,rgba(255,183,3,.08),transparent); }
.stat-card .stat:nth-child(3){ background:linear-gradient(90deg,transparent,rgba(255,183,3,.06),transparent); }
.lvl{ isolation:isolate; }
.lvl::after{ content:""; position:absolute; top:8px; left:9px; width:5px; height:5px; border-radius:50%; background:#ffd166; box-shadow:calc(100% - 23px) 0 #ffd166,0 calc(100% - 17px) #52617d,calc(100% - 23px) calc(100% - 17px) #52617d; opacity:.72; pointer-events:none; }
.lvl .num,.lvl .lvl-stars{ position:relative; z-index:1; }
.lvl.current::after{ box-shadow:calc(100% - 23px) 0 #ffd166,0 calc(100% - 17px) #ffd166,calc(100% - 23px) calc(100% - 17px) #ffd166; }
.lvl.test::before{ background:linear-gradient(135deg,rgba(255,209,102,.18),transparent 35%,rgba(255,209,102,.06)); }
.overlay-card .btn{ border-radius:12px; }
.coin-transfer{ box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 5px 0 rgba(0,0,0,.15); }
@media (prefers-reduced-motion:reduce){ .menu-buttons .btn-primary.big{ animation:none; } }

/* ---------- Custom icon and press feedback layer ---------- */
.btn,.icon-btn,.tool{ display:inline-flex; align-items:center; justify-content:center; gap:9px; }
.ui-ic{ width:23px; height:23px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 2px 1px rgba(0,0,0,.35)); }
.btn-primary .ui-ic path:first-child{ fill:currentColor; stroke:none; }
.tool-svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.press-ripple{ position:absolute; width:14px; height:14px; border-radius:50%; pointer-events:none; background:rgba(255,255,255,.55); transform:translate(-50%,-50%) scale(0); animation:press-ripple .48s ease-out forwards; mix-blend-mode:screen; }
@keyframes press-ripple{ to{ transform:translate(-50%,-50%) scale(15); opacity:0; } }
button.press-hit{ animation:press-hit .22s ease-out; }
@keyframes press-hit{ 45%{ filter:brightness(1.22) saturate(1.2); } }
.tool.press-hit .tool-ic,.btn.press-hit .ui-ic{ animation:icon-pop .25s ease-out; }
@keyframes icon-pop{ 45%{ transform:scale(1.16) rotate(-4deg); } }
@media (prefers-reduced-motion:reduce){ .press-ripple{ display:none; } button.press-hit,.tool.press-hit .tool-ic,.btn.press-hit .ui-ic{ animation:none; } }


/* ---------- Gameplay composition cleanup ---------- */
#game{ gap:7px; padding:7px; }
#topbar{ gap:6px; max-width:980px; }
#topbar .stat-card{ min-width:0; }
#topbar .stat{ padding:6px 5px; gap:6px; }
#topbar .stat-label{ font-size:10px; }
#topbar .stat-value{ font-size:19px; }
#topbar .stat-wallet{ font-size:9px; }
#stage{ align-items:flex-start; padding-top:0; }
#board{ box-shadow:0 12px 34px rgba(0,0,0,.48); }
#controls.tools{ flex:0 0 auto; width:min(100%,520px); gap:6px; padding:6px; border-radius:16px; }
#controls.tools .tool{ min-height:58px; max-width:none; padding:5px 3px; gap:3px; border-radius:12px; }
#controls.tools .tool .tool-ic{ width:30px; height:30px; border-radius:9px; }
#controls.tools .tool .tool-cost{ font-size:10px; padding:1px 6px; }

@media (max-width:560px){
  #game{ gap:5px; padding:5px; }
  #topbar{ gap:4px; }
  #topbar .ctrl-cluster{ gap:4px; }
  #topbar .stat{ padding:5px 2px; gap:3px; }
  #topbar .stat-label{ font-size:8px; }
  #topbar .stat-value{ font-size:15px; }
  #topbar .stat-wallet{ font-size:7px; margin-top:1px; }
  #topbar .stat-ic{ width:17px; height:17px; }
  #topbar .hrt{ width:13px; height:13px; }
  #controls.tools{ width:min(100%,470px); gap:4px; padding:5px; }
  #controls.tools .tool{ min-height:52px; }
  #controls.tools .tool .tool-ic{ width:27px; height:27px; }
  #controls.tools .tool .tool-cost{ font-size:9px; }
}

@media (max-height:680px){
  #game{ gap:4px; padding:4px; }
  #topbar .stat{ padding-block:3px; }
  #topbar .stat-value{ font-size:15px; }
  #controls.tools .tool{ min-height:48px; }
}

@media (max-width:380px){
  #topbar .ctrl-cluster .icon-btn{ width:34px; height:34px; }
  #topbar .stat-ic{ display:none; }
  #topbar .stat{ padding-inline:1px; }
  #topbar .stat-value{ font-size:14px; }
  #controls.tools .tool .tool-cost{ font-size:8px; }
}


/* ---------- HUD hierarchy pass ---------- */
#topbar{ align-items:stretch; }
#topbar .ctrl-cluster{ order:3; align-self:center; }
#topbar .stat-card{ order:2; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); direction:rtl; min-height:58px; }
#topbar .stat{ min-width:0; position:relative; flex:none; }
#topbar .stat:nth-child(1){ order:1; background:linear-gradient(180deg,rgba(255,183,3,.14),rgba(255,183,3,.03)); }
#topbar .stat:nth-child(4){ order:2; background:linear-gradient(180deg,rgba(46,194,126,.11),rgba(46,194,126,.02)); }
#topbar .stat:nth-child(2){ order:3; }
#topbar .stat:nth-child(3){ order:4; background:linear-gradient(180deg,rgba(255,209,102,.08),transparent); }
#topbar .stat-text{ align-items:center; text-align:center; }
#topbar .stat-label{ font-weight:800; }
#topbar .stat-value{ line-height:1; }
#topbar .stat-card .stat + .stat{ border-inline-start:1px solid rgba(201,214,234,.16); }
#topbar .stat:nth-child(1)::before,#topbar .stat:nth-child(4)::before{ content:""; position:absolute; inset:6px 0; border-inline:1px solid rgba(255,209,102,.12); pointer-events:none; }
#topbar .ctrl-cluster .icon-btn{ width:44px; height:44px; }

@media (max-width:560px){
  #topbar .stat-card{ min-height:50px; }
  #topbar .stat-text{ width:100%; }
  #topbar .stat:nth-child(1) .stat-ic,#topbar .stat:nth-child(4) .stat-ic{ display:none; }
  #topbar .stat:nth-child(1) .stat-label,#topbar .stat:nth-child(4) .stat-label{ font-size:9px; }
  #topbar .stat:nth-child(1) .stat-value,#topbar .stat:nth-child(4) .stat-value{ font-size:17px; }
  #topbar .stat:nth-child(2) .stat-label{ display:none; }
  #topbar .stat:nth-child(3) .stat-label{ font-size:8px; }
  #topbar .stat:nth-child(3) .stat-value{ font-size:14px; }
  #topbar .stat:nth-child(3) .stat-wallet{ font-size:7px; }
}

@media (max-width:380px){
  #topbar .stat-card{ min-height:46px; }
  #topbar .stat:nth-child(1) .stat-value,#topbar .stat:nth-child(4) .stat-value{ font-size:15px; }
  #topbar .stat:nth-child(2) .hrt{ width:12px; height:12px; }
  #topbar .stat:nth-child(3) .stat-value{ font-size:13px; }
}


/* ---------- HUD follows the play window ---------- */
#topbar{ width:min(100%,var(--play-width,980px)); }
#controls.tools{ width:min(100%,var(--play-width,520px)); }
#topbar .stat-card{ flex:1 1 auto; min-width:0; }
#topbar .ctrl-cluster{ flex:0 0 auto; }
@media (max-width:560px){
  #topbar{ width:min(100%,var(--play-width,100%)); }
  #topbar .ctrl-cluster .icon-btn{ width:38px; height:38px; }
}

/* ---------- link back to the games hub (added with the hub restructure) ---------- */
.hub-link{ position:absolute; top:max(14px, env(safe-area-inset-top)); right:14px; z-index:3;
  color:var(--dim); text-decoration:none; font-weight:800; font-size:15px;
  background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:12px; padding:9px 14px; }
@media (hover: hover) and (pointer: fine) { .hub-link:hover{ color:var(--text); } }

/* ---------- الجوال: إحساس التطبيق (مشترك مع البوابة) ----------
   لا انتظار لنقرة مزدوجة، ولا تحديد لنص الأزرار بالضغط المطوّل، ولا سحب-للتحديث
   يقاطع اللعب. */
html { -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
button, a, [role="button"] { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

.hub-link{ display:inline-flex; align-items:center; gap:7px; }
.hub-mark{ width:20px; height:20px; flex:none; }

/* اسم الفصل تحت عنوان المرحلة في نافذة البداية */
.start-chapter{ color:var(--gold); font-weight:800; font-size:15px; margin:-4px 0 10px; }

/* أيقونات مرسومة في الملف وشريط المراحل (بدل الإيموجي) */
.pf-tile .pf-ic{ display:flex; justify-content:center; }
.pf-svg{ width:24px; height:24px; }
.bar-right{ display:inline-flex; align-items:center; gap:5px; direction:ltr; }
.bar-star{ width:18px; height:18px; }