:root{--accent-primary: #3d8bff;--accent-primary-deep: #1f5fd6;--accent-primary-soft: #6faaff;--accent-secondary: #22d3ee;--accent-secondary-deep: #0ea5c4;--accent-lime: #a3e635;--accent-lime-deep: #7cc41c;--accent-orange: #ff9f43;--accent-orange-deep: #e0801f;--accent-violet: #8b5cf6;--accent-violet-deep: #6d3fd8;--candy-pink: #ff5e7d;--candy-pink-deep: #d84362;--candy-purple: var(--accent-violet);--candy-purple-deep: var(--accent-violet-deep);--candy-blue: var(--accent-primary);--candy-blue-deep: var(--accent-primary-deep);--candy-teal: var(--accent-secondary);--candy-teal-deep: var(--accent-secondary-deep);--candy-yellow: #ffc93c;--candy-yellow-deep: #e0a81a;--candy-orange: var(--accent-orange);--candy-green: var(--accent-lime);--candy-green-deep: var(--accent-lime-deep);--candy-red: #ff5e7d;--accent-yellow: var(--candy-yellow);--accent-blue: var(--accent-primary);--accent-green: var(--accent-lime);--accent-red: var(--candy-red);--accent-purple: var(--accent-violet);--accent-yellow-light: #45391b;--accent-green-light: #2b4218;--sky-top: #10142a;--sky-mid: #121736;--sky-bottom: #0d1024;--cloud: #1d2340;--blob-1: rgba(61, 139, 255, .1);--blob-2: rgba(139, 92, 246, .1);--blob-3: rgba(34, 211, 238, .07);--blob-4: rgba(163, 230, 53, .05);--bg-primary: var(--sky-mid);--bg-secondary: var(--sky-bottom);--surface: #1d2340;--surface-soft: #232a4d;--surface-border: #2b3357;--surface-edge: #090c1b;--card-bg: var(--surface);--card-bg-hover: var(--surface-soft);--btn-bg: #262e54;--btn-bg-hover: #2d3660;--ink: #edf1ff;--ink-soft: #97a2cc;--ink-faint: #5d6795;--text-primary: var(--ink);--text-secondary: var(--ink-soft);--text-light: var(--ink);--text-on-dark: #ffffff;--text-on-wood: var(--ink);--on-card-primary: var(--ink);--on-card-secondary: var(--ink-soft);--on-card-category: var(--ink-soft);--on-card-muted: var(--ink-soft);--on-card-faint: var(--ink-faint);--timber-light: #232a4d;--timber-base: var(--surface);--timber-dark: var(--surface-edge);--timber-deep: var(--ink);--wood-highlight: #2b3357;--wood-shadow: var(--surface-edge);--card-shade-5: #202749;--card-shade-8: #242b50;--card-shade-10: #272f56;--card-shade-15: #2c355f;--card-shade-20: #313b68;--card-shade-22: #343e6d;--card-highlight-25: #303a66;--card-highlight-50: #3a4677;--card-highlight-90: #cdd6f4;--bg-tint-10: #1a2038;--bg-tint-12: #1d233e;--pastel-teal: #123f46;--pastel-salmon: #46262c;--pastel-lavender: #2c2752;--pastel-green: #23411c;--pastel-pink: #452132;--pastel-blue: #16304f;--pastel-peach: #45301c;--pastel-mint: #1c4034;--pastel-lilac: #2d2a56;--pastel-sun: #45391b;--overlay-heavy: rgba(4, 6, 16, .78);--overlay-dark: rgba(4, 6, 16, .66);--overlay-darker: rgba(4, 6, 16, .82);--on-black-10: #1a1a1a;--on-black-20: #333333;--on-black-25: #404040;--on-black-45: #737373;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-2xl: 32px;--space-3xl: 40px;--font-display: "Rubik", "Nunito", sans-serif;--font-primary: "Nunito", sans-serif;--font-cyrillic: "Nunito", sans-serif;--font-mono: "Nunito", sans-serif;--text-xs: 10px;--text-sm: 12px;--text-base: 14px;--text-lg: 16px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 28px;--text-4xl: 32px;--font-normal: 400;--font-semibold: 700;--font-bold: 800;--leading-tight: 1.2;--leading-normal: 1.5;--leading-relaxed: 1.75;--radius-sm: 10px;--radius-md: 14px;--radius-lg: 18px;--radius-xl: 22px;--radius-full: 9999px;--border-width: 2px;--border-thick: 4px;--shadow-sm: 0 2px 6px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .35);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .4);--shadow-xl: 0 14px 32px rgba(0, 0, 0, .45);--shadow-2xl: 0 20px 44px rgba(0, 0, 0, .5);--shadow-card: 0 6px 16px rgba(0, 0, 0, .35);--shadow-block: 0 4px 0 var(--surface-edge), 0 8px 18px rgba(0, 0, 0, .4);--shadow-block-pressed: 0 1px 0 var(--surface-edge), 0 4px 8px rgba(0, 0, 0, .35);--bevel-wood: inset 0 -3px 0 var(--surface-border);--shadow-inset: inset 0 2px 4px rgba(0, 0, 0, .3);--shadow-bevel: inset 0 -2px 0 var(--surface-border);--glow-primary: 0 0 18px rgba(61, 139, 255, .35);--glow-secondary: 0 0 18px rgba(34, 211, 238, .3);--transition-fast: .1s;--transition-base: .2s;--transition-medium: .3s;--transition-slow: .5s;--ease-out: cubic-bezier(.34, 1.56, .64, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--ease-spring: cubic-bezier(.68, -.55, .265, 1.55);--z-base: 1;--z-dropdown: 10;--z-sticky: 20;--z-modal: 100;--z-overlay: 200;--z-toast: 300;--z-tooltip: 400;--container-max-width: 475px;--container-padding: var(--space-lg);--header-height: 56px;--navbar-height: 64px;--card-size-small: 180px;--card-size-normal: 240px;--card-size-large: 320px;--grid-gap: 14px;--grid-columns: 2}:root[data-theme=light]{--sky-top: #f2f7ff;--sky-mid: #eef4fd;--sky-bottom: #e8f0fb;--cloud: #ffffff;--blob-1: rgba(61, 139, 255, .1);--blob-2: rgba(34, 211, 238, .1);--blob-3: rgba(163, 230, 53, .1);--blob-4: rgba(255, 159, 67, .08);--surface: #ffffff;--surface-soft: #f5f9ff;--surface-border: #dde8f6;--surface-edge: #c6d6ec;--card-bg: var(--surface);--card-bg-hover: var(--surface-soft);--btn-bg: #eef4fc;--btn-bg-hover: #e3edf9;--ink: #22314f;--ink-soft: #64769a;--ink-faint: #9aabc9;--accent-primary: #2f7de8;--accent-primary-deep: #1a5cc0;--accent-primary-soft: #5f9df2;--accent-secondary: #0fb5d4;--accent-secondary-deep: #0a92ac;--accent-lime: #6cbf1e;--accent-lime-deep: #55990f;--accent-yellow-light: #fff3d1;--accent-green-light: #e6f6d8;--timber-light: #ffffff;--timber-base: var(--surface);--timber-dark: var(--surface-edge);--timber-deep: var(--ink);--wood-highlight: #ffffff;--wood-shadow: var(--surface-edge);--card-shade-5: #f3f7fd;--card-shade-8: #eef4fb;--card-shade-10: #e9f0fa;--card-shade-15: #e0eaf7;--card-shade-20: #d6e3f3;--card-shade-22: #d1dff1;--card-highlight-25: #f0f6fd;--card-highlight-50: #f7fafe;--card-highlight-90: #ffffff;--bg-tint-10: #e6eefa;--bg-tint-12: #e0eaf8;--pastel-teal: #d8f6f2;--pastel-salmon: #ffe8e4;--pastel-lavender: #eae4ff;--pastel-green: #e4f7d8;--pastel-pink: #ffe4ee;--pastel-blue: #ddf0ff;--pastel-peach: #ffedda;--pastel-mint: #ddf5ea;--pastel-lilac: #e8e4fb;--pastel-sun: #fff3d1;--overlay-heavy: rgba(20, 32, 58, .65);--overlay-dark: rgba(20, 32, 58, .52);--overlay-darker: rgba(20, 32, 58, .72);--shadow-sm: 0 2px 6px rgba(47, 78, 130, .1);--shadow-md: 0 4px 12px rgba(47, 78, 130, .12);--shadow-lg: 0 8px 24px rgba(47, 78, 130, .15);--shadow-xl: 0 14px 32px rgba(47, 78, 130, .17);--shadow-2xl: 0 20px 44px rgba(47, 78, 130, .2);--shadow-card: 0 6px 16px rgba(47, 78, 130, .12);--shadow-block: 0 4px 0 var(--surface-edge), 0 8px 18px rgba(47, 78, 130, .14);--shadow-block-pressed: 0 1px 0 var(--surface-edge), 0 4px 8px rgba(47, 78, 130, .12);--shadow-inset: inset 0 2px 4px rgba(47, 78, 130, .1);--glow-primary: 0 0 14px rgba(47, 125, 232, .25);--glow-secondary: 0 0 14px rgba(15, 181, 212, .22)}@media(min-width:568px){:root{--container-padding: var(--space-2xl);--grid-gap: 18px}}@media(min-width:768px){:root{--grid-columns: 3;--container-max-width: 768px}}@media(min-width:1024px){:root{--grid-columns: 4;--container-max-width: 1024px;--grid-gap: 22px}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;touch-action:pan-x pan-y}body{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;touch-action:pan-x pan-y}html,body{height:100%;overflow-x:hidden}body{font-family:var(--font-primary);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--text-primary);background-color:var(--sky-top);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-weight:var(--font-bold);line-height:var(--leading-tight);margin:0}p{margin:0}a{color:inherit;text-decoration:none}ul,ol{list-style:none}img,picture,video,canvas,svg{display:block;max-width:100%}img{height:auto;font-style:italic;background-repeat:no-repeat;background-size:cover;shape-margin:.75rem}input,button,textarea,select{font:inherit;color:inherit}button{background:none;border:none;cursor:pointer;user-select:none}input,textarea{appearance:none;-webkit-appearance:none}:focus{outline:none}:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}button,a,input[type=button],input[type=submit]{touch-action:manipulation}html,body{height:100dvh;margin:0;padding:0;overflow:hidden}@supports (height: env(safe-area-inset-top)){html,body{height:100vh}}#root{height:100dvh;display:flex;flex-direction:column;overflow:hidden}html{overscroll-behavior:contain}.hide-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbar::-webkit-scrollbar{display:none}.no-select{user-select:none;-webkit-user-select:none;-moz-user-select:none}.smooth-scroll{scroll-behavior:smooth}.skip-link{position:absolute;top:-40px;left:0;background:var(--accent-yellow);color:var(--timber-deep);padding:8px 16px;z-index:9999;font-weight:var(--font-bold);transition:top .2s}.skip-link:focus{top:0}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:0ms!important;animation-iteration-count:1!important;transition-duration:0ms!important;scroll-behavior:auto!important}}@media(prefers-contrast:high){:root{--ink: #1f1233;--ink-soft: #4a3968;--surface-border: #b8a6d4;--surface-edge: #9a85be}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.focus-within:focus-within{outline:2px solid var(--accent-blue);outline-offset:2px}@media print{body{background:#fff!important;color:#000!important}.no-print{display:none!important}}.timber-canvas{width:100%;margin:0 auto;background:radial-gradient(240px 160px at 15% 60px,var(--blob-1) 0 55%,transparent 60%),radial-gradient(280px 190px at 88% 30px,var(--blob-2) 0 55%,transparent 60%),radial-gradient(220px 150px at 50% 45%,var(--blob-3) 0 55%,transparent 60%),radial-gradient(260px 180px at 75% 105%,var(--blob-4) 0 55%,transparent 60%),linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 45%,var(--sky-bottom) 100%);background-repeat:no-repeat;position:relative;--idle-play: running}.timber-canvas[data-game-active]{--idle-play: paused}.title-plaque{background:transparent;padding:0;display:inline-flex;align-items:center;gap:var(--space-sm)}.title-plaque h1{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;letter-spacing:.5px;text-transform:uppercase;background:linear-gradient(90deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent-primary)}.navigation-shelf{background:var(--surface);height:var(--navbar-height);display:flex;justify-content:space-around;align-items:center;padding:0 var(--space-md);margin:0 var(--space-lg) var(--space-md);flex-shrink:0;z-index:var(--z-sticky);border-radius:var(--radius-lg);box-shadow:0 4px 0 var(--surface-edge),var(--shadow-lg)}@supports (padding-bottom: env(safe-area-inset-bottom)){.navigation-shelf{margin-bottom:calc(var(--space-md) + env(safe-area-inset-bottom))}}.shelf-item{position:relative;flex:1;max-width:110px;height:50px;background:transparent;border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:all var(--transition-base) var(--ease-out)}.shelf-item:active{transform:scale(.94)}.shelf-item.active{background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);box-shadow:0 3px 0 var(--accent-primary-deep),var(--glow-primary)}.shelf-item svg{width:22px;height:22px;fill:var(--ink-faint);transition:fill var(--transition-base)}.shelf-item.active svg{fill:#fff}.shelf-item .nav-label{font-family:var(--font-primary);font-size:10px;font-weight:var(--font-bold);line-height:1;color:var(--ink-faint);transition:color var(--transition-base)}.shelf-item.active .nav-label{color:#fff}.shelf-item .nav-badge{position:absolute;top:0;right:8px;min-width:18px;height:18px;padding:0 5px;background:var(--accent-orange);color:#1c1204;border:2px solid var(--surface);border-radius:var(--radius-full);font-family:var(--font-primary);font-size:10px;font-weight:var(--font-bold);line-height:14px;display:flex;align-items:center;justify-content:center}.stats-strip{font-family:var(--font-primary);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-secondary);margin-top:var(--space-md);display:flex;gap:var(--space-lg);text-transform:uppercase;letter-spacing:1px}.btn-primary{background:linear-gradient(135deg,var(--accent-primary-soft) 0%,var(--accent-primary) 100%);color:#fff;padding:var(--space-md) var(--space-xl);border-radius:var(--radius-full);font-weight:var(--font-bold);font-size:var(--text-lg);border:none;box-shadow:0 4px 0 var(--accent-primary-deep),var(--shadow-md);transition:all var(--transition-fast)}.btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-primary-deep),var(--shadow-sm)}.btn-secondary{background:var(--btn-bg);color:var(--ink);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);border:none;box-shadow:0 3px 0 var(--surface-edge);font-weight:var(--font-bold);transition:all var(--transition-fast)}.btn-secondary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--surface-edge)}.input-timber{background:var(--surface);border:2px solid var(--surface-border);border-radius:var(--radius-full);padding:var(--space-md) var(--space-lg);font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--ink);box-shadow:var(--shadow-sm);transition:all var(--transition-base)}.input-timber:focus{border-color:var(--accent-primary);box-shadow:var(--glow-primary)}.input-timber::placeholder{color:var(--ink-faint);font-weight:var(--font-semibold)}.modal-overlay{position:fixed;inset:0;background:var(--overlay-dark);z-index:var(--z-overlay);display:flex;align-items:center;justify-content:center;padding:var(--space-xl)}.modal-content{background:var(--surface);border-radius:var(--radius-xl);padding:var(--space-2xl);max-width:90vw;max-height:90vh;overflow-y:auto;position:relative;box-shadow:var(--shadow-2xl)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--card-shade-20);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--ink-faint)}.tap-feedback{transition:transform var(--transition-fast)}.tap-feedback:active{transform:scale(.95)}.shimmer{background:linear-gradient(90deg,var(--card-shade-8) 0%,var(--card-highlight-25) 50%,var(--card-shade-8) 100%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes blockEntry{0%{transform:translateY(50px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideLeft{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideRight{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes wiggle{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes skeleton{0%{background-position:100% 50%}to{background-position:0 50%}}.animate-fade-in{animation:fadeIn var(--transition-medium) var(--ease-in-out)}.animate-fade-out{animation:fadeOut var(--transition-medium) var(--ease-in-out)}.animate-slide-up{animation:slideUp var(--transition-medium) var(--ease-out)}.animate-slide-down{animation:slideDown var(--transition-medium) var(--ease-out)}.animate-slide-left{animation:slideLeft var(--transition-medium) var(--ease-out)}.animate-slide-right{animation:slideRight var(--transition-medium) var(--ease-out)}.animate-block-entry{animation:blockEntry .6s var(--ease-out) forwards;opacity:0}.animate-spin{animation:spin 1s linear infinite}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-bounce{animation:bounce .6s ease-in-out infinite}.animate-wiggle{animation:wiggle .3s ease-in-out infinite}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.delay-4{animation-delay:.4s}.delay-5{animation-delay:.5s}.delay-6{animation-delay:.6s}.delay-7{animation-delay:.7s}.delay-8{animation-delay:.8s}.transition-all{transition:all var(--transition-base) var(--ease-in-out)}.transition-transform{transition:transform var(--transition-base) var(--ease-in-out)}.transition-opacity{transition:opacity var(--transition-base) var(--ease-in-out)}.transition-colors{transition:background-color var(--transition-base) var(--ease-in-out),color var(--transition-base) var(--ease-in-out)}.press-effect{transition:transform var(--transition-fast) var(--ease-out),box-shadow var(--transition-fast) var(--ease-out)}.press-effect:active{transform:translateY(4px)}.tap-scale{transition:transform var(--transition-fast)}.tap-scale:active{transform:scale(.95)}.skeleton{background:linear-gradient(90deg,var(--card-shade-15) 25%,var(--card-shade-5) 50%,var(--card-shade-15) 75%);background-size:200% 100%;animation:skeleton 1.5s ease-in-out infinite;border-radius:var(--radius-xl)}.skeleton-text{height:1em;margin-bottom:.5em}.skeleton-text:last-child{width:60%}.skeleton-card{aspect-ratio:1}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOutRight{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@keyframes scaleIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{0%{transform:scale(1);opacity:1}to{transform:scale(.8);opacity:0}}.animate-scale-in{animation:scaleIn var(--transition-base) var(--ease-out)}.animate-scale-out{animation:scaleOut var(--transition-base) var(--ease-in-out)}@keyframes idleRock{0%,to{transform:rotate(-2deg)}25%{transform:rotate(-3.5deg) scale(1.015)}75%{transform:rotate(-.5deg) scale(.99)}}@keyframes idleGlow{0%,to{border-bottom:4px solid var(--candy-purple-deep)}50%{border-bottom:4px solid var(--candy-purple)}}@keyframes idleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes idleShimmer{0%,to{filter:brightness(.95)}50%{filter:brightness(1.05)}}@keyframes achievementUnlock{0%{transform:scale(0) rotate(-10deg);opacity:0}50%{transform:scale(1.2) rotate(5deg)}to{transform:scale(1) rotate(0);opacity:1}}@keyframes shine{0%{left:-100%}to{left:100%}}.animate-achievement{animation:achievementUnlock .6s var(--ease-spring)}.shine-effect{position:relative;overflow:hidden}.shine-effect:after{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.35) 50%,transparent 100%);animation:shine 2s ease-in-out infinite}.bottom-nav{flex-shrink:0}.nav-item{border:none;outline:none;background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.nav-item:focus-visible{outline:3px solid var(--accent-primary);outline-offset:2px}.nav-item svg{width:22px;height:22px;color:var(--ink-faint);transition:transform var(--transition-fast)}.nav-item.active svg{color:#fff}.nav-item.active svg{transform:scale(1.1)}@supports (padding-bottom: env(safe-area-inset-bottom)){.bottom-nav{padding-bottom:env(safe-area-inset-bottom)}}.tab-container{flex:1;overflow:hidden;position:relative;min-height:0;touch-action:pan-y}.tab-slider{display:flex;height:100%;transform:translate(var(--tab-offset, 0%));transition:transform var(--transition-medium) var(--ease-out);will-change:transform}.tab-panel{height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain;min-height:0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 28px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 28px,#000 calc(100% - 24px),transparent 100%)}.tab-panel.active{pointer-events:auto}.tab-panel:not(.active){pointer-events:none}.tab-panel::-webkit-scrollbar{display:none}.header{background:transparent;padding:var(--space-md) var(--container-padding) var(--space-sm);padding-top:calc(var(--space-md) + env(safe-area-inset-top,0px));position:relative;z-index:var(--z-sticky);flex-shrink:0}.header-content{display:flex;align-items:center;gap:var(--space-md);min-height:40px}.header-spacer{flex:1}.header .title-plaque{margin:0;min-width:0}.header .title-plaque h1{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-btn{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--surface);border:none;border-radius:var(--radius-full);box-shadow:0 3px 0 var(--surface-edge),var(--shadow-sm);cursor:pointer;transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent}.header-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--surface-edge)}.header-btn svg{width:20px;height:20px;color:var(--ink-soft)}.header-btn:focus-visible{outline:3px solid var(--accent-primary);outline-offset:2px}@media(min-width:568px){.header .title-plaque h1{font-size:var(--text-2xl)}}.game-card{position:relative;background:var(--surface);aspect-ratio:1 / 1.1;padding:0;display:block;cursor:pointer;border-radius:var(--radius-lg);box-shadow:0 4px 0 var(--card-accent, var(--accent-primary)),var(--shadow-card);overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;transition:transform var(--transition-fast) var(--ease-out),box-shadow var(--transition-fast) var(--ease-out)}.game-card.pressed,.game-card:active{transform:translateY(3px) scale(.99);box-shadow:0 1px 0 var(--card-accent, var(--accent-primary)),var(--shadow-sm)}.game-card.small{width:140px}.game-card.normal,.game-card.large{width:100%}.game-card:focus-visible{outline:3px solid var(--accent-primary);outline-offset:3px}.card-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--card-tint, var(--surface-soft))}.card-icon-img{width:100%;height:100%;object-fit:cover}.card-icon-emoji{font-size:64px;line-height:1}.game-card.small .card-icon-emoji{font-size:44px}.game-card.large .card-icon-emoji{font-size:76px}.card-info{position:absolute;left:0;right:0;bottom:0;padding:26px var(--space-md) var(--space-sm);display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:linear-gradient(180deg,transparent 0%,rgba(7,9,20,.55) 35%,rgba(7,9,20,.88) 100%)}.card-title{font-size:var(--text-base);font-weight:var(--font-bold);color:#fff;margin:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;line-height:var(--leading-tight);text-shadow:0 1px 3px rgba(0,0,0,.6)}.game-card.small .card-title{font-size:var(--text-sm)}.card-category{position:absolute;top:8px;left:8px;display:inline-block;font-size:9px;font-family:var(--font-primary);font-weight:var(--font-bold);color:#fff;text-transform:uppercase;letter-spacing:.8px;background:var(--card-accent, var(--accent-primary));padding:3px 9px;border-radius:var(--radius-full);box-shadow:var(--shadow-sm)}.game-card.small .card-category{display:none}.card-favorite{position:absolute;top:8px;right:8px;width:32px;height:32px;padding:0;background:#0709148c;backdrop-filter:blur(4px);border:none;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform var(--transition-fast);z-index:2}.card-favorite:active{transform:scale(.88)}.card-favorite svg{width:17px;height:17px;color:#ffffffd9;transition:color var(--transition-fast)}.card-favorite.active svg{color:var(--candy-red)}.card-played-at{display:inline-block;font-size:10px;font-family:var(--font-primary);font-weight:var(--font-bold);color:#ffffffbf;letter-spacing:.5px}.game-player{position:fixed;inset:0;z-index:calc(var(--z-modal) + 10);background:#000;display:flex;flex-direction:column;animation:playerScaleIn .3s cubic-bezier(.34,1.56,.64,1)}@keyframes playerScaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.player-header{position:absolute;top:0;left:0;right:0;height:60px;padding:0 var(--space-md);padding-top:env(safe-area-inset-top,0px);background:linear-gradient(180deg,#0d0d0d,#000);z-index:10;transition:opacity var(--transition-base),transform var(--transition-base)}.player-header.visible{opacity:1;transform:translateY(0)}.player-header.hidden{opacity:0;transform:translateY(-100%);pointer-events:none}.player-header .header-content{display:flex;align-items:center;gap:var(--space-sm);height:100%}.player-title{flex:1;font-size:var(--text-xl);font-weight:var(--font-bold);color:#fff;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.header-actions{display:flex;align-items:center;gap:var(--space-xs);flex-shrink:0}.player-btn{width:36px;height:36px;padding:0;background:var(--on-black-10);border:none;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.player-btn svg{width:20px;height:20px;color:#fff}.player-btn:focus-visible{outline:2px solid white;outline-offset:2px}.player-fav{-webkit-tap-highlight-color:transparent}.player-fav.active{background:var(--on-black-10)}.player-fav.active svg{color:var(--candy-red);fill:var(--candy-red)}.player-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-lg);background:#000;z-index:5;color:#fff;font-size:var(--text-base)}.loading-spinner{width:40px;height:40px;border:3px solid var(--on-black-20);border-top-color:var(--accent-secondary);border-radius:50%;animation:spin 1s linear infinite}.player-iframe{flex:1;width:100%;height:100%;border:none;background:#000;min-height:0}@supports (padding-top: env(safe-area-inset-top)){.player-header{padding-top:env(safe-area-inset-top);height:calc(60px + env(safe-area-inset-top))}}.player-floating-btn{position:absolute;z-index:15;width:44px;height:44px;padding:0;background:#3a3a3a;border:2px solid var(--on-black-25);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transform:translate(-50%,-50%);transition:background .2s;-webkit-tap-highlight-color:transparent;touch-action:none;animation:floatingBtnIn .25s ease-out}.player-floating-btn.dragging{background:#4a4a4a;transition:none}.player-floating-btn-icon{width:32px;height:32px;border-radius:50%;object-fit:cover;pointer-events:none}.player-floating-btn-fallback{font-size:18px;font-weight:700;color:#fff;line-height:1;pointer-events:none}.player-floating-btn:active:not(.dragging){transform:translate(-50%,-50%) scale(.9);background:#4a4a4a}.player-floating-btn:focus-visible{outline:2px solid white;outline-offset:2px}@keyframes floatingBtnIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.player-tutorial{position:absolute;inset:0;z-index:20;background:var(--overlay-darker);display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .3s ease-out}.tutorial-card{background:var(--surface, #ffffff);border-radius:24px;box-shadow:0 5px 0 var(--surface-border),var(--shadow-2xl);padding:28px 24px;max-width:300px;width:100%;text-align:center}.tutorial-btn-preview{width:88px;height:88px;margin:0 auto 16px;background:#3a3a3a;border:2px solid var(--on-black-25);border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden}.tutorial-btn-preview-icon{width:64px;height:64px;border-radius:50%;object-fit:cover}.tutorial-btn-preview-fallback{font-size:36px;font-weight:700;color:#fff}.tutorial-title{font-size:20px;font-weight:800;color:var(--ink, #45315c);margin:0 0 16px}.tutorial-steps{text-align:left;margin-bottom:20px}.tutorial-subtitle{font-size:13px;color:var(--ink-soft, #8d7ba8);line-height:1.5;margin:0 0 16px}.tutorial-steps p{font-size:14px;color:var(--ink, #45315c);line-height:1.6;margin:0 0 8px}.tutorial-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--accent-primary-soft, #6faaff) 0%,var(--accent-primary, #3d8bff) 100%);color:#fff;border:none;border-radius:14px;box-shadow:0 3px 0 var(--accent-primary-deep, #1f5fd6);font-size:16px;font-weight:800;cursor:pointer}.player-header-icon{width:28px;height:28px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0}.search-bar{position:relative;display:flex;align-items:center;width:100%}.search-bar .search-icon{position:absolute;left:var(--space-md);width:20px;height:20px;color:var(--on-card-muted);pointer-events:none;z-index:1}.search-input{width:100%;padding-left:calc(var(--space-md) + 20px + var(--space-sm));padding-right:calc(var(--space-md) + 24px + var(--space-sm));height:48px;font-size:var(--text-base)}.search-input:focus+.search-icon,.search-input:not(:placeholder-shown)+.search-icon{color:var(--accent-primary)}.search-clear{position:absolute;right:var(--space-sm);width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-full);cursor:pointer;color:var(--on-card-muted);transition:all var(--transition-fast)}.search-clear:active{background:var(--card-shade-10)}.search-clear .clear-icon{width:18px;height:18px}.search-input:focus-visible{outline:none}.search-bar:has(.search-input:focus-visible){outline:3px solid var(--accent-primary);outline-offset:2px;border-radius:var(--radius-full)}.category-filter{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.category-filter::-webkit-scrollbar{display:none}.category-chips{display:flex;gap:var(--space-sm);padding:var(--space-xs) 0 6px;min-width:max-content}.category-chip{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);background:var(--surface);border:none;border-radius:var(--radius-full);font-family:var(--font-primary);font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--ink-soft);cursor:pointer;white-space:nowrap;box-shadow:0 3px 0 var(--surface-edge),var(--shadow-sm);transition:all var(--transition-fast);touch-action:manipulation;-webkit-tap-highlight-color:transparent}.category-chip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--surface-edge)}.category-chip.active{background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);color:#fff;box-shadow:0 3px 0 var(--accent-primary-deep),var(--glow-primary)}.category-chip:focus-visible{outline:3px solid var(--candy-blue);outline-offset:2px}.chip-icon{font-size:var(--text-base);line-height:1}.chip-label{line-height:1}.chip-count{background:var(--card-shade-10);padding:2px 6px;border-radius:var(--radius-full);font-size:var(--text-xs);font-family:var(--font-primary);font-weight:var(--font-bold);min-width:20px;text-align:center}.category-chip.active .chip-count{background:#ffffff40;color:#fff}.player-filter{display:flex;align-items:center;gap:var(--space-md)}.filter-label{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--ink-soft);white-space:nowrap}.player-buttons{display:flex;gap:var(--space-xs)}.player-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);width:44px;height:36px;background:var(--surface);border:none;border-radius:var(--radius-full);font-family:var(--font-primary);font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--ink-soft);cursor:pointer;box-shadow:0 3px 0 var(--surface-border),var(--shadow-sm);transition:all var(--transition-fast);touch-action:manipulation;-webkit-tap-highlight-color:transparent}.player-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--surface-border)}.player-btn.active{background:var(--candy-teal);box-shadow:0 3px 0 var(--candy-teal-deep),var(--shadow-sm);color:#fff}.player-btn:focus-visible{outline:3px solid var(--candy-blue);outline-offset:2px}.player-icon{width:16px;height:16px;display:none}.player-count{line-height:1}@media(min-width:400px){.player-btn{width:auto;padding:var(--space-sm) var(--space-md)}.player-icon{display:block}}.floating-button{position:fixed;z-index:var(--z-modal);background:var(--accent-primary);border:none;border-radius:var(--radius-full);cursor:grab;transition:transform var(--transition-fast),background var(--transition-base);touch-action:none;-webkit-tap-highlight-color:transparent;animation:floatBounce .2s ease-out;display:flex;align-items:center;justify-content:center;padding:0}@keyframes floatBounce{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.floating-button:active,.floating-button.dragging{cursor:grabbing;transform:scale(1.15);background:var(--accent-primary-deep)}.floating-icon{width:18px;height:18px;color:#fff}.floating-button.edge-left{border-top-left-radius:0;border-bottom-left-radius:0}.floating-button.edge-right{border-top-right-radius:0;border-bottom-right-radius:0}.floating-button.edge-top{border-top-left-radius:0;border-top-right-radius:0}.floating-button.edge-bottom{border-bottom-left-radius:0;border-bottom-right-radius:0}.floating-button:not(.dragging):after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:1px solid var(--accent-primary-deep);opacity:0;animation:floatPulse 3s infinite}@keyframes floatPulse{0%,to{transform:scale(1);opacity:0}50%{transform:scale(1.15);opacity:1}}.floating-button:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}.achievement-toast{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%);z-index:var(--z-toast);display:flex;align-items:center;gap:var(--space-md);width:calc(100% - 24px);max-width:380px;padding:var(--space-md) var(--space-lg);background:var(--surface);border:none;border-radius:var(--radius-lg);box-shadow:0 4px 0 var(--accent-lime-deep),var(--shadow-xl),var(--glow-secondary);cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;animation:toastSlideDown .35s var(--ease-out)}@keyframes toastSlideDown{0%{transform:translate(-50%) translateY(-120%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.toast-icon{font-size:28px;line-height:1;flex-shrink:0}.toast-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.toast-label{font-size:var(--text-xs);font-weight:var(--font-bold);text-transform:uppercase;letter-spacing:1px;color:var(--accent-lime)}.toast-title{font-size:var(--text-base);font-weight:var(--font-bold);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toast-points{flex-shrink:0;font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--accent-secondary)}.skeleton-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap)}@media(min-width:568px){.skeleton-grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:768px){.skeleton-grid{grid-template-columns:repeat(4,1fr)}}.skeleton-game-card{background:var(--card-shade-8);border-radius:var(--radius-xl);padding:var(--space-md);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md)}.skeleton-game-card.small{width:var(--card-size-small);height:var(--card-size-small);flex-shrink:0}.skeleton-icon{width:48px;height:48px;border-radius:var(--radius-xl)}.skeleton-game-card.small .skeleton-icon{width:32px;height:32px}.skeleton-content{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-xs)}.skeleton-text{height:14px;width:80%}.skeleton-text.short{width:50%}.skeleton-text.wide{width:100%}.skeleton-text.long{width:90%}.skeleton-circle{border-radius:var(--radius-full)}.skeleton-circle.small{width:24px;height:24px}.skeleton-circle.medium{width:48px;height:48px}.skeleton-circle.large{width:72px;height:72px}.skeleton-bar{height:8px;width:100%;border-radius:var(--radius-full)}.skeleton-stat-card{background:var(--card-shade-8);border-radius:var(--radius-lg);padding:var(--space-lg);display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.skeleton-profile{background:var(--card-shade-8);border-radius:var(--radius-xl);padding:var(--space-xl);display:flex;align-items:center;gap:var(--space-lg)}.skeleton-profile-info{flex:1;display:flex;flex-direction:column;gap:var(--space-sm)}.skeleton-achievement{background:var(--card-shade-8);border-radius:var(--radius-lg);padding:var(--space-md);display:flex;align-items:flex-start;gap:var(--space-md)}.skeleton-achievement-content{flex:1;display:flex;flex-direction:column;gap:var(--space-xs)}.loading-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-xl)}.loading-spinner{border:4px solid var(--card-shade-15);border-top-color:var(--accent-secondary);border-radius:50%;animation:spin 1s linear infinite}.loading-spinner-container.small .loading-spinner{width:24px;height:24px;border-width:2px}.loading-spinner-container.medium .loading-spinner{width:40px;height:40px;border-width:3px}.loading-spinner-container.large .loading-spinner{width:56px;height:56px;border-width:4px}.loading-text{font-size:var(--text-sm);color:var(--text-secondary)}@keyframes spin{to{transform:rotate(360deg)}}.games-tab{padding-bottom:var(--space-2xl)}.games-tab .section{margin-bottom:var(--space-md)}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.section-title{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--text-primary);margin:0}.hero-card{position:relative;display:block;width:100%;height:120px;padding:0;border:none;border-radius:var(--radius-xl);overflow:hidden;cursor:pointer;box-shadow:0 5px 0 var(--accent-primary-deep),var(--shadow-lg);transition:transform var(--transition-fast) var(--ease-out),box-shadow var(--transition-fast) var(--ease-out);-webkit-tap-highlight-color:transparent;text-align:left}.hero-card:active{transform:translateY(3px);box-shadow:0 2px 0 var(--accent-primary-deep),var(--shadow-md)}.hero-bg{position:absolute;inset:0}.hero-bg-img{width:100%;height:100%;object-fit:cover;filter:blur(14px) saturate(1.3) brightness(.75);transform:scale(1.25)}span.hero-bg-img-emoji{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:90px;filter:blur(10px) brightness(.8);background:var(--surface-soft)}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#090c1bd9,#090c1b8c 55%,#3d8bff40)}.hero-content{position:relative;z-index:1;height:100%;display:flex;align-items:center;gap:var(--space-md);padding:0 var(--space-lg)}.hero-icon{width:72px;height:72px;border-radius:var(--radius-lg);overflow:hidden;flex-shrink:0;box-shadow:var(--shadow-md);background:var(--surface-soft)}.hero-icon-img{width:100%;height:100%;object-fit:cover}span.hero-icon-img-emoji{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:40px}.hero-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.hero-label{font-size:var(--text-xs);font-weight:var(--font-bold);text-transform:uppercase;letter-spacing:1.5px;color:var(--accent-secondary)}.hero-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;color:#fff;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-play{width:52px;height:52px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);box-shadow:0 3px 0 var(--accent-primary-deep),var(--glow-primary)}.hero-play svg{width:26px;height:26px;color:#fff;margin-left:3px}.recent-section{margin-left:calc(-1 * var(--container-padding));margin-right:calc(-1 * var(--container-padding))}.recent-row{display:flex;gap:var(--space-md);overflow-x:auto;padding:var(--space-xs) var(--container-padding) var(--space-sm);scrollbar-width:none;-ms-overflow-style:none}.recent-row::-webkit-scrollbar{display:none}.recent-item{display:flex;flex-direction:column;align-items:center;gap:5px;width:64px;flex-shrink:0;padding:0;background:transparent;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.recent-item:active .recent-icon{transform:scale(.92)}.recent-icon{width:58px;height:58px;border-radius:var(--radius-full);overflow:hidden;border:2px solid var(--surface-border);box-shadow:var(--shadow-sm);background:var(--surface);transition:transform var(--transition-fast) var(--ease-out);display:block}.recent-icon-img{width:100%;height:100%;object-fit:cover}span.recent-icon-img-emoji{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:28px}.recent-name{max-width:64px;font-size:10px;font-weight:var(--font-semibold);color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-section{margin-bottom:var(--space-sm)}.search-row{display:flex;gap:var(--space-sm);align-items:center}.search-row .search-bar{flex:1}.fav-toggle{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--surface);border:2px solid var(--surface-border);border-radius:var(--radius-full);box-shadow:0 3px 0 var(--surface-edge),var(--shadow-sm);cursor:pointer;transition:all var(--transition-fast);color:var(--candy-red);-webkit-tap-highlight-color:transparent}.fav-toggle svg{width:22px;height:22px}.fav-toggle:active{transform:translateY(2px);box-shadow:0 1px 0 var(--surface-edge)}.fav-toggle.active{background:linear-gradient(135deg,#ff8a9e 0%,var(--candy-red) 100%);border-color:transparent;box-shadow:0 3px 0 var(--candy-pink-deep),var(--shadow-sm);color:#fff}.category-section{margin-left:calc(-1 * var(--container-padding));margin-right:calc(-1 * var(--container-padding))}.category-section .category-filter{padding-left:var(--container-padding);padding-right:var(--container-padding)}.games-count{font-family:var(--font-primary);font-weight:var(--font-semibold);font-size:var(--text-sm);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-md)}.clear-filters{font-family:var(--font-primary);font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--accent-primary);background:transparent;border:none;cursor:pointer;text-decoration:underline;padding:0}.empty-icon{font-size:48px;margin-bottom:var(--space-md);filter:saturate(.4)}.empty-title{font-size:var(--text-lg);font-weight:var(--font-semibold);margin:0 0 var(--space-md)}.empty-action{margin-top:var(--space-md)}.stats-cta-section{margin-top:var(--space-xl)}.stats-cta{width:100%;display:flex;align-items:center;gap:var(--space-md);padding:var(--space-lg);background:var(--surface);border:none;border-radius:var(--radius-lg);box-shadow:0 4px 0 var(--surface-edge),var(--shadow-card);cursor:pointer;transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent;text-align:left}.stats-cta:active{transform:translateY(2px);box-shadow:0 1px 0 var(--surface-edge),var(--shadow-sm)}.stats-cta-icon{font-size:26px;line-height:1}.stats-cta-label{flex:1;font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--ink)}.stats-cta-arrow{width:22px;height:22px;color:var(--ink-faint);flex-shrink:0}@media(min-width:568px){.games-grid{grid-template-columns:repeat(3,1fr)}.hero-card{height:140px}}.favorites-tab{padding-bottom:var(--space-2xl)}.favorites-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl)}.favorites-header .section-title{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary);margin:0}.favorites-count{font-family:var(--font-primary);font-size:var(--text-sm);color:#fff;background:var(--accent-primary);padding:2px 10px;border-radius:var(--radius-full);font-weight:var(--font-bold)}.favorites-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap)}.favorites-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;text-align:center;padding:var(--space-2xl)}.empty-heart{width:80px;height:80px;color:var(--candy-pink);margin-bottom:var(--space-xl)}.favorites-empty .empty-title{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary);margin:0 0 var(--space-sm)}.favorites-empty .empty-description{font-size:var(--text-sm);color:var(--text-secondary);margin:0;max-width:250px;line-height:var(--leading-relaxed)}@media(min-width:568px){.favorites-grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:768px){.favorites-grid{grid-template-columns:repeat(4,1fr)}}.achievement-card{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-md) var(--space-md) var(--space-lg);padding-top:calc(var(--space-md) + 4px);background:var(--surface);border-radius:var(--radius-lg);position:relative;overflow:visible;transition:all var(--transition-base);box-shadow:0 4px 0 var(--surface-border),var(--shadow-sm)}.achievement-card.locked{filter:saturate(.45) opacity(.75)}.badge-wrapper{width:88px;min-width:88px;height:74px;display:flex;align-items:center;justify-content:center;overflow:visible;flex-shrink:0}.achievement-badge{position:relative;top:0;width:46px;height:71px;border-radius:7px;background:linear-gradient(to bottom right,var(--badge-from) 0%,var(--badge-to) 100%);display:inline-block;flex-shrink:0;transition:top var(--transition-fast)}.achievement-badge:before,.achievement-badge:after{content:"";position:absolute;width:100%;height:100%;border-radius:inherit;background:inherit;inset:0;margin:auto}.achievement-badge:before{transform:rotate(60deg)}.achievement-badge:after{transform:rotate(-60deg)}.badge-circle{position:absolute;width:38px;height:38px;background:#fff;border-radius:50%;inset:0;margin:auto;z-index:10;display:flex;align-items:center;justify-content:center}.badge-emoji{font-size:18px;line-height:1}.badge-lock-icon{width:16px;height:16px;color:#888}.badge-ribbon{position:absolute;bottom:7px;left:50%;transform:translate(-50%);width:78px;background:linear-gradient(to bottom right,#6a5590,#4b3a6e);border-radius:3px;padding:2px 5px;z-index:11;color:#fff;font-size:8px;font-weight:var(--font-bold);font-family:var(--font-primary);text-transform:uppercase;letter-spacing:.3px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.achievement-content{flex:1;min-width:0}.achievement-title{font-size:var(--text-base);font-weight:var(--font-bold);color:var(--on-card-primary);margin:0 0 3px;line-height:var(--leading-tight)}.achievement-description{font-size:var(--text-sm);color:var(--on-card-muted);margin:0 0 var(--space-sm);line-height:var(--leading-normal);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.achievement-rarity-tag{position:absolute;top:var(--space-xs);right:var(--space-sm);font-size:10px;font-weight:var(--font-bold);text-transform:uppercase;letter-spacing:.5px;background:var(--candy-purple);color:#fff!important;padding:2px 8px;border-radius:var(--radius-full)}.achievement-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}.achievement-points{font-family:var(--font-primary);font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--ink);white-space:nowrap;background:var(--card-shade-10);padding:2px 8px;border-radius:var(--radius-full)}.achievement-points.earned{color:var(--candy-green-deep);background:var(--accent-green-light)}:root[data-theme=dark] .achievement-points.earned{color:var(--candy-green)}.achievement-progress{font-family:var(--font-primary);font-weight:var(--font-bold);font-size:var(--text-xs);color:var(--on-card-secondary);background:var(--card-shade-15);padding:1px 6px;border-radius:var(--radius-full);white-space:nowrap}.stats-tab{padding-bottom:var(--space-2xl)}.achievements-section{margin-top:var(--space-md)}.achievements-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.achievements-header .section-title{font-size:var(--text-lg);color:var(--text-primary);margin:0}.achievements-progress{font-family:var(--font-primary);font-weight:var(--font-bold);font-size:var(--text-sm);color:var(--ink-soft);background:var(--surface);border:2px solid var(--surface-border);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full)}.achievements-progress-bar{height:14px;background:var(--surface);border:2px solid var(--surface-border);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-md);position:relative}.achievements-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-lime),var(--accent-secondary));border-radius:var(--radius-full);transition:width var(--transition-medium);min-width:2px}.achievements-progress-text{position:absolute;right:var(--space-sm);top:50%;transform:translateY(-50%);font-family:var(--font-primary);font-size:9px;font-weight:var(--font-bold);color:var(--ink)}.category-tabs{--offset-size: var(--space-xl);--offset: calc(var(--offset-size) * -1);display:flex;gap:var(--space-sm);overflow-x:auto;padding-bottom:var(--space-md);margin-bottom:var(--space-md);margin-left:var(--offset);margin-right:var(--offset);padding-left:var(--offset-size);padding-right:var(--offset-size);scrollbar-width:none}.category-tabs::-webkit-scrollbar{display:none}.category-tab{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:var(--surface);border:none;border-radius:var(--radius-full);font-family:var(--font-primary);font-size:var(--text-base);font-weight:var(--font-bold);color:var(--ink-soft);cursor:pointer;white-space:nowrap;box-shadow:0 3px 0 var(--surface-border),var(--shadow-sm);transition:all var(--transition-fast)}.category-tab:active{transform:translateY(2px);box-shadow:0 1px 0 var(--surface-border)}.category-tab.active{background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);color:#fff;box-shadow:0 3px 0 var(--accent-primary-deep),var(--glow-primary)}.achievements-list{display:flex;flex-direction:column;gap:var(--space-md)}@media(min-width:568px){.achievements-list{display:grid;grid-template-columns:repeat(2,1fr)}}.empty-achievements{text-align:center;padding:var(--space-xl);color:var(--text-secondary)}.install-banner{position:fixed;bottom:12px;left:50%;transform:translate(-50%);z-index:var(--z-sticky);width:calc(100% - 20px);max-width:400px;background:var(--surface);border-radius:var(--radius-lg);box-shadow:0 4px 0 var(--surface-border),var(--shadow-lg);padding:var(--space-md);display:flex;align-items:center;gap:var(--space-sm);animation:bannerSlideUp .3s ease-out}[data-game-active] .install-banner{display:none}@keyframes bannerSlideUp{0%{transform:translate(-50%) translateY(100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.install-banner-icon{font-size:24px;flex-shrink:0}.install-banner-text{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--ink);margin:0;flex:1;line-height:1.2}.install-banner-btn{padding:var(--space-sm) var(--space-md);border:none;border-radius:var(--radius-xl);font-family:var(--font-primary);font-size:var(--text-sm);font-weight:var(--font-bold);cursor:pointer;flex-shrink:0}.install-banner-btn.primary{background:linear-gradient(135deg,var(--accent-primary-soft) 0%,var(--accent-primary) 100%);color:#fff;box-shadow:0 3px 0 var(--accent-primary-deep)}.install-banner-btn.primary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-primary-deep)}.install-banner-btn.close{background:transparent;color:var(--on-card-secondary);font-size:var(--text-lg);padding:var(--space-xs)}.install-mini-banner{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-lg);margin-bottom:var(--space-xl);background:linear-gradient(135deg,var(--candy-yellow),var(--candy-orange));color:#5c3a12;border-radius:var(--radius-lg);cursor:pointer;font-family:var(--font-primary);font-weight:var(--font-bold);font-size:var(--text-base);border-bottom:3px solid #e08a3c;transition:transform var(--transition-fast)}.install-mini-banner:active{transform:translateY(3px);border-bottom-width:0}.install-mini-text{flex:1;line-height:1.1}.install-mini-arrow{font-size:24px;color:#5c3a12}.install-modal-overlay{position:fixed;inset:0;background:var(--overlay-dark);display:flex;align-items:center;justify-content:center;padding:var(--space-xl);z-index:calc(var(--z-modal) + 50);animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.install-modal{background:var(--surface);border-radius:var(--radius-xl);box-shadow:0 5px 0 var(--surface-border),var(--shadow-2xl);padding:var(--space-2xl) var(--space-xl);max-width:340px;width:100%;text-align:center;animation:modalPop .25s ease-out}@keyframes modalPop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.install-modal-icon{font-size:48px;margin-bottom:var(--space-md)}.install-modal-title{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--on-card-primary);margin:0 0 var(--space-lg)}.install-modal-btn{display:block;width:100%;padding:var(--space-lg);background:linear-gradient(135deg,var(--accent-primary-soft) 0%,var(--accent-primary) 100%);color:#fff;border:none;border-radius:var(--radius-lg);font-family:var(--font-primary);font-size:var(--text-lg);font-weight:var(--font-bold);cursor:pointer;border-bottom:3px solid var(--accent-primary-deep);margin-bottom:var(--space-md)}.install-modal-btn:active{transform:translateY(3px);border-bottom-width:0}.install-modal-overlay.closing{animation:fadeOut .2s ease-in forwards}.install-modal-overlay.closing .install-modal{animation:modalPopOut .2s ease-in forwards}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes modalPopOut{0%{transform:scale(1);opacity:1}to{transform:scale(.9);opacity:0}}.install-modal-ok{display:block;width:100%;padding:var(--space-md);background:var(--btn-bg, #d9bc93);color:var(--on-card-primary, #2d1a0e);border:none;border-radius:var(--radius-xl);font-family:var(--font-primary);font-size:var(--text-base);font-weight:var(--font-bold);cursor:pointer}.install-steps{text-align:left;list-style:none;counter-reset:step;margin-bottom:var(--space-lg)}.install-step-item{counter-increment:step;padding:var(--space-sm) 0;font-size:var(--text-sm);color:var(--on-card-primary);line-height:var(--leading-relaxed);display:flex;gap:var(--space-sm)}.install-step-item:before{content:counter(step) ".";font-weight:var(--font-bold);color:var(--accent-primary);flex-shrink:0;min-width:20px}.install-hint{font-size:var(--text-sm);color:var(--on-card-secondary);margin-bottom:var(--space-lg)}@supports (padding-bottom: env(safe-area-inset-bottom)){.install-banner{bottom:calc(12px + env(safe-area-inset-bottom))}}.settings-tab{padding-bottom:var(--space-2xl)}.settings-title{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--text-primary);margin:0 0 var(--space-xl)}.settings-section{background:var(--surface);border-radius:var(--radius-xl);box-shadow:0 4px 0 var(--surface-border),var(--shadow-card);padding:var(--space-lg);margin-bottom:var(--space-lg);position:relative}.settings-link{width:100%;display:flex;align-items:center;gap:var(--space-md);padding:var(--space-lg);margin-bottom:var(--space-lg);background:var(--surface);border:none;border-radius:var(--radius-xl);box-shadow:0 4px 0 var(--surface-border),var(--shadow-card);cursor:pointer;transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent;text-align:left}.settings-link:active{transform:translateY(2px);box-shadow:0 1px 0 var(--surface-border),var(--shadow-sm)}.settings-link-icon{font-size:22px;line-height:1}.settings-link-label{flex:1;font-size:var(--text-base);font-weight:var(--font-bold);color:var(--on-card-primary)}.settings-link-arrow{width:20px;height:20px;color:var(--on-card-faint);flex-shrink:0}.section-label{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--on-card-primary);text-transform:uppercase;letter-spacing:.5px;margin:0 0 var(--space-md)}.theme-options{display:flex;gap:var(--space-sm)}.theme-option{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:var(--space-md);background:var(--btn-bg);border:none;border-radius:var(--radius-lg);font-family:var(--font-primary);cursor:pointer;box-shadow:0 3px 0 var(--surface-border);transition:all var(--transition-fast)}.theme-option:active{transform:translateY(2px);box-shadow:0 1px 0 var(--surface-border)}.theme-option.active{background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);box-shadow:0 3px 0 var(--accent-primary-deep)}.theme-option.active .option-label{color:#fff}.option-icon{font-size:24px}.option-label{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--on-card-primary)}.lang-dropdown{position:relative}.lang-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);background:var(--btn-bg);border:2px solid transparent;border-radius:var(--radius-lg);font-family:var(--font-primary);font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--on-card-primary);cursor:pointer;transition:all var(--transition-fast)}.lang-trigger.open{border-color:var(--accent-primary);border-bottom-left-radius:0;border-bottom-right-radius:0}.lang-arrow{width:20px;height:20px;transition:transform var(--transition-fast);color:var(--on-card-secondary)}.lang-trigger.open .lang-arrow{transform:rotate(180deg)}.lang-menu{position:absolute;top:100%;left:0;right:0;background:var(--btn-bg);border:2px solid var(--accent-primary);border-top:none;border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);max-height:240px;overflow-y:auto;z-index:var(--z-dropdown);animation:dropdownSlide .15s ease-out}@keyframes dropdownSlide{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.lang-menu::-webkit-scrollbar{width:4px}.lang-menu::-webkit-scrollbar-track{background:transparent}.lang-menu::-webkit-scrollbar-thumb{background:var(--card-shade-20);border-radius:var(--radius-full)}.lang-option{width:100%;display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:transparent;border:none;border-bottom:1px solid var(--card-shade-5);font-family:var(--font-primary);font-size:var(--text-sm);color:var(--on-card-primary);cursor:pointer;transition:background var(--transition-fast);text-align:left}.lang-option:last-child{border-bottom:none}.lang-option.active{background:var(--pastel-lavender);font-weight:var(--font-bold)}.lang-native{font-weight:var(--font-semibold);flex-shrink:0}.lang-english{color:var(--on-card-faint);font-size:var(--text-xs);margin-left:auto}.lang-check{width:16px;height:16px;color:var(--accent-green);flex-shrink:0;margin-left:var(--space-xs)}.settings-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}.settings-stat-card{background:var(--btn-bg);border:none;border-radius:var(--radius-lg);box-shadow:0 3px 0 var(--surface-border);padding:var(--space-md);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-xs)}.settings-stat-card .stat-icon{font-size:20px}.settings-stat-card .stat-value{font-family:var(--font-primary);font-size:var(--text-lg);font-weight:900;color:var(--on-card-primary)}.settings-stat-card .stat-label{font-size:var(--text-xs);color:var(--on-card-secondary);text-transform:uppercase;letter-spacing:.5px;font-weight:600}.settings-stat-card.streak{background:linear-gradient(135deg,var(--candy-yellow),var(--candy-orange));box-shadow:0 3px #e08a3c}.settings-stat-card.streak .stat-value,.settings-stat-card.streak .stat-label{color:#fff}.install-app-btn{width:100%;padding:var(--space-lg);background:linear-gradient(135deg,var(--accent-primary-soft) 0%,var(--accent-primary) 100%);color:#fff;border:none;border-radius:var(--radius-lg);font-family:var(--font-primary);font-size:var(--text-lg);font-weight:var(--font-bold);cursor:pointer;box-shadow:0 4px 0 var(--accent-primary-deep),var(--shadow-md);transition:all var(--transition-fast)}.install-app-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-primary-deep)}.install-tutorial{display:flex;flex-direction:column;gap:var(--space-sm)}.install-step{font-size:var(--text-sm);color:var(--on-card-primary);margin:0;line-height:var(--leading-relaxed)}.about-section{text-align:center}.about-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.app-logo{font-size:48px;margin-bottom:var(--space-sm)}.app-name{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--on-card-primary);margin:0}.app-version{font-family:var(--font-primary);font-weight:var(--font-semibold);font-size:var(--text-sm);color:var(--on-card-secondary);margin:0}.app-description{font-size:var(--text-sm);color:var(--on-card-faint);margin:0}.confirm-overlay{position:fixed;inset:0;background:var(--overlay-dark);display:flex;align-items:center;justify-content:center;padding:var(--space-xl);z-index:var(--z-modal);animation:fadeIn var(--transition-fast) ease-out}.confirm-dialog{background:var(--surface);border-radius:var(--radius-xl);box-shadow:0 5px 0 var(--surface-border),var(--shadow-2xl);padding:var(--space-xl);max-width:320px;width:100%;text-align:center;animation:scaleIn var(--transition-base) var(--ease-out)}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.confirm-title{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--on-card-primary);margin:0 0 var(--space-md)}.confirm-message{font-size:var(--text-sm);color:var(--on-card-secondary);margin:0 0 var(--space-xl);line-height:var(--leading-relaxed)}.confirm-actions{display:flex;gap:var(--space-md)}.confirm-actions button{flex:1;padding:var(--space-md);border:none;border-radius:var(--radius-xl);font-family:var(--font-primary);font-size:var(--text-sm);font-weight:var(--font-bold);cursor:pointer;transition:all var(--transition-fast)}.confirm-actions .btn-secondary{color:var(--on-card-primary)}.confirm-actions .btn-primary{color:#fff}.confirm-actions .btn-primary.danger{background:var(--candy-red);color:#fff;box-shadow:0 3px #d84a66}.timber-canvas.app-loading{opacity:0}.timber-canvas.app-ready{opacity:1;animation:appFadeIn .4s ease-out}@keyframes appFadeIn{0%{opacity:0}to{opacity:1}}.timber-canvas{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.tab-content{padding:var(--container-padding);padding-top:var(--space-xl);padding-bottom:var(--space-2xl)}.section{margin-bottom:var(--space-xl)}.games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap)}.empty-state{text-align:center;padding:var(--space-3xl) var(--space-xl);color:var(--text-primary)}.empty-state p{margin:0}@media(max-width:390px){.games-grid{gap:var(--space-md)}}@media(min-width:400px){.games-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:568px){.games-grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:768px){.games-grid{grid-template-columns:repeat(4,1fr)}}