@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap");
      :root { --bg: #2c2f36; --panel: #373b44; --text: #eef0f4; --muted: #9aa1b0; --accent: #ff2e7e; --pink: #ff4d9d; --purple: #a25cff; }
      * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
      html, body { margin: 0; background: radial-gradient(1000px 600px at 50% -10%, #383c45 0%, var(--bg) 60%); color: var(--text); font-family: "Rajdhani", system-ui, sans-serif; }
      a { color: var(--accent); text-decoration: none; font-weight: 600; }
      .wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 0.9rem 1rem 2rem; gap: 0.8rem; }
      .back-link { position: fixed; top: 10px; left: 10px; z-index: 30; font-size: 0.85rem; }
      h1.title { font-size: 2.1rem; font-weight: 800; margin: 0; }
      .subtitle { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.85rem; }
      .boards { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
      .board-col { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
      .hud { width: 100%; display: flex; flex-direction: column; gap: 0.35rem; }
      .hud-row { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; }
      .hud .name { font-weight: 800; font-size: 1.05rem; }
      .hud .wins { color: var(--purple); font-weight: 800; }
      .pmute { background: none; border: 1px solid #565b68; border-radius: 6px; padding: 1px 5px; font-size: 0.85rem; line-height: 1.3; cursor: pointer; opacity: 0.85; }
      .pmute:hover { border-color: #7a8090; opacity: 1; }
      .pmute.off { opacity: 0.5; border-color: #4a4f5b; }
      .stat { font-size: 0.85rem; color: var(--muted); }
      .stat b { color: var(--text); font-variant-numeric: tabular-nums; }
      .meter { height: 8px; border-radius: 5px; background: #23262e; overflow: hidden; }
      .meter > span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #ffd23f, #ff8c2b); transition: width 0.12s ease; }
      .special { font-size: 0.85rem; min-height: 1.2em; }
      .special b { color: #ffd23f; }
      .stars { font-size: 0.85rem; }
      .bonus-tag { color: #ffd23f; font-weight: 800; }
      canvas.board { background: #20232b; border-radius: 10px; touch-action: none; display: block; }
      .btn { cursor: pointer; background: var(--accent); color: #2a0716; border: none; border-radius: 8px; padding: 0.55rem 1rem; font-family: inherit; font-size: 0.95rem; font-weight: 700; transition: filter 0.15s ease, transform 0.08s ease; }
      .btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
      .btn:active { transform: scale(0.97); }
      .btn.ghost { background: rgba(255,255,255,0.05); color: var(--text); border: 1px solid #565b68; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease; }
      .btn.ghost:hover { filter: none; background: rgba(255,46,126,0.12); border-color: var(--accent); color: var(--accent); }
      .btn.sel { outline: 2px solid #ffd23f; }
      .row { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; align-items: center; }
      .prow { display: flex; gap: 0.5rem; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 0.4rem; }
      .diffsel { background: #2a2d34; color: var(--text); border: 1px solid #565b68; border-radius: 8px; padding: 0.5rem 0.6rem; font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
      .diffsel:focus { outline: 2px solid var(--accent); }
      .overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 1.2rem; background: rgba(8,9,14,0.92); }
      .overlay.hidden { display: none; }
      .card { background: var(--panel); border: 1px solid #474c58; border-radius: 14px; padding: 1.4rem 1.5rem; max-width: 560px; width: 100%; text-align: center; }
      .card h2 { margin: 0 0 0.3rem; font-size: 1.8rem; font-weight: 800; }
      .card p { color: var(--muted); margin: 0.3rem 0 0.9rem; line-height: 1.5; font-size: 0.92rem; }
      .group { margin: 0.7rem 0; }
      .group .lbl { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 0.35rem; }
      .keys { color: var(--muted); font-size: 0.8rem; line-height: 1.7; margin-top: 0.5rem; }
      kbd { background: #2a2d34; border: 1px solid #565b68; border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; font-size: 0.78rem; color: var(--text); }
      details.dict-wrap { text-align: left; margin-top: 0.9rem; background: #262931; border: 1px solid #474c58; border-radius: 10px; padding: 0.4rem 0.85rem; }
      details.dict-wrap summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; padding: 0.35rem 0; list-style: none; }
      details.dict-wrap summary::-webkit-details-marker { display: none; }
      details.dict-wrap summary::after { content: " ▾"; color: var(--muted); }
      details.dict-wrap[open] summary::after { content: " ▴"; }
      .dict-item { font-size: 0.82rem; color: var(--muted); padding: 0.28rem 0; line-height: 1.45; border-top: 1px solid #3a3f49; }
      .dict-item b { color: var(--text); }
      #byline { color: #5a627a; font-size: 75%; margin-top: 0.4rem; }
      /* tasteful overlay entrance (auto-disabled by reduce-motion) */
      .overlay:not(.hidden) .card { animation: drCardRise 0.34s cubic-bezier(0.2,0.8,0.2,1) both; }
      @keyframes drCardRise { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
/* Accessibility: honor prefers-reduced-motion — neutralize animations,
   transitions, and motion effects (pulse, shake, drop, blink, glows). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}