:root {
    --ink: #102454;
    --ink-soft: #536079;
    --paper: #f7f4ee;
    --white: #fffefb;
    --blue: #4aa9eb;
    --yellow: #f9c842;
    --coral: #f47b77;
    --green: #60c99b;
    --purple: #8b6bd6;
    font-family: Inter, ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
    color: var(--ink);
    background: var(--paper);
    font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 9% 4%, rgba(249, 200, 66, .21), transparent 23rem),
        radial-gradient(circle at 92% 26%, rgba(74, 169, 235, .16), transparent 25rem),
        var(--paper);
    -webkit-tap-highlight-color: transparent;
}

button { font: inherit; }

.app-shell {
    width: min(100%, 500px);
    min-height: 100svh;
    margin: 0 auto;
    padding: max(1.25rem, env(safe-area-inset-top)) 1.15rem max(1.4rem, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
}

.app-shell > * {
    min-width: 0;
}

.topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 .1rem .7rem;
}

.deck-status {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.deck-copy {
    min-width: 0;
}

.deck-description {
    max-width: 19rem;
    margin: .28rem 0 0;
    color: var(--ink-soft);
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.35;
}

.eyebrow {
    margin: 0;
    color: var(--ink);
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.progress-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--ink-soft);
    font-size: .84rem;
    font-weight: 750;
    white-space: nowrap;
}

.progress-row p { margin: 0; }

.progress-track {
    width: 4rem;
    height: .34rem;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(16, 36, 84, .13);
}

.progress-track span {
    display: block;
    width: 12.5%;
    height: 100%;
    border-radius: inherit;
    background: var(--blue);
    transition: width .35s cubic-bezier(.2, .8, .2, 1);
}

.discard-pile-button {
    min-height: 2.7rem;
    padding: .25rem .25rem .25rem .35rem;
    border: 0;
    display: flex;
    align-items: center;
    gap: .28rem;
    color: var(--ink-soft);
    background: transparent;
    font-size: .68rem;
    font-weight: 800;
    cursor: pointer;
}

.discard-pile-button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: .55rem; }

.discard-stack-icon {
    position: relative;
    width: 1.85rem;
    height: 2.1rem;
    display: block;
}

.discard-stack-icon i {
    position: absolute;
    inset: .22rem .3rem;
    border: 2px solid var(--ink);
    border-radius: .3rem;
    display: block;
    background: white;
}

.discard-stack-icon i:first-child { transform: translate(-.18rem, .08rem) rotate(-7deg); opacity: .5; }
.discard-stack-icon i:nth-child(2) { transform: translate(.16rem, .04rem) rotate(7deg); opacity: .75; }

.discard-stack-icon b {
    position: absolute;
    z-index: 2;
    right: -.14rem;
    top: -.16rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .22rem;
    border-radius: 99px;
    display: grid;
    place-items: center;
    color: white;
    background: var(--ink);
    font-size: .62rem;
    line-height: 1;
}

.deck-area {
    position: relative;
    width: 100%;
    min-height: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    padding: .7rem 0 .25rem;
}

.card-stage {
    position: relative;
    z-index: 3;
    width: min(78vw, 350px);
    aspect-ratio: 16 / 25;
    max-height: min(59svh, 525px);
    touch-action: none;
    overscroll-behavior: contain;
    perspective: 1400px;
}

.stack-shadow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(78vw, 350px);
    aspect-ratio: 16 / 25;
    max-height: min(59svh, 525px);
    border: 2px solid rgba(16, 36, 84, .22);
    border-radius: 1.7rem;
    background: #e9e5dc;
    transform-origin: center;
    transition: transform .35s ease;
}

.stack-shadow--one { z-index: 2; transform: translate(-48%, -49%) rotate(2.7deg); }
.stack-shadow--two { z-index: 1; transform: translate(-52%, -49%) rotate(-3.2deg); opacity: .58; }

.card {
    position: absolute;
    inset: 0;
    display: none;
    border-radius: 1.7rem;
    cursor: grab;
    user-select: none;
    transform-origin: 50% 90%;
    will-change: transform, opacity;
}

.card.is-active { display: block; }
.card.is-dragging { cursor: grabbing; transition: none; }
.card.is-exiting-left { animation: exitLeft .42s cubic-bezier(.35, .02, .3, 1) forwards; }
.card.is-exiting-right { animation: exitRight .42s cubic-bezier(.35, .02, .3, 1) forwards; }
.card.is-entering-left { animation: enterLeft .44s cubic-bezier(.18, .78, .26, 1) both; }
.card.is-entering-right { animation: enterRight .44s cubic-bezier(.18, .78, .26, 1) both; }
.card.is-snapping { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.card.is-discarding { animation: discardToPile .48s cubic-bezier(.42, 0, .45, 1) forwards; }
.deck-area.is-empty .stack-shadow { display: none; }

.card-rotator {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transform-style: preserve-3d;
    transition: transform .72s cubic-bezier(.2, .72, .2, 1.05);
    box-shadow: 0 1.45rem 2.8rem rgba(25, 36, 62, .18), 0 .2rem .5rem rgba(25, 36, 62, .11);
}

.card.is-flipped .card-rotator { transform: rotateY(180deg); }

.card-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.card-front {
    display: flex;
    flex-direction: column;
    padding: 1.35rem 1.4rem 1.15rem;
    border: clamp(5px, 1.5vw, 8px) solid var(--ink);
    background-color: var(--card-paper, var(--white));
    background-image: var(--card-pattern, none);
    background-size: var(--pattern-size, auto);
    background-position: center;
    isolation: isolate;
}

.card-front__wash {
    position: absolute;
    z-index: -1;
    width: 74%;
    aspect-ratio: 1;
    left: 13%;
    top: 23%;
    border-radius: 45% 55% 52% 48% / 55% 44% 56% 45%;
    background: var(--wash-main, rgba(74, 169, 235, .17));
    transform: rotate(-5deg);
}

.card-front__wash::before,
.card-front__wash::after {
    content: "";
    position: absolute;
    border-radius: 48% 52% 45% 55%;
}

.card-audience-label {
    align-self: center;
    margin: 0;
    padding: .38rem .72rem;
    border: 1.5px solid var(--ink);
    border-radius: 99px;
    color: white;
    background: var(--ink);
    box-shadow: .16rem .16rem 0 var(--rule-colour, var(--yellow));
    font-size: clamp(.65rem, 2.5vw, .76rem);
    font-weight: 900;
    letter-spacing: .09em;
    line-height: 1;
    text-transform: uppercase;
}

.card-front__wash::before {
    width: 38%;
    aspect-ratio: 1;
    right: -18%;
    top: -18%;
    background: var(--wash-top, rgba(249, 200, 66, .25));
}

.card-front__wash::after {
    width: 31%;
    aspect-ratio: 1;
    left: -15%;
    bottom: -22%;
    background: var(--wash-bottom, rgba(244, 123, 119, .2));
}

.card-number {
    align-self: flex-start;
    display: grid;
    place-items: center;
    width: 2.55rem;
    aspect-ratio: 1;
    border-radius: 50%;
    color: white;
    background: var(--card-accent, var(--ink));
    font-size: .87rem;
    font-weight: 850;
    letter-spacing: .06em;
}

.prompt-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem .1rem .6rem;
}

.card-heading {
    max-width: 100%;
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.45rem, 5.9vw, 1.95rem);
    font-weight: 850;
    letter-spacing: -.03em;
    line-height: 1.08;
    text-align: center;
    white-space: nowrap;
    text-transform: uppercase;
}

.js .card-heading,
.js .back-copy h2 { visibility: hidden; }

.js .card-heading.is-title-fitted,
.js .back-copy h2.is-title-fitted { visibility: visible; }

.heading-rule {
    width: 3.25rem;
    height: .32rem;
    margin: 1rem 0;
    border-radius: 99px;
    background: var(--rule-colour, var(--yellow));
    transform: rotate(-2deg);
}

.explanation {
    margin: 0;
    color: #334263;
    font-size: clamp(.98rem, 3.75vw, 1.14rem);
    font-weight: 600;
    letter-spacing: -.012em;
    line-height: 1.42;
    text-align: center;
    text-wrap: pretty;
}

.card-footer {
    width: 100%;
    padding: .72rem .3rem .1rem;
    border-top: 1px solid rgba(16, 36, 84, .16);
    color: var(--ink-soft);
    font-size: clamp(.72rem, 2.8vw, .86rem);
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

/* Fixed themes keep every numbered card visually identical on every device. */
.card-theme-1 {
    --card-paper: #fffdf6;
    --card-accent: #17346f;
    --rule-colour: #f4bd2f;
    --wash-main: rgba(80, 164, 232, .20);
    --wash-top: rgba(248, 198, 61, .28);
    --wash-bottom: rgba(241, 116, 116, .20);
    --card-pattern: radial-gradient(circle, rgba(23, 52, 111, .10) 1.5px, transparent 1.7px);
    --pattern-size: 18px 18px;
}

.card-theme-2 {
    --card-paper: #f8fffc;
    --card-accent: #087f6d;
    --rule-colour: #ff9e5c;
    --wash-main: rgba(72, 204, 167, .20);
    --wash-top: rgba(255, 158, 92, .24);
    --wash-bottom: rgba(76, 148, 226, .18);
    --card-pattern: repeating-linear-gradient(135deg, rgba(8, 127, 109, .07) 0 2px, transparent 2px 16px);
}

.card-theme-3 {
    --card-paper: #fff9fb;
    --card-accent: #9a356b;
    --rule-colour: #f2a93b;
    --wash-main: rgba(218, 91, 148, .17);
    --wash-top: rgba(245, 178, 62, .24);
    --wash-bottom: rgba(117, 102, 205, .16);
    --card-pattern: linear-gradient(rgba(154, 53, 107, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(154, 53, 107, .055) 1px, transparent 1px);
    --pattern-size: 22px 22px;
}

.card-theme-4 {
    --card-paper: #fffdf7;
    --card-accent: #ad5b16;
    --rule-colour: #4e91d8;
    --wash-main: rgba(251, 173, 72, .22);
    --wash-top: rgba(77, 146, 217, .22);
    --wash-bottom: rgba(108, 194, 146, .18);
    --card-pattern: radial-gradient(circle at 0 0, rgba(173, 91, 22, .08) 0 8px, transparent 9px), radial-gradient(circle at 100% 100%, rgba(78, 145, 216, .08) 0 8px, transparent 9px);
    --pattern-size: 32px 32px;
}

.card-theme-5 {
    --card-paper: #fbfaff;
    --card-accent: #6047aa;
    --rule-colour: #e56e87;
    --wash-main: rgba(133, 104, 211, .20);
    --wash-top: rgba(232, 111, 136, .22);
    --wash-bottom: rgba(78, 180, 201, .18);
    --card-pattern: conic-gradient(from 45deg, rgba(96, 71, 170, .06) 25%, transparent 0 75%, rgba(96, 71, 170, .06) 0);
    --pattern-size: 24px 24px;
}

.card-theme-6 {
    --card-paper: #f7fdff;
    --card-accent: #126b8b;
    --rule-colour: #f2b930;
    --wash-main: rgba(74, 174, 211, .20);
    --wash-top: rgba(243, 186, 48, .24);
    --wash-bottom: rgba(236, 111, 108, .17);
    --card-pattern: repeating-linear-gradient(0deg, transparent 0 14px, rgba(18, 107, 139, .065) 14px 16px);
}

.card-theme-7 {
    --card-paper: #fbfff8;
    --card-accent: #477a2c;
    --rule-colour: #e77d52;
    --wash-main: rgba(127, 196, 92, .20);
    --wash-top: rgba(235, 126, 81, .23);
    --wash-bottom: rgba(91, 145, 215, .17);
    --card-pattern: linear-gradient(45deg, rgba(71, 122, 44, .055) 25%, transparent 25% 75%, rgba(71, 122, 44, .055) 75%), linear-gradient(-45deg, rgba(71, 122, 44, .055) 25%, transparent 25% 75%, rgba(71, 122, 44, .055) 75%);
    --pattern-size: 28px 28px;
}

.card-theme-8 {
    --card-paper: #fffafa;
    --card-accent: #b1403d;
    --rule-colour: #3b9bb1;
    --wash-main: rgba(232, 106, 101, .18);
    --wash-top: rgba(56, 157, 179, .22);
    --wash-bottom: rgba(245, 190, 65, .20);
    --card-pattern: repeating-linear-gradient(45deg, rgba(177, 64, 61, .045) 0 1px, transparent 1px 12px), repeating-linear-gradient(-45deg, rgba(177, 64, 61, .045) 0 1px, transparent 1px 12px);
}

.card-theme-9 {
    --card-paper: #f8fbff;
    --card-accent: #3159a5;
    --rule-colour: #dd6f9e;
    --wash-main: rgba(78, 123, 213, .18);
    --wash-top: rgba(222, 111, 158, .22);
    --wash-bottom: rgba(79, 190, 162, .18);
    --card-pattern: radial-gradient(circle, rgba(49, 89, 165, .075) 0 3px, transparent 3.5px);
    --pattern-size: 26px 26px;
}

.card-theme-10 {
    --card-paper: #fffcf5;
    --card-accent: #945c13;
    --rule-colour: #6e75d8;
    --wash-main: rgba(244, 180, 73, .21);
    --wash-top: rgba(111, 118, 218, .21);
    --wash-bottom: rgba(83, 175, 159, .17);
    --card-pattern: repeating-linear-gradient(90deg, transparent 0 17px, rgba(148, 92, 19, .065) 17px 19px);
}

.card-theme-11 {
    --card-paper: #fbf9ff;
    --card-accent: #704294;
    --rule-colour: #ec8d45;
    --wash-main: rgba(157, 96, 199, .18);
    --wash-top: rgba(237, 142, 69, .23);
    --wash-bottom: rgba(87, 170, 210, .18);
    --card-pattern: conic-gradient(from 15deg at 50% 50%, rgba(112, 66, 148, .05), transparent 10deg 30deg, rgba(112, 66, 148, .05) 40deg, transparent 50deg 70deg, rgba(112, 66, 148, .05) 80deg, transparent 90deg);
}

.card-theme-12 {
    --card-paper: #f7fffe;
    --card-accent: #167a7d;
    --rule-colour: #ed6d75;
    --wash-main: rgba(66, 190, 189, .18);
    --wash-top: rgba(239, 109, 118, .22);
    --wash-bottom: rgba(243, 185, 70, .18);
    --card-pattern: radial-gradient(circle at 50% 100%, transparent 13px, rgba(22, 122, 125, .06) 14px 16px, transparent 17px);
    --pattern-size: 32px 20px;
}

.card-theme-13 {
    --card-paper: #fff9f6;
    --card-accent: #a74c34;
    --rule-colour: #3e90c9;
    --wash-main: rgba(225, 104, 73, .17);
    --wash-top: rgba(63, 145, 202, .22);
    --wash-bottom: rgba(110, 183, 102, .18);
    --card-pattern: conic-gradient(rgba(167, 76, 52, .055) 25%, transparent 0 50%, rgba(167, 76, 52, .055) 0 75%, transparent 0);
    --pattern-size: 22px 22px;
}

.card-theme-14 {
    --card-paper: #f9fcff;
    --card-accent: #2f668c;
    --rule-colour: #e18a3f;
    --wash-main: rgba(73, 144, 193, .19);
    --wash-top: rgba(226, 139, 63, .22);
    --wash-bottom: rgba(151, 105, 190, .17);
    --card-pattern: linear-gradient(rgba(47, 102, 140, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 102, 140, .05) 1px, transparent 1px);
    --pattern-size: 12px 12px;
}

.card-theme-15 {
    --card-paper: #fcfff7;
    --card-accent: #557527;
    --rule-colour: #be5e97;
    --wash-main: rgba(138, 182, 75, .20);
    --wash-top: rgba(191, 95, 152, .22);
    --wash-bottom: rgba(66, 157, 186, .17);
    --card-pattern: repeating-linear-gradient(120deg, rgba(85, 117, 39, .055) 0 5px, transparent 5px 22px);
}

.card-theme-16 {
    --card-paper: #fffafb;
    --card-accent: #8b3f70;
    --rule-colour: #2c9b91;
    --wash-main: rgba(194, 84, 145, .18);
    --wash-top: rgba(47, 157, 147, .22);
    --wash-bottom: rgba(245, 175, 59, .19);
    --card-pattern: radial-gradient(circle at 15% 20%, rgba(139, 63, 112, .09) 0 2px, transparent 3px), radial-gradient(circle at 70% 65%, rgba(44, 155, 145, .09) 0 2px, transparent 3px), linear-gradient(35deg, transparent 48%, rgba(245, 175, 59, .08) 49% 52%, transparent 53%);
    --pattern-size: 28px 28px, 34px 34px, 31px 31px;
}

.card-back {
    border: clamp(5px, 1.5vw, 8px) solid var(--ink);
    background: var(--white);
    transform: rotateY(180deg);
}

.card-back img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.card-back--text {
    padding: 1.35rem 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--back-paper, #f8fbff);
    background-image: var(--back-art, none);
    background-size: var(--back-art-size, auto);
    background-position: center;
    isolation: isolate;
}

.card-back__wash {
    position: absolute;
    z-index: -1;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 55% 45% 48% 52% / 45% 56% 44% 55%;
    background: var(--back-blob, rgba(74, 169, 235, .2));
    transform: rotate(8deg);
}

.back-copy {
    width: 100%;
    padding: clamp(1rem, 5vw, 1.6rem);
    border: 1px solid rgba(16, 36, 84, .1);
    border-radius: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 .8rem 2rem rgba(16, 36, 84, .1);
    backdrop-filter: blur(3px);
    text-align: center;
}

.card-footer--back {
    flex: 0 0 auto;
    margin-top: .75rem;
}

.back-copy h2 {
    max-width: 100%;
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.45rem, 5.9vw, 1.95rem);
    font-weight: 850;
    letter-spacing: -.03em;
    line-height: 1.08;
    white-space: nowrap;
    text-transform: uppercase;
}

.back-copy p {
    max-width: 28rem;
    margin: 0;
    color: var(--ink-soft);
    font-size: clamp(1rem, 4.1vw, 1.2rem);
    font-weight: 650;
    line-height: 1.45;
    text-wrap: balance;
}

.set-back-theme-1 {
    --back-paper: #fff9e8;
    --back-blob: rgba(255, 190, 46, .34);
    --back-art: radial-gradient(circle at 15% 18%, rgba(255,184,31,.7) 0 7%, transparent 7.5%), radial-gradient(circle at 86% 82%, rgba(76,170,232,.42) 0 12%, transparent 12.5%), repeating-linear-gradient(42deg, transparent 0 18px, rgba(16,36,84,.055) 18px 21px);
}

.set-back-theme-2 {
    --back-paper: #eefaff;
    --back-blob: rgba(78, 178, 232, .28);
    --back-art: radial-gradient(circle at 12% 78%, rgba(83,190,205,.45) 0 10%, transparent 10.5%), radial-gradient(circle at 88% 18%, rgba(145,107,222,.35) 0 13%, transparent 13.5%), linear-gradient(125deg, transparent 44%, rgba(16,36,84,.07) 45% 48%, transparent 49%);
}

.set-back-theme-3 {
    --back-paper: #fff3f4;
    --back-blob: rgba(241, 113, 128, .25);
    --back-art: radial-gradient(circle at 16% 18%, rgba(241,113,128,.42) 0 11%, transparent 11.5%), radial-gradient(circle at 86% 76%, rgba(255,190,46,.4) 0 9%, transparent 9.5%), repeating-radial-gradient(circle at center, transparent 0 22px, rgba(16,36,84,.045) 23px 25px);
}

.set-back-theme-4 {
    --back-paper: #f5f0ff;
    --back-blob: rgba(144, 103, 220, .25);
    --back-art: linear-gradient(35deg, transparent 46%, rgba(144,103,220,.12) 47% 52%, transparent 53%), radial-gradient(circle at 84% 18%, rgba(77,178,231,.38) 0 10%, transparent 10.5%), radial-gradient(circle at 12% 82%, rgba(244,126,117,.34) 0 12%, transparent 12.5%);
}

.set-back-theme-5 {
    --back-paper: #effbea;
    --back-blob: rgba(111, 193, 98, .26);
    --back-art: radial-gradient(ellipse at 12% 18%, rgba(111,193,98,.38) 0 11%, transparent 11.5%), radial-gradient(ellipse at 88% 82%, rgba(249,190,49,.4) 0 13%, transparent 13.5%), repeating-linear-gradient(115deg, transparent 0 24px, rgba(32,111,79,.06) 24px 28px);
}

.set-back-theme-6 {
    --back-paper: #fff4ea;
    --back-blob: rgba(244, 142, 78, .27);
    --back-art: radial-gradient(circle at 14% 75%, rgba(244,142,78,.4) 0 12%, transparent 12.5%), radial-gradient(circle at 88% 20%, rgba(66,166,187,.36) 0 10%, transparent 10.5%), repeating-linear-gradient(-35deg, transparent 0 16px, rgba(16,36,84,.05) 16px 19px);
}

.set-back-theme-7 {
    --back-paper: #eef7ff;
    --back-blob: rgba(55, 126, 205, .24);
    --back-art: radial-gradient(circle at 15% 18%, rgba(55,126,205,.38) 0 10%, transparent 10.5%), radial-gradient(circle at 85% 80%, rgba(232,91,148,.34) 0 12%, transparent 12.5%), repeating-radial-gradient(circle at 50% 50%, transparent 0 25px, rgba(16,36,84,.045) 26px 29px);
}

.set-back-theme-8 {
    --back-paper: #fff8fc;
    --back-blob: rgba(202, 88, 157, .24);
    --back-art: radial-gradient(circle at 12% 82%, rgba(202,88,157,.36) 0 11%, transparent 11.5%), radial-gradient(circle at 88% 16%, rgba(73,180,160,.38) 0 12%, transparent 12.5%), linear-gradient(55deg, transparent 46%, rgba(245,175,59,.1) 47% 52%, transparent 53%);
}

.empty-hand {
    position: absolute;
    inset: 0;
    padding: 2rem;
    border: 3px dashed rgba(16,36,84,.25);
    border-radius: 1.7rem;
    display: grid;
    place-content: center;
    justify-items: center;
    color: var(--ink-soft);
    background: rgba(255,255,255,.55);
    text-align: center;
}

.empty-hand[hidden] { display: none; }
.empty-hand span { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--green); font-size: 1.5rem; font-weight: 900; }
.empty-hand h2 { margin: 1rem 0 .35rem; color: var(--ink); font-size: 1.4rem; }
.empty-hand p { margin: 0; font-size: .9rem; line-height: 1.4; }

.gesture-hints {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    margin-top: 1.65rem;
}

.flip-hint,
.swipe-hint {
    margin: 0;
    color: var(--ink-soft);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .02em;
    opacity: .8;
}

.flip-hint span { color: var(--purple); font-size: .95rem; }
.swipe-hint span { color: var(--blue); font-size: .95rem; }

.hint-divider {
    width: .25rem;
    height: .25rem;
    border-radius: 50%;
    background: rgba(16, 36, 84, .3);
}

.response-panel {
    padding-top: .35rem;
    transition: opacity .28s ease, visibility .28s ease;
}

.response-panel.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.response-panel > p {
    margin: 0 0 .65rem;
    color: var(--ink-soft);
    font-size: .82rem;
    font-weight: 750;
    text-align: center;
}

.response-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .55rem;
}

.response-button {
    min-width: 0;
    min-height: 3.65rem;
    padding: .5rem .35rem;
    border: 2px solid rgba(16, 36, 84, .13);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    color: var(--ink);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 .25rem .8rem rgba(16, 36, 84, .07);
    font-size: clamp(.78rem, 3.4vw, .94rem);
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.response-button > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.response-button:active { transform: scale(.96); }
.response-button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.response-icon {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--ink);
    background: #e9edf5;
    font-size: 1rem;
    font-weight: 900;
}

.response-button--yes .response-icon { background: #c7f0dd; }
.response-button--maybe .response-icon { background: #ffe8a7; }
.response-button--no .response-icon { background: #ffd0d0; }

.response-button.is-selected {
    border-color: var(--ink);
    background: white;
    box-shadow: 0 .35rem 0 var(--ink), 0 .65rem 1.2rem rgba(16, 36, 84, .12);
    transform: translateY(-.2rem);
}

.discard-panel-backdrop {
    position: fixed;
    z-index: 20;
    inset: 0;
    background: rgba(16, 24, 48, .3);
    backdrop-filter: blur(2px);
}

.discard-panel-backdrop[hidden], .discard-panel[hidden] { display: none; }

.discard-panel {
    position: fixed;
    z-index: 21;
    left: 50%;
    bottom: 0;
    width: min(100%, 500px);
    max-height: min(68svh, 650px);
    padding: .65rem 1.1rem max(1.2rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    border: 2px solid var(--ink);
    border-bottom: 0;
    border-radius: 1.4rem 1.4rem 0 0;
    color: var(--ink);
    background: var(--paper);
    box-shadow: 0 -1rem 3rem rgba(16,36,84,.2);
    transform: translateX(-50%);
    animation: drawerUp .28s cubic-bezier(.2,.8,.2,1) both;
}

.discard-panel__handle { width: 2.8rem; height: .3rem; margin: 0 auto .8rem; border-radius: 99px; background: rgba(16,36,84,.2); }
.discard-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.discard-panel__eyebrow { margin: 0 0 .2rem; color: var(--ink-soft); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.discard-panel h2 { margin: 0; font-size: 1.45rem; letter-spacing: -.025em; }
.discard-close { width: 2.6rem; height: 2.6rem; border: 1px solid rgba(16,36,84,.2); border-radius: 50%; color: var(--ink); background: white; font-size: 1.5rem; cursor: pointer; }
.discard-close:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.discard-list { display: grid; gap: .55rem; margin-top: 1rem; }
.discarded-card-row { padding: .7rem .75rem; border: 1px solid rgba(16,36,84,.14); border-radius: .85rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; background: rgba(255,255,255,.76); }
.discarded-card-copy { min-width: 0; display: flex; align-items: center; gap: .65rem; }
.discarded-card-number { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--ink); font-size: .7rem; font-weight: 850; }
.discarded-card-title { overflow: hidden; color: var(--ink); font-size: .86rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.restore-card { flex: 0 0 auto; min-height: 2.35rem; padding: .45rem .68rem; border: 1.5px solid var(--ink); border-radius: .65rem; color: var(--ink); background: white; font-size: .76rem; font-weight: 850; cursor: pointer; }
.restore-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.discard-empty { margin: 1.2rem 0 .4rem; color: var(--ink-soft); font-size: .88rem; text-align: center; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes exitLeft {
    to { transform: translateX(-125%) rotate(-13deg) scale(.92); opacity: 0; }
}

@keyframes exitRight {
    to { transform: translateX(125%) rotate(13deg) scale(.92); opacity: 0; }
}

@keyframes enterLeft {
    from { transform: translateX(-115%) rotate(-10deg) scale(.94); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes enterRight {
    from { transform: translateX(115%) rotate(10deg) scale(.94); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes discardToPile {
    to { transform: translate(48%, -58%) rotate(18deg) scale(.25); opacity: 0; }
}

@keyframes drawerUp {
    from { transform: translate(-50%, 100%); }
    to { transform: translate(-50%, 0); }
}

@media (max-height: 700px) {
    .app-shell { padding-top: max(.7rem, env(safe-area-inset-top)); padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
    .card-stage, .stack-shadow { width: min(67vw, 290px); max-height: 52svh; }
    .topbar { padding-bottom: .25rem; }
    .deck-area { padding-top: .25rem; }
    .gesture-hints { margin-top: 1rem; }
    .response-button { min-height: 3.1rem; }
}

@media (max-width: 430px) {
    .topbar { align-items: flex-start; }
    .deck-status { align-items: flex-end; flex-direction: column; gap: .15rem; }
    .discard-pile-button { min-height: 2rem; }
}

@media (min-width: 700px) {
    .app-shell { padding-inline: 1.5rem; }
    .card-stage, .stack-shadow { width: 340px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}