:root{--fb-blue: #1877f2;--fb-blue-hover: #166fe5;--fb-bg: #f0f2f5;--fb-white: #ffffff;--fb-card: #ffffff;--fb-text: #050505;--fb-text-secondary: #65676b;--fb-border: #ced0d4;--fb-hover: #f2f2f2;--fb-green: #42b72a;--fb-red: #fa383e;--fb-orange: #f7b928;--fb-purple: #7646ff;--fb-shadow: 0 1px 2px rgba(0,0,0,.1);--fb-shadow-lg: 0 2px 12px rgba(0,0,0,.15);--fb-radius: 8px;--fb-radius-lg: 12px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--fb-bg);color:var(--fb-text);line-height:1.34;font-size:15px}.header{position:sticky;top:0;z-index:100;background:var(--fb-white);box-shadow:0 2px 4px #0000001a;height:56px;display:flex;align-items:center;padding:0 16px;gap:8px}.header-logo{display:flex;align-items:center;gap:6px;flex-shrink:0}.header-logo svg{width:40px;height:40px}.header-logo span{font-size:24px;font-weight:700;color:var(--fb-blue);letter-spacing:-.5px}.header-search{flex:1;max-width:320px;margin:0 auto}.header-search input{width:100%;padding:8px 16px;border-radius:20px;border:none;background:var(--fb-bg);font-size:15px;outline:none;color:var(--fb-text)}.header-search input::placeholder{color:var(--fb-text-secondary)}.header-search input:focus{box-shadow:0 0 0 2px var(--fb-blue)}.header-nav{display:flex;gap:4px;flex-shrink:0}.nav-btn{width:40px;height:40px;border-radius:50%;border:none;background:var(--fb-bg);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--fb-text);font-size:18px;position:relative;transition:background .15s}.nav-btn:hover{background:#d8dadf}.nav-btn.active{background:var(--fb-blue);color:#fff}.nav-badge{position:absolute;top:-2px;right:-2px;background:var(--fb-red);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}.header-profile{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--fb-blue),var(--fb-purple));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;cursor:pointer;flex-shrink:0}.layout{display:flex;max-width:1200px;margin:0 auto;padding:16px;gap:16px}.sidebar{width:280px;flex-shrink:0;position:sticky;top:72px;height:fit-content;max-height:calc(100vh - 88px);overflow-y:auto}.feed{flex:1;min-width:0;max-width:590px;margin:0 auto}.right-sidebar{width:280px;flex-shrink:0;position:sticky;top:72px;height:fit-content}.sidebar-nav{display:flex;flex-direction:column;gap:2px}.sidebar-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--fb-radius);cursor:pointer;transition:background .15s;text-decoration:none;color:var(--fb-text);font-weight:500}.sidebar-item:hover{background:var(--fb-hover)}.sidebar-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}.sidebar-icon.blue{background:#e7f3ff;color:var(--fb-blue)}.sidebar-icon.green{background:#e8f5e9;color:var(--fb-green)}.sidebar-icon.orange{background:#fff3e0;color:var(--fb-orange)}.sidebar-icon.purple{background:#ede7f6;color:var(--fb-purple)}.sidebar-icon.red{background:#fce4ec;color:var(--fb-red)}.sidebar-divider{height:1px;background:var(--fb-border);margin:8px 0}.sidebar-label{font-size:13px;color:var(--fb-text-secondary);padding:8px 8px 4px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.create-post{background:var(--fb-card);border-radius:var(--fb-radius-lg);box-shadow:var(--fb-shadow);padding:12px 16px;margin-bottom:16px}.create-post-top{display:flex;gap:8px;align-items:center;margin-bottom:12px}.create-post-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--fb-blue),var(--fb-purple));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;flex-shrink:0}.create-post-input{flex:1;padding:8px 12px;border-radius:20px;background:var(--fb-bg);border:none;font-size:17px;color:var(--fb-text-secondary);cursor:pointer;text-align:left;transition:background .15s}.create-post-input:hover{background:#e4e6e9}.create-post-divider{height:1px;background:var(--fb-border);margin-bottom:8px}.create-post-actions{display:flex;justify-content:space-around}.create-action{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--fb-radius);border:none;background:none;cursor:pointer;font-size:15px;font-weight:600;color:var(--fb-text-secondary);transition:background .15s}.create-action:hover{background:var(--fb-hover)}.create-action .icon{font-size:20px}.post-card{background:var(--fb-card);border-radius:var(--fb-radius-lg);box-shadow:var(--fb-shadow);margin-bottom:16px;overflow:hidden}.post-header{display:flex;align-items:center;gap:8px;padding:12px 16px 0}.post-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;flex-shrink:0;cursor:pointer}.post-meta{flex:1}.post-author{font-weight:600;font-size:15px;cursor:pointer}.post-author:hover{text-decoration:underline}.post-time{font-size:13px;color:var(--fb-text-secondary);display:flex;align-items:center;gap:4px}.post-more{width:36px;height:36px;border-radius:50%;border:none;background:none;cursor:pointer;font-size:20px;color:var(--fb-text-secondary);display:flex;align-items:center;justify-content:center;transition:background .15s}.post-more:hover{background:var(--fb-hover)}.post-content{padding:8px 16px 12px;font-size:15px;line-height:1.5}.post-image{width:100%;display:block}.game-card{margin:0 16px 12px;border-radius:var(--fb-radius);overflow:hidden;border:1px solid var(--fb-border)}.game-card-header{background:linear-gradient(135deg,#667eea,#764ba2);padding:16px;color:#fff}.game-card-header.puzzle{background:linear-gradient(135deg,#f093fb,#f5576c)}.game-card-header.quiz{background:linear-gradient(135deg,#4facfe,#00f2fe)}.game-card-header.memory{background:linear-gradient(135deg,#43e97b,#38f9d7)}.game-card-header.reaction{background:linear-gradient(135deg,#fa709a,#fee140)}.game-card-title{font-size:18px;font-weight:700;margin-bottom:4px}.game-card-subtitle{font-size:13px;opacity:.9}.game-card-body{padding:16px;background:var(--fb-white)}.game-card-scores{display:flex;gap:16px;margin-bottom:12px}.game-score-item{text-align:center;flex:1}.game-score-value{font-size:24px;font-weight:700;color:var(--fb-blue)}.game-score-label{font-size:12px;color:var(--fb-text-secondary)}.game-btn{width:100%;padding:10px;border-radius:var(--fb-radius);border:none;background:var(--fb-blue);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s}.game-btn:hover{background:var(--fb-blue-hover)}.game-btn.playing{background:var(--fb-red)}.game-btn.playing:hover{background:#e5333a}.game-area{padding:12px 0}.whack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.whack-hole{aspect-ratio:1;border-radius:var(--fb-radius);background:var(--fb-bg);border:2px solid var(--fb-border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:32px;transition:all .1s;-webkit-user-select:none;user-select:none}.whack-hole:hover{border-color:var(--fb-blue)}.whack-hole.mole{background:#fff3e0;border-color:var(--fb-orange);animation:pop .15s ease-out}.whack-hole.hit{background:#e8f5e9;border-color:var(--fb-green);transform:scale(.9)}@keyframes pop{0%{transform:scale(.8)}to{transform:scale(1)}}.game-status{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--fb-bg);border-radius:var(--fb-radius);font-weight:600;margin-bottom:8px}.game-timer{color:var(--fb-red)}.game-score-display{color:var(--fb-green)}.quiz-question{font-size:17px;font-weight:600;margin-bottom:12px;padding:12px;background:var(--fb-bg);border-radius:var(--fb-radius)}.quiz-options{display:flex;flex-direction:column;gap:8px}.quiz-option{padding:12px 16px;border-radius:var(--fb-radius);border:2px solid var(--fb-border);background:var(--fb-white);cursor:pointer;font-size:15px;text-align:left;transition:all .15s}.quiz-option:hover{border-color:var(--fb-blue);background:#e7f3ff}.quiz-option.correct{border-color:var(--fb-green);background:#e8f5e9;color:#2e7d32}.quiz-option.wrong{border-color:var(--fb-red);background:#fce4ec;color:#c62828}.quiz-option:disabled{cursor:default;opacity:.7}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}.memory-card{aspect-ratio:1;border-radius:var(--fb-radius);border:2px solid var(--fb-border);background:var(--fb-blue);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:24px;transition:all .2s;-webkit-user-select:none;user-select:none;color:#fff;font-weight:700}.memory-card.flipped{background:var(--fb-white);border-color:var(--fb-blue);color:var(--fb-text)}.memory-card.matched{background:#e8f5e9;border-color:var(--fb-green);color:var(--fb-green);cursor:default}.reaction-zone{width:100%;height:180px;border-radius:var(--fb-radius);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;margin-bottom:12px;transition:background .2s}.reaction-zone.waiting{background:#fce4ec;color:#c62828}.reaction-zone.ready{background:#e8f5e9;color:#2e7d32;animation:pulse .5s infinite}.reaction-zone.result{background:#e7f3ff;color:var(--fb-blue)}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.reaction-history{display:flex;gap:4px;flex-wrap:wrap}.reaction-time-badge{padding:4px 8px;border-radius:12px;font-size:12px;font-weight:600;background:#e7f3ff;color:var(--fb-blue)}.post-stats{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;color:var(--fb-text-secondary);font-size:15px}.post-stats-left{display:flex;align-items:center;gap:4px}.reaction-icons{display:flex}.reaction-icon{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;margin-left:-2px;border:2px solid white}.reaction-icon:first-child{margin-left:0}.post-stats-right{display:flex;gap:12px}.post-stats-right span:hover{text-decoration:underline;cursor:pointer}.post-actions{display:flex;border-top:1px solid var(--fb-border);margin:0 16px;padding:4px 0}.post-action{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:var(--fb-radius);border:none;background:none;cursor:pointer;font-size:15px;font-weight:600;color:var(--fb-text-secondary);transition:background .15s}.post-action:hover{background:var(--fb-hover)}.post-action.liked{color:var(--fb-blue)}.post-action .icon{font-size:20px}.comments-section{padding:4px 16px 12px}.comment-input-row{display:flex;gap:8px;align-items:center;margin-top:8px}.comment-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--fb-blue),var(--fb-purple));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;flex-shrink:0}.comment-input-wrapper{flex:1;position:relative}.comment-input{width:100%;padding:8px 40px 8px 12px;border-radius:18px;background:var(--fb-bg);border:none;font-size:15px;outline:none;color:var(--fb-text)}.comment-input::placeholder{color:var(--fb-text-secondary)}.comment-send{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:none;background:none;cursor:pointer;color:var(--fb-blue);font-size:18px;display:flex;align-items:center;justify-content:center}.comment-send:disabled{color:var(--fb-border);cursor:default}.comment-item{display:flex;gap:8px;margin-top:8px}.comment-bubble{background:var(--fb-bg);border-radius:18px;padding:8px 12px;max-width:100%}.comment-author{font-weight:600;font-size:13px;cursor:pointer}.comment-author:hover{text-decoration:underline}.comment-text{font-size:15px}.comment-meta{display:flex;gap:12px;padding-left:12px;margin-top:2px}.comment-meta span{font-size:12px;color:var(--fb-text-secondary);font-weight:600;cursor:pointer}.comment-meta span:hover{text-decoration:underline}.leaderboard{background:var(--fb-card);border-radius:var(--fb-radius-lg);box-shadow:var(--fb-shadow);padding:16px;margin-bottom:16px}.leaderboard-title{font-size:18px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}.leaderboard-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--fb-radius);transition:background .15s}.leaderboard-item:hover{background:var(--fb-hover)}.leaderboard-rank{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}.leaderboard-rank.gold{background:#fff8e1;color:#f9a825}.leaderboard-rank.silver{background:#eceff1;color:#78909c}.leaderboard-rank.bronze{background:#fbe9e7;color:#bf360c}.leaderboard-rank.other{background:var(--fb-bg);color:var(--fb-text-secondary)}.leaderboard-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex-shrink:0}.leaderboard-info{flex:1}.leaderboard-name{font-weight:600;font-size:15px}.leaderboard-game{font-size:12px;color:var(--fb-text-secondary)}.leaderboard-score{font-weight:700;color:var(--fb-blue);font-size:15px}.stories-row{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px}.story-card{width:112px;height:200px;border-radius:var(--fb-radius-lg);overflow:hidden;position:relative;cursor:pointer;flex-shrink:0;transition:transform .15s}.story-card:hover{transform:scale(1.02)}.story-bg{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 8px;color:#fff;text-align:center}.story-card:first-child .story-bg{background:linear-gradient(135deg,var(--fb-blue),#42b72a)}.story-card:nth-child(2) .story-bg{background:linear-gradient(135deg,#f5576c,#ff6f00)}.story-card:nth-child(3) .story-bg{background:linear-gradient(135deg,#7646ff,#e040fb)}.story-card:nth-child(4) .story-bg{background:linear-gradient(135deg,#00bcd4,#4caf50)}.story-card:nth-child(5) .story-bg{background:linear-gradient(135deg,#ff5722,#ffc107)}.story-emoji{font-size:36px;margin-bottom:8px}.story-label{font-size:13px;font-weight:600}.story-sublabel{font-size:11px;opacity:.8;margin-top:4px}.contacts-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.contacts-title{font-size:18px;font-weight:700}.contacts-actions{display:flex;gap:4px}.contacts-btn{width:32px;height:32px;border-radius:50%;border:none;background:none;cursor:pointer;color:var(--fb-text-secondary);display:flex;align-items:center;justify-content:center;font-size:16px;transition:background .15s}.contacts-btn:hover{background:var(--fb-hover)}.contact-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--fb-radius);cursor:pointer;transition:background .15s}.contact-item:hover{background:var(--fb-hover)}.contact-avatar{position:relative}.contact-avatar-circle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px}.online-dot{position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-radius:50%;background:var(--fb-green);border:2px solid white}.contact-name{font-weight:500;font-size:15px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(100px);background:#323436;color:#fff;padding:12px 24px;border-radius:var(--fb-radius);font-weight:600;font-size:15px;box-shadow:var(--fb-shadow-lg);z-index:1000;transition:transform .3s ease;pointer-events:none}.toast.visible{transform:translate(-50%) translateY(0)}@media(max-width:1100px){.right-sidebar{display:none}}@media(max-width:900px){.sidebar{display:none}.layout{justify-content:center}.feed{max-width:100%}}@media(max-width:600px){.header-search,.stories-row{display:none}.layout{padding:8px}}