*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #121213;--color-surface: #1a1a1b;--color-border: #3a3a3c;--color-border-cur:#565758;--color-text: #ffffff;--color-text-muted:#818384;--color-correct: #538d4e;--color-present: #b59f3b;--color-absent: #3a3a3c;--color-longer: #fc8181;--color-shorter: #63b3ed;--color-equal: #b794f4;--color-key-bg: #818384;--color-key-text: #ffffff;--header-h: 56px;--font: "Clear Sans", "Helvetica Neue", Arial, sans-serif}html,body{height:100%}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font);-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;height:100dvh;max-width:500px;margin:0 auto}.header{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);border-bottom:1px solid var(--color-border);padding:0 12px;flex-shrink:0}.header-center{display:flex;flex-direction:column;align-items:center;line-height:1}.title{font-size:1.4rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(to right,var(--color-present),var(--color-correct));-webkit-background-clip:text;background-clip:text;color:transparent}.puzzle-num{font-size:.7rem;color:var(--color-text-muted);letter-spacing:.05em;margin-top:2px}.icon-btn{background:none;border:none;color:var(--color-text);cursor:pointer;padding:6px;border-radius:4px;display:flex;align-items:center;transition:opacity .15s}.icon-btn:hover{opacity:.7}.icon-btn svg{width:22px;height:22px}.game{flex:1;display:flex;flex-direction:column;align-items:center;padding:12px 8px 8px;gap:8px;overflow:hidden}.board-container{display:flex;justify-content:center}.board{display:flex;flex-direction:column;align-items:flex-start;gap:6px}.row{display:flex;align-items:center;flex-wrap:nowrap}.tile{display:flex;align-items:center;justify-content:center;border:2px solid var(--color-border);font-weight:700;text-transform:uppercase;-webkit-user-select:none;user-select:none;transition:transform .1s;color:var(--color-text);border-radius:3px;flex-shrink:0}.tile.empty{background:transparent;border-color:var(--color-border)}.tile.tbd{background:transparent;border-color:var(--color-border-cur)}.tile.correct{background:var(--color-correct);border-color:var(--color-correct)}.tile.present{background:var(--color-present);border-color:var(--color-present)}.tile.absent{background:var(--color-absent);border-color:var(--color-absent)}.tile[data-animation=pop]{animation:pop .1s ease-in-out}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.12)}to{transform:scale(1)}}.tile.flip{animation:flip .3s ease-in-out forwards}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.shake{animation:shake .5s ease}.length-hint{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-weight:900;font-size:16px;margin-left:8px;flex-shrink:0;border:2px solid}.length-hint--longer{color:var(--color-longer);border-color:var(--color-longer)}.length-hint--shorter{color:var(--color-shorter);border-color:var(--color-shorter)}.length-hint--equal{color:var(--color-equal);border-color:var(--color-equal)}.constraint-hint{font-size:.78rem;color:var(--color-text-muted);letter-spacing:.03em;text-align:center;min-height:18px}.keyboard{width:100%;max-width:500px;padding:0 4px;display:flex;flex-direction:column;gap:6px;margin-top:auto}.keyboard-row{display:flex;justify-content:center;gap:5px}.key{height:56px;min-width:0;padding:0 4px;border:none;border-radius:4px;background:var(--color-key-bg);color:var(--color-key-text);font-size:13px;font-weight:700;font-family:var(--font);cursor:pointer;text-transform:uppercase;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;flex:1;max-width:44px}.key--wide{flex:1.5;max-width:66px;font-size:12px}.key--correct{background:var(--color-correct)}.key--present{background:var(--color-present)}.key--absent{background:var(--color-absent);color:#6b7280}.key:active{opacity:.8}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}.modal{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;padding:28px 24px 24px;width:100%;max-width:420px;max-height:90dvh;overflow-y:auto;position:relative}.modal h2{text-align:center;font-size:1.1rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:14px}.modal h3{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin:14px 0 8px;color:var(--color-text-muted)}.modal p{font-size:.9rem;line-height:1.5;margin-bottom:6px}.modal ul{padding-left:18px}.modal li{font-size:.875rem;line-height:1.6}.modal hr{border:none;border-top:1px solid var(--color-border);margin:14px 0}.modal-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--color-text-muted);font-size:18px;cursor:pointer;padding:4px;line-height:1}.modal-close:hover{color:var(--color-text)}.how-row{display:flex;align-items:center;gap:10px;margin:6px 0}.how-text{font-size:.88rem}.demo-tile{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:3px;font-weight:700;font-size:1.1rem;flex-shrink:0}.demo-tile.correct{background:var(--color-correct)}.demo-tile.present{background:var(--color-present)}.demo-tile.absent{background:var(--color-absent)}.stats-row{display:flex;justify-content:space-around;margin:8px 0 16px}.stat{display:flex;flex-direction:column;align-items:center;gap:2px}.stat-num{font-size:1.8rem;font-weight:700;line-height:1}.stat-label{font-size:.65rem;text-align:center;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.distribution{display:flex;flex-direction:column;gap:4px;margin-bottom:18px}.dist-row{display:flex;align-items:center;gap:6px;height:22px}.dist-label{font-size:.85rem;font-weight:700;width:14px;text-align:right;flex-shrink:0}.dist-bar{background:var(--color-absent);color:var(--color-text);font-size:.75rem;font-weight:700;padding:0 6px;height:100%;display:flex;align-items:center;justify-content:flex-end;border-radius:2px;transition:width .4s ease;min-width:22px}.dist-bar--highlight{background:var(--color-correct)}.btn-primary{width:100%;padding:12px;border:none;border-radius:6px;background:var(--color-correct);color:#fff;font-size:1rem;font-weight:700;font-family:var(--font);cursor:pointer;display:flex;align-items:center;justify-content:center;letter-spacing:.04em;transition:opacity .15s}.btn-primary:hover{opacity:.85}.btn-share{margin-top:4px}.toast{position:fixed;top:calc(var(--header-h) + 12px);left:50%;transform:translate(-50%) translateY(-8px);background:var(--color-text);color:var(--color-bg);padding:8px 16px;border-radius:6px;font-size:.9rem;font-weight:700;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;z-index:200;white-space:nowrap}.toast--visible{opacity:1;transform:translate(-50%) translateY(0)}@media (max-height: 600px){.tile{border-width:2px}.key{height:46px}.game{padding:6px 4px 4px;gap:4px}.board{gap:4px}}@media (max-width: 400px){.keyboard{padding:0 2px}.keyboard-row{gap:4px}.key{font-size:12px;padding:0 2px}.key--wide{font-size:10px}}