/* Pigeon Studios: the chalk theme (from the studio banner). Loaded LAST on every page. - A black chalkboard (faint board grain under every page; sections are see-through, no lines between them). - White marker lettering (Caveat Brush, var(--hand)) for headings and notes; Geist for reading text and numbers. - Coloured chalk for accents: the owner's hand-drawn marks (assets/brand/doodle) are white line art, tinted with CSS masks (background = the chalk colour, mask = the drawing). Colour also comes from the covers, packs and ranks. - Structure: facts and numbers sit on chalk-ruled boards (1.5px lines), not loose pills. Every number stays the real one; 18+ / responsible-gambling text unchanged. */ :root { --bg: #08090b; --bg-alt: #0b0c0f; --surface: #0f1013; --surface-2: #16171b; --board: rgba(13, 14, 17, 0.82); --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.18); --text: #f2f2ef; --text-2: #b0b2b8; --text-3: #8d9099; /* 6:1 on --bg */ /* coloured chalk */ --ch-teal: #4fd1b0; --ch-yellow: #ffd65a; --ch-pink: #ff9cc6; --ch-blue: #8ec8ff; --accent: var(--ch-teal); --accent-ink: #062019; --accent-soft: rgba(79, 209, 176, 0.1); --hx-base: transparent; /* the owner's drawings */ --d-under: url(/assets/brand/doodle/under-1.webp); --d-ring: url(/assets/brand/doodle/ring-oval.webp); --d-arrow: url(/assets/brand/doodle/arrow-curve.webp); --d-sparkle: url(/assets/brand/doodle/sparkle-1.webp); --d-star: url(/assets/brand/doodle/star-1.webp); --d-check: url(/assets/brand/doodle/check.webp); } /* ---------- the board ---------- */ html { background: #08090b url(/assets/brand/board-tile.webp) 0 0 / 640px repeat; } body { background: transparent; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(8, 9, 11, 0.55); pointer-events: none; } .hero, .lb-hero, .section, .section.alt, .intro-band, .numbers, .site-footer { background: transparent; border: 0; } ::selection { background: var(--ch-yellow); color: #0a0a0c; } a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline-color: #fff; } a { text-decoration-color: rgba(255, 255, 255, 0.45); } /* a drawing tinted with chalk colour: set --c and --d on an empty element / pseudo-element */ .tint, .hero-stats .hs-max dd::after, .hs-note::after, .accent::after { background: var(--c, #fff); -webkit-mask: var(--d) center / 100% 100% no-repeat; mask: var(--d) center / 100% 100% no-repeat; } /* ---------- type ---------- */ .section h2, .sec-head h2, .intro-copy h2, .contact-panel h2, .xl-body h3, .doc h1, .sheet-title, .odds-dlg h2, .odds-dlg h3 { font-family: var(--hand); font-weight: 400; letter-spacing: 0; line-height: 0.98; } .sec-head h2, .section > .wrap > h2 { font-size: clamp(2.6rem, 5vw, 3.75rem); } .intro-copy h2 { font-size: clamp(3rem, 6vw, 4.75rem); line-height: 0.92; } .xl-body h3 { font-size: clamp(2rem, 3vw, 2.4rem); line-height: 1; } .doc h1 { font-size: clamp(2.8rem, 6vw, 4rem); line-height: 0.95; } .sheet-title { font-size: clamp(2.4rem, 6vw, 3rem); line-height: 0.95; } .odds-dlg h2, .odds-dlg h3 { font-size: 2rem; } #fair h2 { font-size: clamp(2.4rem, 4vw, 3rem); } .rr-group > h3:first-child { font: 400 1.625rem/1 var(--hand); letter-spacing: 0; } /* "Honest numbers.": white, underlined with the drawn stroke in yellow chalk */ h2 .accent, h1 .accent, .intro-copy h2 .accent { position: relative; display: inline-block; color: #fff; background: none; padding-bottom: 0.1em; } :lang(ja) .intro-copy h2, :lang(ja) .sec-head h2 { line-height: 1.2; word-break: keep-all; line-break: strict; overflow-wrap: anywhere; } :lang(ja) .intro-copy h2 { font-size: clamp(2rem, 7vw, 3rem); } .intro-copy h2 { margin-bottom: 26px; } .accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.12em; height: 0.22em; --c: var(--ch-yellow); --d: var(--d-under); pointer-events: none; } /* eyebrows: the original small teal label */ .eyebrow { margin: 0 0 14px; font-size: 0.875rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ch-teal); } .hero-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ch-teal); } .sec-sub, .intro { color: var(--text-2); } .live-dot { background: var(--ch-teal); box-shadow: 0 0 0 3px rgba(79, 209, 176, 0.18); } .hero-eyebrow .live-dot { animation-name: live-pulse; } /* ---------- buttons, surfaces ---------- */ .btn { border-radius: 10px; } .btn-primary { background: #f2f2ef; color: #0a0a0c; box-shadow: 0 10px 28px -14px rgba(255, 255, 255, 0.35); } .btn-primary:hover, a:hover > .btn-primary { background: #fff; box-shadow: 0 12px 30px -12px rgba(255, 255, 255, 0.45); } .btn-secondary, .btn-ghost { border: 1.5px solid rgba(255, 255, 255, 0.3); background: transparent; color: var(--text); } .btn-secondary:hover, .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.05); } .submit-card, .contact-panel, .rr-group, .xl-card, .odds-wrap, .gcard { background: var(--board); border: 1.5px solid var(--line-strong); box-shadow: none; } /* dialogs are solid: nothing shows through behind their text */ .sheet, .odds-dlg { background: #0d0e11; border: 1.5px solid var(--line-strong); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9); } .sheet::backdrop, .odds-dlg::backdrop { background: rgba(4, 5, 7, 0.86); } /* ---------- header ---------- */ .site-header { background: rgba(8, 9, 11, 0.86); border-bottom-color: var(--line); } @media (min-width: 901px) { .nav { border-color: var(--line-strong); background: rgba(8, 9, 11, 0.6); } } @media (max-width: 900px) { .nav { background: #0b0c0f; } } .nav a[aria-current] { background: rgba(255, 255, 255, 0.08); color: #fff; } .header-inner > .btn.follow-head { border: 1.5px solid rgba(255, 255, 255, 0.32); background: transparent; color: var(--text); } .header-inner > .btn.follow-head:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); } .header-inner > .btn.follow-head span[aria-hidden] { color: var(--ch-teal); } /* ---------- brush strokes behind a few sections (fade out on every side: no hard edges) ---------- */ .chalk-bg { position: relative; isolation: isolate; } .chalk-bg::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; opacity: 0.22; background: url(/assets/brand/brush-wide.webp?v=20261008rel) right center / auto 100% no-repeat; -webkit-mask: linear-gradient(270deg, #000 15%, transparent 55%), linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(270deg, #000 15%, transparent 55%), linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-composite: intersect; } /* ---------- home hero ---------- */ .hero .hero-grid::before { content: ""; position: absolute; inset: -40px -10%; z-index: 0; pointer-events: none; background: url(/assets/brand/splatter.webp) center / 900px repeat; opacity: 0.35; } .chalk-ring, .chalk-arrow { display: none; } /* stats strip: values sit a little lower so the ring round max win clears its label */ .hero .hero-stats dd { margin-top: 22px; } .hero-stats .hs-max dd { position: relative; width: max-content; padding-inline: 0.2em; color: #fff; } /* the ring: an ellipse has to be ~1.4x the text box to clear the corners of the digits */ .hero-stats .hs-max dd::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(100% + 2.6em); height: calc(100% + 1.5em); transform: translate(-50%, -50%) rotate(-2deg); pointer-events: none; --c: var(--ch-yellow); --d: var(--d-ring); } .hs-note { color: var(--ch-yellow); } .hs-note::after { content: ""; position: absolute; left: 64px; top: 30px; width: 96px; height: 42px; transform: rotate(32deg); --c: var(--ch-yellow); --d: var(--d-arrow); -webkit-mask-size: contain; mask-size: contain; } .hs-tag { background: #0a0a0c; color: var(--ch-pink); box-shadow: inset 0 0 0 1.5px var(--ch-pink); } /* the card fan sits fully inside its own column (it used to reach under the stats at 1280-1440px) */ @media (min-width: 1024px) { .hs-stage { --sx: 0.34; --sr: 9deg; translate: calc(var(--cw) * 0.04) 0; } .hs-note { left: calc(50% - var(--cw) * 0.5 - 132px); } } /* ---------- home: numbers (a ruled board) ---------- */ .numbers { padding: 56px 0; } .numbers .numbers-row { gap: 1.5px; overflow: hidden; border: 1.5px solid var(--line-strong); border-radius: 18px; background: var(--line-strong); } .numbers .numbers-row > div, .numbers .numbers-row > div:first-child { padding: 24px 28px 26px; border: 0; background: #0d0e11; } .numbers-row dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .numbers-row dd { color: #fff; } .numbers-row dd::after { content: ""; display: block; width: 72px; height: 9px; margin-top: 12px; background: var(--c); -webkit-mask: var(--d-under) left center / 100% 100% no-repeat; mask: var(--d-under) left center / 100% 100% no-repeat; } .numbers-row > div { --c: var(--ch-teal); } /* live totals */ .numbers-row > div:has([data-format="usd"]) { --c: var(--ch-yellow); } /* money */ .numbers-row .live-row dd { color: var(--ch-teal); } .stats-live { color: var(--text-2); } .numbers-foot { margin-top: 16px; } /* ---------- home: intro (copy + the studio mark on a brush stroke, with coloured chalk doodles) ---------- */ .intro-art { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 340px; } .intro-art::before { content: ""; position: absolute; inset: -6% -8%; z-index: -1; pointer-events: none; mix-blend-mode: screen; opacity: 0.5; background: url(/assets/brand/brush-wide.webp?v=20261008rel) center / cover no-repeat; -webkit-mask: radial-gradient(closest-side, #000 45%, transparent); mask: radial-gradient(closest-side, #000 45%, transparent); } .intro-logo { display: block; width: min(100%, 500px); height: auto; transform: rotate(-3deg); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6)); } .intro-art .tint { position: absolute; display: block; pointer-events: none; -webkit-mask-size: contain; mask-size: contain; } .ia-1 { left: 6%; top: 10%; width: 46px; height: 46px; --c: var(--ch-pink); --d: var(--d-sparkle); transform: rotate(-12deg); } .ia-2 { right: 8%; top: 4%; width: 38px; height: 38px; --c: var(--ch-yellow); --d: var(--d-star); transform: rotate(14deg); } .ia-3 { right: 4%; bottom: 16%; width: 54px; height: 54px; --c: var(--ch-teal); --d: url(/assets/brand/doodle/x-2.webp); transform: rotate(8deg); } .ia-4 { left: 12%; bottom: 8%; width: 130px; height: 24px; --c: var(--ch-yellow); --d: var(--d-under); transform: rotate(-4deg); } .ia-5 { left: 2%; top: 48%; width: 32px; height: 32px; --c: var(--ch-blue); --d: url(/assets/brand/doodle/sparkle-2.webp); } @media (max-width: 900px) { /* phones/tablets: the marks sit above and below the logo, never on it */ .intro-art { min-height: 0; padding: 52px 0 46px; } .intro-logo { width: min(78%, 420px); } .ia-1 { left: 6%; top: 4px; width: 34px; height: 34px; } .ia-2 { right: 8%; top: 8px; width: 30px; height: 30px; } .ia-3 { right: 10%; bottom: 4px; top: auto; width: 36px; height: 36px; } .ia-4 { left: 14%; bottom: 14px; width: 110px; height: 20px; } .intro-art .ia-5 { display: none; } } /* ---------- home: games ---------- */ .tile { border: 1.5px solid var(--line-strong); background: var(--surface); } .tile:hover { border-color: rgba(255, 255, 255, 0.55); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.9); } .tile-top .flag, .flag { padding: 3px 8px 4px; border-radius: 4px; background: var(--ch-teal); color: #0a0a0c; box-shadow: none; font: 400 0.9375rem/1 var(--hand); letter-spacing: 0.02em; text-transform: none; transform: rotate(-3deg); } .flag.soon, .tile-top .flag.soon { background: #0a0a0c; color: var(--ch-pink); box-shadow: inset 0 0 0 1.5px var(--ch-pink); } .vmeter i.on { background: var(--ch-yellow) !important; } /* ---------- home: Pigeon Packs card ---------- */ .xl-c-packs .xl-art { isolation: isolate; background: #0b0c0f; } .xl-c-packs .xl-art::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; opacity: 0.5; background: url(/assets/brand/chalk-l.webp) left center / cover no-repeat; -webkit-mask: linear-gradient(90deg, #000 70%, transparent); mask: linear-gradient(90deg, #000 70%, transparent); } .xl-pill, .xl-kick, .xl-facts li { border-color: var(--line-strong); } .xl-facts li { background: transparent; } .ph-facts .ph-top b { color: var(--ch-yellow); } /* money */ .xl-name { color: var(--ch-teal); } /* ---------- home: release log ---------- */ .log li { border-color: var(--line); } .log .tag { justify-self: start; padding: 2px 8px 3px; border-radius: 4px; background: var(--ch-teal); color: #0a0a0c; font: 400 1rem/1.1 var(--hand); transform: rotate(-2deg); } .log .tag.soon { background: transparent; color: var(--ch-pink); box-shadow: inset 0 0 0 1.5px var(--ch-pink); } /* ---------- home: contact ---------- */ .contact-icon { border-color: var(--line-strong); background: center / 62% no-repeat; color: #fff; } .contact-icon svg { display: none; } #contact-email-card .contact-icon { background-image: url(/assets/brand/icon/ic-mail.webp); } .contact-link:not(#contact-email-card) .contact-icon { background-image: url(/assets/brand/icon/ic-x.webp); background-size: 52%; } .contact-link { border: 1.5px solid var(--line-strong); background: transparent; } .contact-link:hover { border-color: rgba(255, 255, 255, 0.5); } .contact-topics li, .chip, .pill { border: 1.5px solid var(--line-strong); background: transparent; color: var(--text-2); } .contact-copy-btn { border-color: var(--line-strong); } .contact-copy-btn.done { color: var(--ch-teal); border-color: var(--ch-teal); } /* ---------- footer ---------- */ .site-footer::after { content: ""; position: absolute; left: 0; bottom: 0; z-index: -1; width: min(60vw, 700px); height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: 0.28; background: url(/assets/brand/chalk-l.webp) left bottom / auto 140% no-repeat; -webkit-mask: linear-gradient(90deg, #000 10%, transparent), linear-gradient(180deg, transparent, #000 40%); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, #000 10%, transparent), linear-gradient(180deg, transparent, #000 40%); mask-composite: intersect; } /* ---------- little drawn accents on a few headings ---------- */ /* the mark rides on the last word (inline), so it stays next to the text when the heading wraps */ #games .sec-head h2::after, #extras .sec-head h2::after, #recent h2::after { content: ""; display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.18em; vertical-align: 0.55em; transform: rotate(10deg); background: var(--ch-pink); -webkit-mask: var(--d-sparkle) center / contain no-repeat; mask: var(--d-sparkle) center / contain no-repeat; } #recent h2::after { width: 0.5em; height: 0.5em; background: var(--ch-yellow); -webkit-mask-image: var(--d-star); mask-image: var(--d-star); } #fair h2::before { content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.25em; vertical-align: -0.05em; background: url(/assets/brand/icon/ic-shield.webp) center / contain no-repeat; } /* ---------- Pigeon Packs page ---------- */ .soon-pill { background: transparent; color: var(--ch-pink); box-shadow: inset 0 0 0 1.5px var(--ch-pink); } .how-list a, .rr-steps a, .sec-sub a { color: #fff; } .seg { border-color: var(--line-strong); background: var(--bg); } .seg button.on { background: #f2f2ef; color: #0a0a0c; } .seg button.on small { background: rgba(0, 0, 0, 0.12); } .prog li.done { border-color: var(--ch-teal); } .prog li.now { border-color: rgba(255, 255, 255, 0.55); } .prog li.done::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 4px; vertical-align: -0.15em; background: var(--ch-teal); -webkit-mask: var(--d-check) center / contain no-repeat; mask: var(--d-check) center / contain no-repeat; } .submit-card input, .submit-card select { border: 1.5px solid var(--line-strong); background: var(--bg); } .submit-card input:focus, .submit-card select:focus { outline-color: #fff; } .msg.ok { color: var(--ch-teal); } .feed-list .res.won { color: var(--ch-yellow); } .ph-facts > *, .ph-facts li { border-color: var(--line-strong); background: transparent; } .rr-steps li::before { border: 1.5px solid rgba(79, 209, 176, 0.6) !important; background: var(--bg); color: #fff; font-family: var(--hand); font-size: 1.0625rem; } .rr-steps li:not(:last-child)::after { background: var(--line-strong); } .picking .cl-pack:not(:disabled):hover .ppk, .picking .cl-pack:focus-visible .ppk { filter: drop-shadow(0 0 0.8em rgba(255, 214, 90, 0.5)); } /* sold out: the pigeon asleep */ #soldout-note, #s-soldout { position: relative; padding-left: 74px; min-height: 52px; } #soldout-note::before, #s-soldout::before { content: ""; position: absolute; left: 14px; top: 50%; width: 44px; height: 40px; transform: translateY(-50%); background: url(/assets/brand/pigeon-mascot.webp) center / contain no-repeat; } /* pack opened: the pigeon reacts (cheers only for a reward, shrugs at an empty pack) */ .cl-react { display: block; width: 92px; height: auto; margin: 0 auto 6px; } /* ---------- game sheet: one screen, no inner scrolling ---------- (Play sits right under the tagline, so a shared /mad-cat link shows it straight away.) Desktop: cover on the left, everything else on the right. Phones: a smaller cover on top. The full description, game modes and fine print always show (no "Read more"), so the sheet never changes size. Sizing per screen is in the "game sheet sizing" block further down. */ .sheet { overflow: hidden auto; background: #0d0e11; scrollbar-width: none; } .sheet::-webkit-scrollbar { display: none; } .sheet-head { isolation: isolate; background: #0b0c0f; } .sheet-head .art-bg { display: none; } /* a soft light behind the cover, no texture */ .sheet-head::before { content: ""; position: absolute; left: 50%; top: 55%; z-index: 0; width: 520px; height: 520px; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03) 55%, transparent); } .sheet-head::after { display: none; } .sheet-head .art-fg { box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.9); outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: -1px; } .sheet-body { padding: 22px 26px 22px; } .sheet-desc { margin: 0; font-size: 0.9375rem; line-height: 1.6; } .sheet .sheet-cta { margin: 18px 0 20px; } /* specs: 2x2 ruled board */ .sheet .ledger { display: block; margin-top: 16px; } .sheet .ledger tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5px; overflow: hidden; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--line-strong); } .sheet .ledger tr { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px 12px; background: #0d0e11; } .sheet .ledger th, .sheet .ledger td { display: block; padding: 0; border: 0; text-align: left; } .sheet .ledger th { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .sheet .ledger td { font-size: 1.0625rem; } .sheet .ledger td .vmeter-wrap { justify-content: flex-start; } .sheet .feat { margin-top: 14px; } .sheet .feat span { border-color: var(--line-strong); background: transparent; } .sheet .fine { margin-top: 12px; font-size: 0.75rem; } @media (min-width: 760px) { .sheet { width: min(1080px, 94vw); max-height: calc(100dvh - 48px); } /* the cover column is as wide as the cover, which scales with the screen height (see "game sheet sizing") */ .sheet[open] { display: grid; grid-template-columns: auto minmax(0, 1fr); } .sheet-head { align-items: center; min-height: 100%; padding: 70px 26px 30px; } .sheet-body { align-self: center; padding: 30px 36px 28px; } } @media (max-width: 759px) { .sheet { width: calc(100% - 16px); max-height: calc(100dvh - 16px); } .sheet-head { padding: 54px 20px 14px; } .sheet-head .art-fg { height: 150px; } .sheet-body { padding: 16px 18px 18px; } .sheet-title { font-size: 2.2rem; margin-bottom: 4px; } .sheet-tagline { margin-bottom: 0; font-size: 0.9375rem; } .sheet .sheet-cta { margin: 14px 0 14px; } .sheet .ledger { margin-top: 12px; } .sheet .ledger tr { padding: 8px 12px 10px; } .sheet .feat { gap: 5px; margin-top: 10px; } .sheet .feat span { padding: 3px 8px; font-size: 0.75rem; } } /* ---------- legal pages + 404 ---------- */ .doc a { color: #fff; } .doc a.btn-primary { color: #0a0a0c; } .nf-pg { display: block; width: 150px; height: auto; margin: 0 0 18px -8px; } /* ---------- small screens ---------- */ @media (max-width: 720px) { .numbers .numbers-row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .numbers .numbers-row > div, .numbers .numbers-row > div:first-child { padding: 18px 18px 20px; } .numbers .numbers-row:has(.live-row[hidden]) > div:nth-child(3) { grid-column: 1 / -1; } .numbers-row dd { font-size: clamp(1.6rem, 7.4vw, 2.4rem); } .numbers-row dt { font-size: 0.6875rem; } } @media (max-width: 640px) { .chalk-bg::after { opacity: 0.18; } .site-footer::after { width: 100%; opacity: 0.2; } } @media (max-width: 599px) { .hs-note::after { left: 40px; top: -44px; width: 60px; height: 30px; transform: rotate(-60deg) scaleY(-1); } .hero .hero-grid::before { background-size: 600px; opacity: 0.25; } .hero-stats .hs-max dd::after { width: calc(100% + 2.2em); height: calc(100% + 1.4em); } .hero .hero-stats { padding-right: 0.9em; } .hero .hero-stats dd { margin-top: 13px; } } /* the marker title is drawn at a slight tilt: give it room so its right end never touches the label above */ .hero h1 { margin-top: 0.18em; } .ph-kick { margin-bottom: 24px; } @media (min-width: 1366px) { .hs-stage { translate: calc(var(--cw) * 0.1) 0; } } /* ---------- games grid: three games fill the row (no empty fourth column); a lone last tile on phones is centred ---------- */ @media (min-width: 600px) { .catalogue:not(.few):has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .tile { display: flex; flex-direction: column; } .tile-info { flex: 1; grid-template-rows: auto auto 1fr; } .tile-stats { align-self: end; } .log p { text-wrap: pretty; } .xl-facts b { white-space: nowrap; font-size: clamp(0.9375rem, 1.35vw, 1.0625rem); } @media (min-width: 600px) and (max-width: 900px) { .catalogue:not(.few) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 599px) { .catalogue:not(.few) > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); } /* the sparkle would wrap onto its own line under a wrapped heading */ #games .sec-head h2::after, #extras .sec-head h2::after, #recent h2::after { display: none; } } @media (max-width: 720px) { .numbers-row dt { min-height: 2.6em; display: flex; align-items: flex-end; } } @media (max-width: 379px) { .xl-c-packs .xr-stage { scale: 0.86; } .xl-facts li { padding-inline: 8px; } } /* phones: comfortable tap targets */ @media (max-width: 699px) { .log .btn-sm, .log .btn, .contact-copy-btn, .sheet-x { min-height: 40px; min-width: 40px; } .lang-row button { min-height: 40px; } .site-footer a { display: inline-block; padding-block: 6px; } } /* ---------- Packs page: hero facts on a ruled board (like the home intro), sheet + result headings in marker ---------- */ .ph-facts { gap: 1.5px; overflow: hidden; border: 1.5px solid var(--line-strong); border-radius: 16px; background: var(--line-strong); } .ph-facts li, .ph-facts > * { border: 0; border-radius: 0; background: #0d0e11; } .cl-head h2 { font-family: var(--hand); font-weight: 400; font-size: 1.75rem; letter-spacing: 0; } .cl-after h3 { font-family: var(--hand); font-weight: 400; font-size: 1.375rem; letter-spacing: 0; } .preview-note.bad, .msg.bad { color: var(--ch-pink); border-color: rgba(255, 156, 198, 0.5); } @media (max-width: 560px) { .cl-head h2 { font-size: 1.4rem; } } /* ---------- share button in the game sheet: copy / share the game's own link ---------- */ .share-btn { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1.5px solid rgba(255, 255, 255, 0.4); border-radius: 50%; background: rgba(8, 9, 11, 0.78); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 0.15s, background 0.15s; } .share-btn svg { width: 17px; height: 17px; } .share-btn:hover { border-color: #fff; background: rgba(8, 9, 11, 0.92); } .share-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .sheet-head .share-btn.on-sheet { position: absolute; top: 14px; right: 62px; z-index: 2; } /* "Link copied" note */ .share-btn::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); z-index: 5; padding: 5px 9px; border-radius: 6px; background: var(--ch-teal); color: #062019; font: 600 0.75rem/1.2 var(--sans); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -4px); transition: opacity 0.15s, transform 0.15s; } .share-btn.tipped::after { opacity: 1; transform: translate(-50%, 0); } @media (pointer: coarse) { .share-btn { width: 40px; height: 40px; } .sheet-head .share-btn.on-sheet { right: 66px; } } /* ---------- game sheet sizing ---------- Everything always shows (full description, game modes, fine print), so the sheet is one fixed size per screen and never scrolls, and its background never moves. Checked by tests/sheet.mjs at 1920x1080, 1440x900, 1366x768, 1280x720, 1024x768, 768x1024, 430x932, 390x844, 390x664, 360x740 and 360x640, sized for the longest copy (Zeus and Crossfire, in German). Specs sit in one row, modes are one line of text, the coming-soon follow box is one row. Desktop: the cover scales with the screen height. Phones use the full viewport height (8px inset), tighter type and spacing; tall phones (over 860px) keep a smaller cover above the title, shorter ones show the cover as a thumbnail (.sheet-thumb, added by app.js openGame) beside the title, under a slim logo/share/close strip. LAST RESORT: on phones under 760px tall (e.g. 360x740, 390x664, 360x640) the sheet BODY scrolls inside the fixed sheet (overflow-y: auto on .sheet-body, never the page or the sheet itself). */ .sheet-body .eyebrow { margin-bottom: 8px; } .sheet .ledger tbody { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); } .sheet .feat { display: block; font-size: 0.8125rem; line-height: 1.55; color: var(--text-2); } .sheet .feat .feat-label { display: block; margin: 0 0 2px; color: var(--text-3); font-weight: 500; } .sheet .feat span { display: inline-block; padding: 0; border: 0; border-radius: 0; background: none; font-size: inherit; white-space: nowrap; } .sheet .feat span + span::before { content: "ยท"; margin: 0 6px; color: var(--text-3); } .sheet .notify { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; padding: 12px 14px; } .sheet .notify-text { flex: 1 1 200px; margin: 0; font-size: 0.875rem; } .sheet .notify .cta-row { flex: 0 0 auto; margin: 0; } .sheet .notify .btn { min-height: 38px; padding: 7px 14px; font-size: 0.875rem; } .sheet .notify-alt { flex: 1 1 100%; margin: 0; font-size: 0.75rem; } @media (min-width: 760px) { .sheet-head .art-fg { width: auto; max-width: none; height: min(560px, calc(100dvh - 200px), 44vw); } } @media (min-width: 760px) and (max-height: 800px) { .sheet-head { padding: 64px 22px 24px; } .sheet-body { padding: 24px 32px 22px; } .sheet-title { font-size: 2.3rem; } .sheet-tagline { margin-bottom: 0; font-size: 1rem; } .sheet .sheet-cta { margin: 14px 0 16px; } .sheet-desc { font-size: 0.875rem; line-height: 1.55; } .sheet .ledger { margin-top: 12px; } .sheet .ledger tr { padding: 8px 12px 10px; } .sheet .feat { margin-top: 10px; } .sheet .fine { margin-top: 10px; } } .sheet-thumb { display: none; } @media (max-width: 759px) { .sheet { inset: 8px; width: calc(100% - 16px); max-height: calc(100dvh - 16px); margin: auto; } .sheet-head { padding: 52px 16px 10px; } .sheet-head .art-fg { height: clamp(120px, calc(100dvh - 760px), 200px); } .sheet-body { padding: 12px 16px 14px; } .sheet-body .eyebrow { margin-bottom: 2px; } .sheet-title { margin-bottom: 2px; font-size: 2rem; } .sheet-tagline { font-size: 0.875rem; line-height: 1.4; } .sheet .sheet-cta { clear: both; margin: 10px 0; } .sheet-desc { font-size: 0.875rem; line-height: 1.45; } /* specs: one compact row */ .sheet .ledger { margin-top: 10px; } .sheet .ledger tbody, .sheet .ledger tbody:has(tr:nth-child(4)) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-radius: 12px; } .sheet .ledger tr { gap: 2px; padding: 6px 10px 7px; } .sheet .ledger th { font-size: 0.625rem; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sheet .ledger td { font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sheet .ledger td .vmeter { display: none; } .sheet .feat { margin-top: 8px; font-size: 0.75rem; line-height: 1.5; } .sheet .feat .feat-label { display: inline; margin: 0 8px 0 0; } .sheet .fine { margin-top: 8px; font-size: 0.6875rem; line-height: 1.45; } /* follow box: one compact row (the X alternative is in the header/footer too) */ .sheet .notify-text ~ .notify-alt { display: none; } .sheet .notify { flex-wrap: nowrap; gap: 10px; padding: 8px 10px 8px 12px; } .sheet .notify-text { flex: 1 1 auto; min-width: 0; gap: 8px; font-size: 0.8125rem; line-height: 1.3; } .sheet .notify-icon { width: 18px; height: 18px; margin-top: 0; } .sheet .notify-icon svg { width: 17px; height: 17px; } .sheet .notify .btn { min-height: 36px; padding: 6px 11px; font-size: 0.8125rem; white-space: nowrap; } } /* phones up to 860px tall: the header is a slim strip (logo, share, close) and the cover is a thumbnail beside the title */ @media (max-width: 759px) and (max-height: 860px) { .sheet-head { min-height: 0; height: 54px; padding: 0; } .sheet-head .art-fg { display: none; } .sheet-thumb { display: block; float: left; width: auto; height: 100px; aspect-ratio: 3 / 4; margin: 2px 12px 2px 0; object-fit: cover; border-radius: 10px; outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: -1px; } .sheet-body { padding-top: 10px; } } /* last resort (see the note above): phones under 760px tall scroll the body inside the fixed sheet */ @media (max-width: 759px) and (max-height: 759px) { .sheet[open] { display: flex; flex-direction: column; overflow: hidden; } .sheet-head { flex: none; } .sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } } /* Launch switch PACK_PROMO_HIDDEN (api/geo.js packsPromoHidden -> nav-boot.js sets before first paint): the Pigeon Packs offer isn't promoted in that region. The nav and footer links to /packs and the home page's Packs section go; /packs itself shows a short neutral note (packs.css). */ html[data-pk-promo="off"] #nav a[href="/packs"], html[data-pk-promo="off"] .site-footer a[href="/packs"], html[data-pk-promo="off"] #extras { display: none !important; } /* ---------- Pigeon Packs launch gate (PACKS_OPEN): html[data-packs="soon"] = coming-soon teaser ---------- nav-boot.js sets it before first paint; hub.js / packs.js correct it from /api/packs. */ html[data-packs="soon"] .when-open, html:not([data-packs="soon"]) .when-soon { display: none !important; } html[data-packs="soon"] #hero-claim, html[data-packs="soon"] #open-next, html[data-packs="soon"] #demo-open, html[data-packs="soon"] #preview-note, html[data-packs="soon"] #soldout-note, html[data-packs="soon"] #submit, html[data-packs="soon"] #recent { display: none !important; } .soon-note { border-left-color: var(--ch-teal); } /* staff page preview while "soon" (Vercel preview deployments / PACKS_PREVIEW_PAGE=1; packs.js sets data-packs-preview="on" from /api/packs pagePreview, never on production): only the test spin shows, with one note */ html[data-packs="soon"][data-packs-preview="on"] #demo-open:not([hidden]) { display: inline-flex !important; } html:not([data-packs-preview="on"]) .pv-note, html[data-packs-preview="on"] .soon-note:not(.pv-note) { display: none !important; } /* coming soon: no way onto /packs (middleware.js redirects it home too). The nav link stays, with a "Coming soon" pill (.nav-soon, styles.css), and nav-boot.js turns a click on it into a scroll to the home page's #extras teaser. Footer links stay hidden; the home card is not a link. data-pk-promo="off" (above) still hides the nav link. */ html[data-packs="soon"] .site-footer a[href="/packs"], html[data-packs="soon"] .site-footer a[href="/packs/"] { display: none !important; } html[data-packs="soon"] .xl-c-packs { cursor: default; } html[data-packs="soon"] .xl-c-packs:hover { transform: none; } html[data-packs="soon"] .xl-c-packs .xl-btn.when-soon { pointer-events: none; background: transparent; color: var(--text); border: 1.5px solid rgba(255, 255, 255, 0.3); box-shadow: none; } /* "soon to be out!" chalk note for an upcoming flagship: two short lines so it fits where "out now!" sits */ .hs-note.soon { white-space: normal; width: 4em; line-height: 0.92; text-align: center; color: var(--ch-pink); } .hs-note.soon::after { --c: var(--ch-pink); top: 62px; left: 78px; } @media (max-width: 599px) { .hs-note.soon { width: auto; white-space: nowrap; } .hs-note.soon::after { top: -44px; left: 52px; } } /* hero side card that is already out (e.g. behind an upcoming flagship) */ .hs-tag.out { color: var(--ch-teal); box-shadow: inset 0 0 0 1.5px var(--ch-teal); } /* game tile CTA (8 Oct): the tile is now a
wrapping two siblings, the open-sheet