*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #07090d;
  --surface:    #0e1117;
  --surface2:   #141921;
  --border:     #1c2535;
  --border2:    #26334a;
  --text:       #c8cdd8;
  --muted:      #4a5264;
  --accent:     #c4aaff;
  --accent-dim: #1e1635;
  --art:        #e79ad4;
  /* Minecraft's own rarity ramp, quoted rather than invented */
  --common:     #ffffff;
  --uncommon:   #ffff55;
  --rare:       #55ffff;
  --epic:       #ff55ff;
  --radius:     8px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}

.r-common   { color: var(--common); }
.r-uncommon { color: var(--uncommon); }
.r-rare     { color: var(--rare); }
.r-epic     { color: var(--epic); }

/* ── HERO ─────────────────────────────────────────── */
.hero {
  position: relative;
  border-bottom: 1px solid var(--border);
  padding: 64px 24px 52px;
  overflow: hidden;
  z-index: 2;
}

/* scanline texture — the one aesthetic risk */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px
  );
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: center;
}

/* The avatar was a 96px image on someone else's CDN. This is Matt's own Blockbench
   model, rendered by the same engine as the grid, and it turns toward the cursor like
   every other item on the page. */
.hero-art {
  width: 190px;
  height: 190px;
  flex-shrink: 0;
}

.hero-text h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 8px;
}
.hero-text h1 .accent { color: var(--accent); }

.handle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.handle::before { content: '▸ '; color: var(--accent); }

.bio {
  color: #7a849a;
  max-width: 460px;
  font-size: 14px;
  margin-bottom: 20px;
}

.tally {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 20px;
  letter-spacing: .02em;
}
.tally b { color: var(--accent); font-weight: 500; }

.links { display: flex; gap: 8px; flex-wrap: wrap; }

.link-btn {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--border2);
  color: #8892a8;
  background: var(--surface);
  transition: border-color .15s, color .15s, background .15s;
  font-family: 'JetBrains Mono', monospace;
}
.link-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* ── PROJECTS ─────────────────────────────────────── */
.projects-section {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  padding: 56px 40px 60px;
}

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

.section-header h2 {
  font-size: 12px;
  font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.count { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); }

.legend {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.legend b { font-weight: 400; }

/* ── GRID ─ tiles sized by rarity, grouped by what state they're in ── */
#grid { display: flex; flex-direction: column; gap: 44px; }

.tier-h {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.tier-h::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.tier-h span {
  order: 3;
  font-size: 10px;
  color: var(--muted);
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  grid-auto-rows: 236px;
  gap: 14px;
  grid-auto-flow: dense;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.028), transparent 60%),
    linear-gradient(180deg, var(--surface2), var(--surface));
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: border-color .2s, transform .2s;
}
.tile:hover, .tile:focus-visible { border-color: var(--border2); transform: translateY(-3px); outline: none; }
.tile:focus-visible { border-color: var(--accent); }

.tile[data-r="uncommon"] { box-shadow: inset 0 0 40px -18px rgba(255,255,85,.22); }
.tile[data-r="rare"]     { box-shadow: inset 0 0 46px -18px rgba(85,255,255,.26); }
.tile[data-r="epic"]     { box-shadow: inset 0 0 60px -16px rgba(255,85,255,.34); }

.tile .art { flex: 1; min-height: 0; position: relative; }
.tile .nm  { font-family: 'JetBrains Mono', monospace; font-size: 14px; margin-bottom: 5px; }
.tile .bl  { font-size: 12.5px; line-height: 1.55; color: #8891a3; display: none; max-width: 46ch; margin-bottom: 7px; }
.tile .dl  { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); }

.tile.big  { grid-column: span 2; grid-row: span 2; }
.tile.wide { grid-column: span 2; }
.tile.big .nm { font-size: 26px; }
.tile.big .bl, .tile.wide .bl { display: block; }
.tile.unreleased { opacity: .62; }

.tile .glint-tag {
  position: absolute;
  top: 16px; right: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--epic);
  text-transform: uppercase;
}

.tile .cursor-compass {
  position: absolute;
  left: 0; top: 0;
  width: 76px; height: 76px;
  pointer-events: none;
  will-change: transform;
}

/* The shared WebGL canvas draws into each tile's art box, and into the project page's
   art box when one is open — so it has to sit above #detail, not below it. It only ever
   paints inside a registered element's rect, so it never covers text. */
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 6; }

/* ── MINECRAFT TOOLTIP ────────────────────────────── */
#tip {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity .09s;
  max-width: 340px;
  padding: 7px 9px;
  background: rgba(16,0,16,.94);
  border: 2px solid;
  border-image: linear-gradient(#5000ff, #28007f) 1;
  box-shadow: 0 0 0 1px #100010, 0 0 0 2px rgba(16,0,16,.9);
}
#tip.show { opacity: 1; }
#tip .t-name  { font-family: 'Press Start 2P', monospace; font-size: 10px; line-height: 1.5; margin-bottom: 7px; }
#tip .t-kind  { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #aaa; margin-bottom: 6px; }
#tip .t-lore  { font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1.55; color: #aaa; margin-bottom: 7px; }
#tip .t-stat  { font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1.5; color: #555; }
#tip .t-foot  { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-style: italic; color: #555; margin-top: 6px; }
#tip .t-glint { color: var(--epic); font-style: italic; }

/* ── PROJECT DETAIL ───────────────────────────────── */
body.detail-open { overflow: hidden; }
#detail { position: fixed; inset: 0; z-index: 5; overflow-y: auto; background: var(--bg); display: none; }
body.detail-open #detail { display: block; }

.d-wrap { max-width: 1120px; margin: 0 auto; padding: 26px 40px 90px; }

.d-back {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--border2);
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  padding: 7px 13px; border-radius: 6px; cursor: pointer;
  margin-bottom: 28px;
}
.d-back:hover { color: var(--accent); border-color: var(--accent); }

.d-top {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border);
}
.d-top.stacked { grid-template-columns: 1fr; gap: 26px; }
.d-top.stacked .d-name { font-size: 40px; }
.d-top.stacked .d-desc { max-width: 70ch; }

.d-art {
  height: 330px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: radial-gradient(120% 80% at 50% 10%, rgba(255,255,255,.03), transparent 62%), var(--surface);
}
.d-art.carousel { height: 390px; }

.d-name { font-family: 'JetBrains Mono', monospace; font-size: 34px; line-height: 1.15; margin-bottom: 10px; }
.d-kind { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); margin-bottom: 16px; }
.d-desc { font-size: 15px; line-height: 1.65; color: #aab2c2; margin-bottom: 22px; max-width: 62ch; }

.d-links { display: flex; gap: 8px; flex-wrap: wrap; }
.d-links a {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  padding: 8px 14px; border: 1px solid var(--border2); border-radius: 6px;
  color: var(--text); text-decoration: none;
}
.d-links a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

.d-carousel-ctl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.d-carousel-ctl button {
  background: none; border: 1px solid var(--border2); color: var(--muted);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1;
}
.d-carousel-ctl button:hover { color: var(--accent); border-color: var(--accent); }
.d-cname { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text); min-width: 150px; text-align: center; }
.d-dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.d-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border2); border: none; padding: 0; cursor: pointer; }
.d-dot.on { background: var(--art); }

.d-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; margin: 30px 0; }
.d-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 13px 15px; }
.d-stat dt {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.d-stat dd { font-family: 'JetBrains Mono', monospace; font-size: 15px; color: var(--text); margin: 0; }

.d-h {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin: 34px 0 14px;
}

.d-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.d-shot { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.d-shot img { width: 100%; display: block; aspect-ratio: 16/10; object-fit: cover; }
.d-shot figcaption { font-size: 11.5px; color: var(--muted); padding: 9px 11px; line-height: 1.45; }

.d-body { font-size: 14px; line-height: 1.72; color: #9aa3b4; max-width: 74ch; }
.d-body h3 { font-family: 'JetBrains Mono', monospace; font-size: 15px; color: var(--text); margin: 26px 0 10px; }
.d-body h4 { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text); margin: 20px 0 8px; }
.d-body p  { margin: 0 0 13px; }
.d-body ul { margin: 0 0 13px; padding-left: 19px; }
.d-body li { margin-bottom: 6px; }
.d-body strong { color: var(--text); font-weight: 500; }
.d-body code {
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
  background: var(--surface2); padding: 1px 5px; border-radius: 4px; color: var(--accent);
}
.d-body a { color: var(--accent); }
.d-body img { max-width: 100%; border-radius: 8px; margin: 8px 0; }

.d-vers { width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.d-vers th {
  text-align: left; color: var(--muted); font-weight: 400; padding: 8px 10px;
  border-bottom: 1px solid var(--border); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
}
.d-vers td { padding: 9px 10px; border-bottom: 1px solid var(--border); color: #8891a3; }
.d-vers td:first-child { color: var(--accent); }
.d-vers-wrap { overflow-x: auto; }

.d-note { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ── FOOTER ───────────────────────────────────────── */
.load-fail { color: var(--muted); font-size: 13px; padding: 24px 2px; }

.foot {
  position: relative;
  z-index: 2;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  padding: 34px 40px 46px;
  max-width: 1440px; margin: 0 auto;
  border-top: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
}
.foot a { color: var(--muted); text-decoration: none; transition: color .15s; }
.foot a:hover { color: var(--accent); }
.foot .attrib { margin-left: auto; opacity: .75; }

/* ── RESPONSIVE ───────────────────────────────────── */
@media (max-width: 820px) {
  .d-wrap { padding: 20px 18px 70px; }
  .d-top { grid-template-columns: 1fr; gap: 24px; }
  .d-art { height: 240px; }
  .d-name { font-size: 25px; }
  .d-top.stacked .d-name { font-size: 27px; }
}

@media (max-width: 640px) {
  .hero { padding: 44px 18px 38px; }
  .hero-inner { gap: 18px; }
  .hero-art { width: 104px; height: 104px; }
  .tally { font-size: 11.5px; }
  .projects-section { padding: 34px 18px 50px; }
  #grid { gap: 34px; }
  .tier-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 172px; }
  /* only the epic tile earns the full width on a phone; rare tiles pair up instead,
     which halves the scroll and gives the grid a rhythm rather than a stack */
  .tile.big { grid-column: span 2; grid-row: span 2; }
  .tile.wide { grid-column: span 1; }
  .tile.wide .bl { display: none; }
  .tile.big .nm { font-size: 19px; }
  .tile { padding: 14px 15px; }
  .tile .nm { font-size: 12px; overflow-wrap: anywhere; }
  .tile .dl { font-size: 10px; }
  .foot { padding: 26px 18px 34px; }
  .foot .attrib { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tile, #tip { transition: none; }
}