/* ============================================================
   Yakuza Tracker — shared design system across all game pages
   "Arcade" direction: amber CRT terminal, monospace, scanlines
   ============================================================ */

html{font-size:100%;} /* 1rem = 16px by default, scales with the browser/user zoom */

:root{
  --bg:#0b0d09;
  --bg-elevated:#111309;
  --bg-card:#0e1109;
  --line:#4a3814;
  --line-soft:#2e2410;
  --phos:#ffb238;
  --phos-dim:#c99a4a;
  --phos-faint:#4a3814;
  --text:#ffb238;
  --text-dim:#c99a4a;
  --text-faint:#7a5e2c;
  --jade:#5fce9a;
  --jade-soft:#2c4a3d;
  --bronze:#c99a4a;
  --silver:#cfd8e6;
  --gold-medal:#ffd85e;
  --gold:#ffd85e;         /* gold accent — platinum section heading */
  --gold-soft:#7a611f;    /* dim gold — platinum section border */
  --platinum:#e8ecf3;
  --font-display: "Press Start 2P","VT323",monospace;
  --font-body: "VT323","Cascadia Code",monospace;
  --font-mono: "VT323","Cascadia Code",monospace;

  /* Type scale — every font-size in the file references one of these.
     Change a step here and it updates everywhere at once; nothing
     should hardcode a px/rem font-size outside this block. */
  --fs-2xs: 0.85rem;  /* ~13.6px — tiny captions (big-stat's "trophies" label) */
  --fs-xs:  1rem;      /* ~16px   — secondary notes, helper text, footer */
  --fs-sm:  1.1rem;    /* ~17.6px — chrome: tags, links, nav, inputs, buttons */
  --fs-base:1.5rem;    /* ~24px   — primary reading text (checklist rows, labels) */
  --fs-md:  1.8rem;    /* ~28.8px — section titles */
  --fs-lg:  2.5rem;    /* ~40px   — the big trophy-count number */
  --fs-display: clamp(1.75rem, 4.5vw, 2.5rem); /* h1 — 28px to 40px */
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.45;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

/* CRT scanlines + vignette, fixed over the whole viewport */
body::before{
  content:"";
  position:fixed;inset:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 1px, transparent 1px, transparent 5px);
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:50;
}
body::after{
  content:"";
  position:fixed;inset:0;
  background:radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.5) 100%);
  pointer-events:none;
  z-index:50;
}

a{color:var(--phos);}
a:hover{color:#ffcf7a;}

.wrap{
  max-width:920px;
  margin:0 auto;
  padding:0 20px 80px;
}

/* ---------- Site nav (shared across all pages) ---------- */
nav.site-nav{
  background:var(--bg-elevated);
  border-bottom:1px solid var(--line);
}
.site-nav-inner{
  max-width:920px;
  margin:0 auto;
  padding:12px 20px;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.site-brand{
  font-family:var(--font-display);
  font-size:1.1rem;
  letter-spacing:.02em;
  color:var(--text);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  text-shadow:0 0 6px rgba(255,178,56,0.35);
}
.site-brand:hover{color:var(--text);}
.site-brand .dragon{color:var(--phos);font-family:var(--font-body);font-size:1.25rem;}
.site-nav-links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:var(--fs-sm);
}
.site-nav-links a{
  color:var(--text-dim);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.site-nav-links a:hover{color:var(--phos);}
.site-nav-links a.current{color:var(--phos);border-bottom-color:var(--phos-dim);}

/* ---------- Per-tracker header ---------- */
header.top{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(11,13,9,0.97);
  border-bottom:1px solid var(--line);
}
.top-inner{
  max-width:920px;
  margin:0 auto;
  padding:18px 20px 14px;
}
.header-topline{
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.header-text{flex:1;min-width:0;}
.kicker{
  font-family:var(--font-mono);
  font-size:var(--fs-sm);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-dim);
  display:flex;
  gap:6px;
  align-items:center;
}
.kicker::before{content:">>";color:var(--phos-dim);}
.kicker .dot{display:none;}
h1{
  font-family:var(--font-display);
  font-size:var(--fs-display);
  line-height:1.5;
  letter-spacing:.02em;
  margin:10px 0 6px;
  text-wrap:balance;
  text-shadow:0 0 6px rgba(255,178,56,0.55), 0 0 16px rgba(255,178,56,0.25);
}
.subtitle{
  color:var(--text-dim);
  font-size:var(--fs-base);
  margin:0 0 12px;
  max-width:520px;
}
.subtitle a{color:var(--text-dim);text-decoration-color:var(--phos-dim);}
.subtitle a:hover{color:var(--phos);}

.header-cover{
  width:76px;height:101px;min-width:76px;
  border:1px solid var(--phos-dim);
  position:relative;
  overflow:hidden;
  box-shadow:0 0 10px rgba(255,178,56,0.2) inset;
}
.header-cover img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) sepia(1) hue-rotate(-14deg) saturate(4.5) brightness(0.85) contrast(1.15);
}

.progress-row{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.big-stat{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-lg);
  font-weight:400;
  color:var(--phos);
  white-space:nowrap;
  text-shadow:0 0 6px rgba(255,178,56,0.5);
}
.big-stat small{
  font-family:var(--font-mono);
  font-size:var(--fs-2xs);
  color:var(--text-faint);
  text-transform:uppercase;
  letter-spacing:.08em;
  display:block;
  margin-top:-4px;
  text-shadow:none;
}
.bar-track{
  flex:1;
  min-width:160px;
  height:16px;
  background:repeating-linear-gradient(90deg, var(--phos-faint) 0px 6px, transparent 6px 9px);
  border:1px solid var(--line);
  overflow:hidden;
  position:relative;
}
.bar-fill{
  height:100%;
  background:repeating-linear-gradient(90deg, var(--phos) 0px 6px, var(--bg) 6px 9px);
  width:0%;
  transition:width .3s steps(10);
  box-shadow:0 0 6px rgba(255,178,56,0.5);
}
.medal-tally{
  display:flex;
  gap:10px;
  font-family:var(--font-mono);
  font-size:var(--fs-base);
  font-variant-numeric:tabular-nums;
  color:var(--text-dim);
}
.medal-tally span{display:flex;align-items:center;gap:4px;}
.medal-dot{width:7px;height:7px;border-radius:0;display:inline-block;}
.md-bronze{background:var(--bronze);}
.md-silver{background:var(--silver);}
.md-gold{background:var(--gold-medal);}
.md-platinum{background:var(--platinum);}

.save-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed var(--line-soft);
  flex-wrap:wrap;
}
.save-indicator{
  font-family:var(--font-mono);
  font-size:var(--fs-sm);
  color:var(--text-faint);
}
.save-actions{display:flex;gap:10px;}
.save-btn{
  font-family:var(--font-mono);
  font-size:var(--fs-sm);
  color:var(--text-dim);
  background:transparent;
  border:none;
  padding:2px 0;
  cursor:pointer;
  transition:color .12s ease;
}
.save-btn::before{content:"[ ";color:var(--phos-faint);}
.save-btn::after{content:" ]";color:var(--phos-faint);}
.save-btn:hover{color:var(--phos);}
.save-btn:focus-visible{outline:1px solid var(--phos);outline-offset:2px;}

/* ---------- Sections ---------- */
main{padding-top:22px;}
section.block{
  margin-bottom:14px;
  background:rgba(255,178,56,0.025);
  border:1px solid var(--line);
  border-radius:0;
}
details > summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  user-select:none;
}
details > summary::-webkit-details-marker{display:none;}
.summary-left{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.summary-left .chev{
  font-family:var(--font-mono);
  color:var(--text-faint);
  transition:transform .15s ease;
  display:inline-block;
}
details[open] .chev{transform:rotate(90deg);}
h2.sec-title{
  font-family:var(--font-body);
  font-size:var(--fs-md);
  letter-spacing:.03em;
  text-transform:uppercase;
  margin:0;
  color:var(--phos);
}
.sec-note{
  font-size:var(--fs-xs);
  color:var(--text-faint);
  font-weight:400;
}
.badge{
  font-family:var(--font-mono);
  font-size:var(--fs-base);
  font-variant-numeric:tabular-nums;
  padding:2px 9px;
  border-radius:0;
  border:1px solid var(--line);
  color:var(--text-dim);
  white-space:nowrap;
}
.badge.done{
  color:var(--phos);
  border-color:var(--phos-dim);
  background:rgba(255,178,56,0.06);
  text-shadow:0 0 4px rgba(255,178,56,0.4);
}
.sec-body{
  padding:0 16px 16px;
  border-top:1px solid var(--line-soft);
}
.sec-intro{
  font-size:var(--fs-xs);
  color:var(--text-faint);
  margin:12px 0 10px;
}

/* ---------- Checklist items ---------- */
.item{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:6px 10px;
  padding:8px 4px;
  border-bottom:1px solid var(--line-soft);
}
.item:last-child{border-bottom:none;}
.item input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:2.75rem;height:1.625rem;
  min-width:2.75rem;
  background:transparent;
  border:none;
  cursor:pointer;
  position:relative;
  font-family:var(--font-mono);
}
.item input[type="checkbox"]::before{
  content:"[ ]";
  position:absolute;inset:0;
  display:flex;align-items:center;
  font-size:var(--fs-base);
  color:var(--text-dim);
  white-space:pre;
}
.item input[type="checkbox"]:hover::before{color:var(--phos);}
.item input[type="checkbox"]:checked::before{
  content:"[X]";
  color:var(--phos);
  text-shadow:0 0 6px rgba(255,178,56,0.55);
}
.item input[type="checkbox"]:focus-visible{outline:1px solid var(--phos);outline-offset:2px;}
.item label{flex:1;cursor:pointer;font-size:var(--fs-base);}
.item label .lbl-name{color:var(--text);}
.item label .lbl-note{display:block;color:var(--text-faint);font-size:var(--fs-xs);margin-top:1px;}
.item.checked label .lbl-name{color:var(--text-dim);text-decoration:line-through;text-decoration-color:var(--line);}
.tag{
  font-family:var(--font-mono);
  font-size:var(--fs-sm);
  color:var(--text-dim);
  border:1px solid var(--line);
  border-radius:0;
  padding:0px 6px;
  margin-right:6px;
  white-space:nowrap;
}
.tag.tier-bronze{color:var(--bronze);border-color:var(--bronze);}
.tag.tier-silver{color:var(--silver);border-color:var(--silver);}
.tag.tier-gold{color:var(--gold-medal);border-color:var(--gold-medal);}

.sub-heading{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:var(--fs-base);
  color:var(--phos);
  margin:16px 0 4px;
  padding-top:8px;
  border-top:1px dashed var(--line-soft);
}
.sub-heading::before{content:"> ";color:var(--phos-dim);}
.sub-heading:first-of-type{border-top:none;padding-top:0;margin-top:6px;}

.glink{
  align-self:center;
  font-family:var(--font-mono);
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--phos);
  text-decoration:none;
  border:none;
  border-bottom:2px solid var(--phos-dim);
  border-radius:0;
  padding:0 2px;
  white-space:nowrap;
  transition:color .12s ease;
}
.glink:hover{color:#ffcf7a;}
.sub-heading .glink, .summary-left .glink{margin-left:4px;}

/* number input rows */
.counter-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 4px;
  border-bottom:1px solid var(--line-soft);
  flex-wrap:wrap;
}
.counter-row:last-child{border-bottom:none;}
.counter-label{font-size:var(--fs-base);flex:1;min-width:180px;}
.counter-label .lbl-note{display:block;color:var(--text-faint);font-size:var(--fs-xs);margin-top:1px;}
.counter-input-wrap{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:var(--fs-sm);
  color:var(--text-dim);
}
.counter-input-wrap input[type="number"]{
  width:4.2rem;
  background:transparent;
  border:1px solid var(--line);
  color:var(--phos);
  border-radius:0;
  padding:4px 6px;
  font-family:var(--font-mono);
  font-size:var(--fs-sm);
  text-align:right;
}
.counter-input-wrap input[type="number"]:focus-visible{outline:1px solid var(--phos);outline-offset:1px;}

/* ---------- Cover-art treatment (game grid, etc.) ---------- */
.cover-art{
  position:relative;
  overflow:hidden;
}
.cover-art img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) sepia(1) hue-rotate(-14deg) saturate(4.5) brightness(0.85) contrast(1.15);
}
.cover-art.locked img{filter:grayscale(1) sepia(1) hue-rotate(-14deg) saturate(2) brightness(0.35) contrast(1.05);}
.cover-art.locked::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.5) 8px, transparent 8px, transparent 16px);
}
/* Fallback for a "coming soon" game card before its cover art exists —
   swap to .locked (with a real <img>) once art is added. */
.cover-art.locked-plain{
  background:repeating-linear-gradient(135deg, var(--bg-elevated) 0px, var(--bg-elevated) 8px, var(--bg) 8px, var(--bg) 16px);
  border:1px solid var(--line-soft);
}

footer.site-footer{
  text-align:center;
  color:var(--text-faint);
  font-size:var(--fs-xs);
  padding:30px 20px 40px;
  font-family:var(--font-mono);
}
footer.site-footer a{color:var(--text-faint);}

@media (prefers-reduced-motion: reduce){
  .bar-fill, .chev{transition:none;}
}

@media (max-width:640px){
  header.top{position:static;}
}

@media (max-width:480px){
  .progress-row{gap:10px;}
  .big-stat{font-size:var(--fs-md);}
  .header-cover{width:60px;height:80px;min-width:60px;}
  .top-inner{padding:14px 16px 12px;}
}