:root{ /* paper */ --paper:#f7f0dc; --paper2:#fdf8ea; --paper3:#efe6cd; --ink:#16130d; --ink2:#241f16; --ink3:#332c20; /* accents */ --turf:#37703c; --turf-dk:#255029; --turf-lt:#5d9a55; --gold:#d99a2b; --brick:#a94f2c; --violet:#5b3f8f; --teal:#2d7a72; --rose:#b6456b; --silver:#82868f; --bronze:#a06a3a; /* type */ --txt:#2c2820; --dim:#6d6454; --faint:#9a8f7c; --line:#ddd2b3; --line2:#c6b993; --r:3px; --shadow:6px 6px 0 var(--ink); --shadow-sm:4px 4px 0 var(--ink); --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --serif:'Playfair Display',Georgia,'Times New Roman',serif; --sans:'Barlow',system-ui,-apple-system,sans-serif; /* field texture -- swapped for a light-on-dark pair in night mode */ --field-numbers:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjkyIiBoZWlnaHQ9IjQ2Ij48dGV4dCB4PSIxMDQiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjMTYxMzBkIiBmaWxsLW9wYWNpdHk9IjAuMDkiIHRleHQtYW5jaG9yPSJzdGFydCI+MTA8L3RleHQ+PHRleHQgeD0iMjkyIiB5PSIzNCIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCIgZmlsbD0iIzE2MTMwZCIgZmlsbC1vcGFjaXR5PSIwLjA5IiB0ZXh0LWFuY2hvcj0ic3RhcnQiPjIwPC90ZXh0Pjx0ZXh0IHg9IjQ4MCIgeT0iMzQiIGZvbnQtZmFtaWx5PSJtb25vc3BhY2UiIGZvbnQtc2l6ZT0iMjQiIGZvbnQtd2VpZ2h0PSI3MDAiIGZpbGw9IiMxNjEzMGQiIGZpbGwtb3BhY2l0eT0iMC4wOSIgdGV4dC1hbmNob3I9InN0YXJ0Ij4zMDwvdGV4dD48dGV4dCB4PSI2NjgiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjMTYxMzBkIiBmaWxsLW9wYWNpdHk9IjAuMDkiIHRleHQtYW5jaG9yPSJzdGFydCI+NDA8L3RleHQ+PHRleHQgeD0iODU2IiB5PSIzNCIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCIgZmlsbD0iIzE2MTMwZCIgZmlsbC1vcGFjaXR5PSIwLjA5IiB0ZXh0LWFuY2hvcj0ic3RhcnQiPjUwPC90ZXh0Pjx0ZXh0IHg9IjEwNDQiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjMTYxMzBkIiBmaWxsLW9wYWNpdHk9IjAuMDkiIHRleHQtYW5jaG9yPSJzdGFydCI+NDA8L3RleHQ+PHRleHQgeD0iMTIzMiIgeT0iMzQiIGZvbnQtZmFtaWx5PSJtb25vc3BhY2UiIGZvbnQtc2l6ZT0iMjQiIGZvbnQtd2VpZ2h0PSI3MDAiIGZpbGw9IiMxNjEzMGQiIGZpbGwtb3BhY2l0eT0iMC4wOSIgdGV4dC1hbmNob3I9InN0YXJ0Ij4zMDwvdGV4dD48dGV4dCB4PSIxNDIwIiB5PSIzNCIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCIgZmlsbD0iIzE2MTMwZCIgZmlsbC1vcGFjaXR5PSIwLjA5IiB0ZXh0LWFuY2hvcj0ic3RhcnQiPjIwPC90ZXh0Pjx0ZXh0IHg9IjE2MDgiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjMTYxMzBkIiBmaWxsLW9wYWNpdHk9IjAuMDkiIHRleHQtYW5jaG9yPSJzdGFydCI+MTA8L3RleHQ+PC9zdmc+"); --field-lines:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NCIgaGVpZ2h0PSI0MCI+PGxpbmUgeDE9IjAuNzUiIHkxPSIwIiB4Mj0iMC43NSIgeTI9IjQwIiBzdHJva2U9IiMxNjEzMGQiIHN0cm9rZS1vcGFjaXR5PSIwLjA1IiBzdHJva2Utd2lkdGg9IjEuNSIvPjxsaW5lIHgxPSI0Ny4wIiB5MT0iNCIgeDI9IjQ3LjAiIHkyPSIxMSIgc3Ryb2tlPSIjMTYxMzBkIiBzdHJva2Utb3BhY2l0eT0iMC4wNiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48bGluZSB4MT0iNDcuMCIgeTE9IjI5IiB4Mj0iNDcuMCIgeTI9IjM2IiBzdHJva2U9IiMxNjEzMGQiIHN0cm9rZS1vcGFjaXR5PSIwLjA2IiBzdHJva2Utd2lkdGg9IjEuNSIvPjwvc3ZnPg=="); /* A faint fractal-noise fleck, tiled small -- the paper metaphor (--paper/--paper2/--paper3, the field texture above) stops short of actually looking like paper up close; this pushes it there without reading as a texture at all unless you're looking for it. Same light-on-dark swap in night mode as the field texture. */ --paper-grain:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz4KPGZpbHRlciBpZD0nbic+CjxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScwLjg1JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJyByZXN1bHQ9J3QnLz4KPGZlQ29sb3JNYXRyaXggaW49J3QnIHR5cGU9J21hdHJpeCcgdmFsdWVzPScwIDAgMCAwIDAuMDg2ICAwIDAgMCAwIDAuMDc1ICAwIDAgMCAwIDAuMDUxICAwIDAgMCAwLjA1IDAnLz4KPC9maWx0ZXI+CjxyZWN0IHdpZHRoPScxODAnIGhlaWdodD0nMTgwJyBmaWx0ZXI9J3VybCgjbiknLz4KPC9zdmc+"); /* position accents */ --pos-qb:#3f5d7d; --pos-rb:#5f7a3d; --pos-wr:#8a4a7a; --pos-te:#9c6b2e; --pos-k:#4a8a8a; --pos-def:#5a4f8a; /* Fixed (never redefined in night mode, unlike --pos-qb etc. above, which get re-tuned lighter there since they're meant as colored TEXT against the paper background). These back a solid badge FILL instead -- a light-mode-dark color that stays dark/saturated enough for light text on top in both themes, the same --ink-fixed/--paper-fixed idea applied to the position palette. */ --pos-qb-bg:#3f5d7d; --pos-rb-bg:#5f7a3d; --pos-wr-bg:#8a4a7a; --pos-te-bg:#9c6b2e; --pos-k-bg:#4a8a8a; --pos-def-bg:#5a4f8a; /* Always the light theme's near-black, even in night mode -- for the handful of gold-branded chips (Premium pill, daily challenge button, grade stamp, etc.) whose background stays gold in both themes rather than inverting with the page. Pairing them with --ink instead would go light-on-light once night mode flips --ink to cream. */ --ink-fixed:#16130d; /* The companion to --ink-fixed -- always the light theme's near-white, even in night mode. For the "black chip" components (Blind mode's card/flag/tab, the topbar's Total pill) that use --ink as a literal black background rather than as the page's text color: --ink itself flips to cream in night mode (it's tuned for text, not backgrounds), which turns those into glaring light chips on an otherwise dark page. Pairing --ink-fixed with --paper-fixed keeps them a true black chip with light text in both themes, same fix as --ink-fixed above. */ --paper-fixed:#fdf8ea; } /* Night mode -- an explicit toggle (persisted, not just system dark mode), so a paper-and-ink daytime look and a dark "night game" look share every rule below through the same tokens instead of needing two stylesheets. */ :root[data-theme="dark"]{ --paper:#1b1812; --paper2:#221e17; --paper3:#2a251c; --ink:#f3ead2; --ink2:#e9ddc0; --ink3:#dcccaa; --turf:#4a9a4f; --turf-dk:#6bbf67; --turf-lt:#8fd488; --gold:#e8c157; --brick:#e08a5c; --violet:#9b7fd4; --teal:#4fb3a6; --rose:#e07a9c; --silver:#b7bcc4; --bronze:#c98f56; /* --faint carried over the light theme's own value here at first, but that reads as dark-text-tuned: only 3.2-3.7:1 against this theme's three paper tones, under the 4.5:1 floor for the real body text it backs everywhere (slot-empty, pick.inelig, the empty-state icon added alongside this fix, activity timestamps) -- not just a decorative accent. Brightened to clear 4.5:1 against paper3, the darkest of the three it appears on, while staying visibly dimmer than --dim so the two-tier hierarchy (faint < dim) still reads. */ --txt:#e9ddc0; --dim:#a89a7e; --faint:#998d6d; --line:#3a3324; --line2:#4a4130; /* Brightened for night mode -- the light-mode values are tuned for dark text on the paper background and go too muddy to read once that background turns dark (see .pos-head/.pick-pos, used on every position label across the board, records, and roster screens). */ --pos-qb:#7fa8d9; --pos-rb:#9bc46a; --pos-wr:#d488c0; --pos-te:#c99a4a; --pos-k:#7ec4c4; --pos-def:#9b9bdf; --field-numbers:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjkyIiBoZWlnaHQ9IjQ2Ij48dGV4dCB4PSIxMDQiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjZjNlYWQyIiBmaWxsLW9wYWNpdHk9IjAuMSIgdGV4dC1hbmNob3I9InN0YXJ0Ij4xMDwvdGV4dD48dGV4dCB4PSIyOTIiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjZjNlYWQyIiBmaWxsLW9wYWNpdHk9IjAuMSIgdGV4dC1hbmNob3I9InN0YXJ0Ij4yMDwvdGV4dD48dGV4dCB4PSI0ODAiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjZjNlYWQyIiBmaWxsLW9wYWNpdHk9IjAuMSIgdGV4dC1hbmNob3I9InN0YXJ0Ij4zMDwvdGV4dD48dGV4dCB4PSI2NjgiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjZjNlYWQyIiBmaWxsLW9wYWNpdHk9IjAuMSIgdGV4dC1hbmNob3I9InN0YXJ0Ij40MDwvdGV4dD48dGV4dCB4PSI4NTYiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjZjNlYWQyIiBmaWxsLW9wYWNpdHk9IjAuMSIgdGV4dC1hbmNob3I9InN0YXJ0Ij41MDwvdGV4dD48dGV4dCB4PSIxMDQ0IiB5PSIzNCIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCIgZmlsbD0iI2YzZWFkMiIgZmlsbC1vcGFjaXR5PSIwLjEiIHRleHQtYW5jaG9yPSJzdGFydCI+NDA8L3RleHQ+PHRleHQgeD0iMTIzMiIgeT0iMzQiIGZvbnQtZmFtaWx5PSJtb25vc3BhY2UiIGZvbnQtc2l6ZT0iMjQiIGZvbnQtd2VpZ2h0PSI3MDAiIGZpbGw9IiNmM2VhZDIiIGZpbGwtb3BhY2l0eT0iMC4xIiB0ZXh0LWFuY2hvcj0ic3RhcnQiPjMwPC90ZXh0Pjx0ZXh0IHg9IjE0MjAiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjZjNlYWQyIiBmaWxsLW9wYWNpdHk9IjAuMSIgdGV4dC1hbmNob3I9InN0YXJ0Ij4yMDwvdGV4dD48dGV4dCB4PSIxNjA4IiB5PSIzNCIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCIgZmlsbD0iI2YzZWFkMiIgZmlsbC1vcGFjaXR5PSIwLjEiIHRleHQtYW5jaG9yPSJzdGFydCI+MTA8L3RleHQ+PC9zdmc+"); --field-lines:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NCIgaGVpZ2h0PSI0MCI+PGxpbmUgeDE9IjAuNzUiIHkxPSIwIiB4Mj0iMC43NSIgeTI9IjQwIiBzdHJva2U9IiNmM2VhZDIiIHN0cm9rZS1vcGFjaXR5PSIwLjA3IiBzdHJva2Utd2lkdGg9IjEuNSIvPjxsaW5lIHgxPSI0Ny4wIiB5MT0iNCIgeDI9IjQ3LjAiIHkyPSIxMSIgc3Ryb2tlPSIjZjNlYWQyIiBzdHJva2Utb3BhY2l0eT0iMC4wOCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48bGluZSB4MT0iNDcuMCIgeTE9IjI5IiB4Mj0iNDcuMCIgeTI9IjM2IiBzdHJva2U9IiNmM2VhZDIiIHN0cm9rZS1vcGFjaXR5PSIwLjA4IiBzdHJva2Utd2lkdGg9IjEuNSIvPjwvc3ZnPg=="); --paper-grain:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz4KPGZpbHRlciBpZD0nbic+CjxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScwLjg1JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJyByZXN1bHQ9J3QnLz4KPGZlQ29sb3JNYXRyaXggaW49J3QnIHR5cGU9J21hdHJpeCcgdmFsdWVzPScwIDAgMCAwIDAuOTUzICAwIDAgMCAwIDAuOTE4ICAwIDAgMCAwIDAuNzkyICAwIDAgMCAwLjA2IDAnLz4KPC9maWx0ZXI+CjxyZWN0IHdpZHRoPScxODAnIGhlaWdodD0nMTgwJyBmaWx0ZXI9J3VybCgjbiknLz4KPC9zdmc+"); } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ background-color:var(--paper); background-image: var(--paper-grain), var(--field-numbers), var(--field-lines); background-repeat:repeat, repeat-x, repeat; background-position:top left, top left, top left; /* 17px, not the usual 16px default -- every size on the page is set in rem, so this one change scales the whole site (including every clamp() range, which stays proportionally correct since both ends of each clamp are rem-relative to this same root) rather than needing to individually bump the dozens of small mono UI labels the retro theme leans on for almost everything. */ color:var(--txt); font-family:var(--sans); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; } a{color:var(--turf-dk);text-underline-offset:3px} /* One themed keyboard-focus ring for the whole site -- every button, link and input here was leaning on the browser's own bare default outline, which is still genuinely visible (nothing anywhere resets outline:none), just visually inconsistent with everything else on the page. :focus-visible rather than :focus specifically so this only shows for keyboard/programmatic focus, not a mouse click -- every button already has its own ink-shadow press feedback for pointer interaction, and a ring flashing on every click would fight with that instead of adding anything. Outline automatically follows each element's own border-radius (a pill button gets a rounded ring, a card gets a square one) with no extra rule needed. */ :focus-visible{outline:3px solid var(--turf);outline-offset:2px} /* Everything else on the page is fully custom -- an OS-default scrollbar was the one remaining element that never matched. Firefox's two-value shorthand first, since it has no equivalent of the finer-grained ::-webkit- pseudo-elements below. */ *{scrollbar-color:var(--line2) var(--paper2); scrollbar-width:thin} ::-webkit-scrollbar{width:12px;height:12px} ::-webkit-scrollbar-track{background:var(--paper2)} ::-webkit-scrollbar-thumb{ background:var(--line2);border:3px solid var(--paper2);border-radius:var(--r); } ::-webkit-scrollbar-thumb:hover{background:var(--dim)} ::-webkit-scrollbar-corner{background:var(--paper2)} .screen{display:none;min-height:100vh} /* display:none -> block re-enters the element into the render tree, which restarts a CSS animation from scratch -- so this one small rule gives every screen switch (home, a round, results, the hub, a profile...) the same gentle settle-in, one shared touch of polish instead of one-off animations scattered per screen. */ .screen.active{display:block;animation:screen-in .32s ease-out both} @keyframes screen-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .screen.active{animation:none} } /* ---------- skeleton loading placeholders ---------- */ /* Used wherever a card used to just stay hidden (or show plain "Loading…" text) while its first fetch is in flight -- a shimmering placeholder shape reads as faster and more finished than either blank space or a line of text, and gives an early sense of the content's actual layout. */ @keyframes skeleton-shimmer{0%{background-position:-135% 0}100%{background-position:135% 0}} .skeleton{ background-image:linear-gradient(90deg, var(--paper3) 25%, var(--line) 50%, var(--paper3) 75%); background-size:250% 100%;animation:skeleton-shimmer 1.4s ease-in-out infinite; border-radius:var(--r); } @media (prefers-reduced-motion:reduce){ .skeleton{animation:none;background-image:none;background-color:var(--paper3)} } .skeleton-line{height:.8em} .skeleton-line + .skeleton-line{margin-top:.55em} .skeleton-line.medium{width:70%} .skeleton-line.full{width:100%} /* The draft board's own skeleton (see boardSkeletonHtml) -- .pick-pos is normally just plain text with no box shape of its own, so its skeleton stand-in needs an explicit size the real element doesn't. */ .pick-skeleton{cursor:default} .pick-pos-skeleton{width:34px;height:1.4rem;flex:none;border-radius:4px} /* A brief highlight for a moment that just happened -- a friend landing on the list, a score actually posting -- rather than only a change in text that's easy to miss, especially on a small screen. Plays once on class-add and settles back to nothing; never re-added just to redraw the same state (see submitScore's own comment on why). */ @keyframes flash-confirm{ 0%{background-color:color-mix(in srgb, var(--turf) 30%, transparent)} 100%{background-color:transparent} } .flash-confirm{animation:flash-confirm 1.1s ease-out} @media (prefers-reduced-motion:reduce){ .flash-confirm{animation:none} } .confirm-check{width:.8em;height:.8em;color:var(--turf-dk);margin-right:.3em;vertical-align:-.08em} /* shared type helpers */ .on-clock,.dial-lbl,.pos-head,.hero-badge,.final-badge,.topbar-score .lbl,.slot-tag,.fr-tag,.pick-pos{ font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em; } /* ---------- buttons ---------- */ .btn{ font-family:var(--mono); font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; border:2px solid var(--ink); border-radius:var(--r); padding:.8rem 1.5rem; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .1s, box-shadow .1s, background .12s, color .12s; } .btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)} .btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)} .btn-primary{background:var(--turf);color:var(--paper2)} .btn-primary:hover{background:var(--turf-dk)} .btn-ghost{background:var(--paper2);color:var(--ink)} .btn-ghost:hover{background:var(--paper3)} .btn-danger{background:var(--brick);color:var(--paper2)} .btn-danger:hover{background:color-mix(in srgb, var(--brick) 80%, black)} .btn-lg{ padding:2.4rem 2rem;font-size:clamp(1.4rem,5vw,2rem);letter-spacing:.16em; border-width:4px;box-shadow:12px 12px 0 var(--ink);width:100%; } /* The soft blurred shadow layered alongside the existing hard offset one is additive, not a replacement -- every button on the page already presses down on hover (a smaller shift than :active, same direction), and reversing that just for the mode cards would read as an inconsistent, contradictory affordance. The glow adds tactility on top of that established language instead of fighting it. */ .btn-lg:hover{transform:translate(4px,4px);box-shadow:8px 8px 0 var(--ink), 0 10px 26px rgba(0,0,0,.3)} .btn-lg:active{transform:translate(8px,8px);box-shadow:4px 4px 0 var(--ink)} /* ---------- ads ---------- */ /* Ezoic's own destroyAll() is requested for a Premium account that turns out to have already had ads requested (see app.js's maybeShowAds()), but it doesn't reliably tear down an ad Google Ad Manager has already rendered into one of these id-less placeholder divs -- confirmed live: the underlying iframe stays in the DOM and visible even after destroyAll() runs. Hiding the placeholder itself is the actual guarantee, independent of whether Ezoic's API call worked: every one of these divs starts hidden, and only the html.ez-show-ads state (set the moment a session is known, or guessed to be, non-Premium -- see the inline script in and maybeShowAds()) reveals it. A Premium account that guessed wrong for a moment before its real status resolved goes back to hidden here, this time for real. */ [id^="ezoic-pub-ad-placeholder"]{display:none !important} html.ez-show-ads [id^="ezoic-pub-ad-placeholder"]{display:block !important} /* The bottom sticky "Adhesion" anchor ad is a second, separate ad format -- confirmed live on the real Premium account: it's injected by Google Ad Manager as a direct child of (position:fixed, z-index at the max 32-bit int), entirely outside the ezoic-pub-ad-placeholder divs above, so hiding those never touched it. data-anchor-status is Google's own marker attribute for this ad format, present regardless of the ad unit's own generated id/path -- a stable selector where the id itself (it embeds a per-page hash) isn't. Inline styles set the iframe chain's own display without !important, so this still wins even though Google's anchor-ad script re-applies its inline style on scroll/resize. */ [data-anchor-status]{display:none !important} html.ez-show-ads [data-anchor-status]{display:block !important} /* A third, separate ad format again found live on the real Premium account: Ezoic's own sticky outstream video unit, injected straight into as .ez-video-outstream-wrap > ... > .ez-video-container (an "ez-stuck ez-outstream-container ez-multiformat-ad" div), not a Google anchor ad and not one of the ezoic-pub-ad-placeholder divs either. Matched on class substrings rather than the exact combination Ezoic happened to apply, so a future variant with an extra class or two still gets caught. */ [class*="ez-video"],[class*="outstream"]{display:none !important} html.ez-show-ads [class*="ez-video"],html.ez-show-ads [class*="outstream"]{display:block !important} /* ---------- account ---------- */ .link-btn{ background:none;border:0;padding:0;cursor:pointer;font-family:var(--mono); font-size:.68rem;font-weight:700;letter-spacing:.05em;color:var(--turf-dk); text-decoration:underline;text-underline-offset:2px; } .link-btn:hover{color:var(--turf)} /* The banner pill has its own color/shape already -- an underline meant for plain text links would just fight it. */ .banner-edit-btn{text-decoration:none;vertical-align:middle;display:inline-flex;align-items:center;gap:.35rem} /* Only present until a real banner is saved (see renderAccountBar) -- the underline .banner-edit-btn just turned off above is exactly what the rest of this row's links use, so this still reads as clickable. */ .banner-edit-cta{text-decoration:underline;text-underline-offset:2px} /* 1440px, not 1280 -- the home screen's four stacked containers (this, .whats-new, .start-layout, .hero-modes) all share the same max-width so their edges line up as one column; bumped together from 1280 since on a wide monitor the old value left a very wide, plain strip of background on either side doing nothing. .start-layout's own grid-template-columns is widened by the matching amount below -- .hero-modes' mode-quad grid already uses fr units, so it just stretches to fill the new width on its own. */ /* Sticky (not static) so the nav/account row stays reachable while the rest of the home screen scrolls, without the footprint of a full side rail (tried and reverted; see git history). Split into two elements now: .account-bar-row (the actual flex content) kept its own max-width:1440px;margin:0 auto for centering, which meant putting the sticky positioning/background/shadow directly on it left bare page-background gutters on either side on any screen wider than 1440px -- a full-bleed sticky bar with visible seams on a wide monitor doesn't read as "part of the page." Those properties live on this new unconstrained wrapper instead, so the background/shadow/stripe genuinely span edge to edge while the content inside still centers at the same 1440px it always has. Background matches the page's own --paper (not the lighter --paper2 the pills themselves use) so there's no visible color step where the sticky bar meets the content scrolling underneath it. z-index:30 -- audited against every overlay on the page (modals @80, badge/elite/ luck toasts @94-96, the loading screen and confetti layer @60/@70): all of them sit comfortably above this. */ .account-bar-outer{ position:sticky;top:0;z-index:30;background:var(--paper); transition:box-shadow .2s ease; } .account-bar-row{ max-width:1440px;margin:0 auto;padding:.65rem 1.25rem .6rem; display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.6rem .9rem; } /* A scaled-down copy of the page's own .endzone-stripe motif, opacity- faded in only once .is-scrolled (below) -- at the very top of the page, .endzone-stripe itself already sits directly above this bar, so showing this copy at the same time read as the same diagonal stripe appearing twice in quick succession. Fading it in exactly when .endzone-stripe would have scrolled out of view means there's only ever one stripe visible at once: the real one at rest, this one once scrolled. */ .account-bar-outer::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:4px; background:repeating-linear-gradient(-45deg,var(--turf) 0 8px,var(--gold) 8px 16px); border-bottom:2px solid var(--ink); opacity:0;transition:opacity .2s ease; } /* Toggled by app.js once the page has scrolled past y=0. A flat, no-blur shadow straight down -- not the soft blurred elevation shadows a typical app sticky-header would use -- so it reads as the same hard-offset shadow language every button/card on this page already uses, rather than a one-off effect imported from elsewhere. Only appears once there's actually content to sit above; flush with no shadow at the top of the page like it always was. */ .account-bar-outer.is-scrolled{ box-shadow:0 4px 0 var(--ink); } .account-bar-outer.is-scrolled::after{opacity:1} /* Desktop only -- below 600px these six already get the exact same pill treatment from the grid layout further down, just full-width and stacked instead of inline. Above that breakpoint they used to be bare underlined text sitting next to GOAT Lab/Go Premium's colored pills and the theme toggle's own circular chip, so the row read as three unrelated visual languages mashed onto one line instead of one deliberate header. A neutral pill (paper background, ink border) reads as "informational nav" at a glance, distinct from the colored CTAs (brick, gold) and the sentence-style account-bar text that follows. ID selectors, not the shared .link-btn class -- "Log in / Sign up" and the rest of #account-bar's signed-in sentence reuse that same class there, and pill-ing those too would read as inconsistent with the middle-dot-separated text around them. #btn-history-nav belongs in this list -- it's the same kind of plain nav link as the other six, just added later. */ @media(min-width:601px){ #btn-founders, #btn-records, #btn-shame, #btn-stats, #btn-badges, #btn-leagues, #btn-history-nav{ background:var(--paper2);border:2px solid var(--ink);border-radius:999px;color:var(--ink); padding:.45rem .9rem;text-decoration:none;box-shadow:2px 2px 0 var(--ink); font-size:.7rem;transition:.12s; } #btn-founders:hover, #btn-records:hover, #btn-shame:hover, #btn-stats:hover, #btn-badges:hover, #btn-leagues:hover, #btn-history-nav:hover{ transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);background:var(--paper3);color:var(--ink); } #btn-founders:active, #btn-records:active, #btn-shame:active, #btn-stats:active, #btn-badges:active, #btn-leagues:active, #btn-history-nav:active{ transform:translate(2px,2px);box-shadow:0 0 0 var(--ink); } /* One accent color per pill, reusing the exact colors the hero-modes buttons just below use for Classic/Auction/Playoff/Team/Daily/Blind -- lets the eye tell these six-plus-one pills apart at a glance instead of one undifferentiated row of identical paper chips, drawn from the same palette that's already visible on this screen rather than inventing new colors just for this row. */ .topbar-icon{ display:inline-block;width:.8rem;height:.8rem;vertical-align:-1px; margin-right:.4rem;flex:none;transition:transform .12s ease; } #btn-founders .topbar-icon{background-color:var(--gold)} #btn-records .topbar-icon{background-color:var(--turf-dk)} #btn-shame .topbar-icon{background-color:var(--brick)} #btn-stats .topbar-icon{background-color:var(--teal)} #btn-badges .topbar-icon{background-color:var(--violet)} #btn-leagues .topbar-icon{background-color:var(--turf)} #btn-history-nav .topbar-icon{background-color:var(--ink-fixed)} /* GOAT Lab's own icon takes its color from the pill's text (paper2 on a brick background) rather than joining the accent-per-item system above -- it's the one pill in this row that isn't part of that informational-nav set. */ .goat-lab-pill .topbar-icon{background-color:var(--paper2)} /* A small scale-up on the icon itself, on top of whatever the pill's own hover state already does -- one shared rule via .link-btn (every plain nav pill's class) rather than repeating all seven IDs again, plus GOAT Lab's own class since it isn't one of those. Same tactile language the site's buttons already use elsewhere (a press/hover nudge), just applied to the icon instead of the whole pill, which already has its own hover treatment. */ .account-bar-row .link-btn:hover .topbar-icon, .goat-lab-pill:hover .topbar-icon{transform:scale(1.15)} /* A bit of daylight between the plain nav pills and the colored CTA pills that follow -- margin-left on top of the row's own gap, not a replacement for it, so the two clusters read as separate groups instead of one long undifferentiated run of pills. A plain gap on its own can read as an accidental wrapping gap rather than a deliberate one, so ::before adds a real vertical rule centered in that space -- position:relative on the pill itself just gives that pseudo-element something to anchor to. */ .goat-lab-pill{margin-left:.5rem;position:relative} .goat-lab-pill::before{ content:'';position:absolute;left:-.7rem;top:50%;transform:translateY(-50%); width:2px;height:1.3rem;background:var(--ink);opacity:.2; } /* Desktop has room for all seven secondary nav links inline, so the wrapper the mobile collapse below needs (#nav-secondary) and its own toggle button stay fully out of the way here: display:contents unwraps the div entirely, so its children lay out exactly as if they were direct children of .account-bar-row, identically to before this wrapper existed. */ .nav-toggle-btn{display:none} .nav-secondary{display:contents} } /* margin-right:auto (on the button now, not the bare image -- see #btn-logo-top below) eats the row's free space right after this item, pinning it to the left edge while everything else -- already justify-content:flex-end -- stays clustered at the right, same trick used to split a flex row into two groups without restructuring it. */ .site-logo{width:56px;height:auto;display:block} /* Wraps the logo so it's an actual control (scrolls to top -- see app.js) rather than decoration; reset to plain and undecorated so it doesn't look or behave like the pill buttons around it, just holds the image and eats the row's free space per the comment above. */ .logo-btn{background:none;border:0;padding:0;cursor:pointer;margin-right:auto;line-height:0} /* Below 600px the desktop trick above (logo pinned left, everything else clustered right) just wraps into a ragged, mismatched pile -- plain underlined text links jammed next to pill buttons with no grouping. Centering the logo on its own row and giving the plain nav links the same pill treatment as GOAT Lab / Go Premium makes the whole row read as one consistent button group instead. */ /* A real grid instead of flex-wrap's natural (and uneven) wrapping -- flex-wrap here left "Founding Members" alone on its own line, then a ragged 3/3/1 pile below it, since wrapping only ever depends on each label's own text width. A named-area grid lays every button out on purpose: the four nav links as an even 2-column block, Go Premium promoted to its own full-width row since it's the one button here actually worth someone tapping, GOAT Lab/theme paired underneath, sign-in state last. No HTML changes needed -- every item just gets assigned to a named area by its existing id/class. */ @media(max-width:600px){ /* Cancels the sticky positioning .account-bar-outer picks up unconditionally above -- that's tuned for the compact single-row desktop bar; this multi-row stacked grid is tall enough that pinning it would eat a big share of a phone screen permanently. relative, not static -- ::after (the bottom stripe accent) is absolutely positioned against the outer wrapper, and static would push that positioning out to the next positioned ancestor up the tree instead. */ .account-bar-outer{position:relative} .account-bar-row{ display:grid;grid-template-columns:1fr 1fr;gap:.55rem;padding-top:.9rem; grid-template-areas: "logo logo" "toggle toggle" "nav nav" "premium premium" "goat theme" "account account"; } .logo-btn{grid-area:logo;justify-self:center;margin:0 0 .3rem} .site-logo{width:56px;max-width:56px} /* The seven secondary nav destinations (Founding Members through Draft History) used to all sit here, always visible, every one of them competing with the actual game-mode buttons and hero content for the first screen of a phone visit. Collapsed behind this toggle instead -- everyone still reaches every page in one tap, just not automatically pushed past all of it before they've seen what the site actually does. Desktop has room to show all seven inline and never renders this button at all (see the min-width:601px block above). */ .nav-toggle-btn{ grid-area:toggle;display:block;width:100%; background:var(--paper2);border:2px solid var(--ink);border-radius:999px;color:var(--ink); font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.04em; padding:.5rem .6rem;box-shadow:2px 2px 0 var(--ink);cursor:pointer;text-align:center; } .nav-toggle-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)} /* Collapsed to nothing by default (grid-area:nav then contributes no height at all) -- .expanded (toggled in app.js) switches it to the same 2-up pill grid these seven used to occupy unconditionally. */ .nav-secondary{grid-area:nav;display:none;grid-template-columns:1fr 1fr;gap:.55rem} .nav-secondary.expanded{display:grid} #btn-founders, #btn-records, #btn-shame, #btn-stats, #btn-badges, #btn-leagues, #btn-history-nav{ background:var(--paper2);border:2px solid var(--ink);border-radius:999px;color:var(--ink); padding:.5rem .6rem;text-decoration:none;box-shadow:2px 2px 0 var(--ink); text-align:center;font-size:.72rem; } /* Seven items don't split evenly into two columns -- the odd one out spans both, same full-width treatment it already had before this was collapsible. */ #btn-history-nav{grid-column:1 / -1} .goat-lab-pill{grid-area:goat;text-align:center} #btn-theme{grid-area:theme;justify-self:center} .account-bar{grid-area:account;margin-top:.2rem} /* ID selector -- the unconditional .account-bar{text-align:right} a little further down in this file would otherwise win this specific property at equal class-only specificity regardless of viewport, same trap hit twice already this session for other mobile overrides. */ #account-bar{text-align:center} .go-premium-pill{grid-area:premium} /* Bigger than its desktop size, and now its own full-width row instead of one pill lost among six others -- the single button in this row actually worth a tap gets to look like it. ID selector, not just the class -- the unconditional .go-premium-pill definition is declared later in this file and would otherwise win the font-size/padding/box-shadow tug-of-war at equal class-only specificity regardless of viewport (confirmed this was silently losing even before this rewrite -- same trap hit repeatedly this session, worth double-checking for every mobile override from here on rather than trusting a screenshot alone). */ #btn-premium-hero{ font-size:.95rem;padding:.8rem 1rem;border-width:3px; text-align:center;box-shadow:3px 3px 0 var(--ink); } #btn-premium-hero:hover{box-shadow:1.5px 1.5px 0 var(--ink)} } .whats-new{ max-width:1440px;margin:.8rem auto 0;padding:.65rem 1.1rem; background:var(--paper2);border:2px solid var(--gold);border-radius:var(--r); display:flex;align-items:center;justify-content:space-between;gap:.8rem; font-family:var(--mono);font-size:.75rem;color:var(--ink); } .whats-new[hidden]{display:none} .whats-new-close{background:none;border:0;cursor:pointer;font-size:1.1rem;line-height:1;color:var(--dim);flex:none} .whats-new-close:hover{color:var(--ink)} .whats-new-actions{display:flex;align-items:center;gap:.7rem;flex:none} /* This Week / Today's Highest Scores -- two more .lb-panel cards, sitting at the bottom of the home screen, below "How it works" and just above the legal footer, rather than competing with the trivia/wordmark/ leaderboard row for attention up top. margin-bottom:0 overrides .lb-panel's own 2rem (same specificity, this rule just comes later) since .disclaimer's own margin-top handles the gap before the footer instead. */ .home-highlights{ max-width:1440px;margin:1.6rem auto;padding:0 1.25rem; display:grid;grid-template-columns:1fr 1fr;gap:1.4rem; } .home-highlight-card{margin-bottom:0} /* Small colored accent -- top border + a title icon -- on the two home-highlights cards, matching the treatment #home-lb/#home-trivia already carry in the sidebar (see below). Before this, these two were the only plain, uncolored panels on an otherwise icon- and color-heavy home screen. */ #weekly-digest{border-top-width:5px;border-top-color:var(--turf-dk)} #community-spotlight{border-top-width:5px;border-top-color:var(--gold)} .highlight-title-icon{width:.8rem;height:.8rem;margin-right:.4rem;vertical-align:-.1em;flex:none} #weekly-digest-content .lb-board-title .icon-glyph{background-color:var(--turf-dk)} #spotlight-content .lb-board-title .icon-glyph{background-color:var(--gold)} /* Same trophy the Leaderboards hub heading itself now wears (see .lbhub-heading-icon) -- a small visual callback from this home-screen widget to the full hub it links out to. turf-dk to match #home-lb's own top border, already that color. */ #home-lb-content .lb-board-title .icon-glyph{background-color:var(--turf-dk)} .highlight-line{font-family:var(--mono);font-size:.82rem;line-height:1.6;color:var(--ink2);margin:0 0 .4rem} .highlight-line:last-child{margin-bottom:0} .highlight-line b{color:var(--ink)} .spotlight-dots{display:flex;gap:.4rem;margin-top:.9rem} .spotlight-dot{width:.4rem;height:.4rem;border-radius:50%;background:var(--line2)} .spotlight-dot.active{background:var(--turf-dk)} @media(max-width:760px){ .home-highlights{grid-template-columns:1fr} } /* A half-step up in size/tracking from the base .7rem/normal-spacing this used to run at, now that it sits in a sticky, always-visible bar rather than one that scrolls out of view -- text that's on screen the whole time earns slightly more presence than text that was only ever glanced at once per visit. */ .account-bar{ text-align:right;font-family:var(--mono);font-size:.72rem;letter-spacing:.01em;color:var(--dim); } .account-bar .sep{margin:0 .4rem;color:var(--faint)} .account-bar b{color:var(--ink)} /* Sets "Signed in as X" apart from the sep-separated run of action links that follows it -- who you are and what you can do next are two different kinds of information, and a small chip (rather than just more plain sentence text) makes that split visible instead of something the reader has to parse out of one long line. */ .account-identity{ display:inline-block;background:var(--paper3);border:1px solid var(--line2); border-radius:999px;padding:.25rem .75rem;margin-right:.5rem; } .premium-badge{ font-family:var(--mono);font-weight:700;font-size:.64rem;letter-spacing:.04em;color:var(--gold); } .theme-toggle{ background:var(--paper2);border:2px solid var(--ink);border-radius:999px;color:var(--ink); font-size:.85rem;line-height:1;width:2rem;height:2rem;cursor:pointer; display:grid;place-items:center;box-shadow:2px 2px 0 var(--ink);transition:.12s;flex:none; } .theme-toggle:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);background:var(--paper3)} .theme-toggle:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)} /* Slightly bigger than the theme toggle/plain nav pills around it, plus a soft gold glow outside its own ink border -- this is the one button in the row that actually makes money, so it earns a touch more visual weight than GOAT Lab (a plain colored pill) or the six informational nav pills, without going as far as a hero-sized banner that would be too loud for something shown on every single visit. Hidden outright once the visitor already has Premium (see renderAccountBar in app.js), same as the account bar's own link. */ .go-premium-pill{ position:relative;overflow:hidden; display:flex;flex-direction:column;align-items:center;gap:.05rem; font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.05em; background:var(--gold);border:2px solid var(--ink);border-radius:999px;color:var(--ink-fixed); padding:.4rem .95rem;cursor:pointer;transition:.12s;flex:none; white-space:nowrap; box-shadow:2px 2px 0 var(--ink), 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent); } /* The main line is the existing pill label unchanged; this just adds a second, smaller line under it -- "no ads" already lived in the title tooltip, but a tooltip only reaches someone who happens to hover, and removing ads is exactly the perk a free (ad-seeing) visitor is best positioned to want the moment they notice it. */ .go-premium-sub{font-size:.56rem;font-weight:600;letter-spacing:.03em;opacity:.8} .go-premium-pill:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink), 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent);background:#c98a20} .go-premium-pill:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)} .go-premium-pill[hidden]{display:none} /* A gold-foil shimmer sweep on hover -- a fixed white streak rather than a themed color, since this is meant to read as light catching foil, not a UI accent that should flip with the page's own theme. */ .go-premium-pill::after{ content:'';position:absolute;top:0;left:-75%;width:45%;height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,.7), transparent); transform:skewX(-20deg);pointer-events:none; transition:left .55s ease; } .go-premium-pill:hover::after{left:125%} @media (prefers-reduced-motion:reduce){ .go-premium-pill::after{transition:none;display:none} } .goat-lab-pill{ font-family:var(--mono);font-weight:700;font-size:.66rem;letter-spacing:.05em; background:var(--brick);border:2px solid var(--ink);border-radius:999px;color:var(--paper2); padding:.4rem .8rem;cursor:pointer;box-shadow:2px 2px 0 var(--ink);transition:.12s;flex:none; white-space:nowrap;text-decoration:none;display:inline-block; } .goat-lab-pill:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);filter:brightness(.85)} .goat-lab-pill:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)} .auth-modal[hidden]{display:none} .auth-modal{ position:fixed;inset:0;background:rgba(22,19,13,.55);z-index:80; display:flex;align-items:center;justify-content:center;padding:1.25rem; } .auth-card{ position:relative;width:100%;max-width:360px;background:var(--paper2); border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow); padding:2rem 1.6rem 1.6rem;text-align:left; } .auth-close{ position:absolute;top:.7rem;right:.8rem;background:none;border:0;cursor:pointer; font-size:1.4rem;line-height:1;color:var(--dim);font-family:var(--sans); transition:color .12s ease,transform .1s ease; } .auth-close:hover{color:var(--ink);transform:scale(1.15)} .auth-close:active{transform:scale(.9)} .auth-title{font-family:var(--serif);font-weight:800;font-size:1.5rem;margin-bottom:1.2rem;color:var(--ink)} .confirm-modal-actions{display:flex;gap:.7rem;margin-top:1rem} .confirm-modal-actions .btn{flex:1} /* Reuses the same .auth-card shell every other modal on the page uses (auth, roster, etc.) rather than a one-off dialog just for this -- max-height + scroll is the only addition, since this list is the one modal content here with no natural upper bound on length as more entries get added over time. */ .changelog-list{ list-style:none;margin:0;padding:0;max-height:min(60vh,26rem);overflow-y:auto; font-family:var(--mono);font-size:.78rem;line-height:1.55;color:var(--ink2); } .changelog-list li{padding:.7rem 0;border-bottom:1px solid var(--line)} .changelog-list li:last-child{border-bottom:0} .changelog-list b{color:var(--ink)} /* Monday's weekly recap popup (see maybeShowWeeklyRecap) -- a big number for the one stat worth leading with (last week's best score), plain mono lines underneath for rank/streak context. */ .weekly-recap-body{text-align:left;margin:.3rem 0 1.3rem} .weekly-recap-stat{font-family:var(--serif);font-weight:900;font-size:2.4rem;color:var(--gold);line-height:1;letter-spacing:-.02em;margin-bottom:.2rem} .weekly-recap-stat small{font-family:var(--mono);font-weight:600;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-left:.5rem} .weekly-recap-line{font-family:var(--mono);font-size:.82rem;color:var(--ink2);line-height:1.6} .weekly-recap-line b{color:var(--ink)} .auth-card .lb-name-input{width:100%;display:block;margin-bottom:.7rem} /* display:block above outranks the plain [hidden] UA rule (two classes beat one attribute selector), so a field this modal hides -- display name outside signup, or the whole form during a Google/guest name prompt -- would otherwise still render. */ .auth-card .lb-name-input[hidden]{display:none} /* Right-aligned, pulled up into the gap .auth-password's own margin-bottom already leaves -- the conventional spot for this exact link on just about every login form, so it reads as familiar rather than needing its own explanation. Only ever visible in login mode (see openAuthModal) -- signup/claim/guest have no existing password to reset. */ .auth-forgot-link{display:block;text-align:right;margin:-.3rem 0 .9rem} .auth-submit{width:100%;margin-top:.3rem} .btn-google{ display:flex;align-items:center;justify-content:center;gap:.6rem; background:#fff;color:#3c4043;border-color:var(--ink); } .btn-google:hover{background:#f7f7f7} .google-g{flex:none} .auth-divider{ display:flex;align-items:center;gap:.7rem;margin:1rem 0; font-family:var(--mono);font-size:.68rem;color:var(--dim);text-transform:uppercase;letter-spacing:.1em; } .auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line)} .auth-card .btn-google[hidden],.auth-card .auth-divider[hidden]{display:none} .challenge-modal-copy{font-family:var(--mono);font-size:.78rem;color:var(--dim);line-height:1.5;margin-bottom:1.1rem} .gift-toggle-btn{display:block;margin-top:.6rem;margin-bottom:.8rem;font-size:.74rem} .gift-row{margin-bottom:.8rem} .gift-row-hint{font-family:var(--mono);font-size:.68rem;color:var(--dim);margin-top:-.3rem} /* Sits right under the purchase button -- the one moment someone's deciding whether to trust the site with a card, so the reassurance belongs at the point of doubt, not buried in Terms/Privacy. Wording mirrors privacy.html's own claim exactly, not a separate promise. */ .premium-trust{ display:flex;align-items:center;justify-content:center;gap:.4rem; font-family:var(--mono);font-size:.66rem;color:var(--faint);margin-top:.7rem;text-align:center; } .premium-trust .icon-glyph{width:.75rem;height:.75rem;background-color:var(--faint);flex:none} /* One-line contextual hook, shown only when openPremiumModal was given a reason (see PREMIUM_MODAL_REASONS in app.js) -- hidden entirely for the generic hero-pill entry point, which still gets just the plain compare table below. Bold serif to read as a headline, not another line of the modal's own mono body copy. */ .premium-modal-reason{ font-family:var(--serif);font-weight:800;font-size:1.05rem;color:var(--turf-dk); margin-bottom:1rem;line-height:1.35; } .premium-modal-reason[hidden]{display:none} /* Free-vs-Premium comparison grid, replacing what used to be a plain starred perks list -- a side-by-side makes the actual gap concrete instead of asking a reader to hold nine bullet points in their head and guess how many of them they're currently missing. */ .premium-compare{ display:grid;grid-template-columns:1fr 3.6rem 4.2rem; font-family:var(--mono);font-size:.7rem;margin-bottom:1.1rem; border:2px solid var(--ink);border-radius:var(--r);overflow:hidden; box-shadow:3px 3px 0 var(--ink); } .premium-compare-row{display:contents} .premium-compare-row > span{ padding:.6rem .5rem;border-bottom:1px solid var(--line);color:var(--ink); display:flex;align-items:center;justify-content:center;text-align:center; transition:background .12s ease; } .premium-compare-row > span:first-child{justify-content:flex-start;text-align:left;color:var(--ink2);font-weight:600} .premium-compare-row:last-child > span{border-bottom:0} .premium-compare-head > span{ font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.6rem; background:var(--paper3);color:var(--dim);border-bottom:2px solid var(--ink); } /* Faint zebra striping on the two comparison columns only -- the Premium column keeps its own solid gold tint the whole way down, so striping it too would just muddy the one column meant to read as a single block. */ .premium-compare-row:nth-of-type(even):not(.premium-compare-head) > span:not(:last-child){ background:var(--paper3); } /* Third column (Premium) tinted gold the whole way down -- the eye should land on this column, not have to hunt for it row by row. */ .premium-compare-row > span:last-child{background:color-mix(in srgb, var(--gold) 16%, transparent)} .premium-compare-head > span:last-child{background:var(--gold);color:var(--ink-fixed)} .premium-compare-row:not(.premium-compare-head):hover > span{background:var(--line)} .premium-compare-row:not(.premium-compare-head):hover > span:last-child{background:color-mix(in srgb, var(--gold) 30%, transparent)} /* The two numeric columns are fixed-width so the label column can flex, but on a narrow phone that still only leaves it ~140-160px -- not enough for longer rows ("Custom banner & name color", "Daily archive replays") at .7rem mono, so they wrap to two lines and the modal grows taller than it needs to. Narrower numeric columns plus a touch smaller type claws that space back for exactly the screen width most players actually see this on. */ @media(max-width:400px){ .premium-compare{grid-template-columns:1fr 2.6rem 3.2rem;font-size:.64rem} .premium-compare-row > span{padding:.5rem .3rem} } /* pc-yes/pc-no live on an inner , not the grid-cell itself -- the span has to stay full cell size for its border-bottom to line up with the rest of the row, so the pill's own compact size lives one level in. */ .pc-yes,.pc-no{ display:inline-flex;align-items:center;justify-content:center; min-width:1.4rem;padding:.15rem .5rem;border-radius:999px;font-weight:800; } .pc-yes{background:color-mix(in srgb, var(--turf-dk) 20%, transparent);color:var(--turf-dk)} .pc-no{background:var(--paper3);color:var(--faint)} .premium-compare-row:nth-of-type(even) .pc-no{background:var(--line)} /* Invite-a-friend link: a plain readonly field rather than .lb-name-input, which .auth-card forces to width:100%/display:block -- fighting that just to lay this out in a row isn't worth it when a dedicated class sidesteps the conflict entirely. */ .invite-link-row{display:flex;gap:.5rem;margin-bottom:.7rem} .invite-link-input{ flex:1;min-width:0;font-family:var(--mono);font-size:.72rem;padding:.6rem .7rem; border:2px solid var(--ink);border-radius:var(--r);background:var(--paper);color:var(--ink2); } .invite-link-row .btn{flex:none} /* Player banner -- a Premium perk, next to a name in the account bar and on leaderboards. One of ten fixed vector icons on one of five fixed background colors, both resolved in JS (BANNER_COLORS in app.js) from a picker rather than free text or emoji -- emoji render as a fixed full-color glyph outside this site's control (different per OS/ browser), where these mask-image icons stay a plain currentColor silhouette like every other icon on the page, so they can be tinted per swatch the same way. */ .icon-glyph{ display:inline-block;background-color:currentColor; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain; } .icon-star{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTEyLDIgTDE0LjM1LDguNzYgTDIxLjUxLDguOTEgTDE1LjgsMTMuMjQgTDE3Ljg4LDIwLjA5IEwxMiwxNiBMNi4xMiwyMC4wOSBMOC4yLDEzLjI0IEwyLjQ5LDguOTEgTDkuNjUsOC43NiBaJy8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTEyLDIgTDE0LjM1LDguNzYgTDIxLjUxLDguOTEgTDE1LjgsMTMuMjQgTDE3Ljg4LDIwLjA5IEwxMiwxNiBMNi4xMiwyMC4wOSBMOC4yLDEzLjI0IEwyLjQ5LDguOTEgTDkuNjUsOC43NiBaJy8+PC9zdmc+")} .icon-football{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNMSwxMiBRMTIsMyAyMywxMiBRMTIsMjEgMSwxMiBaIE0xMS4yLDYuNSBIMTIuOCBWMTcuNSBIMTEuMiBaIE04LjMsOS4zIEwxMC4zLDkuMyBWMTAuNyBMOC4zLDEwLjcgWiBNMTMuNyw5LjMgTDE1LjcsOS4zIFYxMC43IEwxMy43LDEwLjcgWiBNOC4zLDEzLjMgTDEwLjMsMTMuMyBWMTQuNyBMOC4zLDE0LjcgWiBNMTMuNywxMy4zIEwxNS43LDEzLjMgVjE0LjcgTDEzLjcsMTQuNyBaJy8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNMSwxMiBRMTIsMyAyMywxMiBRMTIsMjEgMSwxMiBaIE0xMS4yLDYuNSBIMTIuOCBWMTcuNSBIMTEuMiBaIE04LjMsOS4zIEwxMC4zLDkuMyBWMTAuNyBMOC4zLDEwLjcgWiBNMTMuNyw5LjMgTDE1LjcsOS4zIFYxMC43IEwxMy43LDEwLjcgWiBNOC4zLDEzLjMgTDEwLjMsMTMuMyBWMTQuNyBMOC4zLDE0LjcgWiBNMTMuNywxMy4zIEwxNS43LDEzLjMgVjE0LjcgTDEzLjcsMTQuNyBaJy8+PC9zdmc+")} .icon-fire{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTEyLDIgQzksNyA1LDkgNSwxNCBDNSwxOC40IDguNiwyMiAxMywyMiBDMTcsMjIgMjAsMTkgMjAsMTUgQzIwLDEyIDE4LDEwIDE3LDkgQzE3LjUsMTEgMTYuNSwxMi41IDE1LDEyLjUgQzEzLDEyLjUgMTIuNSwxMC41IDEzLjUsOC41IEMxNC41LDYuNSAxMy41LDMuNSAxMiwyIFonLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTEyLDIgQzksNyA1LDkgNSwxNCBDNSwxOC40IDguNiwyMiAxMywyMiBDMTcsMjIgMjAsMTkgMjAsMTUgQzIwLDEyIDE4LDEwIDE3LDkgQzE3LjUsMTEgMTYuNSwxMi41IDE1LDEyLjUgQzEzLDEyLjUgMTIuNSwxMC41IDEzLjUsOC41IEMxNC41LDYuNSAxMy41LDMuNSAxMiwyIFonLz48L3N2Zz4=")} .icon-trophy{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNNywzIEgxNyBWMTAgQzE3LDE0IDE0LjUsMTYgMTIsMTYgQzkuNSwxNiA3LDE0IDcsMTAgWiBNMTEsMTYgSDEzIFYxOCBIMTEgWiBNOCwxOSBIMTYgVjIxIEg4IFogTTUsNCBDMiw0IDIsOSA1LDkuNSBDNC42LDggNC42LDYgNSw0LjUgWiBNMTksNCBDMjIsNCAyMiw5IDE5LDkuNSBDMTkuNCw4IDE5LjQsNiAxOSw0LjUgWicvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNNywzIEgxNyBWMTAgQzE3LDE0IDE0LjUsMTYgMTIsMTYgQzkuNSwxNiA3LDE0IDcsMTAgWiBNMTEsMTYgSDEzIFYxOCBIMTEgWiBNOCwxOSBIMTYgVjIxIEg4IFogTTUsNCBDMiw0IDIsOSA1LDkuNSBDNC42LDggNC42LDYgNSw0LjUgWiBNMTksNCBDMjIsNCAyMiw5IDE5LDkuNSBDMTkuNCw4IDE5LjQsNiAxOSw0LjUgWicvPjwvc3ZnPg==")} .icon-crown{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTMsOSBMNywxMyBMMTIsNCBMMTcsMTMgTDIxLDkgTDIxLDE5IEwzLDE5IFonLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTMsOSBMNywxMyBMMTIsNCBMMTcsMTMgTDIxLDkgTDIxLDE5IEwzLDE5IFonLz48L3N2Zz4=")} .icon-lightning{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTEzLDIgTDcsMTMgTDExLDEzIEw5LDIyIEwxNywxMCBMMTIsMTAgWicvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTEzLDIgTDcsMTMgTDExLDEzIEw5LDIyIEwxNywxMCBMMTIsMTAgWicvPjwvc3ZnPg==")} .icon-skull{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNMTIsMiBDNywyIDQsNiA0LDEwIEM0LDE0IDYsMTYgNiwxOCBMNiwxOSBDNiwyMCA3LDIxIDgsMjEgTDE2LDIxIEMxNywyMSAxOCwyMCAxOCwxOSBMMTgsMTggQzE4LDE2IDIwLDE0IDIwLDEwIEMyMCw2IDE3LDIgMTIsMiBaIE04LjUsOSBBMiwyLjQgMCAxLDAgOC41LDEzIEEyLDIuNCAwIDEsMCA4LjUsOSBaIE0xNS41LDkgQTIsMi40IDAgMSwwIDE1LjUsMTMgQTIsMi40IDAgMSwwIDE1LjUsOSBaIE0xMiwxMy41IEwxMC4zLDE3IEwxMy43LDE3IFonLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNMTIsMiBDNywyIDQsNiA0LDEwIEM0LDE0IDYsMTYgNiwxOCBMNiwxOSBDNiwyMCA3LDIxIDgsMjEgTDE2LDIxIEMxNywyMSAxOCwyMCAxOCwxOSBMMTgsMTggQzE4LDE2IDIwLDE0IDIwLDEwIEMyMCw2IDE3LDIgMTIsMiBaIE04LjUsOSBBMiwyLjQgMCAxLDAgOC41LDEzIEEyLDIuNCAwIDEsMCA4LjUsOSBaIE0xNS41LDkgQTIsMi40IDAgMSwwIDE1LjUsMTMgQTIsMi40IDAgMSwwIDE1LjUsOSBaIE0xMiwxMy41IEwxMC4zLDE3IEwxMy43LDE3IFonLz48L3N2Zz4=")} .icon-diamond{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTIsOSBMNywzIEwxNywzIEwyMiw5IEwxMiwyMiBaJy8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTIsOSBMNywzIEwxNywzIEwyMiw5IEwxMiwyMiBaJy8+PC9zdmc+")} .icon-target{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNMTIsMiBhMTAsMTAgMCAxLDAgMC4wMSwwIFogTTEyLDYuNSBhNS41LDUuNSAwIDEsMCAwLjAxLDAgWiBNMTIsMTAuMyBhMS43LDEuNyAwIDEsMCAwLjAxLDAgWicvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNMTIsMiBhMTAsMTAgMCAxLDAgMC4wMSwwIFogTTEyLDYuNSBhNS41LDUuNSAwIDEsMCAwLjAxLDAgWiBNMTIsMTAuMyBhMS43LDEuNyAwIDEsMCAwLjAxLDAgWicvPjwvc3ZnPg==")} .icon-rocket{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNMTIsMiBDOSw1IDgsOSA4LDEzIEw4LDE3IEw2LDIxIEw5LDE5LjUgTDksMjEuNSBMMTIsMjMgTDE1LDIxLjUgTDE1LDE5LjUgTDE4LDIxIEwxNiwxNyBMMTYsMTMgQzE2LDkgMTUsNSAxMiwyIFogTTEyLDcuMyBhMiwyIDAgMSwwIDAuMDEsMCBaJy8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNMTIsMiBDOSw1IDgsOSA4LDEzIEw4LDE3IEw2LDIxIEw5LDE5LjUgTDksMjEuNSBMMTIsMjMgTDE1LDIxLjUgTDE1LDE5LjUgTDE4LDIxIEwxNiwxNyBMMTYsMTMgQzE2LDkgMTUsNSAxMiwyIFogTTEyLDcuMyBhMiwyIDAgMSwwIDAuMDEsMCBaJy8+PC9zdmc+")} .icon-heart{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTEyLDIxIEMxMiwyMSAzLDE0LjUgMyw4LjUgQzMsNS41IDUuNSwzIDguNSwzIEMxMCwzIDExLjMsMy44IDEyLDUgQzEyLjcsMy44IDE0LDMgMTUuNSwzIEMxOC41LDMgMjEsNS41IDIxLDguNSBDMjEsMTQuNSAxMiwyMSAxMiwyMSBaJy8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTEyLDIxIEMxMiwyMSAzLDE0LjUgMyw4LjUgQzMsNS41IDUuNSwzIDguNSwzIEMxMCwzIDExLjMsMy44IDEyLDUgQzEyLjcsMy44IDE0LDMgMTUuNSwzIEMxOC41LDMgMjEsNS41IDIxLDguNSBDMjEsMTQuNSAxMiwyMSAxMiwyMSBaJy8+PC9zdmc+")} .icon-shield{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTEyLDIgTDIwLDUgTDIwLDExIEMyMCwxNiAxNi41LDIwIDEyLDIyIEM3LjUsMjAgNCwxNiA0LDExIEw0LDUgWicvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTEyLDIgTDIwLDUgTDIwLDExIEMyMCwxNiAxNi41LDIwIDEyLDIyIEM3LjUsMjAgNCwxNiA0LDExIEw0LDUgWicvPjwvc3ZnPg==")} .icon-flag{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTQsMiBINS41IFYyMiBINCBaIE01LjUsMyBMMTksMyBMMTUuNSw3IEwxOSwxMSBMNS41LDExIFonLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTQsMiBINS41IFYyMiBINCBaIE01LjUsMyBMMTksMyBMMTUuNSw3IEwxOSwxMSBMNS41LDExIFonLz48L3N2Zz4=")} .icon-check{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTQuNSwxMiBMOSwxNi41IEwxOS41LDYgTDIxLDcuNSBMOSwxOS41IEwzLDEzLjUgWicvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTQuNSwxMiBMOSwxNi41IEwxOS41LDYgTDIxLDcuNSBMOSwxOS41IEwzLDEzLjUgWicvPjwvc3ZnPg==")} /* Added to differentiate the badge grid -- 76 badges shared just the 10 icons above, so most looked identical to unrelated achievements. These 8 give the biggest badge "families" (streaks, luck coincidences, games-played milestones, auction economics) their own unifying shape instead of clashing with everything else. */ .icon-medal{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTEyLDEgTDIxLDYuNSBMMjEsMTcuNSBMMTIsMjMgTDMsMTcuNSBMMyw2LjUgWicvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTEyLDEgTDIxLDYuNSBMMjEsMTcuNSBMMTIsMjMgTDMsMTcuNSBMMyw2LjUgWicvPjwvc3ZnPg==")} .icon-hourglass{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTUsMiBIMTkgVjUgTDEzLDEyIEwxOSwxOSBWMjIgSDUgVjE5IEwxMSwxMiBMNSw1IFonLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTUsMiBIMTkgVjUgTDEzLDEyIEwxOSwxOSBWMjIgSDUgVjE5IEwxMSwxMiBMNSw1IFonLz48L3N2Zz4=")} .icon-dice{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNNCw0IEgyMCBWMjAgSDQgWiBNNi41LDYuNSBhMS41LDEuNSAwIDEsMCAwLjAxLDAgWiBNMTcuNSw2LjUgYTEuNSwxLjUgMCAxLDAgMC4wMSwwIFogTTEyLDEyIGExLjUsMS41IDAgMSwwIDAuMDEsMCBaIE02LjUsMTcuNSBhMS41LDEuNSAwIDEsMCAwLjAxLDAgWiBNMTcuNSwxNy41IGExLjUsMS41IDAgMSwwIDAuMDEsMCBaJy8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNNCw0IEgyMCBWMjAgSDQgWiBNNi41LDYuNSBhMS41LDEuNSAwIDEsMCAwLjAxLDAgWiBNMTcuNSw2LjUgYTEuNSwxLjUgMCAxLDAgMC4wMSwwIFogTTEyLDEyIGExLjUsMS41IDAgMSwwIDAuMDEsMCBaIE02LjUsMTcuNSBhMS41LDEuNSAwIDEsMCAwLjAxLDAgWiBNMTcuNSwxNy41IGExLjUsMS41IDAgMSwwIDAuMDEsMCBaJy8+PC9zdmc+")} .icon-coin{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTQsMTYgYTgsMyAwLDAsMCAxNiwwIGE4LDMgMCwwLDAgLTE2LDAgWiBNNCwxMiBhOCwzIDAsMCwwIDE2LDAgYTgsMyAwLDAsMCAtMTYsMCBaIE00LDggYTgsMyAwLDAsMCAxNiwwIGE4LDMgMCwwLDAgLTE2LDAgWicvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTQsMTYgYTgsMyAwLDAsMCAxNiwwIGE4LDMgMCwwLDAgLTE2LDAgWiBNNCwxMiBhOCwzIDAsMCwwIDE2LDAgYTgsMyAwLDAsMCAtMTYsMCBaIE00LDggYTgsMyAwLDAsMCAxNiwwIGE4LDMgMCwwLDAgLTE2LDAgWicvPjwvc3ZnPg==")} .icon-helmet{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTQsMTMgQzQsNiA4LDIgMTIsMiBDMTYsMiAyMCw2IDIwLDEzIEwyMCwxNSBINCBaIE05LDE1IFYxOSBINyBWMTUgWiBNMTcsMTUgVjE5IEgxNSBWMTUgWicvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTQsMTMgQzQsNiA4LDIgMTIsMiBDMTYsMiAyMCw2IDIwLDEzIEwyMCwxNSBINCBaIE05LDE1IFYxOSBINyBWMTUgWiBNMTcsMTUgVjE5IEgxNSBWMTUgWicvPjwvc3ZnPg==")} .icon-chart{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTQsMjAgSDggVjEzIEg0IFogTTEwLDIwIEgxNCBWOCBIMTAgWiBNMTYsMjAgSDIwIFYxNiBIMTYgWicvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTQsMjAgSDggVjEzIEg0IFogTTEwLDIwIEgxNCBWOCBIMTAgWiBNMTYsMjAgSDIwIFYxNiBIMTYgWicvPjwvc3ZnPg==")} .icon-compass{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNMTIsMiBhMTAsMTAgMCAxLDAgMC4wMSwwIFogTTEyLDQuNCBhNy42LDcuNiAwIDEsMCAwLjAxLDAgWiBNMTIsNiBMMTQsMTIgTDEyLDE4IEwxMCwxMiBaJy8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNMTIsMiBhMTAsMTAgMCAxLDAgMC4wMSwwIFogTTEyLDQuNCBhNy42LDcuNiAwIDEsMCAwLjAxLDAgWiBNMTIsNiBMMTQsMTIgTDEyLDE4IEwxMCwxMiBaJy8+PC9zdmc+")} .icon-gem{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTEyLDIgTDE4LDcgTDE1LDIxIEw5LDIxIEw2LDcgWicvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTEyLDIgTDE4LDcgTDE1LDIxIEw5LDIxIEw2LDcgWicvPjwvc3ZnPg==")} .player-banner{ display:inline-flex;align-items:center;justify-content:center; width:1.5rem;height:1.5rem; background:var(--swatch);border:2px solid var(--ink);border-radius:50%; vertical-align:middle; } .player-banner .icon-glyph{width:.85rem;height:.85rem} /* Brick, not gold -- already proven safe against paper2 in both themes (5.15:1 light, 6.29:1 dark) without needing a backing circle the way gold does, so the flame can sit bare next to a name instead of needing its own badge chrome like a banner does. */ .streak-flair{display:inline-flex;align-items:center;gap:.2rem;font-family:var(--mono);font-weight:700;font-size:.7rem;color:var(--brick)} .streak-flair .icon-glyph{width:.8rem;height:.8rem} /* Violet, same bare-icon treatment as the streak flame -- also already proven safe against paper2 in both themes (7.75:1 light, 5.04:1 dark) -- kept distinct from brick (streak) and from any banner color a player could actually pick, so the three flairs never get confused for one another at a glance. */ .founder-flair{display:inline-flex;align-items:center;color:var(--violet)} .founder-flair .icon-glyph{width:.8rem;height:.8rem} .premium-flair{display:inline-flex;align-items:center;color:var(--gold)} .premium-flair .icon-glyph{width:.8rem;height:.8rem} /* Turf-dk, the same green already proven as this site's default link color in both themes -- distinct from brick (streak), violet (founder), and gold (premium) so all four flairs stay tellable apart at a glance. */ .recruiter-flair{display:inline-flex;align-items:center;color:var(--turf-dk)} .recruiter-flair .icon-glyph{width:.8rem;height:.8rem} /* Badges -- a filled pill, deliberately unlike the bare streak/founder flair icons and unlike a banner's own colored circle, so a badge never reads as a fourth kind of thing to confuse with either. Gold icon on a neutral paper2 chip rather than a gold-filled chip, since a solid-gold pill would look exactly like picking gold as a banner color. */ .profile-badges-row{display:flex;flex-wrap:wrap;gap:.5rem} .profile-badge-group{margin-bottom:.9rem} .profile-badge-group:last-child{margin-bottom:0} .profile-badge-group-label{ font-family:var(--mono);font-weight:700;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase; color:var(--dim);margin-bottom:.4rem; } .badge-chip{ display:inline-flex;align-items:center;gap:.35rem; background:var(--paper2);border:2px solid var(--ink);border-radius:999px; padding:.35rem .7rem;font-family:var(--mono);font-weight:700;font-size:.7rem; color:var(--ink);box-shadow:2px 2px 0 var(--ink); } .badge-chip .icon-glyph{width:.85rem;height:.85rem;background-color:var(--gold)} /* ---------- End Zone Bingo ---------- */ /* 7 columns x 7 rows -- one row per position (QB/RB/WR/TE/K/DEF) plus a 7th of cross-position oddities, matching BINGO_CONDITIONS' own grouping in api/leaderboard.js. Every cell, filled or not, prints its own real condition (app.js's BINGO_SHORT) over a light tint of its row's color, plus a tiny corner tag -- a square says what it actually needs without being tapped first, and the tint still groups all seven rows at a glance. Not forced to a strict square aspect-ratio like the very first version -- real short sentences need more room than a bare letter did, so height is left to whatever two or three lines of tiny text actually takes. Filled flips the tint to full-strength color, flips the text to paper2 for contrast, and adds a checkmark. */ .bingo-count{font-family:var(--mono);font-weight:400;font-size:.68rem;color:var(--dim)} .bingo-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem;margin:.7rem 0} .bingo-cell{ position:relative;min-height:3.4rem;border-radius:6px;border:2px solid var(--line2); cursor:pointer;padding:.75rem .15rem .2rem;transition:.12s;overflow:hidden; display:flex;align-items:center;justify-content:center; } .bingo-cell:hover{transform:translateY(-1px);border-color:var(--ink)} .bingo-cell-row-tag{position:absolute;top:2px;left:3px;font-family:var(--mono);font-weight:700;font-size:.42rem;letter-spacing:.02em;opacity:.8} .bingo-cell-text{font-family:var(--mono);font-weight:700;font-size:.48rem;line-height:1.2;text-align:center;color:var(--ink);word-break:break-word} .bingo-cell-check{position:absolute;top:1px;right:3px;font-size:.6rem;line-height:1;color:var(--paper2);font-weight:700} .bingo-cell.filled{border-color:var(--ink);box-shadow:1px 1px 0 var(--ink)} .bingo-cell.filled .bingo-cell-text{color:var(--paper2)} /* Unfilled: a light tint of the row's color, corner tag in that same color; filled: that same color at full strength. Paired so each row only has to name its color once. */ .bingo-cell.row-qb{background:color-mix(in srgb, var(--pos-qb) 16%, var(--paper2))} .bingo-cell.row-qb .bingo-cell-row-tag{color:var(--pos-qb)} .bingo-cell.filled.row-qb{background:var(--pos-qb)} .bingo-cell.row-rb{background:color-mix(in srgb, var(--pos-rb) 16%, var(--paper2))} .bingo-cell.row-rb .bingo-cell-row-tag{color:var(--pos-rb)} .bingo-cell.filled.row-rb{background:var(--pos-rb)} .bingo-cell.row-wr{background:color-mix(in srgb, var(--pos-wr) 16%, var(--paper2))} .bingo-cell.row-wr .bingo-cell-row-tag{color:var(--pos-wr)} .bingo-cell.filled.row-wr{background:var(--pos-wr)} .bingo-cell.row-te{background:color-mix(in srgb, var(--pos-te) 16%, var(--paper2))} .bingo-cell.row-te .bingo-cell-row-tag{color:var(--pos-te)} .bingo-cell.filled.row-te{background:var(--pos-te)} .bingo-cell.row-k{background:color-mix(in srgb, var(--pos-k) 16%, var(--paper2))} .bingo-cell.row-k .bingo-cell-row-tag{color:var(--pos-k)} .bingo-cell.filled.row-k{background:var(--pos-k)} .bingo-cell.row-def{background:color-mix(in srgb, var(--pos-def) 16%, var(--paper2))} .bingo-cell.row-def .bingo-cell-row-tag{color:var(--pos-def)} .bingo-cell.filled.row-def{background:var(--pos-def)} .bingo-cell.row-any{background:color-mix(in srgb, var(--gold) 22%, var(--paper2))} .bingo-cell.row-any .bingo-cell-row-tag{color:color-mix(in srgb, var(--gold) 65%, var(--ink))} .bingo-cell.filled.row-any{background:var(--gold)} .bingo-detail{font-family:var(--mono);font-size:.72rem;color:var(--dim);min-height:2.2em;line-height:1.4;margin:0} /* Fixed, centered, floats above everything (including the auth/premium modals' z-index:80) since it can fire the instant a score posts, which on the result screen is nothing else is open over -- but staying above confirms it never gets visually trapped behind one regardless. Starts translated up and transparent; .show (added a frame after unhiding, so the transition actually has something to animate from) slides it down into place. */ .badge-toast{ position:fixed;top:1.2rem;left:50%;z-index:95; display:flex;align-items:center;gap:.7rem; background:var(--paper2);border:3px solid var(--ink);border-radius:var(--r); padding:.8rem 1.2rem;box-shadow:var(--shadow); opacity:0;transform:translate(-50%,-18px);transition:opacity .3s,transform .3s; pointer-events:none;max-width:calc(100vw - 2rem); } .badge-toast[hidden]{display:none} .badge-toast.show{opacity:1;transform:translate(-50%,0)} /* The unlock moment itself -- the slide-fade above just announces the toast; this makes earning a badge feel distinct from any other message on the page. The card's ink-shadow punches out further than its resting --shadow on impact, and the icon slams down like a rubber stamp hitting paper, oversized and slightly rotated, before settling square -- the same hard-edged ink-shadow language used everywhere else on the page rather than a generic bounce or glow. Runs alongside (not instead of) the opacity/transform transition above: this only touches box-shadow on the card and transform on the icon, so the two never fight over the same property. */ .badge-toast.show{animation:badge-toast-impact .45s ease-out .08s both} .badge-toast.show #badge-toast-icon{animation:badge-stamp .5s cubic-bezier(.32,1.7,.5,1) .08s both} @keyframes badge-toast-impact{ 0%,40%{box-shadow:var(--shadow)} 55%{box-shadow:10px 10px 0 var(--ink)} 100%{box-shadow:var(--shadow)} } @keyframes badge-stamp{ 0%{transform:scale(2.4) rotate(-16deg);opacity:0} 50%{transform:scale(.85) rotate(5deg);opacity:1} 72%{transform:scale(1.14) rotate(-2deg)} 100%{transform:scale(1) rotate(0)} } @media (prefers-reduced-motion:reduce){ .badge-toast.show, .badge-toast.show #badge-toast-icon{animation:none} } /* #badge-toast-icon, not the .badge-toast-icon class this looked like it should be -- the element only ever carries id="badge-toast-icon" (see index.html and showBadgeToastQueue's className assignment in app.js), so this rule was dead: the icon rendered at 0x0 and was invisible on every single badge unlock until this fix. */ #badge-toast-icon{width:1.8rem;height:1.8rem;background-color:var(--gold);flex:none} .badge-toast-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} .badge-toast-name{font-family:var(--serif);font-weight:800;font-size:1.1rem;color:var(--ink);white-space:nowrap} /* Same shape as .badge-toast, but fixed near-black/gold rather than theme-adaptive -- see --paper-fixed's own comment on why: this is meant to read as a genuine rare event both in light and dark mode, not blend into whichever paper tone is currently active. */ .elite-toast{ position:fixed;top:1.2rem;left:50%;z-index:96; display:flex;align-items:center;gap:.7rem; background:var(--ink-fixed);border:3px solid var(--gold);border-radius:var(--r); padding:.8rem 1.3rem;box-shadow:var(--shadow); opacity:0;transform:translate(-50%,-18px) scale(.92);transition:opacity .3s,transform .3s; pointer-events:none;max-width:calc(100vw - 2rem); } .elite-toast[hidden]{display:none} .elite-toast.show{opacity:1;transform:translate(-50%,0) scale(1)} .elite-toast-icon{width:1.8rem;height:1.8rem;background-color:var(--gold);flex:none} .elite-toast-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)} .elite-toast-name{font-family:var(--serif);font-weight:800;font-size:1.1rem;color:var(--paper-fixed);white-space:nowrap} /* Sits lower than .badge-toast/.elite-toast (top:1.2rem) rather than sharing their exact spot -- a pick can be both a 99th-percentile celebration and a lucky-history callout at once, and stacking here instead of overlapping is simpler than picking one to suppress. */ .luck-toast{ position:fixed;top:5.6rem;left:50%;z-index:94; display:flex;align-items:center;gap:.6rem; background:var(--paper2);border:2px solid var(--gold);border-radius:var(--r); padding:.6rem 1rem;box-shadow:var(--shadow-sm); opacity:0;transform:translate(-50%,-12px);transition:opacity .3s,transform .3s; pointer-events:none;max-width:calc(100vw - 2rem); font-family:var(--mono);font-size:.78rem;color:var(--ink); } .luck-toast[hidden]{display:none} .luck-toast.show{opacity:1;transform:translate(-50%,0)} .luck-toast .icon-glyph{width:1.1rem;height:1.1rem;background-color:var(--gold);flex:none} /* Same shape as the good-luck toast, just recolored to the site's usual "warning/bad" accent (see .pick-price.tier-expensive, the rebuilding_ year badge) instead of restyling the whole thing separately. */ .luck-toast.luck-toast-bad{border-color:var(--brick)} .luck-toast.luck-toast-bad .icon-glyph{background-color:var(--brick)} /* Same slide-fade shape as .luck-toast above, its own element rather than a shared class -- fires at a completely different moment (right after a submission, not mid-draft) so the two never actually overlap in time, but keeping them distinct avoids a misleading class name on whichever one came second. Reuses .luck-toast's top offset (5.6rem) rather than .badge-toast's (1.2rem) so a round that both earns a badge and beats a personal best doesn't stack the two on top of each other. */ .pb-toast{ position:fixed;top:5.6rem;left:50%;z-index:94; display:flex;align-items:center;gap:.6rem;font-weight:700; background:var(--paper2);border:2px solid var(--turf-dk);border-radius:var(--r); padding:.6rem 1rem;box-shadow:var(--shadow-sm); opacity:0;transform:translate(-50%,-12px);transition:opacity .3s,transform .3s; pointer-events:none;max-width:calc(100vw - 2rem); font-family:var(--mono);font-size:.78rem;color:var(--ink); } .pb-toast[hidden]{display:none} .pb-toast.show{opacity:1;transform:translate(-50%,0)} .pb-toast .icon-glyph{width:1.1rem;height:1.1rem;background-color:var(--turf-dk);flex:none} .banner-icon-row{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-bottom:1.1rem} .banner-icon-btn{ width:100%;aspect-ratio:1;color:var(--ink); background:var(--paper2);border:2px solid var(--ink);border-radius:50%;cursor:pointer; display:grid;place-items:center;box-shadow:2px 2px 0 var(--ink);transition:.12s; } .banner-icon-btn .icon-glyph{width:1.15rem;height:1.15rem} .banner-icon-btn:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)} /* Gold-on-ink (the site's usual "selected" look) loses contrast in dark mode -- both land light -- so this picker's own selected state uses the turf/paper2 pairing instead, proven to hold up in both themes. */ .banner-icon-btn.active{background:var(--turf);color:var(--paper2);outline:3px solid var(--ink);outline-offset:1px} .banner-swatch-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.1rem} .banner-swatch{ width:1.9rem;height:1.9rem;border-radius:50%;border:2px solid var(--ink);cursor:pointer;padding:0; background:var(--swatch);box-shadow:2px 2px 0 var(--ink);transition:.12s; } .banner-swatch:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)} .banner-swatch.active{outline:3px solid var(--gold);outline-offset:2px} /* The name-color row's "reset to default" option -- unlike every other swatch it has no --swatch of its own to show as a fill, so it needs its own look (a plain paper circle with a slash) rather than rendering as a visually broken, colorless button. */ .banner-swatch-none{background:var(--paper2);position:relative} .banner-swatch-none::after{ content:'';position:absolute;inset:0;margin:auto;width:65%;height:2px; background:var(--dim);transform:rotate(-45deg); } .banner-preview-lbl{font-family:var(--mono);font-size:.68rem;color:var(--dim)} /* A single real .lb-row instead of two disconnected preview widgets -- see updateBannerLivePreview in app.js -- so this is genuinely what both choices together will look like on an actual board, in the modal's own paper2 background rather than a real board's. */ .banner-live-preview{margin:.9rem 0 1.3rem;padding:.9rem;background:var(--paper2);border:2px solid var(--line2);border-radius:var(--r)} .banner-live-preview .banner-preview-lbl{display:block;margin-bottom:.5rem} .banner-live-preview .lb-row{border-bottom:0;cursor:default} .namecolor-title{margin-top:1.3rem} #namecolor-preview{font-weight:700} .auth-switch{font-family:var(--mono);font-size:.72rem;color:var(--dim);margin-top:1.1rem;text-align:center} /* ---------- start ---------- */ /* The pylon/goal-line stripe every end zone actually has -- the one purely decorative touch that ties the page to its name before a word of copy loads. Sits above the account bar, full-bleed, independent of the max-width content column below it. */ .endzone-stripe{ height:9px;width:100%; background:repeating-linear-gradient(-45deg, var(--turf) 0 16px, var(--gold) 16px 32px); border-bottom:2px solid var(--ink); } .hero-badge{ display:inline-block;font-size:.62rem;color:var(--ink); border:2px solid var(--ink);background:var(--paper2); padding:.4rem .8rem;border-radius:var(--r);margin-bottom:1rem;font-weight:700; } .hero-badge strong{font-weight:900;color:var(--turf-dk)} .wordmark{ font-family:var(--serif);font-weight:900;text-transform:uppercase; font-size:clamp(2.8rem,11vw,5.2rem);line-height:.92;letter-spacing:-.02em;color:var(--ink); /* A crisp gold step plus a soft blurred lift behind it, the same "hard offset + soft blur" pairing already used for button hovers elsewhere in this file (see .btn-lg:hover). Used to also have a second hard step in --ink for a jersey-number look, but --ink is also this element's own text color -- a same-color shadow sitting just behind same-color letters reads as a smudged double-exposure rather than a crisp outline, actively hurting legibility rather than adding depth. */ text-shadow:4px 4px 0 var(--gold), 0 14px 22px rgba(0,0,0,.28); transition:transform .15s ease-out; transform-style:preserve-3d; } /* display:inline-block, not inline -- a transform (the settle-in animation below, and the hover tilt applied to the parent .wordmark itself) never applies to a plain non-replaced inline box regardless of what's requested; this is what actually lets either one render. */ .wordmark span{display:inline-block} .wordmark .accent{color:var(--turf);margin-left:.14em} /* Settles into place once on load, like a rolled die coming to rest -- ZONE lands a beat after END rather than both landing together, so it reads as two separate rolls, not one static image fading in. both keeps each span at its animation's final state after it finishes instead of snapping back to the pre-animation styles. */ @keyframes wordmark-settle{ 0%{transform:translateY(-18px) rotate(-6deg);opacity:0} 65%{transform:translateY(3px) rotate(1.5deg);opacity:1} 100%{transform:translateY(0) rotate(0deg);opacity:1} } .wordmark span{animation:wordmark-settle .5s cubic-bezier(.34,1.56,.64,1) both} .wordmark .accent{animation-delay:.12s} @media(prefers-reduced-motion:reduce){ .wordmark span{animation:none} } @media(max-width:480px){.wordmark{text-shadow:3px 3px 0 var(--gold)}} /* Past 11vw's own growth curve, the wordmark saturates its old 5.2rem cap by ~756px viewport and then just sits flat while its actual container -- the middle column of .start-layout, minmax(0,780px) -- keeps growing all the way out to that 780px on any wide desktop screen, leaving a big dead gap on either side of the title once the sidebars' own content (trivia/leaderboard cards) is what's actually setting the row's height. Gated to 1300px, past the 3-column layout's own tight-fit zone right at its 1101px breakpoint (where the middle column can be as narrow as ~440px) -- 780px is only reliably available once .start-layout is well clear of that edge. 7.8rem's own content width still lands comfortably under 780px even at the widest ordinary desktop viewports, so it grows to fill the column without risking overflow into the sidebars on either side. */ @media(min-width:1300px){ .wordmark{font-size:clamp(5.2rem,6.5vw,7.8rem)} .tagline{font-size:clamp(1.3rem,1.6vw,1.7rem);max-width:38ch} } .tagline{ font-family:var(--serif);font-style:italic;font-weight:600;color:var(--ink2); margin:.7rem auto 1.6rem;font-size:clamp(1.15rem,3.4vw,1.55rem);line-height:1.35; max-width:34ch;padding-bottom:1rem;border-bottom:3px solid var(--ink); } .tagline em{color:var(--turf-dk);font-style:italic} .howto{margin-top:2rem} .howto summary{ display:inline-flex;align-items:center;gap:.5rem;list-style:none;cursor:pointer; font-family:var(--mono);font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase; background:var(--paper2);border:2px solid var(--ink);border-radius:var(--r);color:var(--ink); padding:.55rem 1rem;box-shadow:var(--shadow-sm);transition:transform .1s,box-shadow .1s,background .12s; } .howto summary::-webkit-details-marker{display:none} .howto summary::after{content:'+';font-size:1rem;line-height:1;font-weight:700} .howto[open] summary::after{content:'\2212'} .howto summary:hover{background:var(--turf);color:var(--paper2)} .howto summary:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)} .howto-body{ background:var(--paper2);border:2px solid var(--ink);border-radius:var(--r); box-shadow:var(--shadow);padding:1.6rem;text-align:left;margin-top:1.1rem; animation:rv .22s ease-out; } .rules{list-style:none;counter-reset:r} .rules li{ counter-increment:r;position:relative;padding-left:2.5rem;margin-bottom:.95rem; color:var(--ink2);font-size:.97rem; } .rules li::before{ content:counter(r);position:absolute;left:0;top:.02rem; width:1.7rem;height:1.7rem;border-radius:var(--r); background:var(--turf);border:2px solid var(--ink);color:var(--paper2); font-family:var(--mono);font-weight:700;font-size:.72rem;display:grid;place-items:center; } .rules b{color:var(--ink);font-weight:700} .roster-preview{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.4rem;padding-top:1.4rem;border-top:2px dashed var(--line2)} .roster-preview span{ font-family:var(--mono);font-weight:700;font-size:.7rem;letter-spacing:.1em; background:var(--paper);border:2px solid var(--ink);color:var(--ink); padding:.34rem .62rem;border-radius:var(--r); } .roster-preview .flex{background:var(--gold);color:var(--ink-fixed)} /* ---------- daily challenge ---------- */ .daily-card{ background:var(--paper2);border:3px solid var(--ink);border-radius:var(--r); box-shadow:10px 10px 0 var(--ink);padding:1.3rem 1.4rem 1.5rem;margin:0 auto 1.2rem; max-width:560px;text-align:center; } .daily-top{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:.8rem} .daily-kicker{ font-family:var(--mono);font-weight:700;font-size:.68rem;letter-spacing:.18em; text-transform:uppercase;color:var(--dim); } .daily-date{ font-family:var(--mono);font-weight:700;font-size:.68rem;letter-spacing:.08em; color:var(--turf-dk);padding:.1rem .4rem;border:2px solid var(--line2);border-radius:var(--r); } .daily-streak-row[hidden]{display:none} .daily-streak-row{ display:flex;align-items:center;justify-content:center;gap:.5rem;margin:-.4rem 0 1.1rem; font-family:var(--mono);font-size:.7rem;color:var(--dim); } .daily-streak-row b{color:var(--gold);font-size:.85rem} .daily-streak-sep{color:var(--faint)} .streak-flame-group{display:inline-flex;align-items:center;gap:.28rem} /* A dim, static flame is the "0 today, but you have a best" state -- the row itself only hides when there's never been a streak at all (streak.best === 0), so a broken current streak still needs to render as *something* rather than a blank gap where the icon usually sits. */ .streak-flame{width:.7rem;height:.7rem;background-color:var(--faint);flex:none;transition:width .25s,height .25s} /* Three tiers, not a continuous scale -- a streak is a day-count a player checks once a day at most, so discrete "it leveled up" jumps read as milestones worth noticing, where smooth interpolation would just look like noisy sizing between visits. */ .streak-flame.streak-flame-lit{background-color:var(--brick)} .streak-flame.streak-flame-hot{ width:.9rem;height:.9rem;background-color:var(--brick); animation:streak-flame-flicker 1.6s ease-in-out infinite; } .streak-flame.streak-flame-blaze{ width:1.1rem;height:1.1rem;background-color:var(--gold); animation:streak-flame-flicker 1.1s ease-in-out infinite; filter:drop-shadow(0 0 3px var(--gold)); } @keyframes streak-flame-flicker{ 0%,100%{transform:scale(1) rotate(-3deg)} 50%{transform:scale(1.14) rotate(3deg)} } @media (prefers-reduced-motion:reduce){ .streak-flame.streak-flame-hot,.streak-flame.streak-flame-blaze{animation:none} } .btn-xl{ display:block;width:100%;padding:1.3rem 1.2rem;font-size:clamp(1.05rem,3.6vw,1.4rem); letter-spacing:.12em;border-width:3px;box-shadow:9px 9px 0 var(--ink); background:var(--gold);color:var(--ink-fixed); } .btn-xl:hover{transform:translate(3px,3px);box-shadow:6px 6px 0 var(--ink);background:#e2a83c} .btn-xl:active{transform:translate(6px,6px);box-shadow:3px 3px 0 var(--ink)} .daily-status{font-family:var(--mono);font-size:.72rem;color:var(--dim);margin-top:.8rem;line-height:1.5} .daily-archive-link{display:inline-block;margin-top:.9rem} .daily-archive-link .premium-badge{margin-left:.3rem} /* Once today's round is done, the score itself is the headline -- bigger and bolder than any of the surrounding start-screen copy, gold to match the result screen's plate. */ .daily-score{ display:flex;align-items:baseline;justify-content:center;gap:.55rem; background:var(--paper3);border:3px solid var(--ink);border-radius:var(--r); box-shadow:6px 6px 0 var(--ink);padding:.85rem 1.4rem;margin-bottom:1.4rem; } .daily-score[hidden]{display:none} .daily-score-num{ font-family:var(--serif);font-weight:900;font-size:clamp(2.4rem,8vw,3.2rem); color:var(--gold);line-height:1;letter-spacing:-.02em; } .daily-score-lbl{ font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim); } .start-layout{ max-width:1440px;margin:0 auto;padding:0 1.25rem; display:grid;grid-template-columns:280px minmax(0,780px) 280px;justify-content:center; gap:0 2rem;grid-template-areas:"trivia top side";align-items:start; } /* align-self:center rather than the grid's own default align-items:start -- this column's content (wordmark, tagline) is much shorter than the trivia/leaderboard cards beside it, so pinned to the top it left a big dead gap between the tagline and the mode buttons below. Centered within the row's full height (set by the taller side columns) instead, so it reads as balanced against them rather than parked at the top of empty space. */ .hero-top{grid-area:top;align-self:center;text-align:center;padding-top:clamp(.5rem,1.5vh,1rem)} /* Sits outside start-layout entirely -- rather than being confined to the grid's ~780px middle column, it gets the site's full 1440px content width, same as the topbar stripe, so the mode buttons actually use the space the trivia/leaderboard columns leave empty once they end. */ .hero-bottom{text-align:center;max-width:680px;margin:0 auto;padding:0 1.25rem 2.2rem} .home-lb,.home-trivia{max-width:280px;margin:0;margin-top:clamp(.5rem,2vh,1.5rem)} .home-lb{grid-area:side} .trivia-col{grid-area:trivia;max-width:280px} .home-trivia{text-align:left} .home-rank-digest{max-width:280px;margin:0 0 clamp(.5rem,2vh,1.5rem);text-align:left} .home-rank-digest-text{margin:0 0 .5rem;font-size:.85rem;line-height:1.45;color:var(--ink2)} /* The watermark's containing block is #trivia-content, not #home-trivia -- #home-trivia already carries its own position value (sticky on desktop, forced to static below 1100px, both via #id selectors elsewhere in this file), so a class-only position:relative here would never have won that fight consistently, and did lose it on the mobile/static side: the absolutely-positioned watermark escaped all the way out to the page's own containing block instead of staying inside the card. #trivia-content is new and untouched by either of those rules, so it can just always be its own clean, uncontested positioning context. */ #trivia-content{position:relative;overflow:hidden} /* Purely decorative -- the one bit of imagery on an otherwise all-type, all-color-block page. Tinted per that day's actual featured team (see refreshHomeTrivia in app.js) rather than a fixed color, so the card feels tied to today's specific legend instead of generic. Low opacity and behind everything else in the card (z-index isn't needed since it's the first child and the text content that follows naturally paints over it), so it never fights with the real text for attention. */ .trivia-watermark{ position:absolute;right:-1.1rem;bottom:-1.4rem;width:6.5rem;height:6.5rem; opacity:.14;pointer-events:none;color:var(--ink); } #home-lb,#home-trivia{position:sticky;top:1.5rem;border-top-width:5px} #home-lb{border-top-color:var(--turf-dk)} #home-trivia{border-top-color:var(--gold)} .lb-row-you{border-top:2px dashed var(--line2);margin-top:.3rem;padding-top:.6rem;font-weight:700} .lb-row-you .lb-name{color:var(--turf-dk)} /* Ranks 1-5 left, 6-10 right, rather than one ten-row column -- at full strength this list would grow taller than the wordmark/trivia content next to it and push the mode buttons (which come right after start-layout in the page flow) further down. Two columns keeps it about as tall as the trivia card beside it instead. Explicit grid-row per item rather than relying on grid auto-placement, since auto-placement's row cursor doesn't reliably wrap column 2 back to row 1 once column 1 is several rows deep. */ /* Trims .lb-panel's shared 1.4rem padding down a bit just for this one card -- the 2-column list below is tight on width, and this claws back a few extra px for it without touching the trivia/full-board panels that share the same .lb-panel class. */ #home-lb{padding:1.1rem} #home-lb-list .lb-empty{grid-column:1/-1} /* min-width:0 because a flex row placed in a 1fr grid track otherwise keeps the track from shrinking below the un-truncated name's full width -- .lb-name's own min-width:0 only lets *it* shrink once .lb-row already has a constrained width to divide up. */ #home-lb-list .lb-row{gap:.3rem;font-size:.8rem;padding:.4rem 0;min-width:0} /* Same desktop-only tightening as the hub's own .lb-row, just kept separate since this widget's rows only apply their compact sizing at the wider single-column sidebar layout (see the max-width:1100px block below for the narrower two-column state, which already has plenty of room and is left alone). */ @media (min-width:1101px){ /* A little shorter still -- every row/rank/score stays, just packed tighter (row padding, panel padding, and the title/link margins hugging them a bit closer) so the card reads more compact without dropping anything from the board. */ #home-lb-list .lb-row{padding:.1rem 0;font-size:.72rem} #home-lb{padding:.85rem} #home-lb .lb-board-title{margin-bottom:.3rem} #home-lb .lbhub-link{margin-top:.45rem} } /* Today's top 3, inside the daily-challenge card itself (see dailyCardPodiumHtml) -- right where someone's deciding whether to play, not off on the separate leaderboard widget beside it. Each row tinted with its own tier's color at low opacity, same color-mix technique as the hub's own top-3 name highlight, just as a full row background here since there's no separate "list" context to keep it scoped to just the name. text-align:left overrides .daily-card's own centered text -- flex rows don't care either way, but the plain name/ score text inside each one would otherwise center along with everything else in the card. Gold's row is a touch taller/bolder than silver/bronze's -- first place earns slightly more visual weight than a same-size row would give every tier equally. */ .daily-card-podium{display:flex;flex-direction:column;gap:.3rem;margin:1rem 0 .2rem;text-align:left} .daily-podium-row{ display:flex;align-items:center;gap:.5rem;border-radius:var(--r); padding:.4rem .6rem;font-family:var(--mono);font-size:.78rem; } .daily-podium-row .podium-medal{width:1.1rem;height:1.1rem;margin-right:0;flex:none} .daily-podium-name{font-weight:700;color:var(--ink);flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .daily-podium-score{font-weight:700;color:var(--ink2);flex:none} .daily-podium-rank-1{background:color-mix(in srgb, var(--gold) 22%, transparent);padding:.55rem .65rem;font-size:.86rem} .daily-podium-rank-1 .podium-medal{width:1.25rem;height:1.25rem} .daily-podium-rank-2{background:color-mix(in srgb, var(--silver) 22%, transparent)} .daily-podium-rank-3{background:color-mix(in srgb, var(--bronze) 22%, transparent)} #home-lb-list .lb-rank{width:1rem} #home-lb-list .lb-name-group{gap:.25rem} /* Each row here only has ~100px total to split between rank, name and score, so the full circular badge (24px incl. border) would crowd the name out almost entirely -- shrink it here so the name keeps real width. Keeps the circle (not just the bare glyph): each swatch's `fg` icon color is only guaranteed readable against its own `bg` circle -- e.g. gold's icon color is only 2.3:1 against the card background on its own, well under the 3:1 floor for graphics, so dropping the backing circle would make gold banners nearly invisible in light mode. */ #home-lb-list .player-banner{width:.95rem;height:.95rem;border:none;flex:none} #home-lb-list .player-banner .icon-glyph{width:.55rem;height:.55rem} #home-lb-list .lb-row:nth-child(1){grid-column:1;grid-row:1} #home-lb-list .lb-row:nth-child(2){grid-column:1;grid-row:2} #home-lb-list .lb-row:nth-child(3){grid-column:1;grid-row:3} #home-lb-list .lb-row:nth-child(4){grid-column:1;grid-row:4} #home-lb-list .lb-row:nth-child(5){grid-column:1;grid-row:5} #home-lb-list .lb-row:nth-child(6){grid-column:2;grid-row:1} #home-lb-list .lb-row:nth-child(7){grid-column:2;grid-row:2} #home-lb-list .lb-row:nth-child(8){grid-column:2;grid-row:3} #home-lb-list .lb-row:nth-child(9){grid-column:2;grid-row:4} #home-lb-list .lb-row:nth-child(10){grid-column:2;grid-row:5} #home-lb-list .lb-row-you{grid-column:1/-1;grid-row:6} .trivia-pts-row{display:flex;align-items:baseline;gap:.4rem;margin:.3rem 0 .6rem} .trivia-pts{font-family:var(--serif);font-weight:900;font-size:2.1rem;color:var(--gold);line-height:1;letter-spacing:-.02em} .trivia-pts-lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} .total-points-row{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap} .total-points-value{font-family:var(--serif);font-weight:900;font-size:2.1rem;color:var(--gold);line-height:1;letter-spacing:-.02em;margin:0} .total-points-rank{font-family:var(--mono);font-size:.78rem;color:var(--dim);margin:0} .total-points-compare{font-family:var(--mono);font-size:.72rem;color:var(--dim);margin:.3rem 0 0} .total-points-compare b{color:var(--ink)} .total-points-compare[hidden]{display:none} .trivia-name{font-family:var(--mono);font-weight:700;font-size:.78rem;color:var(--ink);margin-bottom:.6rem;line-height:1.4} .trivia-blurb{font-family:var(--serif);font-style:italic;font-size:.86rem;color:var(--ink2);line-height:1.55} @media (max-width:1100px){ .start-layout{grid-template-columns:minmax(0,560px);grid-template-areas:"top" "trivia" "side"} .home-lb,.home-trivia{max-width:560px;width:100%;margin:1rem 0} /* .trivia-col's own max-width is the 280px desktop sidebar's -- left uncapped here, it kept the card pinned to that narrow width and flush against the left edge of the wider single-column track instead of centered, most visible now that the collapsed mobile button is so much narrower than the card around it. */ .trivia-col{max-width:none} #home-lb,#home-trivia{position:static} /* Left-aligned text reads fine in the narrow 280px desktop sidebar, but once the card goes full-width and stacks with everything else centered (the wordmark, tagline, mode buttons), left-aligned text in a wide box looks off-balance -- center it to match. ID selector, not just the class -- .lb-panel's own text-align:left is declared later in this file at equal class-only specificity and would otherwise silently win regardless of viewport, the same trap #home-trivia's own border-top already hit. */ #home-trivia{text-align:center} .trivia-pts-row{justify-content:center} /* The 280px desktop sidebar is too narrow to split into two columns without truncating names -- at this width the widget is full-width (560px) instead, where two columns still leave real room per name. */ #home-lb-list{display:grid;grid-template-columns:1fr 1fr;column-gap:.4rem} } /* That same 560px cap keeps shrinking right along with the viewport below it, though -- a true phone screen (as opposed to the 1100px breakpoint's own tablet-width assumption) leaves each column well under half of "real room per name", which is exactly what was truncating names like "Golden T…" here. Below 600px, back to one column stacked in real rank order -- display:block is enough on its own; the nth-child grid-column/grid-row rules above only do anything under display:grid, so they're simply inert here rather than needing their own reset. */ @media(max-width:600px){ #home-lb-list{display:block} } /* Collapsed to one line by default on phone-sized screens -- the full card (title, a big point number, a name, and an italic blurb) ran long enough to push the mode buttons a full scroll below the fold. Same spot in the layout either way, just hidden until tapped open; see app.js's own refreshHomeTrivia (adds .trivia-loaded once there's real content to show) and #btn-trivia-toggle's click handler (adds .trivia-expanded). Untouched above 600px, where the card was never collapsed to begin with. */ .trivia-toggle-btn{display:none} @media(max-width:600px){ #home-trivia.trivia-loaded:not(.trivia-expanded) #trivia-content{display:none} #home-trivia.trivia-loaded:not(.trivia-expanded) .trivia-toggle-btn{ display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%; font-family:var(--serif);font-weight:800;font-size:.95rem;color:var(--ink); background:none;border:0;padding:.3rem 0;cursor:pointer; } #home-trivia.trivia-loaded:not(.trivia-expanded) .trivia-toggle-btn .icon-glyph{ width:1rem;height:1rem;background-color:var(--gold);flex:none; } } /* Icons live as ::before content rather than markup so they can't be wiped out by the JS that rewrites #btn-daily's textContent on every render. Each is a plain white silhouette used as a mask -- background-color: currentColor means it always matches that button's own text color, so it tracks night mode automatically with no per-theme overrides. */ #btn-start::before, #btn-start-blind::before, #btn-start-auction::before, #btn-start-playoff::before, #btn-start-team::before, #btn-start-seasonsim::before, #btn-daily::before{ content:'';display:inline-block;width:1.15em;height:1.15em; margin-right:.55rem;vertical-align:-.18em;background-color:currentColor; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain; } #btn-start::before{ -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNMiwyIEgyMiBWMjIgSDIgWiBNNyw3IG0tMi4yLDAgYTIuMiwyLjIgMCAxLDAgNC40LDAgYTIuMiwyLjIgMCAxLDAgLTQuNCwwIE0xNyw3IG0tMi4yLDAgYTIuMiwyLjIgMCAxLDAgNC40LDAgYTIuMiwyLjIgMCAxLDAgLTQuNCwwIE03LDE3IG0tMi4yLDAgYTIuMiwyLjIgMCAxLDAgNC40LDAgYTIuMiwyLjIgMCAxLDAgLTQuNCwwIE0xNywxNyBtLTIuMiwwIGEyLjIsMi4yIDAgMSwwIDQuNCwwIGEyLjIsMi4yIDAgMSwwIC00LjQsMCBNMTIsMTIgbS0yLjIsMCBhMi4yLDIuMiAwIDEsMCA0LjQsMCBhMi4yLDIuMiAwIDEsMCAtNC40LDAnLz48L3N2Zz4="); mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNMiwyIEgyMiBWMjIgSDIgWiBNNyw3IG0tMi4yLDAgYTIuMiwyLjIgMCAxLDAgNC40LDAgYTIuMiwyLjIgMCAxLDAgLTQuNCwwIE0xNyw3IG0tMi4yLDAgYTIuMiwyLjIgMCAxLDAgNC40LDAgYTIuMiwyLjIgMCAxLDAgLTQuNCwwIE03LDE3IG0tMi4yLDAgYTIuMiwyLjIgMCAxLDAgNC40LDAgYTIuMiwyLjIgMCAxLDAgLTQuNCwwIE0xNywxNyBtLTIuMiwwIGEyLjIsMi4yIDAgMSwwIDQuNCwwIGEyLjIsMi4yIDAgMSwwIC00LjQsMCBNMTIsMTIgbS0yLjIsMCBhMi4yLDIuMiAwIDEsMCA0LjQsMCBhMi4yLDIuMiAwIDEsMCAtNC40LDAnLz48L3N2Zz4="); } #btn-start-blind::before{ -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHJlY3QgeD0nMScgeT0nOCcgd2lkdGg9JzknIGhlaWdodD0nOCcgcng9JzIuNScgZmlsbD0nI2ZmZicvPjxyZWN0IHg9JzE0JyB5PSc4JyB3aWR0aD0nOScgaGVpZ2h0PSc4JyByeD0nMi41JyBmaWxsPScjZmZmJy8+PHJlY3QgeD0nMTAnIHk9JzEwJyB3aWR0aD0nNCcgaGVpZ2h0PScyJyBmaWxsPScjZmZmJy8+PC9zdmc+"); mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHJlY3QgeD0nMScgeT0nOCcgd2lkdGg9JzknIGhlaWdodD0nOCcgcng9JzIuNScgZmlsbD0nI2ZmZicvPjxyZWN0IHg9JzE0JyB5PSc4JyB3aWR0aD0nOScgaGVpZ2h0PSc4JyByeD0nMi41JyBmaWxsPScjZmZmJy8+PHJlY3QgeD0nMTAnIHk9JzEwJyB3aWR0aD0nNCcgaGVpZ2h0PScyJyBmaWxsPScjZmZmJy8+PC9zdmc+"); } #btn-start-auction::before{ -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNMyw2IEwxNSw2IEwyMiwxMiBMMTUsMTggTDMsMTggWiBNOCwxMiBtLTIuMiwwIGEyLjIsMi4yIDAgMSwwIDQuNCwwIGEyLjIsMi4yIDAgMSwwIC00LjQsMCcvPjwvc3ZnPg=="); mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNMyw2IEwxNSw2IEwyMiwxMiBMMTUsMTggTDMsMTggWiBNOCwxMiBtLTIuMiwwIGEyLjIsMi4yIDAgMSwwIDQuNCwwIGEyLjIsMi4yIDAgMSwwIC00LjQsMCcvPjwvc3ZnPg=="); } #btn-start-playoff::before{ -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nbm9uZScgc3Ryb2tlPScjZmZmJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZS1saW5lY2FwPSdzcXVhcmUnIGQ9J00yLDUgTDgsNSBNMiwxMCBMOCwxMCBNOCw1IEw4LDEwIE04LDcuNSBMMTIsNy41IE0yLDE0IEw4LDE0IE0yLDE5IEw4LDE5IE04LDE0IEw4LDE5IE04LDE2LjUgTDEyLDE2LjUgTTEyLDcuNSBMMTIsMTYuNSBNMTIsMTIgTDIwLDEyJy8+PC9zdmc+"); mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nbm9uZScgc3Ryb2tlPScjZmZmJyBzdHJva2Utd2lkdGg9JzInIHN0cm9rZS1saW5lY2FwPSdzcXVhcmUnIGQ9J00yLDUgTDgsNSBNMiwxMCBMOCwxMCBNOCw1IEw4LDEwIE04LDcuNSBMMTIsNy41IE0yLDE0IEw4LDE0IE0yLDE5IEw4LDE5IE04LDE0IEw4LDE5IE04LDE2LjUgTDEyLDE2LjUgTTEyLDcuNSBMMTIsMTYuNSBNMTIsMTIgTDIwLDEyJy8+PC9zdmc+"); } #btn-daily::before{ -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTIsMTIgUTEyLDIgMjIsMTIgUTEyLDIyIDIsMTIgWicvPjwvc3ZnPg=="); mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTIsMTIgUTEyLDIgMjIsMTIgUTEyLDIyIDIsMTIgWicvPjwvc3ZnPg=="); } #btn-start-team::before{ -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTEyLDIgTDIwLDUgTDIwLDExIEMyMCwxNyAxNiwyMSAxMiwyMiBDOCwyMSA0LDE3IDQsMTEgTDQsNSBaJy8+PC9zdmc+"); mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTEyLDIgTDIwLDUgTDIwLDExIEMyMCwxNyAxNiwyMSAxMiwyMiBDOCwyMSA0LDE3IDQsMTEgTDQsNSBaJy8+PC9zdmc+"); } /* An ascending bar chart -- the same "stats add up across a season" idea as the site's own .icon-chart glyph elsewhere, not a new visual concept invented just for this one button. */ #btn-start-seasonsim::before{ -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTQsMjAgSDggVjEzIEg0IFogTTEwLDIwIEgxNCBWOCBIMTAgWiBNMTYsMjAgSDIwIFY0IEgxNiBaJy8+PC9zdmc+"); mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTQsMjAgSDggVjEzIEg0IFogTTEwLDIwIEgxNCBWOCBIMTAgWiBNMTYsMjAgSDIwIFY0IEgxNiBaJy8+PC9zdmc+"); } .btn-blind{background:var(--ink-fixed);color:var(--paper-fixed);position:relative;overflow:visible} .btn-blind:hover{background:color-mix(in srgb, var(--ink-fixed) 85%, white)} .btn-playoff{background:var(--violet);color:var(--paper2);position:relative;overflow:visible} .btn-playoff:hover{background:color-mix(in srgb, var(--violet) 85%, black)} .fan-fav-badge{ position:absolute;top:-.75rem;right:-.7rem; background:var(--gold);color:var(--ink-fixed); font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;padding:.3rem .55rem;border:2px solid var(--ink); border-radius:999px;box-shadow:3px 3px 0 var(--ink); transform:rotate(7deg);pointer-events:none; } /* ---------- hero modes: auction | daily challenge | blind, classic below ---------- */ /* Lives outside start-layout on purpose -- see the comment on .hero-bottom above. Same 1440px content width as the topbar stripe and account bar, so the buttons actually use the page's full width instead of being boxed into the ~680px column between the trivia and leaderboard cards. */ .hero-modes{max-width:1440px;margin:0 auto 1.6rem;padding:0 1.25rem} /* Classic and blind flank the daily card as tall side panels, with auction as its own full-width banner underneath -- the daily challenge is the one thing worth returning for every day, so it stays the visual center instead of getting buried among four equal-weight buttons. All four are one flex/grid container (.mode-quad) rather than a panel-trio plus a separate banner sibling, specifically so mobile's stack order and desktop's panels-vs-banner arrangement can be set independently -- `order` controls the former, `grid-area` the latter, and neither depends on these elements' actual DOM order. Below 760px there isn't room for a card and two panels side by side without squeezing the daily card's own content, so it collapses to a single stacked column, daily first since it's the one thing worth checking every day. */ .mode-quad{ display:flex;flex-direction:column;gap:.9rem;margin-bottom:.9rem; } @media(max-width:759px){ .mode-trio-daily{order:1} #btn-start-blind{order:2} .mode-classic{order:3} .mode-tier2{order:4} } .mode-trio-daily{margin:0;max-width:none} /* Auction/Playoff/Team/Season Sim used to each be their own full-width row in .mode-quad's grid -- four consecutive colored stripes with nothing but a corner badge telling them apart. Grouped into one container instead so desktop can lay them out 2x2 (see the min-width rule below) rather than stacking every one of them full-width; on mobile this is just a plain vertical stack, same as before, since there's no room for two across down here. */ .mode-tier2{display:flex;flex-direction:column;gap:.9rem} .btn-panel{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem; width:100%;min-height:130px;padding:1.2rem 1rem; font-size:clamp(1.05rem,2vw,1.6rem);letter-spacing:.1em; border-width:4px;box-shadow:9px 9px 0 var(--ink);position:relative;overflow:visible; } .btn-panel:hover{transform:translate(3px,3px);box-shadow:6px 6px 0 var(--ink), 0 10px 26px rgba(0,0,0,.3)} .btn-panel:active{transform:translate(6px,6px);box-shadow:3px 3px 0 var(--ink)} /* Same specificity as the shared icon rule above (one id + one pseudo) -- declared later, so these two win the tie: a bigger glyph stacked above the label instead of inline before it, sized for a tile rather than a line of text. Targets whichever two buttons are the panels right now (classic + blind) rather than a role-neutral selector, since which button is a panel vs. the banner is exactly what this layout swaps. */ #btn-start::before, #btn-start-blind::before{ width:2.6em;height:2.6em;margin:0;vertical-align:0; } .btn-lg{margin-bottom:.4rem} @media(min-width:760px){ .mode-quad{ display:grid;grid-template-columns:1fr 1.6fr 1fr;align-items:stretch;gap:1.4rem; grid-template-areas:"classic daily blind" "tier2 tier2 tier2"; } .mode-classic{grid-area:classic} .mode-trio-daily{grid-area:daily} #btn-start-blind{grid-area:blind} /* 2x2 instead of one row per mode -- auction/playoff fill the first row, team/seasonsim the second, in plain DOM order (see the .mode-tier2 markup in index.html). align-items:stretch (the grid default) matches each row's own two cards to the taller one's height, same idea .mode-quad's own top row already relies on. */ .mode-tier2{grid-area:tier2;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem} } /* Same btn-{color} / btn-lg / mode-{name} split as Playoff and Team Mode right above -- btn-seasonsim carries only the color (the site's own "new feature" gold, see the fan-fav-badge default, rather than a dedicated palette entry for a mode that isn't permanent yet), mode- seasonsim carries only grid placement (see the desktop/mobile rules below). Mixing the two into one class is what made this button end up on .btn-panel's small-card sizing instead of .btn-lg's full-width banner treatment every other mode button here actually uses. */ .btn-seasonsim{background:var(--gold);color:var(--ink-fixed);position:relative;overflow:visible} .btn-seasonsim:hover{background:color-mix(in srgb, var(--gold) 85%, black)} .btn-team{background:var(--teal);color:var(--paper2);position:relative;overflow:visible} .btn-team:hover{background:color-mix(in srgb, var(--teal) 80%, black)} /* Same teal as the Team Mode button itself, so the ad popup's heading reads as the same feature at a glance. */ .team-mode-accent{color:var(--teal)} .seasonsim-accent{color:var(--gold)} /* Budget lives on the auction card itself now -- one bordered/shadowed block (the wrapper carries the card chrome that used to live on the button alone) instead of a button plus a separate strip of chips below it, so picking a budget reads as part of the auction card rather than a control floating loose on the main page. The trigger button and the preset chips are siblings inside that wrapper, not nested -- a