/* Kuhn poker, served at /kuhn-poker/. Styled as a figure from a 1950 game
   theory monograph: paper, ink, and one Didone face for the card ranks. */
.kuhn {
    --ui-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --display-font: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
    --card-width: 5.5rem;
    --card-height: 7.75rem;
    --ink: #2a2a2a;
    --rule: #b9b9b9;
    --win: #2e7d4f;
    --loss: #b3392f;
    margin-bottom: 3rem;
    font-family: var(--ui-font);
}
.article-content .kuhn p { margin: 0; }
.kuhn [hidden] { display: none !important; }
.kuhn :focus-visible { outline: 2px solid var(--link-color); outline-offset: 3px; }

.kuhn-board { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 1.75rem; align-items: stretch; }

/* The table: a framed figure, the two seats facing across the pot. */
.kuhn-table {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--border-color); border-radius: 14px;
    background: radial-gradient(ellipse at 50% 45%, #fff 35%, #f5f5f5 100%);
    box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6px #e6e6e6;
    align-self: start;
    animation: kuhn-rise 0.5s ease-out both;
}
.kuhn-table.is-lost { animation: kuhn-shake 0.5s ease-in-out; }

.kuhn-seat {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; column-gap: 1rem; perspective: 700px;
}
.kuhn-seat-name { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
[data-seat="you"] .kuhn-seat-name { color: var(--ink); }
.kuhn-seat-order { display: block; margin-top: 0.15rem; min-height: 1.3em; font-family: var(--main-font); font-style: italic; font-size: 0.95rem; color: var(--faint); }
.kuhn-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.kuhn-stack-count { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--faint); }

/* Chips overlap like stacked coins. */
.kuhn-chips { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; row-gap: 0.25rem; }
.kuhn-chip {
    flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%;
    background: #fff; border: 1px solid #8c8c8c;
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #cfcfcf, 0 1px 1px rgba(0, 0, 0, 0.08);
}
.kuhn-chip + .kuhn-chip { margin-left: -0.45rem; }
.kuhn-stack-chips .kuhn-chip { width: 0.85rem; height: 0.85rem; box-shadow: inset 0 0 0 1.5px #fff, inset 0 0 0 2.5px #d4d4d4, 0 1px 1px rgba(0, 0, 0, 0.06); }
.kuhn-stack-chips .kuhn-chip + .kuhn-chip { margin-left: -0.32rem; }
.kuhn-pot-chips { justify-content: center; }
.kuhn-pot-chips .kuhn-chip { width: 1.5rem; height: 1.5rem; box-shadow: inset 0 0 0 2.5px #fff, inset 0 0 0 4px #cfcfcf, 0 1px 2px rgba(0, 0, 0, 0.1); }
.kuhn-pot-chips .kuhn-chip + .kuhn-chip { margin-left: -0.55rem; }
.kuhn-chip-flying { position: absolute; z-index: 2; margin: 0 !important; pointer-events: none; }

/* Cards flip to reveal; the face carries its rank in data-rank for the corners. */
.kuhn-card {
    position: relative; width: var(--card-width); height: var(--card-height);
    transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.kuhn-card.is-hidden { transform: rotateY(180deg); }
.kuhn-card-face, .kuhn-card-back {
    position: absolute; inset: 0; border-radius: 9px; border: 1px solid #d3d3d3;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 10px 20px -8px rgba(0, 0, 0, 0.2);
}
.kuhn-card-face { display: grid; place-items: center; background: #fff; font-family: var(--display-font); color: var(--ink); }
.kuhn-rank { font-size: 3.1rem; line-height: 1; font-weight: 500; }
.kuhn-card-face::before, .kuhn-card-face::after { content: attr(data-rank); position: absolute; font-size: 1.05rem; line-height: 1; font-weight: 500; }
.kuhn-card-face::before { top: 0.5rem; left: 0.6rem; }
.kuhn-card-face::after { bottom: 0.5rem; right: 0.6rem; transform: rotate(180deg); }
.kuhn-card-back {
    transform: rotateY(180deg);
    background:
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 7px),
        #f3f3f3;
    box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 7px #d9d9d9, 0 1px 1px rgba(0, 0, 0, 0.05), 0 10px 20px -8px rgba(0, 0, 0, 0.2);
}
@keyframes kuhn-deal { from { transform: translateY(-0.6rem); opacity: 0; } to { transform: none; opacity: 1; } }
.kuhn-card.is-dealt { animation: kuhn-deal 0.35s ease-out; }

/* The middle of the table: pot, the dealer's prompt, and your decision. */
.kuhn-middle {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.9rem;
    min-height: 11.5rem; margin: 1.1rem 0; padding: 1.1rem 0;
    border-width: 1px 0; border-style: solid; border-color: transparent;
    border-image: repeating-linear-gradient(to right, var(--rule) 0 4px, transparent 4px 8px) 1;
}
.kuhn-pot { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.kuhn-pot-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.kuhn-pot-label b { color: var(--ink); }
.kuhn-pot-note { font-family: var(--main-font); font-style: italic; font-size: 0.85rem; color: var(--faint); }
.article-content .kuhn-status { max-width: 24rem; font-family: var(--main-font); font-size: 1.15rem; line-height: 1.45; color: var(--ink); text-wrap: balance; }
.kuhn-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.kuhn-button {
    min-width: 7.5rem; min-height: 44px; padding: 0.6rem 1.2rem;
    font: 500 1rem var(--ui-font); color: var(--ink); background: #fff;
    border: 1px solid var(--ink); border-radius: 6px; cursor: pointer;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.kuhn-button:hover:not(:disabled) { background: var(--bg-subtle); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08); }
.kuhn-button:active:not(:disabled) { transform: none; box-shadow: none; }
.kuhn-button:disabled { opacity: 0.35; cursor: default; }
.kuhn-button kbd {
    margin-left: 0.45em; padding: 0.1em 0.35em; vertical-align: 1px;
    font: 0.68rem var(--ui-font); color: var(--faint); border: 1px solid var(--border-color); border-radius: 3px;
}
.article-content .kuhn-advice { max-width: 24rem; font-family: var(--main-font); font-style: italic; font-size: 0.9rem; color: var(--muted); }
.kuhn-result { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; animation: kuhn-pop 0.45s ease-out; }
.kuhn-result .kuhn-button { margin-top: 0.5rem; }
.article-content .kuhn-result-title { font-family: var(--display-font); font-size: 2.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.kuhn-result-title.is-win { color: var(--win); }
.kuhn-result-title.is-loss { color: var(--loss); }
.article-content .kuhn-result-summary { max-width: 24rem; font-family: var(--main-font); color: var(--muted); text-wrap: balance; }

/* The ledger beside the table. */
.kuhn-ledger { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; animation: kuhn-rise 0.5s ease-out 0.12s both; }
.kuhn-score { display: flex; gap: 2.25rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border-color); }
.kuhn-score dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.kuhn-score dd { margin-top: 0.1rem; font-family: var(--display-font); font-size: 2rem; line-height: 1.1; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.article-content .kuhn-ledger-title { margin: 0.4rem 0 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.article-content .kuhn-log-empty { font-family: var(--main-font); font-style: italic; font-size: 0.9rem; color: var(--faint); }
.article-content .kuhn-log { max-height: 22rem; margin: 0; overflow-y: auto; list-style: none; font-size: 0.85rem; }
.article-content .kuhn-log li {
    display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; grid-template-areas: "n cards delta" "n line line";
    column-gap: 0.6rem; row-gap: 0.1rem; margin: 0; padding: 0.5rem 0; border-top: 1px solid var(--border-color);
}
.article-content .kuhn-log li:first-child { padding-top: 0; border-top: none; }
.kuhn-log-n { grid-area: n; color: var(--faint); }
.kuhn-log-cards { grid-area: cards; font-family: var(--main-font); color: var(--ink); }
.kuhn-log-line { grid-area: line; font-size: 0.8rem; color: var(--muted); }
.kuhn-log-delta { grid-area: delta; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.kuhn-log-delta.is-win { color: var(--win); }
.kuhn-log-delta.is-loss { color: var(--loss); }

/* Options: a popover above the toggle on wide screens, inline on phones. */
.kuhn-options { position: relative; margin-top: auto; padding-top: 1.25rem; font-size: 0.85rem; color: var(--muted); }
.kuhn-options summary {
    width: max-content; cursor: pointer; list-style: none;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
}
.kuhn-options summary::-webkit-details-marker { display: none; }
.kuhn-options summary::after { content: '+'; margin-left: 0.5em; }
.kuhn-options[open] summary::after { content: '−'; }
.kuhn-options summary:hover { color: var(--text-color); }
.kuhn-options-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; margin-top: 0.75rem; }
.kuhn-options label { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 32px; }
.kuhn-options select { font: inherit; color: var(--ink); }
.article-content .kuhn-hint { font-family: var(--main-font); font-style: italic; font-size: 0.85rem; line-height: 1.5; color: var(--faint); }
.kuhn-reset {
    min-height: 32px; margin-top: 0.4rem; padding: 0; font: inherit; color: var(--muted); background: none; border: none;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.kuhn-reset:hover { color: var(--text-color); }

/* Motion: a page-load rise, confetti for a win, a shake for a loss. */
@keyframes kuhn-rise { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: none; } }
@keyframes kuhn-pop { from { opacity: 0; transform: translateY(0.5rem) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes kuhn-shake {
    0%, 100% { transform: none; }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.kuhn-confetti { position: absolute; inset: 0; pointer-events: none; }
.kuhn-confetti-piece {
    position: absolute; top: -1rem; left: var(--x);
    width: var(--size); height: calc(var(--size) * 0.6);
    background: var(--color); border-radius: 1px; opacity: 0;
    animation: kuhn-confetti var(--duration) var(--delay) ease-in forwards;
}
@keyframes kuhn-confetti {
    0% { transform: none; opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate3d(var(--drift), 34rem, 0) rotate(var(--spin)); opacity: 0; }
}

@media (min-width: 721px) {
    .kuhn-options-body {
        position: absolute; right: 0; bottom: calc(100% - 0.6rem); z-index: 5;
        width: min(23rem, calc(100vw - 4rem)); margin: 0; padding: 1rem 1.1rem;
        background: #fff; border: 1px solid var(--border-color); border-radius: 10px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 16px 32px -12px rgba(0, 0, 0, 0.25);
        animation: kuhn-pop 0.2s ease-out;
    }
}
@media (max-width: 720px) {
    .kuhn { --card-width: 4.75rem; --card-height: 6.7rem; }
    .kuhn-board { grid-template-columns: 1fr; gap: 1.5rem; }
    .kuhn-options { margin-top: 0.75rem; }
    .kuhn-table { padding: 1.2rem 1.1rem; }
    .kuhn-seat { column-gap: 0.6rem; }
    .kuhn-rank { font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
    .kuhn-card { transition: none; }
    .kuhn-card.is-dealt, .kuhn-table, .kuhn-table.is-lost, .kuhn-ledger, .kuhn-result { animation: none; }
    .kuhn-confetti-piece { display: none; }
}