:root{--color-primary: #002244;--color-primary-dark: #001632;--color-primary-blue: #0065BD;--color-accent: #0065BD;--color-secondary: #0066B2;--color-secondary-dark: #004A82;--color-highlight: #00ADE5;--color-cyan: #65CFE9;--color-lime: #C9DD03;--color-beige: #E1D8B7;--color-text: #0a1929;--color-text-muted: #4a6580;--color-bg: #EDF4FA;--color-warning: #E85D4A;--color-white: #FFFFFF;--color-card-bg: #FFFFFF;--color-overlay: rgba(0, 17, 34, .72);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-xl: 28px;--shadow-sm: 0 2px 8px rgba(0, 34, 68, .07);--shadow-md: 0 4px 16px rgba(0, 34, 68, .1);--shadow-lg: 0 8px 32px rgba(0, 34, 68, .14);--shadow-card: 0 2px 8px rgba(0, 17, 34, .1), 0 4px 16px rgba(0, 34, 68, .08);--shadow-card-hover: 0 8px 28px rgba(0, 17, 34, .14), 0 6px 20px rgba(0, 34, 68, .12);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-3xl: 64px;--font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--font-size-3xl: 2.5rem;--font-size-4xl: 3.5rem;--font-weight-normal: 400;--font-weight-medium: 600;--font-weight-semibold: 600;--font-weight-bold: 700;--transition-fast: .15s ease;--transition-base: .3s ease;--transition-slow: .5s ease;--transition-flip: .35s cubic-bezier(.22, 1, .36, 1);--z-cards: 1;--z-hud: 10;--z-header: 20;--z-overlay: 50;--z-effects: 100}@keyframes leafFloat{0%{transform:translateY(0) rotate(0);opacity:0}5%{opacity:var(--leaf-opacity, .25)}50%{transform:translateY(-50vh) rotate(180deg) translate(var(--leaf-drift, 30px))}95%{opacity:calc(var(--leaf-opacity, .25) * .6)}to{transform:translateY(-110vh) rotate(360deg) translate(calc(var(--leaf-drift, 30px) * -.67));opacity:0}}@keyframes shake{0%,to{transform:translate(0)}10%{transform:translate(6px)}30%{transform:translate(-6px)}50%{transform:translate(4px)}70%{transform:translate(-4px)}90%{transform:translate(2px)}}@keyframes matchPulse{0%{transform:scale(1)}40%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes timerPulse{0%,to{transform:scale(1);color:var(--color-warning)}50%{transform:scale(1.1);color:var(--color-warning)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fadeOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(40px) scale(.95)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes glow{0%,to{box-shadow:0 0 8px #0243}50%{box-shadow:0 0 20px #00ade573}}@keyframes confettiFall{0%{transform:translateY(-10vh) rotate(0);opacity:1}to{transform:translateY(110vh) rotate(720deg);opacity:0}}@keyframes cardAppear{0%{opacity:0;transform:scale(.8) rotateY(20deg)}to{opacity:1;transform:scale(1) rotateY(0)}}@keyframes countUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes winReveal{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes winStroke{to{stroke-dashoffset:0}}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.screen-start{background:radial-gradient(ellipse at 50% 40%,rgba(0,34,68,.05) 0%,var(--color-bg) 70%)}.start-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--spacing-xl);animation:fadeIn .6s ease-out}.start-title{font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);color:var(--color-primary);letter-spacing:-.02em;margin-bottom:var(--spacing-xs);line-height:1.1}.start-subtitle{font-size:var(--font-size-lg);color:var(--color-text);opacity:.6;max-width:400px;margin-bottom:var(--spacing-xl);line-height:1.5}.start-logo{margin-bottom:var(--spacing-2xl)}.start-logo-img{max-height:56px;width:auto;max-width:60vw;object-fit:contain;opacity:.7;filter:drop-shadow(0 2px 10px rgba(0,34,68,.08))}.start-settings{display:flex;gap:var(--spacing-lg);margin-bottom:var(--spacing-2xl)}.start-setting{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);color:var(--color-text);background:var(--color-white);padding:var(--spacing-sm) var(--spacing-lg);border-radius:50px;border:1.5px solid rgba(0,34,68,.12);box-shadow:var(--shadow-sm)}.setting-icon{display:flex;width:22px;height:22px;color:var(--color-primary)}.setting-icon svg{width:100%;height:100%}.start-btn{font-size:var(--font-size-xl);padding:18px 56px;border-radius:50px;box-shadow:0 4px 24px #00224440;animation:slideUp .4s ease-out .3s both}.start-btn:hover{box-shadow:0 6px 32px #00224459}.screen-game{justify-content:flex-start;padding-top:0;background:var(--color-bg)}.screen-overlay{background:var(--color-overlay);z-index:var(--z-overlay);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.overlay-card{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--spacing-2xl) var(--spacing-3xl);box-shadow:var(--shadow-lg);border-top:4px solid var(--color-primary);display:flex;flex-direction:column;align-items:center;text-align:center;max-width:440px;width:90%;animation:fadeIn .5s ease-out}.overlay-icon{width:80px;height:80px;margin-bottom:var(--spacing-lg)}.overlay-icon svg{width:100%;height:100%}.overlay-title{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-primary);margin-bottom:var(--spacing-sm);letter-spacing:-.02em}.overlay-title--lose{color:var(--color-warning)}.overlay-subtitle{font-size:var(--font-size-base);color:var(--color-text);opacity:.7;margin-bottom:var(--spacing-xl)}.overlay-stats{display:flex;gap:var(--spacing-2xl);margin-bottom:var(--spacing-xl)}.stat-item{display:flex;flex-direction:column;align-items:center}.stat-value{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-primary);line-height:1.2;font-variant-numeric:tabular-nums;animation:countUp .6s ease-out both}.stat-label{font-size:var(--font-size-sm);color:var(--color-text-muted);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;margin-top:var(--spacing-xs)}.overlay-btn{margin-top:var(--spacing-md);border-radius:50px}.screen-win{background:radial-gradient(ellipse at 50% 38%,rgba(0,101,189,.12) 0%,transparent 52%),linear-gradient(165deg,#001632eb,#000b1cf5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.screen-win .overlay-card{border-top:none;border:1px solid rgba(0,34,68,.1);animation:fadeIn .4s cubic-bezier(.16,1,.3,1)}.win-badge{width:72px;height:72px;margin-bottom:var(--spacing-lg)}.win-badge-svg{width:100%;height:100%}.win-badge-bg{fill:none;stroke:var(--color-primary);stroke-width:2.5;opacity:.1}.win-badge-ring{fill:none;stroke:var(--color-primary);stroke-width:2.5;stroke-dasharray:214;stroke-dashoffset:214}.win-card.animate .win-badge-ring{animation:winStroke .7s cubic-bezier(.65,0,.35,1) .12s forwards}.win-badge-check{fill:none;stroke:var(--color-primary);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:42;stroke-dashoffset:42}.win-card.animate .win-badge-check{animation:winStroke .35s cubic-bezier(.65,0,.35,1) .65s forwards}.win-reveal{opacity:0;transform:translateY(18px)}.win-card.animate .win-reveal{animation:winReveal .55s cubic-bezier(.16,1,.3,1) calc(var(--delay) * 1ms) forwards}.win-stats{display:flex;align-items:center;gap:var(--spacing-xl);margin-bottom:var(--spacing-xl);padding:var(--spacing-md) var(--spacing-xl);background:#0022440a;border-radius:var(--radius-md)}.win-stat{display:flex;flex-direction:column;align-items:center;gap:2px}.win-stat-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-primary);line-height:1.2;font-variant-numeric:tabular-nums}.win-stat-label{font-size:var(--font-size-xs);color:var(--color-text-muted);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em}.win-stat-divider{width:1px;height:40px;background:#0022441a}.card{perspective:1000px;cursor:pointer;border-radius:var(--radius-md);animation:cardAppear .4s ease-out both;outline:none;will-change:transform}.card:nth-child(1){animation-delay:0ms}.card:nth-child(2){animation-delay:30ms}.card:nth-child(3){animation-delay:60ms}.card:nth-child(4){animation-delay:90ms}.card:nth-child(5){animation-delay:.12s}.card:nth-child(6){animation-delay:.15s}.card:nth-child(7){animation-delay:.18s}.card:nth-child(8){animation-delay:.21s}.card:nth-child(9){animation-delay:.24s}.card:nth-child(10){animation-delay:.27s}.card:nth-child(11){animation-delay:.3s}.card:nth-child(12){animation-delay:.33s}.card:nth-child(13){animation-delay:.36s}.card:nth-child(14){animation-delay:.39s}.card:nth-child(15){animation-delay:.42s}.card:nth-child(16){animation-delay:.45s}.card:nth-child(17){animation-delay:.48s}.card:nth-child(18){animation-delay:.51s}.card:nth-child(19){animation-delay:.54s}.card:nth-child(20){animation-delay:.57s}.card-inner{position:relative;width:100%;height:100%;transition:transform var(--transition-flip);transform-style:preserve-3d;border-radius:inherit}.card.flipped .card-inner{transform:rotateY(180deg)}.card-front,.card-back{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:inherit;overflow:hidden;display:flex;align-items:center;justify-content:center}.card-back{background:var(--color-white);box-shadow:var(--shadow-card);transition:box-shadow var(--transition-fast)}.card-back img{width:100%;height:100%;object-fit:cover}.card:not(.flipped):not(.matched):hover .card-back{box-shadow:var(--shadow-card-hover);transition:box-shadow var(--transition-fast)}.card:not(.flipped):not(.matched):active .card-back{box-shadow:var(--shadow-card)}.card:not(.flipped):not(.matched):focus-visible .card-back{box-shadow:0 0 0 3px var(--color-highlight),var(--shadow-card-hover)}.card-front{background:var(--color-white);box-shadow:var(--shadow-card);transform:rotateY(180deg);transition:box-shadow var(--transition-fast)}.card-front img{width:100%;height:100%;object-fit:cover}.card.matched .card-inner{transform:rotateY(180deg)}.card.matched .card-front{box-shadow:0 0 12px #00ade559,var(--shadow-card);animation:glow 2s ease-in-out infinite}.card.mismatch .card-front{box-shadow:0 0 0 2px #e85d4a59,0 0 14px #e85d4a40,var(--shadow-card)}.game-grid{display:grid;justify-content:center;align-content:center;width:100%;flex:1;padding:var(--spacing-md);gap:var(--spacing-sm)}.hud{display:flex;align-items:center;justify-content:center;width:100%;padding:var(--spacing-sm) var(--spacing-lg);z-index:var(--z-hud);flex-shrink:0;background:#ffffffe0;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,34,68,.08)}.hud-section{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xs) var(--spacing-lg);transition:all var(--transition-base)}.hud-logo{padding:var(--spacing-xs) var(--spacing-md)}.hud-logo-img{max-height:40px;width:auto;max-width:30vw;object-fit:contain}.hud-divider{width:1px;height:36px;background:#0022441a;flex-shrink:0}.hud-label{font-size:var(--font-size-xs);color:var(--color-text-muted);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;line-height:1;margin-bottom:2px}.hud-value{font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums;color:var(--color-text);font-size:var(--font-size-base);line-height:1.2}.timer-value{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-primary);min-width:4ch;transition:color var(--transition-base)}.hud-section.timer-warning{animation:timerPulse 1s ease-in-out infinite;background:#e85d4a0f;border-radius:var(--radius-sm)}.hud-section.timer-warning .timer-value,.hud-section.timer-warning .hud-label{color:var(--color-warning)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}html,body{height:100%;overflow:hidden}body{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text);background:var(--color-bg);line-height:1.5;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}#app{width:100%;height:100%;position:relative;overflow:hidden}::selection{background:var(--color-primary);color:var(--color-white)}img{display:block;max-width:100%}button{font-family:inherit;cursor:pointer;border:none;outline:none}button:focus-visible{outline:3px solid var(--color-highlight);outline-offset:2px}.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--font-weight-semibold);border-radius:50px;transition:all var(--transition-fast);letter-spacing:.01em}.btn-primary{background:linear-gradient(135deg,var(--color-primary-blue),var(--color-secondary));color:var(--color-white);font-size:var(--font-size-lg);padding:16px 48px;box-shadow:0 4px 16px #00224440}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px #00224459}.btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px #00224440}.header{position:fixed;top:0;left:0;right:0;z-index:var(--z-header);background:#ffffffe0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,34,68,.08)}.header-inner{max-width:1400px;margin:0 auto;padding:10px var(--spacing-lg);display:flex;align-items:center}.header-logo{max-height:36px;width:auto;max-width:50vw;object-fit:contain}.particles-container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}