/* Map-first command interface: connected controls, quieter hierarchy, real touch targets. */
:root { --hud-h:calc(var(--safe-top) + 62px); --tab-h:calc(var(--safe-bottom) + 72px); }
.hud { padding:calc(var(--safe-top) + 7px) 12px 6px; gap:8px; }
.hud .badge { width:38px; height:38px; border-radius:12px; box-shadow:none; font-size:21px; }
.hud .badge .rank { font-size:9px; padding:1px 5px; }
.hud .stats { gap:0; background:#171222e8; border:1px solid #352943; border-radius:12px; overflow:hidden; }
.hud .stat { min-height:44px; padding:5px 8px; gap:5px; border:0; border-radius:0; background:none; box-shadow:none; }
.hud .stat + .stat { border-inline-start:1px solid #352943; }
.hud .stat .ic { width:22px; height:22px; }
.hud .stat .v b { font-size:13px; }
.hud .stat .v small { font-size:10px; }
.hud .stat.power .v b::before { content:'برق · '; font-size:10px; font-weight:400; }
.tabbar { left:12px; right:12px; bottom:calc(var(--safe-bottom) + 8px); height:56px; padding:0; border:1px solid #44324f; border-radius:13px; background:#17121fef; gap:0; overflow:hidden; box-shadow:0 4px 18px rgba(var(--sk-000000, 0, 0, 0), 0.267); }
.tab { min-width:0; min-height:54px; flex:1 1 0; padding:4px 0; gap:2px; border-radius:0; font-size:11px; font-weight:500; }
.tab + .tab { border-inline-start:1px solid #352943; }
.tab .plate { width:28px; height:24px; transform:none!important; background:none; box-shadow:none; }
.tab .plate::before { display:none; }
.tab .ic { width:22px; height:22px; filter:saturate(.45); transform:none!important; }
.tab.on { background:#342342; color:#ebd5ff; box-shadow:inset 0 2px #a575d1; }
.tab.on .ic { filter:saturate(.8); }
.tab .dot { width:6px; height:6px; top:6px; }
.screen { padding:14px 12px 24px; border-radius:16px 16px 0 0; box-shadow:none; background:#110d19; }
.scr-head { gap:8px; margin:0 0 12px; }
.scr-head .ic { width:30px; height:30px; }
.scr-head h2 { font-size:18px; line-height:1.5; }
.scr-head p { font-size:12px; }
.card { border-radius:12px; padding:12px; box-shadow:inset 0 1px #ffffff04; background:#1b1425; }
.card + .card { margin-top:8px; }
.stagger>* { animation-duration:160ms; animation-delay:0ms; }
.card .ic-wrap { width:36px; height:36px; border-radius:10px; }
.card .ic-wrap>.ic { width:25px; height:25px; }
.btn { min-height:44px; border-radius:9px; padding:7px 12px; font-size:13px; box-shadow:0 2px #08060b,inset 0 1px #ffffff12; }
.btn.sm,.btn.ghost,.btn.icon { min-height:44px; }
.btn.icon { min-width:44px; }
.btn .ic { width:20px; height:20px; }
.btn:active { transform:translateY(1px); box-shadow:inset 0 1px rgba(var(--sk-000000, 0, 0, 0), 0.2); }
.btns { gap:8px; }
.sec-title { margin-top:16px; margin-bottom:8px; font-size:13px; }
.chips { gap:0; margin:8px 0; padding:0; border:1px solid #3c2e49; border-radius:10px; background:#17111f; }
.chip { min-height:44px; border:0; border-radius:0; padding:8px 12px; box-shadow:none!important; background:none; font-size:12px; }
.chip + .chip { border-inline-start:1px solid #352943; }
.chip.on { background:#382347; color:#eedbff; }
.chip .ic { width:18px; height:18px; }
.list-search { margin:10px 0; }
.list-search input { min-height:44px; border-radius:9px; font-size:13px; padding:8px 10px; }
.search-clear { min-height:44px; border-radius:9px; }
.section-nav { display:flex; flex:none; margin:0 0 14px; background:#17111f; border:1px solid #44324f; border-radius:10px; overflow:hidden; }
.section-nav button { position:relative; flex:1; min-width:0; min-height:44px; padding:7px 4px; background:none; color:#c1b3d0; border:0; font:inherit; font-size:12px; }
.section-nav button + button { border-inline-start:1px solid #352943; }
.section-nav button[aria-current] { color:#ecd8ff; background:#382347; box-shadow:inset 0 -2px #ac7ed8; }
.section-nav button:focus-visible,.guide-root button:focus-visible,.page-help:focus-visible { outline:2px solid #c39be8; outline-offset:-3px; }
.tiles { gap:8px; }
.tile { border-radius:10px; padding:10px; box-shadow:none; }
.tile .val { font-size:20px; }
.tile .row>.ic { width:20px; height:20px; }
.country-details { margin-top:10px; border-radius:10px; }
.country-details summary { min-height:44px; font-size:13px; }
.country-details summary>.ic { width:22px; height:22px; }
.country-details .res-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border:1px solid #352943; border-radius:10px; overflow:hidden; }
.country-details .res { display:grid; grid-template-columns:20px minmax(0,1fr); gap:3px 6px; align-items:center; text-align:start; padding:9px; border:0; border-bottom:1px solid #352943; border-radius:0; background:#1b1425; min-width:0; }
.country-details .res:nth-child(even) { border-inline-start:1px solid #352943; }
.country-details .res .ic { width:20px; height:20px; }
.country-details .res .n { font-size:11px; }
.country-details .res .a { grid-column:1/-1; font-size:14px; }
.country-details .res .r { grid-column:1/-1; font-size:10px; font-weight:500; color:#bcb0c8; }
.hero .medal { width:48px; height:48px; box-shadow:none; }
.hero h3 { font-size:18px; }
.bld .ttl { font-size:14px; }
.bld .head { gap:10px; }
.bld .cost { font-size:12px; gap:5px; margin:8px 0; }
.bld .foot { padding-top:8px; margin-top:8px; }
.bld .pill { height:auto; min-height:23px; padding:2px 7px; font-size:11px; box-shadow:none; background:#241a30; }
.bld-details { margin:8px 0; border-top:1px solid #352943; }
.bld-details summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:#c1accf; font-size:12px; }
.bld-details summary::after { content:'＋'; margin-inline-start:auto; }
.bld-details[open] summary::after { content:'−'; }
.bld-details .desc { margin:0 0 8px; }
.dp-seg { padding:0; gap:0; border:1px solid #44324f; border-radius:10px; box-shadow:none; background:#17111f; }
.dp-seg-ind { display:none; }
.dp-seg-btn { min-height:44px; padding:6px 4px; gap:3px; font-size:12px; border-radius:0; flex-direction:row; }
.dp-seg-btn + .dp-seg-btn { border-inline-start:1px solid #352943; }
.dp-seg-btn.on { background:#382347; }
.dp-seg-btn .ic { width:18px; height:18px; }
.dp-seg-btn em { font-size:9px; min-width:14px; height:14px; }
.dp-me { padding:12px; gap:10px; border-radius:12px; box-shadow:none; }
.dp-me-name { font-size:17px; }
.dp-me-chips { gap:5px; margin-top:8px; font-size:11px; }
.dp-me-stats { font-size:11px; }
.dp-flag.lg { width:42px; height:42px; font-size:24px; }
.dp-nation { padding:12px; }
.dp-filters .chip { padding:7px 10px; }
.ar-hero { padding:12px; border-radius:12px; box-shadow:none; }
.ar-quick { gap:0; border:1px solid #44324f; border-radius:10px; overflow:hidden; }
.ar-quick .btn { flex:1; padding:7px 4px; border-radius:0; box-shadow:none; font-size:12px; background:#251b30; }
.ar-quick .btn+.btn { border-inline-start:1px solid #44324f; }
.ar-rules { font-size:11px; }
.journey-content { padding:12px 14px 24px; gap:12px; }
.journey-header { padding:12px 14px; }
.journey-next { padding:14px; border-radius:13px; box-shadow:none; }
.journey-next h1 { font-size:20px; }
.journey-next .btn { min-height:44px; }
.journey-actions { gap:0; border:1px solid #44324f; border-radius:10px; overflow:hidden; }
.journey-actions button { border:0; border-radius:0; box-shadow:none; min-height:48px; font-size:13px; }
.journey-actions button+button { border-inline-start:1px solid #44324f; }
.map-fab { top:calc(var(--hud-h) + 12px); bottom:auto; right:12px; left:auto; gap:0; flex-direction:row; border:1px solid #44324f; border-radius:10px; background:#171222ee; overflow:hidden; }
.map-fab .fab { width:44px; height:44px; min-height:44px; border:0; border-radius:0; box-shadow:none; background:none; }
.map-fab .fab+.fab { border-inline-start:1px solid #44324f; }
.map-fab .fab-notices { min-width:92px; width:auto; font-size:11px; padding:0 10px; }
.map-fab .fab>.ic { width:22px; height:22px; }
@media(min-width:700px) { .tabbar { max-width:600px; margin:auto; } .tab { flex:1; } .map-fab { right:24px; } }
@media(max-width:370px) { .hud .stat { padding:5px; gap:3px; } .hud .stat.pop { display:none; } .hud .stat .v b { font-size:12px; } .hud .stat .ic { width:18px; height:18px; } .dp-seg-btn { font-size:11px; gap:2px; } }

.guide-root { position:absolute; z-index:25; inset-inline:12px; bottom:calc(var(--tab-h) + 8px); pointer-events:none; display:flex; justify-content:flex-end; }
.guide-root>* { pointer-events:auto; }
.strike-on .guide-root,.route-on .guide-root { display:none; }
.guide-card { width:100%; max-width:440px; margin-inline:auto; padding:14px; border:1px solid #594069; border-radius:14px; background:#191220f5; box-shadow:0 8px 28px rgba(var(--sk-000000, 0, 0, 0), 0.333); }
.guide-heading { display:flex; align-items:center; gap:10px; }
.commander { flex:none; width:46px; height:46px; }
.guide-heading h2,.guide-heading h3 { margin:2px 0 0; font-size:16px; line-height:1.65; }
.guide-heading small { color:#c6a4e2; font-size:11px; }
.guide-card p { margin:9px 0 10px; font-size:13px; color:#d0c3da; line-height:1.9; }
.guide-card .guide-fact { border-inline-start:2px solid #ac7ed8; padding-inline-start:8px; font-size:12px; }
.guide-dismiss { align-self:flex-start; width:44px; height:44px; flex:none; border:0; background:none; color:#ccb3dd; border-radius:8px; font-size:24px; }
.guide-actions { display:flex; gap:8px; align-items:center; }
.guide-actions .btn { flex:1; font-size:12px; }
.guide-actions .text-button { min-width:62px; min-height:44px; font-size:12px; padding:4px; }
.guide-foot { display:block; color:#a798b3; margin-top:8px; font-size:10px; line-height:1.7; }
.guide-chip { display:flex; align-items:center; gap:6px; min-height:44px; padding:5px 9px; border:1px solid #594069; border-radius:11px; background:#22182ef2; color:#e3ceef; font:inherit; font-size:11px; }
.guide-chip .commander { width:30px; height:30px; }
.map-next { display:flex; width:100%; max-width:440px; margin:auto; align-items:stretch; border:1px solid #44324f; border-radius:12px; background:#191220f2; overflow:hidden; }
.map-next-action { flex:1; min-width:0; min-height:58px; padding:8px 12px; text-align:start; background:none; border:0; color:#eee3f5; font:inherit; }
.map-next-action small { display:block; font-size:10px; color:#b9a7ca; margin-bottom:3px; }
.map-next-action strong { display:block; font-size:12px; font-weight:600; line-height:1.7; }
.map-next .guide-chip { border:0; border-radius:0; border-inline-start:1px solid #44324f; background:none; padding:7px 10px; }
.guide-topic-list { margin:14px 0; border:1px solid #44324f; border-radius:12px; overflow:hidden; }
.guide-topic-list button { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:48px; border:0; border-bottom:1px solid #352943; padding:10px 12px; text-align:start; background:#1b1425; color:#f0e4f7; font:inherit; font-size:13px; }
.guide-topic-list button:last-child { border-bottom:0; }
.guide-topic-list small { font-size:10px; color:#c5a2df; }
.guide-explanation { font-size:15px; line-height:2; }
.guide-tip { border-inline-start:2px solid #ac7ed8; padding:8px 12px; background:#20172b; border-radius:4px; font-size:13px; line-height:2; }
.guide-joke { color:#c5b0d4; font-size:12px; line-height:1.9; }
.guide-highlight { outline:2px solid #be93e5; outline-offset:3px; }
/* Keep one continuous panel behind the floating help and dock. Reserve space
   INSIDE its scroll area so the final row can clear both overlays. */
.app-screen-open .screen,.guided-home .screen[data-screen=home] {
  bottom:0;
  padding-bottom:calc(var(--tab-h) + var(--guide-height,56px) + 24px);
  scroll-padding-bottom:calc(var(--tab-h) + var(--guide-height,56px) + 24px);
}
html:not(.guide-expanded) .app-screen-open .guide-root { bottom:var(--tab-h); height:56px; padding:6px 12px; inset-inline:0; max-width:640px; margin:auto; background:#110d19; border-top:1px solid #352943; }
@media(min-width:700px) { .guide-root { max-width:620px; margin:auto; } }
@media(max-height:650px) { .guide-foot { display:none; } .guide-card { padding:10px 12px; } .guide-card p { margin:6px 0; font-size:12px; } .guide-heading .commander { width:36px; height:36px; } .guide-heading h2 { font-size:14px; } }