/*
 * BattleBall's small art layer. Tailwind handles layout, typography, responsive
 * sizing, spacing, buttons, cards, and states in the Jinja templates.
 * No site-layout media queries and no legacy app.css dependency.
 */

/* Baseline safety and safe areas. Do not hide overflow to disguise a broken layout. */
[hidden] { display: none !important; }
body { margin: 0; background: #fff5d6; color: #151515; }
img, video, svg { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #167d92; outline-offset: 5px; }
header :focus-visible, footer :focus-visible { outline-color: #ffd92f; }
#main-content:focus { outline: none; }
.page-gutters {
  padding-inline: max(clamp(1rem, 3.2vw, 1.5rem), env(safe-area-inset-left))
                  max(clamp(1rem, 3.2vw, 1.5rem), env(safe-area-inset-right));
}

/* Cabinet paint and printed playfield patterns. */
.cabinet-stripe {
  background: repeating-linear-gradient(90deg, #ffd92f 0 24px, #ff4939 24px 48px,
              #30d9e8 48px 72px, #9b62ff 72px 96px);
}
.arcade-dots {
  background-image: radial-gradient(circle at 1px 1px, #ffffff18 1px, transparent 1.5px);
  background-size: 18px 18px;
}
.notebook-grid {
  background-image: linear-gradient(#1515150b 1px, transparent 1px),
                    linear-gradient(90deg, #1515150b 1px, transparent 1px);
  background-size: 28px 28px;
}
.checker-divider {
  background-color: #fffdf7;
  background-image: conic-gradient(#080808 25%, transparent 0 50%, #080808 0 75%, transparent 0);
  background-size: 24px 24px;
}
.marquee-bulbs {
  background: radial-gradient(circle, #ffd92f 0 3px, #fff4a8 4px 5px, transparent 6px);
  background-size: 24px 14px;
  background-position: center;
}
.marquee-panel {
  background: linear-gradient(180deg, #341757, #1b1237);
  box-shadow: inset 0 0 0 3px #5c2aa0;
}
.marquee-title { text-shadow: 2px 2px 0 #000, 4px 4px 0 #ff4939; }
.arcade-word { text-shadow: 2px 2px 0 #000; }
.score-digits { text-shadow: 0 0 8px #ff49394d; }
.chrome-finish {
  background: radial-gradient(circle at 28% 24%, #fff 0 12%, #dfe8ed 13% 30%,
              #778a98 54%, #26333d 76%, #0a0f13 100%);
}
.media-stripes {
  background-image: repeating-linear-gradient(-45deg, transparent 0 16px, #ffffff06 16px 32px);
}

/* Ticket notches are decorative; they never contain content. */
.ticket-cutouts { position: relative; }
.ticket-cutouts::before, .ticket-cutouts::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid #000;
  border-radius: 50%;
  background: #fff5d6;
  pointer-events: none;
}
.ticket-cutouts::before { left: -9px; }
.ticket-cutouts::after { right: -9px; }