/* carnival-deck.css — shared deck engine styling.
   Tokens mirror 04-website/carnival-midway/index.html. */
:root {
  --ink-violet:#190a28; --ink-edge:#14101f; --tent:#221335; --tent-hi:#2a1a40;
  --cream:#f6efdd; --cream-soft:#d9cfc0; --lavender-dim:#b9aecb;
  --gold:#e8c75a; --gold-flare:#f0d68a; --crimson:#c0392b; --crimson-text:#ef7a68;
  --violet:#8b7fb8; --violet-text:#a99dd6; --teal:#2a9d8f; --teal-text:#4fc8b8;
  --copper:#c9803e; --copper-text:#e0a468;
  --hairline:rgba(246,239,221,.14);
  --serif:"Playfair Display",Georgia,serif; --body:"Iowan Old Style",Palatino,Georgia,serif;
  --mono:"JetBrains Mono",Consolas,monospace; --carnival:"Rye","Playfair Display",serif;
  --ease:cubic-bezier(.33,.12,.25,1);
  --accent:var(--gold); --accent-text:var(--gold-flare);  /* overridden per booth */
}
* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:112.5%; scroll-behavior:smooth; }
body { font-family:var(--body); color:var(--cream); background:var(--ink-violet); line-height:1.65; overflow-x:hidden; }
a { color:inherit; }
a:focus-visible, button:focus-visible { outline:3px solid var(--gold); outline-offset:3px; border-radius:3px; }

.skip-link { position:absolute; left:50%; top:-4rem; transform:translateX(-50%); z-index:60;
  padding:.6rem 1.4rem; font-family:var(--mono); font-size:.85rem; letter-spacing:.08em;
  color:var(--ink-violet); background:var(--gold); border-radius:0 0 .6rem .6rem; text-decoration:none; transition:top .25s var(--ease); }
.skip-link:focus-visible { top:0; }

.booth-masthead { text-align:center; max-width:46rem; margin:0 auto; padding:clamp(2.4rem,6vh,3.8rem) 1.2rem clamp(1.2rem,3vh,2rem); }
.booth-kicker { font-family:var(--mono); font-size:.74rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--accent-text); margin-bottom:.8rem; }
.booth-masthead h1 { font-family:var(--carnival); font-weight:400; font-size:clamp(2.4rem,6vw,3.8rem); color:var(--accent); line-height:1.05; text-shadow:0 0 26px rgba(232,199,90,.3), 2px 2px 0 rgba(192,57,43,.5); }
.booth-subtitle { font-family:var(--serif); font-style:italic; font-size:clamp(1rem,1.6vw,1.2rem); color:var(--cream-soft); margin-top:.7rem; }

.deck-stage { max-width:40rem; margin:0 auto; padding:0 1.2rem clamp(2.5rem,6vh,4rem); text-align:center; }
.deck-invitation { font-family:var(--serif); font-style:italic; color:var(--cream-soft); margin:0 auto 1.6rem; max-width:32rem; }

/* the face-down deck button */
.deck-back { display:inline-flex; flex-direction:column; align-items:center; gap:.8rem; cursor:pointer;
  width:min(70vw,16rem); aspect-ratio:2/3; border:2px solid var(--accent); border-radius:14px;
  background:linear-gradient(165deg,var(--tent-hi),var(--tent)); color:var(--cream);
  font-family:var(--carnival); justify-content:center; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.deck-back:hover { transform:translateY(-4px); box-shadow:0 0 0 1px var(--accent), 0 0 34px color-mix(in srgb, var(--accent) 32%, transparent), 0 16px 40px rgba(20,16,31,.6); }
.deck-back-art { width:60%; aspect-ratio:1; border:1px solid var(--hairline); border-radius:50%; background:radial-gradient(circle at 50% 40%, color-mix(in srgb,var(--accent) 40%, transparent), transparent 70%); }
.deck-back-label { font-size:1.1rem; letter-spacing:.04em; color:var(--accent-text); }

/* result card */
.deck-result { margin-top:2rem; }
.deck-result:empty { margin:0; }
.card { display:inline-flex; flex-direction:column; align-items:center; gap:.7rem; max-width:24rem; text-align:center;
  background:var(--tent); border:1px solid var(--hairline); border-top:4px solid var(--accent); border-radius:14px;
  padding:1.4rem 1.4rem 1.6rem; outline:none; }
.card-frame { width:100%; border-radius:10px; overflow:hidden; }
.card-art { width:100%; height:auto; display:block; border-radius:10px; }
.card--reversed .card-art { transform:rotate(180deg); }
.card-name { font-family:var(--carnival); font-weight:400; font-size:1.5rem; color:var(--accent); line-height:1.15; }
.card-subtitle { display:block; font-family:var(--serif); font-style:italic; font-size:.95rem; color:var(--cream-soft); margin-top:.2rem; }
.card-persona { font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text); }
.card-orientation { font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--lavender-dim); }
.card-keywords { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; }
.card-keywords li { font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; padding:.25rem .6rem; border:1px solid var(--hairline); border-radius:999px; color:var(--cream-soft); }
.card-meaning { font-size:1.02rem; line-height:1.6; color:var(--cream); }
.card-extra { border-top:1px solid var(--hairline); padding-top:.8rem; margin-top:.3rem; }
.card-extra h3 { font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-text); margin-bottom:.3rem; }
.card-extra p { font-family:var(--serif); font-style:italic; color:var(--cream-soft); }
.deck-again { margin-top:.6rem; font-family:var(--mono); font-size:.82rem; font-weight:600; color:var(--ink-violet); background:var(--accent); border:none; border-radius:999px; padding:.55rem 1.4rem; cursor:pointer; transition:transform .2s var(--ease); }
.deck-again:hover { transform:translateY(-2px); }

/* no-JS fallback list */
.deck-fallback { list-style:none; max-width:34rem; margin:1.5rem auto 0; text-align:left; }
.deck-fallback[hidden] { display:none; }
.deck-fallback li { border-bottom:1px solid var(--hairline); padding:1.1rem 0; }
.deck-fallback h3 { font-family:var(--carnival); font-weight:400; font-size:1.25rem; color:var(--accent); }
.deck-fallback .fb-persona { font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text); }
.deck-fallback .fb-keywords { font-family:var(--mono); font-size:.72rem; color:var(--cream-soft); margin:.2rem 0 .5rem; }
.deck-fallback p { font-size:.95rem; color:var(--cream-soft); margin-top:.3rem; }

.booth-wander { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; max-width:44rem; margin:0 auto clamp(2rem,5vh,3rem); padding:0 1.2rem; }
.booth-wander a { font-family:var(--mono); font-size:.8rem; font-weight:600; color:var(--accent-text); background:rgba(34,19,53,.7); border:1px solid color-mix(in srgb,var(--accent) 35%, transparent); border-radius:999px; padding:.5rem 1.2rem; text-decoration:none; transition:transform .2s var(--ease); }
.booth-wander a:hover { transform:translateY(-2px); }

footer { text-align:center; border-top:1px solid var(--hairline); padding:2rem 1.2rem 2.6rem; }
.footer-nav { font-family:var(--mono); font-size:.8rem; letter-spacing:.12em; color:var(--lavender-dim); }
.footer-nav a { color:var(--accent-text); text-decoration:none; }
.footer-nav a:hover { color:var(--cream); }
.motto { margin-top:.7rem; font-family:var(--serif); font-style:italic; font-size:.95rem; color:var(--lavender-dim); }

@media (prefers-reduced-motion:no-preference) {
  .flip-in { animation:flip-in .5s var(--ease) both; }
  @keyframes flip-in { from { opacity:0; transform:rotateY(90deg) translateY(10px); } to { opacity:1; transform:none; } }
  .card--reversed.flip-in { animation:flip-in-rev .5s var(--ease) both; }
  @keyframes flip-in-rev { from { opacity:0; transform:rotateY(90deg); } to { opacity:1; transform:none; } }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } html { scroll-behavior:auto; } }

@media (max-width:700px) {
  .deck-stage { padding-left:1rem; padding-right:1rem; }
  .deck-back { width:min(80vw,14rem); }
  .card { max-width:100%; }
  .booth-masthead h1 { font-size:clamp(2.1rem,8vw,3rem); }
}

/* ── per-booth skins ───────────────────────────────────────── */
body[data-booth="tarot"]    { --accent:var(--gold);   --accent-text:var(--gold-flare); }
body[data-booth="whatif"]   { --accent:var(--violet); --accent-text:var(--violet-text); }
body[data-booth="mixtapes"] { --accent:var(--crimson);--accent-text:var(--crimson-text); }
body[data-booth="whammy"]   { --accent:var(--teal);   --accent-text:var(--teal-text); }
body[data-booth="tickets"]  { --accent:var(--copper); --accent-text:var(--copper-text); }

/* whammy runs hot — a faint flashing crank glow on the deck back */
@media (prefers-reduced-motion:no-preference) {
  body[data-booth="whammy"] .deck-back-art { animation:whammy-pulse 1.8s ease-in-out infinite; }
  @keyframes whammy-pulse { 0%,100% { opacity:.6; } 50% { opacity:1; } }
}

/* ── the ticket booth (the price gate) ─────────────────────────
   The booth window: clouded glass instead of a card back. */
body[data-booth="tickets"] .deck-back-art {
  border-radius:12px; width:70%; aspect-ratio:4/3;
  background:
    linear-gradient(115deg, transparent 38%, rgba(246,239,221,.10) 46%, rgba(246,239,221,.05) 54%, transparent 62%),
    radial-gradient(circle at 50% 42%, color-mix(in srgb,var(--accent) 34%, transparent), transparent 72%);
}

/* the ticket itself — CSS art, no image assets */
.ticket-scene { perspective:1200px; display:flex; justify-content:center; }
.ticket { position:relative; width:min(92vw,28rem); aspect-ratio:15/7; border:none; background:none;
  padding:0; cursor:pointer; font:inherit; color:inherit; }
.ticket-inner { position:absolute; inset:0; display:block; transform-style:preserve-3d;
  transition:transform .6s var(--ease); }
.ticket.is-flipped .ticket-inner { transform:rotateY(180deg); }
.ticket-face { position:absolute; inset:0; display:flex; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:10px; overflow:hidden; }
.ticket-front { background:var(--cream); color:var(--ink-violet); border:2px solid var(--accent);
  box-shadow:0 14px 34px rgba(20,16,31,.55), 0 0 24px color-mix(in srgb,var(--accent) 22%, transparent); }
.ticket-stub { flex:0 0 22%; display:flex; align-items:center; justify-content:center;
  border-right:2px dashed color-mix(in srgb,var(--ink-violet) 45%, transparent);
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, var(--cream)); }
.ticket-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.25rem; padding:.8rem 1rem; text-align:center; }
.ticket-house { font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:color-mix(in srgb,var(--ink-violet) 70%, var(--cream)); }
.ticket-name { font-family:var(--carnival); font-size:clamp(1.1rem,4.4vw,1.5rem); line-height:1.1; color:var(--ink-violet); }
.ticket-design { font-family:var(--serif); font-style:italic; font-size:.85rem; color:color-mix(in srgb,var(--ink-violet) 78%, var(--cream)); }
.ticket-serial { font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb,var(--ink-violet) 60%, var(--cream)); margin-top:.2rem; }
.ticket-hint { font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-top:.15rem; }
.ticket-back { transform:rotateY(180deg); flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; padding:1rem 1.4rem; text-align:center;
  background:linear-gradient(165deg,var(--tent-hi),var(--tent)); color:var(--cream);
  border:2px solid var(--accent); box-shadow:0 14px 34px rgba(20,16,31,.55); }
.ticket-back-label { font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-text); }
.ticket-message { font-family:var(--serif); font-style:italic; font-size:clamp(.92rem,3.4vw,1.12rem); line-height:1.5; color:var(--cream); }
.ticket-access { font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--lavender-dim); }
.ticket-meaning { margin-top:1.2rem; font-size:1.02rem; line-height:1.6; color:var(--cream); max-width:26rem; margin-left:auto; margin-right:auto; }
.ticket-keep { margin-top:.6rem; font-family:var(--serif); font-style:italic; font-size:.92rem; color:var(--cream-soft); }
.ticket-keep + .deck-again { margin-top:.9rem; }

/* ten designs, ten small marks */
.ticket[data-ticket="frayed"] .ticket-front { clip-path:polygon(0 4%,3% 0,97% 2%,100% 6%,99% 50%,100% 95%,96% 100%,4% 98%,0 94%,1% 48%); }
.ticket[data-ticket="glossy"] .ticket-front { background:linear-gradient(115deg,var(--cream) 30%, #eef0f4 45%, var(--cream) 60%); }
.ticket[data-ticket="glossy"] .ticket-name { color:#5a6273; }
.ticket[data-ticket="burning"] .ticket-front { box-shadow:inset 0 0 26px rgba(192,57,43,.35), 0 0 30px rgba(201,128,62,.45), 0 14px 34px rgba(20,16,31,.55); }
.ticket[data-ticket="hollow"] .ticket-body { background:radial-gradient(circle at 50% 46%, var(--ink-violet) 0 1.1rem, color-mix(in srgb,var(--ink-violet) 55%, transparent) 1.15rem, transparent 1.45rem); }
.ticket[data-ticket="bleeding"] .ticket-front { background:
  linear-gradient(180deg, rgba(192,57,43,.55), transparent 34%) 32% 0/.35rem 100% no-repeat,
  linear-gradient(180deg, rgba(192,57,43,.4), transparent 58%) 61% 0/.25rem 100% no-repeat,
  linear-gradient(180deg, rgba(192,57,43,.45), transparent 44%) 82% 0/.3rem 100% no-repeat,
  var(--cream); }
.ticket[data-ticket="vanishing"] .ticket-front { opacity:.62; }
.ticket[data-ticket="vanishing"]:hover .ticket-front, .ticket[data-ticket="vanishing"]:focus-visible .ticket-front { opacity:1; transition:opacity .4s var(--ease); }
.ticket[data-ticket="mirror"] .ticket-front { background:linear-gradient(135deg,#cfd4e2 0%, #f4f5f8 42%, #b9bfd1 58%, #e6e8ef 100%); }
.ticket[data-ticket="braided"] .ticket-front { outline:2px dashed color-mix(in srgb,var(--accent) 65%, transparent); outline-offset:-7px; }
.ticket[data-ticket="soft"] .ticket-front { background:linear-gradient(165deg,#3a2454,#2a1a40); color:var(--cream); border-color:var(--violet); }
.ticket[data-ticket="soft"] .ticket-name { color:var(--cream); }
.ticket[data-ticket="soft"] .ticket-house, .ticket[data-ticket="soft"] .ticket-design, .ticket[data-ticket="soft"] .ticket-serial { color:var(--lavender-dim); }
.ticket[data-ticket="soft"] .ticket-stub { background:rgba(139,127,184,.16); border-right-color:rgba(246,239,221,.4); color:var(--violet-text); }
.ticket[data-ticket="unmarked"] .ticket-name, .ticket[data-ticket="unmarked"] .ticket-design { opacity:.32; }
.ticket[data-ticket="unmarked"] .ticket-back { box-shadow:inset 0 0 34px rgba(169,157,214,.28), 0 14px 34px rgba(20,16,31,.55); }
.ticket[data-ticket="unmarked"] .ticket-message { color:var(--violet-text); text-shadow:0 0 14px rgba(169,157,214,.5); }