/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  カード工房（Card Forge）                                              ║
   ║  前半：編集画面のレイアウト / 後半：カード本体（.cf-*）のデザイン        ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

#page-forge { padding: 0; }

.fg-loading, .fg-empty {
    color: #64748b; font-size: .85rem; padding: 2rem; text-align: center;
}

.fg-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 420px;
    height: calc(100vh - 64px);
    min-height: 640px;
}

/* ─── 左：カード一覧 ─────────────────────────────────────────────── */
.fg-list {
    display: flex; flex-direction: column; min-height: 0;
    border-right: 1px solid rgba(255,255,255,.07);
    background: rgba(2,6,23,.55);
}
.fg-list-head { padding: 14px; display: grid; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.06); }
.fg-list-body { overflow-y: auto; padding: 6px; }

.fg-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fg-chip {
    font: 700 .68rem 'Inter', sans-serif; letter-spacing: .04em;
    padding: 4px 8px; border-radius: 999px; cursor: pointer;
    background: rgba(255,255,255,.04); color: #94a3b8; border: 1px solid rgba(255,255,255,.08);
}
.fg-chip.on { background: #e2e8f0; color: #0f172a; border-color: #e2e8f0; }

.fg-item {
    width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
    padding: 9px 10px; border-radius: 10px; border: 1px solid transparent;
    background: none; color: inherit; cursor: pointer;
}
.fg-item:hover { background: rgba(255,255,255,.04); }
.fg-item.on { background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.25); }
.fg-item-main { display: grid; min-width: 0; flex: 1; }
.fg-item-name { font-size: .82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-item-sub { font-size: .68rem; color: #64748b; }
.fg-item-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; flex: none; }

/* レアリティの小さな札（一覧・見出しで共通） */
.fg-item-r {
    flex: none; display: inline-grid; place-items: center;
    min-width: 30px; height: 20px; padding: 0 5px; border-radius: 5px;
    font: 900 .62rem 'Inter', sans-serif; letter-spacing: .03em; color: #0b1020;
}
.fg-item-r.r-N  { background: linear-gradient(135deg,#cbd5e1,#8a96a8); }
.fg-item-r.r-R  { background: linear-gradient(135deg,#bfe3ff,#3b9cff); }
.fg-item-r.r-SR { background: linear-gradient(135deg,#fff1b8,#e0a526); }
.fg-item-r.r-UR { background: linear-gradient(135deg,#9ff5ff,#c7a4ff 50%,#ffd48a); }
.fg-item-r.r-LR { background: conic-gradient(from 200deg,#ffd76a,#ff8a5b,#ff5fa2,#9c7bff,#4fd1ff,#5ef0a0,#ffd76a); }

/* ─── 中央：プレビュー ────────────────────────────────────────────── */
.fg-stage {
    display: flex; flex-direction: column; min-width: 0; min-height: 0;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(99,102,241,.14), transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(15,23,42,.9), transparent 70%);
}
.fg-stage-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.fg-stage-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .92rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-stage-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.fg-dirty { font-size: .72rem; color: #fbbf24; font-weight: 700; }
.fg-stage-body {
    flex: 1; min-height: 0; display: grid; place-items: center; padding: 24px;
    perspective: 1400px;
}
.fg-stage-hint { text-align: center; font-size: .7rem; color: #475569; margin: 0 0 14px; }

.fg-tilt {
    --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
    height: min(100%, 760px); aspect-ratio: 5 / 7; max-width: 100%;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform .5s cubic-bezier(.2,.8,.2,1);
    transform-style: preserve-3d;
}
.fg-tilt.active { transition: transform .08s linear; }
.fg-preview { width: 100%; height: 100%; }
.fg-preview .cf-card { width: 100%; box-shadow: 0 30px 70px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04); }

/* ─── 右：編集パネル ──────────────────────────────────────────────── */
.fg-panel {
    display: flex; flex-direction: column; min-height: 0;
    border-left: 1px solid rgba(255,255,255,.07);
    background: rgba(2,6,23,.6);
}
.fg-tabs { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid rgba(255,255,255,.07); }
.fg-tab {
    padding: 13px 0; background: none; border: none; cursor: pointer;
    color: #64748b; font: 800 .82rem 'Noto Sans JP', sans-serif;
    border-bottom: 2px solid transparent;
}
.fg-tab:hover { color: #cbd5e1; }
.fg-tab.on { color: #f1f5f9; border-bottom-color: #a5b4fc; }
.fg-panel-body { overflow-y: auto; padding: 16px; }

.fg-sec { display: grid; gap: 10px; margin-bottom: 20px; }
.fg-sec-title { font-size: .72rem; font-weight: 800; color: #94a3b8; letter-spacing: .08em; }
.fg-note { font-size: .7rem; color: #64748b; line-height: 1.6; margin: 4px 0 0; }

.fg-input {
    width: 100%; box-sizing: border-box;
    background: rgba(15,23,42,.9); color: #e2e8f0;
    border: 1px solid rgba(148,163,184,.2); border-radius: 8px;
    padding: 8px 10px; font: 500 .85rem 'Noto Sans JP', sans-serif;
}
.fg-input:focus { outline: none; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129,140,248,.18); }
textarea.fg-input { resize: vertical; line-height: 1.6; }

.fg-field { display: grid; gap: 5px; }
.fg-field > span { font-size: .72rem; font-weight: 700; color: #94a3b8; }
.fg-field small { font-size: .66rem; color: #64748b; }
.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fg-row.three { grid-template-columns: repeat(3,1fr); }

.fg-radio, .fg-check { display: flex; gap: 8px; align-items: center; font-size: .8rem; color: #cbd5e1; cursor: pointer; }
.fg-radio input, .fg-check input { accent-color: #818cf8; }

.fg-btn {
    border-radius: 8px; padding: 8px 14px; cursor: pointer;
    font: 800 .78rem 'Noto Sans JP', sans-serif; border: 1px solid transparent;
}
.fg-btn.primary { background: linear-gradient(135deg,#818cf8,#6366f1); color: #fff; box-shadow: 0 6px 18px -6px rgba(99,102,241,.8); }
.fg-btn.primary:hover { filter: brightness(1.1); }
.fg-btn.ghost { background: rgba(255,255,255,.04); color: #cbd5e1; border-color: rgba(255,255,255,.1); }
.fg-btn.ghost:hover { background: rgba(255,255,255,.08); }
.fg-btn.sm { padding: 6px 10px; font-size: .72rem; justify-self: start; }

.fg-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.fg-seg-btn {
    padding: 7px 11px; border-radius: 8px; cursor: pointer;
    background: rgba(255,255,255,.03); color: #94a3b8; border: 1px solid rgba(255,255,255,.09);
    font: 700 .76rem 'Noto Sans JP', sans-serif;
}
.fg-seg-btn:hover { color: #e2e8f0; }
.fg-seg-btn.on { background: rgba(129,140,248,.16); color: #e0e7ff; border-color: #818cf8; }
.fg-seg-btn.auto { border-style: dashed; }
.fg-star { color: #fbbf24; font-size: .7em; margin-left: 4px; vertical-align: .15em; }
.fg-sec-head { display: flex; justify-content: space-between; align-items: center; }
.fg-changed { font-size: .62rem; color: #fbbf24; font-weight: 800; margin-left: auto; margin-right: 8px; }
.fg-warn { font-size: .72rem; font-weight: 800; color: #fecaca; background: rgba(239,68,68,.18); border: 1px solid rgba(239,68,68,.5); padding: 4px 10px; border-radius: 999px; }
.fg-seg-btn { display: inline-flex; align-items: center; gap: 7px; }
.fg-seg-btn:disabled { opacity: .3; cursor: not-allowed; }
.fg-item-thumb { flex: none; width: 24px; height: 34px; border-radius: 3px; overflow: hidden; background: #0b1020 center / cover no-repeat; }
.fg-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* パーツの見本（ボタン内の小さな図） */
.fg-sw { flex: none; width: 26px; height: 16px; border-radius: 3px; background: #1e2433; position: relative; }
.sw-plate-glass   { background: rgba(10,12,22,.9); box-shadow: inset 0 0 0 1.5px #a5b4fc; }
.sw-plate-metal   { background: #10131b; box-shadow: inset 0 0 0 3px #b8bfcc; }
.sw-plate-banner  { background: linear-gradient(180deg,#3b3a55,#10131b); clip-path: polygon(0 0,100% 0,90% 50%,100% 100%,0 100%,10% 50%); border-radius: 0; }
.sw-plate-none    { background: none; box-shadow: inset 0 0 0 1px dashed; outline: 1px dashed #475569; }
.sw-textbox-glass { background: rgba(10,12,22,.85); box-shadow: inset 0 0 0 1.5px #818cf8; }
.sw-textbox-solid { background: #07090f; box-shadow: inset 0 0 0 2.5px #9ca3af; }
.sw-textbox-fade  { background: linear-gradient(180deg, transparent, #07090f); }
.sw-badge-gem     { width: 13px; height: 13px; margin: 0 6px; transform: rotate(45deg); background: linear-gradient(135deg,#dff1ff,#3b9cff); border-radius: 2px; }
.sw-badge-crest   { width: 14px; height: 16px; margin: 0 6px; background: linear-gradient(135deg,#fff6cc,#e0a526); clip-path: polygon(50% 0,100% 16%,100% 58%,50% 100%,0 58%,0 16%); border-radius: 0; }
.sw-badge-plain   { background: none; box-shadow: inset 0 0 0 1.5px #cbd5e1; border-radius: 99px; }
.sw-stats-hex     { width: 18px; height: 16px; margin: 0 4px; background: linear-gradient(180deg,#fff3c4,#b98a36); clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); border-radius: 0; }
.sw-stats-orb     { width: 16px; height: 16px; margin: 0 5px; border-radius: 50%; background: #0a0d14; box-shadow: inset 0 0 0 2px #cbd5e1; }
.sw-stats-bar     { background: none; box-shadow: inset 0 0 0 1.5px #94a3b8; }
.sw-foil-none     { background: #1e2433; }
.sw-foil-shine    { background: linear-gradient(115deg,#1e2433 30%,#fff8e1 50%,#1e2433 70%); }
.sw-foil-holo     { background: linear-gradient(115deg,#ff5fa2,#ffd76a,#5ef0a0,#4fd1ff,#9c7bff); opacity: .8; }
.sw-foil-prism    { background: #1e2433; box-shadow: inset 0 0 0 2.5px #ffd76a, inset 0 0 0 4px #9c7bff; }

/* 枠の選択肢（編集中のカードに枠を当てた縮小プレビュー） */
.fg-group { margin-bottom: 22px; }
.fg-group-head { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800; margin-bottom: 10px; }
.fg-group-head small { color: #64748b; font-weight: 600; }
.fg-frames { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.fg-frame { display: grid; gap: 6px; }
.fg-frame-thumb {
    padding: 0; border: 2px solid transparent; border-radius: 10px; background: none; cursor: pointer;
    transition: transform .15s, border-color .15s;
}
.fg-frame-thumb:hover { transform: translateY(-2px); }
.fg-frame.on .fg-frame-thumb { border-color: #a5b4fc; box-shadow: 0 0 0 3px rgba(165,180,252,.25); transform: none; }
.fg-frame-thumb { position: relative; aspect-ratio: 5 / 7; overflow: hidden; }
.fg-frame-thumb .cf-card {
    position: absolute; left: 0; top: 0; width: 300px; pointer-events: none;
    transform: scale(var(--k, .4)); transform-origin: 0 0;
}
.fg-frame-meta { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.fg-frame-name { font-size: .7rem; font-weight: 700; color: #cbd5e1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-tag, .fg-link { flex: none; white-space: nowrap; }
.fg-std {
    width: 100%; padding: 4px 0; border-radius: 6px; cursor: pointer;
    font: 700 .62rem 'Noto Sans JP', sans-serif; white-space: nowrap;
    background: rgba(255,255,255,.04); color: #a5b4fc; border: 1px solid rgba(165,180,252,.3);
}
.fg-std:hover { background: rgba(165,180,252,.12); }
.fg-std.on { display: block; text-align: center; background: #fbbf24; color: #0f172a; border-color: #fbbf24; cursor: default; }
.fg-alert { font-size: .75rem; font-weight: 800; color: #fecaca; background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.45); border-radius: 8px; padding: 8px 10px; margin-bottom: 14px; }
.fg-tag { font-size: .6rem; font-weight: 800; color: #0f172a; background: #fbbf24; border-radius: 4px; padding: 1px 5px; }
.fg-link { background: none; border: none; color: #818cf8; font-size: .62rem; font-weight: 700; cursor: pointer; padding: 0; }
.fg-link:hover { text-decoration: underline; }

.fg-art-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.fg-art { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #0f172a; cursor: pointer; aspect-ratio: 2/3; }
.fg-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-art.on { border-color: #a5b4fc; }

.fg-range { display: grid; grid-template-columns: 56px 1fr 52px; align-items: center; gap: 8px; font-size: .75rem; color: #94a3b8; }
.fg-range input { accent-color: #818cf8; }
.fg-range output { text-align: right; color: #e2e8f0; font-variant-numeric: tabular-nums; }

/* ─── 3Dビュー ─────────────────────────────────────────── */
.fg-card3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.fg-card3d.anim { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.fg-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fg-front { transform: translateZ(1.6px); }
.fg-back  { transform: rotateY(180deg) translateZ(1.6px); }
/* カードの厚み：角丸の板を少しずつ奥にずらして重ねる（2D表示では見えない） */
.fg-edge { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.fg-edge i { position: absolute; inset: 1.2%; border-radius: 6cqw; background: #6f695c; }
.fg-edge i:nth-child(1)  { transform: translateZ(1.3px); }
/* 裏面の角丸を表の枠に合わせる */
.fg-edge i:nth-child(2)  { transform: translateZ(1.0px); }
.fg-edge i:nth-child(3)  { transform: translateZ(.7px); }
.fg-edge i:nth-child(4)  { transform: translateZ(.4px); }
.fg-edge i:nth-child(5)  { transform: translateZ(.1px); }
.fg-edge i:nth-child(6)  { transform: translateZ(-.2px); }
.fg-edge i:nth-child(7)  { transform: translateZ(-.5px); }
.fg-edge i:nth-child(8)  { transform: translateZ(-.8px); }
.fg-edge i:nth-child(9)  { transform: translateZ(-1.1px); }
.fg-edge i:nth-child(10) { transform: translateZ(-1.4px); }
.fg-edge { container-type: inline-size; }
.fg-tilt:not(.is-3d) .fg-edge, .fg-tilt:not(.is-3d) .fg-back { display: none; }
.fg-tilt.is-3d { transform: none; cursor: grab; touch-action: none; }
.fg-tilt.is-3d:active { cursor: grabbing; }
.fg-tilt.is-3d .fg-preview .cf-card { box-shadow: none; }

/* 裏面 */
.cf-back {
    container-type: inline-size; position: relative; width: 100%; aspect-ratio: 5 / 7;
    border-radius: 6cqw; overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,215,120,.25), transparent 45%),
        repeating-linear-gradient(45deg, #0b1024 0 2cqw, #0e1530 2cqw 4cqw);
    box-shadow: inset 0 0 0 1.4cqw #b8923f, inset 0 0 0 1.8cqw #0b1024;
}
.cf-back img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 裏面画像の上下にある金のプレートに、刻印のような濃い文字でロゴを入れる（位置は back_A.png に合わせた値） */
.cf-back-logo {
    position: absolute; left: 0; right: 0; top: 12.8%; transform: translateY(-50%);
    display: grid; justify-items: center; line-height: 1;
}
.cf-back-logo b {
    font: 800 6.6cqw 'Shippori Mincho B1', serif; letter-spacing: .28em; margin-right: -.28em;
    color: #2a1a05; text-shadow: 0 .25cqw 0 rgba(255,244,200,.55), 0 -.1cqw 0 rgba(0,0,0,.35);
}
.cf-back-logo small { display: none; }
.cf-back-sub {
    position: absolute; left: 0; right: 0; top: 87.6%; transform: translateY(-50%); text-align: center;
    font: 900 2.5cqw 'Cinzel', serif; letter-spacing: .26em; margin-right: -.26em;
    color: #2a1a05; text-shadow: 0 .2cqw 0 rgba(255,244,200,.55);
}

.fg-view-bar { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 0 16px 14px; }
.fg-view-3d { display: inline-flex; gap: 8px; }
.fg-view-3d[hidden] { display: none; }
.fg-view-btn {
    padding: 6px 12px; border-radius: 999px; cursor: pointer;
    font: 800 .74rem 'Noto Sans JP', sans-serif;
    background: rgba(255,255,255,.05); color: #cbd5e1; border: 1px solid rgba(255,255,255,.12);
}
.fg-view-btn:hover { background: rgba(255,255,255,.1); }
.fg-view-btn.on { background: rgba(129,140,248,.2); color: #e0e7ff; border-color: #818cf8; }
.fg-view-bar .fg-stage-hint { margin: 0 0 0 6px; }
.fg-ratio { font-size: .72rem; font-weight: 800; color: #86efac; }
.fg-ratio.low { color: #fbbf24; }

.fg-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
    background: #10b981; color: #fff; font-weight: 800; font-size: .85rem;
    padding: 10px 18px; border-radius: 10px; opacity: 0; pointer-events: none;
    transition: all .25s; z-index: 10000; box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.fg-toast.err { background: #ef4444; }
.fg-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1180px) {
    .fg-layout { grid-template-columns: 1fr; height: auto; }
    .fg-list { max-height: 260px; border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }
    .fg-stage-body { height: 70vh; }
    .fg-panel { border-left: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   カード本体（.cf-*）
   カードの幅を 100cqw として、すべて幅に対する割合で指定する
   （プレビューでも縮小サムネイルでも同じ見た目になる）
   ═══════════════════════════════════════════════════════════════════════ */
.cf-card {
    container-type: inline-size;
    position: relative; aspect-ratio: 5 / 7; overflow: hidden;
    border-radius: 3cqw; isolation: isolate;
    background: #05070d; color: #f8fafc;
    font-family: 'Noto Sans JP', sans-serif;
    -webkit-font-smoothing: antialiased;
}
.cf-card > * { position: absolute; }

/* 窓（イラスト領域）。枠画像の透明部分より少し広げて、すき間が出ないようにする */
.cf-bg { inset: 0; background: radial-gradient(ellipse at 50% 40%, #1b2236, #05070d 70%); }
.cf-art {
    left: calc(var(--wx) - 1.2%); top: calc(var(--wy) - 1%);
    width: calc(var(--ww) + 2.4%); height: calc(var(--wh) + 2%);
    overflow: hidden;
}
.cf-art img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
.cf-art-empty {
    width: 100%; height: 100%; display: grid; place-items: center;
    font: 800 3cqw 'Cinzel', serif; letter-spacing: .3em; color: rgba(255,255,255,.15);
    background: repeating-linear-gradient(45deg, #0d1220 0 2cqw, #0a0e19 2cqw 4cqw);
}
/* 名前帯と効果欄の下を少し暗くして、文字を読みやすくする */
.cf-shade {
    left: var(--wx); top: var(--wy); width: var(--ww); height: var(--wh);
    background:
        linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 16%),
        linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.4) 34%, transparent 48%);
    pointer-events: none;
}
.cf-frame { inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }

/* パネル共通：枠の窓の内側に、左右2.5%の余白で配置する */
.cf-plate, .cf-textbox {
    left: calc(var(--wx) + 2.5%); right: calc(100% - var(--wx) - var(--ww) + 2.5%);
    box-sizing: border-box; border-radius: 1.8cqw;
}

/* ─── 名前帯 ─────────────────────────────────────────────── */
.cf-plate {
    /* 上中央の紋章台座が隠れないよう、窓の上端から少し下げる */
    top: calc(var(--wy) + 3% + var(--po, 0%));
    min-height: 10.8cqw;
    display: flex; align-items: center; gap: 1.8cqw;
    padding: 1.2cqw 2.6cqw 1.2cqw 1.8cqw;
}
.cf-name { flex: 1; min-width: 0; display: grid; justify-items: center; text-align: center; line-height: 1.12; }
.cf-name-main {
    --ns: 1;
    font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif; font-weight: 800;
    font-size: calc(6.4cqw * var(--ns)); letter-spacing: .05em; white-space: nowrap;
    max-width: 100%; overflow: hidden;
    background: linear-gradient(180deg, var(--title1) 20%, var(--title2) 90%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 .25cqw .3cqw rgba(0,0,0,.85));
}
/* 縮めても入らない長い名前は2行にする（省略はしない） */
.cf-name-main.wrap { white-space: normal; line-height: 1.15; word-break: auto-phrase; text-wrap: balance; }
.cf-name-sub {
    font-size: 2.5cqw; font-weight: 700; letter-spacing: .22em; margin-top: .5cqw;
    color: color-mix(in srgb, var(--accent) 65%, #fff); text-shadow: 0 .2cqw .5cqw rgba(0,0,0,.9);
}

/* ガラス：暗いすりガラス＋差し色の細い縁 */
.plate-glass .cf-plate {
    background: linear-gradient(180deg, rgba(8,10,20,.84), rgba(8,10,20,.62));
    border: .3cqw solid color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.04), 0 1cqw 3cqw rgba(0,0,0,.5);
    backdrop-filter: blur(3px);
}
/* 金属縁：暗い地に、枠と同じ金属の太い縁（ヘアライン仕上げ） */
.plate-metal .cf-plate {
    border: .6cqw solid transparent;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 .15cqw, transparent .15cqw .45cqw) padding-box,
        linear-gradient(180deg, #1a1e29, #0b0e15) padding-box,
        linear-gradient(180deg, var(--m1), var(--m2) 45%, var(--m3) 55%, var(--m2)) border-box;
    box-shadow: 0 1cqw 3cqw rgba(0,0,0,.6), inset 0 .3cqw .6cqw rgba(0,0,0,.6);
}
/* リボン：両端に切り欠きのある帯 */
.plate-banner .cf-plate {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 32%, #0a0c14), #0a0c14 85%);
    clip-path: polygon(0 0, 100% 0, 97.5% 50%, 100% 100%, 0 100%, 2.5% 50%);
    border-radius: 0; padding-left: 4.5cqw; padding-right: 4.5cqw;
    box-shadow: inset 0 .4cqw 0 color-mix(in srgb, var(--accent) 70%, transparent), inset 0 -.4cqw 0 color-mix(in srgb, var(--accent) 70%, transparent);
}
.plate-none .cf-plate { background: none; }
.plate-none .cf-name-main { filter: drop-shadow(0 .3cqw .6cqw #000) drop-shadow(0 0 1.5cqw rgba(0,0,0,.8)); }

/* コスト：数字だけのときは宝珠（暗い芯に金属の輪、白い数字） */
.cf-cost {
    position: relative; flex: none; width: 10.5cqw; height: 10.5cqw; border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 40% 35%, #2a3142, #0a0d14 70%);
    box-shadow: 0 0 0 .6cqw var(--m2), 0 0 0 .9cqw rgba(0,0,0,.6), 0 0 2.2cqw var(--glow);
}
.cf-cost span { font: 900 6cqw 'Cinzel', serif; color: #fff; text-shadow: 0 .2cqw .4cqw #000; }
/* コスト：資源の内訳（R×3 T×1）のときは資源色のチップを横に並べる */
.cf-costs { flex: none; display: flex; gap: 2cqw; padding-top: 1cqw; }
.cf-res {
    position: relative; width: 8.6cqw; height: 8.6cqw; border-radius: 50%;
    display: grid; place-items: center; line-height: 1;
    background: radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--res) 55%, #fff) 0 8%, var(--res) 45%, color-mix(in srgb, var(--res) 50%, #000) 100%);
    box-shadow: 0 0 0 .45cqw rgba(0,0,0,.65), 0 0 0 .7cqw color-mix(in srgb, var(--m2) 70%, transparent), 0 0 1.5cqw color-mix(in srgb, var(--res) 60%, transparent);
}
.cf-res i {
    position: absolute; top: -1.2cqw; right: -1.2cqw;
    min-width: 4.2cqw; height: 4.2cqw; border-radius: 50%; display: grid; place-items: center;
    font: normal 900 2.8cqw 'Inter', sans-serif; color: #fff;
    background: #0b0e16; box-shadow: 0 0 0 .35cqw var(--res);
}
.cf-res b { font: 900 5.2cqw 'Cinzel', serif; color: #fff; text-shadow: 0 .2cqw .3cqw rgba(0,0,0,.8); }

/* ─── 効果欄 ─────────────────────────────────────────────── */
.cf-textbox {
    /* 下端は、窓の下端にまたがる数値の帯（.cf-footer）の上半分に重ねる */
    bottom: calc(100% - var(--wy) - var(--wh) + 5cqw);
    /* 文章量に合わせて伸び縮みする（短いとイラストが広く見える）。
       枠が太く窓が狭い枠でもイラストが隠れすぎないよう、窓の高さに対する割合で決める */
    min-height: calc(var(--wh) * .2); max-height: calc(var(--wh) * .44);
    display: flex; flex-direction: column;
    padding: 1.6cqw 3.2cqw 2.6cqw;
}
.tb-glass .cf-textbox {
    /* 背景色は薄くしてイラストを透かし、代わりに「ぼかし＋背景だけ暗く」で文字の後ろを落ち着かせる */
    background: linear-gradient(180deg, rgba(10,12,22,.3), rgba(8,10,20,.58) 18%, rgba(6,8,16,.66));
    border: .3cqw solid color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: inset 0 0 3cqw rgba(0,0,0,.35), 0 1cqw 3cqw rgba(0,0,0,.45);
    backdrop-filter: blur(1.4cqw) brightness(.5) saturate(.4);
}
/* 透ける効果欄でも読めるよう、文字に薄い影を付ける */
.tb-glass .cf-text-in, .tb-fade .cf-text-in { text-shadow: 0 .15cqw .5cqw rgba(0,0,0,.9), 0 0 .2cqw rgba(0,0,0,.8); }
.tb-glass .cf-label, .tb-fade .cf-label { text-shadow: none; }
.tb-solid .cf-textbox {
    border: .5cqw solid transparent;
    background:
        linear-gradient(180deg, #11141f, #07090f) padding-box,
        linear-gradient(180deg, var(--m1), var(--m3) 60%, var(--m2)) border-box;
    box-shadow: 0 1cqw 3cqw rgba(0,0,0,.55);
}
.tb-fade .cf-textbox {
    background: linear-gradient(180deg, transparent, rgba(4,6,12,.75) 22%, rgba(4,6,12,.9));
    padding-top: 4cqw;
}

.cf-typeline {
    display: flex; align-items: center; justify-content: space-between; gap: 2cqw;
    padding-bottom: .9cqw; margin-bottom: 1.1cqw;
    border-bottom: .25cqw solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.cf-type {
    font-size: 2.5cqw; font-weight: 900; letter-spacing: .15em;
    padding: .4cqw 2cqw; border-radius: 99px;
    color: #fff; background: color-mix(in srgb, var(--type) 55%, #0b0d14);
    box-shadow: inset 0 0 0 .2cqw color-mix(in srgb, var(--type) 60%, #fff);
}
.cf-rarname { font: 700 2.2cqw 'Cinzel', serif; letter-spacing: .25em; color: var(--accent); margin-left: auto; }

.cf-text { position: relative; flex: 0 1 auto; min-height: 0; overflow: hidden; }
.cf-text-in { font-size: 3cqw; line-height: 1.45; color: #eef1f5; line-break: strict; word-break: auto-phrase; text-wrap: pretty; }
.cf-line { margin: 0 0 .65em; }
/* 効果のラベル：彩度を抑え、枠の金属色の縁で揃える */
.cf-label {
    display: inline-block; font-size: .76em; font-weight: 900; letter-spacing: .05em;
    padding: .05em .55em; margin-right: .4em; border-radius: .3em; vertical-align: .08em;
    color: #10131b; background: #c3cad6;
    box-shadow: inset 0 0 0 .12em color-mix(in srgb, var(--m2) 70%, transparent);
}
.k-passive .cf-label { background: #a3cbb8; }
.k-ability .cf-label { background: #a9bcd8; }
.k-awake   .cf-label { background: linear-gradient(135deg, #eed9a0, #cfa555); }
.k-info    { color: #c3cad6; font-size: .92em; }
.k-info .cf-label { background: rgba(195,202,214,.16); color: #c3cad6; }
.cf-ab { color: var(--title2); font-weight: 900; }
.cf-flavor {
    margin: .8em 0 0; padding-top: .55em; border-top: .15cqw solid rgba(255,255,255,.1);
    font-family: 'Shippori Mincho B1', serif; font-weight: 700; font-size: .84em; letter-spacing: .04em; color: #c7cfdc;
}

/* ─── フッター（レアリティ印・カードNo・数値） ───────────── */
.cf-footer {
    /* 窓の下端にまたがる帯。効果欄の外に出して、そのぶん本文とイラストの面積を広げる */
    left: calc(var(--wx) + 3.5%); right: calc(100% - var(--wx) - var(--ww) + 3.5%);
    bottom: calc(100% - var(--wy) - var(--wh) - 5.4cqw);
    height: 11.6cqw;
    display: flex; align-items: center; gap: 1.8cqw;
}
.cf-no {
    font: 700 2.6cqw 'Cinzel', serif; letter-spacing: .1em; color: #e2e8f0;
    padding: .5cqw 1.8cqw; border-radius: 99px;
    background: rgba(6,8,14,.82); box-shadow: 0 0 0 .2cqw color-mix(in srgb, var(--accent) 45%, transparent);
}
.cf-stats { margin-left: auto; display: flex; gap: 1.4cqw; align-items: center; }

/* レアリティ印（レアリティごとに形を固定：N=文字、R/SR/UR=宝石、LR=紋章） */
.cf-badge { flex: none; display: grid; place-items: center; align-self: center; }
.cf-badge span { font: 900 3.4cqw 'Cinzel', serif; letter-spacing: .02em; }
.bd-gem .cf-badge {
    width: 9.6cqw; height: 9.6cqw; transform: rotate(45deg); border-radius: 1.3cqw; margin: 0 1cqw;
    background: var(--rar-bg); box-shadow: 0 0 0 .45cqw rgba(0,0,0,.6), 0 0 2.4cqw var(--rar-glow);
}
.bd-gem .cf-badge span { transform: rotate(-45deg); color: #0b1020; text-shadow: 0 .15cqw 0 rgba(255,255,255,.5); }
.bd-crest .cf-badge {
    width: 10.5cqw; height: 11.5cqw; background: var(--rar-bg);
    clip-path: polygon(50% 0, 100% 16%, 100% 58%, 50% 100%, 0 58%, 0 16%);
    filter: drop-shadow(0 0 1.5cqw var(--rar-glow));
}
.bd-crest .cf-badge span { color: #0b1020; margin-top: -1.4cqw; }
.bd-plain .cf-badge { padding: .5cqw 2.2cqw; border-radius: 99px; border: .35cqw solid var(--rar-solid); }
.bd-plain .cf-badge span { color: var(--rar-solid); }

/* 数値：ラベルは図形の上に出し、数字は大きく */
.cf-stat { display: grid; justify-items: center; line-height: 1; }
.cf-stat-l { font: normal 900 1.9cqw 'Inter', sans-serif; letter-spacing: .08em; color: inherit; opacity: .9; }
.cf-stat-v, .cf-stat-in { display: grid; place-items: center; align-content: center; }
.cf-stat-in { color: var(--st-ink, #fff); gap: .2cqw; }
.cf-stat-v b { font: 900 5cqw 'Cinzel', serif; color: inherit; }
.cf-stat.empty .cf-stat-v { opacity: .3; }
/* 数値の図形：塗りはレアリティで固定（--st-bg / --st-ink）、細い外縁だけ枠の差し色（--accent）で枠になじませる */
.st-hex .cf-stat { filter: drop-shadow(0 0 1.2cqw var(--st-glow, transparent)); }
.st-hex .cf-stat-v {
    width: 13.4cqw; height: 11.6cqw;
    background: var(--st-rim, var(--accent));
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.st-hex .cf-stat-in {
    width: calc(100% - 1.2cqw); height: calc(100% - 1.1cqw);
    background: var(--st-bg);
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.st-hex .cf-stat-v b { text-shadow: 0 .2cqw 0 rgba(255,255,255,.35); }
.st-orb .cf-stat-in { color: #fff; }
.st-orb .cf-stat-v {
    width: 11.6cqw; height: 11.6cqw; border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, #2a3142, #0a0d14 72%);
    box-shadow: inset 0 0 0 .5cqw var(--st-ring), 0 0 1.6cqw var(--st-glow, transparent);
}
.st-bar .cf-stats { gap: 0; border: .3cqw solid var(--st-ring); border-radius: 1cqw; overflow: hidden; background: rgba(6,8,14,.85); }
.st-bar .cf-stat { padding: .9cqw 2.4cqw; }
.st-bar .cf-stat-in { grid-auto-flow: column; gap: 1.2cqw; align-items: baseline; color: #fff; }
.st-bar .cf-stat-l { font-size: 2.2cqw; }
.st-bar .cf-stat + .cf-stat { border-left: .3cqw solid color-mix(in srgb, var(--st-ring) 60%, transparent); }
.st-bar .cf-stat-v b { font-size: 4.8cqw; }

/* レアリティごとの色（印・数値・光）。N=鉄、R=銀、SR=金、UR=寒色プリズム、LR=白金＋オパール */
.cf-card.rar-N  { --rar-bg: linear-gradient(135deg,#eef2f6,#8a96a8); --rar-glow: rgba(203,213,225,.35); --rar-solid: #cbd5e1;
                  --st-bg: linear-gradient(180deg,#9aa3ad,#5d656f); --st-ink: #0f1318; --st-ring: #8b949e; }
.cf-card.rar-R  { --rar-bg: linear-gradient(135deg,#ffffff,#c9d3df 50%,#8795a8); --rar-glow: rgba(200,215,235,.55); --rar-solid: #d7e0ea;
                  --st-bg: linear-gradient(180deg,#ffffff,#c4ccd8 50%,#7d8898); --st-ink: #111827; --st-ring: #c4ccd8; }
.cf-card.rar-SR { --rar-bg: linear-gradient(135deg,#fff6cc,#f2b632 55%,#a86a10); --rar-glow: rgba(242,182,50,.7); --rar-solid: #f5c451;
                  --st-bg: linear-gradient(180deg,#fff3c4,#e6b23e 50%,#8e5c10); --st-ink: #2a1804; --st-ring: #e6b23e; }
.cf-card.rar-UR { --rar-bg: radial-gradient(circle at 50% 45%, #3a1d6e, #2a1450 60%, #1a0c36); --rar-glow: rgba(170,140,255,.9); --rar-solid: #a9b4ff;
                  --st-bg: linear-gradient(160deg,#c9f3ff,#8fb1ff 45%,#9d7bff); --st-ink: #0d1440; --st-ring: #8fb1ff; --st-glow: rgba(143,177,255,.6); }
.cf-card.rar-LR { --rar-bg: conic-gradient(from 210deg,#ffe07a,#ff8a5b,#ff6fae,#a283ff,#58d6ff,#6af2a8,#ffe07a); --rar-glow: rgba(255,224,122,.85); --rar-solid: #ffe07a;
                  --st-bg: radial-gradient(circle at 50% 55%, #16123a 0 36%, #3c3380 52%, #c9a8ff 70%, #bfe9ff 84%, #fff1c8 100%);
                  --st-rim: conic-gradient(from 0deg, #ffe07a, #ff8fc4, #b89cff, #7fdcff, #8ff5c0, #ffe07a);
                  --st-ink: #ffffff; --st-ring: #ffe39a; --st-glow: rgba(255,180,230,.95); }
.rar-LR.st-hex .cf-stat { filter: drop-shadow(0 0 1.4cqw rgba(255,180,230,.9)) drop-shadow(0 0 2.8cqw rgba(255,225,150,.55)); }
.rar-LR .cf-stat-v b { -webkit-text-stroke: .14cqw #e0b04a; text-shadow: 0 0 1cqw rgba(255,210,120,.6); }
/* レアリティ印の文字は、地が明るくても読めるよう濃い縁取りを付ける */
.cf-badge span { -webkit-text-stroke: .15cqw rgba(255,255,255,.35); }
.rar-UR .cf-badge span, .rar-LR .cf-badge span { color: #0b1020; text-shadow: 0 0 .5cqw rgba(255,255,255,.9), 0 0 1cqw rgba(255,255,255,.6); }
/* UR の宝石印は八角形にして、R の菱形と小さくても見分けられるようにする */
.rar-UR.bd-gem .cf-badge {
    transform: none; border-radius: 0; width: 11cqw; height: 11cqw; margin: 0;
    background: linear-gradient(135deg, #ffffff, #d7dce8 50%, #9ea6b8);
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
    box-shadow: none; filter: drop-shadow(0 0 1.6cqw var(--rar-glow));
}
.rar-UR.bd-gem .cf-badge::before {
    content: ''; position: absolute; inset: .7cqw; background: var(--rar-bg);
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.rar-UR.bd-gem .cf-badge span { position: relative; color: #fff; text-shadow: 0 0 .8cqw rgba(190,160,255,.9); -webkit-text-stroke: 0; }
.rar-UR.bd-gem .cf-badge span { transform: none; }

/* ─── LR 専用の情報パーツ：オパールの虹色の縁・光の筋・後光 ─── */
.cf-card.rar-LR { --opal: conic-gradient(from 200deg, #ffe89a, #ff9ec4, #b9a2ff, #8fdcff, #9ff5c8, #ffe89a); }
.rar-LR.plate-glass .cf-plate, .rar-LR.plate-metal .cf-plate {
    border: .4cqw solid transparent;
    background:
        linear-gradient(105deg, transparent 30%, rgba(255,255,255,.1) 45%, transparent 55%) padding-box,
        linear-gradient(180deg, rgba(30,24,78,.9), rgba(30,24,78,.8)) padding-box,
        linear-gradient(180deg, #fff3c0, #d6a640 50%, #fff0b5) border-box;
    box-shadow: inset 0 0 0 .45cqw rgba(214,196,255,.35), inset 0 0 2cqw rgba(255,200,240,.25),
                0 0 2.5cqw rgba(255,230,160,.4), 0 1cqw 3cqw rgba(0,0,0,.5);
}
.rar-LR.tb-glass .cf-textbox, .rar-LR.tb-solid .cf-textbox {
    border: .4cqw solid transparent;
    background:
        linear-gradient(180deg, rgba(30,24,78,.55), rgba(30,24,78,.78) 18%, rgba(22,18,60,.86)) padding-box,
        linear-gradient(180deg, #fff3c0, #d6a640 50%, #fff0b5) border-box;
    box-shadow: inset 0 0 0 .45cqw rgba(214,196,255,.3), inset 0 0 3cqw rgba(255,200,240,.18),
                0 0 2.5cqw rgba(200,190,255,.3), 0 1cqw 3cqw rgba(0,0,0,.5);
    backdrop-filter: blur(1.4cqw) brightness(.5) saturate(.4);
}
.rar-LR .cf-typeline { border-bottom-color: rgba(255,236,180,.45); }
.rar-LR .cf-cost, .rar-LR .cf-res { box-shadow: 0 0 0 .5cqw #fff3c4, 0 0 0 .8cqw rgba(0,0,0,.5), 0 0 3cqw rgba(255,236,160,.9); }

/* SR 以上：効果欄を半透明のガラスにして、下のイラストが透けて見えるようにする（UR・LR は下の専用ルール） */
.rar-SR.tb-glass .cf-textbox {
    background: linear-gradient(180deg, rgba(8,10,20,.3), rgba(8,10,20,.58) 18%, rgba(6,8,16,.66));
}
/* UR：効果欄の縁を寒色のプリズムに */
.rar-UR.tb-glass .cf-textbox {
    border: .35cqw solid transparent;
    background: linear-gradient(180deg, rgba(8,10,22,.3), rgba(8,10,22,.6) 18%, rgba(6,8,18,.7)) padding-box,
                linear-gradient(135deg, #9fe6ff, #b8a6ff, #7aa7ff, #9fe6ff) border-box;
    backdrop-filter: blur(1.4cqw) brightness(.5) saturate(.4);
}

/* ─── 光沢演出（マウス位置 --mx/--my に追従） ───────────────── */
/* color-dodge は暗い部分に点状のノイズが出るため、screen / soft-light で重ねる */
.cf-foil { inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .3s; }
.foil-shine .cf-foil {
    opacity: .5;
    background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255,250,235,.28), transparent 42%),
                linear-gradient(115deg, transparent 38%, rgba(255,255,255,.1) 48%, transparent 58%);
}
.foil-holo .cf-foil, .foil-prism .cf-foil {
    opacity: .32; mix-blend-mode: soft-light;
    background:
        radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255,255,255,.7), transparent 40%),
        repeating-linear-gradient(115deg, #ff5fa2 0%, #ffd76a 6%, #5ef0a0 12%, #4fd1ff 18%, #9c7bff 24%, #ff5fa2 30%);
    background-size: 100% 100%, 300% 300%;
    background-position: 0 0, var(--mx, 30%) var(--my, 20%);
}
.foil-prism .cf-foil { opacity: .4; }
/* ホロ＋虹縁：カードの外周を虹色の光が回る（LR のおすすめ） */
.cf-edge {
    left: var(--wx); top: var(--wy); width: var(--ww); height: var(--wh);
    border-radius: 2cqw; pointer-events: none; display: none;
}
@property --edge-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.foil-prism .cf-edge {
    display: block; padding: .5cqw;
    background: conic-gradient(from var(--edge-ang), #ffe07a, #ff8a5b, #ff6fae, #a283ff, #58d6ff, #6af2a8, #ffe07a);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    mix-blend-mode: screen; opacity: .75;
    animation: cf-edge-spin 6s linear infinite;
}
@keyframes cf-edge-spin { to { --edge-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .foil-prism .cf-edge { animation: none; } }