/* Lorewheel — per-game worlds.
   #app carries data-look="<game id>" and the look's palette as --g-* (set by shell.js)
   whenever a game is on screen: its detail page, its play screens, its results.
   Layer 1 re-scopes the shell's own tokens so every engine screen adopts the palette
   and the game's typeface. Layer 2 turns .card into the game's physical object and
   gives it its entrance. Layer 3 is the cover-title treatments. */

/* ---------- layer 1: the stage ---------- */
.main[data-look]{--text:var(--g-stage-ink);--muted:var(--g-stage-muted);--faint:var(--g-stage-muted);--line:var(--g-line);
  --panel:var(--g-surface);--panel-2:color-mix(in srgb,var(--g-surface) 90%,var(--g-ink));--panel-3:color-mix(in srgb,var(--g-surface) 80%,var(--g-ink));
  --grad:linear-gradient(var(--g-accent),var(--g-accent));--pink:var(--g-accent);--orange:var(--g-accent);
  background:var(--g-stage);color:var(--text);transition:background .5s}
.main[data-look] .panel,.main[data-look] .card,.main[data-look] .award,.main[data-look] .stats div{--text:var(--g-ink);--muted:var(--g-muted);color:var(--g-ink)}
.main[data-look] h1,.main[data-look] h2,.main[data-look] .card .ans,.main[data-look] .curtain .name,.main[data-look] .reveal,.main[data-look] .d-side .big,.main[data-look] .award .v,.main[data-look] .board .s{
  font-family:var(--g-display),var(--font);font-weight:var(--g-dw);font-style:var(--g-ds);letter-spacing:0}
.main[data-look] .eyebrow,.main[data-look] .reveal em,.main[data-look] .curtain .name,.main[data-look] .d-side .big,.main[data-look] .stats b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--g-accent);-webkit-text-fill-color:var(--g-accent)}
.main[data-look] .panel .eyebrow{color:var(--g-accent)}
.main[data-look] .btn,.main[data-look] .buy-btn,.main[data-look] .yn button[aria-pressed=true],.main[data-look] .dial button[aria-pressed=true]{background:var(--g-accent);color:var(--g-accent-ink);box-shadow:none}
.main[data-look] .btn.ghost{background:var(--panel-2);color:var(--g-ink)}
.main[data-look] .who button,.main[data-look] .opt button,.main[data-look] .dial button,.main[data-look] .yn button,.main[data-look] .seal button{color:var(--g-ink)}
.main[data-look] .who button[aria-pressed=true],.main[data-look] .opt button[aria-pressed=true],.main[data-look] .seal button[aria-pressed=true]{background:var(--panel-2);border-color:var(--g-accent);box-shadow:inset 0 0 0 2px var(--g-accent)}
.main[data-look] textarea,.main[data-look] input[type=text]{background:color-mix(in srgb,var(--g-surface) 94%,var(--g-ink));color:var(--g-ink)}
.main[data-look] textarea:focus{border-color:var(--g-accent)}
.main[data-look] .meter i,.main[data-look] .bar i,.main[data-look] .card::before{background:var(--g-accent)}
.main[data-look] .card ol.st li{background:var(--panel-2);color:var(--g-ink)}
.main[data-look] .card ol.st li b{color:var(--g-accent)}
.main[data-look] .card ol.st li.lie{background:var(--g-accent);color:var(--g-accent-ink)}
.main[data-look] .card .kind{color:var(--g-accent)}
.main[data-look] .card .q,.main[data-look] .card .stamp,.main[data-look] .spec{color:var(--g-muted)}
.main[data-look] .chain .ln,.main[data-look] .pairs .p,.main[data-look] .alm .e{border-color:var(--g-accent)}
/* detail page in the game's world */
.main[data-look] .d-bg::after{background:linear-gradient(0deg,var(--g-stage) 3%,color-mix(in srgb,var(--g-stage) 55%,transparent) 45%,transparent),linear-gradient(90deg,color-mix(in srgb,var(--g-stage) 70%,transparent),transparent 60%)}
.main[data-look] .d-info p{color:var(--g-stage-ink);opacity:.86}
.main[data-look] .plat span{background:color-mix(in srgb,var(--g-stage) 70%,var(--g-stage-ink));color:var(--g-stage-ink)}
.main[data-look] .plat svg{stroke:currentColor}
.main[data-look] .heart{background:color-mix(in srgb,var(--g-stage-ink) 16%,transparent)}
.main[data-look] .heart svg{stroke:var(--g-stage-ink)}
.main[data-look] .back{background:color-mix(in srgb,var(--g-stage) 70%,transparent);color:var(--g-stage-ink)}
.main[data-look] .shot-txt{font-family:var(--g-display),var(--font);font-weight:var(--g-dw);font-style:var(--g-ds)}
.main[data-look] .arrows button{background:color-mix(in srgb,var(--g-stage-ink) 12%,transparent)}
.main[data-look] .arrows svg{stroke:var(--g-stage-ink)}
.hslide .art video{width:100%;height:100%;object-fit:cover;display:block}
.art img,.d-bg .layer img,.hslide .art img{width:100%;height:100%;object-fit:cover;display:block}

/* readable body faces, where the world has one */
.main[data-look=secret-menu]{--font:"Courier Prime",ui-monospace,monospace}
.main[data-look=resume-bluff]{--font:"Special Elite","Courier New",monospace}
.main[data-look=seat-swap]{--font:"Share Tech Mono",ui-monospace,monospace}
.main[data-look=quiet-kudos]{--font:"Kalam","Plus Jakarta Sans",system-ui,sans-serif}
.main[data-look=truths-relative],.main[data-look=letters-forward],.main[data-look=rose-thorn-bud],.main[data-look=blind-portrait],.main[data-look=most-likely],.main[data-look=confession-booth]{--font:Georgia,"Iowan Old Style",serif}
.main[data-look] .stack,.main[data-look] p,.main[data-look] .panel,.main[data-look] textarea,.main[data-look] button{font-family:var(--font)}
/* script faces are for headlines only — answers stay readable */
.main[data-look=letters-forward] .card .ans,.main[data-look=recipe-relay] .card .ans,.main[data-look=thank-you-round] .card .ans,.main[data-look=rose-thorn-bud] .card .ans{font-family:Georgia,serif;font-style:italic;font-weight:600}

/* ---------- layer 2: the card becomes the game's object ---------- */
.main[data-look] .card::before{display:none}
.main[data-look] .card{box-shadow:0 18px 40px -22px rgba(0,0,0,.55)}

/* lorewheel — marquee sign ringed with bulbs */
.main[data-look=lorewheel] .card{background:var(--g-surface);border-radius:16px;border:3px solid #ffb341;box-shadow:0 0 0 6px #2a1630,0 0 0 8px #ffb341,0 0 40px rgba(255,179,65,.35)}
.main[data-look=lorewheel] .card::after{content:"";position:absolute;inset:6px;border-radius:12px;background:radial-gradient(circle,#ffe8b0 2px,transparent 3px) 0 0/22px 22px;opacity:.25;pointer-events:none}
.main[data-look=lorewheel] .card .ans{color:#ffe8b0}
/* last-photo — Polaroid, thick bottom border, a little tilt */
.main[data-look=last-photo] .card{background:#fbfaf6;border-radius:3px;padding:22px 22px 70px;transform:rotate(-1.2deg);box-shadow:0 22px 40px -18px rgba(0,0,0,.7)}
.main[data-look=last-photo] .card .ans{font-family:"Permanent Marker";background:#2b2622;color:#fbfaf6;padding:28px 20px;border-radius:2px}
.main[data-look=last-photo] .card .q{position:absolute;left:24px;right:24px;bottom:20px;font-family:"Permanent Marker";font-size:1rem;color:#3a3530}
/* firsts — concert ticket with notches and a perforated stub */
.main[data-look=firsts] .card{background:#f4e04d;border-radius:6px;padding-right:110px;
  -webkit-mask:radial-gradient(circle at right 90px top 0,transparent 14px,#000 15px) top/100% 51% no-repeat,radial-gradient(circle at right 90px bottom 0,transparent 14px,#000 15px) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle at right 90px top 0,transparent 14px,#000 15px) top/100% 51% no-repeat,radial-gradient(circle at right 90px bottom 0,transparent 14px,#000 15px) bottom/100% 51% no-repeat}
.main[data-look=firsts] .card::after{content:"ADMIT ONE";position:absolute;right:0;top:0;bottom:0;width:90px;border-left:3px dashed #141217;display:grid;place-items:center;writing-mode:vertical-rl;font-family:"Bebas Neue";font-size:1.6rem;letter-spacing:.12em;color:#141217}
.main[data-look=firsts] .card .ans{font-size:clamp(1.8rem,5vw,3rem);line-height:1}
/* tiny-joys — a soft speech bubble */
.main[data-look=tiny-joys] .card{background:#fffaf3;border-radius:40px 40px 40px 8px;border:3px solid #f0d9c8}
.main[data-look=tiny-joys] .card::after{content:"";position:absolute;left:36px;bottom:-18px;width:34px;height:34px;background:#fffaf3;border-right:3px solid #f0d9c8;border-bottom:3px solid #f0d9c8;transform:rotate(45deg) skew(10deg,10deg)}
/* hot-takes — broadsheet front page */
.main[data-look=hot-takes] .card{background:#f7efdd;border-radius:0;border-top:10px double #1f2a4d;border-bottom:3px solid #1f2a4d;padding-top:48px}
.main[data-look=hot-takes] .card::after{content:"THE HOT TAKE · LATE EDITION";position:absolute;top:12px;left:26px;right:26px;border-bottom:1px solid #1f2a4d;padding-bottom:6px;font-family:"Anton";letter-spacing:.2em;font-size:.8rem;color:#1f2a4d}
.main[data-look=hot-takes] .card .ans{font-size:clamp(1.9rem,5vw,3.1rem);line-height:1;text-transform:uppercase;color:#1f2a4d}
.main[data-look=hot-takes] .card .kind{background:#e8604c;color:#fff;display:inline-block;padding:3px 10px}
/* childhood-rooms — construction paper, taped corners */
.main[data-look=childhood-rooms] .card{background:#fff6d8;border-radius:4px;transform:rotate(.6deg);border:4px solid #243463;border-style:dashed}
.main[data-look=childhood-rooms] .card::after{content:"";position:absolute;width:90px;height:26px;top:-10px;left:calc(50% - 45px);background:rgba(255,207,63,.8);transform:rotate(-3deg)}
/* secret-menu — order slip, torn zigzag top and bottom */
.main[data-look=secret-menu] .card{background:#fffdf4;border-radius:0;max-width:560px;margin-inline:auto;padding:36px 30px;
  --z:linear-gradient(135deg,transparent 8px,#000 0) top left/16px 51% repeat-x,linear-gradient(225deg,transparent 8px,#000 0) top left/16px 51% repeat-x;
  -webkit-mask:linear-gradient(-45deg,transparent 8px,#000 0) bottom/16px 51% repeat-x,linear-gradient(45deg,transparent 8px,#000 0) bottom/16px 51% repeat-x,linear-gradient(135deg,transparent 8px,#000 0) top/16px 51% repeat-x,linear-gradient(225deg,transparent 8px,#000 0) top/16px 51% repeat-x;
          mask:linear-gradient(-45deg,transparent 8px,#000 0) bottom/16px 51% repeat-x,linear-gradient(45deg,transparent 8px,#000 0) bottom/16px 51% repeat-x,linear-gradient(135deg,transparent 8px,#000 0) top/16px 51% repeat-x,linear-gradient(225deg,transparent 8px,#000 0) top/16px 51% repeat-x}
.main[data-look=secret-menu] .card .ans{font-family:"Courier Prime";font-weight:700;text-transform:uppercase;border-top:2px dashed #222;border-bottom:2px dashed #222;padding:14px 0}
.main[data-look=secret-menu] h2{font-family:"Monoton";color:#ff7fa3;text-shadow:0 0 12px #ff4f7b}
/* the-tally — chalk on slate in a wooden frame */
.main[data-look=the-tally] .card{background:#2c4437;border:14px solid #8a6a45;border-radius:6px;box-shadow:inset 0 0 60px rgba(0,0,0,.45),0 18px 40px -20px #000;--text:#f2f0e6;--muted:#b8c4b8;color:#f2f0e6}
.main[data-look=the-tally] .card .ans{color:#f2f0e6;text-shadow:0 0 1px #fff,1px 1px 0 rgba(255,255,255,.2)}
/* confession-booth — carved lattice screen */
.main[data-look=confession-booth] .card{background:#2a1512;border:10px solid #5a3a22;border-radius:120px 120px 8px 8px;padding-top:60px;text-align:center;--text:#f0dcc0;--muted:#b39478;color:#f0dcc0;
  background-image:linear-gradient(45deg,rgba(201,161,74,.12) 1px,transparent 1px),linear-gradient(-45deg,rgba(201,161,74,.12) 1px,transparent 1px);background-size:22px 22px}
.main[data-look=confession-booth] .card .ans{color:#e8c77a}
.main[data-look=confession-booth] .card .stamp{left:0;right:0;text-align:center}
/* two-truths — playing cards, statements dealt as three cards */
.main[data-look=two-truths] .card{background:#fffaf0;border-radius:18px;border:1px solid #d4c9ae;outline:6px solid #fffaf0;outline-offset:-14px;box-shadow:inset 0 0 0 10px #fffaf0,inset 0 0 0 11px #c8102e,0 22px 40px -18px #000}
.main[data-look=two-truths] .card ol.st{grid-template-columns:repeat(3,1fr)}
.main[data-look=two-truths] .card ol.st li{flex-direction:column;min-height:170px;border-radius:12px;background:#fff;border:2px solid #151515;font-family:"Abril Fatface";font-weight:400}
.main[data-look=two-truths] .card ol.st li b{font-size:1.6rem;color:#c8102e}
.main[data-look=two-truths] .card ol.st li.lie{background:#c8102e;border-color:#c8102e;transform:rotate(-4deg)}
/* truths-relative — album page with photo corners */
.main[data-look=truths-relative] .card{background:#efe2c6;border-radius:2px;border:1px solid #b9a079;
  background-image:linear-gradient(135deg,#3a2a1a 14px,transparent 0),linear-gradient(225deg,#3a2a1a 14px,transparent 0),linear-gradient(45deg,#3a2a1a 14px,transparent 0),linear-gradient(-45deg,#3a2a1a 14px,transparent 0)}
.main[data-look=truths-relative] .card ol.st li{background:#e2d2ad;font-family:"IM Fell English";font-style:italic;font-weight:400}
/* resume-bluff — typed dossier with a red stamp */
.main[data-look=resume-bluff] .card{background:#f3eee2;border-radius:0;border-left:30px solid #d8cdb0;box-shadow:4px 4px 0 #cfc6b0,8px 8px 0 #bfb59a,0 22px 40px -18px #000}
.main[data-look=resume-bluff] .card::after{content:"CONFIDENTIAL";position:absolute;right:18px;top:40px;transform:rotate(12deg);border:3px solid #b3261e;color:#b3261e;padding:2px 10px;font-family:"Special Elite";font-size:1rem;opacity:.75}
.main[data-look=resume-bluff] .card ol.st li{background:transparent;border-bottom:1px solid #cfc6b0;border-radius:0;font-family:"Special Elite";font-weight:400}
.main[data-look=resume-bluff] .card ol.st li.lie{background:#1b1a17;color:#1b1a17}
.main[data-look=resume-bluff] .card ol.st li.lie b{color:#f3eee2}
/* where-i-land — trail sign on a post */
.main[data-look=where-i-land] .card{background:#233d34;color:#f6efdc;--text:#f6efdc;--muted:#c9d3c1;border-radius:10px;border:5px solid #f6efdc;outline:5px solid #233d34;margin-bottom:40px}
.main[data-look=where-i-land] .card::after{content:"";position:absolute;left:calc(50% - 10px);bottom:-46px;width:20px;height:46px;background:#6b4a26}
.main[data-look=where-i-land] .card{overflow:visible}
.main[data-look=where-i-land] .card .ans{color:#f6efdc;text-transform:uppercase}
.main[data-look=where-i-land] .spec{color:#c9d3c1}
.main[data-look=where-i-land] .dial button{border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.main[data-look=where-i-land] .dial button[aria-pressed=true]{transform:rotate(-45deg) scale(1.12)}
/* spice-line — hot-sauce label, starburst badge */
.main[data-look=spice-line] .card{background:#ffd23f;border:6px solid #2a0a05;border-radius:30px 30px 30px 30px/50px 50px 50px 50px;box-shadow:0 0 0 6px #b3150f,0 0 0 12px #2a0a05}
.main[data-look=spice-line] .card .ans{color:#b3150f;text-transform:uppercase;-webkit-text-stroke:1px #2a0a05}
.main[data-look=spice-line] .card .stamp{background:#2a0a05;color:#ffd23f;padding:8px;border-radius:50%;width:70px;height:70px;display:grid;place-items:center;text-align:center;clip-path:polygon(50% 0,61% 20%,83% 10%,80% 33%,100% 42%,82% 58%,92% 80%,68% 78%,58% 100%,45% 82%,24% 94%,24% 70%,2% 62%,20% 45%,6% 24%,30% 25%,38% 5%)}
/* nerve-meter — riveted hazard plate */
.main[data-look=nerve-meter] .card{background:#f2c300;border-radius:8px;border:8px solid transparent;border-image:repeating-linear-gradient(45deg,#111 0 14px,#f2c300 14px 28px) 8}
.main[data-look=nerve-meter] .card::after{content:"";position:absolute;inset:10px;background:radial-gradient(circle,#555 3px,transparent 4px) 0 0/calc(100% - 0px) calc(100% - 0px) no-repeat,radial-gradient(circle at 0 0,#555 3px,transparent 4px),radial-gradient(circle at 100% 0,#555 3px,transparent 4px),radial-gradient(circle at 0 100%,#555 3px,transparent 4px),radial-gradient(circle at 100% 100%,#555 3px,transparent 4px);pointer-events:none}
.main[data-look=nerve-meter] .card .ans{text-transform:uppercase}
/* most-likely — yearbook entry with an empty portrait box */
.main[data-look=most-likely] .card{background:#fbf8f0;border-radius:2px;padding-left:150px;min-height:180px}
.main[data-look=most-likely] .card::after{content:"";position:absolute;left:26px;top:28px;width:100px;height:124px;background:linear-gradient(160deg,#a9b6cf,#6f7fa3);border:6px solid #fff;box-shadow:0 2px 0 #c9c1ad}
.main[data-look=most-likely] .card .ans{color:#1f2a44}
/* superlatives — award certificate with a gold seal */
.main[data-look=superlatives] .card{background:#f3e7c7;border:3px double #14224a;outline:8px solid #f3e7c7;outline-offset:-16px;border-radius:4px;text-align:center;padding:40px 30px 54px}
.main[data-look=superlatives] .card::after{content:"";position:absolute;right:24px;bottom:18px;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,#f5d37a 40%,#d4a017 41%,#b8860b 70%);box-shadow:0 0 0 5px #d4a017}
.main[data-look=superlatives] .card .stamp{left:0;right:0;text-align:center}
/* last-camp — field-manual page, khaki with stamp */
.main[data-look=last-camp] .card{background:#d8cfae;border-radius:2px;border:2px solid #1e2218;background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(30,34,24,.12) 27px 28px)}
.main[data-look=last-camp] .card::after{content:"FIELD MANUAL · SECTION 4";position:absolute;right:16px;top:16px;font-family:"Black Ops One";font-size:.75rem;color:#e36f1e;border:2px solid #e36f1e;padding:2px 8px;transform:rotate(-3deg)}
.main[data-look=last-camp] .card .stamp{display:none}
/* blind-portrait — gilded frame with a museum placard */
.main[data-look=blind-portrait] .card{background:#f5f1ea;border:18px solid #a8864a;border-image:linear-gradient(135deg,#6b5024,#e2c47d,#8a6a2e,#e2c47d,#6b5024) 18;border-radius:0;margin-bottom:40px;overflow:visible}
.main[data-look=blind-portrait] .card::after{content:"Oil on memory · anonymous";position:absolute;right:-18px;bottom:-56px;background:#f5f1ea;color:#1c1a18;font-family:"Bodoni Moda";font-style:italic;font-size:.8rem;padding:6px 12px;box-shadow:0 4px 10px rgba(0,0,0,.3)}
/* toast-roulette — art-deco frame */
.main[data-look=toast-roulette] .card{background:#16151a;border:1px solid #d8b45a;outline:1px solid #d8b45a;outline-offset:-10px;border-radius:0;text-align:center;--text:#f3e6c4;--muted:#b6a67e;color:#f3e6c4}
.main[data-look=toast-roulette] .card::after{content:"";position:absolute;left:50%;top:0;width:140px;height:40px;translate:-50% 0;background:conic-gradient(from 180deg at 50% 0,transparent 60deg,#d8b45a 61deg 63deg,transparent 64deg 88deg,#d8b45a 89deg 91deg,transparent 92deg 116deg,#d8b45a 117deg 119deg,transparent 120deg)}
.main[data-look=toast-roulette] .card .ans{color:#e9cf86;letter-spacing:.06em}
.main[data-look=toast-roulette] .card .stamp{left:0;right:0}
/* quiet-kudos — sticky note with a push pin */
.main[data-look=quiet-kudos] .card{background:#fff17a;border-radius:2px 2px 30px 2px/2px 2px 12px 2px;transform:rotate(-1.5deg);max-width:620px;margin-inline:auto;box-shadow:0 18px 26px -18px rgba(0,0,0,.6)}
.main[data-look=quiet-kudos] .card::after{content:"";position:absolute;top:10px;left:calc(50% - 11px);width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff8a80,#d63a2f 60%,#8a1c14)}
.main[data-look=quiet-kudos] .card .ans{font-family:"Kalam";font-weight:700}
/* rumor-mill — tabloid with an EXCLUSIVE burst */
.main[data-look=rumor-mill] .card{background:#fff35c;border:4px solid #141414;border-radius:0;box-shadow:8px 8px 0 #141414;background-image:radial-gradient(rgba(20,20,20,.12) 1.5px,transparent 1.6px);background-size:10px 10px}
.main[data-look=rumor-mill] .card::after{content:"EXCLUSIVE!";position:absolute;right:14px;top:-4px;width:108px;height:108px;display:grid;place-items:center;background:#ff2e88;color:#fff;font-family:"Bowlby One SC";font-size:.8rem;clip-path:polygon(50% 0,61% 20%,83% 10%,80% 33%,100% 42%,82% 58%,92% 80%,68% 78%,58% 100%,45% 82%,24% 94%,24% 70%,2% 62%,20% 45%,6% 24%,30% 25%,38% 5%);transform:rotate(10deg)}
.main[data-look=rumor-mill] .card .stamp{display:none}
.main[data-look=rumor-mill] .card .ans{text-transform:uppercase}
.main[data-look=rumor-mill] .chain .ln p{font-family:"Bowlby One SC";font-weight:400}
/* recipe-relay — ruled index card */
.main[data-look=recipe-relay] .card{background:#fffdf7;border-radius:3px;padding-top:44px;background-image:linear-gradient(#c0392b,#c0392b),repeating-linear-gradient(0deg,transparent 0 30px,#b9d3ea 30px 31px);background-size:100% 2px,100% 100%;background-position:0 34px,0 12px;background-repeat:no-repeat,repeat}
.main[data-look=recipe-relay] .card .kind{font-family:"Homemade Apple";text-transform:none;letter-spacing:0;font-size:.95rem}
.main[data-look=recipe-relay] .chain .ln p{font-family:Georgia,serif;font-style:italic}
/* campfire-legend — parchment scroll with rolled ends */
.main[data-look=campfire-legend] .card{background:#e7d6b0;border-radius:4px;margin-inline:18px;overflow:visible;box-shadow:inset 0 0 50px rgba(107,74,38,.45),0 0 60px rgba(255,138,42,.25)}
.main[data-look=campfire-legend] .card::after{content:"";position:absolute;inset:-12px -18px;border-left:18px solid #c9b183;border-right:18px solid #c9b183;border-radius:18px;pointer-events:none}
.main[data-look=campfire-legend] .card .ans,.main[data-look=campfire-legend] .card .kind{color:#2b1d10}
/* hot-seat — the floor under a spotlight */
.main[data-look=hot-seat] .card{background:radial-gradient(ellipse 60% 70% at 50% 0,rgba(255,246,229,.22),transparent 70%),#1e0d33;border:2px solid #6b3fa0;border-radius:24px;text-align:center;--text:#fff6e5;--muted:#c5a8e6;color:#fff6e5}
.main[data-look=hot-seat] .card .ans{color:#ffd65c;text-shadow:0 0 18px rgba(255,201,60,.5)}
.main[data-look=hot-seat] .card .talkitems div{font-family:Georgia,serif;font-style:italic}
/* rose-thorn-bud — herbarium sheet with a specimen label */
.main[data-look=rose-thorn-bud] .card{background:#f7f3e7;border-radius:0;padding-bottom:70px;border:1px solid #c9c1a8}
.main[data-look=rose-thorn-bud] .card::after{content:"Specimen · this circle";position:absolute;right:20px;bottom:16px;border:1px solid #2f3b2c;padding:6px 14px;font-family:"Cormorant Garamond";font-style:italic;font-weight:600;color:#2f3b2c;background:#fbf8ef}
.main[data-look=rose-thorn-bud] .talkitems div:nth-child(1){color:#b23a48}
.main[data-look=rose-thorn-bud] .talkitems div:nth-child(2){color:#6b5a2e}
.main[data-look=rose-thorn-bud] .talkitems div:nth-child(3){color:#4f7a44}
/* thank-you-round — folded greeting card, deckled edge */
.main[data-look=thank-you-round] .card{background:#fbf4e8;border-radius:2px;border-left:3px solid #e2cfb2;box-shadow:-14px 0 0 -4px #f3e7d3,-14px 0 0 -3px #e2cfb2,0 18px 40px -20px rgba(0,0,0,.5);text-align:center}
.main[data-look=thank-you-round] .card .ans{font-family:"Dancing Script";color:#c8553d;font-size:clamp(2rem,5vw,3rem)}
/* time-capsule — porthole hatch with chrome rim */
.main[data-look=time-capsule] .card{background:radial-gradient(circle at 30% 20%,#3b2873,#2a1a52 70%);border-radius:48px;border:8px solid transparent;background-clip:padding-box;box-shadow:0 0 0 8px #cfd2e6,0 0 0 10px #6a4bb0,0 0 40px rgba(255,122,61,.25);--text:#ffe9c7;--muted:#c9a8e8;color:#ffe9c7}
.main[data-look=time-capsule] .card .ans{color:#ffd08a}
/* letters-forward — envelope with a wax seal */
.main[data-look=letters-forward] .card{background:#f4ecdb;border-radius:4px;padding-top:70px;overflow:hidden}
.main[data-look=letters-forward] .card::before{display:block;content:"";position:absolute;inset:0 0 auto 0;height:60px;background:linear-gradient(to bottom right,transparent 49.5%,#cdbf9f 50%,transparent 51%) left/50% 100% no-repeat,linear-gradient(to bottom left,transparent 49.5%,#cdbf9f 50%,transparent 51%) right/50% 100% no-repeat}
.main[data-look=letters-forward] .card::after{content:"";position:absolute;left:calc(50% - 22px);top:36px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#c8434a,#9b2226 60%,#6a1417)}
/* seat-swap — split-flap departure board */
.main[data-look=seat-swap] .card{background:#16191e;border:1px solid #2c3038;border-radius:10px;--text:#ffb000;--muted:#a37a26;color:#ffb000}
.main[data-look=seat-swap] .card .ans{font-family:"Share Tech Mono";text-transform:uppercase;letter-spacing:.06em;background:repeating-linear-gradient(0deg,#0b0d10 0 2px,transparent 2px 56px);color:#ffb000}
.main[data-look=seat-swap] .pairs .p{background:#16191e;padding:12px 16px;border-radius:6px;border-left:4px solid #ffb000}
.main[data-look=seat-swap] .pairs .p b{font-family:"Share Tech Mono";color:#ffb000;text-transform:uppercase}

/* ---------- entrances: each world arrives its own way ---------- */
.main[data-look] .card{animation-duration:.7s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:both}
@keyframes lw-spin{from{transform:rotate(-8deg) scale(.9);opacity:0}}
@keyframes lw-develop{from{filter:blur(8px) sepia(1) brightness(1.6);opacity:.2}}
@keyframes lw-tear{from{clip-path:inset(0 100% 0 0)}}
@keyframes lw-float{from{transform:translateY(24px);opacity:0}60%{transform:translateY(-6px)}}
@keyframes lw-stamp{from{transform:scale(1.25);opacity:0}70%{transform:scale(.97)}}
@keyframes lw-wobble{0%{transform:rotate(-4deg);opacity:0}50%{transform:rotate(2deg)}100%{transform:rotate(.6deg)}}
@keyframes lw-print{from{clip-path:inset(0 0 100% 0);transform:translateY(-30px)}}
@keyframes lw-write{from{clip-path:inset(0 100% 0 0);opacity:.4}}
@keyframes lw-curtain{from{clip-path:inset(0 50% 0 50%)}}
@keyframes lw-deal{from{transform:translate(-60px,-40px) rotate(-12deg);opacity:0}}
@keyframes lw-sepia{from{filter:sepia(1) contrast(.7);opacity:.3}}
@keyframes lw-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lw-pin{from{transform:translateY(-60px);opacity:0}60%{transform:translateY(6px)}}
@keyframes lw-shake{0%{opacity:0}20%,60%{transform:translateX(-6px) rotate(-1deg)}40%,80%{transform:translateX(6px) rotate(1deg)}}
@keyframes lw-swing{from{transform:rotate(-12deg);transform-origin:top center;opacity:0}60%{transform:rotate(3deg)}}
@keyframes lw-flip{from{transform:perspective(900px) rotateY(-70deg);transform-origin:left;opacity:0}}
@keyframes lw-flashlight{from{clip-path:circle(0% at 20% 30%)}to{clip-path:circle(150% at 20% 30%)}}
@keyframes lw-spotlight{from{filter:brightness(.2)}}
@keyframes lw-shimmer{from{filter:brightness(2) saturate(0);opacity:0}}
@keyframes lw-drop{from{transform:translateY(-40px) rotate(8deg);opacity:0}70%{transform:translateY(4px) rotate(-2deg)}}
@keyframes lw-jitter{0%{opacity:0}10%,50%,90%{transform:translate(3px,-2px) rotate(1deg)}30%,70%{transform:translate(-3px,2px) rotate(-1deg)}}
@keyframes lw-slide{from{transform:translateY(60px);opacity:0}}
@keyframes lw-flicker{0%{opacity:0}20%{opacity:.8}25%{opacity:.4}40%{opacity:1}45%{opacity:.7}}
@keyframes lw-sweep{from{background-position:-400px 0;filter:brightness(.4)}}
@keyframes lw-bloom{from{transform:scale(.6);opacity:0;border-radius:50%}}
@keyframes lw-unfold{from{transform:perspective(900px) rotateX(-80deg);transform-origin:top;opacity:0}}
@keyframes lw-hatch{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(100% at 50% 50%)}}
@keyframes lw-unseal{from{clip-path:polygon(0 0,100% 0,50% 40%)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}
@keyframes lw-flap{0%{transform:perspective(600px) rotateX(90deg);transform-origin:top}60%{transform:perspective(600px) rotateX(-12deg)}}
.main[data-look=lorewheel] .card{animation-name:lw-spin}
.main[data-look=last-photo] .card{animation-name:lw-develop;animation-duration:1.4s}
.main[data-look=firsts] .card{animation-name:lw-tear}
.main[data-look=tiny-joys] .card{animation-name:lw-float}
.main[data-look=hot-takes] .card{animation-name:lw-stamp}
.main[data-look=childhood-rooms] .card{animation-name:lw-wobble}
.main[data-look=secret-menu] .card{animation-name:lw-print;animation-duration:.9s}
.main[data-look=the-tally] .card{animation-name:lw-write;animation-duration:1s}
.main[data-look=confession-booth] .card{animation-name:lw-curtain;animation-duration:1s}
.main[data-look=two-truths] .card{animation-name:lw-deal}
.main[data-look=truths-relative] .card{animation-name:lw-sepia;animation-duration:1.2s}
.main[data-look=resume-bluff] .card{animation-name:lw-type;animation-timing-function:steps(18);animation-duration:.9s}
.main[data-look=where-i-land] .card{animation-name:lw-pin}
.main[data-look=spice-line] .card{animation-name:lw-shake}
.main[data-look=nerve-meter] .card{animation-name:lw-swing}
.main[data-look=most-likely] .card{animation-name:lw-flip}
.main[data-look=superlatives] .card{animation-name:lw-stamp}
.main[data-look=last-camp] .card{animation-name:lw-flashlight;animation-duration:1s}
.main[data-look=blind-portrait] .card{animation-name:lw-spotlight;animation-duration:1.2s}
.main[data-look=toast-roulette] .card{animation-name:lw-shimmer;animation-duration:1s}
.main[data-look=quiet-kudos] .card{animation-name:lw-drop}
.main[data-look=rumor-mill] .card{animation-name:lw-jitter}
.main[data-look=recipe-relay] .card{animation-name:lw-slide}
.main[data-look=campfire-legend] .card{animation-name:lw-flicker;animation-duration:1.1s}
.main[data-look=hot-seat] .card{animation-name:lw-sweep;animation-duration:1s}
.main[data-look=rose-thorn-bud] .card{animation-name:lw-bloom}
.main[data-look=thank-you-round] .card{animation-name:lw-unfold}
.main[data-look=time-capsule] .card{animation-name:lw-hatch;animation-duration:.9s}
.main[data-look=letters-forward] .card{animation-name:lw-unseal;animation-duration:1s}
.main[data-look=seat-swap] .card{animation-name:lw-flap}

/* ---------- layer 3: cover titles set over key art ---------- */
.gcard .ctitle,.poster .ctitle{position:absolute;z-index:1;left:8%;right:8%;font-size:calc(var(--ts,1) * clamp(1.2rem,2.3vw,1.9rem));line-height:.95;text-align:center;text-wrap:balance;pointer-events:none}
.poster .ctitle{font-size:calc(var(--ts,1) * 2rem)}
.ctitle.pos-top{top:7%}
.gcard .ctitle.pos-top,.gcard .ctitle.pos-sign{top:calc(10px + 34px)} /* clear the time badge */.ctitle.pos-center{top:50%;translate:0 -50%}.ctitle.pos-bottom{bottom:9%}.ctitle.pos-sign{top:12%}
.ctitle.pos-plaque{bottom:8%;padding:.4em .6em;background:rgba(20,12,8,.82);border:2px solid #c9a14a;border-radius:6px}
.fx-bulbs{text-shadow:0 0 10px rgba(255,179,65,.9),0 2px 0 #7a2e10}
.fx-marker-on-polaroid{background:#fbfaf6;padding:.3em .4em;transform:rotate(-2deg)}
.fx-misprint{text-shadow:3px 2px 0 #ff3b5c,-2px -1px 0 #141217}
.fx-soft{text-shadow:0 2px 12px rgba(255,255,255,.9)}
.fx-ink{text-shadow:2px 2px 0 rgba(232,96,76,.55)}
.fx-crayon{text-shadow:1px 1px 0 #ffcf3f,-1px 0 0 #ff7a59}
.fx-neon{text-shadow:0 0 6px #ff4f7b,0 0 18px #ff4f7b,0 0 36px #ff4f7b}
.fx-chalk{text-shadow:0 0 2px rgba(255,255,255,.8),1px 1px 0 rgba(255,255,255,.25)}
.fx-gilt{text-shadow:0 1px 0 #7a5a1f,0 0 16px rgba(232,199,122,.4)}
.fx-gold{text-shadow:0 2px 0 #8a6a2e,0 0 20px rgba(0,0,0,.6)}
.fx-emboss{text-shadow:0 1px 0 rgba(255,255,255,.35),0 -1px 0 rgba(0,0,0,.5)}
.fx-typed{background:#1b1a17;padding:.2em .4em;display:inline-block}
.fx-flat{text-shadow:none}
.fx-outline{-webkit-text-stroke:2px #2a0a05;paint-order:stroke fill;text-shadow:4px 4px 0 #2a0a05}
.fx-stencil{text-shadow:0 0 18px rgba(0,0,0,.8)}
.fx-foil{text-shadow:0 1px 0 #fff}
.fx-varsity{-webkit-text-stroke:2px #14224a;paint-order:stroke fill;text-shadow:3px 3px 0 #f3e7c7}
.fx-grunge{text-shadow:0 0 14px rgba(0,0,0,.9)}
.fx-placard{text-shadow:0 2px 12px rgba(0,0,0,.9)}
.fx-deco{letter-spacing:.12em;text-shadow:0 0 14px rgba(0,0,0,.8)}
.fx-torn-paper{background:#fff;padding:.35em .5em;box-shadow:0 4px 10px rgba(0,0,0,.3);transform:rotate(-2deg)}
.fx-comic{-webkit-text-stroke:3px #141414;paint-order:stroke fill;text-shadow:5px 5px 0 #141414;transform:rotate(-4deg)}
.fx-ink-script{background:rgba(255,253,247,.85);padding:.35em .4em;line-height:1.4}
.fx-ember{text-shadow:0 0 12px rgba(255,138,42,.8),0 2px 0 #2b1d10}
.fx-showbiz{text-shadow:0 3px 0 #8a5a00,0 0 24px rgba(255,201,60,.7)}
.fx-engraved{text-shadow:0 1px 0 rgba(255,255,255,.6)}
.fx-letterpress{text-shadow:0 1px 0 rgba(255,255,255,.5)}
.fx-chrome{background:linear-gradient(#fff6e0 40%,#ff7a3d 60%,#ffd08a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 0 #1b1036)}
.fx-script{text-shadow:0 2px 14px rgba(0,0,0,.8)}
.fx-split-flap{background:#0b0d10;padding:.2em .4em;letter-spacing:.08em;border-radius:4px}
@media (prefers-reduced-motion:reduce){.main[data-look] .card{animation:none!important}}

/* ---------- stages: the surface each world is played on ---------- */
.main[data-look=lorewheel]{background:radial-gradient(circle,#ffb34133 2px,transparent 3px) 0 0/34px 34px,radial-gradient(ellipse at 50% 0,#4a1f3f,#1a0f1f 70%)}
.main[data-look=last-photo]{background:repeating-linear-gradient(90deg,#2b2622 0 38px,#302a25 38px 40px),#2b2622}
.main[data-look=firsts]{background:linear-gradient(90deg,#111014 60%,transparent),repeating-linear-gradient(0deg,#1a1719 0 22px,#141116 22px 24px),repeating-linear-gradient(90deg,transparent 0 48px,#141116 48px 50px)}
.main[data-look=tiny-joys]{background:radial-gradient(circle at 12% 18%,#ffe3a3 0 40px,transparent 41px),radial-gradient(circle at 88% 80%,#cfeede 0 70px,transparent 71px),#fbeee2}
.main[data-look=hot-takes]{background:radial-gradient(#1f2a4d14 1px,transparent 1.2px) 0 0/6px 6px,#f1e7d3}
.main[data-look=childhood-rooms]{background:radial-gradient(circle,#fff6d855 1.5px,transparent 2px) 0 0/40px 40px,radial-gradient(circle,#ffcf3f66 2px,transparent 2.5px) 20px 20px/40px 40px,#2f4a8a}
.main[data-look=secret-menu]{background:linear-gradient(#0f2a2eee,#0f2a2ecc),conic-gradient(#fff 25%,#111 0 50%,#fff 0 75%,#111 0) 0 0/48px 48px}
.main[data-look=the-tally]{background:radial-gradient(ellipse at 30% 20%,#2f4a3d,#1d2e26 70%);box-shadow:inset 0 -26px 0 #6b4f31}
.main[data-look=confession-booth]{background:repeating-linear-gradient(90deg,#2a0c0e 0 26px,#3a1215 26px 40px,#2a0c0e 40px 52px),#150b0b}
.main[data-look=two-truths]{background:radial-gradient(ellipse at 50% 30%,#18604a,#0a2a21 75%)}
.main[data-look=truths-relative]{background:radial-gradient(circle,#5a4430 1px,transparent 1.5px) 0 0/8px 8px,#3b2a1c}
.main[data-look=resume-bluff]{background:repeating-linear-gradient(180deg,#1b1a17 0 34px,#24221e 34px 44px)}
.main[data-look=where-i-land]{background:repeating-radial-gradient(circle at 70% 30%,transparent 0 22px,#233d3422 22px 23px),#e9dfc4}
.main[data-look=spice-line]{background:repeating-conic-gradient(from 0deg at 50% 110%,#b3150f 0 8deg,#c6261b 8deg 16deg)}
.main[data-look=nerve-meter]{background:linear-gradient(#161616f0,#161616f0),repeating-linear-gradient(45deg,#f2c300 0 20px,#111 20px 40px)}
.main[data-look=most-likely]{background:linear-gradient(90deg,transparent 0 60px,#c9c1ad 60px 61px,transparent 61px),#e8e1d0}
.main[data-look=superlatives]{background:repeating-linear-gradient(90deg,#14224a 0 60px,#182a57 60px 120px)}
.main[data-look=last-camp]{background:radial-gradient(ellipse at 20% 30%,#3a3a24,#1e2218 60%,#0f120b)}
.main[data-look=blind-portrait]{background:radial-gradient(ellipse 50% 60% at 50% 0,#4a4540,transparent 70%),linear-gradient(0deg,#3a2a1c 0 40px,#2a2724 40px)}
.main[data-look=toast-roulette]{background:repeating-conic-gradient(from -45deg at 50% 100%,#0e0e10 0 6deg,#1a1812 6deg 12deg)}
.main[data-look=quiet-kudos]{background:radial-gradient(#8a633a55 1px,transparent 1.5px) 0 0/5px 5px,radial-gradient(#d9ad7466 1px,transparent 1.5px) 2px 3px/7px 7px,#b88a55}
.main[data-look=rumor-mill]{background:radial-gradient(#fff35c 2.2px,transparent 2.6px) 0 0/12px 12px,#ff2e88}
.main[data-look=recipe-relay]{background:conic-gradient(#c0392b22 25%,transparent 0 50%,#c0392b22 0 75%,transparent 0) 0 0/28px 28px,repeating-linear-gradient(90deg,#c0392b14 0 14px,transparent 14px 28px),#f3e9dc}
.main[data-look=campfire-legend]{background:radial-gradient(ellipse at 50% 110%,#ff8a2a55,transparent 45%),radial-gradient(circle at 80% 12%,#e8e3cf 0 26px,transparent 28px),radial-gradient(#ffffff55 1px,transparent 1.5px) 0 0/60px 50px,#0c1422}
.main[data-look=hot-seat]{background:conic-gradient(from 160deg at 20% -10%,transparent 0 10deg,#ffc93c22 10deg 22deg,transparent 22deg),conic-gradient(from 180deg at 80% -10%,transparent 0 10deg,#6b3fa033 10deg 24deg,transparent 24deg),#12061f}
.main[data-look=rose-thorn-bud]{background:radial-gradient(#c9c1a855 1px,transparent 1.5px) 0 0/9px 9px,#e9e4d4}
.main[data-look=thank-you-round]{background:radial-gradient(#9e7b52 .8px,transparent 1.2px) 0 0/4px 4px,#c9a57a}
.main[data-look=time-capsule]{background:linear-gradient(180deg,#1b1036 55%,#ff7a3d22 70%,#ff4f9a33),repeating-linear-gradient(0deg,transparent 0 30px,#6a4bb022 30px 32px)}
.main[data-look=letters-forward]{background:repeating-linear-gradient(0deg,#101b2e 0 30px,#14223a 30px 31px)}
.main[data-look=seat-swap]{background:repeating-linear-gradient(90deg,#0b0d10 0 46px,#111418 46px 48px)}