/* Tale Roll. The six colour variables are swapped per Journey by scripts/main.js. */
:root {
  --bg: #15131f;
  --panel: #211e30;
  --ink: #f3ecdc;
  --muted: #a39fb8;
  --accent: #f2c14e;
  --accent2: #e8705a;
  --radius: 14px;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.app { max-width: 760px; margin: 0 auto; padding: 16px 16px 64px; min-height: 100vh; }
.screen { display: flex; flex-direction: column; gap: 16px; }
.heading { font-family: var(--serif); font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.15; margin: 0; }
.eyebrow, .genre { color: var(--accent); font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin: 0; }
.premise { margin: 0; color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 1.1rem; }
.back { align-self: flex-start; background: none; border: 0; color: var(--muted); padding: 6px 0; }
.back:hover { color: var(--ink); }

/* Buttons */
.btn { background: var(--panel); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 12px 22px; font-weight: 600; transition: transform .12s, background .2s, border-color .2s; }
.btn:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 12px; font-size: .85rem; }
.btn.wide { width: 100%; padding: 15px 22px; font-size: 1.05rem; }
.link { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; font-size: .9rem; }
.link:hover { color: var(--ink); }
.menu { display: flex; flex-direction: column; gap: 10px; }

/* Title */
.title { align-items: center; text-align: center; padding-top: 9vh; }
.title .menu { width: min(100%, 380px); }
.logo h1 { font-family: var(--serif); font-size: clamp(3rem, 13vw, 5.2rem); line-height: 1; margin: 14px 0 0; letter-spacing: -.02em; }
.logo-dice { display: flex; justify-content: center; gap: 8px; }
.logo-dice .die:nth-child(1) { transform: rotate(-9deg); }
.logo-dice .die:nth-child(3) { transform: rotate(8deg); }
.tagline { margin: 0 0 12px; color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 1.2rem; }
.narrator-line { color: var(--muted); font-size: .9rem; max-width: 46ch; margin: 4px 0; }
.fates { width: min(100%, 520px); text-align: left; border-top: 1px solid var(--line); padding-top: 12px; }
.fates h2 { font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.fates ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; }
.fates span { color: var(--muted); }

/* Journey cards */
.journeys { display: grid; gap: 14px; }
.journey { display: grid; grid-template-columns: 1fr; text-align: left; padding: 0; overflow: hidden; background: var(--panel); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: var(--radius); transition: transform .15s, border-color .2s; }
.journey:hover { transform: translateY(-2px); border-color: var(--accent); }
.journey-art { aspect-ratio: 16 / 6; overflow: hidden; }
.journey-art svg, .journey-art .drawn, .key-art { width: 100%; height: 100%; display: block; }
.key-art { object-fit: cover; }
.journey-text { padding: 14px 16px 16px; display: grid; gap: 4px; }
.journey-text h3 { font-family: var(--serif); font-size: 1.45rem; margin: 0; }
.journey-text p { margin: 0; color: var(--muted); }
.skin { font-size: .82rem; color: var(--accent); margin-top: 4px; }
@media (min-width: 620px) { .journey { grid-template-columns: 240px 1fr; } .journey-art { aspect-ratio: auto; min-height: 150px; } }

/* Hero creator */
.field { display: grid; gap: 8px; }
.field > span { font-size: .85rem; font-weight: 600; color: var(--muted); }
input[type="text"], input[type="password"], textarea, select { width: 100%; background: color-mix(in srgb, var(--bg) 70%, #000); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.options { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.option { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.option small { color: var(--muted); font-size: .8rem; }
.option.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: .9rem; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.chip.static { padding: 3px 10px; font-size: .78rem; border-color: color-mix(in srgb, var(--accent) 55%, transparent); cursor: default; }
.inline { display: flex; gap: 8px; }
.inline input { flex: 1; min-width: 0; }

.portrait-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; border: 2px solid var(--line); }
.thumb.base { border-color: var(--accent); }
.looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.look { display: grid; gap: 4px; padding: 6px 6px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; text-align: center; }
.look:hover { border-color: var(--accent); }
.look img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; background: #000; }
.look small { color: var(--muted); font-size: .78rem; }
.avatar { width: 40px; height: 40px; object-fit: cover; object-position: top; border-radius: 50%; border: 2px solid var(--accent); margin-left: auto; }

/* Play. One set of parts, two arrangements:
   portrait (default) stacks them under the picture; landscape lays them over a full-screen picture.
   The look is "Tilt + Wedge": square edges, cut corners, hard shadows, slabs at a slight angle. */
.play { --cond: "Bahnschrift Condensed", "Bahnschrift", "Arial Narrow", "Roboto Condensed", Impact, sans-serif; --slab: #07090d; --paper: #f2f5f7; --k: 14px;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px;
  grid-template-areas: "menu wedge" "stage stage" "clock clock" "tokens tokens" "dock dock"; }
.play .l { display: block; margin-bottom: 4px; font: 700 .66rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.menu-btn { grid-area: menu; width: 44px; height: 44px; border: 0; background: var(--slab); color: var(--ink); font-size: 1.7rem; line-height: 1; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.menu-btn:hover { background: var(--accent); color: var(--slab); }
.wedge { grid-area: wedge; text-align: right; color: var(--accent); font: 800 1rem/.85 var(--cond); }
.wedge .l { display: inline; margin-right: 8px; color: var(--ink); }
.wedge b { font-size: 2.4rem; } .wedge .of { font-size: 1.1rem; opacity: .8; }
.stage { grid-area: stage; position: relative; height: clamp(170px, 34vh, 380px); overflow: hidden; background: #000; }
.stage-art, .stage-art svg, .stage-art .drawn, .stage-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* In the climax the key art takes on the Journey's danger colour. */
.stage-art.danger::after { content: ""; position: absolute; inset: 0; background: var(--accent2); mix-blend-mode: soft-light; opacity: .55; pointer-events: none; }
.stage-img { object-fit: cover; animation: fade .8s ease both; }
@keyframes fade { from { opacity: 0; } }

.clock { grid-area: clock; position: relative; background: var(--slab); padding: 10px 14px 12px; }
.clock b { position: absolute; top: 6px; right: 14px; color: var(--accent); font: 800 1.5rem/1 var(--cond); }
.seg { display: block; height: 10px; background: linear-gradient(to right, var(--accent) var(--v), rgba(255, 255, 255, .22) 0); -webkit-mask: repeating-linear-gradient(to right, #000 0 10px, transparent 10px 13px); mask: repeating-linear-gradient(to right, #000 0 10px, transparent 10px 13px); }
.clock.ph-climax b, .clock.ph-ending b { color: var(--accent2); }
.clock.ph-climax .seg, .clock.ph-ending .seg { background: linear-gradient(to right, var(--accent2) var(--v), rgba(255, 255, 255, .22) 0); }
.clock small { display: block; margin-top: 6px; color: var(--muted); font-size: .78rem; }

.tokens { grid-area: tokens; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 18px; }
.hps { display: flex; gap: 5px; padding-left: 4px; }
.hp { display: block; width: 34px; height: 16px; transform: skewX(-18deg); background: linear-gradient(to right, var(--accent2) var(--fill), rgba(255, 255, 255, .3) var(--fill)); box-shadow: 3px 3px 0 var(--slab); }
.luck { display: block; color: var(--accent); font-size: 1.35rem; line-height: 16px; letter-spacing: 2px; text-shadow: 2px 2px 0 var(--slab); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.play .chip.static { background: var(--slab); border-color: var(--accent); }

.dock { grid-area: dock; display: grid; gap: 14px; min-width: 0; }
.narration { background: var(--panel); border: 1px solid var(--line); padding: 16px 18px; }
.play .narration { background: var(--paper); color: #0b0c10; border: 0; box-shadow: 8px 8px 0 var(--accent); margin-right: 8px; }
.play .narration .tier { background: var(--slab); border-color: var(--slab); }
.play .narration .source { color: #5a5f68; }
.play .narration-text.typing p:last-of-type::after { color: #0b0c10; }
.action[data-mode="idle"] { background: var(--accent); color: var(--slab); padding: 14px 16px; clip-path: polygon(0 0, calc(100% - var(--k)) 0, 100% var(--k), 100% 100%, 0 100%); }
.action[data-mode="idle"] .act label { font: 800 1.15rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.action[data-mode="idle"] textarea { background: rgba(255, 255, 255, .35); border: 0; border-bottom: 2px solid var(--slab); color: var(--slab); min-height: 52px; }
.action[data-mode="idle"] textarea::placeholder { color: color-mix(in srgb, var(--slab) 65%, transparent); }
.action[data-mode="idle"] .btn.primary { background: var(--slab); border-color: var(--slab); color: var(--accent); font: 800 1.1rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.action[data-mode="idle"] .retire, .action[data-mode="idle"] .link, .action[data-mode="idle"] .busy { color: var(--slab); }
.action[data-mode="idle"] .busy { font: 700 1rem/1.3 var(--sans); font-style: normal; }
.action[data-mode="live"] { background: color-mix(in srgb, var(--slab) 94%, transparent); border-left: 6px solid var(--accent); padding: 14px 16px; }
.action[data-mode="live"] .btn.primary { font: 800 1.15rem/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); }
.play .die { box-shadow: 5px 5px 0 var(--slab), 5px 5px 0 1px var(--accent); }

@media (orientation: landscape) and (min-width: 640px) {
  .app:has(.play) { max-width: none; padding: 0; }
  .play { position: fixed; inset: 0; display: block; overflow: hidden; }
  .play > * { position: absolute; z-index: 2; }
  .play .stage { inset: 0; height: auto; z-index: 0; }
  /* Dark wedge rising from the bottom left corner, behind the story. */
  .play::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--slab) 88%, transparent); clip-path: polygon(0 60%, 50% 100%, 0 100%); pointer-events: none; }
  /* Halftone fading out of the top left corner so the status reads on any picture. */
  .play::after { content: ""; position: absolute; inset: 0 auto auto 0; width: 46vw; height: 30vh; z-index: 1; background-image: radial-gradient(circle, var(--slab) 34%, transparent 36%); background-size: 9px 9px; -webkit-mask: linear-gradient(135deg, #000 10%, transparent 62%); mask: linear-gradient(135deg, #000 10%, transparent 62%); pointer-events: none; }
  .menu-btn { top: 14px; left: 14px; }
  .tokens { top: 16px; left: 76px; max-width: 34vw; transform: rotate(-3deg); transform-origin: left top; }
  .play .l { text-shadow: 0 1px 4px #000, 0 0 2px #000; }
  /* Accent wedge in the top right corner carrying the turn number. */
  .wedge { top: 0; right: 0; width: 32vw; height: 15vw; padding: .9vw 1.5vw 0 0; background: var(--accent); color: var(--slab); clip-path: polygon(100% 0, 100% 100%, 0 0); }
  .wedge .l { display: none; } .wedge b { font-size: 6.2vw; } .wedge .of { font-size: 2vw; }
  .clock { top: 16px; left: 50%; width: clamp(210px, 25vw, 340px); transform: translateX(-50%) rotate(-3deg); box-shadow: 6px 6px 0 var(--accent); }
  .clock .l { text-shadow: none; }
  .dock { left: 2.4vw; bottom: 3vh; width: min(44vw, 680px); display: flex; flex-direction: column; gap: 2vh; max-height: calc(100vh - 110px); }
  .play .narration { min-height: 0; max-height: 38vh; overflow: auto; margin: 0; transform: rotate(-2deg); transform-origin: left bottom; }
  .narration-text { font-size: clamp(.95rem, .6rem + .9vw, 1.2rem); min-height: 0; }
  .action[data-mode="idle"] { margin-left: 4vw; transform: rotate(-2deg); transform-origin: left bottom; box-shadow: none; filter: none; }
  .action[data-mode="live"] { position: fixed; right: 2.4vw; bottom: 3vh; width: min(38vw, 500px); max-height: calc(100vh - 15vw - 5vh); overflow: auto; transform: rotate(1.5deg); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .play .die { --size: 52px; } .play .result { font-size: 1.3rem; } .play .narration { padding: 10px 14px; } .action[data-mode="idle"] textarea { min-height: 40px; }
  .clock small { display: none; } .tags { display: none; }
  /* Phone on its side: keep the Roll and Keep buttons on screen without scrolling. */
  .narration-text { font-size: .92rem; line-height: 1.45; }
  .play .narration { max-height: 44vh; }
  .action[data-mode="live"] { width: 44vw; padding: 8px 12px; gap: 6px; max-height: calc(100vh - 15vw - 3vh); }
  .action[data-mode="live"] .you, .action[data-mode="live"] .hint, .action[data-mode="live"] .stake-rule { display: none; }
  .action:has(.dice) .stake-line, .action:has(.dice) .stake-why { display: none; }
  .play .stake-card { padding: 6px 10px; gap: 2px; } .play .stake-line { font-size: .92rem; }
  .play .dice { padding: 2px 0; gap: 12px; } .play .cond { padding: 2px 8px; font-size: .72rem; }
  .action[data-mode="live"] .btn.wide { padding: 10px 16px; }
  .action[data-mode="idle"] { padding: 8px 12px; } .action[data-mode="idle"] .act { gap: 4px; } .action[data-mode="idle"] .retire { display: none; }
}

.strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.strip:not(:empty) { margin-bottom: 10px; }
.source { margin-left: auto; font-size: .72rem; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.narration-text { font-family: var(--serif); font-size: 1.14rem; line-height: 1.65; min-height: 4.5em; }
.narration-text p { margin: 0 0 .8em; white-space: pre-wrap; }
.narration-text p:last-child { margin-bottom: 0; }
.narration-text.typing { cursor: pointer; }
.narration-text.typing p:last-of-type::after { content: "\258C"; color: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.tier { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor; }
.tier.fail { color: var(--accent2); }
.tier.success, .tier.strong { color: var(--accent); }
.tier.legendary { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.tier.none { color: var(--muted); }

.action { display: grid; gap: 12px; }
.act { display: grid; gap: 8px; }
.act label { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; }
.act-row { display: flex; gap: 8px; align-items: stretch; }
.act-row textarea { flex: 1; min-width: 0; resize: vertical; min-height: 58px; }
.act-row .btn { border-radius: 12px; padding-inline: 26px; }
.retire { font-size: .9rem; color: var(--muted); }
.you { margin: 0; color: var(--muted); }
.you em { font-style: normal; font-weight: 700; color: var(--ink); }
.busy { margin: 0; color: var(--muted); font-style: italic; font-family: var(--serif); }
.busy::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.hint { margin: 0; text-align: center; color: var(--muted); font-size: .9rem; }

.stake-card { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; background: color-mix(in srgb, var(--panel) 60%, transparent); }
.stake-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stake { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; padding: 3px 12px; border-radius: 999px; background: var(--accent); color: var(--bg); }
.stake.hard, .stake.impossible { background: var(--accent2); }
.stake.easy { background: color-mix(in srgb, var(--accent) 60%, var(--ink)); }
.stake-rule { font-size: .85rem; color: var(--muted); }
.stake-line { margin: 0; font-family: var(--serif); font-size: 1.08rem; }
.stake-why { margin: 0; font-size: .85rem; color: var(--accent); }

/* Dice */
.dice { display: flex; justify-content: center; gap: 16px; padding: 6px 0; }
.die { --size: 76px; width: var(--size); height: var(--size); padding: calc(var(--size) * .14); border: 0; border-radius: calc(var(--size) * .2); background: var(--ink); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); place-items: center; box-shadow: 0 5px 0 color-mix(in srgb, var(--ink) 55%, #000), 0 12px 22px rgba(0, 0, 0, .35); }
.die.small { --size: 26px; box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 55%, #000); }
.logo-dice .die.small { --size: 46px; }
.pip { width: 62%; aspect-ratio: 1; border-radius: 50%; }
.pip.on { background: var(--bg); }
button.die { transition: transform .12s; }
button.die:hover { transform: translateY(-4px) rotate(-4deg); outline: 2px dashed var(--accent); outline-offset: 4px; }
.die.rolling { animation: tumble .32s linear infinite; }
@keyframes tumble { 0% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-12px) rotate(90deg); } 50% { transform: translateY(0) rotate(180deg); } 75% { transform: translateY(-7px) rotate(270deg); } 100% { transform: translateY(0) rotate(360deg); } }
.mini-dice { display: inline-flex; gap: 4px; }
.conds { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; transition: opacity .2s; }
.cond { font-size: .8rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.cond.on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.result { text-align: center; font-family: var(--serif); font-size: 1.7rem; font-weight: 700; transition: opacity .2s; }
.result.fail { color: var(--accent2); }
.result.success, .result.strong { color: var(--accent); }
.result.legendary { color: var(--accent); text-shadow: 0 0 22px var(--accent); letter-spacing: .04em; }
.wait { opacity: 0; pointer-events: none; }

/* Ending */
.ending { align-items: center; text-align: center; }
.ending .narration { text-align: left; width: 100%; }
.ending-label { margin: 12px 0 0; font-weight: 800; letter-spacing: .14em; color: var(--accent); }
.ending-label.defeat, .ending-label.timeout { color: var(--accent2); }
.epitaph { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--muted); }
.fate-card { width: min(100%, 420px); height: auto; border-radius: var(--radius); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.ending .menu { width: min(100%, 380px); }

/* Sheets and toast */
.sheet { width: min(94vw, 620px); max-height: 88vh; overflow: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.sheet::backdrop { background: rgba(0, 0, 0, .6); }
.sheet > * + * { margin-top: 14px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.sheet-head h2 { margin: 0; font-family: var(--serif); }
.toggle { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.toggle input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--accent); flex: none; }
.toggle span { display: grid; }
.toggle small { color: var(--muted); font-size: .84rem; }
.log { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.log li { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 6px; }
.log p { margin: 0; }
.log-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); width: max-content; max-width: min(92vw, 560px); background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 12px; font-size: .92rem; font-weight: 500; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); z-index: 50; }

@media (max-width: 480px) {
  .die { --size: 64px; }
  .narration-text { font-size: 1.06rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.note { color: var(--muted); font-size: .84rem; }

/* Square edges everywhere, to match the play screen. */
.btn, .chip, .option, input[type="text"], input[type="password"], textarea, select, .sheet, .journey, .stake-card, .stake, .cond, .tier, .toast, .look, .look img, .fate-card, .act-row .btn { border-radius: 0; }
.btn.primary { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }

/* ---------------------------------------------------------------------------------------------
   Menus and type, matched to the play screen ("Tilt + Wedge").
   One sans for reading, one condensed face in capitals for display. No serif anywhere.
   --------------------------------------------------------------------------------------------- */
:root { --display: "Bahnschrift Condensed", "Bahnschrift", "Arial Narrow", "Roboto Condensed", Impact, sans-serif; --serif: var(--sans); --slab: #07090d; --paper: #f2f5f7; }
.narration-text { font-weight: 500; line-height: 1.55; }
.heading, .logo h1, .journey-text h3, .sheet-head h2, .result, .fates h2, .stake, .wedge { font-family: var(--display); text-transform: uppercase; }
.heading { font-weight: 800; letter-spacing: .02em; line-height: .95; font-size: clamp(2.2rem, 6vw, 4rem); }
.premise, .tagline, .meter-note, .busy, .epitaph { font-style: normal; }
.stake-line { font-weight: 600; }
.result { font-weight: 800; letter-spacing: .06em; }
.btn { font: 800 1rem/1.1 var(--display); letter-spacing: .09em; text-transform: uppercase; background: var(--slab); border: 0; border-left: 5px solid var(--accent); padding: 13px 20px; }
.btn.small { font-size: .82rem; padding: 7px 12px; border-left-width: 3px; }
.btn.primary { background: var(--accent); color: var(--slab); border-left: 0; }
.btn.ghost { background: color-mix(in srgb, var(--slab) 55%, transparent); border-left-color: var(--muted); }
.btn:hover:not(:disabled) { transform: translateX(4px); }
.link { font-size: .85rem; }
.field > span, .eyebrow, .genre { font: 700 .7rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
input[type="text"], input[type="password"], textarea, select { background: rgba(255, 255, 255, .07); border: 0; border-bottom: 2px solid var(--accent); }
.option { background: var(--slab); border: 0; border-left: 4px solid var(--line); color: var(--ink); }
.option strong { font: 800 1.05rem/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.option.on { background: var(--accent); color: var(--slab); border-left-color: var(--slab); box-shadow: none; }
.option.on small { color: color-mix(in srgb, var(--slab) 75%, transparent); }
.chip { background: var(--slab); border: 1px solid var(--line); font-weight: 600; transform: skewX(-8deg); }
.chip.on { transform: skewX(-8deg); }
.chip.static { transform: none; }
.narration { background: var(--paper); color: #0b0c10; border: 0; box-shadow: 8px 8px 0 var(--accent); }
.narration .tier { background: var(--slab); border-color: var(--slab); }

/* Backdrop: key art, a dark slanted panel for the words, an accent wedge in the corner. */
.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--bg); }
.backdrop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.backdrop::before { content: ""; position: absolute; inset: 0; background: var(--accent); clip-path: polygon(100% 0, 100% 30%, 76% 0); }
.backdrop::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--slab) 93%, transparent); clip-path: polygon(0 0, 52% 0, 68% 100%, 0 100%); }
.backdrop.plain { background-color: var(--slab); background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent) 22%, transparent 24%); background-size: 12px 12px; }
.backdrop.plain::after { clip-path: none; background: linear-gradient(115deg, var(--slab) 30%, color-mix(in srgb, var(--slab) 60%, transparent) 100%); }
.screen { position: relative; z-index: 1; }
.app:has(.title), .app:has(.pick), .app:has(.hero), .app:has(.ending) { max-width: none; padding: 3vh 4vw 8vh; }

/* Title */
.title { align-items: flex-start; text-align: left; padding-top: 5vh; max-width: min(100%, 560px); gap: 14px; }
.logo { transform: rotate(-3deg); transform-origin: left bottom; }
.logo-dice { justify-content: flex-start; }
.logo-dice .die.small { box-shadow: 4px 4px 0 var(--accent); }
.logo h1 { margin: 10px 0 0; font-weight: 800; font-size: clamp(4.6rem, 15vw, 10rem); line-height: .8; letter-spacing: -.01em; color: var(--paper); text-shadow: .05em .05em 0 var(--slab); }
.logo h1 span { color: var(--accent); }
.tagline { margin: 6px 0 14px; font: 700 .85rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.title .menu { width: min(100%, 440px); gap: 12px; transform: rotate(-2deg); transform-origin: left top; }
.title .menu .btn { text-align: left; font-size: 1.35rem; padding: 16px 22px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.title .menu .btn.primary { font-size: 1.8rem; padding: 18px 22px; }
.narrator-line { font-size: .85rem; color: var(--muted); margin-top: 10px; }
.fates { width: min(100%, 440px); border: 0; background: var(--slab); padding: 14px 16px; border-left: 5px solid var(--accent2); }
.fates h2 { font-size: 1.1rem; letter-spacing: .1em; color: var(--ink); }

/* Journey picker */
.pick .heading { transform: rotate(-2deg); transform-origin: left bottom; text-shadow: .05em .05em 0 var(--slab); }
.journeys { gap: 16px; }
.journey { position: relative; display: block; border: 0; background: var(--slab); min-height: 220px; }
.journey .journey-art { position: absolute; inset: 0; aspect-ratio: auto; min-height: 0; }
.journey::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--slab) 8%, color-mix(in srgb, var(--slab) 55%, transparent) 46%, transparent 75%); }
.journey-text { position: absolute; z-index: 1; inset: auto 0 0 0; padding: 16px 18px; gap: 6px; }
.journey-text .genre { justify-self: start; background: var(--accent); color: var(--slab); padding: 4px 10px; }
.journey-text h3 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 800; line-height: .92; }
.journey-text p { color: var(--ink); font-weight: 500; }
.journey:hover { transform: translateY(-8px); border: 0; }
.journey:hover .key-art { filter: brightness(1.15); }

/* Hero creator */
.hero { max-width: 760px; gap: 18px; }
.hero .premise { color: var(--ink); font-size: 1.05rem; font-weight: 500; }
.hero .btn.wide { font-size: 1.7rem; padding: 18px 22px; }
.look { background: var(--slab); border: 0; border-left: 4px solid var(--line); }
.thumb, .avatar { border-radius: 0; }

/* Ending */
.ending { align-items: flex-start; text-align: left; max-width: 1100px; }
.ending-label { display: inline-block; margin: 8px 0 0; padding: 6px 16px; border: 3px solid currentColor; font: 800 1.5rem/1 var(--display); letter-spacing: .16em; transform: rotate(-3deg); background: color-mix(in srgb, var(--slab) 70%, transparent); }
.ending .heading { text-shadow: .05em .05em 0 var(--slab); }
.epitaph { font: 600 1.15rem/1.4 var(--sans); color: var(--ink); border-left: 4px solid var(--accent); padding-left: 12px; }
.fate-card { box-shadow: 10px 10px 0 var(--accent); }

/* Sheets and toast */
.sheet { background: var(--slab); border: 0; border-left: 6px solid var(--accent); box-shadow: 12px 12px 0 color-mix(in srgb, var(--accent) 60%, transparent); padding: 20px 22px; }
.sheet-head h2 { font-weight: 800; font-size: 1.9rem; letter-spacing: .04em; line-height: 1; }
.toggle strong { font-weight: 700; }
.log li { border-top-color: var(--line); }
.toast { background: var(--slab); color: var(--ink); border-left: 5px solid var(--accent); font-weight: 600; }

@media (orientation: landscape) and (min-width: 900px) {
  .journeys { grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0 3%; }
  .journey { min-height: min(62vh, 560px); margin: 0 -3.2%; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
  .journey-text { padding: 0 17% 7% 12%; }
  .journey:hover { z-index: 2; }
  .hero { max-width: min(760px, 50vw); }
  .fates { position: fixed; right: 4vw; bottom: 5vh; width: min(32vw, 420px); transform: rotate(1.5deg); }
  .ending { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 5vw; align-items: start; }
  .ending > * { grid-column: 1; justify-self: start; }
  .ending > .narration { justify-self: stretch; transform: rotate(-1deg); }
  .ending > .fate-card { grid-column: 2; grid-row: 1 / span 6; width: min(32vw, 400px); transform: rotate(2deg); margin-top: 2vh; }
}
@media (orientation: portrait), (max-width: 899px) {
  /* Narrow screens: the dark panel covers the whole picture so every word stays readable. */
  .backdrop::after { clip-path: none; background: color-mix(in srgb, var(--slab) 82%, transparent); }
  .backdrop::before { clip-path: polygon(100% 0, 100% 12%, 58% 0); }
  .ending { align-items: stretch; } .ending > .fate-card { align-self: center; }
}

/* ---------------------------------------------------------------------------------------------
   Type pass: no thin text. Reading text uses a DIN-style face (Bahnschrift on Windows, DIN on Apple)
   at medium weight, the same family as the condensed display capitals. Small supporting lines are
   set as heavy spaced capitals, like the labels on the play screen.
   --------------------------------------------------------------------------------------------- */
:root { --sans: "Bahnschrift", "DIN Alternate", "DIN Next", "Barlow", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; }
body { font-family: var(--sans); font-weight: 500; }
button, input, textarea, select { font-weight: 600; }
input::placeholder, textarea::placeholder { font-weight: 500; }
.narration-text { font-weight: 500; }
.premise, .hero .premise { font-weight: 700; font-size: 1.15rem; }
.journey-text p { font-weight: 600; }
.stake-line { font-weight: 700; }
.you { font-weight: 600; }

/* Supporting lines: heavy spaced capitals. */
.note, .option small, .skin, .clock small, .narrator-line, .hint, .stake-rule, .stake-why, .look small, .toggle small, .fates span, .source, .busy {
  font: 700 .72rem/1.45 var(--sans); letter-spacing: .09em; text-transform: uppercase; font-style: normal; }
.option small { letter-spacing: .06em; }
.skin { display: inline-block; margin-top: 6px; padding-left: 10px; border-left: 3px solid var(--accent); color: var(--ink); }
.clock small { color: var(--ink); }
.busy { font-size: .85rem; }
.action[data-mode="idle"] .busy { font: 800 1rem/1.3 var(--display); letter-spacing: .1em; }
.toggle strong { font: 800 1.05rem/1.2 var(--display); letter-spacing: .07em; text-transform: uppercase; }
.fates li strong { font: 800 1rem/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; display: block; }
.log-head strong { font: 800 1rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }

/* Chips and tags: display capitals. */
.chip { font: 700 .92rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; padding: 9px 14px; }
.chip.static { font-size: .78rem; padding: 5px 10px; }
.cond, .tier { font-family: var(--display); letter-spacing: .1em; }

/* Back: a small slab, like the menu button. */
.back { align-self: flex-start; display: inline-block; padding: 9px 16px 9px 12px; background: var(--slab); color: var(--ink); border: 0; border-left: 4px solid var(--accent);
  font: 800 .95rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); transition: transform .12s, background .2s; }
.back:hover { background: var(--accent); color: var(--slab); transform: translateX(-4px); }

/* Walk away: a small dark tab under the input instead of an underlined link. */
.link { font: 800 .8rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.retire { font: 700 .78rem/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.action[data-mode="idle"] .retire .link { display: inline-block; padding: 6px 10px; background: var(--slab); color: var(--accent); }
.action[data-mode="idle"] .retire .link:hover { color: var(--paper); }

/* Setup screen: easier to scan. Labels stay as short capitals; the grey explanatory text under them
   is small italic sentence case; alternate areas sit on a faint band. */
.hero { gap: 0; }
.hero > * { margin-bottom: 14px; }
.hero > .field { margin: 0; padding: 14px 16px; gap: 8px; }
.hero > .field:nth-child(even) { background: color-mix(in srgb, var(--paper) 7%, transparent); }
.hero > .btn.wide { margin-top: 18px; }
.help, .hero .note, .hero .option small, .hero .look small { font: italic 500 .8rem/1.35 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.hero .option.on small { color: color-mix(in srgb, var(--slab) 80%, transparent); }
.hero .option small { font-size: .76rem; }

/* Setup wizard: step counter, step title, one area at a time. */
.steps { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.steps b { font: 800 2.6rem/.8 var(--display); color: var(--accent); }
.steps span { font: 800 1.1rem/1 var(--display); color: var(--muted); margin-right: 12px; }
.steps .seg { flex: 1; align-self: center; }
.step-title { margin: 0 0 10px; font: 800 clamp(1.6rem, 3.4vw, 2.3rem)/1 var(--display); letter-spacing: .04em; text-transform: uppercase; transform: rotate(-1.5deg); transform-origin: left bottom; }
.hero > .field, .hero > .field:nth-child(even) { background: color-mix(in srgb, var(--paper) 6%, transparent); margin-bottom: 10px; }
.hero .heading { font-size: clamp(1.8rem, 4.4vw, 3rem); }

/* Logo picture on the title screen. */
.logo h1.has-img { margin: 0; font-size: 0; line-height: 0; text-shadow: none; }
.logo-img { display: block; width: min(100%, 560px); height: auto; filter: drop-shadow(6px 8px 0 rgba(0, 0, 0, .55)); }
.logo h1 .logo-dice { margin-bottom: 10px; }
.title { max-width: min(100%, 600px); }
.title .tagline { margin-top: 2px; }

/* Logo in the in-game menu. */
.sheet-logo { display: block; width: min(60%, 240px); height: auto; margin: 4px 0 0 -6px; }

/* A Legendary result chip on the white story slab. */
.narration .tier.legendary { color: var(--accent); }

input[type="range"] { width: 100%; accent-color: var(--accent); }

/* Peek: a small tab under the menu button (and a tap on the picture) clears the UI off the picture. */
.peek-btn { display: none; }
@media (orientation: landscape) and (min-width: 640px) {
  .peek-btn { display: block; top: 64px; left: 14px; padding: 6px 8px; border: 0; background: var(--slab); color: var(--ink); font: 800 .68rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
  .peek-btn:hover, .play.peek .peek-btn { background: var(--accent); color: var(--slab); }
  .play .stage { cursor: zoom-in; }
  .play.peek .stage { cursor: zoom-out; }
  .play > .dock, .play > .tokens, .play > .clock, .play > .wedge, .play > .menu-btn, .play::before, .play::after, .action[data-mode="live"] { transition: opacity .25s; }
  .play.peek > .dock, .play.peek > .tokens, .play.peek > .clock, .play.peek > .wedge, .play.peek .action[data-mode="live"] { opacity: 0; pointer-events: none; }
  .play.peek::before, .play.peek::after { opacity: 0; }
  .tokens { left: 76px; }
  /* The story slab takes less of the picture; long text scrolls inside it. */
  .narration-text { font-size: clamp(.92rem, .55rem + .75vw, 1.1rem); }
}

/* Title card: shown over the play screen while a new tale's first scene is prepared. */
.title-card { position: fixed; inset: 0; z-index: 20; overflow: hidden; background: var(--slab); cursor: pointer; transition: opacity .5s ease, transform .5s ease; }
.title-card.out { opacity: 0; transform: scale(1.04); pointer-events: none; }
.title-card .key-art, .title-card .drawn { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: card-push 9s ease-out both; }
@keyframes card-push { from { transform: scale(1.08); } to { transform: scale(1); } }
.title-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--accent); clip-path: polygon(100% 0, 100% 34%, 70% 0); }
.title-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--slab) 90%, transparent); clip-path: polygon(0 0, 46% 0, 64% 100%, 0 100%); }
.card-body { position: absolute; z-index: 2; left: 4vw; top: 50%; width: min(52vw, 760px); transform: translateY(-58%) rotate(-3deg); transform-origin: left center; display: grid; justify-items: start; gap: 12px; }
.card-body .genre { background: var(--accent); color: var(--slab); padding: 5px 12px; }
.card-title { margin: 0; font: 800 clamp(2.8rem, 8.4vw, 7.4rem)/.84 var(--display); letter-spacing: -.005em; text-transform: uppercase; color: var(--paper); text-shadow: .06em .06em 0 var(--accent); animation: card-in .6s cubic-bezier(.2, .9, .2, 1) both; }
.card-premise { margin: 6px 0 0; font-weight: 700; font-size: clamp(1rem, 1.7vw, 1.4rem); color: var(--ink); animation: card-in .6s .15s cubic-bezier(.2, .9, .2, 1) both; }
.card-hero { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font: 700 .8rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); animation: card-in .6s .3s cubic-bezier(.2, .9, .2, 1) both; }
.card-hero strong { font: 800 1.5rem/1 var(--display); letter-spacing: .05em; color: var(--accent); }
.card-hero span { padding-left: 14px; border-left: 3px solid var(--accent); }
@keyframes card-in { from { opacity: 0; transform: translateX(-40px); } }
.card-load { position: absolute; z-index: 2; left: 4vw; bottom: 5vh; width: min(52vw, 620px); display: grid; gap: 8px; background: var(--slab); padding: 12px 16px 14px; transform: rotate(-3deg); transform-origin: left bottom; box-shadow: 6px 6px 0 var(--accent); }
.card-load .seg { --v: 100%; height: 10px; background: linear-gradient(90deg, rgba(255, 255, 255, .22) 0 30%, var(--accent) 30% 55%, rgba(255, 255, 255, .22) 55% 100%); background-size: 300% 100%; animation: card-scan 1.4s linear infinite; }
@keyframes card-scan { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.card-status { font: 800 .95rem/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.title-card.ready .seg { animation: none; background: var(--accent); }
.title-card.ready .card-status { color: var(--accent); }
@media (orientation: portrait), (max-width: 899px) {
  .title-card::after { clip-path: none; background: color-mix(in srgb, var(--slab) 72%, transparent); }
  .title-card::before { clip-path: polygon(100% 0, 100% 14%, 56% 0); }
  .card-body { left: 6vw; width: 88vw; } .card-load { left: 6vw; width: 86vw; }
}

/* ---- Extras and their cost, the likeness collection, past tales ---- */
.cost-chip { font-size: .82rem; color: var(--muted); }
.extras { gap: 14px; }
.bill { background: var(--slab, #07090d); border-left: 5px solid var(--accent); padding: 14px 16px; display: grid; gap: 8px; }
.bill-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bill-total span { font: 800 .9rem/1 var(--display, inherit); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bill-total strong { font: 800 1.6rem/1 var(--display, inherit); letter-spacing: .03em; text-transform: uppercase; color: var(--accent); }
.bill ul { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: .9rem; }
.bill li { display: flex; justify-content: space-between; gap: 12px; }
.bill li span:last-child { color: var(--muted); white-space: nowrap; }
.bill small { color: var(--muted); font-size: .82rem; }
.narrator-line a, .note a { color: var(--accent); }

.collection { gap: 18px; }
.shelf { display: grid; gap: 8px; }
.shelf h3 { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 800 1.15rem/1.1 var(--display, inherit); letter-spacing: .05em; text-transform: uppercase; border-bottom: 2px solid var(--accent); padding-bottom: 6px; }
.shelf h3 small { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.slot { position: relative; aspect-ratio: 3 / 4; display: grid; align-content: end; padding: 0; overflow: hidden; background: var(--slab, #07090d); border: 1px dashed var(--line); color: var(--muted); text-align: center; }
.slot strong { position: relative; padding: 6px 4px; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; }
.slot .q { position: absolute; inset: 0; display: grid; place-items: center; font: 800 2.6rem/1 var(--display, inherit); opacity: .25; }
.slot.have { border: 2px solid var(--accent); color: var(--ink); cursor: pointer; transition: transform .15s; }
.slot.have:hover { transform: translateY(-3px) rotate(-1deg); }
.slot.have img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.slot.have strong { background: color-mix(in srgb, var(--slab, #07090d) 82%, transparent); }
.likeness-big { display: block; width: 100%; max-height: 62vh; object-fit: contain; background: #000; }

.tales { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tales .btn { width: 100%; display: grid; gap: 2px; text-align: left; }
.tales .btn small { color: var(--muted); font-size: .8rem; font-weight: 400; }
.tale-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }

.look.on { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.look.on small { color: var(--accent); font-weight: 700; }
.slot.have.on { border-color: var(--accent2); }

/* The game's key art behind the menus: the wide cut keeps its right side (the dice) when cropped. */
.backdrop .menu-art { display: block; width: 100%; height: 100%; }
.backdrop .menu-art img { object-position: 78% center; }
@media (orientation: portrait) { .backdrop .menu-art img { object-position: center; } }
@media (orientation: portrait), (max-width: 899px) {
  /* On narrow screens the art shows through at the top and bottom, and dims behind the menu in between. */
  .backdrop:has(.menu-art)::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--slab) 55%, transparent) 0%, color-mix(in srgb, var(--slab) 80%, transparent) 34%, color-mix(in srgb, var(--slab) 80%, transparent) 72%, color-mix(in srgb, var(--slab) 40%, transparent) 100%); }
}

/* The list a dropdown opens is drawn by the browser, which ignores the see-through field colour and
   falls back to white. Give its rows a solid dark background so the light text can be read. */
select option, select optgroup { background-color: #15131f; color: #f3ecdc; }
select option:checked { background-color: #f2c14e; color: #15131f; }

/* ---- Prelude: the goal and the rules before a tale begins (the "Billboard" look) ---- */
.app:has(.prelude) { max-width: none; padding: 0; }
.backdrop.prelude-art::before { display: none; }
.backdrop.prelude-art::after { clip-path: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--slab) 62%, transparent) 0%, color-mix(in srgb, var(--slab) 14%, transparent) 36%, color-mix(in srgb, var(--slab) 93%, transparent) 76%); }
.prelude { min-height: 100dvh; padding: clamp(16px, 3vw, 40px); gap: clamp(12px, 2vw, 22px); }
.pre-head { margin: 0; font: 800 clamp(.85rem, 1.3vw, 1.2rem)/1.1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.pre-lbl { display: block; font: 700 .68rem/1 var(--sans, system-ui); letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.pre-top { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(12px, 3vw, 40px); align-items: start; }
.pre-goal h2 { margin: .45rem 0 0; max-width: 20ch; font: 800 clamp(2rem, min(5.4vw, 9.6vh), 5.2rem)/.9 var(--display); text-transform: uppercase; letter-spacing: .01em; text-shadow: .06em .06em 0 var(--slab); }
.pre-tags { margin: 1.1rem 0 0; max-width: 48ch; font-size: .92rem; line-height: 1.9; text-shadow: 0 1px 2px var(--slab); }
.pre-tags .chip { margin-right: 6px; background: color-mix(in srgb, var(--slab) 70%, transparent); }
.pre-hero { position: relative; width: clamp(120px, min(21vw, 32vh), 300px); aspect-ratio: 3 / 4.3; overflow: hidden; background: var(--slab); border-left: 6px solid var(--accent); transform: rotate(1.5deg);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.pre-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.pre-hero div { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 44px 12px 10px; background: linear-gradient(transparent, color-mix(in srgb, var(--slab) 95%, transparent) 55%); }
.pre-hero strong { font: 800 clamp(1.05rem, 2.2vw, 1.8rem)/1 var(--display); text-transform: uppercase; }
.pre-hero span { font: 700 .64rem/1.2 var(--sans, system-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.pre-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); }
.pre-tile { display: grid; gap: 9px; align-content: start; padding: 14px 16px 18px; background: var(--slab); border-top: 6px solid var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.pre-tile p { margin: 0; font-size: .9rem; line-height: 1.35; opacity: .92; }
.pre-show { min-height: 28px; display: flex; align-items: center; }
.pre-show .seg { width: 100%; }
.pre-lives i { display: inline-block; width: 30px; height: 14px; margin-right: 5px; background: var(--accent2); transform: skewX(-18deg); }
.pre-luck { color: var(--accent); font-size: 1.5rem; line-height: 1; letter-spacing: 3px; }
.pre-dice b { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 5px; background: var(--paper); color: #0a0a0a; font: 800 1.2rem/1 var(--display); }
.pre-foot { display: flex; flex-direction: row-reverse; justify-content: flex-start; align-items: center; gap: 22px; }
.pre-foot .btn { width: auto; padding-inline: 34px; font-size: 1.25rem; }
.pre-skip { display: flex; align-items: center; gap: 8px; cursor: pointer; font: 700 .7rem/1 var(--sans, system-ui); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.pre-skip input { width: 18px; height: 18px; accent-color: var(--accent); }
.sheet .pre-tiles { grid-template-columns: 1fr 1fr; }
@media (orientation: portrait), (max-width: 760px) {
  /* A phone held upright: the goal beside the hero, the rules two by two, one wide button. */
  .backdrop.prelude-art::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--slab) 62%, transparent) 0%, color-mix(in srgb, var(--slab) 22%, transparent) 22%, color-mix(in srgb, var(--slab) 95%, transparent) 46%, var(--slab) 100%); }
  .pre-top { flex: none; grid-template-columns: minmax(0, 1fr) minmax(0, 34vw); min-height: 44vw; }
  .pre-goal h2 { font-size: clamp(1.8rem, 9.4vw, 3.4rem); max-width: 15ch; }
  .pre-hero { width: 100%; margin-top: 8vw; }
  .pre-tags { grid-column: 1 / -1; }
  .pre-tiles { grid-template-columns: 1fr 1fr; }
  .prelude { justify-content: flex-start; }
  .pre-foot { flex-direction: column; align-items: stretch; margin-top: auto; gap: 14px; }
  .pre-foot .btn { width: 100%; }
  .pre-skip { justify-content: center; }
}

/* ---- Trophy case: the likeness collection as a lit cabinet, one shelf per universe ---- */
.case-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.case-stat { display: flex; align-items: baseline; gap: 8px; }
.case-stat b { font: 800 clamp(2rem, 5vw, 3.2rem)/.9 var(--display); color: var(--accent); }
.case-stat span { font: 700 .7rem/1.2 var(--sans, system-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.case-bar { width: min(100%, 520px); }
.cabinet { display: grid; gap: 26px; padding: clamp(14px, 2.4vw, 28px); background: linear-gradient(to bottom, color-mix(in srgb, var(--slab) 94%, transparent), color-mix(in srgb, var(--slab) 86%, transparent)); border: 2px solid color-mix(in srgb, var(--ink) 18%, transparent); box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--slab) 80%, transparent), inset 0 0 60px rgba(0, 0, 0, .7); }
.universe { position: relative; padding-bottom: 14px; }
.universe h3 { border-bottom: 0; padding-bottom: 0; }
.universe h3 span { display: inline-block; background: var(--accent); color: var(--slab); padding: 5px 12px 4px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.universe.full h3 small { color: var(--accent); }
.universe .slots { position: relative; z-index: 1; gap: clamp(8px, 1.4vw, 18px); padding: 0 clamp(4px, 1vw, 14px); }
/* The glass shelf the trophies stand on, with a strip of light along its front edge. */
.universe .glass { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 70%, #fff) 0 2px, color-mix(in srgb, var(--accent) 22%, transparent) 2px 100%); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 22%, transparent); }
.slot.trophy { border: 3px solid var(--accent); background: #000; box-shadow: 0 -18px 40px -12px color-mix(in srgb, var(--accent) 55%, transparent); }
.slot.trophy::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% -10%, rgba(255, 255, 255, .34), transparent 58%); }
.slot.trophy:hover { transform: translateY(-6px); }
.slot.trophy .plaque { position: relative; z-index: 2; display: grid; gap: 1px; margin: 0 6px 6px; padding: 5px 4px 4px; text-align: center; color: #241a05; background: linear-gradient(135deg, #f6e3a1, #c79a2e 55%, #f1d27a); box-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.slot.trophy .plaque b { font: 800 .86rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; }
.slot.trophy .plaque em { font: 700 .56rem/1.1 var(--sans, system-ui); font-style: normal; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.slot.empty { background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%), color-mix(in srgb, var(--slab) 70%, #000); }
.universe.full .glass { background: linear-gradient(to bottom, #fff 0 2px, color-mix(in srgb, var(--accent) 45%, transparent) 2px 100%); }

/* Sharing a tale by link */
.share-box { display: grid; gap: 8px; padding: 12px 14px; background: color-mix(in srgb, var(--accent) 10%, transparent); border-left: 4px solid var(--accent); }
.share-box input { font-size: .86rem; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-row .btn { width: auto; text-decoration: none; }

/* ---- Trophy room: tabs, the 3D view and the likeness picker ---- */
.tabs { display: flex; gap: 6px; border-bottom: 2px solid var(--line); }
.tab { background: none; border: 0; padding: 10px 18px; font: 800 1rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 4px solid transparent; margin-bottom: -2px; }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.room { position: relative; height: min(72vh, 680px); min-height: 360px; background: #0a0c12; border: 2px solid color-mix(in srgb, var(--ink) 18%, transparent); overflow: hidden; }
.room-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.room-canvas:active { cursor: grabbing; }
.room-wait { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; text-align: center; color: var(--muted); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }

/* Report link on public pages, and its box. */
.report-link { background: none; border: 0; padding: 4px 0; color: var(--muted); font: 700 .72rem/1 var(--sans, system-ui); letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.report-link:hover { color: var(--ink); }
.sheet.report { width: min(92vw, 460px); }
.sheet.report h2 { margin: 0; font: 800 1.6rem/1 var(--display); text-transform: uppercase; }
.sheet.report textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); font: inherit; resize: vertical; }
.w-report { display: flex; justify-content: flex-end; margin-top: 6px; }

/* Speak an action: the mic button and its status line. */
.act-row .btn.mic { padding-inline: 14px; min-width: 76px; }
.act-row .btn.mic[data-state="on"] { background: #c8322b; color: #fff; border-color: #c8322b; animation: mic-pulse 1.1s ease-in-out infinite; }
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 6px rgba(200, 50, 43, .35); } }
@media (prefers-reduced-motion: reduce) { .act-row .btn.mic[data-state="on"] { animation: none; } }
.mic-note { margin: 0; color: var(--muted); font-size: .82rem; min-height: 0; }
.mic-note:empty { display: none; }

/* Hear the scene's voice again. */
.voice-again { margin-left: auto; background: none; border: 2px solid currentColor; padding: 5px 10px; font: 800 .72rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: inherit; cursor: pointer; }
.voice-again[data-on="true"] { background: #0b0c10; color: var(--paper); border-color: #0b0c10; }