*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-3{left:.75rem}.right-3{right:.75rem}.top-1\/2{top:50%}.z-40{z-index:40}.z-50{z-index:50}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.block{display:block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-12{height:3rem}.h-5{height:1.25rem}.h-8{height:2rem}.max-h-\[90vh\]{max-height:90vh}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-full{width:100%}.max-w-\[100px\]{max-width:100px}.max-w-\[540px\]{max-width:540px}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-105{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.scale-95,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulseGlow{0%,to{box-shadow:0 0 20px rgba(102,126,234,.3)}50%{box-shadow:0 0 40px rgba(102,126,234,.6)}}.animate-pulse-glow{animation:pulseGlow 2s ease-in-out infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-8{gap:2rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.self-center{align-self:center}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-blue-500\/30{border-color:rgb(59 130 246/.3)}.border-gray-500\/30{border-color:rgb(107 114 128/.3)}.border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity,1))}.border-green-500\/30{border-color:rgb(34 197 94/.3)}.border-green-500\/50{border-color:rgb(34 197 94/.5)}.border-orange-500\/30{border-color:rgb(249 115 22/.3)}.border-red-500\/30{border-color:rgb(239 68 68/.3)}.border-red-500\/50{border-color:rgb(239 68 68/.5)}.border-white\/10{border-color:rgb(255 255 255/.1)}.border-white\/50{border-color:rgb(255 255 255/.5)}.border-yellow-500{--tw-border-opacity:1;border-color:rgb(234 179 8/var(--tw-border-opacity,1))}.bg-black\/90{background-color:rgb(0 0 0/.9)}.bg-blue-500\/10{background-color:rgb(59 130 246/.1)}.bg-blue-500\/20{background-color:rgb(59 130 246/.2)}.bg-gray-500\/10{background-color:rgb(107 114 128/.1)}.bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-green-500\/10{background-color:rgb(34 197 94/.1)}.bg-green-500\/20{background-color:rgb(34 197 94/.2)}.bg-orange-500\/10{background-color:rgb(249 115 22/.1)}.bg-orange-500\/20{background-color:rgb(249 115 22/.2)}.bg-red-500\/10{background-color:rgb(239 68 68/.1)}.bg-red-500\/20{background-color:rgb(239 68 68/.2)}.bg-white\/10{background-color:rgb(255 255 255/.1)}.bg-white\/20{background-color:rgb(255 255 255/.2)}.bg-white\/5{background-color:rgb(255 255 255/.05)}.bg-yellow-500{--tw-bg-opacity:1;background-color:rgb(234 179 8/var(--tw-bg-opacity,1))}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pl-10{padding-left:2.5rem}.pr-10{padding-right:2.5rem}.pt-20{padding-top:5rem}.text-left{text-align:left}.text-center{text-align:center}.align-middle{vertical-align:middle}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-8xl{font-size:6rem;line-height:1}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-blue-300{--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-green-300{--tw-text-opacity:1;color:rgb(134 239 172/var(--tw-text-opacity,1))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.text-orange-300{--tw-text-opacity:1;color:rgb(253 186 116/var(--tw-text-opacity,1))}.text-orange-400{--tw-text-opacity:1;color:rgb(251 146 60/var(--tw-text-opacity,1))}.text-red-300{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/50{color:rgb(255 255 255/.5)}.text-white\/80{color:rgb(255 255 255/.8)}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity,1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-50{opacity:.5}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0/0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.beta-anchor{position:relative}.beta-curved{position:absolute;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:visible}.beta-curved text{font-weight:900;letter-spacing:3px;fill:#f59e0b}.beta-curved-nav{width:52px;height:32px;bottom:100%;left:calc(50% + 8px);transform:translateX(-50%);margin-bottom:-14px}.beta-curved-nav text{font-size:15px;filter:drop-shadow(0 0 3px rgba(245,158,11,.6))}.beta-curved-hero{width:1.5em;height:.85em;bottom:100%;left:calc(50% + 8px);transform:translateX(-50%);margin-bottom:-.3em}.beta-curved-hero text{font-size:14px;filter:drop-shadow(0 0 6px rgba(245,158,11,.7))}.dark,:root{--bg:#0f0f1a;--bg-gradient:linear-gradient(180deg,#0f0f1a,#1a1a2e);--surface:#1a1a2e;--surface-2:#252542;--surface-3:#2f2f52;--border:#3d3d5c;--border-light:#4a4a70;--border-hover:#5a5a8a;--text:#ffffff;--text-secondary:#a0a0c0;--text-muted:#6b6b8a;--correct:#10b981;--correct-glow:rgba(16,185,129,0.4);--wrong-pos:#f5bb00;--wrong-pos-glow:rgba(245,187,0,0.4);--wrong:#4b5563;--wrong-glow:rgba(75,85,99,0.4);--accent-green:#34d399;--accent-blue:#60a5fa;--accent-orange:#fb923c;--accent-purple:#a78bfa;--accent-pink:#f472b6;--accent-red:#f87171;--accent-yellow:#fbbf24;--key-bg:#2a2a48;--key-hover:#363660;--key-active:#404070}.light{--bg:#f0f2f5;--bg-gradient:linear-gradient(180deg,#f0f2f5,#e4e6eb);--surface:#ffffff;--surface-2:#f7f8fa;--surface-3:#ebedf0;--border:#dddfe2;--border-light:#ebedf0;--border-hover:#bcc0c4;--text:#1c1e21;--text-secondary:#4b4f56;--text-muted:#65676b;--correct:#16a34a;--correct-glow:rgba(22,163,74,0.2);--wrong-pos:#ca8a04;--wrong-pos-glow:rgba(202,138,4,0.2);--wrong:#d1d5db;--wrong-glow:rgba(209,213,219,0.3);--accent-green:#16a34a;--accent-blue:#2563eb;--accent-orange:#ea580c;--accent-purple:#7c3aed;--accent-pink:#db2777;--accent-red:#dc2626;--accent-yellow:#eab308;--key-bg:#e4e6eb;--key-hover:#d8dadf;--key-active:#bcc0c4}*{box-sizing:border-box;margin:0;padding:0}html{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}body,html{overflow-x:hidden}body{min-height:100vh;min-height:100dvh;width:100%;max-width:100vw;background:var(--bg);background-image:var(--bg-gradient);color:var(--text);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}.container{max-width:500px;margin:0 auto;padding:0 16px}.logo{font-size:32px;font-weight:800;letter-spacing:-.02em;text-shadow:0 0 30px rgba(16,185,129,.3)}.logo-accent{color:var(--accent-green);text-shadow:0 0 20px var(--correct-glow)}h1,h2,h3{font-weight:700;letter-spacing:-.02em}.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;transition:all .2s ease}.card-lg{border-radius:20px;padding:28px}.card-glow{box-shadow:0 0 40px rgba(16,185,129,.1)}.tile{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(1.5rem,5vw,2rem);text-transform:uppercase;border-radius:8px;background:var(--surface-2);border:2px solid var(--border);color:var(--text);transition:all .15s ease;transform-style:preserve-3d;perspective:500px}.tile-filled{border-color:var(--border-light);animation:tilePop .1s cubic-bezier(.34,1.56,.64,1);transform:scale(1)}.tile-correct{background:var(--correct);border-color:var(--correct);color:#fff}.tile-wrong-position{background:var(--wrong-pos);border-color:var(--wrong-pos);color:#fff}.tile-wrong{background:var(--wrong);border-color:var(--wrong);color:#fff}.tile-reveal{animation:tileFlip .5s cubic-bezier(.4,0,.2,1) forwards}.tile-success{animation:tileSuccess .6s cubic-bezier(.34,1.56,.64,1)}@keyframes tileSuccess{0%,to{transform:translateY(0) scale(1)}25%{transform:translateY(-12px) scale(1.05)}50%{transform:translateY(-6px) scale(1)}}.row-shake{animation:rowShake .5s cubic-bezier(.36,.07,.19,.97)}@keyframes rowShake{0%,to{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}.key{display:flex;align-items:center;justify-content:center;height:58px;min-width:32px;padding:0 8px;background:var(--key-bg);border:none;border-radius:8px;color:var(--text);font-weight:600;font-size:14px;cursor:pointer;transition:all .1s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 0 rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05)}.key:active{transform:translateY(2px);box-shadow:0 0 0 rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05);background:var(--key-active)}@media (hover:hover){.key:hover{background:var(--key-hover)}}.key-wide{min-width:56px;font-size:12px;font-weight:700}.key-correct{background:var(--correct)}.key-correct,.key-wrong-position{color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.3)}.key-wrong-position{background:var(--wrong-pos)}.key-wrong{background:var(--wrong);color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.3)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 28px;border-radius:12px;font-weight:600;font-size:15px;cursor:pointer;transition:all .15s ease;border:none;box-shadow:0 4px 0 rgba(0,0,0,.2)}.btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.2)}.btn-primary{background:rgba(255,255,255,.2);color:#ffffff;border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 15px rgba(0,0,0,.2)}.btn-primary:hover{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.4)}.btn-secondary{background:rgba(255,255,255,.1);color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.1)}.btn-secondary:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.2)}.btn-ghost{background:transparent;color:rgba(255,255,255,.8)}.btn-ghost:hover{background:rgba(255,255,255,.1);color:#ffffff}.btn-danger{background:rgba(239,68,68,.3);color:#ffffff;border:1px solid rgba(239,68,68,.4)}.btn-danger:hover{background:rgba(239,68,68,.5);border-color:rgba(239,68,68,.6)}.btn.btn-green{background:linear-gradient(135deg,var(--correct) 0,#059669 100%);color:#fff;box-shadow:0 4px 0 #047857,0 0 20px var(--correct-glow);text-shadow:0 1px 2px rgba(0,0,0,.2)}.btn.btn-green:hover{background:linear-gradient(135deg,#34d399 0,var(--correct) 100%)}.btn.btn-orange{background:linear-gradient(135deg,var(--wrong-pos) 0,#d97706 100%);color:#fff;box-shadow:0 4px 0 #b45309,0 0 20px var(--wrong-pos-glow)}.btn.btn-blue{background:linear-gradient(135deg,var(--accent-blue) 0,#3b82f6 100%);color:#fff;box-shadow:0 4px 0 #2563eb,0 0 20px rgba(96,165,250,.3)}.btn:disabled{opacity:.5;pointer-events:none}.light .btn-primary{background:#2563eb;color:#ffffff;border:1px solid #2563eb;box-shadow:0 4px 15px rgba(37,99,235,.3)}.light .btn-primary:hover{background:#1d4ed8;border-color:#1d4ed8}.light .btn-secondary{background:#f0f2f5;color:#1c1e21;border:1px solid #dddfe2}.light .btn-secondary:hover{background:#e4e6eb;border-color:#bcc0c4}.light .btn-ghost{background:transparent;color:#4b4f56}.light .btn-ghost:hover{background:rgba(0,0,0,.05);color:#1c1e21}.light .btn-danger{background:rgba(220,38,38,.1);color:#dc2626;border:1px solid rgba(220,38,38,.3)}.light .btn-danger:hover{background:rgba(220,38,38,.2);border-color:rgba(220,38,38,.5)}.mode-card{display:flex;align-items:center;gap:16px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:16px;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}.mode-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;transition:opacity .3s ease}.mode-card.green:before{background:radial-gradient(circle at 0 50%,var(--correct-glow),transparent 50%)}.mode-card.blue:before{background:radial-gradient(circle at 0 50%,rgba(96,165,250,.2),transparent 50%)}.mode-card.orange:before{background:radial-gradient(circle at 0 50%,var(--wrong-pos-glow),transparent 50%)}.mode-card:hover{border-color:var(--border-light);transform:translateY(-2px)}.mode-card:hover:before{opacity:1}.mode-card:active{transform:translateY(0)}.mode-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:14px;flex-shrink:0;position:relative;z-index:1}.mode-icon.green{background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(16,185,129,.1));color:var(--accent-green);box-shadow:0 0 20px var(--correct-glow)}.mode-icon.blue{background:linear-gradient(135deg,rgba(96,165,250,.2),rgba(96,165,250,.1));color:var(--accent-blue);box-shadow:0 0 20px rgba(96,165,250,.3)}.mode-icon.orange{background:linear-gradient(135deg,rgba(251,146,60,.2),rgba(251,146,60,.1));color:var(--accent-orange);box-shadow:0 0 20px var(--wrong-pos-glow)}.game-header{padding:16px 0;margin-bottom:20px}.heart{color:#f87171;filter:drop-shadow(0 0 6px rgba(248,113,113,.5));transition:all .2s ease}.heart-empty{color:var(--surface-3);filter:none}.heart-lost{animation:heartLost .4s ease}@keyframes heartLost{0%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.5}to{transform:scale(.8);opacity:.3}}.stat-box{text-align:center;padding:16px 12px;background:var(--surface);border:1px solid var(--border);border-radius:12px}.stat-value{font-size:28px;text-shadow:0 0 20px rgba(255,255,255,.1)}.stat-label{font-size:11px;letter-spacing:.5px;margin-top:4px}.stat-green .stat-value{color:var(--accent-green)}.stat-orange .stat-value{color:var(--accent-orange)}.stat-blue .stat-value{color:var(--accent-blue)}.toast{background:var(--text);color:var(--bg);padding:14px 24px;border-radius:12px;font-weight:600;font-size:14px;box-shadow:0 10px 40px rgba(0,0,0,.4)}.toast-error{background:linear-gradient(135deg,#f87171,#ef4444);color:#fff}.toast-success{background:linear-gradient(135deg,var(--accent-green) 0,var(--correct) 100%);color:#fff}.modal-backdrop{position:fixed;inset:0;background:rgba(15,15,26,.9);backdrop-filter:blur(8px);z-index:50}.modal{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:clamp(16px,5vw,24px);padding:clamp(24px,6vw,36px) clamp(16px,5vw,28px);max-width:min(380px,calc(100vw - 32px));width:100%;box-shadow:0 25px 80px rgba(0,0,0,.5)}.modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border:none;color:var(--text-secondary);cursor:pointer;border-radius:10px;transition:all .15s ease}.modal-close:hover{background:var(--surface-3);color:var(--text)}.light .modal-backdrop{background:rgba(0,0,0,.5)}.light .modal{background:#ffffff;border:1px solid rgba(0,0,0,.1);box-shadow:0 25px 80px rgba(0,0,0,.25)}.light .modal-close{background:#f0f2f5;color:#4b4f56}.light .modal-close:hover{background:#e4e6eb;color:#1c1e21}.modal-backdrop-overlay{background:rgba(0,0,0,.6)}.light .modal-backdrop-overlay{background:rgba(0,0,0,.4)}.modal-panel{background:#1a1a2e;border:1px solid #3d3d5c}.modal-title{color:#ffffff}.modal-close-btn{color:rgba(255,255,255,.7)}.modal-close-btn:hover{background:rgba(255,255,255,.1)}.modal-content{color:rgba(255,255,255,.9)}.light .modal-panel{background:#ffffff;border:1px solid rgba(0,0,0,.1)}.light .modal-title{color:#1c1e21}.light .modal-close-btn{color:#65676b}.light .modal-close-btn:hover{background:rgba(0,0,0,.05);color:#1c1e21}.light .modal-content{color:#1c1e21}.result-icon{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.result-icon.success{background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(16,185,129,.1));box-shadow:0 0 40px var(--correct-glow);animation:successPulse 2s ease infinite}.result-icon.fail{background:linear-gradient(135deg,rgba(248,113,113,.2),rgba(248,113,113,.1));box-shadow:0 0 40px rgba(248,113,113,.3)}@keyframes successPulse{0%,to{box-shadow:0 0 40px var(--correct-glow)}50%{box-shadow:0 0 60px var(--correct-glow)}}.input{width:100%;height:52px;padding:0 18px;background:var(--surface-2);border:2px solid var(--border);border-radius:12px;color:var(--text);font-size:16px;transition:all .2s ease}.input:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 4px rgba(96,165,250,.1)}.input::-moz-placeholder{color:var(--text-muted)}.input::placeholder{color:var(--text-muted)}.rank-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;transition:all .2s ease}.rank-item:hover{border-color:var(--border-light);transform:translateX(4px)}.rank-item.top-1{background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(251,191,36,.05));border:2px solid rgba(251,191,36,.3);box-shadow:0 0 30px rgba(251,191,36,.15)}.rank-item.top-2{background:linear-gradient(135deg,rgba(192,192,192,.1),rgba(192,192,192,.05));border:2px solid rgba(192,192,192,.2)}.rank-item.top-3{background:linear-gradient(135deg,rgba(205,127,50,.15),rgba(205,127,50,.05));border:2px solid rgba(205,127,50,.25)}.rank-badge{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-weight:800;font-size:15px;background:var(--surface-2)}.rank-item.top-1 .rank-badge{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#000;box-shadow:0 0 20px rgba(251,191,36,.4)}.rank-item.top-2 .rank-badge{background:linear-gradient(135deg,#e5e5e5,#a3a3a3);color:#000}.rank-item.top-3 .rank-badge{background:linear-gradient(135deg,#cd7f32,#a0522d);color:#fff}.avatar{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--accent-purple) 0,var(--accent-pink) 100%);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.2)}.avatar img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.tabs{gap:4px;padding:4px;background:var(--surface);border-radius:14px;border:1px solid var(--border)}.tab,.tabs{display:flex}.tab{flex:1;align-items:center;justify-content:center;gap:6px;height:44px;border-radius:10px;font-weight:600;font-size:14px;color:var(--text-muted);background:transparent;border:none;cursor:pointer;transition:all .2s ease}.tab:hover{color:var(--text-secondary);background:var(--surface-2)}.tab.active{background:var(--surface-3);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.2)}.divider{height:1px;background:var(--border)}.text-green{color:var(--accent-green)}.text-yellow{color:var(--wrong-pos)}.text-blue{color:var(--accent-blue)}.text-orange{color:var(--accent-orange)}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.bg-surface{background:var(--surface)}.bg-surface-2,.timer{background:var(--surface-2)}.timer{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;font-family:JetBrains Mono,monospace;font-weight:600;font-size:14px;color:var(--text-secondary)}.timer-icon{color:var(--accent-blue)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-light)}.fade-in{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.slide-up{animation:slideUp .4s cubic-bezier(.34,1.56,.64,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.bounce-in{animation:bounceIn .5s cubic-bezier(.34,1.56,.64,1)}@keyframes bounceIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.pulse{animation:pulse 2s ease infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.btn-interactive:hover:not(:disabled){transform:scale(1.05)}.btn-interactive:active:not(:disabled){transform:scale(.95)}.glass-card-appear{animation:slideUp .3s ease-out both}.css-fade-in{animation:fadeIn .25s ease-out both}.confetti{position:fixed;width:10px;height:10px;border-radius:2px;animation:confettiFall 3s ease-out forwards;pointer-events:none;z-index:100}@keyframes confettiFall{0%{opacity:1;transform:translateY(-100vh) rotate(0deg)}to{opacity:0;transform:translateY(100vh) rotate(2turn)}}:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;transition-duration:.01ms!important}}.glow-green{box-shadow:0 0 30px var(--correct-glow)}.glow-orange{box-shadow:0 0 30px var(--wrong-pos-glow)}.glow-blue{box-shadow:0 0 30px rgba(96,165,250,.3)}.home-layout{min-height:100vh;min-height:100dvh;position:relative}.home-layout,.home-main{display:flex;width:100%;flex:1}.home-main{max-width:100%;padding:0;flex-direction:column;align-items:center;justify-content:flex-start}.home-sidebar{width:320px;flex-shrink:0;border-left:1px solid var(--border);padding:80px 20px 20px;position:sticky;top:0;height:100vh;overflow-y:auto}.light .home-sidebar{background:rgba(255,255,255,.95);box-shadow:-1px 0 8px rgba(0,0,0,.08);border-left:1px solid rgba(0,0,0,.06)}@media (max-width:1024px){.home-layout{flex-direction:column}.home-sidebar{width:100%;height:auto;position:relative;border-left:none;border-top:1px solid var(--border);padding:24px 16px}}.header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:rgba(15,15,26,.8);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}.light .header{background:rgba(255,255,255,.9);box-shadow:0 1px 3px rgba(0,0,0,.08)}.header-logo{font-size:24px;font-weight:800;letter-spacing:-.02em;text-decoration:none;color:var(--text);display:flex;align-items:center;gap:2px}.header-logo .logo-accent{color:var(--accent-green);text-shadow:0 0 15px var(--correct-glow)}.nav-brand{display:flex;align-items:center;font-size:clamp(18px,5vw,28px);font-weight:900;letter-spacing:-.02em;line-height:1}.nav-letter{display:inline-block;color:var(--text);transition:all .2s cubic-bezier(.34,1.56,.64,1)}.nav-letter-accent{background:linear-gradient(135deg,#22c55e,#16a34a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 8px rgba(34,197,94,.4))}.header-logo:hover .nav-letter{transform:translateY(-1px)}.header-logo:hover .nav-letter-accent{filter:drop-shadow(0 0 12px rgba(34,197,94,.6));transform:translateY(-2px)}.light .nav-letter{color:#1f2937}.header-right{gap:clamp(6px,2vw,12px)}.header-right,.streak-badge{display:flex;align-items:center}.streak-badge{gap:6px;padding:6px 12px;background:linear-gradient(135deg,rgba(251,146,60,.2),rgba(251,146,60,.1));border:1px solid rgba(251,146,60,.3);border-radius:20px;font-weight:700;font-size:14px}.streak-badge,.streak-badge svg{color:var(--accent-orange)}.header-icon-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.header-icon-btn:hover{background:var(--surface-3);border-color:var(--border-light);color:var(--accent-blue)}.theme-toggle{color:var(--accent-orange)}.theme-toggle:hover{color:var(--accent-yellow)}.light .header-icon-btn{background:#ffffff;border:1px solid rgba(0,0,0,.08);color:#4b4f56}.light .header-icon-btn:hover{background:#f7f8fa;border-color:rgba(0,0,0,.12)}.light .streak-badge{background:linear-gradient(135deg,rgba(234,88,12,.12),rgba(234,88,12,.06));border:1px solid rgba(234,88,12,.25)}.login-btn{display:flex;align-items:center;gap:clamp(4px,1.5vw,8px);padding:8px clamp(10px,3vw,16px);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-weight:600;font-size:clamp(12px,3vw,14px);cursor:pointer;transition:all .2s ease;white-space:nowrap}.login-btn:hover{background:var(--surface-3);border-color:var(--border-light)}.light .login-btn{background:#ffffff;border:1px solid rgba(0,0,0,.08);color:#1c1e21}.light .login-btn:hover{background:#f7f8fa;border-color:rgba(0,0,0,.12)}.user-menu-btn{display:flex;align-items:center;gap:clamp(6px,1.5vw,10px);padding:6px clamp(8px,2vw,12px) 6px 6px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:all .2s ease}.user-menu-btn:hover{background:var(--surface-3);border-color:var(--border-light)}.light .user-menu-btn{background:#ffffff;border:1px solid rgba(0,0,0,.08)}.light .user-menu-btn:hover{background:#f7f8fa;border-color:rgba(0,0,0,.12)}.light .user-menu-btn span{color:#1c1e21}.user-menu-btn .avatar{width:32px;height:32px;border-radius:8px;font-size:14px}.user-menu-btn span{font-weight:600;font-size:14px;color:var(--text);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-dropdown{position:absolute;top:100%;right:0;margin-top:8px;min-width:180px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:8px;box-shadow:0 10px 40px rgba(0,0,0,.4);z-index:50}.user-dropdown-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:8px;color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all .15s ease;text-align:left}.user-dropdown-item:hover{background:var(--surface-2);color:var(--text)}.user-dropdown-item.danger{color:var(--accent-red)}.user-dropdown-item.danger:hover{background:rgba(248,113,113,.1)}.user-dropdown-item.primary{color:var(--accent)}.user-dropdown-item.primary:hover{background:rgba(99,102,241,.1)}.user-dropdown-stats{padding:8px 12px;display:flex;flex-direction:column;gap:6px}.guest-stat{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted)}.user-dropdown-divider{height:1px;background:var(--border);margin:8px 0}.user-menu-btn.guest{border:1px dashed var(--border)}.avatar.guest{background:var(--surface-2);color:var(--text-muted)}.light .user-dropdown{background:#ffffff;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 40px rgba(0,0,0,.15)}.light .user-dropdown-item{color:#4b4f56}.light .user-dropdown-item:hover{background:#f7f8fa;color:#1c1e21}.light .user-dropdown-divider{background:rgba(0,0,0,.08)}.light .guest-stat{color:#65676b}.light .avatar.guest{background:#f0f2f5;color:#65676b}.light .user-menu-btn.guest{border:1px dashed rgba(0,0,0,.15)}.letter-bg{position:fixed;inset:0;z-index:-1;background:var(--bg);overflow:hidden;pointer-events:none}.floating-letter{position:absolute;font-family:var(--font-heading);font-weight:800;color:rgba(255,255,255,.04);-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;will-change:transform;text-shadow:0 0 20px rgba(99,102,241,.1)}@media (prefers-reduced-motion:reduce){.floating-letter{animation:none!important;display:none}}.light .floating-letter{color:rgba(0,0,0,.04);text-shadow:0 0 20px rgba(99,102,241,.08)}.floating-letter.float-up{animation:letterFloatUp linear infinite}@keyframes letterFloatUp{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-40px) rotate(3deg)}to{transform:translateY(0) rotate(0deg)}}.floating-letter.float-diagonal{animation:letterFloatDiagonal linear infinite}@keyframes letterFloatDiagonal{0%{transform:translate(0)}25%{transform:translate(30px,-20px)}50%{transform:translateY(-40px)}75%{transform:translate(-30px,-20px)}to{transform:translate(0)}}.floating-letter.drift-slow{animation:letterDriftSlow linear infinite}@keyframes letterDriftSlow{0%{transform:translateX(0) rotate(0deg)}50%{transform:translateX(50px) rotate(5deg)}to{transform:translateX(0) rotate(0deg)}}.floating-letter.drift-wide{animation:letterDriftWide linear infinite}@keyframes letterDriftWide{0%{transform:translate(0)}25%{transform:translate(40px,-15px)}50%{transform:translate(60px)}75%{transform:translate(40px,15px)}to{transform:translate(0)}}@media (max-width:768px){.floating-letter{font-size:80%!important;color:rgba(255,255,255,.03)}.light .floating-letter{color:rgba(0,0,0,.03)}}@media (prefers-reduced-motion:reduce){.floating-letter{animation:none!important}}.hero{text-align:center;padding:40px 20px}@media (max-width:1024px){.hero{padding:30px 20px 20px}}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(251,191,36,.05));border:1px solid rgba(251,191,36,.3);border-radius:20px;font-size:13px;font-weight:600;color:#fbbf24;margin-bottom:20px}.hero-logo{font-size:clamp(48px,12vw,72px);font-weight:900;letter-spacing:-.03em;margin-bottom:8px;color:var(--text);text-shadow:0 0 60px rgba(16,185,129,.3)}.light .hero-logo{text-shadow:0 2px 10px rgba(0,0,0,.1)}.hero-logo .logo-accent{color:var(--accent-green);text-shadow:0 0 40px var(--correct-glow)}.light .hero-logo .logo-accent{text-shadow:0 2px 15px rgba(5,150,105,.4)}.hero-brand{flex-direction:column;gap:8px;animation:heroBrandEntrance .8s cubic-bezier(.34,1.56,.64,1)}.hero-brand,.hero-brand-text{display:flex;align-items:center}.hero-brand-text{font-size:clamp(42px,12vw,90px);font-weight:900;letter-spacing:-.03em;line-height:1}.hero-letter{display:inline-block;color:var(--text);transition:all .3s cubic-bezier(.34,1.56,.64,1);text-shadow:0 2px 0 rgba(0,0,0,.1),0 4px 20px rgba(0,0,0,.1)}.hero-letter-accent{background:linear-gradient(135deg,#22c55e,#16a34a 50%,#15803d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px rgba(34,197,94,.5))}.hero-brand-underline{width:100%;max-width:clamp(160px,40vw,360px);height:clamp(4px,.8vw,7px);background:linear-gradient(90deg,transparent 0,var(--border) 10%,#22c55e 35%,#16a34a 50%,#22c55e 65%,var(--border) 90%,transparent 100%);border-radius:3px;position:relative;overflow:hidden}.hero-brand-underline:after{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:underlineShimmer 3s ease-in-out infinite}@keyframes underlineShimmer{0%{left:-100%}50%,to{left:200%}}@keyframes heroBrandEntrance{0%{opacity:0;transform:translateY(-30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.hero-logo:hover .hero-letter{transform:translateY(-3px)}.hero-logo:hover .hero-letter-accent{filter:drop-shadow(0 0 30px rgba(34,197,94,.7));transform:translateY(-5px) scale(1.05)}.hero-logo:hover .hero-brand-underline{box-shadow:0 0 20px rgba(34,197,94,.4)}.light .hero-letter{color:#1f2937;text-shadow:0 2px 0 rgba(0,0,0,.05),0 4px 15px rgba(0,0,0,.08)}.light .hero-brand-underline{background:linear-gradient(90deg,transparent,#e5e7eb 10%,#22c55e 35%,#16a34a 50%,#22c55e 65%,#e5e7eb 90%,transparent)}.light .hero-tagline{color:#4b4f56}.light .hero-tile{background:#ffffff;border-color:#dddfe2;color:#65676b}.light .hero-tile.filled{border-color:#4b4f56;color:#1c1e21}.hero-tagline{font-size:18px;color:var(--text-secondary);margin-bottom:32px}.hero-tiles{gap:8px;margin-bottom:28px}.hero-tile,.hero-tiles{display:flex;justify-content:center}.hero-tile{width:52px;height:52px;align-items:center;font-weight:800;font-size:24px;border-radius:10px;text-transform:uppercase;transition:transform .1s ease,background-color .3s ease,border-color .3s ease;background:var(--surface-2);border:2px solid var(--border);color:var(--text-muted)}.hero-tile-letter{display:block}.hero-tile.empty{background:var(--surface-2);border:2px solid var(--border);color:var(--text-muted)}.hero-tile.filled{background:var(--surface-2);border:2px solid var(--text-muted);color:var(--text);animation:tilePop .1s ease}@keyframes tilePop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.hero-tile.revealed{animation:tileFlip .5s ease forwards}@keyframes tileFlip{0%{transform:rotateX(0deg)}50%{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}.hero-tile.correct{background:var(--correct);border:2px solid var(--correct);color:#fff}.hero-tile.wrong-pos{background:var(--wrong-pos);border:2px solid var(--wrong-pos);color:#fff}.hero-tile.wrong{background:var(--wrong);border:2px solid var(--wrong);color:#fff}@keyframes heroTilePulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.countdown{display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;color:var(--text-secondary);margin-bottom:24px}.countdown-time{font-family:JetBrains Mono,SF Mono,monospace;font-weight:700;font-size:18px;color:var(--accent-blue);background:var(--surface-2);padding:6px 12px;border-radius:8px;letter-spacing:.05em}.light .countdown{color:#4b4f56}.light .countdown-time{background:#ffffff;border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px rgba(0,0,0,.04)}.cta-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 32px;background:linear-gradient(135deg,var(--correct) 0,#059669 100%);border:none;border-radius:14px;color:#fff;font-weight:700;font-size:17px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 0 #047857;text-decoration:none}.cta-button:hover{transform:translateY(-2px);box-shadow:0 6px 0 #047857}.cta-button:active{transform:translateY(2px);box-shadow:0 2px 0 #047857}.hero-with-cards{display:grid;grid-template-columns:1fr minmax(300px,500px) 1fr;gap:24px;align-items:center;justify-content:center;padding:0 24px;width:100%;max-width:1200px;margin:0 auto}.game-cards-left,.game-cards-right{display:flex;flex-direction:column;gap:12px}.game-cards-left{grid-column:1;grid-row:1;justify-self:end}.hero-with-cards>section.hero{grid-column:2;grid-row:1}.game-cards-right{grid-column:3;grid-row:1;justify-self:start}@media (max-width:1024px){.hero-with-cards{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:24px;padding:0 16px;width:100%;max-width:100%}.game-cards-left,.game-cards-right{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:450px;width:100%}.game-cards-left{order:2}.hero-with-cards>section.hero{order:1;width:100%;max-width:450px}.game-cards-right{order:3}.game-card{width:100%}}@media (max-width:500px){.hero-with-cards{padding:0 12px;gap:20px}.game-cards-left,.game-cards-right{max-width:100%;gap:10px}.hero-with-cards>section.hero{max-width:100%}.game-card{padding:14px}}@media (max-width:380px){.game-cards-left,.game-cards-right{grid-template-columns:1fr}}.game-card{display:flex;flex-direction:column;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:16px;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden;text-decoration:none;color:inherit;width:180px;min-height:140px}.light .game-card{border:1px solid rgba(0,0,0,.08);box-shadow:0 2px 8px rgba(0,0,0,.06);color:#1c1e21}.light .game-card.green{background:linear-gradient(135deg,rgba(16,185,129,.1),#ffffff)}.light .game-card.blue{background:linear-gradient(135deg,rgba(96,165,250,.1),#ffffff)}.light .game-card.orange{background:linear-gradient(135deg,rgba(234,138,12,.1),#ffffff)}.light .game-card.purple{background:linear-gradient(135deg,rgba(167,139,250,.1),#ffffff)}.light .game-card:hover{border-color:rgba(0,0,0,.12);box-shadow:0 8px 24px rgba(0,0,0,.12)}.light .game-card-title{color:#1c1e21}.light .game-card-subtitle{color:#4b4f56}.light .game-card-status{border-top-color:rgba(0,0,0,.08)}.light .game-card-status.pending{color:#65676b}@media (max-width:1024px){.game-card{width:100%;min-height:auto}}.game-card.green{background:linear-gradient(135deg,rgba(16,185,129,.15) 0,var(--surface) 100%)}.game-card.blue{background:linear-gradient(135deg,rgba(96,165,250,.15) 0,var(--surface) 100%)}.game-card.orange{background:linear-gradient(135deg,rgba(234,138,12,.15) 0,var(--surface) 100%)}.game-card.purple{background:linear-gradient(135deg,rgba(167,139,250,.15) 0,var(--surface) 100%)}.game-card:hover{border-color:var(--border-light);transform:translateY(-4px) scale(1.02)}.game-card.green:hover{background:linear-gradient(135deg,rgba(16,185,129,.25) 0,var(--surface) 100%)}.game-card.blue:hover{background:linear-gradient(135deg,rgba(96,165,250,.25) 0,var(--surface) 100%)}.game-card.orange:hover{background:linear-gradient(135deg,rgba(234,138,12,.25) 0,var(--surface) 100%)}.game-card.purple:hover{background:linear-gradient(135deg,rgba(167,139,250,.25) 0,var(--surface) 100%)}.game-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;position:relative;z-index:1}.game-card-icon{width:44px;height:44px}.game-card-icon.green{background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(16,185,129,.1));color:var(--accent-green)}.game-card-icon.blue{background:linear-gradient(135deg,rgba(96,165,250,.2),rgba(96,165,250,.1));color:var(--accent-blue)}.game-card-icon.orange{background:linear-gradient(135deg,rgba(251,146,60,.2),rgba(251,146,60,.1));color:var(--accent-orange)}.game-card-icon.purple{background:linear-gradient(135deg,rgba(167,139,250,.2),rgba(167,139,250,.1));color:var(--accent-purple)}.light .game-card-icon.green{background:linear-gradient(135deg,rgba(22,163,74,.15),rgba(22,163,74,.08))}.light .game-card-icon.blue{background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(37,99,235,.08))}.light .game-card-icon.orange{background:linear-gradient(135deg,rgba(234,88,12,.15),rgba(234,88,12,.08))}.light .game-card-icon.purple{background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(124,58,237,.08))}.badge-new{background:linear-gradient(135deg,#ef4444,#dc2626)}.badge-coming-soon,.badge-new{padding:4px 8px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#fff;border-radius:6px}.badge-coming-soon{background:linear-gradient(135deg,#6b7280,#4b5563)}.game-card.disabled{opacity:.5;pointer-events:none;cursor:default}.game-card-content{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center}.game-card-title{font-size:16px;font-weight:700;margin-bottom:4px;color:var(--text);line-height:1.2}.game-card-subtitle{font-size:13px;color:var(--text-muted);line-height:1.3}.game-card-status{display:flex;align-items:center;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);font-size:13px;position:relative;z-index:1}.game-card-status.completed{color:var(--accent-green)}.game-card-status.pending{color:var(--text-muted)}.sidebar-section{margin-bottom:20px}.sidebar-title{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:12px}.sidebar-title svg{color:#fbbf24}.leaderboard-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:10px;transition:all .2s ease;animation:slideInRight .3s ease forwards;opacity:0}.light .leaderboard-row{background:#ffffff;border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 4px rgba(0,0,0,.04)}.light .leaderboard-row:hover{background:#f7f8fa;border-color:rgba(0,0,0,.12)}.light .leaderboard-name{color:#1c1e21}.light .sidebar-title{color:#4b4f56}.leaderboard-row:first-child{animation-delay:0s}.leaderboard-row:nth-child(2){animation-delay:.05s}.leaderboard-row:nth-child(3){animation-delay:.1s}.leaderboard-row:nth-child(4){animation-delay:.15s}.leaderboard-row:nth-child(5){animation-delay:.2s}.leaderboard-row:nth-child(6){animation-delay:.25s}.leaderboard-row:nth-child(7){animation-delay:.3s}.leaderboard-row:nth-child(8){animation-delay:.35s}.leaderboard-row:nth-child(9){animation-delay:.4s}.leaderboard-row:nth-child(10){animation-delay:.45s}@keyframes slideInRight{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.leaderboard-row:hover{border-color:var(--border-light);transform:translateX(4px)}.leaderboard-row.gold{background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(251,191,36,.05));border-color:rgba(251,191,36,.3)}.leaderboard-row.silver{background:linear-gradient(135deg,rgba(192,192,192,.1),rgba(192,192,192,.05));border-color:rgba(192,192,192,.2)}.leaderboard-row.bronze{background:linear-gradient(135deg,rgba(205,127,50,.15),rgba(205,127,50,.05));border-color:rgba(205,127,50,.25)}.leaderboard-rank{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;border-radius:8px;background:var(--surface-2);color:var(--text-muted)}.leaderboard-row.gold .leaderboard-rank{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#000;box-shadow:0 0 12px rgba(251,191,36,.4)}.leaderboard-row.silver .leaderboard-rank{background:linear-gradient(135deg,#e5e5e5,#a3a3a3);color:#000}.leaderboard-row.bronze .leaderboard-rank{background:linear-gradient(135deg,#cd7f32,#a0522d);color:#fff}.leaderboard-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--accent-purple) 0,var(--accent-pink) 100%);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;overflow:hidden;flex-shrink:0}.leaderboard-avatar img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.leaderboard-info{flex:1;min-width:0}.leaderboard-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leaderboard-score{font-weight:800;font-size:14px;color:var(--accent-green)}.sidebar-link{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;color:var(--text-secondary);font-size:14px;font-weight:600;text-decoration:none;transition:all .2s ease;margin-top:12px}.sidebar-link:hover{background:var(--surface-3);border-color:var(--border-light);color:var(--text)}.your-rank-box{padding:16px;background:linear-gradient(135deg,rgba(96,165,250,.1),rgba(96,165,250,.05));border:1px solid rgba(96,165,250,.2);border-radius:12px;text-align:center}.your-rank-label{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:4px}.your-rank-value{font-size:28px;font-weight:800;color:var(--accent-blue)}.your-rank-subtitle{font-size:13px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px}.light .your-rank-box{background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(37,99,235,.04));border:1px solid rgba(37,99,235,.15)}.light .your-rank-label{color:#65676b}.light .your-rank-subtitle{color:#4b4f56}.live-stats{display:flex;flex-direction:column;gap:8px}.live-stat{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:50px}.light .live-stat{background:#ffffff;border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 4px rgba(0,0,0,.04)}.light .live-stat-label{color:#4b4f56}.light .live-stat-value{color:#1c1e21}.live-dot{width:8px;height:8px;background:var(--accent-green);border-radius:50%;animation:livePulse 1.5s ease-in-out infinite}@keyframes livePulse{0%,to{opacity:1;box-shadow:0 0 0 0 rgba(52,211,153,.4)}50%{opacity:.8;box-shadow:0 0 0 6px rgba(52,211,153,0)}}.live-stat-label{flex:1;font-size:13px;color:var(--text-secondary)}.live-stat-value{font-weight:700;font-size:14px;color:var(--text)}.user-stats-bar{display:flex;justify-content:center;gap:clamp(6px,1.5vw,8px);padding:clamp(12px,3vw,16px);max-width:500px;width:100%;margin:0 auto clamp(16px,4vw,24px)}@media (max-width:480px){.user-stats-bar{flex-wrap:wrap}}.user-stat{flex:1;display:flex;flex-direction:column;align-items:center;padding:clamp(10px,2.5vw,14px) clamp(8px,2vw,12px);background:var(--surface);border:1px solid var(--border);border-radius:clamp(10px,2.5vw,12px);min-width:0}.light .user-stat{background:#ffffff;border:1px solid rgba(0,0,0,.08);box-shadow:0 2px 6px rgba(0,0,0,.04)}.light .user-stat-value{color:#1c1e21}.light .user-stat-label{color:#65676b}.user-stat-icon{margin-bottom:6px}.user-stat-icon.fire{color:var(--accent-orange)}.user-stat-icon.check{color:var(--accent-green)}.user-stat-icon.games{color:var(--accent-blue)}.user-stat-icon.time{color:var(--accent-purple)}.user-stat-value{font-size:clamp(16px,4vw,20px);font-weight:800;color:var(--text)}.user-stat-label{font-size:clamp(9px,2.5vw,11px);color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}.empty-state{text-align:center;padding:32px 20px;color:var(--text-muted)}.empty-state-icon{font-size:40px;margin-bottom:12px;opacity:.5}.empty-state-text{font-size:14px}.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:skeleton 1.5s ease-in-out infinite;border-radius:8px}@keyframes skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.game-page{min-height:calc(100vh - 64px);min-height:calc(100dvh - 64px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:clamp(40px,10vh,120px);position:relative;width:100%;flex:1}.game-page:has(.game-container),.game-page:has(.game-container-wide){padding-top:0}.game-container{max-width:500px}.game-container,.game-container-wide{width:100%;margin:0 auto;padding:16px 16px 0;flex:1;display:flex;flex-direction:column;position:relative;z-index:1}.game-container-wide{max-width:1200px}.game-header-new{display:flex;align-items:center;justify-content:space-between;padding:16px 0;margin-bottom:12px;position:relative}.game-header-left{display:flex;align-items:center;gap:clamp(8px,2vw,12px);min-width:0;flex:1}.game-back-btn{width:clamp(36px,10vw,44px);height:clamp(36px,10vw,44px);display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);border-radius:clamp(10px,2.5vw,12px);color:var(--text-secondary);cursor:pointer;transition:all .2s ease;flex-shrink:0}.game-back-btn:hover{background:var(--surface-2);border-color:var(--border-light);color:var(--text)}.game-mode-info{display:flex;flex-direction:column}.game-mode-title{font-size:clamp(14px,4vw,18px);font-weight:700;color:var(--text);margin-bottom:2px}.game-mode-timer{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted)}.game-mode-timer svg{color:var(--accent-blue)}.game-mode-timer span{font-family:JetBrains Mono,SF Mono,monospace;font-weight:600;color:var(--text-secondary)}.game-header-right{display:flex;align-items:center;gap:clamp(6px,1.5vw,8px);flex-shrink:0}.lives-display{display:flex;align-items:center;gap:clamp(2px,.8vw,4px);padding:clamp(6px,1.5vw,8px) clamp(8px,2vw,12px);background:var(--surface);border:1px solid var(--border);border-radius:10px}.life-heart{width:18px;height:18px;transition:all .3s ease}.life-heart.full{color:#f87171;filter:drop-shadow(0 0 6px rgba(248,113,113,.5))}.life-heart.empty{color:var(--surface-3);filter:none}.life-heart.lost{animation:heartBreak .5s ease forwards}@keyframes heartBreak{0%{transform:scale(1);opacity:1}30%{transform:scale(1.2);opacity:1}to{transform:scale(0);opacity:0}}.game-settings-btn{width:clamp(36px,10vw,44px);height:clamp(36px,10vw,44px);display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);border-radius:clamp(10px,2.5vw,12px);color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.game-settings-btn.active,.game-settings-btn:hover{background:var(--surface-2);border-color:var(--border-light);color:var(--text)}.settings-panel{border-radius:16px;padding:20px;margin-bottom:16px;animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.settings-panel-title{font-size:13px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.word-length-selector{justify-content:space-between;gap:16px}.word-length-btn{width:48px;height:48px;border-radius:12px}.word-length-btn:disabled{opacity:.3;cursor:not-allowed}.word-length-display{flex:1;text-align:center}.word-length-number{font-size:36px;font-weight:800;color:var(--text);line-height:1}.word-length-label{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.game-content{flex:1;display:flex;align-items:center;justify-content:center;padding:16px 0}.keyboard-wrapper{padding-bottom:max(16px,env(safe-area-inset-bottom))}.game-area-horizontal{flex:1;display:flex;align-items:center;justify-content:center;gap:60px;padding:20px;width:100%}.game-grid-section,.keyboard-section{display:flex;align-items:center;justify-content:center;flex-shrink:0}@media (max-width:1000px){.game-area-horizontal{flex-direction:column;gap:24px}.keyboard-section{padding-bottom:max(16px,env(safe-area-inset-bottom))}}.game-toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:50;background:var(--text);color:var(--bg);padding:12px 20px;border-radius:10px;font-weight:600;font-size:14px;box-shadow:0 10px 40px rgba(0,0,0,.4);animation:toastSlideIn .3s ease}@keyframes toastSlideIn{0%{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.game-state-card{background:var(--surface);border:1px solid var(--border);border-radius:clamp(14px,4vw,20px);padding:clamp(20px,6vw,32px) clamp(16px,4vw,24px);text-align:center;max-width:min(360px,calc(100vw - 32px));width:100%;margin:0 auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}.game-state-icon{width:clamp(56px,16vw,72px);height:clamp(56px,16vw,72px);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto clamp(14px,4vw,20px)}.game-state-icon.loading{background:linear-gradient(135deg,rgba(96,165,250,.2),rgba(96,165,250,.1))}.game-state-icon.success{background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(16,185,129,.1));box-shadow:0 0 30px var(--correct-glow)}.game-state-icon.error{background:linear-gradient(135deg,rgba(248,113,113,.2),rgba(248,113,113,.1))}.game-state-icon.waiting{background:linear-gradient(135deg,rgba(251,146,60,.2),rgba(251,146,60,.1))}.game-state-title{font-size:clamp(18px,5vw,22px);font-weight:700;margin-bottom:clamp(6px,1.5vw,8px)}.game-state-text{font-size:clamp(12px,3.5vw,14px);color:var(--text-secondary);margin-bottom:clamp(14px,4vw,20px)}.game-state-word{font-size:clamp(22px,6vw,28px);font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:var(--accent-green);margin-bottom:clamp(16px,4vw,24px)}.game-state-actions{display:flex;gap:clamp(8px,2vw,12px)}.game-state-actions .btn{flex:1}.duel-header{gap:clamp(8px,2.5vw,12px)}.duel-header,.duel-header-icon{display:flex;align-items:center}.duel-header-icon{justify-content:center;background:linear-gradient(135deg,rgba(251,146,60,.2),rgba(251,146,60,.1));color:var(--accent-orange);box-shadow:0 0 20px var(--wrong-pos-glow);flex-shrink:0}.duel-header-content h1{font-size:clamp(18px,5vw,24px);font-weight:700;margin-bottom:2px}.duel-header-content p{font-size:clamp(12px,3.5vw,14px);color:var(--text-secondary)}.opponent-bar{padding:clamp(10px,2.5vw,14px) clamp(12px,3vw,16px);border-radius:clamp(10px,2.5vw,14px);margin-bottom:clamp(12px,3vw,16px)}.opponent-info{min-width:0}.opponent-avatar{width:clamp(28px,8vw,36px);height:clamp(28px,8vw,36px);background:linear-gradient(135deg,rgba(251,146,60,.2),rgba(251,146,60,.1));border-radius:clamp(8px,2vw,10px);color:var(--accent-orange);flex-shrink:0}.opponent-label{font-size:clamp(12px,3.5vw,14px);color:var(--text-secondary)}.opponent-status{font-weight:600;font-size:clamp(12px,3.5vw,14px);color:var(--text);white-space:nowrap}.room-code-display{border-radius:clamp(10px,2.5vw,14px);padding:clamp(14px,4vw,20px) clamp(16px,5vw,28px);margin-bottom:clamp(14px,4vw,20px)}.room-code-display span{font-family:JetBrains Mono,SF Mono,monospace;font-size:clamp(22px,6vw,32px);font-weight:800;letter-spacing:clamp(.1em,2vw,.2em);color:var(--text)}.room-code-container{gap:clamp(8px,2vw,12px);margin-bottom:20px;flex-wrap:wrap}.copy-btn,.room-code-container{display:flex;align-items:center;justify-content:center}.copy-btn{width:clamp(42px,11vw,52px);height:clamp(42px,11vw,52px);background:var(--surface-2);border:1px solid var(--border);border-radius:clamp(10px,2.5vw,12px);color:var(--text-secondary);cursor:pointer;transition:all .2s ease;flex-shrink:0}.copy-btn:hover{background:var(--surface-3);border-color:var(--border-light);color:var(--text)}.copy-btn.copied{background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(16,185,129,.1));border-color:var(--accent-green);color:var(--accent-green)}.waiting-indicator{gap:clamp(6px,1.5vw,8px);color:var(--text-muted);font-size:clamp(12px,3.5vw,14px);margin-bottom:clamp(16px,4vw,24px)}.waiting-indicator svg{color:var(--accent-blue)}.duel-option-card{background:var(--surface);border:1px solid var(--border);border-radius:clamp(12px,3vw,16px);padding:clamp(14px,3.5vw,20px);transition:all .2s ease}.duel-option-card:hover{border-color:var(--border-light)}.duel-option-header{display:flex;align-items:center;gap:clamp(10px,2.5vw,14px);margin-bottom:clamp(12px,3vw,16px)}.duel-option-icon{width:clamp(40px,10vw,48px);height:clamp(40px,10vw,48px);display:flex;align-items:center;justify-content:center;border-radius:clamp(10px,2.5vw,12px);flex-shrink:0}.duel-option-icon.create{background:linear-gradient(135deg,rgba(251,146,60,.2),rgba(251,146,60,.1));color:var(--accent-orange);box-shadow:0 0 15px var(--wrong-pos-glow)}.duel-option-icon.join{background:linear-gradient(135deg,rgba(96,165,250,.2),rgba(96,165,250,.1));color:var(--accent-blue);box-shadow:0 0 15px rgba(96,165,250,.3)}.duel-option-title{font-size:clamp(14px,3.5vw,16px);font-weight:700;margin-bottom:2px}.duel-option-subtitle{font-size:clamp(11px,2.8vw,13px);color:var(--text-secondary)}.room-code-input{flex:1;height:clamp(44px,11vw,52px);padding:0 clamp(12px,3vw,18px);background:var(--surface-2);border:2px solid var(--border);border-radius:clamp(10px,2.5vw,12px);color:var(--text);font-family:JetBrains Mono,SF Mono,monospace;font-size:clamp(15px,4vw,18px);font-weight:600;letter-spacing:.15em;text-align:center;text-transform:uppercase;transition:all .2s ease;min-width:0}.room-code-input:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 4px rgba(96,165,250,.1)}.room-code-input::-moz-placeholder{color:var(--text-muted);letter-spacing:.2em}.room-code-input::placeholder{color:var(--text-muted);letter-spacing:.2em}.duel-divider{display:flex;align-items:center;gap:16px;margin:16px 0}.duel-divider-line{flex:1;height:1px;background:var(--border)}.duel-divider-text{font-size:13px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.leaderboard-link-card{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;color:var(--text-secondary);text-decoration:none;transition:all .2s ease;margin-top:20px;max-width:500px;margin-left:auto;margin-right:auto}.leaderboard-link-card:hover{background:var(--surface-2);border-color:var(--border-light);color:var(--text)}.leaderboard-link-card svg{color:#fbbf24}.error-card{background:linear-gradient(135deg,rgba(248,113,113,.1),rgba(248,113,113,.05));border:1px solid rgba(248,113,113,.3);border-radius:12px;padding:14px 16px;margin-bottom:16px}.error-card p{font-size:14px;color:#f87171}.result-modal{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:clamp(18px,4vw,28px);padding:clamp(24px,5vw,36px) clamp(16px,4vw,28px) clamp(20px,4vw,28px);max-width:min(420px,calc(100vw - 24px));width:100%;max-height:calc(100dvh - 32px);overflow-y:auto;box-shadow:0 25px 80px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.05);overflow-x:hidden}.result-modal.result-win{border-color:rgba(16,185,129,.3)}.result-modal.result-lose{border-color:rgba(148,163,184,.2)}.result-glow{position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:300px;height:200px;border-radius:50%;pointer-events:none;opacity:.5;filter:blur(60px)}.result-win .result-glow{background:radial-gradient(circle,rgba(16,185,129,.4) 0,transparent 70%)}.result-lose .result-glow{background:radial-gradient(circle,rgba(100,116,139,.3) 0,transparent 70%)}.result-header{text-align:center;margin-bottom:clamp(16px,4vw,24px);position:relative}.result-icon-large{width:clamp(64px,16vw,88px);height:clamp(64px,16vw,88px);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto clamp(12px,3vw,20px);position:relative;animation:iconPop .5s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes iconPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.result-icon-ring{position:absolute;inset:-4px;border-radius:50%;border:3px solid transparent;animation:ringPulse 2s ease-in-out infinite}.result-win .result-icon-ring{border-color:rgba(16,185,129,.4)}.result-lose .result-icon-ring{border-color:rgba(100,116,139,.2)}@keyframes ringPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.5}}.result-icon-large.win{background:linear-gradient(145deg,rgba(16,185,129,.25),rgba(5,150,105,.15));color:#10b981;box-shadow:0 8px 32px rgba(16,185,129,.25),inset 0 0 0 1px rgba(16,185,129,.2)}.result-icon-large.lose{background:linear-gradient(145deg,rgba(100,116,139,.2),rgba(71,85,105,.15));color:#94a3b8;box-shadow:0 8px 32px rgba(100,116,139,.15),inset 0 0 0 1px rgba(100,116,139,.1)}.result-title{font-size:clamp(24px,6vw,32px);font-weight:800;margin-bottom:6px;letter-spacing:-.02em}.result-win .result-title{background:linear-gradient(135deg,#10b981,#34d399);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.result-lose .result-title{color:var(--text-secondary)}.result-subtitle{font-size:clamp(12px,3.5vw,15px);color:var(--text-muted);margin-bottom:0}.result-word-reveal{text-align:center;margin-bottom:clamp(16px,4vw,24px)}.result-word-reveal .result-word-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:clamp(8px,2vw,12px)}.result-word-letters{display:flex;justify-content:center;gap:clamp(4px,1vw,6px)}.result-letter{width:clamp(34px,9vw,44px);height:clamp(40px,11vw,52px);display:flex;align-items:center;justify-content:center;font-size:clamp(17px,4.5vw,22px);font-weight:800;text-transform:uppercase;border-radius:clamp(7px,2vw,10px);animation:letterReveal .4s cubic-bezier(.175,.885,.32,1.275) forwards;opacity:0;transform:scale(.5) rotateX(90deg)}.result-letter.correct{background:linear-gradient(145deg,var(--correct) 0,#059669 100%);color:white;box-shadow:0 4px 12px rgba(16,185,129,.3)}.result-letter.revealed{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}@keyframes letterReveal{0%{opacity:0;transform:scale(.5) rotateX(90deg)}to{opacity:1;transform:scale(1) rotateX(0deg)}}.result-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1.5vw,10px);margin-bottom:clamp(16px,4vw,24px)}.result-stats-grid:has(.result-stat-card:nth-child(4)){grid-template-columns:repeat(2,1fr)}.result-stat-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(6px,1.5vw,10px);background:var(--surface-2);border:1px solid var(--border);border-radius:clamp(10px,2.5vw,14px);padding:clamp(10px,2.5vw,16px) clamp(6px,1.5vw,14px);transition:all .2s ease;min-width:0;overflow:hidden}.result-stat-card:hover{background:var(--surface-3);transform:translateY(-2px)}.result-stat-icon-wrapper{width:clamp(34px,8vw,42px);height:clamp(34px,8vw,42px);border-radius:clamp(8px,2vw,12px);display:flex;align-items:center;justify-content:center;flex-shrink:0}.result-stat-icon-wrapper.green{background:rgba(16,185,129,.15);color:#10b981}.result-stat-icon-wrapper.blue{background:rgba(59,130,246,.15);color:#3b82f6}.result-stat-icon-wrapper.gold{background:rgba(245,158,11,.15);color:#f59e0b}.result-stat-icon-wrapper.orange{background:rgba(249,115,22,.15);color:#f97316}.result-stat-icon-wrapper.gray{background:rgba(100,116,139,.15);color:#64748b}.result-stat-content{display:flex;flex-direction:column;align-items:center;min-width:0;width:100%;overflow:hidden}.result-stat-content .result-stat-value{font-size:clamp(18px,5vw,24px);font-weight:800;color:var(--text);line-height:1.1}.result-stat-content .result-stat-label{font-size:clamp(9px,2.2vw,11px);text-transform:uppercase;letter-spacing:clamp(0px,.3vw,.5px);color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.result-actions{display:flex;flex-direction:column;gap:clamp(8px,2vw,12px)}.result-share-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:clamp(46px,10vw,54px);border:none;border-radius:clamp(10px,2.5vw,14px);color:#fff;font-weight:700;font-size:clamp(14px,3vw,15px);cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}.result-share-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.15),transparent 50%);pointer-events:none}.result-share-btn.lose,.result-share-btn.win{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 0 #047857,0 8px 24px rgba(16,185,129,.3)}.result-share-btn:hover{transform:translateY(-2px)}.result-share-btn.lose:hover,.result-share-btn.win:hover{box-shadow:0 6px 0 #047857,0 12px 32px rgba(16,185,129,.4)}.result-share-btn:active{transform:translateY(2px)}.result-share-btn.lose:active,.result-share-btn.win:active{box-shadow:0 2px 0 #047857}.result-secondary-actions{display:flex;gap:clamp(6px,1.5vw,10px)}.result-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.5vw,8px);height:clamp(42px,9vw,48px);background:var(--surface-2);border:1px solid var(--border);border-radius:clamp(9px,2vw,12px);color:var(--text-secondary);font-weight:600;font-size:clamp(12px,2.8vw,14px);cursor:pointer;transition:all .2s ease;white-space:nowrap}.result-action-btn:hover{background:var(--surface-3);color:var(--text);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}.result-action-btn:active{transform:translateY(0)}.leaderboard-header{display:flex;align-items:center;gap:clamp(8px,2vw,12px);margin-bottom:clamp(16px,4vw,24px);max-width:500px;margin-left:auto;margin-right:auto}.leaderboard-header-icon{width:clamp(44px,12vw,56px);height:clamp(44px,12vw,56px);display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(167,139,250,.2),rgba(167,139,250,.1));border-radius:clamp(12px,3vw,16px);color:var(--accent-purple);box-shadow:0 0 20px rgba(167,139,250,.3);flex-shrink:0}.leaderboard-header-icon.duel{background:linear-gradient(135deg,rgba(251,146,60,.2),rgba(251,146,60,.1));color:var(--accent-orange);box-shadow:0 0 20px var(--wrong-pos-glow)}.leaderboard-header-content h1{font-size:clamp(18px,5vw,24px);font-weight:700;margin-bottom:2px}.leaderboard-header-content p{font-size:clamp(12px,3vw,14px);color:var(--text-secondary)}.leaderboard-tabs{display:flex;gap:4px;padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:16px;margin-bottom:20px;max-width:500px;margin-left:auto;margin-right:auto;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.leaderboard-tabs::-webkit-scrollbar{display:none}.leaderboard-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(4px,1vw,6px);height:40px;padding:0 clamp(6px,2vw,12px);background:transparent;border:none;border-radius:10px;color:var(--text-muted);font-size:clamp(11px,2.8vw,13px);font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap;min-width:0}.leaderboard-tab:hover{color:var(--text-secondary);background:var(--surface-2)}.leaderboard-tab.active{background:var(--surface-3);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.2)}.leaderboard-list{display:flex;flex-direction:column;gap:8px;max-width:500px;margin:0 auto}.leaderboard-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;transition:all .2s ease;animation:slideInRight .3s ease forwards;opacity:0}.leaderboard-item:hover{border-color:var(--border-light);transform:translateX(4px)}.leaderboard-item.gold{background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(251,191,36,.05));border-color:rgba(251,191,36,.3)}.leaderboard-item.silver{background:linear-gradient(135deg,rgba(192,192,192,.1),rgba(192,192,192,.05));border-color:rgba(192,192,192,.2)}.leaderboard-item.bronze{background:linear-gradient(135deg,rgba(205,127,50,.15),rgba(205,127,50,.05));border-color:rgba(205,127,50,.25)}.leaderboard-item-rank{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;border-radius:10px;background:var(--surface-2);color:var(--text-muted);flex-shrink:0}.leaderboard-item.gold .leaderboard-item-rank{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#000;box-shadow:0 0 15px rgba(251,191,36,.4)}.leaderboard-item.silver .leaderboard-item-rank{background:linear-gradient(135deg,#e5e5e5,#a3a3a3);color:#000}.leaderboard-item.bronze .leaderboard-item-rank{background:linear-gradient(135deg,#cd7f32,#a0522d);color:#fff}.leaderboard-item-avatar{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--accent-purple) 0,var(--accent-pink) 100%);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;overflow:hidden;flex-shrink:0}.leaderboard-item-avatar img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.leaderboard-item-info{flex:1;min-width:0}.leaderboard-item-name{font-weight:600;font-size:clamp(13px,3.5vw,15px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leaderboard-item-stats{font-size:13px;color:var(--text-muted)}.leaderboard-item-score{display:flex;flex-direction:column;align-items:flex-end;text-align:right}.leaderboard-item-score .score-value{font-size:clamp(16px,4vw,20px);font-weight:800;color:var(--text)}.leaderboard-item-score .score-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}.leaderboard-item-score.duel{flex-direction:row;align-items:center;gap:8px;color:var(--accent-green)}.leaderboard-item-score.duel .score-value{color:var(--accent-green)}.scoring-info{background:var(--surface);border:1px solid var(--border);border-radius:clamp(10px,2.5vw,14px);padding:clamp(12px,3vw,16px) clamp(14px,3.5vw,20px);margin-top:clamp(16px,4vw,20px);max-width:500px;margin-left:auto;margin-right:auto}.scoring-info h3{font-size:14px;font-weight:700;margin-bottom:6px}.scoring-info p{font-size:13px;color:var(--text-secondary);line-height:1.5}.profile-page{min-height:100vh;padding:clamp(80px,20vw,100px) clamp(12px,3vw,24px) clamp(32px,8vw,40px);position:relative;z-index:1;justify-content:flex-start;gap:clamp(16px,4vw,24px);max-width:700px;margin:0 auto}.profile-loading,.profile-page{display:flex;flex-direction:column;align-items:center;width:100%}.profile-loading{justify-content:center;gap:clamp(12px,3vw,16px);min-height:60vh;color:var(--text-secondary)}.profile-loading p{font-size:clamp(14px,3.5vw,16px)}.profile-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,2vw,12px);width:100%}@media (max-width:600px){.profile-stats-grid{grid-template-columns:repeat(2,1fr)}}.profile-stat-card{background:var(--surface);border:1px solid var(--border);border-radius:clamp(12px,3vw,16px);padding:clamp(14px,3.5vw,20px) clamp(10px,2.5vw,16px);display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.5vw,10px);min-width:0;text-align:center;transition:all .2s ease}.profile-stat-card:hover{transform:translateY(-2px);border-color:var(--border-hover)}.profile-stat-card.highlight{background:linear-gradient(135deg,rgba(167,139,250,.1),rgba(96,165,250,.05));border-color:rgba(167,139,250,.3)}.stat-icon{width:clamp(36px,9vw,48px);height:clamp(36px,9vw,48px);border-radius:clamp(10px,2.5vw,14px);display:flex;align-items:center;justify-content:center}.stat-icon.games{background:rgba(96,165,250,.2);color:var(--accent-blue)}.stat-icon.wins{background:rgba(16,185,129,.2);color:var(--accent-green)}.stat-icon.rate{background:rgba(167,139,250,.2);color:var(--accent-purple)}.stat-icon.streak{background:rgba(251,146,60,.2);color:var(--accent-orange)}.stat-icon.max-streak{background:rgba(250,204,21,.2);color:var(--accent-yellow)}.stat-icon.time{background:rgba(96,165,250,.2);color:var(--accent-blue)}.stat-value{font-size:clamp(18px,4.5vw,24px);font-weight:800;color:var(--text);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.stat-label{font-size:clamp(9px,2.2vw,11px);color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}.profile-panels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,3vw,20px);width:100%}@media (max-width:600px){.profile-panels{grid-template-columns:1fr}}.profile-hero{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:clamp(16px,4vw,24px);padding:clamp(20px,5vw,32px);overflow:hidden;width:100%;box-sizing:border-box;max-width:500px}.profile-hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(167,139,250,.15),rgba(96,165,250,.1));pointer-events:none}.profile-hero-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}.profile-avatar-large{width:clamp(72px,18vw,100px);height:clamp(72px,18vw,100px);border-radius:clamp(16px,4vw,24px);background:linear-gradient(135deg,var(--accent-purple) 0,var(--accent-blue) 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:36px;font-weight:700;box-shadow:0 0 40px rgba(167,139,250,.4)}.profile-avatar-large img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:24px}.profile-user-info{display:flex;flex-direction:column;align-items:center;gap:8px}.profile-username{font-size:clamp(20px,5.5vw,28px);font-weight:800;color:var(--text);margin:0;word-break:break-word}.profile-btn-edit-float{position:absolute;top:16px;right:16px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease;z-index:2}.profile-btn-edit-float:hover{background:var(--surface-3);color:var(--text)}.profile-edit-inline{display:flex;flex-direction:column;align-items:center;gap:12px}.profile-name-input{width:200px;padding:12px 16px;background:var(--surface-2);border:2px solid var(--border);border-radius:12px;color:var(--text);font-size:18px;font-weight:600;text-align:center;outline:none;transition:all .2s ease}.profile-name-input:focus{border-color:var(--accent-blue);box-shadow:0 0 0 4px rgba(96,165,250,.15)}.profile-edit-buttons{display:flex;gap:8px}.profile-btn-cancel,.profile-btn-save{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;border-radius:10px;cursor:pointer;transition:all .2s ease}.profile-btn-save{background:var(--correct);color:#fff}.profile-btn-save:hover{background:#059669}.profile-btn-save:disabled{opacity:.6;cursor:not-allowed}.profile-btn-cancel{background:var(--surface-2);color:var(--text-secondary);border:1px solid var(--border)}.profile-btn-cancel:hover{background:rgba(248,113,113,.2);color:var(--accent-red)}.profile-error-msg{font-size:13px;color:var(--accent-red);margin:0}.profile-email-text{font-size:clamp(12px,3vw,14px);color:var(--text-muted);margin:0;word-break:break-all}.profile-logout-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);border-radius:12px;color:var(--accent-red);font-weight:600;font-size:14px;cursor:pointer;transition:all .2s ease;margin-top:8px}.profile-logout-btn:hover{background:rgba(248,113,113,.2);border-color:var(--accent-red)}.profile-panel{background:var(--surface);border:1px solid var(--border);border-radius:clamp(14px,3.5vw,20px);padding:clamp(16px,4vw,24px);box-sizing:border-box;width:100%}.panel-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}.panel-header svg{color:var(--accent-purple)}.panel-header h2{font-size:18px;font-weight:700;margin:0}.panel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px 20px;text-align:center}.panel-empty .empty-icon{color:var(--text-muted);opacity:.5}.panel-empty p{color:var(--text-muted);font-size:15px;margin:0}.distribution-chart-large{display:flex;flex-direction:column;gap:10px}.dist-row{display:flex;align-items:center;gap:14px}.dist-num{width:20px;font-size:16px;font-weight:700;color:var(--text-secondary);text-align:center}.dist-bar-wrap{flex:1;height:32px;background:var(--surface-2);border-radius:8px;overflow:hidden}.dist-bar{height:100%;background:var(--surface-3);border-radius:8px;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;transition:width .5s ease-out}.dist-bar.has-value{background:linear-gradient(90deg,var(--correct) 0,#059669 100%)}.dist-count{font-size:13px;font-weight:700;color:#fff}.recent-games-grid{display:flex;flex-direction:column;gap:10px}.recent-game-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface-2);border-radius:14px;transition:all .2s ease}.recent-game-card:hover{background:var(--surface-3)}.game-card-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(96,165,250,.15);color:var(--accent-blue);flex-shrink:0}.game-card-info{flex:1;display:flex;flex-direction:column;gap:2px}.game-mode-label{font-size:14px;font-weight:600;color:var(--text)}.game-date{font-size:12px;color:var(--text-muted)}.game-card-result{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.result-badge{font-size:14px;font-weight:700;padding:4px 10px;border-radius:8px}.result-badge.win{background:rgba(16,185,129,.2);color:var(--accent-green)}.result-badge.loss{background:rgba(248,113,113,.2);color:var(--accent-red)}.game-time{font-size:12px;color:var(--text-muted);font-family:JetBrains Mono,SF Mono,monospace}.profile-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,2vw,12px);width:100%}@media (max-width:500px){.profile-actions{grid-template-columns:repeat(2,1fr)}}.profile-action-btn{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.5vw,10px);padding:clamp(10px,2.5vw,14px) clamp(12px,3vw,24px);background:var(--surface);border:1px solid var(--border);border-radius:clamp(10px,2.5vw,14px);color:var(--text);font-size:clamp(12px,3vw,14px);font-weight:600;font-size:15px;text-decoration:none;transition:all .2s ease}.profile-action-btn:hover{background:var(--surface-2);transform:translateY(-2px)}.profile-action-btn.primary{background:linear-gradient(135deg,var(--accent-purple) 0,var(--accent-blue) 100%);border:none;color:#fff}.profile-action-btn.primary:hover{box-shadow:0 8px 24px rgba(167,139,250,.4)}.profile-danger-zone{width:100%;border:1px solid rgba(239,68,68,.3);border-radius:clamp(12px,3vw,16px);padding:clamp(16px,4vw,24px);background:rgba(239,68,68,.05)}.danger-zone-header{font-size:clamp(14px,3.5vw,16px);font-weight:700;margin-bottom:clamp(12px,3vw,16px)}.danger-zone-btn,.danger-zone-header{display:flex;align-items:center;gap:8px;color:#ef4444}.danger-zone-btn{padding:clamp(10px,2.5vw,12px) clamp(16px,4vw,20px);background:transparent;border:1px solid rgba(239,68,68,.4);border-radius:clamp(8px,2vw,10px);font-size:clamp(13px,3vw,14px);font-weight:600;cursor:pointer;transition:all .2s ease}.danger-zone-btn:hover{background:rgba(239,68,68,.1);border-color:#ef4444}.danger-zone-confirm{display:flex;flex-direction:column;gap:clamp(10px,2.5vw,14px)}.danger-zone-warning{color:var(--text-secondary);font-size:clamp(13px,3vw,14px);line-height:1.5}.danger-zone-warning strong{color:#ef4444}.danger-zone-label{color:var(--text-secondary);font-size:clamp(12px,2.8vw,13px)}.danger-zone-label strong{color:var(--text);font-family:monospace;background:var(--surface-2);padding:2px 6px;border-radius:4px}.danger-zone-input{padding:clamp(8px,2vw,10px) clamp(10px,2.5vw,14px);background:var(--surface);border:1px solid rgba(239,68,68,.3);border-radius:clamp(8px,2vw,10px);color:var(--text);font-size:clamp(13px,3vw,14px);font-family:monospace;outline:none;transition:border-color .2s ease;width:100%;max-width:200px}.danger-zone-input:focus{border-color:#ef4444}.danger-zone-error{color:#ef4444;font-size:clamp(12px,2.8vw,13px)}.danger-zone-actions{display:flex;gap:clamp(8px,2vw,12px);flex-wrap:wrap}.danger-zone-cancel{padding:clamp(8px,2vw,10px) clamp(14px,3.5vw,18px);background:var(--surface);border:1px solid var(--border);border-radius:clamp(8px,2vw,10px);color:var(--text-secondary);font-size:clamp(13px,3vw,14px);font-weight:500;cursor:pointer;transition:all .2s ease}.danger-zone-cancel:hover{background:var(--surface-2);color:var(--text)}.danger-zone-delete{display:flex;align-items:center;gap:6px;padding:clamp(8px,2vw,10px) clamp(14px,3.5vw,18px);background:#ef4444;border:none;border-radius:clamp(8px,2vw,10px);color:#fff;font-size:clamp(13px,3vw,14px);font-weight:600;cursor:pointer;transition:all .2s ease}.danger-zone-delete:hover:not(:disabled){background:#dc2626}.danger-zone-delete:disabled{opacity:.5;cursor:not-allowed}.distribution-chart{display:flex;flex-direction:column;gap:8px}.distribution-row{display:flex;align-items:center;gap:12px}.distribution-label{width:20px;font-size:14px;font-weight:700;color:var(--text-secondary);text-align:center}.distribution-bar-container{flex:1;height:28px;background:var(--surface-2);border-radius:6px;overflow:hidden}.distribution-bar{height:100%;background:var(--surface-3);border-radius:6px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;transition:width .5s ease-out}.distribution-bar.filled{background:linear-gradient(90deg,var(--correct) 0,#059669 100%)}.distribution-count{font-size:12px;font-weight:700;color:#fff}.recent-games-list{display:flex;flex-direction:column;gap:8px}.recent-game-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface-2);border-radius:12px}.recent-game-mode{display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:13px;min-width:100px}.recent-game-mode svg{color:var(--accent-blue)}.recent-game-stats{display:flex;align-items:center;gap:12px;flex:1}.recent-game-result{font-size:14px;font-weight:700;padding:4px 10px;border-radius:6px}.recent-game-result.win{background:rgba(16,185,129,.2);color:var(--accent-green)}.recent-game-result.loss{background:rgba(248,113,113,.2);color:var(--accent-red)}.recent-game-time{font-size:13px;color:var(--text-muted);font-family:JetBrains Mono,SF Mono,monospace}.recent-game-date{font-size:12px;color:var(--text-muted);margin-left:auto}.tutorial-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,20px);z-index:100;animation:fadeIn .2s ease}.tutorial-modal{background:var(--surface);border:1px solid var(--border);border-radius:clamp(16px,5vw,24px);max-width:min(420px,calc(100vw - 24px));width:100%;max-height:85vh;max-height:85dvh;overflow-y:auto;animation:slideUp .3s ease}.tutorial-header{display:flex;align-items:center;justify-content:space-between;padding:clamp(14px,4vw,20px) clamp(16px,4vw,24px);border-bottom:1px solid var(--border)}.tutorial-header h2{font-size:clamp(16px,4.5vw,20px);font-weight:700;display:flex;align-items:center;gap:clamp(6px,2vw,10px)}.tutorial-header h2 svg{color:var(--accent-blue)}.tutorial-close-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.tutorial-close-btn:hover{background:var(--surface-3);color:var(--text)}.tutorial-content{padding:clamp(16px,4vw,24px)}.tutorial-section{margin-bottom:clamp(16px,4vw,24px)}.tutorial-section:last-child{margin-bottom:0}.tutorial-section h3{font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.5px}.tutorial-section h3,.tutorial-section p{font-size:clamp(12px,3.5vw,14px);margin-bottom:clamp(8px,2vw,12px)}.tutorial-section p{color:var(--text-secondary);line-height:1.6}.tutorial-section p:last-child{margin-bottom:0}.tutorial-example{display:flex;align-items:center;gap:clamp(8px,2vw,12px);padding:clamp(10px,2.5vw,14px);background:var(--surface-2);border-radius:clamp(8px,2vw,12px);margin-bottom:clamp(8px,2vw,12px)}.tutorial-example:last-child{margin-bottom:0}.tutorial-tiles{display:flex;gap:clamp(3px,.8vw,4px);flex-shrink:0}.tutorial-tile{width:clamp(32px,9vw,40px);height:clamp(32px,9vw,40px);display:flex;align-items:center;justify-content:center;font-size:clamp(14px,4vw,18px);font-weight:800;border-radius:clamp(6px,1.5vw,8px);text-transform:uppercase;flex-shrink:0}.tutorial-tile.correct{background:var(--correct);color:#fff}.tutorial-tile.wrong-pos{background:var(--wrong-pos);color:#fff}.tutorial-tile.wrong{background:var(--wrong);color:#fff}.tutorial-tile.empty{background:var(--surface-3);border:2px solid var(--border);color:var(--text)}.tutorial-explanation{flex:1;min-width:0;font-size:clamp(11px,3vw,13px);color:var(--text-secondary);line-height:1.5}.tutorial-explanation strong{color:var(--text)}.tutorial-footer{padding:clamp(14px,4vw,20px) clamp(16px,4vw,24px);border-top:1px solid var(--border)}.tutorial-footer .btn{width:100%}.auth-modal-content{display:flex;flex-direction:column;gap:clamp(10px,3vw,16px)}.auth-tabs{display:flex;gap:3px;padding:clamp(3px,.8vw,4px);background:var(--surface-2);border-radius:clamp(10px,2.5vw,12px)}.auth-tab{flex:1;padding:clamp(8px,2.5vw,10px) clamp(12px,3vw,16px);background:transparent;border:none;border-radius:clamp(6px,1.5vw,8px);color:var(--text-secondary);font-size:clamp(12px,3.5vw,14px);font-weight:600;cursor:pointer;transition:all .2s ease}.auth-tab.active,.auth-tab:hover{color:var(--text)}.auth-tab.active{background:var(--surface-3);box-shadow:0 2px 8px rgba(0,0,0,.2)}.auth-benefits{padding:clamp(8px,2.5vw,12px) clamp(10px,3vw,16px);background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);border-radius:clamp(10px,2.5vw,12px)}.auth-benefits p{font-size:clamp(11px,3vw,13px);color:var(--text-secondary);margin-bottom:clamp(4px,1.5vw,8px)}.auth-benefits ul{list-style:none;padding:0;margin:0}.auth-benefits li{font-size:clamp(10px,2.8vw,12px);color:var(--text-muted);line-height:1.6}.auth-message{display:flex;align-items:flex-start;gap:clamp(8px,2vw,10px);padding:clamp(10px,2.5vw,12px) clamp(10px,2.5vw,14px);border-radius:clamp(8px,2vw,10px);font-size:clamp(11px,3vw,13px)}.auth-message.error{background:rgba(248,113,113,.15);border:1px solid rgba(248,113,113,.3);color:#fca5a5}.auth-message.error svg{color:var(--accent-red);flex-shrink:0;margin-top:1px}.auth-message.success{background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);color:#6ee7b7}.auth-message.success svg{color:var(--accent-green);flex-shrink:0;margin-top:1px}.auth-message p{margin:0;line-height:1.4}.auth-form{gap:clamp(10px,3vw,14px)}.auth-field,.auth-form{display:flex;flex-direction:column}.auth-field,.auth-field label{gap:clamp(4px,1.2vw,6px)}.auth-field label{font-size:clamp(11px,3.2vw,13px);font-weight:600;color:var(--text-secondary);display:flex;align-items:center}.auth-field-hint{font-size:clamp(10px,2.5vw,11px);font-weight:400;color:var(--text-muted)}.auth-input-wrapper{position:relative;display:flex;align-items:center}.auth-input-icon{position:absolute;left:clamp(10px,2.5vw,12px);width:clamp(16px,4vw,18px);height:clamp(16px,4vw,18px);color:var(--text-muted);pointer-events:none}.auth-input-wrapper input{width:100%;padding:clamp(10px,2.5vw,12px) clamp(10px,2.5vw,12px) clamp(10px,2.5vw,12px) clamp(36px,10vw,42px);background:var(--surface-2);border:1px solid var(--border);border-radius:clamp(8px,2vw,10px);color:var(--text);font-size:clamp(13px,3.5vw,14px);outline:none;transition:all .2s ease}.auth-input-wrapper input::-moz-placeholder{color:var(--text-muted)}.auth-input-wrapper input::placeholder{color:var(--text-muted)}.auth-input-wrapper input:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px rgba(96,165,250,.15)}.auth-password-toggle{position:absolute;right:clamp(6px,1.5vw,8px);width:clamp(28px,7vw,32px);height:clamp(28px,7vw,32px);display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;color:var(--text-muted);cursor:pointer;transition:all .2s ease}.auth-password-toggle:hover{background:var(--surface-3);color:var(--text)}.auth-field-error{color:var(--accent-red)}.auth-field-error,.auth-field-success{font-size:clamp(10px,2.8vw,12px);margin-top:2px}.auth-field-success{color:var(--accent-green)}.auth-password-requirements{display:flex;flex-wrap:wrap;gap:clamp(4px,1.2vw,6px);margin-top:clamp(6px,1.5vw,8px)}.auth-requirement{display:flex;align-items:center;gap:clamp(3px,.8vw,4px);padding:clamp(3px,.8vw,4px) clamp(6px,1.5vw,8px);border-radius:clamp(5px,1.2vw,6px);font-size:clamp(10px,2.5vw,11px);transition:all .2s ease}.auth-requirement.passed{background:rgba(16,185,129,.15);color:var(--accent-green)}.auth-requirement.failed{background:rgba(248,113,113,.1);color:var(--text-muted)}.auth-submit-btn{margin-top:4px}.auth-terms{font-size:clamp(10px,2.5vw,11px);color:var(--text-muted);text-align:center}.auth-divider{display:flex;align-items:center;gap:clamp(8px,2.5vw,12px);margin:clamp(2px,.5vw,4px) 0}.auth-divider:after,.auth-divider:before{content:"";flex:1;height:1px;background:var(--border)}.auth-divider span{font-size:clamp(10px,2.5vw,12px);color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.auth-google-btn{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2.5vw,12px);width:100%;padding:clamp(10px,2.5vw,12px) clamp(12px,3vw,16px);background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:clamp(10px,2.5vw,12px);color:var(--text);font-size:clamp(13px,3.5vw,14px);font-weight:500;cursor:pointer;transition:all .2s ease}.auth-google-btn:hover:not(:disabled){background:rgba(255,255,255,.1);border-color:var(--text-muted)}.auth-google-btn:disabled{opacity:.6;cursor:not-allowed}.auth-forgot-link{text-align:right;margin-top:-4px;margin-bottom:4px}.auth-link-btn{background:none;border:none;color:#667eea;font-size:clamp(11px,3vw,13px);cursor:pointer;padding:2px 0;transition:color .2s ease}.auth-link-btn:hover{color:#764ba2;text-decoration:underline}.auth-back-link{text-align:center;margin-top:12px}.auth-forgot-description{color:var(--text-muted);font-size:clamp(12px,3.5vw,14px);text-align:center;line-height:1.5;margin-bottom:8px}.reset-password-layout{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 64px);padding:clamp(16px,4vw,40px);position:relative;z-index:1}.reset-password-card{width:100%;max-width:min(420px,calc(100vw - 32px));background:var(--glass-bg,rgba(255,255,255,.05));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border,rgba(255,255,255,.1));border-radius:clamp(12px,3vw,16px);padding:clamp(20px,5vw,32px) clamp(16px,4vw,24px)}.reset-password-title{color:var(--text,#ffffff);font-size:clamp(18px,4.5vw,22px);font-weight:700;text-align:center;margin:0 0 6px}.reset-password-subtitle{color:var(--text-muted);font-size:clamp(13px,3.5vw,15px);text-align:center;margin:0 0 clamp(16px,4vw,24px);line-height:1.5}.reset-password-form{display:flex;flex-direction:column;gap:clamp(12px,3vw,16px)}.reset-password-form .auth-field label{font-size:clamp(12px,3.2vw,13px)}.reset-password-form .auth-input-wrapper input{width:100%;height:clamp(44px,11vw,52px);font-size:clamp(13px,3.5vw,14px)}.reset-password-form .auth-submit-btn{height:clamp(46px,11.5vw,54px);font-size:clamp(14px,3.5vw,16px);margin-top:clamp(4px,1vw,8px)}.reset-password-success{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,3vw,16px);text-align:center;padding:clamp(12px,3vw,20px) 0}.reset-password-success svg{color:#22c55e;width:clamp(36px,10vw,48px);height:clamp(36px,10vw,48px)}.reset-password-success h1{color:var(--text,#ffffff);font-size:clamp(18px,4.5vw,22px);font-weight:700;margin:0}.reset-password-success p{color:var(--text-muted);font-size:clamp(13px,3.5vw,15px);margin:0 0 clamp(4px,1vw,8px);line-height:1.5}.reset-password-success a{width:100%}.reset-password-success .btn-primary{height:clamp(46px,11.5vw,54px);font-size:clamp(14px,3.5vw,16px)}.light .auth-link-btn{color:#2563eb}.light .auth-link-btn:hover{color:#764ba2}.light .auth-forgot-description{color:#65676b}.light .auth-tabs{background:#f0f2f5}.light .auth-tab{color:#4b4f56}.light .auth-tab:hover{color:#1c1e21}.light .auth-tab.active{background:#ffffff;color:#1c1e21;box-shadow:0 2px 8px rgba(0,0,0,.1)}.light .auth-benefits{background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.15)}.light .auth-benefits p{color:#4b4f56}.light .auth-benefits li{color:#65676b}.light .auth-field label{color:#4b4f56}.light .auth-field-hint{color:#65676b}.light .auth-input-wrapper input{background:#ffffff;border:1px solid #dddfe2;color:#1c1e21}.light .auth-input-wrapper input::-moz-placeholder{color:#65676b}.light .auth-input-wrapper input::placeholder{color:#65676b}.light .auth-input-wrapper input:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15)}.light .auth-input-icon,.light .auth-password-toggle{color:#65676b}.light .auth-password-toggle:hover{background:#f0f2f5;color:#1c1e21}.light .auth-message.error{background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.2);color:#dc2626}.light .auth-message.success{background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.2);color:#16a34a}.light .auth-divider span,.light .auth-terms{color:#65676b}.light .auth-divider:after,.light .auth-divider:before{background:#dddfe2}.light .auth-google-btn{background:#ffffff;border:1px solid #dddfe2;color:#1c1e21}.light .auth-google-btn:hover:not(:disabled){background:#f0f2f5;border-color:#bbbfc5}:root{--tile-size:clamp(44px,12vw,62px);--tile-gap:clamp(4px,1vw,8px);--tile-font:clamp(1.25rem,4vw,2rem);--tile-radius:clamp(6px,1.5vw,10px);--key-height:clamp(46px,8vh,58px);--key-min-width:clamp(24px,6vw,36px);--key-font:clamp(12px,2.5vw,15px);--key-gap:clamp(4px,0.8vw,6px);--key-wide-width:clamp(48px,12vw,65px);--page-padding:clamp(12px,4vw,24px);--section-gap:clamp(16px,4vw,32px);--card-padding:clamp(16px,4vw,28px);--card-radius:clamp(12px,3vw,20px);--heading-xl:clamp(28px,8vw,48px);--heading-lg:clamp(22px,5vw,32px);--heading-md:clamp(18px,4vw,24px);--body-lg:clamp(15px,3vw,18px);--body-md:clamp(13px,2.5vw,15px);--body-sm:clamp(11px,2vw,13px)}.tile{width:var(--tile-size);height:var(--tile-size);font-size:var(--tile-font);border-radius:var(--tile-radius)}.key{height:var(--key-height);min-width:var(--key-min-width);font-size:var(--key-font);padding:0 clamp(4px,1vw,10px);border-radius:clamp(6px,1.2vw,8px)}.key-wide{min-width:var(--key-wide-width);font-size:calc(var(--key-font) * .85)}.keyboard-row{display:flex;justify-content:center;gap:var(--key-gap);margin-bottom:var(--key-gap)}.game-container{max-width:min(500px,100vw - 32px);padding:0 var(--page-padding)}.game-container-wide{max-width:min(1200px,100vw - 32px);padding:0 var(--page-padding)}@media (max-width:359px){:root{--tile-size:40px;--tile-gap:3px;--key-height:42px;--key-min-width:22px;--key-wide-width:44px}.header{padding:8px 12px}.header-logo{font-size:18px}.header-right{gap:6px}.header-icon-btn{width:34px;height:34px}.streak-badge{padding:4px 8px;font-size:12px}.hero-logo{font-size:36px}.hero-tagline{font-size:14px}.hero-tile{width:38px;height:38px;font-size:18px}.hero-tiles{gap:5px}.btn{height:44px;padding:0 16px;font-size:13px}.game-card{padding:12px;min-height:100px}.game-card-icon{width:36px;height:36px}.game-card-title{font-size:14px}.game-card-subtitle{font-size:11px}.game-state-card{padding:20px 16px;border-radius:16px}.game-state-icon{width:56px;height:56px}.game-state-title{font-size:18px}.game-state-text{font-size:13px}.modal-panel{margin:8px;border-radius:16px;max-height:calc(100vh - 16px)}.user-stats-bar{gap:4px;padding:12px 8px}.user-stat{padding:10px 8px;min-width:60px}.user-stat-value{font-size:16px}.user-stat-label{font-size:9px}.leaderboard-header h2{font-size:16px}.leaderboard-tab .icon{display:none}.leaderboard-tab{padding:0 8px;font-size:11px;gap:0}.leaderboard-item{padding:10px 12px}.leaderboard-item-avatar{width:36px;height:36px}.leaderboard-item-name{font-size:13px}}@media (min-width:360px) and (max-width:479px){:root{--tile-size:48px;--tile-gap:5px;--key-height:48px;--key-min-width:28px;--key-wide-width:52px}.header{padding:10px 14px}.header-logo{font-size:20px}.header-icon-btn{width:36px;height:36px}.hero-logo{font-size:42px}.hero-tagline{font-size:15px;margin-bottom:24px}.hero-tile{width:44px;height:44px;font-size:20px}.btn{height:46px;padding:0 20px;font-size:14px}.game-card{padding:14px;min-height:110px}.game-card-icon{width:40px;height:40px}.user-stat{padding:12px 10px;min-width:70px}.user-stat-value{font-size:18px}.leaderboard-tab .icon{display:none}.leaderboard-tab{gap:0}}@media (min-width:480px) and (max-width:639px){:root{--tile-size:54px;--tile-gap:6px;--key-height:52px;--key-min-width:32px;--key-wide-width:58px}.header{padding:12px 16px}.header-logo{font-size:22px}.hero-logo{font-size:52px}.hero-tagline{font-size:16px}.hero-tile{width:48px;height:48px;font-size:22px}.btn{height:48px;padding:0 24px}.game-card{padding:16px;min-height:120px}.game-cards-left,.game-cards-right{grid-template-columns:repeat(2,1fr);max-width:400px}}@media (min-width:640px) and (max-width:767px){:root{--tile-size:58px;--tile-gap:7px;--key-height:54px;--key-min-width:34px;--key-wide-width:62px}.header{padding:12px 20px}.header-logo{font-size:24px}.hero-logo{font-size:60px}.hero-tile{width:50px;height:50px;font-size:24px}.game-cards-left,.game-cards-right{grid-template-columns:repeat(2,1fr);max-width:450px}.game-container{max-width:480px}}@media (min-width:768px) and (max-width:1023px){:root{--tile-size:60px;--tile-gap:8px;--key-height:56px;--key-min-width:36px;--key-wide-width:64px}.header{padding:14px 24px}.hero-logo{font-size:66px}.hero-tile{width:52px;height:52px}.game-container{max-width:500px}.home-layout{flex-direction:column}.home-sidebar{width:100%;height:auto;position:relative;border-left:none;border-top:1px solid var(--border);padding:24px 20px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.leaderboard-section,.live-stats-section{margin-bottom:0}}@media (min-width:1024px) and (max-width:1279px){:root{--tile-size:62px;--tile-gap:8px;--key-height:58px;--key-min-width:38px}.header{padding:14px 28px}.hero-logo{font-size:72px}.hero-with-cards{grid-template-columns:1fr minmax(320px,480px) 1fr;gap:28px}.game-card{width:175px}.home-sidebar{width:300px}}@media (min-width:1280px){:root{--tile-size:64px;--tile-gap:10px;--key-height:60px;--key-min-width:40px}.header{padding:16px 32px}.hero-logo{font-size:78px}.hero-with-cards{grid-template-columns:1fr minmax(350px,520px) 1fr;gap:32px;max-width:1400px}.game-card{width:190px;min-height:150px}.home-sidebar{width:340px;padding:100px 24px 24px}.game-container-wide{max-width:1400px}}@media (min-width:1600px){.hero-with-cards{max-width:1600px;gap:40px}.game-card{width:200px;min-height:160px;padding:20px}.home-sidebar{width:380px}}@media (max-height:500px) and (orientation:landscape){:root{--tile-size:42px;--tile-gap:4px;--key-height:40px}.header{padding:6px 16px}.header-logo{font-size:18px}.game-page{min-height:auto}.game-container{padding-top:8px}.game-content{padding:8px 0}.keyboard-wrapper{padding-bottom:8px}.game-area-horizontal{flex-direction:row;gap:24px;padding:8px}.game-header{padding:8px 0}.game-header-mode{font-size:14px}.game-header-lives{gap:3px}.life-icon{width:16px;height:16px}.hero{padding:16px 20px}.hero-logo{font-size:32px;margin-bottom:4px}.hero-tagline{font-size:13px}.hero-tagline,.hero-tiles{margin-bottom:12px}.hero-tile{width:36px;height:36px;font-size:16px}}.game-grid{flex-direction:column}.game-grid,.game-row{display:flex;gap:var(--tile-gap)}.game-row{justify-content:center}.game-header{display:flex;align-items:center;justify-content:space-between;padding:clamp(10px,2.5vw,16px) 0;border-bottom:1px solid var(--border);margin-bottom:clamp(12px,3vw,20px)}.game-header-mode{font-size:var(--body-md);font-weight:600}.game-header-time{font-size:var(--body-md);font-family:JetBrains Mono,SF Mono,monospace}.opponent-bar{justify-content:space-between;padding:clamp(10px,2.5vw,14px) clamp(14px,3vw,20px);background:var(--surface);border:1px solid var(--border);border-radius:clamp(10px,2vw,14px);margin-bottom:clamp(12px,3vw,20px)}.opponent-bar,.opponent-info{display:flex;align-items:center}.opponent-info{gap:clamp(8px,2vw,12px)}.opponent-avatar{width:clamp(28px,7vw,36px);height:clamp(28px,7vw,36px);border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center}.opponent-label{font-size:var(--body-md);font-weight:600}.opponent-status{font-size:var(--body-sm);color:var(--text-secondary);padding:clamp(4px,1vw,6px) clamp(10px,2.5vw,14px);background:var(--surface-2);border-radius:20px}.opponent-status.finished{background:rgba(16,185,129,.2);color:var(--accent-green)}.settings-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--card-radius);padding:var(--card-padding);margin-bottom:clamp(12px,3vw,20px)}.settings-panel-title{font-size:var(--body-md);font-weight:600;margin-bottom:clamp(12px,3vw,16px);text-align:center;color:var(--text-secondary)}.word-length-selector{gap:clamp(16px,4vw,24px)}.word-length-btn,.word-length-selector{display:flex;align-items:center;justify-content:center}.word-length-btn{width:clamp(40px,10vw,48px);height:clamp(40px,10vw,48px);border-radius:50%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:all .2s ease}.word-length-btn:hover:not(:disabled){background:var(--surface-3);border-color:var(--border-light)}.word-length-number{font-size:clamp(28px,8vw,40px)}.word-length-label{font-size:var(--body-sm)}.duel-section{padding:clamp(16px,4vw,24px)}.duel-header{margin-bottom:clamp(16px,4vw,24px)}.duel-header-icon{width:clamp(44px,12vw,56px);height:clamp(44px,12vw,56px);border-radius:clamp(12px,3vw,16px)}.duel-header-content h1{font-size:var(--heading-md)}.room-code-display{display:inline-flex;padding:clamp(12px,3vw,16px) clamp(20px,5vw,32px);background:var(--surface-2);border:2px dashed var(--border);border-radius:clamp(12px,3vw,16px);font-size:clamp(24px,6vw,32px);font-weight:800;letter-spacing:.15em;font-family:JetBrains Mono,SF Mono,monospace}.room-code-display,.waiting-indicator{align-items:center;justify-content:center}.waiting-indicator{display:flex;gap:clamp(6px,1.5vw,10px);padding:clamp(10px,2.5vw,14px) clamp(16px,4vw,24px);background:var(--surface);border:1px solid var(--border);border-radius:50px;font-size:var(--body-md);color:var(--text-secondary);margin-top:clamp(16px,4vw,24px)}@media (max-width:1023px){.game-cards-left,.game-cards-right{justify-self:center;width:100%;max-width:500px}.game-card{width:100%;min-height:100px}}@media (max-width:639px){.game-cards-left,.game-cards-right{grid-template-columns:1fr 1fr;gap:10px;max-width:100%}.game-card{padding:12px;min-height:110px}.game-card-header{margin-bottom:8px}.game-card-icon{width:38px;height:38px}.game-card-title{font-size:14px}.game-card-subtitle{font-size:11px}.game-card-status{font-size:11px;padding:6px 8px;margin-top:8px}}@media (max-width:400px){.game-cards-left,.game-cards-right{grid-template-columns:1fr;gap:10px}.game-card{padding:14px;min-height:auto}.game-card-header{margin-bottom:10px}.game-card-icon{width:40px;height:40px}.game-card-title{font-size:15px}.game-card-subtitle{font-size:12px}.game-card-status{font-size:12px;padding:8px 12px}}.modal-panel{margin:clamp(8px,2vw,16px);max-width:calc(100vw - clamp(16px, 4vw, 32px));max-height:calc(100vh - clamp(16px, 4vw, 32px));border-radius:var(--card-radius)}.modal-panel.xs{max-width:min(340px,calc(100vw - 32px))}.modal-panel.sm{max-width:min(380px,calc(100vw - 32px))}.modal-panel.md{max-width:min(480px,calc(100vw - 32px))}.modal-panel.lg{max-width:min(600px,calc(100vw - 32px))}.modal-panel.xl{max-width:min(800px,calc(100vw - 32px))}.modal-title{font-size:var(--heading-md)}.modal-content{padding:var(--card-padding)}.auth-modal{max-width:min(420px,calc(100vw - 32px))}.auth-input-wrapper input{padding:0 clamp(36px,9vw,40px) 0 clamp(36px,10vw,42px)}.auth-google-btn,.auth-input-wrapper input,.auth-submit-btn{height:clamp(42px,11vw,50px)}.leaderboard-section{padding:clamp(16px,4vw,20px)}.leaderboard-header{margin-bottom:clamp(12px,3vw,16px)}.leaderboard-header h2{font-size:var(--body-lg)}.leaderboard-item{padding:clamp(10px,2.5vw,14px) clamp(12px,3vw,16px);border-radius:clamp(10px,2.5vw,14px);gap:clamp(10px,2.5vw,14px)}.leaderboard-item-rank{width:clamp(28px,7vw,36px);height:clamp(28px,7vw,36px);font-size:var(--body-md)}.leaderboard-item-avatar{width:clamp(36px,9vw,44px);height:clamp(36px,9vw,44px)}.leaderboard-item-name{font-size:var(--body-md)}.leaderboard-item-score .score-value{font-size:var(--body-lg)}@media (hover:none) and (pointer:coarse){.btn,.key{min-height:48px}.header-icon-btn{min-width:44px;min-height:44px}.game-card:hover{transform:none}.game-card:active{transform:scale(.98)}.btn:hover{transform:none}.btn:active{transform:translateY(2px)}.key:active,.tile:active{transform:scale(.95)}}@media (max-width:380px){.result-modal{padding:clamp(16px,4vw,24px) clamp(12px,3vw,20px);border-radius:18px}.result-icon-large{width:52px;height:52px;margin-bottom:8px}.result-icon-large .icon{width:28px!important;height:28px!important}.result-title{font-size:clamp(18px,5vw,22px)}.result-subtitle{font-size:clamp(11px,3vw,13px)}.result-stats-grid{gap:4px;margin-bottom:12px}.result-stat-card{padding:8px 4px;gap:4px;border-radius:10px}.result-stat-icon-wrapper{width:28px;height:28px;border-radius:8px}.result-stat-icon-wrapper .icon{width:14px!important;height:14px!important}.result-stat-content .result-stat-value{font-size:16px}.result-stat-content .result-stat-label{font-size:8px;letter-spacing:0}.result-share-btn{height:42px;font-size:13px;border-radius:12px}.result-action-btn{height:38px;font-size:12px}.result-letter{width:30px;height:36px;font-size:15px}.result-word-reveal{margin-bottom:10px}}@media (max-width:320px){.result-stat-icon-wrapper{display:none}.result-stat-card{padding:8px 6px}.result-stat-content .result-stat-value{font-size:15px}.result-stat-content .result-stat-label{font-size:7px}}@media (min-width:769px){.result-modal{max-width:460px;padding:40px 36px 32px;border-radius:28px}.result-icon-large{width:88px;height:88px}.result-title{font-size:32px}.result-letter{width:48px;height:56px;font-size:24px}.result-stat-card{flex-direction:row;text-align:left;padding:14px 16px}.result-stat-content{align-items:flex-start}.result-stat-icon-wrapper{width:42px;height:42px}.result-stat-content .result-stat-value{font-size:22px}.result-stat-content .result-stat-label{font-size:11px}.result-share-btn{height:56px;font-size:16px}.result-action-btn{height:50px;font-size:15px}}@media (max-height:500px) and (orientation:landscape){.result-modal{padding:14px 18px;max-height:88dvh;border-radius:16px}.result-icon-large{width:44px;height:44px;margin-bottom:6px}.result-icon-large .icon{width:22px!important;height:22px!important}.result-title{font-size:18px;margin-bottom:2px}.result-subtitle{font-size:11px}.result-header,.result-word-reveal{margin-bottom:8px}.result-word-reveal .result-word-label{margin-bottom:4px;font-size:9px}.result-letter{width:28px;height:34px;font-size:14px}.result-stats-grid{margin-bottom:8px;gap:4px}.result-stat-card{padding:6px 4px;gap:4px}.result-stat-icon-wrapper{width:26px;height:26px}.result-stat-icon-wrapper .icon{width:14px!important;height:14px!important}.result-stat-content .result-stat-value{font-size:14px}.result-stat-content .result-stat-label{font-size:8px}.result-share-btn{height:40px;font-size:13px}.result-action-btn{height:36px;font-size:11px}.result-actions{gap:5px}}@supports (padding:max(0px)){.game-page{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))}.header{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-top:max(12px,env(safe-area-inset-top))}.keyboard-wrapper{padding-bottom:max(16px,env(safe-area-inset-bottom))}.modal-panel{padding-bottom:max(24px,env(safe-area-inset-bottom))}.result-modal{margin-bottom:max(16px,env(safe-area-inset-bottom))}}.auth-terms-link{color:#667eea;text-decoration:underline;text-underline-offset:2px;transition:color .2s ease}.auth-terms-link:hover{color:#818cf8}.light .auth-terms-link{color:#4f46e5}.light .auth-terms-link:hover{color:#6366f1}.terms-container{max-width:600px;width:100%;margin:0 auto;padding:clamp(24px,6vw,48px) clamp(16px,4vw,24px)}.terms-title{font-size:clamp(22px,5.5vw,30px);font-weight:800;color:var(--text);margin-bottom:4px}.terms-updated{font-size:clamp(11px,2.8vw,13px);color:var(--text-muted);margin-bottom:clamp(24px,6vw,36px)}.terms-content{display:flex;flex-direction:column;gap:clamp(20px,5vw,28px);margin-bottom:clamp(32px,8vw,48px)}.terms-section h2{font-size:clamp(15px,3.8vw,18px);font-weight:700;color:var(--text);margin-bottom:clamp(6px,1.5vw,10px)}.terms-section p{font-size:clamp(13px,3.2vw,15px);color:var(--text-secondary);line-height:1.7}.terms-back-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;color:var(--text);font-size:14px;font-weight:600;text-decoration:none;transition:all .2s ease}.terms-back-btn:hover{background:var(--surface-3);border-color:var(--text-muted)}@media print{.animated-background,.btn,.header,.keyboard-wrapper{display:none!important}.game-page{min-height:auto}.tile{border:2px solid #333!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.tile-correct{background:#22c55e!important}.tile-wrong-position{background:#eab308!important}.tile-wrong{background:#9ca3af!important}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.row-shake,.tile-reveal,.tile-success{animation:none!important}.floating-letter{display:none!important}}.focus\:border-red-500:focus{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:360px){.xs\:block{display:block}.xs\:inline{display:inline}}@media (min-width:480px){.sm\:h-6{height:1.5rem}.sm\:w-6{width:1.5rem}.sm\:max-w-\[150px\]{max-width:150px}.sm\:p-4{padding:1rem}.sm\:p-5{padding:1.25rem}.sm\:p-6{padding:1.5rem}.sm\:p-8{padding:2rem}.sm\:px-2{padding-left:.5rem;padding-right:.5rem}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}.sm\:pb-3{padding-bottom:.75rem}.sm\:pb-4{padding-bottom:1rem}.sm\:pb-5{padding-bottom:1.25rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (hover:hover){.hover\:scale-\[1\.02\]{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-white\/15{background-color:rgb(255 255 255/.15)}.disabled\:hover\:scale-100:disabled{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}