*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-correct:#538d4e;--color-present:#b59f3b;--color-absent:#3a3a3c;--color-border:#3a3a3c;--color-text:#fff;--color-subtext:#818384;--color-bg:#121213;--color-surface:#1a1a1b;--color-key-bg:#818384;--tile-size:62px;--tile-gap:5px;--font:"Clear Sans", "Helvetica Neue", Arial, sans-serif}@media (width<=768px){:root{--tile-size:54px;--tile-gap:4px}}@media (width<=480px){:root{--tile-size:45px;--tile-gap:3px}}html,body,#root{background:var(--color-bg);height:100%;color:var(--color-text);font-family:var(--font)}.btn{font-family:var(--font);letter-spacing:.05em;cursor:pointer;border:none;border-radius:4px;justify-content:center;align-items:center;min-height:44px;padding:.5rem 1.25rem;font-size:.875rem;font-weight:700;transition:opacity .15s;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{color:#fff;background:#538d4e}.btn--secondary{background:var(--color-absent);color:#fff}.btn--ghost{color:var(--color-subtext);border:1px solid var(--color-border);background:0 0}.btn--oauth{color:#1f1f1f;background:#fff;border:1px solid #d6d6d6;gap:.65rem;width:100%}.btn--lg{padding:.75rem 2rem;font-size:1.1rem}.btn__oauth-icon{color:#fff;background:linear-gradient(135deg,#4285f4,#34a853 52%,#fbbc05 78%,#ea4335);border-radius:999px;justify-content:center;align-items:center;width:1.35rem;height:1.35rem;font-size:.8rem;font-weight:800;display:inline-flex}.input{background:var(--color-surface);border:1px solid var(--color-border);width:100%;color:var(--color-text);font-family:var(--font);border-radius:4px;outline:none;min-height:44px;padding:.625rem .875rem;font-size:1rem;transition:border-color .15s}.input:focus{border-color:var(--color-subtext)}@media (width<=480px){.btn{padding:.4rem 1rem;font-size:.8rem}.btn--lg{padding:.6rem 1.5rem;font-size:1rem}}.auth-page{justify-content:center;align-items:center;min-height:100vh;padding:1rem;display:flex}.auth-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;flex-direction:column;gap:.875rem;width:100%;max-width:360px;padding:2rem;display:flex}.auth-card h2{text-align:center;letter-spacing:.05em;text-transform:uppercase;font-size:1.5rem;font-weight:700}.auth-card__error{color:#e74c3c;background:#e74c3c26;border:1px solid #e74c3c66;border-radius:4px;padding:.5rem .75rem;font-size:.85rem}.auth-card__footer{text-align:center;color:var(--color-subtext);font-size:.85rem}.auth-card__footer a{color:var(--color-text);font-weight:600}.auth-card__divider{color:var(--color-subtext);text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:.75rem;font-size:.8rem;display:flex}.auth-card__divider:before,.auth-card__divider:after{content:"";background:var(--color-border);flex:1;height:1px}.auth-card__status{text-align:center;color:var(--color-subtext);line-height:1.5}@media (width<=480px){.auth-card{padding:1.5rem 1rem}.auth-card h2{font-size:1.25rem}}.home-page{flex-direction:column;min-height:100vh;display:flex}.home-page__header{border-bottom:1px solid var(--color-border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.5rem;display:flex}.home-page__header h1{letter-spacing:.1em;text-transform:uppercase;font-size:1.75rem;font-weight:700}.home-page__user{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:1rem;font-size:.9rem;display:flex}.home-page__elo{background:var(--color-absent);border-radius:4px;padding:.2rem .5rem;font-size:.8rem;font-weight:700}.home-page__main{flex:1;justify-content:center;align-items:center;padding:1rem;display:flex}.lobby{text-align:center;flex-direction:column;align-items:center;gap:1.5rem;display:flex}.lobby__tagline{color:var(--color-subtext);font-size:1rem}@media (width<=768px){.home-page__header{padding:1rem}.home-page__header h1{font-size:1.4rem}.home-page__user{gap:.75rem;font-size:.8rem}}@media (width<=480px){.home-page__header{flex-direction:column;align-items:flex-start;gap:.75rem;padding:.75rem}.home-page__header h1{font-size:1.25rem}.home-page__user{justify-content:space-between;width:100%}.home-page__main{padding:.75rem}}.queue-screen{text-align:center;flex-direction:column;align-items:center;gap:1.25rem;display:flex}.queue-screen__spinner{border:3px solid var(--color-border);border-top-color:#538d4e;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.queue-screen__label{color:var(--color-subtext);letter-spacing:.05em;font-size:.95rem}.game-page{flex-direction:column;align-items:center;gap:.75rem;min-height:100vh;padding:1rem .5rem;display:flex}.game-page__header{border-bottom:1px solid var(--color-border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;width:100%;max-width:500px;padding:.875rem 1rem;display:flex}.game-page__title{letter-spacing:.1em;text-transform:uppercase;font-size:1.4rem;font-weight:700}.game-page__elo{color:var(--color-subtext);font-size:.8rem;font-weight:700}.game-page__result{letter-spacing:.05em;border-radius:4px;padding:.5rem 1.25rem;font-size:1.1rem;font-weight:700}.game-page__result--win{color:#538d4e;background:#538d4e40}.game-page__result--lose{color:#e74c3c;background:#e74c3c26}.game-page__error{color:#e74c3c;font-size:.85rem}@media (width<=768px){.game-page{padding:.75rem .5rem}.game-page__header{max-width:90vw;padding:.75rem .5rem}.game-page__title{font-size:1.2rem}.game-page__hp-bars{max-width:90vw;padding:0 .5rem}.game-page__boards{gap:1rem}}@media (width<=480px){.game-page{gap:.5rem;padding:.5rem .25rem}.game-page__header{flex-direction:column;align-items:flex-start;max-width:100%;padding:.5rem}.game-page__title{font-size:1rem}.game-page__hp-bars{max-width:100%;padding:0 .25rem}.game-page__boards{gap:.75rem;width:100%;padding:0 .25rem}}.board{gap:var(--tile-gap);flex-direction:column;padding:.5rem 0;display:flex}.board__row{gap:var(--tile-gap);display:flex}.tile{width:var(--tile-size);height:var(--tile-size);border:2px solid var(--color-border);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;font-size:2rem;font-weight:700;display:flex}.tile--tbd{border-color:#565758}.tile--correct{background:var(--color-correct);border-color:var(--color-correct);color:#fff}.tile--present{background:var(--color-present);border-color:var(--color-present);color:#fff}.tile--absent{background:var(--color-absent);border-color:var(--color-absent);color:#fff}.tile--empty{border-color:var(--color-border)}@media (width<=480px){.tile{font-size:1.5rem}}.opponent-panel{flex-direction:column;align-items:center;gap:4px;display:flex}.opponent-panel__label{color:var(--color-subtext);letter-spacing:.08em;text-transform:uppercase;font-size:.7rem}.mini-board{flex-direction:column;gap:3px;display:flex}.mini-board__row{gap:3px;display:flex}.mini-tile{background:var(--color-border);border-radius:2px;width:12px;height:12px}.mini-tile--correct{background:var(--color-correct)}.mini-tile--present{background:var(--color-present)}.mini-tile--absent{background:var(--color-absent)}.mini-tile--empty{background:var(--color-border)}@media (width<=480px){.opponent-panel__label{font-size:.65rem}.mini-tile{width:10px;height:10px}}.keyboard{flex-direction:column;gap:8px;width:100%;max-width:500px;padding:0 .5rem;display:flex}.keyboard__row{justify-content:center;gap:6px;display:flex}.key{background:var(--color-key-bg);max-width:43px;height:58px;color:var(--color-text);font-family:var(--font);cursor:pointer;-webkit-user-select:none;user-select:none;border:none;border-radius:4px;flex:1;font-size:.8rem;font-weight:700;transition:background .1s}.key--wide{min-width:65px;max-width:65px;font-size:.75rem}.key--used{background:var(--color-key-bg-active,#3f3f3f);color:#f5f5f5}.key--correct{background:var(--color-correct)}.key--present{background:var(--color-present)}.key--absent{background:var(--color-absent)}@media (width<=768px){.keyboard{gap:6px;padding:0 .25rem}.keyboard__row{gap:5px}.key{max-width:38px;height:50px;font-size:.7rem}.key--wide{min-width:58px;max-width:58px}}@media (width<=480px){.keyboard{gap:5px;padding:0}.keyboard__row{gap:4px}.key{max-width:32px;height:44px;font-size:.65rem}.key--wide{min-width:48px;max-width:48px}}.hp-bar{align-items:center;gap:8px;width:100%;display:flex}.hp-bar--flip{flex-direction:row-reverse}.hp-bar__label{color:var(--color-subtext);letter-spacing:.05em;min-width:28px;font-size:.75rem;font-weight:700}.hp-bar__track{background:var(--color-border);border-radius:4px;flex:1;height:8px;overflow:hidden}.hp-bar__fill{border-radius:4px;height:100%;transition:width .5s,background .5s}.hp-bar__value{color:var(--color-text);text-align:right;min-width:28px;font-size:.75rem;font-weight:700}@media (width<=480px){.hp-bar{gap:6px}.hp-bar__label,.hp-bar__value{min-width:24px;font-size:.7rem}.hp-bar__track{height:6px}}.game-page__hp-bars{flex-direction:column;gap:6px;width:100%;max-width:500px;padding:0 1rem;display:flex}.game-page__boards{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:1.5rem;display:flex}.btn--sm{padding:.3rem .75rem;font-size:.75rem}.hp-bar__forfeited{color:var(--color-subtext);font-size:.75rem;font-style:italic}.modal-overlay{z-index:100;background:#000000b3;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;flex-direction:column;gap:1rem;width:100%;max-width:360px;padding:2rem;display:flex;position:relative}.modal__tabs{border-bottom:1px solid var(--color-border);gap:0;margin-bottom:.5rem;display:flex}.modal__tab{color:var(--color-subtext);font-family:var(--font);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:.5rem;font-size:.9rem;font-weight:700;transition:all .15s}.modal__tab--active{color:var(--color-text);border-bottom-color:#538d4e}.modal__content{flex-direction:column;align-items:center;gap:1rem;display:flex}.modal__desc{color:var(--color-subtext);text-align:center;font-size:.85rem}.modal__close{color:var(--color-subtext);cursor:pointer;background:0 0;border:none;font-size:1rem;position:absolute;top:.75rem;right:.75rem}.room-code{letter-spacing:.3em;color:var(--color-text);background:var(--color-absent);border-radius:8px;padding:.5rem 1.5rem;font-size:2.5rem;font-weight:700}.input--code{text-align:center;letter-spacing:.3em;text-transform:uppercase;font-size:1.5rem;font-weight:700}@media (width<=480px){.modal{max-width:100%;padding:1.5rem 1rem}.room-code{padding:.4rem 1rem;font-size:1.75rem}.input--code{font-size:1.2rem}}.notification{background:var(--color-surface);border:1px solid var(--color-border);z-index:400;border-radius:8px;flex-direction:column;gap:.75rem;min-width:260px;padding:1rem 1.25rem;display:flex;position:fixed;bottom:1.5rem;right:1.5rem;box-shadow:0 4px 24px #0006}.notification__text{color:var(--color-text);font-size:.9rem}.notification__text strong{color:#538d4e}.notification__actions{gap:.5rem;display:flex}@media (width<=640px){.notification{min-width:auto;bottom:1rem;left:1rem;right:1rem}}@media (width<=480px){.notification{padding:.75rem 1rem;font-size:.8rem;bottom:.75rem;left:.75rem;right:.75rem}}.game-page__result-actions{flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.5rem;display:flex}.game-page__rematch-status{color:var(--color-subtext);font-size:.8rem;font-style:italic}@media (width<=480px){.game-page__result-actions{flex-direction:column;width:100%}.game-page__result-actions .btn{width:100%}}.result-overlay{z-index:300;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.result-overlay__backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:radial-gradient(circle at top,#538d4e24,#0000 35%),#060709c7;position:absolute;inset:0}.result-overlay__card{background:linear-gradient(#1c1d1ff5,#101113fa);border:1px solid #ffffff14;border-radius:18px;flex-direction:column;gap:1rem;width:min(720px,100%);max-height:min(92vh,860px);padding:1.5rem;display:flex;position:relative;overflow:auto;box-shadow:0 18px 72px #00000073}.result-overlay__status{letter-spacing:.18em;text-transform:uppercase;border-radius:999px;align-self:center;padding:.35rem .8rem;font-size:.8rem;font-weight:700}.result-overlay__status--win{color:#9fd39b;background:#538d4e2e;border:1px solid #538d4e73}.result-overlay__status--lose{color:#ff9e92;background:#e74c3c24;border:1px solid #e74c3c59}.result-overlay__headline{text-align:center;letter-spacing:.03em;font-size:clamp(1.35rem,4vw,2rem);font-weight:700}.result-overlay__summary{background:#ffffff08;border:1px solid #ffffff0f;border-radius:14px;flex-direction:column;gap:1rem;min-height:320px;padding:1rem;display:flex}.result-overlay__empty,.result-overlay__waiting,.result-overlay__guess-empty{color:var(--color-subtext);font-size:.9rem}.result-overlay__round-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.result-overlay__round-label{color:var(--color-subtext);letter-spacing:.12em;text-transform:uppercase;font-size:.82rem}.result-overlay__target{letter-spacing:.28em;font-size:clamp(1.1rem,3vw,1.7rem);font-weight:700}.result-overlay__players{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.result-overlay__player{flex-direction:column;gap:.75rem;min-width:0;display:flex}.result-overlay__player-label{color:var(--color-subtext);letter-spacing:.14em;text-transform:uppercase;font-size:.82rem}.result-overlay__guess-list{flex-direction:column;gap:.5rem;display:flex}.result-overlay__guess{flex-wrap:wrap;gap:.35rem;display:flex}.result-overlay__guess-tile{border:1px solid var(--color-border);background:#ffffff05;border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;font-size:.95rem;font-weight:700;display:inline-flex}.result-overlay__guess-tile--correct{background:var(--color-correct);border-color:var(--color-correct)}.result-overlay__guess-tile--present{background:var(--color-present);border-color:var(--color-present)}.result-overlay__guess-tile--absent{background:var(--color-absent);border-color:var(--color-absent)}.result-overlay__dots{justify-content:center;align-items:center;gap:.45rem;padding-top:.25rem;display:flex}.result-overlay__dot{cursor:pointer;background:#fff3;border:none;border-radius:999px;width:9px;height:9px}.result-overlay__dot--active{background:#538d4e;width:24px}.result-overlay__actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;display:flex}@media (width<=768px){.result-overlay__card{gap:.875rem;padding:1.25rem}.result-overlay__headline{font-size:clamp(1.1rem,3vw,1.75rem)}.result-overlay__guess-tile{width:37px;height:37px;font-size:.9rem}}@media (width<=640px){.result-overlay__card{gap:.75rem;padding:1rem}.result-overlay__summary{min-height:0}.result-overlay__players{grid-template-columns:1fr}.result-overlay__target{letter-spacing:.18em}.result-overlay__guess-tile{border-radius:8px;width:34px;height:34px;font-size:.82rem}.result-overlay__headline{font-size:clamp(1rem,2.5vw,1.5rem)}}@media (width<=480px){.result-overlay{padding:.5rem}.result-overlay__card{border-radius:12px;gap:.625rem;padding:.875rem}.result-overlay__summary{gap:.75rem;padding:.75rem}.result-overlay__guess-tile{border-radius:6px;width:30px;height:30px;font-size:.75rem}.result-overlay__headline{font-size:clamp(1rem,2vw,1.3rem)}.result-overlay__status{padding:.3rem .6rem;font-size:.7rem}.result-overlay__round-label,.result-overlay__player-label{font-size:.75rem}}.challenge-modal-overlay{z-index:500;background:#000000b3;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.challenge-modal{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;flex-direction:column;gap:1.25rem;width:100%;max-width:360px;padding:2rem;display:flex}.challenge-modal__title{text-align:center;letter-spacing:.05em;color:var(--color-text);margin:0;font-size:1.25rem;font-weight:700}.challenge-modal__message{color:var(--color-subtext);text-align:center;margin:0;font-size:.9rem;line-height:1.5}.challenge-modal__message strong{color:#b59f3b;font-weight:700}.challenge-modal__actions{flex-direction:column;gap:.75rem;display:flex}@media (width<=480px){.challenge-modal{max-width:100%;padding:1.5rem 1rem}.challenge-modal__title{font-size:1.1rem}.challenge-modal__message{font-size:.85rem}}