/* ==========================================================================
   8bit.css: 8bitcn-ui components ported to plain CSS for Ghost
   Based on https://github.com/TheOrcDev/8bitcn-ui (MIT)
   Every class is prefixed with "bit-" so it can be used in Ghost HTML cards.
   ========================================================================== */

@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/press-start-2p-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/press-start-2p-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Handjet (variable, wght 100-900), SIL OFL. Scaled up: its x-height is small. */
@font-face {
  font-family: "Handjet";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  size-adjust: 128%;
  src: url("../fonts/handjet-variable.woff2") format("woff2");
}

:root {
  --font-handjet: "Handjet", ui-sans-serif, system-ui, sans-serif;
  --font-retro: var(--gh-font-heading, "Press Start 2P", ui-monospace, monospace);
  --font-body: var(--gh-font-body, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --px: 6px;                          /* one "pixel" of the 8-bit border */
  --bit-line: var(--foreground);      /* border colour (8bitcn: foreground / dark: ring) */
  --bit-shade: color-mix(in oklab, var(--foreground) 20%, transparent);
  --health: oklch(0.62 0.22 27);
  --mana: oklch(0.6 0.19 255);
  --xp: oklch(0.8 0.17 85);
}
html.dark { --bit-line: var(--ring); }
html.font-handjet { --font-body: var(--gh-font-body, var(--font-handjet)); }

.retro, .bit-retro { font-family: var(--font-retro); line-height: 1.6; letter-spacing: 0.5px; }
.pixelated, .bit-pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }
.bit-muted { color: var(--muted-foreground); }
.bit-primary { color: var(--primary); }

/* --------------------------------------------------------------------------
   Pixel frame: the notched 6px border used by Card, Alert, Input, Progress…
   (8bitcn: border-y-6 on the element + border-x-6 overlay shifted -mx-1.5)
   -------------------------------------------------------------------------- */
.bit-frame,
.bit-card,
.bit-alert,
.bit-input,
.bit-textarea,
.bit-select,
.bit-table-wrap,
.bit-accordion,
.bit-dialog {
  position: relative;
  border-block: var(--px) solid var(--bit-line);
  margin-inline: var(--px);
}
.bit-input, .bit-textarea, .bit-select { margin-inline: var(--px); }
.bit-frame::before,
.bit-card::before,
.bit-alert::before,
.bit-table-wrap::before,
.bit-accordion::before,
.bit-dialog::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--px) * -1);
  border-inline: var(--px) solid var(--bit-line);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */
.bit-btn {
  --btn-bg: var(--primary);
  --btn-fg: var(--primary-foreground);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  margin: var(--px);
  padding: 8px 16px;
  border: 0;
  border-radius: 0;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-retro);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--bit-line),
    0 var(--px) 0 0 var(--bit-line),
    calc(var(--px) * -1) 0 0 0 var(--bit-line),
    var(--px) 0 0 0 var(--bit-line),
    inset 0 calc(var(--px) * -1) 0 0 var(--bit-shade),
    inset 0 var(--px) 0 0 var(--bit-shade);
  transition: transform 80ms steps(2), filter 120ms;
  -webkit-user-select: none;
  user-select: none;
}
.bit-btn:hover { filter: brightness(1.12); color: var(--btn-fg); }
.bit-btn:active { transform: translateY(4px); }
.bit-btn:focus-visible { outline: 3px dashed var(--ring); outline-offset: 10px; }
.bit-btn[disabled], .bit-btn.is-disabled { opacity: .5; pointer-events: none; }
.bit-btn svg { width: 14px; height: 14px; flex: none; }

.bit-btn--secondary { --btn-bg: var(--secondary); --btn-fg: var(--secondary-foreground); }
.bit-btn--destructive { --btn-bg: var(--destructive); --btn-fg: oklch(0.98 0 0); }
.bit-btn--outline {
  --btn-bg: var(--background); --btn-fg: var(--foreground);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--bit-line), 0 var(--px) 0 0 var(--bit-line),
    calc(var(--px) * -1) 0 0 0 var(--bit-line), var(--px) 0 0 0 var(--bit-line);
}
.bit-btn--ghost, .bit-btn--link {
  --btn-bg: transparent; --btn-fg: var(--foreground);
  box-shadow: none; margin: 0;
}
.bit-btn--ghost:hover { --btn-bg: var(--accent); --btn-fg: var(--accent-foreground); filter: none; }
.bit-btn--link { --btn-fg: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.bit-btn--sm { min-height: 30px; padding: 5px 12px; font-size: 9px; }
.bit-btn--lg { min-height: 52px; padding: 14px 26px; font-size: 13px; }
.bit-btn--icon { width: 36px; min-height: 36px; padding: 0; }
.bit-btn--block { display: flex; width: calc(100% - var(--px) * 2); }

.bit-btn-group { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.bit-btn-group--center { justify-content: center; }

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.bit-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 18px;
  background: var(--card);
  color: var(--card-foreground);
}
.bit-card__header { display: flex; flex-direction: column; gap: 8px; }
.bit-card__title { margin: 0; font-family: var(--font-retro); font-size: 15px; line-height: 1.6; font-weight: 400; }
.bit-card__desc { margin: 0; color: var(--muted-foreground); font-family: var(--font-body); font-size: 18px; line-height: 1.5; }
.bit-card__content { flex: 1; }
.bit-card__footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bit-card--flush { padding: 0; gap: 0; }

/* --------------------------------------------------------------------------
   Badge (pill with pixel side bars)
   -------------------------------------------------------------------------- */
.bit-badge {
  --badge-bg: var(--primary);
  --badge-fg: var(--primary-foreground);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline: var(--px);
  padding: 4px 8px;
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-family: var(--font-retro);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
}
.bit-badge::before, .bit-badge::after {
  content: ""; position: absolute; top: 4px; bottom: 4px; width: var(--px); background: var(--badge-bg);
}
.bit-badge::before { left: calc(var(--px) * -1); }
.bit-badge::after { right: calc(var(--px) * -1); }
a.bit-badge:hover { filter: brightness(1.12); color: var(--badge-fg); }
.bit-badge--secondary { --badge-bg: var(--secondary); --badge-fg: var(--secondary-foreground); }
.bit-badge--destructive { --badge-bg: var(--destructive); --badge-fg: oklch(0.98 0 0); }
.bit-badge--outline { --badge-bg: var(--background); --badge-fg: var(--foreground); }
.bit-badge--accent { --badge-bg: var(--accent); --badge-fg: var(--accent-foreground); }
.bit-badges { display: flex; flex-wrap: wrap; gap: 10px 14px; }

/* --------------------------------------------------------------------------
   Alert
   -------------------------------------------------------------------------- */
.bit-alert {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 6px;
  padding: 14px 16px;
  background: var(--background);
  color: var(--foreground);
}
.bit-alert > :not(.bit-alert__icon) { grid-column: 2; }
.bit-alert:not(:has(.bit-alert__icon)) { grid-template-columns: 1fr; }
.bit-alert:not(:has(.bit-alert__icon)) > * { grid-column: 1; }
.bit-alert__icon { grid-row: span 2; font-family: var(--font-retro); font-size: 16px; line-height: 1; }
.bit-alert__title { margin: 0; font-family: var(--font-retro); font-size: 13px; line-height: 1.6; }
.bit-alert__desc { margin: 0; color: var(--muted-foreground); font-family: var(--font-body); font-size: 18px; line-height: 1.5; }
.bit-alert--destructive, .bit-alert--destructive .bit-alert__desc { color: var(--destructive); }

/* --------------------------------------------------------------------------
   Progress / Health / Mana / XP bars
   usage: <div class="bit-progress" style="--value:60"></div>
   -------------------------------------------------------------------------- */
.bit-progress {
  --value: 0;
  --fill: var(--primary);
  position: relative;
  height: 16px;
  margin: 4px;
  border-block: 4px solid var(--bit-line);
  background: color-mix(in oklab, var(--fill) 20%, transparent);
}
.bit-progress::before {
  content: ""; position: absolute; inset: 0 -4px; border-inline: 4px solid var(--bit-line); pointer-events: none;
}
.bit-progress::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: calc(var(--value) * 1%);
  background: var(--fill);
  transition: width .3s steps(10);
}
.bit-progress--retro::after {
  /* 20 segmented blocks, like the "retro" variant */
  background: repeating-linear-gradient(90deg, var(--fill) 0 calc(5% - 2px), transparent calc(5% - 2px) 5%);
  background-size: calc(100% / var(--value) * 100) 100%;
}
.bit-progress--health { --fill: var(--health); }
.bit-progress--mana { --fill: var(--mana); }
.bit-progress--xp { --fill: var(--xp); }
.bit-progress--lg { height: 24px; }
.bit-stat { display: grid; gap: 6px; }
.bit-stat__label { display: flex; justify-content: space-between; font-family: var(--font-retro); font-size: 10px; }

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */
.bit-label { display: block; margin-bottom: 8px; font-family: var(--font-retro); font-size: 10px; }
.bit-input, .bit-textarea, .bit-select {
  display: block;
  width: calc(100% - var(--px) * 2);
  padding: 10px 12px;
  border-inline: 0;
  border-radius: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-retro);
  font-size: 10px;
  line-height: 1.6;
  /* notched side bars: shrunk shadows leave the corner pixels empty */
  box-shadow: calc(var(--px) * -2) 0 0 calc(var(--px) * -1) var(--bit-line), calc(var(--px) * 2) 0 0 calc(var(--px) * -1) var(--bit-line);
  outline: none;
}
.bit-input:focus-visible, .bit-textarea:focus-visible, .bit-select:focus-visible { outline: 3px dashed var(--ring); outline-offset: 6px; }
.bit-textarea { min-height: 110px; resize: vertical; line-height: 1.8; }
.bit-input::placeholder, .bit-textarea::placeholder { color: var(--muted-foreground); }
.bit-field { display: grid; gap: 4px; margin-bottom: 18px; }

.bit-check { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-retro); font-size: 9px; cursor: pointer; }
.bit-check input {
  appearance: none; width: 18px; height: 18px; margin: 0; flex: none;
  background: var(--background); box-shadow: inset 0 0 0 3px var(--bit-line); cursor: pointer;
}
.bit-check input:checked { background: var(--primary); box-shadow: inset 0 0 0 3px var(--bit-line), inset 0 0 0 6px var(--background); }
.bit-check input[type="radio"] { clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px); }

/* --------------------------------------------------------------------------
   Separator, Kbd, Avatar, Skeleton, Spinner
   -------------------------------------------------------------------------- */
.bit-separator { height: 0; margin: 24px 0; border: 0; border-top: 4px dashed var(--bit-line); opacity: .8; }
.bit-kbd {
  display: inline-block; padding: 2px 6px; margin: 0 3px;
  background: var(--muted); color: var(--foreground);
  font-family: var(--font-retro); font-size: 9px;
  box-shadow: 0 -3px 0 var(--bit-line), 0 3px 0 var(--bit-line), -3px 0 0 var(--bit-line), 3px 0 0 var(--bit-line), inset 0 -3px 0 var(--bit-shade);
}
.bit-avatar {
  --size: 44px;
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--size); height: var(--size); margin: 4px;
  background: var(--muted); color: var(--foreground);
  font-family: var(--font-retro); font-size: calc(var(--size) / 3.6);
  overflow: hidden;
  box-shadow: 0 -4px 0 var(--bit-line), 0 4px 0 var(--bit-line), -4px 0 0 var(--bit-line), 4px 0 0 var(--bit-line);
}
.bit-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.bit-avatar--sm { --size: 28px; }
.bit-avatar--lg { --size: 64px; }
.bit-avatar--xl { --size: 96px; }
.bit-skeleton { background: var(--muted); min-height: 16px; animation: bit-blink 1s steps(2) infinite; }
.bit-spinner { display: inline-block; width: 24px; height: 24px; background: var(--foreground);
  clip-path: polygon(0 0, 33% 0, 33% 33%, 0 33%, 0 0, 66% 0, 100% 0, 100% 33%, 66% 33%, 66% 0, 0 66%, 33% 66%, 33% 100%, 0 100%, 0 66%, 66% 66%, 100% 66%, 100% 100%, 66% 100%, 66% 66%);
  animation: bit-spin 1s steps(4) infinite; }
@keyframes bit-spin { to { transform: rotate(360deg); } }
@keyframes bit-blink { 50% { opacity: .45; } }

/* --------------------------------------------------------------------------
   Table
   -------------------------------------------------------------------------- */
.bit-table-wrap { overflow-x: auto; background: var(--card); }
.bit-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 18px; }
.bit-table th { font-family: var(--font-retro); font-size: 10px; font-weight: 400; text-align: left; color: var(--muted-foreground); }
.bit-table th, .bit-table td { padding: 12px 14px; border-bottom: 3px dashed color-mix(in oklab, var(--bit-line) 35%, transparent); }
.bit-table tr:last-child td { border-bottom: 0; }
.bit-table tbody tr:hover { background: var(--accent); color: var(--accent-foreground); }

/* --------------------------------------------------------------------------
   Accordion (native <details>)
   -------------------------------------------------------------------------- */
.bit-accordion { background: var(--card); }
.bit-accordion details { border-bottom: 4px solid var(--bit-line); }
.bit-accordion details:last-child { border-bottom: 0; }
.bit-accordion summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 20px; cursor: pointer; list-style: none;
  font-family: var(--font-retro); font-size: 12px; line-height: 1.7;
}
.bit-accordion summary::-webkit-details-marker { display: none; }
.bit-accordion summary::after { content: "+"; font-size: 14px; flex: none; }
.bit-accordion details[open] summary::after { content: "-"; }
.bit-accordion summary:hover { background: var(--accent); color: var(--accent-foreground); }
.bit-accordion__body { padding: 0 20px 20px; color: var(--muted-foreground); font-family: var(--font-body); font-size: 18px; line-height: 1.55; }
.bit-accordion__body > :first-child { margin-top: 0; }
.bit-accordion__body > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Tabs (tiny JS in main.js; works in HTML cards too)
   -------------------------------------------------------------------------- */
.bit-tabs__list { display: flex; flex-wrap: wrap; gap: 0; margin: 0 var(--px) 18px; border-bottom: 4px solid var(--bit-line); }
.bit-tabs__tab {
  padding: 12px 16px; border: 0; background: transparent; color: var(--muted-foreground);
  font-family: var(--font-retro); font-size: 10px; cursor: pointer;
}
.bit-tabs__tab[aria-selected="true"] { background: var(--bit-line); color: var(--background); }
.bit-tabs__panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Tooltip (CSS only): <span class="bit-tooltip" data-tip="Hello">?</span>
   -------------------------------------------------------------------------- */
.bit-tooltip { position: relative; cursor: help; text-decoration: underline dotted; }
.bit-tooltip::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
  padding: 6px 10px; background: var(--foreground); color: var(--background);
  font-family: var(--font-retro); font-size: 8px; line-height: 1.6; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .1s steps(2); z-index: 20;
}
.bit-tooltip:hover::after, .bit-tooltip:focus::after { opacity: 1; }

/* --------------------------------------------------------------------------
   Toast / Dialog
   -------------------------------------------------------------------------- */
.bit-dialog { max-width: 480px; padding: 22px; background: var(--popover); color: var(--popover-foreground); }
dialog.bit-dialog { border-inline: 0; }
dialog.bit-dialog::backdrop { background: rgb(0 0 0 / .6); }
.bit-toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; }

/* --------------------------------------------------------------------------
   Layout helpers for blocks inside posts
   -------------------------------------------------------------------------- */
.bit-section { padding-block: clamp(32px, 6vw, 72px); }
.bit-section--muted { background: var(--muted); color: var(--foreground); }
.bit-section--primary { background: var(--primary); color: var(--primary-foreground); --muted-foreground: color-mix(in oklab, var(--primary-foreground) 75%, transparent); --bit-line: var(--primary-foreground); }
.bit-section--inverted { background: var(--foreground); color: var(--background); --muted-foreground: color-mix(in oklab, var(--background) 72%, transparent); --bit-line: var(--background); }
.bit-section--primary .bit-card, .bit-section--inverted .bit-card { color: var(--card-foreground); --muted-foreground: initial; }
.bit-section__head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.bit-section__title { margin: 0 0 14px; font-family: var(--font-retro); font-size: clamp(20px, 3.4vw, 34px); line-height: 1.45; font-weight: 400; }
.bit-section__desc { margin: 0; color: var(--muted-foreground); font-family: var(--font-body); font-size: clamp(18px, 2vw, 22px); line-height: 1.5; }
.bit-grid { display: grid; gap: 34px 30px; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 260px)), 1fr)); }
.bit-grid--2 { --min: 320px; }
.bit-grid--4 { --min: 180px; }
.bit-stack { display: grid; gap: 18px; }
.bit-row { display: flex; align-items: center; gap: 14px; }
.bit-row--between { justify-content: space-between; }
.bit-center { text-align: center; }
.bit-scanlines { position: relative; }
.bit-scanlines::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: repeating-linear-gradient(0deg, transparent 0 2px, currentColor 2px 3px);
}