/* ============================================================
   Medieval Solutions — the website around the game: the scroll under
   the title chamber (index.html) and the hall of Solutioneers
   (about.html). Words from data/site.json, built by js/site.js.
   Same parchment, same type ranks: Mavpixel for headings and
   punchlines, Pangolin for reading, Mavsmooth only on the cards.
   ============================================================ */

/* ── Shared pieces ── */
.site-card { width: 92px; rotate: var(--tilt, 0deg); transition: rotate .25s, translate .25s; }
.site-card .card { width: 100%; background: var(--card-bg); border: 2px solid var(--card-brd); border-radius: var(--card-radius); box-shadow: 0 3px 0 var(--tan); }
.site-card .card-art { flex: 1; display: flex; align-items: center; justify-content: center; }
.site-card .card-art img { width: 62%; image-rendering: pixelated; }
.site-fan { display: flex; justify-content: center; margin: 14px 0 6px; }
.site-fan .site-card + .site-card { margin-left: -18px; }
.site-fan:hover .site-card { translate: 0 -4px; }
.site-fan.small .site-card { width: 64px; }
.site-fan.small .site-card + .site-card { margin-left: -14px; }

.punch { font-family: var(--font-pixel); color: var(--red); font-size: 1.3rem; line-height: 1.25; margin: 10px 0; text-wrap: balance; }
.small { font-size: .9rem; color: var(--ink3); }
.text-link { color: var(--red); font-weight: bold; }

/* ── The chamber's scroll (index.html) ── */
.chamber-scroll { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 36px; }
.chamber-scroll section {
    padding: 26px 4px 28px; border-top: 2px dashed var(--tan);
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
.chamber-scroll h2 { margin: 0 0 6px; font-family: var(--font-pixel); font-weight: normal; color: var(--red); font-size: 1.7rem; text-wrap: balance; }
.chamber-scroll p { margin: 6px 0; max-width: 400px; line-height: 1.5; color: var(--ink2); }
.chamber-scroll .big { font-family: var(--font-pixel); color: var(--ink); font-size: 1.45rem; margin-top: 12px; }

.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 420px; margin-top: 10px; }
.door {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px;
    background: var(--parch); border: 2px solid var(--parch-brd); border-radius: 12px; box-shadow: 0 3px 0 var(--tan);
    text-decoration: none; color: var(--ink); transition: translate .15s, box-shadow .15s;
}
.door:hover { translate: 0 -2px; box-shadow: 0 5px 0 var(--tan); }
.door:active { translate: 0 2px; box-shadow: 0 1px 0 var(--tan); }
.door .icon { width: 40px; height: 40px; image-rendering: pixelated; }
.door b { font-family: var(--font-pixel); font-weight: normal; color: var(--red); font-size: 1.1rem; }
.door span { font-size: .82rem; color: var(--ink2); }

.badges { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; width: 100%; max-width: 400px; text-align: left; }
.badges li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: #fff; border: 2px solid var(--tan); border-radius: 12px; }
.badges .icon { width: 34px; height: 34px; image-rendering: pixelated; flex-shrink: 0; }
.badges span { font-size: .9rem; color: var(--ink2); line-height: 1.35; }
.badges b { display: block; color: var(--ink); }


/* ── The hall (about.html) ── */
.hall-page { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-ui); }
.hall-page * { box-sizing: border-box; }

/* The way back up: a tab hanging from the top edge, like the side tabs turned on end. */
.signpost.up {
    position: absolute; top: 0; left: 50%; translate: -50% 0; flex-direction: row;
    border-top: none; border-radius: 0 0 10px 10px; transform: none; padding: 8px 16px;
}
.signpost.up span { writing-mode: horizontal-tb; rotate: none; }
.signpost.up .icon { order: 0; }
.signpost.up:hover { translate: -50% 4px; }
html:not(.arrived) .signpost.up { animation: tab-in-top .5s .4s cubic-bezier(.3, 1.4, .5, 1) backwards; }
@keyframes tab-in-top { from { translate: -50% -100%; } }

.hall-head { max-width: 640px; margin: 0 auto; padding: 72px 20px 8px; text-align: center; }
.hall-banner { width: 64px; image-rendering: pixelated; }
.hall-head h1 { margin: 4px 0 6px; font-family: var(--font-pixel); font-weight: normal; color: var(--red); font-size: clamp(1.9rem, 7vw, 2.6rem); text-wrap: balance; }
.hall-head .lede { margin: 0 auto; max-width: 440px; color: var(--ink2); line-height: 1.5; }
.hall-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 18px 0 0; }
.hall-nav a { padding: 5px 12px; border: 2px solid var(--tan); border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; font-size: .9rem; }
.hall-nav a:hover { border-color: var(--red); color: var(--red); }

.hall { max-width: 640px; margin: 0 auto; padding: 0 20px 20px; }
.hall-section { padding: 30px 0 26px; border-top: 2px dashed var(--tan); margin-top: 22px; scroll-margin-top: 16px; }
.hall-section h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-family: var(--font-pixel); font-weight: normal; color: var(--red); font-size: 1.8rem; }
.hall-section h2 .icon { width: 36px; height: 36px; image-rendering: pixelated; }
.hall-section h3 { margin: 22px 0 4px; font-family: var(--font-pixel); font-weight: normal; color: var(--red); font-size: 1.3rem; }
.hall-section p { margin: 8px 0; line-height: 1.55; max-width: 62ch; }
.hall-section .lede { font-size: 1.1rem; color: var(--ink); }
.hall-section .aside { color: var(--ink3); font-style: italic; }
.hall-section .pull { font-family: var(--font-pixel); color: var(--red); font-size: 1.35rem; margin: 16px 0; }

.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 14px 0; }
.dl {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 14px 16px;
    background: var(--parch); border: 2px solid var(--parch-brd); border-radius: 14px; box-shadow: 0 3px 0 var(--tan);
    color: var(--ink); text-decoration: none; transition: translate .15s, box-shadow .15s;
}
.dl:hover { translate: 0 -2px; box-shadow: 0 5px 0 var(--tan); }
.dl b { font-family: var(--font-pixel); font-weight: normal; color: var(--red); font-size: 1.2rem; }
.dl span { font-size: .85rem; color: var(--ink2); }
.dl .site-fan { margin: 2px 0 6px; }
.dl-langs { margin: -4px 0 14px; font-size: .9rem; text-align: center; }
.dl-langs a { white-space: nowrap; }
.dl-icon { height: 96px; display: flex; align-items: center; }
.dl-icon .icon { width: 64px; height: 64px; image-rendering: pixelated; }

.notice { text-align: center; }
.notice h2 { justify-content: center; }
.notice p { margin-left: auto; margin-right: auto; }
.notice .mail { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.notice .mail .ms-btn { padding: 10px 22px; }
.notice .addr { user-select: all; color: var(--ink2); font-size: .9rem; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-top: 14px; }
.tile { padding: 14px; background: #fff; border: 2px solid var(--tan); border-radius: 14px; }
.tile .icon { width: 34px; height: 34px; image-rendering: pixelated; }
.tile h3 { margin: 6px 0 2px; font-size: 1.15rem; }
.tile p { font-size: .92rem; color: var(--ink2); margin: 6px 0; }

.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0 6px; }
.member {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 16px 10px 14px;
    background: var(--parch); border: 2px solid var(--parch-brd); border-radius: 14px; color: var(--ink); text-decoration: none;
}
.member b { font-size: 1.05rem; }
.member .title { font-family: var(--font-pixel); color: var(--red); font-size: 1rem; }
.member .role { font-size: .82rem; color: var(--ink2); }

.translators, .names { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.translators li, .names li { padding: 4px 10px; background: #fff; border: 1.5px solid var(--tan); border-radius: 999px; font-size: .88rem; }
.names li a { color: var(--red); }
.flags { letter-spacing: 2px; }
.join-us { margin-top: 20px; padding: 16px; text-align: center; background: var(--parch); border: 2px dashed var(--parch-brd); border-radius: 14px; }
.join-us .ms-btn { margin-top: 6px; padding: 10px 22px; }

.site-foot { max-width: 640px; margin: 0 auto; padding: 16px 20px 40px; text-align: center; font-size: .85rem; color: var(--ink2); border-top: 2px dashed var(--tan); }
.site-foot p { margin: 4px 0; }
.site-foot a { color: var(--red); }

/* Images from the old site (img/site/). */
.site-pic { width: 100%; max-width: 420px; border-radius: 12px; border: 2px solid var(--tan); margin: 12px auto 4px; display: block; }
.tile.wide { grid-column: 1 / -1; }
.council-strip { width: 100%; image-rendering: pixelated; margin: 4px 0 8px; }
.member .av { --av: 64px; margin-bottom: 10px; }
.member:hover .av img { transform: translate(-50%, -50%) scaleX(-1); }

/* ── The chamber's short encore ── */
.badges.row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: none; }
.badges.row li { padding: 6px 12px 6px 8px; gap: 8px; }
.badges.row .icon { width: 26px; height: 26px; }

/* ── The origin story: one beat per slide, swiped sideways (site.js storyHtml) ── */
.story { position: relative; margin: 14px 0 6px; outline: none; }
.story:focus-visible { box-shadow: 0 0 0 3px var(--gold); border-radius: 16px; }
.story-track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    border-radius: 16px; border: 2px solid var(--parch-brd); box-shadow: 0 4px 0 var(--tan);
}
.story-track::-webkit-scrollbar { display: none; }
.beat {
    position: relative; flex: 0 0 100%; scroll-snap-align: center; overflow: hidden; cursor: pointer;
    min-height: min(340px, 72vw); padding: 28px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; background: #fff; color: #222;
}
/* The descent: white, then greys, then the dark of a Finnish November. */
.beat.tone-grey1 { background: #efefef; }
.beat.tone-grey2 { background: #b7b7b7; }
.beat.tone-night { background: #000; color: #fff; }
.beat .lines { margin: 0; font-size: clamp(1.15rem, 4.6vw, 1.6rem); line-height: 1.35; max-width: 30ch; }
.beat .ln { display: block; }
.beat-finland .lines, .beat-character .lines, .beat-thegame .lines { font-size: clamp(1.6rem, 7vw, 2.4rem); }
.beat-youknow .lines { font-size: clamp(1.5rem, 6.5vw, 2.2rem); letter-spacing: .04em; }
.beat-quote .lines { font-size: clamp(1rem, 4vw, 1.3rem); }
.beat-dnd .lines, .beat-horrified .lines, .beat-awful .lines { text-align: left; }

/* Every line rises in when its beat comes into view, one after another. */
.beat .ln, .beat li, .beat .bub, .beat .after { opacity: 0; translate: 0 12px; }
.beat.on .ln, .beat.on li, .beat.on .bub, .beat.on .after { animation: beat-in .55s cubic-bezier(.2, .8, .3, 1) forwards; animation-delay: calc(var(--k, 0) * .35s + .15s); }
.beat.on li { animation-delay: calc(var(--k, 0) * .45s + .5s); }
.beat.on .after { animation-delay: 2.4s; }
@keyframes beat-in { to { opacity: 1; translate: 0 0; } }

.beat-terrible.on .lines .ln:last-child { animation: beat-in .55s .5s forwards, blink-dots 1.4s 1.2s steps(2) infinite; }
@keyframes blink-dots { 50% { opacity: .35; } }
.beat-deep.on .lines { animation: sink 2.4s 1s ease-in forwards; }
@keyframes sink { to { translate: 0 18px; opacity: .75; } }

.snow { position: absolute; inset: 0; pointer-events: none; }
.snow i { position: absolute; top: -6%; width: 4px; height: 4px; background: #fff; opacity: .8; animation: snowfall linear infinite; }
.snow i:nth-child(3n) { width: 6px; height: 6px; opacity: .5; }
@keyframes snowfall { to { transform: translate(18px, 115%); } }
.beat-finland .lines { position: relative; z-index: 1; }

.beat-pic { margin-top: 14px; }
.beat-pic .icon { width: 64px; height: 64px; image-rendering: pixelated; }
.beat-dnd.on .roll { animation: dice-roll 1.1s .6s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes dice-roll { from { transform: translateX(-120px) rotate(-540deg); opacity: 0; } }
.beat-horrified.on .rat { animation: rat-tilt 1.2s 2s ease-in-out infinite alternate; }
@keyframes rat-tilt { from { rotate: -8deg; } to { rotate: 8deg; } }

.beat-prep { justify-content: flex-start; }
.party { width: 100%; max-width: 420px; image-rendering: pixelated; clip-path: inset(0 100% 0 0); }
.beat-prep.on .party { animation: party-in 1.6s steps(11) forwards; }
@keyframes party-in { to { clip-path: inset(0 0 0 0); } }
.prep-list { list-style: none; padding: 0; margin: 10px 0 0; text-align: left; display: grid; gap: 4px; font-size: clamp(.95rem, 3.8vw, 1.1rem); }
.prep-list li::before { content: '✓ '; color: var(--ok, #3c7a3c); font-weight: bold; }
.beat .after { margin: 10px 0 0; font-style: italic; color: #555; }

.bubbles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; max-width: 420px; }
.bub { background: var(--parch); border: 2px solid var(--parch-brd); border-radius: 14px; padding: 5px 12px; font-size: .95rem; }
.bub.aside { background: #fff; border-style: dashed; font-size: .85rem; color: #555; }
.beat.on .bub { animation: bub-pop .45s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: calc(var(--k) * .55s + .8s); }
@keyframes bub-pop { from { opacity: 0; scale: .4; translate: 0 10px; } to { opacity: 1; scale: 1; translate: 0 0; } }

.beat-youknow.on .lines { animation: you-know .5s 1s ease-in-out 2; }
@keyframes you-know { 25% { translate: -6px 2px; } 50% { translate: 6px -2px; } 75% { translate: -3px 1px; } }
.beat-thegame .site-fan { margin-top: 18px; }
.beat-thegame.on .site-card { animation: slam .5s cubic-bezier(.5, 0, .75, 0) both; }
.beat-thegame.on .site-card:nth-child(2) { animation-delay: .25s; }
.beat-thegame.on .site-card:nth-child(3) { animation-delay: .5s; }
.beat-logo .logo { width: min(260px, 70%); image-rendering: pixelated; margin-bottom: 12px; }
.beat-logo.on .logo { animation: beat-in .6s forwards; opacity: 0; }

.story-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; }
.story-nav button {
    flex-shrink: 0; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 50%; cursor: pointer;
    background: var(--parch); border: 2px solid var(--parch-brd); color: var(--red); font: bold 1.3rem/1 var(--font-ui);
}
/* Small dots, finger-sized targets: the span is tappable, the dot is drawn inside it.
   A long deck's dots get narrower slots on a phone, so the arrows keep their full size. */
.story-dots { display: flex; gap: 0; min-width: 0; }
.story-dots span { flex: 0 1 auto; width: 19px; min-width: 0; height: 37px; display: grid; place-items: center; cursor: pointer; }
.story-dots span::before { content: ''; width: min(9px, 75%); aspect-ratio: 1; border-radius: 50%; background: var(--tan); transition: transform .2s, background .2s; }
.story-dots span.on::before { background: var(--red); transform: scale(1.35); }
.story-hint { margin: 6px 0 0; text-align: center; font-size: .85rem; color: var(--ink3); transition: opacity .4s; }
.story.swiped .story-hint { opacity: 0; }
.story.at-end .story-next { opacity: .35; }
@media (prefers-reduced-motion: reduce) {
    .beat .ln, .beat li, .beat .bub, .beat .after, .party, .beat-logo .logo { opacity: 1 !important; translate: none !important; clip-path: none !important; animation: none !important; }
    .snow { display: none; }
}

/* ── Slide decks: What it is, For everyone (site.js deckHtml) ──
   Each step (.st) arrives after the one before, like a click in the pitch deck. */
.dbeat { gap: 10px; justify-content: center; }
.dbeat .st { opacity: 0; translate: 0 12px; margin: 0; max-width: 34ch; }
.dbeat.on .st { animation: beat-in .55s cubic-bezier(.2, .8, .3, 1) forwards; animation-delay: calc(var(--k) * .85s + .2s); }
.dbeat .ln { font-size: clamp(1rem, 4.2vw, 1.25rem); line-height: 1.35; }
.dbeat .ln.big { font-size: clamp(1.25rem, 5.4vw, 1.75rem); }
.dbeat .ln.title { font-size: clamp(1.7rem, 7vw, 2.4rem); }
.dbeat .ln.small { font-size: .95rem; color: #555; }
.dbeat.tone-night .ln.small { color: #bbb; }
/* An aside under the step before it: one line, tucked up close. */
.dbeat .ln.aside { font-size: clamp(.68rem, 3.1vw, .9rem); white-space: nowrap; font-style: italic; color: #555; margin-top: -8px; }
.dbeat.tone-night .ln.aside { color: #bbb; }
.dbeat .ln.bullet { font-size: 1rem; }
/* A councillor's pitch, in a speech bubble */
.dbeat .ln.speech {
    position: relative; max-width: 34ch; margin: 4px 0 10px; padding: 10px 14px; text-align: left;
    background: #fff; border: 2px solid var(--ink, #1e0e06); border-radius: 14px 14px 14px 4px; box-shadow: 0 3px 0 var(--tan);
    font-size: clamp(.9rem, 3.7vw, 1.05rem); line-height: 1.4;
}
.dbeat .ln.speech::after { content: ''; position: absolute; left: 18px; bottom: -11px; width: 16px; height: 11px; background: var(--ink, #1e0e06); clip-path: polygon(0 0, 100% 0, 0 100%); }
.dbeat .ln.bullet::before { content: '• '; color: var(--red); }
.dbeat .mav, .dbeat .ln.mav { font-family: var(--font-display); }
.dbeat .ln.mav { font-size: clamp(1.2rem, 5.2vw, 1.7rem); }
.dbeat .ln.mav.small { font-size: clamp(.95rem, 4vw, 1.2rem); }
.dbeat .ln.sparkle { font-family: var(--font-pixel); color: var(--red); font-size: clamp(1.6rem, 7vw, 2.3rem); position: relative; }
.dbeat.on .ln.sparkle::before, .dbeat.on .ln.sparkle::after { content: ''; position: absolute; top: 50%; width: 10px; height: 10px; background: var(--gold);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 1.2s 3s ease-in-out infinite alternate; }
.dbeat .ln.sparkle::before { left: -18px; } .dbeat .ln.sparkle::after { right: -18px; animation-delay: 3.4s; }
@keyframes twinkle { from { scale: .5; opacity: .5; } to { scale: 1.3; opacity: 1; } }
.dbeat .pic { width: 120px; image-rendering: pixelated; }
.dbeat .pic.hero { width: 140px; }
.beat.has-photo { background: #2b1d14 var(--photo) center / cover; color: #fff; }
.beat.has-photo::before { content: ''; position: absolute; inset: 0; background: rgba(20, 12, 8, .55); }
.beat.has-photo > * { position: relative; }
.beat-kidding .ln { text-align: left; align-self: flex-start; }

/* Cards fly in one after another. */
/* Six to a row on any phone; rows of three get bigger cards. */
.card-row { display: flex; flex-wrap: nowrap; justify-content: center; gap: 5px; width: 100%; max-width: 100% !important; }
.dcard { width: calc((100% - 25px) / 6); max-width: 80px; min-width: 0; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.card-row.few .dcard { width: calc((100% - 20px) / 3); max-width: 110px; }
.dbeat.on .card-row:not(.still) .dcard { animation: card-fly .5s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: calc(var(--k) * .85s + .3s + var(--c) * .12s); }
@keyframes card-fly { from { opacity: 0; transform: translate(60px, -30px) rotate(12deg); } }
.card-row.still .dcard.fades { transition: opacity .8s, filter .8s; }
.dbeat.on .card-row.still .dcard.fades { opacity: .15; filter: grayscale(1); transition-delay: 1.4s; }
.card-row.shrink { width: 80%; }
.dbeat.on .card-row.shrink { animation: beat-in .5s forwards, far-away 2.4s 3.2s ease-in-out forwards; }
@keyframes far-away { to { opacity: 1; translate: 0 0; scale: .55; } }

/* Not a hand of card types: the blanks get a big "no". */
.blanks .blank { width: clamp(52px, 14vw, 74px); aspect-ratio: 5 / 7; display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 4px; font-size: .7rem; line-height: 1.2; background: #eee; border: 2px solid #bbb; border-radius: 6px; color: #444; }
.beat-types { position: relative; }
.beat-types .pic.nope { position: absolute; width: min(230px, 60%); top: 50%; left: 50%; margin: 0; translate: -50% -50% !important; }
.beat-types.on .pic.nope { animation: nope-stamp .45s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: 1.4s; }
@keyframes nope-stamp { from { opacity: 0; scale: 2.2; } to { opacity: 1; scale: 1; } }

/* Cannibals with riots, or riots with cannibals: the two trade places. */
.swap { display: flex; gap: 28px; justify-content: center; }
.swap .dcard { width: clamp(70px, 20vw, 100px); }
.beat-riots.on .swap .a { animation: swap-a 1s 1s cubic-bezier(.45, 0, .2, 1) forwards; }
.beat-riots.on .swap .b { animation: swap-b 1s 1s cubic-bezier(.45, 0, .2, 1) forwards; }
@keyframes swap-a { 50% { transform: translate(50%, -24px) rotate(8deg); } to { transform: translateX(calc(100% + 28px)); } }
@keyframes swap-b { 50% { transform: translate(-50%, 24px) rotate(-8deg); } to { transform: translateX(calc(-100% - 28px)); } }

.counter { font-size: clamp(1.1rem, 4.6vw, 1.4rem); }
.counter b { display: block; font-family: var(--font-pixel); font-weight: normal; font-size: clamp(2rem, 9vw, 3rem); color: var(--gold); font-variant-numeric: tabular-nums; }
.hand-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100% !important; }
.hand.dealt .dcard { animation: card-fly .45s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: calc(var(--c) * .1s); }
.deal, .lens-chips button {
    margin: 0; padding: 6px 14px; font: 1rem var(--font-pixel); color: var(--red); cursor: pointer;
    background: var(--parch); border: 2px solid var(--parch-brd); border-radius: 999px; box-shadow: 0 2px 0 var(--tan);
}
.deal:active { translate: 0 2px; box-shadow: none; }

.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; max-width: 420px !important; }
.pillars span { display: flex; align-items: center; gap: 8px; text-align: left; font-size: .95rem; }
.pillars img { width: 40px; image-rendering: pixelated; }
.dbeat.on .pillars span { animation: bub-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--k) * .85s + .3s + var(--c) * .25s); }

.lens { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100% !important; }
.lens-pic { width: 150px; image-rendering: pixelated; transition: filter .3s; }
.lens-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.lens-chips button { font: .85rem var(--font-ui); color: var(--ink); padding: 4px 10px; }
.lens-chips button[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); font-weight: bold; }

.say-rows, .lang-names { display: grid; gap: 8px; text-align: left; max-width: 100% !important; }
.say-rows p, .lang-names p { display: flex; align-items: center; gap: 10px; margin: 0; }
.say-rows .mav { font-size: clamp(.8rem, 3.4vw, 1.05rem); }
.flag { width: 28px; height: 21px; flex-shrink: 0; image-rendering: pixelated; }
.lang-names b { font-weight: normal; font-size: clamp(1.1rem, 5vw, 1.5rem); min-width: 7ch; }
.lang-names small { color: #777; }
.dbeat.on .say-rows p, .dbeat.on .lang-names p { opacity: 0; animation: beat-in .45s forwards; animation-delay: calc(var(--k) * .85s + .4s + var(--c) * .45s); }
.beat-barbarians .pic.fly { width: 110px; }
.dbeat.on .pic.fly { animation: pic-fly .6s cubic-bezier(.3, 1.3, .5, 1) .2s forwards; }
@keyframes pic-fly { from { opacity: 0; transform: translate(60px, -30px) rotate(12deg); } to { opacity: 1; translate: 0 0; transform: none; } }

/* Mystery cards: art first (names covered), or names first (art covered). */
.mystery .mcard { position: relative; width: clamp(70px, 20vw, 96px); }
.mystery .mcard img { width: 100%; display: block; }
.mystery .cover { position: absolute; left: 4%; right: 4%; background: #fff; transition: opacity .6s; }
.mystery .cover.top { top: 3%; height: 19%; } .mystery .cover.bot { bottom: 3%; height: 19%; } .mystery .cover.mid { top: 22%; bottom: 22%; }
.mystery.reveal-names .cover.mid { display: none; }
.mystery.reveal-art .cover.top, .mystery.reveal-art .cover.bot { display: none; }
.dbeat.on .mystery .cover { opacity: 0; transition-delay: calc(3s + var(--c) * .5s); }
.mystery .mcard:nth-child(1) .cover { --c: 0; } .mystery .mcard:nth-child(2) .cover { --c: 1; } .mystery .mcard:nth-child(3) .cover { --c: 2; }
.dbeat.on .mystery .mcard { animation: bub-pop .4s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(1.1s + var(--c) * .45s); }

.sheets { display: flex; gap: 8px; justify-content: center; max-width: 100% !important; }
.sheets img { width: clamp(80px, 24vw, 130px); border: 1px solid #ccc; box-shadow: 0 3px 8px rgba(0, 0, 0, .15); }
.dbeat.on .sheets img { animation: sheet-zoom .7s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: calc(.2s + var(--c) * .2s); }
@keyframes sheet-zoom { from { opacity: 0; scale: .3; rotate: -8deg; } }
.dbeat .deck-link { font-size: .95rem; padding: 8px 16px; }

.more { margin-top: 16px; border: 2px dashed var(--tan); border-radius: 14px; padding: 4px 14px 10px; }
.more summary { cursor: pointer; padding: 8px 0; font-family: var(--font-pixel); color: var(--red); font-size: 1.1rem; }
@media (prefers-reduced-motion: reduce) {
    .dbeat .st, .dbeat .dcard, .dbeat .say-rows p, .dbeat .lang-names p, .mystery .mcard, .pillars span, .sheets img { opacity: 1 !important; translate: none !important; animation: none !important; }
    .mystery .cover { display: none; }
}

/* ── Hall deck: the beats added for the notes ── */
@font-face { font-family: 'mav-filled'; src: url('../font/mavsmooth-filled.otf') format('opentype'); font-display: swap; }

/* "Medieval problems require medieval solutions" lands under the logo. */
.dbeat .pic.logo { width: min(280px, 72%); }

/* The dyslexia slide: the pangram as printed (outline), then filled black,
   so only each letter's silhouette is left — and it still reads. */
.pangram { display: grid; gap: 12px; text-align: left; max-width: 100% !important; }
.pangram p { margin: 0; display: grid; gap: 2px; }
.pangram small { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: #777; }
.pangram .mav { font-family: var(--font-display); font-size: clamp(1rem, 4.4vw, 1.35rem); line-height: 1.25; }
.pangram .mav-filled { font-family: 'mav-filled', var(--font-display); color: #000; font-size: clamp(1rem, 4.4vw, 1.35rem); line-height: 1.25; }
.dbeat.on .pangram p:nth-child(2) { opacity: 0; animation: beat-in .6s forwards; animation-delay: calc(var(--k) * .85s + 1.6s); }

/* Art first or name first: the other half arrives a beat later. */
.reveal { display: flex; justify-content: center; gap: clamp(14px, 5vw, 34px); max-width: 100% !important; }
.reveal figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; width: clamp(70px, 22vw, 110px); }
.reveal img { width: 100%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; }
.reveal figcaption { font-size: clamp(.85rem, 3.6vw, 1.1rem); line-height: 1.1; text-align: center; min-height: 2.2em; }
.reveal.first-name { flex-direction: row; }
.reveal.first-name figure { flex-direction: column-reverse; }
.dbeat.on .reveal.first-art img, .dbeat.on .reveal.first-name figcaption { animation: bub-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(1.1s + var(--c) * .5s); }
.reveal.first-art figcaption, .reveal.first-name img { opacity: 0; }
.dbeat.on .reveal.first-art figcaption { animation: beat-in .5s forwards; animation-delay: calc(3.4s + var(--c) * .35s); }
.dbeat.on .reveal.first-name img { animation: art-drop .55s cubic-bezier(.3, 1.4, .5, 1) forwards; animation-delay: calc(3.4s + var(--c) * .35s); }
@keyframes art-drop { from { opacity: 0; transform: translateY(-30px) scale(.6); } to { opacity: 1; transform: none; } }
.dbeat.on .ln.late { animation-delay: 4.6s; }

/* Cards with a caption under each (the two Puppets). */
.card-row.captioned { gap: 18px; }
.card-row.captioned figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; width: calc((100% - 18px) / 2); max-width: 130px; }
.card-row.captioned .dcard { width: 100%; max-width: none; }
.card-row.captioned figcaption { font-size: .82rem; color: #555; line-height: 1.2; }

/* The school deck: a mixed hand, then the face-down "18+" cards are pulled out
   and the safe ones close ranks. */
.school-deck { display: flex; justify-content: center; max-width: 100% !important; }
.school-deck .sc { position: relative; flex: 0 0 auto; width: clamp(38px, 10.5vw, 58px); margin: 0 2px; transition: width .5s 2.8s, margin .5s 2.8s; }
.school-deck .sc .dcard { width: 100%; max-width: none; border-radius: 4px; }
.school-deck .spicy b { position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -12deg; padding: 1px 6px; font: bold .7rem var(--font-ui); color: #fff; background: var(--red); border-radius: 999px; }
.dbeat.on .school-deck .sc { animation: card-fly .45s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: calc(.2s + var(--c) * .1s); }
.dbeat.on .school-deck .spicy { animation: card-fly .45s cubic-bezier(.3, 1.3, .5, 1) both, pulled-out .7s 2s cubic-bezier(.5, 0, .75, 0) forwards; animation-delay: calc(.2s + var(--c) * .1s), 2s; width: 0; margin: 0; }
@keyframes pulled-out { to { transform: translateY(-140%) rotate(-18deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .school-deck .spicy { display: none; } .reveal figcaption, .reveal img, .pangram p { opacity: 1 !important; animation: none !important; } }

/* The Solutioneers: a compact credit roll, centred, not a full-width wall. */
#solutioneers { text-align: center; }
#solutioneers h2 { justify-content: center; }
.council-strip { max-width: 420px; margin: 4px auto 10px; display: block; }
.team { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0; }
.member { flex: 0 1 200px; flex-direction: row; text-align: left; gap: 10px; padding: 10px 12px; }
.member .av { --av: 44px; margin: 0; flex-shrink: 0; }
.member b { display: block; font-size: .95rem; }
.member .title { display: block; font-size: .9rem; }
.member .role { display: block; font-size: .75rem; }
.member .who { min-width: 0; display: flex; flex-direction: column; }
.credits { max-width: 520px; margin: 0 auto; }
.credits h3 { font-size: 1.05rem; margin-top: 16px; }
.translators, .names { justify-content: center; gap: 4px 6px; }
.translators li, .names li { padding: 2px 8px; font-size: .8rem; border-width: 1px; }
.join-us { max-width: 420px; margin-left: auto; margin-right: auto; }

/* gav.fi: the maker's pixel mark at the foot of the pages. */
.gavfi { display: inline-block; margin: 6px 0 4px; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.gavfi img { width: 48px; height: 48px; image-rendering: pixelated; display: block; }
.gavfi:hover { transform: translateY(-3px) rotate(-6deg); }


/* A real photo sits inside the disc (goblin sprites are 1.75× it and pop out); it doesn't turn round on hover. */
.av.portrait { overflow: hidden; }
.av.portrait img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; border-radius: 50%; }
.member:hover .av.portrait img { transform: translate(-50%, -50%); }

/* ── A taste of the demo (home scroll) ── */
.taste { display: flex; align-items: center; gap: 14px; max-width: 440px; margin: 10px 0 4px; text-align: left; }
.taste-trouble .site-card { width: 84px; }
.taste-say { flex: 1; min-width: 0; }
.taste-who { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: #5b1a8f; font-weight: bold; margin-bottom: 4px; }
.taste-who .av { --av: 30px; }
.taste .bubble { margin: 0; padding: 10px 13px; background: #eadcf7; border: 2px solid #5b1a8f; border-radius: 4px 14px 14px 14px; color: var(--ink); line-height: 1.45; font-size: .98rem; }
.taste-go { margin-top: 12px; padding: 12px 22px; font-size: 1.15rem; text-decoration: none; }
@media (max-width: 420px) { .taste { flex-direction: column; text-align: center; } .taste-who { justify-content: center; } }

/* ── The card table under the What it is slides ── */
.story:has(.deck-table) .story-track { border-radius: 16px 16px 0 0; border-bottom: 0; box-shadow: none; }
.deck-table {
    position: relative; height: 178px; overflow: hidden;
    background: radial-gradient(ellipse at 50% 0%, #f9ecd0 0%, var(--parch) 70%);
    border: 2px solid var(--parch-brd); border-top: 2px dashed var(--parch-brd); border-radius: 0 0 16px 16px; box-shadow: 0 4px 0 var(--tan);
    --cw: 60px; --cb: 84px;
}
.tcard {
    position: absolute; left: 50%; top: 12px; width: var(--cw); aspect-ratio: 250 / 350;
    transform: translate(calc(-50% + var(--x, 0px)), calc(var(--y, 0px) + var(--lift, 0px))) rotate(var(--r, 0deg));
    transition: transform .6s cubic-bezier(.3, 1.25, .5, 1), width .5s cubic-bezier(.3, 1.2, .5, 1), opacity .45s, filter .5s;
    perspective: 500px; z-index: 1;
}
.tcard img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; box-shadow: 0 2px 0 rgba(0, 0, 0, .18); backface-visibility: hidden; transition: transform .5s ease; }
.tcard .back { transform: rotateY(180deg); }
.tcard.down .front { transform: rotateY(180deg); }
.tcard.down .back { transform: rotateY(0deg); }
.tcard.big { width: var(--cb); z-index: 2; }
.tcard.hl { --lift: -12px; z-index: 3; }
.tcard.hl img.front { box-shadow: 0 0 0 3px var(--gold, #ecbc34), 0 6px 16px rgba(236, 188, 52, .7); }
.tcard.fade { opacity: .25; filter: grayscale(1); }
.tcard.win img.front { box-shadow: 0 0 0 3px var(--gold, #ecbc34), 0 0 18px rgba(236, 188, 52, .9); animation: win-bob 1s ease-in-out infinite alternate; }
.tcard.wob { animation: wob .5s ease-in-out 3; }
.tcard.entering { opacity: 0; --y: 200px; }
.tcard.gone { opacity: 0; --y: 220px !important; transform: translate(calc(-50% + var(--x, 0px)), 220px) rotate(var(--r, 0deg)); pointer-events: none; }
.tcard[data-label]::after {
    content: attr(data-label); position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% 0; white-space: nowrap;
    font-family: var(--font-pixel); color: var(--red); font-size: .74rem; transform: rotate(calc(-1 * var(--r, 0deg)));
    background: var(--parch); padding: 1px 8px; border-radius: 8px; box-shadow: 0 1px 0 var(--parch-brd);
}
/* The title screen's council table under the cards, and its councillors faded round it.
   The table sprite is 25×16; its legs run off the bottom of the strip. */
.deck-table .tbl-art {
    position: absolute; left: 50%; top: 34px; translate: -50% 0; width: min(88%, calc(var(--cb) * 4.2)); aspect-ratio: 25 / 16;
    image-rendering: pixelated; opacity: .75; z-index: 0; pointer-events: none;
}
.tseat { position: absolute; z-index: 0; opacity: .4; filter: saturate(.5); transition: opacity .4s, filter .4s, translate .4s cubic-bezier(.3, 1.6, .5, 1); }
.tseat .av { --av: clamp(30px, calc(var(--cb) * .5), 44px); }
.tseat.s0, .tseat.s1 { top: 6px; }
.tseat.s2, .tseat.s3 { bottom: 8px; z-index: 5; }
.tseat.s0 { left: 4%; } .tseat.s1 { right: 4%; }
.tseat.s2 { left: 1%; } .tseat.s3 { right: 1%; }
.tseat.troubler .av { box-shadow: 0 0 0 2px var(--paper, #fff), 0 0 0 4px var(--red); }
.tseat.speaking { opacity: 1; filter: none; translate: 0 -4px; z-index: 6; }
.tseat.speaking .av { box-shadow: 0 0 0 2px var(--paper, #fff), 0 0 0 4px var(--gold), 0 0 14px 4px var(--glow, rgba(236, 188, 52, .6)); }
.tseat.speaking .av { animation: bob 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tseat { transition: none; } .tseat.speaking .av { animation: none; } }

/* One solution, two cards: a + between the halves and one label under both */
.tjoin {
    position: absolute; left: 50%; top: 16px; width: calc(var(--cb) * 2.2); height: calc(var(--cb) * 1.4);
    transform: translateX(calc(-50% + var(--x, 0px))); pointer-events: none; z-index: 4;
    opacity: 0; transition: opacity .35s .25s, transform .6s cubic-bezier(.3, 1.25, .5, 1);
}
.tjoin.on { opacity: 1; }
.tjoin b {
    position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; background: var(--gold, #ecbc34); color: var(--ink); border: 2px solid var(--ink);
    font-family: var(--font-pixel); font-size: 1.1rem; line-height: 1; box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}
.tjoin span {
    position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% 0; white-space: nowrap;
    font-family: var(--font-pixel); color: var(--red); font-size: .74rem;
    padding: 1px 10px; border-top: 2px solid var(--red); background: var(--parch); border-radius: 0 0 8px 8px; box-shadow: 0 1px 0 var(--parch-brd);
}
@keyframes win-bob { to { translate: 0 -4px; } }
@keyframes wob { 25% { rotate: -4deg; } 75% { rotate: 4deg; } }
.deal-trio { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .tcard, .tcard img { transition: none; } .tcard.win img.front, .tcard.wob { animation: none; } .tjoin { transition: none; } }

/* ── The re-languaging card (For everyone: Barbarians) ── */
.beat-barbarians { flex-direction: row; flex-wrap: wrap; gap: 16px; align-content: center; }
.cycler { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 220px !important; }
.mcard {
    width: 170px; aspect-ratio: 250 / 350; background: #fff; border: 2px solid #1e0e06; border-radius: 10px; box-shadow: 0 4px 0 rgba(0, 0, 0, .15);
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px 6px;
    container-type: inline-size;   /* the names size to the card, as on a real one */
}
.mcard img { width: 70%; image-rendering: pixelated; }
/* The real cards' name rule (card.css §2), with --max-word-len and --name-len set by mountCyclers. */
.mname {
    font-family: var(--font-display); line-height: 1.15; text-align: center; color: #1e0e06; min-height: 1.2em;
    font-size: min(clamp(6px, 16cqw, 64px), calc(170cqw / var(--max-word-len, 11)), calc(280cqw / var(--name-len, 16)));
    transition: transform .5s cubic-bezier(.3, 1.3, .5, 1);
}
/* The arrows sit just outside the card, either side of the name they change, so the name has the card's full width. */
.mrow { display: flex; align-items: center; justify-content: space-between; width: calc(100% + 76px); flex-shrink: 0; gap: 12px; transition: transform .5s cubic-bezier(.3, 1.3, .5, 1); }
.mrow .mname { flex: 1; min-width: 0; }
.mrow button { position: relative; flex-shrink: 0; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid var(--tan); background: #fff; color: var(--ink); cursor: pointer; font-size: .9rem; line-height: 1; }
/* a finger-sized hit area round the small arrow */
.mrow button::before { content: ''; position: absolute; inset: -8px; }
.mrow button:hover, .mrow button:focus-visible { border-color: var(--red); color: var(--red); }
/* One language: the bottom row (name and its arrows) turns upside down, as on a single-language card. */
.cycler.same .mrow.bot { transform: rotate(180deg); }
.cyc-langs { margin: 0; font-size: .8rem; color: var(--ink2); }
.cyc-langs span { color: var(--ink3); }
.cyc-ctl { display: grid; grid-template-columns: 4.2em 28px 1fr 28px; align-items: center; gap: 4px; width: 100%; font-size: .82rem; }
.cyc-ctl span { color: var(--ink3); text-align: right; }
.cyc-ctl b { text-align: center; font-weight: normal; }
.cyc-ctl button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--tan); background: #fff; cursor: pointer; font-size: 1rem; line-height: 1; }
.cyc-ctl button:hover { border-color: var(--red); color: var(--red); }
.cyc-note { margin: 0; font-size: .8rem; color: var(--ink2); max-width: 26ch; line-height: 1.35; }
.lang-names p.lit b { color: var(--red); }
.lang-names p { transition: opacity .3s; }
@media (max-width: 640px) {
    .beat-barbarians { gap: 8px; padding: 18px 12px; }
    .beat-barbarians .mcard { width: 150px; }
    .beat-barbarians .lang-names { display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
    .beat-barbarians .lang-names p { margin: 0; font-size: .8rem; }
    .beat-barbarians .lang-names small { display: none; }
    .beat-barbarians .cyc-note { font-size: .74rem; }
}

/* ── The chamber's scroll comes alive (site.js revealOnScroll) ──
   Each section rises in as it arrives; its cards are dealt in from below,
   one after another, and the demo's speech bubble pops. */
.chamber-scroll section.reveal-ready { opacity: 0; translate: 0 22px; transition: opacity .6s ease, translate .7s cubic-bezier(.2, .8, .3, 1); }
.chamber-scroll section.seen { opacity: 1; translate: 0 0; }
.chamber-scroll .reveal-ready .site-fan .site-card { opacity: 0; }
.chamber-scroll .seen .site-fan .site-card { animation: deal-in .55s cubic-bezier(.3, 1.35, .5, 1) both; }
.chamber-scroll .seen .site-fan .site-card:nth-child(2) { animation-delay: .12s; }
.chamber-scroll .seen .site-fan .site-card:nth-child(3) { animation-delay: .24s; }
.chamber-scroll .seen .taste-trouble .site-card { animation: deal-in .6s cubic-bezier(.3, 1.35, .5, 1) .1s both; }
.chamber-scroll .reveal-ready .taste .bubble { opacity: 0; }
.chamber-scroll .seen .taste .bubble { animation: bub-pop .45s cubic-bezier(.3, 1.6, .5, 1) .45s both; transform-origin: 0 0; }
.chamber-scroll .seen .site-fan.small .site-card { animation-delay: .9s; }
.chamber-scroll .seen .site-fan.small .site-card:nth-child(2) { animation-delay: 1.02s; }
.chamber-scroll .seen .site-fan.small .site-card:nth-child(3) { animation-delay: 1.14s; }
.chamber-scroll .reveal-ready .punch { opacity: 0; }
.chamber-scroll .seen .punch { animation: stamp .45s cubic-bezier(.3, 1.6, .5, 1) 1s both; }
.chamber-scroll .seen .door { animation: deal-in .5s cubic-bezier(.3, 1.35, .5, 1) both; }
.chamber-scroll .seen .door:nth-child(2) { animation-delay: .08s; }
.chamber-scroll .seen .door:nth-child(3) { animation-delay: .16s; }
.chamber-scroll .seen .door:nth-child(4) { animation-delay: .24s; }
.chamber-scroll .seen .deck-photo img { animation: photo-settle .9s cubic-bezier(.2, .8, .3, 1) .1s both; }
@keyframes deal-in { from { opacity: 0; transform: translateY(46px) rotate(-14deg) scale(.75); } to { opacity: 1; transform: none; } }
@keyframes stamp { from { opacity: 0; transform: scale(1.8) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes photo-settle { from { opacity: 0; transform: scale(1.06) rotate(1.5deg); filter: brightness(.6); } }
@media (prefers-reduced-motion: reduce) {
    .chamber-scroll section, .chamber-scroll .site-card, .chamber-scroll .bubble, .chamber-scroll .door, .chamber-scroll img, .chamber-scroll p { opacity: 1 !important; translate: none !important; animation: none !important; }
}

/* ── The real deck: the photo and the two ways to get one ── */
.deck-photo { margin: 12px 0 6px; width: 100%; max-width: 440px; rotate: -1.2deg; }
.deck-photo img {
    display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
    border: 2px solid #000; border-radius: 12px; box-shadow: 0 6px 0 var(--tan);
}
.deck-ways { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 12px 0 2px; }
.deck-ways a { padding: 12px 20px; font-size: 1.1rem; box-shadow: 0 4px 0 rgba(0, 0, 0, .35); transition: translate .15s, box-shadow .15s; }
.deck-ways a:hover { translate: 0 -2px; box-shadow: 0 6px 0 rgba(0, 0, 0, .35); }
.deck-ways a:active { translate: 0 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }


/* The playtest verdict, between the deck's selling points and its buttons. */
.deck-proof { margin: 10px 0 0; padding: 12px 14px; max-width: 400px; background: #fff; border: 2px dashed var(--tan); border-radius: 12px; display: flex; flex-direction: column; gap: 10px; }
.deck-proof p { margin: 0; font-size: .95rem; color: var(--ink2); }
.deck-proof b { font-family: var(--font-pixel); font-weight: normal; color: var(--red); font-size: 1.1em; }
.deck-proof blockquote { margin: 0; display: flex; align-items: center; gap: 10px; text-align: left; color: var(--ink); font-size: 1rem; }
.deck-proof .av { --av: 34px; flex-shrink: 0; }
.deck-proof cite { display: block; font-style: normal; font-size: .8rem; color: var(--ink3); }