/*
* app.css
*
* The house page has one hard rule: it never scrolls. The viewport is a fixed
* frame -- topbar plus grid -- and the grid solves its own column count in JS
* so every seat fits inside whatever space is left. That is what makes the
* inventory feel like a stadium: you can see the whole house, and the empty
* squares are the sales pitch.
*/
:root {
--bg: #0e1013;
--panel: #171a1f;
--line: #262b33;
--ink: #e8eaed;
--muted: #9aa3af;
--accent: #ffc400;
--free: #1c2129;
--free-hover: #2b3340;
--pending: #8a6a05;
--gratis: #16241c;
--gratis-hover: #1e3628;
--bar: 52px;
}
@media (prefers-color-scheme: light) {
:root {
--bg: #f4f5f7;
--panel: #ffffff;
--line: #d9dce1;
--ink: #16181d;
--muted: #5f6773;
--free: #e4e7ec;
--free-hover: #d2d7df;
--pending: #ffd257;
--gratis: #dcece0;
--gratis-hover: #c8e0d0;
}
}
/* --- Base reset + the handful of Bootstrap classes we actually used. Bootstrap
itself was dropped: 232KB of CSS for a few utilities and base styles. rem
units match what Bootstrap computed (root font is 15px), so nothing shifts. --- */
*, *::before, *::after { box-sizing: border-box; }
/* The `hidden` attribute must always win. An author `display:` (flex, inline-
block, etc.) otherwise beats the UA [hidden] rule regardless of specificity and
silently un-hides the element -- the trap that left a src-less icon img showing
as a broken image, and a couple of buttons/pills showing when they shouldn't.
One global guard kills the whole class of bug. */
[hidden] { display: none !important; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5rem; font-weight: 500; line-height: 1.2; }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; }
a { color: var(--accent); text-decoration: underline; }
a:hover { color: var(--ink); }
button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; margin: 0; }
button { text-transform: none; cursor: pointer; }
img, svg { vertical-align: middle; }
.form-label { display: inline-block; margin-bottom: 0.5rem; }
.d-inline { display: inline !important; }
.w-100 { width: 100% !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
html, body {
height: 100%;
margin: 0;
background: var(--bg);
color: var(--ink);
font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* The house page is a fixed frame. Ordinary pages scroll normally. */
body.is-board {
overflow: hidden;
display: flex;
flex-direction: column;
}
/* ---------------------------------------------------------------- topbar -- */
.topbar {
flex: 0 0 auto;
height: var(--bar);
display: flex;
align-items: center;
gap: 14px;
padding: 0 14px;
background: var(--panel);
border-bottom: 1px solid var(--line);
}
.brand {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink);
text-decoration: none;
}
/* The brand mark: the pixel-mosaic "P" logo, in place of the wordmark. */
.brand-logo { display: block; height: 28px; width: 28px; border-radius: 6px; }
.topbar-topic { font-weight: 600; min-width: 0; }
/* The name truncates instead of wrapping to a second line when it's long. */
.topbar-topic-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Board switcher: the board name in the header is a dropdown to every board. */
.board-switch { position: relative; min-width: 0; flex: 0 1 auto; }
.board-switch > summary {
cursor: pointer;
list-style: none;
display: inline-flex;
align-items: center;
gap: 5px;
min-width: 0;
}
.board-switch > summary::-webkit-details-marker { display: none; }
.board-switch > summary::after { content: '\25be'; font-size: 10px; color: var(--muted); }
.board-switch[open] > summary::after { color: var(--ink); }
.board-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 60;
min-width: 210px;
/* Compact scroll box: past ~8 boards it scrolls instead of stretching the
menu down the page. Capped in px so it stays tight on tall screens too. */
max-height: min(320px, 60vh);
overflow-y: auto;
overscroll-behavior: contain;
padding: 6px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 10px 28px rgb(0 0 0 / 0.4);
}
.board-menu-item {
display: block;
padding: 8px 12px;
border-radius: 7px;
color: var(--ink);
text-decoration: none;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
}
.board-menu-item:hover { background: var(--free); }
.board-menu-item.is-current { color: var(--accent); }
.board-menu-new { color: var(--muted); border-top: 1px solid var(--line); margin-top: 4px; }
.block-counter {
color: var(--muted);
font-size: 13px;
white-space: nowrap;
}
.block-counter strong { color: var(--accent); }
.board-search {
margin-left: auto;
width: min(240px, 34vw);
padding: 5px 10px;
border-radius: 6px;
border: 1px solid var(--line);
background: var(--bg);
color: var(--ink);
}
.topbar-nav {
display: flex;
align-items: center;
gap: 12px;
margin-left: 12px;
}
.topbar-nav a, .linkish {
color: var(--muted);
text-decoration: none;
font-size: 13px;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
.topbar-nav a:hover, .linkish:hover { color: var(--ink); }
/* The hamburger: same links behind a menu, shown only on narrow screens. */
.topbar-menu { position: relative; display: none; margin-left: auto; flex: 0 0 auto; }
.topbar-burger {
list-style: none; cursor: pointer; padding: 0;
width: 36px; height: 32px;
display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
}
.topbar-burger::-webkit-details-marker { display: none; }
.topbar-burger > span { display: block; width: 16px; height: 2px; background: var(--ink); border-radius: 2px; }
.topbar-menu-list {
position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
min-width: 172px; padding: 6px;
background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
box-shadow: 0 10px 28px rgb(0 0 0 / 0.4);
display: flex; flex-direction: column; gap: 2px;
}
.topbar-menu-list form { margin: 0; }
.topbar-menu-list a, .topbar-menu-list .linkish {
display: block; width: 100%; text-align: left;
padding: 8px 12px; border-radius: 7px; color: var(--ink);
text-decoration: none; font-size: 14px; background: none; border: 0; cursor: pointer;
}
.topbar-menu-list a:hover, .topbar-menu-list .linkish:hover { background: var(--free); }
.topbar-menu-div { height: 1px; margin: 5px 6px; background: var(--line); }
/* On a phone the topbar would eat the grid; drop to essentials but KEEP the
board switcher -- it's the primary way to move between boards on mobile --
and collapse the nav into the hamburger so a long name has room. */
@media (max-width: 640px) {
.board-search, .block-counter { display: none; }
.topbar-nav { display: none; }
.topbar-menu { display: block; }
}
/* ----------------------------------------------------------------- grid -- */
.board-main {
flex: 1 1 auto;
/* Without min-height:0 a flex child refuses to shrink below its content,
which would push the grid past the viewport and reintroduce scrolling. */
min-height: 0;
overflow: hidden;
/* Centre the grid. The house is a fixed 64x34, so on a display bigger than
the house (e.g. 4K) the grid doesn't fill the window -- centring balances
the leftover margin instead of dumping it all to the right and bottom. The
renderer never draws more blocks than fit, so the grid never overflows;
`safe` still falls back to top-left if it somehow would, so the high-reach
corner is never clipped on smaller screens. Block meaning is (col,row), not
screen position, so this doesn't change what any block is worth. */
display: flex;
justify-content: safe center;
align-items: safe center;
/* Reserve the fixed footer band (.board-credit + .legend, pinned bottom:8px
and ~25px tall) so the centred grid stops above it and the free bottom row
is never half-hidden. board.js reads this padding and lays the grid out in
the remaining height. Zeroed at <=720px, where that chrome is display:none,
so mobile keeps every row. */
padding-bottom: 44px;
}
@media (max-width: 720px) { .board-main { padding-bottom: 0; } }
.board {
display: grid;
grid-template-columns: repeat(var(--cols, 24), var(--block, 40px));
grid-auto-rows: var(--block, 40px);
/* No gap: blocks are exactly 40x40 = 1600 pixels, and a gutter would eat
into the pixels the advertiser paid for. Borders go inside instead. */
gap: 0;
background: var(--bg);
}
/* ARIA row wrapper: present for the accessibility tree (grid > row > gridcell)
but display:contents so its .block children hoist straight into the #board
grid and the visual layout is unchanged. */
.board-row { display: contents; }
.block {
position: relative;
overflow: hidden;
width: var(--block, 40px);
height: var(--block, 40px);
/* A slight round softens each tile. overflow:hidden clips artwork to it and
the inset grid line follows the curve, so the only side effect is a tiny
--bg-coloured dot at each 4-way junction -- same colour as the grid lines,
so it reads as intentional tiling, not a gap. */
border-radius: 3px;
background: var(--free);
box-shadow: inset 0 0 0 1px var(--bg);
cursor: pointer;
transition: background-color 90ms linear;
}
.block img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* The price printed inside each empty square so it reads without a hover. Muted
so it stays quiet across a wall of them; scales with the block so it stays
proportional when the grid grows on big displays. pointer-events:none -- the
block underneath owns the hover and click. Occupied blocks never carry it. */
.block-price {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(9px, calc(var(--block, 40px) * 0.3), 16px);
font-weight: 500;
line-height: 1;
letter-spacing: -0.02em;
color: var(--muted);
opacity: 0.5; /* faint -- a quiet hint, not a shout across a wall of them */
pointer-events: none;
user-select: none;
}
.block.is-free:hover,
.block.is-free:focus-visible {
background: var(--free-hover);
outline: none;
}
.block.is-pending {
/* Amber: spoken for, but nothing to show yet. Deliberately loud -- a
reserved block that reads as empty looks like the site is broken. */
background: var(--pending);
cursor: default;
}
.block.is-live:hover { filter: brightness(1.15); }
/* The nosebleeds -- free to claim, so they read as an invitation not a gap. */
.block.is-gratis { background: var(--gratis); }
.block.is-gratis:hover { background: var(--gratis-hover); }
/* Confetti burst layer for grabbing a surprise block -- click-through, on top. */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
/* Inside the claim dialog it rides the modal's top layer (so the backdrop can't
bury it) but tucks behind the dialog's own text, which stays crisp. */
#buy .confetti-layer { z-index: -1; }
/* "This block is free today" -- the surprise-win banner in the claim dialog.
A green pill so it reads on the dialog's dark or light background alike. */
.buy-free-today {
display: inline-block;
margin: 0 0 12px;
padding: 5px 12px;
border-radius: 999px;
background: rgba(61, 220, 132, 0.16);
color: #2ec26a;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.2px;
}
/* Transient nudge (e.g. when someone clicks too many blocks in a burst). */
.board-toast {
position: fixed; left: 50%; bottom: 40px; z-index: 9998;
transform: translateX(-50%) translateY(10px);
padding: 10px 16px; border-radius: 10px;
background: var(--panel); color: var(--ink); border: 1px solid var(--line);
box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
font-size: 13px; opacity: 0; pointer-events: none;
transition: opacity 160ms ease, transform 160ms ease;
}
.board-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.block:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
z-index: 2;
}
/* Search dims the house and lifts the hits out of it. */
.board.is-filtered .block { opacity: 0.22; }
.board.is-filtered .block.is-match {
opacity: 1;
outline: 2px solid var(--accent);
outline-offset: -2px;
z-index: 1;
}
/* ----------------------------------------------------- per-board backdrop -- */
/* A dimmed image behind the grid. Live ads sit on solid tiles and keep full
contrast; the image only washes through the OPEN tiles, so it dresses up the
board without ever fighting an advertiser's artwork. Rendered as an ![]()
(not a CSS background) so it obeys the img-src CSP with no inline style. */
.board-bg {
/* Cover the WHOLE screen, minus the live-wire rail on the right so that rail
sits on clean dark, never on the busy artwork. On mobile --wire is 0, so it
spans full width there. Full-bleed to the top edge too -- the translucent
topbar sits over it -- so it truly covers any screen. */
position: fixed;
inset: 0;
right: var(--wire);
/* object-fit: cover so it fills ANY screen / aspect ratio with no letterbox
and no distortion -- it scales up to cover the area and crops the overflow,
which reads far better than stretching a wide image down a tall phone. */
object-fit: cover;
/* A backdrop, kept low so it never competes with the ads. Tunable. */
opacity: 0.20;
z-index: 0;
pointer-events: none;
user-select: none;
}
/* Lift the chrome above the full-screen backdrop. The topbar goes translucent so
the image reaches the very top edge without hiding the nav. */
body.has-bg .topbar {
position: relative;
z-index: 2;
background: color-mix(in srgb, var(--panel) 82%, transparent);
}
body.has-bg .board-main { position: relative; z-index: 1; }
body.has-bg .board { position: relative; z-index: 1; background: transparent; }
/* Open tiles go translucent so the backdrop shows through; occupied and pending
tiles stay solid so artwork and the reserved-amber never lose contrast. */
body.has-bg .block.is-free { background: color-mix(in srgb, var(--free) 46%, transparent); }
body.has-bg .block.is-gratis { background: color-mix(in srgb, var(--gratis) 46%, transparent); }
body.has-bg .block.is-free:hover,
body.has-bg .block.is-free:focus-visible { background: color-mix(in srgb, var(--free-hover) 66%, transparent); }
body.has-bg .block.is-gratis:hover { background: color-mix(in srgb, var(--gratis-hover) 66%, transparent); }
/* ------------------------------------------------------------ hover card -- */
.block-card {
position: fixed;
z-index: 50;
max-width: 260px;
padding: 10px 13px;
border-radius: 7px;
background: var(--panel);
border: 1px solid var(--line);
box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
pointer-events: none;
font-size: 13px;
}
.card-label {
display: block;
color: var(--accent);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.06em;
}
.card-sub {
display: block;
color: var(--ink);
overflow-wrap: anywhere;
}
/* A live block opens a real flyout -- headline plus a couple of sentences.
This is the ad; the block itself is only the mark that summons it. */
/* "is-detail", never "is-ad" -- an *ad* class name gets cosmetic-filtered to
display:none by ad blockers, which hid this entire flyout. */
.block-card.is-detail { max-width: 320px; padding: 13px 15px; }
.block-card.has-hero { padding: 0 0 14px; overflow: hidden; }
.block-card.has-hero .card-label,
.block-card.has-hero .card-sub,
.block-card.has-hero .card-body,
.block-card.has-hero .card-manage { padding-inline: 14px; }
.block-card.has-hero .card-label { margin-top: 11px; }
/* Fixed 2:1 so every flyout on a board is the same shape. Ads each choosing
their own aspect would make the wall jump as you move across it. */
/* An author `display` beats the UA rule for [hidden] regardless of specificity,
so `hidden` on this element did nothing and the empty box always rendered.
The explicit [hidden] rule below is what actually hides it. */
.card-hero[hidden] { display: none; }
.card-hero {
display: block;
width: 100%;
/* Honour the uploaded aspect ratio rather than forcing 2:1. The image is
already resized to fit within a bounding box server-side, so height:auto
lets it show at its true shape; max-height caps a tall one so the flyout
can't run off the screen. */
height: auto;
max-height: 260px;
object-fit: contain;
/* No fill: a transparent PNG shows the card's own panel through it rather
than sitting on a coloured box, and any letterbox blends into the card. */
}
/* Paid-block video creative in the flyout -- same box as the hero image. */
.card-video {
display: block;
width: 100%;
height: auto;
max-height: 260px;
object-fit: contain;
background: #000;
}
/* Unmute overlay -- audio is off by default on every flyout; the viewer opts in
per open. The card itself is pointer-events:none, so the button re-enables
itself; it sits over the top-right corner of the clip. */
.card-unmute {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
pointer-events: auto;
padding: 3px 9px;
font-size: 11px;
line-height: 1.5;
color: #fff;
background: rgb(0 0 0 / 0.6);
border: 1px solid rgb(255 255 255 / 0.3);
border-radius: 999px;
cursor: pointer;
}
.card-unmute:hover { background: rgb(0 0 0 / 0.82); }
/* Only a card with a Manage button takes pointer events -- everything else
stays click-through so it can never block a block underneath it. */
.block-card.is-interactive { pointer-events: auto; }
.card-link {
display: inline-block;
margin-top: 7px;
color: var(--accent);
font-size: 12px;
font-weight: 600;
text-decoration: none;
overflow-wrap: anywhere;
}
.card-link::after { content: ' \2197'; font-weight: 400; }
.card-link:hover { text-decoration: underline; }
.block-card.has-hero .card-link { padding-inline: 14px; }
.card-manage {
display: inline-block;
margin-top: 8px;
margin-left: 10px;
padding: 4px 10px;
border-radius: 6px;
background: var(--accent);
color: #1a1500;
font-size: 12px;
font-weight: 600;
text-decoration: none;
}
.card-manage:hover { background: #ffd23f; color: #1a1500; }
/* Graduate CTA -- the hand-off from a free territory hold to a permanent paid
spot. Full-width under the block details, outlined in accent so it reads as an
invitation, not a system control. */
.card-graduate {
display: block;
margin-top: 10px;
padding: 7px 10px;
border: 1px solid var(--accent);
border-radius: 8px;
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--accent);
font-size: 12px;
font-weight: 600;
text-align: center;
text-decoration: none;
}
.card-graduate:hover { background: var(--accent); color: #1a1500; }
/* Touch-only buy affordance: on a phone the tap opens the flyout, so the flyout
carries the action. Sized for a fingertip. */
.card-get {
display: block;
width: 100%;
margin-top: 9px;
padding: 9px 10px;
border: 0;
border-radius: 8px;
background: var(--accent);
color: #1a1500;
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.block-card.has-hero .card-get { width: calc(100% - 28px); margin-inline: 14px; }
/* Report (everyone) + trashcan (admin), pinned quietly at the foot of the card
so they never compete with the ad's own message. */
.card-actions {
display: flex;
align-items: center;
gap: 10px;
margin-top: 9px;
}
.block-card.has-hero .card-actions { padding-inline: 14px; }
.card-report {
background: none;
border: 0;
padding: 0;
font: inherit;
font-size: 11px;
color: color-mix(in srgb, var(--ink) 55%, transparent);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.card-report:hover:not(:disabled) { color: var(--ink); }
.card-report:disabled { cursor: default; text-decoration: none; opacity: 0.8; }
.card-trash {
margin-left: auto;
background: none;
border: 0;
padding: 2px 4px;
font-size: 14px;
line-height: 1;
cursor: pointer;
border-radius: 6px;
opacity: 0.7;
}
.card-trash:hover:not(:disabled) { opacity: 1; background: color-mix(in srgb, #e5484d 22%, transparent); }
.card-trash:disabled { opacity: 0.4; cursor: default; }
.block-card.is-detail .card-sub { font-weight: 600; font-size: 14px; }
.card-body {
display: block;
margin-top: 4px;
color: var(--muted);
font-size: 12.5px;
line-height: 1.45;
overflow-wrap: anywhere;
}
/* The deal on a payable block -- one-time + permanent. A small reassuring line
under the price, tinted to read as a selling point rather than fine print. */
.card-terms {
display: block;
margin-top: 6px;
font-size: 11.5px;
line-height: 1.4;
color: var(--accent);
overflow-wrap: anywhere;
}
.card-terms[hidden] { display: none; }
/* A quote under the price on a blank block -- a small, quiet flourish that must
never out-shout the price/reach above it. */
.card-quote {
display: block;
margin-top: 7px;
padding-top: 7px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 11.5px;
font-style: italic;
line-height: 1.4;
overflow-wrap: anywhere;
}
.card-quote[hidden] { display: none; }
/* Empty-block flyout on a DROP board: the drop's state line. The grab-window
countdown reads in the accent; tabular-nums keeps the digits from jittering. */
.card-drop {
display: block;
margin-top: 7px;
padding-top: 7px;
border-top: 1px solid var(--line);
color: var(--accent);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.4;
font-variant-numeric: tabular-nums;
}
.card-drop[hidden] { display: none; }
/* ------------------------------------------------------------- writer -- */
.flyout-box {
border: 1px solid var(--line);
border-radius: 10px;
padding: 16px 18px 18px;
}
.flyout-box legend {
float: none;
width: auto;
padding: 0 6px;
margin: 0;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.writer-note { margin-top: 8px; }
.writer-credits {
display: inline-block;
margin-left: 8px;
padding: 1px 7px;
border-radius: 20px;
background: var(--accent);
color: #1a1500;
font-size: 11px;
font-weight: 700;
}
/* Base button (was Bootstrap's .btn) -- the modifiers below build on it. */
.btn {
display: inline-block;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
user-select: none;
border: 1px solid transparent;
border-radius: 0.375rem;
background-color: transparent;
color: var(--ink);
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.btn:disabled { opacity: 0.65; cursor: default; }
.btn-outline {
background: transparent;
border: 1px solid var(--accent);
color: var(--accent);
font-weight: 600;
}
.btn-outline:hover { background: var(--accent); color: #1a1500; }
.btn-outline:disabled { opacity: 0.6; }
.hero-box {
padding: 12px;
border: 1px dashed var(--line);
border-radius: 8px;
}
.hero-preview {
display: block;
width: 100%;
max-width: 320px;
/* Match the flyout: show the real aspect ratio, don't crop to 2:1. */
height: auto;
max-height: 260px;
object-fit: contain;
border-radius: 6px;
margin-bottom: 8px;
}
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-upload { cursor: pointer; margin: 0; }
/* The permanent-and-editable reassurance line above the block-edit form. */
.managed-line {
margin: 0 0 18px;
padding: 12px 14px;
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
border-radius: 8px;
background: var(--panel);
font-size: 13px;
}
/* ---- flyout lab (admin bench for the AI flyout-image generator) ---- */
.fl-radio { display: block; margin: 6px 0; font-size: 14px; cursor: pointer; }
.fl-radio input { margin-right: 8px; }
.fl-verdict { margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; background: var(--panel); border: 1px solid var(--line); }
.fl-verdict.fl-allow { color: #2ec26a; border-color: color-mix(in srgb, #2ec26a 40%, var(--line)); }
.fl-verdict.fl-review { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.fl-verdict.fl-reject { color: #e5484d; border-color: color-mix(in srgb, #e5484d 40%, var(--line)); }
.fl-meta { margin-top: 14px; font-size: 13px; }
.fl-meta dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 10px; }
.fl-meta dd { margin: 2px 0 0; color: var(--ink); overflow-wrap: anywhere; }
/* AI flyout-image generator on the block-edit page. */
.hero-gen { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.hero-gen-lead { margin: 0 0 8px; }
.hero-gen-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* ---- the live wire: a per-board sidebar of relevant content + activity ---- */
:root { --wire: 300px; }
.is-board .board-main { padding-right: var(--wire); }
.wire {
/* Sits below the newsletter notice when it's up (/js/newsletter.js sets
--strip-h to the notice height) and slides back under the header when it's
dismissed (--strip-h -> 0). */
position: fixed; top: calc(var(--bar) + var(--strip-h, 0px)); right: 0; bottom: 0; width: var(--wire);
z-index: 30; display: flex; flex-direction: column;
background: color-mix(in srgb, var(--panel) 92%, transparent);
border-left: 1px solid var(--line); backdrop-filter: blur(4px);
}
.wire-head {
flex: 0 0 auto; padding: 11px 14px; font-weight: 800; font-size: 12px;
text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px;
}
.wire-dot { width: 8px; height: 8px; border-radius: 99px; background: #ff3b3b;
box-shadow: 0 0 8px #ff3b3b; animation: wireblink 1.2s infinite; }
@keyframes wireblink { 50% { opacity: .35; } }
.wire-feed { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.wire-feed::-webkit-scrollbar { width: 8px; }
.wire-feed::-webkit-scrollbar-thumb { background: var(--line); border-radius: 9px; }
/* Board chat: an input pinned at the bottom of the wire column; messages render
as wire-items with an accent handle. */
.wire-chat { flex: 0 0 auto; display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.wire-chat-input {
flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line);
background: var(--bg); color: var(--ink); font-size: 13px; border-radius: 8px;
}
.wire-chat-send {
flex: 0 0 auto; width: 34px; border: 0; border-radius: 8px; cursor: pointer;
background: var(--accent); color: #1a1500; font-weight: 700; font-size: 15px; line-height: 1;
}
.wire-chat-signin {
flex: 0 0 auto; padding: 9px; text-align: center; border-top: 1px solid var(--line);
color: var(--muted); font-size: 13px; text-decoration: none;
}
.wire-chat-signin:hover { color: var(--accent); }
.wire-chat-msg { background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.wire-chat-who { color: var(--accent); }
.wire-item { padding: 8px 9px; border-radius: 9px; font-size: 13px; line-height: 1.4;
overflow-wrap: anywhere; animation: wirein .3s ease; }
@keyframes wirein { from { opacity: 0; transform: translateY(-6px); } }
.wire-content { color: var(--ink); }
.wire-live { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.wire-live b { color: var(--ink); }
.wire-live .wire-note { color: var(--muted); }
.legend { right: calc(var(--wire) + 10px); }
/* The wire tab is a mobile-only handle; the firework hint sits above the drawer. */
.wire-tab { display: none; }
.wire-spark { z-index: 42; }
@media (max-width: 900px) {
:root { --wire: 0px; }
/* No right rail on mobile; the wire is a right-edge DRAWER, off-screen until
a left swipe (or a tap on the tab) slides it in from the right. */
.is-board .board-main { padding-right: 0; padding-bottom: 0; }
.board-foot, .legend { display: none; }
.wire {
top: var(--bar); left: auto; right: 0; bottom: 0;
width: min(86vw, 360px);
border-left: 1px solid var(--line); border-top: none;
transform: translateX(100%); transition: transform .25s ease;
touch-action: pan-y; z-index: 41;
}
.wire.expanded { transform: translateX(0); box-shadow: -14px 0 34px rgb(0 0 0 / 0.45); }
.wire.expanded .wire-head::after {
content: " — swipe right to close"; color: var(--muted);
font-weight: 400; letter-spacing: 0; text-transform: none;
}
/* The handle: a slim tab on the right edge, with the unread badge. */
.wire-tab {
position: fixed; right: 0; top: 50%; transform: translateY(-50%);
z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 12px 5px; margin: 0; cursor: pointer;
border: 1px solid var(--line); border-right: none; border-radius: 10px 0 0 10px;
background: color-mix(in srgb, var(--panel) 92%, transparent);
backdrop-filter: blur(4px); color: var(--muted);
font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
.wire-tab[hidden] { display: none; }
.wire-tab-label { writing-mode: vertical-rl; text-orientation: mixed; }
.wire-tab-dot {
width: 7px; height: 7px; border-radius: 99px; background: #ff3b3b;
box-shadow: 0 0 8px #ff3b3b; animation: wireblink 1.2s infinite;
}
.wire-tab-badge {
min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
background: var(--accent); color: #1a1500; font-size: 10px; font-weight: 800;
display: flex; align-items: center; justify-content: center; letter-spacing: 0;
}
.wire-scrim {
position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / 0.35);
opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.wire-scrim.show { opacity: 1; pointer-events: auto; }
}
/* ---- weekly-drop status banner ---- */
.drop-banner {
position: fixed; left: calc(50% - var(--wire) / 2); top: calc(var(--bar) + 12px);
transform: translateX(-50%); z-index: 41;
display: flex; align-items: center; gap: 12px;
padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 15px;
background: color-mix(in srgb, var(--panel) 92%, transparent);
border: 1px solid var(--line); box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
backdrop-filter: blur(4px); pointer-events: none; white-space: nowrap;
}
.drop-banner .drop-phase { color: var(--ink); }
.drop-banner .drop-time { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 800; }
.drop-banner.drop-grab { border-color: #ff3b3b; box-shadow: 0 0 26px -4px #ff3b3b; }
.drop-banner.drop-grab .drop-phase { color: #ff5b5b; }
.drop-banner.drop-grab .drop-time { color: var(--ink); }
.drop-banner.drop-sealed { opacity: 0.85; }
@media (max-width: 900px) { .drop-banner { left: 50%; } }
/* ---- the drops gallery (/drops) ---- */
.drop-jump { max-width: 440px; margin: 6px 0 24px; }
.drop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.drop-card {
display: block; padding: 16px; border-radius: 12px; text-decoration: none;
background: var(--panel); border: 1px solid var(--line);
transition: transform .1s ease, border-color .1s ease;
}
.drop-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.drop-card.drop-grab { border-color: #ff3b3b; }
.drop-card-date { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.drop-card-title { font-size: 18px; font-weight: 800; color: var(--ink); margin: 4px 0 10px; }
.drop-card-meta { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.drop-badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.drop-badge.is-sealed { background: color-mix(in srgb, var(--muted) 22%, transparent); color: var(--ink); }
.drop-badge.is-live { background: color-mix(in srgb, #ff3b3b 22%, transparent); color: #ff6b6b; }
.drop-badge.is-upcoming { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
/* ---- board footer dropup: nav links, opens upward from the bottom-left ---- */
.board-foot { position: fixed; left: 10px; bottom: 8px; z-index: 40; font-size: 12px; }
.board-foot-toggle {
list-style: none; cursor: pointer; user-select: none; color: var(--muted);
padding: 5px 11px; border-radius: 7px; border: 1px solid var(--line);
background: color-mix(in srgb, var(--panel) 88%, transparent);
}
.board-foot-toggle::-webkit-details-marker { display: none; }
.board-foot-toggle::after { content: " \25B4"; opacity: 0.6; }
.board-foot[open] .board-foot-toggle { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.board-foot-menu {
position: absolute; left: 0; bottom: calc(100% + 6px);
display: flex; flex-direction: column; min-width: 200px; padding: 4px;
background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
box-shadow: 0 -10px 26px rgb(0 0 0 / 0.4);
}
.board-foot-menu a { padding: 8px 12px; color: var(--ink); text-decoration: none; border-radius: 6px; font-size: 13px; }
.board-foot-menu a:hover { background: var(--free-hover); }
.board-foot-credit { color: var(--muted) !important; border-top: 1px solid var(--line); margin-top: 3px; padding-top: 9px !important; white-space: nowrap; }
/* ---- fun: the colorful wavy line under the header ---- */
.topbar-wave { flex: 0 0 auto; height: 14px; overflow: hidden; line-height: 0; }
.tw-svg { display: block; width: 100%; height: 14px; }
/* ---- fun: occasional shooting stars ---- */
.sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
/* Every value (colour, size, glow, position, tail, direction, timing) is set by
/js/stars.js -- these are just fallbacks. Stars enter from any edge. */
.star {
position: absolute; border-radius: 50%;
width: var(--star-size, 3px); height: var(--star-size, 3px);
background: var(--star-color, #fff); opacity: 0;
box-shadow: 0 0 var(--star-glow, 8px) 1px color-mix(in srgb, var(--star-color, #fff) 75%, transparent);
will-change: transform, opacity, offset-distance;
}
.star::before {
content: ""; position: absolute; top: 50%; left: 50%;
width: var(--tail, 100px); height: 1.5px; transform-origin: left center;
transform: translateY(-50%) rotate(var(--tail-angle, -22deg));
background: linear-gradient(90deg, var(--star-color, #fff), transparent);
}
@keyframes shoot {
0% { opacity: 0; transform: translate(0, 0); }
8% { opacity: 1; }
55% { opacity: 1; }
100% { opacity: 0; transform: translate(var(--dx, -360px), var(--dy, 150px)); }
}
/* Graceful arc: the star rides a bezier via offset-path (set per-star in JS), so
offset-distance 0->100% is the whole smooth curve -- no mid-flight kink. */
@keyframes shoot-arc {
0% { opacity: 0; offset-distance: 0%; }
12% { opacity: 1; }
72% { opacity: 1; }
100% { opacity: 0; offset-distance: 100%; }
}
/* Concentric ripple ping (~twice a minute). Rings grow via width/height so the
stroke stays thin as they expand. */
.ripple { position: absolute; }
.ring {
position: absolute; top: 0; left: 0; width: 0; height: 0;
border-radius: 50%; border: 1.5px solid var(--ring-color, #8fb8ff);
transform: translate(-50%, -50%); opacity: 0;
box-shadow: 0 0 12px -3px var(--ring-color, #8fb8ff);
animation: ripple-expand 2.6s ease-out forwards;
}
@keyframes ripple-expand {
0% { width: 0; height: 0; opacity: 0; }
10% { opacity: 0.8; }
100% { width: 320px; height: 320px; opacity: 0; }
}
/* Fireworks: a rocket star rises and explodes. Sparks fly out radially and
droop under a little gravity as they fade. */
.burst { position: absolute; }
.spark {
position: absolute; top: 0; left: 0;
width: var(--sz, 3px); height: var(--sz, 3px); margin: calc(var(--sz, 3px) / -2) 0 0 calc(var(--sz, 3px) / -2);
border-radius: 50%; background: var(--sc, #fff);
box-shadow: 0 0 6px var(--sc, #fff); opacity: 0;
animation: burst 1.15s ease-out forwards;
}
@keyframes burst {
0% { opacity: 1; transform: translate(0, 0) scale(1); }
70% { opacity: 1; }
100% { opacity: 0; transform: translate(var(--dx, 0), calc(var(--dy, 0) + 26px)) scale(0.4); }
}
@media (prefers-reduced-motion: reduce) { .sky, .topbar-wave { display: none; } }
.scan-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.scan-note { margin: 0; flex: 1; min-width: 200px; }
.btn-sm { padding: 3px 10px; font-size: 12px; }
.scan-result {
display: flex;
gap: 14px;
align-items: center;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--bg);
}
/* The display:flex above defeats the UA [hidden] rule (see the note by
.card-hero), so this panel -- and its src-less icon img -- would otherwise show
on load as a broken image. This is what actually keeps it hidden until a scan. */
.scan-result[hidden] { display: none; }
.scan-icon img {
display: block;
width: 72px;
height: 72px;
border-radius: 8px;
object-fit: contain;
background: var(--panel);
}
.scan-icon-body { flex: 1; }
.scan-icon-label { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.slug-row { display: flex; align-items: stretch; }
.slug-prefix {
display: flex;
align-items: center;
padding: 0 10px;
border: 1px solid var(--line);
border-right: 0;
border-radius: 6px 0 0 6px;
background: var(--bg);
color: var(--muted);
font-size: 13px;
white-space: nowrap;
}
.slug-row .form-control { border-radius: 0 6px 6px 0; }
.slug-note-bad { color: #ff8f8f; }
.slug-note-ok { color: #9fe0b8; }
.review-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.reject-form { display: flex; gap: 8px; flex: 1; min-width: 260px; }
.flash-inline {
padding: 9px 12px;
border-radius: 8px;
border: 1px solid var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
font-size: 13px;
}
/* ------------------------------------------------------------ buy dialog -- */
.buy {
width: min(420px, 92vw);
border: 1px solid var(--line);
border-radius: 12px;
background: var(--panel);
color: var(--ink);
padding: 22px;
}
.buy::backdrop { background: rgb(0 0 0 / 0.6); }
.buy-close-form { float: right; margin: -10px -8px 0 0; }
.buy-close {
background: none;
border: 0;
color: var(--muted);
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.buy-title { margin: 0 0 2px; font-size: 20px; }
.buy-sub { margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.buy-note { margin: 12px 0 16px; color: var(--muted); font-size: 12px; }
.buy-error {
margin: 10px 0 0;
color: #ff8f8f;
font-size: 13px;
}
/* Honeypot: off-screen rather than display:none, because some bots skip
anything that is explicitly hidden. */
.hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.flash {
position: fixed;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
background: var(--panel);
border: 1px solid var(--line);
border-radius: 8px;
padding: 9px 16px;
font-size: 13px;
z-index: 60;
}
/* -------------------------------------------------------- ordinary pages -- */
.page-main {
max-width: 860px;
margin: 0 auto;
padding: 32px 20px 64px;
}
.page-main h1 { font-size: 28px; margin: 0 0 6px; }
.page-main .lede { color: var(--muted); margin: 0 0 28px; }
/* Brand tagline above the homepage heading. */
.eyebrow {
margin: 0 0 4px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
}
.topic-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 12px;
}
.topic-card {
display: block;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--panel);
color: var(--ink);
text-decoration: none;
}
.topic-card:hover { border-color: var(--accent); }
.topic-card h2 { font-size: 16px; margin: 0 0 4px; }
.topic-card p { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.fill-bar {
height: 5px;
border-radius: 3px;
background: var(--free);
overflow: hidden;
}
.fill-bar span {
display: block;
height: 100%;
background: var(--accent);
}
.fill-note { font-size: 12px; color: var(--muted); margin-top: 6px; }
.block-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.block-table th, .block-table td {
text-align: left;
padding: 10px 8px;
border-bottom: 1px solid var(--line);
font-size: 14px;
}
.block-table th { color: var(--muted); font-weight: 600; font-size: 12px; }
.block-thumb { width: 40px; height: 40px; border-radius: 5px; object-fit: cover; }
.badge-status { font-size: 11px; padding: 2px 7px; border-radius: 20px; }
.badge-live { background: #14532d; color: #b6f3c8; }
.badge-paid { background: #4a3c10; color: var(--accent); }
.badge-expired { background: var(--free); color: var(--muted); }
.badge-free { background: #16241c; color: #9fe0b8; }
/* Price legend, pinned to the bottom-right of the board. */
.legend {
position: fixed;
right: 10px;
bottom: 8px;
display: flex;
gap: 12px;
padding: 5px 10px;
border-radius: 7px;
background: color-mix(in srgb, var(--panel) 88%, transparent);
border: 1px solid var(--line);
font-size: 11px;
color: var(--muted);
pointer-events: none;
z-index: 40;
}
.legend strong { color: var(--ink); }
@media (max-width: 720px) { .legend { display: none; } }
.sitefoot {
max-width: 860px;
margin: 0 auto;
padding: 24px 20px 40px;
display: flex;
gap: 16px;
color: var(--muted);
font-size: 13px;
}
.sitefoot a { color: var(--muted); }
.sitefoot-credit { margin-left: auto; }
.sitefoot-credit a { color: var(--muted); text-decoration: underline; }
.sitefoot-credit a:hover { color: var(--ink); }
/* The board never scrolls, so it has no footer -- the credit sits in the
opposite corner from the price legend. pointer-events:none throughout, so it
can never swallow a click meant for a block underneath it. */
.board-credit {
position: fixed;
left: 10px;
bottom: 8px;
margin: 0;
padding: 5px 10px;
border-radius: 7px;
background: color-mix(in srgb, var(--panel) 88%, transparent);
border: 1px solid var(--line);
font-size: 11px;
color: var(--muted);
pointer-events: none;
z-index: 40;
}
.board-credit a { color: var(--muted); pointer-events: auto; }
.board-credit a:hover { color: var(--ink); }
@media (max-width: 720px) { .board-credit { display: none; } }
.card-panel {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 10px;
padding: 22px;
}
/* Review queue */
.topic-card--alert { border-color: #e5484d; }
.topic-card--alert h2 { color: #e5484d; }
.review-item { display: flex; gap: 16px; align-items: flex-start; }
.review-shots { display: flex; gap: 8px; flex: 0 0 auto; }
.review-thumb {
width: 56px; height: 56px; object-fit: contain;
border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
}
.review-hero {
width: 96px; height: 56px; object-fit: cover;
border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
}
/* A held video needs to be watchable in the queue, not a 96px thumb. */
video.review-hero {
width: auto; height: auto; max-width: 340px; max-height: 220px;
object-fit: contain; background: #000;
}
.review-body { flex: 1 1 auto; min-width: 0; }
.review-tag {
display: inline-block;
margin: 0 4px 4px 0;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
background: color-mix(in srgb, var(--ink) 10%, transparent);
color: var(--ink);
}
.review-tag--flag { background: color-mix(in srgb, #e5484d 20%, transparent); color: #e5484d; font-weight: 600; }
.review-tag--cat { background: color-mix(in srgb, var(--accent) 18%, transparent); }
/* Create-board form */
.create-board { display: flex; flex-direction: column; gap: 14px; }
.cb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .cb-grid { grid-template-columns: 1fr; } }
.cb-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.cb-field input, .cb-field select, .cb-field textarea {
padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line);
background: var(--bg); color: var(--ink); font-size: 14px; width: 100%;
font-family: inherit;
}
.cb-field textarea { resize: vertical; min-height: 44px; }
.cb-field input:focus, .cb-field select:focus, .cb-field textarea:focus {
outline: none; border-color: var(--accent);
}
/* The "Flyout copy / Write with AI" header row on the place-an-ad form. */
.ai-copy-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* Crawl-site preview thumbs (block art + hero pulled from the ad's link). */
.crawl-previews:empty { display: none; }
.crawl-previews { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.crawl-thumb { width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--line); object-fit: cover; background: var(--bg); }
.crawl-hero { max-height: 56px; border-radius: 6px; border: 1px solid var(--line); }
.cb-addr { display: flex; align-items: stretch; }
.cb-prefix {
display: inline-flex; align-items: center; padding: 0 8px;
background: var(--free); border: 1px solid var(--line); border-right: 0;
border-radius: 6px 0 0 6px; color: var(--muted); font-size: 13px; white-space: nowrap;
}
.cb-addr input { border-radius: 0 6px 6px 0; }
.create-board button { align-self: flex-start; }
/* Per-board rename row in admin (name + web address inline). */
.rename-form { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-bottom: 10px; }
.rename-form input[type="text"] {
padding: 6px 9px; border: 1px solid var(--line); background: var(--bg);
color: var(--ink); font-size: 13px; border-radius: 6px;
}
.rename-form > input[name="title"] { flex: 1 1 150px; min-width: 120px; }
.rename-form .cb-addr { flex: 2 1 220px; }
.rename-form .cb-addr input { flex: 1; min-width: 90px; border-radius: 0 6px 6px 0; }
.rename-form button { flex: 0 0 auto; align-self: center; }
.board-tag {
align-self: center; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted, #8a8578);
}
.board-tag--hidden { border-color: var(--accent); color: var(--accent); }
/* Delete a board -- a deliberately friction-heavy control. Retype-to-confirm
* plus a refund gate, styled in danger red so it never reads as routine. */
.delete-form {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
}
.delete-form__warn { flex: 1 0 100%; font-size: 12px; color: var(--muted, #8a8578); }
.delete-form__warn code {
color: var(--danger, #e5484d); background: rgba(229, 72, 77, 0.1);
padding: 1px 5px; border-radius: 4px; font-size: 12px;
}
.delete-form input[name="confirm"] {
padding: 6px 9px; border: 1px solid var(--line); background: var(--bg);
color: var(--ink); font-size: 13px; border-radius: 6px; flex: 0 1 180px;
}
.delete-form__force { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted, #8a8578); }
.delete-form__force input { margin: 0; }
.btn-danger {
background: transparent; color: var(--danger, #e5484d);
border: 1px solid var(--danger, #e5484d); border-radius: 6px; cursor: pointer;
}
.btn-danger:hover { background: var(--danger, #e5484d); color: #fff; }
/* Board-background admin rows */
.bg-row-head { margin-bottom: 10px; }
.bg-variants { display: flex; gap: 24px; flex-wrap: wrap; }
.bg-variant { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bg-variant-label { font-size: 12px; font-weight: 600; color: var(--muted); width: 54px; }
.bg-thumb {
width: 96px; height: 48px; object-fit: cover; flex: 0 0 auto;
border-radius: 6px; border: 1px solid var(--line); background: var(--bg);
}
.bg-thumb--mobile { width: 34px; height: 60px; }
.bg-thumb--empty { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; }
.bg-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bg-form input[type=file] { max-width: 190px; font-size: 12px; color: var(--muted); }
.form-control, .form-select {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
background: var(--bg);
background-clip: padding-box;
border: 1px solid var(--line);
border-radius: 0.375rem;
color: var(--ink);
appearance: none;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control:focus {
background: var(--bg);
color: var(--ink);
border-color: var(--accent);
box-shadow: none;
}
.btn-primary {
background: var(--accent);
border-color: var(--accent);
color: #1a1500;
font-weight: 600;
}
.btn-primary:hover { background: #ffd23f; border-color: #ffd23f; color: #1a1500; }
/* -------- won prime-spot badge (in the flyout, public -- believability) ------ */
.card-prize {
display: flex; align-items: center; gap: 8px;
margin: 8px 14px 2px; padding: 6px 8px;
border-radius: 8px;
background: linear-gradient(180deg, rgba(255,210,63,0.16), rgba(255,210,63,0.06));
border: 1px solid rgba(255,210,63,0.5);
}
/* The milestone number superimposed on the green highway-sign plate. One image,
sized per use; the short number (1K/10K/1M) centers in the green. */
.msign {
display: inline-flex; align-items: center; justify-content: center;
aspect-ratio: 1000 / 436;
background: url(/img/milestone.png) center / 100% 100% no-repeat;
color: #fff; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap;
text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.card-prize-sign { flex: 0 0 auto; width: 116px; font-size: 25px; }
.card-prize-text { font-size: 12px; line-height: 1.25; color: var(--ink); font-weight: 600; }
/* -------------------------- milestone celebration overlay -------------------- */
.win-overlay {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center; padding: 20px;
background: rgba(6, 8, 20, 0.72);
animation: win-fade 0.25s ease-out both;
}
@keyframes win-fade { from { opacity: 0; } to { opacity: 1; } }
.win-pop {
max-width: 420px; width: 100%; text-align: center;
background: var(--bg); color: var(--ink);
border: 1px solid rgba(255,210,63,0.55); border-radius: 16px;
padding: 26px 24px 22px;
box-shadow: 0 24px 70px -20px rgba(0,0,0,0.7), 0 0 0 4px rgba(255,210,63,0.08);
animation: win-pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
@keyframes win-pop { from { transform: translateY(14px) scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
.win-pop-sign { width: 210px; font-size: 48px; margin: 0 auto 16px; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.4)); }
.win-pop h2 { font-size: 20px; margin: 0 0 6px; line-height: 1.25; }
.win-pop p { margin: 0 0 16px; color: var(--muted); }
.win-pop .btn-primary { display: block; width: 100%; padding: 11px; border-radius: 10px; text-decoration: none; }
.win-pop-dismiss {
display: inline-block; margin-top: 10px; padding: 4px;
background: none; border: 0; color: var(--muted); font-size: 13px; cursor: pointer;
}
.win-pop-dismiss:hover { color: var(--ink); text-decoration: underline; }
/* Persistent corner chip -- the durable path to the claim page after the
one-time overlay. */
.win-chip {
position: fixed; right: 14px; bottom: 14px; z-index: 900;
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 12px 8px 8px; border-radius: 999px;
background: var(--bg); color: var(--ink); text-decoration: none;
border: 1px solid rgba(255,210,63,0.6);
box-shadow: 0 8px 24px -10px rgba(0,0,0,0.6);
font-size: 13px; font-weight: 600;
}
.win-chip:hover { border-color: #ffd23f; }
.win-chip-sign { width: 52px; font-size: 12px; flex: 0 0 auto; }
@media (max-width: 640px) { .win-chip span:last-child { display: none; } }
/* ------------------------------- admin analytics ---------------------------- */
.analytics { max-width: 980px; margin: 0 auto; padding: 0 18px; }
.an-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.an-back { font-size: 14px; color: var(--muted); text-decoration: none; }
.an-back:hover { color: var(--ink); }
.an-sec { margin: 24px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.an-note { text-transform: none; letter-spacing: normal; font-weight: 400; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; }
.an-stat { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.an-num { font-size: 28px; font-weight: 800; line-height: 1; }
.an-lbl { font-size: 12px; color: var(--muted); }
.an-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.an-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.an-table th, .an-table td { text-align: left; padding: 9px 12px; white-space: nowrap; }
.an-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); border-bottom: 1px solid var(--line); }
.an-table tbody tr + tr td { border-top: 1px solid var(--line); }
.an-badge { display: inline-block; min-width: 30px; text-align: center; padding: 2px 7px; border-radius: 6px; background: #1a6b46; color: #fff; font-weight: 700; font-size: 12px; }
.an-email { color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.an-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.an-pill-claimed { background: rgba(55,230,176,0.16); color: #2fd39a; }
.an-pill-outstanding { background: rgba(255,210,63,0.18); color: #ffd23f; }
.an-pill-awaiting-re-offer { background: rgba(255,122,61,0.18); color: #ff9a62; }
/* ------------------------------- traffic dashboard --------------------------- */
.tr-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 8px; }
.tr-range { display: flex; gap: 6px; }
.tr-chip {
display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px;
border: 1px solid var(--line); color: var(--muted); text-decoration: none;
}
.tr-chip.is-on { border-color: var(--accent); color: var(--accent); }
.tr-sync { display: flex; align-items: center; gap: 8px; margin: 0; }
.tr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.tr-block { min-width: 0; }
.tr-bars td { padding: 6px 10px; border: 0 !important; }
.tr-bars .tr-name { width: 120px; color: var(--ink); text-transform: capitalize; }
.tr-bars .tr-bar { width: 100%; }
.tr-bars .tr-n { text-align: right; width: 60px; font-variant-numeric: tabular-nums; }
.tr-bars .tr-pct { text-align: right; width: 48px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Native