/* ============================================================
   OpenBooth — Theme "pixel" v2 (THE SIGNAL · black/yellow HUD)
   Rebuilt to the owner's reference: near-black observation field,
   fine white survey grid, ONE signal-yellow accent, dot-matrix
   type EVERYWHERE (Cubic 11 covers Latin + JP kana + full TC Han;
   anything missing falls back to system per glyph),
   ruler ticks, crosshairs, a barcode block, corner brackets,
   timestamp micro-labels. All selectors [data-theme="pixel"].
   AA: yellow #f2e733 on #101014 = 13.9:1; ink #ececec = 14.9:1.
   ============================================================ */

/* ===== tokens ===== */
[data-theme="pixel"] {
  --bg: #101014; /* observation black */
  --surface: #17171c;
  --surface-2: #1f1f26;
  --border: #2c2c34; /* faint rule */
  --border-strong: #4a4a55;
  --text: #ececec; /* 14.9:1 */
  --text-secondary: #a9a9b2; /* 7.4:1 */
  --text-muted: #6c6c76; /* decoration only */
  --accent: #f2e733; /* signal yellow — data + primary only */
  --accent-dark: #d8cd1f;
  --accent-light: #2b2a12; /* dark yellow wash */
  --on-accent: #14140a; /* black ink on yellow */
  --success: #7ddc9a;
  --success-light: #14251a;
  --combo: #8fb6ff;
  --combo-light: #161d2c;
  --danger: #ff7a70;
  --warning: #e8b84a;
  /* dot-matrix first for EVERYTHING (Latin+JP+TC Han via Cubic 11,
     one woff2; per-glyph fallback to system when uncovered) */
  --font-sans: "Cubic 11", "DotGothic16", -apple-system, BlinkMacSystemFont,
    "PingFang TC", "Hiragino Sans", "Noto Sans TC", "Noto Sans JP", sans-serif;
  --font-display: "Cubic 11", "DotGothic16", -apple-system, "PingFang TC",
    "Hiragino Sans", "Noto Sans TC", "Noto Sans JP", sans-serif;
  --r-sm: 0px;
  --r-md: 2px;
  --r-lg: 3px;
  --r-xl: 4px;
  --shadow-card: none;
  --shadow-float: 0 0 0 1px var(--border-strong);
  --shadow-sheet: 0 -12px 30px rgba(0, 0, 0, 0.6);
}

/* precise, instant interactions */
[data-theme="pixel"] .nav-card,
[data-theme="pixel"] .item-card,
[data-theme="pixel"] .tab,
[data-theme="pixel"] .btn,
[data-theme="pixel"] .open-stall-btn {
  transition: background 0.09s steps(2), color 0.09s steps(2), border-color 0.09s linear;
}

/* ===== the survey grid field ===== */
[data-theme="pixel"] body {
  background: #101014;
}
[data-theme="pixel"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(to right, rgba(236, 236, 236, 0.055) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(to bottom, rgba(236, 236, 236, 0.055) 0 1px, transparent 1px 46px);
}
/* faint film grain */
[data-theme="pixel"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0.05;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="pixel"] body::after {
    display: none;
  }
}
[data-theme="pixel"] .view,
[data-theme="pixel"] .header {
  position: relative;
  z-index: 1;
}

/* ===== bold home layout — the observation poster ===== */
[data-theme="pixel"] .view.active:has(> .home-hero) {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "chip chip"
    "title title"
    "event mascot"
    "cta cta"
    "stats stats"
    "nav nav";
  padding: 10px 18px 0;
  max-width: 560px;
  margin: 0 auto;
}
[data-theme="pixel"] .view.active:has(> .home-hero) .home-hero {
  display: contents;
}
/* top strip: status chip, like the poster's "2025 · 2026 · 2027" row */
[data-theme="pixel"] .view.active:has(> .home-hero) .ready-chip {
  grid-area: chip;
  justify-self: end;
  margin: 2px 0 10px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  color: var(--text-secondary);
}
/* THE headline: signal-yellow dot-matrix, corner-bracketed */
[data-theme="pixel"] .view.active:has(> .home-hero) .home-shop-name {
  grid-area: title;
  position: relative;
  text-align: left;
  font-size: 36px;
  line-height: 1.08;
  color: var(--accent);
  padding: 14px 12px 12px;
  overflow-wrap: anywhere;
}
[data-theme="pixel"] .view.active:has(> .home-hero) .home-shop-name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-left: 1.5px solid var(--text-secondary);
  border-top: 1.5px solid var(--text-secondary);
}
[data-theme="pixel"] .view.active:has(> .home-hero) .home-shop-name::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  border-right: 1.5px solid var(--text-secondary);
  border-bottom: 1.5px solid var(--text-secondary);
}
/* quiet white subline like "MAYBE THEY ARE THERE" */
[data-theme="pixel"] .view.active:has(> .home-hero) .home-event-line {
  grid-area: event;
  position: relative;
  text-align: left;
  margin: 2px 0 0 12px;
  padding-left: 18px;
  color: var(--text-secondary);
}
/* ruler tick scale beside the meta line (the 1420/72 gauge) */
[data-theme="pixel"] .view.active:has(> .home-hero) .home-event-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  bottom: -4px;
  width: 8px;
  background-image: repeating-linear-gradient(to bottom, var(--text-muted) 0 1px, transparent 1px 5px);
}
/* mascot inside a crosshair target */
[data-theme="pixel"] .view.active:has(> .home-hero) .home-mascot-fallback,
[data-theme="pixel"] .view.active:has(> .home-hero) .home-mascot {
  grid-area: mascot;
  align-self: start;
  margin: 0 4px 0 0;
}
[data-theme="pixel"] .view.active:has(> .home-hero) .home-mascot-fallback {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="pixel"] .view.active:has(> .home-hero) .home-mascot-fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-strong);
}
[data-theme="pixel"] .view.active:has(> .home-hero) .home-mascot-fallback::after {
  content: "+";
  position: absolute;
  top: -10px;
  right: -13px;
  color: var(--accent);
  font-size: 13px;
  font-family: var(--font-display);
}
[data-theme="pixel"] .view.active:has(> .home-hero) .home-mascot-fallback svg {
  width: 38px;
  height: 38px;
  fill: var(--text) !important;
}
[data-theme="pixel"] .view.active:has(> .home-hero) .open-stall-btn {
  grid-area: cta;
  width: 100%;
  margin: 16px 0 4px;
}
[data-theme="pixel"] .view.active:has(> .home-hero) > div:has(> .stats) {
  grid-area: stats;
  margin: 0;
  width: 100%;
  max-width: none;
  padding: 12px 0 0;
}
[data-theme="pixel"] .view.active:has(> .home-hero) .nav-grid {
  grid-area: nav;
  margin: 0;
  width: 100%;
  max-width: none;
  padding: 12px 0 24px;
}

/* ===== CTA: yellow signal bar ===== */
[data-theme="pixel"] .open-stall-btn,
[data-theme="pixel"] .btn-primary,
[data-theme="pixel"] .sale-bar-cta {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 400;
  box-shadow: none;
}
[data-theme="pixel"] .open-stall-btn:active,
[data-theme="pixel"] .btn-primary:active,
[data-theme="pixel"] .sale-bar-cta:active {
  background: var(--text);
  color: #101014;
}
[data-theme="pixel"] .btn-secondary {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text-secondary);
}

/* ===== stats: instrument readouts, yellow data + barcode ===== */
[data-theme="pixel"] .stats {
  gap: 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  padding: 10px 0;
  position: relative;
}
[data-theme="pixel"] .stats::after {
  content: "";
  position: absolute;
  right: 0;
  top: -13px;
  width: 64px;
  height: 8px;
  background-image: repeating-linear-gradient(90deg, var(--text-muted) 0 2px, transparent 2px 4px, var(--text-muted) 4px 5px, transparent 5px 9px);
}
[data-theme="pixel"] .stat {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
[data-theme="pixel"] .stat-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 25px;
  color: var(--accent);
}
[data-theme="pixel"] .stat-label {
  color: var(--text-muted);
}

/* ===== nav: target-list rows with crosshair markers ===== */
[data-theme="pixel"] .nav-grid {
  grid-template-columns: 1fr;
  gap: 0;
  counter-reset: pixel-nav;
  border-top: 1px solid var(--border-strong);
}
[data-theme="pixel"] .nav-card {
  counter-increment: pixel-nav;
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: 15px 4px;
}
[data-theme="pixel"] .nav-card::before {
  content: "+";
  grid-column: 1;
  grid-row: 1;
  color: var(--text-muted);
  font-size: 13px;
  font-family: var(--font-display);
}
[data-theme="pixel"] .nav-card:active {
  background: var(--accent-light);
}
[data-theme="pixel"] .nav-card:active::before {
  color: var(--accent);
}
[data-theme="pixel"] .nav-card .nav-emoji.nav-ico {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
}
[data-theme="pixel"] .nav-card .nav-emoji.nav-ico .ob-ico {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
}
[data-theme="pixel"] .nav-card .nav-name {
  grid-column: 3;
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  color: var(--text);
}
[data-theme="pixel"] .nav-card .nav-badge {
  grid-column: 4;
  grid-row: 1;
  position: static;
  justify-self: end;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 0;
  font-family: var(--font-display);
}
[data-theme="pixel"] .nav-card::after {
  content: counter(pixel-nav, decimal-leading-zero);
  grid-column: 5;
  grid-row: 1;
  justify-self: end;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-muted);
}

/* ===== header: timestamp micro-label ===== */
[data-theme="pixel"] .header {
  background: rgba(16, 16, 20, 0.94);
  border-bottom: 1px solid var(--border-strong);
}
[data-theme="pixel"] .title {
  font-family: var(--font-display);
  font-weight: 400;
}
[data-theme="pixel"] .header-top {
  position: relative;
}
[data-theme="pixel"] .header-top::after {
  content: "1420 - 72 UTC";
  position: absolute;
  top: -3px;
  right: 2px;
  font: 400 8px/1 var(--font-display);
  letter-spacing: 0.22em;
  color: var(--text-muted);
  pointer-events: none;
}

/* ===== front desk ===== */
[data-theme="pixel"] .tab {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-weight: 400;
}
[data-theme="pixel"] .tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
[data-theme="pixel"] .item-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: none;
}
[data-theme="pixel"] .item-name {
  font-family: var(--font-display);
  font-weight: 400;
}
[data-theme="pixel"] .item-price {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  color: var(--accent);
}
[data-theme="pixel"] .item-card:active {
  border-color: var(--accent);
}
[data-theme="pixel"] .item-card.has-qty {
  background: var(--accent-light);
  border: 1px solid var(--accent);
}
[data-theme="pixel"] .qty-badge {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 0;
  font-family: var(--font-display);
}
[data-theme="pixel"] .item-card.sold-out {
  opacity: 0.45;
}

/* sale bar: black instrument shelf, yellow readout */
[data-theme="pixel"] .sale-bar {
  background: rgba(16, 16, 20, 0.96);
  border-top: 1px solid var(--accent);
  box-shadow: var(--shadow-sheet);
}
[data-theme="pixel"] .sale-bar-total {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  color: var(--accent);
}
[data-theme="pixel"] .sale-bar-count {
  color: var(--text-secondary);
}

/* sheet: dark instrument panel */
[data-theme="pixel"] .sheet {
  background: var(--surface);
  border-top: 1px solid var(--border-strong);
}
[data-theme="pixel"] .sheet-title {
  font-family: var(--font-display);
  font-weight: 400;
}
[data-theme="pixel"] .sale-line {
  border-bottom: 1px solid var(--border);
}
[data-theme="pixel"] .summary-row.total,
[data-theme="pixel"] .receipt-total {
  font-family: var(--font-display);
  color: var(--accent);
  border-top: 1px solid var(--border-strong);
  padding-top: 8px;
}
[data-theme="pixel"] .section-title {
  color: var(--text-muted);
  letter-spacing: 0.08em;
}
[data-theme="pixel"] .section-title::after {
  background: var(--border-strong);
}
[data-theme="pixel"] .badge {
  border-radius: 0;
}

/* lists / inputs on dark */
[data-theme="pixel"] .list-row {
  border-bottom: 1px solid var(--border);
}
[data-theme="pixel"] input,
[data-theme="pixel"] select,
[data-theme="pixel"] textarea,
[data-theme="pixel"] .search-box input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
}
[data-theme="pixel"] input:focus,
[data-theme="pixel"] textarea:focus {
  border-color: var(--accent);
  outline: none;
}
[data-theme="pixel"] .empty-state .ob-ico {
  color: var(--text-muted);
}