/* ============================================================
   MICHAELLANEBOLDT.COM — style.css
   Mobile-first. Desktop frame when not a mobile phone.
   Content window: 340x580px on desktop, full-viewport mobile.
   Frame: 649x891px behind content, hole at (141,127) size 370x612
   Hole center: (326,433). Canvas center: (324,445).
   Content offset from frame center: +2px x, -12px y
   ============================================================ */

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden; background: #000;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── PHONE CONTAINER — mobile fills full viewport ─────────── */
#phone-wrap {
  width: 100vw; height: 100vh;
  background: #000;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  flex-shrink: 0;
}

/* ── DESKTOP / FRAMED MODE ────────────────────────────────── */
body.framed {
  background: #fff;
  overflow: hidden;
  position: relative;
  /* Render at 75% so frame sits at right visual size on 1440px viewport */
  zoom: 0.75;
}

body.framed #phone-wrap {
  width: 340px;
  height: 584px;
  /* Offset content window to align with frame hole center.
     +4px height at top (bottom stays fixed): top -19px was -15px.
     +1px right shift: left 3px was 2px. */
  position: relative;
  left: 3px;
  top: -19px;
  z-index: 2;
}

/* Hide mobile-only chrome in framed mode */
body.framed #status-bar,
body.framed #topbar,
body.framed #botbar { display: none; }

/* ── DESKTOP FRAME IMAGE — sits behind content ────────────── */
#desktop-frame {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  align-items: center;
  justify-content: center;
}

body.framed #desktop-frame { display: flex; }

#desktop-frame img {
  /* Render at native pixel size — no scaling */
  width: 649px;
  height: 891px;
  flex-shrink: 0;
  pointer-events: none;
  /* Frame is behind content (z-index: 1 vs phone-wrap z-index: 2) */
}

/* ── STATUS BAR ───────────────────────────────────────────── */
#status-bar {
  flex-shrink: 0; width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 14px 2px 14px;
  background: #000; z-index: 10;
}

#status-time {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8px; font-weight: 600; color: #fff;
}

.status-icons { display: flex; gap: 3px; align-items: center; }

/* ── SAFE ZONES ───────────────────────────────────────────── */
#topbar  { flex-shrink: 0; width: 100%; height: 20px; background: #000; }
#botbar  { flex-shrink: 0; width: 100%; height: 35px; background: #000; }

/* ── SCREEN ───────────────────────────────────────────────── */
#screen {
  flex: 1; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  min-height: 0; background: #fff;
}

/* ── NAME ─────────────────────────────────────────────────── */
#name-area {
  flex-shrink: 0; width: 100%; background: #fff;
  position: relative; z-index: 5; cursor: pointer;
}
#name-svg { display: block; width: 100%; }

/* ── CONTENT WRAP ─────────────────────────────────────────── */
#content-wrap { flex: 1; position: relative; overflow: hidden; }

/* ── PAGES ────────────────────────────────────────────────── */
.page {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: #fff; display: none; overflow: hidden;
}
#home-page { z-index: 2; }
.sub-page {
  z-index: 1; overflow-y: scroll; overflow-x: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
.sub-page::-webkit-scrollbar { display: none; }

/* ── FLASH OVERLAY ────────────────────────────────────────── */
#flash-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: #fff; z-index: 15;
  pointer-events: none; display: none;
  transition: opacity 80ms ease;
}

/* ── LIGHTBOX ─────────────────────────────────────────────── */
#lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0);
  z-index: 200; cursor: pointer;
  display: none;
  align-items: center; justify-content: center;
  transition: background 150ms ease;
}
#lightbox.lb-visible { display: flex; }
#lightbox.lb-active  { background: rgba(0,0,0,1); }
#lightbox img {
  max-width: 100vw; max-height: 100vh;
  object-fit: contain; display: block;
  pointer-events: none;
  opacity: 0; transition: opacity 150ms ease;
}
#lightbox.lb-active img { opacity: 1; }

/* ── NAV SVG ──────────────────────────────────────────────── */
#nav-svg { position: absolute; display: block; overflow: visible; }

/* ── NAV TRIGGER BUTTONS ──────────────────────────────────── */
.nav-btn {
  position: absolute; left: 0; right: 0;
  background: transparent; border: none; outline: none;
  cursor: pointer; z-index: 8; padding: 0;
}

/* ── DATA BLOCK ───────────────────────────────────────────── */
#data-block {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 3; pointer-events: none;
  /* Height is set dynamically by the SVG rendered inside */
}

/* ── RETURN ───────────────────────────────────────────────── */
.return-abs { position: absolute; left: 0; right: 0; pointer-events: all; }

/* ── IMAGES ───────────────────────────────────────────────── */
img { display: block; max-width: 100%; }

/* ── SELECTION ────────────────────────────────────────────── */
::selection { background: #111; color: #fff; }