/*
 * Picker de tables Chōhan — version "ligne" 3-zones.
 *
 * Layout : [identité] · [千両箱 héros doré] · [meta footer]
 *   - Identité  : numéro 大 + état (空席 / 満席 / この卓 / 再入室)
 *   - 千両箱    : visuel central doré, drive le choix de table
 *   - Meta      : min-bet + ratio 丁/半 en petit + historique miniature
 *
 * Identité visuelle : laque noire, feuille d'or, code couleur sur le ruban
 * gauche (vert libre / ambre occupée / rouge pleine / or = c'est moi).
 */
.chohan-ip-overlay {
    position: fixed;
    inset: 0;
    z-index: 500000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 28px);
    box-sizing: border-box;
    font-family: 'Noto Sans JP', 'Meiryo', sans-serif;
    opacity: 0;
    transition: opacity 0.12s ease-out;
    /* design tokens */
    --gold: #c9a227;
    --gold-soft: #e0c065;
    --gold-deep: #8a6f1f;
    --cream: #f5e6c8;
    --cream-dim: rgba(245, 230, 200, 0.78);
    --cream-faint: rgba(245, 230, 200, 0.42);
    --line: rgba(var(--ch-gold-rgb), 0.22);
    --line-strong: rgba(var(--ch-gold-rgb), 0.5);
    --green: #8fc25b;
    --green-deep: #4f7a2f;
    --amber: #e0a850;
    --amber-deep: #8a5a20;
    --crimson: #d05858;
    --crimson-deep: #7a2828;
    --cho: #f5a08e;
    --han: #94c0f0;
}
.chohan-ip-overlay.is-open { opacity: 1; }
.chohan-ip-overlay.is-closing { opacity: 0; }

.chohan-ip-backdrop {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background:
        radial-gradient(120% 80% at 50% 35%, rgba(40, 24, 12, 0.55) 0%, rgba(8, 5, 3, 0.94) 70%),
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0) 0 8px, rgba(0, 0, 0, 0.18) 8px 9px);
    backdrop-filter: blur(2px) saturate(0.8);
    -webkit-backdrop-filter: blur(2px) saturate(0.8);
}

/* Panneau : même base que #chohan-history-strip (room_chohan.html) */
.chohan-ip-panel {
    position: relative;
    z-index: 1;
    width: min(1100px, 100%);
    max-height: min(90vh, 800px);
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(180deg, rgba(36, 22, 12, 0.98) 0%, rgba(15, 9, 5, 0.99) 100%);
    border: 1px solid rgba(var(--ch-gold-rgb), 0.28);
    border-radius: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 160, 0.08),
        0 6px 22px rgba(0, 0, 0, 0.5),
        0 32px 64px rgba(0, 0, 0, 0.65);
    overflow: hidden;
    transform: translateY(8px) scale(0.985);
    transition: transform 0.14s cubic-bezier(0.2, 0.85, 0.4, 1.05);
}
.chohan-ip-overlay.is-open .chohan-ip-panel { transform: translateY(0) scale(1); }
.chohan-ip-overlay.is-closing .chohan-ip-panel { transform: translateY(8px) scale(0.985); }

/* Liseré haut : même idée que la bande 履歴, pas le large bandeau doré précédent */
.chohan-ip-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--ch-gold-rgb), 0.35) 20%,
        rgba(var(--ch-gold-rgb), 0.55) 50%,
        rgba(var(--ch-gold-rgb), 0.35) 80%,
        transparent 100%);
    opacity: 0.9;
    pointer-events: none;
}

/* ===== HEADER : zone titre (kicker + jeu centré) + outils (compteur, filtre, ×) ===== */
.picker-head {
    flex-shrink: 0;
    padding: 16px 18px 15px;
    border-bottom: 1px solid rgba(var(--ch-gold-rgb), 0.35);
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(90deg, rgba(var(--ch-gold-rgb), 0.07) 0%, transparent 45%, transparent 55%, rgba(var(--ch-gold-rgb), 0.05) 100%);
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
}
.picker-head-titlewrap {
    flex: 1 1 auto;
    min-width: 0;
}
.picker-head-tools {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
}
.picker-head-title {
    margin: 0;
    font-family: 'Noto Serif JP', 'Noto Sans JP', serif;
    line-height: 1.3;
}
.picker-head-title--plain .chohan-ip-title-plain {
    display: block;
    font-size: clamp(1.05rem, 1.65vw, 1.28rem);
    font-weight: 700;
    color: #f8ecd8;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.9),
        0 2px 8px rgba(0, 0, 0, 0.55);
}
.picker-head-title--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(8px, 2vw, 18px);
    width: 100%;
}
.chohan-ip-title-kicker {
    justify-self: start;
    font-size: clamp(0.82rem, 1.35vw, 0.98rem);
    font-weight: 600;
    color: rgba(245, 230, 200, 0.72);
    letter-spacing: 0.12em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
.chohan-ip-title-game {
    justify-self: center;
    flex-shrink: 0;
}
/* Titre du jeu (丁半 / チンチロ / …) en typographie style enseigne (kanban
 * 看板) Edo : pas de boîte cliquable — c'est un mot, pas un bouton. Gradient
 * or appliqué via background-clip:text pour évoquer l'engravure dorée,
 * drop-shadow multi-stops pour la profondeur, trait pinceau décoratif sous
 * le texte qui rappelle un sceau / brushstroke. */
.chohan-ip-title-game-inner {
    display: inline-block;
    position: relative;
    padding: 2px 10px 10px;
    font-family: 'Noto Serif JP', 'Noto Sans JP', serif;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 900;
    letter-spacing: 0.14em;
    text-indent: 0;
    line-height: 1;
    white-space: nowrap;

    /* Texte en gradient or "engravé" — du blanc lumineux en haut au bronze
     * profond en bas, comme une lettre frappée à chaud dans le métal. */
    background: linear-gradient(180deg,
        #fff5c8 0%,
        #ffe28c 32%,
        #d8a040 70%,
        #8b6020 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

    /* Drop-shadow (pas text-shadow — incompatible avec text fill transparent)
     * en deux passes : crisp 1px dessous pour l'incision + halo doux pour
     * détacher du fond sombre du header. */
    filter:
        drop-shadow(0 1px 0 rgba(40, 18, 6, 0.85))
        drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 8px rgba(var(--ch-gold-rgb), 0.18));
}
/* Trait pinceau doré sous le mot — légère respiration en gradient + arrondi,
 * accent décoratif sans encadrer (donc rien qui ressemble à un bouton). */
.chohan-ip-title-game-inner::after {
    content: '';
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 1px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--ch-gold-rgb), 0.0) 4%,
        rgba(var(--ch-gold-rgb), 0.55) 22%,
        rgba(var(--ch-gold-rgb), 0.9) 50%,
        rgba(var(--ch-gold-rgb), 0.55) 78%,
        rgba(var(--ch-gold-rgb), 0.0) 96%,
        transparent 100%);
    border-radius: 999px;
    box-shadow: 0 0 6px rgba(var(--ch-gold-rgb), 0.35);
    pointer-events: none;
}
.chohan-ip-title-balance {
    justify-self: stretch;
    min-width: 0;
}
.chohan-ip-close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(var(--ch-gold-rgb), 0.45);
    background: linear-gradient(180deg, rgba(60, 40, 20, 0.7), rgba(20, 12, 8, 0.7));
    color: var(--cream);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.chohan-ip-close:hover {
    background: linear-gradient(180deg, rgba(160, 60, 50, 0.8), rgba(80, 25, 25, 0.85));
    border-color: rgba(255, 200, 180, 0.7);
    transform: rotate(90deg);
    box-shadow: 0 0 14px rgba(180, 60, 60, 0.4);
}
.chohan-ip-close:focus-visible {
    outline: 2px solid rgba(232, 213, 181, 0.85);
    outline-offset: 2px;
}

/* === Chip 残高 (solde wallet du joueur) — remplace l'ancien counter. ====
 * Affichée dans le header tools, lue depuis window.__chohanWalletAmount via
 * readMyWalletAmount() et rafraîchie à chaque buildUI/rerender. DNA gold
 * cohérent avec les autres chips du picker. */
.chohan-ip-wallet {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    flex-shrink: 0;
    padding: 6px 14px 7px;
    border-radius: 999px;
    border: 1px solid rgba(var(--ch-gold-rgb), 0.42);
    background:
        linear-gradient(180deg, rgba(48, 30, 12, 0.78) 0%, rgba(22, 14, 8, 0.78) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 160, 0.10),
        0 2px 6px rgba(0, 0, 0, 0.35);
    line-height: 1;
}
.chohan-ip-wallet-lbl {
    font-family: 'Noto Serif JP', 'Noto Sans JP', serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.10em;
    color: rgba(255, 220, 152, 0.80);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
}
.chohan-ip-wallet-val {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #ffd998;
    text-shadow:
        0 0 6px rgba(255, 180, 70, 0.35),
        0 1px 1px rgba(0, 0, 0, 0.55);
    font-variant-numeric: tabular-nums;
}

/* === Toggle list/grid view (segmented control) ============================
 * Deux boutons côte-à-côte avec icônes SVG. Le bouton actif a un bg doré
 * subtil. Persistance via cookie `gameRoomPickerView` (cf. JS picker). */
.chohan-ip-viewtoggle {
    display: inline-flex;
    gap: 2px;
    flex-shrink: 0;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid rgba(var(--ch-gold-rgb), 0.24);
    background: rgba(0, 0, 0, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.04);
}
.chohan-ip-view-btn {
    width: 32px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(245, 230, 200, 0.55);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.chohan-ip-view-btn:hover { color: rgba(245, 230, 200, 0.95); }
.chohan-ip-view-btn:focus-visible {
    outline: 2px solid rgba(232, 213, 181, 0.85);
    outline-offset: 2px;
}
.chohan-ip-view-btn[aria-pressed="true"] {
    background: linear-gradient(180deg,
        rgba(var(--ch-gold-rgb), 0.42) 0%,
        rgba(var(--ch-gold-rgb), 0.18) 100%);
    color: #fff5d6;
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 200, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.chohan-ip-view-btn svg { display: block; }

/* ===== BODY (même lecture que l’intérieur de #chohan-history-strip) =====
   On force une hauteur minimale pour que le PANNEAU ne change pas de taille
   pendant le chargement (tant qu'on attend `chohanInstancesSnapshot`). Les
   cartes apparaissent ensuite progressivement (animation `chohan-ip-card-in`
   plus bas). */
.chohan-ip-body {
    flex: 1 1 auto;
    padding: 14px 18px 18px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: min(380px, 60vh);
    background: transparent;
}
.chohan-ip-body::-webkit-scrollbar { width: 8px; }
.chohan-ip-body::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); }
.chohan-ip-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--ch-gold-rgb), 0.45), rgba(140, 100, 30, 0.45));
    border-radius: 4px;
}
.chohan-ip-empty {
    text-align: center;
    color: var(--cream-dim);
    padding: 48px 14px;
    font-size: 13px;
    letter-spacing: 0.1em;
    opacity: 0.85;
}
/* Couvre tout le panneau (header + corps) pendant l’attente du snapshot WS */
.chohan-ip-loading {
    position: absolute;
    inset: 0;
    z-index: 40;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 24px;
    text-align: center;
    color: var(--cream);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.16em;
    pointer-events: auto;
    border-radius: inherit;
    background-color: rgba(8, 5, 3, 0.88);
    background-image: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--ch-gold-rgb), 0.10) 45%,
        rgba(245, 230, 200, 0.14) 50%,
        rgba(var(--ch-gold-rgb), 0.10) 55%,
        transparent 100%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: chohan-ip-loading-shimmer 1.6s ease-in-out infinite;
}
@keyframes chohan-ip-loading-shimmer {
    0%   { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}
.chohan-ip-empty { color: var(--cream-faint); }

/* La grille en mode DÉFAUT (liste) — lignes empilées verticalement. */
.chohan-ip-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Mode GRID : vignettes en grille auto-fill, beaucoup plus compactes.
 * Pas d'historique de manches, juste l'info essentielle pour décider rapidement
 * (numéro, état, 千両箱, seuils financiers, progression personnelle). */
.chohan-ip-grid.is-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.chohan-ip-grid.is-grid .chohan-ip-card {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    padding: 12px 14px;
    gap: 10px;
}
.chohan-ip-grid.is-grid .chohan-ip-id {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    width: 100%;
    padding: 0;
    gap: 8px;
}
.chohan-ip-grid.is-grid .chohan-ip-num { font-size: 28px; }
.chohan-ip-grid.is-grid .chohan-ip-state { font-size: 12px; }
.chohan-ip-grid.is-grid .ch-ip-myprogress { margin-top: 0; }
/* Le hero 千両箱 prend toute la largeur de la vignette */
.chohan-ip-grid.is-grid .chohan-ip-pool-hero {
    margin: 0;
    width: 100%;
    min-width: 0;
    padding: 9px 14px 10px;
}
.chohan-ip-grid.is-grid .chohan-ip-pool-num { font-size: 24px; }
.chohan-ip-grid.is-grid .chohan-ip-pool-unit { font-size: 14px; }
/* Meta en bas, ligne unique justifiée entre ratio et minbet */
.chohan-ip-grid.is-grid .chohan-ip-meta {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    min-width: 0;
    max-width: none;
    width: 100%;
    gap: 8px;
}
.chohan-ip-grid.is-grid .chohan-ip-meta-top {
    width: 100%;
    gap: 10px;
}
/* Le ruban d'historique disparaît (déjà non rendu côté JS en mode grid,
 * mais on couvre aussi l'éventuelle row inline pour être robuste). */
.chohan-ip-grid.is-grid .chohan-ip-hands-row,
.chohan-ip-grid.is-grid .chohan-ip-hands { display: none !important; }

@media (max-width: 560px) {
    .chohan-ip-grid.is-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 10px;
    }
    .chohan-ip-grid.is-grid .chohan-ip-card { padding: 10px 12px; gap: 8px; }
    .chohan-ip-grid.is-grid .chohan-ip-num { font-size: 24px; }
    .chohan-ip-grid.is-grid .chohan-ip-pool-num { font-size: 20px; }
}

/* Apparition progressive des lignes après réception du snapshot. Stagger
   géré via `nth-child` : pas besoin de --i côté JS, et limite à ~12 cartes
   visibles avant le scroll, ce qui couvre tous les cas usuels. */
/* Refonte 2026-06 : slide-in DROITE → GAUCHE avec fade (au lieu du
   léger translateY initial). Amplitude plus marquée (40 px) pour que
   l'effet soit visible quand le snapshot WebSocket arrive. */
@keyframes chohan-ip-card-in {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Animation scopée à `.is-entering` — appliquée par le JS uniquement
   aux cartes nouvellement insérées (snapshot initial ou patch d'une
   carte qui n'existait pas avant). Évite la ré-animation à chaque
   `chohanInstancesUpdate` qui patcherait une carte déjà présente. */
.chohan-ip-grid .chohan-ip-card.is-entering {
    animation: chohan-ip-card-in 0.42s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
.chohan-ip-grid .chohan-ip-card.is-entering:nth-child(1)  { animation-delay: 0.02s; }
.chohan-ip-grid .chohan-ip-card.is-entering:nth-child(2)  { animation-delay: 0.08s; }
.chohan-ip-grid .chohan-ip-card.is-entering:nth-child(3)  { animation-delay: 0.14s; }
.chohan-ip-grid .chohan-ip-card.is-entering:nth-child(4)  { animation-delay: 0.20s; }
.chohan-ip-grid .chohan-ip-card.is-entering:nth-child(5)  { animation-delay: 0.26s; }
.chohan-ip-grid .chohan-ip-card.is-entering:nth-child(6)  { animation-delay: 0.32s; }
.chohan-ip-grid .chohan-ip-card.is-entering:nth-child(7)  { animation-delay: 0.38s; }
.chohan-ip-grid .chohan-ip-card.is-entering:nth-child(8)  { animation-delay: 0.44s; }
.chohan-ip-grid .chohan-ip-card.is-entering:nth-child(9)  { animation-delay: 0.50s; }
.chohan-ip-grid .chohan-ip-card.is-entering:nth-child(10) { animation-delay: 0.56s; }
.chohan-ip-grid .chohan-ip-card.is-entering:nth-child(11) { animation-delay: 0.62s; }
.chohan-ip-grid .chohan-ip-card.is-entering:nth-child(12) { animation-delay: 0.68s; }
.chohan-ip-grid .chohan-ip-card.is-entering:nth-child(n+13) { animation-delay: 0.74s; }
@media (prefers-reduced-motion: reduce) {
    .chohan-ip-grid .chohan-ip-card.is-entering { animation: none; }
}

/* ===== LIGNE (ex-card) =====
   Code couleur sur toute la ligne pour voir en un coup d'œil l'état :
     - vert  : place libre
     - ambre : occupée mais on peut entrer (multi non plein)
     - rouge : pleine, refusée
     - or    : c'est moi qui suis dedans
*/
.chohan-ip-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 12px 18px;
    min-height: 78px;
    border-radius: 12px;
    border: 1px solid rgba(var(--ch-gold-rgb), 0.22);
    color: var(--cream);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    width: 100%;
    transition:
        background 0.18s,
        border-color 0.18s,
        box-shadow 0.18s,
        transform 0.15s,
        opacity 0.15s;
    background:
        linear-gradient(90deg, rgba(40, 28, 18, 0.55) 0%, rgba(18, 12, 8, 0.7) 100%);
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 220, 160, 0.03) inset;
}

/* ============================================================
   Layout 3-zones : [identité gauche] · [千両箱 héros centré] ·
                    [meta footer droite]
   La star visuelle est le pot (gold box centré) — tout le reste
   est secondaire.
   ============================================================ */

/* ── Zone gauche : identité (numéro + état) ── */
.chohan-ip-id {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 76px;
    padding: 0 4px;
}
.chohan-ip-num {
    font-family: 'Noto Serif JP', serif;
    font-size: 34px;
    font-weight: 800;
    color: #fff3c4;
    line-height: 1;
    letter-spacing: 0.02em;
}
.chohan-ip-state {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(232, 213, 181, 0.82);
    line-height: 1.15;
}

/* ── Zone centre : 千両箱 héros (gold box) ──
   Grandit pour combler l'espace entre l'identité et la meta zone.
   Pas de max-width : flex-grow l'amène jusqu'à toucher la meta zone
   (qui a son propre min-width et content right-aligned). */
.chohan-ip-pool-hero {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 24px 10px;
    margin: 0 10px;
    min-width: 220px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 200, 80, 0.20), rgba(0, 0, 0, 0) 65%),
        linear-gradient(180deg, rgba(48, 28, 12, 0.85), rgba(28, 16, 8, 0.78));
    border: 1px solid rgba(232, 199, 122, 0.45);
    box-shadow:
        inset 0 0 14px rgba(255, 180, 70, 0.10),
        0 2px 8px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}
.chohan-ip-pool-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 230, 160, 0.18) 50%, transparent 65%);
    transform: translateX(-100%);
    pointer-events: none;
    transition: transform 0.6s ease;
}
.chohan-ip-pool-lbl {
    font-family: 'Noto Serif JP', serif;
    font-size: 13px;
    font-weight: 800;
    color: #ffd24c;
    letter-spacing: 0.12em;
    line-height: 1;
    text-shadow: 0 0 6px rgba(255, 180, 70, 0.4);
}
.chohan-ip-pool-val {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1;
}
.chohan-ip-pool-num {
    font-size: 28px;
    font-weight: 900;
    color: #fff5c8;
    text-shadow: 0 0 8px rgba(255, 200, 80, 0.5);
    letter-spacing: 0.01em;
}
.chohan-ip-pool-unit {
    font-size: 16px;
    font-weight: 800;
    color: #ffd998;
    opacity: 0.85;
}

/* Pot chaud (> 1.5× seed) : montant en or vif + pulse léger. */
.chohan-ip-card.is-hot .chohan-ip-pool-num {
    color: #ffe066;
    text-shadow: 0 0 12px rgba(255, 200, 80, 0.85),
                 0 0 4px rgba(255, 220, 100, 0.6);
    animation: chohanIpHotPulse 1.8s ease-in-out infinite;
}
@keyframes chohanIpHotPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

/* === Progression personnelle (妖怪倒し) — affichée sous l'état de la carte
 *     uniquement quand myStreak > 0. Persiste par (instance, userId) côté
 *     serveur, survit aux leave/rejoin. Couleur scalée par % du palier max. */
.ch-ip-myprogress {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
    padding: 3px 11px 4px;
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(60, 32, 14, 0.68), rgba(40, 20, 8, 0.82));
    border: 1px solid rgba(255, 180, 80, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 200, 120, 0.16);
    font-size: 12.5px;
    color: #ffd998;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.ch-ip-myprogress .myp-icon {
    font-family: 'Noto Serif JP', serif;
    color: #ffb866;
    font-weight: 900;
    text-shadow: 0 0 6px rgba(255, 170, 60, 0.5);
    line-height: 1;
    font-size: 13px;
}
.ch-ip-myprogress .myp-bar {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 7px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    flex-shrink: 0;
}
.ch-ip-myprogress .myp-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--p, 0%);
    background: linear-gradient(180deg, #ffb030 0%, #c87010 100%);
    box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.55);
    transition: width 0.35s ease;
}
/* État neuf (0/12) — badge présent mais neutre, signale "rien commencé" */
.ch-ip-myprogress.is-fresh {
    border-color: rgba(180, 180, 180, 0.22);
    background: linear-gradient(145deg, rgba(28, 28, 28, 0.55), rgba(18, 18, 18, 0.7));
    color: #b8b8b8;
}
.ch-ip-myprogress.is-fresh .myp-icon {
    color: #888;
    text-shadow: none;
}
.ch-ip-myprogress.is-fresh .myp-count {
    color: #b0b0b0;
}
.ch-ip-myprogress.is-warm .myp-bar::after {
    background: linear-gradient(180deg, #ffd040 0%, #d09010 100%);
}
.ch-ip-myprogress.is-hot .myp-bar::after {
    background: linear-gradient(180deg, #ffe060 0%, #f0a020 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 200, 0.6),
        0 0 6px rgba(255, 200, 80, 0.6);
}
.ch-ip-myprogress.is-max .myp-bar::after {
    background: linear-gradient(180deg, #ffec80 0%, #ffb030 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 200, 0.7),
        0 0 10px rgba(255, 220, 100, 0.85);
}
.ch-ip-myprogress.is-max {
    border-color: rgba(255, 220, 100, 0.7);
    background: linear-gradient(145deg, rgba(80, 50, 16, 0.78), rgba(60, 32, 12, 0.86));
    animation: chohanIpStreakMaxPulse 1.6s ease-in-out infinite;
}
@keyframes chohanIpStreakMaxPulse {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.2), 0 0 0 rgba(255, 200, 80, 0); }
    50%      { box-shadow: inset 0 1px 0 rgba(255, 240, 180, 0.4), 0 0 14px rgba(255, 200, 80, 0.55); }
}
.ch-ip-myprogress .myp-count {
    font-variant-numeric: tabular-nums;
    color: #fff0c8;
    flex-shrink: 0;
}
.ch-ip-myprogress.is-max .myp-count {
    color: #fff4d0;
    text-shadow: 0 0 6px rgba(255, 220, 80, 0.6);
}

@media (max-width: 560px) {
    .ch-ip-myprogress { font-size: 10px; padding: 2px 6px; }
    .ch-ip-myprogress .myp-bar { width: 28px; height: 4px; }
}

/* ── Zone droite : meta footer (min-bet + ratio + historique) ──
   Grandit elle aussi pour partager l'espace avec le gold box.
   Contenus alignés à droite — les tuiles d'historique s'étirent
   jusqu'au bord droit de la zone. */
.chohan-ip-meta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    min-width: 300px;
    max-width: 580px;
    overflow: hidden;
}
.chohan-ip-meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 14px;
    font-size: 15px;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: rgba(232, 213, 181, 0.78);
}
/* Mini-stack vertical : "最低賭け金" en label discret (haut), valeur en gros (bas).
 * Plus clair que "最低 100¥" sur une ligne — "minimum de quoi ?" sans contexte. */
.chohan-ip-minbet-mini {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    line-height: 1.15;
}
.chohan-ip-minbet-mini .meta-lbl {
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(255, 228, 168, 0.72);
}
.chohan-ip-minbet-mini .meta-val {
    font-size: clamp(15px, 1.4vw, 17px);
    font-weight: 800;
    color: rgba(255, 228, 168, 0.95);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
    .chohan-ip-minbet-mini .meta-lbl { font-size: 11px; }
    .chohan-ip-minbet-mini .meta-val { font-size: 14px; }
}
.chohan-ip-ratio-mini {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.03em;
}
.chohan-ip-ratio-cho { color: #f5b2a4; }
.chohan-ip-ratio-han { color: #a8cbf0; }
.chohan-ip-ratio-empty { color: rgba(245, 230, 200, 0.48); }

.chohan-ip-hands-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.chohan-ip-hands-row--empty { justify-content: flex-end; }

/* ── Hover : brillance qui balaye le gold box + halo doré sur num ── */
.chohan-ip-card:hover:not([disabled]) .chohan-ip-pool-hero::after {
    transform: translateX(100%);
}
.chohan-ip-card:hover:not([disabled]) .chohan-ip-num {
    color: #ffe4a8;
    text-shadow: 0 0 10px rgba(255, 200, 80, 0.55);
}

/* ── Responsive ── */
@media (max-width: 560px) {
    .chohan-ip-card {
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 10px;
        min-height: 68px;
    }
    .chohan-ip-id { min-width: 60px; padding: 0 2px; gap: 4px; }
    .chohan-ip-num { font-size: 26px; }
    .chohan-ip-state { font-size: 12px; }
    .chohan-ip-pool-hero { padding: 7px 12px 8px; margin: 0 4px; min-width: 160px; gap: 3px; }
    .chohan-ip-pool-lbl { font-size: 12px; }
    .chohan-ip-pool-num { font-size: 22px; }
    .chohan-ip-pool-unit { font-size: 13px; }
    .chohan-ip-meta {
        flex-basis: 100%;
        min-width: 0;
        max-width: none;
        align-items: stretch;
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;
    }
    .chohan-ip-hands-row { flex: 1; justify-content: flex-end; }
}

/* Ruban gauche : marqueur d'état lumineux. */
.chohan-ip-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: rgba(var(--ch-gold-rgb), 0.25);
    transition: background 0.18s, box-shadow 0.18s, top 0.18s, bottom 0.18s;
}

/* === États : couleur du fond + ruban + numéro selon disponibilité === */
.chohan-ip-card.is-open {
    background:
        linear-gradient(90deg,
            rgba(143, 194, 91, 0.18) 0%,
            rgba(143, 194, 91, 0.05) 24%,
            rgba(20, 14, 9, 0.7) 70%,
            rgba(14, 10, 6, 0.78) 100%);
    border-color: rgba(143, 194, 91, 0.32);
}
.chohan-ip-card.is-open::before {
    background: linear-gradient(180deg, var(--green), var(--green-deep));
    box-shadow: 0 0 12px rgba(143, 194, 91, 0.55);
}
.chohan-ip-card.is-open .chohan-ip-num { color: #d8efb0; }

.chohan-ip-card.is-busy {
    background:
        linear-gradient(90deg,
            rgba(224, 168, 80, 0.18) 0%,
            rgba(224, 168, 80, 0.05) 24%,
            rgba(20, 14, 9, 0.7) 70%,
            rgba(14, 10, 6, 0.78) 100%);
    border-color: rgba(224, 168, 80, 0.32);
}
.chohan-ip-card.is-busy::before {
    background: linear-gradient(180deg, var(--amber), var(--amber-deep));
    box-shadow: 0 0 12px rgba(224, 168, 80, 0.5);
}
.chohan-ip-card.is-busy .chohan-ip-num { color: #f3d59a; }

.chohan-ip-card.is-full {
    background:
        linear-gradient(90deg,
            rgba(208, 88, 88, 0.20) 0%,
            rgba(208, 88, 88, 0.05) 24%,
            rgba(20, 12, 10, 0.78) 70%,
            rgba(14, 8, 8, 0.85) 100%);
    border-color: rgba(208, 88, 88, 0.35);
    opacity: 0.75;
    filter: saturate(0.85);
}
.chohan-ip-card.is-full::before {
    background: linear-gradient(180deg, var(--crimson), var(--crimson-deep));
    box-shadow: 0 0 12px rgba(208, 88, 88, 0.5);
}
.chohan-ip-card.is-full .chohan-ip-num { color: #e89a9a; }

.chohan-ip-card.is-mine {
    background:
        linear-gradient(90deg,
            rgba(232, 200, 100, 0.24) 0%,
            rgba(232, 200, 100, 0.06) 26%,
            rgba(28, 20, 12, 0.78) 70%,
            rgba(18, 12, 8, 0.85) 100%);
    border-color: rgba(232, 200, 100, 0.55);
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.4),
        0 0 18px rgba(232, 200, 100, 0.18),
        0 0 0 1px rgba(232, 200, 100, 0.16) inset;
}
.chohan-ip-card.is-mine::before {
    background: linear-gradient(180deg, var(--gold-soft), var(--gold-deep));
    box-shadow: 0 0 14px rgba(232, 200, 100, 0.6);
    top: 4px;
    bottom: 4px;
    width: 5px;
}
.chohan-ip-card.is-mine .chohan-ip-num {
    color: #ffe28a;
    text-shadow: 0 0 10px rgba(232, 200, 100, 0.4);
}

.chohan-ip-card.is-current {
    opacity: 0.58;
    filter: saturate(0.5);
}
.chohan-ip-card.is-current .chohan-ip-num { color: rgba(232, 213, 181, 0.72); }

/* === HOVER : translate + glow par état === */
.chohan-ip-card.is-open:hover:not(:disabled),
.chohan-ip-card.is-busy:hover:not(:disabled),
.chohan-ip-card.is-mine:hover:not(:disabled) {
    transform: translateX(3px);
}
.chohan-ip-card.is-open:hover:not(:disabled) {
    border-color: rgba(180, 220, 130, 0.7);
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(180, 220, 130, 0.28) inset,
        0 0 22px rgba(143, 194, 91, 0.22);
}
.chohan-ip-card.is-busy:hover:not(:disabled) {
    border-color: rgba(240, 200, 130, 0.7);
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(240, 200, 130, 0.28) inset,
        0 0 22px rgba(224, 168, 80, 0.22);
}
.chohan-ip-card.is-mine:hover:not(:disabled) {
    border-color: rgba(255, 220, 130, 0.85);
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 220, 130, 0.32) inset,
        0 0 26px rgba(232, 200, 100, 0.32);
}
.chohan-ip-card:focus-visible {
    outline: 2px solid rgba(232, 213, 181, 0.85);
    outline-offset: 2px;
}

.chohan-ip-card:focus-visible {
    outline: 2px solid rgba(232, 200, 100, 0.85);
    outline-offset: 3px;
}
/* État disabled / locked : opacité gérée par d'autres règles, pas de
 * curseur not-allowed (cohérent avec le reste des salles). */

/* === État `is-broke` : wallet insuffisant pour la mise minimum === */
.chohan-ip-card.is-broke {
    opacity: 0.78;
    filter: grayscale(0.45) saturate(0.75);
}
.chohan-ip-card.is-broke .chohan-ip-pool-hero {
    background:
        radial-gradient(circle at 20% 0%, rgba(120, 60, 40, 0.18), rgba(0, 0, 0, 0) 65%),
        linear-gradient(180deg, rgba(40, 22, 16, 0.85), rgba(22, 14, 10, 0.78));
    border-color: rgba(180, 90, 80, 0.42);
}
.chohan-ip-card.is-broke .chohan-ip-state {
    color: #e89a9a;
    letter-spacing: 0.06em;
}
.chohan-ip-card.is-broke:hover {
    transform: none;
}

/* === Stamp 在席中 (currently seated) — rubber-stamp vert/jade en biais posé
 *     sur la carte de la table où le joueur est déjà assis. Visuel parallèle
 *     à 残高不足 mais en vert pour éviter la confusion (clé pédagogique demandée
 *     2026-05-21 : "c'est difficile à comprendre au début"). Affiché en mode
 *     list ET grid, taille adaptative. `filter:none` + `opacity:1` pour passer
 *     outre le saturate(0.5)/opacity:.58 hérité de `.is-current`. */
.chohan-ip-card.is-current::after {
    /* Escapes Unicode CSS — robustes même si le .css n'est pas servi
     * avec un charset UTF-8 (cas iframe AlwaysData → browser default
     * Latin-1 qui mojibake "現在中" en "ç¾åœ¨ä¸­"). */
    content: '\73FE\5728\4E2D'; /* 現在中 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-7deg);
    z-index: 30;
    pointer-events: none;
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(20px, 3.2vw, 30px);
    font-weight: 900;
    letter-spacing: 0.2em;
    color: #b8f578;
    padding: 7px 20px 8px;
    border: 4px solid #b8f578;
    border-radius: 4px;
    text-shadow:
        1px 1px 0 rgba(10, 40, 15, 0.85),
        0 0 6px rgba(184, 245, 120, 0.55),
        0 0 14px rgba(120, 200, 80, 0.35);
    box-shadow:
        inset 0 0 0 1.5px rgba(220, 255, 180, 0.4),
        0 0 18px rgba(140, 220, 90, 0.35);
    background: rgba(15, 50, 20, 0.42);
    white-space: nowrap;
    opacity: 1;
    filter: none;
    -webkit-text-stroke: 0.5px rgba(30, 90, 40, 0.55);
}
.chohan-ip-grid.is-grid .chohan-ip-card.is-current::after {
    font-size: clamp(15px, 2.4vw, 22px);
    padding: 4px 12px 5px;
    border-width: 2.5px;
    letter-spacing: 0.14em;
}
@media (max-width: 560px) {
    .chohan-ip-card.is-current::after {
        font-size: 18px;
        padding: 4px 12px;
        border-width: 2.5px;
    }
}

/* === Stamp 残高不足 (insufficient balance) — rubber-stamp rouge en biais
 *     posé par-dessus la carte quand le joueur n'a pas assez de wallet
 *     pour entrer. Affiché en mode list ET grid, taille adaptative. */
.chohan-ip-card.is-broke::after {
    content: '\6B8B\9AD8\4E0D\8DB3'; /* 残高不足 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    z-index: 30;
    pointer-events: none;
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(20px, 3.2vw, 30px);
    font-weight: 900;
    letter-spacing: 0.18em;
    color: rgba(220, 30, 30, 0.85);
    padding: 6px 18px 7px;
    border: 3.5px solid rgba(220, 30, 30, 0.85);
    border-radius: 4px;
    text-shadow:
        1px 1px 0 rgba(120, 10, 10, 0.45),
        0 0 4px rgba(220, 30, 30, 0.25);
    box-shadow:
        inset 0 0 0 1px rgba(255, 80, 60, 0.25),
        0 0 8px rgba(220, 30, 30, 0.18);
    background: rgba(40, 0, 0, 0.06);
    white-space: nowrap;
    /* Ne s'applique pas par filter:grayscale du parent grâce au stacking */
    filter: none;
    /* Léger flou tactile façon encre tamponnée */
    -webkit-text-stroke: 0.4px rgba(180, 20, 20, 0.4);
}
/* Vue grid : carte plus petite → stamp légèrement réduit */
.chohan-ip-grid.is-grid .chohan-ip-card.is-broke::after {
    font-size: clamp(15px, 2.4vw, 22px);
    padding: 4px 12px 5px;
    border-width: 2.5px;
    letter-spacing: 0.14em;
}
/* Petits écrans : encore plus compact */
@media (max-width: 560px) {
    .chohan-ip-card.is-broke::after {
        font-size: 18px;
        padding: 4px 12px;
        border-width: 2.5px;
    }
}

.chohan-ip-mute { font-size: 11px; color: rgba(232, 213, 181, 0.4); }

/* === HANDS : flèche ◀ = la tuile de gauche est la plus récente === */
.chohan-ip-hands-axis {
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    line-height: 1;
    color: rgba(232, 213, 181, 0.58);
    user-select: none;
    cursor: default;
}
.chohan-ip-hands-axis-sym {
    font-size: 35px;
    font-weight: 700;
    opacity: 0.95;
    transform: translateY(-2.5px);
}

/* === HANDS : mêmes tuiles 丁/半 que .chohan-history-tile (room_chohan.html) === */
.chohan-ip-hands-list {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    overflow: hidden;
    padding: 2px 0;
    flex: 1;
    min-width: 0;
}
.chohan-ip-hand {
    display: inline-flex;
    width: clamp(34px, 3.2vw, 42px);
    height: clamp(34px, 3.2vw, 42px);
    border-radius: 8px;
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(17px, 1.7vw, 22px);
    font-weight: 700;
    line-height: 1;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(20, 12, 8, 0.85);
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 3px rgba(0, 0, 0, 0.4),
        0 2px 3px rgba(0, 0, 0, 0.4);
}
.chohan-ip-hand[data-o='cho'] {
    background:
        radial-gradient(circle at 30% 26%, #b04132 0%, #7a2a1e 38%, #4e1812 100%);
    color: #ffe2d6;
}
.chohan-ip-hand[data-o='han'] {
    background:
        radial-gradient(circle at 30% 26%, #3a6c9e 0%, #254a72 38%, #1a3550 100%);
    color: #d8ecff;
}
/* Honbiki : 6 variantes selon la carte tirée par le 親 (1..6). Palette
 * alignée sur les tuiles du history strip de la salle pour cohérence
 * visuelle entre picker et room. */
.chohan-ip-hand[data-hb-dealer='1'] {
    background: radial-gradient(circle at 30% 26%, #4a6f8a 0%, #2a4a64 38%, #1a3450 100%);
    color: #f0f5fa;
}
.chohan-ip-hand[data-hb-dealer='2'] {
    background: radial-gradient(circle at 30% 26%, #6dab78 0%, #3f7a4d 38%, #2a5436 100%);
    color: #f0faf3;
}
.chohan-ip-hand[data-hb-dealer='3'] {
    background: radial-gradient(circle at 30% 26%, #e0c060 0%, #b08838 38%, #7a5e22 100%);
    color: #fffaef;
}
.chohan-ip-hand[data-hb-dealer='4'] {
    background: radial-gradient(circle at 30% 26%, #e09850 0%, #b06628 38%, #7a4418 100%);
    color: #fffaef;
}
.chohan-ip-hand[data-hb-dealer='5'] {
    background: radial-gradient(circle at 30% 26%, #d05858 0%, #8a2828 38%, #5a1818 100%);
    color: #fff0ef;
}
.chohan-ip-hand[data-hb-dealer='6'] {
    background: radial-gradient(circle at 30% 26%, #9e6ec0 0%, #683b8c 38%, #441e60 100%);
    color: #fbf0ff;
}
.chohan-ip-hand-more {
    font-size: 13px;
    color: rgba(232, 213, 181, 0.5);
    margin-left: 4px;
    flex-shrink: 0;
}
.chohan-ip-hands-empty {
    color: rgba(232, 213, 181, 0.32);
    font-size: 13px;
    letter-spacing: 0.16em;
    flex: 1;
    min-width: 0;
}

/* === ÉTAT (étiquette texte, plus de fausse forme « bouton ») =======
   Volontairement très sobre : pas de gradient, pas de glow, pas de bordure
   pleine. Couleur seulement, pour que la ligne reste lisible sans se
   présenter comme une zone cliquable concurrente du bouton complet
   (.chohan-ip-card est lui-même le bouton). */
/*
 * Manche multi en cours (`inRound` côté serveur). On laisse l’éventuelle
 * classe d’occupation dessous (is-busy / is-full / is-open) pour
 * conserver la couleur de fond métier, mais on superpose un halo doré
 * pulsant et un libellé `プレイ中` plus voyant — pour que tout le
 * réseau voie qu’une table est active, pas seulement les joueurs assis.
 */
.chohan-ip-card.is-in-round {
    border-color: rgba(232, 200, 100, 0.7);
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(232, 200, 100, 0.25) inset,
        0 0 22px rgba(232, 200, 100, 0.32);
    animation: chohanIpInRoundPulse 1.6s ease-in-out infinite;
}
.chohan-ip-card.is-in-round::before {
    background: linear-gradient(180deg, var(--gold-soft), var(--gold-deep));
    box-shadow: 0 0 14px rgba(232, 200, 100, 0.7);
}
@keyframes chohanIpInRoundPulse {
    0%, 100% {
        box-shadow:
            0 1px 0 rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(232, 200, 100, 0.22) inset,
            0 0 18px rgba(232, 200, 100, 0.22);
    }
    50% {
        box-shadow:
            0 1px 0 rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(232, 200, 100, 0.4) inset,
            0 0 28px rgba(232, 200, 100, 0.45);
    }
}

/* ===== RESPONSIVE =====
   Sous 700 px on autorise le wrap du header (le titre prend la 1ʳᵉ ligne,
   le couple compteur+filtre la 2ᵉ, et le × se place tout à droite). */
@media (max-width: 700px) {
    .chohan-ip-panel { max-height: 94vh; border-radius: 14px; }
    .chohan-ip-hand {
        width: clamp(24px, 5.8vw, 30px);
        height: clamp(24px, 5.8vw, 30px);
        font-size: 13px;
    }
    .picker-head {
        flex-wrap: wrap;
        gap: 10px 12px;
        padding: 12px 14px;
    }
    .picker-head-titlewrap {
        flex: 1 1 100%;
        order: 0;
        min-width: 0;
    }
    .picker-head-tools {
        order: 1;
        flex: 1 1 auto;
        flex-wrap: wrap;
        min-width: 0;
    }
    .chohan-ip-wallet { order: 0; margin-right: auto; padding: 5px 11px 6px; }
    .chohan-ip-wallet-lbl { font-size: 11px; }
    .chohan-ip-wallet-val { font-size: 14px; }
    .chohan-ip-viewtoggle { order: 1; }
    .picker-head-tools .chohan-ip-close {
        order: 2;
        position: absolute;
        top: 10px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}
@media (max-width: 520px) {
    .picker-head-title--split {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        row-gap: 8px;
        justify-items: center;
        text-align: center;
    }
    .chohan-ip-title-game {
        grid-row: 1;
    }
    .chohan-ip-title-kicker {
        grid-row: 2;
        justify-self: center;
        letter-spacing: 0.08em;
    }
    .chohan-ip-title-balance {
        display: none;
    }
}
@media (max-width: 420px) {
    .picker-head-title--plain .chohan-ip-title-plain { font-size: 1.08rem; letter-spacing: 0.03em; }
    .chohan-ip-title-game-inner {
        padding: 2px 8px 8px;
        font-size: 1.18rem;
        letter-spacing: 0.10em;
    }
    .chohan-ip-title-game-inner::after { left: 10%; right: 10%; height: 1.5px; }
    .chohan-ip-hand {
        width: 20px;
        height: 20px;
        font-size: 10px;
        border-radius: 5px;
    }
}

/* ============================================================
   Animation de sélection — feedback visuel 0.5s sur la carte au
   clic, avant que la modale se ferme (sync avec win-effect.mp3).
   Couvre les 3 jeux : chohan/chinchiro/honbiki utilisent tous la
   classe `.chohan-ip-card`.
   ============================================================ */
@keyframes chohanIpSelectPulse {
    0% {
        transform: scale(1);
        box-shadow:
            0 1px 0 rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(255, 220, 160, 0.03) inset,
            0 0 0 0 rgba(255, 220, 130, 0.7);
    }
    25% {
        transform: scale(1.045);
        box-shadow:
            0 4px 14px rgba(0, 0, 0, 0.5),
            0 0 0 2px rgba(255, 232, 160, 0.9) inset,
            0 0 28px 10px rgba(255, 220, 130, 0.55);
    }
    60% {
        transform: scale(0.985);
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(255, 220, 130, 0.4) inset,
            0 0 18px 6px rgba(255, 220, 130, 0.3);
    }
    100% {
        transform: scale(1);
        box-shadow:
            0 1px 0 rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(255, 220, 160, 0.03) inset,
            0 0 0 0 rgba(255, 220, 130, 0);
    }
}
.chohan-ip-card.is-selecting {
    animation: chohanIpSelectPulse 0.5s cubic-bezier(0.2, 0.85, 0.4, 1.05) forwards;
    pointer-events: none;
    z-index: 2;
    border-color: rgba(255, 232, 160, 0.85) !important;
}
@media (prefers-reduced-motion: reduce) {
    .chohan-ip-card.is-selecting { animation: none; }
}