@font-face{font-family:"DM Serif Display";src:url("./fonts/dm-serif-display-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url("./fonts/dm-serif-display-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("./fonts/inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("./fonts/inter-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("./fonts/inter-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("./fonts/inter-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --navy:#0E1B2A;--navy-2:#14263B;--panel:#172C44;--line:#26405C;
  --teal:#15B8A6;--teal-deep:#0E8E80;--amber:#D9A04E;--slate:#3A4D63;
  --ink:#F3F6FA;--muted:#9DB0C4;--muted-2:#6E849A;--gold:#E8C16B;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 50% -10%,#173049 0%,transparent 60%),var(--navy);
  color:var(--ink);font-family:"Inter",system-ui,sans-serif;min-height:100vh;
  display:flex;flex-direction:column;align-items:center;-webkit-font-smoothing:antialiased;
}
.wrap{width:100%;max-width:520px;padding:0 16px 32px;display:flex;flex-direction:column;flex:1}
header{display:flex;align-items:center;justify-content:space-between;padding:18px 2px 14px;border-bottom:1px solid var(--line)}
.brand{display:flex;flex-direction:column;gap:2px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--teal)}
h1{font-family:"DM Serif Display",serif;font-weight:400;font-size:28px;line-height:1}
.sub{font-size:12.5px;color:var(--muted);margin-top:4px}
.icons{display:flex;gap:6px}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--navy-2);color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:.15s}
.icon-btn:hover{color:var(--ink);border-color:var(--teal);background:var(--panel)}
.icon-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.icon-btn svg{width:19px;height:19px;display:block}

main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:18px 0}
.board{display:flex;flex-direction:column;gap:7px;align-items:center}
.row{display:flex;gap:7px;justify-content:center}
.cell{width:var(--cs,52px);height:var(--cs,52px);border:2px solid var(--line);border-radius:9px;display:grid;place-items:center;font-size:calc(var(--cs,52px)*.46);font-weight:700;text-transform:uppercase;color:var(--ink);background:transparent;transition:border-color .12s,transform .08s}
.cell.filled{border-color:var(--muted-2);animation:pop .12s ease}
@keyframes pop{0%{transform:scale(.92)}100%{transform:scale(1)}}
.cell.lead{border-color:var(--teal);color:var(--teal)}
.cell.flip{animation:flip .5s ease forwards}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.cell.correct{background:var(--teal);border-color:var(--teal);color:#06231F}
.cell.present{background:var(--amber);border-color:var(--amber);color:#2A1C05}
.cell.absent{background:var(--slate);border-color:var(--slate);color:#C3CFDC}
.row.invalid{animation:shake .4s}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-5px)}}

.toast{position:fixed;top:84px;left:50%;transform:translateX(-50%) translateY(-8px);background:var(--ink);color:var(--navy);font-weight:600;font-size:13.5px;padding:10px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 8px 30px rgba(0,0,0,.4);z-index:60;max-width:90%;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.keyboard{display:flex;flex-direction:column;gap:7px}
.krow{display:flex;gap:5px;justify-content:center}
.key{flex:1;min-width:0;height:50px;border:none;border-radius:8px;background:var(--navy-2);color:var(--ink);font-family:inherit;font-size:14px;font-weight:600;text-transform:uppercase;cursor:pointer;transition:.12s;display:grid;place-items:center}
.key:hover{background:var(--panel)}
.key:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.key.wide{flex:1.6;font-size:12px;letter-spacing:.04em}
.key.correct{background:var(--teal);color:#06231F}
.key.present{background:var(--amber);color:#2A1C05}
.key.absent{background:var(--slate);color:#8FA0B2}

.reveal{background:linear-gradient(180deg,var(--panel),var(--navy-2));border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:14px;padding:18px;display:none;animation:rise .4s ease}
.reveal.show{display:block}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.verdict{font-family:"DM Serif Display",serif;font-size:20px;margin-bottom:2px}
.reveal .word{font-family:"DM Serif Display",serif;font-size:15px;color:var(--teal);letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.reveal .def{font-size:14px;line-height:1.5;color:var(--muted)}
.dossier{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--teal);text-decoration:none;margin-top:12px}
.dossier:hover{text-decoration:underline}
.row2{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

.btn{border:none;border-radius:10px;font-family:inherit;font-weight:600;font-size:14px;padding:11px 16px;cursor:pointer;transition:.12s;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn.primary{background:var(--teal);color:#06231F}
.btn.primary:hover{background:var(--teal-deep);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--teal);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--teal)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

footer{text-align:center;font-size:11.5px;color:var(--muted-2);padding:14px 0 4px;border-top:1px solid var(--line);line-height:1.5}
footer b{color:var(--muted);font-weight:600}

.overlay{position:fixed;inset:0;background:rgba(7,15,24,.72);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:18px;z-index:50}
.overlay.show{display:flex}
.modal{background:var(--navy-2);border:1px solid var(--line);border-radius:16px;max-width:440px;width:100%;padding:24px 22px;max-height:88vh;overflow:auto;animation:rise .3s ease}
.modal h2{font-family:"DM Serif Display",serif;font-weight:400;font-size:24px;margin-bottom:4px}
.modal .lead{color:var(--muted);font-size:13.5px;margin-bottom:18px;line-height:1.5}
.modal h3{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--teal);margin:18px 0 8px}
.modal p{font-size:14px;line-height:1.55;color:var(--muted);margin-bottom:10px}
.modal .close{float:right;margin-top:-6px}
.ex{display:flex;gap:6px;margin:10px 0}
.ex .cell{--cs:40px;font-size:18px}

.stats-grid{display:flex;gap:8px;text-align:center;margin:6px 0 4px}
.stat{flex:1}
.stat b{font-family:"DM Serif Display",serif;font-size:30px;display:block;line-height:1}
.stat span{font-size:11px;color:var(--muted-2);display:block;margin-top:4px}
.dist{margin-top:18px;display:flex;flex-direction:column;gap:6px}
.bar-row{display:flex;align-items:center;gap:8px;font-size:12px}
.bar-row .n{width:14px;color:var(--muted)}
.bar-track{flex:1;background:var(--navy);border-radius:5px;overflow:hidden;height:22px}
.bar-fill{background:var(--slate);height:100%;border-radius:5px;min-width:26px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:11px;font-weight:700;color:var(--ink);transition:width .4s}
.bar-fill.hot{background:var(--teal);color:#06231F}
.share-block{background:var(--navy);border:1px solid var(--line);border-radius:10px;padding:14px;font-family:ui-monospace,monospace;font-size:15px;line-height:1.5;white-space:pre;text-align:center;margin:14px 0}

.hidden{display:none!important}
.full{width:100%}
.mt6{margin-top:6px}