/*
 * Chinchirorin instance picker — réutilise intégralement le design de
 * chohan-instance-picker.css. On override uniquement les tuiles d'historique
 * pour afficher 3 dés et utiliser un code couleur par type de résultat.
 */

/* Header de carte (chinchiro picker) : structure flex column qui empile
 * le numéro, l'état, et le badge "妖怪倒し X/12" verticalement. Sans ce style,
 * .chohan-ip-card-hdr serait un div block sans contrainte, et le badge
 * sortirait du flux de manière imprévisible. */
.chohan-ip-card-hdr {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 86px;
    padding: 0 4px;
}

/* Zone meta droite (chinchiro picker) : 必要所持金 + 最低賭け金 au-dessus de
 * l'historique des manches. Pattern calqué sur .chohan-ip-meta du Chōhan
 * mais en classes dédiées (cc-ip-*) pour ne pas hériter de min-width 280px
 * trop large pour le layout chinchiro. */
.cc-ip-meta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    min-width: 280px;
    max-width: 100%;
    overflow: hidden;
}
.cc-ip-meta-top {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 18px;
    width: 100%;
    line-height: 1.15;
    letter-spacing: 0.03em;
}
/* Chaque seuil est un mini-stack vertical : label discret en haut, valeur
 * proéminente en bas. Beaucoup plus lisible qu'une seule ligne "label valeur". */
.cc-ip-entry-mini,
.cc-ip-minbet-mini {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.cc-ip-entry-mini .meta-lbl,
.cc-ip-minbet-mini .meta-lbl {
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: none;
    opacity: 0.82;
}
.cc-ip-entry-mini .meta-val,
.cc-ip-minbet-mini .meta-val {
    font-size: clamp(15px, 1.4vw, 17px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
/* 必要所持金 : accent or (info-clé "puis-je entrer ?") */
.cc-ip-entry-mini .meta-lbl { color: rgba(255, 217, 152, 0.85); }
.cc-ip-entry-mini .meta-val {
    color: #ffd998;
    text-shadow: 0 0 6px rgba(255, 180, 70, 0.35);
}
/* 最低賭け金 : info secondaire, ton plus discret */
.cc-ip-minbet-mini .meta-lbl { color: rgba(232, 213, 181, 0.68); }
.cc-ip-minbet-mini .meta-val { color: rgba(232, 213, 181, 0.92); }

/* État is-broke : le seuil 必要所持金 vire au rouge pour signaler la raison du lock. */
.chohan-ip-card.is-broke .cc-ip-entry-mini .meta-lbl { color: rgba(255, 150, 130, 0.85); }
.chohan-ip-card.is-broke .cc-ip-entry-mini .meta-val {
    color: #ff8866;
    text-shadow: 0 0 6px rgba(220, 80, 60, 0.55);
}

@media (max-width: 560px) {
    .chohan-ip-card-hdr { min-width: 64px; gap: 4px; }
    .cc-ip-meta { min-width: 0; flex-basis: 100%; gap: 6px; }
    .cc-ip-meta-top { gap: 14px; justify-content: space-between; }
    .cc-ip-entry-mini .meta-lbl,
    .cc-ip-minbet-mini .meta-lbl { font-size: 11px; }
    .cc-ip-entry-mini .meta-val,
    .cc-ip-minbet-mini .meta-val { font-size: 14px; }
}

/* Tuiles 3 dés (override des .chohan-ip-hand pour le picker Chinchirorin).
 * Plus larges que les carrés 丁/半 chōhan car le texte est plus long
 * (目なし, シゴロ, etc.) — donc on les garde sensiblement plus étroites que
 * la version "tout-bumped" pour éviter l'overflow systématique sur la ligne. */
.chohan-ip-hand[data-cc] {
    width: auto;
    min-width: clamp(42px, 4.1vw, 52px);
    height: clamp(30px, 2.8vw, 38px);
    border-radius: 8px;
    font-size: clamp(11px, 1.25vw, 14px);
    font-family: 'Noto Sans JP', 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    padding: 0 8px;
}

/* Fade gradient à droite de la liste des tuiles dans le picker chinchiro.
 * Donne un signal visuel propre quand l'historique déborde de la zone meta
 * (tuiles plus larges → overflow facile selon la largeur disponible).
 * S'applique uniquement dans le contexte chinchiro via .cc-ip-meta. */
.cc-ip-meta .chohan-ip-hands-row {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0%, #000 88%, transparent 100%);
    padding-right: 4px;
}

/* === Grid view overrides chinchiro =======================================
 * Le picker chinchiro a sa propre structure header (.chohan-ip-card-hdr en
 * colonne) et meta (.cc-ip-meta avec 2 stacks). En mode grid on aplatit ces
 * containers pour gagner de la place dans une vignette. */
.chohan-ip-grid.is-grid .chohan-ip-card-hdr {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    padding: 0;
    gap: 8px;
}
.chohan-ip-grid.is-grid .cc-ip-myprogress { margin-top: 0; }
.chohan-ip-grid.is-grid .cc-ip-meta {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    max-width: none;
    gap: 8px;
}
.chohan-ip-grid.is-grid .cc-ip-meta-top {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
}
/* === DA plaque bois pour les tuiles d'historique du picker chinchiro =====
 * Identique à #chinchiro-history-strip dans la salle : linear gradient
 * vertical brun/tan + grain via repeating-linear-gradient + bord ciselé.
 * Chaque yaku conserve sa palette mais traduite en bois (tan neutre pour
 * me/menashi, red wood pour arashi, gold wood pour pinzoro, etc.). */
.chohan-ip-hand[data-cc] {
    border: 1.5px solid #4a2410;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 220, 170, 0.04) 0px,
            rgba(255, 220, 170, 0.04) 1px,
            rgba(0, 0, 0, 0.05) 1px,
            rgba(0, 0, 0, 0.05) 2.6px
        ),
        linear-gradient(180deg, #c8814a 0%, #8c5527 52%, #4f300f 100%);
    color: #1f0d00;
    text-shadow: 0 1px 0 rgba(255, 230, 180, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 230, 190, 0.30),
        inset 0 -2px 4px rgba(0, 0, 0, 0.40),
        0 2px 4px rgba(0, 0, 0, 0.40);
}
.chohan-ip-hand[data-cc='pinzoro'] {
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 240, 180, 0.06) 0px,
            rgba(255, 240, 180, 0.06) 1px,
            rgba(0, 0, 0, 0.05) 1px,
            rgba(0, 0, 0, 0.05) 2.6px
        ),
        linear-gradient(180deg, #ffd86b 0%, #b8943a 55%, #6b540e 100%);
    border-color: #5b3c12;
    color: #2d1f00;
    text-shadow: 0 1px 0 rgba(255, 240, 180, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 190, 0.45),
        inset 0 -2px 4px rgba(0, 0, 0, 0.45),
        0 2px 5px rgba(0, 0, 0, 0.45),
        0 0 10px rgba(255, 200, 80, 0.55);
}
.chohan-ip-hand[data-cc='arashi'] {
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 200, 180, 0.05) 0px,
            rgba(255, 200, 180, 0.05) 1px,
            rgba(0, 0, 0, 0.06) 1px,
            rgba(0, 0, 0, 0.06) 2.6px
        ),
        linear-gradient(180deg, #d63a28 0%, #931f15 55%, #4f0d07 100%);
    border-color: #3c0e08;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    box-shadow:
        inset 0 1px 0 rgba(255, 200, 180, 0.30),
        inset 0 -2px 4px rgba(0, 0, 0, 0.55),
        0 2px 5px rgba(0, 0, 0, 0.45),
        0 0 12px rgba(230, 70, 50, 0.6);
}
.chohan-ip-hand[data-cc='shigoro'] {
    background:
        repeating-linear-gradient(
            90deg,
            rgba(180, 230, 220, 0.05) 0px,
            rgba(180, 230, 220, 0.05) 1px,
            rgba(0, 0, 0, 0.06) 1px,
            rgba(0, 0, 0, 0.06) 2.6px
        ),
        linear-gradient(180deg, #4fa37c 0%, #2d6b50 52%, #143a2c 100%);
    border-color: #1f3026;
    color: #f0fff5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(220, 240, 230, 0.25),
        inset 0 -2px 4px rgba(0, 0, 0, 0.45),
        0 2px 4px rgba(0, 0, 0, 0.45),
        0 0 8px rgba(80, 180, 140, 0.40);
}
.chohan-ip-hand[data-cc='hifumi'] {
    background:
        repeating-linear-gradient(
            90deg,
            rgba(220, 195, 230, 0.05) 0px,
            rgba(220, 195, 230, 0.05) 1px,
            rgba(0, 0, 0, 0.06) 1px,
            rgba(0, 0, 0, 0.06) 2.6px
        ),
        linear-gradient(180deg, #a268c2 0%, #6e418a 52%, #3d1f54 100%);
    border-color: #261538;
    color: #faf0ff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(220, 200, 235, 0.25),
        inset 0 -2px 4px rgba(0, 0, 0, 0.50),
        0 2px 4px rgba(0, 0, 0, 0.45),
        0 0 8px rgba(160, 110, 195, 0.40);
}
.chohan-ip-hand[data-cc='me'] {
    /* hérite de la base bois tan — le yaku le plus courant, pas d'accent */
}
.chohan-ip-hand[data-cc='menashi'] {
    background:
        repeating-linear-gradient(
            90deg,
            rgba(220, 220, 220, 0.04) 0px,
            rgba(220, 220, 220, 0.04) 1px,
            rgba(0, 0, 0, 0.04) 1px,
            rgba(0, 0, 0, 0.04) 2.6px
        ),
        linear-gradient(180deg, #3d3a48 0%, #25232e 52%, #15131c 100%);
    border-color: #1a1820;
    color: #cfcdd6;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(220, 210, 195, 0.18),
        inset 0 -2px 4px rgba(0, 0, 0, 0.45),
        0 2px 4px rgba(0, 0, 0, 0.45);
}

/* === Progression personnelle (妖怪倒し — dégâts cumulés sur le démon de la table).
 * Persistante par (instance, userId) côté serveur — survit aux leave. Sens
 * aligné Chōhan : 0/12 au début, 12/12 au kill. Palette progressive :
 * fresh (gris neutre) → warm (orange) → hot (vif) → near-kill (or pulsant). */
.cc-ip-myprogress {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 3px 0 0;
    padding: 3px 11px 4px;
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(40, 22, 10, 0.62), rgba(28, 14, 6, 0.74));
    border: 1px solid rgba(255, 170, 70, 0.35);
    font-size: clamp(11px, 1vw, 12.5px);
    color: #ffd998;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    pointer-events: none;
}
.cc-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: 1.1em;
}
.cc-ip-myprogress .myp-bar {
    position: relative;
    flex: 1;
    min-width: 38px;
    max-width: 86px;
    height: 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.cc-ip-myprogress .myp-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--p, 0%);
    background: linear-gradient(180deg, #ffb040 0%, #c86810 100%);
    box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.55);
    transition: width 0.35s ease;
}
/* État neuf (0 dégât) : badge neutre, presque effacé — la table est encore "fraîche". */
.cc-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;
}
.cc-ip-myprogress.is-fresh .myp-icon {
    color: #888;
    text-shadow: none;
}
.cc-ip-myprogress.is-fresh .myp-count {
    color: #b0b0b0;
}
/* État "réchauffé" (1 → ~50%) — palette orange douce */
.cc-ip-myprogress.is-warm .myp-bar::after {
    background: linear-gradient(180deg, #ffb040 0%, #c86810 100%);
}
/* État "chaud" (≥ 50%) — orange plus vif */
.cc-ip-myprogress.is-hot {
    border-color: rgba(255, 180, 80, 0.55);
}
.cc-ip-myprogress.is-hot .myp-bar::after {
    background: linear-gradient(180deg, #ffd060 0%, #d07810 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 200, 0.6),
        0 0 6px rgba(255, 180, 60, 0.55);
}
/* Kill proche (dégâts ≥ max−3) — or pulsant, victoire à portée */
.cc-ip-myprogress.is-near-kill {
    border-color: rgba(255, 220, 100, 0.7);
    background: linear-gradient(145deg, rgba(70, 42, 12, 0.78), rgba(50, 28, 10, 0.86));
    animation: ccIpNearKillPulse 1.5s ease-in-out infinite;
}
.cc-ip-myprogress.is-near-kill .myp-bar::after {
    background: linear-gradient(180deg, #ffe080 0%, #f0a020 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 200, 0.7),
        0 0 9px rgba(255, 200, 80, 0.8);
}
.cc-ip-myprogress.is-near-kill .myp-icon {
    color: #ffd56a;
    text-shadow: 0 0 8px rgba(255, 200, 80, 0.7);
}
@keyframes ccIpNearKillPulse {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 230, 160, 0.25), 0 0 0 rgba(255, 200, 80, 0); }
    50%      { box-shadow: inset 0 1px 0 rgba(255, 245, 200, 0.4),  0 0 14px rgba(255, 210, 80, 0.6); }
}
.cc-ip-myprogress .myp-count {
    font-variant-numeric: tabular-nums;
    color: #ffe0c0;
    flex-shrink: 0;
}
.cc-ip-myprogress.is-near-kill .myp-count {
    color: #fff0c8;
    text-shadow: 0 0 6px rgba(255, 220, 80, 0.6);
}