/* 珠の購入・確認ページ（/tama/*）と縁引きの提供割合ページ（/gacha/rates）の縁引きの世界観。
   色・寸法はアプリの縁引き画面（gacha_visual_config.dart / enbiki_backdrop.dart）の値をそのまま使う */
:root {
    --en-ink: #FBF6EE;
    --en-kin: #C8A96A;
    --en-kin-hi: #E8D6A8;
    --en-paper: #2D2926;
    --en-card: #37322D;
    --en-line: #3D3833;
    --en-paper-ink: #EFE7DC;
    --en-paper-sub: #A79C8E;
    --en-matcha: #9DB566;
    --en-kaki: #DD8A5B;
    --en-accent: #CFA669;
    --en-thumb: #332E29;
}

body { background: #150D20; color: var(--en-ink); }

/* 地は負の層に置かない（body の塗りより後ろへ回る）。本文とフッターを 1 に上げて前に出す */
.enSky {
    position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(120% 62% at 50% 6%, rgba(126,87,168,.42) 0%, rgba(63,42,92,.30) 40%, rgba(36,22,52,0) 74%),
        radial-gradient(70% 42% at 50% 46%, rgba(200,169,106,.13) 0%, rgba(200,169,106,0) 70%),
        linear-gradient(180deg, #2B1C40 0%, #241634 42%, #150D20 78%, #0C0810 100%);
}
.enSky::after {
    content: ""; position: absolute; inset: 0; opacity: .06; mix-blend-mode: screen;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
    background-size: 160px 160px;
}

/* 金の粒。粒ごとに速さと明滅をずらす（アプリの enbiki_backdrop.dart と同じ散らし方） */
.enDust { position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%;
    background: var(--en-kin-hi); box-shadow: 0 0 6px 2px rgba(232,214,168,.35);
    opacity: 0; animation: enDrift 12s linear infinite; }
@keyframes enDrift {
    0%   { transform: translateY(14px)  scale(.7); opacity: 0; }
    22%  { opacity: .5; }
    70%  { opacity: .32; }
    100% { transform: translateY(-96px) scale(1);  opacity: 0; }
}
.enDust:nth-child(1)  { left: 8%;  top: 30%; animation-duration: 14s; animation-delay: -3s; }
.enDust:nth-child(2)  { left: 17%; top: 62%; animation-duration: 19s; animation-delay: -9s; width: 3px; height: 3px; }
.enDust:nth-child(3)  { left: 26%; top: 44%; animation-duration: 12s; animation-delay: -1s; }
.enDust:nth-child(4)  { left: 33%; top: 78%; animation-duration: 21s; animation-delay: -14s; }
.enDust:nth-child(5)  { left: 41%; top: 26%; animation-duration: 16s; animation-delay: -6s; width: 3px; height: 3px; }
.enDust:nth-child(6)  { left: 48%; top: 55%; animation-duration: 13s; animation-delay: -11s; }
.enDust:nth-child(7)  { left: 55%; top: 84%; animation-duration: 18s; animation-delay: -4s; }
.enDust:nth-child(8)  { left: 61%; top: 38%; animation-duration: 15s; animation-delay: -8s; width: 3px; height: 3px; }
.enDust:nth-child(9)  { left: 68%; top: 70%; animation-duration: 22s; animation-delay: -16s; }
.enDust:nth-child(10) { left: 74%; top: 22%; animation-duration: 12s; animation-delay: -5s; }
.enDust:nth-child(11) { left: 80%; top: 50%; animation-duration: 17s; animation-delay: -12s; width: 3px; height: 3px; }
.enDust:nth-child(12) { left: 87%; top: 66%; animation-duration: 14s; animation-delay: -2s; }
.enDust:nth-child(13) { left: 93%; top: 35%; animation-duration: 20s; animation-delay: -7s; }
.enDust:nth-child(14) { left: 22%; top: 20%; animation-duration: 16s; animation-delay: -10s; }
@media (prefers-reduced-motion: reduce) { .enDust { display: none; } }

/* 共通ヘッダーの色だけこのページで上書き（背景色は inline style で入るので !important で勝つ） */
#headerBar { background-color: rgba(21,13,32,.85) !important; border-bottom: 1px solid rgba(200,169,106,.28); }
#headerBar .navbar-brand, #headerBar .nav-link { color: var(--en-ink) !important; }
#headerBar .navbar-brand:hover, #headerBar .nav-link:hover { color: var(--en-kin-hi) !important; }
#headerBar .navbar-toggler { border-color: rgba(200,169,106,.45); }

/* フッターの既定色（紺）は紫の地で読めないので、このページだけ寄せる */
.footer, .footer a, .footer .text-muted { color: rgba(251,246,238,.72) !important; }
.footer hr { border-top-color: rgba(200,169,106,.28); }

.enPage { max-width: 640px; position: relative; z-index: 1; }
.footer { position: relative; z-index: 1; }

.enTop { display: flex; justify-content: flex-end; }
.enWallet { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 10px; border-radius: 999px;
    background: rgba(24,14,34,.52); border: 1px solid rgba(200,169,106,.42);
    -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.enWallet img { width: 24px; height: 24px; }
.enWallet .enWallet-num { font-size: 16px; font-weight: 600; letter-spacing: .04em; color: var(--en-ink); }

.enDaiji { text-align: center; padding: 26px 0 8px; }
.enDaiji .enDaiji-ttl { font-family: 'Shippori Mincho', 'Hina Mincho', serif; font-weight: 600; font-size: 40px;
    letter-spacing: .16em; line-height: 1.25; color: var(--en-ink); text-indent: .16em;
    text-shadow: 0 0 22px rgba(232,214,168,.34), 0 2px 4px rgba(20,10,32,.5); }
.enDaiji .enDaiji-rule { width: 104px; height: 1px; margin: 16px auto 12px;
    background: linear-gradient(90deg, rgba(200,169,106,0), rgba(232,214,168,.75), rgba(200,169,106,0)); }
.enDaiji .enDaiji-sub { font-family: 'Shippori Mincho', 'Hina Mincho', serif; font-size: 13px;
    letter-spacing: .34em; text-indent: .34em; color: rgba(232,214,168,.66); }
@media (min-width: 768px) { .enDaiji .enDaiji-ttl { font-size: 52px; } }

.enGoldCard { padding: 1px; border-radius: 20px;
    background: linear-gradient(180deg, #F2E4C0 0%, #C8A96A 34%, #8A6D3A 68%, #DFC993 100%);
    box-shadow: 0 0 20px rgba(200,169,106,.22); }
.enGoldCard > div { border-radius: 19px; padding: 16px 18px; background: rgba(28,17,42,.86); color: var(--en-ink); }
.enGoldCard .enGoldCard-lead { font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.enGoldCard .enGoldCard-note { font-size: 12.5px; line-height: 1.8; margin-top: 6px; color: rgba(251,246,238,.78); }

/* 珠の補充（帖）。アプリのボトムシートと同じ夜の和紙（端末のライト／ダークに追従しない） */
.enSheet { background: var(--en-paper); color: var(--en-paper-ink); border-radius: 28px 28px 20px 20px;
    padding: 10px 0 22px; box-shadow: 0 -8px 40px rgba(12,8,16,.5); }
.enSheet-grip { width: 42px; height: 4px; border-radius: 999px; background: var(--en-line); margin: 0 auto 12px; }
.enSheet-side { padding: 0 18px; }
.enSheet-ttl { font-size: 17px; font-weight: 600; letter-spacing: .06em; }
.enSheet-lead { font-size: 12.5px; letter-spacing: .06em; color: var(--en-paper-sub); margin-top: 2px; }
.enSheet-quiet { font-size: 13px; line-height: 1.85; color: var(--en-paper-sub); }
.enSheet-pause { font-size: 14px; font-weight: 600; color: var(--en-paper-ink); }

.enRow { display: block; margin: 0 0 9px; cursor: pointer; }
.enRow input { position: absolute; opacity: 0; width: 0; height: 0; }
.enRow-face { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 20px;
    background: var(--en-card); border: 1px solid var(--en-line); box-shadow: inset 0 0 0 0 var(--en-matcha);
    transition: border-color .15s, box-shadow .15s; }
.enRow input:checked ~ .enRow-face { border-color: var(--en-matcha); box-shadow: inset 0 0 0 1px var(--en-matcha); }
.enRow input:focus-visible ~ .enRow-face { outline: 2px solid var(--en-kin-hi); outline-offset: 2px; }
.enRow-dot { flex: none; width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--en-line);
    display: flex; align-items: center; justify-content: center; }
.enRow-dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--en-matcha); opacity: 0; }
.enRow input:checked ~ .enRow-face .enRow-dot { border-color: var(--en-matcha); }
.enRow input:checked ~ .enRow-face .enRow-dot::after { opacity: 1; }
.enRow-amount { flex: 1; display: flex; align-items: baseline; }
.enRow-amount .enRow-num { font-size: 17px; font-weight: 600; letter-spacing: .04em; }
.enRow-amount .enRow-unit { font-size: 12px; color: var(--en-paper-sub); margin-left: 2px; }
.enRow-price { font-size: 14px; font-weight: 600; }
.enRow.is-off { cursor: default; }
.enRow.is-off .enRow-face { opacity: .55; }
.enRow.is-off .enRow-price { font-weight: 400; color: var(--en-paper-sub); }

.enGoldBtn { display: block; width: 100%; padding: 1px; border: 0; border-radius: 999px; cursor: pointer;
    background: linear-gradient(180deg, #F2E4C0 0%, #C8A96A 34%, #8A6D3A 68%, #DFC993 100%);
    box-shadow: 0 10px 26px rgba(58,32,92,.55); transition: opacity .15s, box-shadow .15s, transform .1s; }
.enGoldBtn > span { display: block; padding: 15px 20px; border-radius: 999px; text-align: center;
    background: linear-gradient(180deg, #7E57A8 0%, #6B4A93 50%, #3F2A5C 100%);
    color: var(--en-ink); font-size: 17px; font-weight: 600; letter-spacing: .1em; text-indent: .1em; }
.enGoldBtn:hover { transform: translateY(-1px); }
.enGoldBtn:active { transform: translateY(0); }
.enGoldBtn:disabled { cursor: default; transform: none; box-shadow: 0 6px 16px rgba(58,32,92,.3);
    background: linear-gradient(180deg, rgba(200,169,106,.5) 0%, rgba(138,109,58,.45) 100%); }
.enGoldBtn:disabled > span { color: rgba(251,246,238,.55);
    background: linear-gradient(180deg, rgba(126,87,168,.55) 0%, rgba(63,42,92,.6) 100%); }

.enGhostBtn { display: block; width: 100%; padding: 13px 20px; border-radius: 999px; text-align: center; text-decoration: none;
    border: 1px solid rgba(200,169,106,.62); background: rgba(28,17,42,.5); color: rgba(251,246,238,.9);
    font-size: 14px; letter-spacing: .08em; text-indent: .08em; }
.enGhostBtn:hover { color: var(--en-kin-hi); border-color: var(--en-kin-hi); text-decoration: none; }

.enNotes { font-size: 12.5px; line-height: 1.9; color: rgba(251,246,238,.78); }
.enNotes .fw-bold { color: var(--en-kin-hi); }

.enLegal { border-radius: 20px; padding: 18px 18px 14px; background: rgba(28,17,42,.72);
    border: 1px solid rgba(200,169,106,.22); color: rgba(251,246,238,.85); }
.enLegal .enLegal-ttl { font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--en-ink); margin-bottom: 10px; }
.enLegal dl { font-size: 12.5px; line-height: 1.8; margin: 0; }
.enLegal dt { color: var(--en-kin-hi); font-weight: 600; margin-top: 8px; }
.enLegal dd { margin: 0 0 2px; }
.enLegal a, .enLegal-more a { color: var(--en-kin-hi); text-decoration: underline; text-underline-offset: 2px; }
.enLegal-more { font-size: 12.5px; margin-top: 12px; color: rgba(251,246,238,.78); }

/* 確認ページ：申込内容（分量と総額）は金縁のカードに大きく出す */
.enDaiji .enDaiji-ttl.is-small { font-size: 30px; }
.enDaiji .enDaiji-sub.is-plain { font-family: inherit; font-size: 12.5px; letter-spacing: .08em; text-indent: 0; }
@media (min-width: 768px) { .enDaiji .enDaiji-ttl.is-small { font-size: 38px; } }
.enOrder-label { font-size: 12.5px; letter-spacing: .1em; color: rgba(251,246,238,.7); }
.enOrder-amount { font-family: 'Shippori Mincho', 'Hina Mincho', serif; font-size: 34px; font-weight: 600; letter-spacing: .06em; margin-top: 4px; }
.enOrder-amount small { font-size: 16px; letter-spacing: .04em; color: rgba(251,246,238,.8); }
.enOrder-price { font-size: 18px; font-weight: 600; letter-spacing: .04em; margin-top: 6px; color: var(--en-kin-hi); }
.enOrder-price small { font-size: 12.5px; font-weight: 400; color: rgba(251,246,238,.7); }
.enSheet dl { font-size: 12.5px; line-height: 1.8; margin: 0; }
.enSheet dt { color: var(--en-paper-ink); font-weight: 600; margin-top: 10px; }
.enSheet dd { margin: 0; color: var(--en-paper-sub); }
.enSheet dd .fw-bold { color: var(--en-paper-ink); }



/* ══ 縁引きの帖（/gacha/rates）。アプリの品目（EnbikiBookScreen）と同じ三面 ══
   紙は夜の和紙（端末のライト／ダークに追従しない）。三面の札は上端に留まり、絵の上では暗い幕、紙の上では紙の帯 */
.enBook { --en-sticky-top: 64px; --en-tabs-h: 70px;
    position: relative; background: var(--en-paper); color: var(--en-paper-ink);
    border-radius: 28px 28px 20px 20px; box-shadow: 0 -8px 40px rgba(12,8,16,.5); padding-bottom: 26px; }
.enBook-offerings { text-align: center; margin: 0 0 14px; }
.enBook-offerings-ttl { font-size: 12.5px; letter-spacing: .1em; color: rgba(251,246,238,.7); margin-bottom: 8px; }
.enBook-offering { display: inline-block; padding: 8px 18px; margin: 0 3px 6px; border-radius: 999px; text-decoration: none;
    border: 1px solid rgba(200,169,106,.42); background: rgba(24,14,34,.52); color: var(--en-ink); font-size: 14px; letter-spacing: .04em; }
.enBook-offering:hover { color: var(--en-kin-hi); border-color: var(--en-kin-hi); text-decoration: none; }
.enBook-offering.is-on { background: rgba(207,166,105,.16); border-color: rgba(207,166,105,.55); color: var(--en-kin-hi); font-weight: 600; }
.enBook-offerings-period { font-size: 12.5px; color: rgba(251,246,238,.72); margin-top: 2px; }

/* 三面の札は一本の帯に載せる（札ごとに地を持たせると、絵の上で三つの箱に割れて見える） */
.enBook-tabs { position: sticky; top: var(--en-sticky-top); z-index: 5; height: var(--en-tabs-h); box-sizing: border-box;
    padding: 12px 16px 0; margin-bottom: calc(-1 * var(--en-tabs-h)); }
.enBook-tabs::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -22px; z-index: -1; pointer-events: none;
    border-radius: 28px 28px 0 0;
    background: linear-gradient(180deg, rgba(45,41,38,.97) 0%, rgba(45,41,38,.97) 64%, rgba(45,41,38,0) 100%); }
.enBook-seg { display: flex; gap: 2px; height: 46px; box-sizing: border-box; padding: 3px; border-radius: 999px;
    background: #36312C; border: 1px solid var(--en-line); }
.enBook-seg a { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: 999px; text-decoration: none;
    font-size: 13px; letter-spacing: .04em; color: var(--en-paper-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enBook-seg a:hover { color: var(--en-paper-ink); text-decoration: none; }
.enBook-seg a.is-on { background: rgba(45,41,38,.94); color: var(--en-accent); font-weight: 500; }
/* 絵の上に浮いているあいだ（TOP・絵あり・まだ留まっていない）は、うしろをぼかした薄い地と明るい縁 */
.enBook.has-kv[data-face="top"] .enBook-tabs:not(.is-stuck)::before {
    background: linear-gradient(180deg, rgba(8,6,5,.52) 0%, rgba(8,6,5,.2) 64%, rgba(8,6,5,0) 100%); }
.enBook.has-kv[data-face="top"] .enBook-tabs:not(.is-stuck) .enBook-seg { background: rgba(45,41,38,.42); border-color: rgba(241,232,218,.2);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.enBook.has-kv[data-face="top"] .enBook-tabs:not(.is-stuck) .enBook-seg a { color: #F1E8DA; }
.enBook.has-kv[data-face="top"] .enBook-tabs:not(.is-stuck) .enBook-seg a.is-on { color: var(--en-accent); }

.enBook-face, .enBook-kindPanel { display: none; }
.enBook-face.is-on, .enBook-kindPanel.is-on { display: block; animation: enFaceIn .25s cubic-bezier(.22,.61,.36,1) both; }
@keyframes enFaceIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.enBook-face { padding-top: calc(var(--en-tabs-h) + 8px); }
@media (prefers-reduced-motion: reduce) { .enBook-face.is-on, .enBook-kindPanel.is-on { animation: none; } }

/* 帖トップの絵は札の裏まで敷く（アプリの帖と同じく、絵の上に札が浮く）。絵と紙の境目は霞で抜く */
.enBook-kv { position: relative; margin-top: calc(-1 * (var(--en-tabs-h) + 8px)); overflow: hidden;
    border-radius: 28px 28px 0 0; background: #0C0810; }
/* 絵は縦横比のまま幅合わせ・上端寄せ（縦長の絵を横長に切ると顔が落ちる）。長すぎる絵は下だけ霞の側で切る */
.enBook-kv img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: cover; object-position: center top; }
.enBook-kv::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 88px; pointer-events: none;
    background: linear-gradient(180deg, rgba(45,41,38,0) 0%, rgba(45,41,38,.55) 52%, var(--en-paper) 100%); }

.enBook-body { padding: 0 20px; }
.enBook-daiji { font-family: 'Shippori Mincho', 'Hina Mincho', serif; font-size: 22px; font-weight: 600; letter-spacing: .16em; text-indent: .16em;
    line-height: 1.4; text-align: center; color: var(--en-paper-ink); margin: 0; }
.enBook-kv + .enBook-body .enBook-daiji { margin-top: 2px; }
.enBook-sec { margin-top: 26px; }
.enBook-p { font-size: 13px; line-height: 1.85; color: var(--en-paper-ink); margin: 0; }
.enBook-p.is-sub { color: var(--en-paper-sub); }
.enBook-notice { padding: 8px 0; }
.enBook-notice-ttl { font-size: 13px; line-height: 1.85; }
.enBook-notice-note { font-size: 13px; line-height: 1.85; color: var(--en-paper-sub); margin-top: 4px; }

/* TOP の段の桝は列数から先に割り出して固定する（端数の行を中央へ寄せるとき、余った幅を桝に食わせると1体だけの目玉が膨らむ） */
.enBook-tier { padding: 0 20px; margin-top: 26px; }
.enBook-tier.is-ruled { border-top: 1px solid var(--en-line); padding-top: 24px; }
.enBook-tierRow { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.enBook-cell { text-align: center; }
.enBook-tier.is-large .enBook-tierRow { gap: 8px 8px; }
.enBook-tier.is-large .enBook-cell { flex: 0 0 calc((100% - 8px) / 2); }
.enBook-tier.is-medium .enBook-tierRow { gap: 16px 12px; }
.enBook-tier.is-medium .enBook-cell { flex: 0 0 calc((100% - 24px) / 3); }
.enBook-tier.is-small .enBook-tierRow { gap: 16px 8px; }
.enBook-tier.is-small .enBook-cell { flex: 0 0 calc((100% - 16px) / 3); }
/* 立ち絵の枠（44:56）。足元にマットな敷き（灯りも影も足さない） */
.enBook-art { position: relative; margin: 0 auto; width: 116px; height: 148px; }
.enBook-tier.is-medium .enBook-art { width: 79px; height: 101px; }
.enBook-art img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; z-index: 1; }
.enBook-mat { position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%); width: 112%; height: 18px; border-radius: 50%;
    background: #383129; border: 1px solid #4A4239; }
.enBook-tier.is-medium .enBook-mat { height: 12px; }
.enBook-art-fb { position: absolute; left: 14%; right: 14%; bottom: 0; height: 62%; border-radius: 8px; opacity: .12; z-index: 1; }
/* 豆皿（小の段）。皿の見込みが絵の天を決め、皿の縁が地面になる */
.enBook-dish { position: relative; margin: 0 auto; width: 92px; height: 92px; max-width: 100%; border-radius: 50%;
    background: #383129; border: 1px solid #4A4239; box-sizing: border-box; }
.enBook-dish::before { content: ""; position: absolute; left: 11%; top: 11%; right: 11%; bottom: 11%; border-radius: 50%; border: 1px solid #423B32; }
.enBook-dish-win { position: absolute; left: 12%; right: 12%; bottom: 19%; height: 60%; }
.enBook-dish-win img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; }
.enBook-cellName { margin-top: 5px; font-size: 13px; letter-spacing: .04em; line-height: 1.4; color: var(--en-paper-ink);
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.enBook-tier.is-large .enBook-cellName { font-size: 16px; letter-spacing: .1em; }
/* 帯の★は満ちた星だけ。薄めず、色のほう（燻し金）を一段落とす */
.enBook-cellStars { margin-top: 3px; font-size: 10px; letter-spacing: .12em; line-height: 1; color: #8B7860; }
.enBook-tier.is-large .enBook-cellStars { font-size: 11px; }
.enBook-more { text-align: center; margin-top: 28px; padding: 0 20px; }
.enBook-more a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; text-decoration: none;
    font-size: 15px; letter-spacing: .04em; color: var(--en-accent); }
.enBook-more a:hover { color: var(--en-kin-hi); text-decoration: none; }
.enBook-buy { display: block; margin: 22px 20px 0; text-decoration: none; position: relative; overflow: hidden;
    box-shadow: 0 0 22px rgba(200,169,106,.32), 0 0 48px rgba(242,228,192,.12); transition: filter .2s ease; }
.enBook-buy:hover { text-decoration: none; filter: brightness(1.1); }
.enBook-buy .enGoldCard-lead { color: var(--en-kin-hi); text-shadow: 0 0 10px rgba(242,228,192,.45); }
.enBook-buy .enBook-chev { margin-left: 8px; }
.enBook-buy::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 38%, rgba(255,246,220,.28) 48%, rgba(255,246,220,.42) 50%, rgba(255,246,220,.28) 52%, transparent 62%);
    transform: translateX(-100%); animation: enBuySheen 5.5s ease-in-out infinite; }
@keyframes enBuySheen {
    0% { transform: translateX(-100%); }
    45%, 100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) { .enBook-buy::after { animation: none; display: none; } }
.enBook-chev { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); }

.enBook-h { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; font-size: 15px; font-weight: 600; letter-spacing: .1em; color: var(--en-paper-ink); }
.enBook-h small { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--en-paper-sub); }
.enBook-band { display: flex; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--en-line); }
.enBook-band:last-of-type { border-bottom: 0; }
.enBook-band-bar { flex: none; width: 4px; height: 34px; border-radius: 2px; margin-right: 11px; }
.enBook-band-main { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.enBook-band-label { font-size: 15px; font-weight: 600; letter-spacing: .08em; }
.enBook-band-yomi { font-size: 11.5px; color: var(--en-paper-sub); }
.enBook-band-stars { font-size: 11.5px; color: var(--en-kaki); }
.enBook-band-pct { font-size: 16px; font-weight: 700; margin-left: 8px; white-space: nowrap; color: var(--en-paper-ink); }
.enBook-card { background: var(--en-card); border: 1px solid var(--en-line); border-radius: 20px; padding: 15px 16px; }
.enBook-card + .enBook-card { margin-top: 12px; }
.enBook-card-head { display: flex; align-items: baseline; }
.enBook-card-name { flex: 1; font-size: 16px; font-weight: 600; letter-spacing: .1em; }
.enBook-card-price { font-size: 13px; color: var(--en-paper-sub); }
.enBook-card-note { margin-top: 8px; font-size: 13px; line-height: 1.85; color: var(--en-paper-sub); }
.enBook-card-rule { border-top: 1px solid var(--en-line); margin: 11px 0; }
.enBook-guar { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--en-matcha); }
.enBook-legend { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 8px; font-size: 11.5px; color: var(--en-paper-sub); }
.enBook-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.enBook-legal { margin-top: 26px; border-top: 1px solid var(--en-line); padding-top: 13px; font-size: 12px; line-height: 1.8; color: var(--en-paper-sub); }
.enBook-legal-ttl { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--en-paper-ink); margin-bottom: 6px; }
.enBook-legal ul { padding-left: 1.3em; margin: 0 0 8px; }
.enBook-legal-notes { margin-top: 12px; }
.enBook-legal a { color: var(--en-accent); text-decoration: underline; text-underline-offset: 2px; }

/* 景品一覧。面の札は上端に留め、下端は暈して切る（同じ面の続きなので罫は引かない） */
.enBook-kinds { position: sticky; top: calc(var(--en-sticky-top) + var(--en-tabs-h)); z-index: 4; padding: 0 20px 6px; background: var(--en-paper); }
.enBook-kinds::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; pointer-events: none;
    background: linear-gradient(180deg, var(--en-paper) 0%, rgba(45,41,38,0) 100%); }
.enBook-seg2 { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; max-width: 100%; box-sizing: border-box;
    background: var(--en-card); border: 1px solid var(--en-line); border-radius: 999px; }
.enBook-seg2 a { padding: 6px 15px; border-radius: 999px; text-decoration: none; font-size: 13px; color: var(--en-paper-sub); white-space: nowrap; }
.enBook-seg2 a:hover { color: var(--en-paper-ink); text-decoration: none; }
/* 選ばれている札は苔色の地に抹茶の字（上の大タブの金と重ねない） */
.enBook-seg2 a.is-on { background: #414232; color: var(--en-matcha); font-weight: 500; }
@media (max-width: 359px) { .enBook-seg2 a { padding: 6px 10px; } }
.enBook-kindPanel { padding-top: 14px; }
.enBook-list { padding: 0 20px; }
.enBook-item { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--en-line); }
.enBook-item:last-child { border-bottom: 0; }
.enBook-item-art { position: relative; flex: none; width: 28px; height: 28px; border-radius: 6px; overflow: hidden; background: var(--en-thumb); }
.enBook-item-art.is-portrait { width: 28px; height: 36px; }
.enBook-item-art.is-wide { width: 50px; height: 28px; }
.enBook-item-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.enBook-item-art.is-wide img { object-fit: cover; }
.enBook-item-fb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: .14; }
.enBook-item-main { flex: 1; min-width: 0; }
.enBook-item-name { font-size: 14px; font-weight: 600; letter-spacing: .06em; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--en-paper-ink); }
.enBook-item-band { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; letter-spacing: .06em; line-height: 1.3; min-width: 0; }
.enBook-item-band > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enBook-item-bar { flex: none; width: 3px; height: 13px; border-radius: 2px; }
.enBook-item-stars { font-size: 11px; letter-spacing: .1em; color: var(--en-kaki); }
.enBook-empty { padding: 40px 20px; text-align: center; font-size: 13px; color: var(--en-paper-sub); }

.enBook-prize-modal .modal-content {
    background: var(--en-paper);
    color: var(--en-paper-ink);
    border-color: var(--en-line);
}
.enBook-prize-modal .modal-header { border-bottom-color: var(--en-line); }