@charset "UTF-8";
/* =====================================================================
   classic.html だけが使うスタイル — 8 枚のヒーローカルーセルのパネル
   ---------------------------------------------------------------------
   新しいトップは幕 3 でカルーセルをやめたので、ここは classic.html でしか
   使われない。home.css に置いたままだと、読まない側にも毎回 7.8KB gz が
   配られる（index.html でこの 60 個のセレクタが 1 つも使われていないことを
   確認して切り出した）。

   読み込み順は home.css の直後。中身は移設前と同じ。
   ===================================================================== */

/* ---------------------------------------------------------------------
   ヒーロー: Practical AI Series（書籍）
   （移設元: index.html L1207）
   --------------------------------------------------------------------- */
/* 他の hero スライド（certly / daygrid / wordbook）と同じく、
   配色を変数化して時間帯テーマの夜で差し替えられるようにする。 */
.book-panel-bg {
    --bk-title: #1C1B18;
    --bk-body: #625F57;
    --bk-label: rgba(98, 95, 87, 0.75);
    --bk-label-border: rgba(98, 95, 87, 0.55);
    --bk-blue: #7AAECF;
    --bk-warm: #D98A4E;
    --bk-gold: #B4763C;
    --bk-btn-bg: #1C1B18;
    --bk-btn-text: #F5F3EE;
    background:
        radial-gradient(ellipse 60% 75% at 95% 10%, rgba(122,174,207,0.38) 0%, rgba(122,174,207,0.16) 45%, transparent 68%),
        radial-gradient(ellipse 45% 50% at 5% 90%, rgba(122,174,207,0.24) 0%, transparent 58%),
        radial-gradient(ellipse 38% 42% at 60% 88%, rgba(196,152,64,0.13) 0%, transparent 55%),
        rgba(245,243,238,0.30);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-color: rgba(198,222,240,0.55);
    /* 他の hero スライドと同じ、やわらかい落ち影に揃える */
    box-shadow: 0 4px 16px -6px rgba(28,27,24,0.10);
    transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.3s;
}
.book-panel-bg:hover {
    background:
        radial-gradient(ellipse 60% 75% at 95% 10%, rgba(122,174,207,0.50) 0%, rgba(122,174,207,0.24) 45%, transparent 68%),
        radial-gradient(ellipse 45% 50% at 5% 90%, rgba(122,174,207,0.32) 0%, transparent 58%),
        radial-gradient(ellipse 38% 42% at 60% 88%, rgba(196,152,64,0.16) 0%, transparent 55%),
        rgba(245,243,238,0.80);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 28px -10px rgba(28,27,24,0.16);
}
body.theme-night .book-panel-bg {
    --bk-title: #ffffff;
    --bk-body: #d9d4cb;
    --bk-label: rgba(226, 222, 214, 0.80);
    --bk-label-border: rgba(226, 222, 214, 0.35);
    --bk-blue: #A4C8E0;
    --bk-warm: #EBA96E;
    --bk-gold: #D9A05B;
    --bk-btn-bg: #F5F3EE;
    --bk-btn-text: #1C1B18;
    background:
        radial-gradient(ellipse 60% 75% at 95% 10%, rgba(122, 174, 207, 0.22) 0%, transparent 68%),
        radial-gradient(ellipse 45% 50% at 5% 90%, rgba(122, 174, 207, 0.14) 0%, transparent 58%),
        rgba(12, 18, 32, 0.55);
    border-color: rgba(122, 174, 207, 0.30);
}

body.theme-night .book-panel-bg:hover {
    background:
        radial-gradient(ellipse 60% 75% at 95% 10%, rgba(122, 174, 207, 0.30) 0%, transparent 68%),
        radial-gradient(ellipse 45% 50% at 5% 90%, rgba(122, 174, 207, 0.20) 0%, transparent 58%),
        rgba(12, 18, 32, 0.75);
}

/* 3冊の表紙：以前はスマホで重ねて1冊を大きく見せていたが、
   新刊 2 冊を並べると左端の書名が隠れて切れて見えるため、
   小さい画面でも重ねずに 3 冊とも読める幅へ落とした。 */
.hero-books {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
    max-width: 100%;
}
.hero-books > a {
    display: block;
    position: relative;
    z-index: 1;
    min-width: 0;
    flex-shrink: 1;
}
.hero-books > a + a { margin-left: 4px; }
.hero-books > a:nth-child(2) { z-index: 2; }
.hero-books > a img {
    display: block;
    width: 100%;
    border-radius: 3px;
}
.hero-book-side { width: 80px; }
.hero-book-main { width: 104px; }
@media (min-width: 420px) {
    .hero-books > a + a { margin-left: 6px; }
    .hero-book-side { width: 88px; }
    .hero-book-main { width: 120px; }
}
@media (min-width: 640px) {
    .hero-books > a + a { margin-left: 10px; }
    .hero-book-side { width: 111px; }
    .hero-book-main { width: 140px; }
}
@media (min-width: 1024px) {
    .hero-book-side { width: 120px; }
    .hero-book-main { width: 152px; }
}
@media (min-width: 1280px) {
    .hero-book-side { width: 138px; }
    .hero-book-main { width: 176px; }
}



/* ---------------------------------------------------------------------
   ヒーロー: certly
   （移設元: index.html L1407）
   --------------------------------------------------------------------- */
.certly-theme {
    --ct-bg-1: rgba(240, 250, 249, 0.55);
    --ct-bg-2: rgba(255, 255, 255, 0.40);
    --ct-bg-3: rgba(214, 240, 238, 0.50);
    --ct-grad: rgba(45, 106, 107, 0.10);
    --ct-glow: #2d6a6b;
    --ct-pill-bg: #e6f4f3;
    --ct-pill-text: #1f5152;
    --ct-pill-border: #a7d8d5;
    --ct-title: #143b3c;
    --ct-subtitle: #2f5c5c;
    --ct-accent: #2d6a6b;
    --ct-stats-box: rgba(255, 255, 255, 0.72);
    --ct-stats-border: rgba(167, 216, 213, 0.85);
    --ct-stats-num: #143b3c;
    --ct-stats-label: #2d6a6b;
}
@media (prefers-color-scheme: dark) {
    .certly-theme {
        --ct-bg-1: rgba(8, 26, 26, 0.60);
        --ct-bg-2: rgba(4, 16, 16, 0.50);
        --ct-bg-3: rgba(14, 40, 40, 0.62);
        --ct-grad: rgba(143, 211, 212, 0.18);
        --ct-glow: #8fd3d4;
        --ct-pill-bg: #143b3c;
        --ct-pill-text: #8fd3d4;
        --ct-pill-border: #256668;
        --ct-title: #ffffff;
        --ct-subtitle: #d3ecec;
        --ct-accent: #8fd3d4;
        --ct-stats-box: rgba(20, 59, 60, 0.80);
        --ct-stats-border: rgba(37, 102, 104, 0.85);
        --ct-stats-num: #eafafa;
        --ct-stats-label: #8fd3d4;
    }
}
body.theme-night .certly-theme {
    --ct-bg-1: rgba(8, 26, 26, 0.60);
    --ct-bg-2: rgba(4, 16, 16, 0.50);
    --ct-bg-3: rgba(14, 40, 40, 0.62);
    --ct-grad: rgba(143, 211, 212, 0.18);
    --ct-glow: #8fd3d4;
    --ct-pill-bg: #143b3c;
    --ct-pill-text: #8fd3d4;
    --ct-pill-border: #256668;
    --ct-title: #ffffff;
    --ct-subtitle: #d3ecec;
    --ct-accent: #8fd3d4;
    --ct-stats-box: rgba(20, 59, 60, 0.80);
    --ct-stats-border: rgba(37, 102, 104, 0.85);
    --ct-stats-num: #eafafa;
    --ct-stats-label: #8fd3d4;
}
.certly-border-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    padding: 1.5px;
    background: linear-gradient(90deg, var(--ct-glow), transparent, var(--ct-glow), transparent);
    background-size: 400% 400%;
    animation: rainbow-flow var(--soft-flow-duration) linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    pointer-events: none;
    opacity: var(--soft-glow-opacity);
}
@keyframes certly-bg-shift {
    0%   { background-color: var(--ct-bg-1); background-position: 0% 50%; }
    33%  { background-color: var(--ct-bg-2); background-position: 50% 100%; }
    66%  { background-color: var(--ct-bg-3); background-position: 100% 50%; }
    100% { background-color: var(--ct-bg-1); background-position: 0% 50%; }
}
.certly-geometric-bg {
    background-image: radial-gradient(circle at 25% 35%, var(--ct-grad) 0%, transparent 60%),
                      radial-gradient(circle at 75% 75%, rgba(143,211,212,0.12) 0%, transparent 52%);
    background-size: 200% 200%;
    animation: certly-bg-shift 30s ease-in-out infinite;
}
/* 収録範囲のメーター。ドメイン比重どおりに出題する、という中身を絵にする */
.certly-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--ct-accent);
    opacity: 0.85;
}



/* ---------------------------------------------------------------------
   ヒーロー: GOODS おつかれ！
   （移設元: index.html L1585）
   --------------------------------------------------------------------- */
/* Panel 4（いくぞ！）と同じ「写真を敷いて左に文字」の作り。
   ただし いくぞ！の写真はキーホルダーが右端に小さく写っているので cover で足りるが、
   おつかれ！の写真は**キーホルダーが枠いっぱいに写っている**ため、cover だと
   パネルの比率次第で金具や足元が切れる。ここだけ contain + ボケ背景にしている。 */
.goods2-panel {
    --gd2-title: #FFFFFF;
    --gd2-body: rgba(245, 243, 238, 0.92);
    --gd2-label: rgba(245, 243, 238, 0.92);
    --gd2-label-border: rgba(245, 200, 66, 0.65);
    --gd2-accent: #F5C842;
}
/* **写真は必ず全体を入れる。** 元写真はキーホルダーが枠いっぱいに写っていて、
   cover で敷くとパネルの比率（実測 1.19〜2.21 と幅で大きく動く）に応じて
   金具や足元が切れた。contain で右へ寄せ、余る所は同じ写真をぼかして敷く。 */
.goods2-panel-photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: right center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 余白を埋めるボケ背景。inset を負にして、ぼかしで縁が薄くなるのを隠す。
   **暗さは付けない。** 暗くすると写真との境目が縦線として見えてしまう。
   左を落とすのは上に重ねる scrim の仕事。 */
.goods2-panel-bg {
    position: absolute; inset: -10%;
    background: url("/goods/img/otsukare-card.webp?v=20260903") center / cover no-repeat;
    filter: blur(26px) saturate(1.04);
}
.goods2-panel:hover .goods2-panel-photo { transform: scale(1.04); }

/* 文字を読ませるための覆い。**左を濃く、右は写真を見せる。** */
.goods2-panel-scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(100deg,
            rgba(18, 17, 15, 0.90) 0%,
            rgba(18, 17, 15, 0.76) 32%,
            rgba(18, 17, 15, 0.34) 54%,
            rgba(18, 17, 15, 0.06) 78%,
            rgba(18, 17, 15, 0.00) 100%);
}
/* 640〜1023px はパネルがほぼ正方形になる（実測 750x630）。
   contain した写真は高さの 2/3 しか使わないので、**写真を下、文字を上**に
   分けて重なりを減らす。 */
@media (min-width: 640px) and (max-width: 1023px) {
    .goods2-panel-scrim {
        background:
            linear-gradient(180deg,
                rgba(18, 17, 15, 0.93) 0%,
                rgba(18, 17, 15, 0.80) 32%,
                rgba(18, 17, 15, 0.34) 56%,
                rgba(18, 17, 15, 0.04) 100%);
    }
    .goods2-panel-photo { object-position: center bottom; }
    .goods2-panel-text {
        align-items: flex-start !important;
        padding-top: 26px;
    }
}

/* 最小幅では横に逃がせない。**文字を上へ寄せて、下半分を被写体に空ける。** */
@media (max-width: 639px) {
    .goods2-panel-scrim {
        background:
            linear-gradient(180deg,
                rgba(18, 17, 15, 0.93) 0%,
                rgba(18, 17, 15, 0.80) 38%,
                rgba(18, 17, 15, 0.34) 62%,
                rgba(18, 17, 15, 0.06) 100%);
    }
    /* 最小幅は縦位置の書き出しを枠いっぱいに敷く（上に空を残してある）。 */
    .goods2-panel-photo { object-fit: cover; object-position: center top; }
    .goods2-panel-bg { display: none; }
    .goods2-panel-text {
        align-items: flex-start !important;
        padding-top: 28px;
    }
}



/* ---------------------------------------------------------------------
   ヒーロー: GOODS いくぞ！
   （移設元: index.html L1742）
   --------------------------------------------------------------------- */
/* **写真を枠いっぱいに敷く。** Labs & Prototypes のカードと同じ考え方で、
   実物写真そのものを主役にする。以前は右側に 138〜360px のサムネイルを
   置いていたが、hero の 500px に対して小さすぎて何の写真か読めなかった。 */
.goods-panel {
    --gd-title: #FFFFFF;
    --gd-body: rgba(245, 243, 238, 0.92);
    --gd-label: rgba(245, 243, 238, 0.92);
    --gd-label-border: rgba(245, 200, 66, 0.65);
    --gd-accent: #F5C842;
    --gd-chick: #F5C842;
}
.goods-panel-photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* キーホルダーは右寄りに写っている。文字は左に置くので、
       被写体が文字の下に隠れない位置でトリミングする。 */
    object-position: 72% center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.goods-panel:hover .goods-panel-photo { transform: scale(1.05); }

/* 文字を読ませるための覆い。**左を濃く、右は写真を見せる。**
   一様に暗くすると写真が死に、薄すぎると文字が読めない。 */
.goods-panel-scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(100deg,
            rgba(18, 17, 15, 0.92) 0%,
            rgba(18, 17, 15, 0.80) 34%,
            rgba(18, 17, 15, 0.42) 58%,
            rgba(18, 17, 15, 0.10) 80%,
            rgba(18, 17, 15, 0.02) 100%);
}
/* 最小幅では横に逃がせない。**文字を上へ寄せて、下半分を被写体に空ける。**
   縦長の枠に横長の写真を cover で入れると縦は全部見えるので、
   キーホルダーはほぼ中央に来る。文字を中央に置くと真上に重なる（実機で確認）。 */
@media (max-width: 639px) {
    .goods-panel-scrim {
        background:
            linear-gradient(180deg,
                rgba(18, 17, 15, 0.93) 0%,
                rgba(18, 17, 15, 0.80) 38%,
                rgba(18, 17, 15, 0.34) 62%,
                rgba(18, 17, 15, 0.06) 100%);
    }
    .goods-panel-photo { object-position: 72% center; }
    .goods-panel-text {
        align-items: flex-start !important;
        padding-top: 28px;
    }
}



/* ---------------------------------------------------------------------
   ヒーロー: DayGrid
   （移設元: index.html L1866）
   --------------------------------------------------------------------- */
.daygrid-theme {
    --dg-bg-1: rgba(239, 246, 255, 0.45);
    --dg-bg-2: rgba(255, 255, 255, 0.38);
    --dg-bg-3: rgba(219, 234, 254, 0.45);
    --dg-grad: rgba(37, 99, 235, 0.08);
    --dg-glow: #2563eb;
    --dg-pill-bg: #eff6ff;
    --dg-pill-text: #2563eb;
    --dg-pill-border: #bfdbfe;
    --dg-title: #1e3a8a;
    --dg-subtitle: #1d4ed8;
    --dg-accent: #2563eb;
    --dg-stats-box: rgba(255, 255, 255, 0.7);
    --dg-stats-border: rgba(147, 197, 253, 0.8);
    --dg-stats-num: #1e3a8a;
    --dg-stats-label: #2563eb;
    --dg-btn-bg: #fafafa;
    --dg-btn-text: #1d4ed8;
    --dg-btn-border: #bfdbfe;
    --dg-canvas-fill: 37, 99, 235;
}
@media (prefers-color-scheme: dark) {
    .daygrid-theme {
        --dg-bg-1: rgba(8, 14, 44, 0.55);
        --dg-bg-2: rgba(3, 7, 30, 0.48);
        --dg-bg-3: rgba(15, 23, 70, 0.60);
        --dg-grad: rgba(96, 165, 250, 0.2);
        --dg-glow: #60a5fa;
        --dg-pill-bg: #1e3a8a;
        --dg-pill-text: #93c5fd;
        --dg-pill-border: #1d4ed8;
        --dg-title: #ffffff;
        --dg-subtitle: #dbeafe;
        --dg-accent: #60a5fa;
        --dg-stats-box: rgba(30, 58, 138, 0.8);
        --dg-stats-border: rgba(29, 78, 216, 0.8);
        --dg-stats-num: #eff6ff;
        --dg-stats-label: #93c5fd;
        --dg-btn-bg: #1e3a8a;
        --dg-btn-text: #bfdbfe;
        --dg-btn-border: #1d4ed8;
        --dg-canvas-fill: 147, 197, 253;
    }
}
/* 時間帯テーマの夜。OS のダークモードとは独立に切り替わるため、
   上の prefers-color-scheme と同じ値をこちらにも持たせる（certly と同じ方式）。 */
body.theme-night .daygrid-theme {
    --dg-bg-1: rgba(8, 14, 44, 0.55);
    --dg-bg-2: rgba(3, 7, 30, 0.48);
    --dg-bg-3: rgba(15, 23, 70, 0.60);
    --dg-grad: rgba(96, 165, 250, 0.2);
    --dg-glow: #60a5fa;
    --dg-pill-bg: #1e3a8a;
    --dg-pill-text: #93c5fd;
    --dg-pill-border: #1d4ed8;
    --dg-title: #ffffff;
    --dg-subtitle: #dbeafe;
    --dg-accent: #60a5fa;
    --dg-stats-box: rgba(30, 58, 138, 0.8);
    --dg-stats-border: rgba(29, 78, 216, 0.8);
    --dg-stats-num: #eff6ff;
    --dg-stats-label: #93c5fd;
    --dg-btn-bg: #1e3a8a;
    --dg-btn-text: #bfdbfe;
    --dg-btn-border: #1d4ed8;
    --dg-canvas-fill: 147, 197, 253;
}
.daygrid-border-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    padding: 1.5px;
    background: linear-gradient(90deg, var(--dg-glow), transparent, var(--dg-glow), transparent);
    background-size: 400% 400%;
    animation: rainbow-flow var(--soft-flow-duration) linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    pointer-events: none;
    opacity: var(--soft-glow-opacity);
}
@keyframes daygrid-bg-shift {
    0% { background-color: var(--dg-bg-1); background-position: 0% 50%; }
    33% { background-color: var(--dg-bg-2); background-position: 50% 100%; }
    66% { background-color: var(--dg-bg-3); background-position: 100% 50%; }
    100% { background-color: var(--dg-bg-1); background-position: 0% 50%; }
}
.daygrid-geometric-bg {
    background-image: radial-gradient(circle at 30% 40%, var(--dg-grad) 0%, transparent 60%),
                      radial-gradient(circle at 70% 70%, rgba(96,165,250,0.1) 0%, transparent 50%);
    background-size: 200% 200%;
    animation: daygrid-bg-shift 30s ease-in-out infinite;
}



/* ---------------------------------------------------------------------
   ヒーロー: MyDictly（Wordbook）
   （移設元: index.html L2141）
   --------------------------------------------------------------------- */
.wordbook-bg-responsive {
    background: url('st/app/img/wordbook/promo.webp?v=20260903') no-repeat;
    background-position: center bottom -20px;
    background-size: 260px;
}

@media (min-width: 768px) {
    .wordbook-bg-responsive {
        background-position: right 5% center;
        background-size: 400px;
    }
}

.wb-theme {
    /* MyDictly のアイコン・アプリ内テーマと同じデニム／クリーム。
       値の出どころは langbridge/docs/design_prompt.md。 */
    --wb-bg-1: rgba(247, 245, 240, 0.9);
    --wb-bg-2: rgba(253, 252, 248, 0.8);
    --wb-bg-3: rgba(224, 231, 235, 0.9);
    --wb-grad: rgba(74, 101, 116, 0.28);
    --wb-glow: #4a6574;
    --wb-pill-bg: #edf2f4;
    --wb-pill-text: #3b5566;
    --wb-pill-border: #c5d6de;
    --wb-title: #2a3339;
    --wb-subtitle: #5c656b;
    --wb-accent: #4a6574;
    --wb-stats-box: rgba(253, 252, 248, 0.7);
    --wb-stats-border: rgba(208, 213, 216, 0.9);
    --wb-stats-num: #2a3339;
    --wb-stats-label: #5c656b;
    --wb-btn-bg: #fdfcf8;
    --wb-btn-text: #4a6574;
    --wb-btn-border: #d0d5d8;
    --wb-btn-icon: #9ca8ae;
    --wb-canvas-fill: 74, 101, 116;
}

@media (prefers-color-scheme: dark) {
    .wb-theme {
        --wb-bg-1: rgba(14, 20, 24, 0.95);
        --wb-bg-2: rgba(5, 8, 10, 0.9);
        --wb-bg-3: rgba(24, 34, 40, 0.95);
        --wb-grad: rgba(74, 101, 116, 0.4);
        --wb-glow: #6e8fa0;
        --wb-pill-bg: #1e2a32;
        --wb-pill-text: #d8cca8;
        --wb-pill-border: #3f5866;
        --wb-title: #fdfcf8;
        --wb-subtitle: #dce3e6;
        --wb-accent: #d8cca8;
        --wb-stats-box: rgba(30, 42, 50, 0.8);
        --wb-stats-border: rgba(63, 88, 102, 0.8);
        --wb-stats-num: #fdfcf8;
        --wb-stats-label: #c5d6de;
        --wb-btn-bg: #1e2a32;
        --wb-btn-text: #c5d6de;
        --wb-btn-border: #3f5866;
        --wb-btn-icon: rgba(197, 214, 222, 0.5);
        --wb-canvas-fill: 197, 214, 222;
    }
}

/* 時間帯テーマの夜。OS のダークモードとは独立に切り替わるため、
   上の prefers-color-scheme と同じ値をこちらにも持たせる（certly と同じ方式）。 */
body.theme-night .wb-theme {
    --wb-bg-1: rgba(14, 20, 24, 0.95);
    --wb-bg-2: rgba(5, 8, 10, 0.9);
    --wb-bg-3: rgba(24, 34, 40, 0.95);
    --wb-grad: rgba(74, 101, 116, 0.4);
    --wb-glow: #6e8fa0;
    --wb-pill-bg: #1e2a32;
    --wb-pill-text: #d8cca8;
    --wb-pill-border: #3f5866;
    --wb-title: #fdfcf8;
    --wb-subtitle: #dce3e6;
    --wb-accent: #d8cca8;
    --wb-stats-box: rgba(30, 42, 50, 0.8);
    --wb-stats-border: rgba(63, 88, 102, 0.8);
    --wb-stats-num: #fdfcf8;
    --wb-stats-label: #c5d6de;
    --wb-btn-bg: #1e2a32;
    --wb-btn-text: #c5d6de;
    --wb-btn-border: #3f5866;
    --wb-btn-icon: rgba(197, 214, 222, 0.5);
    --wb-canvas-fill: 197, 214, 222;
}

.wordbook-border-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    padding: 1.5px;
    background: linear-gradient(90deg, var(--wb-glow), transparent, var(--wb-glow), transparent);
    background-size: 400% 400%;
    animation: rainbow-flow var(--soft-flow-duration) linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    pointer-events: none;
    opacity: var(--soft-glow-opacity);
}

@keyframes color-shift-animation {
    0% {
        background-color: var(--wb-bg-1);
        background-position: 0% 50%;
    }

    33% {
        background-color: var(--wb-bg-2);
        background-position: 50% 100%;
    }

    66% {
        background-color: var(--wb-bg-3);
        background-position: 100% 50%;
    }

    100% {
        background-color: var(--wb-bg-1);
        background-position: 0% 50%;
    }
}

.wordbook-geometric-bg {
    background-image: radial-gradient(circle at 50% 50%, var(--wb-grad) 0%, transparent 100%);
    background-size: 200% 200%;
    animation: color-shift-animation 15s ease-in-out infinite;
}



/* ---------------------------------------------------------------------
   ヒーロー: Engly
   （移設元: index.html L2482）
   --------------------------------------------------------------------- */
.engly-border-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    padding: 1.5px;
    /* Engly の枠は 7 色の虹（このカード固有の見た目なので元の配色を維持） */
    background: linear-gradient(90deg, #ffb3b3, #ffd9b3, #ffffb3, #b3ffb3, #b3d9ff, #d9b3ff, #e6b3ff, #ffb3b3);
    background-size: 400% 400%;
    animation: rainbow-flow var(--soft-flow-duration) linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    pointer-events: none;
    opacity: 0;
    animation: rainbow-flow var(--soft-flow-duration) linear infinite, fadeInRainbow 2s ease-out 1s forwards;
}

@keyframes fadeInRainbow {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.5;
    }
}