/* Not a Bahima — component stylesheet. Every colour, size and face comes from tokens.css; the
   fallbacks after each var() let the classes work before tokens.css is loaded. */

.nab-shout {
  font-family: var(--font-latin-display, "Bangers", Impact, sans-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
  color: var(--paper, #fff);
  -webkit-text-stroke: var(--stroke-text, 6px) var(--ink, #0f0f0f);
  paint-order: stroke fill;
  text-shadow: var(--shadow-text, 4px 4px 0 #0f0f0f);
  margin: 0;
}
.nab-shout[lang="ar"], .nab-shout.nab-ar, [dir="rtl"] .nab-shout {
  font-family: var(--font-arabic-display, "Lalezar", sans-serif);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.15;
}
.nab-shout--title { -webkit-text-stroke-width: 3px; text-shadow: 2px 2px 0 var(--ink, #0f0f0f); }
.nab-shout em, .nab-hi { font-style: normal; color: var(--brand-yellow, #ffd400); }

.nab-bubble {
  position: relative;
  display: inline-block;
  max-width: 28rem;
  background: var(--surface, #fff);
  color: var(--text, #0f0f0f);
  border: var(--stroke, 4px) solid var(--line, #0f0f0f);
  border-radius: var(--radius-lg, 20px);
  padding: var(--space-4, 16px) var(--space-6, 24px);
  font-family: var(--font-body, "Baloo Bhaijaan 2", system-ui, sans-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  box-shadow: var(--shadow-comic, 4px 4px 0 #0f0f0f);
}
.nab-bubble::after {
  content: "";
  position: absolute;
  bottom: -15px;
  inset-inline-start: 36px;
  width: 22px;
  height: 22px;
  background: var(--surface, #fff);
  border-right: var(--stroke, 4px) solid var(--line, #0f0f0f);
  border-bottom: var(--stroke, 4px) solid var(--line, #0f0f0f);
  transform: rotate(45deg);
}
.nab-bubble--end::after { inset-inline-start: auto; inset-inline-end: 36px; }
.nab-bubble--thought { border-style: dashed; }
.nab-bubble--thought::after { border-radius: 50%; border: var(--stroke, 4px) solid var(--line, #0f0f0f); width: 14px; height: 14px; bottom: -22px; transform: none; }

.nab-burst {
  display: inline-grid;
  place-items: center;
  filter: drop-shadow(3px 0 0 var(--ink, #0f0f0f)) drop-shadow(-3px 0 0 var(--ink, #0f0f0f))
          drop-shadow(0 3px 0 var(--ink, #0f0f0f)) drop-shadow(0 -3px 0 var(--ink, #0f0f0f));
}
.nab-burst__in {
  display: grid;
  place-items: center;
  min-width: 160px;
  aspect-ratio: 1;
  padding: var(--space-8, 32px);
  background: var(--brand-yellow, #ffd400);
  color: var(--text-on-yellow, #0f0f0f);
  clip-path: polygon(50.0% 0.0%, 58.5% 13.0%, 71.7% 5.0%, 73.7% 20.3%, 89.1% 18.8%, 84.2% 33.5%, 98.7% 38.9%, 88.0% 50.0%, 98.7% 61.1%, 84.2% 66.5%, 89.1% 81.2%, 73.7% 79.7%, 71.7% 95.0%, 58.5% 87.0%, 50.0% 100.0%, 41.5% 87.0%, 28.3% 95.0%, 26.3% 79.7%, 10.9% 81.2%, 15.8% 66.5%, 1.3% 61.1%, 12.0% 50.0%, 1.3% 38.9%, 15.8% 33.5%, 10.9% 18.8%, 26.3% 20.3%, 28.3% 5.0%, 41.5% 13.0%);
  font-family: var(--font-latin-display, "Bangers", Impact, sans-serif);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
}
.nab-burst__in[lang="ar"] { font-family: var(--font-arabic-display, "Lalezar", sans-serif); text-transform: none; }
.nab-burst--red .nab-burst__in { background: var(--brand-red, #dc050a); color: var(--text-on-brand, #fff); }
.nab-burst--sky .nab-burst__in { background: var(--accent-sky, #35b6e9); }
.nab-burst--tilt { transform: rotate(var(--tilt-ccw, -3deg)); }

.nab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  min-height: 48px;
  padding: 12px 22px;
  font-family: var(--font-body, "Baloo Bhaijaan 2", system-ui, sans-serif);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  color: var(--text-on-yellow, #0f0f0f);
  background: var(--brand-yellow, #ffd400);
  border: var(--stroke-thin, 3px) solid var(--line, #0f0f0f);
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-comic, 4px 4px 0 #0f0f0f);
  cursor: pointer;
  transition: transform 180ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 180ms;
}
.nab-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--line, #0f0f0f); }
.nab-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--line, #0f0f0f); }
.nab-btn:focus-visible { outline: 3px solid var(--focus, #0f0f0f); outline-offset: 3px; }
.nab-btn--red { background: var(--brand-red, #dc050a); color: var(--text-on-brand, #fff); }
.nab-btn--green { background: var(--brand-green, #0f9916); color: var(--text-on-brand, #fff); }
.nab-btn--ghost { background: var(--surface, #fff); color: var(--text, #0f0f0f); }
.nab-btn--lg { font-size: 24px; padding: 16px 28px; min-height: 56px; }
.nab-btn[disabled], .nab-btn[aria-disabled="true"] { background: var(--surface-raised, #f3efe6); color: var(--text-muted, #5e5a52); border-color: var(--line-soft, #c9c2b2); box-shadow: none; transform: none; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .nab-btn { transition: none; } .nab-btn:hover { transform: none; } }

.nab-stamp {
  display: inline-block;
  padding: 6px;
  border: var(--stroke-thick, 6px) solid var(--brand-green-deep, #0e6d09);
  border-radius: var(--radius-sm, 6px);
  color: var(--brand-green-deep, #0e6d09);
  background: var(--paper, #fff);
  transform: rotate(var(--tilt-ccw, -3deg));
  mix-blend-mode: multiply;
}
.nab-stamp__in {
  display: block;
  padding: 2px 20px 6px;
  border: 2px solid var(--brand-green-deep, #0e6d09);
  border-radius: 3px;
  font-family: var(--font-arabic-display, "Lalezar", sans-serif);
  font-size: 36px;
  line-height: 1.15;
  white-space: nowrap;
  -webkit-mask-image: radial-gradient(circle at 20% 30%, #000 92%, transparent 96%), radial-gradient(circle at 70% 80%, #000 90%, transparent 95%);
  mask-image: radial-gradient(circle at 20% 30%, #000 92%, transparent 96%), radial-gradient(circle at 70% 80%, #000 90%, transparent 95%);
}
.nab-stamp__in:lang(en), .nab-stamp__in[lang="en"] { font-family: var(--font-latin-display, "Bangers", Impact, sans-serif); letter-spacing: 0.04em; text-transform: uppercase; }

.nab-panel {
  position: relative;
  background: var(--surface, #fff);
  color: var(--text, #0f0f0f);
  border: var(--stroke, 4px) solid var(--line, #0f0f0f);
  border-radius: var(--radius-none, 0);
  box-shadow: var(--shadow-comic, 4px 4px 0 #0f0f0f);
  padding: var(--space-6, 24px);
  font-family: var(--font-body, "Baloo Bhaijaan 2", system-ui, sans-serif);
}
.nab-panel--raised { background: var(--surface-raised, #f3efe6); }
.nab-panel--halftone { background-image: radial-gradient(var(--line-soft, #c9c2b2) 1.5px, transparent 1.7px); background-size: 10px 10px; }
.nab-panel--sky { background: var(--accent-sky, #35b6e9); color: var(--ink, #0f0f0f); }
.nab-panel--red { background: var(--brand-red, #dc050a); color: var(--text-on-brand, #fff); }
.nab-panel--green { background: var(--brand-green, #0f9916); color: var(--text-on-brand, #fff); }
.nab-panel--tilt { transform: rotate(var(--tilt-cw, 2deg)); }
.nab-panel--lg { box-shadow: var(--shadow-comic-lg, 8px 8px 0 #0f0f0f); border-width: var(--stroke-thick, 6px); }
.nab-caption {
  position: absolute;
  top: calc(-1 * var(--space-3, 12px));
  inset-inline-start: var(--space-3, 12px);
  padding: 4px 10px;
  background: var(--brand-yellow, #ffd400);
  color: var(--text-on-yellow, #0f0f0f);
  border: var(--stroke-thin, 3px) solid var(--line, #0f0f0f);
  font-family: var(--font-body, "Baloo Bhaijaan 2", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}
.nab-speedlines { background-image: repeating-conic-gradient(from 0deg at 50% 50%, var(--line, #0f0f0f) 0deg 1.2deg, transparent 1.2deg 7deg); }

.nab-road {
  position: relative;
  height: 72px;
  background: var(--asphalt, #2a2a30);
  border-block: 4px solid var(--paper, #fff);
}
.nab-road::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, var(--brand-yellow, #ffd400) 0 48px, transparent 48px 80px);
}
.nab-road--tall { height: 160px; }
.nab-hazard { height: var(--space-6, 24px); background: repeating-linear-gradient(-45deg, var(--brand-yellow, #ffd400) 0 16px, var(--ink, #0f0f0f) 16px 32px); border-block: 2px solid var(--ink, #0f0f0f); }
.nab-crossing { height: 48px; background: repeating-linear-gradient(90deg, var(--paper, #fff) 0 32px, var(--asphalt, #2a2a30) 32px 56px); }