/* Карта рейсов и гараж. Карта — лента деревенских табличек вдоль дороги через три мира; гараж — тёмная студия с подиумом. */
.scr2 { --screen-a: #0b0d11; --screen-b: #1c2129; --num: #ffe27a; --num-glow: rgba(255, 190, 40, .6); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 900; }
.map-top { position: absolute; left: 10px; right: 10px; top: 6px; height: 46px; display: flex; align-items: center; gap: 12px; z-index: 3; }
.map-title { flex: 1; display: flex; justify-content: center; line-height: 0; }
.map-top .m3-stat { margin-left: 16px; }
.map-top .m3-val { min-width: 58px; }

/* меню: «Карта» и «Гараж» под главной кнопкой */
.m3-pills { display: flex; gap: 8px; width: 240px; }
.m3-pill { flex: 1; height: 40px; padding: 0 6px; display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 11px; border: 3px solid #14161a; color: #fff;
  font: inherit; font-size: 14px; font-weight: 900; text-shadow: 0 1px 2px #000; transition: transform .06s;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .3), 0 3px 0 #0d0703, 0 5px 8px rgba(0, 0, 0, .4); }
.m3-pill svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.m3-pill.pm { background: linear-gradient(#7fe8d8, #12a090 55%, #0e8a7c); }
.m3-pill.pg { background: linear-gradient(#d2b8ff, #7a4ae0 55%, #6a3ad8); }
.m3-pill b { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #ffd23f; border: 2px solid #6a4a00; color: #3a2200; font-size: 12px; text-shadow: none; display: flex; align-items: center; justify-content: center; }
.m3-pill:active { transform: translateY(3px); }
.m3-pill * { pointer-events: none; }

/* карта */
#scr-map { background: #2a7fd8; }
.map { background: linear-gradient(#2a7fd8, #6fbcff 70px, #bfe6ff 120px); }
.map-list { position: absolute; left: 0; right: 0; top: 56px; bottom: 0; }
.map-track { position: relative; height: 100%; min-height: 316px; border-top: 4px solid rgba(40, 20, 5, .35);
  background-image: radial-gradient(rgba(255, 255, 255, .14) 2px, transparent 2.5px), radial-gradient(rgba(0, 60, 0, .1) 3px, transparent 3.5px);
  background-size: 34px 34px, 52px 52px; background-position: 0 0, 17px 11px; }
.map-zone { position: absolute; top: 0; bottom: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 2px, transparent 2.5px), radial-gradient(rgba(0, 40, 0, .12) 3px, transparent 3.5px), var(--zg);
  background-size: 34px 34px, 52px 52px, 100% 100%; background-position: 0 0, 17px 11px, 0 0; }
.map-zone.z0 { --zg: linear-gradient(#a8ea72, #5cb83a); } .map-zone.z1 { --zg: linear-gradient(#ffd66a, #e0962a); } .map-zone.z2 { --zg: linear-gradient(#9fdcf0, #5aa86a); }
.map-zone::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: repeating-linear-gradient(#fff 0 10px, #e8261c 10px 20px); opacity: .7; }
.map-zone.z0::after { display: none; }
.map-road { position: absolute; left: 0; top: 0; pointer-events: none; }
.map-world { position: absolute; top: 46px; width: 140px; height: 214px; padding: 12px 6px; border-radius: 18px; border: 3px solid #2a1406; display: flex; flex-direction: column; align-items: center; gap: 8px; line-height: 0;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .25), 0 6px 0 #2a1406, 0 10px 16px rgba(0, 0, 0, .35); }
.map-world svg { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35)); }
.map-world.w0 { background: linear-gradient(#c8f59a, #5cbf3a); } .map-world.w1 { background: linear-gradient(#ffe7a0, #f0a22a); } .map-world.w2 { background: linear-gradient(#cfe6ff, #6a9ad0); }
.mw-st { display: flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; border-radius: 12px; background: rgba(20, 10, 2, .7); color: #ffe27a; font-size: 15px; line-height: 1; }
.mw-st svg { width: 24px; height: 24px; }
.map-lv { position: absolute; width: 100px; height: 126px; padding: 22px 6px 6px; border-radius: 14px; border: 3px solid #2a1406; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: linear-gradient(#fffaf0, #f2e3c2); color: #3a2a14; font: inherit; white-space: normal; transition: transform .06s;
  box-shadow: inset 0 2px 0 #fff, 0 5px 0 #4a3010, 0 9px 12px rgba(0, 0, 0, .35); }
.map-lv * { pointer-events: none; }
.map-lv:active { transform: translateY(3px); }
.ml-num { position: absolute; left: 50%; top: -17px; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; border: 3px solid #0b2a52; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #8fd8ff, #1877d8 70%); color: #fff; font-size: 17px; text-shadow: 0 1px 2px #000; box-shadow: 0 3px 0 #0b2a52; }
.ml-sign { width: 100%; min-height: 36px; padding: 2px 3px; border: 2px solid #111; border-radius: 4px; background: #fff; color: #111; font-size: 11px; line-height: 1.1;
  text-transform: uppercase; display: flex; align-items: center; justify-content: center; text-align: center; box-shadow: 0 0 0 2px #fff; }
.ml-cargo, .ml-boss { display: flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 800; }
.ml-cargo svg, .ml-boss svg { width: 20px; height: 20px; flex-shrink: 0; }
.ml-boss { color: #c0186a; }
.map-lv.boss { background: linear-gradient(#fff0f7, #ffc2de); border-color: #6a0a30; box-shadow: inset 0 2px 0 #fff, 0 5px 0 #6a0a30, 0 9px 12px rgba(0, 0, 0, .35); }
.map-lv.boss .ml-num { background: radial-gradient(circle at 35% 30%, #ffb3d1, #d81b6a 70%); border-color: #5a0a2a; box-shadow: 0 3px 0 #5a0a2a; }
.ml-stars { display: flex; gap: 2px; margin-top: auto; }
.ml-stars i { width: 22px; height: 21px; background: #c8b89a; clip-path: polygon(50% 0, 62% 35%, 99% 36%, 69% 58%, 80% 94%, 50% 72%, 20% 94%, 31% 58%, 1% 36%, 38% 35%); }
.ml-stars i.on { background: linear-gradient(#fff3a0, #ffc61a 50%, #e07a00); }
.ml-lock { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; border-radius: 11px; background: rgba(40, 30, 20, .55); }
.ml-lock svg { width: 40px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.map-lv.locked .ml-lock { display: flex; }
.map-lv.cur { animation: lvcur 1.2s ease-in-out infinite; box-shadow: 0 0 0 4px #ffd23f, 0 5px 0 #4a3010, 0 0 22px 6px rgba(255, 210, 60, .85); }
@keyframes lvcur { 50% { transform: translateY(-5px); } }

/* гараж: тёмная студия, прожектор, подиум с оранжевым кольцом */
#scr-garage { background: #0c0d22; }
.gar { background: radial-gradient(ellipse at 28% 34%, #3e52b8 0%, #1f2458 42%, #0c0d22 100%); }
.gar-spot { position: absolute; left: 40px; top: 0; width: 320px; height: 330px; pointer-events: none;
  background: linear-gradient(rgba(255, 240, 200, .32), rgba(255, 240, 200, .04)); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); }
.gar-podium { position: absolute; left: 34px; top: 262px; width: 330px; height: 76px; border-radius: 50%;
  background: radial-gradient(ellipse, #4a5070 0%, #262a44 60%, #15172a 100%); box-shadow: 0 0 0 3px #ff8a1a, 0 0 26px 8px rgba(255, 140, 30, .7), inset 0 -8px 16px rgba(0, 0, 0, .6); }
.gar-stage { position: absolute; left: 0; top: 54px; width: 400px; height: 295px; }
.gar-hero { width: 100%; height: 100%; display: block; }
.gar-name { position: absolute; left: 14px; top: 58px; line-height: 0; pointer-events: none; }
.gar-stats { position: absolute; left: 14px; top: 96px; width: 128px; display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-radius: 10px; background: rgba(8, 10, 30, .62); border: 2px solid rgba(255, 255, 255, .2); pointer-events: none; }
.gar-stats div { display: flex; flex-direction: column; gap: 1px; font-size: 10px; color: #cfd8ff; }
.gar-stats i { height: 6px; border-radius: 3px; background: #2a2e4a; overflow: hidden; }
.gar-stats b { display: block; height: 100%; background: linear-gradient(90deg, #ffd23f, #ff7a1a); transform-origin: 0 50%; transition: transform .3s; }
.gar-panel { position: absolute; right: 10px; top: 58px; bottom: 10px; width: 292px; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; color: #3a2a14; border: 3px solid #6b4a24;
  background: repeating-linear-gradient(transparent 0 27px, rgba(70, 120, 200, .16) 27px 28px), linear-gradient(#fffaf0, #f2e3c2);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .6), 0 5px 0 #4a3010, 0 10px 20px rgba(0, 0, 0, .5); }
.gar-tabs { display: flex; gap: 5px; }
.gar-tab { flex: 1; height: 40px; border-radius: 9px; border: 2px solid #6b4a24; background: linear-gradient(#e8d4a8, #cfae78); color: #5a3a14; font: inherit; font-size: 13px; padding: 0; }
.gar-tab.on { background: linear-gradient(#ffc233, #ff8a00); border-color: #7a2a00; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); box-shadow: 0 3px 0 #5a1e00; }
.gar-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.gar-row { display: flex; align-items: center; gap: 8px; min-height: 62px; padding: 5px 7px; border-radius: 10px; background: rgba(107, 74, 36, .13); flex-shrink: 0; }
.gar-row.look { box-shadow: inset 0 0 0 3px #ff7a1a; background: rgba(255, 170, 60, .2); }
.gar-row > * { pointer-events: none; }
.gar-row > button { pointer-events: auto; }
.gr-ic { width: 46px; height: 32px; flex-shrink: 0; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .3)); }
.gr-ic.up, .ach .gr-ic { width: 34px; height: 34px; }
.gr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gr-txt b { font-size: 14px; color: #2a1a08; }
.gr-txt small { font-size: 10.5px; font-weight: 700; color: #7a5a3a; line-height: 1.15; }
.pips3 { display: flex; gap: 3px; margin-top: 2px; }
.pips3 i { width: 18px; height: 7px; border-radius: 3px; background: #cdb894; border: 1px solid #8a6a3a; }
.pips3 i.on { background: linear-gradient(#8ef07a, #1f9e2c); border-color: #0d4a14; }
.gb { flex-shrink: 0; min-width: 80px; height: 40px; padding: 0 8px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 3px; font: inherit; font-size: 14px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); border: 2px solid; }
.gb svg { width: 20px; height: 20px; }
.gb:active { transform: translateY(2px); }
.gb-buy { border-color: #7a4600; color: #3a2200; text-shadow: none; background: linear-gradient(#fff2a0, #ffcc1a 55%, #f0a800); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 3px 0 #7a4600; }
.gb-pick { border-color: #0b2a52; background: linear-gradient(#6ab4ff, #1f6fd6); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 3px 0 #0b2a52; }
.gb-cur { border-color: #0d4a14; background: linear-gradient(#8ef07a, #1f9e2c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 3px 0 #0d4a14; }
.gr-pay { flex-shrink: 0; font-size: 13px; color: #b86a00; }
.ach.got { background: rgba(31, 158, 44, .14); }
.ach.got .gr-pay { color: #1f9e2c; }
.ach:not(.got) .gr-ic { filter: grayscale(1); opacity: .55; }
.gar-note { text-align: center; font-size: 11px; font-weight: 800; color: #8a5a2a; }
.gar-go { height: 42px; padding: 0 18px; border-radius: 12px; border: 2px solid #7a2a00; color: #fff; font: inherit; font-size: 17px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  background: linear-gradient(#ffc233, #ff8a00 48%, #f25c00 52%, #ff7a00); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 4px 0 #5a1e00; }
.gar-go:active { transform: translateY(3px); }