*{box-sizing:border-box}
:root{--green:#6aaa64;--yellow:#c9b458;--gray:#787c7e;--tile:#d3d6da;--tile-border:#d3d6da;--bg:#f7f7f8;--fg:#111;--card:#ffffff;--card-border:#e6e6e6;--invalid:#d64545;--ghost:#eef2f5;--ghost-border:#d6dadc;--kbd-bg-grad:linear-gradient(180deg, rgba(247,247,248,0) 0%, rgba(247,247,248,0.98) 30%, rgba(247,247,248,1) 100%)}
html[data-theme="dark"]{--green:#6aaa64;--yellow:#c9b458;--gray:#565a5c;--tile:#3a3d40;--tile-border:#4a4e51;--bg:#121314;--fg:#eaecee;--card:#1a1c1e;--card-border:#2a2d30;--invalid:#c44;--ghost:#232629;--ghost-border:#2f3336;--kbd-bg-grad:linear-gradient(180deg, rgba(18,19,20,0) 0%, rgba(18,19,20,0.98) 30%, rgba(18,19,20,1) 100%)}
html,body{height:100%} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--fg);display:flex;flex-direction:column;align-items:center;min-height:100vh}
header{padding:10px 10px 6px 10px;width:100%;display:flex;justify-content:center}
.header-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;max-width:1100px;width:96%}
.header-wrap img.logo{height:clamp(42px,8vw,76px);width:auto;max-width:48vw;object-fit:contain}
.header-wrap .text-block{display:flex;flex-direction:column;justify-content:center;min-width:220px}
.header-wrap .subtitle{margin:0;color:#666;font-size:clamp(11px,2vw,14px);text-align:left}
.theme-controls{margin-left:auto;display:flex;align-items:center;gap:10px}
.theme-controls .label{font-size:12px;color:#666}
.theme-group{display:inline-flex;background:var(--card);border:1px solid var(--card-border);border-radius:999px;overflow:hidden}
.theme-group label{padding:6px 10px;cursor:pointer;font-size:12px;color:#444}
.theme-group input{display:none}
.theme-group input:checked+span{background:var(--green);color:#fff}
html[data-theme="dark"] .theme-controls .label{color:#aaa}

main{width:min(1100px,96vw);display:flex;flex-direction:column;gap:6px;flex:1}
#boardsWrap{flex:1;min-height:300px;overflow:auto;padding:0 0 260px;border-radius:12px;scroll-behavior:smooth}
#boards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:4px auto 6px;padding:0;max-width:100%}
.board{border:1px solid var(--card-border);border-radius:12px;background:var(--card);padding:10px;transition:opacity .2s ease, filter .2s ease;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.board.locked{opacity:.55; filter:grayscale(.1)}
.board-title{font-weight:700;margin:2px 0 8px 2px;color:#333;font-size:12px}
.board .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.tile{width:38px;height:38px;border:2px solid var(--tile-border);display:flex;align-items:center;justify-content:center;font-weight:800;text-transform:uppercase;font-size:18px;background:#fff;color:#111;border-radius:6px;transition:transform .2s ease,background .15s ease,border-color .15s ease,color .15s ease}
.tile.flip{transform:rotateX(90deg)}
.tile.correct{background:var(--green);color:#fff;border-color:var(--green)}
.tile.present{background:var(--yellow);color:#fff;border-color:var(--yellow)}
.tile.absent{background:var(--gray);color:#fff;border-color:var(--gray)}
.tile.invalid{background:var(--invalid)!important;border-color:var(--invalid)!important;color:#fff!important}
.tile.ghost{background:var(--ghost)!important;color:#111!important;border-color:var(--ghost-border)!important}
#hud{display:flex;align-items:center;justify-content:space-between;margin:0 auto;max-width:700px;padding:0 6px}
#status{font-weight:700}
#resetBtn{padding:8px 12px;border-radius:8px;border:1px solid #ddd;background:#fff;color:#000;cursor:pointer}
#keyboard{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(760px,100vw);background:var(--kbd-bg-grad);padding:8px 6px 16px;display:flex;flex-direction:column;gap:6px;justify-content:center;margin:0 auto;z-index:10;border-top:1px solid #e8e8e8}
.krow{display:flex;gap:6px;justify-content:center}
.key{padding:10px 12px;border-radius:6px;background:#e7ebed;color:#111;cursor:pointer;user-select:none;min-width:34px;text-align:center;font-weight:700; border:1px solid #d6dadc}
.key.correct{background:var(--green);color:#fff;border-color:var(--green)}
.key.present{background:var(--yellow);color:#fff;border-color:var(--yellow)}
.key.absent{background:#c3c7c9;color:#fff;border-color:#c3c7c9}
.key.wide{min-width:68px}
.krow-nav .key{ background:#eef2f5; }
.krow-nav .key.active{ background: var(--green); color:#fff; border-color: var(--green); }
footer{margin:6px 0 12px 0;color:#666;text-align:center}
.disclaimer{color:#666;margin:8px 0 14px 0;font-size:12px;text-align:center;max-width:960px}

@media (max-width:900px){#boards{grid-template-columns:repeat(2,1fr)}.tile{width:34px;height:34px;font-size:16px}}
@media (max-width:520px){#boards{grid-template-columns:1fr}.tile{width:34px;height:34px}}


/* === FIHR v2.7: header, grid, menu, keyboard === */
.sr-only{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.title-banner{ display:block; margin:10px auto 8px; width:min(90vw, 480px); height:auto; pointer-events:none; }
.subtle-version{ margin:2px 0 10px; text-align:center; color:#6b7280; font-size:12px; }

/* Grid centered */
#grid{ display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:flex-start; margin:8px 0 120px; }
#grid .row{ display:grid; grid-template-columns:repeat(5, 48px); gap:8px; }
.tile{ width:48px; height:48px; line-height:48px; border-radius:6px; border:1px solid #d6dadc; text-align:center; font-weight:700; font-size:22px; text-transform:uppercase; background:#fff; }
@media (max-width:520px){ #grid .row{ grid-template-columns:repeat(5,40px); gap:6px; } .tile{ width:40px; height:40px; line-height:40px; font-size:18px; } }

/* Tile states */
.tile.correct{ background:#8b5cf6; color:#fff; border-color:#8b5cf6; }
.tile.present{ background:#06b6d4; color:#fff; border-color:#06b6d4; }
.tile.absent{  background:#334155; color:#fff; border-color:#334155; }

/* Keyboard */
#keyboard{ position:fixed; left:50%; transform:translateX(-50%); bottom:10px; width:100%; max-width:740px; padding:8px 8px 12px; background:#eef2f5; border-top:1px solid #d6dadc; display:flex; flex-direction:column; gap:6px; z-index:30; pointer-events:auto; }
.krow{ display:flex; gap:6px; justify-content:center; }
.key{ padding:10px 12px; border-radius:6px; background:#e7ebed; color:#111; min-width:34px; text-align:center; font-weight:700; border:1px solid #d6dadc; user-select:none; cursor:pointer; }
.key.wide{ min-width:68px; }

/* Menu */
#menu-root{ position:fixed; top:8px; right:10px; z-index:60; }
#menu-btn{ appearance:none; border:1px solid #d6dadc; background:#eef2f5; color:#111; border-radius:999px; padding:4px 10px; font-size:18px; line-height:18px; cursor:pointer; opacity:.9; }
#menu-btn:focus{ outline:2px solid #8b5cf6; outline-offset:2px; }
#menu-panel{ position:absolute; top:30px; right:0; min-width:140px; background:#fff; border:1px solid #d6dadc; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,.08); padding:6px; display:none; }
#menu-panel.open{ display:block; }
#menu-panel .menu-item{ display:block; width:100%; text-align:left; padding:8px 10px; border:none; background:transparent; cursor:pointer; border-radius:8px; font-size:14px; color:#111; }
#menu-panel .menu-item:hover{ background:#f3f5f7; }

/* Toasts */
#toast-container{ position:fixed; top:64px; left:50%; transform:translateX(-50%); z-index:55; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{ background:#111; color:#fff; padding:10px 12px; border-radius:10px; font-size:14px; opacity:0; transform:translateY(-4px); transition:opacity .18s ease, transform .18s ease; box-shadow:0 6px 18px rgba(0,0,0,.18); pointer-events:none; }
.toast.show{ opacity:1; transform:translateY(0); }

/* Flip animation */
@keyframes flip { 0%{transform:rotateX(0deg);} 50%{transform:rotateX(90deg);} 100%{transform:rotateX(0deg);} }
.flip{ animation: flip .6s ease-in-out forwards; }

/* === FIHR v2.8: modal styling === */
#modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.32); z-index:90; display:flex; align-items:center; justify-content:center; padding:16px; }
#modal{ width:min(92vw, 520px); background:#fff; color:#111; border-radius:14px; border:1px solid #e5e7eb; box-shadow:0 16px 40px rgba(0,0,0,.25); padding:16px 18px; animation: modalIn .16s ease-out; }
#modal h3{ margin:0 0 8px; font-size:18px; font-weight:800; }
#modal p{ margin:8px 0; line-height:1.4; }
#modal .actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
#modal .btn{ padding:8px 12px; border-radius:8px; border:1px solid #d6dadc; background:#f5f7f9; cursor:pointer; }
#modal .btn.primary{ background:#8b5cf6; color:#fff; border-color:#8b5cf6; }
@keyframes modalIn{ from{ opacity:.001; transform:translateY(4px);} to{ opacity:1; transform:translateY(0);} }
#menu-root{ z-index:60; }
#toast-container{ z-index:55; }


/* === FIHR v2.9: smaller banner, keyboard palette, legend, key press === */
.title-banner{ width:min(90vw, 420px); }
.key{ background:#f1f5f9; color:#111; border:1px solid #d6dadc; }
.key.correct{ background:#8b5cf6; color:#fff; border-color:#8b5cf6; }
.key.present{ background:#06b6d4; color:#fff; border-color:#06b6d4; }
.key.absent{ background:#334155; color:#fff; border-color:#334155; }

/* Key press animation */
@keyframes keyPress { 0%{ transform:translateY(0) scale(1);} 50%{ transform:translateY(1px) scale(.98);} 100%{ transform:translateY(0) scale(1);} }
.key.press{ animation:keyPress .12s ease-out; }

/* Legend */
.legend{ display:flex; align-items:center; gap:10px; justify-content:center; margin:2px 0 8px; color:#475569; font-size:12px; }
.legend .chip{ width:14px; height:14px; border-radius:4px; display:inline-block; border:1px solid #cbd5e1; }
.legend .chip.correct{ background:#8b5cf6; border-color:#8b5cf6; }
.legend .chip.present{ background:#06b6d4; border-color:#06b6d4; }
.legend .chip.absent{ background:#334155; border-color:#334155; }
.legend em{ font-style:normal; }


/* === FIHR v3.0: dynamic grid, smaller banner, row numbers, legend position === */
:root{ --tile: 48px; --gap: 8px; }
.title-banner{ width:min(90vw, 360px); }
/* Grid uses --tile */
#grid{ display:flex; flex-direction:column; gap:var(--gap); align-items:center; justify-content:flex-start; margin:8px 0 10px; }
#grid .row{ display:grid; grid-template-columns:repeat(5, var(--tile)); gap:var(--gap); }
.tile{ width:var(--tile); height:var(--tile); line-height:var(--tile); position:relative; }
/* Row number on first tile */
.tile.row-label::before{ content: attr(data-rownum); position:absolute; top:4px; left:6px; font-size:12px; color:#94a3b8; font-weight:700; opacity:.9; pointer-events:none; }
/* Legend now below grid */
.legend{ margin:10px 0 90px; font-size:12px; color:#475569; }


/* --- FIHR v3.1: row label tweaks --- */
.tile.row-label::before{
  content: attr(data-rownum);
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:12px;
  color:#cbd5e1;
  font-weight:700;
  opacity:.6;
  pointer-events:none;
}
.tile.has-letter.row-label::before{ display:none; }


/* v4.0.7 controls/hint/spinner/modal/crossed/disabled */
.controls{ display:flex; justify-content:flex-end; align-items:center; margin:.25rem 0 .25rem; }
.hint-btn{ position:relative; border:none; border-radius:6px; padding:.35rem .65rem; font-weight:700; cursor:pointer;
  background:#d3d6da; color:#111; box-shadow:0 3px 0 #b3b6b8; }
.hint-btn:active{ transform:translateY(1px); box-shadow:0 2px 0 #b3b6b8; }
.hint-btn[disabled]{ opacity:.6; cursor:progress; }
.hint-label{ margin:.15rem 0 .35rem; color:#6b7280; font-size:.9rem; font-weight:700; padding:.35rem .65rem; background:#eef2f7; border-radius:6px; }
.hint-btn.loading{ padding-right:28px; }
.hint-btn.loading::after{ content:""; position:absolute; right:8px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; border:2px solid #9aa0a6; border-top-color:transparent; animation:hintspin .8s linear infinite; }
@keyframes hintspin { to { transform:rotate(360deg); } }
.modal.hidden{ display:none; } .modal{ position:fixed; inset:0; z-index:9999; display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.modal-box{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#fff; color:#111; border-radius:10px; padding:1rem 1rem .85rem; width:min(92vw,420px); box-shadow:0 20px 60px rgba(0,0,0,.25); }
.modal-box h2{ margin:0 0 .4rem 0; font-size:1.15rem; }
.modal-box p{ margin:.25rem 0 .9rem 0; line-height:1.35; }
.modal-actions{ display:flex; gap:.5rem; justify-content:flex-end; }
.btn{ border:none; border-radius:8px; padding:.55rem .9rem; font-weight:700; cursor:pointer; }
.btn-primary{ background:#6aaa64; color:#fff; box-shadow:0 3px 0 #538d4e; }
.btn-primary:active{ transform:translateY(1px); box-shadow:0 2px 0 #538d4e; }
.btn-secondary{ background:#d3d6da; color:#111; box-shadow:0 3px 0 #b3b6b8; }
.btn-secondary:active{ transform:translateY(1px); box-shadow:0 2px 0 #b3b6b8; }
.row.crossed{ position:relative; opacity:.45; }
.row.crossed::after{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:#9aa0a6; transform:translateY(-50%); }
.row.crossed .tile{ pointer-events:none; }
#keyboard.disabled{ pointer-events:none; opacity:.6; filter:grayscale(.1); }


/* v4.0.9 — Colorful crossed rows */
.row.crossed .tile{ position:relative; }
.row.crossed .tile::after{
  content:"";
  position:absolute; inset:0;
  border-radius:8px;
  background: repeating-linear-gradient(-45deg,
      rgba(255,92,92,.18) 0 10px,
      rgba(255,186,73,.18) 10px 20px,
      rgba(255,246,117,.18) 20px 30px,
      rgba(102,210,105,.18) 30px 40px,
      rgba(98,179,255,.18) 40px 50px,
      rgba(171,148,255,.18) 50px 60px);
  animation: crossedSlide 1.4s linear infinite;
}
@keyframes crossedSlide { to { background-position: 60px 0; } }

/* v4.0.9 — Header buttons */
.controls{ gap:.4rem; }
.btn-ghost{ border:none; border-radius:6px; padding:.35rem .6rem; font-weight:700; cursor:pointer; background:#e5e7eb; color:#111; }
.btn-ghost:active{ transform:translateY(1px); }
.btn-ghost:hover{ filter:brightness(.97); }

/* v4.0.9 — Stats modal */
#statsModal.hidden{ display:none; }
#statsModal{ position:fixed; inset:0; z-index:9999; }
#statsModal .modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
#statsModal .modal-box{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:#fff; color:#111; border-radius:12px; width:min(92vw,540px); padding:1rem 1.2rem;
  box-shadow:0 22px 60px rgba(0,0,0,.25);
}
.stats-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.6rem; margin:.6rem 0 0; }
.stats-card{ background:#f3f4f6; border-radius:10px; padding:.7rem .8rem; text-align:center; }
.stats-card .label{ font-size:.78rem; color:#6b7280; }
.stats-card .value{ font-size:1.3rem; font-weight:800; margin-top:.25rem; }
.stats-actions{ margin-top:.8rem; display:flex; justify-content:flex-end; gap:.5rem; }
.stats-actions .btn{ border:none; border-radius:8px; padding:.55rem .9rem; font-weight:700; cursor:pointer; }
.stats-close{ background:#d3d6da; color:#111; }
.stats-reset{ background:#ef4444; color:#fff; }


/* v4.0.10 — Social icon bar */
.social-bar{ display:flex; justify-content:center; gap:.6rem; margin:.4rem 0 .2rem; }
.social-icon{ width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:#f3f4f6; }
.social-icon:hover{ transform:translateY(-1px) scale(1.04); filter:brightness(.98); }
.social-icon svg{ width:18px; height:18px; }


/* v4.0.11 — About modal social row & hint-under-grid */
.about-follow{ display:flex; align-items:center; gap:.6rem; margin-top:.6rem; flex-wrap:wrap; }
.about-follow .follow-label{ color:#6b7280; font-weight:700; }
.hint-under-grid{ display:flex; justify-content:center; margin:.4rem 0; }


/* v4.0.12 — under-grid controls row (Hint + Stats + About) */
.hint-under-grid{ display:flex; justify-content:center; gap:.5rem; margin:.4rem 0; flex-wrap:wrap; }
.hint-under-grid .btn-ghost, .hint-under-grid .hint-btn{ margin:0; }


/* v4.0.13 — icon-only buttons under grid */
.icon-btn{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:10px; background:#e5e7eb; cursor:pointer; font-size:22px; }
.icon-btn:hover{ transform:translateY(-1px) scale(1.04); filter:brightness(.98); }
.icon-btn:active{ transform:translateY(0); }
.hint-under-grid{ gap:.5rem; }

/* v4.0.13 — About socials 4x size */
.about-follow{ display:flex; align-items:center; gap:.8rem; margin-top:.8rem; flex-wrap:wrap; }
.about-follow .follow-label{ color:#6b7280; font-weight:700; }
.about-follow .social-icon{ width:84px; height:84px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; background:#f3f4f6; }
.about-follow .social-icon svg{ width:72px; height:72px; }


/* v4.1 — Disable grid state & About modal centering */
#grid.disabled-grid{ pointer-events:none; opacity:.55; filter:grayscale(.1); }
#aboutModal .modal-box, #about-modal .modal-box{ text-align:center; }
#aboutModal .about-follow, #about-modal .about-follow{ justify-content:center; }


/* v4.1.1 — Softer disabled visuals + safe confetti canvas */
#grid.disabled-grid{ pointer-events:none; opacity:.92; filter:grayscale(.02); }
#keyboard.disabled{ opacity:.85; filter:none; }
canvas{ background-color: transparent !important; pointer-events:none !important; }


/* v4.1.2 — No dimming after game over */
#grid.disabled-grid{ pointer-events:none; opacity:1 !important; filter:none !important; }
#keyboard.disabled{ opacity:1 !important; filter:none !important; }