/* ==========================================================================
   EV Simulator — Drive & Charge · Game UI
   Reutilizează paleta din style.css (EV Monitor). Mobile-first, imersiv.
   ========================================================================== */

/* ---------- Ecran de joc (hartă fullscreen + HUD) ---------- */
.game{position:fixed;inset:0;overflow:hidden;background:var(--bg);}
.game__map{position:absolute;inset:0;z-index:1;}
#map{position:absolute;inset:0;width:100%;height:100%;z-index:1;}
.car3d{position:absolute;left:50%;top:50%;width:460px;height:460px;transform:translate(-50%,-53%);z-index:3;pointer-events:none;}
.maplibregl-map{font-family:var(--font)!important;}
.maplibregl-ctrl-attrib{font-size:9px;opacity:.5;}

/* Banner misiune (destinație) */
.mission{position:absolute;left:50%;top:60px;transform:translateX(-50%) translateY(-6px);z-index:12;pointer-events:none;
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:12px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(14px);border:1px solid var(--line-2);
  font-weight:800;font-size:13px;color:var(--brand);box-shadow:var(--shadow);white-space:nowrap;opacity:0;transition:opacity .3s,transform .3s;}
.mission.show{opacity:1;transform:translateX(-50%) translateY(0);}
.mission svg{width:15px;height:15px;color:var(--brand);}
.mission__text{display:inline-flex;align-items:center;gap:7px;}
.mission__cancel{pointer-events:auto;width:22px;height:22px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:var(--surface-3);color:var(--muted);border:1px solid var(--line-2);}
.mission__cancel svg{width:13px;height:13px;color:var(--muted);}
.mission__cancel:hover{color:var(--danger);}
.mission__cancel:hover svg{color:var(--danger);}

/* Stația-obiectiv (pulsează — fără transform, ca să nu strice poziționarea MapLibre) */
.st-target{z-index:5;animation:stPulse 1.3s ease-out infinite;}
@keyframes stPulse{
  0%{box-shadow:0 0 0 0 rgba(19,191,160,.55),0 4px 10px rgba(0,0,0,.5);}
  70%{box-shadow:0 0 0 13px rgba(19,191,160,0),0 4px 10px rgba(0,0,0,.5);}
  100%{box-shadow:0 0 0 0 rgba(19,191,160,0),0 4px 10px rgba(0,0,0,.5);}
}

/* strat HUD peste hartă */
.hud{position:absolute;inset:0;z-index:10;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:14px 14px 94px;}
.hud > *{pointer-events:auto;}

/* HUD sus */
.hud-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.hud-chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 13px;border-radius:14px;
  background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(14px);border:1px solid var(--line-2);
  font-weight:800;font-size:14px;box-shadow:var(--shadow);}
.hud-chip svg{width:18px;height:18px;}
.hud-chip--coin{color:var(--lime);} .hud-chip--coin svg{color:var(--lime);}
/* stivă pe mobil (bateria prima), inline pe ecran mare */
.hud-left{display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
@media (min-width:560px){ .hud-left{flex-direction:row;flex-wrap:wrap;align-items:center;} }
.hud-right{display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
.hud-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(14px);border:1px solid var(--line-2);color:var(--ink);box-shadow:var(--shadow);}
.hud-icon svg{width:19px;height:19px;}
.hud-icon--view{font-family:var(--font-num);font-weight:800;font-size:13px;color:var(--brand);letter-spacing:.5px;}
.hud-icon.on{color:#04140F;background:var(--grad-brand);border-color:transparent;}
.hud-icon.on svg{color:#04140F;}

/* Modal stații apropiate */
.st-modal{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(4,10,13,.5);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s ease;}
.st-modal.show{opacity:1;pointer-events:auto;}
.st-modal__panel{width:100%;max-width:440px;max-height:74vh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line-2);border-radius:22px 22px 0 0;box-shadow:var(--shadow-lg);
  transform:translateY(20px);transition:transform .3s ease;overflow:hidden;}
.st-modal.show .st-modal__panel{transform:translateY(0);}
@media(min-width:560px){ .st-modal{align-items:center;} .st-modal__panel{border-radius:22px;} }
.st-modal__head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid var(--line);}
.st-modal__title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;}
.st-modal__title svg{width:18px;height:18px;color:var(--lime);}
.st-modal__title--warn svg{color:var(--danger);}
.empty-hint{padding:2px 18px 10px;font-size:12px;color:var(--muted);}
.st-modal__close{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink);}
.st-modal__close svg{width:18px;height:18px;}
.st-list{overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;}
.st-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--surface-2);
  border:1px solid transparent;text-align:left;cursor:pointer;transition:background .15s,border-color .15s;}
.st-row:hover{background:var(--surface-3);border-color:var(--line-2);}
.st-row__dot{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:15px;flex:none;
  background:linear-gradient(135deg,#FFD34E,#F5B041);color:#2a1c00;}
.st-row__dot.dc{background:linear-gradient(135deg,#8EDB3F,#00A9B8);color:#04140F;}
.st-row__info{flex:1;display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.st-row__info b{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.st-row__info small{font-size:11px;color:var(--muted);}
.st-row__dist{font-family:var(--font-num);font-weight:700;font-size:14px;color:var(--brand);white-space:nowrap;}

/* Căutare oraș */
.search-box{padding:12px 14px 4px;}
.search-box input{width:100%;height:44px;border-radius:12px;padding:0 14px;font-size:15px;font-family:var(--font);
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink);outline:none;}
.search-box input:focus{border-color:var(--brand);}
.search-empty{padding:18px;text-align:center;color:var(--muted);font-size:13px;}
.search-row{display:flex;flex-direction:column;gap:9px;padding:12px;border-radius:14px;background:var(--surface-2);}
.search-row__info{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.search-row__info b{font-weight:800;font-size:14px;}
.search-row__info small{font-size:11px;color:var(--muted);}
.search-row__acts{display:flex;gap:8px;}
.search-row__acts .btn{flex:1;justify-content:center;}

/* Pin destinație (oraș / punct navigat) */
.dest-pin{font-size:26px;line-height:1;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));transform:translateY(2px);}

/* Meniu (hamburger) */
.menu-list{padding:8px;display:flex;flex-direction:column;gap:5px;}
.menu-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:14px;background:var(--surface-2);}
.menu-row__label{display:flex;align-items:center;gap:11px;font-weight:700;font-size:14px;}
.menu-row__label svg{width:18px;height:18px;color:var(--muted);}

/* ---------- Garaj (configurator mașină) ---------- */
.garage{display:flex;flex-direction:column;align-items:center;gap:16px;padding:6px 0 24px;}
.garage__stage{width:min(86vw,340px);height:min(86vw,340px);max-height:42vh;display:block;}
.garage__name{font-size:22px;font-weight:800;letter-spacing:-.3px;}
.garage__specs{display:flex;gap:10px;}
.g-spec{display:flex;flex-direction:column;align-items:center;background:var(--surface-2);border-radius:12px;padding:8px 14px;min-width:74px;}
.g-spec b{font-family:var(--font-num);font-size:18px;font-weight:700;}
.g-spec span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;font-weight:600;margin-top:2px;}
.garage-section{width:100%;max-width:440px;}
.garage-section__label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin:0 0 8px 4px;}
.model-pick{display:flex;gap:10px;}
.model-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:14px;font-weight:700;font-size:14px;
  background:var(--surface-2);border:1.5px solid var(--line-2);color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s,color .15s;}
.model-btn svg{width:18px;height:18px;}
.model-btn.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand);}
.color-swatches{display:flex;gap:13px;flex-wrap:wrap;}
.swatch{width:44px;height:44px;border-radius:50%;background:var(--c);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line-2);cursor:pointer;transition:transform .1s,box-shadow .15s;}
.swatch.on{box-shadow:0 0 0 3px var(--brand);transform:scale(1.06);}
.swatch:active{transform:scale(.92);}
.swatch--custom{display:grid;place-items:center;background:conic-gradient(from 0deg,#ff4d6d,#ffd23f,#8ac926,#38b6ff,#6a4cff,#ff5ec4,#ff4d6d);color:#fff;}
.swatch--custom span{font-size:24px;font-weight:800;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.45);}
.swatch--custom.swatch--set{background:var(--c);}
.swatch--custom.swatch--set span{display:none;}

/* mini-modal „construiește-ți culoarea” */
.cc-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.5);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .18s;}
.cc-modal.show{opacity:1;pointer-events:auto;}
.cc-box{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--line-2);border-radius:22px;
  box-shadow:var(--shadow);padding:18px;transform:translateY(14px) scale(.98);transition:transform .2s;}
.cc-modal.show .cc-box{transform:translateY(0) scale(1);}
.cc-box__head{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:17px;margin-bottom:14px;}
.cc-x{width:34px;height:34px;border-radius:10px;background:var(--surface-2);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;border:none;}
.cc-preview{height:76px;border-radius:16px;display:grid;place-items:center;margin-bottom:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);}
.cc-hex{font-family:var(--font-num,monospace);font-weight:800;font-size:20px;letter-spacing:1px;color:#fff;
  padding:5px 12px;border-radius:10px;background:rgba(0,0,0,.32);text-shadow:0 1px 2px rgba(0,0,0,.5);}
.cc-presets{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:16px;}
.cc-chip{width:100%;aspect-ratio:1;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line-2);cursor:pointer;transition:transform .1s;}
.cc-chip:active{transform:scale(.88);}
.cc-slider{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;margin-bottom:12px;}
.cc-slider span{min-width:82px;color:var(--muted);}
.cc-slider input[type=range]{flex:1;height:14px;border-radius:8px;appearance:none;-webkit-appearance:none;cursor:pointer;}
#cc-hue{background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);}
#cc-sat{background:linear-gradient(90deg,#999,#38b6ff);}
#cc-lit{background:linear-gradient(90deg,#000,#38b6ff,#fff);}
.cc-slider input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--brand);box-shadow:0 1px 4px rgba(0,0,0,.35);}
.cc-slider input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--brand);box-shadow:0 1px 4px rgba(0,0,0,.35);}
.cc-apply{width:100%;height:50px;border-radius:14px;border:none;cursor:pointer;font-weight:800;font-size:15px;
  background:var(--brand);color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--brand) 40%,transparent);}
.cc-apply:active{transform:scale(.98);}

/* nivel + XP */
.hud-level{display:flex;align-items:center;gap:10px;height:40px;padding:0 6px 0 13px;border-radius:14px;
  background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(14px);border:1px solid var(--line-2);box-shadow:var(--shadow);}
.hud-level__lv{font-weight:800;font-size:13px;white-space:nowrap;}
.hud-level__bar{width:90px;height:7px;border-radius:5px;background:var(--surface-3);overflow:hidden;}
.hud-level__fill{height:100%;border-radius:5px;background:var(--grad-brand);}
.hud-level__badge{width:30px;height:30px;border-radius:9px;background:var(--grad-brand);color:#04140F;display:grid;place-items:center;font-weight:800;font-size:12px;}

/* HUD jos — buton acțiune */
.hud-bottom{display:flex;flex-direction:column;gap:10px;}

/* Bord compact — pastilă mică (ca chip-urile de sus) */
.dash{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 13px;border-radius:14px;
  background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(14px);border:1px solid var(--line-2);box-shadow:var(--shadow);}
.dash-bat{display:flex;align-items:center;gap:7px;}
.dash-bat__pct{font-family:var(--font-num);font-size:15px;font-weight:700;}
.dash-bat__pct.low{color:var(--danger);}
.dash-bat__bar{width:42px;height:6px;border-radius:4px;background:var(--surface-3);overflow:hidden;display:inline-block;}
.dash-bat__fill{display:block;height:100%;border-radius:4px;background:var(--grad-brand);transition:width .3s;}
.dash-bat__fill.low{background:linear-gradient(90deg,#FF5A6E,#F5B041);}
.dash-bat__km{font-size:11px;color:var(--muted);font-family:var(--font-num);white-space:nowrap;}
.dash-div{width:1px;height:20px;background:var(--line-2);flex:none;}
.dash__stats{display:flex;align-items:center;gap:11px;}
.dash-stat{display:flex;flex-direction:column;align-items:center;line-height:1;}
.dash-stat b{font-family:var(--font-num);font-size:13px;font-weight:700;}
.dash-stat span{font-size:8.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.2px;font-weight:600;margin-top:1px;}

/* Buton ascunde/afișează meniul din footer */
.nav-toggle{position:fixed;left:50%;transform:translateX(-50%);bottom:86px;z-index:55;width:46px;height:24px;
  border-radius:12px;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(12px);
  border:1px solid var(--line-2);display:grid;place-items:center;box-shadow:var(--shadow);transition:bottom .3s ease;}
.nav-toggle svg{width:18px;height:18px;color:var(--muted);transition:transform .3s ease;}
.tabbar{transition:transform .3s ease;}
body.nav-hidden .tabbar{transform:translateY(150%);}
body.nav-hidden .nav-toggle{bottom:14px;}
body.nav-hidden .nav-toggle svg{transform:rotate(180deg);}
body.nav-hidden .hud{padding-bottom:52px;}

/* Buton acțiune (Încarcă / Condu) */
.act-btn{display:flex;align-items:center;justify-content:center;gap:9px;height:54px;border-radius:18px;font-weight:800;font-size:16px;
  background:var(--grad-brand);color:#04140F;box-shadow:0 10px 26px rgba(0,169,184,.45);transition:transform .1s,opacity .2s;width:100%;}
.act-btn:active{transform:scale(.98);}
.act-btn svg{width:22px;height:22px;}
.act-btn--charge{background:linear-gradient(100deg,#FFD34E,#F5B041);color:#2a1c00;box-shadow:0 10px 26px rgba(245,176,65,.4);}
.act-btn[disabled]{opacity:.4;pointer-events:none;filter:grayscale(.4);}
/* Buton = progress bar cât timp se încarcă */
.act-btn.act-btn--charging{opacity:1;filter:none;color:var(--ink);overflow:hidden;
  background:linear-gradient(90deg,#8EDB3F 0 var(--p,0%),color-mix(in srgb,var(--surface) 78%,transparent) var(--p,0%) 100%);
  box-shadow:0 10px 26px rgba(142,219,63,.35);text-shadow:0 1px 2px rgba(0,0,0,.35);transition:background .12s linear;}
.act-btn.act-btn--charging svg{color:#eafff6;}
.act-hint{text-align:center;font-size:12px;color:var(--muted);margin-top:-4px;}

/* D-pad — comenzi de condus split (ergonomic): UP/DOWN stânga · LEFT/RIGHT dreapta */
.dpad{position:absolute;left:0;right:0;bottom:180px;z-index:14;pointer-events:none;
  display:flex;justify-content:space-between;align-items:flex-end;padding:0 18px;
  transition:bottom .3s ease,opacity .25s ease;}
.dpad__side{display:flex;gap:12px;}
.dpad__side--drive{flex-direction:column;}   /* UP deasupra, DOWN dedesubt — deget stâng */
.dpad__side--steer{flex-direction:row;}       /* STÂNGA / DREAPTA — deget drept */
.dpad__btn{pointer-events:auto;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;cursor:pointer;
  background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(12px);
  border:1px solid var(--line-2);box-shadow:0 6px 16px rgba(0,0,0,.35);transition:transform .08s,background .15s;}
.dpad__btn:active{transform:scale(.9);background:var(--grad-brand);border-color:transparent;}
.dpad__btn svg{width:26px;height:26px;color:var(--fg);}
.dpad__btn:active svg{color:#04140F;}
body.nav-hidden .dpad{bottom:140px;}
@media(min-width:560px){ .dpad{padding:0 28px;} }

/* Markeri hartă */
.car-dot{width:68px;height:90px;transform-origin:center;transform-style:preserve-3d;transition:transform .25s ease,filter .3s ease;filter:drop-shadow(0 5px 9px rgba(0,0,0,.55));}
.car-dot svg{width:100%;height:100%;display:block;overflow:visible;}
.game.is-3d .car-dot{filter:drop-shadow(0 14px 10px rgba(0,0,0,.6));}
.car-beam{transition:opacity .4s ease;}
html[data-theme="light"] .car-beam{opacity:0;}
.car-body{transition:stroke .3s ease;}
html[data-theme="light"] .car-body{stroke:rgba(6,44,38,.28);stroke-width:1.5;}
.st-dot{width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:linear-gradient(135deg,#FFD34E,#F5B041);
  border:2px solid #2a1c00;display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,.5);}
.st-dot b{transform:rotate(45deg);font-size:14px;}
.st-dot.dc{background:linear-gradient(135deg,#8EDB3F,#00A9B8);}

/* Toast recompensă */
.toast{position:absolute;left:50%;top:270px;transform:translateX(-50%) translateY(-8px);z-index:30;
  background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px);border:1px solid var(--line-2);
  border-radius:14px;padding:9px 16px;font-weight:800;font-size:14px;box-shadow:var(--shadow-lg);opacity:0;transition:opacity .25s,transform .25s;display:flex;align-items:center;gap:8px;pointer-events:none;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast--coin{color:var(--lime);} .toast--xp{color:var(--brand);}
.toast svg{width:17px;height:17px;}

/* ---------- Shell pagini secundare (Garaj/Magazin/Misiuni/Profil) ---------- */
.gpage{min-height:100dvh;display:flex;flex-direction:column;padding-bottom:96px;background:
  radial-gradient(120% 60% at 50% 0%,rgba(19,191,160,.08),transparent 60%),var(--bg);}
.gtop{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.gtop__title{font-size:19px;font-weight:800;}
.gtop__title small{display:block;font-size:12px;color:var(--muted);font-weight:500;}
.gtop__spacer{flex:1;}
.gcontent{padding:18px 16px;max-width:720px;margin:0 auto;width:100%;}

/* Garaj — mașini */
.car-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;margin-bottom:14px;position:relative;overflow:hidden;}
.car-tile.owned{border-color:var(--line-2);}
.car-tile.active{border-color:var(--brand);box-shadow:var(--glow);}
.car-tile__stage{height:120px;border-radius:var(--r-md);background:
  radial-gradient(80% 90% at 50% 20%,rgba(19,191,160,.16),transparent 60%),var(--surface-2);
  display:grid;place-items:center;margin-bottom:14px;position:relative;}
.car-tile__stage svg{width:80px;height:80px;color:var(--brand);}
.car-tile__badge{position:absolute;top:10px;right:10px;}
.car-tile__name{font-size:17px;font-weight:800;}
.car-tile__name small{display:block;font-size:12px;color:var(--muted);font-weight:500;}
.car-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;}
.car-spec{text-align:center;background:var(--surface-2);border-radius:10px;padding:8px 4px;}
.car-spec b{display:block;font-family:var(--font-num);font-size:16px;font-weight:700;}
.car-spec span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;}
.car-tile__foot{display:flex;align-items:center;gap:10px;}
.price{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--lime);}
.price svg{width:16px;height:16px;}

/* Magazin — upgrade-uri */
.shop-item{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:12px;}
.shop-item__ico{width:48px;height:48px;border-radius:14px;background:var(--grad-brand-soft);color:var(--brand);display:grid;place-items:center;flex:none;}
.shop-item__ico svg{width:24px;height:24px;}
.shop-item__body{flex:1;min-width:0;}
.shop-item__body b{font-size:15px;} .shop-item__body span{display:block;font-size:12.5px;color:var(--muted);}

/* Misiuni */
.mission{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 16px;margin-bottom:12px;}
.mission__head{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.mission__ico{width:42px;height:42px;border-radius:12px;background:var(--surface-3);color:var(--brand);display:grid;place-items:center;flex:none;}
.mission__ico svg{width:20px;height:20px;}
.mission__t{flex:1;} .mission__t b{font-size:14.5px;} .mission__t span{display:block;font-size:12.5px;color:var(--muted);}
.mission__reward{display:inline-flex;align-items:center;gap:5px;font-weight:800;color:var(--lime);font-size:13.5px;}
.mission__reward svg{width:15px;height:15px;}
.mprog{height:8px;border-radius:5px;background:var(--surface-3);overflow:hidden;}
.mprog__fill{height:100%;border-radius:5px;background:var(--grad-brand);}
.mission__foot{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px;}
.mission.done{border-color:var(--ok);} .mission.done .mprog__fill{background:var(--ok);}

/* Bară de navigație joc (reutilizează .tabbar din style.css) */