/* ============================================
   COMIC BOOK HA — POP ART DASHBOARD
   Pulpy Silver-Age palette, Ben-Day dots, ink lines
   ============================================ */

:root {
  /* Pulp palette — lifted from RD Design System reference */
  --paper:        #f2e8d0;   /* aged newsprint cream */
  --paper-deep:   #e8d9b5;
  --ink:          #1a1410;   /* almost-black ink */
  --ink-soft:     #2b241c;

  --pop-red:      #c8413a;   /* pulp hero red */
  --pop-red-deep: #9e2e28;
  --pop-blue:     #2a5a8f;   /* deep hero blue */
  --pop-sky:      #8fc3dc;   /* sky / icon-card blue */
  --pop-yellow:   #e8c542;   /* cab-yellow */
  --pop-yellow-soft:#f4dc7e;
  --pop-green:    #7a8e4a;   /* olive pop */
  --pop-green-bright:#9cb368;
  --pop-peach:    #e8a988;   /* office-card peach */
  --pop-rose:     #c9728f;   /* pantry rose */
  --pop-lilac:    #a39bc4;
  --pop-tan:      #c8a878;
  --pop-brown:    #6b4a32;

  --halftone-ink: rgba(26, 20, 16, 0.55);

  --shadow-panel: 4px 4px 0 var(--ink);
  --shadow-panel-lg: 6px 6px 0 var(--ink);
  --shadow-panel-xl: 8px 8px 0 var(--ink);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --stroke: 2.5px;
  --stroke-hero: 3.5px;

  --font-display: "Bangers", "Permanent Marker", system-ui, sans-serif;
  --font-hand:    "Kalam", "Caveat", cursive;
  --font-serif:   "Libre Caslon Text", "Playfair Display", Georgia, serif;
  --font-body:    "Work Sans", "Helvetica Neue", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
}

/* Day / night variants */
:root[data-mode="night"] {
  --paper: #2b2536;
  --paper-deep: #221b2e;
  --ink: #f2e8d0;
  --ink-soft: #d8c8a6;
  --halftone-ink: rgba(242, 232, 208, 0.35);
  --shadow-panel: 4px 4px 0 #0a0612;
  --shadow-panel-lg: 6px 6px 0 #0a0612;
  --shadow-panel-xl: 8px 8px 0 #0a0612;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ============================================
   HALFTONE + NEWSPRINT TEXTURES
   ============================================ */
.halftone-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at center, var(--halftone-ink) 18%, transparent 20%);
  background-size: 6px 6px;
  opacity: 0.22;
  mix-blend-mode: multiply;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(200,65,58,0.06), transparent 55%),
    radial-gradient(ellipse at 90% 80%, rgba(42,90,143,0.06), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(232,197,66,0.05), transparent 60%);
}

/* Halftone pattern utility for ANY element */
.halftone-fill {
  position: relative;
  isolation: isolate;
}
.halftone-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--halftone-ink) 22%, transparent 24%);
  background-size: 5px 5px;
  opacity: 0.35;
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}

/* Burst / starburst background */
.sunburst {
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(232, 197, 66, 0.7) 0deg 8deg,
      transparent 8deg 16deg
    );
}

/* ============================================
   COMIC PANEL — the core container shape
   ============================================ */
.panel {
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-panel);
  position: relative;
  overflow: hidden;
}

.panel-lg { box-shadow: var(--shadow-panel-lg); border-width: var(--stroke-hero); }
.panel-xl { box-shadow: var(--shadow-panel-xl); border-width: var(--stroke-hero); }

.panel-title {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  border-bottom: var(--stroke) solid var(--ink);
  text-transform: uppercase;
}
.panel-title .tag {
  background: var(--pop-yellow);
  color: var(--ink);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ============================================
   TYPE
   ============================================ */
.eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.label-sm {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.value-hero {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.01em;
  line-height: 1;
}
.value-mid {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
}
.display-kapow {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

/* ============================================
   COMIC BUTTONS / CHIPS
   ============================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--ink);
}
.chip.red    { background: var(--pop-red); color: var(--paper); }
.chip.blue   { background: var(--pop-blue); color: var(--paper); }
.chip.sky    { background: var(--pop-sky); }
.chip.yellow { background: var(--pop-yellow); }
.chip.green  { background: var(--pop-green); color: var(--paper); }

.btn {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 80ms ease, box-shadow 80ms ease;
  text-transform: uppercase;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.red    { background: var(--pop-red); color: var(--paper); }
.btn.yellow { background: var(--pop-yellow); }
.btn.blue   { background: var(--pop-blue); color: var(--paper); }

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
  width: 64px;
  background: var(--paper);
  border-right: var(--stroke-hero) solid var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  gap: 6px;
  flex-shrink: 0;
  z-index: 5;
  position: relative;
}
.sidebar .icon-btn {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 18px;
  color: var(--ink);
  background: transparent;
  transition: all 120ms;
}
.sidebar .icon-btn:hover {
  background: var(--pop-yellow);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transform: translate(-1px,-1px);
}
.sidebar .icon-btn.active {
  background: var(--pop-red);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
.sidebar .divider { width: 30px; height: 2px; background: var(--ink); margin: 8px 0; opacity: 0.4; }
.sidebar .badge {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 14px;
  background: var(--ink);
  color: var(--paper);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 999px;
}

/* ============================================
   TOPBAR
   ============================================ */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: var(--paper);
  border-bottom: var(--stroke-hero) solid var(--ink);
  position: relative;
  z-index: 4;
}
.topbar .brand {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.04em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.topbar .brand em {
  color: var(--pop-red);
  font-style: italic;
  font-weight: inherit;
}
.topbar .nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 100ms;
}
.topbar .nav-pill:hover { background: var(--pop-yellow); transform: translateY(-1px); }
.topbar .nav-pill.active { background: var(--pop-red); color: var(--paper); }

/* ============================================
   STAGE + BG
   ============================================ */
.stage {
  position: relative;
  flex: 1;
  padding: 22px;
  z-index: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.stage-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
  transition: opacity 240ms ease, filter 240ms ease;
}
.stage-bg::after {
  /* comic ink overlay */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(242,232,208,0.15), rgba(242,232,208,0.35));
  mix-blend-mode: multiply;
}

[data-bg="off"] .stage-bg { opacity: 0; }
[data-bg="off"] .stage { background: var(--paper); }

/* ============================================
   SPEECH BUBBLE
   ============================================ */
.bubble {
  position: relative;
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: 18px;
  padding: 8px 14px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 15px;
  display: inline-block;
  box-shadow: 3px 3px 0 var(--ink);
}
.bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 24px;
  width: 18px;
  height: 14px;
  background: var(--paper);
  border-right: var(--stroke) solid var(--ink);
  border-bottom: var(--stroke) solid var(--ink);
  transform: skew(-18deg);
  border-radius: 0 0 4px 0;
}

/* ============================================
   KAPOW BURST
   ============================================ */
.kapow {
  display: inline-grid;
  place-items: center;
  font-family: var(--font-display);
  color: var(--ink);
  background: var(--pop-yellow);
  padding: 8px 14px;
  min-width: 70px;
  text-align: center;
  border: var(--stroke) solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  clip-path: polygon(
    0% 20%, 10% 10%, 18% 20%, 28% 0%, 38% 18%, 50% 6%,
    62% 18%, 72% 4%, 82% 18%, 92% 8%, 100% 22%,
    92% 38%, 100% 52%, 92% 66%, 100% 80%, 88% 92%,
    78% 82%, 66% 96%, 56% 82%, 44% 98%, 34% 82%,
    22% 96%, 14% 80%, 0% 86%, 8% 68%, 0% 52%, 8% 36%
  );
  letter-spacing: 0.03em;
}

/* ============================================
   SCROLLBAR (subtle, paper-y)
   ============================================ */
.stage::-webkit-scrollbar { width: 10px; }
.stage::-webkit-scrollbar-track { background: transparent; }
.stage::-webkit-scrollbar-thumb {
  background: var(--ink);
  border-radius: 999px;
  border: 2px solid var(--paper);
}

/* ============================================
   MODAL
   ============================================ */
.modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(26, 20, 16, 0.55);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  z-index: 50;
  animation: scrim-in 180ms ease;
}
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--paper);
  border: var(--stroke-hero) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 10px 10px 0 var(--ink);
  width: min(960px, 92vw);
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modal-in 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modal-in {
  from { transform: translateY(30px) scale(0.94); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-head {
  padding: 14px 22px;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: var(--stroke) solid var(--ink);
}
.modal-head .title {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 0.04em;
}
.modal-head .close {
  width: 36px; height: 36px;
  border: 2px solid var(--paper);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  border-radius: var(--r-sm);
  font-size: 16px;
  font-family: var(--font-display);
  transition: all 100ms;
}
.modal-head .close:hover { background: var(--pop-red); border-color: var(--pop-red); }

/* ============================================
   RESPONSIVE-ish (this is primarily desktop)
   ============================================ */

/* Disable transitions for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}