/* ============================================================
   ULTIMATE² COMMANDER — "VINTAGE PAPER" THEME  (site v2)
   ------------------------------------------------------------
   A calm, warm, playful redesign inspired by the KCON event
   site: soft cream "breadbin" paper, a quiet Commodore blue as
   the primary accent, warm ochre highlights, gently slanted
   section seams (clip-path), lightly-tilted info cards, dashed
   borders and small sticker accents. No big hero, no neon.

   Self-contained: pairs with Tailwind CDN (utilities for layout)
   but carries its own palette, type, slants, cards and buttons.
   ============================================================ */

@font-face {
  font-family: "C64 Pro Mono";
  src: url("/assets/fonts/C64_Pro_Mono-STYLE.otf") format("opentype");
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
}

:root {
  /* ---- Warm paper backgrounds (the beige Commodore case) ---- */
  --paper:       #f4efe3;   /* main warm white                  */
  --paper-soft:  #faf7ee;   /* lightest — clean white panels    */
  --beige:       #ece2d0;   /* section alt                      */
  --earth:       #e7dcc6;   /* section alt, a touch deeper sand */
  --sand:        #f7f1e6;   /* gallery / quiet band             */
  --card:        #fbf8f0;   /* default card fill                */

  /* ---- Ink + the calm Commodore-blue accent family ---- */
  --ink:         #2f2a24;   /* warm near-black text             */
  --ink-soft:    #5b5345;   /* muted body text                  */
  --blue:        #3f44a6;   /* PRIMARY accent (calm C64 indigo) */
  --blue-deep:   #2b2e7e;   /* dark sections / deep accents     */
  --blue-light:  #6f72d4;   /* lighter blue                     */
  --periwinkle:  #dcdef4;   /* soft light-blue panel fill       */
  --soft-white:  #efe9dc;   /* warm off-white on blue           */

  /* ---- Warm highlight (the "playful" pop, like KCON yellow) ---- */
  --ochre:       #e0a83e;   /* warm gold                        */
  --ochre-soft:  #fbf1d8;   /* pale gold panel fill             */
  --ochre-deep:  #a96f12;   /* deep amber - readable heading accent on cream */

  /* ---- The iconic C64 boot screen (used by the CRT block) ---- */
  --crt-bg:      #3c38b0;
  --crt-text:    #9a97ec;
  --crt-frame:   #cfcbbc;

  --line:        rgba(47, 42, 36, 0.12);
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: "Signika", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* Display headings: the playful vintage-poster caps face. */
h1, h2, h3, h4 {
  font-family: "Staatliches", ui-sans-serif, sans-serif;
  letter-spacing: 0.01em;
  font-weight: 400;
  word-wrap: break-word;
}

.font-display { font-family: "Staatliches", sans-serif; letter-spacing: 0.02em; }
.bebas       { font-family: "Bebas Neue", sans-serif; text-transform: uppercase; letter-spacing: 0.01em; }
.font-c64    { font-family: "C64 Pro Mono", ui-monospace, monospace; font-synthesis: none; }

/* Faked superscript "²" so the wordmark reads Ultimate². */
.sup2 {
  font-family: "C64 Pro Mono", ui-monospace, monospace;
  font-size: 0.6em;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.05em;
}

::selection { background: var(--blue); color: var(--soft-white); }

/* ============================================================
   Slanted section seams (subtle 5% angle), same idea as the
   reference: each band clips its lower or upper edge so the
   colours interleave at a gentle diagonal.
   ============================================================ */
/* Fixed-height (48px) diagonals, NOT percentages: a percentage slant grows
   with section height, so a very tall section (e.g. the Features content)
   would get a huge diagonal that overlaps its own bottom content. A fixed
   px keeps every seam the same gentle size regardless of section height. */
.slant-down-right { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%); }
.slant-down-left  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 48px)); }
.slant-up-right   { clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%); }
.slant-up-left    { clip-path: polygon(0 0, 100% 48px, 100% 100%, 0 100%); }
.slant-both       { clip-path: polygon(0 0, 100% 48px, 100% calc(100% - 48px), 0 100%); }

/* Bands overlap by a slice so the diagonal seam never shows a gap. */
.band-pull { margin-top: -6rem; }
@media (min-width: 1024px) { .band-pull { margin-top: -7rem; } }

.section-pad { padding-top: 9rem; padding-bottom: 6rem; }
@media (min-width: 1024px) { .section-pad { padding-top: 12rem; padding-bottom: 8rem; } }

/* A short warm-gold rule under section titles. */
.rule { display: block; height: 4px; width: 5rem; background: var(--ochre); border-radius: 2px; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.8rem;
  font-family: "Staatliches", sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 0.7rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary {
  background: var(--blue);
  color: var(--soft-white);
  box-shadow: 4px 4px 0 rgba(43, 46, 126, 0.25);
}
.btn-primary:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(43, 46, 126, 0.25); }
.btn-ghost {
  background: transparent;
  color: var(--blue);
  border: 2px solid var(--blue);
}
.btn-ghost:hover { background: var(--blue); color: var(--soft-white); }
.btn-gold { background: var(--ochre); color: var(--ink); box-shadow: 4px 4px 0 rgba(47,42,36,0.15); }
.btn-gold:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(47,42,36,0.15); }

/* Small sticker / tag (rotated label, like the reference's badges). */
.sticker {
  display: inline-block;
  background: var(--ochre);
  color: var(--ink);
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.08em;
  padding: 0.4rem 0.9rem;
  border: 2px dashed rgba(47, 42, 36, 0.35);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(47, 42, 36, 0.12);
}
.tag {
  display: inline-block;
  background: var(--blue);
  color: var(--soft-white);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
}

/* ============================================================
   Info cards — soft fill, hairline border, gentle alternating
   tilt on desktop. Lift very slightly on hover.
   ============================================================ */
.card {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 1.1rem;
  box-shadow: 0 10px 30px rgba(47, 42, 36, 0.05);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.card:hover { box-shadow: 0 16px 40px rgba(47, 42, 36, 0.1); }
@media (min-width: 1024px) {
  .card-tilt:nth-child(odd)  { transform: rotate(-0.6deg); }
  .card-tilt:nth-child(even) { transform: rotate(0.6deg); }
  .card-tilt:hover { transform: rotate(0deg) translateY(-4px); }
}

/* Highlighted (featured) card — quiet blue ring + slight scale. */
.card-feature {
  border-color: var(--blue);
  box-shadow: 0 18px 44px rgba(63, 68, 166, 0.18);
}
@media (min-width: 1024px) { .card-feature { transform: scale(1.04); } .card-feature:hover { transform: scale(1.04) translateY(-4px); } }

/* Dashed "note" panel, like the reference's practical-info box. */
.panel-dashed {
  border: 2px dashed rgba(63, 68, 166, 0.4);
  background: var(--ochre-soft);
  border-radius: 1.1rem;
}
.panel-soft {
  background: var(--periwinkle);
  border: 2px solid rgba(63, 68, 166, 0.18);
  border-radius: 1.1rem;
}

/* ============================================================
   Framed photo / screenshot — warm white mat, soft shadow, a
   gentle tilt that straightens on hover.
   ============================================================ */
.frame {
  border: 8px solid var(--paper-soft);
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(47, 42, 36, 0.16);
  background: var(--earth);
  transition: transform 0.4s ease;
}
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame-tilt-l { transform: rotate(-1.5deg); }
.frame-tilt-r { transform: rotate(1.5deg); }
.frame-tilt-l:hover, .frame-tilt-r:hover { transform: rotate(0deg); }

/* ============================================================
   The C64 boot-screen block — the one deliberate retro panel:
   the iconic blue screen with light-blue phosphor text.
   ============================================================ */
.crt {
  border: 10px solid var(--crt-frame);
  border-radius: 14px;
  background: var(--crt-bg);
  color: var(--crt-text);
  font-family: "C64 Pro Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  box-shadow: 0 26px 60px rgba(43, 46, 126, 0.35);
  text-shadow: 0 0 6px rgba(154, 151, 236, 0.35);
}
.crt .cursor { animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* PETSCII mini directory inside feature cards. */
.petscii {
  background: var(--crt-bg);
  color: var(--crt-text);
  font-family: "C64 Pro Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  border-radius: 0.6rem;
  padding: 0.85rem 1rem;
}

/* ============================================================
   Dot texture for the blue bands (very subtle).
   ============================================================ */
.bg-dots {
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}

/* Keycaps for the keyboard section. */
kbd {
  display: inline-block;
  min-width: 2.4rem;
  text-align: center;
  padding: 0.28rem 0.55rem;
  border-radius: 7px;
  border: 2px solid rgba(47, 42, 36, 0.55);
  border-bottom-width: 4px;
  background: var(--paper-soft);
  color: var(--ink);
  font-family: "C64 Pro Mono", ui-monospace, monospace;
  font-size: 0.78em;
  line-height: 1.2;
}
.kbd-row { border-bottom: 1px dashed rgba(47, 42, 36, 0.18); }
.kbd-row:last-child { border-bottom: none; }

/* ============================================================
   Header nav
   ============================================================ */
/* RC monogram: the C64 pixel font reserves descender space, so the caps
   sit ~1px high in the flex line box. A hair of top padding nudges the
   glyphs down to the optical centre of the logo square. */
.logo-mark { padding-top: 2px; }

/* Translucent cream header bar. (Authored as rgba, not a Tailwind
   /opacity utility, because the palette vars are hex — Tailwind can't
   derive an alpha channel from a hex custom property.) */
.site-header {
  background-color: rgba(244, 239, 227, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.nav-link {
  position: relative;
  padding: 0.35rem 0.2rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
.nav-link::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 2px; background: var(--ochre);
  transition: right 0.2s ease;
}
.nav-link:hover { color: var(--blue); }
.nav-link:hover::after { right: 0; }
.nav-link--active { color: var(--blue); }
.nav-link--active::after { right: 0; background: var(--blue); }

a.link { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(63,68,166,0.35); }
a.link:hover { border-bottom-color: var(--blue); }

:target { scroll-margin-top: 6rem; }

/* ============================================================
   Multi-page helpers (docs hub tiles, side index, tables,
   inline code, hanging corner badge).
   ============================================================ */
.tile {
  display: block;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 1.1rem;
  box-shadow: 0 10px 30px rgba(47, 42, 36, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.tile:hover { transform: translateY(-4px); border-color: var(--blue); box-shadow: 0 16px 40px rgba(63, 68, 166, 0.15); }

.toc-link {
  display: block;
  padding: 0.32rem 0.6rem;
  border-radius: 0.45rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.toc-link:hover { background: var(--periwinkle); color: var(--blue); }

.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left;
  font-family: "C64 Pro Mono", ui-monospace, monospace;
  font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--blue); padding: 0.55rem 0.75rem;
}
.tbl td { padding: 0.7rem 0.75rem; border-top: 1px dashed rgba(47, 42, 36, 0.18); vertical-align: top; }

code {
  font-family: "C64 Pro Mono", ui-monospace, monospace;
  font-size: 0.84em;
  background: var(--periwinkle);
  color: var(--blue-deep);
  padding: 0.08em 0.36em;
  border-radius: 0.3rem;
}

/* Tier comparison matrix — Standard column (4th) highlighted to echo
   the "most picked" card. */
.matrix { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.matrix th, .matrix td {
  padding: 0.6rem 0.9rem; text-align: center;
  border-bottom: 1px dashed rgba(47, 42, 36, 0.16);
  color: var(--ink-soft);
}
.matrix thead th {
  font-family: "Staatliches", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: 1rem; letter-spacing: 0.05em; color: var(--ochre-deep);
  border-bottom: 2px solid rgba(47, 42, 36, 0.16);
}
.matrix th:first-child, .matrix td:first-child {
  text-align: left; color: var(--ink); font-weight: 600;
}
.matrix tbody tr:last-child td { border-bottom: none; }
.matrix th:nth-child(4), .matrix td:nth-child(4) { background: rgba(63, 68, 166, 0.07); }
.matrix thead th:nth-child(4) { color: var(--blue); }
.matrix .yes { color: var(--blue); font-weight: 700; }
.matrix .no  { color: rgba(47, 42, 36, 0.32); }

/* Hanging corner badge for "Recommended" / "Most picked" cards. */
.badge-corner {
  position: absolute; top: -0.85rem; right: -0.6rem; z-index: 20;
  transform: rotate(4deg);
  background: var(--ochre); color: var(--ink);
  font-family: "Bebas Neue", sans-serif; letter-spacing: 0.06em;
  font-size: 0.85rem; padding: 0.3rem 0.8rem;
  border-radius: 6px; border: 2px solid var(--paper-soft);
  box-shadow: 0 8px 20px rgba(47, 42, 36, 0.2);
}

/* Star bullet list — hanging ★ marker via absolute positioning so inline
   links / bold text inside an item keep flowing as normal text. (A flex item
   would split each inline child onto its own line.) */
.star-list { list-style: none; }
.star-list li { position: relative; padding-left: 1.45rem; }
.star-list li::before { content: "★"; position: absolute; left: 0; top: 0; color: var(--ochre); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .crt .cursor { animation: none; }
}