/* Hosted websites only: compact tiles, with distinct action silhouettes. */
.wh-site .wh-nav { grid-template-columns:minmax(0,1fr) auto minmax(148px,1fr); gap:18px; }
.wh-site .wh-nav>.wh-wordmark { order:0; grid-column:1; grid-row:1; }
.wh-site .wh-nav>.wh-page-links { order:0; grid-column:2; grid-row:1; border:0; padding:0; flex-wrap:nowrap; }
.wh-site .wh-nav>.wn-actions { order:0; grid-column:3; grid-row:1; min-width:0; justify-self:end; gap:8px; }
.wh-nav .wn-actions .wn-action,.wh-nav .wn-actions .account-toggle {
 position:relative; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
 width:44px; height:44px; min-width:44px; min-height:44px; padding:0; gap:0; flex:none;
 border:1px solid #50565c; border-radius:5px; background:linear-gradient(145deg,#202327,#101214 72%);
 box-shadow:inset 0 0 0 1px #080a0b,inset 0 2px 0 1px #ffffff12,0 2px 3px #0005;
 color:#e7edf2; text-decoration:none; cursor:pointer; font:700 12px/1.3 Arial,Helvetica,sans-serif;
 transition:border-color .18s,box-shadow .18s,background-color .18s;
}
.wh-nav .wn-actions .wn-join { color:var(--wh-accent); border-color:var(--wh-accent); box-shadow:inset 0 0 0 1px #080a0b,inset 0 1px 0 1px #ffffff25,0 0 0 1px color-mix(in srgb,var(--wh-accent) 15%,transparent),0 2px 3px #0005; }
.wh-nav .wn-actions .wn-action>img,.wh-nav .wn-actions .wn-play { width:24px; height:24px; max-width:none; object-fit:contain; flex:none; filter:drop-shadow(0 1px 1px #000b); transition:transform .18s; }
.wh-nav .wn-actions .steam-icon { width:28px; height:28px; }
.wh-nav .wn-actions .wn-play { margin-left:-2px; }
.wh-nav .wn-actions .wh-account { position:relative; flex:none; }
.wh-nav .wn-actions .account-name { display:none; }
.wh-nav .wn-actions .account-toggle::after { display:none; }
.wh-nav .wn-actions .account-avatar { width:30px; height:30px; border-radius:3px; object-fit:cover; box-shadow:0 0 0 1px #ffffff14; }
.wh-nav .wn-actions .account[open]>.account-toggle { border-color:var(--wh-accent); box-shadow:inset 0 0 0 1px #080a0b,0 0 0 2px color-mix(in srgb,var(--wh-accent) 25%,transparent); }
.wh-nav .wn-actions .wn-action:focus-visible,.wh-nav .wn-actions .account-toggle:focus-visible { outline:2px solid #f2f6fa; outline-offset:4px; }
.wh-nav .wn-tooltip { position:absolute; top:calc(100% + 9px); left:50%; transform:translateX(-50%); z-index:50; padding:7px 10px; border:1px solid #4e5b64; border-radius:4px; background:#10151bf5; color:#eff4f8; box-shadow:0 5px 14px #0008; font:600 12px/1.3 Arial,Helvetica,sans-serif; letter-spacing:0; text-transform:none; white-space:nowrap; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .12s; }
.wh-nav .wh-account .wn-tooltip { left:auto; right:0; transform:none; }
.wh-nav .wn-action:focus-visible>.wn-tooltip,.wh-nav .wh-account:has(.account-toggle:focus-visible):not(:has(.account[open]))>.wn-tooltip { opacity:1; visibility:visible; }
.wh-nav .wn-actions .account-panel { max-width:calc(100vw - 48px); }
@media(hover:hover) and (pointer:fine){
 .wh-nav .wn-actions .wn-action:hover,.wh-nav .wn-actions .account-toggle:hover { border-color:#a9b8c4; background:linear-gradient(145deg,#2b3035,#15191d 72%); box-shadow:inset 0 0 0 1px #080a0b,inset 0 2px 0 1px #ffffff15,0 3px 9px #0008; filter:none; }
 .wh-nav .wn-actions .wn-join:hover { border-color:var(--wh-accent); box-shadow:inset 0 0 0 1px #080a0b,0 0 13px color-mix(in srgb,var(--wh-accent) 22%,transparent); }
 .wh-nav .wn-action:hover>.wn-tooltip,.wh-nav .wh-account:hover:not(:has(.account[open]))>.wn-tooltip { opacity:1; visibility:visible; }
}
@media(prefers-reduced-motion:no-preference){
 @media(hover:hover) and (pointer:fine){.wh-nav .wn-actions .wn-action:hover>img,.wh-nav .wn-actions .wn-action:hover>.wn-play { transform:translateY(-1px) scale(1.06); }}
 .wh-nav .wn-actions .wn-action:active { transform:translateY(1px); }
}
@media(max-width:760px){
 .wh-site .wh-nav { grid-template-columns:minmax(0,1fr) auto; gap:10px 12px; }
 .wh-site .wh-nav>.wn-actions { grid-column:2; }
 .wh-site .wh-nav>.wh-page-links { grid-column:1/-1; grid-row:2; border-top:1px solid #ffffff13; padding-top:5px; gap:2px; flex-wrap:wrap; }
 .wh-site .wh-nav>.wh-page-links>a { padding:10px 11px; }
 .wh-nav .wn-tooltip { font-size:11px; }
}
@media(prefers-reduced-motion:reduce){.wh-nav .wn-actions .wn-action,.wh-nav .wn-actions .wn-action>img,.wh-nav .wn-actions .wn-play,.wh-nav .wn-tooltip { transition:none; }}