/* Ranking / collection / shared-result — "midnight buy-board".
   The world of the shop counter: flat inks, 1px rules, a yellow price tag.
   Tokens per the 2026-08-20 design decision; game accents stay as chips. */

:root {
    --cvm-bg: #0E0F12;
    --cvm-surface: #16181D;
    --cvm-surface-2: #1D2026;
    --cvm-line: #2A2D34;
    /* ★下部メニューの高さ。クーポンボタンの逃し先を
       82px などの目測りで書くと、端末の下バー分で幅が変わる。 */
    --cvm-dock-h: calc(53px + env(safe-area-inset-bottom));
    --cvm-text: #F2F3F5;
    --cvm-sub: #9AA0AA;
    --cvm-yellow: #FFD84D;
    --cvm-yellow-ink: #1A1400;
    /* ★文字に使う黄色。背景に敷く --cvm-yellow とは別。
       明るい配色では白地に載るので、読める濃さに落とす。 */
    --cvm-accent: #FFD84D;
    --cvm-red: #E5484D;
    --cvm-gold: #D6B24C;
    --cvm-silver: #AEB4BE;
    --cvm-bronze: #B0714A;
}

/* ---------------------------------------------------------- 明るい配色
 * ★会員ページは相場の数字を読む画面なので明るくする（2026-08-28 オーナー指摘）。
 *   開封シミュレーターは演出なので黒のまま。body の cvacct-light で分かれる。
 *   ★画面ごとにクラスを書き足さない。増えるたびに直し忘れる（マイカードで実際に
 *     黒地のまま残り、文字が読めなかった。2026-08-29）。
 *   参考：DMMマイカ（トレカ管理の最大手・会員40万人）も白地で、
 *   主役は総資産額と推移。枚数ではなく金額を前に出している。
 */
.cvacct-light {
    background: #F4F6F9;
    --cvm-bg: #F4F6F9;
    --cvm-surface: #FFFFFF;
    --cvm-surface-2: #EDF0F4;
    --cvm-line: #DFE3EA;
    --cvm-text: #14171C;
    --cvm-sub: #5C646F;
    /* 黄色は白地だと読めない。文字だけ濃い金に落とす。背景の黄色はそのまま。 */
    --cvm-accent: #8A6100;
    --cvm-gold: #A5761F;
    --cvm-silver: #6B7280;
    --cvm-bronze: #8A5433;
}

/* 明るい地に合わせて、影と境界を作り直す。 */
.cvacct-light .cvm-bar {
    background: var(--cvm-surface);
    box-shadow: 0 1px 0 rgba(20, 23, 28, .06);
}
.cvacct-light .cvm-dock {
    background: var(--cvm-surface);
    border-top: 1px solid var(--cvm-line);
}
.cvacct-light .cvm-dock .cvm-dock-item { color: var(--cvm-sub); }
.cvacct-light .cvm-dock .cvm-dock-item.is-on { color: var(--cvm-accent); }


.cvacct-page {
    margin: 0;
    background: var(--cvm-bg);
    color: var(--cvm-text);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
.cvacct-main a, .cvm-bar a { color: inherit; }
.num { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- member bar */
.cvm-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--cvm-bg);
    border-bottom: 1px solid var(--cvm-line);
}
.cvm-bar-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    gap: 10px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 clamp(12px, 3vw, 24px);
    min-height: 46px;
}
.cvacct-page .cvm-back, .cvm-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--cvm-sub);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.cvm-back svg { width: 13px; height: 13px; }
.cvm-back:hover { color: var(--cvm-text); }
.cvm-tabs { display: flex; justify-content: center; }
.cvm-tab {
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 2px solid transparent;
    color: var(--cvm-sub);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.cvm-tab:hover { color: var(--cvm-text); }
.cvm-tab.is-on { color: var(--cvm-text); font-weight: 900; border-bottom-color: var(--cvm-yellow); }
.cvm-me { display: flex; align-items: center; justify-content: flex-end; }
.cvm-me-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 9px 4px 4px;
    border: 1px solid var(--cvm-line);
    border-radius: 4px;
    background: var(--cvm-surface);
    text-decoration: none;
    color: var(--cvm-text);
}
.cvm-me-name { max-width: 108px; overflow: hidden; font-size: 12px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.cvm-me-attempts { color: var(--cvm-accent); font-size: 13px; font-weight: 900; }
.cvm-me-attempts small { color: var(--cvm-sub); font-size: 10px; font-weight: 700; }
.cvacct-page .cvm-login, .cvm-login {
    display: inline-block;
    padding: 8px 13px;
    border-radius: 4px;
    background: var(--cvm-text);
    color: #0E0F12;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    align-self: center;
}

/* Mobile dock: always one tap back to opening. */
.cvm-dock {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    display: grid;
    /* ★項目数に合わせて等分する。repeat(3,1fr) だと 4つ目が
       2行目に落ちていた（ウォッチを追加した時の更新漏れ）。 */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
    background: var(--cvm-bg);
    border-top: 1px solid var(--cvm-line);
}
.cvm-dock .cvm-dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px 4px;
    color: #D7DCE4;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    border-top: 2px solid transparent;
}
.cvm-dock .cvm-dock-item svg { width: 17px; height: 17px; }
/* ★下部メニューは絶対に折り返さない。入らなけるならラベルを短くする。 */
.cvm-dock .cvm-dock-item span { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cvm-dock .cvm-dock-item.is-on { color: var(--cvm-accent); border-top-color: var(--cvm-yellow); }
/* ★開封演出中は出さない。サイトヘッダーを消して全画面にしているのと同じ扱い。 */
body.cvpo-immersive-active .cvm-dock { display: none !important; }
body.cvpo-immersive-active .cvm-dock-space { display: none !important; }
/* ★ドックは全幅で出す。720px以下限定にしていたため、PCでトップを見た時に
   下部メニューが一切出なかった（オーナー報告 2026-08-24）。
   PCは画面幅いっぱいの帯だと重いので、下中央に浮かせる。 */
.cvacct-page .cvacct-main { padding-bottom: 110px; }
.cvm-dock-space { display: block; height: 96px; }
@media (min-width: 721px) {
    .cvm-dock {
        right: auto; bottom: 18px; left: 50%;
        width: min(520px, calc(100vw - 40px));
        padding: 7px 10px;
        border: 1px solid var(--cvm-line);
        border-radius: 14px;
        box-shadow: 0 16px 38px rgba(0, 0, 0, .38);
        transform: translateX(-50%);
    }
    .cvm-dock-space { height: 92px; }
    .cvm-dock .cvm-dock-item { padding: 5px 4px; font-size: 11px; }
    .cvm-dock .cvm-dock-item.is-on { border-top-color: transparent; }
}
@media (max-width: 720px) {
    .cvm-bar-inner { grid-template-columns: auto 1fr; min-height: 42px; }
    .cvm-tabs { display: none; }
}

/*
 * ★上のバーにタブが出ている画面では、下のドックを出さない。
 *
 *   ドックは「スマホで上のタブが隠れるときの代わり」として作ったものだが、
 *   721px以上でも浮かんだままになっていた。マイページでは上と下に
 *   全く同じ「開封する/ランキング/コレクション/マイページ」が二重に並び、
 *   しかもフッターに重なっていた（2026-08-28 オーナー指摘）。
 *
 *   開封シミュレーターなど上のバーが無い画面では、ドックが唯一の
 *   行き先なので残す。だから「バーがあるときだけ」消す。
 */
@media (min-width: 721px) {
    .cvm-bar ~ .cvm-dock,
    .cvm-bar ~ .cvm-dock-space { display: none; }
    .cvacct-page:has(.cvm-bar) .cvacct-main { padding-bottom: 64px; }
}

/* ------------------------------------------------------------- layout */
.cvacct-main {
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px clamp(14px, 4vw, 32px) 64px;
}
.cvacct-head { margin-bottom: 16px; }
.cvacct-head h1 { margin: 0; font-size: clamp(21px, 5vw, 28px); font-weight: 900; letter-spacing: .01em; }
.cvacct-lead { margin: 8px 0 0; max-width: 62ch; color: var(--cvm-sub); font-size: 13px; line-height: 1.8; }
.cvacct-owner { display: flex; gap: 12px; align-items: center; }
.cvacct-avatar { flex: 0 0 auto; border-radius: 4px; object-fit: cover; background: var(--cvm-surface-2); }
.cvacct-avatar.is-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cvm-surface-2);
    border: 1px solid var(--cvm-line);
    font-weight: 900;
    line-height: 1;
}

/* Buttons: flat plates with a pressed bottom edge. No gradients, no pills. */
.cvacct-page .cvm-cta, .cvm-cta {
    display: block;
    width: 100%;
    padding: 15px 18px;
    border: 0;
    border-radius: 4px;
    border-bottom: 3px solid rgba(0,0,0,.45);
    background: var(--cvm-accent, #14B8A6);
    color: #04211D;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .04em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}
.cvm-cta:active { transform: translateY(1px); border-bottom-width: 2px; }
.cvm-cta.is-small { display: inline-block; width: auto; padding: 10px 14px; font-size: 12px; }
.cvacct-page .cvm-ghost, .cvm-ghost {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--cvm-line);
    border-radius: 4px;
    background: transparent;
    color: var(--cvm-sub);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}
.cvm-ghost:hover { color: var(--cvm-text); border-color: var(--cvm-sub); }
.cvm-ghost.is-small { display: inline-block; width: auto; padding: 9px 13px; font-size: 12px; }

/* ------------------------------------------------------------ sections */
.cvm-section { margin: 30px 0 0; }
.cvm-sec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.cvm-sec-head::before { content: ""; width: 4px; height: 19px; background: var(--cvm-yellow); flex: none; }
.cvm-sec-head.is-hall::before { background: var(--cvm-sub); }
.cvm-sec-head h2 { margin: 0; font-size: 17px; font-weight: 900; }
.cvm-sec-side { margin-left: auto; color: var(--cvm-sub); font-size: 11px; font-weight: 700; }

/* ---------------------------------------------------------- today pack */
.cvm-today {
    margin: 14px 0 0;
    padding: 14px;
    border: 1px solid var(--cvm-line);
    border-radius: 2px;
    background: var(--cvm-surface);
}
.cvm-today-label { margin: 0 0 8px; color: var(--cvm-accent); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.cvm-today-row { display: flex; gap: 14px; align-items: center; }
.cvm-today-art { width: 64px; height: 92px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.cvm-today-copy { min-width: 0; }
.cvm-chip {
    display: inline-flex;
    padding: 2px 7px;
    border: 1px solid color-mix(in srgb, var(--cvm-accent, #14B8A6) 55%, transparent);
    border-radius: 2px;
    background: color-mix(in srgb, var(--cvm-accent, #14B8A6) 14%, transparent);
    color: var(--cvm-accent, #14B8A6);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
}
.cvm-today-copy h2 { margin: 6px 0 4px; font-size: 20px; font-weight: 900; line-height: 1.35; }
.cvm-today-until { margin: 0; color: var(--cvm-sub); font-size: 12px; }
.cvm-today-until b { color: var(--cvm-text); font-weight: 700; }

/* -------------------------------------------------------- tag hero */
.cvm-hero {
    margin: 12px 0 0;
    padding: 16px 14px 14px;
    border: 1px solid var(--cvm-line);
    border-radius: 2px;
    background: var(--cvm-surface);
}
.cvm-tag {
    position: relative;
    display: inline-block;
    padding: 10px 16px 9px 26px;
    background: var(--cvm-yellow);
    color: var(--cvm-yellow-ink);
}
.cvm-tag::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cvm-surface);
    box-shadow: inset 0 0 0 1.5px rgba(26,20,0,.55);
}
.cvm-tag-label { display: block; margin-bottom: 3px; font-family: "Yusei Magic", "Noto Sans JP", sans-serif; font-size: 12px; line-height: 1; }
.cvm-tag-amount small { font-size: 24px; font-weight: 700; margin-right: 1px; }
.cvm-tag-amount b { font-family: "Anton", "Noto Sans JP", sans-serif; font-size: 42px; font-weight: 400; line-height: 1; letter-spacing: .01em; }
.cvm-tag-amount.is-mid b { font-size: 34px; }
.cvm-tag-amount.is-none b { font-family: "Noto Sans JP", sans-serif; font-size: 22px; font-weight: 900; }
.cvm-standing { margin: 12px 0 0; color: var(--cvm-sub); font-size: 13px; line-height: 1.7; }
.cvm-standing b { color: var(--cvm-text); font-size: 15px; font-weight: 900; }
.cvm-standing small { display: block; margin-top: 2px; font-size: 11px; color: var(--cvm-sub); }
.cvm-diff { color: var(--cvm-red); font-weight: 900; }
.cvm-plus { color: var(--cvm-accent); font-weight: 900; }
.cvm-gauge { display: flex; gap: 4px; margin: 13px 0 5px; }
.cvm-gauge i { flex: 1; height: 8px; border-radius: 1px; background: var(--cvm-yellow); }
.cvm-gauge i.empty { background: var(--cvm-line); }
.cvm-gauge-note { margin: 0 0 12px; color: var(--cvm-sub); font-size: 11px; }
.cvm-gauge-note b { color: var(--cvm-text); font-weight: 700; }
.cvm-hero .cvm-cta { margin-top: 12px; }
.cvm-hero .cvm-ghost { margin-top: 8px; }
.cvm-hero-actions { display: flex; gap: 8px; margin-top: 12px; }
.cvm-hero-actions .cvm-cta, .cvm-hero-actions .cvm-ghost { flex: 1; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
@media (max-width: 420px) { .cvm-hero-actions .cvm-cta { font-size: 14px; } .cvm-hero-actions .cvm-ghost { font-size: 12px; } }

/* --------------------------------------------------------------- board */
.cvm-board { margin: 0; padding: 0; list-style: none; }
.cvm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding-right: 2px;
    border-bottom: 1px solid var(--cvm-line);
}
.cvm-band { width: 6px; align-self: stretch; flex: none; background: transparent; }
.cvm-row.r1 .cvm-band { background: var(--cvm-gold); }
.cvm-row.r2 .cvm-band { background: var(--cvm-silver); }
.cvm-row.r3 .cvm-band { background: var(--cvm-bronze); }
.cvm-row.me { background: var(--cvm-surface-2); }
.cvm-row.me .cvm-band { background: var(--cvm-yellow); }
.cvm-rank { width: 30px; flex: none; text-align: right; color: var(--cvm-sub); font-size: 15px; font-weight: 900; }
.cvm-row.r1 .cvm-rank { color: var(--cvm-gold); }
.cvm-row.r2 .cvm-rank { color: var(--cvm-silver); }
.cvm-row.r3 .cvm-rank { color: var(--cvm-bronze); }
.cvm-uname { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cvm-uname a { text-decoration: none; }
.cvm-uname a:hover { text-decoration: underline; }
.cvm-uname .cvm-you { display: inline-block; margin-left: 6px; padding: 2px 5px; background: var(--cvm-yellow); color: var(--cvm-yellow-ink); font-size: 9px; font-weight: 900; font-style: normal; vertical-align: 1px; }
.cvm-hall-sub { display: block; color: var(--cvm-sub); font-size: 10px; font-weight: 400; }
.cvm-hit { width: 30px; height: 42px; flex: none; object-fit: cover; border-radius: 2px; }
.cvm-val { flex: none; color: var(--cvm-text); font-size: 16px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.cvm-val small { color: var(--cvm-sub); font-size: 12px; font-weight: 700; margin-right: 1px; }
a.cvm-val:hover { color: var(--cvm-accent); }
.cvm-board.is-hall .cvm-row { min-height: 46px; }
.cvm-board.is-hall .cvm-val { font-size: 14px; }
.cvm-empty { padding: 18px 4px; color: var(--cvm-sub); font-size: 13px; list-style: none; }
.cvm-empty.is-box { display: grid; gap: 12px; justify-items: center; padding: 26px 16px; border: 1px dashed var(--cvm-line); text-align: center; }
.cvm-empty.is-box .cvm-cta { width: auto; padding: 12px 22px; }
.cvm-empty.is-box p { margin: 0; }

/* --------------------------------------------------------- sticky bar */
.cvm-sticky {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 46;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    background: var(--cvm-surface);
    border-top: 1px solid var(--cvm-line);
}
.cvm-sticky[hidden] { display: none; }
.cvm-sticky-left { flex: none; color: var(--cvm-sub); font-size: 12px; }
.cvm-sticky-left b { color: var(--cvm-text); font-weight: 900; font-size: 14px; }
.cvm-sticky .cvm-cta { flex: 1; padding: 12px; font-size: 14px; margin: 0; }
@media (max-width: 720px) { .cvm-sticky { bottom: calc(53px + env(safe-area-inset-bottom)); } }

/* ------------------------------------------------------------ toolbar */
.cvm-toolbar { display: grid; gap: 10px; margin: 18px 0 14px; }
.cvm-tabline { display: flex; border-bottom: 1px solid var(--cvm-line); overflow-x: auto; }
.cvm-tabline a {
    flex: none;
    padding: 10px 13px 8px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--cvm-sub);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.cvm-tabline a.is-on { color: var(--cvm-text); font-weight: 900; border-bottom-color: var(--cvm-yellow); }
.cvm-tabline a b { margin-left: 3px; padding: 1px 5px; background: var(--cvm-yellow); color: var(--cvm-yellow-ink); font-size: 10px; }
.cvm-search { display: flex; gap: 6px; flex-wrap: wrap; }
.cvm-search input, .cvm-search select, .cvm-search button {
    height: 38px;
    padding: 0 11px;
    border: 1px solid var(--cvm-line);
    border-radius: 4px;
    background: var(--cvm-surface);
    color: var(--cvm-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
}
.cvm-search input { flex: 1 1 150px; min-width: 0; }
.cvm-search input::placeholder { color: var(--cvm-sub); }
.cvm-search select option { color: #111; }
.cvm-search button { background: var(--cvm-text); color: #0E0F12; font-weight: 900; cursor: pointer; }
.cvm-count { margin: 0 0 10px; color: var(--cvm-sub); font-size: 12px; }

/* ----------------------------------------------------------- packs */
.cvm-pack { margin: 0 0 6px; border-bottom: 1px solid var(--cvm-line); padding-bottom: 16px; }
.cvm-pack + .cvm-pack { margin-top: 16px; }
.cvm-pack-head { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.cvm-pack-head .cvm-band { width: 4px; align-self: stretch; background: var(--cvm-accent, #14B8A6); }
.cvm-pack-art { width: 44px; height: 62px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.cvm-pack-copy { flex: 1; min-width: 0; }
.cvm-pack-copy h3 { margin: 0 0 6px; font-size: 15px; font-weight: 900; line-height: 1.35; }
.cvm-pack-progress { display: flex; align-items: center; gap: 10px; }
.cvm-track { flex: 1; max-width: 220px; height: 2px; background: var(--cvm-line); position: relative; }
.cvm-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--cvm-yellow); }
.cvm-pack-progress b { font-size: 12px; font-weight: 900; white-space: nowrap; }
.cvm-pack-stats { margin: 5px 0 0; color: var(--cvm-sub); font-size: 11px; }
.cvm-pack-stats b { color: var(--cvm-text); font-weight: 700; }
.cvm-pack-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: none; }
@media (max-width: 720px) {
    .cvm-pack-head { flex-wrap: wrap; }
    .cvm-pack-actions { flex-direction: row; width: 100%; }
    .cvm-pack-actions .cvm-cta.is-small { flex: 1; text-align: center; }
}

/* --------------------------------------------------------------- cards */
.cvm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 12px 8px;
    margin-top: 10px;
}
@media (max-width: 720px) { .cvm-grid { grid-template-columns: repeat(3, 1fr); } }
.cvm-card { display: grid; gap: 3px; min-width: 0; color: inherit; text-decoration: none; }
.cvm-card-face {
    position: relative;
    display: block;
    aspect-ratio: 63 / 88;
    border: 1px solid var(--cvm-line);
    border-radius: 5px;
    overflow: hidden;
    background: var(--cvm-surface-2);
}
.cvm-card-face img { width: 100%; height: 100%; object-fit: cover; }
.cvm-copies {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 1px 5px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 2px;
    background: rgba(0,0,0,.8);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
}
.cvm-new {
    position: absolute;
    left: 0;
    top: 0;
    padding: 3px 6px;
    background: var(--cvm-yellow);
    color: var(--cvm-yellow-ink);
    font-size: 9px;
    font-weight: 900;
    font-style: normal;
    line-height: 1;
}
.cvm-card strong { font-size: 11px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cvm-card small { color: var(--cvm-sub); font-size: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cvm-card em { font-size: 12px; font-weight: 900; font-style: normal; text-align: right; }
.cvm-card em small { color: var(--cvm-sub); font-size: 10px; margin-right: 1px; }
.cvm-card em.hi { color: var(--cvm-accent); }

/* --------------------------------------------------------- foot tools */
.cvm-foot-tools { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; padding-top: 12px; border-top: 1px solid var(--cvm-line); }
.cvm-foot-tools a { color: var(--cvm-sub); font-size: 12px; }


/* ============================================================== arcade
   /ranking/ - "high-score dot": DotGothic16, CRT scanlines, credits as
   lightning bolts, blinking PUSH!, dotted ledger rows. */
.cvr-page {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 0 90px;
    font-family: 'DotGothic16', 'Noto Sans JP', sans-serif;
    position: relative;
}
.cvr-page::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 30;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 1px, transparent 1px 3px);
}
.cvr-ticker-wrap {
    height: 30px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #0A0A10;
    border-bottom: 2px solid var(--cvm-line);
}
.cvr-ticker {
    display: flex;
    gap: 44px;
    padding-left: 100%;
    white-space: nowrap;
    color: var(--cvm-sub);
    font-size: 12px;
    animation: cvr-ticker 24s linear infinite;
}
.cvr-ticker b { color: var(--cvm-accent); font-weight: 400; }
.cvr-ticker .who { color: var(--cvm-text); }
@keyframes cvr-ticker { to { transform: translateX(-100%); } }

.cvr-stage {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 14px;
    padding: 12px;
    background: var(--cvm-surface);
    border: 2px solid var(--cvm-line);
    box-shadow: 0 4px 0 #000;
}
.cvr-stage-art { width: 64px; flex: none; filter: drop-shadow(0 3px 0 rgba(0,0,0,.5)); }
.cvr-stage-info { flex: 1; min-width: 0; }
.cvr-stage-label { margin: 0; color: var(--cvr-accent, #2DD4BF); font-size: 11px; letter-spacing: .15em; }
.cvr-stage-name { margin: 2px 0 0; font-size: 19px; font-weight: 400; line-height: 1.3; }
.cvr-stage-sub { margin: 4px 0 0; color: var(--cvm-sub); font-size: 11px; }
.cvr-stage-sub b { color: var(--cvm-text); font-weight: 400; }

.cvr-score {
    margin: 0 14px;
    padding: 16px 12px 14px;
    background: var(--cvm-surface);
    border: 2px solid var(--cvm-line);
    box-shadow: 0 4px 0 #000;
    text-align: center;
}
.cvr-score-label { margin: 0; color: var(--cvm-sub); font-size: 12px; letter-spacing: .25em; }
.cvr-score-value { margin: 2px 0 0; color: var(--cvm-accent); font-size: 44px; line-height: 1.15; text-shadow: 0 3px 0 rgba(0,0,0,.6); }
.cvr-score-value .yen { font-size: 26px; }
.cvr-pos { margin: 4px 0 0; font-size: 14px; }
.cvr-pos b { color: #4ADE80; font-weight: 400; }
.cvr-goal {
    display: inline-block;
    margin: 8px 0 0;
    padding: 3px 10px;
    border: 1px dashed var(--cvm-red);
    color: var(--cvm-red);
    font-size: 12px;
}
.cvr-goal b { color: var(--cvm-accent); font-weight: 400; }
.cvr-goal.is-top { border-color: #4ADE80; color: #4ADE80; }
.cvr-guest-copy { margin: 10px auto 0; max-width: 34ch; color: var(--cvm-sub); font-size: 13px; line-height: 1.9; }

.cvr-credit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--cvm-sub);
    font-size: 13px;
}
.cvr-zap { display: flex; gap: 4px; }
.cvr-zap i { width: 13px; height: 16px; background: var(--cvm-yellow); clip-path: polygon(60% 0,20% 55%,45% 55%,35% 100%,80% 40%,52% 40%); }
.cvr-zap i.off { background: var(--cvm-line); }
.cvr-zap i.charging { background: var(--cvm-line); animation: cvr-charge 1.2s steps(2) infinite; }
.cvr-zap.is-mini i { width: 10px; height: 13px; }
@keyframes cvr-charge { 50% { background: #5a5a2e; } }
.cvr-next { margin: 4px 0 0; color: var(--cvm-sub); font-size: 11px; }
.cvr-next b { color: var(--cvr-accent, #2DD4BF); font-weight: 400; }

.cvacct-page .cvr-cta, .cvr-cta {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 16px;
    border: 0;
    border-bottom: 4px solid color-mix(in srgb, var(--cvr-accent, #2DD4BF) 45%, #000);
    background: var(--cvr-accent, #2DD4BF);
    color: #03211C;
    font-family: 'DotGothic16', sans-serif;
    font-size: 20px;
    letter-spacing: .12em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 0 #000;
    box-sizing: border-box;
}
.cvr-cta:active { transform: translateY(3px); border-bottom-width: 1px; }
.cvr-cta .push {
    position: absolute;
    right: 10px;
    top: -9px;
    padding: 2px 7px;
    /* black, not red: today's pack accent can itself be red (ONE PIECE) and
       a red badge would vanish against the button. */
    background: #000;
    color: var(--cvm-accent);
    font-size: 10px;
    letter-spacing: .1em;
    box-shadow: 0 2px 0 #000;
    animation: cvr-blink 1s steps(1) infinite;
}
@keyframes cvr-blink { 50% { opacity: 0; } }
.cvr-cta.is-bar { margin: 0; padding: 12px; font-size: 15px; flex: 1; }
.cvacct-page .cvr-ghost, .cvr-ghost {
    display: block;
    margin-top: 10px;
    padding: 11px;
    border: 1px solid var(--cvm-line);
    color: var(--cvm-sub);
    font-size: 13px;
    text-align: center;
    text-decoration: none;
}
.cvr-ghost:hover { color: var(--cvm-text); }

.cvr-hs-head {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin: 28px 14px 0;
    color: var(--cvm-accent);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .2em;
}
.cvr-hs-head::before, .cvr-hs-head::after { content: ""; flex: 1; height: 2px; background: var(--cvm-line); }
.cvr-tabs { display: flex; justify-content: center; gap: 20px; margin: 12px 0 4px; }
.cvr-tabs button {
    background: none;
    border: none;
    color: var(--cvm-sub);
    font-family: 'DotGothic16', sans-serif;
    font-size: 13px;
    padding: 4px 2px;
    cursor: pointer;
}
.cvr-tabs button.active { color: var(--cvm-text); }
.cvr-tabs button.active::before { content: "▶"; margin-right: 4px; color: var(--cvr-accent, #2DD4BF); font-size: 10px; }

.cvr-hs { list-style: none; margin: 8px 14px 0; padding: 0; font-size: 15px; }
.cvr-hs li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 6px;
    border-bottom: 2px dotted var(--cvm-line);
}
.cvr-hs .rk { width: 42px; flex: none; color: var(--cvm-sub); }
.cvr-hs li.r1 .rk { color: var(--cvm-accent); }
.cvr-hs li.r2 .rk { color: #C8CEDC; }
.cvr-hs li.r3 .rk { color: #D89A6A; }
.cvr-hs li.r1 .rk::before { content: "♛"; margin-right: 3px; }
.cvr-hs .nm { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cvr-hs .nm a { color: inherit; text-decoration: none; }
.cvr-hs .nm a:hover { text-decoration: underline; }
.cvr-hs .nm small { display: block; color: var(--cvm-sub); font-size: 10px; }
.cvr-hs .delta { flex: none; width: 36px; font-size: 10px; text-align: right; }
.cvr-hs .delta.up { color: #4ADE80; }
.cvr-hs .delta.dn { color: var(--cvm-red); }
.cvr-hs .delta.fl { color: var(--cvm-sub); }
.cvr-hs .sc2 { flex: none; color: var(--cvm-accent); text-decoration: none; }
.cvr-hs a.sc2:hover { text-decoration: underline; }
.cvr-hs li.me { border: 2px solid #4ADE80; background: #12251C; animation: cvr-me 1.6s steps(1) infinite; }
.cvr-hs li.me .nm { color: #4ADE80; }
.cvr-hs li.me .you {
    position: absolute;
    left: -4px;
    top: -10px;
    padding: 1px 6px;
    background: #4ADE80;
    color: #03211C;
    font-size: 10px;
    box-shadow: 0 2px 0 #000;
}
@keyframes cvr-me { 50% { border-color: #12251C; } }
.cvr-empty { justify-content: center; color: var(--cvm-sub); font-size: 13px; }
.cvr-foot { margin: 26px 0 0; color: var(--cvm-sub); font-size: 11px; letter-spacing: .1em; line-height: 2; text-align: center; }

.cvr-sticky {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: 560px;
    z-index: 46;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
    background: #0A0A10;
    border-top: 2px solid var(--cvm-line);
}
.cvr-sticky[hidden] { display: none; }
@media (max-width: 720px) { .cvr-sticky { bottom: calc(53px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) {
    .cvr-ticker { animation: none; padding-left: 14px; }
    .cvr-cta .push, .cvr-hs li.me, .cvr-zap i.charging { animation: none; }
}

/* ========================================================== book shelf
   /collection/ landing: real collection files. Leather cover with stitching,
   metal corners, ring spine, page block, a clear pocket holding the game's
   card back, and a name plate. */
.cvb-shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px 16px;
}
@media (max-width: 720px) { .cvb-shelf { grid-template-columns: repeat(2, 1fr); } }
.cvb-book { display: grid; gap: 4px; min-width: 0; color: inherit; text-decoration: none; perspective: 700px; }
.cvb-cover {
    position: relative;
    display: block;
    aspect-ratio: 63 / 88;
    border-radius: 3px 7px 7px 3px;
    overflow: hidden;
    /* leather: accent-tinted base + turbulence grain + edge shading */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='.16'/%3E%3C/svg%3E"),
        radial-gradient(140% 100% at 20% 0%, rgba(255,255,255,.10), transparent 55%),
        linear-gradient(150deg, color-mix(in srgb, var(--cvb-accent, #2DD4BF) 26%, #14161c), #101218 70%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.09),
        inset -3px 0 6px rgba(0,0,0,.5),
        0 7px 0 rgba(0,0,0,.85),
        0 12px 22px rgba(0,0,0,.5);
    transition: transform .18s ease;
}
.cvb-book:hover .cvb-cover { transform: translateY(-4px) rotateY(-6deg); }
/* stitching */
.cvb-cover::before {
    content: "";
    position: absolute;
    inset: 6px 6px 6px 17px;
    border: 1px dashed rgba(255,255,255,.28);
    border-radius: 2px 5px 5px 2px;
    pointer-events: none;
}
/* metal corner protectors */
.cvb-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #d9d4c3, #8f8a79 55%, #55523f);
    pointer-events: none;
}
.cvb-corner.tl { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); display: none; }
.cvb-corner.tr { top: 0; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.cvb-corner.br { bottom: 0; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
/* the game's card back sits in a clear pocket on the cover */
.cvb-pocket {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-42%, -50%);
    width: 58%;
    aspect-ratio: 63 / 88;
    border-radius: 4px;
    overflow: hidden;
    background: #0a0c12;
    box-shadow: 0 4px 10px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.25);
}
.cvb-pocket img { width: 100%; height: 100%; object-fit: cover; }
.cvb-pocket::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 42%, rgba(255,255,255,.05) 52%, transparent 60%);
    pointer-events: none;
}
.cvb-pages {
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 5px;
    background: repeating-linear-gradient(0deg, #d8d2c2 0 2px, #a8a294 2px 3px);
    border-radius: 0 3px 3px 0;
    box-shadow: -1px 0 2px rgba(0,0,0,.5);
}
.cvb-spine {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 14px;
    background: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.3) 65%, transparent);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
.cvb-spine i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f4f0e4, #8d8878 60%, #3c3a32);
    box-shadow: 0 1px 2px rgba(0,0,0,.75), inset 0 0 1px rgba(0,0,0,.6);
}
.cvb-plate {
    position: absolute;
    left: 22px;
    right: 12px;
    bottom: 8px;
    display: grid;
    gap: 1px;
    padding: 5px 8px;
    background: linear-gradient(180deg, #1a1c22, #0c0e13);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 4px rgba(0,0,0,.6);
    text-align: center;
}
.cvb-plate b { color: var(--cvm-accent); font-size: 7px; font-weight: 900; letter-spacing: .28em; }
.cvb-plate span { color: #fff; font-size: 11px; font-weight: 900; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cvb-cover .cvm-new { left: auto; right: 6px; top: 26px; z-index: 2; }
.cvb-all-mark {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-42%, -50%);
    color: rgba(255,255,255,.5);
    font-family: 'DotGothic16', sans-serif;
    font-size: 28px;
    letter-spacing: .2em;
}
.cvb-book strong { font-size: 13px; font-weight: 900; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cvb-book small { color: var(--cvm-sub); font-size: 11px; }
.cvb-book em { min-height: 15px; color: var(--cvm-accent); font-size: 12px; font-weight: 900; font-style: normal; }
.cvb-crumbs { margin: 0 0 12px; }
.cvb-crumbs a { color: var(--cvm-sub); font-size: 12px; font-weight: 700; text-decoration: none; }
.cvb-crumbs a:hover { color: var(--cvm-text); }
.cvb-owner-note { display: block; margin-top: 2px; color: var(--cvm-sub); font-size: 12px; font-weight: 400; }

/* ----------------------------------------------- pocket sheet (in-book) */
.cvm-grid.is-pockets {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 10px;
    max-width: 600px;
    margin: 12px auto 0;
    padding: 14px 12px 14px 26px;
    border-radius: 4px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='.12'/%3E%3C/svg%3E"),
        linear-gradient(160deg, #191b22, #101218);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 6px 16px rgba(0,0,0,.4);
    position: relative;
}
.cvm-grid.is-pockets::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 10px;
    bottom: 10px;
    width: 8px;
    background:
        radial-gradient(circle 4px at 4px 12%, #0a0c10 60%, transparent 61%),
        radial-gradient(circle 4px at 4px 38%, #0a0c10 60%, transparent 61%),
        radial-gradient(circle 4px at 4px 62%, #0a0c10 60%, transparent 61%),
        radial-gradient(circle 4px at 4px 88%, #0a0c10 60%, transparent 61%);
}
.cvm-grid.is-pockets .cvm-card-face {
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 4px;
    box-shadow: inset 0 0 8px rgba(0,0,0,.55), 0 2px 5px rgba(0,0,0,.4);
}
.cvm-grid.is-pockets .cvm-card-face::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.20) 43%, rgba(255,255,255,.04) 52%, transparent 60%);
    pointer-events: none;
}
.cvm-card.is-empty .cvm-card-face {
    background:
        linear-gradient(115deg, transparent 32%, rgba(255,255,255,.08) 43%, transparent 55%),
        rgba(255,255,255,.03);
    border-style: dashed;
    border-color: rgba(255,255,255,.13);
    box-shadow: none;
}

/* -------------------------------------------- opening: dive into the book */
.cvb-opening {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(90% 70% at 50% 46%, rgba(20,24,34,.94), rgba(4,5,8,.98));
    opacity: 1;
    transition: opacity .5s ease;
    perspective: 1000px;
}
.cvb-opening.is-done { opacity: 0; pointer-events: none; }
/* The light layer sits ABOVE the book and blends additively, so the burst
   shines through the dark page while the camera dives in. */
.cvb-opening-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; mix-blend-mode: screen; pointer-events: none; }
.cvb-opening-book { z-index: 1; }
.cvb-opening-book {
    position: relative;
    width: min(52vw, 220px);
    aspect-ratio: 63 / 88;
    transform-style: preserve-3d;
}
.cvb-opening.is-playing .cvb-opening-book { animation: cvb-approach 1.65s cubic-bezier(.45,.02,.3,1) forwards; }
@keyframes cvb-approach {
    0% { transform: scale(.62) rotateX(14deg) rotateY(9deg) translateY(26px); }
    38% { transform: scale(1) rotateX(4deg) rotateY(0deg) translateY(0); }
    72% { transform: scale(1.06) rotateX(2deg); }
    100% { transform: scale(3.1) translateY(14%); }
}
.cvb-opening-page {
    position: absolute;
    inset: 0;
    border-radius: 3px 7px 7px 3px;
    background: linear-gradient(160deg, #1c1e26, #12141a);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.cvb-opening-leaf {
    position: absolute;
    inset: 0;
    border-radius: 3px 7px 7px 3px;
    background: linear-gradient(160deg, #262933, #171922);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
    transform-origin: left center;
    backface-visibility: hidden;
}
.cvb-opening.is-playing .cvb-opening-leaf { animation: cvb-leaf .5s cubic-bezier(.5,.05,.5,1) .78s forwards; }
@keyframes cvb-leaf { to { transform: rotateY(-150deg); } }
.cvb-opening-back {
    position: absolute;
    inset: 0;
    border-radius: 3px 7px 7px 3px;
    background: linear-gradient(160deg, #241f18, #171310);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
    transform-origin: left center;
    transform: rotateY(-180deg);
    backface-visibility: hidden;
}
.cvb-opening.is-playing .cvb-opening-back { animation: cvb-cover-back .85s cubic-bezier(.55,.03,.35,1) .25s forwards; }
@keyframes cvb-cover-back { to { transform: rotateY(-334deg); } }
.cvb-opening-cover {
    position: absolute;
    inset: 0;
    border-radius: 3px 7px 7px 3px;
    overflow: hidden;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='.16'/%3E%3C/svg%3E"),
        radial-gradient(140% 100% at 20% 0%, rgba(255,255,255,.10), transparent 55%),
        linear-gradient(150deg, color-mix(in srgb, var(--cvb-accent, #2DD4BF) 26%, #14161c), #101218 70%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 14px 40px rgba(0,0,0,.65);
    transform-origin: left center;
    backface-visibility: hidden;
}
.cvb-opening.is-playing .cvb-opening-cover { animation: cvb-cover .85s cubic-bezier(.55,.03,.35,1) .25s forwards; }
@keyframes cvb-cover { to { transform: rotateY(-154deg); } }
/* light spilling from the gap as the cover lifts */
.cvb-opening-page::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40%;
    background: linear-gradient(90deg, color-mix(in srgb, var(--cvm-yellow) 70%, #fff), transparent);
    opacity: 0;
    filter: blur(6px);
}
.cvb-opening.is-playing .cvb-opening-page::after { animation: cvb-spill 1s ease .35s forwards; }
.cvb-opening.is-burst .cvb-opening-page { background: radial-gradient(80% 60% at 50% 46%, #3a3f52, #14161d 75%); }
@keyframes cvb-spill { 30% { opacity: .9; } 100% { opacity: .25; } }
.cvb-opening-skip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(26px + env(safe-area-inset-bottom));
    margin: 0;
    color: rgba(255,255,255,.4);
    font-size: 11px;
    text-align: center;
}

/* content dives in after the burst */
.cvb-stagger .cvacct-head,
.cvb-stagger .cvm-toolbar,
.cvb-stagger .cvb-crumbs,
.cvb-stagger .cvm-count,
.cvb-stagger .cvm-pack,
.cvb-stagger .cvm-grid:not(.is-pockets) {
    opacity: 0;
    animation: cvb-up .55s ease forwards;
}
.cvb-stagger .cvb-crumbs { animation-delay: .95s; }
.cvb-stagger .cvacct-head { animation-delay: 1s; }
.cvb-stagger .cvm-toolbar { animation-delay: 1.08s; }
.cvb-stagger .cvm-count { animation-delay: 1.12s; }
.cvb-stagger .cvm-grid:not(.is-pockets) { animation-delay: 1.16s; }
.cvb-stagger .cvm-pack { animation-delay: 1.16s; }
.cvb-stagger .cvm-pack:nth-of-type(2) { animation-delay: 1.26s; }
.cvb-stagger .cvm-pack:nth-of-type(3) { animation-delay: 1.34s; }
.cvb-stagger .cvm-pack:nth-of-type(n+4) { animation-delay: 1.4s; }
@keyframes cvb-up {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
    to { opacity: 1; transform: none; }
}

.cvm-preview-note {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    background: var(--cvm-yellow);
    color: var(--cvm-yellow-ink);
    font-size: 12px;
    font-weight: 700;
}
.cvm-preview-note a { color: inherit; font-weight: 900; }


/* 公開する名前の変更。ランキング・公開コレクションに出る名前をここで決める。 */
.cvm-nick {
    max-width: 560px;
    margin: 28px auto 0;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
}

.cvm-nick h2 {
    margin: 0 0 6px;
    font-size: 15px;
}

.cvm-nick-note {
    margin: 0 0 12px;
    font-size: 12px;
    opacity: .72;
    line-height: 1.6;
}

.cvm-nick-row {
    display: flex;
    gap: 8px;
}

.cvm-nick-row input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(0, 0, 0, .3);
    color: inherit;
    font-size: 15px;
}

.cvm-nick-row button {
    flex: 0 0 auto;
    padding: 9px 18px;
    border: 0;
    border-radius: 8px;
    background: #2f8fd8;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.cvm-nick-row button:disabled { opacity: .6; cursor: default; }

.cvm-nick-msg {
    margin: 10px 0 0;
    min-height: 1.2em;
    font-size: 12px;
    opacity: .85;
}

.cvm-nick-warn {
    margin: 0 0 10px;
    padding: 9px 11px;
    border-radius: 8px;
    background: rgba(255, 176, 46, .14);
    border: 1px solid rgba(255, 176, 46, .4);
    font-size: 12px;
    line-height: 1.65;
}


/* ---------------------------------------------------------------- ウォッチ */
/* 気になるカードの一覧。並びは変動幅の大きい順（毎朝の通知と同じ順）。 */
.cvw-main {
    max-width: 760px;
    margin: 0 auto;
    padding: 22px 16px 60px;
}

.cvw-main h1 {
    margin: 0 0 14px;
    font-size: 22px;
}

.cvw-note,
.cvw-empty {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.7;
    opacity: .78;
}

.cvw-login {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 9px;
    background: #2f8fd8;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.cvw-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.cvw-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
}

.cvw-thumb {
    width: 64px;
    aspect-ratio: 5 / 7;
    border-radius: 4px;
    background: rgba(255, 255, 255, .06);
    overflow: hidden;
}

.cvw-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cvw-body { min-width: 0; }

.cvw-name {
    display: block;
    font-size: 15px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.cvw-meta {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    opacity: .65;
}

.cvw-price {
    text-align: right;
    white-space: nowrap;
}

.cvw-price b {
    display: block;
    font-size: 17px;
}

.cvw-diff {
    font-size: 12px;
    opacity: .7;
}

.cvw-diff.is-up { color: #ff8a7a; opacity: 1; }
.cvw-diff.is-down { color: #6fd3a8; opacity: 1; }

.cvw-acts {
    grid-column: 2 / -1;
    display: flex;
    gap: 14px;
    font-size: 12px;
}

.cvw-acts a {
    color: inherit;
    opacity: .8;
    text-decoration: underline;
}

.cvw-acts .cvw-remove {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    opacity: .55;
    font-size: 12px;
    cursor: pointer;
}

@media (max-width: 480px) {
    .cvw-item { grid-template-columns: 52px 1fr; }
    .cvw-thumb { width: 52px; }
    .cvw-price { grid-column: 2; text-align: left; }
    .cvw-price b { display: inline; margin-right: 8px; }
}

.cvw-logins { display: flex; flex-wrap: wrap; gap: 10px; }
.cvw-login.is-line { background: #06c755; }


/* ログインの入口。LINEは緑で先頭に置く。 */
.cvm-cta.is-line, .cvr-cta.is-line, .cvm-login.is-line { background: #06c755; color: #fff; border-color: #06c755; }

/* ------------------------------------------------------------- マイページ */
.cvmy-head { display: flex; gap: 14px; align-items: center; }
.cvmy-head h1 { margin: 0; }
.cvmy-sub { margin: 4px 0 0; color: var(--cvm-sub); font-size: 12px; }
.cvmy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
.cvmy-card {
    display: flex; flex-direction: column; gap: 3px;
    padding: 14px 14px 15px;
    background: var(--cvm-surface);
    border: 1px solid var(--cvm-line);
    border-radius: 12px;
    color: inherit; text-decoration: none;
}
.cvmy-card:hover { border-color: var(--cvm-yellow); }
.cvmy-card-t { color: var(--cvm-sub); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.cvmy-card-v { font-size: 22px; font-weight: 800; line-height: 1.2; }
.cvmy-card-v small { font-size: 12px; font-weight: 700; opacity: .7; }
.cvmy-card-s { color: var(--cvm-sub); font-size: 11px; line-height: 1.5; }
.cvmy-card.is-go { background: var(--cvm-yellow); border-color: var(--cvm-yellow); color: var(--cvm-yellow-ink); }
.cvmy-card.is-go .cvmy-card-t, .cvmy-card.is-go .cvmy-card-s { color: rgba(26,20,0,.72); }
/* ------------------------------------------- マイページ 2つの枠（2026-08-28）
 * ★オーナー様の切り分け：
 *     エンタメ枠    コレクション / ランキング
 *     カード保有勢  値下がり通知 / マイショップ / デッキ
 *   いままではエンタメ枠だけを打ち出していた。
 * ★主役は「持っているカードの合計金額」。枚数より先に金額を出す。
 *   参考: DMMマイカ（会員40万人）も総資産額と推移が主役。
 */
.cvmy-asset {
    display: grid;
    gap: 4px;
    margin-top: 18px;
    padding: 20px 22px 22px;
    background: var(--cvm-surface);
    border: 1px solid var(--cvm-line);
    border-radius: 14px;
}
.cvmy-asset-t { color: var(--cvm-sub); font-size: 12px; font-weight: 700; }
.cvmy-asset-v {
    font-size: clamp(30px, 7vw, 44px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.01em;
}
.cvmy-asset-v small {
    /* ★何の金額かを数字の横に置く。買取と販売で額が違うので、
       どちらを大きく出しているか一目で分かるようにする。 */
    margin-left: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cvm-sub);
    letter-spacing: 0;
}
/* ★値動き。上がった＝緑、下がった＝赤。買取が上がるのは持ち主にとって良いこと。 */
/* ★まだ使っていない機能の枠。数字が入っている枠と見分けがつくよう、
     枠線を破線にして、大きな数字の代わりに「何をすればいいか」を出す。
     薄くしすぎない。使ってほしい機能なので、読めなくなっては困る。 */
.cvmy-card.is-start { border-style: dashed; }
.cvmy-card.is-start .cvmy-card-v { font-size: 17px; color: var(--cvm-accent); }

.cvmy-asset-d {
    justify-self: start;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin: 4px 0 2px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}
.cvmy-asset-d small { font-size: 11px; font-weight: 700; opacity: .75; }
.cvmy-asset-d.is-up { background: rgba(31,157,99,.14); color: #1f7a4d; }
.cvmy-asset-d.is-down { background: rgba(179,56,47,.12); color: #b3382f; }
.cvmy-asset-s { color: var(--cvm-sub); font-size: 12px; }
.cvmy-asset-go {
    justify-self: start;
    margin-top: 12px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--cvm-yellow);
    color: var(--cvm-yellow-ink);
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
}
.cvmy-asset-go::after { content: " →"; }

.cvmy-zone-t {
    margin: 26px 0 10px;
    font-size: 13px;
    font-weight: 800;
    color: var(--cvm-sub);
    letter-spacing: .02em;
}
.cvmy-zone-t + .cvmy-grid { margin-top: 0; }

.cvmy-sec { margin-top: 26px; }
.cvmy-sec h2 { margin: 0 0 6px; font-size: 14px; font-weight: 800; }
.cvmy-note { margin: 0 0 10px; color: var(--cvm-sub); font-size: 12px; line-height: 1.7; }
.cvmy-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.cvmy-switch { display: inline-flex; gap: 9px; align-items: center; font-size: 13px; font-weight: 700; cursor: pointer; }
.cvmy-switch input { width: 18px; height: 18px; accent-color: var(--cvm-yellow); }
.cvmy-link { color: var(--cvm-accent); font-size: 12px; font-weight: 700; }
.cvmy-msg { margin: 8px 0 0; min-height: 1.2em; color: var(--cvm-sub); font-size: 12px; }
.cvmy-links { display: grid; gap: 1px; background: var(--cvm-line); border: 1px solid var(--cvm-line); border-radius: 12px; overflow: hidden; }
.cvmy-links a { padding: 13px 14px; background: var(--cvm-surface); color: inherit; font-size: 13px; font-weight: 600; text-decoration: none; }
.cvmy-links a:hover { color: var(--cvm-accent); }
@media (max-width: 520px) {
    .cvmy-grid { grid-template-columns: 1fr 1fr; }
    .cvmy-card-v { font-size: 19px; }
}

/* ------------------------------------------- マイページ（ログイン前）
 * ★ログイン欄を横いっぱいに伸ばさない。1080px幅のLINEボタンは安っぽく、
 *   押す場所も分かりにくい。欄は固定幅にして、空いた側に
 *   「ログインすると何が起きるか」を置く（2026-08-28）。
 */
/* ★文末の「す。」だけが改行されていた。幅を少し広げ、
   対応しているブラウザでは孤立した1文字を作らせない。 */
.cvm-page .cvacct-lead {
    max-width: 36em;
    text-wrap: pretty;
}

.cvmy-signin {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: clamp(16px, 3vw, 30px);
    align-items: start;
    margin-top: 18px;
}
.cvmy-signin .cvm-hero { margin: 0; border-radius: 12px; }
.cvmy-signin-note {
    margin: 10px 2px 0;
    color: var(--cvm-sub);
    font-size: 11.5px;
    line-height: 1.7;
}

.cvmy-perks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cvmy-perks li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 15px 15px;
    background: var(--cvm-surface);
    border: 1px solid var(--cvm-line);
    border-radius: 12px;
}
.cvmy-perk-t {
    color: var(--cvm-accent);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
}
.cvmy-perk-h { font-size: 14px; font-weight: 800; line-height: 1.5; }
.cvmy-perk-s { color: var(--cvm-sub); font-size: 11.5px; line-height: 1.75; }

@media (max-width: 860px) {
    /* ★スマホでは先にログイン欄。できることは、その下で読ませる。 */
    .cvmy-signin { grid-template-columns: 1fr; }
    .cvmy-perks { grid-template-columns: 1fr; }
}

.cvmy-done { margin: 8px 0 0; padding: 11px 13px; background: rgba(255,216,77,.12); border: 1px solid var(--cvm-yellow); border-radius: 10px; color: var(--cvm-accent); font-size: 13px; font-weight: 700; }
/* ★削除は目立たせない。赤枠で大きく出していたが、一番押してはいけないものを
   一番目立たせるのは逆（オーナー指摘 2026-08-25）。普段はたたんでおく。 */
.cvmy-del { margin-top: 34px; border-top: 1px solid var(--cvm-line); }
.cvmy-del summary { padding: 14px 2px 0; color: var(--cvm-sub); font-size: 12px; cursor: pointer; list-style: none; }
.cvmy-del summary::-webkit-details-marker { display: none; }
.cvmy-del summary::after { content: " ▾"; }
.cvmy-del[open] summary::after { content: " ▴"; }
.cvmy-del summary:hover { color: var(--cvm-text); }
.cvmy-del-body { padding: 12px 2px 0; }
.cvmy-del-btn {
    display: block; margin-top: 12px; padding: 10px 14px;
    background: transparent; border: 1px solid var(--cvm-red); border-radius: 8px;
    color: var(--cvm-red); font-size: 12px; font-weight: 700; cursor: pointer;
}
.cvmy-del-btn:disabled { opacity: .35; cursor: not-allowed; }
.cvmy-del-btn[data-armed="1"] { background: var(--cvm-red); color: #fff; }

/* --------------------------------------------------------- ログインボタン */
/* ★サイト内のログインボタンはこれ1つ。以前は cvm-cta / cvr-cta / cvm-login /
   cvw-login / cvpo-account-login の5通りが混在し、同じ画面に色違い・文言違いの
   ボタンが4つ並んでいた（オーナー指摘 2026-08-24）。 */
.cvauth {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-sizing: border-box;
    width: 100%;
    margin-top: 10px;
    padding: 14px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.cvauth:first-of-type { margin-top: 0; }
.cvauth.is-line { background: #06C755; border-color: #06C755; color: #fff; }
.cvauth.is-google { background: #fff; border-color: #DADCE0; color: #3C4043; }
.cvauth:active { transform: translateY(1px); }
.cvauth::before { width: 18px; height: 18px; flex: 0 0 auto; background: center/contain no-repeat; content: ""; }
.cvauth.is-line::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2.5c-5.24 0-9.5 3.46-9.5 7.72 0 3.82 3.38 7.02 7.94 7.62.31.07.73.2.84.47.1.24.06.62.03.86l-.13.81c-.04.24-.19.94.82.51 1.01-.42 5.45-3.21 7.44-5.5 1.37-1.5 2.06-3.03 2.06-4.77C21.5 5.96 17.24 2.5 12 2.5Z'/%3E%3C/svg%3E"); }
.cvauth.is-google::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59A14.5 14.5 0 0 1 9.77 24c0-1.6.27-3.15.76-4.59l-7.98-6.19A23.94 23.94 0 0 0 0 24c0 3.88.93 7.55 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E"); }