.memory-page,.memory-page *{margin:0;padding:0;box-sizing:border-box}.memory-page{--bg-primary: transparent;--bg-secondary: #ffffff;--bg-tertiary: #e8eef3;--blue-primary: #2AABEE;--blue-dark: #229ED9;--blue-light: #e3f4fc;--text-primary: #1a2b3c;--text-secondary: #5f7d95;--text-muted: #8fa3b3;--success: #34C759;--error: #FF3B30;--warning: #FF9500;--card-bg: #ffffff;--card-hidden: linear-gradient(145deg, #fff1d6 0%, #ffd38f 55%, #ffb464 100%);--card-hidden-border: rgba(255, 163, 74, .6);--card-hidden-border-strong: rgba(255, 138, 61, .95);--card-hidden-glow: rgba(255, 179, 94, .35);--card-hidden-glow-strong: rgba(255, 140, 60, .45);--card-target: linear-gradient(145deg, #dffcf2 0%, #aaf0df 55%, #6dd7c0 100%);--card-target-border: rgba(71, 186, 162, .65);--card-target-border-strong: rgba(47, 166, 143, .95);--card-target-glow: rgba(107, 220, 196, .35);--card-target-glow-strong: rgba(47, 166, 143, .45);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .06);--shadow-md: 0 4px 16px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--radius: 12px;--radius-lg: 16px;--board-size: min(320px, 46vh);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100%;width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;margin-top:0;padding:0}.memory-page .hidden:not(.card){display:none!important}.memory-card{width:100%;max-width:1120px;background:#fff;border-radius:24px;border:1px solid rgba(0,0,0,.04);box-shadow:0 8px 32px #00000014;padding:clamp(16px,2.6vw,24px);display:grid;gap:16px;margin-top:0}.memory-layout{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:22px;align-items:start}.memory-left{min-width:0}.game-container{width:100%;max-width:var(--board-size);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"stats stats" "name name" "timer ready" "board board";gap:clamp(8px,1.6vw,16px);animation:fadeIn .4s ease-out;padding-top:0;padding-bottom:clamp(8px,1.4vh,12px);min-width:0;margin:0 auto;align-items:start}.game-container.is-start{grid-template-areas:"stats stats" "name name" "ready ready" "board board"}.game-container.is-start .ready-btn{justify-self:center}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.game-header{display:flex;align-items:center;justify-content:space-between;padding:0}.back-btn{width:clamp(36px,10vw,44px);height:clamp(36px,10vw,44px);display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border-radius:50%;color:var(--text-secondary);text-decoration:none;transition:all .2s ease;box-shadow:var(--shadow-sm);flex-shrink:0}.back-btn svg{width:clamp(16px,4vw,20px);height:clamp(16px,4vw,20px)}.back-btn:hover{background:var(--blue-primary);color:#fff;transform:scale(1.05)}.game-title{font-size:clamp(1rem,4.5vw,1.35rem);font-weight:700;color:var(--text-primary);text-align:center}.header-spacer{width:clamp(36px,10vw,44px);flex-shrink:0}.stats-bar{grid-area:stats;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;background:var(--bg-secondary);padding:8px 12px;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);width:100%}.stat-item{display:flex;align-items:center;gap:clamp(6px,1.5vw,10px)}.stat-label{font-size:11px;color:var(--text-secondary);font-weight:500}.stat-value{font-size:clamp(.9rem,2.6vw,1.05rem);font-weight:800;color:var(--blue-primary)}.stat-max{font-size:11px;color:var(--text-muted)}.stat-divider{width:1px;height:clamp(24px,6vw,36px);background:var(--bg-tertiary)}.timer-section{grid-area:timer;background:#f8fafc;padding:8px 12px;border-radius:12px;border:1px solid rgba(203,213,225,.6);box-shadow:none;width:100%;display:grid;gap:6px}.timer-info{display:flex;align-items:center;justify-content:space-between;margin-bottom:0;gap:8px}#status-text{font-size:11px;color:var(--text-secondary);font-weight:500}.timer-badge{background:var(--blue-primary);color:#fff;padding:2px 6px;border-radius:20px;font-weight:700;font-size:10px;min-width:34px;text-align:center;flex-shrink:0}.timer-badge.warning{background:var(--warning)}.timer-badge.danger{background:var(--error);animation:pulse .5s ease infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.timer-bar-wrapper{width:100%;height:3px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden}.timer-bar{width:100%;height:100%;background:linear-gradient(90deg,var(--blue-primary),var(--blue-dark));border-radius:4px;transition:width 1s linear}.ready-btn{grid-area:ready;display:inline-flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,12px);width:auto;align-self:center;justify-self:end;max-width:100%;padding:8px 16px;min-height:40px;background:#2aabee;border:1px solid rgba(30,136,229,.2);border-radius:var(--radius);color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 6px 14px #2aabee33}.game-play{display:contents}.ready-btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.ready-btn svg{width:clamp(16px,4vw,20px);height:clamp(16px,4vw,20px)}.ready-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px #2aabee40}.ready-btn:active{transform:translateY(0)}.game-board{grid-area:board;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;background:var(--bg-secondary);padding:12px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);width:100%;aspect-ratio:1;min-width:0}.card{aspect-ratio:1;min-width:0;display:flex;align-items:center;justify-content:center;background:var(--card-hidden);border-radius:clamp(8px,2vw,14px);font-size:clamp(1rem,5vw,1.75rem);font-weight:800;color:transparent;cursor:default;transition:all .3s cubic-bezier(.4,0,.2,1);user-select:none;-webkit-tap-highlight-color:transparent}.card.active{background:var(--blue-primary);color:#fff;box-shadow:0 4px 20px #2aabee59;animation:cardReveal .3s ease-out}@keyframes cardReveal{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.card.hidden{background:var(--card-hidden);color:transparent;cursor:pointer;border:2px solid var(--card-hidden-border);box-shadow:inset 0 1px #ffffffbf,0 6px 16px var(--card-hidden-glow)}.card.hidden:not([data-val="0"]){--card-hidden: var(--card-target);--card-hidden-border: var(--card-target-border);--card-hidden-border-strong: var(--card-target-border-strong);--card-hidden-glow: var(--card-target-glow);--card-hidden-glow-strong: var(--card-target-glow-strong)}.card.hidden:hover{transform:scale(1.03);border-color:var(--card-hidden-border-strong, var(--card-hidden-border));box-shadow:0 10px 24px var(--card-hidden-glow-strong, var(--card-hidden-glow))}.card.hidden:active{transform:scale(.97)}.card.correct{background:var(--success);color:#fff;animation:correctPop .4s ease-out forwards}@keyframes correctPop{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(0);opacity:0}}.card.wrong{background:var(--error);color:#fff;animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.leaderboard-card{width:100%;background:linear-gradient(180deg,#f8fafc,#fff);border-radius:var(--radius-lg);padding:clamp(12px,2.5vw,16px);border:1px solid rgba(203,213,225,.6);box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:10px;align-self:start}.leaderboard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px dashed rgba(148,163,184,.4)}.leaderboard-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--text-primary)}.leaderboard-title i{color:var(--blue-primary)}.leaderboard-subtitle{font-size:11px;color:var(--text-secondary);margin-top:4px}.leaderboard-pill{display:inline-flex;align-items:center;gap:6px;background:var(--blue-light);color:var(--blue-primary);font-size:10px;font-weight:700;padding:5px 10px;border-radius:999px}.player-name{grid-area:name;width:100%;display:grid;gap:8px;padding:12px 14px;border-radius:14px;background:#f1f5f9;border:1px solid rgba(203,213,225,.6)}.player-name-label{font-size:12px;font-weight:800;color:var(--text-primary);text-transform:uppercase;letter-spacing:.06em}.player-name-auth{grid-area:name;display:inline-flex;align-items:center;gap:8px;background:var(--blue-light);color:var(--blue-primary);padding:8px 12px;border-radius:999px;font-weight:700;font-size:13px}.leaderboard-input{position:relative}.leaderboard-input input{width:100%;padding:12px 14px 12px 38px;border-radius:12px;border:1px solid rgba(203,213,225,.8);background:#fff;font-family:inherit;font-size:14px;font-weight:600;color:var(--text-primary);transition:border-color .2s ease,box-shadow .2s ease}.leaderboard-input input:focus{outline:none;border-color:var(--blue-primary);box-shadow:0 0 0 3px #2aabee33}.leaderboard-input i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-secondary);font-size:14px}.leaderboard-hint{font-size:11px;color:var(--text-muted)}.leaderboard-hint.error{color:var(--error);font-weight:700}.leaderboard-status{text-align:center;font-size:12px;color:var(--text-secondary)}.leaderboard-scroll{max-height:clamp(320px,58vh,640px);overflow:auto;padding-right:4px;display:grid;gap:10px;min-height:120px}.leaderboard-list{display:grid;gap:10px;margin-top:4px}.leaderboard-empty{display:none;text-align:center;font-size:12px;color:var(--text-secondary)}.leaderboard-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid rgba(203,213,225,.6);background:#fff;box-shadow:0 6px 16px #0f172a0f}.leaderboard-left{display:flex;align-items:center;gap:10px}.leaderboard-rank{width:34px;height:34px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;font-weight:800;background:var(--blue-light);color:var(--blue-primary)}.leaderboard-rank i{font-size:12px}.leaderboard-rank.gold{background:#f59e0b26;color:#f59e0b}.leaderboard-rank.silver{background:#94a3b82e;color:#64748b}.leaderboard-rank.bronze{background:#ea580c29;color:#ea580c}.leaderboard-name{font-weight:700;font-size:13px;color:var(--text-primary)}.leaderboard-meta{font-size:10px;color:var(--text-secondary)}.leaderboard-score{text-align:right;min-width:58px}.leaderboard-score .count{font-size:16px;font-weight:800;color:var(--blue-primary)}.leaderboard-score .time{font-size:10px;color:var(--text-secondary)}.game-footer{text-align:center;padding:clamp(6px,1.5vw,10px);color:var(--text-muted);font-size:clamp(.7rem,2vw,.8rem)}.modal-overlay{display:none;position:fixed;inset:0;background:#00000080;backdrop-filter:blur(8px);justify-content:center;align-items:center;z-index:5000;padding:clamp(16px,4vw,24px);overflow-y:auto}.modal-card{background:var(--bg-secondary);border-radius:clamp(18px,4vw,24px);padding:clamp(24px,5vw,36px) clamp(20px,4vw,28px);text-align:center;max-width:min(90vw,380px);width:100%;box-shadow:var(--shadow-lg);animation:slideUp .4s cubic-bezier(.4,0,.2,1);margin:auto}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-icon{width:clamp(60px,18vw,80px);height:clamp(60px,18vw,80px);margin:0 auto clamp(14px,3vw,20px);border-radius:50%;display:flex;align-items:center;justify-content:center;animation:bounce .6s ease}.modal-icon.timeout{background:linear-gradient(135deg,var(--warning),#e68600)}.modal-icon.wrong{background:linear-gradient(135deg,var(--error),#d62d23)}.modal-icon.victory{background:linear-gradient(135deg,var(--success),#2ba84a)}.modal-icon svg{width:clamp(28px,8vw,40px);height:clamp(28px,8vw,40px);color:#fff}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.modal-title{font-size:clamp(1.2rem,4.5vw,1.5rem);font-weight:700;margin-bottom:clamp(6px,1.5vw,10px);color:var(--text-primary)}.modal-score{font-size:clamp(1.8rem,8vw,2.5rem);font-weight:800;color:var(--blue-primary);margin:clamp(12px,3vw,18px) 0}.modal-message{font-size:clamp(.85rem,2.8vw,.95rem);color:var(--text-secondary);line-height:1.6;margin-bottom:clamp(18px,4vw,24px)}.modal-stats{display:flex;justify-content:center;gap:clamp(20px,6vw,36px);margin-bottom:clamp(18px,4vw,24px);padding:clamp(12px,3vw,18px);background:var(--bg-tertiary);border-radius:var(--radius)}.modal-stat{display:flex;flex-direction:column;align-items:center;gap:4px}.modal-stat-value{font-size:clamp(1.4rem,5vw,1.75rem);font-weight:800;color:var(--blue-primary)}.modal-stat-label{font-size:clamp(.7rem,2vw,.8rem);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.restart-btn{display:inline-flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,12px);width:100%;padding:clamp(14px,3.5vw,18px) clamp(24px,5vw,36px);background:linear-gradient(135deg,var(--blue-primary),var(--blue-dark));border:none;border-radius:var(--radius);color:#fff;font-size:clamp(.9rem,3vw,1rem);font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px #2aabee4d}.restart-btn svg{width:clamp(16px,4vw,20px);height:clamp(16px,4vw,20px)}.restart-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2aabee66}.restart-btn:active{transform:translateY(0)}.stat-value-gold,.modal-stat-value-gold{color:#ffb800}.new-record-text{display:none;font-size:clamp(.9rem,3vw,1rem);font-weight:700;color:#ffb800;margin-bottom:clamp(12px,3vw,18px);padding:clamp(8px,2vw,12px) clamp(16px,4vw,20px);background:linear-gradient(135deg,#ffb80026,#ffb80014);border-radius:var(--radius);border:1px solid rgba(255,184,0,.3);animation:newRecordPulse 1.5s ease infinite}@keyframes newRecordPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.modal-buttons{display:flex;flex-direction:column;gap:clamp(10px,2.5vw,14px)}.home-btn{display:inline-flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,12px);width:100%;padding:clamp(14px,3.5vw,18px) clamp(24px,5vw,36px);background:var(--bg-tertiary);border:none;border-radius:var(--radius);color:var(--text-primary);font-size:clamp(.9rem,3vw,1rem);font-weight:600;cursor:pointer;transition:all .2s ease;text-decoration:none}.home-btn svg{width:clamp(16px,4vw,20px);height:clamp(16px,4vw,20px)}.home-btn:hover{background:var(--text-secondary);color:#fff;transform:translateY(-2px)}.home-btn:active{transform:translateY(0)}@media(min-width:768px){.memory-page{justify-content:flex-start;--board-size: min(420px, 58vh)}.card.hidden:hover{transform:scale(1.05)}}@media(min-width:1024px){.memory-page{--board-size: min(450px, 60vh)}}@media(max-height:650px){.memory-page{justify-content:flex-start}.game-container{gap:10px;padding-top:8px;padding-bottom:12px}.stats-bar{padding:10px 16px}.timer-section{padding:10px}.timer-info{margin-bottom:8px}.ready-btn{padding:10px 16px}.game-board{gap:6px;padding:8px}.game-footer{padding:4px}}@media(max-width:1100px){.memory-card{padding:clamp(16px,4vw,30px)}.memory-layout{grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:18px}}@media(max-width:900px){.memory-layout{grid-template-columns:1fr}}@media(max-height:500px){.memory-page{--board-size: min(280px, 56vh)}.game-container{gap:6px}.game-header{padding:4px 0}.stats-bar{padding:8px 12px}.timer-section{padding:8px}.timer-info{margin-bottom:6px}.game-board{margin:0 auto}.modal-card{padding:16px}.modal-icon{width:50px;height:50px;margin-bottom:10px}.modal-score{margin:8px 0}.modal-stats{margin-bottom:12px;padding:10px}}@media(min-height:800px)and (min-width:400px){.game-container{gap:20px}.stats-bar{padding:20px 28px}.timer-section{padding:20px}.game-board{gap:12px;padding:20px}}@media(hover:none)and (pointer:coarse){.card.hidden:hover{transform:none;border-color:transparent;box-shadow:none}.card.hidden:active{transform:scale(.95);border-color:var(--blue-primary)}.back-btn:hover{background:var(--bg-secondary);color:var(--text-secondary);transform:none}.back-btn:active{background:var(--blue-primary);color:#fff}.ready-btn:hover,.restart-btn:hover,.home-btn:hover{transform:none}.home-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.ready-btn:active,.restart-btn:active,.home-btn:active{transform:scale(.98)}.home-btn:active{background:var(--text-secondary);color:#fff}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
