:root{--color-correct: #538d4e;--color-present: #b59f3b;--color-absent: #3a3a3c;--color-background: #121213;--color-tone-1: #ffffff;--color-tone-2: #818384;--color-tone-3: #565758;--color-tone-4: #3a3a3c;--color-tone-5: #272729;--color-tone-6: #1a1a1b;--color-tone-7: #121213;--color-error: #ff4d4d;--color-background-overlay: rgba(0, 0, 0, .5);--font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-xxl: 2rem;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--board-gap: clamp(3px, .6vh, 5px);--tile-size: clamp(32px, 8vh, 62px);--header-height: clamp(36px, 6vh, 50px);--keyboard-height: 200px;--max-width: 500px;--key-height: clamp(40px, 7vh, 58px);--animation-speed-fast: .1s;--animation-speed-normal: .25s;--animation-speed-slow: .5s;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;touch-action:manipulation}body{background-color:var(--color-background);color:var(--color-tone-1);font-family:var(--font-family);display:flex;justify-content:center;align-items:flex-start;width:100%}#root{width:100%;height:100%;overflow:hidden;display:flex;justify-content:center}h1,h2,h3,h4,h5,h6{margin:0;font-weight:700}button{cursor:pointer;font-family:inherit;transition:opacity var(--animation-speed-fast) ease}button:active{opacity:.8}.app-container{display:flex;flex-direction:column;align-items:center;width:100%;max-width:var(--max-width);margin:0 auto;height:100%;padding:0 var(--spacing-sm);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);overflow:hidden;position:relative}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes flip-in{0%{transform:rotateX(0)}to{transform:rotateX(-90deg)}}@keyframes flip-out{0%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}.tile-pop{animation:pop var(--animation-speed-fast)}.tile-flip-in{animation:flip-in var(--animation-speed-normal) forwards}.tile-flip-out{animation:flip-out var(--animation-speed-normal) forwards}.game-session{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.loader-container{display:flex;justify-content:center;align-items:center;height:100%}.grid-wrapper{flex:1;display:flex;align-items:center;justify-content:center;overflow-y:hidden}.header{display:flex;width:100%;justify-content:space-between;align-items:center;border-bottom:1px solid var(--color-tone-3);margin-bottom:clamp(4px,1vh,8px);padding:clamp(4px,1vh,8px) 0;position:relative;min-height:var(--header-height);flex-shrink:0;z-index:3000}.header-action{width:40px;display:flex;justify-content:center;align-items:center}.header-title-container{text-align:center;display:flex;flex-direction:column;align-items:center}.header-title{margin:0;font-size:clamp(1.25rem,4vh,2rem);letter-spacing:.1rem}.header-subtitle{font-size:var(--font-size-sm);color:var(--color-tone-2)}.auth-button{background:none;border:none;color:var(--color-tone-3);font-size:var(--font-size-xs);cursor:pointer;margin-top:4px;text-decoration:underline;padding:0}.auth-button.logged-in{color:var(--color-correct)}.icon-button{background:none;border:none;color:var(--color-tone-1);cursor:pointer;padding:0;display:flex;flex-direction:column;align-items:center}.icon-button:hover{opacity:.8}.icon-label{font-size:10px;margin-top:2px;font-weight:700}.game-grid{padding-bottom:var(--spacing-md);display:grid;grid-template-rows:repeat(6,1fr);grid-gap:var(--board-gap)}.row{display:flex;justify-content:center;gap:var(--board-gap)}.tile{width:var(--tile-size);height:var(--tile-size);border:2px solid var(--color-tone-4);display:flex;justify-content:center;align-items:center;font-size:clamp(1.25rem,5vh,2rem);line-height:1;padding-top:.1em;font-weight:700;text-transform:uppercase;-webkit-user-select:none;user-select:none;background-color:transparent;transition:background-color var(--animation-speed-normal),border-color var(--animation-speed-normal),color var(--animation-speed-normal)}.tile[data-status=correct]{background-color:var(--color-correct);border-color:var(--color-correct)}.tile[data-status=present]{background-color:var(--color-present);border-color:var(--color-present)}.tile[data-status=absent]{background-color:var(--color-absent);border-color:var(--color-absent)}.tile[data-status=tbd]{border-color:var(--color-tone-3);color:var(--color-tone-1)}.tile[data-has-letter=true]{border-color:var(--color-tone-3);animation:pop var(--animation-speed-fast)}.keyboard-container{width:100%;max-width:var(--max-width);margin:0 auto}.keyboard-row{display:flex;justify-content:center;margin-bottom:var(--spacing-sm);touch-action:manipulation}.key{display:flex;justify-content:center;align-items:center;margin-right:6px;border-radius:4px;background-color:var(--color-tone-2);color:var(--color-tone-1);cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;height:var(--key-height);font-size:clamp(.9rem,2vh,1.25rem);font-weight:700;transition:background-color var(--animation-speed-fast) ease}.key:last-child{margin-right:0}.key.wide{flex:1.5;font-size:clamp(.6rem,1.5vh,.75rem)}.key[data-status=correct]{background-color:var(--color-correct)}.key[data-status=present]{background-color:var(--color-present)}.key[data-status=absent]{background-color:var(--color-absent)}.modal-overlay{position:fixed;top:var(--header-height);left:0;right:0;bottom:0;height:calc(100% - var(--header-height));background-color:var(--color-background-overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:4000;animation:fade-in var(--animation-speed-fast) forwards}.modal-content{background-color:#121213f2;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--color-tone-3);border-radius:8px;padding:20px;width:90%;max-width:400px;max-height:90vh;display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow-lg);animation:slide-up var(--animation-speed-normal) forwards;z-index:5000}.modal-body{overflow-y:auto;flex:1;min-height:0;padding-right:4px;cursor:grab;-webkit-user-select:none;user-select:none}.modal-body.grabbing{cursor:grabbing}.modal-body::-webkit-scrollbar{width:6px}.modal-body::-webkit-scrollbar-track{background:var(--color-background)}.modal-body::-webkit-scrollbar-thumb{background:var(--color-tone-3);border-radius:10px}.modal-body::-webkit-scrollbar-thumb:hover{background:var(--color-tone-2)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.modal-title{margin:0;font-size:1.2rem;color:var(--color-tone-1)}.modal-close{background:none;border:none;color:var(--color-tone-1);font-size:2rem;cursor:pointer;padding:8px;line-height:1;display:flex;align-items:center;justify-content:center;position:relative;z-index:4001}@keyframes slide-up{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pulse{0%{transform:scale(.9);opacity:.7}50%{transform:scale(1.2);opacity:1}to{transform:scale(.9);opacity:.7}}.share-button{background-color:var(--color-correct);color:#fff;border:none;border-radius:4px;padding:12px 24px;font-size:1.1rem;font-weight:700;cursor:pointer;margin:20px auto 0;display:flex;align-items:center;gap:8px;transition:transform .1s ease}.share-button:active{transform:scale(.95)}.loading-mask{filter:blur(4px);opacity:.4;pointer-events:none;transition:filter .5s ease,opacity .5s ease}.loading-mask .tile,.loading-mask .key,.loading-mask .row,.loading-mask button{border-color:#ffffff0d!important;background-color:transparent!important;box-shadow:none!important}.loading-container{position:relative;width:100%;height:100%}.dots-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;gap:8px;z-index:10}.dot{width:10px;height:10px;background-color:var(--color-tone-2);border-radius:50%;animation:dot-pulse 1.4s infinite ease-in-out both}.dot:nth-child(1){animation-delay:-.32s}.dot:nth-child(2){animation-delay:-.16s}@keyframes dot-pulse{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.fade-in{animation:fade-in .8s ease-out forwards!important}.content-transition{width:100%;height:100%;overflow:hidden}.content-transition-in{animation:content-slide-in .3s ease-out forwards}.content-transition-out{animation:content-slide-out .15s ease-in forwards}@keyframes content-slide-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes content-slide-out{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-20px)}}.page-transition{width:100%;height:100%;overflow:hidden;perspective:1000px;transform-style:preserve-3d}.page-transition-in{animation:page-fade-in .4s ease-out forwards}.page-transition-out{animation:page-fade-out .2s ease-in forwards}.page-transition-fade-in{animation:fade-only-in .3s ease-out forwards}.page-transition-fade-out{animation:fade-only-out .15s ease-in forwards}.page-transition-slide-fade-in{animation:page-slide-fade-in .4s ease-out forwards}.page-transition-slide-fade-out{animation:page-slide-fade-out .2s ease-in forwards}.page-transition-scale-fade-in{animation:page-scale-fade-in .4s cubic-bezier(.34,1.56,.64,1) forwards}.page-transition-scale-fade-out{animation:page-scale-fade-out .2s ease-in forwards}.page-transition-flip-in{animation:page-3d-flip-in .6s cubic-bezier(.4,0,.2,1) forwards}.page-transition-flip-out{animation:page-3d-flip-out .3s ease-in forwards}.page-transition-rotate-in{animation:page-3d-rotate-in .5s cubic-bezier(.4,0,.2,1) forwards}.page-transition-rotate-out{animation:page-3d-rotate-out .25s ease-in forwards}.page-transition-3d-slide-in{animation:page-3d-slide-in .4s ease-out forwards}.page-transition-3d-slide-out{animation:page-3d-slide-out .2s ease-in forwards}.page-transition-cube-in{animation:page-3d-cube-in .6s cubic-bezier(.4,0,.2,1) forwards}.page-transition-cube-out{animation:page-3d-cube-out .3s ease-in forwards}@keyframes page-fade-in{0%{opacity:0;transform:translate(10px)}50%{opacity:.7}to{opacity:1;transform:translate(0)}}@keyframes page-fade-out{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-10px)}}@keyframes fade-only-in{0%{opacity:0}to{opacity:1}}@keyframes fade-only-out{0%{opacity:1}to{opacity:0}}@keyframes page-slide-fade-in{0%{opacity:0;transform:translate(30px) scale(.98)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes page-slide-fade-out{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(-30px) scale(.98)}}@keyframes page-scale-fade-in{0%{opacity:0;transform:scale(.95)}50%{opacity:.8;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}@keyframes page-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes page-3d-flip-in{0%{opacity:0;transform:rotateY(-90deg) translateZ(-100px)}50%{opacity:.8;transform:rotateY(-45deg) translateZ(-50px)}to{opacity:1;transform:rotateY(0) translateZ(0)}}@keyframes page-3d-flip-out{0%{opacity:1;transform:rotateY(0) translateZ(0)}to{opacity:0;transform:rotateY(90deg) translateZ(-100px)}}@keyframes page-3d-rotate-in{0%{opacity:0;transform:rotateX(-20deg) rotateY(-30deg) scale(.8) translateZ(-50px)}50%{opacity:.7;transform:rotateX(-10deg) rotateY(-15deg) scale(.9) translateZ(-25px)}to{opacity:1;transform:rotateX(0) rotateY(0) scale(1) translateZ(0)}}@keyframes page-3d-rotate-out{0%{opacity:1;transform:rotateX(0) rotateY(0) scale(1) translateZ(0)}to{opacity:0;transform:rotateX(20deg) rotateY(30deg) scale(.8) translateZ(-50px)}}@keyframes page-3d-slide-in{0%{opacity:0;transform:translate(100px) translateZ(-50px) rotateY(-15deg)}50%{opacity:.6;transform:translate(50px) translateZ(-25px) rotateY(-7deg)}to{opacity:1;transform:translate(0) translateZ(0) rotateY(0)}}@keyframes page-3d-slide-out{0%{opacity:1;transform:translate(0) translateZ(0) rotateY(0)}to{opacity:0;transform:translate(-100px) translateZ(-50px) rotateY(15deg)}}@keyframes page-3d-cube-in{0%{opacity:0;transform:rotateY(-90deg) translate(-50%) translateZ(250px)}50%{opacity:.8;transform:rotateY(-45deg) translate(-25%) translateZ(125px)}to{opacity:1;transform:rotateY(0) translate(0) translateZ(0)}}@keyframes page-3d-cube-out{0%{opacity:1;transform:rotateY(0) translate(0) translateZ(0)}to{opacity:0;transform:rotateY(90deg) translate(50%) translateZ(-250px)}}@keyframes page-slide-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes page-slide-out{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-20px)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}