*{box-sizing:border-box;margin:0;padding:0}body{background:#f5f5f5;font-family:Arial,sans-serif}.navbar{background:#fff;border-bottom:1px solid #ddd;justify-content:space-between;align-items:center;height:64px;padding:0 32px;display:flex}.navbar-logo a{color:#000;font-size:24px;font-weight:700;text-decoration:none}.navbar-links{gap:24px;display:flex}.navbar-links a{color:#333;font-size:16px;text-decoration:none}.navbar-links a:hover{color:#0070f3}.navbar-btn{border-radius:6px;padding:6px 18px;font-size:14px;font-weight:500;text-decoration:none;transition:background .2s,color .2s}.navbar-btn-login{color:#333}.navbar-btn-login:hover{background:#f0f0f0}.navbar-btn-register{color:#fff;background:#0070f3}.navbar-btn-register:hover{background:#005bb5}.navbar-user{align-items:center;gap:12px;display:flex}.navbar-user-avatar{color:#fff;background:#0070f3;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-size:14px;font-weight:600;text-decoration:none;transition:opacity .2s;display:flex}.navbar-user-avatar img{object-fit:cover;border-radius:50%;width:100%;height:100%}.navbar-user-avatar:hover{opacity:.85}.navbar-user-name{color:#333;font-size:14px;font-weight:500;text-decoration:none}.navbar-user-name:hover{color:#0070f3}.navbar-write-btn{color:#0070f3;background:#e8f4fd;border-radius:6px;padding:5px 14px;font-size:13px;font-weight:500;text-decoration:none;transition:background .2s}.navbar-write-btn:hover{background:#d0eaff}.navbar-logout{color:#888;cursor:pointer;background:0 0;border:1px solid #ddd;border-radius:6px;padding:5px 14px;font-size:13px;transition:border-color .2s,color .2s}.navbar-logout:hover{color:#e00;border-color:#e00}.container{max-width:1100px;margin:0 auto;padding:0 24px}.hero{text-align:center;background:#fff;border-bottom:1px solid #e5e5e5;padding:64px 0}.hero-title{color:#111;margin-bottom:12px;font-size:36px;font-weight:700}.hero-subtitle{color:#666;font-size:18px;font-weight:400}.post-list{max-width:740px;margin:0 auto;padding:48px 24px}.post-list-heading{color:#111;margin-bottom:32px;font-size:22px;font-weight:600}.post-card{background:#fff;border:1px solid #e5e5e5;border-radius:8px;margin-bottom:16px;padding:24px;transition:box-shadow .2s}.post-card:hover{box-shadow:0 2px 12px #00000014}.post-card-body{margin-bottom:16px}.post-card-title{margin-bottom:8px;font-size:20px;font-weight:600}.post-card-title a{color:#111;text-decoration:none}.post-card-title a:hover{color:#0070f3}.post-card-summary{color:#555;font-size:15px;line-height:1.6}.post-card-meta{color:#999;align-items:center;gap:16px;font-size:14px;display:flex}.post-card-author{color:#0070f3;font-weight:500;text-decoration:none}.post-card-author:hover{text-decoration:underline}.post-card-date{color:#999}.post-card-views{color:#bbb;margin-left:auto}@media (max-width:640px){.hero{padding:40px 0}.hero-title{font-size:26px}.post-list{padding:32px 16px}.post-card-meta{flex-wrap:wrap;gap:8px}.post-card-views{margin-left:0}}.homepage-layout{min-height:calc(100vh - 64px);display:flex}.homepage-main{flex:1;min-width:0}.homepage-game{background:#fafafa;border-left:1px solid #e5e5e5;flex-shrink:0;width:480px;height:calc(100vh - 64px);position:sticky;top:64px;overflow-y:auto}@media (max-width:1200px){.homepage-game{width:400px}}@media (max-width:1024px){.homepage-layout{flex-direction:column}.homepage-game{border-top:1px solid #e5e5e5;border-left:none;width:100%;height:auto;min-height:500px;position:static}}