/*
 * 二つ名ジェネレーター — 枠と結果演出（epithet-ui.js と対）
 *
 * 舞台の class は React が描き直すたびに上書きするので、状態は data-ep / data-rarity / data-ep-fx で持つ。
 * 画像は明るさ＋透明度だけの白黒。background-blend-mode: luminosity で
 * 「明るさは画像、色味は下のグラデーション」にして、レア度ごとに色を載せ替える。
 */

@property --ep-c1 { syntax: '<color>'; inherits: true; initial-value: #b8862b; }
@property --ep-c2 { syntax: '<color>'; inherits: true; initial-value: #e0b04a; }
@property --ep-c3 { syntax: '<color>'; inherits: true; initial-value: #a8742a; }
@property --ep-panel { syntax: '<color>'; inherits: true; initial-value: #2a2340; }
@property --ep-glow { syntax: '<color>'; inherits: true; initial-value: rgba(202, 138, 4, 0.28); }

/* ---- レア度ごとの色 ---- */
[data-ep] {
    --ep-unit: 0.72;
    --ep-c1: #b8862b; --ep-c2: #e0b04a; --ep-c3: #a8742a;
    --ep-panel: #2a2340;
    --ep-glow: rgba(202, 138, 4, 0.28);
    transition: --ep-c1 0.9s ease, --ep-c2 0.9s ease, --ep-c3 0.9s ease, --ep-panel 0.9s ease, --ep-glow 0.9s ease;
}
[data-ep][data-rarity="common"] {
    --ep-c1: #7f9cb8; --ep-c2: #a9c4dc; --ep-c3: #6f8aa6;
    --ep-panel: #1c2a3a; --ep-glow: rgba(135, 206, 250, 0.32);
}
[data-ep][data-rarity="uncommon"] {
    --ep-c1: #d08a1c; --ep-c2: #f0bf45; --ep-c3: #c07818;
    --ep-panel: #33230c; --ep-glow: rgba(255, 180, 50, 0.42);
}
[data-ep][data-rarity="rare"] {
    --ep-c1: #8e3fe0; --ep-c2: #c07cff; --ep-c3: #7a2fcf;
    --ep-panel: #2b1248; --ep-glow: rgba(186, 85, 211, 0.55);
}
[data-ep][data-rarity="epic"] {
    --ep-c1: #d8202c; --ep-c2: #ff5a3c; --ep-c3: #b8141f;
    --ep-panel: #3e0d12; --ep-glow: rgba(255, 45, 45, 0.55);
}
[data-ep][data-rarity="legendary"] {
    --ep-c1: #ff4f6d; --ep-c2: #ffd166; --ep-c3: #7ae7ff;
    --ep-panel: #2c1d3e; --ep-glow: rgba(255, 236, 170, 0.7);
}

/* ---- 既存の枠・四隅の飾りをしまう（舞台そのものは残す） ---- */
.summoning-stage[data-ep] {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    isolation: isolate;
}
.summoning-stage[data-ep]::before { display: none; }
.summoning-stage[data-ep] > svg,
.summoning-stage[data-ep] .damask-corner { display: none; }

/* ---- 共通の層 ---- */
.ep-frame, .ep-orn { position: absolute; pointer-events: none; }
.ep-frame { inset: 0; z-index: 0; }
.ep-layer, .ep-glow { position: absolute; inset: 0; }
.ep-frame:not(.is-built) { opacity: 0; }
.ep-frame { transition: opacity 0.4s ease; }

.ep-layer {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.ep-gold, .ep-shine {
    -webkit-mask-image: var(--ep-gold-img);
    mask-image: var(--ep-gold-img);
}
.ep-gold {
    background-image: var(--ep-gold-img), linear-gradient(115deg, var(--ep-c1), var(--ep-c2) 48%, var(--ep-c3));
    background-blend-mode: luminosity, normal;
    filter: brightness(1.12) saturate(1.1);
}
.ep-panel {
    -webkit-mask-image: var(--ep-panel-img);
    mask-image: var(--ep-panel-img);
    background-image: var(--ep-panel-img), linear-gradient(var(--ep-panel), var(--ep-panel));
    background-blend-mode: luminosity, normal;
    filter: brightness(0.62) saturate(1.35);
}
.ep-glow { filter: drop-shadow(0 0 5px var(--ep-glow)); }
/* 発光層：ぼかしは描画時に一度だけ。演出では不透明度だけを動かす（毎フレームのぼかし計算を避ける） */
.ep-bloom {
    -webkit-mask: none;
    mask: none;
    background: none;
    opacity: 0;
    pointer-events: none;
}
.ep-bloom::before {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask: var(--ep-gold-img) 0 0 / 100% 100% no-repeat;
    mask: var(--ep-gold-img) 0 0 / 100% 100% no-repeat;
    background: var(--ep-tier);
    filter: blur(7px);
    mix-blend-mode: plus-lighter;
}
.ep-shine {
    background-image: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.95) 50%, transparent 62%);
    background-size: 260% 100%;
    background-position: 130% 0;
    mix-blend-mode: plus-lighter;
    opacity: 0;
}

/* 伝説は色が流れる */
[data-ep][data-rarity="legendary"] .ep-gold { animation: epHue 4.5s linear infinite; }
[data-ep][data-rarity="legendary"] .ep-glow { filter: drop-shadow(0 0 7px var(--ep-glow)); }
[data-ep][data-rarity="legendary"] .ep-bloom::before { background: linear-gradient(90deg, #ff6f91, #ffd166, #7ae7ff, #b99bff, #ff6f91); }
@keyframes epHue { to { filter: brightness(1.18) saturate(1.3) hue-rotate(360deg); } }

/* 紋章は枠の内側だけに見せる */
.ep-clip {
    position: absolute;
    inset: 10px;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

/* ---- 溜めの色（格上げで 金 → 紫 → 紅 → 虹） ---- */
@property --ep-tier { syntax: '<color>'; inherits: true; initial-value: #ffc860; }
[data-ep] { --ep-tier: #ffc860; transition: --ep-c1 0.9s ease, --ep-c2 0.9s ease, --ep-c3 0.9s ease, --ep-panel 0.9s ease, --ep-glow 0.9s ease, --ep-tier 0.25s ease; }
[data-ep][data-ep-tier="rare"] { --ep-tier: #c07cff; }
[data-ep][data-ep-tier="epic"] { --ep-tier: #ff4a3a; }
[data-ep][data-ep-tier="legendary"] { --ep-tier: #fff0c0; }
/* 溜めの間の格上げは素早く色を変える */
[data-ep][data-ep-fx="charge"] { transition-duration: 0.3s; }

/* 溜めの間は結果を隠す（React はその間に文字を並べ終える） */
[data-ep][data-ep-hold] > .w-full { opacity: 0 !important; }
/* 読み・英語・札・物語を読むは React が1秒かけてフェードするが、出る時刻は epithet-ui.js で決めるので止める */
.summoning-stage[data-ep] .transition-opacity.duration-1000 { transition: none !important; }
/* 溜めの間は下のボタンも隠して押せなくする（放ったあと JS でふわっと出す） */
#root .summoning-stage[data-ep-hold] + div { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }

/* ---- 封印の紋章 ---- */
.ep-seal {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(62%, 300px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0.2;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.ep-seal-half { inset: 0; }
.ep-seal-top { clip-path: inset(0 0 50% 0); }
.ep-seal-bottom { clip-path: inset(50% 0 0 0); }
.ep-seal .ep-panel { filter: brightness(0.5) saturate(1.2); }
/* 結果が出ている間はしまう */
[data-ep][data-ep-fx="reveal"] .ep-seal { opacity: 0.7; }
[data-ep]:not([data-rarity="idle"]):not([data-ep-fx="charge"]) .ep-seal { opacity: 0; transition-delay: 0.6s; }

/* 溜め：光が集まり、紋章が震えながら明るくなる */
[data-ep][data-ep-fx="charge"] .ep-seal { opacity: 0.85; animation: epSealCharge 0.09s linear infinite; }
[data-ep][data-ep-fx="charge"] .ep-seal .ep-glow { filter: drop-shadow(0 0 10px var(--ep-tier)); }
[data-ep][data-ep-fx="charge"] .ep-seal .ep-gold {
    background-image: var(--ep-gold-img), linear-gradient(var(--ep-tier), var(--ep-tier));
    animation: epSealHeat 1.2s ease-in forwards;
}
@keyframes epSealCharge {
    0%, 100% { transform: translate(-50%, -50%); }
    25% { transform: translate(calc(-50% + 1px), calc(-50% - 1px)); }
    75% { transform: translate(calc(-50% - 1px), calc(-50% + 1px)); }
}
@keyframes epSealHeat { from { filter: brightness(1); } to { filter: brightness(1.9) saturate(1.3); } }

/* 放つ：上下にまっすぐ割れて消える（傾きなし） */
[data-ep][data-ep-fx="reveal"] .ep-seal-top { animation: epSealTop 0.75s cubic-bezier(.2, .7, .2, 1) forwards; }
[data-ep][data-ep-fx="reveal"] .ep-seal-bottom { animation: epSealBottom 0.75s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes epSealTop { from { transform: none; opacity: 1; } to { transform: translateY(-42%); opacity: 0; } }
@keyframes epSealBottom { from { transform: none; opacity: 1; } to { transform: translateY(42%); opacity: 0; } }

/* ---- 光の玉：溜めで膨らみ、放つと弾けて広がる ---- */
.ep-orb {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 180px;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle, #fff 0 8%, var(--ep-tier) 22%, color-mix(in srgb, var(--ep-tier) 40%, transparent) 45%, transparent 70%);
    mix-blend-mode: plus-lighter;
    opacity: 0;
    z-index: 2;
}
[data-ep][data-ep-fx="charge"] .ep-orb { animation: epOrbGrow 2.2s cubic-bezier(.3, 0, .6, 1) forwards, epOrbPulse 0.24s ease-in-out infinite alternate; }
[data-ep][data-ep-fx="reveal"] .ep-orb { animation: epOrbBurst 0.7s cubic-bezier(.1, .7, .3, 1) forwards; }
[data-ep][data-ep-tier="legendary"] .ep-orb { background: radial-gradient(circle, #fff 0 10%, #ffd166 20%, #ff6f91 32%, #7ae7ff 44%, transparent 70%); }
@keyframes epOrbGrow { from { transform: translate(-50%, -50%) scale(0.1); opacity: 0.4; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes epOrbPulse { to { filter: brightness(1.35); } }
@keyframes epOrbBurst {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(6); opacity: 0; }
}

/* ---- 名前の後ろで回る光の筋（探究者以上、上ほど強い） ---- */
.ep-rays {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--ep-c2) 70%, transparent) 0deg 5deg, transparent 5deg 15deg);
    -webkit-mask: radial-gradient(circle, #000 0 8%, rgba(0, 0, 0, 0.55) 22%, transparent 55%);
    mask: radial-gradient(circle, #000 0 8%, rgba(0, 0, 0, 0.55) 22%, transparent 55%);
    mix-blend-mode: plus-lighter;
    opacity: 0;
    z-index: 0;
}
[data-ep][data-ep-fx="reveal"]:is([data-rarity="uncommon"], [data-rarity="rare"], [data-rarity="epic"], [data-rarity="legendary"]) .ep-rays {
    animation: epRaysIn 2.2s ease-out forwards;
}
[data-ep][data-rarity="uncommon"] { --ep-rays: 0.1; }
[data-ep][data-rarity="rare"] { --ep-rays: 0.2; }
[data-ep][data-rarity="epic"] { --ep-rays: 0.22; }
[data-ep][data-rarity="legendary"] { --ep-rays: 0.26; }
[data-ep][data-rarity="legendary"] .ep-rays {
    background: repeating-conic-gradient(from 0deg, rgba(255, 120, 150, .8) 0deg 5deg, transparent 5deg 12deg, rgba(255, 220, 120, .8) 12deg 17deg, transparent 17deg 24deg, rgba(120, 235, 255, .8) 24deg 29deg, transparent 29deg 36deg);
}
/* 集中線は演出のときだけ。出しっぱなしにすると名前が読みにくい */
@keyframes epRaysIn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
    15% { opacity: calc(var(--ep-rays, 0.2) * 3); }
    55% { opacity: calc(var(--ep-rays, 0.2) * 1.4); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15) rotate(50deg); }
}

/* ---- 溜めの間、舞台のまわりを暗くする ---- */
.ep-dim {
    position: fixed;
    inset: 0;
    z-index: 44;
    pointer-events: none;
    /* 舞台の大きさに合わせた楕円の穴を開ける */
    background: radial-gradient(ellipse calc(var(--ep-w, 600px) * 0.62) calc(var(--ep-h, 320px) * 0.85) at var(--ep-x, 50%) var(--ep-y, 45%), transparent 0 80%, rgba(0, 0, 0, 0.74) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
}
.ep-dim.is-on { opacity: 1; transition-duration: 0.35s; }
.ep-fx {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 45;
    pointer-events: none;
}

/* 溜めの間は枠も溜めの色で強く光る */
[data-ep][data-ep-fx="charge"] .ep-stage-frame .ep-bloom { animation: epFrameCharge 0.5s ease-in-out infinite alternate; }
@keyframes epFrameCharge { from { opacity: 0.25; } to { opacity: 0.8; } }

/* ---- 結果の背後で回る紋章（覚醒者以上） ---- */
.ep-sigil {
    left: 50%;
    top: 46%;
    width: min(78%, 420px);
    aspect-ratio: 1;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    transition: opacity 0.6s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.ep-sigil .ep-glow { animation: epSpin 60s linear infinite; }
[data-ep][data-rarity="rare"] .ep-sigil,
[data-ep][data-rarity="epic"] .ep-sigil,
[data-ep][data-rarity="legendary"] .ep-sigil {
    opacity: 0.16;
    transform: translate(-50%, -50%) scale(1);
}
[data-ep][data-rarity="legendary"] .ep-sigil { opacity: 0.24; }
[data-ep][data-rarity="legendary"] .ep-sigil .ep-glow { animation-duration: 24s; }
@keyframes epSpin { to { transform: rotate(360deg); } }

/* ---- 左右の刻みに取り付く矢印 ---- */
.ep-arrow {
    top: 50%;
    width: 104px;
    aspect-ratio: 242.66 / 145.92;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.55s cubic-bezier(.2, .9, .25, 1.15);
}
/* 素材の矢印は左向き。左側は反転して内側（名前）を指す */
.ep-arrow-left { left: -16px; transform: translate(-40px, -50%) scaleX(-1); }
.ep-arrow-right { right: -16px; transform: translate(40px, -50%); }
[data-ep][data-ep-fx="reveal"] .ep-arrow { opacity: 1; transition-delay: 0.25s; }
[data-ep][data-ep-fx="reveal"] .ep-arrow-left { transform: translate(0, -50%) scaleX(-1); }
[data-ep][data-ep-fx="reveal"] .ep-arrow-right { transform: translate(0, -50%); }
.ep-arrow .ep-panel { filter: brightness(0.7) saturate(1.4); }

/* ---- 名前が出た瞬間 ---- */
[data-ep][data-ep-fx="reveal"] .ep-stage-frame .ep-shine { animation: epShine 1.1s cubic-bezier(.4, 0, .2, 1) 0.1s forwards; }
[data-ep][data-ep-fx="reveal"] .ep-arrow .ep-shine { animation: epShine 0.8s ease-out 0.55s forwards; }
[data-ep][data-ep-fx="reveal"] .ep-stage-frame .ep-bloom { animation: epFlare 1.6s ease-out; }
@keyframes epShine {
    0% { background-position: 130% 0; opacity: 1; }
    100% { background-position: -30% 0; opacity: 1; }
}
@keyframes epFlare {
    0% { opacity: 0; }
    18% { opacity: 1; }
    100% { opacity: 0; }
}

/* ---- レア度の札（button_11 の板） ---- */
[data-ep] .rarity-indicator {
    position: relative;
    isolation: isolate;
    min-width: 0;
    width: 196px;
    height: 44px;
    line-height: 44px;
    padding: 0 1rem;
    border: none;
    border-radius: 0;
    background: none;
    font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-shadow: 0 0 8px var(--ep-glow);
}
[data-ep] .rarity-indicator::before,
[data-ep] .rarity-indicator::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    -webkit-mask: center / 100% 100% no-repeat;
    mask: center / 100% 100% no-repeat;
    background-size: 100% 100%;
}
[data-ep] .rarity-indicator::before {
    -webkit-mask-image: url("button_11-panel.webp");
    mask-image: url("button_11-panel.webp");
    background-image: url("button_11-panel.webp"), linear-gradient(var(--ep-panel), var(--ep-panel));
    background-blend-mode: luminosity, normal;
    filter: brightness(0.75) saturate(1.3);
}
[data-ep] .rarity-indicator::after {
    -webkit-mask-image: url("button_11-gold.webp");
    mask-image: url("button_11-gold.webp");
    background-image: url("button_11-gold.webp"), linear-gradient(115deg, var(--ep-c1), var(--ep-c2) 48%, var(--ep-c3));
    background-blend-mode: luminosity, normal;
    filter: brightness(1.12) saturate(1.1) drop-shadow(0 0 4px var(--ep-glow));
}
[data-ep][data-rarity="legendary"] .rarity-indicator::after { animation: epHue 4.5s linear infinite; }
[data-ep] .rarity-indicator.rarity-legendary { color: #fff6cf; }

/* ---- タイトルの上下の飾り（devider5） ---- */
.generator-title::before,
.generator-title::after {
    width: min(56vw, 240px);
    height: calc(min(56vw, 240px) * 44.05 / 292.46);
    background: url("devider5_up-gold.webp") center / 100% 100% no-repeat,
                linear-gradient(90deg, #a8742a, #f0c766 50%, #a8742a) center / 100% 100% no-repeat;
    background-blend-mode: luminosity, normal;
    -webkit-mask: url("devider5_up-gold.webp") center / 100% 100% no-repeat;
    mask: url("devider5_up-gold.webp") center / 100% 100% no-repeat;
    filter: brightness(1.15) drop-shadow(0 0 6px rgba(202, 138, 4, 0.3));
}
.generator-title::before { top: -30px; }
.generator-title::after { bottom: -30px; }

/* ---- ボタンの板（button_12 / button_11） ----
   React の Tailwind クラス（hover:bg-… など）より強くするため #root から指定する。
   ライセンスページは body.ep-page。:is() の強さは中で一番強い #root になる */
:is(#root, .ep-page) button[data-ep-btn] {
    --ep-c1: #b8862b; --ep-c2: #e0b04a; --ep-c3: #a8742a;
    --ep-panel: #2a2340; --ep-glow: rgba(202, 138, 4, 0.35);
    position: relative;
    isolation: isolate;
    min-height: 50px;
    padding: 0.6rem 2.6rem;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: #fbe3a0 !important;
    font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-shadow: 0 0 10px var(--ep-glow);
    white-space: nowrap;
    transition: transform 0.2s ease, filter 0.2s ease;
    /* React 側の hover:scale-105 を無効に。スマホはタップ後も :hover が残るので、
       出現のアニメが終わった瞬間に 1.05 倍へ跳ねて「カクっ」と見えていた */
    --tw-scale-x: 1 !important;
    --tw-scale-y: 1 !important;
}
#root button[data-ep-btn="b11"] {
    min-height: 40px;
    padding: 0.45rem 2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #d8cdb4 !important;
    --ep-c1: #8f7a55; --ep-c2: #b8a276; --ep-c3: #7a6848;
    --ep-panel: #1d1a26; --ep-glow: rgba(202, 170, 110, 0.2);
}
/* 物語を読むは舞台の中にあるので、名前のレア度の色を受け継ぐ */
#root .summoning-stage button[data-ep-btn="b11"] {
    --ep-c1: inherit; --ep-c2: inherit; --ep-c3: inherit; --ep-panel: inherit; --ep-glow: inherit;
    color: #efe6ff !important;
    margin-top: 0.9rem;
}
:is(#root, .ep-page) button[data-ep-btn]::before,
:is(#root, .ep-page) button[data-ep-btn]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-mask: 0 0 / 100% 100% no-repeat;
    mask: 0 0 / 100% 100% no-repeat;
    background-blend-mode: luminosity, normal;
    transition: filter 0.2s ease;
}
:is(#root, .ep-page) button[data-ep-btn]::before {
    -webkit-mask-image: var(--ep-plate-panel);
    mask-image: var(--ep-plate-panel);
    background-image: var(--ep-plate-panel), linear-gradient(var(--ep-panel), var(--ep-panel));
    filter: brightness(0.7) saturate(1.3);
}
:is(#root, .ep-page) button[data-ep-btn]::after {
    -webkit-mask-image: var(--ep-plate-gold);
    mask-image: var(--ep-plate-gold);
    background-image: var(--ep-plate-gold), linear-gradient(115deg, var(--ep-c1), var(--ep-c2) 48%, var(--ep-c3));
    filter: brightness(1.12) saturate(1.1) drop-shadow(0 0 3px var(--ep-glow));
}
:is(#root, .ep-page) button[data-ep-btn]:hover:not(:disabled)::after { filter: brightness(1.45) saturate(1.2) drop-shadow(0 0 8px var(--ep-glow)); }
:is(#root, .ep-page) button[data-ep-btn]:hover:not(:disabled)::before { filter: brightness(0.95) saturate(1.4); }
:is(#root, .ep-page) button[data-ep-btn]:hover:not(:disabled) { color: #fff6d8 !important; }
:is(#root, .ep-page) button[data-ep-btn]:active:not(:disabled) { transform: scale(0.97); }
:is(#root, .ep-page) button[data-ep-btn]:focus-visible { outline: 2px solid #f8d77c; outline-offset: 4px; }
:is(#root, .ep-page) button[data-ep-btn]:disabled { opacity: 0.55; }
/* 板の画像ができるまでは枠なしで待つ（一瞬） */
:is(#root, .ep-page) button[data-ep-btn]:not([style*="--ep-plate-gold"])::before,
:is(#root, .ep-page) button[data-ep-btn]:not([style*="--ep-plate-gold"])::after { opacity: 0; }
/* 伝説のときは舞台の中のボタンも虹 */
#root .summoning-stage[data-rarity="legendary"] button[data-ep-btn]::after { animation: epHue 4.5s linear infinite; }

/* ---- モーダル（window3 の枠） ---- */
#root [data-ep-modal] {
    --ep-unit: 0.6;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 2.4rem 2.2rem 2.2rem !important;
}
#root [data-ep-modal] > :not(.ep-frame) { position: relative; z-index: 1; }
#root [data-ep-modal] > button[aria-label="閉じる"] { position: absolute; top: 1.1rem; right: 1.3rem; z-index: 2; color: #cbbd9a; }
#root [data-ep-modal] > button[aria-label="閉じる"]:hover { color: #fff; }
#root [data-ep-modal] .ep-panel { filter: brightness(0.5) saturate(1.3); }
#root [data-ep-modal] .popup-content { scrollbar-color: rgba(202, 138, 4, 0.45) transparent; }
#root [data-ep-modal] h2, #root [data-ep-modal] h3 { font-family: 'Shippori Mincho', 'Noto Serif JP', serif; }
#root [data-ep-modal] h2, #root [data-ep-modal] h3 { padding-right: 2.2rem; }
@media (max-width: 640px) {
    #root [data-ep-modal] { --ep-unit: 0.42; padding: 2rem 1.4rem 1.6rem !important; }
    #root [data-ep-modal] h2, #root [data-ep-modal] h3 { font-size: 1.05rem; line-height: 1.5; }
    :is(#root, .ep-page) button[data-ep-btn] { padding: 0.55rem 1.7rem; font-size: 0.95rem; letter-spacing: 0.04em; }
    #root button[data-ep-btn="b11"] { padding: 0.4rem 1.4rem; font-size: 0.82rem; }
    #root .summoning-stage + div { gap: 0.5rem; }
    #root .summoning-stage + div > * + * { margin-left: 0 !important; }
}

/* ---- ライセンスページのカード（window3 の枠） ---- */
.ep-page .license-card:has(> .ep-frame.is-built) {
    background: none;
    border-color: transparent;
    box-shadow: none;
    --ep-unit: 0.46;
}
.ep-page .license-card:has(> .ep-frame.is-built)::before { display: none; }
.ep-page .license-card > :not(.ep-frame) { position: relative; z-index: 1; }
.ep-page .license-card .ep-panel { filter: brightness(0.42) saturate(1.2); }
.ep-page .license-card .ep-bloom { transition: opacity 0.3s ease; }
.ep-page .license-card:hover .ep-bloom { opacity: 0.45; }
@media (max-width: 640px) { .ep-page .license-card:has(> .ep-frame.is-built) { --ep-unit: 0.36; } }

/* ---- 長い名前を「の」の後で2行に分けるときの改行（epithet-ui.js が差し込む） ---- */
.ep-br { flex-basis: 100%; height: 0; }

/* ---- 待機画面の見出し・一文：狭い画面では意味の切れ目で折り返す（epithet-ui.js が span に分ける） ---- */
.ep-phrase { display: inline-block; }

/* ---- 画面全体に漂う光（canvas） ---- */
.ep-motes {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    /* 本文より後ろへ。#root に z-index を付けると重ね合わせの文脈ができ、
       モーダル（z-50）が #root の外の関連ツール欄（z-index:10）の下に潜るので付けない */
    z-index: -1;
    pointer-events: none;
}

/* 舞台の中の既存の火の粉もレア度の色に */
[data-ep] .bg-yellow-300 {
    background-color: var(--ep-c2);
    box-shadow: 0 0 6px var(--ep-glow);
    transition: background-color 0.9s ease;
}

/* ---- 狭い画面：タイトルと名前が途中で折り返さないように少し縮める ---- */
@media (max-width: 400px) {
    #root .generator-title { font-size: clamp(1.35rem, 7.2vw, 1.875rem); white-space: nowrap; }
    #root [data-ep] .text-5xl.tracking-wider { font-size: clamp(2.1rem, 12vw, 3rem); }
    #root [data-ep] .katakana-subtitle { font-size: 1rem; }
    /* ささやき文（20字前後）も1行に収める */
    #root .fate-whisper { font-size: min(0.95rem, 4vw); }
}

/* ---- スマホ ---- */
@media (max-width: 640px) {
    [data-ep] { --ep-unit: 0.5; }
    .ep-arrow { width: 62px; }
    .ep-arrow-left { left: -10px; }
    .ep-arrow-right { right: -10px; }
    .ep-seal { width: min(78%, 260px); }
}

@media (prefers-reduced-motion: reduce) {
    [data-ep], .ep-frame, .ep-frame *, .ep-orn, .ep-orn *,
    [data-ep] .rarity-indicator::after { animation: none !important; transition: none !important; }
}