: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:100}.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:0;left:0;right:0;bottom:0;background-color:#000000d9;display:flex;justify-content:center;align-items:center;z-index:2000;animation:fade-in var(--animation-speed-fast) forwards}.modal-content{background-color:var(--color-background);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}.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}.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:2001}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@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)}