/* =====================================================================
   WASHI: quiet cream paper, sumi ink, one vermilion for the seal and the
   marks, lots of space. Zen Kaku Gothic New for reading, Shippori Mincho for
   titles and figures. The home screen is one column: a red seal beside the
   title, kanji numerals down the side, games as ruled rows with ink icons.
   Spec: docs/themes/washi.md
   ===================================================================== */
:root[data-theme="washi"] {
  color-scheme: light;
  --ink: #262421; --paper: #f8f5ee; --vermilion: #c6412a;
  --bg: #f1ece1; --surface: var(--paper); --surface-2: #e7e0d2;
  --text: var(--ink); --muted: #6b645a; --faint: #7a7266; --border: #d8cfbf; --rule: var(--ink);
  --accent: var(--vermilion);
  --primary: var(--ink); --primary-strong: #000; --primary-contrast: var(--paper); --primary-soft: #e7e0d2;
  --danger: #b8321d; --danger-soft: #f3d6cc; --success: #4a6b3a;
  --radius: 0px; --r-ctl: 3px; --r-ctl-in: 2px; --r-dialog: 4px; --r-menu: 4px; --r-board: 2px; --r-cell: 2px; --r-pill: 2px;
  --content-w: 760px;
  --shadow: none;
  --dialog-shadow: 0 30px 80px rgba(38, 36, 33, .2);
  --menu-shadow: 0 20px 50px rgba(38, 36, 33, .16);
  --overlay: rgba(38, 36, 33, .3);
  --font: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --font-mono: var(--font-display);
  --toast-bg: var(--ink); --toast-fg: var(--bg); --toast-action: #f2b8a8;
  --record-bg: var(--vermilion); --record-fg: #fff;
  /* 2048 */
  --g-board: #d6ccb9; --g-slot: rgba(248, 245, 238, .55);
  --t2: #f8f5ee; --t4: #ece4d4; --t8: #dccdb0; --t16: #c9ad80; --t32: #ad8a5d; --t64: #7f6548;
  --t128: #2f4f7f; --t256: #264169; --t512: #1c3252; --t1024: #c6412a; --t2048: #a32f1b;
  --t-ink: var(--ink); --t-paper: var(--paper); --t8-fg: var(--ink); --t16-fg: var(--ink);
  /* memory grid */
  --flash: var(--ink); --tile: #e7e0d2;
  /* card table: moss felt with a faint dot, seigaiha card backs */
  --table-bg: radial-gradient(rgba(248, 245, 238, .05) .7px, transparent .7px) 0 0 / 6px 6px, #4a5a4d;
  --table-frame: 0 0 0 1px #c3b8a6;
  --slot-line: rgba(248, 245, 238, .3);
  --card-paper: #fbf7ed; --card-r: .04;
  --card-shadow: 0 0 0 1px rgba(38, 36, 33, .3), 0 1px 3px rgba(38, 36, 33, .16);
  --court-panel: #f2e8d8; --court-rule: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent);
  --suit-red: var(--vermilion); --suit-black: var(--ink);
  --card-back-art:
    repeating-radial-gradient(circle at 50% 100%, transparent 0 3px, rgba(251, 247, 237, .22) 3px 4px, transparent 4px 8px),
    radial-gradient(circle at 50% 40%, #3c608f, #2f4f7f);
  --back-edge: #fbf7ed; --back-edge-w: .05; --back-shadow: 0 0 0 1px rgba(38, 36, 33, .32);
}
[data-theme="washi"] ::selection { background: #f3d5ca; }
/* the backdrop: ink-wash mountains, mist and falling petals (js/backdrops/washi.js); faint over the content column */
[data-theme="washi"] .backdrop { --veil: .6; }

/* ---------- chrome ---------- */
[data-theme="washi"] .topbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--border); }
[data-theme="washi"] body[data-route="home"] .topbar { border-bottom-color: transparent; }
[data-theme="washi"] .brand { font-size: 1.25rem; font-weight: 700; letter-spacing: .03em; }
[data-theme="washi"] body[data-route="home"] .brand { visibility: hidden; }
[data-theme="washi"] .main-nav a { padding: 7px 10px; border-radius: 0; color: var(--muted); font-weight: 400; letter-spacing: .05em; }
[data-theme="washi"] .main-nav a:hover { background: transparent; color: var(--text); }
[data-theme="washi"] .main-nav a[aria-current="true"] { background: transparent; color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
[data-theme="washi"] .theme-opt .ico { color: var(--accent); }

/* ---------- controls ---------- */
[data-theme="washi"] .btn { font-weight: 700; letter-spacing: .04em; }
[data-theme="washi"] .btn-primary:hover:not(:disabled) { background: #000; }
[data-theme="washi"] .btn-danger { color: var(--danger); }
[data-theme="washi"] .segmented { padding: 0; gap: 4px; background: transparent; }
[data-theme="washi"] .segmented button { padding: 7px 10px; border-radius: 0; color: var(--muted); letter-spacing: .05em; }
[data-theme="washi"] .segmented button[aria-pressed="true"] { background: transparent; color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
[data-theme="washi"] .stat { background: transparent; border: 0; padding: 0 8px; }
[data-theme="washi"] .stat-label { font-weight: 400; letter-spacing: .2em; }
[data-theme="washi"] .stat-value { font-weight: 700; }
[data-theme="washi"] .tool { color: var(--text); font-weight: 400; letter-spacing: .06em; }
[data-theme="washi"] .tool[aria-pressed="true"] { background: transparent; color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
[data-theme="washi"] .tool .badge { background: var(--accent); color: #fff; }
[data-theme="washi"] .field label { font-weight: 400; letter-spacing: .2em; font-size: .72rem; text-transform: uppercase; }
[data-theme="washi"] .field input { border-color: var(--border); background: var(--paper); }
[data-theme="washi"] .switch { width: 40px; height: 22px; border-radius: 2px; background: transparent; box-shadow: inset 0 0 0 1px #bcb19d; }
[data-theme="washi"] .switch::before { top: 4px; left: 4px; width: 14px; height: 14px; border-radius: 1px; background: var(--muted); box-shadow: none; }
[data-theme="washi"] .switch[aria-checked="true"] { background: var(--paper); box-shadow: inset 0 0 0 1px var(--accent); }
[data-theme="washi"] .switch[aria-checked="true"]::before { transform: translateX(18px); background: var(--accent); }
[data-theme="washi"] :is(.check input, .range) { accent-color: var(--accent); }

/* ---------- surfaces, dialog, toast ---------- */
[data-theme="washi"] .box { border: 0; background: var(--surface); padding: 24px; }
[data-theme="washi"] .box > h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; }
[data-theme="washi"] .dialog { padding: 28px; }
[data-theme="washi"] .dialog h2, [data-theme="washi"] .settings-title { font-size: 1.45rem; letter-spacing: .03em; }
[data-theme="washi"] .rules, [data-theme="washi"] .dialog p { line-height: 1.75; }
[data-theme="washi"] .dialog .stat { background: var(--bg); }
[data-theme="washi"] .record { letter-spacing: .06em; }
[data-theme="washi"] #toast { letter-spacing: .03em; }
[data-theme="washi"] .install-banner { background: var(--surface); border-radius: 0; margin-bottom: 28px; }
[data-theme="washi"] .offline-badge { letter-spacing: .12em; }
[data-theme="washi"] .drawer { padding: 28px; }
[data-theme="washi"] .setting-text strong { font-weight: 700; letter-spacing: .03em; }
[data-theme="washi"] .setting-text small { line-height: 1.6; }
[data-theme="washi"] .icon-tile { border: 0; background: var(--surface); letter-spacing: .06em; }
[data-theme="washi"] .theme-btn .theme-swatch { border-radius: 3px; }
[data-theme="washi"] .swatch-item i { border-radius: 2px; }

/* ---------- home: one quiet column ---------- */
[data-theme="washi"] #home { padding-top: clamp(20px, 7vw, 72px); }
[data-theme="washi"] .home-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "seal title" "seal meta" ". intro";
  column-gap: 22px; align-items: center;
  margin-bottom: clamp(36px, 7vw, 64px);
}
/* the seal: one kanji naming what the product is about, set in data-seal
   (this reference uses 色, colour) */
[data-theme="washi"] .hero-art {
  grid-area: seal; align-self: start;
  display: grid; place-items: center;
  width: 62px; height: 62px;
  border-radius: 5px;
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 5px rgba(248, 245, 238, .85);
  transform: rotate(-3deg);
}
[data-theme="washi"] .hero-art i { display: none; }
[data-theme="washi"] .hero-art::before { content: attr(data-seal); color: #f8f5ee; font: 700 2.1rem/1 var(--font-display); }
[data-theme="washi"] .hero-title { grid-area: title; display: block; font-family: var(--font-display); font-size: clamp(2rem, 6.4vw, 3.3rem); font-weight: 700; line-height: 1.1; letter-spacing: .02em; }
[data-theme="washi"] .hero-meta { grid-area: meta; display: flex; gap: 18px; margin-top: 8px; color: var(--muted); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; }
[data-theme="washi"] .date-long, [data-theme="washi"] .meta-note { display: none; }
[data-theme="washi"] .intro { grid-area: intro; max-width: 40ch; margin: 28px 0 0; font-size: .98rem; line-height: 1.9; }

/* section heads: small spaced Mincho capitals, count after a dot, note at the right */
[data-theme="washi"] .section-head { align-items: baseline; gap: 4px 12px; margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
[data-theme="washi"] .section-title { font-size: .9rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
[data-theme="washi"] .section-count { display: inline; color: var(--faint); font-size: .8rem; letter-spacing: .08em; }
[data-theme="washi"] .section-count::before { content: "· "; }
[data-theme="washi"] .section-note { margin-left: auto; font-size: .75rem; letter-spacing: .1em; }
[data-theme="washi"] .page > .section-head { margin-bottom: 18px; }
[data-theme="washi"] .home-section + .home-section { margin-top: 48px; }

[data-theme="washi"] .game-list { display: block; }
[data-theme="washi"] .home-section.untitled .game-list { border-top: 1px solid var(--border); }
[data-theme="washi"] .game-card {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  grid-template-areas: "num name icon" "num desc icon" "num status icon";
  gap: 0 20px; align-items: center;
  padding: 26px 12px 26px 4px;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: transparent; box-shadow: none;
  transition: background-color .3s ease, padding .3s ease;
}
[data-theme="washi"] .game-card:hover { background: var(--surface); padding-left: 14px; transform: none; }
[data-theme="washi"] .game-card:active { transform: none; }
[data-theme="washi"] .game-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
[data-theme="washi"] .game-meta { display: contents; }
[data-theme="washi"] .game-num { grid-area: num; display: block; align-self: center; text-align: center; font-size: 0; }
[data-theme="washi"] .game-num::before { content: attr(data-kanji); color: var(--accent); font: 700 2.3rem/1 var(--font-display); }
[data-theme="washi"] .game-meta h3 { grid-area: name; font-size: 1.35rem; font-weight: 700; line-height: 1.25; letter-spacing: .04em; }
[data-theme="washi"] .game-meta p { grid-area: desc; margin-top: 6px; font-size: .88rem; line-height: 1.65; }
[data-theme="washi"] .game-status { grid-area: status; margin-top: 8px; color: var(--accent); font-weight: 400; letter-spacing: .08em; }
[data-theme="washi"] .game-card .game-icon { grid-area: icon; width: 44px; height: 44px; background: transparent; box-shadow: none; border-radius: 0; color: var(--bg); opacity: .78; }
[data-theme="washi"] .game-icon svg { width: 40px; height: 40px; }
[data-theme="washi"] .game-icon svg [fill="#fff"] { fill: var(--text); }
[data-theme="washi"] .game-icon svg [stroke="#fff"] { stroke: var(--text); }
[data-theme="washi"] .kind-line .game-card .game-icon { color: var(--text); }
[data-theme="washi"] .kind-line .game-card .game-icon svg { width: 34px; height: 34px; }
/* art panels: only the last card of the art, centred and tilted like a stamp */
[data-theme="washi"] .kind-art .game-card { padding: 22px 12px 22px 4px; }
[data-theme="washi"] .kind-art .game-card .game-icon { width: 46px; height: 64px; aspect-ratio: auto; overflow: visible; opacity: 1; }
[data-theme="washi"] .kind-art .game-icon .card:not(:last-child) { display: none; }
[data-theme="washi"] .kind-art .game-icon .tile-art-inner { width: 40px !important; height: 56px !important; }
[data-theme="washi"] .kind-art .game-icon .card { left: 0 !important; top: 0 !important; transform: rotate(-4deg) !important; }
[data-theme="washi"] .home-footer { margin-top: 36px; }
[data-theme="washi"] .icon-list .game-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name icon"; padding: 16px 8px; }

/* ---------- footer ---------- */
[data-theme="washi"] .site-footer { letter-spacing: .06em; }
[data-theme="washi"] .footer-brand { font-size: 1.1rem; letter-spacing: .04em; }
[data-theme="washi"] .footer-brand::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 1px; background: var(--accent); transform: rotate(-3deg); }

/* ---------- game pieces ---------- */
[data-theme="washi"] .keypad button { background: var(--surface); font-weight: 700; }
[data-theme="washi"] .keypad button:hover { background: var(--surface-2); }
[data-theme="washi"] .keypad button.accent { background: var(--ink); border-color: var(--ink); color: var(--paper); }

@media (max-width: 560px) {
  [data-theme="washi"] .home-hero { column-gap: 16px; }
  [data-theme="washi"] .hero-art { width: 50px; height: 50px; }
  [data-theme="washi"] .hero-art::before { font-size: 1.7rem; }
  [data-theme="washi"] .intro { grid-column: 1 / -1; }
  [data-theme="washi"] .game-card { grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 0 14px; padding: 22px 4px; }
  [data-theme="washi"] .game-num::before { font-size: 1.8rem; }
  [data-theme="washi"] .game-card .game-icon { width: 34px; height: 34px; }
  [data-theme="washi"] .game-icon svg { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="washi"] .game-card { transition: none; }
}

/* ---------- hover: everything clickable has to visibly react ---------- */
/* ink edges; the primary button takes the red of the seal */
[data-theme="washi"] :is(.btn, .theme-btn, .keypad button):hover:not(:disabled) { border-color: var(--ink); }
[data-theme="washi"] :is(.btn-primary, .keypad button.accent):hover:not(:disabled) { background: var(--vermilion); border-color: var(--vermilion); color: var(--paper); }
[data-theme="washi"] .btn-danger:hover:not(:disabled) { border-color: var(--danger); }
[data-theme="washi"] :is(.icon-btn, .tool):hover:not(:disabled), [data-theme="washi"] .theme-opt:hover strong { color: var(--accent); }
[data-theme="washi"] .game-card:hover { box-shadow: inset 3px 0 0 var(--accent); }