/* ============ آيرون جاك — هوية لوحة قيادة داخل الخوذة ============ */
:root{
  --ink:#0E1418;
  --ink-2:#0A1014;
  --cyan:#7FE3FF;
  --cyan-soft:rgba(127,227,255,.30);
  --gold:#D4A23A;
  --gold-soft:#FFC98B;
  --crimson:#B3261E;
  --paper:#E9F4F8;
  --muted:#9FB8C4;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:#070C0F;
  color:var(--paper);
  font-family:'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}

body{
  height:100dvh;
  overflow:hidden;
}

button{ font-family:inherit; }

/* ---------- إطار اللعبة ---------- */
#gameRoot[data-meeem-game]{
  position:relative;
  height:100dvh;
  width:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#0B1014;
  color:var(--paper);
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}

/* ---------- HUD ---------- */
#hud[data-meeem-game-hud]{
  flex:0 0 auto;
  padding:8px 10px 6px;
  z-index:5;
  background:linear-gradient(180deg, rgba(7,12,15,.72), rgba(7,12,15,0));
}

/* ---------- شريط قوة الشرير ---------- */
#bossBar{
  position:absolute;
  top:8px; left:50%;
  transform:translateX(-50%);
  width:min(330px, calc(100% - 24px));
  padding:6px 10px 7px;
  border-radius:12px;
  background:rgba(34,4,4,.74);
  border:1px solid rgba(255,72,40,.55);
  box-shadow:0 6px 22px rgba(255,60,30,.22);
  pointer-events:none;
  z-index:6;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  animation:bossIn .35s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes bossIn{ from{ opacity:0; transform:translate(-50%,-10px); } to{ opacity:1; transform:translate(-50%,0); } }
#bossBar.hidden{ display:none !important; }
.boss-name{ display:block; font-size:11px; font-weight:900; color:#FFB9A2; margin-bottom:4px; }
.boss-track{ height:7px; border-radius:99px; background:rgba(255,255,255,.14); overflow:hidden; }
#bossFill{
  height:100%; width:100%;
  border-radius:99px;
  background:linear-gradient(90deg,#FF2A12,#FF8A50);
  box-shadow:0 0 10px rgba(255,80,40,.8);
  transition:width .12s linear;
}

.hud-row{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
}

.hud-chip{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1px;
  min-width:0;
  flex:1 1 0;
  padding:5px 8px;
  border-radius:11px;
  background:rgba(14,20,24,.42);
  border:1px solid var(--cyan-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.chip-main{ flex:1.25 1 0; }
.chip-best{ flex:1 1 0; }

.chip-label{
  font-size:10.5px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:0;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chip-value{
  display:flex;
  align-items:baseline;
  gap:3px;
  font-weight:900;
  color:#fff;
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.chip-value b{ font-size:19px; letter-spacing:-.5px; }
.chip-value i{ font-size:10px; font-style:normal; font-weight:700; color:var(--muted); }

.hud-mission{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  padding:3px 10px;
  border-radius:9px;
  background:rgba(212,162,58,.10);
  border:1px solid rgba(212,162,58,.30);
  font-size:11px;
  font-weight:800;
  color:#F0DDBB;
  line-height:1.35;
  min-height:22px;
  overflow:hidden;
}
.hud-mission .hm-flag{ color:var(--gold-soft); font-size:11px; flex:0 0 auto; }
#missionText{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.icon-btn{
  flex:0 0 auto;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:12px;
  border:1px solid var(--cyan-soft);
  background:rgba(14,20,24,.5);
  color:var(--cyan);
  cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.icon-btn:active{ transform:scale(.93); background:rgba(127,227,255,.16); }

/* ---------- المسرح ---------- */
#stage[data-meeem-game-stage]{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  background:#0B1014;
}

#gl{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
}

#speedFx{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
  background:
    radial-gradient(ellipse 65% 65% at 50% 50%, rgba(0,0,0,0) 52%, rgba(255,214,150,.42) 100%);
  mix-blend-mode:screen;
}

#flashFx{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,240,210,.9), rgba(255,120,90,.55) 70%);
  transition:opacity .45s ease;
}

#bottomHud{
  position:absolute;
  left:10px; right:10px; bottom:8px;
  display:flex;
  align-items:center;
  gap:8px;
  pointer-events:none;
  z-index:4;
}

.hull{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  padding:7px 9px;
  border-radius:11px;
  background:rgba(14,20,24,.40);
  border:1px solid rgba(127,227,255,.30);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.hull-pips{ display:flex; gap:4px; }
.hull-pips i{
  display:block;
  width:8px; height:15px;
  border-radius:3px;
  background:linear-gradient(180deg,#9FEEFF,#3FB9DE);
  box-shadow:0 0 8px rgba(127,227,255,.7);
  transition:background .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.hull-pips i.off{
  background:rgba(255,255,255,.13);
  box-shadow:none;
}

.energy{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:11px;
  background:rgba(14,20,24,.40);
  border:1px solid var(--cyan-soft);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.energy-label{
  font-size:10.5px; font-weight:700; color:var(--muted); white-space:nowrap;
}
.energy-bar{
  flex:1 1 auto;
  height:8px;
  border-radius:99px;
  background:rgba(255,255,255,.09);
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
#energyFill{
  height:100%;
  width:100%;
  border-radius:99px;
  background:linear-gradient(90deg,#4FD2F5,#7FE3FF 55%,#CFF7FF);
  box-shadow:0 0 12px rgba(127,227,255,.65);
  transition:width .08s linear, background .2s ease;
}
#energyFill.low{
  background:linear-gradient(90deg,#E06A2A,#FFB05C);
  box-shadow:0 0 12px rgba(255,150,80,.6);
}

.speed-chip{
  flex:0 0 auto;
  display:flex; align-items:baseline; gap:3px;
  padding:6px 10px;
  border-radius:11px;
  background:rgba(14,20,24,.40);
  border:1px solid rgba(212,162,58,.42);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-variant-numeric:tabular-nums;
}
.speed-chip b{ font-size:16px; font-weight:900; color:var(--gold-soft); }
.speed-chip i{ font-size:9.5px; font-style:normal; font-weight:700; color:var(--muted); }

/* ---------- تلميح / توست ---------- */
#hint{
  position:absolute;
  left:50%; bottom:58px;
  transform:translateX(-50%);
  padding:8px 14px;
  border-radius:99px;
  background:rgba(14,20,24,.55);
  border:1px solid var(--cyan-soft);
  color:#CFEFFA;
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#hint.show{ opacity:1; }

#toast{
  position:absolute;
  left:50%; bottom:96px; top:auto;
  transform:translate(-50%,10px);
  padding:8px 16px;
  border-radius:99px;
  background:rgba(14,20,24,.62);
  border:1px solid rgba(212,162,58,.55);
  color:#FFE4B8;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease, transform .25s ease;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- الطبقات ---------- */
/* الطبقات مثبّتة على منفذ العرض بالكامل حتى لا تخرج عن الشاشة
   على الأجهزة اللوحية أو سطح المكتب */
.overlay,
.overlay[data-meeem-game-menu]{
  position:fixed !important;
  inset:0 !important;
  width:100%;
  height:100%;
  min-height:0;
  z-index:9000;
  /* كتلة عادية بدل flex: التمرير يصبح مضموناً داخل المنفذ
     ولا تُقصّ أعلى البطاقة على الشاشات اللوحية أو المكتبية */
  display:block !important;
  padding:12px;
  padding-block:12px;
  overflow-y:auto !important;
  overflow-x:hidden;
  overscroll-behavior:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(10,16,20,.55), rgba(5,9,12,.92));
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.overlay.hidden{ display:none !important; }

/* إبطال قاعدة الإطار العامة التي توسّط البطاقة بهامش تلقائي:
   التوسيط الرأسي يقصّ أعلى القائمة ويجعل زر البدء غير قابل للوصول */
.overlay[data-meeem-game-menu] > .panel{
  margin-block:0 !important;
  margin-inline:auto;
  flex:0 0 auto;
  max-width:100%;
}

/* شاشة الإيقاف المؤقت قصيرة، فيُسمح بتوسيطها رأسياً على الشاشات الكافية فقط */
@media (min-height: 520px){
  #ovPause:not(.hidden){
    display:flex !important;
    flex-direction:column;
    justify-content:center;
  }
}

.panel{
  width:min(430px, 100%);
  max-width:100%;
  flex:0 0 auto;
  align-self:center;
  /* الهامشان الرأسيان صفر عمداً: أي توسيط رأسي يقصّ أعلى البطاقة
     عندما تكون أطول من الشاشة ويجعل زر البدء غير قابل للوصول */
  margin-block:0;
  margin-inline:auto;
  padding:18px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(14,20,24,.90), rgba(8,13,17,.95));
  border:1px solid rgba(127,227,255,.30);
  box-shadow:
    0 22px 60px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 40px rgba(127,227,255,.05);
  color:var(--paper);
  animation:panelIn .28s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes panelIn{
  from{ opacity:0; transform:translateY(14px) scale(.98); }
  to{ opacity:1; transform:none; }
}

.brand{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.brand-mark{
  width:48px; height:48px;
  flex:0 0 auto;
  display:grid; place-items:center;
  border-radius:14px;
  background:radial-gradient(circle at 50% 40%, rgba(127,227,255,.20), rgba(14,20,24,.9));
  border:1px solid rgba(127,227,255,.35);
  box-shadow:0 0 20px rgba(127,227,255,.18) inset;
}

.panel h1{
  margin:0;
  font-size:27px;
  font-weight:900;
  letter-spacing:-.5px;
  line-height:1.1;
  color:#fff;
  text-shadow:0 2px 18px rgba(127,227,255,.35);
}
.tagline{
  margin:2px 0 0;
  font-size:11.5px;
  font-weight:700;
  color:var(--gold-soft);
  letter-spacing:0;
}
.panel h2{
  margin:0 0 8px;
  font-size:21px;
  font-weight:900;
  color:#fff;
}
.sub{
  margin:0 0 12px;
  font-size:13.5px;
  line-height:1.7;
  color:#BBD3DD;
}
.sub.small{ font-size:12.5px; color:#9FB8C4; }

.tips{
  list-style:none;
  margin:0 0 14px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.tips li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:12.5px;
  line-height:1.55;
  color:#C8DFE8;
}
.tips .dot{
  flex:0 0 auto;
  width:6px; height:6px;
  margin-top:7px;
  border-radius:99px;
  background:var(--cyan);
  box-shadow:0 0 8px rgba(127,227,255,.85);
}

.best-line{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 12px;
  padding:8px 12px;
  border-radius:11px;
  background:rgba(212,162,58,.10);
  border:1px solid rgba(212,162,58,.30);
  font-size:12.5px;
  font-weight:700;
  color:#F0DDBB;
}
.best-line b{ font-size:15px; color:var(--gold-soft); font-variant-numeric:tabular-nums; }

/* ---------- أزرار ---------- */
.btn{
  width:100%;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:14px;
  font-size:16.5px;
  font-weight:800;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .12s ease, filter .16s ease, background .16s ease;
  user-select:none;
  -webkit-user-select:none;
}
.btn:active{ transform:scale(.975); }
.btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.btn + .btn{ margin-top:9px; }

.btn-primary{
  background:linear-gradient(180deg,#E23B2C,#B3261E);
  color:#fff;
  border-color:rgba(255,210,150,.45);
  box-shadow:0 10px 26px rgba(179,38,30,.45), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover:not(:disabled){ filter:brightness(1.06); }
.btn-primary:disabled{
  background:linear-gradient(180deg,#2A343A,#1B2328);
  color:#7F969F;
  box-shadow:none;
  border-color:rgba(127,227,255,.16);
  cursor:default;
}

.btn-ghost{
  background:rgba(127,227,255,.07);
  color:#CFEFFA;
  border-color:var(--cyan-soft);
}
.btn-ghost:hover{ background:rgba(127,227,255,.14); }

.btn.small{ min-height:44px; font-size:14px; }

.boot-note{
  margin:9px 0 0;
  font-size:11.5px;
  color:#8FA9B4;
  min-height:1px;
  text-align:center;
}

/* ---------- نتائج ---------- */
.result-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:12px;
}
.rcell{
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:9px 11px;
  border-radius:12px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(127,227,255,.18);
}
.rcell span{ font-size:10.5px; font-weight:700; color:var(--muted); }
.rcell b{
  font-size:22px;
  font-weight:900;
  color:#fff;
  font-variant-numeric:tabular-nums;
  line-height:1.15;
}
.rcell i{ font-size:10px; font-style:normal; font-weight:700; color:var(--muted); }
.rcell-accent{
  border-color:rgba(212,162,58,.45);
  background:rgba(212,162,58,.10);
}
.rcell-accent b{ color:var(--gold-soft); }

.save-note{
  margin:0 0 10px;
  font-size:11.5px;
  line-height:1.5;
  color:#9FD6A8;
  min-height:1px;
}

.board-box{
  margin-bottom:12px;
  padding:11px;
  border-radius:13px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(127,227,255,.18);
}
.board-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px;
}
.board-head span{ font-size:12.5px; font-weight:800; color:#DCF1F8; }
.board-head small{ font-size:9.5px; color:#8FA9B4; }
.board-note{
  margin:0;
  font-size:11.5px;
  line-height:1.6;
  color:#9FB8C4;
}
.board-list{
  list-style:none;
  margin:0 0 6px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.board-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:5px 8px;
  border-radius:8px;
  background:rgba(127,227,255,.06);
  font-size:12px;
}
.board-list .bh{ color:#C8DFE8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-list b{ color:var(--gold-soft); font-variant-numeric:tabular-nums; }

/* ---------- منطقة التحكم ---------- */
#controls[data-meeem-game-controls]{
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:6px 14px 12px;
  z-index:6;
  background:linear-gradient(0deg, rgba(7,12,15,.9), rgba(7,12,15,0));
}
#controls.idle{ opacity:.5; }

.dpad{
  display:grid;
  flex:0 0 auto;
  max-width:none;
  grid-template-columns:repeat(3, 46px);
  grid-template-rows:repeat(2, 46px);
  gap:5px;
  direction:ltr;
}
.dpad [data-dir="up"]{ grid-column:2; grid-row:1; }
.dpad [data-dir="left"]{ grid-column:1; grid-row:2; }
.dpad [data-dir="down"]{ grid-column:2; grid-row:2; }
.dpad [data-dir="right"]{ grid-column:3; grid-row:2; }

#controls .pad{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:15px;
  border:1px solid rgba(127,227,255,.30);
  background:rgba(14,20,24,.60);
  color:#BFE7F3;
  cursor:pointer;
  touch-action:none;
  transition:transform .1s ease, background .1s ease, color .1s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 4px 14px rgba(0,0,0,.35);
}
.pad:active, .pad.on{
  transform:scale(.94);
  background:rgba(127,227,255,.22);
  color:#fff;
}

#controls .act-cluster{
  flex:0 0 auto;
  max-width:none;
  display:flex;
  align-items:flex-end;
  gap:8px;
}

#controls .act{
  flex:0 0 auto;
  width:64px; height:64px;
  max-width:64px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  border-radius:50%;
  cursor:pointer;
  touch-action:none;
  transition:transform .1s ease, filter .12s ease, box-shadow .12s ease;
}
#controls .act-label{ font-size:10px; font-weight:900; letter-spacing:0; opacity:.9; }

#controls .fire{
  color:#DFF8FF;
  border:1px solid rgba(127,227,255,.60);
  background:radial-gradient(circle at 50% 32%, rgba(127,227,255,.42), rgba(20,80,110,.68) 62%, rgba(10,16,20,.92) 100%);
  box-shadow:
    0 8px 24px rgba(30,150,190,.35),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -6px 16px rgba(0,0,0,.45);
}
#controls .fire.on{
  transform:scale(.94);
  filter:brightness(1.3);
  box-shadow:0 0 26px rgba(127,227,255,.8), inset 0 1px 0 rgba(255,255,255,.3);
}

#controls .boost{
  color:#FFE9C6;
  border:1px solid rgba(212,162,58,.6);
  background:radial-gradient(circle at 50% 30%, rgba(255,201,139,.30), rgba(179,38,30,.55) 62%, rgba(14,20,24,.92) 100%);
  box-shadow:
    0 8px 26px rgba(226,80,40,.35),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -6px 16px rgba(0,0,0,.45);
}
#controls .boost.on{
  transform:scale(.94);
  filter:brightness(1.25);
  box-shadow:0 0 30px rgba(255,180,90,.75), inset 0 1px 0 rgba(255,255,255,.3);
}
#controls .act:disabled{ opacity:.45; }

/* ---------- شاشات قصيرة ---------- */
@media (max-height: 560px){
  .hud-chip{ padding:3px 7px; border-radius:9px; }
  .chip-value b{ font-size:16px; }
  .chip-label{ font-size:9.5px; }
  .icon-btn{ width:40px; height:40px; }
  .panel{ padding:14px; border-radius:15px; }
  .panel h1{ font-size:22px; }
  .panel h2{ font-size:18px; }
  .sub{ font-size:12.5px; margin-bottom:9px; }
  .tips{ gap:4px; margin-bottom:10px; }
  .tips li{ font-size:11.5px; }
  .btn{ min-height:46px; font-size:15px; }
  #controls .act{ width:54px; height:54px; max-width:54px; }
  #controls .act svg{ width:20px; height:20px; }
  #controls .act-label{ font-size:9px; }
  .dpad{ grid-template-columns:repeat(3,42px); grid-template-rows:repeat(2,42px); gap:4px; }
  #controls .pad{ width:42px; height:42px; }
  #controls{ padding:4px 12px 8px; }
  .hud-mission{ font-size:10px; padding:2px 8px; }
  .tips[data-meeem-game-detail]{ display:none; }
}

@media (max-height: 420px){
  .brand-mark{ width:40px; height:40px; }
  .result-grid{ grid-template-columns:repeat(4,1fr); }
  .rcell b{ font-size:17px; }
  .panel-start .sub{ display:none; }
  .overlay{ padding:8px; }
  .panel{ padding:13px; }
}

@media (min-width: 900px){
  #controls{ padding:10px 28px 18px; }
  #controls .act{ width:78px; height:78px; max-width:78px; }
  .dpad{ grid-template-columns:repeat(3,54px); grid-template-rows:repeat(2,54px); }
  #controls .pad{ width:54px; height:54px; }
}

/* الشاشات العالية: هامش علوي أوسع فقط — بلا توسيط رأسي أبداً */
@media (min-height: 760px){
  .overlay{ padding-block:clamp(14px, 5vh, 46px); }
}

/* شاشات عريضة وقصيرة (لوحي أفقي / سطح مكتب صغير): بطاقة مضغوطة
   مع إبقاء زر البدء ظاهراً دائماً */
@media (max-height: 720px){
  .panel{ padding:14px; border-radius:16px; }
  .panel h1{ font-size:23px; }
  .brand{ margin-bottom:8px; }
  .brand-mark{ width:42px; height:42px; }
  .best-line{ margin-bottom:10px; padding:6px 10px; }
  .btn{ min-height:48px; font-size:15.5px; }
  .panel-start .sub,
  .panel-start .menu-detail{ display:none; }
}

@media (min-width: 820px) and (max-height: 780px){
  .panel-start .tips{ display:none; }
}

/* ---------- بطاقة الشرير والمهمات على شاشة البداية ---------- */
.villain-line{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:10px;
  padding:8px 11px;
  border-radius:11px;
  background:rgba(179,38,30,.13);
  border:1px solid rgba(255,90,60,.35);
  font-size:11.5px;
  line-height:1.6;
  color:#FFC7B6;
}
.villain-badge{
  flex:0 0 auto;
  font-size:13px;
  line-height:1.4;
  color:#FF7A56;
}
.villain-line b{ color:#FFE1D6; }

.mission-box{
  margin-top:9px;
  padding:9px 11px;
  border-radius:12px;
  background:rgba(212,162,58,.08);
  border:1px solid rgba(212,162,58,.30);
}
.mission-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.mission-head span{ font-size:12px; font-weight:900; color:#F5E3C2; }
.mission-head small{ font-size:9.5px; color:#A98F63; }
.mission-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.mission-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:5px 8px;
  border-radius:8px;
  background:rgba(255,255,255,.05);
  font-size:11.5px;
  color:#E8DFCF;
}
.mission-list li .m-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mission-list li b{ color:var(--gold-soft); font-variant-numeric:tabular-nums; flex:0 0 auto; }
.mission-list li.done{
  background:rgba(90,220,140,.12);
  color:#BDF3CE;
}
.mission-list li.done b{ color:#8FE8AE; }

/* ---------- شاشات واسعة: بطاقة بداية أقصر فلا تحتاج تمريراً ---------- */
@media (min-width: 760px){
  .panel-start{ width:min(560px, 100%); }
  .panel-start .tips{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:14px;
    row-gap:6px;
    margin-bottom:12px;
  }
  .panel-start .tips li{ font-size:12px; }
  .panel-start .brand{ margin-bottom:8px; }
  #btnStart{ margin-top:2px; }
}

@media (max-height: 760px){
  .panel-start .tips{ margin-bottom:10px; }
  .villain-line{ padding:6px 10px; font-size:11px; }
  .mission-box{ margin-top:7px; padding:8px 10px; }
}

/* ---------- ضمان بقاء زر البدء ظاهراً فوق الشاشات القصيرة ---------- */
@media (max-height: 700px){
  .panel-start .tips{ display:none; }
}
@media (max-height: 620px){
  .panel-start .sub,
  .panel-start .menu-detail{ display:none; }
  .panel{ padding:13px; }
  .brand{ margin-bottom:6px; }
  .best-line{ margin-bottom:9px; padding:6px 10px; }
  .villain-line{ margin-top:7px; padding:6px 10px; font-size:11px; }
  .mission-box{ margin-top:7px; padding:7px 10px; }
  .mission-list li{ padding:4px 8px; font-size:11px; }
}

@media (prefers-reduced-motion: reduce){
  .panel{ animation:none; }
  #toast, #hint, #speedFx, #flashFx{ transition:none; }
}