/* ── Checker page (checker.html) ── */

html, body {
  width: 100%;
  min-height: 100%;
  min-height: 100dvh;
  background: var(--bg-primary);
  color: var(--text-body);
  font-family: 'Segoe UI', sans-serif;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

/* ── Checker Screen ── */
#checker-screen {
  display: none;
  width: 100%;
  max-width: 520px;
  flex-direction: column;
  gap: 12px;
  padding: 12px 12px calc(env(safe-area-inset-bottom) + 96px) 12px;
}
#checker-screen.active { display: flex; }

#status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  padding: 10px 14px;
}
.status-left { display: flex; flex-direction: column; }
.status-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
#checker-status { font-size: 13px; font-weight: 700; color: var(--text-subtle); }
#checker-status.online { color: var(--status-success); }
#checker-status.error { color: var(--status-error); }
#pattern-name {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
#called-count { font-size: 11px; color: var(--color-muted); letter-spacing: 1px; }

/* ── Called numbers reference ── */
#called-wrap {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  padding: 8px 12px;
}
#called-wrap summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-muted);
  list-style: none;
  outline: none;
}
#called-wrap summary::-webkit-details-marker { display: none; }
#called-wrap summary::after { content: ' ▾'; color: var(--text-subtle); }
#called-wrap[open] summary::after { content: ' ▴'; }
.called-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  max-height: 96px;
  overflow-y: auto;
}
.called-list.empty { color: var(--color-muted); font-size: 12px; }
.called-chip {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  padding: 2px 6px;
  border-radius: 6px;
}
.called-chip.B { background: var(--col-B); }
.called-chip.I { background: var(--col-I); }
.called-chip.N { background: var(--col-N); }
.called-chip.G { background: var(--col-G); }
.called-chip.O { background: var(--col-O); }

/* ── Camera ── */
#camera-section { display: flex; flex-direction: column; gap: 10px; }
#camera-hint { text-align: center; margin: 0; }
#camera-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #000;
  border: 2px solid var(--border-primary);
  border-radius: 14px;
  overflow: hidden;
}
#camera-video { width: 100%; height: 100%; object-fit: cover; display: none; }
#camera-frame.live #camera-video { display: block; }
#camera-frame.live #camera-placeholder { display: none; }
#camera-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  font-size: 14px;
  letter-spacing: 1px;
}
#camera-guide {
  position: absolute;
  inset: 8%;
  display: none;
  pointer-events: none;
}
#camera-frame.live #camera-guide { display: block; }
.guide-grid {
  width: 100%;
  height: 100%;
  border: 2px solid rgba(253,186,116,0.85);
  border-radius: 6px;
  background-image:
    linear-gradient(to right, rgba(253,186,116,0.4) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(253,186,116,0.4) 1px, transparent 1px);
  background-size: 20% 20%;
}
.camera-buttons { display: flex; flex-direction: column; gap: 8px; }

#scan-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: 100%;
  padding: 8px 0;
}
#scan-progress:not([hidden]) { display: flex !important; }
#scan-bar { width: 100%; height: 8px; background: var(--bg-cell); border-radius: 4px; overflow: hidden; }
#scan-fill {
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, var(--col-N), var(--ball-N-lt));
  border-radius: 4px;
  animation: scan-pulse 1.2s ease-in-out infinite;
}
#scan-progress.determinate #scan-fill { animation: none; transition: width 0.2s; }
#scan-progress.done #scan-fill { width: 100%; animation: none; transition: width 0.2s; }
@keyframes scan-pulse {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
#scan-label { font-size: 12px; color: var(--color-muted); letter-spacing: 1px; }

/* ── Capture preview ── */
#capture-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
#capture-preview[hidden] { display: none !important; }
.capture-preview-label {
  font-size: 11px;
  color: var(--color-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}
#capture-preview-img {
  width: min(160px, 40vw);
  height: min(160px, 40vw);
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--border-primary);
}

/* ── Card grid ── */
.section-hint { font-size: 12px; color: var(--color-muted); text-align: center; letter-spacing: 0.5px; }
#card-headers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.card-hdr {
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  border-radius: 8px;
  padding: 6px 0;
}
.card-hdr.B { background: var(--col-B); }
.card-hdr.I { background: var(--col-I); }
.card-hdr.N { background: var(--col-N); }
.card-hdr.G { background: var(--col-G); }
.card-hdr.O { background: var(--col-O); }

#card-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.card-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: var(--bg-cell);
  border: 2px solid var(--border-cell);
  transition: background 0.2s, border-color 0.2s;
}
.card-cell input {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: clamp(16px, 5.5vw, 26px);
  font-weight: 800;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  border-radius: 10px;
}
.card-cell input:focus { background: rgba(255,255,255,0.06); }
.card-cell.free { background: var(--border-primary); }
.card-cell.free .free-label { display: flex; }
.free-label {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--color-free-space);
  pointer-events: none;
}
.card-cell.daubed { border-color: rgba(255,255,255,0.35); }
.card-cell.daubed.B { background: radial-gradient(circle at 35% 30%, var(--ball-B-lt), var(--col-B)); }
.card-cell.daubed.I { background: radial-gradient(circle at 35% 30%, var(--ball-I-lt), var(--col-I)); }
.card-cell.daubed.N { background: radial-gradient(circle at 35% 30%, var(--ball-N-lt), var(--col-N)); }
.card-cell.daubed.G { background: radial-gradient(circle at 35% 30%, var(--ball-G-lt), var(--col-G)); }
.card-cell.daubed.O { background: radial-gradient(circle at 35% 30%, var(--ball-O-lt), var(--col-O)); }
.card-cell.daubed input { color: #fff; }
.card-cell.free.daubed { background: radial-gradient(circle at 35% 30%, var(--ball-N-lt), var(--col-N)); }
.card-cell.needed { box-shadow: 0 0 0 3px rgba(248,113,113,0.7) inset; }
.card-cell.invalid { border-color: var(--status-error); }
.card-cell.scan-filled { border-color: rgba(255,255,255,0.22); }
.card-cell.scan-uncertain {
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251,191,36,0.55) inset;
}
.card-cell.scan-uncertain input { color: #fde68a; }

.grid-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.grid-buttons #check-btn { grid-column: 1 / -1; }

/* ── Result banner ── */
#result-banner {
  text-align: center;
  border-radius: 12px;
  padding: 18px 16px;
  font-weight: 900;
  letter-spacing: 1px;
}
#result-banner .result-title { font-size: 26px; text-transform: uppercase; }
#result-banner .result-sub { font-size: 13px; font-weight: 600; margin-top: 6px; opacity: 0.9; }
#result-banner.win { background: linear-gradient(135deg, #15803d, #22c55e); color: #fff; }
#result-banner.no-win { background: var(--bg-secondary); border: 1px solid var(--border-primary); color: var(--color-uncalled); }
#result-banner.warn { background: var(--bg-secondary); border: 1px solid var(--status-error); color: var(--status-error-soft); }