/* MCR.city platform theme foundation
   Loaded after style.css for five-theme shell and WOT chrome. */

:root{
  --mcr-page-bg:#0c0c0e;
  --mcr-page-fg:#f5f7fb;
  --mcr-header-bg:#101114;
  --mcr-header-border:rgba(255,255,255,.08);
  --mcr-panel-bg:rgba(255,255,255,.06);
  --mcr-panel-border:rgba(255,255,255,.12);
  --mcr-panel-fg:rgba(255,255,255,.86);
  --mcr-switch-bg:rgba(255,255,255,.08);
  --mcr-switch-border:rgba(255,255,255,.14);
  --mcr-switch-fg:rgba(255,255,255,.72);
  --mcr-switch-on-bg:linear-gradient(135deg,#ffffff,#dde0e8);
  --mcr-switch-on-fg:#0c0c0e;
  --mcr-accent:#E8201A;
  --mcr-accent-2:#1A56FF;
  --mcr-shadow:0 8px 24px rgba(0,0,0,.18);
  --mcr-radius:16px;
  color-scheme: dark;
}

html[data-mcr-theme],
body[class*="mcr-theme-"],
section.WOT[data-mcr-theme]{
  background:var(--mcr-page-bg);
  color:var(--mcr-page-fg);
}

html[data-mcr-theme] body{
  background:var(--mcr-page-bg);
  color:var(--mcr-page-fg);
}

html[data-mcr-theme] #MOB-HEADER,
body[class*="mcr-theme-"] #MOB-HEADER{
  background:var(--mcr-header-bg) !important;
  border-bottom-color:var(--mcr-header-border) !important;
  color:var(--mcr-page-fg);
}

html[data-mcr-theme] .WOT,
body[class*="mcr-theme-"] .WOT{
  color:var(--mcr-page-fg);
}

html[data-mcr-theme] .WOT .wot-mini-label,
html[data-mcr-theme] .WOT .wot-week-strip,
html[data-mcr-theme] .WOT .wot-filterbar,
html[data-mcr-theme] .WOT .wot-ticker,
html[data-mcr-theme] .WOT .wot-view-switch,
html[data-mcr-theme] .WOT .wot-mode-switch,
body[class*="mcr-theme-"] .WOT .wot-mini-label,
body[class*="mcr-theme-"] .WOT .wot-week-strip,
body[class*="mcr-theme-"] .WOT .wot-filterbar,
body[class*="mcr-theme-"] .WOT .wot-ticker,
body[class*="mcr-theme-"] .WOT .wot-view-switch,
body[class*="mcr-theme-"] .WOT .wot-mode-switch{
  background:var(--mcr-panel-bg) !important;
  border-color:var(--mcr-panel-border) !important;
  color:var(--mcr-panel-fg) !important;
  box-shadow:var(--mcr-shadow) !important;
}

html body .WOT .wot-mode-switch,
html body #MOB-HEADER .wot-mode-switch{
  display:inline-grid !important;
  grid-template-columns:0.92fr 0.92fr 1.14fr 0.92fr 0.92fr;
  align-items:stretch !important;
  gap:2px !important;
  padding:2px !important;
  box-sizing:border-box !important;
  width:clamp(184px,48vw,302px) !important;
  min-width:184px !important;
  border-radius:999px !important;
  background:var(--mcr-switch-bg) !important;
  border:1px solid var(--mcr-switch-border) !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08), 0 1px 8px rgba(0,0,0,.16) !important;
  overflow:hidden !important;
}

html body .WOT .wot-mode-opt,
html body #MOB-HEADER .wot-mode-opt{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  min-height:22px !important;
  height:22px !important;
  padding:0 8px !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  color:var(--mcr-switch-fg) !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  font-size:clamp(.56rem,.88vw,.72rem) !important;
  font-weight:800 !important;
  letter-spacing:.03em !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease,filter .18s ease !important;
}

html body .WOT .wot-mode-opt span,
html body #MOB-HEADER .wot-mode-opt span{
  display:inline-block !important;
  line-height:1 !important;
}

html body .WOT .wot-mode-opt[data-mode="hybrid"],
html body #MOB-HEADER .wot-mode-opt[data-mode="hybrid"]{
  font-weight:900 !important;
  font-size:clamp(.61rem,.95vw,.78rem) !important;
  letter-spacing:.04em !important;
}

html body .WOT .wot-mode-opt:hover,
html body #MOB-HEADER .wot-mode-opt:hover{
  filter:brightness(1.05) !important;
}

html body .WOT .wot-mode-opt:focus-visible,
html body #MOB-HEADER .wot-mode-opt:focus-visible{
  outline:2px solid rgba(255,255,255,.22) !important;
  outline-offset:1px !important;
}

html body .WOT .wot-mode-opt.is-on,
html body #MOB-HEADER .wot-mode-opt.is-on{
  background:var(--mcr-switch-on-bg) !important;
  color:var(--mcr-switch-on-fg) !important;
  box-shadow:0 1px 6px rgba(0,0,0,.22) !important;
}

html body .WOT .wot-mode-opt.is-on span,
html body #MOB-HEADER .wot-mode-opt.is-on span{
  color:inherit !important;
}

html[data-mcr-theme="cute"],
body.mcr-theme-cute,
section.WOT.mcr-theme-cute{
  --mcr-page-bg:#1a0f23;
  --mcr-page-fg:#fff6fb;
  --mcr-header-bg:linear-gradient(180deg,#2d1539 0%,#1b0f27 100%);
  --mcr-header-border:rgba(255,153,217,.18);
  --mcr-panel-bg:rgba(50,26,64,.88);
  --mcr-panel-border:rgba(255,153,217,.16);
  --mcr-panel-fg:#fff4fb;
  --mcr-switch-bg:rgba(255,141,202,.16);
  --mcr-switch-border:rgba(255,161,223,.2);
  --mcr-switch-fg:rgba(255,244,251,.8);
  --mcr-switch-on-bg:linear-gradient(135deg,#ff72c9 0%,#a570ff 100%);
  --mcr-switch-on-fg:#fff;
  --mcr-accent:#ff72c9;
  --mcr-accent-2:#a570ff;
  --mcr-shadow:0 10px 24px rgba(47,14,61,.28);
  color-scheme: dark;
}

html[data-mcr-theme="light"],
body.mcr-theme-light,
section.WOT.mcr-theme-light{
  --mcr-page-bg:#f5f6fb;
  --mcr-page-fg:#101114;
  --mcr-header-bg:linear-gradient(180deg,#ffffff 0%,#f0f2f7 100%);
  --mcr-header-border:rgba(0,0,0,.08);
  --mcr-panel-bg:rgba(255,255,255,.96);
  --mcr-panel-border:rgba(0,0,0,.1);
  --mcr-panel-fg:#101114;
  --mcr-switch-bg:rgba(0,0,0,.05);
  --mcr-switch-border:rgba(0,0,0,.12);
  --mcr-switch-fg:rgba(0,0,0,.64);
  --mcr-switch-on-bg:linear-gradient(135deg,#101114 0%,#0b0c0f 100%);
  --mcr-switch-on-fg:#fff;
  --mcr-accent:#E8201A;
  --mcr-accent-2:#1A56FF;
  --mcr-shadow:0 8px 20px rgba(0,0,0,.08);
  color-scheme: light;
}

html[data-mcr-theme="hybrid"],
body.mcr-theme-hybrid,
section.WOT.mcr-theme-hybrid{
  --mcr-page-bg:#101216;
  --mcr-page-fg:#f5f7fb;
  --mcr-header-bg:linear-gradient(180deg,#181b21 0%,#111318 100%);
  --mcr-header-border:rgba(255,255,255,.08);
  --mcr-panel-bg:rgba(24,28,35,.9);
  --mcr-panel-border:rgba(255,255,255,.1);
  --mcr-panel-fg:#f5f7fb;
  --mcr-switch-bg:rgba(255,255,255,.06);
  --mcr-switch-border:rgba(255,255,255,.12);
  --mcr-switch-fg:rgba(255,255,255,.76);
  --mcr-switch-on-bg:linear-gradient(135deg,#f05d7f 0%,#7f8fff 100%);
  --mcr-switch-on-fg:#fff;
  --mcr-accent:#f05d7f;
  --mcr-accent-2:#7f8fff;
  --mcr-shadow:0 10px 28px rgba(0,0,0,.18);
  color-scheme: dark;
}

html[data-mcr-theme="dark"],
body.mcr-theme-dark,
section.WOT.mcr-theme-dark{
  --mcr-page-bg:#0c0c0e;
  --mcr-page-fg:#f5f7fb;
  --mcr-header-bg:#101114;
  --mcr-header-border:rgba(255,255,255,.08);
  --mcr-panel-bg:rgba(255,255,255,.06);
  --mcr-panel-border:rgba(255,255,255,.12);
  --mcr-panel-fg:rgba(255,255,255,.86);
  --mcr-switch-bg:rgba(255,255,255,.08);
  --mcr-switch-border:rgba(255,255,255,.14);
  --mcr-switch-fg:rgba(255,255,255,.72);
  --mcr-switch-on-bg:linear-gradient(135deg,#ffffff 0%,#dde0e8 100%);
  --mcr-switch-on-fg:#0c0c0e;
  --mcr-accent:#E8201A;
  --mcr-accent-2:#1A56FF;
  --mcr-shadow:0 8px 24px rgba(0,0,0,.18);
  color-scheme: dark;
}

html[data-mcr-theme="retro"],
body.mcr-theme-retro,
section.WOT.mcr-theme-retro{
  --mcr-page-bg:#b9b6b0;
  --mcr-page-fg:#101010;
  --mcr-header-bg:linear-gradient(180deg,#d7d3cb 0%,#c0c0c0 100%);
  --mcr-header-border:#808080;
  --mcr-panel-bg:#d4d0c8;
  --mcr-panel-border:#808080;
  --mcr-panel-fg:#101010;
  --mcr-switch-bg:#c0c0c0;
  --mcr-switch-border:#808080;
  --mcr-switch-fg:#111;
  --mcr-switch-on-bg:linear-gradient(180deg,#efefef 0%,#d8d8d8 100%);
  --mcr-switch-on-fg:#000;
  --mcr-accent:#000080;
  --mcr-accent-2:#800000;
  --mcr-shadow:inset 1px 1px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(0,0,0,.38);
  color-scheme: light;
}

body.mcr-theme-retro #MOB-HEADER,
body.mcr-theme-retro .WOT .wot-mini-label,
body.mcr-theme-retro .WOT .wot-week-strip,
body.mcr-theme-retro .WOT .wot-filterbar,
body.mcr-theme-retro .WOT .wot-ticker,
body.mcr-theme-retro .WOT .wot-view-switch,
body.mcr-theme-retro .WOT .wot-mode-switch{
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(0,0,0,.38) !important;
  border-radius:0 !important;
}

body.mcr-theme-retro .WOT .wot-mode-switch{
  padding:3px !important;
  gap:2px !important;
}

body.mcr-theme-retro .WOT .wot-mode-opt,
body.mcr-theme-retro #MOB-HEADER .wot-mode-opt{
  border-radius:0 !important;
  font-family:"MS Sans Serif",Tahoma,Arial,sans-serif !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  background:#c0c0c0 !important;
  color:#111 !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(0,0,0,.38) !important;
}

body.mcr-theme-retro .WOT .wot-mode-opt.is-on,
body.mcr-theme-retro #MOB-HEADER .wot-mode-opt.is-on{
  background:#e2e2e2 !important;
  color:#000 !important;
  box-shadow:inset -1px -1px 0 rgba(255,255,255,.95), inset 1px 1px 0 rgba(0,0,0,.38) !important;
}

body.mcr-theme-retro .WOT .wot-mode-opt:focus-visible,
body.mcr-theme-retro #MOB-HEADER .wot-mode-opt:focus-visible{
  outline:1px dotted #000 !important;
  outline-offset:-2px !important;
}

@media (max-width: 600px){
  html body .WOT .wot-mode-switch,
  html body #MOB-HEADER .wot-mode-switch{
    width:clamp(172px,56vw,252px) !important;
    min-width:172px !important;
  }

  html body .WOT .wot-mode-opt,
  html body #MOB-HEADER .wot-mode-opt{
    padding:0 6px !important;
    height:21px !important;
    min-height:21px !important;
    font-size:10px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  html body .WOT .wot-mode-opt,
  html body #MOB-HEADER .wot-mode-opt{
    transition:none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PAGE SURFACES — body background, WOT section, bottom tabs
   ═══════════════════════════════════════════════════════════ */

/* Body background from token for all active themes */
html[data-mcr-theme="cute"]   body{ background:#1a0f23 !important; color:#fff6fb !important; }
html[data-mcr-theme="light"]  body{ background:#f5f6fb !important; color:#101114 !important; }
html[data-mcr-theme="hybrid"] body{ background:#101216 !important; color:#f5f7fb !important; }
html[data-mcr-theme="dark"]   body{ background:#0c0c0e !important; color:#f5f7fb !important; }
html[data-mcr-theme="retro"]  body{ background:#b9b6b0 !important; color:#101010 !important; }

/* WOT section background (overrides .WOT{background:#ffffff} in style.css) */
html[data-mcr-theme]          .WOT{ background:var(--mcr-page-bg) !important; }
html[data-mcr-theme="light"]  .WOT{ background:#ffffff !important; }
html[data-mcr-theme="hybrid"] .WOT{ background:#181b21 !important; }
html[data-mcr-theme="retro"]  .WOT{ background:#d4d0c8 !important; }

/* ── Bottom tab bar ──────────────────────────────────────── */
html[data-mcr-theme] #MOB-TABS{
  background:var(--mcr-header-bg) !important;
  border-top:1px solid var(--mcr-header-border) !important;
}
html[data-mcr-theme] .mob-tab{
  color:var(--mcr-switch-fg) !important;
}
html[data-mcr-theme] .mob-tab.on,
html[data-mcr-theme] .mob-tab:focus-visible{
  color:var(--mcr-accent) !important;
}

/* Retro tabs: bevel inset, no border-top, classic font */
html[data-mcr-theme="retro"] #MOB-TABS{
  border-top:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             inset 0 -1px 0 rgba(0,0,0,.3) !important;
}
html[data-mcr-theme="retro"] .mob-tab{
  font-family:"MS Sans Serif",Tahoma,Arial,sans-serif !important;
  font-size:.55rem !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
html[data-mcr-theme="retro"] .mob-tab.on{
  color:#000080 !important;
  font-weight:700 !important;
}

/* ── WOT event-category filter pills ─────────────────────── */
/* Light + Retro have a light WOT background — white pill text is invisible.
   Override to dark text for inactive state; keep active (on) white as-is. */
html[data-mcr-theme="light"] .WOT .wot-flt,
html[data-mcr-theme="retro"] .WOT .wot-flt{
  color:rgba(0,0,0,.68) !important;
  background:rgba(0,0,0,.06) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.06) inset, 0 1px 4px rgba(0,0,0,.08) !important;
}
html[data-mcr-theme="light"] .WOT .wot-flt.on,
html[data-mcr-theme="retro"] .WOT .wot-flt.on{
  color:#fff !important;
}

/* ── Map tile filter hints ───────────────────────────────── */
/* Retro: desaturated muted tiles */
html[data-mcr-theme="retro"] #mcrmap .leaflet-tile-pane{
  filter:saturate(.32) contrast(1.1) brightness(.9) !important;
}
html[data-mcr-theme="retro"] #mcrmap{
  background:radial-gradient(ellipse at 50% 30%,#b0acaa 0%,#8a8683 100%) !important;
}
/* Cute: deep purple map void for dark tiles */
html[data-mcr-theme="cute"] #mcrmap{
  background:radial-gradient(ellipse at 50% 20%,#1a0f2e 0,#0d0812 60%,#05040a 100%) !important;
}

/* ── No-flash: before JS runs, Hybrid is visually correct by default ── */
/* :root already sets dark/hybrid defaults so the page looks intentional
   even for the brief window before the inline no-flash script sets data-mcr-theme */