*{box-sizing:border-box;margin:0;padding:0}
:root{
  --shadow:0 22px 60px -28px rgba(0,0,0,.85);
}
body{background:var(--bg);color:var(--ink);font:15px/1.55 "IBM Plex Sans",system-ui,"Segoe UI",sans-serif;overflow-x:hidden;min-height:100vh}
h1,h2,h3,h4{font-family:"Oswald","Arial Narrow",Impact,sans-serif;font-weight:700;text-transform:uppercase;line-height:1;letter-spacing:.02em}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.lbl{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
.cinfo{font-size:12.5px;line-height:1.45;color:var(--ink2);margin:6px 0 4px}
.cinfo .wiki{color:var(--amber-dark,var(--amber));text-decoration:none;white-space:nowrap;font-weight:600}
.cinfo .wiki:hover{text-decoration:underline}
.gapnote .cinfo{display:block;margin:2px 0 6px}
/* ---------- фон ---------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ag{position:absolute;inset:-10%;background:
 radial-gradient(58% 44% at 12% 6%,rgba(35,120,140,.30),transparent 62%),
 radial-gradient(52% 46% at 88% 12%,rgba(255,150,50,.14),transparent 60%),
 radial-gradient(70% 60% at 50% 108%,rgba(20,80,110,.34),transparent 65%),
 linear-gradient(178deg,#040b0f,#061318 45%,#04090d)}
.af{position:absolute;inset:0;opacity:.5;background-image:
 linear-gradient(rgba(120,190,205,.055) 1px,transparent 1px),
 linear-gradient(90deg,rgba(120,190,205,.055) 1px,transparent 1px);background-size:64px 64px;
 -webkit-mask-image:radial-gradient(120% 90% at 50% 20%,#000 30%,transparent 88%);mask-image:radial-gradient(120% 90% at 50% 20%,#000 30%,transparent 88%)}
.ad{position:absolute;inset:0;opacity:.3;background-image:radial-gradient(rgba(180,225,235,.35) 1px,transparent 1.4px);background-size:26px 26px;
 -webkit-mask-image:radial-gradient(90% 70% at 70% 80%,#000,transparent 75%);mask-image:radial-gradient(90% 70% at 70% 80%,#000,transparent 75%)}
.ab{position:absolute;top:-30%;left:-20%;width:60%;height:170%;background:linear-gradient(90deg,transparent,rgba(120,210,230,.06),transparent);animation:beam 17s linear infinite}
@keyframes beam{0%{transform:translateX(-40vw) rotate(14deg)}100%{transform:translateX(140vw) rotate(14deg)}}
.an{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- шапка ---------- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
 padding:10px clamp(12px,3vw,28px);
 }
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.mark{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;
 font-family:"Oswald",sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;}
.brand b{display:block;font-family:"Oswald",sans-serif;font-weight:700;font-size:15.5px;letter-spacing:.13em;text-transform:uppercase}
.brand small{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;}
.tnav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.tbtn{padding:7px 11px;font-family:"IBM Plex Mono",monospace;font-size:10px;
 letter-spacing:.13em;text-transform:uppercase;transition:.2s;white-space:nowrap}
.tbtn:hover{transform:translateY(-1px)}
/* ---------- HUD ---------- */
.hud{position:sticky;top:57px;z-index:35;display:flex;flex-wrap:wrap;
 }
.stat{flex:1 1 148px;padding:8px 13px 9px;position:relative;min-width:0}
.stat .v{font-family:"Oswald",sans-serif;font-weight:700;font-size:clamp(19px,2.3vw,28px);line-height:1.05;display:flex;align-items:baseline;gap:3px;transition:color .3s}
.stat .v u{text-decoration:none;font-size:.48em;letter-spacing:.08em}
.stat .bar{position:absolute;left:0;bottom:0;height:2px;width:0;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.clock{flex:0 0 auto;padding:8px 13px;display:flex;flex-direction:column;justify-content:center}
.clock .v{font-family:"IBM Plex Mono",monospace;font-size:14.5px;letter-spacing:.05em}
.prog{flex:1 1 200px;padding:9px 13px;display:flex;flex-direction:column;gap:7px;justify-content:center;min-width:180px}
.ptrack{display:flex;}
.pseg{flex:1;position:relative;}
.pseg i{position:absolute;inset:0;transform:scaleX(0);transform-origin:left;transition:transform .5s}
.pseg.done i{transform:scaleX(1)}
.pseg.now i{animation:psg 1.7s ease-in-out infinite}
@keyframes psg{0%,100%{opacity:.3;transform:scaleX(.12)}50%{opacity:1;transform:scaleX(.55)}}

/* ---------- сетка ---------- */
.shell{position:relative;z-index:10;display:grid;padding:14px clamp(10px,3vw,28px) 22px;
 grid-template-columns:minmax(0,1.3fr) minmax(360px,.9fr);align-items:start}
@media(max-width:1060px){.shell{grid-template-columns:1fr}}
.col{display:flex;flex-direction:column;gap:14px;min-width:0}
.panel{position:relative;
 }
.panel::before,.panel::after{content:"";position:absolute;width:10px;height:10px;pointer-events:none;opacity:.7}
.panel::before{top:-1px;left:-1px;border-top:1.5px solid var(--gold);border-left:1.5px solid var(--gold)}
.panel::after{bottom:-1px;right:-1px;border-bottom:1.5px solid var(--gold);border-right:1.5px solid var(--gold)}
.ph{display:flex;align-items:center;gap:10px;padding:9px 13px;}
.ph h3{font-size:12.5px;letter-spacing:.15em}
.ph .tag{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:9.4px;letter-spacing:.12em;text-transform:uppercase;text-align:right}

/* ---------- карта ---------- */
.sea{fill:rgba(6,26,33,.55)}
.land{fill:rgba(58,124,134,.17);stroke:rgba(122,205,215,.4);stroke-width:.7;stroke-linejoin:round}
.water{fill:rgba(6,26,33,.8);stroke:rgba(122,205,215,.18);stroke-width:.5}
.grat{stroke:rgba(120,190,205,.1);stroke-width:.5}
.eq{stroke:rgba(255,182,74,.22);stroke-width:.7;stroke-dasharray:5 4}
.fut{fill:none;stroke:rgba(160,205,215,.3);stroke-width:1;stroke-dasharray:2 5;stroke-linecap:round}
.past{fill:none;stroke:rgba(255,199,110,.8);stroke-width:1.7;stroke-linecap:round}
.prev{fill:none;stroke-width:2.2;stroke-dasharray:7 5;stroke-linecap:round;animation:dsh 1s linear infinite}
@keyframes dsh{to{stroke-dashoffset:-24}}
.clab{font-family:"IBM Plex Mono",monospace;font-size:8.2px;fill:rgba(214,240,242,.8);letter-spacing:.05em}
.clab.k{font-size:9.4px;fill:var(--gold)}
.pls{animation:pls 2s ease-out infinite}
@keyframes pls{0%{r:2;opacity:.85}100%{r:13;opacity:0}}
.mlegend{display:flex;gap:13px;flex-wrap:wrap;padding:7px 13px 11px;}
.mlegend span{font-family:"IBM Plex Mono",monospace;font-size:9.4px;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.mlegend i{width:14px;display:block}
.travel{position:absolute;left:12px;top:12px;right:12px;padding:9px 11px;display:none;
 
 }
.travel.on{display:block;animation:fu .3s ease}
.travel .tt{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.travel .tv{font-family:"Oswald",sans-serif;font-weight:700;font-size:clamp(17px,2.2vw,26px);}
.travel .tp{margin-top:7px;overflow:hidden}
.travel .tp i{display:block;height:100%;width:0;}

/* ============================ INTERACTIVE MAP ============================ */
.mapwrap{position:relative;}
#gLabels,#gMarkers{pointer-events:none}

.cityLabel{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:9px;
  fill:rgba(226,245,247,.92);
  paint-order:stroke;
  stroke:rgba(3,10,13,.86);
  stroke-width:2.4px;
  stroke-linejoin:round;
  pointer-events:none;
}
.cityLabel.cand{fill:var(--gold)}
.cityLabel.current{fill:#fff;font-weight:600}
.cityLabel.dest{fill:var(--amber)}

.zoomctl{
  position:absolute;right:10px;top:10px;z-index:6;
  display:flex;flex-direction:column;gap:5px;
}
.zoomctl button{
  width:31px;height:31px;
  font-family:"Oswald",sans-serif;
  font-size:16px;line-height:1;
  cursor:pointer;transition:.18s;
  backdrop-filter:blur(4px);
}
.zoomctl button:hover{
  
  transform:translateY(-1px);
}

.mapHelp{
  position:absolute;left:10px;bottom:8px;z-index:4;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:8.8px;letter-spacing:.1em;text-transform:uppercase;
}

.land,.water,.grat,.eq,.past,.fut,.prev{
  vector-effect:non-scaling-stroke;
}

/* ---------- табло ---------- */
.board{padding:13px}
.od{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.od .arw{font-size:19px;animation:ndg 1.9s ease-in-out infinite}
@keyframes ndg{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.flaps{display:flex;flex-wrap:wrap;gap:2px}
.flap{position:relative;width:.64em;height:1.14em;transform-style:preserve-3d;
 animation:flp .34s cubic-bezier(.2,.9,.2,1) both}
.flap::after{content:"";position:absolute;left:0;right:0;top:calc(50% - .5px);height:1px;}
.flap s{position:absolute;inset:0;display:grid;place-items:center;text-decoration:none;
 font-family:"Oswald",sans-serif;font-weight:700;font-size:.8em;line-height:1.14em;text-transform:uppercase}
.flaps.sm .flap{width:.58em;height:1em;}
.flaps.sm .flap s{font-size:.68em;}
@keyframes flp{0%{transform:rotateX(-96deg);opacity:.2}100%{transform:none;opacity:1}}
.legmeta{display:flex;gap:15px;flex-wrap:wrap;margin-top:11px;padding-top:10px;}
.legmeta .v{font-family:"Oswald",sans-serif;font-weight:700;font-size:18px}
.gapnote{margin-top:10px;padding:8px 10px;
 font-size:12.4px;}
.gapnote b{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.4px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px}

/* ---------- карточки ---------- */
.hint{padding:8px 13px;font-family:"IBM Plex Mono",monospace;font-size:9.6px;letter-spacing:.11em;text-transform:uppercase;}
.cards{display:flex;flex-direction:column;gap:10px;padding:12px 13px 13px}
.card{position:relative;text-align:left;padding:11px 12px 10px 16px;cursor:pointer;
 
 transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s,background .2s;outline:none}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;background:var(--c);transition:width .2s}
.card:hover{transform:translateY(-3px);}
.card:hover::before{width:7px}
.card.dis{cursor:not-allowed;}
.card.dis:hover{transform:none;box-shadow:none}
.card.lock{cursor:help}
.chead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cico{width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center;}
.cico svg{width:14px;height:14px;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cmode{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.17em;text-transform:uppercase;}
.cname{font-family:"Oswald",sans-serif;font-weight:500;font-size:16px;letter-spacing:.02em;text-transform:uppercase;margin-left:auto;text-align:right;line-height:1.12}
.csub{font-size:11.4px;margin-top:6px;font-family:"IBM Plex Mono",monospace;line-height:1.45}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:10px;}
.cgrid div{padding:5px 6px}
.cgrid .k{font-family:"IBM Plex Mono",monospace;font-size:8.2px;letter-spacing:.12em;text-transform:uppercase;display:block}
.cgrid .n{font-family:"Oswald",sans-serif;font-weight:700;font-size:15.5px;display:block}
.cgrid .n u{text-decoration:none;font-size:.56em;}
.badges{display:flex;flex-wrap:wrap;margin-top:8px}
.bdg{font-family:"IBM Plex Mono",monospace;font-size:8.4px;letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;}
.det{margin-top:9px;display:none;padding-top:8px}
.card.open .det{display:block;animation:fu .25s ease}
.sg{display:grid;grid-template-columns:15px 1fr auto;gap:8px;align-items:center;padding:3px 0;font-size:12px}
.sg>i{display:grid;place-items:center;color:var(--dim)}
.sg>i svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8}
.sg .sn{line-height:1.3}
.sg .sn em{display:block;font-style:normal;font-size:10.2px;font-family:"IBM Plex Mono",monospace}
.sg .sv{font-family:"IBM Plex Mono",monospace;font-size:10.4px;text-align:right;white-space:nowrap}
.cfoot{display:flex;align-items:center;gap:8px;margin-top:9px}
.more{font-family:"IBM Plex Mono",monospace;font-size:9.2px;letter-spacing:.12em;text-transform:uppercase;
 padding:5px 8px;transition:.2s}
.go{margin-left:auto;font-family:"Oswald",sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
 padding:8px 14px;transition:.2s;}
.go:hover{filter:brightness(1.15);transform:translateY(-1px)}
.go[disabled]{opacity:.4;cursor:progress;filter:grayscale(.5)}
.why{margin-top:9px;font-size:12px;padding:7px 9px;display:none}
.card.lock.open .why{display:block;animation:fu .25s ease}
.ghost{font-family:"IBM Plex Mono",monospace;font-size:9.8px;margin-top:7px;letter-spacing:.04em}
@keyframes fu{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.advisor{display:flex;gap:10px;padding:10px 13px;align-items:flex-start;
 }
.av{width:25px;height:25px;flex:0 0 auto;display:grid;place-items:center;font-family:"Oswald",sans-serif;font-weight:700;font-size:10px;
 }
.at{font-size:12.8px;}.at b{font-weight:600}
.ctrl{display:flex;gap:8px;flex-wrap:wrap;padding:10px 13px;align-items:center}
.ctrl .sp{flex:1 1 100px}

/* ---------- метрики ---------- */
.meters{padding:11px 13px 13px;display:flex;flex-direction:column;gap:11px}
.mt .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mt .nm{font-family:"IBM Plex Mono",monospace;font-size:9.2px;letter-spacing:.14em;text-transform:uppercase;}
.mt .vv{font-family:"Oswald",sans-serif;font-weight:700;font-size:15.5px}
.mt .sc{font-family:"IBM Plex Mono",monospace;font-size:10px;}
.mt .track{position:relative;margin-top:5px;}
.mt .fill{position:absolute;left:0;top:0;bottom:0;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.mt .mark{position:absolute;top:-2px;bottom:-2px;width:2px;transition:left .8s cubic-bezier(.2,.8,.2,1)}
.mt .ends{display:flex;justify-content:space-between;font-family:"IBM Plex Mono",monospace;font-size:8.4px;margin-top:3px}
.tgt{display:flex;gap:6px;flex-wrap:wrap;padding:10px 13px;align-items:center}
.tg{font-family:"IBM Plex Mono",monospace;font-size:9.8px;letter-spacing:.07em;padding:5px 8px;transition:.3s}
.log{max-height:270px;overflow:auto;padding:5px 12px 12px}
.le{display:grid;grid-template-columns:auto 1fr;gap:9px;padding:8px 0;animation:fu .3s ease}
.le .ic{width:19px;height:19px;display:grid;place-items:center;font-size:10px;}
.le .tx{font-size:12.4px;line-height:1.4}
.le .tx b{display:block;font-family:"Oswald",sans-serif;font-weight:500;font-size:12.8px;letter-spacing:.05em;text-transform:uppercase;}
.le .tx em{display:block;font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:10.2px;margin-top:2px}
/* ---------- тикер ---------- */
.ticker{position:relative;z-index:10;
 overflow:hidden}
.tkin{display:flex;gap:42px;width:max-content;padding:8px 0;animation:tk 80s linear infinite}
.ticker:hover .tkin{animation-play-state:paused}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tkin span{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;white-space:nowrap;display:flex;gap:8px}
.tkin span i{font-style:normal}
footer.end{position:relative;z-index:10;padding:18px clamp(10px,3vw,28px) 30px;margin-top:6px;
 font-family:"IBM Plex Mono",monospace;font-size:11.2px;letter-spacing:.04em}

/* ---------- оверлей ---------- */
.ov{position:fixed;inset:0;z-index:90;display:none;align-items:flex-start;justify-content:center;padding:20px 12px;overflow:auto;
 }
.ov.on{display:flex}
.sheet{width:min(1000px,100%);
 animation:si .4s cubic-bezier(.2,.9,.2,1)}
@keyframes si{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:none}}
.sh{padding:19px 22px 15px;}
.sb{padding:17px 22px 22px}
.hero{font-family:"Oswald",sans-serif;font-weight:700;font-size:clamp(30px,6.2vw,62px);line-height:.94;letter-spacing:.01em;text-transform:uppercase}
.hero em{font-style:normal;}
.sub{font-size:13.8px;max-width:70ch;margin-top:9px}
.brief{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:19px}
@media(max-width:800px){.brief{grid-template-columns:1fr}}
.brow{display:grid;grid-template-columns:24px 1fr auto auto;gap:9px;align-items:center;padding:6px 0;
 font-family:"IBM Plex Mono",monospace;font-size:11.4px;animation:fu .4s ease both}
.brow .no{font-size:9.4px}
.brow .dst{font-family:"Oswald",sans-serif;font-weight:500;font-size:14.5px;letter-spacing:.06em;text-transform:uppercase}
.brow .via{font-size:9.4px;letter-spacing:.11em;text-transform:uppercase}
.brow .st{font-size:9.4px;letter-spacing:.11em;text-transform:uppercase;}
.pass{display:flex;flex-direction:column;gap:8px;margin-top:5px}
.ps{text-align:left;display:grid;grid-template-columns:1fr auto;gap:3px;padding:10px 12px;transition:.2s;
 }
.ps b{font-family:"Oswald",sans-serif;font-weight:700;font-size:15.5px;letter-spacing:.09em;text-transform:uppercase}
.ps .pv{font-family:"IBM Plex Mono",monospace;font-size:11.6px;}
.ps small{grid-column:1/-1;font-family:"IBM Plex Mono",monospace;font-size:10.2px;}
.ps:hover,.ps.on{border-color:var(--amber);background:linear-gradient(120deg,rgba(255,182,74,.14),rgba(8,22,27,.6));transform:translateX(3px)}
.cta{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;
 font-family:"Oswald",sans-serif;font-weight:700;font-size:16px;letter-spacing:.13em;text-transform:uppercase;transition:.2s;}
.cta:hover{filter:brightness(1.12);transform:translateY(-2px)}
.rank{width:104px;height:104px;flex:0 0 auto;display:grid;place-items:center;
 font-family:"Oswald",sans-serif;font-weight:700;font-size:54px;
 animation:ri .7s cubic-bezier(.2,.9,.2,1)}
@keyframes ri{0%{transform:scale(.4) rotate(-14deg);opacity:0}100%{transform:none;opacity:1}}
.idx{font-family:"Oswald",sans-serif;font-weight:700;font-size:clamp(32px,5.6vw,54px);line-height:.9}
.tbl{width:100%;border-collapse:collapse;font-family:"IBM Plex Mono",monospace;font-size:11.2px;margin-top:5px}
.tbl th{text-align:left;font-weight:500;font-size:9px;letter-spacing:.13em;text-transform:uppercase;padding:6px 7px;}
.tbl td{padding:6px 7px;vertical-align:top}
.medals{display:flex;flex-wrap:wrap;margin-top:11px}
.med{display:flex;gap:7px;align-items:center;padding:6px 10px;
 font-family:"IBM Plex Mono",monospace;font-size:10.2px;letter-spacing:.06em;animation:fu .5s ease both}
.md h4{font-size:11.8px;letter-spacing:.14em;margin-top:14px}
.md p,.md li{font-size:13px;color:var(--ink2)}
.md ul{padding-left:16px;display:flex;flex-direction:column;gap:5px;margin-top:5px}
.ef{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1px;margin-top:7px}
.ef div{padding:7px 9px}
.ef b{display:block;font-family:"IBM Plex Mono",monospace;font-size:12.2px;}
.ef span{font-size:11.4px;}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;margin-top:15px}
.kpis div{padding:8px 10px}
.kpis .n{font-family:"Oswald",sans-serif;font-weight:700;font-size:19px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,18px);z-index:99;opacity:0;pointer-events:none;
 padding:10px 17px;
 font-family:"IBM Plex Mono",monospace;font-size:11.8px;letter-spacing:.05em;transition:.3s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.errbar{position:fixed;left:0;right:0;bottom:0;z-index:120;
 font-family:"IBM Plex Mono",monospace;font-size:11.5px;padding:9px 14px;display:none}
.errbar.on{display:block}

/* =========================================================
   LIGHT HIGH-CONTRAST THEME PATCH
   Только внешний вид: светлый фон, белый цвет, контраст, скругления
   ========================================================= */

:root{
  color-scheme: light;

  --bg:#f2f7f9;
  --bg2:#eaf2f5;
  --panel:#ffffff;
  --panel2:#f8fbfc;
  --panel3:#eef5f8;

  --ink:#0f2028;
  --ink2:#294652;
  --dim:#5d747d;
  --line:#d8e5ea;
  --line2:#c7d9e0;

  --amber:#f59f00;
  --amber-dark:#b45f06;
  --gold:#a65b00;
  --hot:#c92a2a;
  --green:#087f4b;

  --rail:#087f4b;
  --air:#0b7fb8;
  --ship:#4a58c9;
  --bus:#8b5a2b;
  --hitch:#c2255c;
  --multi:#b45f06;

  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:22px;

  --shadow-soft:0 14px 38px -24px rgba(15,32,40,.28);
  --shadow-panel:0 18px 48px -30px rgba(15,32,40,.30);
  --shadow-card:0 12px 28px -22px rgba(15,32,40,.35);
}

html,
body{
  background:var(--bg) !important;
  color:var(--ink) !important;
}

body{
  font-synthesis-weight:auto;
}

::selection{
  background:#ffe3ad !important;
  color:#102027 !important;
}

*:focus-visible{
  outline:2px solid var(--amber) !important;
  outline-offset:2px !important;
}

button,
input,
textarea,
select{
  font-family:inherit;
}

/* ---------------------------------------------------------
   ФОН
   --------------------------------------------------------- */
.ambient,
.ambient *{
  pointer-events:none !important;
}

.ag,
.amb-grad{
  background:
    radial-gradient(58% 44% at 12% 6%, rgba(145,205,225,.42), transparent 62%),
    radial-gradient(52% 46% at 88% 12%, rgba(255,205,120,.30), transparent 60%),
    radial-gradient(70% 60% at 50% 108%, rgba(160,210,225,.34), transparent 65%),
    linear-gradient(178deg,#fbfdfe 0%,#eff7fa 45%,#f5fafc 100%) !important;
}

.af,
.amb-grid{
  opacity:.42 !important;
  background-image:
    linear-gradient(rgba(25,75,92,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,75,92,.075) 1px, transparent 1px) !important;
  background-size:64px 64px !important;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 20%, #000 30%, transparent 88%) !important;
  mask-image:radial-gradient(120% 90% at 50% 20%, #000 30%, transparent 88%) !important;
}

.ad,
.amb-dots{
  opacity:.20 !important;
  background-image:radial-gradient(rgba(25,75,92,.22) 1px, transparent 1.4px) !important;
  background-size:26px 26px !important;
  -webkit-mask-image:radial-gradient(90% 70% at 70% 80%, #000, transparent 75%) !important;
  mask-image:radial-gradient(90% 70% at 70% 80%, #000, transparent 75%) !important;
}

.ab,
.amb-beam{
  background:linear-gradient(90deg, transparent, rgba(245,159,0,.10), transparent) !important;
}

.an,
.amb-noise{
  opacity:.035 !important;
  mix-blend-mode:multiply !important;
}

.amb-scan{
  display:none !important;
}

/* ---------------------------------------------------------
   ШАПКА
   --------------------------------------------------------- */
.topbar{
  background:rgba(255,255,255,.92) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 10px 28px -24px rgba(15,32,40,.35) !important;
  backdrop-filter:blur(10px) !important;
}

.brand b{
  color:var(--ink) !important;
}

.brand small{
  color:var(--dim) !important;
}

.mark{
  background:linear-gradient(145deg,#fff7e6,#ffd58a) !important;
  color:#7a4300 !important;
  border:1px solid #f0c674 !important;
  box-shadow:0 10px 24px -18px rgba(180,95,6,.65) !important;
  border-radius:12px !important;
}

.tbtn{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
  color:var(--ink2) !important;
  border-radius:12px !important;
  font-weight:500;
}

.tbtn:hover{
  background:var(--amber) !important;
  border-color:var(--amber) !important;
  color:#102027 !important;
}

.tbtn.on{
  background:#fff4df !important;
  border-color:#f0c674 !important;
  color:#7a4300 !important;
}

/* ---------------------------------------------------------
   HUD
   --------------------------------------------------------- */
.hud{
  background:rgba(255,255,255,.94) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 12px 30px -28px rgba(15,32,40,.35) !important;
  backdrop-filter:blur(10px) !important;
}

.stat{
  border-right:1px solid var(--line) !important;
}

.stat:last-child{
  border-right:none !important;
}

.stat .lbl{
  color:var(--dim) !important;
}

.stat .v{
  color:var(--ink) !important;
}

.stat .v u{
  color:var(--dim) !important;
}

.stat.warn .v{
  color:var(--hot) !important;
}

.stat.good .v{
  color:var(--green) !important;
}

.stat .bar{
  background:var(--amber) !important;
  border-radius:0 0 10px 10px;
}

#bTime{ background:var(--air) !important; }
#bCo2{ background:var(--green) !important; }
#bWon{ background:var(--multi) !important; }
#bKm{ background:var(--ship) !important; }
#bCtry{ background:var(--air) !important; }

.clock{
  border-right:1px solid var(--line) !important;
}

.clock .v{
  color:var(--gold) !important;
}

.prog .lbl{
  color:var(--dim) !important;
}

.prog .lbl b{
  color:var(--ink) !important;
}

.ptrack{
  gap:5px;
}

.pseg{
  background:#e3edf1 !important;
  border-radius:999px !important;
  height:6px !important;
  overflow:hidden;
}

.pseg i{
  background:linear-gradient(90deg,var(--amber),#ffc06b) !important;
  border-radius:999px !important;
}

.pseg.now{
  box-shadow:0 0 0 1px var(--amber), 0 0 0 4px rgba(245,159,0,.14) !important;
}

/* ---------------------------------------------------------
   ОБЩИЕ ПАНЕЛИ
   --------------------------------------------------------- */
.shell{
  gap:18px !important;
}

.panel{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-xl) !important;
  box-shadow:var(--shadow-panel) !important;
  overflow:hidden !important;
}

.panel::before,
.panel::after{
  display:none !important;
}

.ph{
  border-bottom:1px solid var(--line) !important;
  background:linear-gradient(180deg,#ffffff,#f8fbfc) !important;
}

.ph h3{
  color:var(--ink) !important;
}

.ph .tag{
  color:var(--dim) !important;
}

/* ---------------------------------------------------------
   КАРТА
   --------------------------------------------------------- */
.mapwrap{
  background:#eaf5fa !important;
  border-radius:var(--radius-lg) !important;
  overflow:hidden !important;
  padding:8px !important;
}

svg.world{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2/1;
  border-radius:var(--radius-md) !important;
  background:#eaf5fa !important;
  cursor:grab;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}

svg.world.dragging{
  cursor:grabbing;
}

.sea,
svg.world .sea{
  fill:#e8f4fa !important;
}

.land,
svg.world .land{
  fill:#ffffff !important;
  stroke:#8fb2bf !important;
  stroke-width:.9 !important;
  vector-effect:non-scaling-stroke !important;
}

.water,
svg.world .water{
  fill:#d9edf7 !important;
  stroke:#a8c6d2 !important;
  stroke-width:.7 !important;
  vector-effect:non-scaling-stroke !important;
}

.grat,
svg.world .grat{
  stroke:rgba(25,75,92,.16) !important;
  stroke-width:.7 !important;
  vector-effect:non-scaling-stroke !important;
}

.eq,
svg.world .eq{
  stroke:rgba(180,95,6,.42) !important;
  stroke-width:1 !important;
  stroke-dasharray:5 4 !important;
  vector-effect:non-scaling-stroke !important;
}

.fut,
svg.world .fut{
  fill:none !important;
  stroke:rgba(45,85,98,.42) !important;
  stroke-width:1.3 !important;
  stroke-dasharray:3 5 !important;
  stroke-linecap:round !important;
  vector-effect:non-scaling-stroke !important;
}

.past,
svg.world .past{
  fill:none !important;
  stroke:#b45f06 !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  vector-effect:non-scaling-stroke !important;
}

.prev,
svg.world .prev{
  fill:none !important;
  stroke-width:2.6 !important;
  stroke-dasharray:7 5 !important;
  stroke-linecap:round !important;
  vector-effect:non-scaling-stroke !important;
  opacity:1 !important;
}

/* Точки городов */
.cityNode{
  pointer-events:auto !important;
  cursor:pointer !important;
}

.cityHit{
  fill:transparent !important;
  stroke:none !important;
  pointer-events:all !important;
  cursor:pointer !important;
}

.cityDot{
  fill:rgba(82,120,132,.30) !important;
  stroke:#ffffff !important;
  stroke-width:.8 !important;
  transition:fill .16s ease, stroke .16s ease !important;
  vector-effect:non-scaling-stroke !important;
}

.cityNode.cand .cityDot{
  fill:#d98324 !important;
  stroke:#ffffff !important;
  filter:drop-shadow(0 0 4px rgba(217,131,36,.35)) !important;
}

.cityNode.current .cityDot{
  fill:#0f2e39 !important;
  stroke:#ffffff !important;
  filter:drop-shadow(0 0 5px rgba(15,46,57,.25)) !important;
}

.cityNode.dest .cityDot{
  fill:#c92a2a !important;
  stroke:#ffffff !important;
}

.cityNode:hover .cityDot{
  fill:#0f2e39 !important;
  stroke:#ffffff !important;
}

.cityNode.cand:hover .cityDot{
  fill:#b45f06 !important;
}

/* Старые классы, если остались */
.dot{
  fill:#d98324 !important;
  stroke:#ffffff !important;
  stroke-width:1 !important;
}

.dot.live{
  fill:#0f2e39 !important;
}

.mapCurrent{
  fill:#0f2e39 !important;
  stroke:#ffffff !important;
  stroke-width:1.4 !important;
}

.mapDest{
  fill:none !important;
  stroke:#b45f06 !important;
  stroke-width:1.8 !important;
}

.pls{
  fill:none !important;
  stroke:#c92a2a !important;
  stroke-width:1.5 !important;
}

/* Подписи */
#gLabels,
#gMarkers,
.cityLabel,
.clab,
svg.world text{
  pointer-events:none !important;
}

.cityLabel,
.clab,
svg.world text{
  font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace !important;
  font-size:9px !important;
  fill:#17323b !important;
  paint-order:stroke !important;
  stroke:rgba(255,255,255,.92) !important;
  stroke-width:2.6px !important;
  stroke-linejoin:round !important;
  letter-spacing:.03em !important;
}

.cityLabel.cand,
.clab.cand{
  fill:#8a4b00 !important;
  font-weight:600 !important;
}

.cityLabel.current,
.clab.current,
.clab.k{
  fill:#071a20 !important;
  font-weight:600 !important;
}

.cityLabel.dest,
.clab.dest{
  fill:#a61e1e !important;
  font-weight:600 !important;
}

/* Цвета дуг по видам транспорта, если JS ставит stroke атрибутом */
path[stroke="#57c9ff"]{ stroke:#0b7fb8 !important; }
path[stroke="#4fd18b"]{ stroke:#087f4b !important; }
path[stroke="#93a4ff"]{ stroke:#4a58c9 !important; }
path[stroke="#cba077"]{ stroke:#8b5a2b !important; }
path[stroke="#f0b34a"]{ stroke:#b45f06 !important; }
path[stroke="#ffd79a"]{ stroke:#a65b00 !important; }
path[stroke="#ff6f5c"]{ stroke:#c92a2a !important; }
path[stroke="#42dc9b"]{ stroke:#087f4b !important; }

/* Легенда карты */
.mlegend{
  border-top:1px solid var(--line) !important;
  background:#ffffff !important;
}

.mlegend span{
  color:var(--dim) !important;
}

.mlegend i{
  border-radius:999px !important;
  height:3px !important;
}

/* Панель управления зумом */
.zoomctl{
  pointer-events:auto !important;
}

.zoomctl button{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
  color:var(--ink) !important;
  border-radius:12px !important;
  box-shadow:0 8px 20px -16px rgba(15,32,40,.45) !important;
}

.zoomctl button:hover{
  background:var(--amber) !important;
  border-color:var(--amber) !important;
  color:#102027 !important;
}

.mapHelp{
  pointer-events:none !important;
  color:#526b75 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.85) !important;
}

.travel{
  pointer-events:none !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid #f0c674 !important;
  border-radius:var(--radius-md) !important;
  box-shadow:0 16px 38px -26px rgba(180,95,6,.45) !important;
}

.travel .lbl{
  color:var(--dim) !important;
}

.travel .tv{
  color:var(--gold) !important;
}

.travel .tp{
  background:#e3edf1 !important;
  border-radius:999px !important;
  height:6px !important;
}

.travel .tp i{
  background:linear-gradient(90deg,var(--amber),#ffc06b) !important;
  border-radius:999px !important;
}

/* ---------------------------------------------------------
   ТАБЛО / СПЛИТ-ФЛАП
   --------------------------------------------------------- */
.board{
  background:#ffffff !important;
}

.od .arw{
  color:var(--amber-dark) !important;
}

.flaps{
  perspective:520px;
}

.flap{
  background:linear-gradient(180deg,#ffffff 0 49%,#eef4f7 51% 100%) !important;
  box-shadow:
    inset 0 0 0 1px #d6e3e8,
    0 3px 8px rgba(15,32,40,.12) !important;
  border-radius:7px !important;
}

.flap::after{
  background:rgba(15,32,40,.18) !important;
}

.flap s{
  color:#10232b !important;
}

.flaps.sm .flap{
  background:linear-gradient(180deg,#f8fbfc 0 49%,#eaf2f5 51% 100%) !important;
}

.flaps.sm .flap s{
  color:#34515b !important;
}

.legmeta{
  border-top:1px dashed var(--line) !important;
}

.legmeta .lbl{
  color:var(--dim) !important;
}

.legmeta .v{
  color:var(--ink) !important;
}

.gapnote{
  background:#fff5f5 !important;
  border-left:3px solid var(--hot) !important;
  color:#7f1d1d !important;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0 !important;
}

.gapnote b{
  color:#a61e1e !important;
}

/* ---------------------------------------------------------
   КАРТОЧКИ ГОРОДОВ / ТРАНСПОРТА
   --------------------------------------------------------- */
.hint{
  background:#f8fbfc !important;
  border-bottom:1px solid var(--line) !important;
  color:var(--dim) !important;
}

.cards{
  background:#ffffff !important;
}

.card{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow-card) !important;
  color:var(--ink) !important;
}

.card::before{
  width:5px !important;
  border-radius:var(--radius-lg) 0 0 var(--radius-lg) !important;
  filter:brightness(.78) saturate(1.25) !important;
}

.card:hover{
  border-color:#bfd4dc !important;
  box-shadow:0 18px 42px -26px rgba(15,32,40,.42) !important;
  background:#fdfeff !important;
}

.card:focus-visible{
  border-color:var(--amber) !important;
  box-shadow:0 0 0 3px rgba(245,159,0,.18) !important;
}

.card.sel{
  border-color:var(--amber) !important;
  background:#fffaf0 !important;
  box-shadow:0 0 0 2px rgba(245,159,0,.32), 0 18px 42px -28px rgba(180,95,6,.45) !important;
}

.card.dis{
  opacity:.62 !important;
  filter:saturate(.55) !important;
  background:#f8fbfc !important;
}

.card.lock{
  background:#fff8f7 !important;
  border-color:#f2c7c2 !important;
}

.chead{
  color:var(--ink) !important;
}

.cico{
  background:#f1f6f8 !important;
  color:#0f2e39 !important;
  border-radius:10px !important;
}

.cico svg{
  stroke:currentColor !important;
}

.cmode{
  color:#45626c !important;
}

.cname{
  color:var(--ink) !important;
}

.csub{
  color:var(--dim) !important;
}

.cgrid{
  background:var(--line) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-sm) !important;
  overflow:hidden !important;
}

.cgrid div{
  background:#f8fbfc !important;
}

.cgrid .k{
  color:var(--dim) !important;
}

.cgrid .n{
  color:var(--ink) !important;
}

.cgrid .n u{
  color:var(--dim) !important;
}

.badges{
  gap:6px;
}

.bdg{
  background:#f3f7f9 !important;
  border:1px solid #cfdde3 !important;
  color:#24404a !important;
  border-radius:999px !important;
  font-weight:500;
}

.b1{
  background:#e8f6ff !important;
  border-color:#9ed3ef !important;
  color:#075985 !important;
}

.b2{
  background:#e9fbf1 !important;
  border-color:#9fdfbb !important;
  color:#0b6b3a !important;
}

.b3{
  background:#f0fff4 !important;
  border-color:#a8e6c1 !important;
  color:#116d3a !important;
}

.b4{
  background:#fff7e6 !important;
  border-color:#f0c674 !important;
  color:#8a4b00 !important;
}

.b5{
  background:#fff0ef !important;
  border-color:#f4b0aa !important;
  color:#a61e1e !important;
}

.det{
  border-top:1px dashed var(--line) !important;
}

.sg .sn{
  color:var(--ink2) !important;
}

.sg .sn em{
  color:var(--dim) !important;
}

.sg .sv{
  color:#526b75 !important;
}

.sg > i{
  color:#6c8892 !important;
}

.cfoot{
  border-top:1px solid #edf3f6;
  padding-top:9px;
}

.more{
  background:#f3f7f9 !important;
  border:1px solid var(--line) !important;
  color:var(--ink2) !important;
  border-radius:999px !important;
}

.more:hover{
  background:#fff4df !important;
  border-color:#f0c674 !important;
  color:#7a4300 !important;
}

.go{
  background:#0f2e39 !important;
  color:#ffffff !important;
  border-radius:999px !important;
  box-shadow:0 12px 26px -18px rgba(15,46,57,.70) !important;
}

.go:hover{
  background:#174656 !important;
  color:#ffffff !important;
}

.go[disabled]{
  background:#9eb3ba !important;
  color:#f5f8fa !important;
  box-shadow:none !important;
}

.why{
  background:#fff5f5 !important;
  border-left:3px solid var(--hot) !important;
  color:#7f1d1d !important;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0 !important;
}

.ghost{
  color:var(--dim) !important;
}

/* ---------------------------------------------------------
   СОВЕТНИК / КОНТРОЛЫ
   --------------------------------------------------------- */
.advisor{
  background:linear-gradient(120deg,#fff9ed,#ffffff) !important;
  border-top:1px solid var(--line) !important;
}

.av{
  background:var(--amber) !important;
  color:#102027 !important;
  border-radius:999px !important;
  box-shadow:0 10px 24px -16px rgba(245,159,0,.8) !important;
}

.at{
  color:var(--ink2) !important;
}

.at b{
  color:var(--gold) !important;
}

.ctrl{
  background:#f8fbfc !important;
  border-top:1px solid var(--line) !important;
}

/* ---------------------------------------------------------
   МЕТРИКИ / ЦЕЛИ
   --------------------------------------------------------- */
.meters{
  background:#ffffff !important;
}

.mt .nm{
  color:var(--dim) !important;
}

.mt .vv{
  color:var(--ink) !important;
}

.mt .sc{
  color:var(--dim) !important;
}

.mt .track{
  background:#e6eef2 !important;
  border-radius:999px !important;
  height:9px !important;
  overflow:hidden;
}

.mt .fill{
  border-radius:999px !important;
}

.mt .mark{
  background:#0f2028 !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.9) !important;
  border-radius:999px;
}

.mt .ends{
  color:#6c8892 !important;
}

.tgt{
  border-top:1px solid var(--line) !important;
  background:#f8fbfc !important;
}

.tg{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
  color:var(--ink2) !important;
  border-radius:999px !important;
}

.tg.hit{
  background:#e9fbf1 !important;
  border-color:#7fd3a5 !important;
  color:#0b6b3a !important;
}

/* ---------------------------------------------------------
   ЖУРНАЛ
   --------------------------------------------------------- */
.log{
  background:#ffffff !important;
}

.le{
  border-bottom:1px dashed #e3edf1 !important;
}

.le .ic{
  background:#f1f6f8 !important;
  color:var(--gold) !important;
  border-radius:9px !important;
}

.le.ev .ic{
  background:#fff0ef !important;
  color:var(--hot) !important;
}

.le.ok .ic{
  background:#e9fbf1 !important;
  color:var(--green) !important;
}

.le .tx{
  color:var(--ink2) !important;
}

.le .tx b{
  color:var(--ink) !important;
}

.le .tx em{
  color:var(--dim) !important;
}

/* ---------------------------------------------------------
   ТИКЕР / ФУТЕР
   --------------------------------------------------------- */
.ticker{
  background:#ffffff !important;
  border-top:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;
}

.tkin span{
  color:var(--ink2) !important;
}

.tkin span i{
  color:var(--amber-dark) !important;
}

footer.end{
  background:#f8fbfc !important;
  border-top:1px solid var(--line) !important;
  color:var(--dim) !important;
}

/* ---------------------------------------------------------
   ОВЕРЛЕЙ / МОДАЛКИ / ИНТРО
   --------------------------------------------------------- */
.ov{
  background:rgba(24,54,66,.28) !important;
  backdrop-filter:blur(8px) !important;
}

.sheet{
  background:#ffffff !important;
  border:1px solid #d8e5ea !important;
  border-radius:24px !important;
  box-shadow:0 40px 100px -40px rgba(15,32,40,.45) !important;
  overflow:hidden !important;
}

.sh{
  border-bottom:1px solid var(--line) !important;
  background:linear-gradient(180deg,#ffffff,#f8fbfc) !important;
}

.sb{
  background:#ffffff !important;
}

.hero{
  color:var(--ink) !important;
}

.hero em{
  color:var(--amber-dark) !important;
}

.sub{
  color:var(--ink2) !important;
}

.brow{
  border-bottom:1px dashed #e3edf1 !important;
}

.brow .no{
  color:var(--dim) !important;
}

.brow .dst{
  color:var(--ink) !important;
}

.brow .via{
  color:var(--dim) !important;
}

.brow .st{
  color:var(--green) !important;
}

.brow .st.w{
  color:var(--amber-dark) !important;
}

.brow .st.l{
  color:var(--hot) !important;
}

.ps{
  background:#f8fbfc !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-md) !important;
  color:var(--ink) !important;
}

.ps:hover,
.ps.on{
  background:#fffaf0 !important;
  border-color:#f0c674 !important;
  color:var(--ink) !important;
}

.ps b{
  color:var(--ink) !important;
}

.ps .pv{
  color:var(--gold) !important;
}

.ps small{
  color:var(--dim) !important;
}

.cta{
  background:var(--amber) !important;
  color:#102027 !important;
  border-radius:999px !important;
  box-shadow:0 18px 38px -22px rgba(245,159,0,.75) !important;
}

.cta:hover{
  background:#e67e00 !important;
  color:#102027 !important;
}

.cta.gh{
  background:#ffffff !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
  box-shadow:none !important;
}

.cta.gh:hover{
  border-color:var(--amber) !important;
  color:var(--gold) !important;
  background:#fffaf0 !important;
}

.rank{
  background:linear-gradient(145deg,#ffd79a,#f59f00) !important;
  color:#102027 !important;
  border-radius:20px !important;
  box-shadow:0 24px 60px -28px rgba(245,159,0,.75) !important;
}

.idx{
  color:var(--ink) !important;
}

.tbl{
  color:var(--ink2) !important;
}

.tbl th{
  color:var(--dim) !important;
  border-bottom:1px solid var(--line) !important;
}

.tbl td{
  border-bottom:1px dashed #e3edf1 !important;
}

.tbl tr:hover td{
  background:#f8fbfc !important;
}

.medals{
  gap:8px;
}

.med{
  background:#fff8ea !important;
  border:1px solid #f0c674 !important;
  color:#7a4300 !important;
  border-radius:999px !important;
}

.md h4{
  color:var(--gold) !important;
}

.md p,
.md li{
  color:var(--ink2) !important;
}

.ef{
  background:var(--line) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-md) !important;
  overflow:hidden !important;
}

.ef div{
  background:#f8fbfc !important;
}

.ef b{
  color:var(--gold) !important;
}

.ef span{
  color:var(--ink2) !important;
}

.kpis{
  background:var(--line) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-md) !important;
  overflow:hidden !important;
}

.kpis div{
  background:#f8fbfc !important;
}

.kpis .n{
  color:var(--ink) !important;
}

#q{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
  color:var(--ink) !important;
  border-radius:12px !important;
}

#q::placeholder{
  color:#8aa0a8 !important;
}

/* ---------------------------------------------------------
   ТОСТ / ОШИБКА
   --------------------------------------------------------- */
.toast{
  background:#ffffff !important;
  border:1px solid var(--amber) !important;
  color:#7a4300 !important;
  border-radius:14px !important;
  box-shadow:0 24px 60px -30px rgba(15,32,40,.45) !important;
}

.errbar{
  background:#fff0f0 !important;
  border-top:1px solid var(--hot) !important;
  color:#8a1616 !important;
}

/* ---------------------------------------------------------
   СКРОЛЛБАРЫ
   --------------------------------------------------------- */
::-webkit-scrollbar{
  width:10px;
  height:10px;
}

::-webkit-scrollbar-track{
  background:#eef5f8;
}

::-webkit-scrollbar-thumb{
  background:#c2d3da;
  border-radius:999px;
  border:2px solid #eef5f8;
}

::-webkit-scrollbar-thumb:hover{
  background:#a8bfc8;
}

/* ---------------------------------------------------------
   ДОПОЛНИТЕЛЬНАЯ ЧИТАЕМОСТЬ МЕЛКОГО ТЕКСТА
   --------------------------------------------------------- */
.lbl,
.ph .tag,
.csub,
.ghost,
.mt .ends,
.le .tx em,
.brow .via,
.ps small,
footer.end,
.mapHelp{
  letter-spacing:.02em;
}

.csub,
.ghost,
.le .tx em,
.ps small{
  line-height:1.45;
}

/* ---------------------------------------------------------
   МЯГЧИЕ УГОЛКИ ДЛЯ ВСЕХ ИНТЕРАКТИВНЫХ ЭЛЕМЕНТОВ
   --------------------------------------------------------- */
button,
input,
.card,
.panel,
.sheet,
.ps,
.cta,
.tg,
.med,
.bdg,
.more,
.go,
.zoomctl button,
.tbtn,
#q{
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.card,
.panel,
.sheet{
  isolation:isolate;
}

/* =========================================================
   ACCURATE COASTLINE
   ========================================================= */

path.land.accurate,
.land.accurate{
  fill:#ffffff !important;
  stroke:#8fb2bf !important;
  stroke-width:.9 !important;
  stroke-linejoin:round !important;
  stroke-linecap:round !important;
  vector-effect:non-scaling-stroke !important;
  pointer-events:none !important;
}

.mapHelp .src{
  color:#0b7fb8;
  font-weight:600;
}

.mapHelp.loading .src{
  color:#b45f06;
}

.mapHelp.fallback .src{
  color:#8b5a2b;
}
/* =========================================================
   START CITY PICKER
   ========================================================= */

.start-city-block{
  margin:0 0 16px 0;
  padding:14px;
  background:linear-gradient(180deg,#ffffff,#f8fbfc);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 14px 34px -26px rgba(15,32,40,.35);
}

.scp-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.scp-head .sub{
  margin-top:4px;
  font-size:12.5px;
  color:var(--ink2);
  max-width:70ch;
}

.scp-selected{
  margin-left:auto;
  min-width:210px;
  padding:9px 12px;
  border:1px solid #f0c674;
  border-radius:14px;
  background:#fffaf0;
  color:var(--ink);
  box-shadow:0 10px 24px -20px rgba(180,95,6,.55);
}

.scp-selected b{
  display:block;
  font-family:"Oswald",sans-serif;
  font-size:16px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#102027;
}

.scp-selected span{
  display:block;
  margin-top:2px;
  font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;
  color:var(--dim);
}

.scp-selected .cinfo{
  max-width:340px;
  font-size:12px;
  color:#34474d;
}

.scp-selected .cinfo .wiki{
  color:#b45f06;
}

.scp-search{
  margin-bottom:10px;
}

#startCityQuery{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#ffffff;
  color:var(--ink);
  font-family:"IBM Plex Mono",monospace;
  font-size:13px;
  outline:none;
  box-shadow:inset 0 1px 2px rgba(15,32,40,.05);
}

#startCityQuery:focus{
  border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(245,159,0,.16);
}

#startCityQuery::placeholder{
  color:#8aa0a8;
}

.scp-layout{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(230px,.72fr);
  gap:12px;
  align-items:start;
}

@media(max-width:880px){
  .scp-layout{
    grid-template-columns:1fr;
  }
}

.scp-mapwrap{
  border:1px solid var(--line);
  border-radius:16px;
  background:#eaf5fa;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}

#startCityMap{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2/1;
  background:#eaf5fa;
}

.scp-help{
  position:absolute;
  left:10px;
  bottom:8px;
  font-family:"IBM Plex Mono",monospace;
  font-size:8.8px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#526b75;
  
  text-shadow:0 1px 0 rgba(255,255,255,.85);
}

.scpCity{
  fill:rgba(82,120,132,.34);
  stroke:#ffffff;
  stroke-width:.8;
  
  vector-effect:non-scaling-stroke;
  transition:fill .15s ease, stroke .15s ease;
}

.scpCity.match{
  fill:#d98324;
  stroke:#ffffff;
}

.scpCity.dim{
  fill:rgba(82,120,132,.14);
  stroke:rgba(255,255,255,.55);
}

.scpCity.sel{
  fill:#0f2e39;
  stroke:#ffffff;
}

.scpCity:hover{
  fill:#0f2e39;
  stroke:#ffffff;
}

.scpMarker{
  fill:none;
  stroke:#0f2e39;
  stroke-width:1.6;
  vector-effect:non-scaling-stroke;
  
}

.scp-results{
  max-height:286px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-right:2px;
}

.scp-result{
  width:100%;
  text-align:left;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#ffffff;
  color:var(--ink);
  cursor:pointer;
  transition:.16s ease;
}

.scp-result:hover{
  background:#fffaf0;
  border-color:#f0c674;
  transform:translateY(-1px);
}

.scp-result.active{
  background:#fff4df;
  border-color:var(--amber);
  box-shadow:0 0 0 2px rgba(245,159,0,.18);
}

.scp-result .rn{
  display:block;
  font-family:"Oswald",sans-serif;
  font-size:14.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink);
}

.scp-result .rr{
  display:block;
  margin-top:2px;
  font-family:"IBM Plex Mono",monospace;
  font-size:10.2px;
  color:var(--dim);
}

.scp-empty{
  padding:12px;
  border:1px dashed var(--line);
  border-radius:14px;
  color:var(--dim);
  font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;
  background:#f8fbfc;
}

/* =========================================================
   START CITY PICKER MAP ZOOM / PAN
   ========================================================= */

.scp-mapwrap{
  position:relative;
  overflow:hidden;
  cursor:grab;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}

#startCityMap{
  cursor:grab;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}

#startCityMap.dragging{
  cursor:grabbing;
}

.scp-zoomctl{
  position:absolute;
  right:8px;
  top:8px;
  z-index:6;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.scp-zoomctl button{
  width:29px;
  height:29px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.94);
  color:var(--ink);
  border-radius:10px;
  font-family:"Oswald",sans-serif;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  transition:.16s ease;
  box-shadow:0 8px 18px -14px rgba(15,32,40,.45);
  backdrop-filter:blur(4px);
}

.scp-zoomctl button:hover{
  background:var(--amber);
  border-color:var(--amber);
  color:#102027;
  transform:translateY(-1px);
}

.scpCity{
  pointer-events:auto;
  cursor:pointer;
}

.scpMarker{
  pointer-events:none;
}

.scp-help{
  pointer-events:none;
}

/* =========================================================
   START CITY PICKER LABELS
   ========================================================= */

.scpLabels{
  pointer-events:none;
}

.scpLabel{
  font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size:8.8px;
  fill:#17323b;
  paint-order:stroke;
  stroke:rgba(255,255,255,.96);
  stroke-width:2.7px;
  stroke-linejoin:round;
  pointer-events:none;
  user-select:none;
  letter-spacing:.02em;
}

.scpLabel.match{
  fill:#8a4b00;
  font-weight:600;
}

.scpLabel.sel{
  fill:#071a20;
  font-weight:700;
  font-size:9.8px;
}

/* =========================================================
   CUSTOM DIFFICULTY
   ========================================================= */

.custom-diff{
  margin-top:12px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff,#f8fbfc);
  box-shadow:0 12px 28px -24px rgba(15,32,40,.35);
  display:grid;
  gap:11px;
}

.custom-diff[hidden]{
  display:none !important;
}

.cd-title{
  font-family:"Oswald",sans-serif;
  font-size:13px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink);
}

.cd-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:10px;
}

.cd-field label{
  display:block;
  margin-bottom:5px;
  font-family:"IBM Plex Mono",monospace;
  font-size:9.6px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--dim);
}

.cd-field input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#ffffff;
  color:var(--ink);
  font-family:"IBM Plex Mono",monospace;
  font-size:13px;
  outline:none;
  box-shadow:inset 0 1px 2px rgba(15,32,40,.05);
  transition:.16s ease;
}

.cd-field input:focus{
  border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(245,159,0,.16);
}

.cd-hint{
  font-family:"IBM Plex Mono",monospace;
  font-size:10.8px;
  line-height:1.45;
  color:var(--dim);
}

.pass .ps .pv.custom-value{
  color:var(--gold);
}
/* =========================================================
   SMALL CITY CHARM BADGE
   ========================================================= */

.b6{
  background:#fff0f6 !important;
  border:1px solid #f3a6c9 !important;
  color:#8a1654 !important;
}


/* =========================================================
   ТЕЛЕФОН (экран до 700 px)
   Шапка не прилипает, показатели — компактная сетка 3×2,
   карточки выбора идут сразу после карты и табло.
   ========================================================= */
@media (max-width:700px){
  /* шапка */
  .topbar{position:static !important;gap:8px;padding:8px 12px}
  .brand small{display:none}
  .tnav{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tnav::-webkit-scrollbar{display:none}
  .tbtn{flex:0 0 auto;padding:7px 10px;font-size:9.5px}

  /* показатели */
  .hud{top:0 !important;display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr))}
  .clock{display:none !important}
  .stat{padding:5px 8px 6px !important;border-bottom:1px solid var(--line)}
  .hud .stat:nth-child(3n+1){border-right:none !important}
  .stat .lbl{font-size:8px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stat .v{font-size:17px}
  .prog{grid-column:1/-1;min-width:0;padding:6px 10px 7px;gap:5px}

  /* порядок панелей: карта → игроки → табло → карточки → условия мира → показатели → журнал */
  .shell{display:flex !important;flex-direction:column;align-items:stretch;gap:12px !important;padding:10px 10px 18px}
  .shell>.col{display:contents}
  .shell>.col:first-child>.panel:nth-child(1){order:1}
  .shell>.col:last-child>.panel:nth-child(1){order:2}
  .shell>.col:last-child>.panel:nth-child(2){order:3}
  .shell>.col:last-child>.panel:nth-child(3){order:4}
  .shell>.col:first-child>.panel:nth-child(2){order:5}
  .shell>.col:first-child>.panel:nth-child(3){order:6}
  .shell>.col:first-child>.panel:nth-child(4){order:7}

  /* карта: подсказка под картой, а не поверх */
  .mapHelp,.scp-help{position:static !important;display:block;padding:6px 10px 2px;font-size:8px;line-height:1.5}
  .zoomctl{right:6px;top:6px;gap:4px}
  .zoomctl button{width:28px;height:28px;font-size:14px}
  .travel{left:6px;top:6px;right:42px;padding:6px 9px}
  .travel .lbl{font-size:8px;letter-spacing:.06em}

  /* поля ввода от 16 px — иначе iPhone приближает страницу при вводе */
  #q,#startCityQuery,.custom-diff input{font-size:16px !important}

  /* окна и таблица итогов */
  .ov{padding:10px 8px}
  .tbl{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
}

/* =========================================================
   МУЛЬТИПЛЕЕР И УСЛОВИЯ МИРА
   ========================================================= */
.panel[hidden],.mp-box[hidden]{display:none !important}

/* условия мира */
.worldbox{padding:4px 13px 13px;display:flex;flex-direction:column;gap:10px;font-size:12.5px}
.worldbox .lbl{display:block;margin-bottom:4px}
.wsub{color:var(--dim)}
.wsec{border-top:1px solid var(--line);padding-top:8px}
.wrow{padding:2px 0;color:var(--ink2);line-height:1.45}
.wrow b{color:var(--ink);font-weight:600}
.wrow span{color:var(--dim)}
.wrow.ok{color:var(--green)}
.wrow.now{color:var(--amber-dark,var(--amber))}
.wrow.now span{color:var(--ink2)}
.wrow.past{opacity:.5}
.wprices{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.wprices span{padding:2px 8px;border:1px solid var(--line);border-radius:10px;font-family:"IBM Plex Mono",monospace;font-size:11px}
.wgoal{padding:9px 11px;border:1px dashed var(--line2,var(--line));border-radius:12px;background:rgba(245,159,0,.06)}
.wgoal b{display:block;font-size:13.5px;color:var(--ink)}
.wgoal em{display:block;font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--dim);margin-top:2px}
.wgoal.ok{border-color:var(--green);background:rgba(8,127,75,.06)}

/* игроки */
.players{padding:4px 13px 12px;display:flex;flex-direction:column;gap:6px}
.prow{display:grid;grid-template-columns:12px 1fr auto;column-gap:9px;align-items:center;padding:7px 10px;
  border:1px solid var(--line);border-radius:12px;background:#fff}
.prow i{width:12px;height:12px;border-radius:50%;grid-row:span 2}
.prow b{font-family:"Oswald",sans-serif;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.prow span{grid-column:2/4;font-size:11.5px;color:var(--dim)}
.prow em{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);grid-row:1;grid-column:3}
.prow.act{border-color:var(--amber);box-shadow:0 0 0 2px rgba(245,159,0,.18)}
.prow.done{opacity:.75}
.pdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}

/* метки на карте */
.mapCheck{fill:none;stroke:#c92a2a;stroke-width:1.6;stroke-dasharray:3 2;pointer-events:none}
.mapFest{fill:none;stroke:#ae3ec9;stroke-width:1.6;pointer-events:none}
.mapOther{stroke:#fff;stroke-width:1.4;pointer-events:none}
.mapOtherLbl{font-family:"IBM Plex Mono",monospace;font-size:9px;font-weight:600;paint-order:stroke;stroke:#fff;stroke-width:2.5px;pointer-events:none}
svg.world .other{fill:none;stroke-width:1.3;stroke-dasharray:4 4;stroke-linecap:round;opacity:.7}

/* стартовый экран: режим игры, код мира, комната */
.pass.gm{margin-bottom:8px}
.mp-box{margin:8px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#fbfdfe;display:flex;flex-direction:column;gap:7px}
.mp-names{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mp-names input,.mp-field input,.mp-join input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:13px}
.mp-field{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--dim)}
.mp-join{display:flex;gap:7px;align-items:center}
.mp-join input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.12em}
.mp-join .cta{flex:0 0 auto;padding:8px 12px}
.mp-check{display:flex;gap:7px;align-items:center;font-size:12.5px;color:var(--ink2)}
.cta:disabled{opacity:.45;cursor:not-allowed}
.lobby-link{margin-top:8px;padding:8px 10px;border:1px dashed var(--line);border-radius:10px;font-size:12px;word-break:break-all}

@media (max-width:700px){
  .mp-names{grid-template-columns:1fr}
  .mp-names input,.mp-field input,.mp-join input{font-size:16px}
}

/* досрочное завершение и таймер */
.stat[hidden]{display:none !important}
#stTimer .v{font-family:"IBM Plex Mono",monospace}
.card.stuck{border-color:#f1b5b5}
.card.stuck .cname{color:#c92a2a}
.mp-field select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:13px}
@media (max-width:700px){
  .hud #stTimer{grid-column:1/-1}
  .mp-field select{font-size:16px}
}

/* заметные кнопки «сдаться» и «завершить гонку» */
.tbtn[hidden]{display:none !important}
.tbtn.danger{color:#c92a2a !important;border-color:#f1b5b5 !important;background:#fff5f5 !important;font-weight:600}
.tbtn.danger:hover{background:#c92a2a !important;border-color:#c92a2a !important;color:#fff !important}
#retireBtn,#endRaceBtn{color:#c92a2a;border-color:#f1b5b5}

/* соревнование и таблица лидеров */
.ch-box{border-color:#f0c674;background:#fffaf0}
.ch-btns{display:flex;gap:7px;flex-wrap:wrap}
.ch-btns .cta{padding:8px 12px}
.ch-res{margin-bottom:12px;padding:10px 12px;border:1px solid #f0c674;border-radius:12px;background:#fffaf0;font-size:13px}
.lb-tabs{display:flex;gap:8px;margin:10px 0 6px;flex-wrap:wrap}
.lb-tabs .ps{padding:7px 12px}
.tbl.lb tr.me td{background:#fff4df;font-weight:600}
.tbl.lb tr.gap td{text-align:center;color:var(--dim)}

/* аккаунт */
.acc-form{display:flex;flex-direction:column;gap:9px;max-width:420px}
.acc-form input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:14px}
.acc-err{min-height:1em;color:#c92a2a;font-size:12.5px}
.ch-acc{font-size:12.5px;color:var(--ink2)}
@media (max-width:700px){.acc-form input{font-size:16px}}

/* обучение */
#tour{position:fixed;inset:0;z-index:200}
.tour-hole{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(10,25,32,.55);outline:2px solid #f59f00;pointer-events:none;transition:top .25s ease,left .25s ease,width .25s ease,height .25s ease}
.tour-card{position:fixed;width:min(360px,calc(100vw - 24px));background:#fff;border:1px solid #f0c674;border-radius:16px;padding:14px 16px;box-shadow:0 20px 50px -20px rgba(0,0,0,.5);color:var(--ink)}
.tour-card b{display:block;font-family:"Oswald",sans-serif;font-size:18px;letter-spacing:.04em;text-transform:uppercase;margin:4px 0 6px}
.tour-card p{font-size:13.5px;line-height:1.5;color:var(--ink2);margin:0}
.tour-btns{display:flex;gap:8px;align-items:center;margin-top:12px}
.tour-btns span{flex:1}
.tour-btns .cta{padding:8px 14px}

/* достижения */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px}
.ach{padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:#fff}
.ach i{font-style:normal;font-size:22px;line-height:1}
.ach b{display:block;font-size:13px;margin-top:4px}
.ach span{display:block;font-size:11px;color:var(--dim);line-height:1.35;margin-top:2px}
.ach em{display:block;font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--green);margin-top:4px}
.ach.lock{opacity:.45;filter:grayscale(1)}
.ach-res{margin-bottom:12px;padding:10px 12px;border:1px solid #b2f2bb;border-radius:12px;background:#f4fdf5;font-size:13px}
.ach-res[hidden]{display:none}
.ach-chip{display:inline-block;margin:2px 4px 2px 0;padding:2px 8px;border-radius:10px;background:#fff;border:1px solid #b2f2bb}

/* подбор соперника */
.mp-match{display:flex;flex-direction:column;gap:5px;padding-bottom:4px}
.mp-match .cta{align-self:flex-start}
.search-status{display:flex;align-items:center;gap:10px;font-size:14px}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid #f0c674;border-top-color:transparent;animation:spin .8s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* стартовый экран: компактная раскладка по рядам */
.setup{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.setup-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.setup .mp-box{margin:0}
.mp-sub{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.mp-sub[hidden]{display:none}
.pass.gm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0}
.pass.gm .ps{grid-template-columns:1fr;padding:8px 10px}
.pass.diff-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.world-row{display:grid;grid-template-columns:minmax(0,1.3fr) auto minmax(150px,.8fr);gap:8px 14px;align-items:end}
.world-row .wr-hint{grid-column:1/-1}
.world-row .wr-rand{padding-bottom:9px}
.setup-go{display:flex;gap:9px;flex-wrap:wrap}
@media (max-width:800px){
  .setup-two{grid-template-columns:1fr}
  .pass.diff-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .world-row{grid-template-columns:1fr}
  .world-row .wr-rand{padding-bottom:0}
}
@media (max-width:420px){
  .pass.gm{grid-template-columns:1fr}
}
.pass.diff-row .ps{grid-template-columns:1fr}
.pass.diff-row .ps .pv{justify-self:start}

/* ===== Языки: целая плашка табло для арабского и правки RTL ===== */
.flap.flap-whole,.flaps.sm .flap.flap-whole{width:auto;padding:0 .35em}
.flap.flap-whole s{position:relative;inset:auto;display:block;white-space:nowrap;line-height:1.14em;font-family:inherit}
.flaps.sm .flap.flap-whole s{line-height:1.45em}
.lang-sel{cursor:pointer}
[dir=rtl] body{text-align:right}
[dir=rtl] .ps,[dir=rtl] .tbl th,[dir=rtl] .tbl td{text-align:right}
[dir=rtl] svg,[dir=rtl] #wCode,[dir=rtl] #joinCode,[dir=rtl] input[type=number]{direction:ltr}
[dir=rtl] .tbl td.num,[dir=rtl] .n{unicode-bidi:plaintext}