/* Card themes. Each one is a different object, not a recolour: the same card
   markup becomes a tarot card, a boarding pass, a Polaroid... A theme is set
   with data-theme on any ancestor of .card (the stage, a showcase figure).
   Every theme declares --th-bg / --th-ink / --th-ink-2 / --th-accent; the
   contrast check reads them, so text colours must go through them. */

@font-face { font-family: "Cinzel"; src: url("fonts/cinzel-normal-500-700.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 500 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("fonts/bodoni-moda-normal-400-700.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat-normal-500-700.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-normal-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-normal-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo Black"; src: url("fonts/archivo-black-normal-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* Paper grain, shared by the paper themes. A tiny SVG turbulence tile. */
:root {
  --grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAuMDkgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJyBmaWx0ZXI9J3VybCgjbiknLz48L3N2Zz4=");
}

/* ============================================================ TABLE (default) */
[data-theme="table"] .card { --th-bg: #f8f3ea; }

/* ============================================================ TAROT
   Midnight card stock, a gold double frame, a sun above the question and a
   crescent below. The number is a Roman numeral; the level is the card's title. */
[data-theme="tarot"] .card {
  --th-bg: #161d47; --th-ink: #f4e9cc; --th-ink-2: #e2c98e; --th-accent: #e2c98e;
  --gold: #d6b46a;
  --q-size: clamp(1.35rem, 5vw, 1.7rem);
  padding: 30px 30px 26px;
  text-align: center;
  background:
    radial-gradient(1.2px 1.2px at 18% 22%, rgba(246, 225, 170, 0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 16%, rgba(246, 225, 170, 0.7) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 74% 78%, rgba(246, 225, 170, 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 26% 84%, rgba(246, 225, 170, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 52%, rgba(246, 225, 170, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 9% 58%, rgba(246, 225, 170, 0.5) 50%, transparent 51%),
    radial-gradient(ellipse 80% 60% at 50% 42%, #27336f 0%, #161d47 60%, #0e1333 100%);
  box-shadow: inset 0 0 0 1px #0a0e26, var(--shadow);
}
[data-theme="tarot"] .card::before {
  inset: 11px; border-radius: 10px;
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(214, 180, 106, 0.55);
}
/* The sun sits under the numeral and the moon over the title, in the flow,
   so they keep their distance from the question at any card size. */
[data-theme="tarot"] .card { container-type: inline-size; }
[data-theme="tarot"] .card-head { flex-direction: column; justify-content: center; gap: 10px; font: 600 0.95rem/1 "Cinzel", var(--serif); letter-spacing: 0.3em; }
[data-theme="tarot"] .card-head::after, [data-theme="tarot"] .card-foot::before { content: ""; background: var(--gold); flex: none; }
[data-theme="tarot"] .card-head::after { width: 42px; height: 42px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cg stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M32 4V17%22 transform=%22rotate%280.0 32 32%29%22/%3E%3Cpath d=%22M32 10V18%22 transform=%22rotate%2822.5 32 32%29%22/%3E%3Cpath d=%22M32 4V17%22 transform=%22rotate%2845.0 32 32%29%22/%3E%3Cpath d=%22M32 10V18%22 transform=%22rotate%2867.5 32 32%29%22/%3E%3Cpath d=%22M32 4V17%22 transform=%22rotate%2890.0 32 32%29%22/%3E%3Cpath d=%22M32 10V18%22 transform=%22rotate%28112.5 32 32%29%22/%3E%3Cpath d=%22M32 4V17%22 transform=%22rotate%28135.0 32 32%29%22/%3E%3Cpath d=%22M32 10V18%22 transform=%22rotate%28157.5 32 32%29%22/%3E%3Cpath d=%22M32 4V17%22 transform=%22rotate%28180.0 32 32%29%22/%3E%3Cpath d=%22M32 10V18%22 transform=%22rotate%28202.5 32 32%29%22/%3E%3Cpath d=%22M32 4V17%22 transform=%22rotate%28225.0 32 32%29%22/%3E%3Cpath d=%22M32 10V18%22 transform=%22rotate%28247.5 32 32%29%22/%3E%3Cpath d=%22M32 4V17%22 transform=%22rotate%28270.0 32 32%29%22/%3E%3Cpath d=%22M32 10V18%22 transform=%22rotate%28292.5 32 32%29%22/%3E%3Cpath d=%22M32 4V17%22 transform=%22rotate%28315.0 32 32%29%22/%3E%3Cpath d=%22M32 10V18%22 transform=%22rotate%28337.5 32 32%29%22/%3E%3C/g%3E%3Ccircle cx=%2232%22 cy=%2232%22 r=%229%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cg stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M32 4V17%22 transform=%22rotate%280.0 32 32%29%22/%3E%3Cpath d=%22M32 10V18%22 transform=%22rotate%2822.5 32 32%29%22/%3E%3Cpath d=%22M32 4V17%22 transform=%22rotate%2845.0 32 32%29%22/%3E%3Cpath d=%22M32 10V18%22 transform=%22rotate%2867.5 32 32%29%22/%3E%3Cpath d=%22M32 4V17%22 transform=%22rotate%2890.0 32 32%29%22/%3E%3Cpath d=%22M32 10V18%22 transform=%22rotate%28112.5 32 32%29%22/%3E%3Cpath d=%22M32 4V17%22 transform=%22rotate%28135.0 32 32%29%22/%3E%3Cpath d=%22M32 10V18%22 transform=%22rotate%28157.5 32 32%29%22/%3E%3Cpath d=%22M32 4V17%22 transform=%22rotate%28180.0 32 32%29%22/%3E%3Cpath d=%22M32 10V18%22 transform=%22rotate%28202.5 32 32%29%22/%3E%3Cpath d=%22M32 4V17%22 transform=%22rotate%28225.0 32 32%29%22/%3E%3Cpath d=%22M32 10V18%22 transform=%22rotate%28247.5 32 32%29%22/%3E%3Cpath d=%22M32 4V17%22 transform=%22rotate%28270.0 32 32%29%22/%3E%3Cpath d=%22M32 10V18%22 transform=%22rotate%28292.5 32 32%29%22/%3E%3Cpath d=%22M32 4V17%22 transform=%22rotate%28315.0 32 32%29%22/%3E%3Cpath d=%22M32 10V18%22 transform=%22rotate%28337.5 32 32%29%22/%3E%3C/g%3E%3Ccircle cx=%2232%22 cy=%2232%22 r=%229%22/%3E%3C/svg%3E") center / contain no-repeat; }
[data-theme="tarot"] .card-foot::before { width: 58%; height: 18px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 24%22%3E%3Cpath d=%22M4 12h38M78 12h38%22 stroke=%22%23000%22 stroke-width=%221.4%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M66 12a8 8 0 1 1-8.5-8 6.3 6.3 0 1 0 8.5 8z%22/%3E%3Cpath d=%22M47 12l1.2-2.8L49.4 12l-1.2 2.8zM73 12l1.2-2.8L75.4 12l-1.2 2.8z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 24%22%3E%3Cpath d=%22M4 12h38M78 12h38%22 stroke=%22%23000%22 stroke-width=%221.4%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M66 12a8 8 0 1 1-8.5-8 6.3 6.3 0 1 0 8.5 8z%22/%3E%3Cpath d=%22M47 12l1.2-2.8L49.4 12l-1.2 2.8zM73 12l1.2-2.8L75.4 12l-1.2 2.8z%22/%3E%3C/svg%3E") center / contain no-repeat; }
@container (max-width: 250px) {
  [data-theme="tarot"] .card-head { gap: 6px; font-size: 0.78rem; }
  [data-theme="tarot"] .card-head::after { width: 28px; height: 28px; }
  [data-theme="tarot"] .card-foot::before { height: 13px; }
  [data-theme="tarot"] .card-level { font-size: 0.72rem; }
}
[data-theme="tarot"] .card-no { display: none; }
[data-theme="tarot"] .card-roman { display: inline; padding-left: 0.3em; }
[data-theme="tarot"] .card-q {
  justify-content: safe center; padding: 14px 4px;
  font-family: "Cormorant Garamond", var(--serif); font-style: italic; font-weight: 500; line-height: 1.2;
}
[data-theme="tarot"] .card-foot { flex-direction: column; align-items: center; gap: 12px; }
[data-theme="tarot"] .card-level { font: 600 0.9rem/1 "Cinzel", var(--serif); letter-spacing: 0.22em; color: var(--th-accent); }
[data-theme="tarot"] .card-level::before { content: "The "; }


/* ============================================================ BOARDING PASS
   A ticket: airline band, SMALL TALK -> REAL TALK, and a tear-off stub whose
   gate is the level and whose seat is the card number. The notches are cut
   with a mask, so the shadow moves to a drop-shadow on the stage. */
[data-theme="boarding"] .card {
  --th-bg: #fbfaf6; --th-ink: #17202c; --th-ink-2: #5a6472; --th-accent: #17202c;
  --stub: 86px; --top: 94px;
  --q-size: clamp(1.2rem, 4.6vw, 1.5rem);
  padding: calc(var(--top) + 10px) 22px calc(var(--stub) + 12px);
  border-radius: 14px;
  background:
    linear-gradient(transparent calc(100% - var(--stub) - 1px), transparent calc(100% - var(--stub) - 1px)),
    linear-gradient(180deg, #fffefb, #f5f3ed);
  box-shadow: none;
  -webkit-mask: radial-gradient(circle 11px at 0 calc(100% - var(--stub)), transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 11px at 100% calc(100% - var(--stub)), transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 calc(100% - var(--stub)), transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 11px at 100% calc(100% - var(--stub)), transparent 98%, #000) right / 51% 100% no-repeat;
}
[data-theme="boarding"].stage .card, [data-theme="boarding"] .fan-slot .card { box-shadow: none; }
.stage[data-theme="boarding"], .fan-slot[data-theme="boarding"], .style-demo[data-theme="boarding"] > .card { filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2)); }
[data-theme="boarding"] .card::before { display: none; }
[data-theme="boarding"] .art-boarding { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.bp-band {
  position: absolute; left: 0; right: 0; top: 0; height: 40px; padding: 0 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--deck); color: var(--deck-on);
  font-weight: 600; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.bp-band svg { width: 16px; height: 16px; fill: currentColor; transform: rotate(90deg); }
.bp-route {
  position: absolute; left: 22px; right: 22px; top: 50px; white-space: nowrap;
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--th-ink);
}
.bp-route span { display: flex; flex-direction: column; gap: 2px; }
.bp-route span:last-child { text-align: right; }
.bp-route i { flex: 1; height: 0; border-top: 1.5px dashed #b9bec6; }
.bp-route small, .bp-stub small { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.12em; color: var(--th-ink-2); }
.bp-stub {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--stub); padding: 12px 22px;
  display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto 1fr; column-gap: 18px;
  border-top: 1.5px dashed #c3c7ce; background: #f3f1ea;
  text-transform: uppercase; color: var(--th-ink);
}
.bp-stub span { display: flex; flex-direction: column; gap: 3px; }
.bp-stub b { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em; }
.bp-code {
  grid-column: 1 / -1; align-self: end; height: 16px; margin-top: 6px;
  background: repeating-linear-gradient(90deg, #17202c 0 2px, transparent 2px 4px, #17202c 4px 5px, transparent 5px 8px, #17202c 8px 11px, transparent 11px 12px, #17202c 12px 13px, transparent 13px 17px);
  opacity: 0.85;
}
[data-theme="boarding"] .card-head { display: none; }
/* Phones: the card is short, so the ticket prints compact and drops the
   question label to leave the question its room. */
@media (max-width: 600px) {
  .stage[data-theme="boarding"] .card { --top: 74px; --stub: 68px; }
  .stage[data-theme="boarding"] .bp-band { height: 32px; font-size: 0.62rem; }
  .stage[data-theme="boarding"] .bp-route { top: 40px; font-size: 0.72rem; }
  .stage[data-theme="boarding"] .bp-stub { padding: 8px 22px; }
  .stage[data-theme="boarding"] .bp-stub b { font-size: 0.82rem; }
  .stage[data-theme="boarding"] .bp-code { height: 11px; margin-top: 3px; }
  .stage[data-theme="boarding"] .card-q::before { display: none; }
}
/* A ticket drawn narrow (showcase, fan) gets the compact print. */
[data-theme="boarding"] .card { container-type: inline-size; }
@container (max-width: 270px) {
  .bp-band { padding: 0 12px; font-size: 0.56rem; letter-spacing: 0.1em; height: 32px; }
  .bp-band svg { width: 12px; height: 12px; }
  .bp-route { left: 14px; right: 14px; top: 40px; font-size: 0.62rem; letter-spacing: 0.03em; gap: 6px; }
  .bp-route small, .bp-stub small { font-size: 0.5rem; }
  .bp-stub { padding: 8px 14px; column-gap: 12px; }
  .bp-stub b { font-size: 0.78rem; }
  .bp-code { height: 12px; margin-top: 4px; }
}
[data-theme="boarding"] .card { --q-size: clamp(1.35rem, 5vw, 1.75rem); }
.style-demo[data-theme="boarding"] .card, .fan-slot[data-theme="boarding"] .card { --top: 76px; --stub: 70px; padding-left: 14px; padding-right: 14px; }
[data-theme="boarding"] .card-q {
  flex-direction: column; justify-content: safe center; align-items: flex-start; gap: 10px; padding: 0;
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; line-height: 1.18;
}
/* The field label every ticket prints above the passenger's name. */
[data-theme="boarding"] .card-q::before {
  content: "Your question"; font: 500 0.62rem/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--th-ink-2);
}
[data-theme="boarding"] .card-foot { display: none; }

/* ============================================================ POLAROID
   An instant photo, slightly tilted, taped to the table. The question is
   written on the (over-exposed) photo in marker; the caption strip carries the
   deck and number, and the corner has the orange date stamp. */
[data-theme="polaroid"] .card {
  --th-bg: #f3e6d6; --th-ink: #2b2530; --th-ink-2: #4a4150; --th-accent: #2b2530;
  --q-size: clamp(1.7rem, 6.4vw, 2.15rem);
  padding: 7% 7% 27%;
  border-radius: 3px;
  background: var(--grain), linear-gradient(180deg, #fffefa, #f6f3ec);
  background-size: 140px, auto;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, var(--shadow);
  transform: rotate(-1.4deg);
}
[data-theme="polaroid"] .card::before { display: none; }
[data-theme="polaroid"] .card { container-type: inline-size; }
@container (max-width: 270px) { .art-polaroid .caption { font-size: 0.95rem; right: calc(9% + 54px); } .art-polaroid .stamp { font-size: 0.6rem; } }
[data-theme="polaroid"] .art-polaroid { display: block; }
.art-polaroid .photo {
  position: absolute; left: 7%; right: 7%; top: 5.5%; bottom: 25%;
  background:
    radial-gradient(ellipse 70% 55% at 85% 12%, rgba(255, 170, 90, 0.45), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, rgba(60, 30, 20, 0.18) 100%),
    var(--grain),
    linear-gradient(165deg, color-mix(in srgb, var(--deck) 16%, #fff4e4) 0%, color-mix(in srgb, var(--deck) 30%, #f3dfca) 100%);
  background-size: auto, auto, 140px, auto;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), inset 0 2px 6px rgba(0, 0, 0, 0.12);
}
.art-polaroid .tape {
  position: absolute; top: -10px; left: 50%; width: 96px; height: 28px; transform: translateX(-50%) rotate(-4deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.18)), rgba(226, 204, 150, 0.82);
  box-shadow: 0 1px 3px rgba(60, 40, 10, 0.25);
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px));
          mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px));
}
.art-polaroid .stamp {
  position: absolute; right: 9%; bottom: calc(7% + 3px);
  font: 600 0.72rem/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.08em;
  color: #b3400c;
}
.art-polaroid .caption {
  position: absolute; left: 9%; right: calc(9% + 76px); bottom: 7%;
  font: 600 1.35rem/1 "Caveat", cursive; color: var(--th-ink-2); transform: rotate(-1deg);
  text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="polaroid"] .card-head, [data-theme="polaroid"] .card-foot { display: none; }
[data-theme="polaroid"] .card-q {
  padding: 18px 16px; justify-content: safe center; text-align: center;
  font: 600 var(--q-size)/1.08 "Caveat", cursive; letter-spacing: 0;
}

/* ============================================================ LETTERPRESS
   Thick cotton stock with a torn (deckled) edge, the type pressed into it,
   and gold-foil corners. Centred, formal, quiet. */
[data-theme="letterpress"] .card {
  --th-bg: #f5efe3; --th-ink: #261c15; --th-ink-2: #5a4a3a; --th-accent: #6b4f1d;
  --q-size: clamp(1.4rem, 5.2vw, 1.8rem);
  padding: 36px 34px 30px; text-align: center;
  border-radius: 2px;
  background: var(--grain), radial-gradient(ellipse at 30% 20%, #fbf7ef, #f2eadb 70%, #ebe1cf);
  background-size: 140px, auto;
  box-shadow: none;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMDAgMTQwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz48ZmlsdGVyIGlkPSdkJz48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Jy45JyBudW1PY3RhdmVzPScyJyBzZWVkPSc0Jy8+PGZlRGlzcGxhY2VtZW50TWFwIGluPSdTb3VyY2VHcmFwaGljJyBzY2FsZT0nMS42Jy8+PC9maWx0ZXI+PHJlY3QgeD0nMScgeT0nMScgd2lkdGg9Jzk4JyBoZWlnaHQ9JzEzOCcgZmlsdGVyPSd1cmwoI2QpJy8+PC9zdmc+") center / 100% 100%;
          mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMDAgMTQwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz48ZmlsdGVyIGlkPSdkJz48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Jy45JyBudW1PY3RhdmVzPScyJyBzZWVkPSc0Jy8+PGZlRGlzcGxhY2VtZW50TWFwIGluPSdTb3VyY2VHcmFwaGljJyBzY2FsZT0nMS42Jy8+PC9maWx0ZXI+PHJlY3QgeD0nMScgeT0nMScgd2lkdGg9Jzk4JyBoZWlnaHQ9JzEzOCcgZmlsdGVyPSd1cmwoI2QpJy8+PC9zdmc+") center / 100% 100%;
}
.stage[data-theme="letterpress"], .fan-slot[data-theme="letterpress"], .style-demo[data-theme="letterpress"] > .card { filter: drop-shadow(0 10px 16px rgba(40, 25, 10, 0.3)) drop-shadow(0 1px 1px rgba(40, 25, 10, 0.2)); }
/* A blind-debossed border: a dark line with a light line under it. */
[data-theme="letterpress"] .card::before {
  inset: 18px; border-radius: 0;
  border: 1px solid rgba(80, 55, 30, 0.22);
  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8), inset 1px 1px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="letterpress"] .art-letterpress { display: block; }
.art-letterpress .corner {
  position: absolute; width: 30px; height: 30px;
  background: linear-gradient(135deg, #a47a2c 0%, #f3dc9c 38%, #b8893b 60%, #f6e4ae 82%, #9c722a 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M2 38V14C2 7 7 2 14 2h24M8 38V16c0-4.5 3.5-8 8-8h22M14 30c0-9 7-16 16-16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M2 38V14C2 7 7 2 14 2h24M8 38V16c0-4.5 3.5-8 8-8h22M14 30c0-9 7-16 16-16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.art-letterpress .corner svg { display: none; }
.art-letterpress .tl { top: 24px; left: 24px; }
.art-letterpress .tr { top: 24px; right: 24px; transform: scaleX(-1); }
.art-letterpress .bl { bottom: 24px; left: 24px; transform: scaleY(-1); }
.art-letterpress .br { bottom: 24px; right: 24px; transform: scale(-1); }
[data-theme="letterpress"] .card-head { justify-content: center; font: 700 0.8rem/1 "Bodoni Moda", var(--serif); letter-spacing: 0.24em; font-optical-sizing: none; font-variation-settings: "opsz" 8; color: #5c4418; }

[data-theme="letterpress"] .card { container-type: inline-size; }
@container (max-width: 270px) {
  [data-theme="letterpress"] .card-head { font-size: 0.6rem; letter-spacing: 0.16em; padding: 0 22px; text-align: center; line-height: 1.4; }
  .art-letterpress .corner { width: 22px; height: 22px; }
}
[data-theme="letterpress"] .card-q {
  justify-content: safe center; padding: 18px 8px;
  font-family: "Bodoni Moda", var(--serif); font-weight: 600; line-height: 1.24; letter-spacing: 0;
  /* Bodoni's display cut has hairlines too thin to read at card size; the
     small-size cut (low opsz) has sturdier ones. */
  font-optical-sizing: none; font-variation-settings: "opsz" 11;
  /* Pressed in: light catches the lower lip of each letter. Only the light
     edge; a dark one above blurred the thin strokes. */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="letterpress"] .card-foot { justify-content: center; }

/* ============================================================ RISO ZINE
   Two inks, fluorescent pink and blue, printed slightly out of register on
   grainy paper: a big stamped number, a halftone blob, a heavy grotesk. */
[data-theme="riso"] .card {
  --th-bg: #f3eee2; --th-ink: #1b4f9c; --th-ink-2: #1b4f9c; --th-accent: #1b4f9c;
  --pink: #ff4fa3;
  --q-size: clamp(1.7rem, 6.6vw, 2.35rem);
  padding: 22px 22px 20px;
  border-radius: 6px;
  background: var(--grain), #f3eee2;
  background-size: 140px, auto;
  box-shadow: inset 0 -2px 0 #e2dccd, var(--shadow);
}
[data-theme="riso"] .card::before { display: none; }
[data-theme="riso"] .art-riso { display: block; }
.riso-dots {
  position: absolute; right: -40px; bottom: -40px; width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--pink) 34%, transparent 36%) 0 0 / 9px 9px;
  -webkit-mask: radial-gradient(circle at 60% 60%, #000 38%, transparent 70%);
          mask: radial-gradient(circle at 60% 60%, #000 38%, transparent 70%);
  mix-blend-mode: multiply; opacity: 0.5;
}
.riso-no {
  position: absolute; left: 18px; top: 10px;
  font: 400 4.2rem/1 "Archivo Black", var(--sans); letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 2px var(--th-ink);
  text-shadow: 4px 3px 0 color-mix(in srgb, var(--pink) 70%, transparent);
}
[data-theme="riso"] .card-head { justify-content: flex-end; font: 400 0.72rem/1 "Archivo Black", var(--sans); letter-spacing: 0.1em; }
[data-theme="riso"] .card-no { display: none; }
[data-theme="riso"] .card-deckname { display: block; max-width: 58%; text-align: center; line-height: 1.25; background: var(--th-ink); color: #f3eee2; padding: 5px 8px; transform: rotate(2deg); }

[data-theme="riso"] .card-q {
  align-items: safe flex-end; padding: 84px 0 14px;
  font: 400 var(--q-size)/1.06 "Archivo Black", var(--sans); letter-spacing: -0.015em;
  text-shadow: 2px 1.5px 0 color-mix(in srgb, var(--pink) 60%, transparent);
}
[data-theme="riso"] .card-foot { justify-content: flex-start; }
/* Tight (a very long question): a smaller stamped number, so the text gets its room. */
[data-theme="riso"] .card.is-tight .riso-no { font-size: 2.8rem; }
[data-theme="riso"] .card.is-tight .card-q { padding-top: 52px; }

/* ============================================================ NEON
   A dark glass card with a lit tube around it, faint grid on the glass,
   the deck name buzzing at the top. */
[data-theme="neon"] .card {
  --neon: color-mix(in oklab, var(--deck) 50%, #fff);
  --th-bg: #100d18; --th-ink: #f6f2ff; --th-ink-2: #c7bddb; --th-accent: var(--neon);
  --q-size: clamp(1.3rem, 5vw, 1.65rem);
  padding: 24px 24px 22px;
  border-radius: 20px;
  background: radial-gradient(ellipse 90% 70% at 50% 30%, #1c1628, #100d18 70%);
  box-shadow:
    inset 0 0 0 1.5px var(--neon),
    inset 0 0 16px color-mix(in srgb, var(--neon) 45%, transparent),
    0 0 18px color-mix(in srgb, var(--neon) 55%, transparent),
    0 0 44px color-mix(in srgb, var(--neon) 25%, transparent),
    var(--shadow);
}
[data-theme="neon"] .card::before {
  inset: 10px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--neon) 30%, transparent);
}
[data-theme="neon"] .art-neon { display: block; }
.neon-grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(color-mix(in srgb, var(--neon) 9%, transparent) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, color-mix(in srgb, var(--neon) 9%, transparent) 1px, transparent 1px) 0 0 / 22px 100%;
  -webkit-mask: radial-gradient(ellipse at 50% 100%, #000, transparent 75%);
          mask: radial-gradient(ellipse at 50% 100%, #000, transparent 75%);
}
[data-theme="neon"] .card-head {
  font: 700 0.85rem/1 var(--sans); letter-spacing: 0.22em; color: var(--th-ink);
  text-shadow: 0 0 4px var(--neon), 0 0 12px var(--neon), 0 0 22px var(--neon);
}

[data-theme="neon"] .card-q { font-family: var(--sans); font-weight: 600; line-height: 1.24; letter-spacing: -0.015em; }
@media (prefers-reduced-motion: no-preference) {
  [data-theme="neon"] .card-head { animation: buzz 7s infinite; }
  @keyframes buzz { 0%, 91%, 95%, 100% { opacity: 1; } 92%, 94% { opacity: 0.55; } 93% { opacity: 0.9; } }
}

/* ============================================================ MESSAGE IN A BOTTLE
   A hand-drawn corked bottle with a rolled note inside, pink water, hearts and
   sparkles; the question is written on the note, unrolled underneath. Flat
   pastel with a dark ink outline, like a sticker. The bottle takes the top
   40% of the card at any size; the note fills the rest. */
@font-face { font-family: "Patrick Hand"; src: url("fonts/patrick-hand.woff2") format("woff2"); font-weight: 400; font-display: swap; }
[data-theme="bottle"] .card {
  --th-bg: #fbf5e6; --th-ink: #3b2f2f; --th-ink-2: #6b5454; --th-accent: #a8453e;
  --outline: #3b2f2f;
  --q-size: clamp(1.45rem, 5.6vw, 1.95rem);
  padding: 14px 18px 14px;
  border-radius: 22px;
  background: radial-gradient(circle at 20% 15%, rgba(242, 178, 176, 0.22), transparent 40%), var(--grain), #fbf5e6;
  background-size: auto, 140px, auto;
  box-shadow: inset 0 0 0 2px var(--outline), inset 0 -4px 0 rgba(59, 47, 47, 0.08), var(--shadow);
}
[data-theme="bottle"] .card::before { inset: 7px; border-radius: 16px; border: 1.5px dashed rgba(201, 102, 94, 0.45); }
[data-theme="bottle"] .art-bottle { display: block; }
.bt-art { position: absolute; top: 4%; left: 50%; height: 36%; transform: translateX(-50%); overflow: visible; }
/* The head becomes the bottle's shelf: an empty 40% the note starts below. */
[data-theme="bottle"] .card-head { flex: 0 0 38%; visibility: hidden; }
/* The note: paper between two rolled ends. Everything is drawn inside the
   question box (backgrounds, not overhangs) so fit() still measures it right. */
[data-theme="bottle"] .card-q {
  justify-content: safe center; text-align: center; padding: 22px 20px;
  font: 400 var(--q-size)/1.2 "Patrick Hand", "Comic Sans MS", cursive; letter-spacing: 0.005em;
  background:
    linear-gradient(var(--outline), var(--outline)) 7px 8px / 2px calc(100% - 16px) no-repeat,
    linear-gradient(var(--outline), var(--outline)) calc(100% - 7px) 8px / 2px calc(100% - 16px) no-repeat,
    linear-gradient(#fffaf0, #fffaf0) 8px 8px / calc(100% - 16px) calc(100% - 16px) no-repeat;
}
[data-theme="bottle"] .card-q::before, [data-theme="bottle"] .card-q::after {
  content: ""; position: absolute; left: 0; right: 0; height: 16px;
  border: 2px solid var(--outline); border-radius: 9px;
  background: linear-gradient(180deg, #fdf3dc, #f1e1bd);
}
[data-theme="bottle"] .card-q::before { top: 0; }
[data-theme="bottle"] .card-q::after { bottom: 0; }
[data-theme="bottle"] .card-foot { justify-content: center; padding-top: 8px; }
.stage[data-theme="bottle"] .pile, .stage[data-theme="bottle"] .pile::before {
  border-radius: 22px; background: #f3e3c4; box-shadow: inset 0 0 0 2px #3b2f2f, var(--shadow-sm);
}
.swatch[data-theme="bottle"] { background: radial-gradient(circle at 50% 70%, #eeaaa8 34%, transparent 36%), #fbf5e6; box-shadow: inset 0 0 0 1.5px #3b2f2f; }

/* ============================================================ PARCHMENT
   Aged paper with burnt, torn edges and old stains, woodcut vines above and
   below, and the question opening on a framed initial, like an illuminated
   manuscript. (Tried blackletter first: its T reads as a sigma, so the
   initial is a classical capital instead.) */
[data-theme="parchment"] .card {
  --th-bg: #e6d2a4; --th-ink: #2b1b0e; --th-ink-2: #4a3220; --th-accent: #4f3218;
  --q-size: clamp(1.35rem, 5vw, 1.7rem);
  padding: 30px 30px 24px;
  border-radius: 2px;
  background:
    var(--grain),
    radial-gradient(ellipse 75% 65% at 50% 45%, #f2e4bf 0%, #e6d0a0 50%, #cfae74 80%, #9a723f 100%);
  background-size: 140px, auto;
  box-shadow: inset 0 0 36px rgba(90, 55, 20, 0.5), inset 0 0 6px rgba(60, 35, 10, 0.65);
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZmlsdGVyIGlkPSJkIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii41NSIgbnVtT2N0YXZlcz0iMyIgc2VlZD0iMTEiLz48ZmVEaXNwbGFjZW1lbnRNYXAgaW49IlNvdXJjZUdyYXBoaWMiIHNjYWxlPSIzLjIiLz48L2ZpbHRlcj48cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iOTYiIGhlaWdodD0iMTM2IiBmaWx0ZXI9InVybCgjZCkiLz48L3N2Zz4=") center / 100% 100%;
          mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZmlsdGVyIGlkPSJkIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii41NSIgbnVtT2N0YXZlcz0iMyIgc2VlZD0iMTEiLz48ZmVEaXNwbGFjZW1lbnRNYXAgaW49IlNvdXJjZUdyYXBoaWMiIHNjYWxlPSIzLjIiLz48L2ZpbHRlcj48cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iOTYiIGhlaWdodD0iMTM2IiBmaWx0ZXI9InVybCgjZCkiLz48L3N2Zz4=") center / 100% 100%;
}
.stage[data-theme="parchment"], .fan-slot[data-theme="parchment"], .style-demo[data-theme="parchment"] > .card,
.share-frame[data-theme="parchment"] .card { filter: drop-shadow(0 10px 16px rgba(30, 15, 5, 0.45)); }
[data-theme="parchment"] .card::before { display: none; }
[data-theme="parchment"] .art-parchment { display: block; }
.pm-stain {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 78% 22%, rgba(120, 80, 30, 0.16) 0 9%, transparent 16%),
    radial-gradient(ellipse 18% 10% at 22% 78%, rgba(110, 70, 25, 0.14), transparent 70%),
    radial-gradient(circle at 12% 30%, rgba(140, 95, 40, 0.1) 0 5%, transparent 10%),
    radial-gradient(circle at 64% 88%, rgba(90, 55, 20, 0.12) 0 4%, transparent 9%);
}
.pm-vine { position: absolute; left: 50%; width: 62%; transform: translateX(-50%); color: #4a2f18; line-height: 0; }
.pm-vine.top { top: 16px; }
.pm-vine.bottom { bottom: 44px; transform: translateX(-50%) scaleY(-1); }
.pm-vine svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.pm-vine .fill { fill: currentColor; stroke: none; }
[data-theme="parchment"] .card-head { display: none; }
[data-theme="parchment"] .card-q {
  display: block; align-content: safe center; padding: 34px 4px 52px;
  font: 600 var(--q-size)/1.22 "Cormorant Garamond", var(--serif); letter-spacing: 0;
}
[data-theme="parchment"] .q-initial {
  display: block; float: left; font: 700 2.3em/1 "Cinzel", var(--serif); color: #5a1f12;
  padding: 0.14em 0.2em 0.06em; margin: 0.08em 0.16em 0 0;
  border: 3px double rgba(90, 31, 18, 0.75);
  background: radial-gradient(circle at 50% 40%, #f8eccb, #e4c893);
}
[data-theme="parchment"] .card-foot { justify-content: center; }
.stage[data-theme="parchment"] .pile, .stage[data-theme="parchment"] .pile::before {
  border-radius: 2px; background: radial-gradient(ellipse at 50% 45%, #e2c996, #a47a45); box-shadow: none;
}
.swatch[data-theme="parchment"] { background: radial-gradient(ellipse at 50% 45%, #f0e0b8, #b98c52); box-shadow: inset 0 0 4px rgba(60, 35, 10, 0.7); }

/* ============================================================ DEPTH SYMBOLS
   Depth is shown as each style's own symbol instead of a word: one for
   light, two for closer, three for deep, or (tarot, polaroid) one symbol that
   changes. The same symbols sit beside Light / Closer / Deep in the mode
   switch, so the key is always on screen. The word stays for screen readers. */
.lvl { display: inline-flex; align-items: center; gap: 3px; flex: none; line-height: 0; --sym: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 1c1 7 4 10 11 11-7 1-10 4-11 11-1-7-4-10-11-11 7-1 10-4 11-11z%22/%3E%3C/svg%3E"); }
.lvl i { width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--sym) center / contain no-repeat; mask: var(--sym) center / contain no-repeat; }
.lvl[data-level="light"] i:nth-child(n + 2), .lvl[data-level="closer"] i:nth-child(3), .lvl[data-level="end"] { display: none; }
:is([data-theme="tarot"], [data-sym="tarot"]) .lvl i + i, :is([data-theme="polaroid"], [data-sym="polaroid"]) .lvl i + i { display: none; }

:is([data-theme="table"], [data-sym="table"]) .lvl { --sym: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 1c1 7 4 10 11 11-7 1-10 4-11 11-1-7-4-10-11-11 7-1 10-4 11-11z%22/%3E%3C/svg%3E"); }
:is([data-theme="riso"], [data-sym="riso"]) .lvl { --sym: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3l-6.1 3.3 1.4-6.8L2.2 9.1l6.9-.8z%22/%3E%3C/svg%3E"); }
:is([data-theme="neon"], [data-sym="neon"]) .lvl, :is([data-theme="bottle"], [data-sym="bottle"]) .lvl { --sym: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 21s-7.5-4.6-9.6-9.3C.9 8.3 3 4.5 6.6 4.5c2.2 0 3.6 1.2 5.4 3.2 1.8-2 3.2-3.2 5.4-3.2 3.6 0 5.7 3.8 4.2 7.2C19.5 16.4 12 21 12 21z%22/%3E%3C/svg%3E"); }
:is([data-theme="letterpress"], [data-sym="letterpress"]) .lvl { --sym: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 2l8 10-8 10-8-10z%22/%3E%3C/svg%3E"); }
:is([data-theme="parchment"], [data-sym="parchment"]) .lvl { --sym: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 1.5C5.5 6.5 4.5 14 11 21.5V23h2v-1.5C19.5 14 18.5 6.5 12 1.5z%22/%3E%3C/svg%3E"); }
:is([data-theme="parchment"], [data-sym="parchment"]) .lvl i { transform: rotate(-24deg); }
:is([data-theme="boarding"], [data-sym="boarding"]) .lvl { --sym: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z%22/%3E%3C/svg%3E"); }
:is([data-theme="tarot"], [data-sym="tarot"]) .lvl[data-level="light"] { --sym: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M12 1.5a10.5 10.5 0 1 1 0 21 10.5 10.5 0 0 1 0-21zm0 2a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17z%22/%3E%3Cpath d=%22M12 3.5a8.5 8.5 0 0 0 0 17 11 11 0 0 1 0-17z%22/%3E%3C/svg%3E"); }
:is([data-theme="tarot"], [data-sym="tarot"]) .lvl[data-level="closer"] { --sym: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M12 1.5a10.5 10.5 0 1 1 0 21 10.5 10.5 0 0 1 0-21zm0 2a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17z%22/%3E%3Cpath d=%22M12 3.5a8.5 8.5 0 0 0 0 17z%22/%3E%3C/svg%3E"); }
:is([data-theme="tarot"], [data-sym="tarot"]) .lvl[data-level="deep"] { --sym: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210.5%22/%3E%3C/svg%3E"); }
:is([data-theme="polaroid"], [data-sym="polaroid"]) .lvl[data-level="light"] { --sym: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224.8%22/%3E%3Crect x=%2211.1%22 y=%221%22 width=%221.8%22 height=%224.6%22 rx=%22.9%22 transform=%22rotate%280 12 12%29%22/%3E%3Crect x=%2211.1%22 y=%221%22 width=%221.8%22 height=%224.6%22 rx=%22.9%22 transform=%22rotate%2845 12 12%29%22/%3E%3Crect x=%2211.1%22 y=%221%22 width=%221.8%22 height=%224.6%22 rx=%22.9%22 transform=%22rotate%2890 12 12%29%22/%3E%3Crect x=%2211.1%22 y=%221%22 width=%221.8%22 height=%224.6%22 rx=%22.9%22 transform=%22rotate%28135 12 12%29%22/%3E%3Crect x=%2211.1%22 y=%221%22 width=%221.8%22 height=%224.6%22 rx=%22.9%22 transform=%22rotate%28180 12 12%29%22/%3E%3Crect x=%2211.1%22 y=%221%22 width=%221.8%22 height=%224.6%22 rx=%22.9%22 transform=%22rotate%28225 12 12%29%22/%3E%3Crect x=%2211.1%22 y=%221%22 width=%221.8%22 height=%224.6%22 rx=%22.9%22 transform=%22rotate%28270 12 12%29%22/%3E%3Crect x=%2211.1%22 y=%221%22 width=%221.8%22 height=%224.6%22 rx=%22.9%22 transform=%22rotate%28315 12 12%29%22/%3E%3C/svg%3E"); }
:is([data-theme="polaroid"], [data-sym="polaroid"]) .lvl[data-level="closer"] { --sym: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M5.5 16a6.5 6.5 0 0 1 13 0z%22/%3E%3Crect x=%221.5%22 y=%2217.5%22 width=%2221%22 height=%222%22 rx=%221%22/%3E%3Crect x=%2211.1%22 y=%223%22 width=%221.8%22 height=%224%22 rx=%22.9%22 transform=%22rotate%28-60 12 16%29%22/%3E%3Crect x=%2211.1%22 y=%223%22 width=%221.8%22 height=%224%22 rx=%22.9%22 transform=%22rotate%28-30 12 16%29%22/%3E%3Crect x=%2211.1%22 y=%223%22 width=%221.8%22 height=%224%22 rx=%22.9%22 transform=%22rotate%280 12 16%29%22/%3E%3Crect x=%2211.1%22 y=%223%22 width=%221.8%22 height=%224%22 rx=%22.9%22 transform=%22rotate%2830 12 16%29%22/%3E%3Crect x=%2211.1%22 y=%223%22 width=%221.8%22 height=%224%22 rx=%22.9%22 transform=%22rotate%2860 12 16%29%22/%3E%3C/svg%3E"); }
:is([data-theme="polaroid"], [data-sym="polaroid"]) .lvl[data-level="deep"] { --sym: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M15.5 3.2A9 9 0 1 0 20.8 16 7.2 7.2 0 0 1 15.5 3.2z%22/%3E%3Cpath d=%22M19 2.5l.8 1.9 1.9.8-1.9.8-.8 1.9-.8-1.9-1.9-.8 1.9-.8z%22/%3E%3C/svg%3E"); }

/* In the mode switch and the list headings the symbols take the text colour. */
.modes .lvl { font-size: 11px; margin-right: 6px; }
.level h3 .lvl { font-size: 15px; color: var(--deck); }

/* ---- on the card: the word is for screen readers; each style places its symbols */
.card .card-level { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; box-shadow: none; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.card .lvl { font-size: 14px; color: var(--th-accent); }
[data-theme="table"] .card .lvl { font-size: 15px; }
/* Tarot keeps its title ("The Deep"); the moon above it waxes with depth. */
[data-theme="tarot"] .card .card-level { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
[data-theme="tarot"] .card-foot::before { display: none; }
[data-theme="tarot"] .card .lvl { font-size: 18px; color: var(--gold); gap: 10px; }
[data-theme="tarot"] .card .lvl::before, [data-theme="tarot"] .card .lvl::after { content: ""; width: 38px; height: 1px; background: var(--gold); }
/* Boarding pass: the stub already prints the class. */
[data-theme="boarding"] .card .lvl { display: none; }
/* The plane flies along the route, not up the page (upright it reads as a +). */
:is([data-theme="boarding"], [data-sym="boarding"]) .lvl i { transform: rotate(90deg); }
/* Polaroid: a round sticker on the photo's corner: sun, sunset, then night. */
[data-theme="polaroid"] .card .lvl {
  position: absolute; z-index: 3; top: calc(5.5% + 10px); right: calc(7% + 10px);
  width: 34px; height: 34px; justify-content: center; border-radius: 50%;
  font-size: 20px; background: #fffaf0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 0 0 1.5px rgba(0, 0, 0, 0.06);
  transform: rotate(8deg);
}
[data-theme="polaroid"] .card .lvl[data-level="light"] { color: #d9771f; }
[data-theme="polaroid"] .card .lvl[data-level="closer"] { color: #c0503a; }
[data-theme="polaroid"] .card .lvl[data-level="deep"] { color: #34406e; }
[data-theme="polaroid"] .card .lvl[data-level="end"] { display: none; }
[data-theme="polaroid"] .card-foot { display: flex; position: static; }
[data-theme="letterpress"] .card .lvl {
  font-size: 11px; gap: 5px; color: #8a6420;
}
[data-theme="letterpress"] .card .lvl::before, [data-theme="letterpress"] .card .lvl::after { content: ""; width: 22px; height: 1px; background: rgba(122, 92, 36, 0.55); margin: 0 6px; }
[data-theme="riso"] .card .lvl {
  font-size: 15px; gap: 4px; color: #1b4f9c; padding: 6px 9px;
  background: color-mix(in srgb, var(--pink) 30%, #f3eee2); transform: rotate(-3deg);
}
[data-theme="neon"] .card .lvl {
  font-size: 13px; gap: 5px; color: var(--neon); padding: 7px 12px; border-radius: 999px;
  filter: drop-shadow(0 0 3px var(--neon));
  box-shadow: 0 0 0 1.5px var(--neon), 0 0 10px color-mix(in srgb, var(--neon) 60%, transparent), inset 0 0 8px color-mix(in srgb, var(--neon) 40%, transparent);
}
[data-theme="bottle"] .card .lvl { font-size: 16px; gap: 4px; color: #c9665e; }
[data-theme="parchment"] .card .lvl { font-size: 15px; gap: 4px; color: #5a3a1c; }

/* ============================================================ PILES (card backs per theme) */
.stage[data-theme="tarot"] .pile, .stage[data-theme="tarot"] .pile::before {
  background: radial-gradient(circle at 50% 50%, transparent 20%, rgba(214, 180, 106, 0.18) 21%, transparent 23%) 0 0 / 26px 26px, #151b44;
  box-shadow: inset 0 0 0 7px #10153a, inset 0 0 0 8px rgba(214, 180, 106, 0.6), var(--shadow-sm);
}
.stage[data-theme="boarding"] .pile, .stage[data-theme="boarding"] .pile::before {
  border-radius: 14px; background: linear-gradient(var(--deck) 0 40px, #f4f2ec 40px); box-shadow: none;
}
.stage[data-theme="polaroid"] .pile, .stage[data-theme="polaroid"] .pile::before {
  border-radius: 3px; background: linear-gradient(180deg, #fbfaf5, #efebe2); box-shadow: var(--shadow-sm);
}
.stage[data-theme="letterpress"] .pile, .stage[data-theme="letterpress"] .pile::before {
  border-radius: 2px; background: #ece3d2; box-shadow: none;
}
.stage[data-theme="riso"] .pile, .stage[data-theme="riso"] .pile::before {
  border-radius: 6px; background: radial-gradient(circle, rgba(27, 79, 156, 0.25) 30%, transparent 32%) 0 0 / 8px 8px, #ff8cc2; box-shadow: var(--shadow-sm);
}
.stage[data-theme="neon"] .pile, .stage[data-theme="neon"] .pile::before {
  border-radius: 20px; background: #0d0a14;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--deck) 50%, #fff), 0 0 12px color-mix(in oklab, var(--deck) 35%, transparent);
}

/* ============================================================ STYLE PICKER + SHOWCASE */
.styles-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 22px; max-width: 420px; }
.styles-pick button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px 0 6px;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: 600 0.8125rem/1 var(--sans); color: var(--ink-2);
  box-shadow: inset 0 0 0 1.5px var(--rule);
}
.styles-pick button:hover { color: var(--ink); }
.styles-pick button[aria-checked="true"] { color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.swatch { width: 18px; height: 24px; border-radius: 3px; flex: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.swatch[data-theme="table"] { background: linear-gradient(#faf5ec, #efe6d6); box-shadow: inset 0 0 0 2px #faf5ec, inset 0 0 0 3px #c4462c; }
.swatch[data-theme="tarot"] { background: #161d47; box-shadow: inset 0 0 0 2px #161d47, inset 0 0 0 3px #d6b46a; }
.swatch[data-theme="boarding"] { background: linear-gradient(#3a5da8 0 30%, #fbfaf6 30% 72%, #eceae3 72%); }
.swatch[data-theme="polaroid"] { background: linear-gradient(#fdfcf8, #fdfcf8) padding-box, #fdfcf8; box-shadow: inset 2px 2px 0 #fdfcf8, inset -2px -7px 0 #fdfcf8, inset 0 0 0 20px #f0d9c4; }
.swatch[data-theme="letterpress"] { background: #f2eadb; box-shadow: inset 0 0 0 3px #f2eadb, inset 0 0 0 4px #b8893b; }
.swatch[data-theme="riso"] { background: radial-gradient(circle, #ff4fa3 35%, transparent 38%) 0 0 / 5px 5px, #f3eee2; box-shadow: inset 0 0 0 1.5px #1b4f9c; }
.swatch[data-theme="neon"] { background: #100d18; box-shadow: inset 0 0 0 1.5px #ff7ab8, 0 0 6px #ff7ab8; }

.style-row {
  display: flex; gap: 22px; margin: 28px calc(-1 * var(--gutter)) 0; padding: 12px var(--gutter) 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.style-demo { flex: 0 0 220px; margin: 0; scroll-snap-align: start; }
/* Wide screens: a 4 + 3 grid instead of a sideways scroller. */
@media (min-width: 900px) {
  .style-row { display: grid; grid-template-columns: repeat(3, minmax(0, 250px)); justify-content: center; gap: 36px 28px; margin: 32px 0 0; padding: 0; overflow: visible; }
}
.style-demo .card { --q-size: 1.12rem; padding-left: 18px; padding-right: 18px; }
.style-demo figcaption { margin-top: 14px; text-align: center; font-weight: 600; font-size: 0.9375rem; color: var(--ink-2); }

/* ============================================================ SHARE IMAGE
   Rendered off-screen and turned into a 1080x1350 PNG: the card on the
   evening table, with the address underneath. */
.share-frame {
  position: fixed; left: -10000px; top: 0; z-index: -1;
  width: 540px; height: 675px; padding: 46px 0 0;
  display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(ellipse 90% 60% at 50% -10%, rgba(255, 196, 128, 0.16), transparent 70%), #1c1713;
  font-family: var(--sans);
}
.share-frame .card { width: 380px; flex: none; transform: none; }
.share-frame[data-theme="boarding"] .card, .share-frame[data-theme="letterpress"] .card { filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.45)); }
.share-mark { margin: auto 0 26px; font-weight: 600; font-size: 15px; letter-spacing: 0.02em; color: #c3b5a4; }