/* ============================================================
   TABIE — Pixel-art TRPG Tabletop Design System
   Global tokens, fonts, and pixel-component primitives.
   ============================================================ */

/* ---- Fonts (self-hosted) ----------------------------------
   Galmuri = Korean pixel/bitmap display font (titles, badges)
   Pretendard = clean Korean sans (body, all readable copy)
--------------------------------------------------------------- */
@font-face {
  font-family: "Galmuri11";
  src: url("fonts/Galmuri11.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Galmuri9";
  src: url("fonts/Galmuri9.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Color tokens ---- */
  --ink-950: #1d1720;
  --ink-800: #34293a;
  --parchment-50: #fff4d6;
  --parchment-100: #f4dfaa;
  --parchment-200: #d8b66d;
  --moss-600: #4f6f45;
  --moss-800: #2f4430;
  --ember-500: #d96b3b;
  --ember-700: #9f3d29;
  --mana-400: #5aa7d8;
  --mana-700: #256082;
  --rose-300: #efb2b5;
  --danger-600: #b33a3a;
  --success-600: #3f7d4b;
  --panel-shadow: #120d16;
  --panel-line: #2b2230;

  /* ---- Surface tokens ---- */
  --app-bg: var(--ink-950);
  --panel-bg: var(--parchment-50);
  --panel-alt-bg: var(--parchment-100);
  --panel-dark-bg: var(--ink-800);
  --scene-bg: var(--moss-800);
  --speech-bg: var(--parchment-100);
  --log-bg: #f8e8bc;
  --selected-bg: var(--mana-400);
  --warning-bg: var(--ember-500);

  /* ---- Spacing (4px grid) ---- */
  --sp-1: 4px;
  --sp-compact: 8px;
  --sp-panel: 12px;
  --sp-section: 16px;
  --sp-large: 24px;

  /* ---- Pixel borders + shadows ---- */
  --radius: 4px;
  --outline: 2px;
  --pixel-shadow: 4px 4px 0 var(--panel-shadow);
  --pixel-shadow-sm: 2px 2px 0 var(--panel-shadow);
  --pixel-shadow-lg: 6px 6px 0 var(--panel-shadow);

  /* ---- Type ---- */
  --font-pixel: "Galmuri11", "Galmuri9", monospace;
  --font-pixel-sm: "Galmuri9", "Galmuri11", monospace;
  --font-body: "Pretendard", system-ui, sans-serif;
  --font-mono: "Galmuri9", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--app-bg);
  color: var(--ink-950);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

img, .pixel { image-rendering: pixelated; }

/* ============================================================
   PIXEL PRIMITIVES — reusable component classes
   ============================================================ */

/* ---- Panel ---- */
.pp {
  background: var(--panel-bg);
  border: var(--outline) solid var(--ink-950);
  border-radius: var(--radius);
  box-shadow: var(--pixel-shadow);
  color: var(--ink-950);
  position: relative;
}
.pp__title {
  font-family: var(--font-pixel);
  font-size: 15px;
  letter-spacing: .02em;
  padding: var(--sp-compact) var(--sp-panel);
  background: var(--parchment-200);
  border-bottom: var(--outline) solid var(--ink-950);
  display: flex;
  align-items: center;
  gap: var(--sp-compact);
  border-radius: 2px 2px 0 0;
}
.pp__body { padding: var(--sp-panel); }
.pp__footer {
  padding: var(--sp-compact) var(--sp-panel);
  border-top: var(--outline) dashed var(--panel-line);
  display: flex;
  gap: var(--sp-compact);
  flex-wrap: wrap;
}

/* Panel variants */
.pp--dark { background: var(--panel-dark-bg); color: var(--parchment-50); border-color: #000; }
.pp--dark .pp__title { background: #241b29; color: var(--parchment-100); border-bottom-color: #000; }
.pp--alt { background: var(--panel-alt-bg); }
.pp--active { border-color: var(--mana-700); box-shadow: 4px 4px 0 var(--mana-700); }
.pp--active .pp__title { background: var(--mana-400); color: var(--ink-950); border-bottom-color: var(--mana-700); }
.pp--warning { border-color: var(--ember-700); box-shadow: 4px 4px 0 var(--ember-700); }
.pp--warning .pp__title { background: var(--warning-bg); color: #1d1720; border-bottom-color: var(--ember-700); }
.pp--log { background: var(--log-bg); }
.pp--log .pp__title { background: var(--parchment-200); }

/* ---- Buttons ---- */
.btn {
  font-family: var(--font-pixel);
  font-size: 14px;
  line-height: 1;
  color: var(--ink-950);
  background: var(--parchment-100);
  border: var(--outline) solid var(--ink-950);
  border-radius: var(--radius);
  box-shadow: var(--pixel-shadow-sm);
  padding: 10px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: none;
  user-select: none;
}
.btn:hover { background: var(--parchment-50); }
.btn:focus-visible { outline: 3px solid var(--mana-400); outline-offset: 2px; }
.btn:active, .btn.is-pressed {
  box-shadow: 0 0 0 var(--panel-shadow);
  transform: translate(2px, 2px);
  background: var(--parchment-200);
}
.btn[disabled], .btn.is-disabled {
  cursor: not-allowed;
  opacity: .5;
  background: #cfc4b0;
  box-shadow: none;
  color: #5a5048;
}
.btn--primary { background: var(--ember-500); color: #fff4d6; border-color: var(--ember-700); }
.btn--primary:hover { background: #e07a4d; }
.btn--mana { background: var(--mana-400); color: var(--ink-950); border-color: var(--mana-700); }
.btn--ghost { background: transparent; box-shadow: none; }
.btn--sm { font-size: 12px; padding: 6px 10px; font-family: var(--font-pixel-sm); }
.btn--lg { font-size: 17px; padding: 14px 22px; box-shadow: var(--pixel-shadow); }

/* ---- Badges / chips ---- */
.badge {
  font-family: var(--font-pixel-sm);
  font-size: 11px;
  padding: 3px 7px;
  border: 2px solid var(--ink-950);
  border-radius: 3px;
  background: var(--parchment-50);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
  white-space: nowrap;
}
.badge--host { background: var(--ember-500); color: #fff4d6; border-color: var(--ember-700); }
.badge--ready { background: var(--success-600); color: #fff4d6; border-color: #2c5836; }
.badge--wait { background: var(--parchment-200); color: var(--ink-800); }
.badge--mana { background: var(--mana-400); border-color: var(--mana-700); }
.badge--danger { background: var(--danger-600); color: #fff4d6; border-color: #7e2a2a; }
.badge--dark { background: var(--ink-800); color: var(--parchment-100); border-color: #000; }

/* ---- Stat pill ---- */
.stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-pixel-sm);
  font-size: 12px;
  padding: 3px 6px;
  background: rgba(29,23,32,.06);
  border: 1px solid var(--panel-line);
  border-radius: 2px;
}

/* ---- Meter (HP / focus) ---- */
.meter {
  height: 12px;
  border: 2px solid var(--ink-950);
  border-radius: 2px;
  background: rgba(29,23,32,.15);
  overflow: hidden;
  position: relative;
}
.meter__fill { height: 100%; }
.meter__fill--hp { background: var(--danger-600); }
.meter__fill--focus { background: var(--mana-700); }

/* ---- Placeholder art (dithered pixel) ---- */
.art-slot {
  position: relative;
  background-color: var(--moss-800);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,244,214,.07) 0 6px, transparent 6px 12px);
  border: 2px solid var(--ink-950);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--parchment-100);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  letter-spacing: .02em;
  overflow: hidden;
}
.art-slot--parchment {
  background-color: var(--parchment-200);
  background-image: repeating-linear-gradient(45deg, rgba(29,23,32,.08) 0 6px, transparent 6px 12px);
  color: var(--ink-800);
}
.art-slot--checker {
  background-color: var(--ink-800);
  background-image:
    repeating-conic-gradient(rgba(255,244,214,.08) 0% 25%, transparent 0% 50%);
  background-size: 16px 16px;
}

/* ---- Dice face ---- */
.die {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  font-family: var(--font-pixel);
  font-size: 16px;
  background: var(--parchment-50);
  border: 2px solid var(--ink-950);
  border-radius: 4px;
  box-shadow: var(--pixel-shadow-sm);
  cursor: pointer;
}
.die:hover { background: var(--parchment-100); }
.die.is-selected { background: var(--mana-400); border-color: var(--mana-700); }

/* ---- Speech bubble (AI GM) ---- */
.speech {
  position: relative;
  background: var(--speech-bg);
  color: var(--ink-950);
  border: 2px solid var(--ink-950);
  border-radius: 4px;
  padding: var(--sp-panel) var(--sp-section);
  box-shadow: var(--pixel-shadow);
  font-size: 16px;
  line-height: 1.65;
}
.speech::after {
  content: "";
  position: absolute;
  left: 28px; top: -12px;
  width: 16px; height: 16px;
  background: var(--speech-bg);
  border-left: 2px solid var(--ink-950);
  border-top: 2px solid var(--ink-950);
  transform: rotate(45deg);
}

/* ---- Section scaffolding for the board ---- */
.board { max-width: 1320px; margin: 0 auto; padding: 56px 28px 120px; }
.sec { margin-top: 72px; }
.sec__kicker {
  font-family: var(--font-pixel-sm);
  font-size: 12px;
  color: var(--parchment-200);
  letter-spacing: .08em;
}
.sec__title {
  font-family: var(--font-pixel);
  font-size: 26px;
  color: var(--parchment-50);
  margin: 6px 0 4px;
}
.sec__lead { color: #c9bcd0; max-width: 760px; margin: 0; }
.grid { display: grid; gap: var(--sp-section); }
.ds-label {
  font-family: var(--font-pixel-sm);
  font-size: 11px;
  color: var(--parchment-200);
  letter-spacing: .06em;
  margin: 0 0 8px;
  display: block;
}

/* ---- thinking dots / result animation ---- */
@keyframes blink { 0%,80%,100%{opacity:.25;} 40%{opacity:1;} }
.dots span { animation: blink 1.2s infinite both; }
.dots span:nth-child(2){ animation-delay:.2s; }
.dots span:nth-child(3){ animation-delay:.4s; }
@keyframes pop { 0%{transform:scale(.6);} 60%{transform:scale(1.12);} 100%{transform:scale(1);} }
.result-pop { animation: pop .4s ease-out both; }
.result {
  font-family: var(--font-pixel);
  border: 2px solid #000; border-radius: 4px;
  padding: 8px 10px; font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.result--success { background: var(--success-600); color: #fff4d6; border-color:#2c5836; }
.result--partial { background: var(--ember-500); color: #1d1720; border-color: var(--ember-700); }
.result--fail { background: var(--danger-600); color: #fff4d6; border-color:#7e2a2a; }
.result__num { font-size: 20px; background: rgba(0,0,0,.22); padding: 2px 8px; border-radius: 3px; }

/* ---- Row helper (layout only) ---- */
.row { display: flex; gap: var(--sp-compact); align-items: center; flex-wrap: wrap; }
.row--tight { gap: var(--sp-1); }