/* Navigation and readable interaction sizes across desktop and touch screens. */
:root{--nav-height:72px}
html{scroll-padding-top:150px}
.topbar{height:var(--nav-height);min-height:var(--nav-height)}
.topbar-title{font-size:17px;color:var(--text);font-weight:650}
.topbar .search-field{max-width:360px;min-height:44px}
.search-field input{font-size:14px}
.sidebar{overflow-y:auto;padding-top:22px}
.brand{width:104px;margin-bottom:24px}.brand img{width:104px;height:85px}
.sidebar-label{display:none}.nav-link{min-height:48px;font-size:14px}
.compose-nav{margin:16px 4px 0;min-height:46px;font-size:14px;flex-shrink:0}
.sidebar-bottom{padding-top:20px}.more-navigation{width:100%;text-align:start;margin-bottom:12px}
.account-button{min-height:60px;padding-block:12px 0}.account-button strong{font-size:13px}.account-button small{font-size:11px}
.account-button>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
.section-heading{margin-bottom:24px}.section-heading h1{font-size:30px}.section-heading p{font-size:14px;line-height:1.65}
.composer{min-height:74px}.composer>span:nth-child(2){font-size:15px}.composer-plus{margin-inline-start:auto}
.feed-toolbar{position:sticky;top:var(--nav-height);z-index:12;background:var(--bg);margin:16px 0 20px;min-height:62px}
.feed-tabs{gap:28px}.feed-tabs button{min-height:60px;font-size:15px;padding-inline:2px}
.feed-toolbar-actions{display:flex;align-items:center;gap:4px}.icon-button{width:44px;height:44px}
.filter-active{color:var(--purple);position:relative}.filter-dot{width:5px;height:5px;background:var(--purple);border-radius:50%;position:absolute;inset-inline-end:9px;top:8px}
.filter-panel{padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:20px}
.filter-panel[hidden]{display:none}.filter-panel .role-filter{margin:0 0 18px;justify-content:space-between;font-size:13px}
.filter-panel .role-filter select{max-width:none;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:8px;font-size:14px;background:var(--bg)}
.filter-panel .genre-filters{margin:0;flex-wrap:wrap;overflow:visible}.chip{min-height:40px;font-size:12px;padding:9px 12px}
.active-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:-5px 0 20px;color:var(--purple);font-size:13px}
.active-filters span:empty{display:none}.active-filters button{margin-inline-start:auto;min-height:40px;font-size:12px}
.post-card{overflow:visible}.post-header{position:relative;border-radius:16px 16px 0 0;justify-content:initial;gap:12px;padding:20px 22px 15px}
.post-header .author{flex:1}.author strong{font-size:15px}.author small{font-size:11px;margin-top:4px}.post-header .role-badge{font-size:10px}
.post-content{padding:0 22px 18px}.post-content p{font-size:16px;line-height:1.7;color:#d0cbd9;white-space:pre-wrap}
.post-text-collapsed{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.read-more{font-size:13px;min-height:40px;color:var(--purple);margin-top:4px;padding:0}
.post-menu{position:relative;margin-inline-start:auto}.post-menu summary{list-style:none;display:grid;place-items:center;cursor:pointer;width:44px;height:44px;border-radius:10px;color:var(--muted)}
.post-menu summary::-webkit-details-marker{display:none}.post-menu summary:hover,.post-menu[open] summary{background:var(--panel-raised);color:var(--text)}
.post-menu summary:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.post-menu-items{position:absolute;inset-inline-end:0;top:46px;width:225px;z-index:15;padding:6px;background:#25232e;border:1px solid #494252;border-radius:12px;box-shadow:0 16px 36px #0006}
.post-menu-items button{display:block;width:100%;min-height:44px;padding:10px 12px;text-align:start;font-size:13px;border-radius:7px}.post-menu-items button:hover{background:#373040}
.post-menu-items [data-action="delete-post"]{color:#f0a9bb}
.post-footer{padding:9px 20px 14px}.post-actions{gap:22px}.post-actions button{min-width:44px;min-height:44px;font-size:13px}.post-actions .icon{width:23px;height:23px}
.post-tags button{font-size:12px;min-height:32px}.game-context{font-size:12px;padding:12px 22px;flex-wrap:wrap}.game-context>span{margin-inline-start:auto}
.post-image-link{display:block;width:100%;padding:0}.post-image{margin-top:16px;cursor:zoom-in}.lightbox-image{max-height:76dvh;margin:auto;object-fit:contain}
dialog:has(.lightbox-image){width:min(980px,calc(100% - 24px));background:#121116}.lightbox-image{padding-top:16px}
.comment strong{font-size:13px}.comment p{font-size:15px;line-height:1.65}.comment-date{font-size:11px}.comment .text-button{font-size:12px;min-height:40px}
.comment-form{min-height:52px}.comment-form input{font-size:15px}.comment-form button{width:44px;height:42px}
.search-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:24px;gap:24px;overflow-x:auto;scrollbar-width:none}
.search-tabs a{position:relative;flex-shrink:0;min-height:52px;display:flex;align-items:center;font-size:14px;color:var(--muted)}
.search-tabs a[aria-current]{color:var(--purple)}.search-tabs a[aria-current]:after{content:'';height:3px;position:absolute;bottom:0;inset-inline:0;background:var(--purple);border-radius:3px}
.search-summary{font-size:14px;margin-block:0 24px}.search-summary button{min-height:40px;margin-inline-start:10px}
.search-start{border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:42px 24px;text-align:center}
.search-start h2{font-size:23px;margin-bottom:10px}.search-start p{color:var(--muted);font-size:15px}.search-start .account-actions{justify-content:center;margin-top:26px}
.search-start-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 24px;background:#31273f;color:var(--purple);border-radius:20px}.search-start-icon .icon{width:29px;height:29px}
.account-menu{display:grid;gap:5px;margin-top:20px}.account-menu a,.account-menu button{display:flex;gap:15px;align-items:center;text-align:start;width:100%;min-height:52px;padding:12px;border-radius:10px;font-size:15px}
.account-menu a:hover,.account-menu button:hover{background:#302739}.account-menu .icon{color:var(--purple)}.account-menu a>.icon:last-child{margin-inline-start:auto;width:16px;color:var(--muted)}
.profile-quick-actions{display:flex;justify-content:flex-end;gap:8px;margin:-30px 0 24px;padding-inline-start:74px;flex-wrap:wrap}
.profile-shortcuts{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}.profile-shortcuts a{display:flex;align-items:center;gap:8px;font-size:13px;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.profile-shortcuts .icon{width:17px}.profile-tabs button,.profile-tabs a{min-height:48px;font-size:14px}.profile-bio{font-size:15px;line-height:1.7}
.compose-submit{display:flex;justify-content:space-between;align-items:center;gap:12px}.compose-submit .text-button{font-size:12px;min-height:44px;color:var(--muted)}
.draft-note{font-size:11px!important;color:var(--muted);margin:14px 0 0}.dialog-inner textarea,.dialog-inner input:not([type=checkbox]),.dialog-inner select{font-size:16px!important}
.dialog-inner .field-label,.account-field{font-size:14px}.dialog-inner h2{padding-inline-end:14px}.compose-counter{font-size:12px}.modal-close{z-index:2}
.back-to-top{position:fixed;bottom:28px;inset-inline-end:25px;z-index:19;background:#30263f;border:1px solid #5b4875;color:#dccfff;box-shadow:0 5px 20px #0004}
.back-to-top[hidden]{display:none}.back-to-top .icon{transform:rotate(-90deg)}
.empty-state h2{font-size:22px}.empty-state p{font-size:14px;line-height:1.7}.empty-state{padding:44px 20px}
.game-card-body p,.person-card p{font-size:14px;line-height:1.7}.game-card-body>small,.game-card-body>div>span{font-size:12px}.follow-button{min-height:44px;font-size:13px}
.rail-heading h2{font-size:15px}.rail-caption{font-size:12px}.radar-item strong{font-size:12px}.radar-item small{font-size:11px}.radar-item em{font-size:10px}
.community-card h2{font-size:22px}.community-card p,.community-card button{font-size:12px}.legend h3,.preview-note strong{font-size:11px}.preview-note p{font-size:11px}
@media(min-width:761px) and (max-height:760px){.brand{width:80px;margin-bottom:12px}.brand img{width:80px;height:64px}.nav-link{min-height:44px;margin-bottom:2px}.sidebar-bottom{padding-top:12px}.more-navigation{margin-bottom:4px}}
@media(max-width:1080px){.topbar-title{display:block;margin-inline-end:auto}.topbar .search-field{max-width:300px;width:45%}}
@media(max-width:760px){
  :root{--nav-height:64px}.topbar{flex-wrap:nowrap;padding:10px 16px;gap:10px;height:64px;min-height:64px}.topbar-title{display:none}.mobile-brand{margin-inline-end:auto}
  .topbar .search-field{display:none}.topbar .notification-button,.top-avatar{display:flex;width:44px;height:44px;flex-shrink:0}.topbar .search-field input{font-size:16px}
  body[data-view="search"] .topbar{height:auto;flex-wrap:wrap}body[data-view="search"] .topbar .search-field{display:flex;order:5;width:100%;max-width:none;margin:0 0 2px}
  .page-grid{padding:24px 16px calc(98px + env(safe-area-inset-bottom))}.section-heading h1{font-size:28px;margin-bottom:9px}.section-heading p{font-size:14px}.section-heading .eyebrow{font-size:9px}
  .section-heading{margin-bottom:22px}.composer{padding:14px;min-height:72px}.composer>span:nth-child(2){font-size:14px}.composer .avatar{width:36px;height:36px}
  .feed-tabs{gap:25px}.feed-tabs button{font-size:15px}.feed-toolbar{margin-top:10px}.feed-toolbar-actions{gap:0}.filter-panel{padding:14px}
  .genre-filters{padding-block:3px 8px}.chip{min-height:42px;font-size:13px}.filter-panel .genre-filters{max-height:250px;overflow:auto}
  .post-header{padding:14px 14px 12px;flex-wrap:nowrap;gap:6px}.post-header .author{flex:1;gap:9px}.author strong{font-size:14px}.author small{font-size:11px}.author .avatar{width:37px;height:37px;font-size:12px}
  .post-header .role-badge{font-size:8px;padding:4px}.post-header .role-badge .icon{display:none}.post-content{padding:0 16px 14px}.post-content p{font-size:16px;line-height:1.65}
  .post-footer{padding:7px 14px 12px}.post-actions{gap:16px}.post-actions button{min-height:44px;min-width:42px}.post-tags button{font-size:12px}.game-context{font-size:11px;padding-inline:16px}
  .comments{padding:14px 16px 18px}.comment p{font-size:15px}.comment-form input{font-size:16px}.comment-form{padding-inline-start:10px}
  .mobile-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:5px 7px max(7px,env(safe-area-inset-bottom));gap:2px}
  .mobile-nav .nav-link{font-size:10px;min-height:56px;gap:5px;padding:8px 1px 4px;justify-content:center;color:#a4a0b2}.mobile-nav .nav-link .icon{width:24px;height:24px}.mobile-nav .nav-link.active{color:#d3bdff}
  .mobile-nav .mobile-create .icon{background:var(--purple);color:#241a32;border-radius:11px;padding:5px;width:35px;height:30px;margin-block:-3px -1px}.mobile-nav .nav-link span{max-width:none;font-size:10px}.mobile-nav .nav-link.active:before{display:none}
  .search-tabs{gap:22px}.search-tabs a{font-size:13px}.search-start{padding:32px 18px}.search-start .account-actions{display:grid}.search-summary{font-size:13px}
  .profile-quick-actions{margin-top:-30px;padding-inline-start:72px;gap:5px}.profile-quick-actions .secondary{font-size:11px;padding-inline:10px}.profile-shortcuts{gap:7px}.profile-shortcuts a{font-size:12px;padding:9px 10px}
  .profile-tabs{gap:20px}.profile-tabs button{font-size:14px}.account-navigation a{min-height:44px}.account-hint,.account-footnote{font-size:12px}
  .dialog-inner{padding:26px 20px 22px}.dialog-inner h2{font-size:23px}.dialog-inner p{font-size:13px}.account-menu a,.account-menu button{min-height:54px}
  dialog:has(.account-menu){margin:auto 0 0;width:100%;max-width:none;max-height:85dvh;border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .back-to-top{bottom:calc(88px + env(safe-area-inset-bottom));inset-inline-end:16px}#toast{bottom:calc(88px + env(safe-area-inset-bottom));font-size:13px;left:50%}
  .game-card-body p,.person-card p{font-size:14px}.game-card .follow-button{font-size:13px}.game-detail>p:not(.game-subtitle){font-size:15px}.game-subtitle{font-size:14px}
}
html[dir="rtl"] .post-actions .save-button{margin-left:0;margin-right:auto}html[dir="rtl"] .composer-plus{margin-left:0}html[dir="rtl"] .game-context>span{margin-left:0}
html[dir="rtl"] .topbar-title{margin-right:0;margin-left:auto}html[dir="rtl"] .mobile-brand{margin-right:0;margin-left:auto}
@media(prefers-reduced-motion:reduce){.post-menu-items{animation:none}}