/*
 * Custom Profile — キャスト トレーディングカード（レアリティ）
 *
 * ホログラフィック表現は pokemon-cards-css の技法を流用・改変。
 *   Portions derived from "pokemon-cards-css" (c) simeydotme — GPL-3.0
 *   https://github.com/simeydotme/pokemon-cards-css
 */

/* ============================================================
   セクション
   ============================================================ */
.custom-profile-deck-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin: 2.5rem 0;
    perspective: 600px;
}

/* ============================================================
   カード本体（ルート・3D変換）
   ============================================================ */
.custom-profile-tcard {
    /* ポインタ追従値の初期値（JSが上書き） */
    --pointer-x: 50%;
    --pointer-y: 50%;
    --pointer-from-center: 0;
    --pointer-from-top: 0.5;
    --pointer-from-left: 0.5;
    --card-opacity: 0;
    --rotate-x: 0deg;
    --rotate-y: 0deg;
    --background-x: 50%;
    --background-y: 50%;
    --card-scale: 1;
    --translate-x: 0px;
    --translate-y: 0px;

    /* 形状・テクスチャ */
    --card-radius: 4.55% / 3.5%;
    --grain: url("../images/tcard/grain.webp");
    --glitter: url("../images/tcard/glitter.png");
    --glittersize: 25%;

    /* 虹色（sunpillar）パレット */
    --clr-1: hsl(2, 100%, 73%);
    --clr-2: hsl(53, 100%, 69%);
    --clr-3: hsl(93, 100%, 69%);
    --clr-4: hsl(176, 100%, 76%);
    --clr-5: hsl(228, 100%, 74%);
    --clr-6: hsl(283, 100%, 73%);

    width: 100%;
    max-width: 300px;
    aspect-ratio: 0.718;
    border-radius: var(--card-radius);
    z-index: 1;
    transform: translate3d(0, 0, 0.01px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.custom-profile-tcard-translater,
.custom-profile-tcard-rotator {
    display: grid;
    width: 100%;
    aspect-ratio: 0.718;
    transform-origin: center;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.custom-profile-tcard-translater {
    transform: translate3d(var(--translate-x), var(--translate-y), 0.1px) scale(var(--card-scale));
}

.custom-profile-tcard-rotator {
    border-radius: var(--card-radius);
    transform: rotateY(calc(var(--rotate-x) + var(--cp-flip, 0deg))) rotateX(var(--rotate-y));
    transition: box-shadow 0.4s ease;
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.5), 0 2px 8px -4px rgba(0, 0, 0, 0.4);
}

.custom-profile-tcard.is-interacting .custom-profile-tcard-rotator {
    box-shadow: 0 0 3px -1px hsl(47, 100%, 78%), 0 0 14px 2px var(--card-glow, hsl(175, 100%, 90%)), 0 18px 30px -10px rgba(0, 0, 0, 0.6);
}

.custom-profile-tcard-front,
.custom-profile-tcard-back {
    grid-area: 1 / 1;
    width: 100%;
    aspect-ratio: 0.718;
    border-radius: var(--card-radius);
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.custom-profile-tcard-front {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    transform: translate3d(0, 0, 0.01px);
}

/* 裏面（ブランドデザイン）。flip時に表へめくれる */
.custom-profile-tcard-back {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    padding: 7%;
    transform: rotateY(180deg) translateZ(0.01px);
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.10), transparent 55%),
        linear-gradient(150deg, #16291c 0%, #0b1a12 42%, #1d1430 100%),
        #0e150f;
}

.custom-profile-tcard-back-inner {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 6% / 4.3%;
    border: 2px solid rgba(255, 255, 255, 0.18);
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 9px, transparent 9px 18px),
        radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.06), transparent 60%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
}

.custom-profile-tcard-back-orb {
    position: absolute;
    width: 66%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, rgba(160, 224, 96, 0.50), rgba(147, 1, 255, 0.26) 52%, transparent 72%);
}

.custom-profile-tcard-back-logo {
    position: relative;
    width: 74%;
    height: auto;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
}

/* 裏面の縁取り・グローをレアリティ色に */
.custom-profile-tcard[data-rank="r"]  .custom-profile-tcard-back-inner { border-color: rgba(43, 196, 196, 0.55); box-shadow: 0 0 22px rgba(43, 196, 196, 0.20) inset; }
.custom-profile-tcard[data-rank="sr"] .custom-profile-tcard-back-inner { border-color: rgba(192, 41, 241, 0.55); box-shadow: 0 0 22px rgba(192, 41, 241, 0.22) inset; }
.custom-profile-tcard[data-rank="ur"] .custom-profile-tcard-back-inner { border-color: rgba(255, 90, 140, 0.55); box-shadow: 0 0 24px rgba(255, 140, 60, 0.22) inset; }

.custom-profile-tcard-front > * {
    grid-area: 1 / 1;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border-radius: var(--card-radius);
}

.custom-profile-tcard-image {
    object-fit: cover;
    z-index: 1;
    background: var(--custom-bg-gray);
}

/* 名前・エリア/出勤バッジ・ランクチップのオーバーレイ（最前面・可読性優先） */
.custom-profile-tcard-overlay {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.875rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.66) 100%);
    pointer-events: none;
}

.custom-profile-tcard-card-logo {
    position: absolute;
    top: 42%;
    left: 50%;
    width: 66%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.custom-profile-tcard-card-logo img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0.125rem 0.5rem rgba(0, 0, 0, 0.55));
}

.custom-profile-tcard-bottom-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.custom-profile-tcard-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    min-width: 0;
}

.custom-profile-tcard-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--custom-white);
    font-size: 0.75rem;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.custom-profile-tcard-card-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--custom-white);
    font-size: 1.5rem;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.custom-profile-tcard-rank-chip {
    flex: 0 0 auto;
    min-width: 2.25em;
    padding: 0.2em 0.55em;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--custom-white);
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

/* ============================================================
   ポケモン風 表面ステータス（HP＝いいね数／技欄＝口コミ傾向タグ）
   ============================================================ */
.custom-profile-tcard-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.custom-profile-tcard-hp {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.15em;
    color: var(--custom-white);
    line-height: 1;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
}
.custom-profile-tcard-hp-heart {
    width: 1.05em;
    height: 1.05em;
    flex: 0 0 auto;
    fill: var(--custom-purple);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.custom-profile-tcard-hp-num {
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.custom-profile-tcard-foot {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.custom-profile-tcard-statband {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.45rem 0.6rem;
    border-radius: 0.7rem;
    background: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}
.custom-profile-tcard-move {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    color: var(--custom-white);
    font-size: 0.75rem;
    line-height: 1.1;
}
.custom-profile-tcard-move-label {
    flex: 0 0 auto;
    max-width: 46%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.custom-profile-tcard-move-bar {
    flex: 1 1 auto;
    height: 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    overflow: hidden;
}
.custom-profile-tcard-move-bar > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--custom-green), var(--custom-purple));
}
.custom-profile-tcard-move-pct {
    flex: 0 0 auto;
    min-width: 2.6em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   ポケモンカード風レイアウト（外周フレーム＋上バナー＋技パネル）
   ============================================================ */

/* 外周のレアリティ金属枠。中央を mask で抜いてリングだけ表示し、写真/ホロの上に重ねる */
.custom-profile-tcard-frame {
    z-index: 6;
    border-radius: var(--card-radius);
    padding: 6px;
    background: linear-gradient(135deg, #f2f2f2, #ffffff 18%, #b9b9b9 45%, #ededed 62%, #9a9a9a);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    pointer-events: none;
}
.custom-profile-tcard[data-rank="r"]  .custom-profile-tcard-frame { background: linear-gradient(135deg, #bfe0ff, #eaf6ff 18%, #2a7de1 50%, #8fc4ff 70%, #1c5fb0); }
.custom-profile-tcard[data-rank="sr"] .custom-profile-tcard-frame { background: linear-gradient(135deg, #e3c2ff, #f7ecff 18%, #9018e0 50%, #c98bff 70%, #6a12bf); }
.custom-profile-tcard[data-rank="ur"] .custom-profile-tcard-frame { background: linear-gradient(120deg, #ff5a8c, #ffd35a 25%, #5ad07a 45%, #5a9cff 65%, #b15aff 85%, #ff5a8c); }

/* 上部 head：名前バナー＋バッジ */
.custom-profile-tcard-head {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
.custom-profile-tcard-banner {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.3rem 0.45rem;
    border-radius: 0.6rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.3));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.custom-profile-tcard-banner .custom-profile-tcard-card-name {
    font-size: 1.125rem;
}
.custom-profile-tcard-banner .custom-profile-tcard-hp {
    margin-left: auto;
}
.custom-profile-tcard-head .custom-profile-tcard-badges {
    align-self: flex-start;
}
.custom-profile-tcard-banner.is-chip-only {
    align-self: flex-start;
}

.custom-profile-tcard-panel {
    min-width: 0;
    padding: 0.4rem 0.5rem;
    border-radius: 0.7rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.56));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.custom-profile-tcard-panel .custom-profile-tcard-statband {
    padding: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.custom-profile-tcard-shine,
.custom-profile-tcard-glare {
    z-index: 3;
    background-size: cover;
    background-position: center;
    will-change: transform, opacity, background-position, filter;
    pointer-events: none;
}

.custom-profile-tcard-shine {
    transform: translateZ(1px);
    background: transparent;
    filter: brightness(0.85) contrast(2.75) saturate(0.65);
    mix-blend-mode: color-dodge;
    opacity: var(--card-opacity);
}

.custom-profile-tcard-shine::before,
.custom-profile-tcard-shine::after {
    content: "";
    grid-area: 1 / 1;
    display: block;
    border-radius: var(--card-radius);
    background-repeat: no-repeat;
}

.custom-profile-tcard-glare {
    z-index: 4;
    transform: translateZ(1.41px);
    background-image: radial-gradient(
        farthest-corner circle at var(--pointer-x) var(--pointer-y),
        hsla(0, 0%, 100%, 0.8) 10%,
        hsla(0, 0%, 100%, 0.65) 20%,
        hsla(0, 0%, 0%, 0.5) 90%
    );
    opacity: var(--card-opacity);
    mix-blend-mode: overlay;
}

/* ============================================================
   N（ノーマル）= 加工なし。ごく薄い光沢のみ
   ============================================================ */
.custom-profile-tcard[data-effect="basic"] .custom-profile-tcard-shine {
    display: none;
}
.custom-profile-tcard[data-effect="basic"] .custom-profile-tcard-glare {
    opacity: calc(var(--card-opacity) * 0.35);
}

/* ============================================================
   R（レア）= リバースホロ（控えめ）
   ============================================================ */
.custom-profile-tcard[data-effect="reverse-holo"] .custom-profile-tcard-shine {
    background-image:
        radial-gradient(circle at var(--pointer-x) var(--pointer-y), #fff 5%, #000 50%, #fff 80%),
        linear-gradient(-45deg, #000 15%, #fff, #000 85%),
        var(--grain);
    background-blend-mode: soft-light, difference;
    background-size: 120% 120%, 200% 200%, cover;
    background-position:
        center center,
        calc(100% * var(--pointer-from-left)) calc(100% * var(--pointer-from-top)),
        center center;
    filter: brightness(0.6) contrast(1.5) saturate(1.1);
    opacity: calc((1.4 * var(--card-opacity)) - var(--pointer-from-center));
}
.custom-profile-tcard[data-effect="reverse-holo"] .custom-profile-tcard-glare {
    --card-glow: hsl(190, 90%, 75%);
}

/* ============================================================
   SR（スーパーレア）= レギュラーホロ（全面虹光沢）
   ============================================================ */
.custom-profile-tcard[data-effect="regular-holo"] .custom-profile-tcard-shine {
    --space: 5%;
    background-image:
        repeating-linear-gradient(110deg,
            var(--clr-6), var(--clr-5), var(--clr-3), var(--clr-2), var(--clr-1),
            var(--clr-6), var(--clr-5), var(--clr-3), var(--clr-2), var(--clr-1),
            var(--clr-6), var(--clr-5), var(--clr-3), var(--clr-2), var(--clr-1)),
        repeating-linear-gradient(90deg, #0a0a0a 0px, #0a0a0a 1px, #6a6a6a 1px, #6a6a6a 2px);
    background-position:
        calc(((50% - var(--background-x)) * 2.6) + 50%) calc(((50% - var(--background-y)) * 3.5) + 50%),
        center center;
    background-size: 400% 400%, cover;
    background-blend-mode: overlay;
    filter: brightness(1.05) contrast(1.1) saturate(1.25);
}
.custom-profile-tcard[data-effect="regular-holo"] .custom-profile-tcard-shine::after {
    background-image: radial-gradient(
        farthest-corner circle at var(--pointer-x) var(--pointer-y),
        hsla(0, 0%, 95%, 0.8) 0%,
        hsla(0, 0%, 78%, 0.1) 25%,
        hsl(0, 0%, 0%) 90%
    );
    background-size: cover;
    mix-blend-mode: luminosity;
    filter: brightness(0.6) contrast(3.2);
}
.custom-profile-tcard[data-effect="regular-holo"] .custom-profile-tcard-glare {
    --card-glow: hsl(280, 90%, 80%);
}

/* ============================================================
   UR（ウルトラレア）= レインボーホロ
   ============================================================ */
.custom-profile-tcard[data-effect="rainbow-holo"] .custom-profile-tcard-shine {
    --r-1: hsl(0, 80%, 50%);
    --r-2: hsl(40, 90%, 55%);
    --r-3: hsl(90, 80%, 50%);
    --r-4: hsl(180, 80%, 55%);
    --r-5: hsl(210, 85%, 58%);
    --r-6: hsl(280, 80%, 55%);
    background-image:
        linear-gradient(-45deg, var(--r-1), var(--r-5)),
        var(--glitter),
        linear-gradient(-30deg,
            var(--r-1), var(--r-2), var(--r-3), var(--r-4), var(--r-5), var(--r-6),
            var(--r-1), var(--r-2), var(--r-3), var(--r-4), var(--r-5), var(--r-6),
            var(--r-1));
    background-blend-mode: luminosity, soft-light;
    background-size: 200% 200%, var(--glittersize) var(--glittersize), 400% 400%;
    background-position:
        calc(25% + (50% * var(--pointer-from-left))) calc(25% + (50% * var(--pointer-from-top))),
        center center,
        calc(25% + (var(--pointer-x) / 2)) calc(25% + (var(--pointer-y) / 2));
    filter: brightness(calc((var(--pointer-from-center) * 0.3) + 0.65)) contrast(2.2) saturate(1.1);
}
.custom-profile-tcard[data-effect="rainbow-holo"] .custom-profile-tcard-shine::before {
    background-image: var(--glitter);
    background-size: var(--glittersize) var(--glittersize);
    background-position: center center;
    mix-blend-mode: color-dodge;
    filter: brightness(1.2) contrast(1.6);
    opacity: calc((var(--pointer-from-center) + 0.4) * 0.7);
}
.custom-profile-tcard[data-effect="rainbow-holo"] .custom-profile-tcard-glare {
    --card-glow: hsl(320, 100%, 80%);
}

/* ============================================================
   ランクチップ／バッジの色（data-rank別）
   ============================================================ */
.custom-profile-deck-section[data-rank="n"]  .custom-profile-tcard-rank-chip { background: rgba(60, 60, 60, 0.7); }
.custom-profile-deck-section[data-rank="r"]  .custom-profile-tcard-rank-chip { background: linear-gradient(135deg, #2a7de1, #2bc4c4); }
.custom-profile-deck-section[data-rank="sr"] .custom-profile-tcard-rank-chip { background: linear-gradient(135deg, #7a18d6, #c029f1); }
.custom-profile-deck-section[data-rank="ur"] .custom-profile-tcard-rank-chip { background: linear-gradient(135deg, #ff3d77, #ffb23d, #2bd07a, #2a7de1, #9b29f1); }

/* ============================================================
   メタ（ランク表記＋進捗バー）
   ============================================================ */
.custom-profile-tcard-meta {
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    text-align: center;
}

.custom-profile-tcard-rank-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    color: var(--custom-text-color);
}

.custom-profile-tcard-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4em;
    padding: 0.1em 0.5em;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    color: var(--custom-white);
    background: var(--custom-purple);
}
.custom-profile-deck-section[data-rank="n"]  .custom-profile-tcard-rank-badge { background: var(--custom-gray-dark); }
.custom-profile-deck-section[data-rank="r"]  .custom-profile-tcard-rank-badge { background: linear-gradient(135deg, #2a7de1, #2bc4c4); }
.custom-profile-deck-section[data-rank="sr"] .custom-profile-tcard-rank-badge { background: linear-gradient(135deg, #7a18d6, #c029f1); }
.custom-profile-deck-section[data-rank="ur"] .custom-profile-tcard-rank-badge { background: linear-gradient(135deg, #ff3d77, #ffb23d, #2bd07a, #2a7de1, #9b29f1); }

.custom-profile-tcard-progress {
    position: relative;
    width: 100%;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--custom-gray-light);
    overflow: hidden;
}

.custom-profile-tcard-progress-fill {
    height: 100%;
    width: var(--cp-tcard-fill, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--custom-green), var(--custom-purple));
    transition: width 0.6s ease;
}

.custom-profile-tcard-progress.is-max .custom-profile-tcard-progress-fill {
    background: linear-gradient(90deg, #ffd700, #ff8c00, #ffd700);
}

.custom-profile-tcard-progress-caption {
    font-size: 0.875rem;
    color: var(--custom-gray-mid);
}

/* ============================================================
   レスポンシブ / アクセシビリティ
   ============================================================ */
@media (max-width: 400px) {
    .custom-profile-tcard,
    .custom-profile-tcard-meta {
        max-width: 260px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .custom-profile-tcard-rotator,
    .custom-profile-tcard-progress-fill {
        transition: none;
    }
}

/* ============================================================
   デッキ（扇状）・拡大モーダル
   ============================================================ */

.custom-profile-deck-section {
    padding-top: 1.5rem;
    perspective: none;
}

.custom-profile-deck {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
}

.custom-profile-deck-stage {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    aspect-ratio: 0.718;
    perspective: 1200px;
}

.custom-profile-deck-card {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    transform-origin: 50% 100%;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.35s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
}

.custom-profile-deck-card.is-dragging {
    transition: none;
}


.custom-profile-deck-card .custom-profile-tcard-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.custom-profile-deck-card.is-top .custom-profile-tcard-overlay,
.custom-profile-tcard-modal .custom-profile-tcard-overlay {
    opacity: 1;
}

.custom-profile-tcard[data-rank="n"]  .custom-profile-tcard-rank-chip { background: rgba(60, 60, 60, 0.7); }
.custom-profile-tcard[data-rank="r"]  .custom-profile-tcard-rank-chip { background: linear-gradient(135deg, #2a7de1, #2bc4c4); }
.custom-profile-tcard[data-rank="sr"] .custom-profile-tcard-rank-chip { background: linear-gradient(135deg, #7a18d6, #c029f1); }
.custom-profile-tcard[data-rank="ur"] .custom-profile-tcard-rank-chip { background: linear-gradient(135deg, #ff3d77, #ffb23d, #2bd07a, #2a7de1, #9b29f1); }

.custom-profile-deck-share {
    position: absolute;
    top: 0;
    right: 0.5rem;
    z-index: 40;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.custom-profile-deck-share img {
    width: 1.375rem;
    height: 1.375rem;
    display: block;
}

.custom-profile-deck-share.is-loading {
    opacity: 0.55;
    pointer-events: none;
}

.custom-profile-deck-share.is-loading img {
    animation: cp-tcard-share-pulse 0.9s ease-in-out infinite;
}

@keyframes cp-tcard-share-pulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(0.82); opacity: 0.4; }
}

.custom-profile-deck-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    max-width: 300px;
}
.custom-profile-deck-dot {
    box-sizing: border-box;
    width: 1rem;
    height: 1rem;
    padding: 0.25rem;
    border: none;
    border-radius: 50%;
    background: var(--custom-gray-light);
    background-clip: content-box;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
.custom-profile-deck-dot.is-active {
    background: var(--custom-purple);
    background-clip: content-box;
    transform: scale(1.2);
}

.custom-profile-deck-hint {
    font-size: 0.875rem;
    color: var(--custom-gray-mid);
}

body.custom-profile-tcard-modal-open {
    overflow: hidden;
}

.custom-profile-tcard-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.82);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    touch-action: none;            /* 背景（オーバーレイ）上のドラッグでスクロールさせない */
    overscroll-behavior: contain;  /* スクロール連鎖を背後に伝えない */
}
.custom-profile-tcard-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.custom-profile-tcard-modal-slot {
    width: min(calc(100vw - 2rem), 57vh, 460px);
    width: min(calc(100vw - 2rem), 57svh, 460px);
    perspective: 1400px;
}

.custom-profile-tcard-modal .custom-profile-tcard {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    cursor: default;
    touch-action: none; /* デッキ由来の pan-y を打ち消す＝縦ドラッグも背景スクロールでなくカード回転に */
}

.custom-profile-tcard-modal.is-open .custom-profile-tcard {
    animation: cp-tcard-zoom-in 1.0s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.custom-profile-tcard-modal.is-open .custom-profile-tcard-rotator {
    animation: cp-tcard-flip-in 1.0s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.custom-profile-tcard-modal .custom-profile-tcard.is-settled,
.custom-profile-tcard-modal .custom-profile-tcard.is-settled .custom-profile-tcard-rotator {
    animation: none;
}

.custom-profile-tcard-modal-hint {
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    pointer-events: none;
}

@keyframes cp-tcard-flip-in {
    0%   { transform: rotateY(-180deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes cp-tcard-zoom-in {
    0%   { transform: scale(0.72); opacity: 0; }
    14%  { opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.custom-profile-tcard-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.16);
    color: var(--custom-white);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 拡大カード下部の「プロフィールページへ」ボタン。
   data-profile-url を持つカードを拡大した時だけ JS が .is-visible を付けて表示する。
   フリップ案内（hint・bottom 1.5rem）の上に重ねるので bottom はやや高めに置く。 */
.custom-profile-tcard-modal-cta {
    position: absolute;
    left: 50%;
    bottom: 3.5rem;
    bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 1.7rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--custom-green-dark), var(--custom-green));
    color: var(--custom-white);
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(0.5rem);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.custom-profile-tcard-modal-cta.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .custom-profile-deck-card { transition: none; }
    .custom-profile-tcard-modal.is-open .custom-profile-tcard,
    .custom-profile-tcard-modal.is-open .custom-profile-tcard-rotator { animation: none; }
}

/* ============================================================
   レア度パーティクル（UR のキラキラ。JSが span を生成）
   ============================================================ */
.custom-profile-tcard-sparkles {
    z-index: 4;
    overflow: hidden;
    border-radius: var(--card-radius);
    pointer-events: none;
}
.custom-profile-tcard-sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--custom-white);
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
    opacity: 0;
    transform: scale(0.2);
    animation: cp-tcard-twinkle 2.4s ease-in-out infinite;
    will-change: transform, opacity;
}
@keyframes cp-tcard-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1) rotate(40deg); }
}
@media (prefers-reduced-motion: reduce) {
    .custom-profile-tcard-sparkle { animation: none; opacity: 0.5; transform: scale(0.7); }
}

/* ============================================================
   タップ時の軽い押し込み（素カードのみ。JSが .is-pressed をトグル。デッキは扇transformがあるため対象外）
   ============================================================ */
.custom-profile-tcard:not(.custom-profile-deck-card) {
    transition: transform 0.13s ease;
}
.custom-profile-tcard:not(.custom-profile-deck-card).is-pressed {
    transform: translate3d(0, 0, 0.01px) scale(0.96);
}