/* PokeScan AI Card Grader — Styles */

/* ── Variables ─────────────────────────── */
:root {
  --g-bg: #0a0a0f;
  --g-bg2: #111119;
  --g-bg3: #1a1a26;
  --g-accent: #8b5cf6;
  --g-accent2: #a78bfa;
  --g-green: #22c55e;
  --g-yellow: #eab308;
  --g-red: #ef4444;
  --g-t1: #f0f0ff;
  --g-t2: #9898b0;
  --g-t3: #555568;
  --g-glass: rgba(16,16,28,.88);
  --g-border: rgba(139,92,246,.18);
}

/* ── Grader Content Area ───────────────── */
.grader-content {
  height: calc(100vh - 60px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
}

/* ── CAPTURE VIEW ──────────────────────── */
.gcapture {
  padding: 0 12px 24px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 60px);
}

.ge-tips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  padding: 0 4px;
}

.ge-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--g-t2);
  line-height: 1.4;
}

.ge-tip-icon {
  flex-shrink: 0;
  color: var(--g-accent);
  display: flex;
  align-items: center;
}

.ge-tip-icon svg {
  width: 14px;
  height: 14px;
}

.gscale-divider {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 12px 0;
}

.gscale-label {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--g-t3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}

/* ── Camera Area ───────────────────────── */
.gcapture-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  flex: 1;
  padding-top: 8px;
}

.gcapture-camera-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 3/4;
  border-radius: 16px;
  overflow: hidden;
  background: var(--g-bg3);
  border: 1px solid var(--g-border);
}

.gcapture-camera-wrap.cam-unavailable {
  background: var(--g-bg3);
}

#gcam {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gcam-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.gcam-frame {
  position: relative;
  width: 68%;
  height: 82%;
}

.gcf {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--g-accent);
  border-style: solid;
  border-width: 0;
}

.gcf-tl { top: 0; left: 0; border-top-width: 2.5px; border-left-width: 2.5px; border-radius: 4px 0 0 0; }
.gcf-tr { top: 0; right: 0; border-top-width: 2.5px; border-right-width: 2.5px; border-radius: 0 4px 0 0; }
.gcf-bl { bottom: 0; left: 0; border-bottom-width: 2.5px; border-left-width: 2.5px; border-radius: 0 0 0 4px; }
.gcf-br { bottom: 0; right: 0; border-bottom-width: 2.5px; border-right-width: 2.5px; border-radius: 0 0 4px 0; }

.gcam-hint {
  font-size: 11px;
  color: rgba(139,92,246,.8);
  margin-top: 10px;
  font-family: 'Orbitron', monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── Camera Controls ───────────────────── */
.gcapture-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  max-width: 320px;
}

.gcam-right-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.gzoom-btn {
  font-family: 'Orbitron', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--g-t2) !important;
}

.gzoom-btn.gzoom-active {
  background: rgba(139,92,246,.2) !important;
  border-color: var(--g-accent) !important;
  color: var(--g-accent) !important;
}

.gcam-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--g-bg3);
  border: 1px solid var(--g-border);
  color: var(--g-t2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}

.gcam-btn:active {
  background: rgba(139,92,246,.15);
  color: var(--g-accent);
  transform: scale(.94);
}

.gshutter {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: transparent;
  border: 3px solid var(--g-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}

.gshutter:active {
  transform: scale(.9);
}

.gshutter-inner {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--g-accent);
  transition: all .15s;
}

.gshutter:active .gshutter-inner {
  background: var(--g-accent2);
  transform: scale(.88);
}

/* ── Grade Scale Reference ─────────────── */
.gscale-ref {
  background: var(--g-bg2);
  border: 1px solid var(--g-border);
  border-radius: 12px;
  margin-top: 8px;
  overflow: hidden;
}

.gscale-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--g-t2);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.gscale-summary::-webkit-details-marker { display: none; }
.gscale-summary svg { color: var(--g-accent); flex-shrink: 0; }
.gscale-summary span.gscale-chev { margin-left: auto; color: var(--g-t3); }

.gscale-body {
  padding: 4px 16px 16px;
}

.gscale-row {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.gscale-row.gs-top { margin-bottom: 8px; }

.gscale-item {
  flex: 1;
  background: var(--g-bg3);
  border-radius: 8px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.04);
}

.gsr {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}

.gsr-gm { color: #4ade80; }
.gsr-nm { color: #22c55e; }
.gsr-vg { color: #eab308; }
.gsr-fp { color: #f97316; }
.gsr-dam { color: #ef4444; }

.gsl {
  font-size: 11px;
  font-weight: 600;
  color: var(--g-t1);
  margin-bottom: 3px;
}

.gsd {
  font-size: 10px;
  color: var(--g-t3);
  line-height: 1.4;
}

/* ── Tap-to-Focus Ring ─────────────────── */
.gcam-focus-ring {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 2px solid var(--g-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: gfocus-pulse 0.6s ease-out forwards;
  z-index: 10;
}

@keyframes gfocus-pulse {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  50% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.9); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

/* ── Card Analysis Overlay ─────────────── */
.gres-overlay-section {
  padding: 16px 12px;
}

.gres-section-sub {
  font-size: 11px;
  color: var(--g-t3);
  margin: -8px 0 12px;
  line-height: 1.4;
}

.goverlay-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--g-bg3);
}

.goverlay-img {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  object-fit: contain;
}

/* ── RESULTS VIEW ──────────────────────── */
.gresults {
  padding: 16px 16px 32px;
}

.gres-top {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--g-bg2);
  border: 1px solid var(--g-border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}

.ggrade-ring-wrap {
  position: relative;
  flex-shrink: 0;
}

.ggrade-ring-svg {
  display: block;
}

.gring-bg {
  stroke: var(--g-bg3);
}

.gring-fill {
  transition: stroke-dashoffset 1.2s ease;
}

.gring-green { stroke: #22c55e; }
.gring-yellow { stroke: #eab308; }
.gring-red { stroke: #ef4444; }

.ggrade-number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', monospace;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

.ggrade-green { color: #22c55e; }
.ggrade-yellow { color: #eab308; }
.ggrade-red { color: #ef4444; }

.ggrade-label {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  color: var(--g-t2);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: 'Orbitron', monospace;
}

.gres-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gmeta-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.gmeta-item:last-child { border-bottom: none; }

.gmeta-key {
  font-size: 11px;
  color: var(--g-t3);
  font-weight: 500;
}

.gmeta-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--g-t1);
}

/* ── Sub-grade Sections ────────────────── */
.gres-section {
  background: var(--g-bg2);
  border: 1px solid var(--g-border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
}

.gres-section-title {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g-t2);
  margin-bottom: 14px;
}

.gres-subgrades {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gres-subgrade { }

.gsb-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}

.gsb-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--g-t1);
}

.gsb-val {
  font-family: 'Orbitron', monospace;
  font-size: 15px;
  font-weight: 700;
}

.gsb-green { color: #22c55e; }
.gsb-yellow { color: #eab308; }
.gsb-red { color: #ef4444; }

.gsb-max {
  font-size: 10px;
  font-weight: 400;
  color: var(--g-t3);
  margin-left: 1px;
}

.gsb-track {
  height: 6px;
  background: var(--g-bg3);
  border-radius: 3px;
  overflow: hidden;
}

.gsb-fill {
  height: 100%;
  border-radius: 3px;
  width: 0%;
}

.gsb-fill-green { background: linear-gradient(90deg, #16a34a, #22c55e); }
.gsb-fill-yellow { background: linear-gradient(90deg, #ca8a04, #eab308); }
.gsb-fill-red { background: linear-gradient(90deg, #dc2626, #ef4444); }

.gsb-detail {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.gsb-detail span {
  font-size: 10px;
  color: var(--g-t3);
  font-family: 'JetBrains Mono', monospace;
}

/* ── Centering Diagram ─────────────────── */
.gcen-diagram-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.gcen-diagram {
  display: block;
  border-radius: 8px;
}

.gcen-ratios {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.gcen-ratio-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--g-bg3);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.04);
}

.gcen-ratio-label {
  font-size: 12px;
  color: var(--g-t2);
  font-weight: 500;
}

.gcen-ratio-val {
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  font-weight: 700;
}

.gcen-ratio-green { color: #22c55e; }
.gcen-ratio-yellow { color: #eab308; }
.gcen-ratio-red { color: #ef4444; }

.gcen-note {
  font-size: 10px;
  color: var(--g-t3);
  text-align: center;
  line-height: 1.4;
  font-style: italic;
}

/* ── Centering (legacy bars) ───────────── */
.gres-centering {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gcen-item { }

.gcen-key {
  font-size: 12px;
  color: var(--g-t2);
  margin-bottom: 4px;
  display: block;
}

.gcen-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--g-t1);
  margin-bottom: 6px;
  display: block;
}

.gcen-bar-wrap {
  height: 5px;
  background: var(--g-bg3);
  border-radius: 3px;
  overflow: hidden;
}

.gcen-bar {
  height: 100%;
  border-radius: 3px;
  width: 0%;
}

.gcen-bar-green { background: #22c55e; }
.gcen-bar-yellow { background: #eab308; }
.gcen-bar-red { background: #ef4444; }

/* ── Individual Corners & Edges ────────── */
.gres-indiv {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gi-grid { }

.gi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--g-t3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
  font-family: 'Orbitron', monospace;
}

.gi-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.gi-item {
  background: var(--g-bg3);
  border-radius: 8px;
  padding: 8px 4px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.04);
}

.gi-name {
  font-size: 10px;
  color: var(--g-t3);
  margin-bottom: 3px;
  font-family: 'Orbitron', monospace;
}

.gi-val {
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  font-weight: 700;
}

.gi-green { color: #22c55e; }
.gi-yellow { color: #eab308; }
.gi-red { color: #ef4444; }

/* ── Worth Grading ─────────────────────── */
.gwz-verdict {
  border: 1px solid;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.gwz-verdict-label {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.gwz-verdict-summary {
  font-size: 12px;
  color: var(--g-t2);
  line-height: 1.5;
}

.gwz-factors {
  margin-bottom: 14px;
}

.gwz-factors-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--g-t2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
  font-family: 'Orbitron', monospace;
}

.gwz-factor {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.gwz-factor:last-child { border-bottom: none; }

.gwz-factor-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.gwz-factor-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--g-t1);
  margin-bottom: 2px;
}

.gwz-factor-detail {
  font-size: 11px;
  color: var(--g-t3);
  line-height: 1.4;
}

.gwz-tiers { }

.gwz-tiers-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--g-t2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
  font-family: 'Orbitron', monospace;
}

.gwz-tiers-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.gwz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  min-width: 340px;
}

.gwz-table th {
  text-align: left;
  padding: 6px 8px;
  color: var(--g-t3);
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.06);
  white-space: nowrap;
}

.gwz-table td {
  padding: 7px 8px;
  color: var(--g-t2);
  border-bottom: 1px solid rgba(255,255,255,.03);
  white-space: nowrap;
}

.gwz-table tr:last-child td { border-bottom: none; }

.text-green { color: #22c55e !important; }
.text-yellow { color: #eab308 !important; }
.text-red { color: #ef4444 !important; }

.gwz-tiers-note {
  font-size: 10px;
  color: var(--g-t3);
  margin-top: 8px;
  font-style: italic;
  line-height: 1.4;
}

/* ── Results Actions ───────────────────── */
.gres-actions {
  display: flex;
  justify-content: center;
  padding: 8px 0 16px;
}

.gcta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  background: rgba(139,92,246,.15);
  border: 1px solid rgba(139,92,246,.35);
  border-radius: 12px;
  color: var(--g-accent2);
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
  min-width: 160px;
}

.gcta-btn:active {
  background: rgba(139,92,246,.25);
  transform: scale(.97);
}

.gtext-btn {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .15s;
}

.gtext-btn:active { background: rgba(255,255,255,.05); }

/* Scale ref in results */
.gscale-ref-sm {
  margin-top: 4px;
}

/* ── HISTORY VIEW ──────────────────────── */
.ghistory {
  padding: 16px;
}

.ghist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.ghist-title {
  font-family: 'Orbitron', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--g-t1);
}

.ghist-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ghist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--g-bg2);
  border: 1px solid var(--g-border);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}

.ghist-item:active { background: var(--g-bg3); }

.ghist-thumb {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: var(--g-bg3);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ghist-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ghist-thumb-placeholder {
  color: var(--g-t3);
}

.ghist-info {
  flex: 1;
  min-width: 0;
}

.ghist-grade-badge {
  display: inline-block;
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 3px;
}

.gbadge-green { background: rgba(34,197,94,.15); color: #22c55e; }
.gbadge-yellow { background: rgba(234,179,8,.15); color: #eab308; }
.gbadge-red { background: rgba(239,68,68,.15); color: #ef4444; }

.ghist-cond {
  font-size: 12px;
  font-weight: 600;
  color: var(--g-t1);
}

.ghist-date {
  font-size: 10px;
  color: var(--g-t3);
  margin-top: 1px;
}

.ghist-sub {
  font-size: 10px;
  color: var(--g-t3);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 2px;
}

.ghist-arrow {
  font-size: 20px;
  color: var(--g-t3);
  flex-shrink: 0;
}

/* Empty state */
.ghistory-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  gap: 12px;
}

.ghist-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--g-bg2);
  border: 1px solid var(--g-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g-t3);
  margin-bottom: 4px;
}

.ghistory-empty h3 {
  font-family: 'Orbitron', monospace;
  font-size: 16px;
  color: var(--g-t1);
}

.ghistory-empty p {
  font-size: 13px;
  color: var(--g-t3);
  margin-bottom: 8px;
}