/*! cards.css v1.5 - Boilerplate card grid (GoJes.us / DivineRevelations)
    NEW in 1.5: the THIN frame for pages whose cards have no pictures (owner, round 6: "C - thin, nearly square"; <html data-card-frame="thin">, set by cards_lib.php 2.2),
    the coloured background for every card without a picture (.card.nopic), the visitors' average under the stars (.m-avg), and an old tile whose picture is missing shows its title.
    1.4: the PLAYER SECTION above the cards (95% wide, pulsating rainbow border, "now playing" bar), the 1-5 star row and the QR icon in the card menu, and the card's rounding
    and frame thickness as variables (--card-radius, --card-border) so a page can choose them once. The pulsating border is a reusable rule (.glow-frame): see Scripts/Web_Styles.
    One stylesheet for the whole grid document: sticky toolbar (menu button, search, - / +, Share), collapsible (optional) section titles, CARDS (equal gaps both ways,
    never wider than the screen), the card menu with its EXTRAS, the gold frame + rainbow glow of the card whose menu is open, the green "seen" ring around the three dots,
    the Share window (QR code, Copy link, networks, Install), audio bar, lightbox, toast.
    Pair with cards.js. Self-contained (does NOT need /css/story_blocks_multiple_sizes.css).
    Every card = 2:1, rounded 14%/28% corners (= the old baked tiles' 56px radius at 400px), ONE universal steel-blue frame, caption in HTML.
    Fonts: Gabriela (titles) + Lato (everything smaller) - cards_lib.php loads them; fallbacks below keep it readable offline.
    Docs: Boilerplate_Template_Design/docs/11_CARD_COMPONENT.md (cards) and docs/14_PHP_CARDS_AND_RESOURCES.md (cards.txt, extras, sharing) */

:root {
  --card-w: var(--thumb-width, 190px);             /* set by the head script (THUMB) + the - / + buttons */
  --card-gap: clamp(3px, calc(var(--card-w) * .03), 8px);   /* the space between cards, the SAME sideways and downwards (about 6px at the default 190px) */
  --card-bg: #101826;
  /* ONE frame colour for every card (docs/11 section 4): the frame is what makes bought and generated pictures look like one family.
     Steel blue = the site's cool counter-colour to the gold titles; gold stays reserved for focus / favorite / NEW / long-press. Never per card.
     A card page chooses its frame SHAPE once in cards.txt ("card frame: auto | rounded | thin", below); the colour stays the same on every page. */
  --card-frame: #4a6f96;
  --card-radius: 14% / 28%;                        /* corner rounding of every card (= the old baked tiles' 56px radius at 400px); the thin frame below uses 6% / 12% */
  --card-border: max(2px, 1.1cqw);                 /* frame thickness (grows with the card); the thin frame below uses 2px */
  --card-frame-hot: #86b6e0;
  --card-frame-edge: rgba(255,255,255,.16);        /* hairline just inside the ring: keeps the ring readable on dark-blue pictures */
  --focus: #e8d888;                                /* gold focus ring (matches the gold headers) */
  --gold-1: #f8f898; --gold-2: #e8d888; --gold-3: #b89838; --gold-edge: #3d3207;
  --red: darkred;                                  /* the Global Menu's hover / focus fill */
  --menu-bg: #0e131c; --menu-line: #4a6f96; --menu-hover: #1e2c44; --menu-text: #fff; --menu-muted: #a9b8cc;
  --title-font: Gabriela, Georgia, "Times New Roman", "Noto Serif", serif;
  --card-font: Georgia, "Times New Roman", "Noto Serif", serif;
  --ui-font: Lato, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* The THIN frame (owner, round 6, option C: "thin, nearly square") for a page whose cards have NO pictures. cards_lib.php writes <html data-card-frame="thin"> by itself when
   no visible card has a picture ("card frame: auto", the default), or when cards.txt says "card frame: thin". Every other page keeps the rounded Worship frame. ONE frame per page. */
:root[data-card-frame="thin"] { --card-radius: 6% / 12%; --card-border: 2px; }
:root[data-card-frame="thin"] .cell.menu-open { --glow-radius: 8% / 16%; }          /* the rainbow around the open card follows the squarer corners */

html, body { margin: 0; padding: 0; background: #000; color: #fff; }
body { padding: 8px 8px 48px; font: 16px/1.4 var(--ui-font); text-align: center; -webkit-text-size-adjust: 100%; overflow-x: clip; }   /* never a sideways scroll (clip keeps the sticky toolbar working) */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- toolbar (sticky: the menu, search and size buttons stay on screen while the cards scroll) */
html { scroll-padding-top: 76px; }                                                  /* keyboard focus / scrollIntoView never hides a card under the sticky toolbar */
.cards-toolbar { display: flex; flex-wrap: wrap; gap: 2px 6px; justify-content: center; align-items: center; margin: 0 -8px; padding: 6px 8px 2px; }
.cards-toolbar.sticky { position: sticky; top: 0; z-index: 30; padding-bottom: 14px; margin-bottom: -10px; background: linear-gradient(#000 76%, rgba(0,0,0,0)); }   /* soft fade at the bottom edge */
@media (max-height: 480px) { .cards-toolbar.sticky { position: static; } html { scroll-padding-top: 0; } }   /* phone held sideways: no room to spare */
/* Tool buttons (menu / magnifier / - / +) all speak the Global Menu's language: a BARE white glyph on black, no box, dark-red fill on hover / focus.
   Big on purpose: 52px target (56px on touch), glyph strokes 4-5px. The - and + and the menu bars are drawn with CSS so every glyph has identical weight. */
.size-button, .cards-search .mag-btn, .menu-tool, .share-tool { position: relative; box-sizing: border-box; flex: none; display: grid; place-items: center; width: 52px; height: 52px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: #fff; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, transform .12s ease; }
.size-button::before, .size-button::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 3px; background: currentColor; transform: translate(-50%, -50%); }
.size-button::before { width: 26px; height: 5px; }                               /* the bar of "-" and "+" */
.size-button::after { display: none; width: 5px; height: 26px; }                 /* the upright of "+" */
#thumb-size-up::after { display: block; }
.menu-tool { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; min-width: 52px; padding: 0 12px; border-radius: 26px; }   /* three bars + a down arrow: "an expanding menu" */
.menu-tool .bars { display: block; position: relative; box-sizing: border-box; width: 26px; height: 20px; border-top: 4px solid; border-bottom: 4px solid; border-radius: 2px; }
.menu-tool .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; margin-top: -2px; border-top: 4px solid; border-radius: 2px; }
.menu-tool .caret { display: block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid currentColor; transition: transform .2s ease; }
.menu-tool[aria-expanded="true"] .caret { transform: rotate(180deg); }
.share-tool { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-width: 52px; padding: 0 14px; border-radius: 26px; font: 700 17px/1 var(--ui-font); letter-spacing: .02em; }   /* the owner's Share standard: icon + the word "Share" */
.share-tool svg { width: 24px; height: 24px; flex: none; fill: currentColor; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.size-button:hover:not(:disabled), .cards-search .mag-btn:hover, .menu-tool:hover, .share-tool:hover { background: var(--red); }
.size-button:active:not(:disabled), .cards-search .mag-btn:active, .menu-tool:active, .share-tool:active { transform: scale(.92); }
.size-button:disabled { opacity: .3; cursor: default; }
.size-button:focus-visible, .cards-search .mag-btn:focus-visible, .menu-tool:focus-visible, .share-tool:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; background: var(--red); }
@media (pointer: coarse) { .size-button, .cards-search .mag-btn { width: 56px; height: 56px; } .menu-tool, .share-tool { height: 56px; min-width: 56px; } }
@media (max-width: 400px) { .cards-toolbar { gap: 2px 2px; } .menu-tool { padding: 0 8px; } .share-tool { padding: 0 10px; gap: 6px; } }     /* every button stays on ONE line on a phone */
@media (max-width: 359px) { .share-tool { padding: 0; width: 52px; } .share-tool .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }   /* very narrow: the icon, the word stays for screen readers */

/* Search: a magnifying glass that opens into a text box when clicked (cards.js toggles .open).
   The layout slot stays 52px and the box grows OVER the space beside it (toward the end of the line when there is room, else toward the start,
   covering - / + while it is open) - so the magnifier itself never moves when the box opens or folds. */
.cards-search { position: relative; flex: none; width: 52px; height: 52px; --open-w: min(300px, calc(100vw - 120px)); }   /* cards.js sets --open-w to the room that is really there */
.cards-search.open { z-index: 8; }
.cards-search .box { position: absolute; inset-inline-start: 0; top: 0; box-sizing: border-box; display: flex; align-items: center; width: 52px; height: 52px; border: 1px solid transparent; border-radius: 26px; overflow: hidden;
  transition: width .24s ease, border-color .2s ease, background-color .2s ease; }
.cards-search .mag-btn { margin-inline-start: -1px; }                                  /* the box has a 1px border: keep the glyph where the folded button had it */
.cards-search .mag-btn svg { width: 28px; height: 28px; display: block; }
.cards-search.open .box { width: var(--open-w); border-color: var(--card-frame); background: #0b111b; }
.cards-search.to-start .box { inset-inline-start: auto; inset-inline-end: 0; flex-direction: row-reverse; }      /* grows the other way: the glass stays at the end of the box */
.cards-search.to-start .mag-btn { margin-inline-start: 0; margin-inline-end: -1px; }
.cards-search.to-start input { padding: 0 2px 0 40px; }
.cards-search.to-start .clear { inset-inline-end: auto; inset-inline-start: 7px; }
.cards-search input { flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; box-sizing: border-box; margin: 0; padding: 0 40px 0 2px; border: 0; border-radius: 0; background: transparent; color: #fff;
  font: 17px var(--ui-font); /* >= 16px stops iOS from zooming on focus */ outline: none; appearance: none; -webkit-appearance: none; }
.cards-search input::-webkit-search-cancel-button, .cards-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.cards-search input::placeholder { color: #7d8da3; }
.cards-search:not(.open) input { visibility: hidden; width: 0; padding: 0; }     /* folded: not visible, not tabbable */
.cards-search.open .box:focus-within { outline: 3px solid var(--focus); outline-offset: 1px; }
.cards-search .clear { position: absolute; inset-inline-end: 7px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: #26354d; color: #fff; font-size: 15px; line-height: 1; cursor: pointer; display: none; }
.cards-search.open.has-text .clear { display: block; }
.cards-status { color: var(--menu-muted); font-size: 15px; }                      /* lives UNDER the toolbar (not in it): empty = no height */
.cards-status:not(:empty) { margin: 6px 0 2px; }
.cards-empty { margin: 28px auto; color: var(--menu-muted); font-size: 18px; }

/* ---------------------------------------------------------------- sections + gold headers (the title is OPTIONAL: no h2.sec-title = plain, always-open group) */
.sec { margin: 14px 0 20px; }
.sec.untitled .sec-body { padding-top: 0; }
.sec-head { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: .35em; padding: 4px 14px; max-width: 100%;
  font: 400 clamp(28px, 6.4vw, 46px)/1.1 var(--title-font); letter-spacing: .6px;
  background: linear-gradient(var(--gold-1) 0%, var(--gold-2) 42%, var(--gold-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 var(--gold-edge)) drop-shadow(0 -1px 0 var(--gold-edge)) drop-shadow(1px 0 0 var(--gold-edge)) drop-shadow(-1px 0 0 var(--gold-edge)) drop-shadow(0 3px 4px rgba(0,0,0,.7));
  transition: opacity .3s ease; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.sec-head::after { content: "\25BE"; font-size: .55em; }                       /* (down triangle) expanded */
.sec[data-state="collapsed"] .sec-head { opacity: .5; }
.sec[data-state="collapsed"] .sec-head::after { content: "\25B8"; }             /* (right triangle) collapsed */
:root[dir="rtl"] .sec[data-state="collapsed"] .sec-head::after { content: "\25C2"; }
.sec-head:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 10px; }
.sec-head img { display: block; max-width: 100%; height: auto; }              /* image headers (optional): shrink on narrow phones */
.sec-body { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--card-gap); padding-top: 6px; }     /* the SAME gap sideways and downwards (cards no longer touch when stacked) */
.sec[data-state="collapsed"] .sec-body { display: none; }
.sec.searching .sec-body { display: flex !important; }                        /* show matches inside collapsed sections while searching */
.fav-sec .sec-head::before { content: "\2605"; font-size: .8em; }              /* (star) */

/* ---------------------------------------------------------------- CARD */
.cell { display: block; flex: 0 0 auto; position: relative; width: var(--card-w); max-width: 100%; container-type: inline-size; transition: transform .16s ease; }   /* a card is never wider than the screen: the chosen size, or the screen width - whichever is smaller */
.card { display: flex; flex-direction: column; justify-content: flex-end; position: relative; width: 100%; aspect-ratio: 2 / 1; box-sizing: border-box; overflow: hidden; isolation: isolate;
  border-radius: var(--card-radius); background: var(--card-bg); color: #fff; text-decoration: none; text-align: center;
  container-type: inline-size; cursor: pointer; transition: transform .16s ease, filter .16s ease;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none;
  filter: saturate(1.04) contrast(1.02); }                                      /* tiny common grade so mixed art feels like one family */
/* frame + legibility gradient live ABOVE the art, so ANY picture gets the same shape and feel */
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 0 var(--card-border) var(--card-frame), inset 0 0 0 calc(var(--card-border) + 1px) var(--card-frame-edge); transition: box-shadow .16s ease; }
.card:not(.baked)::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.84) 0%, rgba(0,0,0,.5) 34%, rgba(0,0,0,0) 62%), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.28) 100%); }
.card b, .card i { position: relative; z-index: 3; display: block; margin: 0; padding-inline: 13cqw; text-shadow: 0 1px 3px #000, 0 0 12px rgba(0,0,0,.9); }
.card b { margin-bottom: 8cqw; font: 700 clamp(10px, 8.4cqw, 26px)/1.1 var(--card-font); letter-spacing: .2px; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.card b:not(:last-child) { margin-bottom: .6cqw; }                               /* a subtitle follows */
.card i { margin-bottom: 4.6cqw; font: 600 clamp(8px, 5.2cqw, 15px)/1.15 var(--ui-font); color: #cfe0f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.baked b, .card.baked i { display: none; }                                  /* legacy tiles already carry their text */
@container (max-width: 99px) { .card b, .card i { display: none; } }             /* tiny cards: art only (title stays in the menu / aria) */
@container (max-width: 139px) { .card i { display: none; } }
.sec-body > a.card { display: flex; flex: 0 0 auto; width: var(--card-w); max-width: 100%; }               /* before cards.js wraps it: same size, no layout jump */
.card.nopic, .cell.noimg .card { background: linear-gradient(135deg, #1d2b4f, #5a2c6d); }     /* no picture (or one that fails to load): gradient + caption, never a hole */
.cell.noimg .card img { display: none; }
@container (min-width: 100px) { .cell.noimg .card.baked b, .card.baked.nopic b { display: -webkit-box; } }      /* an old tile whose picture is missing shows its title after all */

@media (hover: hover) {
  .cell:hover { transform: translateY(-2px) scale(1.015); z-index: 6; }
  .card:hover { filter: brightness(1.08); }
  .card:hover::after { box-shadow: inset 0 0 0 var(--card-border) var(--card-frame-hot), inset 0 0 0 calc(var(--card-border) + 1px) var(--card-frame-edge); }
}
.card:active { transform: scale(.97); }
.card:focus { outline: none; }
.card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* small round buttons on a card (inserted by cards.js as SIBLINGS of the link, never nested inside it) */
.cell .fav, .cell .more { position: absolute; top: 5%; z-index: 5; width: clamp(24px, 15%, 34px); aspect-ratio: 1; box-sizing: border-box; padding: 0; border: 0; border-radius: 50%;
  background: rgba(8,12,20,.66); color: #fff; font: 700 clamp(12px, 8cqw, 18px)/1 var(--ui-font); cursor: pointer; display: grid; place-items: center;
  opacity: 0; transition: opacity .15s ease, transform .15s ease, background .15s ease; -webkit-tap-highlight-color: transparent; }
.cell .fav { inset-inline-end: 4%; }
.cell .more { inset-inline-start: 4%; }
.cell .more::before { content: ""; width: 58%; height: 19.33%; background: radial-gradient(circle, currentColor 0 62%, transparent 68%) 0 0 / 33.333% 100% repeat-x; }   /* three crisp dots (a font's (three dots) can fall back to a dash) */
.cell .fav::before { content: "\2661"; }                                         /* (heart outline) */
.cell.faved .fav { opacity: 1; color: #ffcf4d; }
.cell.faved .fav::before { content: "\2665"; }                                   /* (heart) */
.cell:hover .fav, .cell:hover .more, .cell:focus-within .fav, .cell:focus-within .more { opacity: 1; }
.cell .fav:hover, .cell .more:hover { transform: scale(1.12); background: rgba(8,12,20,.92); }
.cell .fav:focus-visible, .cell .more:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; opacity: 1; }
@media (hover: none) { .cell .more { opacity: .8; } }                           /* touch: the (three dots) is always visible = the discoverable alternative to long-press */
@container (max-width: 109px) { .cell .fav, .cell .more, .cell .badge { display: none; } }   /* tiny cards: no buttons (same specificity as the rules above) */
.cell .badge { position: absolute; top: 6%; left: 50%; transform: translateX(-50%); z-index: 4; padding: 1px 7px; white-space: nowrap; border-radius: 99px; background: var(--gold-2); color: #2a2204;
  font: 800 clamp(8px, 5.5cqw, 12px)/1.4 var(--ui-font); letter-spacing: .6px; pointer-events: none; }
/* "seen": a card the visitor has opened before gets a green ring around its three dots (which then always show) */
.cell.seen .more { opacity: 1; box-shadow: 0 0 0 2.5px #3ccf74, 0 0 7px rgba(60,207,116,.7); }

/* long-press feedback: the frame thickens in gold while the finger is held */
.cell.pressing .card { transform: scale(.975); }
.cell.pressing .card::after { animation: cards-press var(--lp, 480ms) linear forwards; }
@keyframes cards-press { from { box-shadow: inset 0 0 0 var(--card-border) var(--card-frame), inset 0 0 0 calc(var(--card-border) + 1px) var(--card-frame-edge); } to { box-shadow: inset 0 0 0 max(5px, 3cqw) var(--focus); } }

/* the card whose menu (or Share window) is open: it keeps the gold frame, glows in a slow rainbow, and sits above the dim layer so you can see which card it is */
@property --cards-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cell.menu-open { z-index: 901; pointer-events: none; }                       /* taps fall through to the dim layer (= close) */
.cell.menu-open .card::after { box-shadow: inset 0 0 0 max(5px, 3cqw) var(--focus); }
/* THE PULSATING BORDER (owner: "nice pulsating border" - written up for every project in Scripts/Web_Styles/PULSATING_BORDER.md):
   a soft rainbow that turns slowly (2.8 s) and breathes (1.25 s) behind a thing, around its solid frame. Put  class="glow-frame"  on any element that is position: relative
   and whose PARENT makes a stacking context (isolation: isolate) - the card's glow below and the player section use exactly this rule. Tune with --glow-reach / --glow-blur / --glow-radius. */
.glow-frame, .cell.menu-open { --glow-reach: 6px; --glow-blur: 9px; }
.cell.menu-open { --glow-radius: 16% / 32%; }
.glow-frame::before, .cell.menu-open::before { content: ""; position: absolute; inset: calc(var(--glow-reach) * -1); z-index: -1; border-radius: var(--glow-radius, 16px); pointer-events: none;
  background: conic-gradient(from var(--cards-spin), #ff4d5e, #ffad3b, #fff35c, #5cff86, #4ddcff, #6b7bff, #d26bff, #ff4d5e);
  filter: blur(var(--glow-blur)); animation: cards-spin 2.8s linear infinite, cards-glow 1.25s ease-in-out infinite alternate; }
@keyframes cards-spin { to { --cards-spin: 360deg; } }
@keyframes cards-glow { from { opacity: .6; } to { opacity: 1; } }

/* ---------------------------------------------------------------- context menu (desktop popup / phone bottom sheet) */
.cards-backdrop { position: fixed; inset: 0; z-index: 900; background: transparent; touch-action: none; }
.cards-backdrop.sheet { background: rgba(0,0,0,.55); animation: cards-fade .16s ease; }
.cards-menu { position: fixed; z-index: 902; width: max-content; min-width: 230px; max-width: min(92vw, 340px); box-sizing: border-box; padding: 6px; text-align: start;
  background: var(--menu-bg); color: var(--menu-text); border: 1px solid var(--menu-line); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.7);
  font: 16px/1.3 var(--ui-font); animation: cards-pop .12s ease; outline: none; max-height: 92vh; overflow: auto; }
.cards-menu.sheet { inset-inline: 0; bottom: 0; top: auto; left: 0; right: 0; max-width: none; width: 100%; border-radius: 18px 18px 0 0; border-bottom: 0; padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  animation: cards-slide .2s ease; }
.cards-menu .m-title { padding: 6px 12px 8px; font: 700 14px/1.3 var(--ui-font); color: var(--menu-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #22304a; margin-bottom: 4px; }
.cards-menu .m-item { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; color: inherit;
  font: inherit; text-align: start; cursor: pointer; min-height: 44px; }
.cards-menu.sheet .m-item { min-height: 52px; font-size: 17px; }
.cards-menu .m-item .ic { flex: none; width: 1.5em; text-align: center; font-size: 1.1em; }
.cards-menu .m-item .tx { flex: 1 1 auto; min-width: 0; }
.cards-menu .m-item .tx small { display: block; margin-top: 1px; font-size: .78em; font-weight: 400; color: var(--menu-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cards-menu .m-item .qr-ic { flex: none; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-inline: -9px -1px; color: var(--menu-muted); }   /* "this is also how you get a QR code" */
.cards-menu .m-item .qr-ic svg { width: 100%; height: 100%; display: block; }
.cards-menu .m-item:hover .qr-ic, .cards-menu .m-item:focus-visible .qr-ic { color: #fff; }
.cards-menu .m-rate { padding: 6px 6px 8px; }                                   /* the 1-5 star row */
.cards-menu .m-rate-lab { padding: 2px 6px 4px; font-size: .88em; line-height: 1.3; color: var(--menu-muted); }
.cards-menu .m-stars { display: flex; gap: 3px; }
.cards-menu .m-star { flex: 1 1 0; min-width: 0; height: 50px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #4b5a73; font: 400 30px/1 var(--ui-font); cursor: pointer;
  transition: color .12s ease, transform .1s ease, background-color .15s ease; -webkit-tap-highlight-color: transparent; }
.cards-menu.sheet .m-star { height: 58px; font-size: 34px; }
.cards-menu .m-star.on { color: #ffcf4d; text-shadow: 0 0 10px rgba(255,207,77,.45); }
.cards-menu .m-avg { padding: 5px 6px 0; font-size: .86em; line-height: 1.3; color: var(--menu-muted); }      /* the visitors' average (videos.php?stars) */
.cards-menu .m-avg b { color: #ffcf4d; font-weight: 700; }
.cards-menu .m-star:hover { background: var(--menu-hover); }
.cards-menu .m-star:active { transform: scale(.88); }
.cards-menu .m-star:focus-visible { outline: none; background: var(--menu-hover); box-shadow: inset 0 0 0 2px var(--focus); }
.cards-menu .m-sub { padding: 9px 12px 3px; font: 700 11.5px/1.2 var(--ui-font); letter-spacing: .09em; text-transform: uppercase; color: var(--menu-muted); }
.cards-menu .m-item.def { font-weight: 800; }
.cards-menu .m-item:hover, .cards-menu .m-item:focus-visible { background: var(--menu-hover); outline: none; }
.cards-menu .m-item:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.cards-menu .m-sep { height: 1px; margin: 4px 6px; background: #22304a; }
@keyframes cards-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes cards-slide { from { transform: translateY(100%); } to { transform: none; } }
@keyframes cards-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- audio bar (an mp3 / m4a extra plays here and keeps playing while the visitor browses) */
.cards-player { position: fixed; z-index: 940; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(620px, calc(100vw - 16px)); box-sizing: border-box; display: flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 6px; background: var(--menu-bg); border: 1px solid var(--menu-line); border-radius: 18px; box-shadow: 0 12px 32px rgba(0,0,0,.75); text-align: start; animation: cards-slide .2s ease; }
.cards-player .pl-btn, .cards-lightbox .lb-btn { position: relative; box-sizing: border-box; flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #fff; font: 700 20px/1 var(--ui-font); text-decoration: none; cursor: pointer; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent; }
.cards-player .pl-btn:hover, .cards-lightbox .lb-btn:hover { background: var(--red); }
.cards-player .pl-btn:focus-visible, .cards-lightbox .lb-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; background: var(--red); }
.cards-player .pl-play::before { content: ""; border-left: 15px solid currentColor; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-inline-start: 4px; }       /* play triangle */
.cards-player .pl-play[aria-pressed="true"]::before { width: 6px; height: 20px; margin: 0; border: 0; background: currentColor; box-shadow: 11px 0 0 currentColor; transform: translateX(-5px); }   /* pause bars */
.cards-player .pl-main { flex: 1 1 auto; min-width: 0; }
.cards-player .pl-title { font: 700 14px/1.25 var(--ui-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cards-player .pl-row { display: flex; align-items: center; gap: 8px; }
.cards-player .pl-time { flex: none; font: 12px/1 var(--ui-font); color: var(--menu-muted); font-variant-numeric: tabular-nums; }
.cards-player input[type="range"] { flex: 1 1 auto; min-width: 0; height: 22px; margin: 0; accent-color: var(--gold-2); cursor: pointer; }
html.has-player body { padding-bottom: 120px; }
html.has-player .cards-toast { bottom: 86px; }

/* ---------------------------------------------------------------- PLAYER SECTION: a video card plays HERE, above the cards (cards.js builds it the first time it is needed).
   95% of the width, with the pulsating border; the video inside is never taller than the window (a wide, short window shows it a little narrower, with dark sides, rather than cut off). */
.cards-stage { position: relative; isolation: isolate; width: 95%; margin: 14px auto 20px; scroll-margin-top: 76px; outline: none; text-align: start; }
.stage-frame { position: relative; box-sizing: border-box; border: 3px solid var(--focus); border-radius: 18px; background: #05080d; padding-bottom: 6px; --glow-radius: 22px; --glow-reach: 7px; --glow-blur: 10px; }
.stage-bar { display: flex; align-items: center; gap: 2px; padding: 6px 6px 4px 16px; }
.stage-title { flex: 1 1 auto; min-width: 0; font: 700 clamp(15px, 2.6vw, 20px)/1.3 var(--ui-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-btn { position: relative; box-sizing: border-box; flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff;
  font: 700 20px/1 var(--ui-font); text-decoration: none; cursor: pointer; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent; }
.stage-btn:hover { background: var(--red); }
.stage-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; background: var(--red); }
.stage-video { display: grid; place-items: center; padding: 0 10px; }
.stage-video iframe { display: block; width: min(100%, calc((100vh - 196px) * 16 / 9)); min-width: min(100%, 16rem); aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 10px; background: #000; }
@supports (height: 100dvh) { .stage-video iframe { width: min(100%, calc((100dvh - 196px) * 16 / 9)); } }
.stage-help { margin: 6px 14px 2px; font-size: 13px; line-height: 1.35; color: var(--menu-muted); text-align: center; }
@media (max-height: 480px) { .cards-stage { scroll-margin-top: 8px; } .stage-video iframe { width: min(100%, calc((100vh - 120px) * 16 / 9)); } }        /* a phone held sideways: the toolbar scrolls away, so there is more room */
@media (max-height: 480px) { @supports (height: 100dvh) { .stage-video iframe { width: min(100%, calc((100dvh - 120px) * 16 / 9)); } } }
html.has-stage .cards-stage + .fav-sec, html.has-stage .cards-stage + .sec { margin-top: 0; }
/* the slim bar that appears at the bottom when the player has scrolled out of sight */
.cards-now { position: fixed; z-index: 940; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(620px, calc(100vw - 16px)); box-sizing: border-box; display: flex; align-items: center; gap: 4px;
  padding: 4px 6px 4px 14px; background: var(--menu-bg); border: 2px solid var(--focus); border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,.75); text-align: start; animation: cards-slide .2s ease; }
.cards-now .now-ic { flex: none; color: var(--focus); font-size: 16px; }
.cards-now .now-title { flex: 1 1 auto; min-width: 0; font: 700 15px/1.25 var(--ui-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cards-now .now-btn { box-sizing: border-box; flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff;
  font: 700 18px/1 var(--ui-font); cursor: pointer; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent; }
.cards-now .now-btn:hover { background: var(--red); }
.cards-now .now-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; background: var(--red); }
html.has-now body { padding-bottom: 96px; }
html.has-now .cards-toast { bottom: 76px; }

/* ---------------------------------------------------------------- lightbox (an mp4 / webm video, an image, or a same-site page opens full-window, inside the card page) */
html.lb-open { overflow: hidden; }
.cards-lightbox { position: fixed; inset: 0; z-index: 960; display: flex; flex-direction: column; background: rgba(0,0,0,.95); animation: cards-fade .16s ease; }
.cards-lightbox .lb-bar { flex: none; display: flex; align-items: center; gap: 4px; padding: 6px 8px 4px 14px; }
.cards-lightbox .lb-title { flex: 1 1 auto; min-width: 0; font: 700 16px/1.3 var(--ui-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.cards-lightbox .lb-body { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; padding: 0 8px calc(10px + env(safe-area-inset-bottom)); }
.cards-lightbox video, .cards-lightbox img.lb-img { max-width: 100%; max-height: 100%; border-radius: 10px; background: #000; }
.cards-lightbox iframe { width: 100%; height: 100%; border: 0; border-radius: 10px; background: #fff; }
.cards-lightbox .lb-msg { max-width: 34em; padding: 18px; font: 17px/1.5 var(--ui-font); color: #ffeaea; text-align: center; }
.cards-lightbox .lb-msg a { color: var(--gold-2); }

/* ---------------------------------------------------------------- Share window (the owner's Share standard + QR code + Install): centred on a computer, a bottom sheet on a phone */
html.sh-open { overflow: hidden; }
.cards-share { position: fixed; inset: 0; z-index: 970; display: grid; place-items: center; box-sizing: border-box; padding: 12px; background: rgba(0,0,0,.72); animation: cards-fade .16s ease; }
.cards-share .sh-panel { box-sizing: border-box; width: min(440px, 100%); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; padding: 8px 14px 14px;
  text-align: start; background: var(--menu-bg); color: var(--menu-text); border: 1px solid var(--menu-line); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.8); font: 16px/1.35 var(--ui-font); animation: cards-pop .14s ease; }
.cards-share:not(.sheet) .sh-panel { width: min(700px, 100%); }
@media (min-width: 640px) { .cards-share:not(.sheet) .sh-body { display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: 18px; align-items: start; }
                            .cards-share:not(.sheet) .sh-body.no-qr, .cards-share.qr-big:not(.sheet) .sh-body { display: block; }     /* the BIG code gets the whole width (never under the buttons) */
                            .cards-share:not(.sheet) .sh-qrwrap { margin-top: 6px; } }
.cards-share.sheet { place-items: end center; padding: 0; }
.cards-share.sheet .sh-qr { width: 170px; height: 170px; }
.cards-share.sheet .sh-panel { width: 100%; max-width: 560px; max-height: 94vh; max-height: 94dvh; border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); animation: cards-slide .2s ease; }
.cards-share .sh-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cards-share .sh-title { flex: 1 1 auto; min-width: 0; font: 700 17px/1.3 var(--ui-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cards-share .sh-close { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #fff; font: 700 20px/1 var(--ui-font); cursor: pointer; }
.cards-share .sh-close:hover, .cards-share .sh-close:focus-visible { background: var(--red); outline: none; }
.cards-share .sh-close:focus-visible { box-shadow: 0 0 0 3px var(--focus); }
.cards-share .sh-qrwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 2px 0 12px; }
.cards-share .sh-qr { display: block; box-sizing: border-box; width: 190px; height: 190px; padding: 0; border: 0; border-radius: 12px; background: #fff; cursor: zoom-in; overflow: hidden; transition: width .2s ease, height .2s ease; }
.cards-share .sh-qr svg { display: block; width: 100%; height: 100%; }
.cards-share .sh-qr:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.cards-share.qr-big .sh-qr { width: min(84vw, 62vh, 440px); height: min(84vw, 62vh, 440px); cursor: zoom-out; }
.cards-share .sh-cap { max-width: 22em; font-size: 13px; line-height: 1.3; color: var(--menu-muted); text-align: center; }
.cards-share .sh-copy { display: flex; gap: 8px; }
.cards-share .sh-url { flex: 1 1 auto; min-width: 0; height: 44px; box-sizing: border-box; margin: 0; padding: 0 10px; border: 1px solid #2b3d58; border-radius: 10px; background: #0b111b; color: #fff; font: 15px var(--ui-font); }
.cards-share .sh-url:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.cards-share .sh-copy-btn { flex: none; min-width: 7.5em; height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--gold-2); color: #1d1703; font: 800 15px/1 var(--ui-font); cursor: pointer; }
.cards-share .sh-copy-btn:hover { background: var(--gold-1); }
.cards-share .sh-copy-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cards-share .sh-status { min-height: 1.3em; margin: 6px 2px 4px; font-size: 14px; color: #9fe0b5; }
.cards-share .sh-status:empty { min-height: 0; margin: 4px 0; }
.cards-share .sh-more { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; min-height: 48px; margin: 4px 0; padding: 8px 12px; border: 1px solid #22304a; border-radius: 10px;
  background: transparent; color: inherit; font: 600 15px/1.25 var(--ui-font); text-align: start; cursor: pointer; }
.cards-share .sh-more .ic { flex: none; width: 1.5em; text-align: center; font-size: 1.15em; }
.cards-share .sh-more .tx { flex: 1 1 auto; min-width: 0; }
.cards-share .sh-more small { display: block; font-weight: 400; font-size: .82em; color: var(--menu-muted); }
.cards-share .sh-more:hover, .cards-share .sh-more:focus-visible { background: var(--menu-hover); border-color: var(--menu-line); outline: none; }
.cards-share .sh-more:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.cards-share .sh-list { list-style: none; margin: 6px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cards-share .sh-list li { margin: 0; padding: 0; }
.cards-share .sh-net { display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 6px 10px; border: 1px solid #22304a; border-radius: 10px; color: #fff; text-decoration: none; font: 600 15px/1.2 var(--ui-font); }
.cards-share .sh-net:hover, .cards-share .sh-net:focus-visible { background: var(--menu-hover); border-color: var(--menu-line); outline: none; }
.cards-share .sh-net:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.cards-share .sh-badge { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #3a4f6e; color: #fff; font: 800 14px/1 Arial, Helvetica, sans-serif; }
.cards-share .sh-badge svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cards-share [data-net="facebook"] .sh-badge { background: #1877f2; }
.cards-share [data-net="x"] .sh-badge, .cards-share [data-net="threads"] .sh-badge { background: #000; outline: 1px solid #44536b; }
.cards-share [data-net="whatsapp"] .sh-badge { background: #128c7e; }
.cards-share [data-net="telegram"] .sh-badge { background: #229ed9; }
.cards-share [data-net="reddit"] .sh-badge { background: #ff4500; }
.cards-share [data-net="linkedin"] .sh-badge { background: #0a66c2; }
.cards-share [data-net="bluesky"] .sh-badge { background: #1185fe; }
.cards-share [data-net="pinterest"] .sh-badge { background: #e60023; }
.cards-share .sh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 340px) { .cards-share .sh-list { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- toast */
.cards-toast { position: fixed; z-index: 990; left: 50%; bottom: 22px; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; max-width: 90vw;
  padding: 10px 18px; border-radius: 12px; background: #1f3a2a; border: 1px solid #2f8f55; color: #eafff1; font: 700 15px/1.3 var(--ui-font); box-shadow: 0 8px 24px rgba(0,0,0,.6);
  transition: transform .2s ease, opacity .2s ease; }
.cards-toast.show { transform: translate(-50%, 0); opacity: 1; }
.cards-toast.err { background: #3a1f1f; border-color: #a94848; color: #ffeaea; }

/* ---------------------------------------------------------------- user preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .cell.menu-open::before, .glow-frame::before { opacity: .85; }                  /* the rainbow stays, it just does not move */
  .card:hover, .cell.pressing .card { transform: none; }
}
@media (forced-colors: active) {
  .card::after { box-shadow: none; border: 2px solid CanvasText; }
  .size-button::before, .size-button::after { forced-color-adjust: none; background: ButtonText; }
  .cards-player .pl-play::before { forced-color-adjust: none; }
  .cell .more::before { background: none; content: "\22EF"; width: auto; height: auto; }
  .cell.seen .more { outline: 2px solid Highlight; }
  .cell.menu-open .card::after { border: 4px solid Highlight; }
  .stage-frame { border-color: Highlight; background: Canvas; }
  .glow-frame::before { display: none; }
  .cards-menu .m-star.on { color: Highlight; }
  .share-tool svg { forced-color-adjust: none; fill: ButtonText; stroke: ButtonText; }
  .card:focus-visible, .sec-head:focus-visible { outline: 3px solid Highlight; }
  .sec-head { color: CanvasText; background: none; filter: none; }
}
@supports not (container-type: inline-size) {                                    /* very old browsers: fixed caption sizes */
  .card b { font-size: 13px; bottom: 22px; } .card i { font-size: 10px; }
}