:root{--color-bg:#161826;--color-surface:#232532;--color-text:#e9e9ed;--color-accent:#9184d9;--color-accent-100:#f5f4ff;--color-accent-300:#d2cefd;--color-accent-400:#b5abfc;--color-accent-500:#968ae0;--color-accent-600:#796cbf;--color-accent-700:#5d5294;--color-accent-800:#423a6a;--color-neutral-100:#f4f5f7;--color-neutral-800:#3f424d;--color-neutral-900:#292b31;--color-divider:#e9e9ed29;--radius-sm:4px;--radius-md:8px;--radius-lg:14px;--shadow-sm:0 0 0 1px #3f424d;--shadow-md:0 0 0 1px #595d6c, 0 6px 18px #0000008c;--shadow-lg:0 0 0 1px #9397ab, 0 16px 40px #000000a6;--bg:var(--color-bg);--fg:var(--color-text);--fg-muted:color-mix(in srgb, var(--color-text) 60%, transparent);--tile-empty-border:var(--color-neutral-800);--tile-filled-border:var(--color-accent);--key-bg:var(--color-neutral-800);--key-fg:var(--color-text);--overlay:color-mix(in srgb, var(--color-bg) 75%, transparent);--correct:#b87a1d;--present:#6a9ed4;--absent:#3a3a3c}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{background:var(--color-bg);color:var(--color-text);font-family:Inter,system-ui,Segoe UI,Roboto,sans-serif;font-weight:400}button{font-family:inherit}h1,h2{font-weight:500}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.app{flex-direction:column;max-width:500px;height:100svh;margin:0 auto;display:flex;overflow:hidden}.header{border-bottom:1px solid var(--color-divider);flex-shrink:0;justify-content:space-between;align-items:center;padding:clamp(6px,1.2svh,10px) 12px;display:flex}.header__side{width:44px;display:flex}.header__side--left{gap:2px;width:auto}.header__side--right{justify-content:flex-end}.header__title{text-align:center;flex:1}.header__title h1{letter-spacing:.02em;margin:0;font-size:clamp(1.25rem,4svh,1.75rem);font-weight:500}.header__subtitle{color:var(--fg-muted);margin:2px 0 0;font-size:.75rem}.header__mode-switch{color:var(--color-accent);cursor:pointer;background:0 0;border:none;margin-left:6px;padding:0;font-size:.75rem;font-weight:500;text-decoration:underline}.icon-button{color:var(--fg);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;transition:background-color .15s;display:flex}.icon-button:hover{background:color-mix(in srgb, var(--color-accent) 12%, transparent)}.icon-button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.main{--section-gap:clamp(10px, 2.2svh, 28px);justify-content:flex-start;align-items:center;gap:var(--section-gap);min-height:0;padding:var(--section-gap) 8px clamp(4px, 1svh, 16px);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.mode-select{flex-direction:column;justify-content:center;align-items:center;gap:4px;max-width:400px;min-height:100svh;margin:0 auto;padding:24px 16px;display:flex;position:relative}.mode-select__icons{gap:2px;display:flex;position:absolute;top:12px;left:12px}.mode-select__title{text-align:center;margin:0;font-size:1.875rem;font-weight:500}.mode-select__subtitle{color:var(--fg-muted);text-align:center;margin:0 0 24px;font-size:.8125rem}.mode-select__list{flex-direction:column;gap:12px;width:100%;display:flex}.mode-select__card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-md);width:100%;box-shadow:var(--shadow-sm);color:inherit;text-align:left;cursor:pointer;align-items:center;gap:14px;padding:18px;font-family:inherit;display:flex}.mode-select__card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-md)}.mode-select__badge{border-radius:var(--radius-md);background:color-mix(in srgb, var(--color-accent) 14%, transparent);width:44px;height:44px;color:var(--color-accent-300);flex-shrink:0;justify-content:center;align-items:center;font-size:1.1rem;font-weight:500;display:flex}.mode-select__text{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.mode-select__card-title{font-size:.9375rem;font-weight:500}.mode-select__card-desc{color:color-mix(in srgb, var(--color-text) 58%, transparent);font-size:.78125rem}.mode-select__chevron{color:var(--color-accent-400);flex-shrink:0}.board{--word-length:5;flex-direction:column;gap:6px;margin:0 auto;display:flex}.board__row{grid-template-columns:repeat(var(--word-length), min(48px, 6svh));gap:min(6px,.6svh);display:grid}.tile{aspect-ratio:1;perspective:400px;position:relative}.tile__inner{border:2px solid var(--tile-empty-border);text-transform:uppercase;width:100%;height:100%;color:var(--fg);box-sizing:border-box;-webkit-user-select:none;user-select:none;border-radius:6px;justify-content:center;align-items:center;font-size:1.5rem;font-weight:700;display:flex}.tile--filled .tile__inner{border-color:var(--tile-filled-border)}.tile--correct .tile__inner,.tile--present .tile__inner,.tile--absent .tile__inner{color:#fff;border-color:#0000}.tile--correct .tile__inner{background:var(--correct)}.tile--present .tile__inner{background:var(--present)}.tile--absent .tile__inner{background:var(--absent)}.tile--revealing .tile__inner{animation-duration:.6s;animation-timing-function:ease-in-out;animation-fill-mode:both}.tile--revealing.tile--correct .tile__inner{animation-name:flip-correct}.tile--revealing.tile--present .tile__inner{animation-name:flip-present}.tile--revealing.tile--absent .tile__inner{animation-name:flip-absent}@keyframes flip-correct{0%{border-color:var(--tile-filled-border);color:var(--fg);background:0 0;transform:rotateX(0)}50%{transform:rotateX(90deg)}50.01%{background:var(--correct);color:#fff;border-color:#0000}to{transform:rotateX(0)}}@keyframes flip-present{0%{border-color:var(--tile-filled-border);color:var(--fg);background:0 0;transform:rotateX(0)}50%{transform:rotateX(90deg)}50.01%{background:var(--present);color:#fff;border-color:#0000}to{transform:rotateX(0)}}@keyframes flip-absent{0%{border-color:var(--tile-filled-border);color:var(--fg);background:0 0;transform:rotateX(0)}50%{transform:rotateX(90deg)}50.01%{background:var(--absent);color:#fff;border-color:#0000}to{transform:rotateX(0)}}.board__row--shake .tile__inner{animation:.6s ease-in-out shake}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}.board__row--bounce .tile__inner{animation:.7s ease-in-out bounce}.board__row--bounce .tile:first-child .tile__inner{animation-delay:0s}.board__row--bounce .tile:nth-child(2) .tile__inner{animation-delay:80ms}.board__row--bounce .tile:nth-child(3) .tile__inner{animation-delay:.16s}.board__row--bounce .tile:nth-child(4) .tile__inner{animation-delay:.24s}.board__row--bounce .tile:nth-child(5) .tile__inner{animation-delay:.32s}@keyframes bounce{0%,to{transform:translateY(0)}30%{transform:translateY(-14px)}50%{transform:translateY(0)}60%{transform:translateY(-6px)}80%{transform:translateY(0)}}.toast{background:var(--color-surface);color:var(--fg);border:1px solid var(--color-divider);border-radius:var(--radius-md);white-space:nowrap;z-index:10;box-shadow:var(--shadow-md);padding:10px 16px;font-size:.9rem;font-weight:500;position:absolute;top:6px;left:50%;transform:translate(-50%)}.game-end-overlay{background:color-mix(in srgb, var(--color-neutral-900) 78%, transparent);z-index:100;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.game-end-overlay__card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);width:100%;max-width:340px;box-shadow:var(--shadow-lg);text-align:center;padding:28px 24px 24px;animation:.26s cubic-bezier(.2,.8,.2,1) game-end-overlay-enter}@keyframes game-end-overlay-enter{0%{opacity:0;transform:scale(.93)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.game-end-overlay__title{margin:0 0 18px;font-size:1.25rem;font-weight:500}.game-end-overlay__word{grid-template-columns:repeat(var(--word-length), minmax(0, 46px));border-radius:var(--radius-sm);justify-content:center;gap:6px;display:grid}.game-end-overlay__word--won{animation:2.4s ease-in-out infinite game-end-overlay-glow}@keyframes game-end-overlay-glow{0%,to{box-shadow:0 0 #968ae000}50%{box-shadow:0 0 22px 3px #968ae061}}.game-end-overlay__tile{aspect-ratio:1;border-radius:var(--radius-sm);text-transform:uppercase;justify-content:center;align-items:center;font-size:1.1875rem;font-weight:500;display:flex}.game-end-overlay__word--won .game-end-overlay__tile{background:var(--color-accent-500);color:var(--color-neutral-100)}.game-end-overlay__word--lost .game-end-overlay__tile{background:var(--color-neutral-900);border:1px solid var(--color-neutral-800);color:color-mix(in srgb, var(--color-text) 45%, transparent)}.game-end-overlay__meta{color:color-mix(in srgb, var(--color-text) 58%, transparent);margin:14px 0 22px;font-size:.78125rem}.game-end-overlay__meta:has(+.game-end-overlay__definition){margin-bottom:10px}.game-end-overlay__definition{border-radius:var(--radius-sm);border:1px solid var(--color-divider);background:color-mix(in srgb, var(--color-surface) 92%, var(--color-accent) 8%);text-align:left;color:color-mix(in srgb, var(--color-text) 80%, transparent);margin:0 0 22px;padding:10px 14px;font-size:.8125rem;line-height:1.4}.game-end-overlay__actions{flex-direction:column;gap:10px;display:flex}.game-end-overlay__button{border-radius:var(--radius-md);cursor:pointer;width:100%;padding:11px 16px;font-size:.9rem;font-weight:500}.game-end-overlay__button--primary{color:var(--color-accent);border:1px solid var(--color-accent);background:0 0}.game-end-overlay__button--primary:hover{background:color-mix(in srgb, var(--color-accent) 12%, transparent)}.game-end-overlay__button--ghost{color:var(--fg-muted);background:0 0;border:none}.game-end-overlay__button--ghost:hover{background:color-mix(in srgb, var(--color-accent) 8%, transparent);color:var(--color-text)}.hint-bar{border-radius:var(--radius-md);width:100%;max-width:480px;padding:10px 12px;animation:.22s ease-out hint-bar-enter}@keyframes hint-bar-enter{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.hint-bar--offer{background:color-mix(in srgb, var(--color-accent) 10%, transparent);border:1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);justify-content:space-between;align-items:center;gap:10px;display:flex}.hint-bar__offer-text{font-size:12.5px}.hint-bar__actions{flex-shrink:0;gap:8px;display:flex}.hint-bar__button{border-radius:var(--radius-sm);cursor:pointer;padding:6px 14px;font-size:.75rem;font-weight:500}.hint-bar__button--secondary{border:1px solid var(--color-divider);color:var(--fg-muted);background:0 0}.hint-bar__button--secondary:hover{color:var(--color-text);border-color:color-mix(in srgb, var(--color-text) 30%, transparent)}.hint-bar__button--primary{border:1px solid var(--color-accent);color:var(--color-accent);background:0 0}.hint-bar__button--primary:hover{background:color-mix(in srgb, var(--color-accent) 12%, transparent)}.hint-bar--revealed{background:var(--color-surface);border:1px solid var(--color-divider);align-items:center;display:flex}.hint-bar__label{color:var(--fg-muted);font-size:11.5px}.hint-bar__text{font-size:12.5px}.hint-bar__letter{color:var(--color-accent-300);font-weight:500}.hint-bar--unavailable{background:var(--color-surface);border:1px solid var(--color-divider);justify-content:center;align-items:center;display:flex}.hint-bar__unavailable-text{color:color-mix(in srgb, var(--color-text) 50%, transparent);font-size:12px}.keyboard{flex-direction:column;gap:min(8px,1svh);width:100%;max-width:480px;padding-bottom:0;display:flex;container-type:inline-size}.keyboard__row{justify-content:center;gap:6px;display:flex}.key{border-radius:var(--radius-sm);background:var(--key-bg);max-width:42px;height:10.3cqw;min-height:29px;max-height:45px;color:var(--key-fg);text-transform:uppercase;cursor:pointer;border:none;flex:1;justify-content:center;align-items:center;padding:0;font-size:.9rem;font-weight:700;transition:background-color .15s;display:flex}.key--pressed{animation:.18s cubic-bezier(.2,.8,.2,1) key-press}@keyframes key-press{0%{transform:scale(1);box-shadow:inset 0 0 0 999px #0000}40%{box-shadow:inset 0 0 0 999px color-mix(in srgb, var(--color-accent) 35%, transparent);transform:scale(.9)}to{transform:scale(1);box-shadow:inset 0 0 0 999px #0000}}.key--wide{flex:1.5;max-width:60px;font-size:.7rem}.key--correct{background:var(--correct);color:#fff}.key--present{background:var(--present);color:#fff}.key--absent{background:var(--color-neutral-900);color:color-mix(in srgb, var(--color-text) 55%, transparent)}.key--hint{background:var(--color-accent-500);border:1px solid var(--color-accent-500);color:var(--color-neutral-100);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent)}.modal-overlay{background:var(--overlay);z-index:100;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{background:var(--color-surface);color:var(--fg);border:1px solid var(--color-divider);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:420px;max-height:85vh;padding:16px 20px 20px;overflow-y:auto}.modal__header{justify-content:space-between;align-items:center;display:flex}.modal__header h2{margin:0}.modal__body p{font-size:.9rem;line-height:1.4}.modal__body h3{margin:18px 0 4px;font-size:1rem;font-weight:500}.modal__body h3:first-child{margin-top:0}.modal__example{margin:10px 0 6px}.modal__example .board__row{grid-template-columns:repeat(5,38px)}.modal__example .tile__inner{font-size:1.3rem}.modal__note{color:var(--fg-muted);margin-top:14px;font-size:.8rem}@media (width<=380px){.board__row{grid-template-columns:repeat(var(--word-length), min(44px, 5.6svh))}}