@layer components{.main-header{background:var(--header-gradient, linear-gradient(to right, oklch(45% .18 264), oklch(38% .2 290)));color:var(--color-text-on-brand);padding:var(--space-6);box-shadow:var(--shadow-2xl);border-bottom-left-radius:var(--radius-2xl);border-bottom-right-radius:var(--radius-2xl);transition:var(--transition-theme)}.header-content{display:flex;flex-direction:column;justify-content:space-between;align-items:center;@media (min-width: 640px){flex-direction:row}@media (max-width: 639px){text-align:center}}.site-title{font-size:var(--text-4xl);font-weight:800;margin-bottom:var(--space-4);transition:var(--transition-theme);.block{display:block}@media (min-width: 640px){font-size:var(--text-5xl);margin-bottom:0;text-align:left}@media (max-width: 639px){font-size:var(--text-3xl)}}.site-subtitle{font-size:var(--text-2xl);margin-top:var(--space-1);color:rgb(from var(--color-text-on-brand) r g b / 70%);transition:var(--transition-theme);@media (min-width: 640px){font-size:var(--text-3xl)}@media (max-width: 639px){font-size:var(--text-xl)}}.main-nav{margin-top:var(--space-4);@media (min-width: 640px){margin-top:0}}.nav-list{display:flex;flex-wrap:wrap;justify-content:center;font-size:var(--text-xl);font-weight:600;list-style:none;padding:0;margin:0;gap:var(--space-4);@media (min-width: 640px){justify-content:flex-end;gap:var(--space-6)}@media (max-width: 639px){margin-top:var(--space-4);gap:var(--space-2)}& li{margin:0}}.nav-link{color:var(--color-text-on-brand);text-decoration:none;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);position:relative;overflow:hidden;transition:color var(--transition-fast);&:before{content:"";position:absolute;inset:0;background:#ffffff1a;translate:-100% 0;transition:translate var(--transition-normal);z-index:-1}&:hover{color:rgb(from var(--color-text-on-brand) r g b / 80%);&:before{translate:0 0}}&.active{background:#ffffff26;font-weight:700}&:focus-visible{outline:2px solid oklch(100% 0 0 / 80%);outline-offset:2px}@media (max-width: 639px){font-size:var(--text-lg)}}.theme-power-up .main-header{position:relative;.site-title{position:relative;z-index:2}&:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 10px,oklch(100% 0 0 / 3%) 10px,oklch(100% 0 0 / 3%) 20px);pointer-events:none}}.theme-sparkle-play .main-header{position:relative;overflow:hidden;&:before{content:"✨";position:absolute;top:20%;right:10%;font-size:2rem;opacity:.3;animation:sparkle-header 3s ease-in-out infinite}&:after{content:"💫";position:absolute;bottom:20%;left:15%;font-size:1.5rem;opacity:.4;animation:sparkle-header 2s ease-in-out infinite reverse}}}@keyframes sparkle-header{0%,to{transform:scale(1) rotate(0);opacity:.3}50%{transform:scale(1.2) rotate(180deg);opacity:.6}}@layer components{.main-footer{background:var(--footer-bg, oklch(14% .04 260));color:var(--footer-text, oklch(88% .01 240));padding:var(--space-8);text-align:center;border-top-left-radius:var(--radius-2xl);border-top-right-radius:var(--radius-2xl);box-shadow:var(--shadow-inner);margin-top:auto;transition:var(--transition-theme);@media (max-width: 640px){padding:var(--space-6)}}.footer-content{max-width:var(--container-max-width);margin-inline:auto;padding-inline:var(--container-padding)}.footer-description{font-size:var(--text-xl);margin-bottom:var(--space-4);line-height:1.6;max-width:50rem;margin-inline:auto;@media (max-width: 768px){font-size:var(--text-lg)}@media (max-width: 640px){font-size:var(--text-base);margin-bottom:var(--space-6)}}.footer-social{margin-block:var(--space-8)}.footer-social-title{font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--space-4);color:var(--footer-text, oklch(100% 0 0));@media (max-width: 640px){font-size:var(--text-xl)}}.footer-social-links{display:flex;justify-content:center;gap:var(--space-6);flex-wrap:wrap;margin-bottom:var(--space-6);@media (max-width: 640px){gap:var(--space-4)}@media (max-width: 480px){gap:var(--space-3)}}.footer-social-link{display:flex;flex-direction:column;align-items:center;color:rgb(from var(--footer-text, oklch(88% .01 240)) r g b / 75%);text-decoration:none;padding:var(--space-3);border-radius:var(--radius-lg);min-width:5rem;position:relative;overflow:hidden;transition:color var(--transition-fast),transform var(--transition-fast);&:before{content:"";position:absolute;inset:0;background:#ffffff0d;scale:0;transition:scale var(--transition-normal);border-radius:var(--radius-lg)}&:hover{color:var(--footer-link-hover, oklch(100% 0 0));transform:translateY(-2px);&:before{scale:1}.footer-social-icon{transform:scale(1.1)}}&:focus-visible{outline:2px solid oklch(100% 0 0 / 80%);outline-offset:2px}@media (max-width: 640px){min-width:4.375rem;padding:var(--space-2)}@media (max-width: 480px){min-width:3.75rem}& span{font-size:var(--text-sm);font-weight:500;position:relative;z-index:1;@media (max-width: 480px){font-size:.75rem}}}.footer-social-icon{width:2rem;height:2rem;margin-bottom:var(--space-2);position:relative;z-index:1;transition:transform var(--transition-fast);@media (max-width: 640px){width:1.5rem;height:1.5rem}}.footer-links{margin-top:var(--space-6);display:flex;justify-content:center;font-size:var(--text-lg);gap:var(--space-6);flex-wrap:wrap;@media (max-width: 640px){flex-direction:column;gap:var(--space-3);font-size:var(--text-base)}}.footer-link{color:var(--footer-link, rgb(from var(--footer-text, oklch(88% .01 240)) r g b / 80%));text-decoration:none;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);position:relative;transition:color var(--transition-fast);&:after{content:"";position:absolute;bottom:0;left:50%;width:0;height:2px;background:currentColor;transition:width var(--transition-normal),left var(--transition-normal)}&:hover{color:var(--footer-link-hover, oklch(100% 0 0));&:after{width:80%;left:10%}}&:focus-visible{outline:2px solid oklch(100% 0 0 / 80%);outline-offset:2px}}.footer-copyright{font-size:var(--text-base);color:rgb(from var(--footer-text, oklch(88% .01 240)) r g b / 60%);margin-block:var(--space-6);line-height:1.5}.theme-power-up .main-footer{position:relative;&:before{content:"";position:absolute;top:0;inset-inline:0;height:4px;background:linear-gradient(90deg,#df202e,oklch(68% .2 50),oklch(82% .18 90),#31aa40,oklch(70% .17 205),#497ef7,#793afa,#df202e);background-size:200% 100%;animation:rainbow-stripe 3s linear infinite}}.theme-sparkle-play .main-footer{position:relative;overflow:hidden;&:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgb(from var(--color-brand) r g b / 10%) 0%,transparent 70%);animation:footer-glow 4s ease-in-out infinite alternate;pointer-events:none}}}@keyframes rainbow-stripe{0%{background-position:0% 50%}to{background-position:200% 50%}}@keyframes footer-glow{0%{opacity:.3;transform:scale(1)}to{opacity:.6;transform:scale(1.1)}}@layer base,tokens,themes,components,utilities,overrides;@property --color-brand{syntax: "<color>"; inherits: true; initial-value: oklch(62% .19 264);}@property --color-accent{syntax: "<color>"; inherits: true; initial-value: oklch(58% .22 25);}@property --color-surface{syntax: "<color>"; inherits: true; initial-value: oklch(98% .005 240);}@layer tokens{:root{color-scheme:light dark;--font-primary: "Inter", sans-serif;--font-display-power: "Bangers", cursive;--font-display-sparkle: "Pacifico", cursive;--color-surface: oklch(98% .005 240);--color-surface-raised: oklch(100% 0 0);--color-surface-sunken: oklch(94% .008 240);--color-text: oklch(20% .01 240);--color-text-muted: oklch(50% .01 240);--color-text-on-brand: oklch(99% 0 0);--color-brand: oklch(62% .19 264);--color-brand-subtle: rgb(from var(--color-brand) r g b / 12%);--color-accent: oklch(58% .22 25);--color-accent-subtle: rgb(from var(--color-accent) r g b / 12%);--color-success: oklch(65% .18 145);--color-success-subtle: rgb(from var(--color-success) r g b / 12%);--color-danger: oklch(55% .22 25);--color-danger-subtle: rgb(from var(--color-danger) r g b / 12%);--color-warning: oklch(76% .18 70);--color-warning-subtle: rgb(from var(--color-warning) r g b / 15%);--color-cat-puzzle: oklch(55% .26 290);--color-cat-card: oklch(65% .18 145);--color-cat-action: oklch(55% .22 25);--color-cat-kids: oklch(70% .2 50);--color-cat-sports: oklch(58% .18 220);--color-cat-multiplayer: oklch(55% .24 270);--color-border: oklch(85% .01 240);--color-border-strong: oklch(70% .01 240);--shadow-sm: 0 2px 4px oklch(0% 0 0 / 6%);--shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 10%), 0 2px 4px -1px oklch(0% 0 0 / 6%);--shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 10%), 0 4px 6px -2px oklch(0% 0 0 / 5%);--shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 10%), 0 10px 10px -5px oklch(0% 0 0 / 4%);--shadow-2xl: 0 25px 50px -12px oklch(0% 0 0 / 25%);--shadow-inner: inset 0 2px 4px 0 oklch(0% 0 0 / 6%);--shadow-brand: 0 5px 15px rgb(from var(--color-brand) r g b / 35%);--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--text-sm: clamp(.8rem, 1.5vw, .875rem);--text-base: clamp(.95rem, 2vw, 1rem);--text-lg: clamp(1rem, 2.5vw, 1.125rem);--text-xl: clamp(1.1rem, 3vw, 1.25rem);--text-2xl: clamp(1.25rem, 3.5vw, 1.5rem);--text-3xl: clamp(1.4rem, 4vw, 1.875rem);--text-4xl: clamp(1.75rem, 5vw, 2.25rem);--text-5xl: clamp(2rem, 6vw, 3rem);--transition-theme: background-color .5s ease, color .5s ease;--transition-fast: .2s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--container-max-width: 1200px;--container-padding: 1.5rem}}@layer base{html{scrollbar-gutter:stable}*{box-sizing:border-box}body{font-family:var(--font-primary);line-height:1.6;margin:0;padding:0;background:light-dark(var(--color-surface),oklch(15% .01 240));color:light-dark(var(--color-text),oklch(90% .005 240));transition:var(--transition-theme);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance;line-height:1.25}p{text-wrap:pretty}}@layer components{.container{max-width:var(--container-max-width);margin:0 auto;padding:var(--container-padding)}.btn-primary{font-weight:800;padding:.75rem 2rem;border-radius:var(--radius-full);font-size:var(--text-xl);box-shadow:var(--shadow-brand);transition:transform var(--transition-normal),box-shadow var(--transition-normal);transform:scale(1);display:inline-block;text-decoration:none;border:none;cursor:pointer;color:var(--color-text-on-brand);background:var(--color-brand);&:hover{transform:scale(1.05);box-shadow:var(--shadow-xl)}}.btn-category{font-weight:700;padding:.5rem 1.5rem;border-radius:var(--radius-full);font-size:var(--text-lg);box-shadow:var(--shadow-md);transition:transform var(--transition-normal);transform:scale(1);display:inline-block;text-decoration:none;border:none;cursor:pointer;color:var(--color-text-on-brand);&:hover{transform:scale(1.05)}}.btn-purple{background:var(--color-cat-puzzle);box-shadow:0 3px 10px rgb(from var(--color-cat-puzzle) r g b / 35%)}.btn-green{background:var(--color-cat-card);box-shadow:0 3px 10px rgb(from var(--color-cat-card) r g b / 35%)}.btn-red{background:var(--color-cat-action);box-shadow:0 3px 10px rgb(from var(--color-cat-action) r g b / 35%)}.btn-orange{background:var(--color-cat-kids);box-shadow:0 3px 10px rgb(from var(--color-cat-kids) r g b / 35%)}.btn-sky{background:var(--color-cat-sports);box-shadow:0 3px 10px rgb(from var(--color-cat-sports) r g b / 35%)}.btn-indigo{background:var(--color-cat-multiplayer);box-shadow:0 3px 10px rgb(from var(--color-cat-multiplayer) r g b / 35%)}.btn-blue{background:var(--color-brand);box-shadow:var(--shadow-brand)}:where(.btn-purple,.btn-green,.btn-red,.btn-orange,.btn-sky,.btn-indigo,.btn-blue):hover{filter:brightness(1.1)}.main-content{padding-top:var(--space-12);padding-bottom:var(--space-12)}.section-title{font-size:var(--text-4xl);font-weight:800;text-align:center;margin-bottom:var(--space-10);@media (min-width: 640px){font-size:var(--text-5xl)}}.hero-section{text-align:center;margin-bottom:var(--space-16);background:var(--color-surface-raised);padding:var(--space-10);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl)}.hero-title{font-size:var(--text-4xl);font-weight:800;margin-bottom:var(--space-6);@media (min-width: 640px){font-size:var(--text-5xl)}}.hero-description{font-size:var(--text-xl);line-height:1.625;margin-bottom:var(--space-8);max-width:48rem;margin-inline:auto;color:var(--color-text-muted)}}@layer utilities{.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.block{display:block}.hidden{display:none!important}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.items-center{align-items:center}.text-center{text-align:center}.mx-auto{margin-inline:auto}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}.mb-10{margin-bottom:var(--space-10)}.mb-16{margin-bottom:var(--space-16)}.mt-0{margin-top:0}.mt-1{margin-top:var(--space-1)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.py-12{padding-block:var(--space-12)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}.p-10{padding:var(--space-10)}.gap-6{gap:var(--space-6)}.gap-10{gap:var(--space-10)}.space-x-4>*:not(:first-child){margin-left:var(--space-4)}.space-x-6>*:not(:first-child){margin-left:var(--space-6)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.text-3xl{font-size:var(--text-3xl)}.text-4xl{font-size:var(--text-4xl)}.text-5xl{font-size:var(--text-5xl)}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.leading-tight{line-height:1.25}.leading-relaxed{line-height:1.625}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.text-white{color:#fff}.text-muted{color:var(--color-text-muted)}.text-gray-300{color:#b8bfc4}.text-gray-400{color:#999fa4}.text-gray-600{color:#595e63}.text-gray-700{color:#3e4347}.text-highlight-purple{color:var(--color-cat-puzzle)}.text-highlight-blue{color:var(--color-brand)}.text-highlight-yellow{color:var(--color-warning)}.text-highlight-green{color:var(--color-success)}.text-highlight-red{color:var(--color-danger)}.text-highlight-orange{color:var(--color-cat-kids)}.text-highlight-sky{color:var(--color-cat-sports)}.text-highlight-indigo{color:var(--color-cat-multiplayer)}.rounded-full{border-radius:var(--radius-full)}.rounded-2xl{border-radius:var(--radius-xl)}.rounded-b-3xl{border-bottom-left-radius:var(--radius-2xl);border-bottom-right-radius:var(--radius-2xl)}.rounded-t-3xl{border-top-left-radius:var(--radius-2xl);border-top-right-radius:var(--radius-2xl)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}.shadow-2xl{box-shadow:var(--shadow-2xl)}.shadow-inner{box-shadow:var(--shadow-inner)}.transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.hover\:scale-105:hover{transform:scale(1.05)}.hover\:underline:hover{text-decoration:underline}@media (min-width: 640px){.sm\:flex-row{flex-direction:row}.sm\:mb-0{margin-bottom:0}.sm\:mt-0{margin-top:0}.sm\:justify-end{justify-content:flex-end}.sm\:space-x-6>*:not(:first-child){margin-left:var(--space-6)}.sm\:text-3xl{font-size:var(--text-3xl)}.sm\:text-5xl{font-size:var(--text-5xl)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 768px){.md\:text-xl{font-size:var(--text-xl)}}@media (min-width: 1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}}@keyframes fadeInDown{0%{opacity:0;translate:0 -1.25rem}to{opacity:1;translate:0 0}}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 rgb(from var(--color-success) r g b / 70%)}70%{transform:scale(1.05);box-shadow:0 0 0 10px rgb(from var(--color-success) r g b / 0%)}to{transform:scale(1);box-shadow:0 0 rgb(from var(--color-success) r g b / 0%)}}@keyframes loading{0%,80%,to{opacity:.3}40%{opacity:1}}.animate-fade-in-down{animation:fadeInDown .8s ease-out forwards}.animate-pulse-once{animation:pulse 1.5s ease-out .5s 1}@layer themes{.theme-pro-play{--font-display: var(--font-primary);--color-surface: oklch(95% .008 240);--color-surface-raised: oklch(100% 0 0);--color-surface-sunken: oklch(91% .01 240);--color-text: oklch(22% .01 240);--color-text-muted: oklch(52% .01 240);--color-brand: oklch(62% .19 220);--color-accent: oklch(60% .19 264);--color-border: oklch(82% .01 240);--header-gradient: linear-gradient(to right, oklch(22% .06 260), oklch(32% .07 258));--footer-bg: oklch(14% .04 260);--footer-text: oklch(88% .01 240);--footer-link: var(--color-brand);--footer-link-hover: oklch(100% 0 0);--shadow-brand: 0 5px 15px rgb(from var(--color-brand) r g b / 40%);body{background:light-dark(var(--color-surface),oklch(12% .02 260));color:light-dark(var(--color-text),oklch(90% .005 240))}}.theme-power-up{--font-display: var(--font-display-power);--color-surface: oklch(94% .012 220);--color-surface-raised: oklch(98% .006 220);--color-surface-sunken: oklch(90% .015 220);--color-text: oklch(14% .01 250);--color-text-muted: oklch(42% .01 250);--color-brand: oklch(62% .19 264);--color-accent: oklch(58% .22 25);--color-border: oklch(75% .03 264);--header-gradient: linear-gradient(to right, oklch(62% .19 264), oklch(45% .18 264));--footer-bg: oklch(45% .18 264);--footer-text: oklch(100% 0 0);--footer-link: oklch(100% 0 0);--footer-link-hover: oklch(88% .04 240);--shadow-brand: 0 5px 15px rgb(from var(--color-brand) r g b / 40%);body{background:light-dark(var(--color-surface),oklch(12% .02 264));color:light-dark(var(--color-text),oklch(90% .005 240))}.main-header,.hero-title,.section-title,.theme-selector-title{font-family:var(--font-display-power)}.site-title,.site-title span{text-shadow:3px 3px var(--color-accent)}.section-title{text-shadow:1px 1px oklch(80% .08 240)}.game-card{border:2px solid var(--color-brand);&:hover{transform:translateY(-10px) rotate(-2deg) scale(1.03)}.game-icon{transform:rotate(-5deg)}&:hover .game-icon{transform:rotate(5deg) scale(1.2)}}}.theme-sparkle-play{--font-display: var(--font-display-sparkle);--color-surface: oklch(95% .025 350);--color-surface-raised: oklch(100% 0 0);--color-surface-sunken: oklch(92% .03 350);--color-text: oklch(28% .06 345);--color-text-muted: oklch(48% .06 345);--color-brand: oklch(60% .25 350);--color-accent: oklch(55% .26 290);--color-border: oklch(80% .06 350);--header-gradient: linear-gradient(to right, oklch(55% .22 350), oklch(48% .22 348));--footer-bg: oklch(42% .22 310);--footer-text: oklch(100% 0 0);--footer-link: oklch(100% 0 0);--footer-link-hover: oklch(92% .06 320);--shadow-brand: 0 5px 15px rgb(from var(--color-brand) r g b / 40%);body{background:light-dark(var(--color-surface),oklch(14% .04 340));color:light-dark(var(--color-text),oklch(90% .01 340))}.main-header,.hero-title,.section-title,.theme-selector-title{font-family:var(--font-display-sparkle)}.site-title,.site-title span{text-shadow:2px 2px oklch(80% .14 350)}.section-title{text-shadow:1px 1px oklch(88% .12 330)}.game-card{border:2px dashed var(--color-border);&:hover{transform:translateY(-5px) rotate(1deg) scale(1.01)}.game-icon{transform:rotate(2deg)}&:hover .game-icon{transform:rotate(-2deg) scale(1.1)}}}:is(.theme-pro-play,.theme-power-up,.theme-sparkle-play){.main-header{background:var(--header-gradient);box-shadow:var(--shadow-md);color:var(--color-text-on-brand)}.site-title,.site-title span{color:var(--color-text-on-brand)}.site-subtitle{color:rgb(from var(--color-text-on-brand) r g b / 70%)}.hero-title,.section-title,.theme-selector-title{color:var(--color-text)}.game-card{background:var(--color-surface-raised);box-shadow:var(--shadow-md);border-color:var(--color-border);transition:box-shadow var(--transition-normal),transform var(--transition-normal);&:hover{box-shadow:var(--shadow-xl)}}.game-icon{color:var(--color-brand);transition:transform var(--transition-normal)}.btn-primary{background:var(--color-brand);box-shadow:var(--shadow-brand)}.btn-category{background:var(--color-brand);box-shadow:var(--shadow-brand);color:var(--color-text-on-brand)}.main-footer{background:var(--footer-bg);color:var(--footer-text)}.footer-link{color:var(--footer-link);transition:color var(--transition-fast);&:hover{color:var(--footer-link-hover)}}.footer-copyright{color:rgb(from var(--footer-text) r g b / 60%)}.hero-description,.about-text,.game-description{color:var(--color-text-muted)}.more-game-link{color:var(--color-brand);&:hover{color:var(--color-accent)}}}}