/* Portfloor v2 (2026-10-15): the dark, game-style site. Shared by every page: tokens, the top bar with sign-in and the
   account menu, the phone menu (js/mnav.js), buttons and the footer. Every rule is scoped to the v2 pieces (body.v2,
   .bar, .foot, .mnav) so the older pages' own styles (css/site.css, same class and token names) are left alone. */
body.v2, .bar, .foot, .mnav { --y: #f5c518; --bg: #0b0c0f; --s1: #121419; --s2: #191c22; --ink: #fff; --mut: rgba(255,255,255,.62); --dim: rgba(255,255,255,.42);
  --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.18); --ease: cubic-bezier(.2,.8,.2,1);
  --display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif; --font: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; color-scheme: dark; }
html:has(body.v2) { background: #0b0c0f; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.v2 { margin: 0; background: var(--bg); color: var(--ink); font: 500 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
body.v2 *, .bar, .bar *, .foot, .foot *, .mnav, .mnav * { box-sizing: border-box; }
body.v2 a, .bar a, .foot a, .mnav a { color: inherit; text-decoration: none; }
body.v2 button, .bar button, .mnav button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
body.v2 :focus-visible, .bar :focus-visible, .foot :focus-visible, .mnav :focus-visible { outline: 3px solid var(--y); outline-offset: 3px; }
body.v2 .d, .mnav .d { font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; line-height: .88; letter-spacing: .005em; }
body.v2 .k { margin: 0; font: 800 12px var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--y); }
body.v2 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.v2 .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: 6px; background: var(--y); color: #111; font-weight: 800; }
body.v2 .skip-link:focus { top: 12px; }
.bar .wm, .foot .wm, .mnav .wm { font: 900 italic 26px var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.bar .wm::first-letter, .foot .wm::first-letter, .mnav .wm::first-letter { color: var(--y); }

/* ---------- the top bar: brand, the menu in the middle, sign-in on the right ---------- */
.bar { position: fixed; z-index: 50; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; padding: 20px 48px; color: #fff; font: 500 16px/1.5 var(--font); transition: background .3s, padding .3s, border-color .3s; border-bottom: 1px solid transparent; }
.bar.scrolled, .bar.solid { background: rgba(11,12,15,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding-top: 13px; padding-bottom: 13px; border-color: var(--line); }
.bar.stuck { position: sticky; top: 0; }   /* pages without a full-screen hero: the bar sits in the flow */
.bar .brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bar .tag { font: 700 11px var(--font); letter-spacing: .2em; color: var(--mut); text-transform: uppercase; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.25); white-space: nowrap; }
.bar .bar-nav { justify-self: center; display: flex; gap: 32px; font: 700 14px var(--font); color: rgba(255,255,255,.8); }
.bar .bar-nav a:hover { color: #fff; } .bar .bar-nav a[aria-current="page"] { color: #fff; box-shadow: 0 2px 0 var(--y); }
.bar .acts { position: relative; justify-self: end; display: flex; align-items: center; gap: 10px; }
.bar .g { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 15px; border-radius: 5px; border: 1px solid var(--line2); background: rgba(255,255,255,.1); font: 700 14px var(--font); cursor: pointer; transition: background .2s; }
.bar .g:hover { background: rgba(255,255,255,.18); } .bar .g svg { width: 16px; height: 16px; }
.bar .avatar { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--y); color: #111; font: 900 16px var(--font); cursor: pointer; }
.bar .account-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 270px; padding: 8px; border-radius: 10px; background: #15171c; border: 1px solid var(--line2); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.bar .account-menu p { margin: 0; padding: 10px 12px 12px; border-bottom: 1px solid var(--line); font: 600 13px var(--font); color: var(--mut); overflow-wrap: anywhere; }
.bar .account-menu a, .bar .account-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: 6px; background: none; font: 600 14px var(--font); text-align: left; cursor: pointer; }
.bar .account-menu a:hover, .bar .account-menu button:hover { background: rgba(255,255,255,.07); }
.bar .account-menu svg { width: 18px; height: 18px; flex: none; } .bar .account-menu small { display: block; color: var(--dim); font-size: 12px; } .bar .account-menu strong { font-weight: 700; }
/* pages that still load css/site.css: its older account-menu rules (grid, icons, ID-level sizes) stay out of the bar */
.bar .account-menu { display: block; } .bar .account-menu #account-email { padding: 10px 12px 12px; font-size: 13px; color: var(--mut); white-space: normal; overflow: visible; }
.bar .account-menu #signout::before { content: none; } .bar .account-menu .am-passes { border-block: 0; margin-bottom: 0; }
.bar .account-menu .am-passes span { display: block; } .bar .account-menu .am-passes small { font-weight: inherit; }
body.v2 .auth-status { position: fixed; z-index: 120; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; padding: 12px 16px; border-radius: 10px; background: #1b1e24; border: 1px solid var(--line2); font-size: 14px; }
.bar .burger { display: none; width: 42px; height: 42px; border: 0; border-radius: 6px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px var(--line2); cursor: pointer; place-items: center; }
.bar .burger i, .bar .burger i::before, .bar .burger i::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; position: relative; }
.bar .burger i::before, .bar .burger i::after { content: ''; position: absolute; left: 0; } .bar .burger i::before { top: -6px; } .bar .burger i::after { top: 6px; }

/* ---------- the phone menu ---------- */
.mnav { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; padding: 14px 18px calc(24px + env(safe-area-inset-bottom)); background: rgba(9,10,13,.97); color: #fff; font: 500 16px/1.5 var(--font); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: mnIn .22s ease-out; overflow-y: auto; }
@keyframes mnIn { from { opacity: 0; } to { opacity: 1; } }
.mnav .top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.mnav .x { width: 44px; height: 44px; border: 0; border-radius: 6px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px var(--line2); font-size: 22px; line-height: 1; cursor: pointer; }
.mnav ul { margin: 36px 0 0; padding: 0; list-style: none; }
.mnav li { border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(-18px); animation: mnLi .4s var(--ease) forwards; }
.mnav li:nth-child(2) { animation-delay: .04s; } .mnav li:nth-child(3) { animation-delay: .08s; } .mnav li:nth-child(4) { animation-delay: .12s; }
@keyframes mnLi { to { opacity: 1; transform: none; } }
.mnav li a { display: flex; align-items: center; justify-content: space-between; padding: 16px 2px; font: 900 italic 40px/1 var(--display); text-transform: uppercase; }
.mnav li a::after { content: '→'; font: 600 20px var(--font); color: var(--dim); } .mnav li a[aria-current] { color: var(--y); }
.mnav .cta { margin-top: auto; padding-top: 28px; display: grid; gap: 10px; }
.mnav .cta a, .mnav .cta button { display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border: 0; border-radius: 6px; background: none; font: 800 15px var(--font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.mnav .cta .p { background: var(--y); color: #111; font: 900 italic 28px var(--display); }
.mnav .cta .s { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); } .mnav .cta .s svg { width: 18px; height: 18px; }
.mnav .small { display: flex; justify-content: center; gap: 18px; margin-top: 18px; font: 600 13px var(--font); color: var(--dim); }

/* ---------- buttons ---------- */
body.v2 .btn { display: flex; align-items: center; justify-content: center; height: 54px; padding: 0 22px; border: 0; border-radius: 5px; font: 900 15px var(--font); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: filter .15s, transform .15s, background .2s; }
body.v2 .btn:hover { filter: brightness(1.08); } body.v2 .btn:active { transform: scale(.98); }
body.v2 .btn.y { background: var(--y); color: #111; } body.v2 .btn.w { background: #fff; color: #111; } body.v2 .btn.o { background: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
body.v2 .btn.o:hover { background: rgba(255,255,255,.06); }

/* ---------- the footer ---------- */
.foot { padding: 70px 48px 40px; border-top: 1px solid var(--line); color: var(--mut); font: 500 14px/1.5 var(--font); background: var(--bg); }
.foot .fcols { max-width: 1340px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; }
.foot .fbrand p { margin: 14px 0 0; max-width: 300px; line-height: 1.6; }
.foot .fh { margin: 0 0 14px; font: 800 12px var(--font); letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .foot a:hover { color: #fff; }
.foot .fbot { max-width: 1340px; margin: 56px auto 0; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; font-size: 13px; color: var(--dim); }

@media (max-width: 1100px) {
  .bar { padding: 18px 28px; gap: 18px; } .bar .tag { display: none; } .bar .bar-nav { gap: 18px; font-size: 13px; }
  .foot { padding: 60px 28px 40px; } .foot .fcols { grid-template-columns: repeat(4, 1fr); } .foot .fbrand { grid-column: span 4; }
}
@media (max-width: 760px) {
  .bar { padding: 14px 18px; grid-template-columns: auto 1fr; } .bar.scrolled, .bar.solid { padding-top: 10px; padding-bottom: 10px; }
  .bar .bar-nav, .bar .tag { display: none; } .bar .burger { display: grid; } .bar .g { height: 42px; padding: 0 12px; font-size: 13px; } .bar .avatar { width: 42px; height: 42px; }
  .foot { padding: 50px 20px calc(40px + env(safe-area-inset-bottom)); } .foot .fcols { grid-template-columns: 1fr 1fr; gap: 32px 20px; } .foot .fbrand { grid-column: span 2; } .foot .fbot { flex-direction: column; margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) { html:has(body.v2) { scroll-behavior: auto; } .mnav, .mnav li { animation: none; opacity: 1; transform: none; } }