/* =========================================================
   ONCE UPON A DICE — Homepage (free digital + printed decks)
   Self-contained: does not load main.css or rebrand.css,
   so nothing here needs !important to win.
   ========================================================= */

:root {
    --black: #000000;          /* must stay pure black: hero-logo.png has a #000 background */
    --felt: #1A1A1A;           /* brand near-black, raised surfaces */
    --felt-deep: #0F0F0F;
    --line: rgba(237, 227, 204, 0.14);
    --line-strong: rgba(237, 227, 204, 0.28);
    --text: #EDE3CC;           /* parchment */
    --muted: #A99D86;
    --gold: #C8941A;
    --gold-hi: #DDA83A;
    --red: #990000;
    --red-hi: #B31414;
    --dev-bg: rgba(20, 14, 36, 0.9);
    --dev-ink: rgba(205, 188, 255, 0.82);
    --dev-line: rgba(180, 140, 255, 0.25);

    --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sans: 'Jost', 'Segoe UI', system-ui, sans-serif;

    --wrap: 1200px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --radius: 10px;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
    margin: 0;
    background: var(--black);
    color: var(--text);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.05; margin: 0; }
p { margin: 0; }

:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 4px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
    position: absolute; left: 1rem; top: -3rem; z-index: 200;
    background: var(--gold); color: #000; padding: 0.5rem 1rem; border-radius: 6px;
    font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 1.5rem;
    border-radius: 999px; border: 2px solid transparent;
    font: 600 1rem/1 var(--sans); letter-spacing: 0.01em;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-sm { min-height: 40px; padding: 0 1.1rem; font-size: 0.9375rem; }
.btn-play { background: var(--gold); color: #120C00; }
.btn-play:hover { background: var(--gold-hi); }
.btn-buy { background: var(--red); color: #FFF4E6; }
.btn-buy:hover { background: var(--red-hi); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--text); }
.btn:disabled { opacity: 0.6; cursor: default; }

.text-link {
    color: var(--gold-hi); font-weight: 500; text-decoration: underline;
    text-decoration-color: rgba(221, 168, 58, 0.4); text-underline-offset: 0.2em;
}
.text-link:hover { text-decoration-color: currentColor; }

.meta { color: var(--muted); font-size: 0.9375rem; }

/* ---------- Hero ---------- */
.hero {
    max-width: var(--wrap); margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(3rem, 6vw, 5rem);
    display: grid; grid-template-columns: minmax(240px, 0.8fr) 1.2fr;
    gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero-logo img {
    width: 100%; max-width: 420px; height: auto; margin: 0 auto;
    clip-path: inset(0 1px 0 0); /* hides a faint grey column on the image's right edge */
}
.hero h1 {
    font-size: clamp(3rem, 6.6vw, 5.75rem);
    line-height: 0.92; letter-spacing: -0.015em;
    color: var(--text);
}
.hero-lede {
    margin-top: 1.4rem; max-width: 34em;
    font-size: 1.125rem; color: var(--muted);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; }

/* Floating dice, carried over from the previous homepage */
.hero { position: relative; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-logo, .hero-copy { position: relative; z-index: 1; }
.floating-die {
    position: absolute; font-size: 3rem; line-height: 1;
    opacity: 0.15; filter: blur(1px);
    animation: float 20s infinite ease-in-out;
}
.floating-die--1 { top: 10%; left: 10%; }
.floating-die--2 { top: 30%; right: 15%; font-size: 2.5rem; animation-delay: -6s; }
@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.1; }
    25% { transform: translate(30px, -30px) rotate(90deg); opacity: 0.2; }
    50% { transform: translate(-20px, 20px) rotate(180deg); opacity: 0.15; }
    75% { transform: translate(20px, -40px) rotate(270deg); opacity: 0.2; }
}
@media (max-width: 768px) { .floating-die { font-size: 2rem; } }

/* The fanned hand: the one bold moment on the page */
.fan {
    --cw: clamp(96px, 13vw, 158px);
    --spread: 1;
    position: relative;
    height: calc(var(--cw) * 1.4 + 2.5rem);
    margin-top: 2.5rem; margin-bottom: 3rem;
    max-width: 560px;
}
.fan-card {
    position: absolute; left: 50%; bottom: 0;
    width: var(--cw); aspect-ratio: 5 / 7; margin-left: calc(var(--cw) / -2);
    border-radius: 9px; overflow: hidden;
    transform-origin: 50% 260%;
    transform: rotate(calc(var(--r) * var(--spread)));
    z-index: calc(5 - var(--i)); /* left card on top: playable decks stay fully visible */
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(237, 227, 204, 0.16);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    animation: deal 0.6s cubic-bezier(0.2, 0.8, 0.25, 1) backwards;
    animation-delay: calc(0.25s + var(--i) * 0.09s);
    text-decoration: none;
}
.fan-card img { width: 100%; height: 100%; object-fit: cover; }
.fan-card:hover, .fan-card:focus-visible {
    transform: rotate(calc(var(--r) * var(--spread))) translateY(-26px);
    z-index: 10;
    box-shadow: 0 22px 36px rgba(0, 0, 0, 0.85), 0 0 0 2px var(--gold);
    outline: none;
}
.fan-tag {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 0.45rem 0.4rem; text-align: center;
    font: 600 0.72rem/1.2 var(--sans); color: var(--text);
    background: rgba(0, 0, 0, 0.82);
    opacity: 0; transform: translateY(100%);
    transition: opacity 0.18s, transform 0.18s;
}
.fan-tag--play { background: var(--gold); color: #120C00; }
.fan-card:hover .fan-tag, .fan-card:focus-visible .fan-tag { opacity: 1; transform: none; }
@keyframes deal {
    from { transform: rotate(0deg) translateY(70px); opacity: 0; }
}
.fan-note { margin-top: 1rem; font-size: 0.9375rem; color: var(--muted); }

/* ---------- Generic section ---------- */
.section {
    max-width: var(--wrap); margin: 0 auto;
    padding: clamp(3.5rem, 7vw, 6rem) var(--gutter);
}
.section-head { margin-bottom: 2.25rem; max-width: 40em; }
.section-head h2, .support h2, .teaser h2 { font-size: clamp(2.2rem, 4vw, 3.25rem); }
.section-head p { margin-top: 0.6rem; color: var(--muted); font-size: 1.0625rem; }

/* ---------- Playable now ---------- */
.play-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.play-panel {
    border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
    background: var(--felt); display: flex; flex-direction: column;
}
.play-art {
    position: relative; height: 230px;
    display: flex; justify-content: center; align-items: flex-end;
    padding-bottom: 1.5rem;
}
.play-panel--bbb .play-art { background: #2A1942; }
.play-panel--hma .play-art { background: #241A0B; }
.play-panel--sr .play-art { background: #182219; }
.play-art img {
    width: 110px; aspect-ratio: 5 / 7; object-fit: cover;
    border-radius: 7px; margin: 0 -22px;
    transform: rotate(var(--r)); transform-origin: 50% 140%;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
}
.play-art img:nth-child(2) { z-index: 1; }
.play-body { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.play-body h3 { font-size: 1.85rem; }
.play-body p:not(.meta) { max-width: 36em; }
.play-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
    margin-top: auto; padding-top: 0.9rem;
}

/* ---------- The shelf ---------- */
.shelf { border-top: 1px solid var(--line-strong); }
.shelf-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px 210px;
    gap: 1.5rem; align-items: center;
    padding: 1.35rem 0; border-bottom: 1px solid var(--line);
}
.shelf-head { padding: 0.75rem 0; font-size: 0.875rem; color: var(--muted); font-weight: 500; }
.shelf-game { display: flex; gap: 1.25rem; align-items: center; }
.shelf-game img { width: 68px; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 6px; flex: none; }
.shelf-game h3 { font-size: 1.6rem; }
.shelf-game h3 a { text-decoration: none; }
.shelf-game h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.15em; }
.shelf-game h3 small { font: 400 0.85rem var(--sans); color: var(--muted); margin-left: 0.35rem; }
.shelf-game p:not(.meta) { margin-top: 0.2rem; max-width: 38em; }
.shelf-game .meta { margin-top: 0.15rem; font-size: 0.875rem; }
.shelf-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.status { font-size: 0.9rem; color: var(--muted); }
.status--live { color: var(--text); display: inline-flex; align-items: center; gap: 0.45rem; }
.status--live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.price { font: 600 1.75rem/1 var(--serif); }

/* "Coming soon" rubber stamp (fan card) and ribbon (shelf thumbnail) */
.stamp {
    position: absolute; top: 42%; left: 50%; z-index: 2;
    transform: translate(-50%, -50%) rotate(-14deg);
    padding: 0.35em 0.6em; border: 3px solid #B31414; border-radius: 5px;
    background: rgba(255, 248, 236, 0.9); color: #B31414;
    font: 700 clamp(0.6rem, 1.2vw, 0.95rem)/1.05 var(--sans);
    letter-spacing: 0.08em; text-transform: uppercase; text-align: center; white-space: nowrap;
    box-shadow: inset 0 0 0 2px rgba(255, 248, 236, 0.9), inset 0 0 0 3px rgba(179, 20, 20, 0.5);
    pointer-events: none;
}
.fan-card .stamp { left: 61%; top: 45%; font-size: clamp(0.55rem, 1.05vw, 0.85rem); } /* sits in the part of the last card that isn't overlapped */
.soon-thumb { position: relative; flex: none; border-radius: 6px; overflow: hidden; }
.soon-thumb img { border-radius: 0; }
.soon-ribbon {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 0.2rem 0; text-align: center;
    font: 600 0.56rem/1.3 var(--sans); white-space: nowrap;
    background: rgba(153, 0, 0, 0.92); color: #FFF4E6;
}

/* In-development treatment (brand convention: purple frosted ribbon + greyscale) */
.dev-ribbon {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 0.2rem 0; text-align: center;
    font: 600 0.56rem/1.3 var(--sans); white-space: nowrap;
    background: var(--dev-bg); color: var(--dev-ink);
    border-top: 1px solid var(--dev-line); backdrop-filter: blur(4px);
}

/* ---------- Why free + support ---------- */
.support { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.support-why p { margin-top: 1.1rem; max-width: 32em; font-family: var(--serif); font-size: 1.4rem; line-height: 1.5; }
.support-why p + p { color: var(--muted); }
.support-ways { border-top: 1px solid var(--line-strong); }
.way { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.way h3 { font-size: 1.6rem; }
.way p { margin-top: 0.35rem; color: var(--muted); max-width: 34em; }
.way .text-link { display: inline-block; margin-top: 0.7rem; }
.newsletter-form { display: flex; gap: 0.6rem; margin-top: 1rem; max-width: 460px; }
.newsletter-form input {
    flex: 1; min-width: 0; min-height: 48px; padding: 0 1.1rem;
    border-radius: 999px; border: 1px solid var(--line-strong);
    background: var(--felt-deep); color: var(--text); font: 400 1rem var(--sans);
}
.newsletter-form input::placeholder { color: #7D735F; }
.newsletter-form input:focus { outline: 2px solid var(--gold-hi); outline-offset: 1px; border-color: transparent; }
.form-msg { margin-top: 0.6rem; color: var(--gold-hi); }
.form-msg:empty { display: none; }

/* ---------- Podcast ---------- */
.podcast { background: var(--felt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.podcast-inner {
    max-width: var(--wrap); margin: 0 auto;
    padding: clamp(3.5rem, 7vw, 6rem) var(--gutter);
    display: grid; grid-template-columns: minmax(220px, 340px) 1fr;
    gap: clamp(2rem, 6vw, 4.5rem); align-items: center;
}
.podcast-cover {
    aspect-ratio: 1; background: var(--black);
    border: 1px solid var(--gold); outline: 1px solid rgba(200, 148, 26, 0.35); outline-offset: 6px;
    border-radius: 4px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1.5rem; gap: 0.5rem; overflow: hidden;
}
.podcast-cover { text-decoration: none; transition: border-color 0.15s; }
.podcast-cover:hover { border-color: var(--gold-hi); }
.podcast-cover img { width: 76%; height: auto; aspect-ratio: 600 / 540; object-fit: cover; object-position: 50% 54%; }
.podcast-cover-title { font: 600 1.5rem/1 var(--serif); max-width: 10em; margin-top: -0.25rem; text-align: center; color: var(--gold-hi); }
.podcast-copy h2 { font-size: clamp(2.4rem, 4.6vw, 3.75rem); }
.podcast-lede { margin-top: 1rem; font-size: 1.125rem; color: var(--muted); max-width: 36em; }
.episode {
    display: block; text-decoration: none; transition: background-color 0.15s;
    margin-top: 1.75rem; padding: 1.25rem 1.4rem;
    background: var(--black); border-radius: var(--radius); border-left: 3px solid var(--gold);
    max-width: 40em;
}
.episode:hover { background: var(--felt-deep); }
.episode-label { display: block; font-size: 0.85rem; color: var(--muted); }
.episode-desc { display: block; }
.episode-title { display: block; font: 600 1.5rem/1.15 var(--serif); margin-top: 0.2rem; }
.episode-desc { margin-top: 0.4rem; color: var(--muted); font-size: 0.975rem; }
.listen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.5rem; }
.listen-link {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.15rem;
    border: 1px solid var(--line-strong); border-radius: 999px;
    text-decoration: none; font-weight: 500; font-size: 0.95rem;
    transition: border-color 0.15s, color 0.15s;
}
.listen-link:hover { border-color: var(--gold); color: var(--gold-hi); }
.listen-link.is-soon { color: #6E6555; border-style: dashed; border-color: rgba(237, 227, 204, 0.16); cursor: default; gap: 0.4rem; }
.listen-link.is-soon:hover { color: #6E6555; border-color: rgba(237, 227, 204, 0.16); }
.listen-link small { font-size: 0.75rem; }

/* ---------- Events + news ---------- */
.table-talk { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.teaser { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.teaser h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.event, .news {
    align-self: stretch; text-decoration: none;
    background: var(--felt); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.25rem 1.4rem; transition: border-color 0.15s;
}
.event:hover, .news:hover { border-color: var(--gold); }
.event { display: flex; gap: 1.25rem; align-items: flex-start; }
.event--quiet { border-style: dashed; }
.event--quiet:hover { border-color: var(--line); }
.event-date {
    flex: none; width: 72px; text-align: center; padding: 0.5rem 0;
    border: 1px solid var(--gold); border-radius: 6px; line-height: 1.1;
}
.event-month { display: block; font-size: 0.85rem; color: var(--gold-hi); font-weight: 600; }
.event-days { display: block; font: 600 1.35rem var(--serif); }
.event-info { display: flex; flex-direction: column; gap: 0.15rem; }
.event-info strong, .news-title { font: 600 1.4rem/1.15 var(--serif); }
.event-info span { color: var(--muted); font-size: 0.95rem; }
.event-info .event-desc { color: var(--text); margin-top: 0.35rem; }
.news { display: flex; flex-direction: column; gap: 0.3rem; }
.news-date { font-size: 0.875rem; color: var(--muted); }
.news-summary { color: var(--muted); }

/* ---------- On the workbench (in development, deliberately quiet) ---------- */
.workbench { padding-top: 0; }
.workbench h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.workbench-intro { margin-top: 0.4rem; color: var(--muted); font-size: 0.95rem; }
.workbench-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2.5rem; margin-top: 1.4rem; }
.wip { display: flex; gap: 1.1rem; align-items: flex-start; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.wip-thumb { position: relative; flex: none; width: 76px; height: 76px; border-radius: 6px; overflow: hidden; }
.wip-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(75%) brightness(0.75); }
.wip-body h3 { font-size: 1.3rem; color: var(--muted); }
.wip-body h3 a { text-decoration: none; }
.wip-body h3 a:hover { color: var(--text); }
.wip-body p { margin-top: 0.25rem; font-size: 0.925rem; color: var(--muted); max-width: 34em; }
.wip-links { display: flex; gap: 1.1rem; }
@media (max-width: 900px) { .workbench-list { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); }
.footer-inner {
    max-width: var(--wrap); margin: 0 auto; padding: 3.5rem var(--gutter) 2rem;
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem;
}
.footer-brand img { height: 56px; width: auto; }
.footer-brand p { margin-top: 0.75rem; color: var(--muted); font-size: 0.95rem; }
.footer-col { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col h2 { font: 600 0.95rem var(--sans); color: var(--text); margin-bottom: 0.25rem; }
.footer-col a { color: var(--muted); text-decoration: none; font-size: 0.95rem; overflow-wrap: anywhere; }
.footer-col a:hover { color: var(--gold-hi); }
.footer-legal {
    max-width: var(--wrap); margin: 0 auto; padding: 1.25rem var(--gutter) 2.5rem;
    color: #75695A; font-size: 0.875rem; border-top: 1px solid var(--line);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) and (min-width: 901px) {
    .play-art img { width: 92px; margin: 0 -18px; }
    .play-art { height: 200px; }
}

@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; text-align: left; }
    .hero-logo img { max-width: 260px; }
    .fan { margin-left: auto; margin-right: auto; }
    .fan-note { text-align: center; }
    .play-grid, .support, .table-talk { grid-template-columns: 1fr; }
    .play-grid { max-width: 560px; }
    .podcast-inner { grid-template-columns: 1fr; }
    .podcast-cover { max-width: 300px; }
    .footer-inner { grid-template-columns: 1fr 1fr; }

    .shelf-head { display: none; }
    .shelf-row { grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; padding: 1.5rem 0; }
    .shelf-game { grid-column: 1 / -1; }
    .shelf-cell::before {
        content: attr(data-label); font-size: 0.8rem; color: var(--muted); font-weight: 500;
    }
}

@media (max-width: 520px) {
    body { font-size: 1rem; }
    .hero-actions .btn { flex: 1 1 100%; }
    .fan { --cw: 27vw; --spread: 0.7; height: calc(var(--cw) * 1.4 + 2rem); }
    .dev-ribbon { font-size: 0.5rem; }
    .play-art { height: 190px; }
    .play-art img { width: 96px; }
    .play-body { padding: 1.4rem 1.25rem 1.6rem; }
    .shelf-game img, .soon-thumb { width: 56px; }
    .soon-ribbon { font-size: 0.5rem; }
    .shelf-game h3 small { display: block; margin: 0.15rem 0 0; }
    .newsletter-form { flex-direction: column; }
    .footer-inner { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .fan-card { animation: none; transition: none; }
    .floating-die { animation: none; }
    .fan-tag { transition: none; }
}

/* Touch devices can't hover: always show the tag on the playable cards */
@media (hover: none) {
    .fan-tag--play { opacity: 1; transform: none; }
}