/* BIRODALMAK — cím-képernyő, új-játék beállító, betöltő, belépő-animáció.
   A `js/ui/menu_screen.js` párja. Csak saját (bm-*) osztályokat definiál, plusz
   három szükséges felülírást a meglévő #menu / #menuBg / .menu-bg elemekre.
   A style.css változói (--gold, --panel …) örökölve, de mindenütt van fallback. */

/* ---------- konténer: görgethető, tartalom-magassággal középre igazítva ---------- */
#menu {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#menu #bmMenuBg,
#menu #menuBg,
#menu .menu-bg { position: fixed; inset: 0; width: 100%; height: 100%; }
#menu #bmMenuBg { z-index: 0; display: block; }
#menu .menu-bg { z-index: 1; }
/* a hud.js régi #menuBg-festése helyett a sajátunk fut (különben két rajzoló
   ütközne ugyanazon a vásznon) — a menu_screen.js el is rejti futásidőben */
#menu #bmMenuBg ~ #menuBg { display: none; }

.bm-menu {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 14px;
  padding: 26px 14px 40px;
  padding-bottom: max(40px, env(safe-area-inset-bottom));
  opacity: 0;
  transition: opacity .5s ease;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: var(--text, #f2ece0);
}
.bm-menu.bm-ready { opacity: 1; }

/* ============================ FEJLÉC ============================ */
.bm-head { animation: bmRise .7s cubic-bezier(.2,.8,.25,1) both; }
.bm-crest {
  width: 62px; height: 62px; margin: 0 auto 10px; position: relative;
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(217,180,95,.30), rgba(217,180,95,.05) 70%);
  border: 1px solid rgba(217,180,95,.42);
  box-shadow: 0 0 34px rgba(217,180,95,.22), inset 0 0 22px rgba(217,180,95,.14);
  font-size: 27px;
  animation: bmPulse 6s ease-in-out infinite;
}
.bm-crest span { filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.bm-title {
  font-family: Cinzel, Georgia, serif; font-weight: 700; margin: 0;
  font-size: clamp(34px, 7.6vw, 76px); letter-spacing: clamp(6px, 1.6vw, 14px);
  line-height: 1.06; text-indent: clamp(6px, 1.6vw, 14px);
  background: linear-gradient(103deg, #b9964a 0%, #f8ecc8 26%, #ffe9ae 34%, #d9b45f 46%, #9d7a2c 78%, #d9b45f 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 8px 34px rgba(217,180,95,.30));
  animation: bmSheen 11s linear infinite;
}
.bm-sub {
  margin: 6px 0 4px; color: var(--text-dim, #b6b0a1);
  font-size: 12.5px; letter-spacing: 3px; text-transform: uppercase;
}
.bm-foot { margin: 4px 0 0; font-size: 11px; letter-spacing: 1.2px; color: rgba(182,176,161,.55); }

/* ---------------------------- NYELVVÁLTÓ ----------------------------
   A főmenü fejlécében, a verzió alatt. A feliratok SAJÁT nyelvükön állnak
   (Magyar / English) — ezeket a fordító-réteg szándékosan nem bántja. */
.bm-lang {
  display: inline-flex; gap: 4px; margin: 10px 0 2px; padding: 3px;
  border: 1px solid rgba(217,180,95,.22); border-radius: 999px;
  background: rgba(12,16,23,.55); backdrop-filter: blur(3px);
}
.bm-lang-b {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; letter-spacing: .3px;
  color: var(--text-dim, #b6b0a1); background: transparent;
  transition: color .16s, background .16s;
}
.bm-lang-b .bl-f { font-size: 15px; line-height: 1; }
.bm-lang-b:hover { color: var(--gold-2, #f0d290); background: rgba(217,180,95,.10); }
.bm-lang-b.on {
  color: #1d1503; background: var(--gold, #d9b45f); font-weight: 600;
  box-shadow: 0 1px 6px rgba(217,180,95,.35);
}
.bm-lang-b:focus-visible { outline: 2px solid var(--gold-2, #f0d290); outline-offset: 2px; }
@media (max-width: 640px) {
  .bm-lang-b { padding: 6px 11px; font-size: 12px; }
}

/* ============================ PANELEK ============================ */
.bm-panel {
  position: relative;
  width: 100%; max-width: 1040px; margin: 0 auto;
  background: linear-gradient(180deg, rgba(16,23,32,.92), rgba(10,15,22,.94));
  border: 1px solid var(--line, rgba(217,180,95,.32));
  border-radius: 16px; padding: 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(7px);
  text-align: left;
}
.bm-panel::before {
  content: ''; position: absolute; inset: 6px; border-radius: 11px; pointer-events: none;
  border: 1px solid rgba(217,180,95,.10);
}
.bm-main { max-width: 560px; display: flex; flex-direction: column; gap: 10px; animation: bmRise .8s .08s cubic-bezier(.2,.8,.25,1) both; }
.bm-setup.in { animation: bmRise .45s cubic-bezier(.2,.8,.25,1) both; }
.hidden { display: none !important; }

/* ---------- gombok ---------- */
.bm-btn {
  display: flex; align-items: center; gap: 12px; width: auto;
  padding: 12px 14px; min-height: 58px; border-radius: 12px; text-align: left;
  color: inherit; font: inherit; cursor: pointer;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  transition: background .16s, border-color .16s, transform .16s, box-shadow .16s;
}
.bm-btn:hover:not(:disabled) {
  background: rgba(217,180,95,.14); border-color: rgba(217,180,95,.42);
  transform: translateY(-1px);
}
.bm-btn:disabled { opacity: .38; cursor: not-allowed; }
.bm-btn .bb-ic {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; display: grid; place-items: center;
  font-size: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
}
.bm-btn .bb-txt { flex: 1; min-width: 0; }
.bm-btn .bb-txt > b { display: block; font-family: Cinzel, Georgia, serif; font-size: 15px; letter-spacing: .5px; }
.bm-btn .bb-txt > i {
  display: block; font-style: normal; font-size: 11.8px; line-height: 1.4;
  color: var(--text-dim, #b6b0a1); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis;
}
.bm-btn .bb-txt i .bs-civ { color: var(--gold-2, #f0d290); font-style: normal; }
.bm-btn .bb-txt i .bs-dim { opacity: .6; }
.bm-btn .bb-go { opacity: .45; font-size: 17px; transition: transform .16s, opacity .16s; }
.bm-btn:hover:not(:disabled) .bb-go { opacity: .95; transform: translateX(3px); }
.bm-btn.bm-primary {
  background: linear-gradient(160deg, #e2c073, #a8822f);
  border-color: #f0d290; color: #1d1503;
}
.bm-btn.bm-primary .bb-txt i { color: rgba(29,21,3,.72); }
.bm-btn.bm-primary .bb-ic { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.25); }
.bm-btn.bm-primary:hover { box-shadow: 0 12px 30px rgba(217,180,95,.34); background: linear-gradient(160deg, #f0d18b, #b8912f); }
.bm-btn.bm-ghost {
  flex: 0 0 auto; min-height: 52px; justify-content: center;
  min-width: 150px; font-family: Cinzel, Georgia, serif; font-size: 14px;
}
.bm-btn.has-save .bb-ic { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* ============================ BEÁLLÍTÓ ============================ */
.bm-setup { display: flex; flex-direction: column; gap: 16px; }
.bm-setup-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: 16px; }
.bm-h {
  display: flex; align-items: center; gap: 8px;
  font-family: Cinzel, Georgia, serif; font-size: 12.5px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--gold-2, #f0d290); margin: 0 0 9px;
}
.bm-h span {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; color: #1d1503; background: linear-gradient(160deg, #e2c073, #a8822f); font-family: Inter, sans-serif;
}

/* ---------- civ-rács ---------- */
.bm-civgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.bm-civ {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; min-height: 58px; border-radius: 11px; text-align: left;
  color: inherit; font: inherit; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  transition: background .14s, border-color .14s, transform .14s, box-shadow .14s;
  overflow: hidden;
}
.bm-civ::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--cc), var(--cc2)); opacity: .55;
}
.bm-civ:hover { background: rgba(255,255,255,.085); transform: translateY(-2px); }
.bm-civ.on {
  background: linear-gradient(180deg, rgba(217,180,95,.20), rgba(217,180,95,.08));
  border-color: var(--gold, #d9b45f);
  box-shadow: 0 0 0 1px rgba(217,180,95,.35), 0 10px 24px rgba(0,0,0,.35);
}
.bm-civ.on::after { opacity: 1; width: 4px; }
.bmc-flag {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--cc), var(--cc2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 3px 10px rgba(0,0,0,.42);
}
.bmc-flag i { font-style: normal; font-size: 19px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.bmc-txt { min-width: 0; flex: 1; }
.bmc-txt b { display: block; font-family: Cinzel, Georgia, serif; font-size: 12.5px; line-height: 1.25; }
.bmc-txt i { display: block; font-style: normal; font-size: 11px; color: var(--text-dim, #b6b0a1); margin-top: 1px; }
.bmc-tick {
  width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; color: #1d1503; background: var(--gold, #d9b45f);
  opacity: 0; transform: scale(.5); transition: .18s;
}
.bm-civ.on .bmc-tick { opacity: 1; transform: scale(1); }

/* ---------- kiválasztott civ kártyája ---------- */
.bm-detail {
  align-self: start; position: sticky; top: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid rgba(217,180,95,.22); border-radius: 13px; padding: 14px;
}
.bm-detail.flash { animation: bmFlash .5s ease; }
.bm-detail-top { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.bmd-flag {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px; display: grid; place-items: center;
  font-size: 26px; background: linear-gradient(145deg, var(--cc), var(--cc2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 6px 18px rgba(0,0,0,.45);
}
.bmd-name b { display: block; font-family: Cinzel, Georgia, serif; font-size: 15px; line-height: 1.2; }
.bmd-name i { display: block; font-style: normal; font-size: 12px; color: var(--gold-2, #f0d290); margin-top: 3px; }
.bm-trait {
  background: rgba(217,180,95,.09); border: 1px solid rgba(217,180,95,.20);
  border-radius: 10px; padding: 10px 11px;
}
.bmt-tag {
  display: inline-block; font-size: 9.5px; letter-spacing: 1.3px; text-transform: uppercase;
  color: #1d1503; background: linear-gradient(160deg, #e2c073, #a8822f);
  border-radius: 20px; padding: 2px 8px; margin-bottom: 6px;
}
.bm-trait b { display: block; font-family: Cinzel, Georgia, serif; font-size: 13.5px; color: var(--gold-2, #f0d290); }
.bm-trait p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: var(--text, #f2ece0); opacity: .92; }
.bm-bias, .bm-cities {
  display: flex; gap: 7px; align-items: baseline; margin-top: 9px;
  font-size: 11.8px; color: var(--text-dim, #b6b0a1); line-height: 1.45;
}
.bm-cities span:first-child { color: rgba(240,210,144,.75); }

/* ---------- chip-sorok (méret / világ / nehézség) ---------- */
.bm-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px 16px; }
.bm-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.bm-chips-2 { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
/* egyoszlopos, fekvő elrendezésű chipek (méret, nehézség) */
.bm-chips-1 { grid-template-columns: 1fr; }
.bm-chips-1 .bm-chip { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 9px; min-height: 52px; }
.bm-chips-1 .bmch-ic { margin: 0; font-size: 17px; }
.bm-chips-1 .bm-chip i { margin-left: auto; text-align: right; }
.bm-chips-1 .bm-chip em { flex: 1 0 100%; margin-top: 0; }
.bm-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 9px 10px; min-height: 62px; border-radius: 10px; text-align: left;
  color: inherit; font: inherit; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  transition: background .14s, border-color .14s, transform .14s;
}
.bm-chip:hover { background: rgba(255,255,255,.085); transform: translateY(-1px); }
.bm-chip.on {
  background: linear-gradient(180deg, rgba(217,180,95,.20), rgba(217,180,95,.07));
  border-color: var(--gold, #d9b45f); box-shadow: 0 0 0 1px rgba(217,180,95,.30);
}
.bmch-ic { font-size: 15px; line-height: 1; margin-bottom: 2px; }
.bm-chip b { font-family: Cinzel, Georgia, serif; font-size: 12.5px; letter-spacing: .3px; }
.bm-chip i { font-style: normal; font-size: 10.5px; color: var(--gold-2, #f0d290); opacity: .85; }
.bm-chip em { font-style: normal; font-size: 10.5px; line-height: 1.35; color: var(--text-dim, #b6b0a1); margin-top: 3px; }
.bm-diffdesc {
  margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-dim, #b6b0a1);
  border-left: 2px solid rgba(217,180,95,.35); padding-left: 9px; min-height: 34px;
}
/* Ragadós lábléc: a beállítás-panel magas, és 1440×900-on az „Indulhat a
   történelem" gomb a képhatár ALÁ csúszott (mérve: 56 px-szel). A konténer
   görgethető volt, de semmi nem jelezte — így a gomb mindig látszik. */
.bm-actions { display: flex; gap: 10px; align-items: stretch;
  position: sticky; bottom: 0; z-index: 3; padding: 10px 0 2px;
  background: linear-gradient(180deg, rgba(12,18,26,0) 0%, rgba(12,18,26,.92) 38%, rgba(12,18,26,.98) 100%); }
.bm-actions .bm-primary { flex: 1; }

/* ============================ BETÖLTŐ ============================ */
#loading .bml-card {
  width: min(430px, 92vw); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 13px;
}
.bml-emblem { position: relative; width: 66px; height: 66px; display: grid; place-items: center; }
.bml-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(217,180,95,.16); border-top-color: var(--gold, #d9b45f);
  animation: bmSpin 1.5s linear infinite;
}
.bml-glyph { font-size: 26px; filter: drop-shadow(0 3px 10px rgba(0,0,0,.6)); }
.bml-title {
  font-family: Cinzel, Georgia, serif; font-size: 15px; letter-spacing: 3px;
  color: var(--gold-2, #f0d290);
}
.bml-bar {
  width: 100%; height: 4px; border-radius: 4px; overflow: hidden;
  background: rgba(255,255,255,.08);
}
.bml-bar i { display: block; height: 100%; width: 100%; transform: scaleX(.03); transform-origin: left;
  background: linear-gradient(90deg, #a8822f, #f0d290); }
#loading.run .bml-bar i { animation: bmBar 2.8s cubic-bezier(.15,.85,.25,1) forwards; }
.bml-steps { list-style: none; margin: 0; padding: 0; width: 100%; text-align: left; }
.bml-steps li {
  display: flex; align-items: center; gap: 8px;
  font-family: Inter, sans-serif; font-size: 11.5px; letter-spacing: .2px;
  color: var(--text-dim, #b6b0a1); padding: 2.5px 0; opacity: .25;
}
.bml-steps li span { color: var(--gold, #d9b45f); font-size: 8px; opacity: .5; }
#loading.run .bml-steps li { animation: bmStep .5s ease forwards; animation-delay: var(--d); }
.bml-tip {
  margin-top: 4px; padding: 9px 11px; border-radius: 10px; width: 100%;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
}
.bml-lb {
  font-family: Inter, sans-serif; font-size: 9.5px; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--gold-2, #f0d290); opacity: .85;
}
.bml-tip small {
  font-family: Inter, sans-serif; font-size: 11.8px; line-height: 1.5; letter-spacing: 0;
  color: var(--text, #f2ece0); opacity: .9;
}
.bml-tip small.in { animation: bmTip .45s ease; }

/* ============================ BELÉPŐ (playIntro2) ============================ */
.bm-intro {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center;
  background: radial-gradient(720px 460px at 50% 45%, rgba(30,24,10,.55), rgba(4,7,11,.94) 70%), #04070b;
  opacity: 0; pointer-events: none; text-align: center; padding: 24px;
}
.bm-intro.run { animation: bmIntro var(--ms, 3000ms) ease-in-out forwards; }
.bmi-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bmi-title {
  font-family: Cinzel, Georgia, serif; font-weight: 700;
  font-size: clamp(30px, 7vw, 66px); letter-spacing: clamp(8px, 2vw, 20px);
  text-indent: clamp(8px, 2vw, 20px);
  background: linear-gradient(180deg, #f8ecc8, #d9b45f 58%, #9d7a2c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bm-intro.run .bmi-title { animation: bmiRise 1.3s cubic-bezier(.2,.8,.25,1) both; }
.bmi-rule { display: flex; align-items: center; gap: 10px; color: var(--gold, #d9b45f); opacity: .8; }
.bmi-rule i { display: block; width: clamp(50px, 14vw, 130px); height: 1px; background: linear-gradient(90deg, transparent, #d9b45f); }
.bmi-rule i:last-child { background: linear-gradient(90deg, #d9b45f, transparent); }
.bmi-rule span { font-size: 11px; }
.bmi-civ { display: flex; align-items: center; gap: 12px; }
.bm-intro.run .bmi-civ { animation: bmiRise 1.3s .35s cubic-bezier(.2,.8,.25,1) both; }
.bmi-flag {
  width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; font-size: 23px;
  background: linear-gradient(145deg, var(--cc, #d9b45f), var(--cc2, #8a6a1e));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 22px rgba(0,0,0,.5);
}
.bmi-name { text-align: left; }
.bmi-name b { display: block; font-family: Cinzel, Georgia, serif; font-size: clamp(15px, 3vw, 21px); color: #f4ecdc; }
.bmi-name i { display: block; font-style: normal; font-size: 12.5px; color: var(--gold-2, #f0d290); margin-top: 2px; }
.bmi-sub {
  font-family: Inter, sans-serif; font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase;
  color: rgba(240,210,144,.62);
}
.bm-intro.run .bmi-sub { animation: bmiRise 1s .55s cubic-bezier(.2,.8,.25,1) both; }

/* ============================ ANIMÁCIÓK ============================ */
@keyframes bmRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes bmSheen { from { background-position: 0% 50%; } to { background-position: 260% 50%; } }
@keyframes bmPulse {
  0%, 100% { box-shadow: 0 0 30px rgba(217,180,95,.18), inset 0 0 20px rgba(217,180,95,.12); }
  50% { box-shadow: 0 0 46px rgba(217,180,95,.30), inset 0 0 26px rgba(217,180,95,.20); }
}
@keyframes bmFlash { from { box-shadow: 0 0 0 2px rgba(217,180,95,.55); } to { box-shadow: 0 0 0 0 rgba(217,180,95,0); } }
@keyframes bmSpin { to { transform: rotate(360deg); } }
@keyframes bmBar { from { transform: scaleX(.03); } to { transform: scaleX(1); } }
@keyframes bmStep { from { opacity: .25; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@keyframes bmTip { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes bmiRise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes bmIntro {
  0% { opacity: 0; }
  12% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; }
}

/* ============================ RESZPONZÍV ============================ */
@media (max-width: 900px) {
  .bm-setup-grid { grid-template-columns: 1fr; }
  .bm-detail { position: static; }
}
@media (max-width: 640px) {
  .bm-menu { padding: 18px 10px 34px; gap: 12px; }
  .bm-panel { padding: 13px; border-radius: 14px; }
  .bm-civgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
  .bm-opts { grid-template-columns: 1fr; }
  .bm-chips { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  .bm-chips-1 { grid-template-columns: 1fr; }
  .bm-actions { flex-direction: column-reverse; }
  .bm-btn, .bm-civ, .bm-chip { min-height: 52px; }
  .bm-sub { font-size: 11px; letter-spacing: 2px; }
}
@media (max-width: 420px) {
  .bm-civgrid { grid-template-columns: 1fr 1fr; }
  .bm-civ { padding: 8px; gap: 7px; }
  .bmc-flag { width: 32px; height: 32px; flex: 0 0 32px; }
  .bmc-flag i { font-size: 16px; }
  .bmc-txt b { font-size: 11.5px; }
  .bmc-txt i { font-size: 10px; }
  .bm-chip em { display: none; }
  .bm-chip { min-height: 56px; }
}
@media (hover: none) {
  .bm-btn:hover, .bm-civ:hover, .bm-chip:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-menu, .bm-head, .bm-main, .bm-setup.in, .bm-title, .bm-crest,
  .bm-detail.flash, .bml-tip small.in { animation: none !important; transition: none !important; }
  #loading.run .bml-steps li { animation: none !important; opacity: 1; }
  #loading.run .bml-bar i { animation: none !important; transform: scaleX(1); }
  .bml-ring { animation: bmSpin 2.6s linear infinite !important; }
  .bm-intro.run { animation: bmIntro var(--ms, 3000ms) linear forwards !important; }
  .bm-intro.run .bmi-title, .bm-intro.run .bmi-civ, .bm-intro.run .bmi-sub { animation: none !important; }
}