*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #121213;--fg: #f6f6f6;--muted: #9a9aa0;--line: #3a3a3d;--green: #538d4e;--yellow: #c9b458;--gray: #3a3a3d;--key-bg: #565758}html,body{height:100%}body{background:var(--bg);color:var(--fg);font-family:Segoe UI,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none;overflow-x:hidden}.app{height:100dvh;display:flex;flex-direction:column;align-items:center;max-width:520px;margin:0 auto;padding:0 12px}.header{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}.header .side{display:flex;align-items:center;gap:6px}.side.left{justify-content:flex-start}.side.right{justify-content:flex-end}.brand{min-width:0;text-align:center}.brand h1{font-size:clamp(1.05rem,4.5vw,1.4rem);letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap}.brand h1 span{color:var(--yellow)}.tagline{font-size:.55rem;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon-btn{background:none;border:none;color:var(--fg);font-size:1rem;width:32px;height:32px;border-radius:50%;cursor:pointer;flex-shrink:0}.icon-btn:hover{background:#2a2a2d}.lang-switch{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}.lang-switch button{background:none;border:none;color:var(--muted);font-size:.65rem;font-weight:700;padding:5px 9px;cursor:pointer;letter-spacing:.5px}.lang-switch button.active{background:var(--fg);color:var(--bg)}@media (max-width: 430px){.tagline{display:none}}.board-area{flex:1;display:flex;align-items:center;justify-content:center;width:100%;padding:12px 0}.board{display:grid;gap:5px;width:min(100%,330px)}.row{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.row.shake{animation:shake .55s}.tile{aspect-ratio:1;display:grid;place-items:center;border:2px solid var(--line);font-size:clamp(1.3rem,7vw,1.9rem);font-weight:800;text-transform:uppercase;-webkit-user-select:none;user-select:none}.tile.filled{border-color:#565758}.tile.correct{background:var(--green);border-color:var(--green);color:#fff}.tile.present{background:var(--yellow);border-color:var(--yellow);color:#fff}.tile.absent{background:var(--gray);border-color:var(--gray);color:#fff}.tile[data-flip]{animation:flip .55s ease forwards;animation-delay:calc(var(--i) * .32s);animation-fill-mode:backwards}.tile[data-dance]{animation:dance .55s ease;animation-delay:calc(var(--i) * 90ms)}.tile-inner{line-height:1;animation:pop .1s ease-in-out}@keyframes flip{0%{transform:rotateX(0);background:transparent;border-color:#565758}45%{transform:rotateX(90deg);background:transparent;border-color:#565758}to{transform:rotateX(0)}}@keyframes dance{0%,to{transform:translateY(0)}25%{transform:translateY(-14px)}40%{transform:translateY(2px)}55%{transform:translateY(-7px)}70%{transform:translateY(1px)}}@keyframes pop{50%{transform:scale(1.14)}}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(3px)}30%,50%,70%{transform:translate(-5px)}40%,60%{transform:translate(5px)}}.keyboard{width:100%;max-width:500px;padding-bottom:calc(10px + env(safe-area-inset-bottom));display:grid;gap:6px}.krow{display:flex;gap:5px;justify-content:center}.key{flex:1;max-width:42px;height:54px;border:none;border-radius:4px;background:var(--key-bg);color:#fff;font-weight:600;font-size:.85rem;cursor:pointer;text-transform:uppercase;touch-action:manipulation}.key.wide{max-width:66px;flex:1.6;font-size:.66rem;background:#3f4042}.key.correct{background:var(--green)}.key.present{background:var(--yellow)}.key.absent{background:#333438;color:#77787c}.keyboard.disabled .key{pointer-events:none;opacity:.85}.key:active{transform:scale(.94)}.toast{position:fixed;top:84px;left:50%;transform:translate(-50%);background:var(--fg);color:var(--bg);font-weight:700;padding:12px 18px;border-radius:6px;z-index:60;max-width:88vw;text-align:center;animation:fadein .18s ease}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:50;padding:18px;animation:fadein .15s ease}.panel{background:#1e1e21;border:1px solid var(--line);border-radius:12px;padding:22px;width:min(100%,430px);max-height:86vh;overflow-y:auto}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.panel-head h2{font-size:1.05rem;text-transform:uppercase;letter-spacing:1.5px}.help p{color:#cfcfd4;font-size:.86rem;margin-bottom:10px;line-height:1.45}.help h3{font-size:.75rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:14px 0 8px}.example{margin-bottom:12px}.example-row{display:flex;gap:4px;margin-bottom:5px}.mini-tile{width:34px;height:34px;display:grid;place-items:center;border:2px solid var(--line);font-weight:800;font-size:.95rem}.mini-tile.correct{background:var(--green);border-color:var(--green)}.mini-tile.present{background:var(--yellow);border-color:var(--yellow)}.mini-tile.absent{background:var(--gray);border-color:var(--gray)}.example p{font-size:.78rem!important;margin-bottom:0!important}.result h2{text-align:center;font-size:1.2rem;margin-bottom:6px}.result-word{text-align:center;font-size:clamp(1.35rem,6vw,1.7rem);font-weight:900;letter-spacing:5px;margin-bottom:16px;overflow-wrap:anywhere}.result-word.good{color:var(--green)}.result-word.bad{color:#e06c5a}.result h3{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:14px 0 8px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;gap:6px}.stat-grid strong{font-size:1.5rem;display:block}.stat-grid span{font-size:.58rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.dist{display:grid;gap:4px;margin-bottom:16px}.dist-row{display:flex;align-items:center;gap:8px;font-size:.8rem}.dist-row>span{width:10px;text-align:right;color:var(--muted)}.bar{background:var(--gray);color:#eee;font-size:.72rem;padding:3px 6px;min-width:22px;text-align:right}.bar.hot{background:var(--green)}button.primary{width:100%;padding:13px;border:none;border-radius:8px;background:var(--green);color:#fff;font-size:.9rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer}button.primary:hover{filter:brightness(1.12)}.footer{width:100%;text-align:center;color:var(--muted);font-size:.62rem;padding:8px 0 10px;letter-spacing:.5px;text-transform:uppercase}@keyframes fadein{0%{opacity:0}}@media (max-height: 680px){.board-area{padding:8px 0}.board{width:min(100%,290px)}.key{height:46px}}@media (max-width: 380px){.app{padding:0 8px}.key{height:46px;font-size:.75rem}.key.wide{font-size:.56rem}.panel{padding:16px;border-radius:10px}.overlay{padding:12px}.stat-grid strong{font-size:1.25rem}}