/* ============================================================================
   battery-lawyer.css — a fake premium EV dashboard you fight to get home.
   The shared shell (game-shell.css) owns header / banner / rails / overlays /
   game-over / push bar. This styles the in-#game-wrap dashboard: the central
   readout, the Low Power Mode shield, the system tiles you shut off, and the
   dark-pattern pop-ups. Visual restraint is the joke: expensive and annoying.
   ============================================================================ */

/* Sleek modern-EV cabin backdrop: cool ambient top glow, soft horizon band,
   and a faint vignette so the dashboard floats like a real car display. */
#game-wrap {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(70,120,180,.16), transparent 55%),
    radial-gradient(90% 60% at 50% 108%, rgba(43,111,184,.10), transparent 60%),
    linear-gradient(180deg, #0c1118 0%, #080b10 42%, #060809 100%);
}
#game-wrap::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgba(90,160,230,.05) 72%, transparent 80%),
    radial-gradient(60% 40% at 50% 50%, transparent 60%, rgba(0,0,0,.35) 100%);
}
.bl-dash { z-index: 1; }

/* ── DASHBOARD SHELL ───────────────────────────────────────────────────────── */
.bl-dash {
  position: relative;
  width: min(460px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 0;
  color: #e8edf2;
  font-family: var(--fn);
  user-select: none; -webkit-user-select: none;
  overflow: hidden;
}

/* calm corporate status line */
.bl-assist {
  font-family: var(--fm);
  font-size: 12px; font-weight: 300; letter-spacing: .2px;
  color: #8b96a3; text-align: center; line-height: 1.4;
  min-height: 32px; transition: color .4s;
}
.bl-assist.cold { color: #6fb6ff; }
.bl-assist.warn { color: #d9534f; }

/* car-line / warning banner */
.bl-banner {
  display: none;
  font-family: var(--ff); font-size: 12px; font-weight: 600; letter-spacing: .6px;
  text-align: center; padding: 6px 12px; border-radius: 4px; max-width: 100%;
  background: rgba(217,83,79,.12); color: #ff6b66; border: 1px solid rgba(217,83,79,.45);
}
.bl-banner.show { display: block; animation: bl-bannerin .3s ease; }
.bl-banner.spec { background: rgba(139,150,163,.1); color: #aeb6bf; border-color: rgba(139,150,163,.35); }
@keyframes bl-bannerin { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

/* ── CENTRAL READOUT ───────────────────────────────────────────────────────── */
.bl-readout { text-align: center; }
.bl-batt {
  font-family: var(--fm); font-weight: 300;
  font-size: clamp(60px, 20vw, 104px); line-height: .9; letter-spacing: -3px;
  color: #f2f5f8; transition: color .3s;
}
.bl-batt .bl-pct { font-size: .4em; font-weight: 300; color: #8b96a3; letter-spacing: 0; }
.bl-batt.low  { color: #ffb454; }
.bl-batt.crit { color: #ff5d52; animation: bl-blink 1s steps(2) infinite; }
@keyframes bl-blink { 50% { opacity: .45; } }

.bl-drain {
  font-family: var(--fm); font-size: 14px; font-weight: 500; margin-top: 4px;
  color: #6fae7a; transition: color .25s;
}
.bl-drain.mid  { color: #ffb454; }
.bl-drain.high { color: #ff5d52; animation: bl-blink .8s steps(2) infinite; }

.bl-trip { font-family: var(--fm); font-size: 12px; color: #6b7682; margin-top: 6px; }
.bl-trip .bl-dot { color: #353d45; margin: 0 6px; }
#bl-arrival { font-style: italic; }

/* ── LOW POWER MODE (the shield) ───────────────────────────────────────────── */
.bl-lowpower {
  width: min(280px, 86%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 10px; border-radius: 10px;
  background: #0d1117; border: 1px solid #232c36;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.bl-lp-state { font-family: var(--ff); font-weight: 600; font-size: 14px; letter-spacing: .5px; color: #8b96a3; }
.bl-lp-hint  { font-family: var(--fm); font-size: 10px; color: #4f5862; }
.bl-lowpower.on {
  background: rgba(0,230,118,.09); border-color: rgba(0,230,118,.5);
  box-shadow: 0 0 18px rgba(0,230,118,.18);
}
.bl-lowpower.on .bl-lp-state { color: #00e676; }
.bl-lowpower.on .bl-lp-hint  { color: #3a8f5f; }
.bl-lowpower.nag { animation: bl-nag .5s ease; }
@keyframes bl-nag { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 0 2px #ffb454, 0 0 18px rgba(255,180,84,.5)} }

/* ── SYSTEM TILES ──────────────────────────────────────────────────────────── */
.bl-systems {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 2px;
}
.bl-sys {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 3px 7px; border-radius: 9px;
  background: #0c1015; border: 1px solid #1a212a; color: #5b6672;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
  min-height: 54px;
}
.bl-sys:active { transform: scale(.94); }
.bl-sys .bl-sys-ico { font-size: 20px; line-height: 1; filter: grayscale(.5) opacity(.7); transition: filter .15s; }
.bl-sys .bl-sys-lbl { font-family: var(--fm); font-size: 8px; letter-spacing: .2px; text-align: center; line-height: 1.1; }
.bl-sys .bl-sys-state { display: none; }
/* ON = actively draining: red glow + "ON" pip */
.bl-sys.on {
  background: rgba(217,83,79,.13); border-color: rgba(255,107,102,.65); color: #ffd7d4;
  box-shadow: 0 0 14px rgba(217,83,79,.3);
}
.bl-sys.on .bl-sys-ico { filter: none; }
.bl-sys.on .bl-sys-state {
  display: block; position: absolute; top: -5px; right: -4px;
  font-family: var(--fm); font-size: 8px; font-weight: 600; letter-spacing: .5px;
  background: #d9534f; color: #fff; padding: 1px 5px; border-radius: 999px;
}
/* "sneaky" drains pulse subtly instead of shouting — the hidden-drain hunt */
.bl-sys.on.sneaky { box-shadow: none; }
.bl-sys.on.sneaky .bl-sys-state { background: #6b4a1f; }
.bl-sys.on .bl-sys-drain {
  position: absolute; bottom: 2px; font-family: var(--fm); font-size: 7px; color: #ff9a95;
}
/* control lock — "for safety, please stop driving to save battery" */
.bl-systems.locked { opacity: .5; pointer-events: none; }

/* ── POP-UP / OVERLAY FIELD (the UI attacks) ───────────────────────────────── */
.bl-field { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.bl-field > * { pointer-events: auto; }

.bl-popup {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 26px; width: min(330px, 90%);
  background: #0d1117; border: 1px solid #232c36; border-radius: 12px;
  box-shadow: 0 10px 44px rgba(0,0,0,.65);
  padding: 15px 15px 13px; animation: bl-popin .2s ease;
}
.bl-popup.cover-batt { top: 8%; bottom: auto; }   /* legal overlay sits over the battery readout */
@keyframes bl-popin { from{opacity:0;transform:translateX(-50%) translateY(14px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.bl-popup-ico { font-size: 20px; margin-bottom: 5px; }
.bl-popup-title { font-family: var(--fn); font-weight: 600; font-size: 15px; color: #eef2f6; margin-bottom: 4px; }
.bl-popup-body { font-size: 12px; color: #8b96a3; line-height: 1.45; margin-bottom: 5px; }
.bl-popup-micro { font-size: 9px; color: #4f5862; line-height: 1.3; margin-bottom: 11px; font-family: var(--fm); }
.bl-popup-actions { display: flex; flex-direction: column; gap: 6px; }
.bl-pbtn { font-family: var(--fn); font-weight: 600; font-size: 13px; padding: 9px; border-radius: 8px; width: 100%; }
/* the tempting trap buttons are big and prominent — dark pattern on purpose */
.bl-pbtn.trap { background: #2b6fb8; color: #fff; }
.bl-pbtn.trap:hover { background: #357fd0; }
/* the correct button is tiny + muted */
.bl-pbtn.safe { background: transparent; color: #5b6672; border: 1px solid #1c232b; font-size: 11px; padding: 7px; }
.bl-pbtn.safe:hover { color: #aeb6bf; border-color: #38424e; }
.bl-popup-timer { position: absolute; top: 0; left: 0; height: 2px; background: #d9534f; border-radius: 12px 0 0 0; width: 100%; }

/* drift floater */
.bl-float { position: absolute; font-family: var(--fm); font-size: 14px; color: #00e676; transform: translate(-50%,-50%); animation: bl-rise .8s ease-out forwards; pointer-events: none; }
.bl-float.bad { color: #ff5d52; }
@keyframes bl-rise { to { transform: translate(-50%,-180%); opacity: 0; } }

/* scrolling legal microtext */
.bl-disclaimer {
  position: absolute; left: 0; right: 0; bottom: 0; height: 20px;
  overflow: hidden; white-space: nowrap;
  border-top: 1px solid #11161c; background: #060809;
}
.bl-disclaimer span {
  display: inline-block; padding-left: 100%;
  font-family: var(--fm); font-size: 9px; color: #353d45; line-height: 20px;
  animation: bl-marquee 40s linear infinite;
}
@keyframes bl-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* screen-dim attack (brief, late game) */
.bl-dash.dim::after {
  content: ''; position: absolute; inset: 0; z-index: 30; pointer-events: none;
  background: rgba(5,6,8,.6); transition: opacity .3s;
}

/* forced-restart freeze (software update penalty) */
.bl-freeze {
  position: absolute; inset: 0; z-index: 40; display: none;
  align-items: center; justify-content: center; flex-direction: column; gap: 12px;
  background: rgba(5,6,8,.86);
  font-family: var(--fm); color: #6b7682; text-align: center; padding: 24px;
}
.bl-freeze.show { display: flex; }
.bl-freeze-spin { width: 36px; height: 36px; border: 3px solid #1c232b; border-top-color: #2b6fb8; border-radius: 50%; animation: bl-spin 1s linear infinite; }
@keyframes bl-spin { to { transform: rotate(360deg); } }
.bl-freeze-txt { font-size: 12px; }