.app-header{grid-template-columns:minmax(0,1fr) auto}.app-menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;min-height:46px;padding:10px 15px;border:2px solid #b78612;border-radius:12px;background:var(--app-egg-yellow,#ffc83d);color:#493707;font:800 14px/1.3 Manrope,system-ui,sans-serif;box-shadow:0 3px 0 #b7861255;cursor:pointer}.app-menu-toggle>span{font-size:20px}.app-menu{box-sizing:border-box;width:min(460px,calc(100% - 28px));max-height:calc(100dvh - 40px);padding:22px;overflow:auto;border:2px solid #d5b548;border-radius:20px;background:#fffcf4;color:#183b43;overscroll-behavior:contain}.app-menu::backdrop{background:#123c43a6}.app-menu-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.app-menu-heading h2{font-size:24px;margin-top:5px;line-height:1.2}.app-menu-heading p{margin:0;color:#52656b;line-height:1.4}.app-menu-heading form{margin:0}.app-menu .app-menu-close{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid #b5ccc3;border-radius:50%;background:#eaf2ed;color:#183b43;font-size:26px;cursor:pointer}.app-menu-links{display:grid;gap:10px}.app-menu-links a{display:grid;grid-template-columns:24px minmax(0,1fr) 16px;align-items:center;gap:12px;min-height:52px;padding:12px 14px;border:1px solid #d7e5df;border-radius:12px;background:white;font:700 14px/1.4 Manrope,system-ui,sans-serif;color:#183b43;text-decoration:none;overflow-wrap:anywhere}.app-menu-links a>span:first-child{font-size:20px;text-align:center}.app-menu-links a[aria-current=page]{background:#fff0ad;border-color:#b78612}.app-menu-links a:focus-visible,.app-menu-close:focus-visible,.app-menu-toggle:focus-visible{outline:3px solid #126c68;outline-offset:3px}@media(hover:hover){.app-menu-links a:hover{background:#e8f4ee}}@media(max-width:760px){.app-header>.app-menu-toggle{grid-column:2;grid-row:1;min-width:88px;min-height:46px;margin:0}.app-menu{padding:18px}}html.game-invite .app-menu-toggle{display:none}

/* Keep the brand and actions in separate rows: neither may shrink into vertical text. */
.pc-app aside .brand{flex-direction:column;align-items:flex-start;gap:12px;font-size:15px!important}
.pc-app aside .brand img{width:88px;height:88px;object-fit:contain}
.pc-app .brand span,.pc-app .mobile-brand span{white-space:nowrap;word-break:normal;overflow-wrap:normal;letter-spacing:-.5px}
.pc-app .app-header .headright .pill,.pc-app .app-menu-toggle{white-space:nowrap;word-break:normal;overflow-wrap:normal}
@media(max-width:1050px){
 .pc-app .app-header{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:16px 10px;height:auto;min-height:0;padding:18px 0 22px;margin-bottom:22px}
 .pc-app .app-header .header-copy{grid-column:1/-1;grid-row:1}
 .pc-app .app-header .headright{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-column:1;grid-row:2;gap:8px;min-width:0;width:100%;margin:0}
 .pc-app .app-header .headright .pill{display:flex;align-items:center;justify-content:center;min-width:0;width:100%;min-height:46px;padding:10px 5px;font-size:12px;line-height:1.3;margin:0;border-radius:12px;gap:3px}
 .pc-app .app-header>.app-menu-toggle{grid-column:2;grid-row:2;min-width:0;min-height:46px;padding:10px;font-size:12px;margin:0;gap:5px}
}
@media(max-width:760px){
 .pc-app .app-header .header-copy{display:none}
 .pc-app .app-header .mobile-brand{display:flex;grid-column:1/-1;grid-row:1;align-items:center;justify-content:flex-start;gap:14px;min-width:0;width:100%;font-size:clamp(18px,5.1vw,28px)!important;line-height:1.2}
 .pc-app .app-header .mobile-brand img{width:88px;height:88px;flex:0 0 88px;object-fit:contain}
}
@media(max-width:360px){
 .pc-app .app-header .mobile-brand{gap:10px;font-size:18px!important}
 .pc-app .app-header .mobile-brand img{width:80px;height:80px;flex-basis:80px}
 .pc-app .app-header .headright{gap:6px}
 .pc-app .app-header>.app-menu-toggle{padding:10px 7px}
}
html.game-invite .pc-app .app-header{grid-template-rows:auto}

/* Give the full domain its own line so it stays large on narrow screens. */
@media(max-width:760px){
 .pc-app .app-header .mobile-brand{flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:clamp(26px,7.6vw,38px)!important;font-weight:800;line-height:1.15}
 .pc-app .app-header .mobile-brand img{width:124px;height:124px;flex:0 0 124px}
 .pc-app .app-header .mobile-brand span{display:block;text-align:center;white-space:nowrap;letter-spacing:-.6px}
}