/* =============================================================
   wordle.css — Kana Wordle (/japanese/wordle/)
   Depends on theme.css tokens + japanese.css layout + modal.css.
   japanese.css references --color-* tokens that are undefined
   site-wide; we define them here, scoped to the game page + its
   modals, so the hub's appearance is unchanged.
   ============================================================= */

.wd-page, .wd-modal {
  --color-bg: #f3f4f6;
  --color-surface: #ffffff;
  --color-surface-raised: #f9fafb;
  --color-border: #d1d5db;
  --color-text: #111827;
  --color-text-primary: #111827;
  --color-text-secondary: #4b5563;
  --color-accent: #1a755e;

  --font-kana: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic",
               "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;

  /* tile / key states — white text needs ≥4.5:1 → darker greens than the hub's #22c55e */
  --wd-correct: #15803d;
  --wd-present: #b45309;
  --wd-absent:  #787c7e;
  --wd-close:   #d97706;
  --wd-empty-border: #d1d5db;
  --wd-filled-border: #9ca3af;
  --wd-key-bg: #d3d6da;
  --wd-key-text: #111827;
  --wd-on-state: #ffffff;
  --wd-tile: clamp(44px, 12vw, 60px);
  --wd-gap: 6px;
}
body.dark-mode .wd-page, body.dark-mode .wd-modal {
  --color-bg: #181818;
  --color-surface: #1f2937;
  --color-surface-raised: #273244;
  --color-border: #3a4150;
  --color-text: #eeeeee;
  --color-text-primary: #f3f4f6;
  --color-text-secondary: #9ca3af;
  --color-accent: #3ba78c;

  --wd-correct: #1a9a4a;
  --wd-present: #c07a12;
  --wd-absent:  #3a3a3c;
  --wd-close:   #d97706;
  --wd-empty-border: #3a3a3c;
  --wd-filled-border: #565758;
  --wd-key-bg: #818384;
  --wd-key-text: #ffffff;
}
/* High-contrast (colorblind) palette: orange = correct, blue = present */
body.wd-hc .wd-page, body.wd-hc .wd-modal {
  --wd-correct: #f5793a;
  --wd-present: #2563eb;
  --wd-close:   #85c0f9;
}

/* ── Layout ──────────────────────────────────────────────────── */
.wd-crumbs { margin: 0 0 0.75rem; }
.wd-crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.82rem; color: var(--color-text-secondary); }
.wd-crumbs a { color: var(--color-text-secondary); text-decoration: none; }
.wd-crumbs a:hover { text-decoration: underline; }
.wd-crumbs [aria-current] { color: var(--color-text-primary); }
.wd-page { max-width: 560px; padding-bottom: 1rem; }
.wd-page main { color: var(--color-text-primary); }

.wd-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.25rem 0 0.75rem; border-bottom: 1px solid var(--color-border); margin-bottom: 0.75rem;
}
.wd-bar h1 {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; font-weight: 700; margin: 0;
  display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-primary);
}
.wd-chip {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--color-surface-raised);
  border: 1px solid var(--color-border); color: var(--color-text-secondary); white-space: nowrap;
}
.wd-icons { display: flex; gap: 0.25rem; }
body .wd-page button.wd-icon-btn {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-primary); cursor: pointer;
  font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center;
}
body .wd-page button.wd-icon-btn:hover { border-color: var(--color-accent); background: var(--color-surface); color: var(--color-text-primary); transform: none; }

.wd-modes { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; }
body .wd-page button.wd-mode-btn {
  flex: 1; padding: 0.45rem 0.5rem; border-radius: 8px; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-secondary); font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
body .wd-page button.wd-mode-btn:hover { background: var(--color-surface); color: var(--color-text-primary); transform: none; }
body .wd-page button.wd-mode-btn[aria-pressed="true"], body .wd-page button.wd-mode-btn[aria-pressed="true"]:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.wd-clue {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px;
  padding: 0.6rem 0.9rem; margin-bottom: 0.75rem; min-height: 3.2rem;
}
.wd-clue-eyebrow { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); }
.wd-clue-text { font-size: 1rem; line-height: 1.4; color: var(--color-text-primary); margin: 0.15rem 0 0; }
.wd-clue-text.wd-clue-hidden { font-style: italic; color: var(--color-text-secondary); }
.wd-bonus { font-size: 0.85rem; color: var(--color-text-secondary); margin: 0.4rem 0 0; }
.wd-bonus b { color: var(--color-text-primary); font-family: var(--font-kana); }

/* ── Grid ────────────────────────────────────────────────────── */
.wd-grid {
  display: grid; grid-template-rows: repeat(6, var(--wd-tile)); gap: var(--wd-gap);
  justify-content: center; margin: 0 auto 0.75rem; outline: none;
}
.wd-grid:focus-visible { box-shadow: 0 0 0 3px var(--color-accent); border-radius: 8px; }
.wd-row { display: grid; grid-template-columns: repeat(4, var(--wd-tile)); gap: var(--wd-gap); }
.wd-tile {
  width: var(--wd-tile); height: var(--wd-tile); position: relative;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-kana); font-size: calc(var(--wd-tile) * 0.5); font-weight: 700; line-height: 1;
  border: 2px solid var(--wd-empty-border); border-radius: 6px; color: var(--color-text-primary);
  user-select: none; box-sizing: border-box;
}
.wd-tile[data-filled="true"] { border-color: var(--wd-filled-border); }
.wd-tile[data-state="correct"], .wd-tile[data-state="present"], .wd-tile[data-state="absent"] {
  border-color: transparent; color: var(--wd-on-state);
}
.wd-tile[data-state="correct"] { background: var(--wd-correct); }
.wd-tile[data-state="present"] { background: var(--wd-present); }
.wd-tile[data-state="absent"]  { background: var(--wd-absent); }
.wd-tile[data-hint="close"] { box-shadow: inset 0 0 0 3px var(--wd-close); }
.wd-tile[data-hint]::after {
  position: absolute; top: 1px; right: 4px; font-size: calc(var(--wd-tile) * 0.26); font-weight: 700;
  font-family: system-ui, sans-serif; opacity: 0.95;
}
.wd-tile[data-hint="close"]::after { content: "≈"; color: var(--wd-close); }
.wd-tile[data-hint="row"]::after   { content: "↕"; }
.wd-tile[data-hint="col"]::after   { content: "↔"; }
.wd-page[data-learner-hints="false"] .wd-tile[data-hint="row"]::after,
.wd-page[data-learner-hints="false"] .wd-tile[data-hint="col"]::after { content: none; }

/* ── Input strip ─────────────────────────────────────────────── */
.wd-input {
  display: flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 2rem;
  font-size: 0.9rem; color: var(--color-text-secondary); margin-bottom: 0.6rem;
}
.wd-input-kana { font-family: var(--font-kana); color: var(--color-text-primary); font-weight: 600; letter-spacing: 0.1em; }
.wd-pending { font-family: var(--font-code, monospace); color: var(--color-text-secondary); }
.wd-pending.wd-pending--invalid { color: #ef4444; text-decoration: underline wavy; }
.wd-input-placeholder { font-style: italic; }
.wd-toast-inline {
  display: inline-block; font-size: 0.85rem; padding: 0.2rem 0.6rem; border-radius: 6px;
  background: var(--color-text-primary); color: var(--color-bg); font-weight: 600;
}

/* ── Keyboard ────────────────────────────────────────────────── */
.wd-kb {
  padding: 0.5rem 0 0.6rem;
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; max-width: 520px; margin: 0 auto;
}
body .wd-page button.wd-key {
  height: clamp(36px, 6vh, 46px); min-width: 0; border: 0; border-radius: 5px; background: var(--wd-key-bg); color: var(--wd-key-text);
  font-family: var(--font-kana); font-size: 1.05rem; font-weight: 600; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s; transform: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
body .wd-page button.wd-key:hover { filter: brightness(1.08); transform: none; }
body .wd-page button.wd-key:not([data-state]):hover { background: var(--wd-key-bg); color: var(--wd-key-text); }
body .wd-page button.wd-key[data-state="correct"]:hover { background: var(--wd-correct); }
body .wd-page button.wd-key[data-state="present"]:hover { background: var(--wd-present); }
body .wd-page button.wd-key[data-state="absent"]:hover  { background: var(--wd-absent); }
body .wd-page button.wd-key[data-state="close"]:hover   { background: var(--wd-key-bg); }
body .wd-page button.wd-key:active { transform: scale(0.96); }
body .wd-page button.wd-key:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
body .wd-page button.wd-key--spacer { visibility: hidden; pointer-events: none; }
body .wd-page button.wd-key[data-state="correct"] { background: var(--wd-correct); color: var(--wd-on-state); }
body .wd-page button.wd-key[data-state="present"] { background: var(--wd-present); color: var(--wd-on-state); }
body .wd-page button.wd-key[data-state="absent"]  { background: var(--wd-absent);  color: var(--wd-on-state); opacity: 0.85; }
body .wd-page button.wd-key[data-state="close"]   { box-shadow: inset 0 0 0 3px var(--wd-close); }
body .wd-page button.wd-key { position: relative; }
body .wd-page button.wd-key[data-variant]::after {
  content: ""; position: absolute; right: 3px; bottom: 3px; width: 7px; height: 7px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.35);
}
body .wd-page button.wd-key[data-variant="correct"]::after { background: var(--wd-correct); }
body .wd-page button.wd-key[data-variant="present"]::after { background: var(--wd-present); }
body .wd-page button.wd-key[data-variant="close"]::after   { background: var(--wd-close); }
body .wd-page button.wd-key[data-variant="absent"]::after  { background: var(--wd-absent); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.45); }
body .wd-page button.wd-key--wide { grid-column: span 3; font-family: 'Inter', system-ui, sans-serif; font-size: 0.85rem; }
body .wd-page button.wd-key--enter { grid-column: span 4; font-family: 'Inter', system-ui, sans-serif; font-size: 0.85rem; background: var(--color-accent); color: #fff; }
body .wd-page button.wd-key--mod { font-size: 0.95rem; }

/* ── Banners ─────────────────────────────────────────────────── */
.wd-banner {
  display: flex; gap: 0.5rem; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.9rem; border-radius: 10px; margin-bottom: 0.75rem;
  background: var(--color-accent); color: #fff; font-weight: 600; font-size: 0.9rem;
}
body .wd-page .wd-banner button { border: 0; border-radius: 6px; padding: 0.35rem 0.7rem; background: #fff; color: var(--color-accent); font-weight: 700; cursor: pointer; }

/* ── About / SEO section ─────────────────────────────────────── */
.wd-about { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: 0.95rem; line-height: 1.6; }
.wd-about h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; color: var(--color-text-primary); margin: 1.25rem 0 0.4rem; }
.wd-about ul { padding-left: 1.2rem; }
.wd-about details { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.5rem 0.8rem; margin: 0.4rem 0; background: var(--color-surface); }
.wd-about summary { cursor: pointer; font-weight: 600; color: var(--color-text-primary); }
.wd-about a { color: var(--color-accent); }
.wd-example-row { display: flex; gap: 4px; margin: 0.3rem 0; }
.wd-example-row .wd-tile { --wd-tile: 38px; font-size: 1.1rem; }
kbd.wd-kbd { font-family: var(--font-code, monospace); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 4px; padding: 0 0.3rem; font-size: 0.85em; }

/* ── Modals (content rendered inside src/ui/modal.js shells) ─── */
.wd-modal { color: var(--text-primary, inherit); }
.wd-help-lead { font-size: 1rem; margin: 0 0 0.25rem; }
.wd-modal h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; font-family: 'Space Grotesk', sans-serif; font-size: 1rem; margin: 1.1rem 0 0.5rem; padding-top: 0.9rem; border-top: 1px solid var(--color-border); }
.wd-help-answer { font-size: 0.8rem; font-weight: 500; color: var(--color-text-secondary); }
.wd-help-answer b { font-family: var(--font-kana); color: var(--color-text-primary); }
.wd-help-list { margin: 0; padding-left: 1.1rem; line-height: 1.7; }
.wd-help-list kbd { margin-right: 0.15rem; }
.wd-pair { white-space: nowrap; margin-right: 0.5rem; }
.wd-help-list li + li { margin-top: 0.15rem; }
.wd-modal .wd-example-row { gap: 6px; margin: 0.4rem 0 0.3rem; }
.wd-modal .wd-example-row .wd-tile { --wd-tile: 46px; font-size: 1.4rem; }
.wd-help-caption { margin: 0 0 0.6rem; padding-left: 1.1rem; font-size: 0.9rem; line-height: 1.5; color: var(--color-text-secondary); }
.wd-help-caption b[lang="ja"] { font-family: var(--font-kana); color: var(--color-text-primary); }
.wd-help-caption-note { font-size: 0.8rem; color: var(--color-text-secondary); margin: 0.2rem 0 0; }
.wd-help-foot { font-size: 0.9rem; color: var(--color-text-secondary); margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
.wd-modal p { margin: 0.5rem 0; line-height: 1.5; }
.wd-modal h3 { margin: 1rem 0 0.4rem; font-size: 1rem; }
.wd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; text-align: center; margin: 0.5rem 0 1rem; }
.wd-stat-num { font-size: 1.8rem; font-weight: 700; font-family: 'Space Grotesk', sans-serif; line-height: 1.1; }
.wd-stat-label { font-size: 0.7rem; color: var(--color-text-secondary); }
.wd-dist { display: grid; gap: 4px; margin-bottom: 1rem; }
.wd-dist-row { display: grid; grid-template-columns: 1.2rem 1fr; gap: 0.4rem; align-items: center; font-size: 0.85rem; }
.wd-dist-bar { height: 1.3rem; min-width: 1.6rem; background: var(--wd-absent); color: #fff; font-weight: 700; font-size: 0.8rem; padding: 0 0.4rem; display: flex; align-items: center; justify-content: flex-end; border-radius: 3px; }
.wd-dist-bar--hit { background: var(--wd-correct); }
.wd-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
body .wd-page button.wd-btn, body .wd-modal button.wd-btn {
  flex: 1; min-width: 120px; padding: 0.6rem 0.9rem; border-radius: 8px; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-primary); font-weight: 600; cursor: pointer; font-size: 0.9rem;
}
body .wd-page button.wd-btn--primary, body .wd-modal button.wd-btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
body .wd-page button.wd-btn:hover, body .wd-modal button.wd-btn:hover { filter: brightness(1.05); background: var(--color-surface); color: var(--color-text-primary); transform: none; }
body .wd-page button.wd-btn--primary:hover, body .wd-modal button.wd-btn--primary:hover { background: var(--color-accent); color: #fff; }
body .wd-modal button.wd-danger:hover { background: transparent; color: #ef4444; }
.wd-countdown { text-align: center; font-size: 0.85rem; color: var(--color-text-secondary); margin-top: 0.5rem; }
.wd-countdown b { font-family: var(--font-code, monospace); font-size: 1rem; color: var(--color-text-primary); }
.wd-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); }
.wd-toggle:last-of-type { border-bottom: 0; }
.wd-toggle-label b { display: block; font-size: 0.95rem; }
.wd-toggle-label span { font-size: 0.8rem; color: var(--color-text-secondary); }
.wd-toggle input { width: 22px; height: 22px; accent-color: var(--color-accent); flex: none; }
body .wd-page button.wd-danger, body .wd-modal button.wd-danger { color: #ef4444; background: transparent; border: 1px solid #ef4444; }

.wd-card { text-align: center; padding: 0.5rem 0; }
.wd-card-result { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
.wd-card-kana { font-family: var(--font-kana); font-size: 2.6rem; font-weight: 700; line-height: 1.2; }
.wd-card-kanji { font-family: var(--font-kana); font-size: 1.2rem; color: var(--color-text-secondary); }
.wd-card-romaji { font-family: var(--font-code, monospace); font-size: 0.95rem; color: var(--color-text-secondary); }
.wd-card-meaning { font-size: 1.05rem; font-weight: 600; margin: 0.4rem 0; }
.wd-card-meta { display: flex; gap: 0.35rem; justify-content: center; margin: 0.3rem 0 0.6rem; }
.wd-card-example { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 8px; padding: 0.5rem 0.75rem; text-align: left; font-size: 0.9rem; }
.wd-card-example .ja { font-family: var(--font-kana); font-size: 1rem; color: var(--color-text-primary); }
.wd-card-example .en { color: var(--color-text-secondary); }
.wd-card-note { font-size: 0.8rem; color: var(--color-text-secondary); margin-top: 0.4rem; }
.wd-listen { margin: 0.5rem 0; }

.wd-words { display: grid; gap: 0.35rem; max-height: 50vh; overflow-y: auto; }
.wd-word-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 0.6rem; align-items: center; padding: 0.4rem 0.5rem; border-radius: 8px; background: var(--color-surface-raised); font-size: 0.9rem; }
.wd-word-row .kana { font-family: var(--font-kana); font-weight: 700; font-size: 1.1rem; }
.wd-word-row .meaning { color: var(--color-text-secondary); font-size: 0.85rem; }
.wd-word-row .wl { font-family: var(--font-code, monospace); font-size: 0.75rem; }
.wd-word-row .wl--lost { color: #ef4444; }
.wd-word-row .wl--won { color: var(--wd-correct); }
body .wd-modal .wd-word-row button { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 6px; cursor: pointer; padding: 0.2rem 0.4rem; color: var(--color-text-primary); }
.wd-empty { color: var(--color-text-secondary); text-align: center; padding: 1rem 0; }

/* ── Animations ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .wd-tile.wd-pop { animation: wd-pop 0.1s ease-in-out; }
  .wd-row.wd-shake { animation: wd-shake 0.5s; }
  .wd-tile.wd-flip { animation: wd-flip 0.5s ease-in-out; animation-delay: var(--wd-delay, 0ms); animation-fill-mode: both; }
  .wd-tile.wd-bounce { animation: wd-bounce 1s ease-in-out; animation-delay: var(--wd-delay, 0ms); }
}
@media (prefers-reduced-motion: reduce) {
  .wd-row.wd-shake .wd-tile { border-color: #ef4444; }
  .wd-key { transition: none; }
}
@keyframes wd-pop   { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes wd-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@keyframes wd-flip  { 0% { transform: rotateX(0); } 50% { transform: rotateX(-90deg); } 100% { transform: rotateX(0); } }
@keyframes wd-bounce { 0%, 20% { transform: translateY(0); } 40% { transform: translateY(-14px); } 50% { transform: translateY(2px); } 60% { transform: translateY(-8px); } 80% { transform: translateY(1px); } 100% { transform: translateY(0); } }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-height: 760px) {
  .wd-page { --wd-tile: clamp(38px, 10.5vw, 60px); --wd-gap: 5px; }
  .wd-crumbs { display: none; }
  .wd-bar { padding-bottom: 0.4rem; margin-bottom: 0.5rem; }
  .wd-modes, .wd-clue { margin-bottom: 0.5rem; }
  .wd-clue { padding: 0.45rem 0.8rem; min-height: 0; }
  .wd-input { min-height: 1.6rem; margin-bottom: 0.3rem; }
  body .wd-page button.wd-key { height: 36px; }
}
@media (max-width: 600px) {
  .wd-page { padding-left: 12px; padding-right: 12px; }
  .wd-bar h1 { font-size: 1.15rem; }
  .wd-stats { grid-template-columns: repeat(2, 1fr); }
  .wd-key { font-size: 1rem; }
}
.wd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }