/* Floppa Heist top bar: the same bar as floppaland.com (brand switcher, menu, language and the yellow
   button on the right). The game-mode switcher, the language picker and the right button are greyed
   out with "Coming soon" for now. Markup comes from tools/build.py (HEADER), on every page. */
header.fh{position:sticky;top:0;z-index:60;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
header.fh>.wrap{display:flex!important;align-items:center;gap:10px 16px;flex-wrap:nowrap!important;height:62px;min-height:0;max-width:none!important;margin:0!important;width:auto!important;padding:0 clamp(16px,2.5vw,40px)!important;flex-direction:row!important}
header.fh .brandsw{position:relative;display:inline-flex;align-items:center;gap:8px;flex:none}
header.fh .brand{font:400 26px "Sniglet",system-ui,sans-serif;color:#ffd65c;text-decoration:none;white-space:nowrap;line-height:1.2}
header.fh .brandtag{flex:none;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,214,92,.45);color:#ffd65c;font:700 11px/1.4 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
header.fh .brandbtn{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:rgba(255,255,255,.35);padding:0;cursor:not-allowed}
header.fh nav{margin-left:auto!important;display:flex;flex-wrap:nowrap!important;gap:2px;align-items:center;width:auto!important;overflow:visible}
header.fh nav a{white-space:nowrap;font:400 16px "Sniglet",system-ui,sans-serif;text-decoration:none;color:#fff;padding:8px 11px;border-radius:10px;transition:background .15s,color .15s;flex:none}
header.fh nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
header.fh nav a.on{color:#ffd65c;background:rgba(255,255,255,.06)}
header.fh .navright{display:flex;align-items:center;gap:6px;flex:none}
header.fh .langsoon{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:10px;border:1px solid rgba(128,128,128,.35);font:700 13px system-ui,sans-serif;color:#fff;opacity:.4;cursor:not-allowed;white-space:nowrap}
header.fh .navplay{background:linear-gradient(135deg,#ffd65c,#ff9f45);color:#1b1405;font:700 15px "Sniglet",system-ui,sans-serif;white-space:nowrap;padding:8px 12px;border-radius:10px;text-decoration:none;opacity:.55;cursor:not-allowed;letter-spacing:.04em}
header.fh [data-tip]{position:relative}
header.fh [data-tip]:hover::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#111;border:1px solid rgba(255,255,255,.15);color:#eee;font:600 12px system-ui,sans-serif;padding:6px 9px;border-radius:8px;white-space:nowrap;z-index:80;pointer-events:none}
@media (min-width:1100px) and (max-width:1380px){header.fh nav a{padding:8px 7px;font-size:15px}}
header.fh.fit1 nav a{padding:8px 6px;font-size:14px}
header.fh.fit1 .brand{font-size:23px}
header.fh.fit2 nav a{padding:6px 4px;font-size:13px}
header.fh.fit2 .brandtag,header.fh.fit2 .langsoon{display:none}
header.fh.fit2 .navplay{padding:7px 9px;font-size:13px}
/* phones: brand row on top, the menu scrolls sideways under it */
@media (max-width:820px){
 header.fh>.wrap{flex-wrap:wrap!important;height:auto;padding-top:8px!important;padding-bottom:6px!important;gap:4px 10px}
 header.fh .brand{font-size:24px}
 header.fh .navright{margin-left:auto}
 header.fh .langsoon,header.fh .navplay{display:none}
 header.fh nav{order:3;width:calc(100% + 18px)!important;margin:0 0 0 -9px!important;overflow-x:auto;scrollbar-width:none}
 header.fh nav::-webkit-scrollbar{display:none}
 header.fh nav a{padding:6px 8px;font-size:14px}
}