/* ============================================================ 16BUCKS PORTAL — THE SHELL ============================================================ The Shell is the stadium; the Stage is the field. Every game on the network renders inside this shell. The shell is ALWAYS slate/carbon with gold as the network accent — it never takes on a game's colors. The game's own accent lives on the Stage only (the board below the header), exposed as --stage so a game can tint its own surfaces without ever touching network chrome. This file is additive: it defines its own tokens with the same names and values as web/index.html's :root so the flagship's look is preserved byte-for-byte if the two are ever merged. Do not fork the values — if index.html's palette changes, this changes with it. ============================================================ */ :root { /* --- network palette (mirrors index.html :root — keep in sync) --- DEEP NAVY, 2026-08-20. The flagship moved to navy during the Aug-18/19 visual pass and this file was not carried over, so the shell — the games drawer, and every surface it paints on Map Shot and Yearbook — stayed charcoal while the pages behind it were navy (founder screenshot: the drawer "is still gray"). These five values are copied verbatim from index.html :root, which is the source of truth per the note above. */ --turf:#0a1020; /* deep navy */ --turf2:#111a2e; /* panel */ --turf3:#182440; /* raised panel */ --line:#22304a; --line2:#31425f; --gold:#f2c94c; --gold-hot:#ffd75e; --ongold:#221a03; --stitch:#3c4654; --ink:#f4f6f8; --mut:#8b95a3; --win:#5fcf87; --loss:#e8596a; /* --- shell geometry --- THE PLATFORM: rail + stage are ONE centered unit, not a rail pinned to the viewport edge. On a 1920px monitor an edge-pinned rail makes the player crane left; centering puts the board in the line of sight and turns the rail into the console's edge rather than the browser's. Ads live OUTSIDE the platform, in the gutters. */ --rail-w:76px; /* icon-only strip — the narrow default */ --rail-pad:34px; /* air between the rail and the Stage; they must never kiss */ --shell-max:760px; /* the Stage — MUST equal the flagship's body max-width (unified-width ruling 2026-08-16: switching games must never move or resize the column; was 820) */ --platform:calc(var(--rail-w) + var(--rail-pad) + var(--shell-max)); /* rail + air + stage; derived so widening the rail never squeezes the board */ --gutter-w:300px; /* RIGHT RAIL ONLY — see the note in .gutter. */ --gutter-gap:32px; --hdr-h:60px; /* --- the Stage accent. Each game overrides this on . Network chrome NEVER reads --stage; only the board does. --- */ --stage:var(--gold); --stage-ink:#221a03; } /* Per-game Stage accents. The shell stays slate; only the field changes. Adding a game = one block here + one entry in GAMES[] in portal.js. */ body[data-game="16bucks"] { --stage:#f2c94c; --stage-ink:#221a03; } body[data-game="geo"] { --stage:#41d6a3; --stage-ink:#03251a; } /* MAP SHOT */ body[data-game="lineup"] { --stage:#6ba8ff; --stage-ink:#041634; } body[data-game="numbers"] { --stage:#ff8f5e; --stage-ink:#33130a; } body[data-game="yearbook"] { --stage:#e87ab0; --stage-ink:#330a1f; } body[data-game="crossbar"] { --stage:#c98cff; --stage-ink:#1e0a33; } * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; } body { font-family:'Barlow Condensed',-apple-system,system-ui,sans-serif; background: radial-gradient(1200px 500px at 50% -100px, rgba(242,201,76,.05), transparent 60%), /* was the old charcoal rgba(23,29,37,.55) — a grey bloom on a navy ground */ radial-gradient(1000px 700px at 50% 110%, color-mix(in srgb, var(--turf3) 55%, transparent), transparent 70%), var(--turf); color:var(--ink); margin:0; font-size:17px; letter-spacing:.2px; min-height:100vh; } .display { font-family:'Anton','Arial Black',sans-serif; font-weight:400; letter-spacing:.5px; } /* ============================================================ THE NETWORK HEADER [shield] | GAME TITLE ......... TODAY BOARDS YOU [flames] The shield is the network mark and never changes. The title is the GAME. That one divider is what turns a one-game site into a portal. ============================================================ */ .shell-hdr { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:0; /* column-scoped like the flagship's header (unified-width ruling): the bar and its border span the 760px stage, not the viewport */ /* 732px box = flagship parity (founder 2026-08-17): the flagship header lives INSIDE its body padding, so its bottom border spans 760-28. The shell matches by shedding its own horizontal padding into the max-width; content x-alignment with the 760 stage is unchanged ((760-732)/2 = 14). */ max-width:calc(var(--shell-max) - 28px); margin:0 auto; padding:13px 0; /* 63px total — exact flagship header height (founder 2026-08-16 night) */ border-bottom:1px solid var(--line); background:linear-gradient(var(--turf) 92%, rgba(10,16,13,0)); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } /* the games hamburger — the drawer's VISIBLE door on small screens (founder 2026-08-17: shield-tap alone was an invisible affordance) */ .gamesbtn { display:none; background:none; border:1px solid var(--line2); border-radius:9px; color:var(--gold); font-size:17px; line-height:1; padding:7px 10px; margin-right:10px; cursor:pointer; flex:none; } @media (max-width:900px){ .gamesbtn { display:block; } } /* network mark — also the mobile drawer trigger */ .netmark { display:flex; align-items:center; gap:0; background:none; border:none; padding:0; cursor:pointer; flex:none; } /* size the svg itself — shieldSVG() emits a classless , and the old `.netmark .shield` selector never matched, so the header mark rendered at zero width (latent since the shell was built; surfaced 2026-08-16 when the founder asked where MAP SHOT's shield was) */ .netmark svg { width:32px; height:36px; flex:none; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); } .netmark .caret { display:none; color:var(--mut); font-size:10px; margin-left:5px; } /* divider RETIRED (founder 2026-08-16 night): the flagship's tight shield-to-wordmark lockup is the house look. Rule kept dead for any stale markup; renderHeader no longer emits .hdr-div. */ .hdr-div { display:none; } .hdr-title { display:flex; flex-direction:column; line-height:1; min-width:0; margin-left:10px; } /* header shield glint — the flagship's shsweep, one pass then a long rest */ .netmark svg .hdrsweep { animation:shsweep 5.5s linear infinite; } @keyframes shsweep { 0% { transform:translateX(-72px); } 16% { transform:translateX(72px); } 100% { transform:translateX(72px); } } @media (prefers-reduced-motion:reduce){ .netmark svg .hdrsweep { animation:none; opacity:0; } } .hdr-title .gname { font-family:'Anton','Arial Black',sans-serif; font-weight:400; font-size:22px; letter-spacing:.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* the flagship keeps its gold wordmark; every other game is white-on-slate with the gold living in the shield. Prestige line under it. */ body[data-game="16bucks"] .hdr-title .gname { color:var(--gold); } /* the tagline: what the game IS, in one line — replaces "by 16Bucks" (founder order 2026-08-16). Styled like the flagship's "PICK SIX · BEAT THE BOSS" strapline: condensed caps, muted, quiet. */ .hdr-title .byline { font-family:'Barlow Condensed',sans-serif; font-style:normal; font-size:9.5px; font-weight:700; text-transform:uppercase; color:var(--mut); margin-top:3px; letter-spacing:2.2px; } body[data-game="16bucks"] .hdr-title .byline { display:none; } .hdr-right { margin-left:auto; display:flex; align-items:center; gap:0; } .shell-nav { display:flex; align-items:center; } .shell-nav a { color:var(--mut); text-decoration:none; margin-left:16px; font-weight:700; font-size:14px; letter-spacing:1.5px; cursor:pointer; text-transform:uppercase; padding:4px 0; border-bottom:2px solid transparent; white-space:nowrap; } .shell-nav a:hover { color:var(--ink); } .shell-nav a.on { color:var(--stage); border-color:var(--stage); } /* YOU — the shell's one nav item (2026-08-23, replaces the inert TODAY). It is NEVER .on: it opens an overlay, so it never marks a page you are on, and an underline here would claim otherwise. Hover carries the whole affordance, matching every other link in this bar. */ .shell-nav a.navyou { border-bottom-color:transparent; } .shell-nav a.navyou:hover { color:var(--stage); } /* ---- the streak chip: ONE flame, this game only (ruling 2026-08-16) ---- The network flame is dead. Every game runs the same chip — same flame, the game's accent color via --gcolor, and the label (WIN STREAK / DAY STREAK) spelling out what keeps it lit. Cross-game streaks live on the rail tokens as flame badges, not in the header. */ .flames { display:flex; align-items:center; gap:6px; margin-left:14px; } .flame { font-weight:700; font-size:13px; background:var(--turf3); border:1px solid var(--line2); border-radius:999px; padding:3px 9px; white-space:nowrap; display:flex; align-items:center; gap:4px; } .flame.game { color:var(--gcolor, var(--stage)); } .flame small { font-family:'Barlow Condensed'; font-size:9px; letter-spacing:1.4px; color:var(--mut); font-weight:600; } @media (max-width:480px){ .flame small { display:none; } } /* ============================================================ THE SHIELD STRIP (desktop) — the Discord-style game switcher. Slim, fixed, inside the shell. Tokens are shields, not squares: the shield IS the house shape, so the strip reads as one family. ============================================================ */ .rail { position:fixed; top:0; bottom:0; width:var(--rail-w); /* flanks the viewport-centered stage (unified-width ruling 2026-08-16): 50% — not 50vw — so the math agrees with margin:auto centering, which also excludes the scrollbar. Identical formula on every page. */ left:max(0px, calc(50% - var(--shell-max) / 2 - var(--rail-w) - 18px)); z-index:45; display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 0; /* the OLD charcoal was baked in here as literal rgba (18,22,28 / 12,15,19), so the drawer stayed gray even after the palette tokens went navy — the tokens above could not reach it. Same two stops, now derived: --turf2 over --turf, at the same .97 so the blur behind it still reads. */ background:linear-gradient(180deg, color-mix(in srgb, var(--turf2) 97%, transparent), color-mix(in srgb, var(--turf) 97%, transparent)); border-right:1px solid var(--line); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } /* "DAILIES" was 8px and effectively invisible, which left the strip reading as a column of mystery icons. It is the only thing telling a first-time visitor that this column is a set of games — make it legible. */ /* "Dailies" → "Today's games" + a size step (founder 2026-08-16 night: the old label was too small and told half the story) */ .rail-lab { font-family:'Barlow Condensed'; font-size:11px; letter-spacing:2.4px; color:#a7b1bf; font-weight:700; text-transform:uppercase; writing-mode:horizontal-tb; margin-bottom:7px; opacity:1; } /* ---------- THE WAY BACK (founder 2026-08-23) ---------- A row to /home at the TOP of the drawer, above the games label — it is not one of today's games, it is the shelf they sit on. Styled as drawer chrome, not as a token: muted at rest, ink on hover, and separated from the list by a hairline so it never reads as a sixth game. */ .railhome { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--mut); font-family:'Barlow Condensed'; font-weight:700; font-size:12.5px; letter-spacing:1.8px; text-transform:uppercase; padding:8px 8px; margin-bottom:9px; border-radius:9px; border-bottom:1px solid var(--line); border-bottom-left-radius:0; border-bottom-right-radius:0; cursor:pointer; } .railhome svg { flex:none; } @media (hover:hover){ .railhome:not(.on):hover { color:var(--ink); } } /* on the hub itself it is a marker, not a door (renderRail drops the href) */ .railhome.on { color:var(--stitch); cursor:default; } /* ---------- WIDE LABELED RAIL ---------- Wordless icons don't say "switch games" — even the founder momentarily lost track of which surface does the switching, and he designed it. On screens with slate to spare, the rail widens and each shield gets its NAME beside it. This is the honest answer to "what goes in column 2": not invented content, just the rail breathing into space that was already dead. */ .tok .rlabel { display:none; } /* divider aligns to the token column, not the rail, so it reads as belonging to the shields rather than floating in the gutter */ .rail hr { width:30px; border:none; border-top:1px solid var(--line2); margin:5px 0 5px 18px; align-self:flex-start; } .tok { position:relative; width:42px; height:47px; flex:none; background:none; border:none; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .16s ease; } /* hover lift is PORTABLE-POINTER ONLY (founder 2026-08-17: on touch the tap left tokens stuck mid-rise — iOS/Android :hover is sticky after a tap) */ .tok { -webkit-tap-highlight-color:transparent; } @media (hover:hover){ .tok:hover { transform:translateY(-2px) scale(1.06); } .tok:hover > svg { opacity:1; filter:none drop-shadow(0 2px 5px rgba(0,0,0,.55)); } } .tok > svg { width:100%; height:100%; display:block; filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)); } /* dim until you're on it — active game is full strength */ .tok:not(.on) > svg { opacity:.5; filter:grayscale(.45) drop-shadow(0 2px 5px rgba(0,0,0,.5)); } /* Discord's active pill, in the house language — lit in the ACTIVE GAME's color, not network gold (founder 2026-08-16: the pill marks THIS game, and gold beside a green shield read as a mismatch; flagship still gets gold because gold IS its color). On a coming-soon page the B&W token still lights a COLORED pill — deliberate: the pill says "you are here," not "this shipped," and it's the one drop of color a soon token gets. */ .tok::before { content:""; position:absolute; left:-11px; top:50%; transform:translateY(-50%); width:4px; height:0; border-radius:0 3px 3px 0; background:var(--gcolor, var(--gold)); transition:height .18s ease; } /* Rail geometry. The rail is flush to the viewport edge and the active pill hangs 11px to the LEFT of the token, so a token centered by flexbox would (a) clip the pill off-screen and (b) read as sitting too far left once the pill is lit. Rail 76 = 18 gutter + 42 token + 16 gutter: the pill lands at x=7 with real air beside it, and the token still reads centered because the lit pill occupies the extra 2px of visual weight on the left. */ .rail .tok { margin-left:18px; } .tok.on::before { height:26px; } .tok.on > svg { opacity:1; filter:drop-shadow(0 0 7px rgba(242,201,76,.4)); } /* played-today checkmark — the to-do-list mechanic. The mark is an inline SVG, never a "✓" glyph: Safari substitutes the character from a fallback font inside this 900-weight circle and garbles it (founder saw it). */ .tok .done { position:absolute; right:-1px; bottom:-1px; width:15px; height:15px; border-radius:50%; background:var(--win); color:#052913; display:grid; place-items:center; border:2px solid var(--turf2); } .tok .done svg { width:8px; height:8px; display:block; } /* unplayed rows carry an INVISIBLE placeholder mark so the flame column aligns across rows whether or not the ✓ exists (founder 2026-08-17) */ .tok .done.ph { visibility:hidden; } /* coming-soon teaser tokens, v3 (founder 2026-08-16 evening): BLACK & WHITE shields — color is earned by shipping — but still CLICKABLE with their soon pages behind them (v2's doors stay; v2's full color is dead; v1's inert tokens stay dead). Grayscale holds on hover on purpose. */ .tok.soon > svg, .tok.soon:hover > svg { opacity:.55; filter:grayscale(1) drop-shadow(0 2px 5px rgba(0,0,0,.5)); } .tok .soontag { position:absolute; right:-8px; top:-4px; font-size:7.5px; font-weight:700; letter-spacing:1.4px; background:var(--turf3); border:1px solid var(--line2); border-radius:999px; padding:1px 5px; color:var(--mut); line-height:1.4; } /* In LABELED modes (wide rail + mobile drawer) the SOON marker rides UNDER the name as a sub-line — a pill beside the name was eating the label's room and truncating "NUMBERS GAME" (founder: full names, never truncate). The corner pill survives only in icon-only mode, where there is no name. */ .tok .soonsub { display:none; font-style:normal; } @media (min-width:1180px), (max-width:900px){ .rail .tok .soontag { display:none; } .rail .tok .soonsub { display:block; font-family:'Barlow Condensed'; font-size:8.5px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase; color:var(--stitch); margin-top:2px; } } /* the streak badge — the "you have a flame over there" reminder. Same flame on every token; the count tints to the game's own color. */ .tok .tokstreak { position:absolute; right:-6px; top:-5px; font-size:8.5px; font-weight:700; background:var(--turf3); border:1px solid var(--line2); border-radius:999px; padding:1px 4px; line-height:1.3; color:var(--gcolor, var(--gold)); letter-spacing:.3px; white-space:nowrap; } /* tooltip flyout */ .tok .tip { position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(-6px); background:var(--turf3); border:1px solid var(--line2); border-radius:7px; padding:6px 11px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .14s, transform .14s; box-shadow:0 8px 22px rgba(0,0,0,.55); z-index:60; } .tok:hover .tip { opacity:1; transform:translateY(-50%) translateX(0); } .tok .tip b { display:block; font-family:'Anton'; font-size:13px; letter-spacing:.6px; color:var(--ink); font-weight:400; } .tok .tip i { font-style:normal; font-size:11px; color:var(--mut); letter-spacing:.6px; } .tok .tip::after { content:""; position:absolute; right:100%; top:50%; transform:translateY(-50%); border:6px solid transparent; border-right-color:var(--line2); } /* ---------- WIDE LABELED RAIL ---------- Wordless icons don't say "switch games" — even the founder momentarily lost track of which surface does the switching, and he designed it. On screens with slate to spare, the rail widens and each shield gets its NAME beside it. This is the honest answer to "what goes in column 2": not invented content, just the rail breathing into space that was already dead. MUST stay after the base .tok rules — same specificity, so source order decides. Placing it earlier silently loses to `.tok { width:42px }`. */ @media (min-width:1180px) { /* 200 (was 186): "NUMBERS GAME" is the longest label and the founder ruled full names in the rail — the name never truncates, the rail makes room. 208 (was 200): the in-row flame+check cluster costs ~46px and "MAP SHOT" clipped by 2px at 200. Geometry still clears: at the 1180 gate the rail ends at 208 and the centered column starts at 210. */ :root { --rail-w:208px; } .rail { align-items:stretch; padding:16px 12px; gap:3px; } .rail-lab { padding-left:10px; } .rail hr { width:auto; margin:7px 10px 7px 10px; align-self:auto; } .rail .tok { width:auto; height:auto; justify-content:flex-start; gap:11px; padding:7px 9px; border-radius:10px; margin-left:0; } .rail .tok:hover { transform:none; background:rgba(255,255,255,.04); } .rail .tok > svg { width:34px; height:38px; flex:none; } .rail .tok.on { background:rgba(242,201,76,.08); } .rail .tok::before { left:-12px; } .rail .tok.on::before { height:28px; } /* the flyout tooltip is redundant once names are visible */ .rail .tok .tip { display:none; } .rail .tok .rlabel { display:block; min-width:0; text-align:left; font-family:'Anton','Arial Black',sans-serif; font-weight:400; font-size:13px; letter-spacing:.6px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rail .tok.on .rlabel { color:var(--ink); } .rail .tok .done { position:static; margin-left:auto; flex:none; } /* the flame joins the row (founder review 2026-08-16 night: corner-floating badges read as detached notification dots and turn to confetti at six live games) — right cluster reads 🔥n then ✓, one standings column. BARE text in-row (no pill chrome): the pill ate label width and truncated names, and names never truncate (ruled). */ .rail .tok .tokstreak { position:static; order:5; margin-left:auto; flex:none; background:none; border:none; padding:0; font-size:10.5px; letter-spacing:0; } .rail .tok .done { order:6; } .rail .tok:has(.tokstreak) .done { margin-left:8px; } } /* ============================================================ PAGE BODY — the Stage ============================================================ */ .shell-body { max-width:var(--shell-max); margin:0 auto; padding:0 14px 60px; } /* THE PLATFORM. rail + stage centered as one console. The left padding is the rail's own width (the rail is fixed and would otherwise overlap the stage); the outer margin centers the whole unit. Below the platform width this collapses to a plain left offset, so nothing breaks on a laptop. */ /* RIGHT-RAIL LAYOUT. With one ad instead of two, the platform must NOT sit at dead viewport center — the ad would hang off to one side and the whole page would read lopsided. Instead the PAIR (platform + gap + ad) is centered as a unit, which shifts the platform left by half the ad's footprint. That is the --pair-shift below. When no ad is showing, the shift is 0 and the platform centers normally. */ :root { --pair-shift:0px; } /* THE PLATFORM IS RETIRED (unified-width ruling 2026-08-16): centering rail+stage as one console put the shell pages' column ~55px right of the flagship's viewport-centered body, so every game switch jumped sideways. Now EVERY page runs the flagship's geometry — a 760px column at true viewport center, the rail flanking it (see .rail's left formula). The wrap is a plain full-height block; the stage centers itself. */ .shell-wrap { max-width:none; margin:0; padding-left:0; min-height:100vh; } /* ---------- ad gutters ---------- SYMMETRIC BY LAW (300/300), and the reason matters. The industry-standard 160-left/300-right split works on sites whose content column is 900-1200px, where a 140px difference is a small fraction of the whole. THIS stage is 760px: an asymmetric split would push the optical center well right of the real one and re-introduce exactly the lopsidedness the platform fixes. The rail already adds visual weight on the left; matched gutters let it read as deliberate instead of accidental. Reserved space only — never let an ad be the first thing the eye sees. ON PLACEHOLDER WEIGHT: an EMPTY dashed outline floating in dead space is visually louder than the game — the eye is drawn to holes. A real ad is a dense filled rectangle that recedes. So the placeholder is rendered as a filled panel at the real dimensions: it previews the finished page instead of previewing two voids. Swap the fill for the ad tag; geometry unchanged. */ .gutter { position:fixed; top:96px; width:var(--gutter-w); height:600px; z-index:5; /* was hardcoded charcoal — same two stops derived from the palette */ background:linear-gradient(180deg, color-mix(in srgb, var(--turf3) 55%, transparent), color-mix(in srgb, var(--turf2) 40%, transparent)); border:1px solid var(--line); border-radius:10px; display:none; align-items:center; justify-content:center; color:var(--stitch); font-size:10px; letter-spacing:2px; text-transform:uppercase; } /* THE LEFT SLOT IS DEAD. Do not re-add it. A left-hand skyscraper sits opposite the reading path, is the weakest-viewability unit on a content site, and costs far more in layout than it returns in revenue. The right unit does the overwhelming majority of sidebar earnings; the real money on a daily game is the post-game in-content slot at peak attention. */ .gutter.l { display:none !important; } /* The ad sits one gap to the right of the CENTERED stage (unified-width ruling 2026-08-16 — the platform and its pair-shift are retired; the founder shrank the stage to 760 network-wide precisely to leave this room). DORMANT until the ad ships: no page renders a .gutter element and nothing turns the display on. When it ships, gate the 300 tier at ≥1500px (760 stage + 2×(32 gap + 300 ad) = 1424 keeps the pair clear of the rail on the left) and it lights up on EVERY page identically. */ .gutter.r { left:calc(50% + var(--shell-max) / 2 + var(--gutter-gap)); } /* ============================================================ MOBILE — the rail becomes a drawer off the shield. Rationale: the flagship's play dock owns the bottom of the phone viewport (--belt-h:172px). A bottom switcher would fight it, and a permanent 64px rail steals a board column. So: tap the shield. ============================================================ */ .scrim { position:fixed; inset:0; background:rgba(4,6,9,.72); z-index:50; opacity:0; pointer-events:none; transition:opacity .2s; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); } .scrim.open { opacity:1; pointer-events:auto; } /* the open drawer owns the touch — the page behind must not scroll (founder 2026-08-17) */ body.raillock { overflow:hidden; } /* narrow band: the centered column can't clear the rail, so the shell pages' stage yields right (the flagship does the same for in its own stylesheet — keep the two shims in step) */ @media (min-width:901px) and (max-width:947px) { .rail { left:0; } .shell-body, .shell-hdr { margin-left:calc(var(--rail-w) + 16px); margin-right:auto; } } @media (max-width:900px) { /* the platform dissolves — on a phone there is no gutter to sit in, so the console framing (borders, shadow, centering) would just be noise */ .shell-wrap { padding-left:0; max-width:none; border:none; box-shadow:none; background:none; min-height:0; /* no ad on mobile, so no pair-shift — margin-left MUST be reset here or the desktop offset leaks through and pushes the page off-centre */ margin-left:0; margin-right:0; transform:none; } :root { --pair-shift:0px; } .netmark .caret { display:inline; } .rail { left:0; /* re-pin to the viewport edge as a drawer */ width:min(268px, 82vw); /* ABOVE the scrim in drawer mode (founder bug 2026-08-17: the open drawer rendered dimmed UNDER the z-50 scrim — desktop keeps 45 because there the scrim never shows) */ z-index:55; transform:translateX(-100%); transition:transform .22s cubic-bezier(.3,.8,.4,1); align-items:stretch; padding:16px 14px; gap:4px; /* shadow ONLY while open (founder 2026-08-17): the closed drawer sits 1px off-screen and its 40px blur was painting a dark vignette down the left edge of every page */ box-shadow:none; } .rail.open { transform:translateX(0); box-shadow:14px 0 40px rgba(0,0,0,.6); } .rail-lab { padding-left:4px; margin-bottom:8px; font-size:9px; } .rail hr { width:100%; } /* drawer rows read as a list, not a strip */ .tok { width:100%; height:auto; justify-content:flex-start; gap:12px; padding:9px 8px; border-radius:9px; } .tok:hover { transform:none; } .tok > svg { width:34px; height:38px; flex:none; } .tok.on { background:rgba(242,201,76,.09); } .tok::before { left:0; border-radius:0 3px 3px 0; } .tok.on::before { height:30px; } .tok .tip { position:static; opacity:1; transform:none; background:none; border:none; padding:0; box-shadow:none; pointer-events:auto; text-align:left; } .tok .tip::after { display:none; } .tok .done { position:static; margin-left:auto; order:6; } .tok .tokstreak { position:static; order:5; margin-left:auto; flex:none; background:none; border:none; padding:0; font-size:10.5px; letter-spacing:0; } .tok:has(.tokstreak) .done { margin-left:8px; } .shell-hdr { padding:9px 12px; } .hdr-div { margin:0 10px; } .hdr-title .gname { font-size:19px; } /* on a phone the nav links collapse to the flames; the drawer carries nav */ .shell-nav a { margin-left:12px; font-size:12.5px; letter-spacing:1px; } .flames { margin-left:9px; } .flame { font-size:12px; padding:2px 7px; } .flame small { display:none; } } @media (max-width:560px) { .hdr-title .byline { display:none; } .shell-nav { display:none; } /* nav lives in the drawer at phone width */ } /* drawer-only nav block (hidden on desktop where the header carries it) */ .drawer-nav { display:none; margin-top:auto; padding-top:12px; border-top:1px solid var(--line2); } @media (max-width:560px) { .drawer-nav { display:block; } } .drawer-nav a { display:block; color:var(--mut); text-decoration:none; font-weight:700; font-size:14px; letter-spacing:1.5px; text-transform:uppercase; padding:9px 8px; cursor:pointer; border-radius:8px; } .drawer-nav a.on { color:var(--gold); background:rgba(242,201,76,.08); } /* ============================================================ SHARED STAGE FURNITURE — so a stub game looks like a 16bucks game with zero extra CSS. Typography is the glue (house rule). ============================================================ */ .card { background:linear-gradient(180deg,var(--turf3),var(--turf2)); border:1px solid var(--line); border-radius:16px; padding:18px; margin-top:16px; } .kicker { font-size:12px; letter-spacing:3px; color:var(--stage); text-transform:uppercase; font-weight:700; } .edition { font-family:'Barlow Condensed'; font-size:11.5px; letter-spacing:2.5px; color:var(--mut); font-weight:600; } .krow { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-top:16px; } h1.big { font-size:clamp(26px,7vw,40px); line-height:.98; transform:skewX(-4deg); text-shadow:2px 3px 0 rgba(0,0,0,.55); margin:10px 0 0; } .sub { color:var(--mut); font-size:14px; letter-spacing:1.5px; text-transform:uppercase; font-weight:600; margin-top:6px; } button.goldbtn { background:linear-gradient(180deg,var(--gold-hot),var(--gold)); border:none; color:var(--ongold); border-radius:10px; padding:11px 18px; font-weight:700; cursor:pointer; font-family:'Barlow Condensed'; font-size:15px; letter-spacing:1px; } button.stagebtn { background:var(--stage); border:none; color:var(--stage-ink); border-radius:10px; padding:11px 18px; font-weight:700; cursor:pointer; font-family:'Barlow Condensed'; font-size:15px; letter-spacing:1px; } .ghostbtn { background:var(--turf3); border:1px solid var(--line2); color:var(--ink); border-radius:10px; padding:9px 15px; cursor:pointer; font-weight:700; font-family:'Barlow Condensed'; font-size:14px; letter-spacing:1px; } /* ============================================================ THE SHELF — /games hub + the post-game cross-promo rail. Discovery happens after the dopamine, not before it. ============================================================ */ .shelf { display:grid; gap:12px; margin-top:14px; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); } /* VISUAL HIERARCHY (the real fix for "it feels busy"): when the clue card, the support text and the promo cards all share one background + border + radius, nothing recedes and the eye has no path through the page. It reads as noise even with few elements. Secondary furniture is therefore FLAT — no panel fill, no border at rest — so exactly one surface per screen dominates. The card treatment returns on hover, where it means "this is clickable". */ .gcard { display:flex; align-items:center; gap:13px; text-align:left; background:none; border:1px solid transparent; border-radius:14px; padding:13px 12px; cursor:pointer; transition:background .16s, border-color .16s; color:inherit; text-decoration:none; } .gcard:hover { background:linear-gradient(180deg,var(--turf3),var(--turf2)); border-color:var(--gcolor,var(--gold)); } .gcard svg { width:40px; height:45px; flex:none; } .gcard .meta { min-width:0; } .gcard .nm { font-family:'Anton'; font-size:17px; letter-spacing:.5px; color:var(--ink); font-weight:400; } .gcard .ds { font-size:12.5px; color:var(--mut); margin-top:3px; line-height:1.3; } .gcard .st { font-size:11px; color:var(--gcolor,var(--gold)); margin-top:5px; letter-spacing:1.4px; font-weight:700; text-transform:uppercase; } .gcard.soon { opacity:.62; } .gcard.soon .st { color:var(--mut); } /* On /games the cards ARE the content, not secondary furniture — they keep the solid panel treatment. Only the post-game promo rail flattens. */ .shelf-page .gcard { background:linear-gradient(180deg,var(--turf3),var(--turf2)); border-color:var(--line); } .shelf-page .gcard:hover { transform:translateY(-2px); } /* post-game rail — tighter, horizontal, sits under the share buttons */ .nextrail { margin-top:22px; } /* ---------- THE CLEAN SWEEP (founder 2026-08-23) ---------- The all-dailies-cleared state of the cross-promo rail: the row of shields, the idiom, one sub-line. A centered ceremony (the bare left-aligned label read as a leftover section header), zero motion. */ .sweep { text-align:center; padding:30px 0 14px; } .sweepshields { display:flex; justify-content:center; gap:12px; } .sweepshields svg { width:32px; height:36px; filter:drop-shadow(0 3px 8px rgba(0,0,0,.45)); } .sweephead { font-family:'Anton','Arial Black',sans-serif; font-size:19px; letter-spacing:2.6px; text-transform:uppercase; color:var(--ink); margin-top:12px; } .sweepsub { font-size:12.5px; letter-spacing:.4px; color:var(--mut); margin-top:5px; } .nextrail .rlab { font-size:11px; letter-spacing:2.5px; text-transform:uppercase; font-weight:700; color:var(--mut); display:flex; align-items:center; gap:10px; } .nextrail .rlab::after { content:""; flex:1; height:1px; background:var(--line); } /* ---------- SQUAD SUB-ROWS (hub lane, 2026-08-17) ---------- The variants of 16 BUCKS a player actually plays — Global plus every adopted franchise — listed under the flagship token in the DRAWER only. Hidden on the desktop shield strip on purpose: that strip is one shield per game, and mixing variant rows into it breaks the identity system. Team color is a dot + an active bar, never a filled row: a squad is a lane inside 16 Bucks, not a brand competing with it. ── GATED ON THE DRAWER, NOT ON THE VIEWPORT (founder 2026-08-23) ── The original gate was `max-width:900px` because at the time the rail WAS a pinned 76/208px icon strip above that width, and variant rows have no room in a strip. That premise is gone: the NO RAIL COLUMN ANYWHERE ruling at the end of this file turned the rail into an off-canvas drawer at EVERY width, so a desktop player opening the hamburger got the same list a phone gets — minus his squads. The rule the founder actually wanted has always been "visible when the drawer is open", so that is what it now says. If a pinned strip ever returns, this stays correct: a strip is not .open. `.rail.open` is the state both toggleRail() (class) and the hub's hubRail() (class + inline transform) set, so one selector covers both. */ .sqwrap { display:none; } /* THE INDENT IS LEFT-ONLY (founder 2026-08-26: squad flames/checks never lined up with the game rows'). The wrapper used to inset BOTH edges by 20px, so no width tweak inside .sqrow could ever pull its right-hand marks out to the game row's right edge. Negative right margin cancels the inset on that side; the rows stay visually indented under 16BUCKS, and the mark columns share one right edge with every token above and below. */ /* THE INDENT IS LEFT-ONLY (founder 2026-08-26: squad flames/checks never lined up with the game rows'). Only the LEFT edge insets — the right edge stays flush with the tokens above and below, so the flame/check columns are shared. MEASURED against .tok: token box right edge -15, squad row was +1 before this. Do not add right margin/padding here without re-measuring both rows; the marks are a column, not a decoration. */ .rail.open .sqwrap { display:block; margin:2px 0 6px 12px; border-left:1px solid var(--line2); padding-left:8px; } /* THE MARK COLUMN IS PINNED, NOT FLOWED (founder 2026-08-26, after three failed padding tweaks — MEASURE, don't nudge). The squad rows sit inside .sqwrap, which insets them 12px margin + 8px padding + 1px border from the left; every attempt to cancel that on the right with margins left the marks 8px inboard of the tokens'. So the cluster is now ABSOLUTELY positioned against the .rail's own padding box, exactly like the token's own right edge: both end at the same x no matter what the row is nested in. `right` here is measured from the sqrow's border box, which the negative offset walks back out to the rail's inner edge (12+8+1 = 21px of inset, minus the 9px the tokens leave = -12px). */ .sqrow { position:relative; display:flex; align-items:center; gap:9px; text-decoration:none; padding:7px 8px; border-radius:8px; color:var(--mut); font-size:13.5px; letter-spacing:.6px; font-weight:600; } .sqrow .sqmarks { position:absolute; right:9px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:19px; } .sqrow .sqdot { width:9px; height:9px; border-radius:3px; flex:none; background:var(--sqc, #4a5563); } .sqrow .sqnm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sqrow.on { color:var(--ink); background:rgba(242,201,76,.08); } /* ONE CHECK MARK ON THE NETWORK + ONE COLUMN GRID (founder 2026-08-26: "why the fuck are there different checkmarks here? also why aren't the checkmarks and flames aligned?"). Squad rows had grown their own bare ✓ glyph while game tokens wore the filled green disc, and the squad flame/ check trailed the name inline instead of holding a column. Both now match the token: same disc, and fixed-width slots (with hidden placeholders, the .done.ph pattern from 2026-08-17) so every flame and every check lines up down the drawer whether or not a given row has them. */ /* the marks match the token's EXACTLY: 10.5px flame, 15px disc, 8px check. FIXED WIDTH on the flame (measured 2026-08-26): the token's flame is text in the row flow and the squad's is inside the pinned cluster, so identical font-size still left them 11px apart. A fixed slot ends the argument. */ .sqrow .sqst { flex:none; font-size:10.5px; color:var(--gold); font-variant-numeric:tabular-nums; } .sqrow .sqdone { flex:none; width:15px; height:15px; border-radius:50%; background:var(--win); color:#052913; display:grid; place-items:center; } .sqrow .sqdone svg { width:8px; height:8px; display:block; } /* an unplayed row still holds the check's slot so the column never breaks */ .sqrow .sqdone.ph { visibility:hidden; } /* the name must not run under the pinned marks */ .sqrow .sqnm { padding-right:52px; } /* invisible placeholders hold the columns on rows without a flame or a check */ .sqrow .sqst.ph, .sqrow .sqdone.ph { visibility:hidden; } /* hover lift stays out of touch territory (the sticky-:hover rule) */ @media (hover:hover){ .sqrow:hover { color:var(--ink); } } /* ============================================================ NO RAIL COLUMN ANYWHERE (founder ruling 2026-08-18, enforced network-wide 2026-08-20). The games list lives behind the hamburger on EVERY page. The rule was written on Aug 18 and its comment already said "on every page, hub and board alike" — but it was only ever implemented as an override inside web/index.html, so the flagship lost its rail while Map Shot and Yearbook kept a pinned 208px column at desktop widths (founder 2026-08-20: "you need to remove the left column from all the fucking games too"). It lives HERE now, not copy-pasted into each game, so a new game inherits it by default instead of having to remember. Placed at the END of the file deliberately: the desktop pinning rules above (min-width:1180px) have the same specificity, so source order is what decides. The open state is driven by the shell's toggle (an inline transform), which is why .open must carry the same specificity — body .rail.open, not .rail.open. ============================================================ */ body .rail { position:fixed; left:0; top:0; bottom:0; width:min(268px,82vw); z-index:55; transform:translateX(-100%); transition:transform .22s cubic-bezier(.3,.8,.4,1); align-items:stretch; padding:16px 14px; } body .rail.open { transform:translateX(0); box-shadow:14px 0 40px rgba(0,0,0,.6); } /* THE DRAWER SCROLLS ITSELF (2026-08-23). It was always a fixed full-height column with no overflow rule, which was survivable while squad rows only appeared under 900px. Now that they show whenever the drawer is open (see .sqwrap), a desktop player with several adopted franchises can run the list past the viewport — and the page behind is frozen by body.raillock, so without this the bottom rows are simply unreachable. */ body .rail { overflow-y:auto; overscroll-behavior:contain; } /* the stage is no longer flanked by anything — let it center on the viewport instead of budgeting for a rail that is not there */ body .stage, body .platform { margin-left:auto; margin-right:auto; } /* ⚠️ CLASS, NOT ID. The flagship's own override says `#gamesbtn` because index.html gives its button an id; the SHELL renders `.gamesbtn` (see .gamesbtn above, which is display:none over 900px because the rail used to be there). Matching only #gamesbtn hid the rail on Map Shot and Yearbook while leaving NO WAY to open the drawer at desktop widths — caught in verification 2026-08-20. Cover both. */ .gamesbtn, #gamesbtn { display:block !important; } /* ============================================================ THE GLOW CARD (founder 2026-08-22, from the geosports.app reference: "the gradients around everything… really sharp"). A gradient RING — bright at the top edge, cooling through near- nothing, warming into the game's own accent at the bottom — over a deep vertical panel gradient, with a soft accent-tinted halo in the drop shadow. The ring is drawn by the two-layer background trick: an opaque panel gradient clipped to padding-box under a ring gradient clipped to border-box, showing through the 1px transparent border. Tint follows --stage, so each game's card wears its own color without per-game CSS. ============================================================ */ .glowcard{ border:1px solid transparent; border-radius:20px; background: linear-gradient(180deg, color-mix(in srgb, var(--turf2) 94%, #ffffff 6%) 0%, var(--turf2) 42%, color-mix(in srgb, var(--turf) 86%, #000 14%) 100%) padding-box, linear-gradient(180deg, rgba(244,246,248,.20), rgba(244,246,248,.04) 42%, color-mix(in srgb, var(--stage, var(--gold)) 34%, transparent) 100%) border-box; box-shadow:0 22px 56px rgba(0,0,0,.5), 0 0 34px color-mix(in srgb, var(--stage, var(--gold)) 9%, transparent); } /* ============================================================ THE YOU PANEL (founder 2026-08-23) — the network dashboard the header's YOU link opens. Rendered by openYou() in portal.js, so it exists on every page in the network. Structure follows geo.html's .hiwmodal/.hiwcard (scrim + sticky head + scrolling body), but the classes are namespaced .you* and the surfaces are drawn from PORTAL tokens rather than geo's hardcoded #171f29/#10151c. That is the whole reason not to reuse geo's rules: this panel opens on five different rooms and has to sit right in all of them, so it takes --turf2/--line/--ink/--mut and never a game's own colour. Per-ROW accent is a different thing — each row pins its own --gcolor/--stage inline. ============================================================ */ .youmodal { position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:18px; } .youmodal[hidden] { display:none; } .youscrim { position:absolute; inset:0; background:rgba(2,5,9,.68); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } .youcard { position:relative; width:min(430px,100%); max-height:84vh; overflow:auto; border-radius:16px; border:1px solid var(--line2); background:linear-gradient(180deg,var(--turf2),var(--turf)); box-shadow:0 30px 80px rgba(0,0,0,.6); } .youhead { position:sticky; top:0; z-index:2; display:flex; align-items:center; padding:14px 16px; background:color-mix(in srgb, var(--turf2) 92%, transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-bottom:1px solid var(--line2); } .youhead span { font-family:'Anton','Arial Black',sans-serif; font-weight:400; font-size:14px; letter-spacing:1.8px; text-transform:uppercase; color:var(--ink); } .youx { margin-left:auto; width:28px; height:28px; border-radius:8px; border:1px solid var(--line2); background:transparent; color:var(--ink); font-size:17px; line-height:1; cursor:pointer; } .youx:hover { border-color:var(--gold); color:var(--gold); } .youbody { padding:8px 10px 12px; } /* ---- one row per game ---- A three-part grid: mark+name on the left, the flame, then the week's bars (or the flagship's signpost) hard right. Fixed columns, so the sparklines line up down the panel and a week can be compared across games at a glance — that alignment is the only reason this reads as a dashboard. */ .yourow { display:grid; grid-template-columns:26px minmax(0,1fr) auto auto; align-items:center; gap:10px; text-decoration:none; color:inherit; padding:10px 10px; border-radius:12px; border:1px solid transparent; transition:background .16s, border-color .16s; } @media (hover:hover){ .yourow:hover { background:rgba(255,255,255,.04); border-color:var(--gcolor,var(--gold)); } } .yourow .youmark { display:flex; align-items:center; } .youmark svg { width:26px; height:29px; display:block; flex:none; filter:drop-shadow(0 2px 5px rgba(0,0,0,.5)); } .yourow .younm { font-family:'Anton','Arial Black',sans-serif; font-weight:400; font-size:15px; letter-spacing:.6px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .yourow .youst { font-size:12px; font-weight:700; color:var(--gcolor,var(--gold)); white-space:nowrap; font-variant-numeric:tabular-nums; } /* the flame is OPTIONAL, so the last column must be the one that always exists — the spark/subline is placed hard right rather than by index */ .yourow .yousub, .yourow .youspark { grid-column:4; } .yourow .yousub { font-size:11.5px; color:var(--mut); letter-spacing:.5px; white-space:nowrap; text-align:right; } .yourow .yousub.none { color:var(--stitch); } /* ---- the 7-day sparkline ---- Fixed 0-1000 scale, so a bar means the same height in every row and on every day. Bars grow from a shared baseline; a day never played is a faint dot on that baseline, never a zero-height bar (a zero-score day and an unplayed day are different facts and must not look alike). */ .youspark { display:flex; align-items:flex-end; gap:3px; height:30px; } .youbar { position:relative; width:9px; height:100%; display:flex; align-items:flex-end; justify-content:center; } .youbar > i { display:block; width:100%; border-radius:2px; } .youbar .youdot { height:3px; width:3px; border-radius:50%; background:var(--stitch); } /* TODAY is the one day that is still in play — it gets the number and a rail behind the column so the eye lands on it without a second colour */ .youbar.now { background:rgba(255,255,255,.05); border-radius:3px; } .youbar .younum { position:absolute; bottom:calc(100% + 2px); left:50%; transform:translateX(-50%); font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700; letter-spacing:.2px; color:var(--ink); font-variant-numeric:tabular-nums; } /* the number sits above the tallest possible bar, so the row buys it room */ .yourow:has(.younum) .youspark { height:30px; margin-top:12px; } @media (max-width:420px){ .youcard { width:100%; } .yourow { padding:10px 6px; gap:7px; } .yourow .younm { font-size:14px; } .youbar { width:8px; } } /* ---- LEAGUES + ACCOUNT in the YOU panel (leagues v1, 2026-08-24) ---- */ .youlab { font-family:'Anton','Arial Black',sans-serif; font-weight:400; font-size:12px; letter-spacing:1.4px; color:var(--mut); text-transform:uppercase; padding:14px 10px 4px; border-top:1px solid var(--line); margin-top:10px; } .youlgm { width:26px; text-align:center; font-size:15px; } .youhint { font-size:12px; color:var(--mut); line-height:1.45; padding:2px 10px 6px; } .youform { display:flex; gap:8px; padding:4px 10px 8px; } .youform input { flex:1; min-width:0; background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:9px; color:var(--ink); font:600 13px 'Barlow',sans-serif; padding:9px 10px; letter-spacing:.3px; } .youform input:focus { outline:none; border-color:var(--gold); } .youbtn { background:var(--gold); color:#161309; border:none; border-radius:9px; font:700 12px 'Barlow',sans-serif; letter-spacing:.8px; text-transform:uppercase; padding:9px 14px; cursor:pointer; } .youbtn.wide { display:block; width:calc(100% - 20px); margin:6px 10px 2px; } .youerr { font-size:11.5px; color:#e8596a; padding:0 10px 4px; min-height:14px; } /* the drawer's Watch / Lab rows sit under the game tokens, set off like Home. Only the FIRST of them wears the divider — with Watch hidden (2026-08-26) the Lab row inherits it, and if Watch returns the pair reads as one group instead of two rules stacked ten pixels apart. */ .watchrow, .labrow { margin-top:10px; border-top:1px solid var(--line); padding-top:12px; } .watchrow + .labrow { margin-top:0; border-top:0; padding-top:0; }