*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #121213;--color-header-bg: #121213;--color-border: #3a3a3c;--color-border-active: #565758;--color-text: #ffffff;--color-subtext: #818384;--color-correct: #538d4e;--color-present: #b59f3b;--color-absent: #3a3a3c;--color-key-bg: #818384;--color-key-text: #ffffff;--color-tile-empty-bg: transparent;--color-modal-bg: #1a1a1b;--header-height: 56px;--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}html,body,#root{height:100%;width:100%}body{background-color:var(--color-bg);color:var(--color-text);font-family:var(--font);-webkit-font-smoothing:antialiased;overscroll-behavior:none;-webkit-user-select:none;user-select:none}button{cursor:pointer;border:none;font-family:var(--font)}a{color:inherit}.tabs{display:flex;gap:4px;background:var(--color-modal-bg);border:1px solid var(--color-border);border-radius:10px;padding:4px}.tabs__link{padding:8px 18px;border-radius:7px;font-size:.85rem;font-weight:700;text-decoration:none;color:var(--color-subtext);transition:background-color .15s,color .15s}.tabs__link:hover{color:var(--color-text)}.tabs__link--active{background:var(--color-border-active);color:var(--color-text)}.home{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px 40px;gap:28px}.home__header{text-align:center}.home__title{font-size:clamp(2rem,8vw,3rem);font-weight:800;letter-spacing:.1em;text-transform:uppercase}.home__subtitle{color:var(--color-subtext);font-size:clamp(.85rem,2.5vw,1rem);margin-top:6px}.home__tiles{display:flex;gap:6px}.demo-tile{width:clamp(44px,10vw,56px);height:clamp(44px,10vw,56px);display:flex;align-items:center;justify-content:center;font-size:clamp(1.3rem,4vw,1.7rem);font-weight:700;text-transform:uppercase;border-radius:3px;color:#fff}.demo-tile--correct{background-color:var(--color-correct)}.demo-tile--present{background-color:var(--color-present)}.demo-tile--absent{background-color:var(--color-absent)}.home__modes{display:grid;grid-template-columns:1fr;gap:12px;width:100%;max-width:400px}.mode-card{display:flex;align-items:center;gap:16px;padding:18px 20px;background-color:var(--color-modal-bg);border:1px solid var(--color-border);border-radius:12px;color:var(--color-text);text-align:left;transition:border-color .2s,transform .15s;width:100%}.mode-card:hover:not(:disabled){border-color:var(--color-subtext);transform:translateY(-2px)}.mode-card:active:not(:disabled){transform:scale(.98)}.mode-card:disabled{opacity:.5;cursor:not-allowed}.mode-card--group{border-color:#4a7fa5}.mode-card--group:hover:not(:disabled){border-color:#6ab3f5}.mode-card__icon{font-size:1.8rem;flex-shrink:0}.mode-card__content h2{font-size:1rem;font-weight:700;margin-bottom:3px}.mode-card__content p{font-size:.82rem;color:var(--color-subtext);line-height:1.4}.home__loading{color:var(--color-subtext);font-size:.9rem;animation:pulse 1s ease-in-out infinite}.home__hint{color:var(--color-subtext);font-size:.8rem;text-align:center;max-width:280px;line-height:1.5;text-decoration:none}@media (min-width: 640px){.home__modes{grid-template-columns:1fr 1fr;max-width:680px;gap:16px}.mode-card--group{grid-column:1 / -1}}@media (min-width: 900px){.home__modes{grid-template-columns:1fr 1fr;max-width:680px}.mode-card--group{grid-column:auto}.home{gap:36px}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.tile{width:62px;height:62px;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;text-transform:uppercase;border:2px solid var(--color-border);color:var(--color-text);background-color:transparent;transition:border-color .05s}.tile.tbd{border-color:var(--color-border-active);animation:pop .1s ease-in-out}.tile.correct{--tile-bg: var(--color-correct);background-color:var(--color-correct);border-color:var(--color-correct)}.tile.present{--tile-bg: var(--color-present);background-color:var(--color-present);border-color:var(--color-present)}.tile.absent{--tile-bg: var(--color-absent);background-color:var(--color-absent);border-color:var(--color-absent)}.tile[data-animate=reveal]{animation:reveal .5s ease-in-out forwards}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes reveal{0%{transform:rotateX(0);background-color:transparent;border-color:var(--color-border-active)}49%{transform:rotateX(-90deg);background-color:transparent;border-color:var(--color-border-active)}50%{transform:rotateX(-90deg);background-color:var(--tile-bg);border-color:var(--tile-bg)}to{transform:rotateX(0);background-color:var(--tile-bg);border-color:var(--tile-bg)}}@media (max-width: 599px){.tile{width:54px;height:54px;font-size:1.75rem}}@media (max-width: 400px){.tile{width:46px;height:46px;font-size:1.5rem}}.board{display:flex;flex-direction:column;gap:4px}.board--compact .board-row{gap:3px}.board-row{display:flex;gap:5px}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.board-row.shake{animation:shake .4s ease-in-out}.keyboard{display:flex;flex-direction:column;gap:6px;padding:0 6px;width:100%;max-width:500px}.keyboard-row{display:flex;justify-content:center;gap:5px}.key{height:58px;min-width:0;flex:1;padding:0 2px;border-radius:4px;background-color:var(--color-key-bg);color:var(--color-key-text);font-size:.9rem;font-weight:700;text-transform:uppercase;display:flex;align-items:center;justify-content:center;transition:background-color .2s,transform .1s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}.key:active{transform:scale(.95)}.key--wide{flex:1.5;font-size:.75rem}.key--correct{background-color:var(--color-correct)}.key--present{background-color:var(--color-present)}.key--absent{background-color:#3a3a3c}@media (max-width: 599px){.keyboard{max-width:100%;padding:0 4px;gap:5px}.keyboard-row{gap:4px}.key{height:50px;font-size:.8rem}.key--wide{font-size:.68rem}}@media (max-width: 400px){.keyboard-row{gap:3px}.key{height:46px;font-size:.72rem}}.toast{background-color:var(--color-text);color:var(--color-bg);padding:12px 20px;border-radius:6px;font-weight:700;font-size:.9rem;pointer-events:none;transition:opacity .3s,transform .3s}.toast--in{opacity:1;transform:translateY(0)}.toast--out{opacity:0;transform:translateY(-8px)}.word-info{display:inline-flex;align-items:center}.word-info__btn{width:28px;height:28px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-modal-bg);color:var(--color-subtext);font-size:1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,color .15s;flex-shrink:0}.word-info__btn:hover{border-color:var(--color-subtext);color:var(--color-text)}.word-info__btn--active{border-color:var(--color-correct);color:var(--color-correct)}.word-info__spinner{width:12px;height:12px;border:2px solid var(--color-border);border-top-color:var(--color-correct);border-radius:50%;animation:wi-spin .6s linear infinite;display:block}@keyframes wi-spin{to{transform:rotate(360deg)}}.word-info__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}.word-info__modal{background:var(--color-modal-bg);border:1px solid var(--color-border);border-radius:12px;padding:20px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px;box-shadow:0 8px 40px #0009}.word-info__modal-header{display:flex;align-items:baseline;gap:8px}.word-info__word{font-size:1.1rem;font-weight:800;letter-spacing:.06em;color:var(--color-text)}.word-info__phonetic{font-size:.8rem;color:var(--color-subtext);flex:1}.word-info__close{margin-left:auto;background:none;border:none;color:var(--color-subtext);font-size:1rem;cursor:pointer;padding:0 2px;line-height:1}.word-info__close:hover{color:var(--color-text)}.word-info__meaning{display:flex;flex-direction:column;gap:4px}.word-info__pos{font-size:.72rem;font-style:italic;color:var(--color-subtext)}.word-info__defs{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}.word-info__def{font-size:.85rem;line-height:1.4;color:var(--color-text)}.word-info__example{display:block;font-size:.78rem;color:var(--color-subtext);font-style:italic;margin-top:3px}.word-info__error{font-size:.85rem;color:var(--color-subtext);margin:0}.game{height:100dvh;max-height:100dvh;display:flex;flex-direction:column;align-items:center;overflow:hidden;width:100%}.game--loading{justify-content:center}@media (min-width: 600px){.game{max-width:520px;margin:0 auto;height:100dvh;border-left:1px solid var(--color-border);border-right:1px solid var(--color-border)}.game--group{max-width:820px}}.game-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:56px;border-bottom:1px solid var(--color-border);flex-shrink:0}.game-header__back{text-decoration:none;font-size:1.3rem;color:var(--color-subtext);padding:4px 8px;border-radius:4px}.game-header__title{font-size:clamp(1.1rem,4vw,1.4rem);font-weight:800;letter-spacing:.08em;text-transform:uppercase}.game-header__badge{font-size:.72rem;font-weight:600;padding:4px 8px;border-radius:12px;background-color:var(--color-border);white-space:nowrap}.spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-correct);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.btn{padding:12px 28px;border-radius:6px;font-weight:700;font-size:.95rem;text-decoration:none;display:inline-block;text-align:center;transition:opacity .15s,transform .1s;cursor:pointer}.btn:hover{opacity:.9;transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background-color:var(--color-correct);color:#fff;border:none}.game__waiting{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:16px;padding:32px 20px;text-align:center}.waiting-icon{font-size:3rem}.game__waiting h2{font-size:clamp(1.2rem,4vw,1.6rem);font-weight:700}.game__waiting p{color:var(--color-subtext);font-size:.9rem}.waiting-link{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--color-modal-bg);border:1px solid var(--color-border);border-radius:10px;padding:14px 18px;max-width:380px;width:100%}.waiting-link__url{font-size:.72rem;color:var(--color-subtext);word-break:break-all;text-align:center}.lobby-players{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:360px}.lobby-pill{padding:6px 16px;border-radius:20px;background:var(--color-border);font-size:.85rem;font-weight:600}.lobby-pill--me{background:var(--color-correct);color:#fff}.game__setup{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:20px;padding:32px 20px;text-align:center}.game__setup h2{font-size:clamp(1.1rem,4vw,1.4rem);font-weight:700}.game__setup-hint{color:var(--color-subtext);font-size:.9rem}.word-form{display:flex;flex-direction:column;align-items:center;gap:12px}.word-input{width:200px;padding:14px;font-size:1.4rem;font-weight:700;text-align:center;text-transform:uppercase;letter-spacing:.15em;background:var(--color-modal-bg);border:2px solid var(--color-border-active);border-radius:8px;color:var(--color-text);outline:none;font-family:var(--font)}.word-input:focus{border-color:var(--color-correct)}.word-form__error{color:#e74c3c;font-size:.85rem;font-weight:600}.setup-waiting{display:flex;flex-direction:column;align-items:center;gap:12px}.setup-check{width:56px;height:56px;border-radius:50%;background-color:var(--color-correct);display:flex;align-items:center;justify-content:center;font-size:1.6rem}.setup-waiting h2{font-size:1.4rem;font-weight:700}.setup-waiting p{color:var(--color-subtext)}.game__opponent-status{display:flex;gap:8px;padding:8px 0 2px;flex-shrink:0}.status-pill{font-size:.75rem;font-weight:600;padding:4px 10px;background:var(--color-border);border-radius:12px;color:var(--color-subtext)}.status-pill--done{background:var(--color-correct);color:#fff}.game__play{display:flex;flex-direction:column;align-items:center;flex:1;padding:8px 0 12px;gap:8px;width:100%;min-height:0}.game__board-wrap{display:flex;flex-direction:column;align-items:center;flex:1;justify-content:center;min-height:0}.leaderboard{width:100%;max-width:520px;display:flex;flex-direction:column;gap:3px;padding:4px 10px 2px;flex-shrink:0;overflow-y:auto;max-height:140px}.leaderboard--final{max-height:none;padding:8px 16px;gap:6px}.lb-entry{display:flex;align-items:center;gap:8px;padding:4px 10px;border-radius:6px;background:var(--color-modal-bg);border:1px solid var(--color-border);font-size:.78rem;flex-shrink:0}.lb-entry--me{border-color:var(--color-subtext)}.lb-entry--solved{border-color:var(--color-correct)}.lb-entry--failed{border-color:#6b2d2d}.lb-rank{font-size:.68rem;color:var(--color-subtext);width:18px;flex-shrink:0}.lb-name{font-weight:700;width:44px;flex-shrink:0;font-size:.8rem}.lb-status{font-size:.72rem;color:var(--color-subtext);width:38px;flex-shrink:0}.lb-entry--solved .lb-status{color:var(--color-correct);font-weight:700}.lb-entry--failed .lb-status{color:#e74c3c}.lb-dots{display:flex;gap:3px;flex:1}.lb-dot{width:9px;height:9px;border-radius:2px;background:var(--color-border);flex-shrink:0}.lb-dot--used{background:var(--color-subtext)}.lb-dot--win{background:var(--color-correct)}@media (min-width: 700px){.game--group .game__play{flex-direction:row;align-items:stretch;padding:12px 0 0;gap:0;flex:1}.game--group .game__board-wrap{flex:1;padding:0 20px;border-right:1px solid var(--color-border);justify-content:center}.game--group .leaderboard{width:200px;max-width:200px;max-height:none;flex-shrink:0;padding:12px 10px;gap:6px;overflow-y:auto;align-self:flex-start}.game--group .lb-entry{flex-wrap:wrap;gap:4px;padding:6px 10px}.game--group .lb-name{width:auto;font-size:.85rem}.game--group .lb-status{width:auto;font-size:.78rem}.game--group .lb-dots{width:100%;justify-content:flex-start}.game--group .lb-dot{width:11px;height:11px}}.toasts-wrap{position:fixed;top:72px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;z-index:50;pointer-events:none}.opponent-typing{font-size:.82rem;color:var(--color-subtext);letter-spacing:.03em;flex-shrink:0}.opponent-typing strong{color:var(--color-text);letter-spacing:.1em}.game__my-done{font-size:.9rem;font-weight:600;color:var(--color-subtext);padding:4px 0;flex-shrink:0}.game__finished{display:flex;flex-direction:column;align-items:center;gap:20px;padding:24px 20px 32px;flex:1;overflow-y:auto;width:100%}.game__finished--side-by-side{max-width:660px;margin:0 auto}.finished-banner{font-size:clamp(1.1rem,4vw,1.4rem);font-weight:700;text-align:center}.side-by-side{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.player-board{display:flex;flex-direction:column;align-items:center;gap:6px}.player-board__label{font-size:.85rem;font-weight:700;color:var(--color-subtext)}.player-board__word{font-size:.78rem;color:var(--color-subtext);letter-spacing:.05em}.board--compact .tile{width:44px;height:44px;font-size:1.25rem}@media (max-width: 400px){.board--compact .tile{width:36px;height:36px;font-size:1rem}.side-by-side{gap:12px}}@media (min-width: 600px){.board--compact .tile{width:52px;height:52px;font-size:1.5rem}}.ttt__play{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:20px;padding:24px 20px}.ttt__turn{font-size:.95rem;font-weight:600;color:var(--color-subtext)}.ttt__board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(320px,80vw);aspect-ratio:1}.ttt__cell{background:var(--color-modal-bg);border:1px solid var(--color-border);border-radius:10px;font-size:clamp(2rem,10vw,3rem);font-weight:800;display:flex;align-items:center;justify-content:center;color:var(--color-text);transition:background-color .15s,transform .1s}.ttt__cell:not(:disabled):hover{border-color:var(--color-border-active);transform:translateY(-1px)}.ttt__cell:disabled{cursor:default}.ttt__cell--x{color:#e74c3c}.ttt__cell--o{color:#4a9eff}.ttt__cell--win{background-color:var(--color-correct);border-color:var(--color-correct)}.ttt__cell--win.ttt__cell--x,.ttt__cell--win.ttt__cell--o{color:#fff}.ftg__play{display:flex;flex-direction:column;align-items:center;flex:1;gap:16px;padding:16px 12px 24px;width:100%;overflow-y:auto}.ftg__share{max-width:420px}.ftg__turn{font-size:.85rem;font-weight:600;color:var(--color-subtext)}.ftg__grid{display:grid;grid-template-columns:minmax(70px,.9fr) repeat(3,1fr);gap:4px;width:100%;max-width:480px}.ftg__corner{background:transparent}.ftg__header{display:flex;align-items:center;justify-content:center;text-align:center;padding:6px 4px;font-size:.68rem;font-weight:700;line-height:1.2;background:var(--color-modal-bg);border:1px solid var(--color-border);border-radius:6px;min-height:52px}.ftg__cell{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--color-modal-bg);border:1px solid var(--color-border);border-radius:6px;padding:4px;overflow:hidden}.ftg__cell--correct{border-color:var(--color-correct);background:#538d4e26}.ftg__cell--incorrect{border-color:#e74c3c;background:#e74c3c1f}.ftg__cell--unknown{border-color:var(--color-present);background:#b59f3b1f}.ftg__cell form{width:100%}.ftg__input{width:100%;background:transparent;border:none;outline:none;color:var(--color-text);font-family:var(--font);font-size:.72rem;text-align:center}.ftg__cell-value{font-size:.68rem;font-weight:600;text-align:center;line-height:1.2;word-break:break-word}.ftg__cell-icon{position:absolute;top:2px;right:4px;font-size:.7rem}.ftg__cell--correct .ftg__cell-icon{color:var(--color-correct)}.ftg__cell--incorrect .ftg__cell-icon{color:#e74c3c}.ftg__cell--unknown .ftg__cell-icon{color:var(--color-present)}.ftg__cell--win{box-shadow:0 0 0 2px gold inset;background:#d4af372e}.ftg__done{text-align:center}@media (min-width: 480px){.ftg__grid{max-width:520px}.ftg__header{font-size:.78rem}.ftg__input{font-size:.85rem}.ftg__cell-value{font-size:.8rem}}.update-banner{position:fixed;top:16px;left:50%;transform:translate(-50%);background-color:var(--color-modal-bg);border:1px solid var(--color-border);border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:16px;z-index:100;font-size:.9rem;white-space:nowrap;box-shadow:0 4px 16px #0006}.update-banner__actions{display:flex;gap:8px}.update-banner__btn{padding:6px 12px;border-radius:4px;background-color:var(--color-border);color:var(--color-text);font-size:.85rem;font-weight:600}.update-banner__btn--refresh{background-color:var(--color-correct)}