/* Type Hangeul shared UI: tokens and pixel-RPG components used by both
   index.html (title + practice) and game.html (battle).
   One look everywhere: hanji paper surfaces, ink frames and text, square
   corners, hard offset shadows, a bitmap UI font. Page styles load after
   this file, so a page rule with the same specificity wins. */

/* UI pixel font: a subset of Galmuri11 (OFL-1.1, fonts/OFL.txt), renamed
   per the OFL Reserved Font Name clause. It covers ASCII, Latin-1 and the
   Hangul used in UI strings only; target words use --korean. Galmuri11 is
   drawn on a 12px grid, so 12/24/36/48px render pixel-crisp. Rebuild the
   subset with tools/subset-ui-font.py after adding Hangul UI copy. */
@font-face {
  font-family: 'TH Pixel';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/galmuri11-ui.woff2') format('woff2');
}
@font-face {
  font-family: 'TH Pixel';
  font-weight: 700;
  font-display: swap;
  src: url('fonts/galmuri11-bold-ui.woff2') format('woff2');
}
/* Display alias: titles keep font-weight 400 in page CSS but draw bold */
@font-face {
  font-family: 'TH Pixel Bold';
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/galmuri11-bold-ui.woff2') format('woff2');
}
/* Galmuri11-Bold has no Vietnamese letters: on /vi/ bold text borrows the
   regular pixel glyphs for them instead of a smooth fallback font */
@font-face {
  font-family: 'TH Pixel VI';
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/galmuri11-ui.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0303, U+0309, U+0323, U+1EA0-1EF9;
}
/* Japanese kana and kanji used in i18n/ja.json (tools/subset-ui-font.py
   writes these once ja.json has text; the unicode-range keeps other pages
   from ever fetching them) */
@font-face {
  font-family: 'TH Pixel JA';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/galmuri11-ja.woff2') format('woff2');
  unicode-range: U+3000-30FF, U+4E00-9FFF, U+FF01-FF5E;
}
@font-face {
  font-family: 'TH Pixel JA';
  font-weight: 700;
  font-display: swap;
  src: url('fonts/galmuri11-ja-bold.woff2') format('woff2');
  unicode-range: U+3000-30FF, U+4E00-9FFF, U+FF01-FF5E;
}
@font-face {
  font-family: 'TH Pixel Mono';
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/galmurimono11-ui.woff2') format('woff2');
}

:root {
  /* Palette: paper, ink, one seal red, one gold. Nothing else in chrome. */
  --ink: #10131f;            /* outlines, hard shadows, text */
  --ink-soft: #2b2f40;
  --cream: #fff4d6;          /* text on ink fills */
  --gold: #f6c453;           /* XP fill only */
  --gold-hi: #ffd978;
  --gold-deep: #8a5a0c;      /* score / XP as text on paper (AA) */
  --seal: #c8352e;           /* lives, danger, errors, the practice stamp */
  --hanji: #f4ecda;          /* page background */
  --hanji-edge: #e2d4b4;     /* paper fibers, inner frame lines */
  --paper: #fffaf0;          /* panel fill */
  --frame: var(--ink);       /* panel border */
  --danger: var(--seal);
  --sakura: #f9c4d2;
  --sakura-deep: #f29bb4;

  /* Page surface and text tokens (both pages) */
  --bg: var(--hanji); --l1: var(--paper); --l2: #fbf3e2; --l3: #f3e7cc;
  --bd: #e0d0ae;   --bdhi: #b9a37a;
  --thi: var(--ink); --tmd: #4a4436; --tlo: #6b6250; /* 5.3:1 on paper, WCAG AA */
  /* Teaching colors (practice jamo feedback, finger map); not for chrome */
  --blue: #2563eb; --green: #10b981; --yellow: #f59e0b;
  --red: #ef4444;  --orange: #f97316; --purple: #8b5cf6;

  /* Panel surfaces (kept as names for older rules) */
  --panel: var(--paper);
  --panel-top: var(--paper);
  --panel-solid: var(--paper);
  --panel-hi: var(--l2);

  /* Shape: pixel chrome is square */
  --r-1: 0;
  --r-2: 0;
  --r-3: 0;
  --shadow-hard: 3px 3px 0 var(--ink);

  /* Type */
  --font-display: 'TH Pixel Bold', 'Noto Sans KR', system-ui, sans-serif;
  --font-ui: 'TH Pixel', 'Noto Sans KR', system-ui, sans-serif;
  --font-mono: 'TH Pixel Mono', 'TH Pixel', ui-monospace, monospace;
  --korean: 'Noto Sans KR', system-ui, sans-serif;
}

/* Translated pages (/vi/, /ja/, /zh/): the pixel font is a subset, so name
   a fallback that has the script before Noto Sans KR. Built pages set
   <html lang>; English and Korean need nothing extra. */
html:lang(vi) {
  --font-display: 'TH Pixel Bold', 'TH Pixel VI', 'Noto Sans KR', system-ui, sans-serif;
  --font-ui: 'TH Pixel', 'TH Pixel VI', 'Noto Sans KR', system-ui, sans-serif;
}
html:lang(ja) {
  --font-display: 'TH Pixel Bold', 'TH Pixel JA', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans KR', system-ui, sans-serif;
  --font-ui: 'TH Pixel', 'TH Pixel JA', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans KR', system-ui, sans-serif;
}
html:lang(zh) {
  --font-display: 'TH Pixel Bold', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans KR', system-ui, sans-serif;
  --font-ui: 'TH Pixel', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans KR', system-ui, sans-serif;
}
/* CJK and Vietnamese text runs long without spaces; let it wrap */
html:lang(ja) :is(h1, h2, h3, p, li, label, summary, .rpg-panel, .rpg-toast),
html:lang(zh) :is(h1, h2, h3, p, li, label, summary, .rpg-panel, .rpg-toast) { word-break: normal; line-break: strict; }

/* Korean line breaking and wrapping for running text */
h1, h2, h3, p, li, label, summary, .rpg-panel, .rpg-toast { word-break: keep-all; overflow-wrap: break-word; }
h1, h2, h3, .rpg-title { text-wrap: balance; }
p, li, summary { text-wrap: pretty; }

/* Legacy scope name: everything is paper now, so it only sets ink text */
.rpg-dark { color: var(--ink); }

/* Panels: paper, 2px ink frame, a hanji inner line, hard offset shadow */
.rpg-panel,
.rpg-panel--light {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow:
    inset 0 0 0 3px var(--paper),
    inset 0 0 0 4px var(--hanji-edge),
    var(--shadow-hard);
}

/* Title text: ink on paper, no outline */
.rpg-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--ink);
}

/* Buttons: paper key with an ink frame. --primary is a solid ink key. */
.rpg-btn {
  --btn-bg: var(--paper);
  --btn-bg-hi: var(--l3);
  --btn-fg: var(--ink);
  --btn-frame: var(--ink);
  --btn-shadow: var(--ink);
  --btn-cursor: var(--seal);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 700; line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 2px solid var(--btn-frame);
  border-radius: 0;
  box-shadow: 0 3px 0 var(--btn-shadow);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.06s steps(1), box-shadow 0.06s steps(1);
}
.rpg-btn:hover { background: var(--btn-bg-hi); color: var(--btn-fg); }
.rpg-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-shadow); }
.rpg-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Menu cursor, like the title screen */
.rpg-btn:hover::before,
.rpg-btn:focus-visible::before {
  content: '▶';
  position: absolute; left: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 9px; line-height: 1;
  color: var(--btn-cursor);
  animation: rpg-blink 1s steps(1) infinite;
}
.rpg-btn--primary {
  --btn-bg: var(--ink);
  --btn-bg-hi: var(--ink-soft);
  --btn-fg: var(--paper);
  --btn-frame: var(--ink);
  --btn-cursor: var(--paper);
}
.rpg-btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hi: var(--l3);
  box-shadow: none;
}
.rpg-btn--ghost:active { box-shadow: none; }
/* Kept for markup that still names it; the default is already paper */
.rpg-btn--light { --btn-cursor: var(--seal); }
@keyframes rpg-blink { 50% { opacity: 0; } }

/* Pixel icons from pixelIcon() (shared.js) */
.px-icon { display: inline-block; vertical-align: -0.125em; flex: 0 0 auto; }

/* Modal: dim veil + centered paper panel */
.rpg-modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(16, 19, 31, 0.55);
  animation: rpg-fade 0.2s linear;
}
.rpg-modal__card {
  width: 100%;
  max-width: 460px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 28px;
}
@keyframes rpg-fade { from { opacity: 0; } to { opacity: 1; } }

/* Toast: small paper dialogue box */
.rpg-toast {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: var(--shadow-hard);
  padding: 10px 16px;
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 700;
}
.rpg-toast strong, .rpg-toast a { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .rpg-btn, .rpg-modal { transition: none; animation: none; }
  .rpg-btn:hover::before, .rpg-btn:focus-visible::before { animation: none; }
  .rpg-btn:active { transform: none; }
}

/* Language menu (tools/build-i18n.mjs writes it where a page has
   <!-- i18n:switcher -->, only when more than one language ships) */
.lang-switch { position: relative; flex: 0 0 auto; font-family: var(--font-ui); font-size: 12px; }
.lang-switch > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 4px 10px;
  color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary::after { content: '▾'; font-size: 9px; }
.lang-switch[open] > summary::after { content: '▴'; }
.lang-switch ul {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 1000;
  min-width: 160px; margin: 0; padding: 6px 0; list-style: none;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow-hard);
}
.lang-switch li a {
  display: block; padding: 6px 14px;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.lang-switch li a:hover, .lang-switch li a:focus-visible { background: var(--l3); }
.lang-switch li a[aria-current="page"] { font-weight: 700; }
.lang-switch li a[aria-current="page"]::before { content: '▶ '; color: var(--seal); font-size: 9px; }

/* One-line "also in your language" offer (i18n.js), dismissible */
.lang-banner {
  position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 10000;
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 32px); padding: 8px 8px 8px 16px;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: var(--shadow-hard);
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
}
.lang-banner a { color: var(--ink); }
.lang-banner-close {
  min-width: 32px; min-height: 32px; padding: 0;
  background: none; border: 0; color: var(--ink);
  font: inherit; font-size: 16px; cursor: pointer;
}