/* Hallmark · macrostructure: Manifesto adapté · genre: playful · theme: Manifesto · tone: ludique populaire-premium · anchor hue: jaune · enrichment: cartes réelles · pre-emit critique: P5 H5 E5 S5 R5 V5 */
.coinche-game {
    --coinche-paper: oklch(96% 0.025 85);
    --coinche-paper-2: oklch(91% 0.04 85);
    --coinche-ink: oklch(20% 0.025 55);
    --coinche-ink-2: oklch(31% 0.025 55);
    --coinche-muted: oklch(43% 0.025 55);
    --coinche-felt: oklch(35% 0.075 155);
    --coinche-felt-deep: oklch(25% 0.06 155);
    --coinche-accent: oklch(83% 0.18 86);
    --coinche-accent-ink: oklch(18% 0.025 55);
    --coinche-danger: oklch(51% 0.19 28);
    --coinche-danger-ink: oklch(98% 0.01 85);
    --coinche-success: oklch(48% 0.12 150);
    --coinche-focus: oklch(68% 0.17 245);
    --coinche-rule: oklch(25% 0.02 55 / 24%);
    --coinche-shadow: oklch(12% 0.02 55 / 26%);
    --coinche-font-display: var(--font-display);
    --coinche-font-body: var(--font-text);
    --coinche-space-1: .25rem;
    --coinche-space-2: .5rem;
    --coinche-space-3: .75rem;
    --coinche-space-4: 1rem;
    --coinche-space-5: 1.5rem;
    --coinche-space-6: 2rem;
    --coinche-radius-sm: .25rem;
    --coinche-radius-md: .5rem;
    --coinche-ease-out: cubic-bezier(.16, 1, .3, 1);
    --coinche-ease-in: cubic-bezier(.7, 0, .84, 0);
    --coinche-ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --coinche-dur-fast: 120ms;
    --coinche-dur-base: 220ms;
    min-block-size: 100dvh;
    overflow-x: clip;
    background: var(--coinche-paper);
    color: var(--coinche-ink);
    font-family: var(--coinche-font-body);
}

.coinche-game *, .coinche-game *::before, .coinche-game *::after { box-sizing: border-box; }
.coinche-game :where(button, a, select) { font: inherit; }
.coinche-game :where(button, a):focus-visible { outline: 3px solid var(--coinche-focus); outline-offset: 3px; }
.coinche-game :where(button, a) { -webkit-tap-highlight-color: transparent; }

.coinche-topbar {
    min-block-size: 4rem;
    padding: var(--coinche-space-2) var(--coinche-space-4);
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    gap: var(--coinche-space-3);
    border-block-end: 3px solid var(--coinche-ink);
    background: var(--coinche-paper);
}
.coinche-wordmark { padding-inline: var(--coinche-space-2); color: var(--coinche-accent-ink); background: var(--coinche-accent); font-family: var(--coinche-font-display); font-size: clamp(1.2rem, 4vw, 2rem); font-weight: 900; letter-spacing: -.06em; text-decoration: none; white-space: nowrap; }
.coinche-turn { margin: 0; text-align: center; font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.coinche-leave { min-block-size: 44px; display: inline-flex; align-items: center; color: var(--coinche-ink); font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: .2em; white-space: nowrap; }

.coinche-scorebar {
    min-block-size: 4.5rem;
    padding: var(--coinche-space-2) var(--coinche-space-4);
    display: grid;
    grid-template-columns: minmax(4rem, auto) minmax(0, 1fr) minmax(4rem, auto);
    align-items: center;
    gap: var(--coinche-space-2);
    background: var(--coinche-ink);
    color: var(--coinche-paper);
}
.coinche-scorebar > div { display: grid; text-align: center; }
.coinche-scorebar > div span { color: var(--coinche-paper-2); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.coinche-scorebar > div strong { font-family: var(--coinche-font-display); font-size: 1.45rem; }
.coinche-scorebar > p { margin: 0; min-width: 0; display: flex; justify-content: center; align-items: center; gap: var(--coinche-space-2); text-align: center; }
.coinche-scorebar > p strong { overflow-wrap: anywhere; }
.coinche-contract-symbol { inline-size: 2rem; block-size: 2rem; flex: 0 0 auto; display: grid; place-items: center; background: var(--coinche-paper); color: var(--coinche-danger); font-weight: 900; border-radius: 50%; }
.coinche-scorebar mark { padding: .2rem .4rem; background: var(--coinche-danger); color: var(--coinche-danger-ink); font-size: .7rem; font-weight: 900; text-transform: uppercase; }

.coinche-arena { position: relative; min-block-size: clamp(24rem, 58dvh, 42rem); isolation: isolate; overflow: clip; background: var(--coinche-felt); color: var(--coinche-paper); }
.coinche-felt { position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(125deg, transparent 0 14px, var(--coinche-felt-deep) 15px 16px); opacity: .24; }
.coinche-seat { position: absolute; z-index: 2; display: flex; align-items: center; gap: var(--coinche-space-2); max-inline-size: 10.5rem; padding: var(--coinche-space-2); background: var(--coinche-paper); color: var(--coinche-ink); border: 2px solid var(--coinche-ink); box-shadow: .25rem .25rem 0 var(--coinche-shadow); }
.coinche-seat--0 { inset-block-end: var(--coinche-space-3); inset-inline-start: 50%; transform: translateX(-50%); }
.coinche-seat--1 { inset-block-start: 50%; inset-inline-start: var(--coinche-space-2); transform: translateY(-50%); }
.coinche-seat--2 { inset-block-start: var(--coinche-space-3); inset-inline-start: 50%; transform: translateX(-50%); }
.coinche-seat--3 { inset-block-start: 50%; inset-inline-end: var(--coinche-space-2); transform: translateY(-50%); }
.coinche-seat.is-active { background: var(--coinche-accent); color: var(--coinche-accent-ink); }
.coinche-seat__avatar { inline-size: 2.25rem; block-size: 2.25rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--coinche-ink); color: var(--coinche-paper); font-family: var(--coinche-font-display); }
.coinche-seat p { min-width: 0; margin: 0; display: grid; line-height: 1.1; }
.coinche-seat p strong { max-inline-size: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coinche-seat p small { margin-block-start: .2rem; color: var(--coinche-muted); font-size: .65rem; white-space: nowrap; }
.coinche-seat__count { display: none; }

.coinche-trick { position: absolute; inset-block-start: 48%; inset-inline-start: 50%; inline-size: 12rem; block-size: 10rem; transform: translate(-50%, -50%); display: grid; place-items: center; }
.coinche-trick > p { max-inline-size: 12rem; margin: 0; padding: var(--coinche-space-2); border: 2px dashed var(--coinche-paper-2); color: var(--coinche-paper); font-weight: 800; text-align: center; }
.coinche-trick__card { position: absolute; inline-size: 4.2rem; filter: drop-shadow(.2rem .3rem .25rem var(--coinche-shadow)); }
.coinche-trick__card--0 { inset-block-end: 0; transform: rotate(3deg); }
.coinche-trick__card--1 { inset-inline-start: 0; transform: rotate(-8deg); }
.coinche-trick__card--2 { inset-block-start: 0; transform: rotate(-3deg); }
.coinche-trick__card--3 { inset-inline-end: 0; transform: rotate(8deg); }
.coinche-card__image { display: block; inline-size: 100%; block-size: auto; }

.coinche-auction { position: absolute; z-index: 4; inset: var(--coinche-space-4); padding: var(--coinche-space-4); display: grid; align-content: center; gap: var(--coinche-space-3); background: var(--coinche-paper); color: var(--coinche-ink); border: 3px solid var(--coinche-ink); box-shadow: .5rem .5rem 0 var(--coinche-shadow); }
.coinche-auction header { display: flex; align-items: end; justify-content: space-between; gap: var(--coinche-space-3); border-block-end: 3px solid var(--coinche-ink); }
.coinche-auction header span { padding-block-end: var(--coinche-space-2); font-size: .75rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.coinche-auction h1 { min-width: 0; margin: 0; font-family: var(--coinche-font-display); font-size: clamp(2.3rem, 10vw, 5rem); line-height: 1; letter-spacing: -.07em; overflow-wrap: anywhere; font-style: normal; text-transform: uppercase; }
.coinche-auction form { min-width: 0; }
.coinche-suits { margin: 0 0 var(--coinche-space-3); padding: 0; border: 0; }
.coinche-suits legend { margin-block-end: var(--coinche-space-2); font-weight: 800; }
.coinche-suits, .coinche-bids { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--coinche-space-2); }
.coinche-suit, .coinche-bid, .coinche-action { min-block-size: 44px; border: 2px solid var(--coinche-ink); border-radius: var(--coinche-radius-sm); background: var(--coinche-paper); color: var(--coinche-ink); font-weight: 900; cursor: pointer; transition: transform var(--coinche-dur-fast) var(--coinche-ease-out), background-color var(--coinche-dur-fast) var(--coinche-ease-out); white-space: nowrap; }
.coinche-suit { padding: var(--coinche-space-2); display: flex; align-items: center; justify-content: center; gap: var(--coinche-space-1); }
.coinche-suit span { font-size: 1.4rem; }
.coinche-suit--diamonds span, .coinche-suit--hearts span { color: var(--coinche-danger); }
.coinche-suit[aria-pressed="true"] { background: var(--coinche-accent); color: var(--coinche-accent-ink); box-shadow: .2rem .2rem 0 var(--coinche-ink); }
.coinche-bids { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.coinche-bid { min-block-size: 3rem; background: var(--coinche-ink); color: var(--coinche-paper); font-family: var(--coinche-font-display); font-size: 1.1rem; }
.coinche-auction__secondary { display: flex; justify-content: space-between; gap: var(--coinche-space-2); }
.coinche-action { padding-inline: var(--coinche-space-4); background: var(--coinche-accent); color: var(--coinche-accent-ink); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.coinche-action--quiet { background: var(--coinche-paper); }
.coinche-action--double { background: var(--coinche-danger); color: var(--coinche-danger-ink); border-color: var(--coinche-danger); text-transform: uppercase; }
.coinche-suit:active, .coinche-bid:active, .coinche-action:active { transform: translateY(1px); }
.coinche-suit:disabled, .coinche-bid:disabled, .coinche-action:disabled, .coinche-card button:disabled { opacity: .5; cursor: not-allowed; }
[data-state="loading"] { cursor: wait; }
[data-state="error"] { outline: 3px solid var(--coinche-danger); }
[data-state="success"] { outline: 3px solid var(--coinche-success); }

.coinche-hand { padding: var(--coinche-space-3) var(--coinche-space-3) max(var(--coinche-space-4), env(safe-area-inset-bottom)); display: grid; gap: var(--coinche-space-2); border-block-start: 3px solid var(--coinche-ink); background: var(--coinche-paper-2); }
.coinche-hand__label { display: flex; justify-content: space-between; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.coinche-hand__cards { min-width: 0; display: flex; justify-content: center; align-items: end; padding-inline: var(--coinche-space-2); }
.coinche-card { inline-size: clamp(3.3rem, 12vw, 7.2rem); flex: 0 1 7.2rem; margin-inline-start: clamp(-1.8rem, -3vw, -.45rem); transition: transform var(--coinche-dur-base) var(--coinche-ease-out); }
.coinche-card:first-child { margin-inline-start: 0; }
.coinche-card button { inline-size: 100%; min-block-size: 44px; padding: 0; border: 0; border-radius: var(--coinche-radius-md); background: transparent; cursor: pointer; filter: drop-shadow(.15rem .25rem .2rem var(--coinche-shadow)); }
.coinche-card button:not(:disabled):focus-visible { transform: translateY(-.75rem); }
.coinche-card button[data-state="error"] { outline: 3px solid var(--coinche-danger); }

.coinche-result { min-block-size: calc(100dvh - 8.5rem); padding: clamp(2rem, 10vw, 8rem); display: grid; place-content: center; justify-items: start; background: var(--coinche-danger); color: var(--coinche-danger-ink); }
.coinche-result p { margin: 0 0 var(--coinche-space-3); font-weight: 800; }
.coinche-result h1 { min-width: 0; margin: 0 0 var(--coinche-space-6); font-family: var(--coinche-font-display); font-size: clamp(3rem, 14vw, 8rem); line-height: 1; letter-spacing: -.07em; overflow-wrap: anywhere; font-style: normal; text-transform: uppercase; }

@media (hover: hover) and (pointer: fine) {
    .coinche-suit:hover, .coinche-bid:hover, .coinche-action:hover { transform: translateY(-2px); }
    .coinche-card button:not(:disabled):hover { transform: translateY(-.75rem); }
}

@media (min-width: 40rem) {
    .coinche-auction { inset: 10% 12%; padding: var(--coinche-space-5); }
    .coinche-seat__count { display: inline; font-size: .65rem; white-space: nowrap; }
    .coinche-trick__card { inline-size: 5.5rem; }
    .coinche-trick { inline-size: 16rem; block-size: 13rem; }
}

@media (max-width: 39.99rem) {
    .coinche-topbar { grid-template-columns: minmax(0, 1fr) auto; }
    .coinche-turn { grid-column: 1 / -1; grid-row: 2; }
    .coinche-leave { font-size: .78rem; }
    .coinche-scorebar mark { display: none; }
    .coinche-scorebar > p strong { font-size: .78rem; }
    .coinche-seat { padding: var(--coinche-space-1); max-inline-size: 7.3rem; }
    .coinche-seat__avatar { inline-size: 1.75rem; block-size: 1.75rem; }
    .coinche-seat p small { display: none; }
    .coinche-seat p strong { max-inline-size: 4.5rem; font-size: .72rem; }
    .coinche-suits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coinche-bids { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .coinche-suit { font-size: .75rem; }
    .coinche-auction { overflow-y: auto; }
}

@media (pointer: coarse) {
    .coinche-game :where(button, a) { min-block-size: 44px; min-inline-size: 44px; }
}

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