/* BLACKOUT — UI (docs/blackout-gdd.md). Grounded, premium: warm charcoal panels, brass and gold, steel edges, parchment text.
   No neon, no button shadows, no emoji. Root class .bo is unique to this game (game-root-class rule). Portrait-first. */
#boStage { position: fixed; inset: 0; z-index: 60; background: #0e0c0a; }
#boStage[hidden] { display: none; }
body.bo-on { overflow: hidden; }
body.bo-on header.topbar, body.bo-on .site-foot { display: none !important; }

.bo {
  --ink: #f3e9d6; --ink2: #c9b998; --mute: #8f8270; --panel: rgba(28, 23, 19, .94); --panel2: rgba(43, 35, 28, .96); --line: rgba(232, 196, 120, .22); --line2: rgba(255, 255, 255, .08);
  --gold: #e9b44c; --gold2: #f7d488; --goldD: #9c6b1c; --steel: #6d7680; --ok: #8fd48a; --bad: #f0745a; --blue: #7fb4e0;
  position: absolute; inset: 0; overflow: hidden; color: var(--ink); font: 500 14px/1.35 Inter, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
/* the site's global header rule (z-index 20) must not lift card headers inside the game above the bottom menu */
:where(.bo) header:not(.bo-hud) { z-index: auto; }
.bo h1, .bo h2, .bo h3, .bo b, .bo .bo-num { font-family: "Barlow Condensed", Inter, sans-serif; letter-spacing: .01em; }
:where(.bo) button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
.bo-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bo-ri { width: 22px; height: 22px; object-fit: contain; flex: none; }
.bo-ri-fb { display: inline-block; border-radius: 6px; background: var(--steel); }

/* ---------------- scene ---------------- */
.bo-scene { position: absolute; inset: 0; }

/* ---------------- HUD ---------------- */
.bo-hud { position: absolute; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top) + 8px) 10px 8px;
  background: linear-gradient(180deg, rgba(14, 11, 9, .92), rgba(14, 11, 9, .55) 70%, transparent); }
.bo-exit { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: var(--ink2); }
.bo-me { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bo-avatar { position: relative; width: 42px; height: 42px; border-radius: 10px; overflow: hidden; background: #3a2f25; border: 1.5px solid var(--gold); flex: none; }
.bo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bo-avatar i { position: absolute; right: 0; bottom: 0; min-width: 18px; padding: 1px 4px; background: var(--gold); color: #2a1c08; font: 800 11px/14px "Barlow Condensed"; font-style: normal; text-align: center; border-top-left-radius: 6px; }
.bo-me-t { display: grid; min-width: 0; text-align: left; }
.bo-me-t b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.bo-me-t small { display: flex; align-items: center; gap: 3px; color: var(--gold2); font: 700 13px/1 "Barlow Condensed"; }
.bo-me-t small .bo-ic { width: 12px; height: 12px; }
.bo-res-row { flex: 1; display: flex; gap: 5px; justify-content: flex-end; min-width: 0; overflow: hidden; }
.bo-res { position: relative; display: flex; align-items: center; gap: 3px; height: 28px; padding: 0 8px 0 3px; border-radius: 8px; background: rgba(0, 0, 0, .45); border: 1px solid var(--line2); }
.bo-res b { font-size: 14px; font-weight: 700; }
.bo-cells { border-color: rgba(127, 180, 224, .4); }
.bo-cells i { display: grid; place-items: center; width: 16px; height: 16px; margin-left: 2px; border-radius: 4px; background: var(--gold); color: #2a1c08; }
.bo-cells i .bo-ic { width: 12px; height: 12px; stroke-width: 2.6; }
.bo-clr { display: flex; align-items: center; gap: 3px; height: 28px; padding: 0 8px; border-radius: 8px; background: linear-gradient(180deg, #5a4319, #3a2a10); border: 1px solid var(--goldD); color: var(--gold2); font: 800 13px/1 "Barlow Condensed"; flex: none; }
.bo-clr .bo-ic { width: 14px; height: 14px; }

/* ---------------- left queues ---------------- */
.bo-left { position: absolute; z-index: 15; left: 8px; top: calc(env(safe-area-inset-top) + 64px); display: grid; gap: 5px; width: 150px; }
.bo-q { position: relative; overflow: hidden; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px 0 4px; border-radius: 9px; background: rgba(20, 16, 13, .82); border: 1px solid var(--line2); text-align: left; }
.bo-q.busy { border-color: var(--line); }
.bo-q.locked { opacity: .6; }
.bo-q-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(255, 255, 255, .07); color: var(--ink2); }
.bo-q.busy .bo-q-ic { background: linear-gradient(180deg, #6b5020, #44320f); color: var(--gold2); }
.bo-q-t { display: grid; min-width: 0; }
.bo-q-t b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-q-t small { display: flex; align-items: center; gap: 3px; color: var(--mute); font: 600 12px/1 "Barlow Condensed"; }
.bo-q.busy .bo-q-t small { color: var(--gold2); }
.bo-q-t small .bo-ic { width: 11px; height: 11px; }
.bo-q-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p) * 100%); background: var(--gold); transition: width 1s linear; }

/* ---------------- right rail ---------------- */
.bo-rail { position: absolute; z-index: 15; right: 8px; top: calc(env(safe-area-inset-top) + 64px); display: grid; gap: 6px; }
.bo-rb { position: relative; display: grid; justify-items: center; gap: 1px; width: 62px; padding: 6px 2px 5px; border-radius: 11px; background: rgba(20, 16, 13, .82); border: 1px solid var(--line2); }
.bo-rb span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .06); color: var(--gold2); }
.bo-rb b { font-size: 12px; font-weight: 700; line-height: 1.05; text-align: center; }
.bo-rb small { color: var(--mute); font: 600 11px/1 "Barlow Condensed"; }
.bo-rb.surge span { background: linear-gradient(180deg, #7a5a1e, #4a3410); }
.bo-rb.deals span { background: linear-gradient(180deg, #5e3a2a, #3b2218); color: #ffc79a; }
.bo-rb .dot, .bo-q .dot { position: absolute; top: 4px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); border: 2px solid #1b1612; }

/* ---------------- mission bar (IRIS) and nav ---------------- */
.bo-quest { position: absolute; z-index: 16; left: 8px; right: 78px; bottom: calc(env(safe-area-inset-bottom) + 70px); }
.bo-quest-b { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 10px 4px 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); text-align: left; }
.bo-quest-b.done { border-color: var(--gold); background: linear-gradient(90deg, rgba(110, 80, 25, .95), var(--panel) 60%); }
.bo-iris { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; object-position: 50% 20%; background: #3a2f25; flex: none; }
.bo-quest-b span { flex: 1; display: grid; min-width: 0; }
.bo-quest-b small { color: var(--gold2); font: 700 11px/1 "Barlow Condensed"; letter-spacing: .08em; text-transform: uppercase; }
.bo-quest-b b { font-size: 16px; font-weight: 600; line-height: 1.1; }
.bo-quest-b > i { font-style: normal; color: var(--ink2); }
.bo-quest-b.done > i { padding: 6px 12px; border-radius: 8px; background: var(--gold); color: #2a1c08; font: 800 14px/1 "Barlow Condensed"; }
.bo-nav { position: absolute; z-index: 18; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 6px calc(env(safe-area-inset-bottom) + 6px); background: linear-gradient(0deg, rgba(14, 11, 9, .98), rgba(14, 11, 9, .9)); border-top: 1px solid var(--line); }
.bo-nav button { display: grid; justify-items: center; gap: 2px; padding: 5px 0; border-radius: 10px; color: var(--mute); }
.bo-nav button .bo-ic { width: 22px; height: 22px; }
.bo-nav button span { font: 700 12px/1 "Barlow Condensed"; letter-spacing: .04em; text-transform: uppercase; }
.bo-nav button.on { color: var(--gold2); background: rgba(233, 180, 76, .1); }
.bo[data-view="breach"] .bo-left, .bo[data-view="breach"] .bo-rail, .bo[data-view="breach"] .bo-quest { display: none; }
.bo[data-view="ops"] .bo-left, .bo[data-view="ops"] .bo-rail { display: none; }

/* IRIS speaking */
.bo-iris-say { position: absolute; z-index: 40; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 128px); display: flex; gap: 10px; align-items: flex-end; opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .2, 1); pointer-events: auto; }
.bo-iris-say.in { opacity: 1; transform: none; }
@media (min-width: 900px) { .bo-iris-say { right: auto; width: 560px; } .bo-quest { right: auto; width: 520px; } }
.bo-iris-say img { width: 84px; height: 112px; object-fit: cover; object-position: 50% 15%; border-radius: 12px; border: 1.5px solid var(--gold); flex: none; }
.bo-iris-say p { margin: 0; flex: 1; padding: 10px 12px; border-radius: 12px 12px 12px 2px; background: #f1e6cf; color: #2b2117; font-size: 15px; line-height: 1.35; }
.bo-iris-say p b { display: block; font-size: 13px; color: #8a5a10; letter-spacing: .1em; }

/* ---------------- toasts ---------------- */
.bo-toasts { position: absolute; z-index: 90; top: calc(env(safe-area-inset-top) + 60px); left: 50%; transform: translateX(-50%); display: grid; gap: 6px; width: min(92%, 380px); pointer-events: none; }
.bo-toast { padding: 10px 14px; border-radius: 10px; background: rgba(26, 21, 17, .96); border: 1px solid var(--line); text-align: center; font-weight: 600; opacity: 0; transform: translateY(-8px); transition: .25s; }
.bo-toast.in { opacity: 1; transform: none; }
.bo-toast.bad { border-color: rgba(240, 116, 90, .55); color: #ffd2c6; }

/* ---------------- buttons ---------------- */
.bo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 10px; background: linear-gradient(180deg, #4b4036, #362d25); border: 1px solid rgba(255, 255, 255, .12); color: var(--ink); font: 700 16px/1 "Barlow Condensed" !important; letter-spacing: .03em; text-transform: uppercase; }
.bo-btn.gold { background: linear-gradient(180deg, #f6cf73, #d79a2e); border-color: #f8dc96; color: #2a1c08; }
.bo-btn.cells { background: linear-gradient(180deg, #3d6584, #284660); border-color: rgba(127, 180, 224, .5); color: #e8f3ff; }
.bo-btn.ghost { background: transparent; border-color: var(--line); color: var(--ink2); }
.bo-btn.small { min-height: 32px; padding: 0 10px; font-size: 14px !important; }
.bo-btn.wide { width: 100%; margin-top: 10px; }
.bo-btn:disabled { opacity: .45; cursor: default; }
.bo-btn:active:not(:disabled) { transform: translateY(1px); }

/* ---------------- sheets ---------------- */
.bo-sheet-wrap { position: absolute; z-index: 70; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: rgba(8, 6, 4, 0); transition: background .22s; }
.bo-sheet-wrap.in { background: rgba(8, 6, 4, .62); }
.bo-sheet { width: 100%; max-height: 86%; display: flex; flex-direction: column; border-radius: 18px 18px 0 0; background: linear-gradient(180deg, #2b231c, #1e1813); border: 1px solid var(--line); border-bottom: 0; transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); padding-bottom: env(safe-area-inset-bottom); }
.bo-sheet-wrap.in .bo-sheet { transform: none; }
.bo-sheet header { position: relative; padding: 16px 52px 10px 16px; border-bottom: 1px solid var(--line2); }
.bo-sheet header h2 { margin: 0; font-size: 24px; font-weight: 800; text-transform: uppercase; color: var(--gold2); }
.bo-sheet-art { display: block; width: calc(100% + 32px); margin: -16px -16px 10px; height: 140px; object-fit: cover; border-radius: 18px 18px 0 0; }
.bo-sub { margin: 2px 0 0; color: var(--ink2); }
.bo-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--ink2); }
.bo-sheet-body { overflow: auto; padding: 12px 16px 18px; -webkit-overflow-scrolling: touch; }
.bo-sheet-body h3 { margin: 14px 0 8px; font-size: 16px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .06em; }
.bo-muted { color: var(--mute); } .small { font-size: 12px; }
@media (min-width: 900px) {
  .bo-sheet-wrap { align-items: center; }
  .bo-sheet { width: 520px; max-height: 82%; border-radius: 18px; border-bottom: 1px solid var(--line); }
  .bo-sheet-wrap.wide .bo-sheet { width: 760px; }
}

/* cost chips, rewards, timers */
.bo-cost { display: inline-flex; align-items: center; gap: 3px; margin: 2px 8px 2px 0; font: 700 15px/1 "Barlow Condensed"; }
.bo-cost img { width: 22px; height: 22px; object-fit: contain; }
.bo-cost.short { color: var(--bad); }
.bo-rewards { display: flex; flex-wrap: wrap; gap: 4px; }
.bo-timer-big { display: grid; gap: 8px; text-align: center; margin: 4px 0 12px; }
.bo-timer-big b { font-size: 34px; color: var(--gold2); }
.bo-bar { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bo-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--goldD), var(--gold)); }
.bo-items { display: grid; gap: 6px; }
.bo-item { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 8px; align-items: center; padding: 6px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.bo-item img { width: 40px; height: 40px; object-fit: contain; }
.bo-item span { display: grid; } .bo-item small { color: var(--mute); }

/* daily, login, surge */
.bo-daily-bar { position: relative; height: 12px; margin: 34px 12px 26px; border-radius: 6px; background: rgba(255, 255, 255, .08); }
.bo-daily-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: linear-gradient(90deg, var(--goldD), var(--gold)); }
.bo-chest { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; }
.bo-chest img { width: 44px; height: 44px; object-fit: contain; filter: grayscale(.6) brightness(.8); }
.bo-chest.ready img { filter: none; animation: boBob 1.2s ease-in-out infinite; }
.bo-chest.got img { filter: grayscale(1) brightness(.5); }
.bo-chest small { font: 700 12px/1 "Barlow Condensed"; color: var(--ink2); }
@keyframes boBob { 50% { transform: translateY(-4px); } }
.bo-tasks { display: grid; gap: 5px; }
.bo-task { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 9px; background: rgba(255, 255, 255, .04); }
.bo-task span { display: grid; } .bo-task small { color: var(--mute); }
.bo-task em { font: 800 15px/1 "Barlow Condensed"; font-style: normal; color: var(--gold2); }
.bo-task.done { opacity: .55; } .bo-task.done em { color: var(--ok); }
.bo-login { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bo-day { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid transparent; font: 700 13px/1 "Barlow Condensed"; }
.bo-day img { width: 30px; height: 30px; object-fit: contain; }
.bo-day span { display: flex; align-items: center; gap: 2px; }
.bo-day.today { border-color: var(--gold); background: rgba(233, 180, 76, .1); }
.bo-day.got { opacity: .45; }
.bo-surge-phase { display: flex; gap: 8px; align-items: center; padding: 10px; border-radius: 10px; background: rgba(233, 180, 76, .1); color: var(--gold2); }
.bo-chests3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.bo-chest3 { display: grid; justify-items: center; gap: 4px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.bo-chest3 img { width: 54px; height: 54px; object-fit: contain; filter: grayscale(.5) brightness(.8); }
.bo-chest3.ready { background: rgba(233, 180, 76, .14); } .bo-chest3.ready img { filter: none; animation: boBob 1.2s ease-in-out infinite; }
.bo-chest3.got { opacity: .4; }
.bo-points { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .3); }
.bo-points b { font-size: 24px; color: var(--gold2); }
.bo-rank { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 3px; }
.bo-rank li { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; background: rgba(255, 255, 255, .03); }
.bo-rank li > span { font: 800 15px/1 "Barlow Condensed"; color: var(--mute); text-align: center; }
.bo-rank li:nth-child(-n+3) > span { color: var(--gold2); }
.bo-rank li small { color: var(--mute); } .bo-rank li em { font: 700 15px/1 "Barlow Condensed"; font-style: normal; }
.bo-rank li.you { background: rgba(233, 180, 76, .14); }

/* items, crates */
.bo-grid-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.bo-inv { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 4px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); }
.bo-inv img { width: 48px; height: 48px; object-fit: contain; }
.bo-inv i { position: absolute; top: 4px; right: 5px; font: 800 13px/1 "Barlow Condensed"; font-style: normal; color: var(--gold2); }
.bo-inv small { font-size: 11px; line-height: 1.15; color: var(--ink2); text-align: center; }
.bo-crate { display: grid; justify-items: center; gap: 10px; }
.bo-crate-art { width: 150px; height: 150px; object-fit: contain; animation: boPop .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes boPop { from { transform: scale(.4); opacity: 0; } }
.bo-crate-got { display: grid; gap: 6px; width: 100%; }
.bo-crate-got span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(233, 180, 76, .1); font-weight: 700; opacity: 0; animation: boIn .35s var(--d) forwards; }
.bo-crate-got img { width: 30px; height: 30px; object-fit: contain; }
@keyframes boIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* clearance, profile */
.bo-clr-bar { position: relative; height: 22px; border-radius: 11px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bo-clr-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--goldD), var(--gold)); }
.bo-clr-bar span { position: relative; display: block; text-align: center; font: 700 14px/22px "Barlow Condensed"; }
.bo-clr-list { display: grid; gap: 3px; margin-top: 12px; }
.bo-clr-list div { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; padding: 7px 8px; border-radius: 8px; background: rgba(255, 255, 255, .03); opacity: .7; }
.bo-clr-list div.have { opacity: 1; background: rgba(233, 180, 76, .1); }
.bo-clr-list b { color: var(--gold2); } .bo-clr-list small { color: var(--mute); }
.bo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bo-stats div { display: grid; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.bo-stats small { color: var(--mute); } .bo-stats b { font-size: 18px; }
.bo-field { display: grid; gap: 4px; margin-top: 12px; color: var(--ink2); }
.bo-field input { height: 42px; padding: 0 12px; border-radius: 10px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); color: var(--ink); font: inherit; user-select: text; }
.bo-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bo-log li { display: flex; gap: 8px; color: var(--ink2); } .bo-log small { color: var(--mute); min-width: 44px; }

/* store */
.bo-tabs { display: flex; gap: 4px; margin-bottom: 10px; overflow-x: auto; }
.bo-tabs button { flex: none; padding: 8px 14px; border-radius: 9px; background: rgba(255, 255, 255, .05); color: var(--ink2); font: 700 15px/1 "Barlow Condensed"; text-transform: uppercase; }
.bo-tabs button.on { background: var(--gold); color: #2a1c08; }
.bo-packs { display: grid; gap: 8px; }
@media (min-width: 900px) { .bo-packs { grid-template-columns: 1fr 1fr; } }
.bo-pack { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); }
.bo-pack img { width: 64px; height: 64px; object-fit: contain; }
.bo-pack b { font-size: 17px; } .bo-pack p { margin: 2px 0 0; color: var(--ink2); font-size: 13px; }
.bo-pack.whale { border-color: var(--line); background: linear-gradient(135deg, rgba(233, 180, 76, .12), rgba(255, 255, 255, .03)); }
.bo-pack.gone { opacity: .5; }
.bo-web { display: inline-block; margin-top: 4px; padding: 2px 6px; border-radius: 5px; background: rgba(143, 212, 138, .14); color: var(--ok); font-weight: 700; }
.bo-growth { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bo-offer-art { display: block; width: 160px; height: 160px; margin: 0 auto; object-fit: contain; }
.bo-sheet-wrap.offer .bo-sheet { border-color: var(--gold); }

/* ---------------- Breach: stage map ---------------- */
.bo-breach { position: absolute; inset: 0; overflow-y: auto; padding: calc(env(safe-area-inset-top) + 62px) 10px calc(env(safe-area-inset-bottom) + 80px); background: radial-gradient(120% 60% at 50% 0%, #3a2c1e, #15110d 60%); }
.bo-breach-top { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bo-energy { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .4); border: 1px solid var(--line); color: var(--gold2); font: 700 17px/1 "Barlow Condensed"; }
.bo-energy small { margin-left: 4px; color: var(--mute); font-size: 13px; }
.bo-daily-run { display: grid; text-align: right; padding: 6px 12px; border-radius: 10px; background: linear-gradient(180deg, #4d3b20, #2f2414); border: 1px solid var(--line); }
.bo-daily-run b { font-size: 16px; color: var(--gold2); } .bo-daily-run small { color: var(--ink2); }
.bo-daily-run:disabled { opacity: .5; }
.bo-chapter { margin-bottom: 14px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #17120e; }
.bo-chapter header { position: relative; height: 128px; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(0deg, rgba(14, 11, 9, .9), transparent 70%), var(--art) center / cover; }
.bo-chapter header small { color: var(--gold2); font: 700 12px/1 "Barlow Condensed"; letter-spacing: .12em; text-transform: uppercase; }
.bo-chapter header h3 { margin: 2px 0 0; font-size: 26px; font-weight: 800; text-transform: uppercase; }
.bo-chapter header span { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 4px; font: 700 15px/1 "Barlow Condensed"; color: var(--gold2); }
.bo-chapter header span .bo-ic { width: 14px; height: 14px; fill: var(--gold); stroke: none; }
.bo-nodes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 12px; }
.bo-node { display: grid; justify-items: center; gap: 3px; padding: 8px 0 6px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line2); }
.bo-node b { font-size: 22px; font-weight: 800; }
.bo-node.next { background: linear-gradient(180deg, #f6cf73, #d79a2e); color: #2a1c08; border-color: #f8dc96; }
.bo-node.boss { border-color: rgba(240, 116, 90, .45); }
.bo-node.locked { opacity: .35; }
.bo-stars { display: flex; gap: 1px; }
.bo-stars i .bo-ic { width: 11px; height: 11px; fill: rgba(255, 255, 255, .15); stroke: none; }
.bo-stars i.on .bo-ic { fill: var(--gold2); }
.bo-node.next .bo-stars i .bo-ic { fill: rgba(42, 28, 8, .3); }
.bo-stage-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.bo-stage-info div { display: grid; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.bo-stage-info small { color: var(--mute); } .bo-stage-info b { font-size: 18px; }

/* ---------------- Breach: the run ---------------- */
.bo-run { position: absolute; inset: 0; z-index: 25; background: #120f0c; }
.bo-run canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.bo-run-top { position: absolute; top: calc(env(safe-area-inset-top) + 8px); left: 10px; right: 10px; display: flex; align-items: center; gap: 10px; }
.bo-run-top b { flex: 1; font-size: 20px; text-transform: uppercase; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.bo-run-top span { padding: 4px 12px; border-radius: 10px; background: rgba(0, 0, 0, .55); font: 800 22px/1 "Barlow Condensed"; color: var(--gold2); }
.bo-run-hint { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 24px); transform: translateX(-50%); padding: 8px 14px; border-radius: 10px; background: rgba(0, 0, 0, .55); color: var(--ink2); white-space: nowrap; transition: opacity .4s; pointer-events: none; }
.bo-run-hint.off { opacity: 0; }
.bo-run-end { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(10, 8, 6, .55); }
.bo-result { width: min(100%, 380px); display: grid; justify-items: center; gap: 10px; padding: 20px 16px; border-radius: 18px; background: linear-gradient(180deg, #2f261d, #1d1712); border: 1px solid var(--line); text-align: center; animation: boPop .4s cubic-bezier(.2, 1.3, .4, 1); }
.bo-result h2 { margin: 0; font-size: 32px; font-weight: 800; text-transform: uppercase; color: var(--gold2); }
.bo-result.lost h2 { color: #ffb4a3; }
.bo-result p { margin: 0; color: var(--ink2); }
.bo-surv { font: 700 18px/1 "Barlow Condensed" !important; color: var(--ink) !important; }
.bo-stars.big { gap: 6px; }
.bo-stars.big i .bo-ic { width: 44px; height: 44px; }
.bo-stars.big i.on { animation: boPop .45s var(--d) cubic-bezier(.2, 1.5, .4, 1) both; }
.bo-result-btns { display: flex; gap: 8px; width: 100%; } .bo-result-btns .bo-btn { flex: 1; }

/* failure */
.bo-fail { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: #ffd2c6; background: #120f0c; text-align: center; }

/* ---------------- district ---------------- */
.bo-dview { position: absolute; inset: 0; overflow: auto; scrollbar-width: none; cursor: grab; touch-action: none; background: #2a2016; }
.bo-dview::-webkit-scrollbar { display: none; }
.bo-dmap { position: relative; height: max(100%, 860px); aspect-ratio: 3200 / 1786; min-width: 100%; isolation: isolate; } /* keeps the depth order of buildings, units and tags inside the map, under the HUD and menu */
@media (min-width: 900px) { .bo-dmap { height: max(100%, 980px); } }
.bo-plate { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bo-bld { position: absolute; display: block; }
.bo-bld > img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: filter .2s; }
.bo-bld:hover > img { filter: brightness(1.12); }
.bo-bld.new > img { filter: grayscale(.7) brightness(.85) sepia(.3); opacity: .75; }
.bo-bld.building > img { animation: boBuild 1.6s ease-in-out infinite; }
@keyframes boBuild { 50% { filter: brightness(1.15) sepia(.25); } }
.bo-bld.pulse > img, .bo-pad.pulse { animation: boPulse .6s ease-in-out 4; }
@keyframes boPulse { 50% { filter: brightness(1.5) drop-shadow(0 0 14px #f7d488); } }
.bo-lvl { position: absolute; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border-radius: 7px; background: rgba(20, 16, 12, .82); border: 1px solid var(--line); color: var(--ink); font: 600 12px/1 Inter; white-space: nowrap; pointer-events: none; }
.bo-lvl b { display: grid; place-items: center; min-width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(180deg, #f6cf73, #d79a2e); color: #2a1c08; font-size: 13px; }
.bo-bar-b { position: absolute; transform: translate(-50%, 6px); width: 120px; height: 18px; border-radius: 6px; overflow: hidden; background: rgba(20, 16, 12, .85); border: 1px solid var(--line); pointer-events: none; }
.bo-bar-b i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #8a5c14, #d79a2e); transition: width 1s linear; }
.bo-bar-b small { position: relative; display: block; text-align: center; font: 700 12px/16px "Barlow Condensed"; color: #fff; }
.bo-collect { position: absolute; transform: translate(-50%, -150%); display: flex; align-items: center; gap: 3px; padding: 4px 8px 4px 4px; border-radius: 14px; background: #f1e6cf; color: #2b2117; font: 800 14px/1 "Barlow Condensed"; animation: boBob 1.4s ease-in-out infinite; }
.bo-collect img { width: 24px; height: 24px; }
.bo-up { position: absolute; transform: translate(60px, -128%); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #7cc56f; color: #10260c; pointer-events: none; }
.bo-up .bo-ic { width: 14px; height: 14px; stroke-width: 3; }
.bo-pad { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; padding: 6px 10px; border-radius: 12px; background: rgba(20, 16, 12, .72); border: 1.5px dashed rgba(247, 212, 136, .7); color: var(--gold2); }
.bo-pad .bo-ic { width: 22px; height: 22px; stroke-width: 2.4; }
.bo-pad small { font: 700 12px/1 "Barlow Condensed"; white-space: nowrap; }
.bo-float { position: absolute; z-index: 50; transform: translate(-50%, 0); display: flex; align-items: center; gap: 4px; font: 800 20px/1 "Barlow Condensed"; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); pointer-events: none; animation: boFloat 1.2s ease-out forwards; }
@keyframes boFloat { to { transform: translate(-50%, -70px); opacity: 0; } }
.bo-req { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.bo-req span { padding: 4px 8px; border-radius: 7px; font: 700 14px/1 "Barlow Condensed"; }
.bo-req .ok { background: rgba(143, 212, 138, .14); color: var(--ok); } .bo-req .no { background: rgba(240, 116, 90, .14); color: var(--bad); }
.bo-marks { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 5px; }
.bo-marks button { display: grid; gap: 2px; padding: 6px 4px; border-radius: 9px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line2); }
.bo-marks button.on { border-color: var(--gold); background: rgba(233, 180, 76, .14); }
.bo-marks button:disabled { opacity: .35; } .bo-marks small { color: var(--mute); font-size: 11px; }
.bo-field input[type=range] { height: auto; padding: 0; accent-color: var(--gold); background: none; border: 0; }
.bo-tech { display: grid; gap: 6px; }
.bo-tnode { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.bo-tnode span { display: grid; } .bo-tnode small { color: var(--mute); }
.bo-tnode .bo-tcost { grid-column: 1; } .bo-tnode button { grid-column: 2; grid-row: 1 / span 2; }
.bo-tnode.locked { opacity: .55; } .bo-tnode.max em { color: var(--ok); font: 800 15px/1 "Barlow Condensed"; font-style: normal; }
.bo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bo-tabs button img.bo-ri { width: 26px; height: 26px; }

/* ---------------- operators ---------------- */
.bo-ops { position: absolute; inset: 0; overflow-y: auto; padding: calc(env(safe-area-inset-top) + 62px) 10px calc(env(safe-area-inset-bottom) + 80px); background: radial-gradient(120% 60% at 50% 0%, #33281c, #15110d 60%); }
.bo-ops-tabs { position: sticky; top: 0; z-index: 2; padding: 4px 0; background: rgba(21, 17, 13, .9); }
.bo-h3 { margin: 16px 0 8px; font-size: 16px; color: var(--ink2); text-transform: uppercase; letter-spacing: .06em; }
.bo-opgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.bo-opc { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #2a2119; border: 2px solid #5b5248; }
.bo-opc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.bo-opc.r-SR { border-color: #5d8fc0; } .bo-opc.r-SSR { border-color: #a573d8; } .bo-opc.r-UR { border-color: #e9b44c; }
.bo-opc.none img { filter: grayscale(1) brightness(.45); }
.bo-opc.sel { outline: 3px solid var(--gold2); }
.bo-opc-top { position: absolute; top: 4px; left: 4px; right: 4px; display: flex; justify-content: space-between; }
.bo-opc-top i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: rgba(0, 0, 0, .6); font: 800 12px/1 "Barlow Condensed"; font-style: normal; }
.bo-opc-top b { padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .65); font-size: 14px; }
.bo-opc-name { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; padding: 14px 4px 4px; background: linear-gradient(0deg, rgba(10, 8, 6, .92), transparent); }
.bo-opc-name b { font-size: 15px; } .bo-opc-name small { color: var(--ink2); font-size: 11px; }
.bo-opc .dot { top: 28px; }
.bo-opc.empty { display: grid; place-items: center; gap: 4px; color: var(--mute); }
.bo-ophero { position: relative; height: 260px; margin: -4px 0 10px; border-radius: 14px; overflow: hidden; border: 2px solid #5b5248; }
.bo-ophero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.bo-ophero.r-SR { border-color: #5d8fc0; } .bo-ophero.r-SSR { border-color: #a573d8; } .bo-ophero.r-UR { border-color: #e9b44c; }
.bo-oprar { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .7); font: 800 14px/1 "Barlow Condensed"; text-transform: uppercase; letter-spacing: .08em; color: var(--gold2); }
.bo-skills { display: grid; gap: 6px; }
.bo-skill { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.bo-skill span { flex: 1; display: grid; gap: 1px; } .bo-skill small { color: var(--mute); }
.bo-squad { margin-bottom: 10px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line2); }
.bo-squad header { display: grid; margin-bottom: 8px; } .bo-squad header small { color: var(--mute); }
.bo-squad.locked { opacity: .5; }
.bo-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bo-slot { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: rgba(0, 0, 0, .3); border: 1.5px dashed rgba(255, 255, 255, .18); color: var(--mute); }
.bo-slot.front { border-color: rgba(233, 180, 76, .45); }
.bo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.bo-slot b { position: absolute; right: 3px; bottom: 3px; padding: 1px 5px; border-radius: 5px; background: rgba(0, 0, 0, .7); font-size: 13px; }
.bo-slot i { font-style: normal; } .bo-slot small { font-size: 11px; }
.bo-recruit { display: grid; gap: 10px; }
.bo-scan { position: relative; min-height: 210px; display: flex; align-items: flex-end; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(90deg, rgba(15, 12, 9, .95) 30%, rgba(15, 12, 9, .2)), var(--art) right 20% / cover; }
.bo-scan.deep { border-color: var(--gold); }
.bo-scan > div { padding: 14px; max-width: 72%; }
.bo-scan small { color: var(--gold2); font: 700 12px/1 "Barlow Condensed"; letter-spacing: .14em; text-transform: uppercase; }
.bo-scan h3 { margin: 4px 0; font-size: 26px; text-transform: uppercase; }
.bo-scan p { margin: 4px 0; color: var(--ink2); }
.bo-pulls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .bo-pulls.n1 { grid-template-columns: 200px; justify-content: center; }
.bo-pull { display: grid; justify-items: center; gap: 2px; text-align: center; opacity: 0; animation: boIn .4s var(--d) forwards; }
.bo-pull img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 15%; border-radius: 10px; border: 2px solid #5b5248; }
.bo-pull.r-SR img { border-color: #5d8fc0; } .bo-pull.r-SSR img { border-color: #a573d8; } .bo-pull.r-UR img { border-color: #e9b44c; }
.bo-pull b { font-size: 13px; } .bo-pull small { color: var(--mute); font-size: 11px; }
.bo-sheet-wrap.reveal.best-UR .bo-sheet { border-color: #e9b44c; background: radial-gradient(80% 50% at 50% 0%, #6b4c14, #1e1813); }
@media (max-width: 520px) { .bo-pulls { grid-template-columns: repeat(3, 1fr); } }

/* ---------------- map ---------------- */
.bo-map { position: absolute; inset: 0; background: #2a2016; }
.bo-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.bo-map-tools { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 126px); display: flex; gap: 6px; }
.bo-map-tools .bo-btn { background: rgba(28, 23, 19, .92); }
.bo-map-tools b { color: var(--gold2); }
.bo-map-stam { position: absolute; z-index: 5; top: calc(env(safe-area-inset-top) + 62px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 10px; background: rgba(20, 16, 12, .85); border: 1px solid var(--line); color: var(--gold2); font: 700 14px/1 "Barlow Condensed"; }
.bo-map-stam small { color: var(--mute); }
.bo[data-view="map"] .bo-quest { display: none; }
.bo-squadpick { display: grid; gap: 6px; }
.bo-squadpick button { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 10px; align-items: center; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1.5px solid transparent; text-align: left; }
.bo-squadpick button.on { border-color: var(--gold); background: rgba(233, 180, 76, .1); }
.bo-squadpick span { grid-row: 1 / span 2; display: flex; }
.bo-squadpick span img { width: 34px; height: 44px; object-fit: cover; object-position: 50% 15%; border-radius: 6px; margin-right: -8px; border: 1.5px solid #1e1813; }
.bo-squadpick small { color: var(--mute); }
.bo-sheet-ill { display: block; width: 120px; height: 120px; margin: 0 auto 6px; object-fit: contain; }
.bo-tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 8px; }
.bo-tiers button { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 9px; background: rgba(255, 255, 255, .04); }
.bo-tiers img { width: 34px; height: 34px; object-fit: contain; filter: grayscale(.7) brightness(.7); }
.bo-tiers button.on { background: rgba(233, 180, 76, .16); } .bo-tiers button.on img { filter: none; animation: boBob 1.2s ease-in-out infinite; }
.bo-tiers button.got { opacity: .4; } .bo-tiers small { font: 700 12px/1 "Barlow Condensed"; color: var(--ink2); }

/* ================= Phase 2: crews, events, PvP ================= */
.bo[data-view="crew"] .bo-left, .bo[data-view="crew"] .bo-rail, .bo[data-view="crew"] .bo-quest { display: none; }
.bo-crew { position: absolute; inset: 0; overflow-y: auto; padding: calc(env(safe-area-inset-top) + 62px) 10px calc(env(safe-area-inset-bottom) + 80px); background: radial-gradient(120% 60% at 50% 0%, #33281c, #15110d 60%); }
.bo-crew-head { position: relative; min-height: 150px; display: flex; align-items: flex-end; margin-bottom: 10px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(0deg, rgba(14, 11, 9, .94), rgba(14, 11, 9, .35) 70%), var(--art) center 35% / cover; }
.bo-crew-head.big { min-height: 210px; }
.bo-crew-head > div { padding: 14px; width: 100%; }
.bo-crew-head h2 { margin: 2px 0; font-size: 28px; font-weight: 800; text-transform: uppercase; }
.bo-crew-head p { margin: 0 0 6px; color: var(--ink2); }
.bo-tag { display: inline-block; padding: 2px 7px; border-radius: 6px; background: #e9b44c; color: #2a1c08; font: 800 13px/1.2 "Barlow Condensed"; letter-spacing: .06em; }
.bo-crew-lvl { display: grid; gap: 4px; } .bo-crew-lvl small { color: var(--ink2); }
.bo-crew-tabs { position: sticky; top: 0; z-index: 2; padding: 4px 0; background: rgba(21, 17, 13, .92); }
.bo-crew-tabs button { position: relative; }
.bo-crew-tabs .dot, .bo-bigact .dot { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); }
.bo-crewlist, .bo-members, .bo-rallies { display: grid; gap: 6px; }
.bo-crewrow, .bo-member, .bo-rallyrow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); }
.bo-crewrow > span:nth-child(2), .bo-member > span:nth-child(2), .bo-rallyrow > span { flex: 1; display: grid; min-width: 0; }
.bo-crewrow small, .bo-member small, .bo-rallyrow small { color: var(--mute); }
.bo-member.you { border-color: var(--line); background: rgba(233, 180, 76, .08); }
.bo-member em.on { color: var(--ok); font-style: normal; }
.bo-rank { min-width: 52px; padding: 4px 6px; border-radius: 7px; background: rgba(255, 255, 255, .07); text-align: center; font: 800 13px/1 "Barlow Condensed"; color: var(--ink2); }
.bo-rank.r5 { background: #e9b44c; color: #2a1c08; } .bo-rank.r4 { background: #6a5226; color: #f7d488; }
.bo-rallyrow img { width: 44px; height: 44px; object-fit: contain; }
.bo-rallyrow em { font: 800 14px/1 "Barlow Condensed"; font-style: normal; color: var(--ok); }
.bo-rallyrow.done { opacity: .55; }
.bo-crew-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.bo-bigact { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.bo-bigact img { width: 54px; height: 54px; object-fit: contain; }
.bo-bigact b { font-size: 17px; } .bo-bigact small { color: var(--mute); font-size: 12px; text-align: center; }
.bo-bigact:disabled { opacity: .55; }
.bo-note { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: rgba(233, 180, 76, .09); border: 1px solid var(--line); color: var(--ink); }
.bo-note .bo-btn { margin: 2px 4px 2px 0; }
.bo-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--ink2); }
.bo-fail-soft { padding: 40px; text-align: center; color: var(--mute); }
.bo-chat { display: flex; flex-direction: column; height: calc(100dvh - 330px); min-height: 300px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line2); overflow: hidden; }
.bo-chat-log { flex: 1; overflow-y: auto; padding: 10px; display: grid; align-content: start; gap: 6px; user-select: text; }
.bo-chat-log p { margin: 0; max-width: 85%; padding: 7px 10px; border-radius: 12px 12px 12px 3px; background: rgba(255, 255, 255, .07); display: grid; gap: 1px; }
.bo-chat-log p b { font-size: 13px; color: var(--gold2); } .bo-chat-log p small { color: var(--mute); font-size: 11px; justify-self: end; }
.bo-chat-log p.me { justify-self: end; border-radius: 12px 12px 3px 12px; background: rgba(233, 180, 76, .16); }
.bo-chat-log p.sys { max-width: none; justify-self: center; background: none; color: var(--mute); font-size: 12px; text-align: center; }
.bo-chat-in { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line2); background: rgba(20, 16, 12, .9); }
.bo-chat-in input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); color: var(--ink); font: inherit; user-select: text; }
.bo-event { margin-bottom: 12px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #17120e; }
.bo-event > header { position: relative; min-height: 120px; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(0deg, rgba(14, 11, 9, .94), rgba(14, 11, 9, .3) 75%), var(--art) center / cover; }
.bo-event > header small { color: var(--gold2); font: 700 12px/1 "Barlow Condensed"; letter-spacing: .1em; text-transform: uppercase; }
.bo-event > header h3 { margin: 2px 0; font-size: 26px; font-weight: 800; text-transform: uppercase; }
.bo-event > header p { margin: 0; color: var(--ink2); }
.bo-event > :not(header) { margin-left: 12px; margin-right: 12px; }
.bo-event > :last-child { margin-bottom: 12px; }
.bo-clash-days { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 10px; }
.bo-clash-days div { display: grid; justify-items: center; gap: 1px; padding: 6px 2px; border-radius: 8px; background: rgba(255, 255, 255, .04); text-align: center; }
.bo-clash-days small { color: var(--mute); font-size: 11px; } .bo-clash-days b { font-size: 13px; } .bo-clash-days span { font: 700 12px/1.1 "Barlow Condensed"; color: var(--ink2); }
.bo-clash-days .today { background: rgba(233, 180, 76, .18); outline: 1.5px solid var(--gold); }
.bo-clash-days .won { background: rgba(143, 212, 138, .14); } .bo-clash-days .lost { background: rgba(240, 116, 90, .12); }
.bo-behemoth { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px; border-radius: 12px; background: rgba(240, 116, 90, .08); border: 1px solid rgba(240, 116, 90, .3); }
.bo-behemoth img { width: 64px; height: 64px; object-fit: contain; } .bo-behemoth > span { flex: 1; display: grid; gap: 4px; } .bo-behemoth small { color: var(--ink2); }
.bo-bar.red i { background: linear-gradient(90deg, #8a2a1c, #e0573f); }
.bo-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 8px; }
.bo-shopitem { display: grid; justify-items: center; gap: 3px; padding: 8px 4px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); text-align: center; }
.bo-shopitem > img { width: 52px; height: 52px; object-fit: contain; } .bo-shopitem b { font-size: 14px; line-height: 1.1; }
.bo-shopitem small { display: flex; align-items: center; gap: 3px; color: var(--gold2); font: 700 12px/1 "Barlow Condensed"; } .bo-shopitem small img { width: 16px; height: 16px; }
.bo-shopitem:disabled { opacity: .45; }
.bo-evlist { display: grid; gap: 8px; }
.bo-evcard { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); text-align: left; }
.bo-evcard img { width: 92px; height: 60px; border-radius: 10px; object-fit: cover; } .bo-evcard span { flex: 1; display: grid; } .bo-evcard small { color: var(--mute); }
.bo-incoming { position: absolute; z-index: 22; left: 8px; right: 8px; top: calc(env(safe-area-inset-top) + 60px); display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: linear-gradient(90deg, #6a1c13, #3a120c); border: 1px solid #e0573f; animation: boAlarm 1.4s ease-in-out infinite; }
.bo-incoming[hidden] { display: none; }
.bo-incoming > .bo-ic { width: 24px; height: 24px; color: #ffb4a3; } .bo-incoming span { flex: 1; display: grid; } .bo-incoming small { color: #ffd2c6; }
@keyframes boAlarm { 50% { border-color: #ffb4a3; } }
.bo:has(.bo-incoming:not([hidden])) .bo-left, .bo:has(.bo-incoming:not([hidden])) .bo-rail { top: calc(env(safe-area-inset-top) + 118px); }
@media (min-width: 900px) { .bo-incoming { left: 50%; right: auto; width: 460px; transform: translateX(-50%); } .bo:has(.bo-incoming:not([hidden])) .bo-left, .bo:has(.bo-incoming:not([hidden])) .bo-rail { top: calc(env(safe-area-inset-top) + 64px); } }
.bo-reports { display: grid; gap: 6px; }
.bo-report { border-radius: 10px; background: rgba(255, 255, 255, .04); border-left: 3px solid var(--steel); }
.bo-report.won { border-left-color: var(--ok); } .bo-report.lost { border-left-color: var(--bad); }
.bo-report summary { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 9px 10px; cursor: pointer; list-style: none; }
.bo-report summary::-webkit-details-marker { display: none; }
.bo-report summary small { color: var(--mute); } .bo-report > :not(summary) { margin: 0 10px 8px; }
.bo-rk { padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, .08); font: 700 12px/1.2 "Barlow Condensed"; text-transform: uppercase; color: var(--ink2); }
.bo-map-tools { flex-wrap: wrap; justify-content: center; width: calc(100% - 20px); }

/* readability pass (founder screenshots 2026-11-01) */
.bo-sheet-art { display: block; width: calc(100% + 68px); margin: -16px -52px 10px -16px; height: 150px; border-radius: 18px 18px 0 0; overflow: hidden; }
.bo-sheet-art img { width: 100%; height: 100%; object-fit: cover; }
.bo-sheet-art.fit { height: 190px; background: radial-gradient(70% 80% at 50% 70%, #5b4126 0%, #2b2018 60%, #1e1813 100%); display: grid; place-items: center; }
.bo-sheet-art.fit img { width: auto; height: 92%; max-width: 86%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.bo-collect { transform: translate(-50%, -50%); z-index: 3; }
.bo-lvl { z-index: 4; } .bo-pad { z-index: 2; padding: 4px 8px; } .bo-pad .bo-ic { width: 18px; height: 18px; } .bo-pad small { font-size: 11px; }
.bo-left { width: auto; max-width: 150px; }
.bo-q.idle-chip { height: 30px; opacity: .9; } .bo-q.idle-chip .bo-q-t b { font-size: 12px; }
@media (max-width: 899px) { .bo-rail { gap: 4px; } .bo-rb { width: 54px; padding: 4px 2px; } .bo-rb span { width: 26px; height: 26px; } .bo-rb small { display: none; } .bo-rb b { font-size: 11px; } }

/* ================================================================ Phase 2b: loading screen, settings, passes, market, gear, trials, Grid Wars */
.bo-load { position: absolute; inset: 0; z-index: 120; background: #15121a; opacity: 0; transition: opacity .35s; overflow: hidden; }
.bo-load.in { opacity: 1; } .bo-load.out { opacity: 0; pointer-events: none; }
.bo-load picture { position: absolute; inset: 0; }
.bo-load-art { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; animation: boLoadDrift 24s ease-out both; }
@media (orientation: portrait) { .bo-load-art { object-position: 50% 100%; } }
@keyframes boLoadDrift { from { transform: scale(1.08); } to { transform: scale(1); } }
.bo-load-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 11, 16, .92) 0%, rgba(14, 11, 16, .35) 26%, rgba(14, 11, 16, 0) 44%, rgba(10, 8, 6, 0) 62%, rgba(10, 8, 6, .9) 100%); }
.bo-load-top { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 7vh); display: grid; justify-items: center; gap: 12px; padding: 0 16px; text-align: center; }
.bo-load-logo { width: min(78vw, 520px); filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .6)); }
.bo-load-top p { margin: 0; color: var(--ink2); font: 600 13px/1.2 Inter, sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.bo-load-foot { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 6vh); transform: translateX(-50%); width: min(86vw, 440px); display: grid; justify-items: center; gap: 10px; }
.bo-load-bar { width: 100%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.bo-load-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--goldD), var(--gold2)); transform-origin: left; transform: scaleX(0); transition: transform .25s; }
.bo-load-foot small { color: var(--ink2); font: 600 13px/1 Inter, sans-serif; letter-spacing: .06em; }
.bo-load-go { min-width: 220px; height: 52px; border-radius: 12px; background: linear-gradient(180deg, #f6cf73, #d79a2e); border: 1px solid #f8dc96; color: #2a1c08; font: 800 20px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; animation: boGo 1.6s ease-in-out infinite; }
.bo-load-go[hidden] { display: none; }
@keyframes boGo { 50% { opacity: .72; } }
.bo-load-meta { color: var(--mute); font: 600 12px/1 Inter, sans-serif; }

.bo-set { display: grid; gap: 8px; }
.bo-tog { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); cursor: pointer; }
.bo-tog > span { flex: 1; display: grid; gap: 2px; } .bo-tog small { color: var(--mute); }
.bo-tog input { position: absolute; opacity: 0; pointer-events: none; }
.bo-tog i { width: 44px; height: 26px; border-radius: 13px; background: rgba(255, 255, 255, .14); position: relative; transition: background .2s; flex: none; }
.bo-tog i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: transform .2s; }
.bo-tog input:checked + i { background: var(--gold); } .bo-tog input:checked + i::after { transform: translateX(18px); background: #2a1c08; }
.bo-tog input:disabled + i { opacity: .4; }
.bo-tog.static { cursor: default; } .bo-tog em { font-style: normal; color: var(--ink2); font-weight: 700; } .bo-tog em.ok { color: var(--ok); }

.bo-rw { display: inline-flex; align-items: center; gap: 3px; font: 700 14px/1 "Barlow Condensed"; }
.bo-rw img { width: 26px; height: 26px; object-fit: contain; }
.bo-passhead { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); margin-bottom: 6px; }
.bo-passhead > div { display: grid; gap: 2px; } .bo-passhead small { color: var(--mute); } .bo-passhead b { font-size: 20px; }
.bo-passbar { gap: 5px !important; }
.bo-prow { display: grid; grid-template-columns: 30px repeat(3, 1fr); gap: 5px; align-items: stretch; margin-bottom: 5px; }
.bo-prow.head { color: var(--mute); font: 700 12px/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; text-align: center; margin: 8px 0 6px; }
.bo-pn { display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .05); color: var(--mute); font: 700 15px/1 "Barlow Condensed"; }
.bo-prow.on .bo-pn { background: var(--gold); color: #2a1c08; }
.bo-ptrack { max-height: 46vh; overflow-y: auto; padding-right: 2px; }
.bo-pt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 46px; padding: 4px 6px; border-radius: 9px; background: rgba(255, 255, 255, .04); border: 1px solid transparent; }
.bo-pt.advanced { background: rgba(127, 180, 224, .07); } .bo-pt.premium { background: rgba(233, 180, 76, .08); }
.bo-pt.ready { border-color: var(--gold); } .bo-pt.got { opacity: .55; } .bo-pt.locked .bo-rw { opacity: .55; }
.bo-pt > i { color: var(--gold); } .bo-pt > i .bo-ic { width: 14px; height: 14px; } .bo-pt .lk { color: var(--mute); }
.bo-pt .bo-btn.small { min-height: 26px; padding: 0 7px; font-size: 13px !important; }
.bo-passbuy { display: flex; gap: 8px; margin-top: 10px; } .bo-passbuy .bo-btn { flex: 1; }
.bo-opp { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; margin-bottom: 10px; }
.bo-opp img { width: 110px; height: 140px; object-fit: cover; object-position: top; border-radius: 12px; background: #2a221b; }
.bo-opp > div { display: grid; gap: 5px; } .bo-opp b { font-size: 24px; color: var(--gold2); } .bo-opp small { color: var(--mute); }
.bo-optiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bo-opt { display: grid; gap: 2px; padding: 8px 4px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid transparent; text-align: center; }
.bo-opt b { font-size: 17px; } .bo-opt small { color: var(--mute); font-size: 11px; }
.bo-opt.ready { border-color: var(--gold); background: rgba(233, 180, 76, .14); } .bo-opt.got { opacity: .45; } .bo-opt.big { background: rgba(233, 180, 76, .1); }
.bo-opt:disabled { cursor: default; }

.bo-bm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bo-bmo { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: 12px; background: rgba(255, 255, 255, .04); text-align: center; }
.bo-bmo img { width: 52px; height: 52px; object-fit: contain; } .bo-bmo b { font-size: 14px; line-height: 1.1; } .bo-bmo small { color: var(--mute); }
.bo-bmo .bo-btn { width: 100%; } .bo-bmo .bo-btn .bo-ri { width: 18px; height: 18px; }
.bo-bmo.sold { opacity: .45; }
.bo-ladder { display: grid; gap: 6px; }
.bo-lad { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid transparent; }
.bo-lad > span:first-child { min-width: 54px; color: var(--mute); font: 700 15px/1 "Barlow Condensed"; } .bo-lad .bo-rw { flex: 1; }
.bo-lad.ready { border-color: var(--gold); } .bo-lad.got { opacity: .5; } .bo-lad > i { color: var(--gold); }
.bo-storex { display: flex; gap: 6px; margin-bottom: 8px; } .bo-storex .bo-btn { flex: 1; }

.bo-gear { display: grid; gap: 6px; }
.bo-gs { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.bo-gs > span:nth-child(2) { flex: 1; display: grid; gap: 2px; } .bo-gs small { color: var(--mute); }
.bo-gs.empty .bo-gsi { opacity: .4; }
.bo-gsi { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(233, 180, 76, .12); color: var(--gold2); }
.bo-gs .bo-btn { flex-direction: column; gap: 2px; min-height: 44px; }
.bo-gc { display: flex; align-items: center; gap: 3px; font: 600 11px/1 Inter, sans-serif; text-transform: none; letter-spacing: 0; opacity: .85; }
.bo-gc img { width: 14px; height: 14px; }
.bo-gs em { font-style: normal; color: var(--mute); font-weight: 700; }
.bo-trial { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.bo-trial > div { display: grid; gap: 4px; justify-items: start; padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.bo-trial small { color: var(--mute); } .bo-trial b { font-size: 20px; }

.bo-gwhead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 10px; }
.bo-gwhead > div { display: grid; gap: 2px; } .bo-gwhead small { color: var(--mute); font-weight: 700; } .bo-gwhead b { font-size: 28px; }
.bo-gwhead .us b { color: var(--gold2); } .bo-gwhead .them { text-align: right; } .bo-gwhead .them b { color: var(--blue); } .bo-gwhead .mid { text-align: center; } .bo-gwhead .mid b { font-size: 20px; }
.bo-gwgrid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, auto); gap: 6px; padding: 8px; border-radius: 14px; background: radial-gradient(circle at 50% 50%, rgba(233, 180, 76, .12), transparent 60%), rgba(0, 0, 0, .3); }
.bo-gwgrid.b { direction: rtl; } .bo-gwgrid.b > * { direction: ltr; } /* your side always on the left */
.bo-gwp { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 2px 5px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1.5px solid transparent; min-width: 0; }
.bo-gwp img { width: 100%; max-width: 64px; aspect-ratio: 1; object-fit: contain; }
.bo-gwp.reactor img { max-width: 76px; }
.bo-gwp.us { border-color: rgba(233, 180, 76, .75); background: rgba(233, 180, 76, .1); } .bo-gwp.them { border-color: rgba(127, 180, 224, .7); background: rgba(127, 180, 224, .1); }
.bo-gwp.here { outline: 2px solid var(--ink); outline-offset: 1px; }
.bo-gwv { position: absolute; top: 3px; left: 4px; font: 800 12px/1 "Barlow Condensed"; color: var(--ink2); }
.bo-gwbar { position: relative; width: 86%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.bo-gwbar i { position: absolute; top: 0; bottom: 0; } .bo-gwbar i.us { background: var(--gold); } .bo-gwbar i.them { background: var(--blue); }
.bo-gwp small { color: var(--mute); font: 600 10px/1.1 Inter, sans-serif; min-height: 11px; white-space: nowrap; overflow: hidden; max-width: 100%; }
.bo-gwp em { position: absolute; top: 2px; right: 3px; font: 800 10px/1 Inter, sans-serif; font-style: normal; color: var(--ink); background: rgba(0, 0, 0, .5); padding: 2px 4px; border-radius: 4px; }
.bo-gwcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .bo-gwcols li.you { color: var(--gold2); }
@media (max-width: 420px) { .bo-gwcols { grid-template-columns: 1fr; } .bo-gwp small { font-size: 9px; } .bo-bm { grid-template-columns: repeat(2, 1fr); } .bo-optiers { grid-template-columns: repeat(4, 1fr); } }
.bo-bmo { position: relative; } .bo-bmo s { color: var(--mute); }
.bo-off { position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 6px; background: var(--gold); color: #2a1c08; font: 800 12px/1.2 "Barlow Condensed"; }
.bo-timer-big .bo-bar i { transition: width 1s linear; }

/* guests (ad traffic): Save progress in the HUD and the save sheet */
.bo-save { flex: none; height: 30px; padding: 0 10px; border-radius: 9px; background: linear-gradient(180deg, #f6cf73, #d79a2e); color: #2a1c08; font: 800 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.bo-perks { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 8px; }
.bo-perks li { display: flex; align-items: center; gap: 10px; color: var(--ink2); } .bo-perks .bo-ic { color: var(--gold2); }

/* ---------------- district life: road patrols, the drone, smoke, the Core's glow, construction sparks ---------------- */
.bo-life, .bo-blds { position: absolute; inset: 0; }
.bo-life { pointer-events: none; } /* no z-index on either layer: units and buildings share one depth order (z-index from the ground line) */
.bo-unit { position: absolute; display: block; height: auto; background: no-repeat 0 0 / 100% 100%; transform: translate(-50%, -88%); filter: drop-shadow(0 3px 2px rgba(40, 20, 10, .35)); will-change: left, top; }
.bo-unit.flip { transform: translate(-50%, -88%) scaleX(-1); }
.bo-unit.u-truck:not(.idle) { animation: boRumble .18s steps(2) infinite; }
@keyframes boRumble { 50% { margin-top: 0.06%; } }
.bo-drone { position: absolute; width: 2.4%; transform: translate(-50%, -50%); z-index: 2000; animation: boHover 1.2s ease-in-out infinite; }
.bo-drone.flip { transform: translate(-50%, -50%) scaleX(-1); }
@keyframes boHover { 50% { margin-top: -0.25%; } }
.bo-drone-sh { position: absolute; width: 1.6%; aspect-ratio: 2.4; border-radius: 50%; background: rgba(40, 20, 10, .28); transform: translate(-50%, -50%); filter: blur(2px); }
.bo-smoke { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(.3); opacity: 0;
  background: radial-gradient(circle, rgba(225, 215, 200, .55), rgba(225, 215, 200, 0) 68%); animation: boSmoke 3.6s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes boSmoke { 10% { opacity: .9; } 100% { transform: translate(-30%, -260%) scale(1.5); opacity: 0; } }
.bo-bld.k-core > img { animation: boCore 3.2s ease-in-out infinite; }
@keyframes boCore { 50% { filter: brightness(1.12) drop-shadow(0 0 14px rgba(255, 170, 60, .55)); } }
.bo-spark { position: absolute; left: 50%; top: 52%; width: 5px; height: 5px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 6px #ffb347; opacity: 0; pointer-events: none; animation: boSpark 1.1s ease-out infinite; }
.bo-spark.s2 { left: 42%; top: 58%; animation-delay: .35s; } .bo-spark.s3 { left: 58%; top: 47%; animation-delay: .7s; }
@keyframes boSpark { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--sx, 14px), -22px); } }
.bo-spark.s2 { --sx: -16px; } .bo-spark.s3 { --sx: 6px; }
@media (prefers-reduced-motion: reduce) { .bo-unit, .bo-drone, .bo-smoke, .bo-spark, .bo-bld.k-core > img { animation: none !important; } .bo-smoke, .bo-spark { display: none; } }

/* battle scenes (blackout-fx.js) */
.bo-battle { position: absolute; inset: 0; z-index: 90; background: #120e0a; opacity: 0; transition: opacity .25s; cursor: pointer; }
.bo-battle.in { opacity: 1; }
.bo-battle canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bo-battle-top { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 14px); display: grid; justify-items: center; gap: 2px; pointer-events: none; }
.bo-battle-top b { font-size: 22px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold2); } .bo-battle-top small { color: var(--mute); font: 600 12px Inter, sans-serif; }

/* ---------------- game feel (blackout-juice.js) ---------------- */
.bo-fly { position: absolute; left: 0; top: 0; z-index: 95; width: 26px; height: 26px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 0 6px rgba(255, 200, 110, .7)); will-change: transform; }
.bo-res.bump, .bo-cells.bump, .bo-me-t small.bump { animation: boBump .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes boBump { 40% { transform: scale(1.18); } }
.bo-res.up b { color: var(--ok); } .bo-res.down b { color: var(--bad); } .bo-res b { transition: color .4s; }
.bo-bld.levelup > img { animation: boLevel 1.4s ease-out; }
@keyframes boLevel { 0% { filter: brightness(1); transform: scale(1); } 15% { filter: brightness(1.9) drop-shadow(0 0 22px rgba(255, 210, 120, .95)); transform: scale(1.06); } 35% { transform: scale(.98); } 60% { filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 190, 90, .6)); transform: scale(1.01); } 100% { filter: none; transform: scale(1); } }
.bo-lvlup { position: absolute; left: 50%; top: 20%; z-index: 6; transform: translate(-50%, 0); padding: 4px 12px; border-radius: 8px; background: linear-gradient(180deg, #f6cf73, #d79a2e); color: #2a1c08; font: 800 16px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; pointer-events: none; animation: boLvlUp 1.8s ease-out forwards; }
@keyframes boLvlUp { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.6); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 25% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; transform: translate(-50%, -30px); } 100% { opacity: 0; transform: translate(-50%, -46px); } }
.bo-pt { position: absolute; left: 50%; top: 45%; z-index: 7; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 8px currentColor; animation: boPt .9s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes boPt { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(.3); opacity: 0; } }
.bo-quest-b { position: relative; overflow: visible; }
.bo-enter > * { animation: boScreenIn .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes boScreenIn { from { opacity: 0; transform: translateY(10px) scale(.99); } }
.bo-dmap.bo-flyin { animation: boFlyIn 1.6s cubic-bezier(.2, .8, .2, 1); transform-origin: 50% 45%; }
@keyframes boFlyIn { from { transform: scale(.72); filter: brightness(.6) saturate(.8); } to { transform: scale(1); filter: none; } }
.bo-bld:active > img { transform: scale(.97); } .bo-pad:active { transform: translate(-50%, -50%) scale(.92); }
.bo-nav button { transition: background .2s, color .2s, transform .12s; } .bo-nav button:active, .bo-rb:active, .bo-q:active { transform: scale(.94); }
.bo-nav button.on .bo-ic { animation: boBump .4s cubic-bezier(.2, 1.6, .4, 1); }
/* crates: a shake, then a burst with light behind it */
.bo-crate { position: relative; }
.bo-crate::before { content: ""; position: absolute; top: 0; left: 50%; width: 240px; height: 240px; margin-left: -120px; margin-top: -45px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(255, 210, 120, 0) 0 10%, rgba(255, 210, 120, .35) 12% 16%, rgba(255, 210, 120, 0) 18% 35%, rgba(255, 210, 120, .3) 37% 41%, rgba(255, 210, 120, 0) 43% 60%, rgba(255, 210, 120, .35) 62% 66%, rgba(255, 210, 120, 0) 68% 85%, rgba(255, 210, 120, .3) 87% 91%, rgba(255, 210, 120, 0) 93%);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%); animation: boRays 6s linear infinite, boIn .6s .5s both; }
@keyframes boRays { to { transform: rotate(360deg); } }
.bo-crate-art { position: relative; animation: boShake .5s ease-in-out, boPop .45s .5s cubic-bezier(.2, 1.4, .4, 1) both !important; }
@keyframes boShake { 20% { transform: rotate(-7deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(4deg); } }
.bo-crate-got span { animation-delay: calc(var(--d) + .7s) !important; }
@media (prefers-reduced-motion: reduce) { .bo-dmap.bo-flyin, .bo-enter > *, .bo-crate::before, .bo-crate-art { animation: none !important; } }

/* name tags, timers, collect bubbles and build pads: one layer above buildings and units */
.bo-tags { position: absolute; inset: 0; z-index: 2100; pointer-events: none; }
.bo-tagbox { position: absolute; pointer-events: none; }
.bo-tagbox > *, .bo-tags .bo-pad { pointer-events: auto; }
.bo-tags .bo-pad { z-index: auto; }

/* cinematic battles: the film, a blurred fill behind it on tall screens, the real numbers on top */
.bo-battle.film { background: #0c0906; }
.bo-film-bg { position: absolute; inset: -30px; background: center / cover no-repeat; filter: blur(22px) brightness(.45) saturate(1.1); }
.bo-film { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); aspect-ratio: 16 / 9; max-height: 100%; overflow: hidden; }
.bo-film video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (orientation: portrait) { .bo-film { aspect-ratio: 1 / 1.05; } } /* a taller crop on phones: the clash is in the middle */
@media (min-aspect-ratio: 16/9) { .bo-film { top: 0; bottom: 0; transform: none; aspect-ratio: auto; } }
.bo-battle.film .bo-battle-top { z-index: 3; text-shadow: 0 2px 8px rgba(0, 0, 0, .7); }
.bo-film-bars { position: absolute; z-index: 3; left: 14px; right: 14px; top: calc(env(safe-area-inset-top) + 70px); display: flex; justify-content: space-between; gap: 14px; pointer-events: none; }
.bo-film-bars > div { display: grid; gap: 4px; width: min(44%, 220px); } .bo-film-bars .them { text-align: right; justify-items: end; }
.bo-film-bars small { color: #f3e9d6; font: 700 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 4px #000; }
.bo-film-bars i { display: block; width: 100%; height: 9px; border-radius: 5px; background: rgba(0, 0, 0, .55); overflow: hidden; }
.bo-film-bars em { display: block; height: 100%; background: linear-gradient(90deg, #9c6b1c, #f6cf73); transform-origin: left; }
.bo-film-bars .them em { background: linear-gradient(90deg, #7fb4e0, #3d6584); transform-origin: right; }
.bo-film-bars b { color: #c9b998; font: 700 14px/1 "Barlow Condensed", sans-serif; text-shadow: 0 1px 4px #000; }
.bo-film-verdict { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; transform: translateY(-50%) scale(1.4); text-align: center; font: 800 64px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: 0; pointer-events: none; text-shadow: 0 4px 24px rgba(0, 0, 0, .8); }
.bo-film-verdict.on { opacity: 1; transform: translateY(-50%) scale(1); transition: opacity .25s, transform .45s cubic-bezier(.2, 1.4, .4, 1); padding: 18px 0; background: linear-gradient(90deg, transparent, rgba(10, 8, 6, .6) 20%, rgba(10, 8, 6, .6) 80%, transparent); }
.bo-film-verdict.won { color: #f7d488; } .bo-film-verdict.lost { color: #ff8b7a; }

/* top bar: close (X) at the top right; resources start after the name and scroll sideways if they don't fit (never under the name) */
.bo-close { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 1px solid var(--line2); color: var(--ink); }
.bo-close .bo-ic { width: 16px; height: 16px; stroke-width: 2.2; }
.bo-hud .bo-me { flex: none; }
.bo-res-row { justify-content: flex-start !important; overflow-x: auto !important; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 14px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 14px), transparent); padding-right: 12px; }
.bo-res-row::-webkit-scrollbar { display: none; }
.bo-res { flex: none; }
@media (max-width: 480px) {
  .bo-hud { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .bo-avatar { width: 38px; height: 38px; }
  .bo-me-t b { max-width: 74px; font-size: 14px; }
  .bo-res { height: 26px; padding: 0 6px 0 2px; } .bo-res b { font-size: 13px; } .bo-res .bo-ri { width: 18px; height: 18px; }
  .bo-clr { display: none; }
  .bo-close { width: 30px; height: 30px; }
}

/* the district and the map start under the top bar and stop above the bottom menu, so nothing hides behind them */
.bo[data-view="district"] .bo-scene, .bo[data-view="map"] .bo-scene { top: calc(env(safe-area-inset-top) + 60px); bottom: calc(env(safe-area-inset-bottom) + 62px); }
@media (max-width: 480px) { .bo[data-view="district"] .bo-scene, .bo[data-view="map"] .bo-scene { top: calc(env(safe-area-inset-top) + 56px); } }

/* smooth animation: transparent 24 fps videos for building loops and walkers */
.bo-bld > .bo-bvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; opacity: 0; transition: opacity .25s; }
.bo-bld.vid-on > .bo-bvid { opacity: 1; } .bo-bld.vid-on > img { visibility: hidden; }
.bo-bld.levelup.vid-on > .bo-bvid { animation: boLevel 1.4s ease-out; }
.bo-unit { background: none !important; }
.bo-unit > img, .bo-unit > video { display: block; width: 100%; height: auto; pointer-events: none; }
.bo-unit.vid > video { display: none; } .bo-unit.vid > video.on { display: block; }
.bo-unit.u-tank:not(.idle), .bo-unit.u-apc:not(.idle) { animation: boRumble .22s steps(2) infinite; }

.bo-gunship { position: absolute; width: 4.6%; transform: translate(-50%, -50%); z-index: 2001; pointer-events: none; display: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25)); }
.bo-gunship.flip { transform: translate(-50%, -50%) scaleX(-1); }
.bo-gunship-sh { position: absolute; width: 3.4%; aspect-ratio: 2.6; border-radius: 50%; background: rgba(40, 20, 10, .22); transform: translate(-50%, -50%); filter: blur(3px); display: none; pointer-events: none; }