:root {
  /* Deep navy void */
  --void:      oklch(0.14 0.035 250);
  --void-2:    oklch(0.19 0.04 250);

  /* Warm orange / peach surface (formerly "cream") */
  --cream:     oklch(0.86 0.09 60);
  --cream-2:   oklch(0.78 0.10 52);
  --cream-3:   oklch(0.70 0.11 46);
  --cream-dim: oklch(0.86 0.09 60 / 0.55);

  /* Warm dark for type on the orange surface */
  --ink:       oklch(0.20 0.03 50);
  --ink-2:     oklch(0.32 0.03 50);

  /* Accents */
  --accent:    oklch(0.72 0.18 45);   /* deeper orange */
  --blue:      oklch(0.82 0.12 232);  /* sky blue — bsky */

  /* Logo geometry */
  --logo-size: 200px;
  --logo-top:  72px;
  --logo-right: 72px;

  /* Blade geometry */
  --blade-w: 300px;
  --blade-h: 46px;

  /* Panel geometry — gutter clears the menu blades + their active translate */
  --panel-right: calc(var(--logo-right) + var(--logo-size) / 2 + var(--blade-w) + 48px);
}

* { box-sizing: border-box; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  /* Retro game sky — deep night fading to a warm horizon */
  background:
    linear-gradient(
      to bottom,
      oklch(0.10 0.04 280) 0%,
      oklch(0.14 0.05 270) 35%,
      oklch(0.22 0.08 290) 55%,
      oklch(0.30 0.12 320) 65%,
      oklch(0.38 0.15 25) 72%,
      oklch(0.18 0.06 260) 73%,
      oklch(0.10 0.04 260) 100%
    );
  color: var(--cream);
  font-family: "Space Grotesk", system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ─────────── Retro scene ─────────── */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* Pixel sun — chunky disc with horizontal slats, sitting on the horizon */
.scene .sun {
  position: absolute;
  left: 50%;
  bottom: 27%;
  transform: translate(-50%, 50%);
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background:
    /* horizontal slats fade out toward top */
    linear-gradient(to top,
      oklch(0.78 0.20 35) 0%,
      oklch(0.78 0.20 35) 45%,
      transparent 45%, transparent 50%,
      oklch(0.80 0.18 45) 50%, oklch(0.80 0.18 45) 53%,
      transparent 53%, transparent 56%,
      oklch(0.82 0.16 50) 56%, oklch(0.82 0.16 50) 60%,
      transparent 60%, transparent 64%,
      oklch(0.84 0.14 55) 64%, oklch(0.84 0.14 55) 67%,
      transparent 67%, transparent 71%,
      oklch(0.86 0.12 60) 71%, oklch(0.86 0.12 60) 73%,
      transparent 73%, transparent 78%,
      oklch(0.88 0.10 65) 78%, oklch(0.88 0.10 65) 79%,
      transparent 79% 100%),
    radial-gradient(circle at 50% 60%,
      oklch(0.88 0.15 60) 0%,
      oklch(0.72 0.20 35) 70%,
      oklch(0.50 0.18 25) 100%);
  box-shadow:
    0 0 60px 10px oklch(0.72 0.20 35 / 0.5),
    0 0 140px 40px oklch(0.55 0.18 30 / 0.4),
    0 0 260px 80px oklch(0.45 0.15 300 / 0.25);
}

/* Distant pixel mountain range — sits just above the horizon */
.scene .mountains {
  position: absolute;
  left: 0; right: 0;
  z-index:5;
  bottom: 27%;
  height: 110px;
  background: oklch(0.16 0.05 280);
  /* Stepped pixel silhouette via polygon clip */
  clip-path: polygon(
    0% 100%,
    0% 70%,    4% 70%,   4% 55%,   8% 55%,   8% 38%,  12% 38%,  12% 25%,  16% 25%,
    16% 45%,  20% 45%,  20% 60%,  24% 60%,  24% 50%,  28% 50%,  28% 32%,  32% 32%,
    32% 18%,  36% 18%,  36% 28%,  40% 28%,  40% 42%,  44% 42%,  44% 55%,  48% 55%,
    48% 38%,  52% 38%,  52% 22%,  56% 22%,  56% 10%,  60% 10%,  60% 30%,  64% 30%,
    64% 45%,  68% 45%,  68% 35%,  72% 35%,  72% 50%,  76% 50%,  76% 38%,  80% 38%,
    80% 25%,  84% 25%,  84% 42%,  88% 42%,  88% 58%,  92% 58%,  92% 72%,  96% 72%,
    96% 60%, 100% 60%, 100% 100%
  );
  box-shadow: 0 -2px 0 oklch(0.30 0.10 300 / 0.5);
}
/* Faint ridge in front, lighter */
.scene .mountains.near {
  bottom: 27%;
  height: 70px;
  background: oklch(0.12 0.04 270);
  opacity: 0.85;
  clip-path: polygon(
    0% 100%,
    0% 80%,    6% 80%,   6% 60%,  12% 60%,  12% 45%,  18% 45%,  18% 60%,  24% 60%,
    24% 38%,  30% 38%,  30% 55%,  36% 55%,  36% 70%,  42% 70%,  42% 48%,  48% 48%,
    48% 30%,  54% 30%,  54% 50%,  60% 50%,  60% 38%,  66% 38%,  66% 58%,  72% 58%,
    72% 42%,  78% 42%,  78% 65%,  84% 65%,  84% 50%,  90% 50%,  90% 72%,  96% 72%,
    96% 60%, 100% 60%, 100% 100%
  );
}

/* Mountain reflections — opaque silhouettes that occlude the sun below the horizon */
.scene .mountains-reflection {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(27% - 110px);
  height: 110px;
  background: oklch(0.14 0.05 270);
  transform: scaleY(-1);
  z-index: 2;
  clip-path: polygon(
    0% 100%,
    0% 70%,    4% 70%,   4% 55%,   8% 55%,   8% 38%,  12% 38%,  12% 25%,  16% 25%,
    16% 45%,  20% 45%,  20% 60%,  24% 60%,  24% 50%,  28% 50%,  28% 32%,  32% 32%,
    32% 18%,  36% 18%,  36% 28%,  40% 28%,  40% 42%,  44% 42%,  44% 55%,  48% 55%,
    48% 38%,  52% 38%,  52% 22%,  56% 22%,  56% 10%,  60% 10%,  60% 30%,  64% 30%,
    64% 45%,  68% 45%,  68% 35%,  72% 35%,  72% 50%,  76% 50%,  76% 38%,  80% 38%,
    80% 25%,  84% 25%,  84% 42%,  88% 42%,  88% 58%,  92% 58%,  92% 72%,  96% 72%,
    96% 60%, 100% 60%, 100% 100%
  );
}
.scene .mountains-reflection.near {
  bottom: calc(27% - 70px);
  height: 70px;
  background: oklch(0.11 0.04 265);
  z-index: 3;
  clip-path: polygon(
    0% 100%,
    0% 80%,    6% 80%,   6% 60%,  12% 60%,  12% 45%,  18% 45%,  18% 60%,  24% 60%,
    24% 38%,  30% 38%,  30% 55%,  36% 55%,  36% 70%,  42% 70%,  42% 48%,  48% 48%,
    48% 30%,  54% 30%,  54% 50%,  60% 50%,  60% 38%,  66% 38%,  66% 58%,  72% 58%,
    72% 42%,  78% 42%,  78% 65%,  84% 65%,  84% 50%,  90% 50%,  90% 72%,  96% 72%,
    96% 60%, 100% 60%, 100% 100%
  );
}

/* Perspective grid floor (synthwave) — extends from horizon to bottom */
.scene .grid-floor {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 27vh;
  background:
    linear-gradient(to bottom,
      transparent 0%,
      oklch(0.18 0.05 280 / 0.4) 5%,
      transparent 100%),
    /* horizontal lines, denser near the horizon */
    repeating-linear-gradient(to bottom,
      transparent 0px,
      transparent 14px,
      oklch(0.75 0.18 320 / 0.55) 14px,
      oklch(0.75 0.18 320 / 0.55) 15px),
    /* vertical lines, will be transformed into perspective */
    repeating-linear-gradient(to right,
      transparent 0px,
      transparent 39px,
      oklch(0.78 0.18 320 / 0.6) 39px,
      oklch(0.78 0.18 320 / 0.6) 40px);
  transform: perspective(420px) rotateX(58deg);
  transform-origin: 50% 0;
  animation: grid-scroll 12s linear infinite;
  z-index: 4;
}
@keyframes grid-scroll {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 0 0, 0 240px, 0 0; }
}
/* Glow band sitting on the horizon line */
.scene .horizon-glow {
  position: absolute;
  left: 0; right: 0;
  bottom: 27%;
  height: 4px;
  z-index:6;
  background: oklch(0.95 0.18 320);
  box-shadow:
    0 0 18px 4px oklch(0.80 0.20 320 / 0.9),
    0 0 60px 14px oklch(0.65 0.18 320 / 0.5);
}

/* Starfield — three layers via box-shadow stars */
.scene .stars {
  position: absolute;
  inset: 0 0 35% 0;
  overflow: hidden;
}
.scene .stars .layer {
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  background: transparent;
}
/* Small, plentiful, slow twinkle */
.scene .stars .s1 {
  box-shadow:
    40px 60px #ede4d3, 120px 30px #ede4d3, 210px 90px #ede4d3, 280px 20px #ede4d3,
    360px 110px #ede4d3, 450px 50px #ede4d3, 540px 130px #ede4d3, 620px 40px #ede4d3,
    700px 100px #ede4d3, 780px 70px #ede4d3, 870px 30px #ede4d3, 950px 120px #ede4d3,
    1040px 80px #ede4d3, 1120px 20px #ede4d3, 1210px 140px #ede4d3, 1290px 50px #ede4d3,
    1380px 100px #ede4d3, 1460px 30px #ede4d3, 1550px 120px #ede4d3, 1630px 70px #ede4d3,
    1720px 40px #ede4d3, 1800px 130px #ede4d3, 1890px 90px #ede4d3, 70px 180px #ede4d3,
    160px 220px #ede4d3, 250px 200px #ede4d3, 340px 240px #ede4d3, 430px 190px #ede4d3,
    520px 230px #ede4d3, 610px 250px #ede4d3, 700px 200px #ede4d3, 790px 240px #ede4d3,
    880px 190px #ede4d3, 970px 220px #ede4d3, 1060px 250px #ede4d3, 1150px 200px #ede4d3,
    1240px 230px #ede4d3, 1330px 190px #ede4d3, 1420px 240px #ede4d3, 1510px 210px #ede4d3,
    1600px 250px #ede4d3, 1690px 200px #ede4d3, 1780px 230px #ede4d3, 1870px 190px #ede4d3,
    90px 320px #ede4d3, 180px 360px #ede4d3, 270px 300px #ede4d3, 360px 340px #ede4d3,
    450px 380px #ede4d3, 540px 310px #ede4d3, 630px 350px #ede4d3, 720px 390px #ede4d3,
    810px 300px #ede4d3, 900px 340px #ede4d3, 990px 380px #ede4d3, 1080px 320px #ede4d3,
    1170px 360px #ede4d3, 1260px 310px #ede4d3, 1350px 350px #ede4d3, 1440px 390px #ede4d3,
    1530px 300px #ede4d3, 1620px 340px #ede4d3, 1710px 380px #ede4d3, 1800px 320px #ede4d3;
  animation: twinkle 3.6s ease-in-out infinite;
}
/* Brighter, larger, slower twinkle */
.scene .stars .s2 {
  width: 3px; height: 3px;
  box-shadow:
    150px 80px oklch(0.94 0.05 90), 480px 40px oklch(0.94 0.05 90),
    820px 110px oklch(0.94 0.05 90), 1100px 60px oklch(0.94 0.05 90),
    1370px 130px oklch(0.94 0.05 90), 1700px 50px oklch(0.94 0.05 90),
    220px 250px oklch(0.94 0.05 90), 580px 280px oklch(0.94 0.05 90),
    950px 230px oklch(0.94 0.05 90), 1280px 270px oklch(0.94 0.05 90),
    1620px 240px oklch(0.94 0.05 90);
  animation: twinkle 5.2s ease-in-out 1.3s infinite;
}
/* Coloured stars — accent + blue, very few */
.scene .stars .s3 {
  width: 3px; height: 3px;
  box-shadow:
    320px 130px var(--accent),
    1050px 180px var(--accent),
    1820px 160px var(--accent),
    1180px 310px var(--accent);
  animation: twinkle 4.4s ease-in-out 0.6s infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ─────────── Constellations ─────────── */
.constellations {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.constellation {
  position: absolute;
  width: var(--size, 100px);
  display: block;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  color: var(--cream);
  transform: translate(-50%, -50%);
}
.constellation svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.constellation .c-star {
  fill: oklch(0.96 0.04 90);
  opacity: 0.92;
  filter: drop-shadow(0 0 1.5px oklch(0.96 0.04 90 / 0.6));
  transition: opacity .3s ease, fill .3s ease, r .3s ease, filter .3s ease;
}
.constellation .c-star.is-blue {
  fill: var(--blue);
  filter: drop-shadow(0 0 3px var(--blue)) drop-shadow(0 0 6px oklch(0.82 0.18 232 / 0.6));
  animation: twinkle 4.4s ease-in-out 0.6s infinite;
}
.constellation:hover .c-star.is-blue,
.constellation:focus-visible .c-star.is-blue {
  fill: var(--blue);
  filter: drop-shadow(0 0 5px var(--blue)) drop-shadow(0 0 10px oklch(0.82 0.18 232 / 0.8));
  opacity: 1;
}
.constellation .c-lines {
  fill: none;
  stroke: oklch(0.86 0.10 60);
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .35s ease;
  filter: drop-shadow(0 0 1.5px oklch(0.86 0.10 60 / 0.5));
}
.constellation:hover .c-star,
.constellation:focus-visible .c-star {
  fill: var(--accent);
  opacity: 1;
  r: 1.9;
  filter: drop-shadow(0 0 3px var(--accent));
}
.constellation:hover .c-lines,
.constellation:focus-visible .c-lines {
  opacity: 0.75;
}
.constellation .c-name {
  position: absolute;
  left: 50%;
  top: calc(100% + 12px);
  transform: translateX(-50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
  text-shadow: 0 0 8px oklch(0.10 0.04 280), 0 0 14px oklch(0.10 0.04 280 / 0.6);
}
.constellation .c-name::before,
.constellation .c-name::after {
  content: "·";
  margin: 0 8px;
  color: var(--accent);
}
.constellation:hover .c-name,
.constellation:focus-visible .c-name {
  opacity: 1;
  transform: translateX(-50%) translateY(2px);
}
body.panel-open .constellations {
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
@media (max-width: 800px) {
  .constellations { display: none; }
}

/* Soft vignette to keep panel + corners readable */
body::after {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 30%, rgba(5, 8, 20, 0.55) 100%),
    radial-gradient(ellipse 60% 40% at 88% 22%, oklch(0.50 0.14 50 / 0.12), transparent 60%);
  pointer-events: none;
  z-index: 4;
}

.grain {
  position: fixed; inset: -50%;
  background-image: radial-gradient(rgba(237, 228, 211, 0.04) 1px, transparent 1.2px);
  background-size: 3px 3px;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
  animation: grain-drift 6s steps(8) infinite;
  opacity: 0.5;
}
@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ─────────── Status corners ─────────── */
.status {
  position: fixed;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim);
  z-index: 10;
  opacity: 0;
  animation: fade-in 1.4s ease 4.2s forwards;
}
.status a {
    text-decoration: none;
    color: inherit;
}
.status a:hover {
    color: #fdc495;
}
.status a.btn {
    padding:4px;color:#000000;
}
.status .dot {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  animation: pulse 2.4s ease-in-out infinite;
}
.status .sep { opacity: 0.35; margin: 0 8px; }
.status-tl { top: 32px; left: 36px; }
.status-bl { bottom: 32px; left: 36px; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}
@keyframes fade-in { to { opacity: 1; } }

/* ─────────── Centre inscription (visible only when no panel open) ─────────── */
.inscription {
  position: fixed;
  left: calc((100vw - var(--panel-right)) / 2);
  top: 50%;
  --insc-offset: clamp(40px, 18vh, 160px);
  transform: translate(-50%, calc(-50% + var(--insc-offset)));
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: clamp(22px, 3vw, 42px);
  color: var(--cream);
  opacity: 0;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-align: center;
  pointer-events: none;
  z-index: 8;
  animation: inscription-in 2s cubic-bezier(.2,.7,.2,1) 4.5s forwards;
  max-width: 580px;
  padding: 0 24px;
  transition: opacity .35s ease;
}
body.panel-open .inscription { opacity: 0 !important; }

/* ─────────── Throbber (shown in void area while a section loads) ─────────── */
.throbber {
  position: fixed;
  left: 48px;
  right: var(--panel-right);
  top: 64px;
  bottom: 64px;
  z-index: 22;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
body.loading .throbber { opacity: 1; }
body.loading .panel { opacity: 0 !important; pointer-events: none !important; }

.throbber-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
/* Three comic-panel squares extending out from centre on a rotating wheel */
.throbber-orbit {
  position: relative;
  width: 100px;
  height: 100px;
  animation: throb-spin 2.4s linear infinite;
}
.throbber-orbit .sq {
  position: absolute;
  left: 50%; top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px;
  border: 2px solid oklch(0.14 0.035 250);
  animation: throb-extend 1.6s ease-in-out infinite;
}
/* s1 (orange, top): blue light comes from bottom-right of the rotating frame */
.throbber-orbit .sq.s1 {
  background: var(--accent);
  --angle: 0deg;
  box-shadow:
    /* Hard navy shadow cast away from the blue light (up-left) */
    -4px -4px 0 0 oklch(0.14 0.035 250),
    /* Blue rim-light on the side facing s2 */
    inset -3px -3px 6px oklch(0.82 0.18 232 / 0.55);
}
/* s2 (blue, bottom-right): the light source — no cast shadow, glows outward */
.throbber-orbit .sq.s2 {
  background: oklch(0.86 0.14 232);
  --angle: 120deg;
  animation-delay: 0.53s;
  border-color: oklch(0.92 0.08 232);
  box-shadow:
    /* Inner highlight \u2014 looks lit from inside */
    inset 0 0 5px oklch(1 0 0 / 0.7),
    /* Outer glow stack */
    0 0 10px 1px oklch(0.82 0.18 232 / 0.85),
    0 0 24px 6px oklch(0.82 0.18 232 / 0.55),
    0 0 48px 12px oklch(0.82 0.18 232 / 0.25);
}
/* s3 (cream, bottom-left): blue light comes from its right */
.throbber-orbit .sq.s3 {
  background: var(--cream);
  --angle: 240deg;
  animation-delay: 1.06s;
  box-shadow:
    /* Hard navy shadow cast left, away from the blue light */
    -5px 1px 0 0 oklch(0.14 0.035 250),
    /* Blue rim-light on the right edge facing s2 */
    inset -4px 0 7px oklch(0.82 0.18 232 / 0.5);
}

@keyframes throb-spin { to { transform: rotate(360deg); } }
/* Each square sits on a spoke and extends along it; the inner counter-rotate
   keeps the comic square axis-aligned so the offset shadow stays bottom-right */
@keyframes throb-extend {
  0%, 100% { transform: rotate(var(--angle)) translateY(-8px)  rotate(calc(var(--angle) * -1)); }
  50%      { transform: rotate(var(--angle)) translateY(-44px) rotate(calc(var(--angle) * -1)); }
}

.throbber-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream-dim);
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.throbber-label .bars {
  display: inline-block;
  width: 60px;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.throbber-label .name {
  color: var(--blue);
}
.inscription .small {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-top: 28px;
}
@keyframes inscription-in {
  0%   { opacity: 0; transform: translate(-50%, calc(-50% + var(--insc-offset) + 20px)); }
  100% { opacity: 1; transform: translate(-50%, calc(-50% + var(--insc-offset))); }
}

/* ─────────── Disc ─────────── */
.disc {
  position: fixed;
  top: var(--logo-top);
  right: var(--logo-right);
  width: var(--logo-size);
  height: var(--logo-size);
  border-radius: 50%;
  /* Logo provides its own fill + ring; keep background transparent */
  background: transparent;
  box-shadow:
    0 30px 80px -10px oklch(0.72 0.18 45 / 0.28),
    0 0 0 1px oklch(0.86 0.09 60 / 0.08);
  z-index: 40;
  opacity: 0;
  transform:
    translate(
      calc(-50vw + (var(--logo-size) / 2) + var(--logo-right)),
      calc(50vh - (var(--logo-size) / 2) - var(--logo-top))
    )
    scale(1.4);
  animation:
    disc-fade 1.1s ease 0.6s forwards,
    disc-settle 1.7s cubic-bezier(.7, 0, .15, 1) 2.6s forwards;
  cursor: pointer;
}
.disc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  animation: mark-in 0.9s ease 1.4s forwards;
}
@keyframes disc-fade { to { opacity: 1; } }
@keyframes disc-settle { to { transform: translate(0, 0) scale(1); } }
@keyframes mark-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Deep-link: disc is already in position; blades come in right away ── */
body.deep-link .disc {
    transform: translate(0, 0) scale(1);
    animation: disc-fade 0.5s ease 0.1s forwards;
}
body.deep-link .disc-img {
    animation: mark-in 0.5s ease 0.25s forwards;
}
body.deep-link .disc-pulse {
    animation: pulse-ring 3.6s ease-out 1.2s infinite;
}
body.deep-link .blade:nth-child(1) { animation: blade-in 0.7s cubic-bezier(.6, 0, .15, 1) 0.3s  forwards; }
body.deep-link .blade:nth-child(2) { animation: blade-in 0.7s cubic-bezier(.6, 0, .15, 1) 0.45s forwards; }
body.deep-link .blade:nth-child(3) { animation: blade-in 0.7s cubic-bezier(.6, 0, .15, 1) 0.6s  forwards; }

/* breathing pulse */
.disc-pulse {
  position: fixed;
  top: var(--logo-top);
  right: var(--logo-right);
  width: var(--logo-size);
  height: var(--logo-size);
  border-radius: 50%;
  border: 1px solid oklch(0.72 0.18 45 / 0.7);
  z-index: 35;
  opacity: 0;
  pointer-events: none;
  animation: pulse-ring 3.6s ease-out 5s infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ─────────── Menu blades ─────────── */
.menu {
  position: fixed;
  top: var(--logo-top);
  right: var(--logo-right);
  width: var(--logo-size);
  height: var(--logo-size);
  z-index: 30; /* below disc so right tips get clipped */
  pointer-events: none;
}
.blade {
  position: absolute;
  width: var(--blade-w);
  height: var(--blade-h);
  /* Cream surface with diagonal comic hatching */
  background-color: var(--cream);
  background-image: repeating-linear-gradient(
    135deg,
    oklch(0.14 0.035 250 / 0.10) 0 1.5px,
    transparent 1.5px 9px
  );
  color: var(--ink);
  right: calc(var(--logo-size) / 2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--logo-size) / 2 + 24px) 0 22px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
  transform: translateX(calc(var(--blade-w) - var(--logo-size) + 40px));
  pointer-events: auto;
  cursor: pointer;
  transition:
    transform 0.45s cubic-bezier(.2, .7, .2, 1),
    background-color 0.3s ease,
    color 0.3s ease,
    letter-spacing 0.45s cubic-bezier(.2, .7, .2, 1),
    box-shadow 0.3s ease;
  /* Comic-panel border: thick navy stroke + offset blue shadow */
  border: 2.5px solid oklch(0.14 0.035 250);
  box-shadow:
    4px 4px 0 0 var(--blue),
    4px 4px 0 2.5px oklch(0.14 0.035 250);
  will-change: transform, opacity;
}
/* Subtle gradient overlay on the right tip so it reads as "behind" the disc */
.blade::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    transparent 80%,
    oklch(0.14 0.035 250 / 0.10) 100%);
  pointer-events: none;
}
.blade .num {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  color: oklch(0.14 0.035 250 / 0.55);
  letter-spacing: 0.12em;
  position: relative;
}
.blade .label { position: relative; z-index: 1; white-space: nowrap; }

/* 3 blades centred on disc — spaced for the chunky comic borders.
   Each blade is 46h + 5px shadow offset = ~51 visual; gap 18 keeps shadows clear.
   3 × 46 + 2 × 18 = 174 → start at top: (200 - 174) / 2 = 13 */
.blade:nth-child(1) { top: 13px;  animation: blade-in 1.1s cubic-bezier(.6, 0, .15, 1) 3.6s forwards; }
.blade:nth-child(2) { top: 77px;  animation: blade-in 1.1s cubic-bezier(.6, 0, .15, 1) 3.78s forwards; }
.blade:nth-child(3) { top: 141px; animation: blade-in 1.1s cubic-bezier(.6, 0, .15, 1) 3.96s forwards; }

@keyframes blade-in {
  0%   { transform: translateX(calc(var(--blade-w) - var(--logo-size) + 40px)); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

.blade:hover {
  transform: translateX(-22px);
  letter-spacing: 0.28em;
  box-shadow:
    6px 6px 0 0 var(--blue),
    6px 6px 0 2.5px oklch(0.14 0.035 250);
}
.blade:hover .num { color: oklch(0.14 0.035 250 / 0.85); }
.blade.is-active {
  background-color: var(--accent);
  color: oklch(0.14 0.035 250);
  transform: translateX(-22px);
  box-shadow:
    6px 6px 0 0 var(--blue),
    6px 6px 0 2.5px oklch(0.14 0.035 250);
}
.blade.is-active .num { color: oklch(0.14 0.035 250 / 0.75); }

/* ─────────── Bsky link ─ light blue, faded until hover ─────────── */
.bsky {
  position: fixed;
  top: calc(var(--logo-top) + var(--logo-size) + -5px);
  right: calc(var(--logo-right) + 8px);
  z-index: 30;
  color: var(--blue);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  animation: bsky-in 1.4s ease 4.6s forwards;
  transition: opacity .3s ease, transform .3s ease, filter .3s ease;
  cursor: pointer;
  filter: saturate(0.85);
}
@keyframes bsky-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 0.6; transform: translateY(0); }
}
.bsky:hover {
  opacity: 1;
  transform: translateY(-2px);
  filter: saturate(1) drop-shadow(0 0 12px oklch(0.82 0.12 232 / 0.4));
}
.bsky .lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* ─────────── Black hole + CRT (bottom right) ─────────── */
/* Sponsored / affiliate rail — sits in the right gutter above the SYRSLY'S PC
   button. Only shows while a panel is open, and only on wide screens. */
.ad-rail {
  position: fixed;
  right: 64px;
  bottom: 268px;
  width: 200px;
  z-index: 14;
  display: none;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 1200px) {
  body.panel-open .ad-rail { display: flex; }
}
.ad-rail-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-dim);
  text-align: right;
}
.ad-rail .ad-slot { display: block; width: 100%; }
.ad-rail .ad-slot img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid oklch(0.14 0.035 250);
  box-shadow: 4px 4px 0 0 var(--blue), 4px 4px 0 2px oklch(0.14 0.035 250);
}
.ad-rail .ad-slot.is-placeholder {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--cream-dim);
  border-radius: 2px;
  color: var(--cream-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.portal {
  position: fixed;
  right: 64px;
  bottom: 64px;
  width: 180px;
  height: 180px;
  z-index: 15;
  text-decoration: none;
  color: var(--cream);
  display: block;
  opacity: 0;
  animation: fade-in 1.4s ease 4.8s forwards;
  cursor: pointer;
}
.portal .field {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  pointer-events: none;
}
/* Outer faint accretion */
.portal .field::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0%,
    rgba(237, 228, 211, 0.05) 15%,
    transparent 30%,
    rgba(237, 228, 211, 0.12) 50%,
    transparent 70%,
    rgba(237, 228, 211, 0.07) 85%,
    transparent 100%);
  filter: blur(8px);
  animation: spin 22s linear infinite;
}
/* Inner sharper swirl */
.portal .field::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: conic-gradient(from 180deg,
    transparent 0%,
    rgba(237, 228, 211, 0.18) 20%,
    transparent 40%,
    rgba(237, 228, 211, 0.08) 60%,
    transparent 80%,
    rgba(237, 228, 211, 0.22) 95%,
    transparent 100%);
  filter: blur(3px);
  animation: spin 9s linear infinite reverse;
}
/* Event horizon — dark core */
.portal .core {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      #000 0%,
      #000 38%,
      rgba(0,0,0,0.85) 60%,
      rgba(0,0,0,0.5) 80%,
      transparent 100%);
  box-shadow:
    0 0 40px 8px rgba(0,0,0,0.9),
    inset 0 0 20px 4px rgba(237, 228, 211, 0.1);
}
/* Photon ring */
.portal .ring {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(237, 228, 211, 0.15);
  box-shadow: 0 0 12px rgba(237, 228, 211, 0.1);
}
.portal .crt {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  width: 84px;
  z-index: 2;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8));
  animation: crt-warp 5.5s ease-in-out infinite;
}
/* CRT distortion overlay — sits exactly over the screen rect of the SVG */
.portal .crt-fx {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, calc(-50% - 4px));
  width: 60px;
  height: 36px;
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
}
/* Rolling scanlines */
.portal .crt-fx::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(159, 220, 183, 0.22) 0,
    rgba(159, 220, 183, 0.22) 0.6px,
    transparent 0.6px,
    transparent 2px
  );
  animation: scan-drift 2.8s linear infinite;
}
/* Periodic horizontal roll bar (CRT sync drift) */
.portal .crt-fx::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 12px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(159, 220, 183, 0.05) 35%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(159, 220, 183, 0.05) 65%,
    transparent 100%
  );
  animation: crt-roll 5s ease-in-out infinite;
  opacity: 0;
}
@keyframes scan-drift {
  from { transform: translateY(-4px); }
  to   { transform: translateY(0); }
}
@keyframes crt-roll {
  0%   { top: -14px; opacity: 0; }
  8%   { opacity: 0.9; }
  92%  { opacity: 0.9; }
  100% { top: 36px; opacity: 0; }
}
/* Subtle CRT body warp — scanline pinch, very small */
@keyframes crt-warp {
  0%, 100% { transform: translate(-50%, -50%) scale(1, 1) skewX(0deg); }
  46%      { transform: translate(-50%, -50%) scale(1, 0.998) skewX(0deg); }
  50%      { transform: translate(-50%, -50%) scale(1.004, 0.992) skewX(0.25deg); }
  54%      { transform: translate(-50%, -50%) scale(1, 0.998) skewX(0deg); }
  72%      { transform: translate(-50%, -50%) scale(1, 1); }
  74%      { transform: translate(-50%, -50%) scale(1.002, 0.996) skewX(-0.15deg); }
  76%      { transform: translate(-50%, -50%) scale(1, 1); }
}
/* On hover — speed up the warp & scanlines */
.portal:hover .crt        { animation-duration: 2.2s; }
.portal:hover .crt-fx::before { animation-duration: 1.4s; }
.portal:hover .crt-fx::after  { animation-duration: 2.2s; }
.portal:hover .field::after   { animation-duration: 4s; }

.portal .label {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream-dim);
  white-space: nowrap;
  transition: color .25s ease;
}
.portal:hover .label { color: var(--cream); }
.portal .label::before { content: "← "; opacity: 0.5; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ─────────── Content panel — comic-panel treatment ─────────── */
.panel {
  position: fixed;
  left: 48px;
  right: var(--panel-right);
  top: 64px;
  bottom: 64px;
  background-color: var(--cream);
  background-image: repeating-linear-gradient(
    135deg,
    oklch(0.14 0.035 250 / 0.05) 0 1.5px,
    transparent 1.5px 12px
  );
  color: var(--ink);
  border: 3px solid oklch(0.14 0.035 250);
  border-radius: 0;
  box-shadow:
    8px 8px 0 0 var(--blue),
    8px 8px 0 3px oklch(0.14 0.035 250),
    0 40px 100px -20px rgba(0, 0, 0, 0.6);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-32px) scale(0.985);
  transition:
    opacity .55s cubic-bezier(.2,.7,.2,1),
    transform .55s cubic-bezier(.2,.7,.2,1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.panel-open .panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}
.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 40px 48px 18px;
  flex-shrink: 0;
}
.panel-head > div:first-child {
  flex: 1;
  min-width: 0;
}
.panel-head h1 {
  white-space: nowrap;
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: 1;
  margin: 0 0 8px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.panel-head .crumb {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(10, 9, 8, 0.45);
  margin-bottom: 16px;
}
.panel-head.no-chrome { padding: 14px 20px; justify-content: flex-end; }
.panel-close {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(10, 9, 8, 0.15);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
  flex-shrink: 0;
  margin-top: 6px;
}
.panel-close:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  transform: rotate(90deg);
}
.panel-close svg { width: 14px; height: 14px; }

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 48px 48px;
  scrollbar-width: thin;
  scrollbar-color: rgba(10,9,8,0.2) transparent;
}
.panel-body::-webkit-scrollbar { width: 6px; }
.panel-body::-webkit-scrollbar-thumb { background: rgba(10,9,8,0.2); border-radius: 3px; }

/* Switching sections */
.section { display: none; animation: section-in .5s ease both; }
.section.is-active { display: block; }
@keyframes section-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* About */
.about-lede {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 56ch;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 40px;
  align-items: start;
}
.about-grid p {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 56ch;
}
.about-photo {
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(135deg,
      rgba(10,9,8,0.06) 0 6px,
      transparent 6px 12px),
    var(--cream-2);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(10,9,8,0.55);
  text-align: center;
}
.meta-list {
  margin-top: 16px;
  list-style: none;
  padding: 0;
  border-top: 1px solid rgba(10,9,8,0.12);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.meta-list li {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(10,9,8,0.08);
}
.meta-list .k { color: rgba(10,9,8,0.55); text-transform: uppercase; letter-spacing: 0.2em; font-size: 10px; }
.meta-list .v { color: var(--ink); }

/* ───── Blog ─ index grid + post detail ───── */
.blog-view { display: none; }
.blog-view.is-active { display: block; animation: section-in .45s ease both; }

/* Index */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}
.blog-card {
  text-decoration: none;
  color: var(--ink);
  background: var(--cream-2);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
  cursor: pointer;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -12px rgba(10, 14, 26, 0.5);
}
.blog-card-thumb {
  aspect-ratio: 4 / 3;
  position: relative;
  border-bottom: 1px solid rgba(10, 9, 8, 0.1);
}
.blog-card-thumb .kind {
  position: absolute;
  left: 12px; top: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink);
  background: oklch(0.86 0.09 60 / 0.85);
  padding: 4px 8px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.blog-card-body {
  padding: 16px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-card-meta {
  display: flex;
  justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(10, 9, 8, 0.55);
  margin-bottom: 8px;
}
.blog-card h3 {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.blog-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Thumbnail variants — reused on index cards + latest sidebar squares */
.t-1 { background: linear-gradient(135deg, oklch(0.80 0.13 60), oklch(0.55 0.16 35)); }
.t-2 { background: repeating-linear-gradient(45deg, oklch(0.72 0.13 45) 0 14px, oklch(0.55 0.14 30) 14px 28px); }
.t-3 { background: radial-gradient(circle at 30% 40%, oklch(0.86 0.10 65), oklch(0.50 0.16 32) 80%); }
.t-4 { background: conic-gradient(from 45deg, oklch(0.74 0.12 50), oklch(0.45 0.14 25), oklch(0.74 0.12 50)); }
.t-5 { background: linear-gradient(180deg, oklch(0.86 0.09 60) 0%, oklch(0.55 0.15 35) 60%, oklch(0.28 0.06 30) 100%); }
.t-6 { background: repeating-radial-gradient(circle at 50% 50%, oklch(0.74 0.12 50) 0 10px, oklch(0.50 0.14 30) 10px 20px); }

/* Detail */
.blog-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: rgba(10, 9, 8, 0.55);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 28px;
  cursor: pointer;
  transition: color .2s ease, padding-left .2s ease;
}
.blog-back:hover { color: var(--ink); padding-left: 4px; }

.blog-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 44px;
  align-items: start;
}
.post-meta {
  display: flex;
  gap: 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(10, 9, 8, 0.55);
  margin-bottom: 14px;
}
.post-title {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.05;
  margin: 0 0 26px;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.post-body {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.7;
  max-width: none;
}
.post-body p { margin: 0 0 18px; }
.post-body p:first-of-type::first-letter {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 3.4em;
  line-height: 0.85;
  float: left;
  margin: 4px 10px 0 0;
  color: var(--ink);
}
.post-body h3 {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 22px;
  margin: 28px 0 12px;
  color: var(--ink);
}

/* Game constellation lead */
.game-constellation {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.game-constellation .label {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 9px;
  color: rgba(10, 9, 8, 0.45);
  margin-right: 8px;
}

/* Post tags — pill buttons */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 28px 0 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(10, 9, 8, 0.12);
}
.post-tags-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(10, 9, 8, 0.5);
  margin-right: 2px;
}
.post-tag {
  display: inline-block;
  text-decoration: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ink);
  background: var(--cream-3);
  border: 1px solid rgba(10, 9, 8, 0.16);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease;
}
.post-tag:hover {
  background: var(--accent);
  color: var(--cream);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -6px rgba(10, 14, 26, 0.5);
}

/* Comments */
.comments {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(10, 9, 8, 0.12);
}
.comments-title {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 22px;
  margin: 0 0 14px;
  color: var(--ink);
}
.comments-head { margin-bottom: 10px; }
.comments-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(10, 9, 8, 0.5);
}
.comment-list { list-style: none; margin: 0 0 20px; padding: 0; }
.comment {
  padding: 12px 0;
  border-bottom: 1px solid rgba(10, 9, 8, 0.08);
}
.comment.is-reply { margin-left: 22px; border-left: 2px solid rgba(10, 9, 8, 0.12); padding-left: 14px; }
.comment-meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.comment-author { font-weight: 500; color: var(--ink); font-size: 14px; }
.comment-author a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted currentColor; }
.comment-date {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(10, 9, 8, 0.45);
}
.comment-body { color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.comment-empty { color: var(--ink-2); font-style: italic; padding: 8px 0; }
.comment-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 72px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: oklch(0.90 0.06 70);
  border: 1px solid rgba(10, 9, 8, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
}
.comment-form textarea:focus { outline: none; border-color: var(--accent); }
.comment-form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.comment-form-error { color: oklch(0.5 0.18 25); font-size: 12px; }
.comment-form-error.is-pending { color: var(--ink-2); }
.comment-login-cta { margin-top: 8px; }

/* Comment reply button + inline reply form */
.comment-reply-btn {
  background: none; border: none; padding: 0; margin-top: 6px;
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(10, 9, 8, 0.5); cursor: pointer;
}
.comment-reply-btn:hover { color: var(--accent); }
.comment-reply-row { list-style: none; margin: 8px 0 10px 22px; }
.comment-reply-form .reply-input {
  width: 100%; resize: vertical; min-height: 56px; font: inherit; font-size: 14px;
  color: var(--ink); background: oklch(0.90 0.06 70);
  border: 1px solid rgba(10, 9, 8, 0.18); border-radius: 10px; padding: 9px 11px;
}
.comment-reply-form .reply-input:focus { outline: none; border-color: var(--accent); }
.reply-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.reply-actions .reply-error { margin-right: auto; font-size: 12px; }

/* User panel tabs (top-right of the panel head) */
.user-tabs { display: flex; gap: 6px; margin-left: auto; margin-right: 14px; flex-wrap: wrap; }
.user-tab-btn {
  background: transparent; border: 1px solid rgba(10, 9, 8, 0.18); color: var(--ink-2);
  border-radius: 999px; padding: 6px 13px; cursor: pointer;
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}
.user-tab-btn:hover { color: var(--ink); }
.user-tab-btn.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.user-tabpanel { display: none; }
.user-tabpanel.is-active { display: block; }

/* Notification toggle row */
.notify-row { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--ink-2); font-size: 14px; }
.notify-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex: none; }

/* Small muted helper note under a form field */
.field-note { display: block; margin-top: 5px; font-size: 11px; color: rgba(10, 9, 8, 0.5); }

.site-notice {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: var(--void-2);
  color: var(--cream);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid oklch(0.86 0.09 60 / 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
  z-index: 4000;
}
.site-notice.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }
.logout-card .modal-lede { margin-bottom: 18px; }

/* Latest sidebar */
.latest-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(10, 9, 8, 0.45);
  margin-bottom: 14px;
}
.latest-squares {
  display: grid;
  gap: 12px;
}
.latest-square {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  display: block;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.latest-square:hover { transform: scale(1.03); }
.latest-square::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, oklch(0.14 0.035 250 / 0.88) 100%);
}
.latest-square .latest-title {
  position: absolute;
  left: 14px; right: 14px; bottom: 12px;
  z-index: 1;
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.15;
  color: var(--cream);
  letter-spacing: -0.005em;
}
.latest-square .latest-date {
  position: absolute;
  left: 12px; top: 12px;
  z-index: 1;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--ink);
  background: oklch(0.86 0.09 60 / 0.85);
  padding: 3px 7px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

@media (max-width: 960px) {
  .blog-detail-grid { grid-template-columns: 1fr; gap: 28px; }
  .latest-squares { grid-template-columns: repeat(2, 1fr); }
}

/* Content grid */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.content-card {
  background: var(--cream-2);
  border-radius: 14px;
  padding: 18px;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: var(--ink);
  transition: transform .3s ease, background .3s ease;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.content-card:hover {
  transform: translateY(-3px);
  background: var(--cream-3);
}
.content-card .thumb {
  flex: 1;
  margin: -18px -18px 14px;
  background:
    repeating-linear-gradient(45deg,
      rgba(10,9,8,0.05) 0 8px,
      transparent 8px 16px),
    var(--cream-3);
  border-bottom: 1px solid rgba(10,9,8,0.1);
  position: relative;
}
.content-card .thumb::after {
  content: attr(data-kind);
  position: absolute;
  left: 18px; top: 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(10,9,8,0.55);
}
.content-card h3 {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.1;
  margin: 0 0 6px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.content-card .meta {
  display: flex; justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(10,9,8,0.55);
}

/* ─────────── Replay button ─────────── */
.replay {
  position: fixed;
  bottom: 32px;
  left: 36px;
  background: transparent;
  border: 1px solid rgba(237, 228, 211, 0.18);
  color: var(--cream-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  z-index: 50;
  opacity: 0;
  animation: fade-in 1.2s ease 5s forwards;
  transition: color .2s ease, border-color .2s ease, background .2s ease, opacity .25s ease;
}
.replay:hover {
  color: var(--cream);
  border-color: rgba(237, 228, 211, 0.45);
  background: rgba(237, 228, 211, 0.04);
}
.replay::before {
  content: "↻";
  margin-right: 7px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  vertical-align: -1px;
}
body.panel-open .replay { opacity: 0; pointer-events: none; }

/* ─────────── User bar (top-right, left of disc) ─────────── */
.user-bar {
  position: fixed;
  top: 5px;
  right: 32px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: fade-in 1.2s ease 4.7s forwards;
}
/* Logged-out: small comic-panel pill linking to login */
.login-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 14px;
  background-color: var(--cream);
  background-image: repeating-linear-gradient(
    135deg,
    oklch(0.14 0.035 250 / 0.10) 0 1.5px,
    transparent 1.5px 9px
  );
  color: var(--ink);
  text-decoration: none;
  border: 2px solid oklch(0.14 0.035 250);
  box-shadow:
    3px 3px 0 0 var(--blue),
    3px 3px 0 2px oklch(0.14 0.035 250);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.login-link:hover {
  transform: translate(-2px, -2px);
  background-color: var(--accent);
  box-shadow:
    5px 5px 0 0 var(--blue),
    5px 5px 0 2px oklch(0.14 0.035 250);
}
.login-link::before {
  content: "";
  width: 10px; height: 10px;
  border: 1.6px solid oklch(0.14 0.035 250);
  border-radius: 50%;
  background: var(--blue);
  box-shadow: inset 0 0 0 1.5px var(--cream);
}

/* Logged-in: avatar (64×64) + handle pill */
.user-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.user-avatar {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: var(--cream-2);
  border: 2.5px solid oklch(0.14 0.035 250);
  box-shadow:
    4px 4px 0 0 var(--blue),
    4px 4px 0 2.5px oklch(0.14 0.035 250);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
  overflow: hidden;
}
.user-avatar svg, .user-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.user-chip:hover .user-avatar {
  transform: translate(-2px, -2px);
  box-shadow:
    6px 6px 0 0 var(--blue),
    6px 6px 0 2.5px oklch(0.14 0.035 250);
}
.handle-pill {
  background-color: var(--cream);
  background-image: repeating-linear-gradient(
    135deg,
    oklch(0.14 0.035 250 / 0.10) 0 1.5px,
    transparent 1.5px 9px
  );
  color: var(--ink);
  padding: 8px 14px;
  border: 2px solid oklch(0.14 0.035 250);
  box-shadow:
    3px 3px 0 0 var(--blue),
    3px 3px 0 2px oklch(0.14 0.035 250);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.1;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.handle-pill .handle-name { font-weight: 600; letter-spacing: 0.12em; font-size: 12px; }
.handle-pill .handle-meta {
  font-size: 8.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(10,9,8,0.55);
}
.user-chip:hover .handle-pill {
  transform: translate(-2px, -2px);
  box-shadow:
    5px 5px 0 0 var(--blue),
    5px 5px 0 2px oklch(0.14 0.035 250);
}

/* hide login bar while panel-open and other UI is dimmed? keep visible. but hide while loading throbber */
body.loading .user-bar { opacity: 0.2; pointer-events: none; }

/* ─────────── Modal overlay (login / signup / user) ─────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, oklch(0.10 0.04 280 / 0.45), oklch(0.06 0.03 280 / 0.78)),
    oklch(0.06 0.03 280 / 0.55);
  backdrop-filter: blur(3px) saturate(1.1);
  -webkit-backdrop-filter: blur(3px) saturate(1.1);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s cubic-bezier(.2,.7,.2,1);
}
.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.modal-card {
  width: min(520px, 100%);
  max-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  background-color: var(--cream);
  background-image: repeating-linear-gradient(
    135deg,
    oklch(0.14 0.035 250 / 0.05) 0 1.5px,
    transparent 1.5px 12px
  );
  color: var(--ink);
  border: 3px solid oklch(0.14 0.035 250);
  box-shadow:
    8px 8px 0 0 var(--blue),
    8px 8px 0 3px oklch(0.14 0.035 250),
    0 40px 100px -20px rgba(0, 0, 0, 0.6);
  transform: translateY(14px) scale(.985);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.modal-overlay.is-open .modal-card {
  transform: translateY(0) scale(1);
}
.modal-card.user-card {
  width: min(820px, 100%);
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 28px 32px 8px;
}
.modal-head .crumb {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(10, 9, 8, 0.45);
  margin-bottom: 6px;
}
.modal-head h2 {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.modal-close {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(10, 9, 8, 0.18);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
  flex-shrink: 0;
  margin-top: 2px;
}
.modal-close:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  transform: rotate(90deg);
}
.modal-close svg { width: 12px; height: 12px; }

.modal-body {
  padding: 8px 32px 30px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(10,9,8,0.2) transparent;
}
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-thumb { background: rgba(10,9,8,0.2); border-radius: 3px; }

.modal-lede {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 8px;
  max-width: 44ch;
}
.modal-perks {
  list-style: none;
  margin: 14px 0 22px;
  padding: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  border-top: 1px dashed rgba(10,9,8,0.22);
  border-bottom: 1px dashed rgba(10,9,8,0.22);
  padding: 12px 0;
}
.modal-perks li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
}
.modal-perks li::before {
  content: "▸";
  color: var(--accent);
  font-size: 12px;
}

/* Form fields */
.field-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.field-row label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(10,9,8,0.6);
}
.field-row .input-wrap {
  position: relative;
}
.field-row input[type="text"],
.field-row input[type="email"],
.field-row input[type="password"] {
  width: 100%;
  background: oklch(0.92 0.06 60);
  color: var(--ink);
  border: 2px solid oklch(0.14 0.035 250);
  box-shadow: 2px 2px 0 0 oklch(0.14 0.035 250 / 0.25);
  padding: 11px 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  outline: none;
  transition: box-shadow .15s ease, background .15s ease, border-color .15s ease;
  border-radius: 0;
}
.field-row input::placeholder {
  color: rgba(10,9,8,0.35);
  letter-spacing: 0.08em;
}
.field-row input:focus {
  background: var(--cream);
  box-shadow: 3px 3px 0 0 var(--blue), 3px 3px 0 2px oklch(0.14 0.035 250);
  transform: translate(-1px, -1px);
}
.field-row.has-error input {
  border-color: oklch(0.55 0.20 25);
  background: oklch(0.94 0.08 35);
  box-shadow: 2px 2px 0 0 oklch(0.55 0.20 25);
}
.field-error {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: oklch(0.50 0.20 25);
  margin-top: 2px;
  display: none;
  align-items: center;
  gap: 6px;
}
.field-error::before {
  content: "!";
  display: inline-flex;
  width: 14px; height: 14px;
  align-items: center; justify-content: center;
  background: oklch(0.55 0.20 25);
  color: var(--cream);
  border-radius: 50%;
  font-weight: 700;
  font-size: 9px;
}
.field-row.has-error .field-error { display: inline-flex; }

.form-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  background-color: var(--accent);
  background-image: repeating-linear-gradient(
    135deg,
    oklch(0.14 0.035 250 / 0.10) 0 1.5px,
    transparent 1.5px 9px
  );
  color: oklch(0.14 0.035 250);
  text-decoration: none;
  border: 2.5px solid oklch(0.14 0.035 250);
  box-shadow:
    4px 4px 0 0 var(--blue),
    4px 4px 0 2.5px oklch(0.14 0.035 250);
  font-family: "Space Grotesk", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease;
}
.btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow:
    6px 6px 0 0 var(--blue),
    6px 6px 0 2.5px oklch(0.14 0.035 250);
}
.btn-primary:active {
  transform: translate(1px, 1px);
  box-shadow:
    2px 2px 0 0 var(--blue),
    2px 2px 0 2.5px oklch(0.14 0.035 250);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: none;
  padding: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: var(--accent);
}
.btn-ghost:hover { color: var(--accent); }

.auth-secondary-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.form-banner {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 2px 0 14px;
  padding: 10px 14px;
  border: 2px solid oklch(0.55 0.20 25);
  background: oklch(0.94 0.08 35);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: oklch(0.40 0.20 25);
  box-shadow: 3px 3px 0 0 oklch(0.55 0.20 25);
}
.form-banner.is-shown { display: flex; }
.form-banner::before {
  content: "TRANSMISSION FAILED";
  display: inline-flex;
  align-items: center; justify-content: center;
  padding: 2px 6px;
  background: oklch(0.55 0.20 25);
  color: var(--cream);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  flex-shrink: 0;
}

.form-toggle {
  display: flex;
  background: oklch(0.92 0.06 60);
  border: 2px solid oklch(0.14 0.035 250);
  box-shadow: 3px 3px 0 0 oklch(0.14 0.035 250 / 0.3);
  margin: 6px 0 22px;
}
.form-toggle button {
  flex: 1;
  background: transparent;
  border: none;
  padding: 10px 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.form-toggle button.is-active {
  background: oklch(0.14 0.035 250);
  color: var(--cream);
}

/* ─────────── User panel (account management) ─────────── */
.user-panel-grid {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 22px;
}
.user-panel-grid .current-avatar {
  width: 100px;
  height: 100px;
  border: 2.5px solid oklch(0.14 0.035 250);
  box-shadow:
    5px 5px 0 0 var(--blue),
    5px 5px 0 2.5px oklch(0.14 0.035 250);
  background: var(--cream-2);
  overflow: hidden;
  image-rendering: pixelated;
}
.user-panel-grid .current-avatar svg,
.user-panel-grid .current-avatar img {
  display: block;
  width: 100%; height: 100%;
  image-rendering: pixelated;
}
.user-panel-grid .who h3 {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  margin: 4px 0 8px;
  color: var(--ink);
}
.user-panel-grid .who .who-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--ink-2);
  text-transform: lowercase;
}
.user-panel-grid .who .since {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(10,9,8,0.5);
  margin-top: 6px;
}

/* Sections inside user panel */
.panel-section {
  border-top: 2px solid oklch(0.14 0.035 250);
  padding-top: 18px;
  margin-top: 18px;
}
.panel-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.panel-section-head h4 {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 20px;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.panel-section-head .tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(10,9,8,0.55);
}

/* Twitch card */
.twitch-card {
  background: oklch(0.92 0.07 290);
  border: 2.5px solid oklch(0.14 0.035 250);
  box-shadow: 4px 4px 0 0 oklch(0.65 0.20 305), 4px 4px 0 2.5px oklch(0.14 0.035 250);
  padding: 16px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}
.twitch-card .tw-mark {
  width: 40px; height: 44px;
  background: oklch(0.55 0.20 305);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid oklch(0.14 0.035 250);
  box-shadow: 2px 2px 0 oklch(0.14 0.035 250);
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
}
.twitch-card .tw-mark svg { width: 22px; height: 22px; fill: var(--cream); }
.twitch-card .tw-info .tw-status-line {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 8px;
}
.twitch-card .tw-info .tw-status-line .dot-tw {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: oklch(0.55 0.18 25);
}
.twitch-card.is-linked .tw-info .tw-status-line .dot-tw {
  background: oklch(0.65 0.18 145);
  box-shadow: 0 0 8px oklch(0.65 0.18 145 / 0.6);
}
.twitch-card .tw-info .tw-handle {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  margin-top: 4px;
  color: var(--ink);
}
.twitch-card .tw-action {
  background: oklch(0.14 0.035 250);
  color: var(--cream);
  border: 2px solid oklch(0.14 0.035 250);
  box-shadow: 2px 2px 0 0 oklch(0.65 0.20 305);
  padding: 9px 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.twitch-card .tw-action:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 0 oklch(0.65 0.20 305);
}
.twitch-card.is-linked .tw-action {
  background: var(--cream);
  color: var(--ink);
  box-shadow: 2px 2px 0 0 oklch(0.55 0.20 25);
}
.twitch-card.is-linked .tw-action:hover {
  box-shadow: 4px 4px 0 0 oklch(0.55 0.20 25);
}

/* Chat points */
.points-card {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: oklch(0.95 0.06 60);
  border: 2px solid oklch(0.14 0.035 250);
  box-shadow: 3px 3px 0 0 var(--accent), 3px 3px 0 2px oklch(0.14 0.035 250);
}
.points-card .pts-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.points-card .pts-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: rgba(10,9,8,0.55);
  margin-top: 2px;
}
.points-card .pts-num {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 38px;
  line-height: 1;
  color: var(--ink);
  text-align: right;
}
.points-card .pts-num small {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 2px;
  text-align: right;
}
.points-card.is-locked {
  opacity: 0.55;
  box-shadow: 3px 3px 0 0 rgba(10,9,8,0.2), 3px 3px 0 2px oklch(0.14 0.035 250);
}

/* ─── "Shop with points" CTA — appears under points-card when unlocked ─── */
.shop-cta {
  display: none;
  margin-top: 12px;
  width: 100%;
  padding: 14px 18px;
  background-color: oklch(0.14 0.035 250);
  background-image: repeating-linear-gradient(
    45deg,
    oklch(0.72 0.18 45 / 0.10) 0 4px,
    transparent 4px 12px
  );
  color: var(--cream);
  border: 2.5px solid oklch(0.14 0.035 250);
  box-shadow:
    4px 4px 0 0 var(--accent),
    4px 4px 0 2.5px oklch(0.14 0.035 250);
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, background-color .2s ease;
}
.shop-cta.is-shown { display: flex; }
.shop-cta:hover {
  transform: translate(-2px, -2px);
  background-color: oklch(0.20 0.05 250);
  box-shadow:
    6px 6px 0 0 var(--accent),
    6px 6px 0 2.5px oklch(0.14 0.035 250);
}
.shop-cta:active {
  transform: translate(1px, 1px);
  box-shadow: 3px 3px 0 0 var(--accent), 3px 3px 0 2.5px oklch(0.14 0.035 250);
}
.shop-cta .cta-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.1;
}
.shop-cta .cta-title { font-weight: 600; }
.shop-cta .cta-sub {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--cream-dim);
  text-transform: uppercase;
}
.shop-cta .cta-arrow {
  display: inline-flex;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  background: var(--accent);
  color: oklch(0.14 0.035 250);
  border: 2px solid oklch(0.14 0.035 250);
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  flex-shrink: 0;
  transition: transform .2s cubic-bezier(.2,.7,.2,1);
}
.shop-cta:hover .cta-arrow { transform: translateX(3px); }
.shop-cta .cta-coin {
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 8px;
  background: var(--accent);
  border-radius: 50%;
  border: 1.5px solid var(--cream);
  vertical-align: -1px;
}

/* ─── Shop view (lives inside user-overlay) ─── */
.modal-body.is-shop > :not(.user-view-shop) { display: none; }
.user-view-shop { display: none; }
.modal-body.is-shop .user-view-shop {
  display: block;
  animation: section-in .35s ease both;
}

.shop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.shop-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(10, 9, 8, 0.18);
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, padding-left .2s ease;
}
.shop-back:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); padding-left: 14px; }
.shop-balance {
  display: flex;
  align-items: center;
  gap: 10px;
  background: oklch(0.95 0.06 60);
  border: 2px solid oklch(0.14 0.035 250);
  box-shadow: 3px 3px 0 0 var(--accent), 3px 3px 0 2px oklch(0.14 0.035 250);
  padding: 8px 14px;
}
.shop-balance .bal-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.shop-balance .bal-num {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
}
.shop-balance .bal-coin {
  width: 14px; height: 14px;
  background: var(--accent);
  border: 1.5px solid oklch(0.14 0.035 250);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 1.5px 1.5px 0 0 oklch(0.14 0.035 250 / 0.3);
}

.shop-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 18px;
  border-bottom: 2px dashed oklch(0.14 0.035 250 / 0.35);
}
.shop-tab {
  background: transparent;
  border: none;
  padding: 10px 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(10, 9, 8, 0.55);
  cursor: pointer;
  position: relative;
  transition: color .2s ease;
}
.shop-tab:hover { color: var(--ink); }
.shop-tab.is-active { color: var(--ink); }
.shop-tab.is-active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px;
  bottom: -2px;
  height: 3px;
  background: var(--accent);
}
.shop-tab .count {
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: rgba(10, 9, 8, 0.45);
  margin-left: 6px;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.shop-item {
  background: var(--cream);
  background-image: repeating-linear-gradient(
    135deg,
    oklch(0.14 0.035 250 / 0.06) 0 1.5px,
    transparent 1.5px 10px
  );
  border: 2.5px solid oklch(0.14 0.035 250);
  box-shadow: 4px 4px 0 0 var(--blue), 4px 4px 0 2.5px oklch(0.14 0.035 250);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.shop-item:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--blue), 6px 6px 0 2.5px oklch(0.14 0.035 250);
}
.shop-item.rarity-rare    { box-shadow: 4px 4px 0 0 oklch(0.72 0.16 232), 4px 4px 0 2.5px oklch(0.14 0.035 250); }
.shop-item.rarity-rare:hover    { box-shadow: 6px 6px 0 0 oklch(0.72 0.16 232), 6px 6px 0 2.5px oklch(0.14 0.035 250); }
.shop-item.rarity-epic    { box-shadow: 4px 4px 0 0 oklch(0.65 0.22 305), 4px 4px 0 2.5px oklch(0.14 0.035 250); }
.shop-item.rarity-epic:hover    { box-shadow: 6px 6px 0 0 oklch(0.65 0.22 305), 6px 6px 0 2.5px oklch(0.14 0.035 250); }
.shop-item.rarity-legend  { box-shadow: 4px 4px 0 0 var(--accent), 4px 4px 0 2.5px oklch(0.14 0.035 250); }
.shop-item.rarity-legend:hover  { box-shadow: 6px 6px 0 0 var(--accent), 6px 6px 0 2.5px oklch(0.14 0.035 250); }
.shop-item.rarity-legend {
  background-image:
    repeating-linear-gradient(
      135deg,
      oklch(0.72 0.18 45 / 0.10) 0 1.5px,
      transparent 1.5px 10px
    );
}

.shop-item .item-thumb {
  aspect-ratio: 1 / 1;
  background:
    repeating-linear-gradient(
      45deg,
      oklch(0.14 0.035 250 / 0.06) 0 6px,
      transparent 6px 12px),
    var(--cream-2);
  border-bottom: 2.5px solid oklch(0.14 0.035 250);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  image-rendering: pixelated;
}
.shop-item .item-thumb svg {
  width: 64%;
  height: 64%;
  image-rendering: pixelated;
}
.shop-item .rarity-tag {
  position: absolute;
  left: 10px; top: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--cream);
  color: var(--ink);
  border: 1.5px solid oklch(0.14 0.035 250);
  box-shadow: 1.5px 1.5px 0 0 oklch(0.14 0.035 250);
}
.shop-item.rarity-rare   .rarity-tag { background: oklch(0.86 0.10 232); }
.shop-item.rarity-epic   .rarity-tag { background: oklch(0.82 0.12 305); }
.shop-item.rarity-legend .rarity-tag { background: var(--accent); color: oklch(0.14 0.035 250); }
.shop-item .slot-tag {
  position: absolute;
  right: 10px; top: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(10, 9, 8, 0.55);
}
.shop-item .item-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.shop-item .item-name {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}
.shop-item .item-desc {
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0;
  flex: 1;
}
.shop-item .item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.shop-item .item-price {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.shop-item .item-price .coin {
  width: 10px; height: 10px;
  background: var(--accent);
  border: 1.2px solid oklch(0.14 0.035 250);
  border-radius: 50%;
}
.shop-item .buy-btn {
  background: oklch(0.14 0.035 250);
  color: var(--cream);
  border: 2px solid oklch(0.14 0.035 250);
  box-shadow: 2px 2px 0 0 var(--accent);
  padding: 7px 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.shop-item .buy-btn:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 0 var(--accent);
}
.shop-item .buy-btn:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--accent);
}
.shop-item .buy-btn:disabled {
  background: oklch(0.14 0.035 250 / 0.35);
  box-shadow: 2px 2px 0 0 oklch(0.14 0.035 250 / 0.2);
  cursor: not-allowed;
  color: oklch(0.86 0.09 60 / 0.6);
}
.shop-item.is-sold-out::after {
  content: "SOLD OUT";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  letter-spacing: 0.3em;
  color: oklch(0.55 0.20 25);
  background: oklch(0.95 0.06 60 / 0.85);
  border: 2px solid oklch(0.55 0.20 25);
  padding: 6px 14px;
  pointer-events: none;
  z-index: 2;
}
.shop-item.is-sold-out { opacity: 0.7; }

.shop-weekly-notice {
  margin-bottom: 12px;
  padding: 9px 13px;
  background: oklch(0.96 0.04 230);
  border: 1.5px solid oklch(0.55 0.14 230);
  color: oklch(0.28 0.10 230);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 3px;
}
.shop-weekly-notice.is-error {
  background: oklch(0.94 0.10 25);
  border-color: oklch(0.50 0.20 25);
  color: oklch(0.30 0.18 25);
}
.shop-weekly-notice .notice-icon { margin-right: 5px; }

.shop-gamekey-disclaimer {
  margin-bottom: 12px;
  padding: 9px 13px;
  background: oklch(0.94 0.10 25);
  border: 1.5px solid oklch(0.50 0.20 25);
  color: oklch(0.30 0.18 25);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 3px;
  font-weight: 600;
}
.shop-gamekey-disclaimer .notice-icon { margin-right: 5px; }

.shop-toast {
  position: sticky;
  top: 0;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: oklch(0.94 0.10 145);
  border: 2px solid oklch(0.40 0.18 145);
  color: oklch(0.30 0.14 145);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 0 oklch(0.40 0.18 145);
  display: none;
  z-index: 5;
}
.shop-toast.is-error {
  background: oklch(0.94 0.10 25);
  border-color: oklch(0.50 0.20 25);
  color: oklch(0.30 0.18 25);
  box-shadow: 2px 2px 0 0 oklch(0.50 0.20 25);
}
.shop-toast.is-shown { display: block; animation: section-in .35s ease both; }

/* ─── Shop / Inventory mode switch ─── */
.shop-mode {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  background: oklch(0.14 0.035 250 / 0.06);
  border: 1.5px solid oklch(0.14 0.035 250 / 0.18);
  border-radius: 999px;
  margin-bottom: 18px;
}
.shop-mode button {
  background: transparent;
  border: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 16px;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.shop-mode button:hover { color: var(--ink); }
.shop-mode button.is-active {
  background: oklch(0.14 0.035 250);
  color: var(--cream);
}
.shop-mode .count { font-size: 9px; opacity: 0.7; }

.user-view-shop .shop-only { display: block; }
.user-view-shop .inv-only  { display: none; }
.user-view-shop.is-inv .shop-only { display: none; }
.user-view-shop.is-inv .inv-only  { display: block; animation: section-in .35s ease both; }

/* ─── Inventory view ─── */
.inv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 50px 24px;
  border: 2px dashed oklch(0.14 0.035 250 / 0.25);
  border-radius: 8px;
  background: var(--cream);
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 7px,
    oklch(0.14 0.035 250 / 0.025) 7px 8px
  );
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  gap: 14px;
}
.inv-empty .glyph {
  width: 56px; height: 56px;
  background: oklch(0.14 0.035 250 / 0.08);
  border: 1.5px dashed oklch(0.14 0.035 250 / 0.3);
  border-radius: 6px;
}
.inv-empty .hint {
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  max-width: 32ch;
}

.inv-layout {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1.4fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 720px) {
  .inv-layout { grid-template-columns: 1fr; }
}

.inv-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  max-height: 520px;
  overflow-y: auto;
  padding: 2px;
  align-content: start;
}
.inv-tile {
  aspect-ratio: 1 / 1;
  width: 100%;
  background:
    repeating-linear-gradient(45deg, oklch(0.14 0.035 250 / 0.05) 0 4px, transparent 4px 8px),
    oklch(0.94 0.02 60);
  border: 1.5px solid oklch(0.14 0.035 250 / 0.22);
  border-radius: 6px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  position: relative;
}
.inv-tile:hover {
  border-color: oklch(0.14 0.035 250 / 0.55);
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 0 oklch(0.14 0.035 250 / 0.18);
}
.inv-tile.is-selected {
  border-color: oklch(0.14 0.035 250);
  box-shadow: 3px 3px 0 0 var(--accent);
  transform: translate(-1px, -1px);
}
.inv-tile.rarity-rare.is-selected   { box-shadow: 3px 3px 0 0 oklch(0.72 0.16 232); }
.inv-tile.rarity-epic.is-selected   { box-shadow: 3px 3px 0 0 oklch(0.65 0.22 305); }
.inv-tile.rarity-legend.is-selected { box-shadow: 3px 3px 0 0 var(--accent); }

.inv-tile svg {
  width: 80%;
  height: 80%;
  image-rendering: pixelated;
}
.inv-tile .rarity-corner {
  position: absolute;
  left: 4px; top: 4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.inv-tile.rarity-common .rarity-corner { background: oklch(0.14 0.035 250 / 0.3); }
.inv-tile.rarity-rare   .rarity-corner { background: oklch(0.72 0.16 232); }
.inv-tile.rarity-epic   .rarity-corner { background: oklch(0.65 0.22 305); }
.inv-tile.rarity-legend .rarity-corner { background: var(--accent); }

/* Detail card */
.inv-detail { position: sticky; top: 0; }
.inv-card {
  background: var(--cream);
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 12px,
    oklch(0.14 0.035 250 / 0.03) 12px 13px
  );
  border: 2px solid oklch(0.14 0.035 250);
  border-radius: 8px;
  padding: 0;
  box-shadow: 4px 4px 0 0 oklch(0.14 0.035 250 / 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.inv-card.rarity-rare   { box-shadow: 4px 4px 0 0 oklch(0.72 0.16 232 / 0.55); }
.inv-card.rarity-epic   { box-shadow: 4px 4px 0 0 oklch(0.65 0.22 305 / 0.55); }
.inv-card.rarity-legend { box-shadow: 4px 4px 0 0 var(--accent); }
.inv-hero {
  aspect-ratio: 16 / 7;
  background:
    radial-gradient(circle at 30% 35%, oklch(0.97 0.04 60) 0%, transparent 60%),
    repeating-linear-gradient(45deg, oklch(0.14 0.035 250 / 0.06) 0 6px, transparent 6px 12px),
    oklch(0.93 0.02 60);
  border-bottom: 2px solid oklch(0.14 0.035 250);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.inv-hero svg {
  width: 38%;
  max-width: 180px;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(2px 2px 0 oklch(0.14 0.035 250 / 0.18));
}
.inv-info {
  padding: 16px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inv-info .tags-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inv-info .rarity-tag,
.inv-info .slot-tag,
.inv-info .acq-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
  font-weight: 600;
  background: oklch(0.14 0.035 250 / 0.08);
  color: var(--ink);
  border: 1px solid oklch(0.14 0.035 250 / 0.2);
}
.inv-card.rarity-rare   .inv-info .rarity-tag { background: oklch(0.86 0.10 232); border-color: oklch(0.72 0.16 232); }
.inv-card.rarity-epic   .inv-info .rarity-tag { background: oklch(0.82 0.12 305); border-color: oklch(0.65 0.22 305); }
.inv-card.rarity-legend .inv-info .rarity-tag { background: var(--accent); border-color: oklch(0.14 0.035 250); }
.inv-info .acq-tag { font-weight: 400; opacity: 0.7; }
.inv-info .inv-title {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 34px;
  line-height: 1;
  margin: 0;
  color: var(--ink);
}
.inv-info .inv-desc {
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

/* Reveal-code block */
.code-block {
  margin-top: 6px;
  border: 2px dashed oklch(0.14 0.035 250 / 0.4);
  border-radius: 6px;
  padding: 14px;
  background: oklch(0.14 0.035 250 / 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.code-block .code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.code-block .code-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.code-block .reveal-btn {
  background: oklch(0.14 0.035 250);
  color: var(--cream);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  padding: 11px 16px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 2px 2px 0 0 var(--accent);
}
.code-block .reveal-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 0 var(--accent);
}
.code-block .reveal-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--accent);
}
.code-block .code-value {
  display: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 19px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid oklch(0.14 0.035 250 / 0.35);
  border-radius: 4px;
  padding: 12px 14px;
  text-align: center;
  user-select: all;
  word-break: break-all;
}
.code-block.is-revealed .reveal-btn { display: none; }
.code-block.is-revealed .code-value { display: block; animation: section-in .3s ease both; }
.code-block .copy-row {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.code-block.is-revealed .copy-row { display: flex; }
.code-block .copy-btn {
  background: transparent;
  border: 1px solid oklch(0.14 0.035 250 / 0.3);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.code-block .copy-btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* Inventory actions */
.inv-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px 18px;
  border-top: 1.5px dashed oklch(0.14 0.035 250 / 0.2);
  margin-top: 6px;
}
.inv-actions .del-btn {
  background: transparent;
  color: oklch(0.5 0.18 25);
  border: 1.5px solid oklch(0.5 0.18 25 / 0.4);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.inv-actions .del-btn:hover {
  background: oklch(0.5 0.18 25);
  color: var(--cream);
  border-color: oklch(0.5 0.18 25);
}
.inv-actions .del-btn.is-confirm {
  background: oklch(0.5 0.18 25);
  color: var(--cream);
  border-color: oklch(0.5 0.18 25);
}

/* Avatar picker grid */
.avatar-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.avatar-option {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  background: var(--cream-2);
  border: 2px solid oklch(0.14 0.035 250);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 2px 2px 0 0 oklch(0.14 0.035 250 / 0.3);
  transition: transform .2s ease, box-shadow .2s ease;
  image-rendering: pixelated;
}
.avatar-option:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 0 var(--blue), 3px 3px 0 2px oklch(0.14 0.035 250);
}
.avatar-option.is-selected {
  box-shadow: 3px 3px 0 0 var(--accent), 3px 3px 0 2px oklch(0.14 0.035 250);
  transform: translate(-1px, -1px);
}
.avatar-option svg, .avatar-option img {
  display: block;
  width: 100%; height: 100%;
  image-rendering: pixelated;
}
.avatar-option.upload-tile {
  background: var(--cream);
  background-image: repeating-linear-gradient(
    45deg,
    oklch(0.14 0.035 250 / 0.10) 0 4px,
    transparent 4px 8px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: center;
  line-height: 1.2;
  padding: 4px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 540px) {
  .form-grid-2 { grid-template-columns: 1fr; }
  .user-panel-grid { grid-template-columns: 1fr; }
  .twitch-card { grid-template-columns: auto 1fr; }
  .twitch-card .tw-action { grid-column: 1 / -1; }
}
.save-toast {
  display: none;
  margin-top: 10px;
  padding: 8px 12px;
  background: oklch(0.94 0.10 145);
  border: 2px solid oklch(0.40 0.18 145);
  color: oklch(0.30 0.14 145);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 0 oklch(0.40 0.18 145);
}
.save-toast.is-shown { display: block; animation: section-in .35s ease both; }

/* ─────────── Tweaks panel (floating) ─────────── */
.tweaks-panel {
  position: fixed;
  left: 32px;
  bottom: 80px;
  width: 280px;
  background-color: var(--cream);
  background-image: repeating-linear-gradient(
    135deg,
    oklch(0.14 0.035 250 / 0.06) 0 1.5px,
    transparent 1.5px 11px
  );
  color: var(--ink);
  border: 2.5px solid oklch(0.14 0.035 250);
  box-shadow:
    6px 6px 0 0 var(--blue),
    6px 6px 0 2.5px oklch(0.14 0.035 250);
  z-index: 70;
  display: none;
  flex-direction: column;
  font-family: "Space Grotesk", sans-serif;
}
.tweaks-panel.is-open { display: flex; animation: section-in .35s ease both; }
.tweaks-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 2px dashed oklch(0.14 0.035 250 / 0.35);
}
.tweaks-head .title {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
}
.tweaks-head .title::before {
  content: "▾ ";
  color: var(--accent);
}
.tweaks-close {
  width: 22px; height: 22px;
  background: transparent;
  border: 1px solid rgba(10,9,8,0.18);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.tweaks-close:hover { background: var(--ink); color: var(--cream); transform: rotate(90deg); }
.tweaks-close svg { width: 8px; height: 8px; }
.tweaks-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tweak-row { display: flex; flex-direction: column; gap: 6px; }
.tweak-row .lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.tweak-row .sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(10,9,8,0.55);
  line-height: 1.45;
}
.tweak-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  background: oklch(0.92 0.06 60);
  border: 2px solid oklch(0.14 0.035 250);
  box-shadow: 2px 2px 0 0 oklch(0.14 0.035 250 / 0.3);
  cursor: pointer;
}
.tweak-toggle .state {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.tweak-toggle .switch {
  width: 44px; height: 24px;
  background: oklch(0.14 0.035 250);
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
  transition: background .2s ease;
}
.tweak-toggle .switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: var(--cream);
  border-radius: 50%;
  transition: transform .2s cubic-bezier(.2,.7,.2,1);
}
.tweak-toggle.is-on .switch { background: var(--accent); }
.tweak-toggle.is-on .switch::after { transform: translateX(20px); }

/* Tweaks trigger button (toolbar replacement — always available) */
.tweaks-trigger {
  position: fixed;
  left: 36px;
  bottom: 76px;
  z-index: 49;
  background: transparent;
  border: 1px solid rgba(237, 228, 211, 0.18);
  color: var(--cream-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  animation: fade-in 1.2s ease 5s forwards;
  transition: color .2s ease, border-color .2s ease, background .2s ease, opacity .25s ease;
}
.tweaks-trigger::before { content: "✦ "; color: var(--accent); }
.tweaks-trigger:hover {
  color: var(--cream);
  border-color: rgba(237, 228, 211, 0.45);
  background: rgba(237, 228, 211, 0.04);
}
body.panel-open .tweaks-trigger { opacity: 0; pointer-events: none; }
body.panel-open .tweaks-panel { display: none; }

@media (max-width: 820px) {
  .user-bar {
    top: 16px;
    right: 16px;
    flex-direction: row-reverse;
  }
  .user-avatar { width: 48px; height: 48px; box-shadow: 3px 3px 0 0 var(--blue), 3px 3px 0 2px oklch(0.14 0.035 250); }
  .handle-pill { display: none; }
  .login-link { padding: 7px 12px; font-size: 9.5px; }
  .tweaks-panel { left: 12px; bottom: 64px; width: calc(100vw - 24px); max-width: 320px; }
  .tweaks-trigger { left: 16px; bottom: 60px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
  .disc, .menu, .blade, .inscription, .status, .replay, .disc-mark, .disc-ring, .disc-pulse, .bsky, .portal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Smaller viewports */
@media (max-width: 1100px) {
  :root {
    --logo-size: 170px;
    --blade-w: 260px;
  }
  .panel { left: 32px; }
}
@media (max-width: 820px) {
  :root {
    --logo-size: 140px;
    --logo-top: 40px;
    --logo-right: 40px;
    --blade-w: 220px;
    --blade-h: 38px;
  }
  .blade { font-size: 10.5px; padding: 0 calc(var(--logo-size) / 2 + 14px) 0 14px; border-width: 2px; box-shadow: 3px 3px 0 0 var(--blue), 3px 3px 0 2px oklch(0.14 0.035 250); }
  .blade:nth-child(1) { top: 6px; }
  .blade:nth-child(2) { top: 56px; }
  .blade:nth-child(3) { top: 106px; }
  .portal {
    width: 110px; height: 110px;
    right: 18px; bottom: 22px;
  }
  .portal .field { inset: -8px; }
  .portal .crt { width: 52px; }
  .portal .crt-fx { width: 36px; height: 22px; }
  .portal .label { bottom: 10px; font-size: 9px; letter-spacing: 0.2em; }
  .panel {
    left: 16px; right: 16px;
    top: 220px; bottom: 200px;
  }
  .panel-head { padding: 24px 24px 12px; }
  .panel-body { padding: 4px 24px 24px; }
  .about-grid { grid-template-columns: 1fr; }
  .blog-entry { grid-template-columns: 70px 1fr auto; gap: 14px; }
  .inscription { display: none; }
  .status-tl { top: 16px; left: 16px; }
  .status-bl { bottom: 16px; left: 16px; }
  .replay { bottom: 16px; left: 16px; }
  .bsky { top: calc(var(--logo-top) + var(--logo-size) + -5px); }
}

hr.float-clear {
  display: block;
  clear: both;
  height: 0;
  border: none;
  margin: 0;
  padding: 0;
  visibility: hidden;
}