:root {
    --cvpo-ink: #111827;
    --cvpo-ink-soft: #485569;
    --cvpo-line: #d9e0e8;
    --cvpo-paper: #f7f9fb;
    --cvpo-navy: #06152f;
    --cvpo-blue: #123b73;
    --cvpo-green: #00ab78;
    --cvpo-red: #e73334;
    --cvpo-gold: #ffd465;
}

* { box-sizing: border-box; }

body.cvpo-page {
    margin: 0;
    color: var(--cvpo-ink);
    background: var(--cvpo-paper);
    font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
}

.cvpo-page [hidden] {
    display: none !important;
}

.cvpo-main {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 70px 0 110px;
}

.cvpo-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 72px;
    align-items: end;
    margin-bottom: 38px;
}

.cvpo-eyebrow,
.cvpo-game,
.cvpo-stage-kicker,
.cvpo-result-title p {
    margin: 0;
    color: var(--cvpo-green);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
}

.cvpo-intro h1 {
    margin: 14px 0 18px;
    font-size: clamp(32px, 5vw, 58px);
    line-height: 1.22;
    letter-spacing: -.045em;
}

.cvpo-lead {
    max-width: 760px;
    margin: 0;
    color: var(--cvpo-ink-soft);
    font-size: 15px;
    line-height: 1.9;
}

.cvpo-preview-note {
    padding: 19px 20px;
    border-left: 3px solid var(--cvpo-green);
    background: #eef3f6;
}

.cvpo-preview-note span {
    display: block;
    margin-bottom: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
}

.cvpo-preview-note p {
    margin: 0;
    color: var(--cvpo-ink-soft);
    font-size: 12px;
    line-height: 1.7;
}

.cvpo-console {
    overflow: hidden;
    border: 1px solid #cad3df;
    background: #fff;
    box-shadow: 0 30px 80px rgba(7, 22, 48, .12);
}

.cvpo-console-head {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    align-items: flex-end;
    min-height: 112px;
    padding: 24px 30px;
    border-bottom: 1px solid #dfe5ec;
}.cvpo-console-head h2,
.cvpo-console-head .cvpo-console-name {
    margin: 6px 0 0;
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 700;
    line-height: 1.25;
}.cvpo-console-head h2 span,
.cvpo-console-head .cvpo-console-name span {
    display: inline-block;
    margin-right: 10px;
    color: #fff;
    background: var(--cvpo-red);
    padding: 4px 8px;
    font-size: .5em;
    letter-spacing: .08em;
    vertical-align: .25em;
}

.cvpo-progress {
    width: min(280px, 35%);
    text-align: right;
}

.cvpo-progress-label {
    margin-right: 9px;
    color: #8793a3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
}

.cvpo-progress strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: .1em;
}

.cvpo-progress-track {
    height: 2px;
    margin-top: 10px;
    overflow: hidden;
    background: #dfe5ec;
}

.cvpo-progress-track i {
    display: block;
    width: 8%;
    height: 100%;
    background: var(--cvpo-green);
    transition: width .6s cubic-bezier(.22, 1, .36, 1);
}

.cvpo-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, .75fr) minmax(360px, 1.25fr);
    align-items: center;
    min-height: 610px;
    padding: 54px 7%;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 72% 44%, rgba(231, 51, 52, .22), transparent 30%),
        radial-gradient(circle at 15% 80%, rgba(0, 171, 120, .1), transparent 28%),
        linear-gradient(135deg, #040912 0%, #07172e 48%, #050912 100%);
    isolation: isolate;
}

.cvpo-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .15;
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(90deg, #000, transparent 80%);
}

.cvpo-stage-copy {
    position: relative;
    z-index: 4;
    max-width: 340px;
}.cvpo-stage-copy h3,
.cvpo-stage-copy .cvpo-stage-title {
    margin: 12px 0 13px;
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.035em;
}

.cvpo-stage-copy p:last-child {
    margin: 0;
    color: #aebbd0;
    font-size: 13px;
    line-height: 1.8;
}

.cvpo-pack-area {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 500px;
    perspective: 1100px;
    scroll-margin-top: 90px;
}

.cvpo-pack-shadow {
    position: absolute;
    width: 250px;
    height: 55px;
    bottom: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .62);
    filter: blur(20px);
    transform: scaleX(.8);
    transition: transform .8s, opacity .8s;
}

.cvpo-pack {
    position: relative;
    width: 246px;
    height: 470px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: grab;
    touch-action: pan-y;
    transform-style: preserve-3d;
    transform: rotateX(var(--cvpo-rx, -2deg)) rotateY(var(--cvpo-ry, -7deg)) translateZ(0);
    transition: transform .18s ease-out, opacity .65s, filter .65s;
    appearance: none;
}

.cvpo-pack:active { cursor: grabbing; }
.cvpo-pack:focus-visible { outline: 2px solid #fff; outline-offset: 7px; }

.cvpo-pack-body,
.cvpo-pack-top {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    clip-path: inset(0 0 0 0);
    transform-style: preserve-3d;
}

.cvpo-pack-body {
    clip-path: inset(var(--cvpo-cut-line, 10%) 0 0 0);
    transition: none;
}

.cvpo-pack img {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 550px;
    max-width: none;
    height: 550px;
    object-fit: fill;
    filter: drop-shadow(0 24px 18px rgba(0,0,0,.28));
    mix-blend-mode: screen;
    transform: translate(-50%, -50%);
    user-select: none;
    -webkit-user-drag: none;
}

.cvpo-pack-body::after {
    content: "";
    position: absolute;
    inset: 2% 0 3%;
    border-radius: 45% 55% 40% 60%;
    box-shadow: inset -12px 0 20px rgba(0,0,0,.2), inset 12px 0 18px rgba(255,255,255,.1);
    transform: translateZ(6px);
    pointer-events: none;
}

.cvpo-pack-shine {
    position: absolute;
    inset: 3% 0 4%;
    opacity: .42;
    background: linear-gradient(108deg, transparent 25%, rgba(255,255,255,.72) 43%, transparent 58%);
    background-size: 260% 100%;
    background-position: var(--cvpo-shine, 50%) center;
    mix-blend-mode: screen;
    mask-image: linear-gradient(#000, transparent 92%);
    transform: translateZ(9px);
    pointer-events: none;
}

.cvpo-pack-ridge {
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: 3%;
    height: 9px;
    opacity: .32;
    background: repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 4px);
    transform: translateZ(10px);
}

/* The seal strip occupies the SAME box as the body and differs only by its
   clip. Sizing it separately is what made the two halves drift apart: the body
   followed the pack element while the strip followed --cvpo-pack-height, and
   the two disagreed by 30px on desktop. Sharing one box removes the class of
   bug entirely, so the strip needs no image sizing rules of its own. */
.cvpo-pack-top {
    clip-path: inset(0 0 calc(100% - var(--cvpo-cut-line, 10%)) 0);
    transform-origin: 78% calc(var(--cvpo-cut-line, 10%) / 2);
    transition: transform .92s cubic-bezier(.16,1,.3,1), opacity .48s .36s;
    pointer-events: none;
}

.cvpo-tear-guide {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--cvpo-cut-line, 10%) - 2px);
    height: 18px;
    opacity: 0;
    transform: translateZ(14px);
    transition: opacity .3s;
}

.cvpo-tear-guide b {
    position: absolute;
    left: 50%;
    bottom: 14px;
    color: #fff;
    font: 700 8px/1 ui-monospace, monospace;
    letter-spacing: .18em;
    white-space: nowrap;
    transform: translateX(-50%);
    text-shadow: 0 1px 6px #000;
    pointer-events: none;
}

.cvpo-tear-guide i {
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #fff 15%, #fff 85%, transparent);
    box-shadow: 0 0 9px #fff;
}

.cvpo-pack:hover .cvpo-tear-guide,
.cvpo-pack:focus-visible .cvpo-tear-guide,
.cvpo-pack.is-swiping .cvpo-tear-guide { opacity: .82; }

.cvpo-pack.is-swiping .cvpo-tear-guide i {
    transform-origin: left;
    transform: scaleX(var(--cvpo-swipe, .02));
}

.cvpo-tear-particles {
    position: absolute;
    top: var(--cvpo-cut-line, 10%);
    left: 50%;
    z-index: 8;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.cvpo-tear-particles i {
    position: absolute;
    width: 5px;
    height: 2px;
    opacity: 0;
    background: #fff4d5;
    box-shadow: 0 0 7px rgba(255,230,164,.8);
}

.cvpo-tear-particles i:nth-child(1) { --cvpo-px: -104px; --cvpo-py: -35px; --cvpo-pr: -32deg; }
.cvpo-tear-particles i:nth-child(2) { --cvpo-px: -58px; --cvpo-py: -56px; --cvpo-pr: 24deg; }
.cvpo-tear-particles i:nth-child(3) { --cvpo-px: -18px; --cvpo-py: -43px; --cvpo-pr: 65deg; }
.cvpo-tear-particles i:nth-child(4) { --cvpo-px: 35px; --cvpo-py: -61px; --cvpo-pr: -18deg; }
.cvpo-tear-particles i:nth-child(5) { --cvpo-px: 78px; --cvpo-py: -42px; --cvpo-pr: 42deg; }
.cvpo-tear-particles i:nth-child(6) { --cvpo-px: 112px; --cvpo-py: -24px; --cvpo-pr: 75deg; }

.cvpo-stage.is-tearing .cvpo-pack {
    animation: cvpo-pack-brace .42s ease-out;
}

.cvpo-stage.is-tearing .cvpo-tear-guide {
    opacity: 1;
}

.cvpo-stage.is-tearing .cvpo-tear-guide i {
    transform-origin: left;
    animation: cvpo-tear-line .58s cubic-bezier(.2,.8,.2,1) forwards;
}

.cvpo-stage.is-opened .cvpo-pack-body {
    clip-path: inset(var(--cvpo-cut-line, 10%) 0 0 0);
}

.cvpo-stage.is-opened .cvpo-pack-top {
    transform: translate3d(100px, 35px, 55px) rotateZ(22deg) rotateY(12deg);
    opacity: .88;
}

.cvpo-stage.is-torn .cvpo-pack-top {
    transform: translate3d(148px, 22px, 70px) rotateZ(34deg) rotateY(18deg);
    opacity: 0;
}

.cvpo-stage.is-opened .cvpo-tear-guide { opacity: 0; }
.cvpo-stage.is-opened .cvpo-pack-shadow { transform: scaleX(.65); }

.cvpo-stage.is-drawing .cvpo-pack {
    opacity: .2;
    filter: blur(3px);
    transform: translate3d(175px, 80px, -140px) rotateY(-18deg) scale(.74);
    pointer-events: none;
}

.cvpo-stage.is-drawing .cvpo-pack-shadow { opacity: .25; }

.cvpo-reveal {
    position: relative;
    z-index: 5;
    display: grid;
    place-items: center;
    min-height: 480px;
    scroll-margin-top: 90px;
}

.cvpo-reveal[hidden], .cvpo-result[hidden] { display: none; }

.cvpo-card-stack i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 232px;
    height: 324px;
    border: 7px solid #e7edf5;
    border-radius: 13px;
    background:
        radial-gradient(circle, #2785c8 0 13%, transparent 14%),
        conic-gradient(from 45deg, #082a61, #1767a3, #082a61, #1767a3, #082a61);
    box-shadow: 0 24px 55px rgba(0,0,0,.5);
    transform: translate(-50%, -50%) rotate(var(--cvpo-stack-rot));
}

.cvpo-card-stack i:nth-child(1) { --cvpo-stack-rot: -7deg; }
.cvpo-card-stack i:nth-child(2) { --cvpo-stack-rot: 4deg; }
.cvpo-card-stack i:nth-child(3) { --cvpo-stack-rot: -1deg; }

.cvpo-card {
    position: relative;
    z-index: 4;
    width: 232px;
    margin: 0;
    transform-style: preserve-3d;
    transform: translateY(36px) rotateY(92deg) scale(.92);
    opacity: 0;
    transition: transform .65s cubic-bezier(.16, 1, .3, 1), opacity .2s;
}

.cvpo-card.is-visible {
    opacity: 1;
    transform: translateY(-42px) rotateY(0) scale(1);
}

.cvpo-card img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    border-radius: 11px;
    object-fit: contain;
    box-shadow: 0 28px 60px rgba(0,0,0,.58);
}

.cvpo-card-halo {
    position: absolute;
    inset: -36px;
    z-index: 0;
    border-radius: 50%;
    opacity: 0;
    background: conic-gradient(from 0deg, #ffe08a, #ff4976, #59d7ff, #93ffbc, #ffe08a);
    filter: blur(38px);
    transition: opacity .5s;
}

.cvpo-stage.is-rare .cvpo-card-halo { opacity: .8; }
.cvpo-stage.is-rare .cvpo-card img { box-shadow: 0 0 0 2px #ffe59c, 0 0 55px rgba(255,209,92,.65), 0 30px 70px rgba(0,0,0,.6); }

.cvpo-card-meta {
    position: absolute;
    bottom: 12px;
    left: 50%;
    z-index: 8;
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 290px;
    padding: 12px 15px;
    background: rgba(4, 10, 22, .86);
    border: 1px solid rgba(255,255,255,.17);
    backdrop-filter: blur(14px);
    transform: translateX(-50%);
}

.cvpo-card-meta > span {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 8px;
    color: #071322;
    background: var(--cvpo-gold);
    font-size: 12px;
    font-weight: 900;
}

.cvpo-card-meta div { min-width: 0; }
.cvpo-card-meta strong, .cvpo-card-meta small { display: block; }
.cvpo-card-meta strong { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.cvpo-card-meta small { margin-top: 3px; color: #8fa0ba; font: 10px/1.2 ui-monospace, monospace; }

.cvpo-flash {
    position: absolute;
    inset: -20%;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(circle at 70% 50%, #fff 0, rgba(255,229,146,.7) 8%, transparent 32%);
}

.cvpo-stage.is-flashing .cvpo-flash { animation: cvpo-flash .9s ease-out; }

.cvpo-result {
    position: relative;
    z-index: 8;
    grid-column: 1 / -1;
    width: 100%;
    padding: 8px 0;
}

.cvpo-stage.is-result {
    display: block;
    padding-top: 48px;
    padding-bottom: 48px;
}

.cvpo-stage.is-result .cvpo-stage-copy,
.cvpo-stage.is-result .cvpo-pack-area,
.cvpo-stage.is-result .cvpo-reveal {
    display: none;
}

.cvpo-result-title { margin-bottom: 24px; }.cvpo-result-title h3,
.cvpo-result-title h4,
.cvpo-result-title .cvpo-result-heading { margin: 7px 0 0; font-size: 28px; font-weight: 700; }

.cvpo-result-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.cvpo-result-item {
    min-width: 0;
    margin: 0;
}

.cvpo-result-item .cvpo-card-crop {
    position: relative;
    width: 100%;
    aspect-ratio: 744 / 1039;
    border-radius: 7px;
    background: #0d1830;
    box-shadow: 0 13px 28px rgba(0,0,0,.35);
}

.cvpo-result-item figcaption { padding-top: 9px; }
.cvpo-result-item strong { display: block; overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.cvpo-result-item span { display: block; margin-top: 2px; color: #91a0b8; font: 9px/1.3 ui-monospace, monospace; }

.cvpo-result-item.is-hit .cvpo-card-crop { box-shadow: 0 0 0 2px var(--cvpo-gold), 0 0 35px rgba(255,212,101,.34); }
.cvpo-result-item.is-hit span { color: var(--cvpo-gold); }

.cvpo-result-foot {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: end;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.16);
}

.cvpo-result-foot span, .cvpo-result-foot strong { display: block; }
.cvpo-result-foot span { color: #8fa0ba; font-size: 10px; }
.cvpo-result-foot strong { margin-top: 3px; font-size: 20px; }
.cvpo-result-foot p { margin: 0; color: #8fa0ba; font-size: 11px; }

.cvpo-actionbar {
    display: flex;
    align-items: center;
    min-height: 82px;
    padding: 14px 18px 14px 30px;
    background: #fff;
}

.cvpo-actionbar > p {
    margin: 0 auto 0 0;
    color: #6d7888;
    font-size: 11px;
}

.cvpo-actionbar > p span {
    margin-right: 8px;
    color: var(--cvpo-green);
    font-family: ui-monospace, monospace;
    font-weight: 800;
}

.cvpo-primary,
.cvpo-reset {
    min-height: 50px;
    border: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.cvpo-primary {
    display: flex;
    gap: 42px;
    align-items: center;
    min-width: 235px;
    justify-content: space-between;
    padding: 0 20px 0 24px;
    color: #fff;
    background: var(--cvpo-ink);
    transition: background .2s, transform .2s;
}

.cvpo-primary:hover { background: var(--cvpo-blue); transform: translateY(-1px); }
.cvpo-primary i { color: var(--cvpo-green); font-style: normal; font-size: 20px; }
.cvpo-primary:focus-visible, .cvpo-reset:focus-visible { outline: 3px solid rgba(0,171,120,.35); outline-offset: 3px; }

.cvpo-reset {
    margin-left: 10px;
    padding: 0 20px;
    color: var(--cvpo-ink);
    background: #edf1f5;
}

.cvpo-reset[hidden] { display: none; }

@keyframes cvpo-flash {
    0% { opacity: 0; transform: scale(.8); }
    16% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.15); }
}

@keyframes cvpo-pack-brace {
    0%, 100% { transform: rotateX(var(--cvpo-rx, -2deg)) rotateY(var(--cvpo-ry, -7deg)) translateX(0); }
    35% { transform: rotateX(-1deg) rotateY(-3deg) translateX(-5px); }
    65% { transform: rotateX(1deg) rotateY(2deg) translateX(4px); }
}

@keyframes cvpo-tear-line {
    0% { transform: scaleX(.02); filter: brightness(1); }
    70% { transform: scaleX(1); filter: brightness(2.4); }
    100% { transform: scaleX(1); filter: brightness(1); }
}

.cvpo-stage.is-opened .cvpo-tear-particles i {
    animation: cvpo-particle .72s cubic-bezier(.16,.8,.2,1) forwards;
}

@keyframes cvpo-particle {
    0% { opacity: 0; transform: translate(0,0) rotate(0); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--cvpo-px), var(--cvpo-py)) rotate(var(--cvpo-pr)); }
}

@media (max-width: 820px) {
    .cvpo-main { width: min(100% - 24px, 720px); padding-top: 42px; }
    .cvpo-intro { grid-template-columns: 1fr; gap: 22px; }
    .cvpo-stage { grid-template-columns: 1fr; min-height: 680px; padding: 34px 24px; }
    .cvpo-stage-copy { max-width: 440px; text-align: center; justify-self: center; }
    .cvpo-pack-area, .cvpo-reveal { min-height: 440px; }
    .cvpo-result-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
    .cvpo-main { width: 100%; padding: 34px 0 70px; }
    .cvpo-intro { padding: 0 18px; }
    .cvpo-intro h1 { font-size: 34px; }
    .cvpo-intro h1 br { display: none; }
    .cvpo-console { border-right: 0; border-left: 0; }
    .cvpo-console-head { display: block; min-height: auto; padding: 19px 18px; }
    .cvpo-progress { width: 100%; margin-top: 16px; text-align: left; }
    .cvpo-stage { min-height: 630px; padding: 30px 12px 22px; }.cvpo-stage-copy h3,
.cvpo-stage-copy .cvpo-stage-title { font-size: 28px; }
    .cvpo-stage-copy p:last-child { padding: 0 14px; }
    .cvpo-pack-area { min-height: 420px; }
    .cvpo-pack { width: 214px; height: 410px; }
    .cvpo-pack img { width: 480px; height: 480px; }
    .cvpo-reveal { min-height: 430px; }
    .cvpo-card, .cvpo-card-stack i { width: 210px; }
    .cvpo-card-stack i { height: 300px; }
    .cvpo-card-meta { min-width: min(280px, calc(100vw - 30px)); bottom: 5px; }
    .cvpo-result { padding: 8px 6px; }
    .cvpo-result-grid { gap: 8px; }
    .cvpo-result-foot { display: block; }
    .cvpo-result-foot p { margin-top: 12px; }
    .cvpo-actionbar { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 14px; }
    .cvpo-actionbar > p { order: 2; text-align: center; margin: 0; }
    .cvpo-primary { width: 100%; }
    .cvpo-reset { width: 100%; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* Direct-touch opening sequence */
.cvpo-pack { z-index: 4; }
.cvpo-pack-shadow { z-index: 0; }

.cvpo-direct-badge {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #7a8797;
    font: 700 9px/1 ui-monospace, monospace;
    letter-spacing: .16em;
}

.cvpo-direct-badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cvpo-green);
    box-shadow: 0 0 0 5px rgba(0,171,120,.1);
    animation: cvpo-direct-pulse 1.8s ease-in-out infinite;
}

.cvpo-extract-stack {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 232px;
    height: 324px;
    padding: 0;
    border: 0;
    opacity: 0;
    background: transparent;
    cursor: grab;
    pointer-events: none;
    touch-action: none;
    transform: translate(-50%, -50%) translateY(calc(-34px + var(--cvpo-extract, 0) * 34px)) scale(calc(.97 + var(--cvpo-extract, 0) * .03));
    transform-style: preserve-3d;
    transition: transform .72s cubic-bezier(.16,1,.3,1), opacity .35s;
    appearance: none;
}

.cvpo-extract-stack:focus-visible { outline: 2px solid #fff; outline-offset: 7px; }
.cvpo-extract-stack.is-grabbing { cursor: grabbing; }

.cvpo-stage.is-opened .cvpo-pack { pointer-events: none; }
.cvpo-stage.is-opened .cvpo-extract-stack { opacity: 1; pointer-events: auto; }

.cvpo-stage.is-ready-to-pull .cvpo-pack {
    transform: translateY(calc(var(--cvpo-extract, 0) * 155px)) rotateX(-1deg) rotateY(-3deg) scale(calc(1 - var(--cvpo-extract, 0) * .07));
    opacity: calc(1 - var(--cvpo-extract, 0) * .72);
}

.cvpo-stage.is-ready-to-pull .cvpo-pack-shadow {
    transform: scaleX(calc(.65 + var(--cvpo-extract, 0) * .32)) translateY(calc(var(--cvpo-extract, 0) * 75px));
    opacity: calc(.7 - var(--cvpo-extract, 0) * .55);
}

.cvpo-stage.is-pulling .cvpo-pack,
.cvpo-stage.is-pulling .cvpo-pack-shadow,
.cvpo-stage.is-pulling .cvpo-extract-stack { transition: none; }

.cvpo-stage.is-pull-reset .cvpo-pack,
.cvpo-stage.is-pull-reset .cvpo-pack-shadow,
.cvpo-stage.is-pull-reset .cvpo-extract-stack { transition-duration: .25s; }

.cvpo-stage.is-extracting .cvpo-pack {
    transform: translateY(175px) rotateX(4deg) rotateY(-8deg) scale(.88);
    opacity: 0;
    filter: blur(5px);
    transition: transform .74s cubic-bezier(.16,1,.3,1), opacity .5s .12s, filter .5s;
}

.cvpo-stage.is-extracting .cvpo-extract-stack {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(-2px) scale(1.03);
}

.cvpo-deck-depth,
.cvpo-deck-depth i,
.cvpo-card-back,
.cvpo-card-face {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 14px;
}

.cvpo-deck-depth i {
    border: 5px solid #dfe8f2;
    background: #0b244f;
    box-shadow: 0 20px 42px rgba(0,0,0,.38);
}

.cvpo-deck-depth i:nth-child(1) { transform: translate(6px, 9px) rotate(2.2deg); }
.cvpo-deck-depth i:nth-child(2) { transform: translate(-5px, 5px) rotate(-1.8deg); }
.cvpo-deck-depth i:nth-child(3) { transform: translate(2px, 2px) rotate(.5deg); }

.cvpo-card-back,
.cvpo-card-face-back {
    overflow: hidden;
    border: 7px solid #edf4fb;
    color: #fff;
    background:
        radial-gradient(circle at 50% 50%, rgba(68,211,255,.2) 0 17%, transparent 18%),
        repeating-radial-gradient(circle at 50% 50%, transparent 0 21px, rgba(102,223,255,.13) 22px 23px),
        conic-gradient(from 18deg at 50% 50%, #071b3e, #12629c, #08234e, #009c82, #071b3e);
    box-shadow: inset 0 0 0 2px rgba(8,22,49,.92), 0 25px 60px rgba(0,0,0,.48);
}

.cvpo-card-back::before,
.cvpo-card-face-back::before {
    content: "";
    position: absolute;
    inset: 11px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 8px;
    background: linear-gradient(125deg, transparent 25%, rgba(255,255,255,.13) 43%, transparent 58%);
    background-size: 250% 100%;
    animation: cvpo-back-shine 3.2s ease-in-out infinite;
}

.cvpo-card-back b,
.cvpo-card-face-back b {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 50%;
    font: 900 29px/1 system-ui, sans-serif;
    letter-spacing: -.08em;
    text-shadow: 0 3px 12px rgba(0,0,0,.4);
    transform: translate(-50%, -56%);
}

.cvpo-card-back small,
.cvpo-card-face-back small {
    position: absolute;
    left: 50%;
    bottom: 48px;
    z-index: 2;
    font: 800 9px/1 ui-monospace, monospace;
    letter-spacing: .28em;
    white-space: nowrap;
    transform: translateX(-50%);
}

.cvpo-back-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 142px;
    height: 52px;
    border: 1px solid rgba(255,255,255,.44);
    border-radius: 50%;
    transform: translate(-50%, -60%) rotate(-24deg);
}

.cvpo-extract-cue {
    position: absolute;
    top: -55px;
    left: 50%;
    z-index: 8;
    display: grid;
    justify-items: center;
    gap: 7px;
    width: 150px;
    opacity: 0;
    color: #fff;
    transform: translateX(-50%);
    transition: opacity .3s .28s;
    pointer-events: none;
}

.cvpo-extract-cue i {
    width: 1px;
    height: 34px;
    background: linear-gradient(transparent, #fff);
    box-shadow: 0 0 9px rgba(255,255,255,.75);
    animation: cvpo-pull-arrow 1.25s ease-in-out infinite;
}

.cvpo-extract-cue b {
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(3,12,27,.7);
    backdrop-filter: blur(8px);
    font-size: 10px;
    letter-spacing: .08em;
    white-space: nowrap;
}

.cvpo-stage.is-ready-to-pull .cvpo-extract-cue { opacity: 1; }
.cvpo-stage.is-pulling .cvpo-extract-cue,
.cvpo-stage.is-extracting .cvpo-extract-cue { opacity: 0; }

.cvpo-reveal {
    perspective: 1200px;
}

.cvpo-card-deck {
    position: relative;
    z-index: 5;
    width: 232px;
    height: 324px;
    transform: translateY(-46px);
    transform-style: preserve-3d;
}

.cvpo-card-stack {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cvpo-card-stack i {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    border: 6px solid #dfe8f2;
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 50%, rgba(68,211,255,.18) 0 17%, transparent 18%),
        conic-gradient(from 20deg, #071b3e, #145f97, #08234e, #008d79, #071b3e);
    box-shadow: 0 24px 55px rgba(0,0,0,.5);
    transform: translate(var(--cvpo-stack-x), var(--cvpo-stack-y)) rotate(var(--cvpo-stack-rot));
    transition: transform .45s cubic-bezier(.16,1,.3,1);
}

.cvpo-card-stack i:nth-child(1) { --cvpo-stack-x: -7px; --cvpo-stack-y: 9px; --cvpo-stack-rot: -2.3deg; }
.cvpo-card-stack i:nth-child(2) { --cvpo-stack-x: 7px; --cvpo-stack-y: 7px; --cvpo-stack-rot: 2.1deg; }
.cvpo-card-stack i:nth-child(3) { --cvpo-stack-x: 1px; --cvpo-stack-y: 4px; --cvpo-stack-rot: .3deg; }

.cvpo-card {
    position: absolute;
    inset: 0;
    z-index: 6;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 1;
    background: transparent;
    cursor: grab;
    touch-action: pan-y;
    transform: translate3d(var(--cvpo-card-x, 0), var(--cvpo-card-y, 0), 18px) rotateZ(var(--cvpo-card-r, 0deg)) scale(1);
    transform-style: preserve-3d;
    transition: transform .34s cubic-bezier(.16,1,.3,1), opacity .24s, filter .24s;
    appearance: none;
}

.cvpo-card:active { cursor: grabbing; }
.cvpo-card:focus-visible { outline: 2px solid #fff; outline-offset: 7px; }
.cvpo-card.is-dragging { transition: none; }
.cvpo-card.is-snapping { transition-duration: .25s; }
.cvpo-card.is-discarding { opacity: 0; filter: blur(2px); transition: transform .33s cubic-bezier(.3,.1,.7,.9), opacity .25s .06s, filter .25s; }
.cvpo-card.is-dealing { opacity: 0; transform: translate3d(var(--cvpo-deal-x, 0), 18px, 0) scale(.94); transition: none; }
.cvpo-card.is-settling { transform: translate3d(var(--cvpo-card-x, 0), var(--cvpo-card-y, 0), 18px) rotateZ(var(--cvpo-card-r, 0deg)) scale(.97); }

.cvpo-card-flipper {
    position: absolute;
    inset: 0;
    display: block;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    transition: transform .72s cubic-bezier(.16,1,.3,1), filter .35s;
}

.cvpo-card.is-face-up .cvpo-card-flipper { transform: rotateY(180deg); }

.cvpo-card-face {
    overflow: visible;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.cvpo-card-face-front {
    background: #0c1830;
    transform: rotateY(180deg);
}

.cvpo-card-face-front .cvpo-card-crop {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 11px;
    background: #0c1830;
    box-shadow: 0 28px 60px rgba(0,0,0,.58);
}

/* Frame that clips a card image to the card itself.
   Card files arrive at eight pixel sizes across three aspect ratios, and some
   are a portrait card sitting inside a wide scan canvas — `object-fit` can
   match an aspect ratio but cannot know where the card sits inside the file.
   The server measures that rectangle; this frame is what it gets mapped onto,
   so any source, padded or not, ends up filling the same card shape. */
.cvpo-card-crop {
    display: block;
    overflow: hidden;
}

.cvpo-card-crop img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    background: inherit;
}

/* Enlarge and offset until the measured rectangle lines up with the frame. The
   rectangle is squared to the card aspect before it leaves the server, so this
   never stretches the artwork. */
.cvpo-card-crop img.is-cropped {
    position: absolute;
    top: calc(-100% * var(--cvpo-crop-y) / var(--cvpo-crop-h));
    left: calc(-100% * var(--cvpo-crop-x) / var(--cvpo-crop-w));
    width: calc(100% / var(--cvpo-crop-w));
    height: calc(100% / var(--cvpo-crop-h));
    max-width: none;
    border-radius: 0;
    object-fit: fill;
}

.cvpo-card-halo {
    inset: -32px;
}

.cvpo-card-cue {
    position: absolute;
    right: 0;
    bottom: -38px;
    left: 0;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    color: #c6d2e4;
    font-size: 10px;
    letter-spacing: .06em;
    pointer-events: none;
}

.cvpo-card-cue i {
    position: relative;
    width: 52px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: cvpo-swipe-line 1.5s ease-in-out infinite;
}

.cvpo-card-cue i::before,
.cvpo-card-cue i::after {
    content: "";
    position: absolute;
    top: -3px;
    width: 7px;
    height: 7px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}

.cvpo-card-cue i::before { left: 0; transform: rotate(-135deg); }
.cvpo-card-cue i::after { right: 0; transform: rotate(45deg); }

.cvpo-card.is-dragging ~ .cvpo-card-cue { opacity: .25; }

.cvpo-deck-count {
    position: absolute;
    top: -30px;
    right: 0;
    color: #8ea1bb;
    font: 700 9px/1 ui-monospace, monospace;
    letter-spacing: .14em;
}

.cvpo-card-meta {
    opacity: 0;
    transform: translate(-50%, 10px);
    transition: opacity .3s, transform .4s cubic-bezier(.16,1,.3,1);
}

.cvpo-stage.has-card .cvpo-card-meta {
    opacity: 1;
    transform: translate(-50%, 0);
}

.cvpo-stage.is-cards .cvpo-card-stack i:nth-child(1) { animation: cvpo-deck-breathe 3.2s ease-in-out infinite; }

@keyframes cvpo-direct-pulse {
    0%, 100% { opacity: .55; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes cvpo-back-shine {
    0%, 35% { background-position: 130% 0; }
    75%, 100% { background-position: -70% 0; }
}

@keyframes cvpo-pull-arrow {
    0%, 100% { opacity: .35; transform: translateY(8px) scaleY(.75); }
    50% { opacity: 1; transform: translateY(-5px) scaleY(1); }
}

@keyframes cvpo-swipe-line {
    0%, 100% { opacity: .38; transform: scaleX(.75); }
    50% { opacity: 1; transform: scaleX(1); }
}

@keyframes cvpo-deck-breathe {
    0%, 100% { transform: translate(var(--cvpo-stack-x), var(--cvpo-stack-y)) rotate(var(--cvpo-stack-rot)); }
    50% { transform: translate(var(--cvpo-stack-x), calc(var(--cvpo-stack-y) + 2px)) rotate(var(--cvpo-stack-rot)); }
}

@media (max-width: 560px) {
    .cvpo-extract-stack,
    .cvpo-card-deck { width: 210px; height: 293px; }
    .cvpo-card-deck { transform: translateY(-39px); }
    .cvpo-card-stack i { width: auto; height: auto; }
    .cvpo-card-back b,
    .cvpo-card-face-back b { width: 78px; height: 78px; font-size: 26px; }
    .cvpo-card-back small,
    .cvpo-card-face-back small { bottom: 42px; }
    .cvpo-back-orbit { width: 128px; }
    .cvpo-extract-cue { top: -51px; }
    .cvpo-card-cue { bottom: -32px; font-size: 9px; }
    .cvpo-deck-count { top: -26px; }
    .cvpo-direct-badge { justify-content: center; order: 1; }
    .cvpo-actionbar > p { order: 2; }
    .cvpo-reset { order: 0; }
}

/* Cinematic game layer */
.cvpo-vfx {
    position: absolute;
    inset: 0;
    z-index: 18;
    width: 100%;
    height: 100%;
    contain: paint;
    pointer-events: none;
}

.cvpo-vignette {
    position: absolute;
    inset: 0;
    z-index: 16;
    opacity: .48;
    background:
        radial-gradient(circle at 50% 48%, transparent 30%, rgba(0,6,18,.14) 58%, rgba(0,3,10,.62) 100%),
        linear-gradient(90deg, rgba(0,0,0,.18), transparent 18%, transparent 82%, rgba(0,0,0,.18));
    pointer-events: none;
    transition: opacity .7s, background .9s;
}

.cvpo-scene-hud {
    position: absolute;
    top: 19px;
    right: 22px;
    left: 22px;
    z-index: 30;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.cvpo-scene-status {
    display: flex;
    gap: 9px;
    align-items: center;
    color: rgba(220,234,249,.62);
    font: 700 9px/1 ui-monospace, monospace;
    letter-spacing: .17em;
}

.cvpo-scene-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cvpo-green);
    box-shadow: 0 0 10px rgba(0,255,183,.8);
}

.cvpo-sound-toggle {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    color: rgba(225,235,248,.68);
    background: rgba(3,11,25,.48);
    backdrop-filter: blur(12px);
    cursor: pointer;
    pointer-events: auto;
    font: 700 8px/1 ui-monospace, monospace;
    letter-spacing: .12em;
}

.cvpo-sound-toggle > i {
    display: flex;
    gap: 2px;
    align-items: end;
    width: 11px;
    height: 10px;
}

.cvpo-sound-toggle > i b {
    display: block;
    width: 2px;
    border-radius: 2px;
    background: var(--cvpo-green);
    animation: cvpo-sound-bar .8s ease-in-out infinite alternate;
}

.cvpo-sound-toggle > i b:nth-child(1) { height: 4px; }
.cvpo-sound-toggle > i b:nth-child(2) { height: 9px; animation-delay: -.35s; }
.cvpo-sound-toggle > i b:nth-child(3) { height: 6px; animation-delay: -.18s; }
.cvpo-sound-toggle.is-muted > i b { height: 2px; animation: none; background: #778295; }

.cvpo-stage.is-playing:not(.is-result) {
    display: block;
    min-height: 680px;
    padding: 0;
    background:
        radial-gradient(circle at 50% 46%, rgba(36,109,171,.22), transparent 27%),
        radial-gradient(circle at 50% 48%, rgba(231,51,52,.14), transparent 44%),
        linear-gradient(145deg, #020710 0%, #07172d 48%, #030710 100%);
}

.cvpo-stage.is-playing:not(.is-result)::before {
    opacity: .1;
    background-size: 54px 54px;
    mask-image: radial-gradient(circle at 50% 50%, #000, transparent 76%);
}

.cvpo-stage.is-playing .cvpo-stage-copy {
    position: absolute;
    top: 63px;
    left: 34px;
    z-index: 22;
    width: 250px;
    opacity: .78;
    transform: translateZ(0);
    transition: opacity .5s, transform .7s cubic-bezier(.16,1,.3,1);
}.cvpo-stage.is-playing .cvpo-stage-copy h3,
.cvpo-stage.is-playing .cvpo-stage-copy .cvpo-stage-title {
    margin: 7px 0 0;
    font-size: 18px;
    letter-spacing: -.02em;
}

.cvpo-stage.is-playing .cvpo-stage-copy p:last-child { display: none; }

.cvpo-stage.is-playing .cvpo-pack-area,
.cvpo-stage.is-playing .cvpo-reveal {
    width: 100%;
    min-height: 680px;
}

.cvpo-stage.is-playing .cvpo-card-meta { bottom: 118px; }

.cvpo-stage.is-playing .cvpo-pack-area::before,
.cvpo-stage.is-playing .cvpo-reveal::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    opacity: .42;
    background: radial-gradient(circle, rgba(77,181,255,.22), rgba(0,171,120,.06) 38%, transparent 68%);
    transform: translate(-50%, -50%);
    animation: cvpo-scene-breathe 3.8s ease-in-out infinite;
}

.cvpo-stage.is-playing .cvpo-pack-shadow { bottom: 70px; }

.cvpo-pack::after {
    content: "";
    position: absolute;
    top: var(--cvpo-cut-line, 10%);
    right: -5%;
    left: -5%;
    z-index: 12;
    height: 2px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, #fff 14%, #fff9c7 50%, #fff 86%, transparent);
    box-shadow: 0 0 7px #fff, 0 0 20px rgba(255,219,122,.9), 0 0 40px rgba(255,83,96,.5);
    pointer-events: none;
}

.cvpo-stage.is-tearing .cvpo-pack::after { animation: cvpo-seam-burst .62s cubic-bezier(.16,1,.3,1) both; }
.cvpo-stage.is-charging .cvpo-pack { filter: brightness(1.2) saturate(1.12); transform: scale(1.018); }

.cvpo-stage.is-opened .cvpo-pack-top {
    filter: drop-shadow(0 12px 13px rgba(0,0,0,.48)) drop-shadow(0 0 10px rgba(255,115,91,.28));
}

.cvpo-stage.is-torn .cvpo-pack-top {
    filter: blur(1.5px) drop-shadow(0 14px 16px rgba(0,0,0,.5));
}

.cvpo-stage.is-pull-impact .cvpo-vignette,
.cvpo-stage.is-flip-impact .cvpo-vignette { opacity: .25; }

.cvpo-stage.is-card-impact .cvpo-stage-copy { opacity: .32; transform: translateX(-8px); }

.cvpo-card-deck::before,
.cvpo-card-deck::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.cvpo-card-deck::before {
    width: 150%;
    aspect-ratio: 1;
    border: 1px solid rgba(142,231,255,.65);
    box-shadow: 0 0 30px rgba(78,194,255,.25), inset 0 0 35px rgba(86,218,255,.12);
    transform: translate(-50%, -50%) scale(.4);
}

.cvpo-card-deck::after {
    width: 190%;
    aspect-ratio: 1;
    background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.22) 0 1deg, transparent 1deg 12deg);
    mask-image: radial-gradient(circle, transparent 0 29%, #000 31% 54%, transparent 70%);
    transform: translate(-50%, -50%) scale(.55) rotate(0deg);
}

.cvpo-stage.is-card-impact .cvpo-card-deck::before { animation: cvpo-reveal-ring .82s cubic-bezier(.16,1,.3,1); }
.cvpo-stage.is-card-impact .cvpo-card-deck::after { animation: cvpo-reveal-rays .9s cubic-bezier(.16,1,.3,1); }

.cvpo-stage.is-card-dealing .cvpo-card-stack i:nth-child(1) { transform: translate(-13px, 12px) rotate(-4deg); }
.cvpo-stage.is-card-dealing .cvpo-card-stack i:nth-child(2) { transform: translate(13px, 10px) rotate(4deg); }

.cvpo-card-flipper {
    transition: transform .78s cubic-bezier(.12,.86,.18,1);
}

.cvpo-card.is-face-up .cvpo-card-flipper {
    transform: rotateY(180deg) translateZ(10px) scale(1.014);
}

.cvpo-card-face-back { opacity: 1; transition: opacity .04s .36s; }
.cvpo-card-face-front { opacity: 0; transition: opacity .04s .36s; }
.cvpo-card.is-face-up .cvpo-card-face-back { opacity: 0; }
.cvpo-card.is-face-up .cvpo-card-face-front { opacity: 1; }

.cvpo-card-foil {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    border-radius: 11px;
    opacity: 0;
    background:
        radial-gradient(circle at var(--cvpo-foil-x, 50%) var(--cvpo-foil-y, 45%), rgba(255,255,255,.7), transparent 19%),
        linear-gradient(118deg, transparent 20%, rgba(103,239,255,.35) 34%, rgba(255,121,190,.3) 44%, rgba(255,235,134,.4) 54%, transparent 70%);
    background-size: 100% 100%, 220% 100%;
    background-position: center, 100% 0;
    mix-blend-mode: screen;
    pointer-events: none;
    transition: opacity .45s;
}

.cvpo-card-halo { filter: blur(24px); }

.cvpo-card.is-face-up .cvpo-card-foil { opacity: .1; }
.cvpo-stage.is-rare .cvpo-card-foil {
    opacity: .74;
    animation: cvpo-foil-sweep 2.2s ease-in-out infinite;
}

.cvpo-stage.is-rare .cvpo-card:not(.is-dragging) { animation: cvpo-rare-float 2.8s ease-in-out infinite; }

.cvpo-stage.is-payoff-hit,
.cvpo-stage.is-payoff-after {
    background:
        radial-gradient(circle at 50% 48%, rgba(255,204,86,.28), transparent 24%),
        radial-gradient(circle at 50% 50%, rgba(178,74,255,.14), transparent 47%),
        linear-gradient(145deg, #030711 0%, #10132b 50%, #03070f 100%);
}

.cvpo-stage.is-payoff-after .cvpo-vignette {
    opacity: .32;
    background: radial-gradient(circle at 50% 48%, transparent 22%, rgba(46,18,63,.18) 52%, rgba(0,2,8,.7) 100%);
}

.cvpo-stage.is-flip-impact .cvpo-flash {
    background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.72), rgba(112,219,255,.28) 12%, transparent 38%);
    animation: cvpo-flip-flash .52s ease-out;
}

.cvpo-stage.is-complete-impact .cvpo-result { animation: cvpo-result-land .72s cubic-bezier(.16,1,.3,1); }

.cvpo-stage.is-lite-vfx .cvpo-pack-area::before,
.cvpo-stage.is-lite-vfx .cvpo-reveal::before,
.cvpo-stage.is-lite-vfx .cvpo-card-deck::after { animation: none; }
.cvpo-stage.is-lite-vfx .cvpo-card-deck::after { display: none; }
.cvpo-stage.is-lite-vfx .cvpo-card-foil { animation-duration: 4.4s; }
.cvpo-stage.is-lite-vfx .cvpo-card-halo { filter: blur(16px); }

.cvpo-main.is-pointer-input .cvpo-pack:focus-visible,
.cvpo-main.is-pointer-input .cvpo-extract-stack:focus-visible,
.cvpo-main.is-pointer-input .cvpo-card:focus-visible { outline: 0; }

@keyframes cvpo-sound-bar {
    from { transform: scaleY(.45); opacity: .55; }
    to { transform: scaleY(1); opacity: 1; }
}

@keyframes cvpo-scene-breathe {
    0%, 100% { opacity: .3; transform: translate(-50%, -50%) scale(.92); }
    50% { opacity: .52; transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes cvpo-seam-burst {
    0% { opacity: 0; transform: scaleX(.02); filter: brightness(1); }
    26% { opacity: 1; }
    70% { opacity: 1; transform: scaleX(1); filter: brightness(2.3); }
    100% { opacity: 0; transform: scaleX(1.08); filter: brightness(1); }
}

@keyframes cvpo-reveal-ring {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
    35% { opacity: .9; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.42); }
}

@keyframes cvpo-reveal-rays {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(-18deg); }
    28% { opacity: .42; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.28) rotate(20deg); }
}

@keyframes cvpo-foil-sweep {
    0%, 100% { background-position: center, 120% 0; }
    50% { background-position: center, -30% 0; }
}

@keyframes cvpo-rare-float {
    0%, 100% { transform: translate3d(0, 0, 22px) rotateZ(-.2deg); }
    50% { transform: translate3d(0, -7px, 28px) rotateZ(.35deg); }
}

@keyframes cvpo-rare-ring {
    from { transform: translate(-50%, -50%) scale(1.15) rotate(0deg); }
    to { transform: translate(-50%, -50%) scale(1.2) rotate(360deg); }
}

@keyframes cvpo-rare-rays {
    from { transform: translate(-50%, -50%) scale(1.12) rotate(0deg); }
    to { transform: translate(-50%, -50%) scale(1.12) rotate(360deg); }
}

@keyframes cvpo-flip-flash {
    0% { opacity: 0; transform: scale(.65); }
    20% { opacity: .72; }
    100% { opacity: 0; transform: scale(1.12); }
}

@keyframes cvpo-result-land {
    0% { opacity: 0; transform: translateY(24px) scale(.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cvpo-camera-slice {
    0%, 100% { transform: translate3d(0,0,0); }
    20% { transform: translate3d(-4px,1px,0); }
    40% { transform: translate3d(5px,-1px,0); }
    65% { transform: translate3d(-2px,0,0); }
}

.cvpo-stage.is-slice-impact { animation: cvpo-camera-slice .46s ease-out; }
.cvpo-stage.is-pull-impact { animation: cvpo-camera-pull .68s cubic-bezier(.16,1,.3,1); }
.cvpo-stage.is-flip-impact { animation: cvpo-camera-flip .56s cubic-bezier(.16,1,.3,1); }
.cvpo-stage.is-rare-impact { animation: cvpo-camera-rare .9s cubic-bezier(.16,1,.3,1); }

@keyframes cvpo-camera-pull {
    0% { transform: scale(1); }
    36% { transform: scale(1.018); }
    100% { transform: scale(1); }
}

@keyframes cvpo-camera-flip {
    0% { transform: scale(1); }
    32% { transform: scale(1.012); }
    100% { transform: scale(1); }
}

@keyframes cvpo-camera-rare {
    0% { transform: scale(.995); }
    18% { transform: scale(1.018); }
    100% { transform: scale(1); }
}

@media (max-width: 820px) {
    .cvpo-stage.is-playing:not(.is-result),
    .cvpo-stage.is-playing .cvpo-pack-area,
    .cvpo-stage.is-playing .cvpo-reveal { min-height: 680px; }
    .cvpo-stage.is-playing .cvpo-stage-copy {
        top: 56px;
        left: 50%;
        width: min(290px, calc(100% - 80px));
        text-align: center;
        transform: translateX(-50%);
    }.cvpo-stage.is-playing .cvpo-stage-copy h3,
.cvpo-stage.is-playing .cvpo-stage-copy .cvpo-stage-title { font-size: 17px; }
}

@media (max-width: 560px) {
    .cvpo-scene-hud { top: 14px; right: 14px; left: 14px; }
    .cvpo-sound-toggle span { display: none; }
    .cvpo-sound-toggle { width: 32px; justify-content: center; padding: 0; }
    .cvpo-stage.is-playing:not(.is-result),
    .cvpo-stage.is-playing .cvpo-pack-area,
    .cvpo-stage.is-playing .cvpo-reveal { min-height: 650px; }
    .cvpo-stage.is-playing .cvpo-stage-copy { top: 48px; }
    .cvpo-stage.is-playing .cvpo-pack-shadow { bottom: 66px; }
    .cvpo-stage.is-playing .cvpo-pack-area::before,
    .cvpo-stage.is-playing .cvpo-reveal::before { width: 330px; height: 330px; }
    .cvpo-stage.is-playing .cvpo-card-deck { transform: translateY(12px); }
    .cvpo-stage.is-playing .cvpo-card-meta { bottom: 64px; }
    .cvpo-stage.is-playing .cvpo-card-cue { bottom: -31px; }
}

/* V2 game lobby and material layer */
.cvpo-main {
    --cvpo-accent: #ff5968;
    --cvpo-accent-2: #ffb15a;
    width: min(1260px, calc(100% - 34px));
    padding-top: 38px;
}

.cvpo-lobby {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    color: #f5f8ff;
    border: 1px solid rgba(132, 162, 201, .26);
    background:
        radial-gradient(circle at 78% 42%, color-mix(in srgb, var(--cvpo-accent) 16%, transparent), transparent 30%),
        radial-gradient(circle at 12% 12%, rgba(59, 126, 189, .15), transparent 32%),
        linear-gradient(145deg, #020712 0%, #071427 54%, #020611 100%);
    box-shadow: 0 34px 90px rgba(2, 10, 26, .24);
    isolation: isolate;
    transition: opacity .32s ease, transform .42s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}

.cvpo-lobby.is-leaving {
    opacity: 0;
    filter: brightness(1.45);
    transform: scale(1.018);
}

.cvpo-lobby::before,
.cvpo-lobby::after {
    content: "";
    position: absolute;
    z-index: -2;
    pointer-events: none;
}

.cvpo-lobby::before {
    inset: 0;
    opacity: .22;
    background-image:
        linear-gradient(rgba(154,190,228,.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(154,190,228,.11) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 80%, transparent);
}

.cvpo-lobby::after {
    right: -160px;
    bottom: -230px;
    width: 720px;
    height: 720px;
    border: 1px solid color-mix(in srgb, var(--cvpo-accent) 35%, transparent);
    border-radius: 50%;
    box-shadow:
        0 0 0 74px color-mix(in srgb, var(--cvpo-accent) 4%, transparent),
        0 0 0 152px color-mix(in srgb, var(--cvpo-accent-2) 3%, transparent);
    opacity: .42;
}

.cvpo-lobby-gridfx,
.cvpo-lobby-noise {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cvpo-lobby-gridfx { z-index: -1; opacity: .95; }

.cvpo-lobby-noise {
    z-index: 0;
    opacity: .055;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

.cvpo-lobby-head {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: flex-start;
    padding: 40px 44px 26px;
}

.cvpo-lobby-code {
    display: flex;
    gap: 9px;
    align-items: center;
    margin: 0;
    color: color-mix(in srgb, var(--cvpo-accent) 88%, white);
    font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .18em;
}

.cvpo-lobby-code i,
.cvpo-focus-copy small i {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cvpo-accent);
    box-shadow: 0 0 12px var(--cvpo-accent);
}

.cvpo-lobby-head h1 {
    margin: 13px 0 8px;
    font-size: clamp(30px, 4.2vw, 52px);
    line-height: 1.12;
    letter-spacing: -.045em;
}

.cvpo-lobby-head > div:first-child > p:last-child {
    margin: 0;
    color: #8fa2bd;
    font-size: 13px;
}

.cvpo-player-card {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px 16px;
    min-width: 190px;
    padding: 13px 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(5, 14, 31, .52);
    backdrop-filter: blur(16px);
}

.cvpo-player-card span,
.cvpo-player-card small {
    color: #7286a3;
    font: 700 8px/1.4 ui-monospace, monospace;
    letter-spacing: .13em;
}

.cvpo-player-card strong {
    grid-row: 1 / 3;
    grid-column: 2;
    display: flex;
    gap: 8px;
    align-items: center;
    align-self: center;
    max-width: 180px;
    overflow: hidden;
    color: #e9f1ff;
    font: 800 13px/1 "IBM Plex Sans JP", system-ui, sans-serif;
    letter-spacing: .02em;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.cvpo-player-card strong img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.cvpo-player-card-action {
    grid-column: 1;
    color: var(--cvpo-accent, #4fd6c8);
    font: 700 9px/1.4 system-ui, sans-serif;
    letter-spacing: .04em;
    text-decoration: none;
    white-space: nowrap;
}
.cvpo-player-card-action:hover { text-decoration: underline; }

/* Member pages, always one tap away in the lobby. Locked look until signed in. */
.cvpo-member-nav {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 44px 6px;
}
.cvpo-member-link {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    color: #eaf1fb;
    text-decoration: none;
    transition: transform .2s, border-color .2s;
}
.cvpo-member-link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cvpo-accent) 50%, transparent); }
.cvpo-member-link i { flex: 0 0 auto; font-size: 20px; font-style: normal; }
.cvpo-member-link span { display: grid; gap: 3px; min-width: 0; }
.cvpo-member-link strong { font: 800 14px/1.2 "IBM Plex Sans JP", system-ui, sans-serif; }
.cvpo-member-link small { overflow: hidden; color: #93a7c1; font: 400 11px/1.4 system-ui, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.cvpo-member-note {
    grid-column: 1 / -1;
    margin: 0;
    color: #ffd66f;
    font: 700 11px/1.5 system-ui, sans-serif;
}
.cvpo-member-note[hidden] { display: none; }
.cvpo-member-nav.is-locked .cvpo-member-link { opacity: .85; }
.cvpo-member-nav.is-locked .cvpo-member-link::after { content: "🔒"; margin-left: auto; font-size: 13px; opacity: .8; }
@media (max-width: 760px) { .cvpo-member-nav { margin: 16px 16px 6px; } }
@media (max-width: 560px) {
    .cvpo-member-nav { grid-template-columns: 1fr; margin: 14px 12px 6px; }
    .cvpo-player-card strong { max-width: 120px; }
}

.cvpo-game-tabs {
    position: relative;
    z-index: 3;
    display: grid;
    /* ★列数を固定せず、列の最低幅で決める。
       3列固定だったため 390px でタイルの文字幅が 72px しか無く、
       「ドラゴンボールフュージョンワー…」が切れていた。
       文字を縮めて凌ぐのではなく、入る幅を先に確保する。 */
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin: 0 44px;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.cvpo-game-tab {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: center;
    min-height: 82px;
    padding: 15px 20px;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.1);
    color: #8393aa;
    background: rgba(3, 10, 23, .34);
    cursor: pointer;
    text-align: left;
    transition: color .25s, background .25s, transform .25s;
}

.cvpo-game-tab:last-child { border-right: 0; }
.cvpo-game-tab:hover { color: #dce7f5; background: rgba(255,255,255,.04); }

.cvpo-game-tab::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: -1px;
    left: 16px;
    height: 2px;
    opacity: 0;
    background: var(--cvpo-accent);
    box-shadow: 0 -5px 18px var(--cvpo-accent);
    transform: scaleX(.3);
    transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1);
}

.cvpo-game-tab.is-selected {
    color: #fff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--cvpo-accent) 10%, transparent), rgba(255,255,255,.015));
}

.cvpo-game-tab.is-selected::after { opacity: 1; transform: scaleX(1); }

.cvpo-game-tab > b {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: inherit;
    font: 800 11px/1 ui-monospace, monospace;
    letter-spacing: -.02em;
}

.cvpo-game-tab.is-selected > b {
    color: var(--cvpo-accent);
    border-color: var(--cvpo-accent);
    box-shadow: inset 0 0 18px color-mix(in srgb, var(--cvpo-accent) 14%, transparent), 0 0 18px color-mix(in srgb, var(--cvpo-accent) 12%, transparent);
}

.cvpo-game-tab span,
.cvpo-game-tab strong,
.cvpo-game-tab .cvpo-game-tab-name,
.cvpo-game-tab small { display: block; min-width: 0; }
.cvpo-game-tab strong,
.cvpo-game-tab .cvpo-game-tab-name { color: inherit; font-size: 13px; }
/* h3 の既定値（大きな文字・上下マージン）を消して、strong と同じ見た目に戻す。 */
.cvpo-game-tab .cvpo-game-tab-name {
    margin: 0;
    font-family: inherit;
    font-weight: 700;
    line-height: normal;
}
.cvpo-game-tab small { margin-top: 4px; color: #687b97; font: 700 8px/1.2 ui-monospace, monospace; letter-spacing: .1em; }

.cvpo-lobby-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
    gap: 40px;
    padding: 34px 44px 42px;
}

.cvpo-pack-browser { min-width: 0; }

.cvpo-pack-browser > header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: end;
    margin-bottom: 20px;
}

.cvpo-pack-browser > header p {
    margin: 0 0 5px;
    color: var(--cvpo-accent);
    font: 700 9px/1 ui-monospace, monospace;
    letter-spacing: .16em;
}

.cvpo-pack-browser > header h2,
.cvpo-pack-browser > header .cvpo-pack-select-label { margin: 0; font-size: 23px; letter-spacing: -.03em; }
.cvpo-pack-browser > header > span { color: #697e9a; font: 700 10px/1 ui-monospace, monospace; letter-spacing: .14em; }

.cvpo-pack-tools {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(130px, .62fr) auto;
    gap: 8px;
    align-items: end;
    margin: -6px 0 15px;
}

.cvpo-pack-search,
.cvpo-pack-filter { display: grid; gap: 5px; min-width: 0; }

.cvpo-pack-search > span,
.cvpo-pack-filter > span {
    color: #60738e;
    font: 700 7px/1 ui-monospace, monospace;
    letter-spacing: .16em;
}

.cvpo-pack-search input,
.cvpo-pack-filter select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 11px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 0;
    outline: 0;
    color: #dfe9f7;
    background: rgba(4,13,28,.82);
    font-size: 11px;
}

.cvpo-pack-search input:focus,
.cvpo-pack-filter select:focus { border-color: var(--cvpo-accent); box-shadow: 0 0 0 1px color-mix(in srgb,var(--cvpo-accent) 24%,transparent); }
.cvpo-pack-search input::placeholder { color: #5e718c; }

.cvpo-pack-pager { display: flex; align-items: center; height: 38px; border: 1px solid rgba(255,255,255,.12); background: rgba(4,13,28,.82); }
.cvpo-pack-pager button { width: 34px; height: 36px; padding: 0; border: 0; color: #aabbd0; background: transparent; cursor: pointer; }
.cvpo-pack-pager button:disabled { opacity: .22; cursor: default; }
.cvpo-pack-pager span { min-width: 46px; color: #7488a3; font: 700 8px/1 ui-monospace,monospace; text-align: center; }

.cvpo-pack-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.cvpo-pack-choice {
    position: relative;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    color: #aab8cb;
    background: linear-gradient(155deg, rgba(15,32,55,.76), rgba(4,12,26,.78));
    cursor: pointer;
    text-align: left;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s, color .25s;
}

.cvpo-pack-choice::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(125deg, transparent 22%, color-mix(in srgb, var(--cvpo-accent) 18%, transparent) 48%, transparent 70%);
    transform: translateX(-75%);
    transition: opacity .25s, transform .6s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
}

.cvpo-pack-choice:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.26); color: #fff; }
.cvpo-pack-choice:hover::after { opacity: 1; transform: translateX(65%); }

.cvpo-pack-choice.is-selected {
    color: #fff;
    border-color: color-mix(in srgb, var(--cvpo-accent) 78%, white 6%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cvpo-accent) 18%, transparent), 0 16px 34px rgba(0,0,0,.28), inset 0 -50px 70px color-mix(in srgb, var(--cvpo-accent) 7%, transparent);
    transform: translateY(-4px);
}

.cvpo-pack-choice-visual {
    position: relative;
    display: grid;
    place-items: center;
    height: 235px;
    overflow: hidden;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--cvpo-accent) 11%, transparent), transparent 58%),
        linear-gradient(rgba(255,255,255,.015), rgba(0,0,0,.12));
}

/* Absolute, not a grid item. As a grid item the square 670px source sized the
   implicit row to its own intrinsic height (357px), and `height: 94%` then
   resolved against that row instead of the 235px frame — every thumbnail
   overflowed by 81-101px and was cut off by `overflow: hidden`. Taking the
   image out of grid sizing makes the frame the only thing that can size it. */
.cvpo-pack-choice-visual img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 18px 18px rgba(0,0,0,.48));
    mix-blend-mode: screen;
    transform: scale(.94) rotateY(-3deg);
    transition: transform .36s cubic-bezier(.2,.8,.2,1), filter .3s;
}

.cvpo-pack-choice:hover .cvpo-pack-choice-visual img,
.cvpo-pack-choice.is-selected .cvpo-pack-choice-visual img { transform: scale(1) rotateY(0); filter: drop-shadow(0 22px 20px rgba(0,0,0,.6)); }

.cvpo-pack-choice-visual > i {
    position: absolute;
    top: 10px;
    left: 11px;
    color: #60738e;
    font: 700 8px/1 ui-monospace, monospace;
    letter-spacing: .12em;
}

.cvpo-pack-choice.is-selected .cvpo-pack-choice-visual > i { color: var(--cvpo-accent); }

.cvpo-pack-choice-copy {
    position: relative;
    z-index: 2;
    display: block;
    min-height: 70px;
    padding: 13px 14px 15px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.cvpo-pack-choice-copy small,
.cvpo-pack-choice-copy strong, .cvpo-pack-choice-copy .cvpo-pack-choice-name { display: block; }
.cvpo-pack-choice-copy small { color: var(--cvpo-accent); font: 700 8px/1 ui-monospace, monospace; letter-spacing: .12em; }
.cvpo-pack-choice-copy strong, .cvpo-pack-choice-copy .cvpo-pack-choice-name { margin-top: 6px; overflow: hidden; font-size: 12px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }

.cvpo-lobby-focus {
    position: relative;
    display: grid;
    grid-template-rows: 330px auto auto auto;
    align-content: start;
    min-width: 0;
    padding: 22px 25px 19px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--cvpo-accent) 25%, rgba(255,255,255,.12));
    background: linear-gradient(160deg, color-mix(in srgb, var(--cvpo-accent) 8%, rgba(12,26,48,.78)), rgba(3,10,23,.88));
    box-shadow: inset 0 1px rgba(255,255,255,.06), 0 28px 55px rgba(0,0,0,.24);
}

.cvpo-lobby-focus::before {
    content: "SELECTED PACK";
    position: absolute;
    top: 16px;
    left: 18px;
    z-index: 4;
    color: #6d809a;
    font: 700 8px/1 ui-monospace, monospace;
    letter-spacing: .16em;
}

.cvpo-focus-aura,
.cvpo-focus-aura i,
.cvpo-focus-aura b {
    position: absolute;
    top: 160px;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cvpo-focus-aura { width: 270px; height: 270px; background: radial-gradient(circle, color-mix(in srgb, var(--cvpo-accent) 23%, transparent), transparent 68%); }
.cvpo-focus-aura i { width: 205px; height: 205px; border: 1px solid color-mix(in srgb, var(--cvpo-accent) 32%, transparent); animation: cvpo-focus-orbit 12s linear infinite; }
.cvpo-focus-aura b { width: 140px; height: 140px; border: 1px dashed color-mix(in srgb, var(--cvpo-accent-2) 28%, transparent); animation: cvpo-focus-orbit 9s linear infinite reverse; }

.cvpo-focus-pack {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    height: 318px;
    perspective: 900px;
    transform-style: preserve-3d;
    transform: rotateX(var(--cvpo-focus-rx, -1deg)) rotateY(var(--cvpo-focus-ry, -5deg)) translateZ(0);
    transition: transform .2s ease-out, opacity .22s;
}

.cvpo-focus-pack.is-changing { animation: cvpo-focus-change .42s cubic-bezier(.2,.8,.2,1); }

.cvpo-focus-pack img {
    display: block;
    width: 288px;
    height: 300px;
    object-fit: contain;
    filter: drop-shadow(0 28px 24px rgba(0,0,0,.58));
    mix-blend-mode: screen;
    user-select: none;
    -webkit-user-drag: none;
}

.cvpo-focus-shine {
    position: absolute;
    inset: 25px 42px;
    opacity: .5;
    background: linear-gradient(112deg, transparent 22%, rgba(255,255,255,.55) 44%, transparent 59%);
    background-size: 240% 100%;
    background-position: var(--cvpo-focus-light, 52%) 0;
    mix-blend-mode: screen;
    mask-image: linear-gradient(90deg, transparent, #000 22% 78%, transparent);
    pointer-events: none;
}

.cvpo-focus-copy { position: relative; z-index: 2; min-width: 0; padding: 5px 2px 18px; }
.cvpo-focus-copy > p { display: flex; gap: 9px; align-items: center; margin: 0 0 7px; }
.cvpo-focus-copy > p span { padding: 4px 7px; color: #07111f; background: var(--cvpo-accent); font: 800 8px/1 ui-monospace, monospace; letter-spacing: .1em; }
.cvpo-focus-copy > p b { color: #8194ad; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .12em; }
.cvpo-focus-copy h2, .cvpo-focus-copy .cvpo-focus-name { margin: 0; overflow: hidden; font-size: 22px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.cvpo-focus-copy small { display: flex; gap: 7px; align-items: center; margin-top: 10px; color: #758aa5; font: 700 8px/1 ui-monospace, monospace; letter-spacing: .13em; }

.cvpo-start {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 56px;
    padding: 0 18px 0 21px;
    overflow: hidden;
    border: 0;
    color: #06101e;
    background: linear-gradient(100deg, var(--cvpo-accent), var(--cvpo-accent-2));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--cvpo-accent) 18%, transparent);
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .04em;
    transition: transform .2s, box-shadow .25s, opacity .2s;
}

.cvpo-start::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.48) 45%, transparent 68%);
    transform: translateX(-110%);
    transition: transform .55s cubic-bezier(.2,.8,.2,1);
}

.cvpo-start:hover { transform: translateY(-2px); box-shadow: 0 17px 35px color-mix(in srgb, var(--cvpo-accent) 25%, transparent); }
.cvpo-start:hover::before { transform: translateX(110%); }
.cvpo-start:disabled { cursor: wait; opacity: .72; }
.cvpo-start > span,
.cvpo-start > i { position: relative; z-index: 1; }
.cvpo-start,
.cvpo-start > span { white-space: nowrap; word-break: keep-all; }
.cvpo-start > span { flex: 0 1 auto; }
.cvpo-start > i { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(2,10,22,.32); border-radius: 50%; font-style: normal; }
.cvpo-start.is-loading > i { animation: cvpo-loading-turn .8s linear infinite; }

.cvpo-load-status { min-height: 14px; margin: 10px 0 0; color: #687d98; font-size: 9px; text-align: center; }

.cvpo-console { border-color: rgba(95,122,158,.35); }
.cvpo-console-head { display: grid; grid-template-columns: auto minmax(0,1fr) minmax(190px,280px); align-items: end; }
.cvpo-console-title { min-width: 0; }.cvpo-console-title h2 b,
.cvpo-console-title .cvpo-console-name b { font: inherit; }

.cvpo-back-lobby {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 34px;
    margin-bottom: 4px;
    padding: 0 12px;
    border: 1px solid #d6dee8;
    color: #55657a;
    background: #fff;
    cursor: pointer;
    font: 800 8px/1 ui-monospace, monospace;
    letter-spacing: .12em;
}

.cvpo-back-lobby:hover { color: var(--cvpo-accent); border-color: var(--cvpo-accent); }
.cvpo-game,
.cvpo-stage-kicker,
.cvpo-result-title p { color: var(--cvpo-accent); }.cvpo-console-head h2 span,
.cvpo-console-head .cvpo-console-name span { background: var(--cvpo-accent); }
.cvpo-progress-track i { background: linear-gradient(90deg, var(--cvpo-accent), var(--cvpo-accent-2)); }
.cvpo-scene-status i { background: var(--cvpo-accent); box-shadow: 0 0 10px var(--cvpo-accent); }
.cvpo-sound-toggle > i b { background: var(--cvpo-accent); }

.cvpo-stage {
    background:
        radial-gradient(circle at 72% 44%, color-mix(in srgb, var(--cvpo-accent) 18%, transparent), transparent 30%),
        radial-gradient(circle at 15% 80%, color-mix(in srgb, var(--cvpo-accent-2) 8%, transparent), transparent 28%),
        linear-gradient(135deg, #030813 0%, #07172e 48%, #040812 100%);
}

.cvpo-stage.is-playing:not(.is-result) {
    background:
        radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--cvpo-accent-2) 17%, transparent), transparent 27%),
        radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--cvpo-accent) 11%, transparent), transparent 44%),
        linear-gradient(145deg, #020710 0%, #07172d 48%, #030710 100%);
}

.cvpo-pack-material {
    position: absolute;
    inset: 0;
    z-index: 7;
    display: block;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
    pointer-events: none;
}

.cvpo-pack-edge {
    position: absolute;
    top: 3%;
    bottom: 4%;
    z-index: -1;
    display: block;
    width: 11px;
    border-radius: 50%;
    opacity: .7;
    background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(255,255,255,.18), rgba(0,0,0,.36));
    filter: blur(.2px);
    pointer-events: none;
}

.cvpo-pack-edge-left { left: -4px; transform: rotateY(78deg) translateZ(-4px); }
.cvpo-pack-edge-right { right: -4px; transform: rotateY(-78deg) translateZ(-4px); }

.cvpo-main[data-game-theme="pokemon"] .cvpo-pack,
.cvpo-main[data-game-theme="yugioh"] .cvpo-pack { width: 270px; height: 410px; }

/* Where the pack tears. Measured on the canvas, not on the pack, so the value
   differs per game: the pack sits at y=20 of a 1000px canvas for Pokemon and
   Yu-Gi-Oh and at y=48 of a 670px canvas for One Piece. Both land ~15% down the
   pack itself, which is below the crimped seal and above the cards — where a
   real pack opens. The seam flash, particles and swipe marker all read this one
   value, so the effects and the actual split can no longer drift apart. */
.cvpo-main[data-game-theme="pokemon"],
.cvpo-main[data-game-theme="yugioh"] { --cvpo-cut-line: 16.8%; }
.cvpo-main[data-game-theme="onepiece"] { --cvpo-cut-line: 20.5%; }

.cvpo-main[data-game-theme="pokemon"] .cvpo-pack img,
.cvpo-main[data-game-theme="yugioh"] .cvpo-pack img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: normal;
    transform: none;
}

.cvpo-result-grid { grid-template-columns: repeat(var(--cvpo-result-count, 6), minmax(0, 1fr)); }

@keyframes cvpo-focus-orbit {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes cvpo-focus-change {
    0% { opacity: .25; transform: translateY(8px) rotateY(-12deg) scale(.96); }
    100% { opacity: 1; transform: translateY(0) rotateY(var(--cvpo-focus-ry, -5deg)) scale(1); }
}

@keyframes cvpo-loading-turn {
    to { transform: rotate(360deg); }
}

@media (max-width: 940px) {
    .cvpo-lobby-content { grid-template-columns: minmax(0,1fr) 320px; gap: 24px; padding-right: 30px; padding-left: 30px; }
    .cvpo-game-tabs { margin-right: 30px; margin-left: 30px; }
    .cvpo-lobby-head { padding-right: 30px; padding-left: 30px; }
    .cvpo-pack-choice-visual { height: 205px; }
    .cvpo-lobby-focus { grid-template-rows: 290px auto auto auto; }
    .cvpo-focus-pack { height: 280px; }
    .cvpo-focus-pack img { width: 250px; height: 270px; }
}

@media (min-width: 761px) and (max-height: 820px) {
    .cvpo-main { padding-top: 18px; }
    .cvpo-lobby-head { padding-top: 22px; padding-bottom: 16px; }
    .cvpo-lobby-head h1 { margin-top: 8px; margin-bottom: 5px; font-size: 36px; }
    .cvpo-player-card { padding-top: 9px; padding-bottom: 9px; }
    .cvpo-game-tab { min-height: 62px; padding-top: 9px; padding-bottom: 9px; }
    .cvpo-game-tab > b { width: 36px; height: 36px; flex-basis: 36px; }
    .cvpo-lobby-content { gap: 28px; padding-top: 19px; padding-bottom: 24px; }
    .cvpo-pack-browser > header { margin-bottom: 13px; }
    .cvpo-pack-choice-visual { height: 166px; }
    .cvpo-pack-choice-copy { min-height: 56px; padding-top: 10px; padding-bottom: 10px; }
    .cvpo-lobby-focus { grid-template-rows: 195px auto auto auto; padding-top: 17px; padding-bottom: 15px; }
    .cvpo-focus-aura { top: 101px; width: 190px; height: 190px; }
    .cvpo-focus-aura i { top: 101px; width: 148px; height: 148px; }
    .cvpo-focus-aura b { top: 101px; width: 104px; height: 104px; }
    .cvpo-focus-pack { height: 187px; }
    .cvpo-focus-pack img { width: 204px; height: 182px; }
    .cvpo-focus-copy { padding-top: 2px; padding-bottom: 11px; }
    .cvpo-focus-copy h2, .cvpo-focus-copy .cvpo-focus-name { font-size: 18px; }
    .cvpo-focus-copy small { margin-top: 6px; }
    .cvpo-start { min-height: 47px; }
}

@media (max-width: 760px) {
    .cvpo-main { width: min(100% - 20px, 700px); padding-top: 24px; }
    .cvpo-lobby { min-height: 0; }
    .cvpo-player-card { display: none; }
    .cvpo-lobby-head { padding: 29px 22px 20px; }
    .cvpo-lobby-head h1 { font-size: 33px; }
    .cvpo-game-tabs { margin: 0 22px; }
    .cvpo-game-tab { justify-content: center; min-height: 74px; padding: 12px 8px; }
    .cvpo-game-tab > b { width: 36px; height: 36px; flex-basis: 36px; }
    .cvpo-game-tab span { display: none; }
    .cvpo-lobby-content { grid-template-columns: 1fr; padding: 26px 22px 28px; }
    .cvpo-pack-choice-visual { height: 220px; }
    .cvpo-lobby-focus { grid-template-columns: 215px minmax(0,1fr); grid-template-rows: auto auto auto; align-items: center; }
    .cvpo-focus-aura { top: 150px; left: 110px; }
    .cvpo-focus-pack { grid-row: 1 / 4; height: 300px; }
    .cvpo-focus-pack img { width: 210px; height: 285px; }
    .cvpo-focus-copy { padding-right: 6px; }
    .cvpo-focus-copy h2, .cvpo-focus-copy .cvpo-focus-name { white-space: normal; }
    .cvpo-start { grid-column: 2; }
    .cvpo-load-status { grid-column: 2; }
    .cvpo-console-head { grid-template-columns: auto minmax(0,1fr); gap: 12px; }
    .cvpo-progress { grid-column: 1 / -1; width: 100%; margin-top: 12px; text-align: left; }
}

@media (max-width: 560px) {
    .cvpo-main { width: 100%; padding-top: 0; }
    .cvpo-lobby { border-right: 0; border-left: 0; }
    .cvpo-lobby-head { padding: 26px 17px 18px; }
    .cvpo-lobby-code { font-size: 8px; }
    .cvpo-lobby-head h1 { margin-top: 11px; font-size: 28px; }
    .cvpo-lobby-head > div:first-child > p:last-child { font-size: 11px; }
    .cvpo-game-tabs { margin: 0 16px; }
    .cvpo-game-tab { min-height: 65px; }
    .cvpo-game-tab > b { width: 34px; height: 34px; flex-basis: 34px; font-size: 9px; }
    .cvpo-lobby-content { gap: 22px; padding: 22px 16px 26px; }
    .cvpo-pack-browser > header { margin-bottom: 14px; }
    .cvpo-pack-browser > header h2,
    .cvpo-pack-browser > header .cvpo-pack-select-label { font-size: 20px; }
    .cvpo-pack-tools { grid-template-columns: minmax(0,1fr) auto; margin-top: -2px; margin-bottom: 10px; }
    .cvpo-pack-search { grid-column: 1 / -1; }
    .cvpo-pack-filter > span,
    .cvpo-pack-search > span { display: none; }
    .cvpo-pack-search input,
    .cvpo-pack-filter select,
    .cvpo-pack-pager { height: 36px; }
    .cvpo-pack-pager button { height: 34px; }
    .cvpo-pack-list { display: flex; gap: 10px; padding: 4px 2px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .cvpo-pack-list::-webkit-scrollbar { display: none; }
    .cvpo-pack-tile { width: 142px; flex: 0 0 142px; scroll-snap-align: center; }
    .cvpo-pack-choice { width: 100%; }
    .cvpo-pack-choice-visual { height: 175px; }
    .cvpo-pack-choice-copy { min-height: 65px; padding: 11px 10px 12px; }
    .cvpo-pack-choice-copy strong, .cvpo-pack-choice-copy .cvpo-pack-choice-name { font-size: 11px; }
    .cvpo-lobby-focus { display: grid; grid-template-columns: 145px minmax(0,1fr); grid-template-rows: auto auto auto; padding: 18px 14px 14px; }
    .cvpo-lobby-focus::before { top: 11px; left: 12px; }
    .cvpo-focus-aura { top: 118px; left: 76px; width: 180px; height: 180px; }
    .cvpo-focus-aura i { width: 145px; height: 145px; }
    .cvpo-focus-aura b { width: 100px; height: 100px; }
    .cvpo-focus-pack { height: 230px; }
    .cvpo-focus-pack img { width: 142px; height: 220px; }
    .cvpo-focus-shine { inset: 28px 18px; }
    .cvpo-focus-copy { padding-top: 28px; padding-bottom: 14px; }
    .cvpo-focus-copy h2, .cvpo-focus-copy .cvpo-focus-name { font-size: 18px; }
    .cvpo-focus-copy > p { flex-wrap: wrap; }
    .cvpo-start { justify-content: center; min-height: 50px; padding-right: 8px; padding-left: 8px; font-size: 10px; }
    .cvpo-start > i { display: none; }
    .cvpo-load-status { font-size: 8px; }
    .cvpo-console-head { display: grid; padding: 15px 14px; }
    .cvpo-back-lobby { width: 36px; padding: 0; justify-content: center; }
    .cvpo-back-lobby span { display: none; }.cvpo-console-title h2,
.cvpo-console-title .cvpo-console-name { font-size: 18px; }
    .cvpo-main[data-game-theme="pokemon"] .cvpo-pack,
    .cvpo-main[data-game-theme="yugioh"] .cvpo-pack { width: 230px; height: 350px; }
    .cvpo-result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 340px) {
    .cvpo-lobby-focus { grid-template-columns: 130px minmax(0, 1fr); }
    .cvpo-focus-aura { left: 67px; width: 160px; height: 160px; }
    .cvpo-focus-aura i { width: 130px; height: 130px; }
    .cvpo-focus-aura b { width: 88px; height: 88px; }
    .cvpo-focus-pack img { width: 126px; height: 210px; }
    .cvpo-focus-copy h2, .cvpo-focus-copy .cvpo-focus-name { font-size: 16px; }
    .cvpo-start { justify-content: center; padding-right: 8px; padding-left: 8px; font-size: 9.5px; white-space: nowrap; }
    .cvpo-start > i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cvpo-focus-aura i,
    .cvpo-focus-aura b,
    .cvpo-start.is-loading > i { animation: none; }
    .cvpo-lobby.is-leaving { transform: none; }
}

/* V3 immersive cinematic runtime */
body.cvpo-immersive-active {
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
}

.cvpo-main.is-immersive {
    width: 100%;
    max-width: none;
    padding: 0;
}

.cvpo-main.is-immersive .cvpo-console {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    grid-template-rows: 76px minmax(0, 1fr) 58px;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    border: 0;
    color: #eef6ff;
    background: #020610;
    box-shadow: none;
}

.cvpo-main.is-immersive .cvpo-console.is-entering {
    animation: cvpo-v3-console-enter .7s cubic-bezier(.16,1,.3,1) both;
}

.cvpo-main.is-immersive .cvpo-console-head {
    position: relative;
    z-index: 80;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) minmax(210px,280px);
    gap: 22px;
    align-items: center;
    min-height: 0;
    height: 76px;
    padding: 10px 22px;
    border-bottom: 1px solid rgba(255,255,255,.09);
    color: #ecf4ff;
    background: linear-gradient(180deg, rgba(5,13,29,.98), rgba(2,8,19,.96));
    box-shadow: 0 10px 36px rgba(0,0,0,.3);
}

.cvpo-main.is-immersive .cvpo-console-title { min-width: 0; }
.cvpo-main.is-immersive .cvpo-console-title .cvpo-game { font-size: 8px; }.cvpo-main.is-immersive .cvpo-console-title h2,
.cvpo-main.is-immersive .cvpo-console-title .cvpo-console-name {
    margin-top: 4px;
    overflow: hidden;
    color: #fff;
    font-size: clamp(17px,2vw,24px);
    white-space: nowrap;
    text-overflow: ellipsis;
}.cvpo-main.is-immersive .cvpo-console-title h2 span,
.cvpo-main.is-immersive .cvpo-console-title .cvpo-console-name span { margin-right: 8px; }
.cvpo-main.is-immersive .cvpo-progress { width: 100%; margin: 0; }
.cvpo-main.is-immersive .cvpo-progress-track { background: rgba(255,255,255,.12); }

.cvpo-main.is-immersive .cvpo-back-lobby {
    min-height: 38px;
    border-color: rgba(255,255,255,.18);
    color: #b7c5d9;
    background: rgba(255,255,255,.035);
}

.cvpo-main.is-immersive .cvpo-stage {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    padding: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 67% 48%, color-mix(in srgb, var(--cvpo-accent) 13%, transparent), transparent 28%),
        radial-gradient(circle at 50% 52%, #0a1931 0, #040b18 44%, #01040b 100%);
}

.cvpo-main.is-immersive .cvpo-stage::before {
    opacity: .14;
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at 62% 50%, #000, transparent 76%);
}

.cvpo-stage-world {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(230px,.72fr) minmax(380px,1.28fr);
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 54px clamp(32px,6vw,96px) 24px;
    transform: translate3d(var(--cvpo-world-drift,0px),0,0) scale(1);
    transform-origin: 62% 50%;
    transition: transform .55s cubic-bezier(.16,1,.3,1), filter .6s;
}

.cvpo-main.is-immersive .cvpo-stage-copy,
.cvpo-main.is-immersive .cvpo-stage.is-playing .cvpo-stage-copy {
    position: relative;
    top: auto;
    left: auto;
    z-index: 8;
    width: auto;
    max-width: 460px;
    padding-right: 20px;
    opacity: .88;
    transform: none;
}.cvpo-main.is-immersive .cvpo-stage-copy h3,
.cvpo-main.is-immersive .cvpo-stage.is-playing .cvpo-stage-copy h3,
.cvpo-main.is-immersive .cvpo-stage-copy .cvpo-stage-title,
.cvpo-main.is-immersive .cvpo-stage.is-playing .cvpo-stage-copy .cvpo-stage-title {
    margin: 11px 0 12px;
    font-size: clamp(25px,2.8vw,41px);
    line-height: 1.15;
    white-space: nowrap;
}

.cvpo-main.is-immersive .cvpo-stage-copy p:last-child { display: block; max-width: 330px; }

.cvpo-main.is-immersive .cvpo-pack-area,
.cvpo-main.is-immersive .cvpo-reveal,
.cvpo-main.is-immersive .cvpo-stage.is-playing .cvpo-pack-area,
.cvpo-main.is-immersive .cvpo-stage.is-playing .cvpo-reveal {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
}

.cvpo-main.is-immersive .cvpo-pack-area::before,
.cvpo-main.is-immersive .cvpo-reveal::before {
    width: min(48vmin,490px);
    height: min(48vmin,490px);
}

.cvpo-main.is-immersive .cvpo-actionbar {
    position: relative;
    z-index: 80;
    min-height: 0;
    height: 58px;
    padding: 10px 22px;
    border-top: 1px solid rgba(255,255,255,.09);
    color: #8fa1b8;
    background: linear-gradient(180deg, #07101e, #030813);
}

.cvpo-main.is-immersive .cvpo-actionbar > p { color: #94a5ba; }
.cvpo-main.is-immersive .cvpo-actionbar > p span { color: var(--cvpo-accent); }
.cvpo-main.is-immersive .cvpo-direct-badge i { background: var(--cvpo-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--cvpo-accent) 10%, transparent); }
.cvpo-main.is-immersive .cvpo-reset { min-height: 38px; border: 1px solid rgba(255,255,255,.12); color: #fff; background: rgba(255,255,255,.06); }

.cvpo-pack-depth,
.cvpo-pack-depth i {
    position: absolute;
    inset: 2.5% 2% 3%;
    z-index: -1;
    display: block;
    border-radius: 4px 5px 7px 6px;
    background: linear-gradient(110deg,#182032,#02050a 32%,#37445d 76%,#05070c);
    pointer-events: none;
}

.cvpo-pack-depth i:nth-child(1) { transform: translate3d(-7px,5px,-18px) rotateY(-2deg); opacity: .32; }
.cvpo-pack-depth i:nth-child(2) { transform: translate3d(6px,3px,-12px) rotateY(2deg); opacity: .4; }
.cvpo-pack-depth i:nth-child(3) { transform: translate3d(0,7px,-7px); opacity: .26; filter: blur(1px); }

.cvpo-pack {
    --cvpo-crush: 0;
    --cvpo-gesture-energy: 0;
    --cvpo-tear-progress: 0;
    transform-origin: var(--cvpo-touch-x,50%) var(--cvpo-touch-y,45%);
    transform:
        rotateX(var(--cvpo-rx,-2deg))
        rotateY(var(--cvpo-ry,-7deg))
        rotateZ(var(--cvpo-flex-r,0deg))
        scaleX(var(--cvpo-scale-x,1))
        scaleY(var(--cvpo-scale-y,1));
    will-change: transform, filter;
}

.cvpo-pack.is-gripping .cvpo-pack-body {
    transform: translateZ(9px) skewX(var(--cvpo-flex-skew,0deg));
    filter: saturate(1.06) contrast(1.02);
}

.cvpo-pack-body {
    border-radius: 4px 4px 7px 6px;
    transition: clip-path .58s cubic-bezier(.2,.8,.25,1), transform .2s, filter .25s;
}

.cvpo-pack-pressure {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: block;
    opacity: calc(var(--cvpo-crush) * .54);
    background:
        radial-gradient(circle at var(--cvpo-touch-x,50%) var(--cvpo-touch-y,45%), rgba(0,0,0,.38), transparent 9%),
        radial-gradient(circle at var(--cvpo-touch-x,50%) var(--cvpo-touch-y,45%), transparent 0 8%, rgba(255,255,255,.14) 15%, transparent 31%);
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.cvpo-pack.is-swiping .cvpo-pack-body img {
    filter: drop-shadow(0 24px 18px rgba(0,0,0,.28)) brightness(calc(1 + var(--cvpo-gesture-energy) * .07));
}

.cvpo-tear-guide i {
    width: var(--cvpo-tear-pos,0%);
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,.16), #fff 72%, #fff7cc);
    box-shadow: 0 0 8px rgba(255,255,255,.8), 0 0 22px color-mix(in srgb, var(--cvpo-accent) 60%, transparent);
    transform: none !important;
}

.cvpo-tear-head {
    position: absolute;
    top: calc(var(--cvpo-cut-line, 10%) - 9px);
    left: var(--cvpo-tear-pos,0%);
    z-index: 18;
    width: 18px;
    height: 18px;
    opacity: 0;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    box-shadow: 0 0 10px #fff, 0 0 26px var(--cvpo-accent);
    transform: translateX(-50%) scale(var(--cvpo-head-scale,.7));
    pointer-events: none;
}

.cvpo-pack.is-swiping .cvpo-tear-head,
.cvpo-pack.is-seal-committed .cvpo-tear-head { opacity: calc(.25 + var(--cvpo-tear-progress,0) * .75); }

/* The tear head marks where the finger is cutting. Once the pack is open the
   swipe is over, and the marker was parking itself at 100% — a lit dot floating
   beside the pack for the rest of the opening. */
.cvpo-stage.is-opened .cvpo-tear-head,
.cvpo-stage.is-torn .cvpo-tear-head,
.cvpo-stage.is-ready-to-pull .cvpo-tear-head,
.cvpo-stage.is-pulling .cvpo-tear-head,
.cvpo-stage.is-extracting .cvpo-tear-head,
.cvpo-stage.is-drawing .cvpo-tear-head {
    opacity: 0;
    transition: opacity .3s;
}
.cvpo-pack.is-pack-snap { transition-duration: .28s; }

.cvpo-stage.is-charging .cvpo-stage-world { transform: scale(1.018); }
.cvpo-stage.is-cine-focus .cvpo-stage-world { filter: saturate(1.08) contrast(1.03); }
.cvpo-stage.is-tearing .cvpo-pack-top {
    transform: translate3d(16px,-2px,18px) rotateX(12deg);
}
.cvpo-stage.is-opened .cvpo-pack-top {
    transform: translate3d(142px,-34px,86px) rotateZ(24deg) rotateX(58deg) rotateY(12deg) scale(.97);
    opacity: .96;
}
.cvpo-stage.is-torn .cvpo-pack-top { transform: translate3d(205px,-64px,110px) rotateZ(40deg) rotateX(72deg) scale(.9); }

.cvpo-stage.is-ready-to-pull .cvpo-extract-stack {
    transform:
        translate(-50%,-50%)
        translate3d(var(--cvpo-extract-x,0px),var(--cvpo-stack-y,-64px),var(--cvpo-stack-z,0px))
        rotateZ(var(--cvpo-extract-r,0deg))
        scale(var(--cvpo-stack-scale,.97));
}

.cvpo-stage.is-ready-to-pull .cvpo-card-back {
    filter: brightness(1.12) saturate(1.08);
    box-shadow: inset 0 0 0 2px rgba(8,22,49,.92),0 -8px 30px color-mix(in srgb,var(--cvpo-accent) 22%,transparent),0 25px 60px rgba(0,0,0,.48);
}

.cvpo-extract-stack .cvpo-card-back::after {
    content: "CARD // VALUE";
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 3;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,.25);
    color: rgba(225,246,255,.86);
    background: rgba(4,18,42,.54);
    font: 800 7px/1 ui-monospace,monospace;
    letter-spacing: .16em;
    white-space: nowrap;
    transform: translateX(-50%);
}

.cvpo-stage.is-ready-to-pull .cvpo-pack {
    transform:
        translate3d(var(--cvpo-pack-drift,0px),var(--cvpo-pack-drop,0px),0)
        rotateX(var(--cvpo-pack-rx,-1deg))
        rotateY(var(--cvpo-pack-ry,-3deg))
        scale(var(--cvpo-pack-scale,1));
    opacity: var(--cvpo-pack-opacity,1);
}

.cvpo-stage.is-extracting .cvpo-extract-stack {
    transform: translate(-50%,-50%) translate3d(0,-124px,55px) scale(1.055);
    transition: transform .72s cubic-bezier(.1,.86,.18,1), opacity .35s;
}

.cvpo-card-shader {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 11px;
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    transition: opacity .5s;
}

.cvpo-stage[data-rarity-tier="rare"] .cvpo-card.is-face-up .cvpo-card-shader { opacity: .42; }
.cvpo-stage[data-rarity-tier="super"] .cvpo-card.is-face-up .cvpo-card-shader { opacity: .68; }
.cvpo-stage[data-rarity-tier="mythic"] .cvpo-card.is-face-up .cvpo-card-shader { opacity: .88; }
.cvpo-stage[data-rarity-tier="super"] .cvpo-card-foil,
.cvpo-stage[data-rarity-tier="mythic"] .cvpo-card-foil { opacity: .38; }
.cvpo-stage[data-rarity-tier="mythic"] .cvpo-card-face-front .cvpo-card-crop { box-shadow: 0 0 0 2px #fff1b2,0 0 42px #ff75de,0 0 90px rgba(87,198,255,.42),0 34px 72px rgba(0,0,0,.68); }

.cvpo-cine-bars,
.cvpo-speed-field,
.cvpo-rarity-cine {
    position: absolute;
    inset: 0;
    z-index: 24;
    overflow: hidden;
    pointer-events: none;
}

.cvpo-cine-bars i {
    position: absolute;
    right: 0;
    left: 0;
    height: 0;
    background: #010205;
    transition: height .52s cubic-bezier(.16,1,.3,1);
}
.cvpo-cine-bars i:first-child { top: 0; }
.cvpo-cine-bars i:last-child { bottom: 0; }

.cvpo-speed-field { z-index: 2; opacity: 0; transition: opacity .3s; }
.cvpo-speed-field i {
    position: absolute;
    top: 50%;
    left: 64%;
    width: 165vmax;
    height: 165vmax;
    background: repeating-conic-gradient(from 0deg,transparent 0 3.4deg,rgba(255,255,255,.055) 3.55deg 3.7deg,transparent 3.85deg 7deg);
    mask-image: radial-gradient(circle,transparent 0 8%,#000 18% 48%,transparent 66%);
    transform: translate(-50%,-50%) scale(.7) rotate(0deg);
}
.cvpo-speed-field i:nth-child(2) { opacity: .6; transform: translate(-50%,-50%) scale(.52) rotate(2deg); }
.cvpo-speed-field i:nth-child(3) { opacity: .32; transform: translate(-50%,-50%) scale(.9) rotate(-2deg); }
.cvpo-stage.is-tearing .cvpo-speed-field,
.cvpo-stage.is-extracting .cvpo-speed-field,
.cvpo-stage.is-card-impact .cvpo-speed-field { opacity: .72; animation: cvpo-v3-speed-pulse .72s ease-out both; }

/* The callout band still lives in .cvpo-rarity-cine; the concentric rings that
   used to sit beside it were replaced by the payoff layer. */
.cvpo-rarity-cine { z-index: 21; opacity: 0; transition: opacity .35s; }
.cvpo-rarity-cine > i { display: none; }
.cvpo-stage.is-rarity-callout .cvpo-rarity-cine { opacity: 1; }

.cvpo-rarity-cine > div {
    position: absolute;
    right: clamp(18px,5vw,84px);
    bottom: 8%;
    left: auto;
    width: min(340px,38vw);
    padding: 13px 17px;
    opacity: 0;
    border-left: 2px solid var(--cvpo-rarity);
    color: #fff;
    background: linear-gradient(90deg,color-mix(in srgb,var(--cvpo-rarity) 18%,rgba(3,8,18,.86)),rgba(3,8,18,.2));
    backdrop-filter: blur(12px);
    transform: translateX(22px);
}
.cvpo-rarity-cine small,.cvpo-rarity-cine strong { display: block; }
.cvpo-rarity-cine small { color: var(--cvpo-rarity); font: 800 10px/1.15 system-ui,sans-serif; letter-spacing: .08em; }
.cvpo-rarity-cine strong { margin-top: 7px; overflow: hidden; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; }
.cvpo-stage.is-rarity-callout .cvpo-rarity-cine > div { animation: cvpo-v3-callout 1.45s cubic-bezier(.16,1,.3,1) both; }


.cvpo-main.is-immersive .cvpo-stage.is-result .cvpo-stage-world {
    display: block;
    overflow: auto;
    padding: 38px clamp(24px,6vw,88px) 44px;
    scrollbar-width: thin;
}
.cvpo-main.is-immersive .cvpo-stage.is-result .cvpo-result { width: min(1180px,100%); margin: 0 auto; }
.cvpo-result-item.is-tier-super .cvpo-card-crop { box-shadow: 0 0 0 1px #ffe18b,0 0 30px rgba(255,204,75,.22); }
.cvpo-result-item.is-tier-mythic .cvpo-card-crop { box-shadow: 0 0 0 2px #fff4b7,0 0 28px rgba(255,99,217,.36),0 0 55px rgba(79,202,255,.24); }

@keyframes cvpo-v3-console-enter {
    0% { opacity: 0; transform: scale(1.025); filter: blur(8px); }
    42% { opacity: 1; }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes cvpo-v3-speed-pulse {
    0% { opacity: 0; transform: scale(.88); }
    28% { opacity: .82; }
    100% { opacity: 0; transform: scale(1.05); }
}
@keyframes cvpo-v3-callout {
    0% { opacity: 0; transform: translateX(24px); }
    18%,72% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(-12px); }
}

@media (max-width: 760px) {
    .cvpo-main.is-immersive .cvpo-console { grid-template-rows: 78px minmax(0,1fr) 52px; }
    .cvpo-main.is-immersive .cvpo-console-head {
        grid-template-columns: 38px minmax(0,1fr);
        grid-template-rows: 38px 20px;
        gap: 4px 10px;
        height: 78px;
        padding: 8px 12px;
    }
    .cvpo-main.is-immersive .cvpo-back-lobby { grid-row: 1; width: 38px; min-height: 36px; padding: 0; justify-content: center; }
    .cvpo-main.is-immersive .cvpo-back-lobby span { display: none; }
    .cvpo-main.is-immersive .cvpo-console-title { grid-row: 1; }
    .cvpo-main.is-immersive .cvpo-console-title .cvpo-game { display: none; }.cvpo-main.is-immersive .cvpo-console-title h2,
.cvpo-main.is-immersive .cvpo-console-title .cvpo-console-name { margin: 0; font-size: 15px; }.cvpo-main.is-immersive .cvpo-console-title h2 span,
.cvpo-main.is-immersive .cvpo-console-title .cvpo-console-name span { padding: 3px 6px; font-size: 8px; vertical-align: .1em; }
    .cvpo-main.is-immersive .cvpo-progress { grid-row: 2; grid-column: 1/-1; display: grid; grid-template-columns: auto auto minmax(0,1fr); gap: 7px; align-items: center; text-align: left; }
    .cvpo-main.is-immersive .cvpo-progress-track { margin: 0; }
    .cvpo-main.is-immersive .cvpo-stage-world {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        padding: 62px 12px 12px;
    }
    .cvpo-main.is-immersive .cvpo-stage-copy,
    .cvpo-main.is-immersive .cvpo-stage.is-playing .cvpo-stage-copy {
        position: absolute;
        top: 54px;
        left: 18px;
        width: calc(100% - 36px);
        max-width: none;
        padding: 0;
        text-align: center;
        pointer-events: none;
    }.cvpo-main.is-immersive .cvpo-stage-copy h3,
.cvpo-main.is-immersive .cvpo-stage.is-playing .cvpo-stage-copy h3,
.cvpo-main.is-immersive .cvpo-stage-copy .cvpo-stage-title,
.cvpo-main.is-immersive .cvpo-stage.is-playing .cvpo-stage-copy .cvpo-stage-title { margin: 5px 0 0; font-size: 20px; }
    .cvpo-main.is-immersive .cvpo-stage-copy p:last-child { display: none; }
    .cvpo-main.is-immersive .cvpo-pack-area,
    .cvpo-main.is-immersive .cvpo-reveal,
    .cvpo-main.is-immersive .cvpo-stage.is-playing .cvpo-pack-area,
    .cvpo-main.is-immersive .cvpo-stage.is-playing .cvpo-reveal { grid-column: 1; grid-row: 1; height: 100%; min-height: 0 !important; }
    /* Card reveal on a phone: one column. The price badge, the deck and the
       meta strip are a single group with fixed gaps (badge 18px above the
       card, meta 32px below it), the group is centred in the space between the
       heading and the bar, and the deck takes whatever height that space
       leaves (see the deck rule further down: between its base size and 1.85x
       of it, smaller only when the space is not there). So a taller frame
       shows a bigger card instead of a hole between heading and price. The
       reveal's top padding is the heading (30px into the reveal) plus the
       badge that hangs 79px above the deck plus 16px air. */
    .cvpo-main.is-immersive .cvpo-stage.is-playing .cvpo-reveal {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 125px 0 16px;
        box-sizing: border-box;
    }
    .cvpo-main.is-immersive .cvpo-stage.is-playing .cvpo-card-meta {
        position: static;
        flex: 0 0 auto;
        margin-top: 44px;
        transform: translateY(10px);
    }
    .cvpo-main.is-immersive .cvpo-stage.is-playing.has-card .cvpo-card-meta { transform: none; }
    /* Space left for the deck = viewport - head 78 - bar 52 - world padding 74
       - reveal padding 141 - meta 108 = 100dvh - 453px (bar 36 on air). */
    .cvpo-main.is-live { --cvpo-deck-room: calc(100dvh - 437px); }
    .cvpo-main.is-immersive .cvpo-actionbar { display: flex; height: 52px; padding: 8px 12px; }
    .cvpo-main.is-immersive .cvpo-actionbar > p { order: initial; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .cvpo-main.is-immersive .cvpo-direct-badge { margin-left: auto; }
    .cvpo-main.is-immersive .cvpo-pack-shadow { bottom: 42px; }
    .cvpo-rarity-cine > div { right: 15px; bottom: 7%; left: 15px; width: auto; text-align: center; }
    .cvpo-speed-field i { left: 50%; }
    .cvpo-main.is-immersive .cvpo-stage.is-result .cvpo-stage-world { display: block; padding: 28px 14px 36px; }
}

@media (min-width: 761px) and (max-height: 720px) {
    .cvpo-main.is-immersive .cvpo-console { grid-template-rows: 68px minmax(0,1fr) 52px; }
    .cvpo-main.is-immersive .cvpo-console-head { height: 68px; padding-top: 7px; padding-bottom: 7px; }
    .cvpo-main.is-immersive .cvpo-actionbar { height: 52px; }
    .cvpo-main.is-immersive .cvpo-stage-world { padding-top: 44px; padding-bottom: 16px; }
    .cvpo-main.is-immersive .cvpo-pack { transform: rotateX(var(--cvpo-rx,-2deg)) rotateY(var(--cvpo-ry,-7deg)) scale(.96); }
    .cvpo-main.is-immersive .cvpo-extract-stack,
    .cvpo-main.is-immersive .cvpo-card-deck { scale: .97; }
}

@media (min-width: 761px) {
    .cvpo-main.is-immersive[data-game-theme="pokemon"] .cvpo-pack,
    .cvpo-main.is-immersive[data-game-theme="yugioh"] .cvpo-pack { width: 292px; height: 440px; }
}

@media (prefers-reduced-motion: reduce) {
    .cvpo-main.is-immersive .cvpo-console.is-entering,
    .cvpo-stage.is-rarity-callout .cvpo-rarity-cine > div,
    .cvpo-stage.is-tearing .cvpo-speed-field,
    .cvpo-stage.is-extracting .cvpo-speed-field,
    .cvpo-stage.is-card-impact .cvpo-speed-field { animation: none !important; }
    .cvpo-cine-bars i { transition-duration: .001ms; }
}

/* Result pricing and mobile-safe result controls. */
.cvpo-card-meta {
    width: min(320px, calc(100vw - 28px));
    min-width: 0;
    gap: 9px;
    padding: 10px 11px;
}

.cvpo-card-meta > span { flex: 0 0 auto; }
.cvpo-card-meta-copy { flex: 1 1 auto; min-width: 0; }
.cvpo-card-meta .cvpo-card-market {
    flex: 0 0 auto;
    min-width: 82px;
    margin-left: auto;
    padding-left: 10px;
    border-left: 1px solid rgba(255,255,255,.13);
    text-align: right;
}
.cvpo-card-meta .cvpo-card-market small {
    margin: 0;
    color: #8292aa;
    font: 700 8px/1 ui-monospace, monospace;
    letter-spacing: .08em;
}
.cvpo-card-meta .cvpo-card-market strong {
    margin-top: 5px;
    overflow: visible;
    color: var(--cvpo-accent);
    font: 900 14px/1 ui-monospace, monospace;
    white-space: nowrap;
}
.cvpo-card-meta .cvpo-card-market strong.is-unavailable { color: #8c9bb1; font-size: 10px; }

.cvpo-card-market-badge {
    position: absolute;
    top: -79px;
    left: 50%;
    z-index: 14;
    display: block;
    min-width: min(230px, calc(100vw - 36px));
    padding: 0;
    opacity: 0;
    border: 0;
    color: #eff6ff;
    background: none;
    text-align: center;
    transform: translate(-50%, 9px) scale(.97);
    transition: opacity .24s, transform .38s cubic-bezier(.16,1,.3,1);
    pointer-events: none;
}
.cvpo-card-market-badge small {
    display: block;
    margin-bottom: 6px;
    color: #8fa0b8;
    font: 750 10px/1 system-ui, sans-serif;
    letter-spacing: .08em;
    white-space: nowrap;
    text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
.cvpo-card-market-badge strong {
    display: block;
    color: #f2f6ff;
    font: 900 clamp(25px, 8.2vw, 34px)/.9 ui-monospace, monospace;
    letter-spacing: -.055em;
    white-space: nowrap;
    text-shadow: 0 3px 12px rgba(0,0,0,.86), 0 0 18px currentColor;
}
.cvpo-card-market-badge strong.is-loading,
.cvpo-card-market-badge strong.is-unavailable { color: #8190a7; font-size: 13px; letter-spacing: 0; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.cvpo-card-market-badge strong.is-price-low { color: #f2f6ff; }
.cvpo-card-market-badge strong.is-price-mid { color: #72d4ff; }
.cvpo-card-market-badge strong.is-price-high { color: #c79cff; }
.cvpo-card-market-badge strong.is-price-gold {
    color: #ffd66f;
    background: linear-gradient(180deg, #fff6bd 0%, #ffd76f 42%, #e6a72e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.78)) drop-shadow(0 0 9px rgba(255,199,73,.34));
    text-shadow: none;
}
.cvpo-card-market-badge strong.is-price-wide { font-size: clamp(23px, 7.2vw, 30px); letter-spacing: -.07em; }
.cvpo-card-market-badge time {
    display: block;
    margin-top: 7px;
    color: #71839d;
    font: 650 8px/1 ui-monospace, monospace;
    letter-spacing: .06em;
    white-space: nowrap;
    text-shadow: 0 2px 7px rgba(0,0,0,.9);
}
.cvpo-card-market-badge time[hidden] { display: none; }
.cvpo-stage.has-card .cvpo-card-market-badge { opacity: 1; transform: translate(-50%, 0) scale(1); }

.cvpo-main.is-immersive .cvpo-deck-count { display: none; }
.cvpo-main.is-immersive .cvpo-card-cue {
    bottom: -27px;
    gap: 0;
    opacity: .52;
}
.cvpo-main.is-immersive .cvpo-card-cue span { display: none; }
.cvpo-main.is-immersive .cvpo-card-cue i { width: 68px; opacity: .72; }
.cvpo-main.is-immersive .cvpo-stage.is-cards .cvpo-stage-copy { opacity: .58; }.cvpo-main.is-immersive .cvpo-stage.is-cards .cvpo-stage-copy h3,
.cvpo-main.is-immersive .cvpo-stage.is-cards .cvpo-stage-copy .cvpo-stage-title {
    margin-top: 6px;
    font-size: clamp(14px, 1.6vw, 19px);
    letter-spacing: .01em;
}

.cvpo-main.is-immersive .cvpo-stage.is-result .cvpo-stage-copy,
.cvpo-main.is-immersive .cvpo-stage.is-result .cvpo-pack-area,
.cvpo-main.is-immersive .cvpo-stage.is-result .cvpo-reveal,
.cvpo-main.is-immersive .cvpo-stage.is-result .cvpo-scene-hud {
    display: none !important;
}

.cvpo-result-item {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform .22s ease, filter .22s ease;
}
.cvpo-result-item[href]:hover { filter: brightness(1.08); transform: translateY(-3px); }
.cvpo-result-item[href]:focus-visible { outline: 2px solid var(--cvpo-accent); outline-offset: 5px; }
.cvpo-result-caption { padding-top: 9px; }
.cvpo-result-item .cvpo-result-price {
    display: block;
    margin-top: 6px;
    color: var(--cvpo-accent);
    font: normal 900 12px/1.2 ui-monospace, monospace;
    white-space: nowrap;
}
.cvpo-result-item .cvpo-result-price::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: #7f90a9;
    font: 700 8px/1 system-ui,sans-serif;
    letter-spacing: .05em;
}
.cvpo-result-item .cvpo-result-price.is-loading,
.cvpo-result-item .cvpo-result-price.is-unavailable { color: #8291a7; font-size: 9px; }

.cvpo-result-total { min-width: 150px; }
.cvpo-result-total > strong { color: var(--cvpo-accent); font: 900 27px/1 ui-monospace, monospace; }
.cvpo-result-total > small {
    display: block;
    min-height: 13px;
    margin-top: 7px;
    color: #75869f;
    font: 8px/1.3 ui-monospace, monospace;
}

.cvpo-result-back {
    min-height: 50px;
    padding: 0 20px;
    border: 0;
    color: var(--cvpo-ink);
    background: #edf1f5;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.cvpo-result-back[hidden] { display: none; }
.cvpo-result-back:focus-visible { outline: 3px solid color-mix(in srgb, var(--cvpo-accent) 35%, transparent); outline-offset: 3px; }

.cvpo-main.is-immersive.is-result-view .cvpo-console { grid-template-rows: 76px minmax(0,1fr) 72px; }
.cvpo-main.is-immersive.is-result-view .cvpo-actionbar {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 9px;
    height: 72px;
    padding: 9px 12px;
}
.cvpo-main.is-immersive.is-result-view .cvpo-actionbar > p,
.cvpo-main.is-immersive.is-result-view .cvpo-direct-badge { display: none; }
.cvpo-main.is-immersive.is-result-view .cvpo-reset,
.cvpo-main.is-immersive.is-result-view .cvpo-result-back {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    height: 52px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.14);
    color: #f5f8ff;
    font-size: 12px;
    white-space: nowrap;
    word-break: keep-all;
}
.cvpo-main.is-immersive.is-result-view .cvpo-reset {
    border-color: color-mix(in srgb, var(--cvpo-accent) 62%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--cvpo-accent) 33%, #091323), #10182a);
    box-shadow: 0 0 22px color-mix(in srgb, var(--cvpo-accent) 12%, transparent);
}
.cvpo-main.is-immersive.is-result-view .cvpo-result-back { background: rgba(255,255,255,.055); }

@media (max-width: 760px) {
    .cvpo-main.is-immersive.is-result-view .cvpo-console { grid-template-rows: 78px minmax(0,1fr) 72px; }
    .cvpo-main.is-immersive .cvpo-stage.is-result .cvpo-stage-world { padding: 22px 14px 30px; }
    .cvpo-result-title { margin-bottom: 18px; }.cvpo-result-title h3,
.cvpo-result-title h4,
.cvpo-result-title .cvpo-result-heading { font-size: 25px; }
    .cvpo-result-grid { column-gap: 9px; row-gap: 15px; }
    .cvpo-result-item strong { font-size: 10px; }
    .cvpo-result-item span { font-size: 8px; }
    .cvpo-result-item .cvpo-result-price { font-size: 11px; }
    .cvpo-result-foot { margin-top: 23px; padding-top: 18px; }
}

@media (max-width: 380px) {
    .cvpo-card-meta { width: calc(100vw - 18px); gap: 7px; padding: 9px; }
    .cvpo-card-meta > span { min-width: 36px; height: 38px; }
    .cvpo-card-meta .cvpo-card-market { min-width: 75px; padding-left: 7px; }
    .cvpo-card-meta .cvpo-card-market strong { font-size: 12px; }
    .cvpo-card-market-badge { top: -72px; }
    .cvpo-card-market-badge strong { font-size: 25px; }
    .cvpo-card-market-badge strong.is-price-wide { font-size: 22px; }
    .cvpo-main.is-immersive.is-result-view .cvpo-reset,
    .cvpo-main.is-immersive.is-result-view .cvpo-result-back { padding: 0 5px; font-size: 11px; }
}

/* Pack-specific geometry calibration. The selected catalog entry supplies these
   variables so one irregular source image never changes every other pack. */
.cvpo-main.is-immersive .cvpo-pack {
    width: var(--cvpo-pack-width, 246px);
    height: var(--cvpo-pack-height, 470px);
}

.cvpo-main.is-immersive .cvpo-extract-stack,
.cvpo-main.is-immersive .cvpo-card-deck {
    width: var(--cvpo-deck-width, 232px);
    height: var(--cvpo-deck-height, 324px);
}

.cvpo-main.is-immersive .cvpo-card { width: 100%; height: 100%; }
.cvpo-main.is-immersive .cvpo-card-stack i { width: auto; height: auto; }

.cvpo-main.is-immersive[data-game-theme="pokemon"] .cvpo-pack img {
    transform: scale(var(--cvpo-pack-image-scale, 1));
}

@media (max-width: 760px) {
    .cvpo-main.is-immersive .cvpo-pack {
        width: var(--cvpo-mobile-pack-width, var(--cvpo-pack-width, 214px));
        height: var(--cvpo-mobile-pack-height, var(--cvpo-pack-height, 410px));
    }

    /* Sizes follow the room the reveal leaves (see the reveal rule above); the
       width follows through the card aspect. The stack being pulled out of the
       pack keeps its base size (it must stay smaller than the pack); the deck
       in the reveal grows into the room, up to 1.85x its base size. */
    .cvpo-main.is-immersive .cvpo-extract-stack {
        width: auto;
        height: min(var(--cvpo-mobile-deck-height, var(--cvpo-deck-height, 257px)), max(150px, var(--cvpo-deck-room, calc(100dvh - 453px))));
        aspect-ratio: 63 / 88;
    }
    .cvpo-main.is-immersive .cvpo-card-deck {
        width: auto;
        height: clamp(150px, var(--cvpo-deck-room, calc(100dvh - 453px)), calc(var(--cvpo-mobile-deck-height, var(--cvpo-deck-height, 257px)) * 1.85));
        aspect-ratio: 63 / 88;
    }
}

/* V3.2: use the real reverse design for each game and remove the dark faux
   pack layers that were visible around a still-sealed pack. */
.cvpo-main.is-immersive .cvpo-pack-depth { display: none; }

.cvpo-main.is-immersive .cvpo-card-back,
.cvpo-main.is-immersive .cvpo-card-face-back,
.cvpo-main.is-immersive .cvpo-deck-depth i,
.cvpo-main.is-immersive .cvpo-card-stack i {
    border: 0;
    background-color: #081326;
    background-image: var(--cvpo-card-back-image);
    background-position: var(--cvpo-card-back-position, center);
    background-repeat: no-repeat;
    background-size: var(--cvpo-card-back-size, 100% 100%);
}

.cvpo-main.is-immersive .cvpo-card-back,
.cvpo-main.is-immersive .cvpo-card-face-back {
    box-shadow: 0 25px 60px rgba(0,0,0,.48);
}

.cvpo-main.is-immersive .cvpo-card-back::before,
.cvpo-main.is-immersive .cvpo-card-face-back::before {
    inset: 0;
    border: 0;
    border-radius: inherit;
    background: linear-gradient(125deg, transparent 31%, rgba(255,255,255,.1) 46%, transparent 60%);
    background-size: 250% 100%;
}

.cvpo-main.is-immersive .cvpo-card-back b,
.cvpo-main.is-immersive .cvpo-card-back small,
.cvpo-main.is-immersive .cvpo-card-back .cvpo-back-orbit,
.cvpo-main.is-immersive .cvpo-card-face-back b,
.cvpo-main.is-immersive .cvpo-card-face-back small,
.cvpo-main.is-immersive .cvpo-card-face-back .cvpo-back-orbit,
.cvpo-main.is-immersive .cvpo-extract-stack .cvpo-card-back::after { display: none; }

.cvpo-main.is-immersive .cvpo-stage.is-ready-to-pull .cvpo-card-back {
    box-shadow: 0 -8px 30px color-mix(in srgb,var(--cvpo-accent) 18%,transparent), 0 25px 60px rgba(0,0,0,.48);
}

/* Lift the top card first, then turn it in the user's swipe direction and
   settle it back onto the deck instead of rotating as a flat panel. */
.cvpo-main.is-immersive .cvpo-card-flipper {
    transition: transform .66s cubic-bezier(.12,.82,.18,1), filter .32s;
}

.cvpo-main.is-immersive .cvpo-card.is-face-up .cvpo-card-flipper {
    transform: rotateY(var(--cvpo-flip-angle, 180deg)) translateZ(12px) scale(1.012);
}

.cvpo-main.is-immersive .cvpo-card.is-peeling {
    transform: translate3d(var(--cvpo-peel-x,18px),-10px,52px) rotateZ(var(--cvpo-peel-r,-3.5deg)) scale(1.035);
    filter: drop-shadow(0 28px 24px rgba(0,0,0,.42));
    transition: transform .2s cubic-bezier(.16,1,.3,1), filter .2s;
}

.cvpo-main.is-immersive .cvpo-card.is-turning {
    transform: translate3d(0,-5px,34px) rotateZ(0) scale(1.02);
    transition: transform .66s cubic-bezier(.12,.82,.18,1), filter .42s;
}

/* Keep every cut-related layer on the same fixed seam. */
.cvpo-main.is-immersive .cvpo-pack-body {
    clip-path: inset(var(--cvpo-cut-line,10%) 0 0 0);
    transition: transform .2s, filter .25s;
}

.cvpo-main.is-immersive .cvpo-pack::after {
    top: calc(var(--cvpo-cut-line,10%) - 1px);
}

/* Transparent cutout packs must not reveal rectangular foil layers outside
   their alpha silhouette. */
.cvpo-main.is-immersive[data-game-theme="pokemon"] .cvpo-pack-body::after,
.cvpo-main.is-immersive[data-game-theme="pokemon"] .cvpo-pack-shine,
.cvpo-main.is-immersive[data-game-theme="pokemon"] .cvpo-pack-material,
.cvpo-main.is-immersive[data-game-theme="pokemon"] .cvpo-pack-pressure,
.cvpo-main.is-immersive[data-game-theme="yugioh"] .cvpo-pack-body::after,
.cvpo-main.is-immersive[data-game-theme="yugioh"] .cvpo-pack-shine,
.cvpo-main.is-immersive[data-game-theme="yugioh"] .cvpo-pack-material,
.cvpo-main.is-immersive[data-game-theme="yugioh"] .cvpo-pack-pressure {
    -webkit-mask-image: var(--cvpo-pack-mask-image);
    mask-image: var(--cvpo-pack-mask-image);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.cvpo-main.is-immersive .cvpo-pack-edge { display: none; }

.cvpo-main.is-immersive .cvpo-extract-stack {
    width: var(--cvpo-extract-width, var(--cvpo-deck-width,232px));
    height: var(--cvpo-extract-height, var(--cvpo-deck-height,324px));
}

@media (max-width: 760px) {
    .cvpo-main.is-immersive .cvpo-extract-stack {
        width: var(--cvpo-mobile-extract-width, var(--cvpo-mobile-deck-width,184px));
        height: var(--cvpo-mobile-extract-height, var(--cvpo-mobile-deck-height,257px));
    }
}

/* V3.5: cards leave the pack face-up. The current face slides away and the
   next face is already waiting underneath, so no card performs an impossible
   back-to-front rotation in place. */
.cvpo-main.is-immersive .cvpo-stage.is-front-stack .cvpo-card-flipper,
.cvpo-main.is-immersive .cvpo-stage.is-front-stack .cvpo-card.is-face-up .cvpo-card-flipper {
    transform: rotateY(180deg) translateZ(10px) scale(1.014);
    transition: none;
}

.cvpo-main.is-immersive .cvpo-stage.is-front-stack .cvpo-card-face-back {
    visibility: hidden;
    opacity: 0;
}

.cvpo-main.is-immersive .cvpo-stage.is-front-stack .cvpo-card-face-front {
    visibility: visible;
    opacity: 1;
}

.cvpo-main.is-immersive .cvpo-card.is-front-dealing {
    opacity: 0;
    transform: translate3d(var(--cvpo-deal-x,0px),18px,8px) rotateZ(var(--cvpo-deal-r,0deg)) scale(.955);
    filter: blur(1.5px) brightness(.82);
    transition: none;
}

.cvpo-main.is-immersive .cvpo-card.is-front-settling {
    transform: translate3d(0,-4px,28px) rotateZ(0) scale(1.012);
    filter: drop-shadow(0 22px 20px rgba(0,0,0,.34));
    transition: transform .46s cubic-bezier(.12,.82,.18,1), filter .36s;
}

.cvpo-main.is-immersive .cvpo-stage.is-front-stack .cvpo-card-stack i {
    background-position: center;
    background-size: cover;
    filter: saturate(.86) brightness(.82);
}

.cvpo-main.is-immersive .cvpo-stage.is-front-stack.is-final-card .cvpo-card-stack i {
    opacity: 0;
}

/* Lobby sources are normalized to the One Piece 670px canvas. Keep the same
   generic choice/focus rules for every game instead of game-specific scales. */

/* Do not expose the card art during the seal-break frames. It becomes visible
   only when the cut piece has finished leaving and the pull phase begins. */
.cvpo-main.is-immersive .cvpo-stage.is-opened:not(.is-ready-to-pull) .cvpo-extract-stack {
    opacity: 0;
}

.cvpo-main.is-immersive .cvpo-stage.is-ready-to-pull .cvpo-extract-stack {
    opacity: 1;
}

/* Real pack art already contains its own crimp. A synthetic full-width ridge
   leaks outside transparent pack silhouettes and must never be drawn. */
.cvpo-pack-ridge { display: none !important; }

/* Market-value reveal: restrained anticipation, then a price-tier payoff. */
.cvpo-stage.is-value-suspense .cvpo-card {
    filter: brightness(.38) saturate(.55) contrast(1.05);
    transform: translate3d(0,2px,12px) scale(.985);
    transition: transform .2s ease, filter .2s ease;
}
.cvpo-stage.is-value-suspense .cvpo-card-market-badge { opacity: 0; }

.cvpo-stage.is-rare .cvpo-card-halo {
    opacity: .92;
    background: radial-gradient(circle, color-mix(in srgb,var(--cvpo-rarity) 64%,transparent), transparent 66%);
    filter: blur(30px);
}
.cvpo-stage.is-rare .cvpo-card img {
    box-shadow:
        0 0 0 1px color-mix(in srgb,var(--cvpo-rarity) 78%,white),
        0 0 38px color-mix(in srgb,var(--cvpo-rarity) 38%,transparent),
        0 28px 64px rgba(0,0,0,.62);
}
.cvpo-stage.is-rarity-callout .cvpo-card-market-badge strong {
    animation: cvpo-value-price-land .72s cubic-bezier(.16,1,.3,1) both;
}
.cvpo-stage[data-payoff-tier="mythic"].is-payoff-after .cvpo-card-halo,
.cvpo-stage[data-payoff-tier="god"].is-payoff-after .cvpo-card-halo {
    animation: cvpo-value-halo 2.2s ease-in-out infinite;
}

@keyframes cvpo-value-price-land {
    0% { opacity: 0; transform: translateY(9px) scale(.82); filter: blur(3px); }
    55% { opacity: 1; transform: translateY(-2px) scale(1.08); filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes cvpo-value-halo {
    0%,100% { opacity: .68; transform: scale(.92) rotate(-2deg); }
    50% { opacity: 1; transform: scale(1.09) rotate(2deg); }
}

/* A god pack is announced only after the first face-up card lands. */
.cvpo-stage.is-god-pack {
    --cvpo-rarity: #ffd66e;
}
.cvpo-stage.is-god-pack .cvpo-stage-kicker,
.cvpo-stage.is-god-pack .cvpo-scene-mode {
    color: #ffe5a0;
    text-shadow: 0 0 18px rgba(255,204,91,.46);
}
.cvpo-stage.is-god-pack .cvpo-card-deck::after {
    opacity: .88;
    background: conic-gradient(from 0deg, transparent, rgba(255,221,125,.34), transparent 18%, rgba(109,211,255,.2), transparent 38%);
    animation-duration: 5.6s;
}

/* Explicit QA URLs expose every otherwise-random payoff without changing the
   normal simulator. The bar is intentionally compact and is never rendered
   unless cvpo_demo is present. */
.cvpo-demo-panel {
    position: fixed;
    z-index: 1000002;
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom,0px));
    display: grid;
    grid-template-columns: minmax(92px,1fr) auto auto auto;
    align-items: center;
    gap: 5px;
    width: min(520px,calc(100vw - 24px));
    padding: 7px;
    border: 1px solid rgba(155,183,222,.28);
    background: rgba(3,10,25,.92);
    box-shadow: 0 12px 34px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.04);
    backdrop-filter: blur(14px);
    color: #fff;
}
.cvpo-demo-panel span { min-width: 0; padding: 0 4px; line-height: 1.15; }
.cvpo-demo-panel span small { display: block; color: #89a1c4; font: 600 8px/1.2 monospace; letter-spacing: .08em; }
.cvpo-demo-panel span strong { display: block; overflow: hidden; margin-top: 2px; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.cvpo-demo-panel a {
    padding: 8px 7px;
    border: 1px solid rgba(142,172,216,.2);
    color: #b9c9e1;
    font-size: 10px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.cvpo-demo-panel a.is-active {
    border-color: color-mix(in srgb,var(--cvpo-accent) 68%,white);
    background: color-mix(in srgb,var(--cvpo-accent) 18%,transparent);
    color: #fff;
}

@media (max-width: 430px) {
    .cvpo-demo-panel { right: 8px; width: calc(100vw - 16px); gap: 3px; padding: 5px; }
    .cvpo-demo-panel a { padding: 7px 5px; font-size: 9px; }
    .cvpo-demo-panel span strong { font-size: 10px; }
}

/* The seal itself foreshadows the best value in the pack. This is driven by
   market-price thresholds, while GOD PACK remains a separate top tier. */
.cvpo-stage[data-pack-tier="rare"] { --cvpo-seal-color: #75dfff; }
.cvpo-stage[data-pack-tier="super"] { --cvpo-seal-color: #c79cff; }
.cvpo-stage[data-pack-tier="mythic"],
.cvpo-stage[data-pack-tier="god"] { --cvpo-seal-color: #ffd66f; }

.cvpo-stage[data-pack-tier="rare"].is-seal-omen .cvpo-pack,
.cvpo-stage[data-pack-tier="super"].is-seal-omen .cvpo-pack,
.cvpo-stage[data-pack-tier="mythic"].is-seal-omen .cvpo-pack,
.cvpo-stage[data-pack-tier="god"].is-seal-omen .cvpo-pack {
    filter: brightness(.84) saturate(1.16) drop-shadow(0 0 20px color-mix(in srgb,var(--cvpo-seal-color) 38%,transparent));
}
.cvpo-stage[data-pack-tier="super"].is-charging .cvpo-pack,
.cvpo-stage[data-pack-tier="mythic"].is-charging .cvpo-pack,
.cvpo-stage[data-pack-tier="god"].is-charging .cvpo-pack {
    animation: cvpo-seal-weight .62s ease-in-out infinite alternate;
}
.cvpo-stage[data-pack-tier="god"].is-charging .cvpo-pack {
    animation-duration: .46s;
    filter: brightness(.68) saturate(1.28) drop-shadow(0 0 34px rgba(255,211,92,.62)) drop-shadow(0 0 72px rgba(107,218,255,.24));
}
.cvpo-stage[data-pack-tier="mythic"].is-seal-omen {
    box-shadow: inset 0 0 120px rgba(255,202,84,.08);
}
.cvpo-stage[data-pack-tier="god"].is-seal-omen {
    background:
        radial-gradient(circle at 50% 48%,rgba(255,198,67,.18),transparent 34%),
        radial-gradient(circle at 76% 42%,rgba(102,220,255,.1),transparent 27%),
        linear-gradient(135deg,#02050c 0%,#0d0a12 50%,#020610 100%);
    box-shadow: inset 0 0 150px rgba(255,190,47,.15),inset 0 0 0 1px rgba(255,224,139,.18);
}
.cvpo-stage[data-pack-tier="god"].is-seal-omen .cvpo-scene-mode,
.cvpo-stage[data-pack-tier="god"].is-seal-omen .cvpo-stage-kicker {
    color: #ffe39a;
    text-shadow: 0 0 14px rgba(255,211,98,.72),0 0 32px rgba(255,190,60,.3);
}
.cvpo-stage[data-pack-tier="mythic"].is-charging .cvpo-speed-field,
.cvpo-stage[data-pack-tier="god"].is-charging .cvpo-speed-field {
    opacity: .38;
    animation: cvpo-v3-speed-pulse .72s ease-out infinite alternate;
}
.cvpo-stage[data-pack-tier="god"].is-charging .cvpo-speed-field { opacity: .58; }
.cvpo-stage[data-pack-tier="rare"].is-seal-omen .cvpo-pack-area::before,
.cvpo-stage[data-pack-tier="super"].is-seal-omen .cvpo-pack-area::before,
.cvpo-stage[data-pack-tier="mythic"].is-seal-omen .cvpo-pack-area::before,
.cvpo-stage[data-pack-tier="god"].is-seal-omen .cvpo-pack-area::before {
    opacity: .72;
    background: radial-gradient(circle,color-mix(in srgb,var(--cvpo-seal-color) 30%,transparent),color-mix(in srgb,var(--cvpo-seal-color) 8%,transparent) 38%,transparent 69%);
    animation-duration: 1.7s;
}
.cvpo-stage[data-pack-tier="god"].is-seal-omen .cvpo-pack-area::before {
    opacity: 1;
    background:
        repeating-conic-gradient(from 0deg,transparent 0 7deg,rgba(255,226,139,.12) 7.4deg 8deg,transparent 8.4deg 16deg),
        radial-gradient(circle,rgba(255,211,91,.34),rgba(99,215,255,.09) 40%,transparent 70%);
    animation: cvpo-god-seal-field 3.6s linear infinite;
}
.cvpo-stage.is-seal-omen .cvpo-vignette { opacity: .44; }
.cvpo-stage[data-pack-tier="mythic"].is-seal-omen .cvpo-vignette,
.cvpo-stage[data-pack-tier="god"].is-seal-omen .cvpo-vignette { opacity: .62; }
.cvpo-stage[data-pack-tier="rare"] .cvpo-pack::after,
.cvpo-stage[data-pack-tier="super"] .cvpo-pack::after,
.cvpo-stage[data-pack-tier="mythic"] .cvpo-pack::after,
.cvpo-stage[data-pack-tier="god"] .cvpo-pack::after {
    background: linear-gradient(90deg,transparent,var(--cvpo-seal-color) 14%,#fff 50%,var(--cvpo-seal-color) 86%,transparent);
    box-shadow: 0 0 9px #fff,0 0 26px var(--cvpo-seal-color),0 0 58px color-mix(in srgb,var(--cvpo-seal-color) 58%,transparent);
}

.cvpo-stage.is-seal-flash .cvpo-flash { animation: cvpo-seal-value-flash .9s cubic-bezier(.16,1,.3,1) both; }
.cvpo-stage[data-pack-tier="rare"].is-seal-flash .cvpo-flash { background: radial-gradient(circle at 64% 43%,#fff 0,rgba(117,223,255,.72) 8%,transparent 34%); }
.cvpo-stage[data-pack-tier="super"].is-seal-flash .cvpo-flash { background: radial-gradient(circle at 64% 43%,#fff 0,rgba(199,156,255,.8) 9%,transparent 38%); }
.cvpo-stage[data-pack-tier="mythic"].is-seal-flash .cvpo-flash,
.cvpo-stage[data-pack-tier="god"].is-seal-flash .cvpo-flash { background: radial-gradient(circle at 64% 43%,#fff 0,rgba(255,218,105,.9) 9%,rgba(111,220,255,.22) 23%,transparent 43%); }
.cvpo-stage[data-pack-tier="god"].is-seal-flash .cvpo-flash { animation-duration: 1.15s; }

.cvpo-stage.is-heavy-slice-impact { animation: cvpo-camera-heavy-slice .78s cubic-bezier(.12,.72,.18,1); }
.cvpo-stage[data-pack-tier="god"].is-heavy-slice-impact { animation-name: cvpo-camera-god-slice; animation-duration: .96s; }

@keyframes cvpo-seal-weight {
    from { filter: brightness(.72) saturate(1.1) drop-shadow(0 0 14px color-mix(in srgb,var(--cvpo-seal-color) 28%,transparent)); }
    to { filter: brightness(1.02) saturate(1.3) drop-shadow(0 0 38px color-mix(in srgb,var(--cvpo-seal-color) 62%,transparent)); }
}
@keyframes cvpo-god-seal-field {
    from { transform: translate(-50%,-50%) rotate(0deg) scale(.94); }
    50% { transform: translate(-50%,-50%) rotate(180deg) scale(1.07); }
    to { transform: translate(-50%,-50%) rotate(360deg) scale(.94); }
}
@keyframes cvpo-seal-value-flash {
    0% { opacity: 0; transform: scale(.58); }
    13% { opacity: .98; }
    36% { opacity: .38; }
    100% { opacity: 0; transform: scale(1.18); }
}
@keyframes cvpo-camera-heavy-slice {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    10% { transform: translate3d(-8px,2px,0) scale(1.008); }
    24% { transform: translate3d(10px,-3px,0) scale(1.014); }
    41% { transform: translate3d(-6px,1px,0) scale(1.008); }
    62% { transform: translate3d(4px,-1px,0) scale(1.004); }
}
@keyframes cvpo-camera-god-slice {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    8% { transform: translate3d(-11px,3px,0) scale(1.012); }
    19% { transform: translate3d(13px,-4px,0) scale(1.022); }
    34% { transform: translate3d(-9px,2px,0) scale(1.014); }
    52% { transform: translate3d(7px,-2px,0) scale(1.008); }
    72% { transform: translate3d(-3px,1px,0) scale(1.003); }
}

@media (prefers-reduced-motion: reduce) {
    .cvpo-stage[data-pack-tier].is-charging .cvpo-pack,
    .cvpo-stage[data-pack-tier="god"].is-seal-omen .cvpo-pack-area::before { animation: none; }
}

/* V4 lobby: the catalog is the launcher. Six packs fill two rows and a tap
   opens the selected simulator without a second confirmation panel. */
.cvpo-lobby-content { grid-template-columns: minmax(0, 1fr); }
.cvpo-lobby-focus { display: none !important; }
.cvpo-pack-browser { width: 100%; }

.cvpo-game-tab-visual {
    position: relative;
    display: block;
    width: 38px;
    height: 53px;
    flex: 0 0 38px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    background: #07101f;
    box-shadow: 0 9px 18px rgba(0,0,0,.34);
    transform: perspective(240px) rotateY(-5deg);
    transition: border-color .25s, box-shadow .25s, transform .25s;
}
.cvpo-game-tab-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cvpo-game-tab-copy { min-width: 0; }
.cvpo-game-tab.is-selected .cvpo-game-tab-visual {
    border-color: color-mix(in srgb, var(--cvpo-accent) 72%, white 10%);
    box-shadow: 0 0 20px color-mix(in srgb, var(--cvpo-accent) 25%, transparent), 0 10px 20px rgba(0,0,0,.4);
    transform: perspective(240px) rotateY(0) translateY(-1px);
}

.cvpo-result-share {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto;
    gap: 13px 24px;
    align-items: center;
    margin-top: 22px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.13);
    background: linear-gradient(135deg, color-mix(in srgb,var(--cvpo-accent) 8%,rgba(6,15,31,.84)), rgba(4,11,24,.84));
}
.cvpo-result-share-copy span,
.cvpo-result-share-copy strong { display: block; }
.cvpo-result-share-copy span { color: var(--cvpo-accent); font: 800 8px/1 ui-monospace,monospace; letter-spacing: .16em; }
.cvpo-result-share-copy strong { margin-top: 7px; color: #edf4ff; font-size: 14px; }
.cvpo-result-share-actions { display: grid; grid-template-columns: minmax(122px,1.15fr) 76px minmax(108px,auto); gap: 8px; }
.cvpo-share-button {
    display: grid;
    place-items: center;
    min-width: 0;
    height: 42px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 3px;
    color: #fff;
    font: 800 11px/1 system-ui,sans-serif;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .2s, transform .2s, border-color .2s;
}
.cvpo-share-button:hover { filter: brightness(1.12); transform: translateY(-2px); }
.cvpo-share-button:focus-visible { outline: 2px solid var(--cvpo-accent); outline-offset: 3px; }
.cvpo-share-button.is-x {
    /* flex, not the inherited grid: grid gives the mark and the label a column
       each and pushes them to opposite ends of the button. */
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    border-color: rgba(255,255,255,.34);
    background: #05070a;
    font-size: 12px;
    letter-spacing: .02em;
}
.cvpo-share-button.is-x svg { width: 14px; height: 14px; fill: currentColor; }
.cvpo-share-button.is-x:hover { border-color: #fff; }
.cvpo-share-button.is-line { border-color: #08a946; background: #06c755; }
.cvpo-share-button.is-copy { background: rgba(255,255,255,.07); }
.cvpo-result-share-status {
    grid-column: 1 / -1;
    min-height: 12px;
    color: #91a3bc;
    font: 8px/1.3 ui-monospace,monospace;
}

@media (max-width: 760px) {
    /* スマホはカード画像が 32px になるので、列の最低幅も下げられる。 */
    .cvpo-game-tabs { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
    .cvpo-game-tab { justify-content: flex-start; gap: 9px; min-height: 82px; padding: 10px 9px; }
    .cvpo-game-tab .cvpo-game-tab-visual { display: block; width: 32px; height: 45px; flex-basis: 32px; }
    .cvpo-game-tab .cvpo-game-tab-copy { display: block; }
    .cvpo-game-tab-copy strong,
    .cvpo-game-tab-copy .cvpo-game-tab-name { display: -webkit-box; overflow: hidden; font-size: 11px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .cvpo-game-tab-copy small { display: none; }
    .cvpo-result-share { grid-template-columns: 1fr; }
    .cvpo-result-share-actions { grid-template-columns: minmax(112px,1.1fr) 70px minmax(0,1fr); }
}

/*
 * 開封の結果からデッキ見積もりへの入口。
 * ★共有の枠のすぐ下。開け終わって「で、このカード何に使うの」と思う所に置く。
 */
.cvpo-deck-cta {
    display: grid;
    gap: 5px;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.13);
    background: linear-gradient(135deg, color-mix(in srgb,var(--cvpo-accent) 12%,rgba(6,15,31,.86)), rgba(4,11,24,.86));
    color: inherit;
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.cvpo-deck-cta:hover {
    border-color: color-mix(in srgb,var(--cvpo-accent) 55%,transparent);
    transform: translateY(-2px);
}

.cvpo-deck-cta-eyebrow {
    color: var(--cvpo-accent);
    font: 800 8px/1 ui-monospace,monospace;
    letter-spacing: .16em;
}

.cvpo-deck-cta strong {
    font: 800 15px/1.5 inherit;
    color: #fff;
}

.cvpo-deck-cta small {
    font: 500 11.5px/1.6 inherit;
    color: rgba(255,255,255,.62);
}

.cvpo-deck-cta em {
    justify-self: start;
    margin-top: 7px;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--cvpo-accent);
    color: #041018;
    font: 800 12px/1 inherit;
    font-style: normal;
}

.cvpo-deck-cta em::after { content: ' →'; }

@media (max-width: 560px) {
    .cvpo-deck-cta { padding: 15px; }
    .cvpo-deck-cta strong { font-size: 14px; }
    .cvpo-deck-cta em { justify-self: stretch; text-align: center; }
}

@media (max-width: 560px) {
    .cvpo-lobby-head h1 { font-size: 27px; }
    .cvpo-game-tabs { margin: 0 12px; }
    .cvpo-game-tab { min-height: 78px; padding: 9px 6px; }
    .cvpo-game-tab .cvpo-game-tab-visual { width: 28px; height: 40px; flex-basis: 28px; }
    .cvpo-lobby-content { padding-right: 12px; padding-left: 12px; }
    .cvpo-pack-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
        padding: 4px 0 10px;
        overflow: visible;
    }
    .cvpo-pack-tile { width: auto; flex: 1 1 auto; min-width: 0; }
    .cvpo-pack-choice { width: auto; min-width: 0; }
    .cvpo-pack-choice-visual { height: 155px; }
    /* Three tiles across: the two buttons under each tile go compact. */
    .cvpo-pack-open, .cvpo-pack-vote { height: 32px; padding: 0 4px; font-size: 10px; gap: 4px; }
    .cvpo-pack-open span, .cvpo-pack-vote span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .cvpo-pack-open i { display: none; }
    .cvpo-pack-open .cvpo-label-long, .cvpo-pack-vote .cvpo-label-long { display: none; }
    .cvpo-pack-open .cvpo-label-short, .cvpo-pack-vote .cvpo-label-short { display: inline; }
    .cvpo-pack-vote i { flex: 0 0 auto; }
    .cvpo-pack-vote em { padding: 1px 4px; font-size: 9px; }
    /* With a count showing there is no room for the words: keep the dot + count. */
    .cvpo-pack-vote:has(em:not([hidden])) .cvpo-label-short { display: none; }
    .cvpo-pack-vote.is-mine .cvpo-label-short { display: inline; }
    .cvpo-pack-vote.is-mine:has(em:not([hidden])) .cvpo-label-short { display: inline; }
    .cvpo-pack-vote.is-mine .cvpo-label-short { max-width: 4.5em; }
    .cvpo-pack-choice-copy { min-height: 59px; padding: 10px 8px 11px; }
    .cvpo-pack-choice-copy strong { display: -webkit-box; white-space: normal; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .cvpo-pack-choice.is-selected { transform: none; }
    .cvpo-result-share { margin-top: 18px; padding: 14px; }
}

@media (max-width: 380px) {
    .cvpo-game-tab { gap: 5px; padding-right: 4px; padding-left: 4px; }
    .cvpo-game-tab .cvpo-game-tab-visual { width: 25px; height: 35px; flex-basis: 25px; }
    .cvpo-pack-choice-visual { height: 142px; }
    .cvpo-result-share-actions { grid-template-columns: minmax(96px,1fr) 58px minmax(0,1fr); gap: 6px; }
    .cvpo-share-button { padding: 0 8px; font-size: 10px; }
}

.cvpo-result-share.is-preparing .cvpo-share-button.is-x,
.cvpo-result-share.is-preparing .cvpo-share-button.is-line {
    opacity: .36;
    pointer-events: none;
    filter: grayscale(.4);
}

/* Shareable, noindex result permalink. */
.cvpo-page.cvpo-shared-body { min-height: 100vh; color: #edf4ff; background: #020815; }
/* The shared result is the in-app result screen rendered on the server, so it
   only needs a page shell: a width, a head strip and the surface behind it. */
.cvpo-shared-result {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(12px, 3vw, 28px) 56px;
}
.cvpo-shared-head {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 22px 4px 18px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}.cvpo-shared-head .cvpo-console-title h2,
.cvpo-shared-head .cvpo-console-title .cvpo-console-name { margin: 4px 0 0; font-size: clamp(19px, 3vw, 26px); letter-spacing: -.02em; }.cvpo-shared-head .cvpo-console-title h2 span,
.cvpo-shared-head .cvpo-console-title .cvpo-console-name span {
    display: inline-block;
    margin-right: 9px;
    padding: 4px 8px;
    color: #04121f;
    background: var(--cvpo-accent);
    font-size: .52em;
    font-weight: 800;
    letter-spacing: .08em;
    vertical-align: .12em;
}
.cvpo-shared-head .cvpo-game { margin: 0; color: #8fa4c0; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .16em; }
.cvpo-shared-when { margin: 0; color: #7f92ab; font: 500 11px/1 ui-monospace, monospace; }
.cvpo-shared-result .cvpo-result { display: block; margin-top: 26px; }
.cvpo-shared-result .cvpo-result-title h1 { margin: 7px 0 0; font-size: clamp(24px, 4vw, 30px); letter-spacing: -.02em; }
.cvpo-shared-result .cvpo-result-title p { color: var(--cvpo-accent); font: 700 10px/1 ui-monospace, monospace; letter-spacing: .18em; }
.cvpo-shared-result .cvpo-result-foot { margin-top: 26px; }
.cvpo-shared-expiry { margin: 18px 0 0; color: #6f819a; font-size: 11px; line-height: 1.7; text-align: center; }
.cvpo-shared-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 15px; }
.cvpo-shared-nav a { display: grid; place-items: center; min-height: 58px; border: 1px solid rgba(255,255,255,.13); color: #edf4ff; background: #071426; font-size: 12px; font-weight: 800; text-decoration: none; }
.cvpo-shared-nav a:first-child { border-color: rgba(75,215,208,.46); background: linear-gradient(135deg,#10343e,#0b2035); }
.cvpo-shared-expiry { margin: 16px 3px 0; color: #60738d; font-size: 9px; text-align: center; }
.cvpo-result-gone { width: min(760px,calc(100% - 34px)); margin: 80px auto; padding: 58px 44px; border: 1px solid rgba(255,255,255,.13); color: #edf4ff; background: #071326; text-align: center; }
.cvpo-result-gone > p:first-child { color: #4bd7d0; font: 800 10px/1 ui-monospace,monospace; letter-spacing: .16em; }
.cvpo-result-gone h1 { margin: 18px 0 12px; }
.cvpo-result-gone > p:not(:first-child) { color: #869ab5; }
.cvpo-result-gone a { display: inline-grid; place-items: center; min-width: 220px; min-height: 52px; margin-top: 24px; border: 1px solid rgba(75,215,208,.5); color: #fff; text-decoration: none; }

@media (max-width: 760px) {
    .cvpo-shared-result { padding-bottom: 40px; }
    .cvpo-shared-head { gap: 10px; padding: 16px 2px 14px; }
    .cvpo-shared-when { width: 100%; }
    .cvpo-shared-result .cvpo-result-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 390px) {
    .cvpo-shared-nav a { min-height: 54px; padding: 0 7px; font-size: 10px; }
}

/* ============================================================================
   Payoff layer
   One structure for every payoff — the seal break and the card reveal — built
   as four phases on the stage: is-payoff-omen (something is coming), is-payoff-
   charge (it is building), is-payoff-hit (it lands) and is-payoff-after (it
   settles). Every element below reads --cvpo-payoff-color and the phase
   classes; nothing here is tier-specific except the colour, the stamp text and
   how hard the hit is allowed to go, so a bigger tier is a different event and
   not a louder copy of a smaller one.
   ========================================================================== */
.cvpo-stage {
    --cvpo-payoff-color: #75dfff;
    --cvpo-payoff-x: 64%;
    --cvpo-payoff-y: 46%;
    --cvpo-payoff-strength: 1;
}
.cvpo-stage[data-payoff-tier="rare"]   { --cvpo-payoff-color: #75dfff; --cvpo-payoff-strength: .6; }
.cvpo-stage[data-payoff-tier="super"]  { --cvpo-payoff-color: #c79cff; --cvpo-payoff-strength: .85; }
.cvpo-stage[data-payoff-tier="mythic"] { --cvpo-payoff-color: #ffd66f; --cvpo-payoff-strength: 1; }
.cvpo-stage[data-payoff-tier="god"]    { --cvpo-payoff-color: #fff1a8; --cvpo-payoff-strength: 1.2; }

.cvpo-payoff {
    position: absolute;
    inset: 0;
    z-index: 19;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}
.cvpo-payoff > * {
    position: absolute;
    display: block;
    opacity: 0;
}

/* Omen: the room goes dark and the pack breathes. Nothing announces the tier
   yet beyond the colour of the breath. */
.cvpo-stage.is-payoff-omen .cvpo-vignette { opacity: .78; transition: opacity .45s; }
.cvpo-stage.is-payoff-omen .cvpo-stage-copy { opacity: .18; transition: opacity .45s; }
.cvpo-stage.is-payoff-omen .cvpo-pack,
.cvpo-stage.is-payoff-omen .cvpo-card {
    animation: cvpo-payoff-breathe 1.05s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes cvpo-payoff-breathe {
    0%, 100% { filter: brightness(.86) saturate(1.05) drop-shadow(0 0 0 transparent); }
    50% { filter: brightness(1.05) saturate(1.2) drop-shadow(0 0 22px color-mix(in srgb, var(--cvpo-payoff-color) 55%, transparent)); }
}

/* Charge: the breath quickens, the camera leans in, and rays start to seep
   out from behind the object. */
.cvpo-stage.is-payoff-charge .cvpo-pack,
.cvpo-stage.is-payoff-charge .cvpo-card {
    animation: cvpo-payoff-breathe .34s cubic-bezier(.4,0,.6,1) infinite;
}
.cvpo-stage.is-payoff-charge .cvpo-stage-world {
    transform: scale(1.03);
    transition: transform .55s cubic-bezier(.3,0,.2,1);
}
.cvpo-stage.is-payoff-charge .cvpo-payoff-rays,
.cvpo-stage.is-payoff-hit .cvpo-payoff-rays,
.cvpo-stage.is-payoff-after .cvpo-payoff-rays {
    top: var(--cvpo-payoff-y);
    left: var(--cvpo-payoff-x);
    width: min(140vmax, 1800px);
    aspect-ratio: 1;
    opacity: 1;
    background:
        repeating-conic-gradient(from 0deg,
            transparent 0 6deg,
            color-mix(in srgb, var(--cvpo-payoff-color) 30%, #fff 8%) 6.4deg 7.4deg,
            transparent 7.8deg 18deg);
    mask-image: radial-gradient(circle, #000 0, rgba(0,0,0,.5) 18%, transparent 44%);
    transform: translate(-50%, -50%) rotate(0deg) scale(.4);
    animation: cvpo-payoff-rays 6s linear infinite, cvpo-payoff-rays-in .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cvpo-payoff-rays { to { transform: translate(-50%, -50%) rotate(360deg) scale(1); } }
@keyframes cvpo-payoff-rays-in { from { opacity: 0; } to { opacity: 1; } }
.cvpo-stage.is-payoff-after .cvpo-payoff-rays { animation: cvpo-payoff-rays 6s linear infinite, cvpo-payoff-rays-out 1.4s ease-out both; }
@keyframes cvpo-payoff-rays-out { from { opacity: 1; } to { opacity: 0; } }

/* Hit: one white frame, then the wash, then the pillar and rings. The wash
   is a full-screen tint in the tier colour; the white frame is what makes it
   read as an impact instead of a fade. */
.cvpo-stage.is-payoff-hit .cvpo-payoff-wash {
    inset: 0;
    opacity: 1;
    background: var(--cvpo-payoff-color);
    animation: cvpo-payoff-wash .9s cubic-bezier(.1,.9,.2,1) both;
}
@keyframes cvpo-payoff-wash {
    0% { opacity: 1; background: #fff; }
    5% { opacity: 1; background: #fff; }
    9% { opacity: .7; background: var(--cvpo-payoff-color); }
    30% { opacity: calc(.16 * var(--cvpo-payoff-strength)); }
    100% { opacity: 0; }
}

.cvpo-stage.is-payoff-hit .cvpo-payoff-pillar {
    top: -12%;
    bottom: -12%;
    left: var(--cvpo-payoff-x);
    width: clamp(90px, 14vw, 240px);
    opacity: 1;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--cvpo-payoff-color) 55%, transparent) 30%,
        #fff 50%,
        color-mix(in srgb, var(--cvpo-payoff-color) 55%, transparent) 70%,
        transparent);
    filter: blur(1px);
    mix-blend-mode: screen;
    transform: translateX(-50%) scaleX(.06) scaleY(0);
    transform-origin: 50% var(--cvpo-payoff-y);
    animation: cvpo-payoff-pillar 1.1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cvpo-payoff-pillar {
    0% { opacity: 0; transform: translateX(-50%) scaleX(.04) scaleY(0); }
    12% { opacity: 1; transform: translateX(-50%) scaleX(1.25) scaleY(1.04); }
    28% { transform: translateX(-50%) scaleX(.85) scaleY(1); }
    100% { opacity: 0; transform: translateX(-50%) scaleX(.2) scaleY(1); }
}

.cvpo-stage.is-payoff-hit .cvpo-payoff-ring {
    top: var(--cvpo-payoff-y);
    left: var(--cvpo-payoff-x);
    width: min(60vmin, 560px);
    aspect-ratio: 1;
    opacity: 1;
    border: 3px solid var(--cvpo-payoff-color);
    border-radius: 50%;
    box-shadow: 0 0 34px color-mix(in srgb, var(--cvpo-payoff-color) 70%, transparent), inset 0 0 34px color-mix(in srgb, var(--cvpo-payoff-color) 40%, transparent);
    transform: translate(-50%, -50%) scale(.1);
    animation: cvpo-payoff-ring 1.05s cubic-bezier(.16,1,.3,1) both;
}
.cvpo-stage.is-payoff-hit .cvpo-payoff-ring:nth-of-type(2) { animation-delay: .09s; border-width: 2px; }
.cvpo-stage.is-payoff-hit .cvpo-payoff-ring:nth-of-type(3) { animation-delay: .19s; border-width: 1px; border-color: #fff; }
@keyframes cvpo-payoff-ring {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
    10% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(calc(1.6 * var(--cvpo-payoff-strength) + .8)); }
}


/* Camera on the hit: a real kick, then a settling that overshoots twice. */
.cvpo-stage.is-payoff-hit .cvpo-stage-world {
    animation: cvpo-payoff-camera .9s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cvpo-payoff-camera {
    0% { transform: scale(1.03); }
    6% { transform: translate3d(-14px, 6px, 0) scale(1.09); }
    14% { transform: translate3d(12px, -5px, 0) scale(1.07); }
    24% { transform: translate3d(-7px, 3px, 0) scale(1.03); }
    38% { transform: translate3d(3px, -1px, 0) scale(.995); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
.cvpo-stage[data-payoff-tier="rare"].is-payoff-hit .cvpo-stage-world {
    animation-name: cvpo-payoff-camera-soft;
}
@keyframes cvpo-payoff-camera-soft {
    0% { transform: scale(1.03); }
    8% { transform: translate3d(-5px, 2px, 0) scale(1.045); }
    22% { transform: translate3d(3px, -1px, 0) scale(1.01); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* Slow-motion frame for the top tiers: the world holds for a beat on the hit
   before time resumes. */
.cvpo-stage[data-payoff-tier="mythic"].is-payoff-hit .cvpo-pack,
.cvpo-stage[data-payoff-tier="god"].is-payoff-hit .cvpo-pack,
.cvpo-stage[data-payoff-tier="mythic"].is-payoff-hit .cvpo-card,
.cvpo-stage[data-payoff-tier="god"].is-payoff-hit .cvpo-card {
    animation: cvpo-payoff-hold .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cvpo-payoff-hold {
    0% { filter: brightness(2.6) saturate(0); }
    30% { filter: brightness(2.6) saturate(0); }
    100% { filter: brightness(1) saturate(1); }
}

/* After: the light settles. The vignette lifts and the object keeps a faint
   coloured halo for the rest of the reveal. */
.cvpo-stage.is-payoff-after .cvpo-vignette { opacity: .3; transition: opacity 1.2s; }
.cvpo-stage.is-payoff-after .cvpo-pack,
.cvpo-stage.is-payoff-after .cvpo-card {
    filter: drop-shadow(0 0 26px color-mix(in srgb, var(--cvpo-payoff-color) 45%, transparent));
    transition: filter 1s;
}

@media (prefers-reduced-motion: reduce) {
    .cvpo-payoff-rays, .cvpo-payoff-pillar, .cvpo-payoff-ring { animation: none !important; opacity: 0 !important; }
    .cvpo-stage.is-payoff-hit .cvpo-payoff-wash { animation-duration: .3s; }
    .cvpo-stage.is-payoff-hit .cvpo-stage-world { animation: none; }
    .cvpo-stage.is-payoff-omen .cvpo-pack, .cvpo-stage.is-payoff-charge .cvpo-pack,
    .cvpo-stage.is-payoff-omen .cvpo-card, .cvpo-stage.is-payoff-charge .cvpo-card { animation: none; }
}

/* Charge on the pack: the seam itself glows and pulses faster and faster,
   so the light visibly builds where the blade is about to land. */
.cvpo-stage.is-payoff-charge .cvpo-pack::after {
    opacity: 1;
    animation: cvpo-payoff-seam-charge .34s ease-in-out infinite alternate;
}
@keyframes cvpo-payoff-seam-charge {
    from { opacity: .35; filter: brightness(1); transform: scaleX(.6); }
    to { opacity: 1; filter: brightness(1.8); transform: scaleX(1.04); }
}
.cvpo-stage.is-payoff-omen .cvpo-pack::after {
    opacity: .5;
    animation: cvpo-payoff-seam-omen 1.05s ease-in-out infinite alternate;
}
@keyframes cvpo-payoff-seam-omen {
    from { opacity: .18; transform: scaleX(.3); }
    to { opacity: .6; transform: scaleX(.75); }
}

/* The copy stays out of the way while the light is up. */
.cvpo-stage.is-payoff-hit .cvpo-stage-copy { opacity: 0; transition: opacity .12s; }
.cvpo-stage.is-payoff-after .cvpo-stage-copy { opacity: .6; transition: opacity .8s .5s; }

/* Result entrance: tiles arrive as hits, not fades. Hidden until landed, then
   an overshoot in from below; the best card gets a stronger landing and keeps
   a lit frame. The total counts up and thumps once when it settles. */
.cvpo-result-item {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(.86);
}
.cvpo-result-item.is-landed {
    animation: cvpo-result-land .52s cubic-bezier(.16,1.4,.3,1) both;
}
@keyframes cvpo-result-land {
    0% { opacity: 0; transform: translate3d(0, 34px, 0) scale(.86); }
    55% { opacity: 1; transform: translate3d(0, -6px, 0) scale(1.04); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.cvpo-result-item.is-best.is-landed {
    animation: cvpo-result-land-best .8s cubic-bezier(.16,1.4,.3,1) both;
}
@keyframes cvpo-result-land-best {
    0% { opacity: 0; transform: translate3d(0, 60px, 0) scale(.6); filter: brightness(2.4); }
    40% { opacity: 1; transform: translate3d(0, -14px, 0) scale(1.14); filter: brightness(1.8); }
    62% { transform: translate3d(0, 4px, 0) scale(.98); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: brightness(1); }
}
.cvpo-result-item.is-best .cvpo-card-crop {
    box-shadow:
        0 0 0 2px var(--cvpo-payoff-color, var(--cvpo-gold)),
        0 0 32px color-mix(in srgb, var(--cvpo-payoff-color, var(--cvpo-gold)) 60%, transparent),
        0 18px 40px rgba(0,0,0,.45);
}
.cvpo-result-total > strong { display: inline-block; font-variant-numeric: tabular-nums; }
.cvpo-result-total > strong.is-landed {
    animation: cvpo-result-total-land .55s cubic-bezier(.16,1.4,.3,1) both;
}
@keyframes cvpo-result-total-land {
    0% { transform: scale(1); }
    30% { transform: scale(1.22); text-shadow: 0 0 22px var(--cvpo-accent); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .cvpo-result-item { opacity: 1; transform: none; }
    .cvpo-result-item.is-landed, .cvpo-result-item.is-best.is-landed, .cvpo-result-total > strong.is-landed { animation: none; }
}

/* GPU payoff. The canvas sits where the CSS light layer sits; when the
   renderer is available the CSS wash/pillar/rings/rays stay dark and only the
   DOM motion (camera, breathing, dimming, seam glow) remains in CSS. */
.cvpo-payoff-gl {
    position: absolute;
    inset: 0;
    z-index: 19;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
}
.cvpo-stage.is-payoff-gl .cvpo-payoff-wash,
.cvpo-stage.is-payoff-gl .cvpo-payoff-pillar,
.cvpo-stage.is-payoff-gl .cvpo-payoff-ring,
.cvpo-stage.is-payoff-gl .cvpo-payoff-rays { display: none; }

/* ============================================================================
   Live (broadcast) layout — portrait.
   The stream is 1080x1920 (9:16) and shows the phone layout, because that is
   what viewers and players actually use. Chrome runs at 540x960 CSS pixels
   with a device scale factor of 2, so every existing phone breakpoint applies
   untouched. Interactive chrome that only makes sense for a hand on the
   screen is removed; the site header/footer/ads are not emitted server-side.
   ========================================================================== */
/* Chrome runs at a real 540x960 viewport on the VPS (every phone breakpoint
   applies untouched); ffmpeg upscales the capture to 1080x1920 for YouTube. */
html.cvpo-live-html, html.cvpo-live-html body { margin: 0; overflow: hidden; background: #020815; }
.cvpo-main.is-live { width: 100vw; min-height: 100vh; margin: 0; padding: 0; }
.cvpo-main.is-live .cvpo-lobby { display: none !important; }
.cvpo-main.is-live .cvpo-console { position: fixed; inset: 0; }
.cvpo-main.is-live .cvpo-sound-toggle,
.cvpo-main.is-live .cvpo-back-lobby,
.cvpo-main.is-live .cvpo-result-share,
.cvpo-main.is-live .cvpo-reset,
.cvpo-main.is-live .cvpo-result-back,
.cvpo-main.is-live .cvpo-demo-panel,
.cvpo-main.is-live .cvpo-direct-badge,
.cvpo-main.is-live .cvpo-tear-guide,
.cvpo-main.is-live .cvpo-tear-head { display: none !important; }
/* The hint bar tells a hand what to do; on air it becomes the viewer call. */
.cvpo-main.is-live .cvpo-actionbar > p[data-action-hint] { visibility: hidden; }
.cvpo-main.is-live .cvpo-actionbar::after {
    /* ★配信の呼びかけ。JS が --cvpo-live-cta を差し替えて何種類か回す。
       固定文字だと『自分でも開封できます』しか伝えられず、
       視聴者投票をタイトルで謳っているのに参加方法が画面に出ていなかった。 */
    content: var(--cvpo-live-cta, "card-value.jp/pack-simulator-preview/ で自分でも開封できます");
    color: #9fb2c9;
    font: 700 11px/1 "IBM Plex Sans JP", system-ui, sans-serif;
    letter-spacing: .02em;
    text-align: center;
    white-space: nowrap;
}


/* On air nobody scrolls, so the result is laid out to fit the frame whatever
   its height: title and total share one row, and the card grid takes the rest,
   each tile sized by the height it is given (height-limited on short frames,
   width-limited on tall ones) so no row is ever cut. */
.cvpo-main.is-live.is-immersive .cvpo-console,
.cvpo-main.is-live.is-immersive.is-result-view .cvpo-console { grid-template-rows: 78px minmax(0,1fr) 36px; }
.cvpo-main.is-live .cvpo-stage.is-result .cvpo-stage-world {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 12px 14px 10px;
    box-sizing: border-box;
}
.cvpo-main.is-live .cvpo-result {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: auto minmax(0,1fr);
    column-gap: 12px;
    row-gap: 10px;
    align-items: end;
    width: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
}
.cvpo-main.is-live .cvpo-result-title { grid-column: 1; grid-row: 1; margin: 0; }.cvpo-main.is-live .cvpo-result-title h3,
.cvpo-main.is-live .cvpo-result-title h4,
.cvpo-main.is-live .cvpo-result-title .cvpo-result-heading { margin: 4px 0 0; font-size: 22px; }
.cvpo-main.is-live .cvpo-result-foot { grid-column: 2; grid-row: 1; display: block; margin: 0; padding: 0; border: 0; text-align: right; }
.cvpo-main.is-live .cvpo-result-foot > p { display: none; }
.cvpo-main.is-live .cvpo-result-total { min-width: 0; }
.cvpo-main.is-live .cvpo-result-total > strong { font-size: 30px; }
.cvpo-main.is-live .cvpo-result-total > small { max-width: 210px; margin-left: auto; overflow: hidden; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.cvpo-main.is-live .cvpo-result-grid {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    grid-auto-rows: minmax(0,1fr);
    column-gap: 10px;
    row-gap: 8px;
    height: 100%;
    min-height: 0;
}
.cvpo-main.is-live .cvpo-result-item {
    container-type: size;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    text-align: center;
}
.cvpo-main.is-live .cvpo-result-item .cvpo-card-crop {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100cqh - 62px);
    aspect-ratio: 744 / 1039;
    margin: 0 auto;
}
.cvpo-main.is-live .cvpo-result-caption { width: 100%; padding-top: 6px; }
.cvpo-main.is-live .cvpo-result-share { display: none !important; }
/* Top-right status box on air: one framed box, next pack's art on the left
   spanning both rows, run counter and "up next" stacked on the right. */
/* On air the back button is hidden, so the title would fall into the 38px
   column that button used to occupy and get crushed to nothing. Give it the
   whole row, and keep it clear of the status box on the right. */
.cvpo-main.is-live .cvpo-console-head { position: relative; }
.cvpo-main.is-live .cvpo-console-title {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-right: calc(min(46vw, 270px) + 16px);
    box-sizing: border-box;
}.cvpo-main.is-live .cvpo-console-title h2,
.cvpo-main.is-live .cvpo-console-title .cvpo-console-name {
    overflow: hidden;
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.cvpo-live-status {
    position: absolute;
    right: 12px;
    top: 8px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 46vw;
    max-width: 270px;
    padding: 5px 9px 5px 6px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 6px;
    background: #071120;
}
/* The lobby pack files are 670x670 canvases with the pack itself in the middle
   43% (x 191-480, y 48-624), so a plain contain-fit shows a pack a third of
   the frame. Show only that region, cover-fit, so the pack fills the frame;
   the box keeps its size. */
.cvpo-live-status-art { flex: 0 0 auto; width: 32px; height: 50px; object-fit: cover; object-view-box: inset(7% 28.5% 7% 28.5%); border-radius: 3px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.55)); }
.cvpo-live-status-art[hidden] { display: none; }
.cvpo-live-status-text { display: grid; gap: 4px; min-width: 0; flex: 1 1 auto; }
.cvpo-live-counter { color: #cfdbea; font: 700 13px/1 ui-monospace, monospace; letter-spacing: .08em; }
.cvpo-live-status.is-voted .cvpo-live-counter { color: #ffd66f; }
.cvpo-live-status.is-next-voted .cvpo-live-next small { color: #ffd66f; }
.cvpo-live-status .cvpo-live-next { display: grid; gap: 2px; min-width: 0; }
.cvpo-live-status .cvpo-live-next[hidden] { display: none; }
.cvpo-live-status .cvpo-live-next span { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cvpo-live-status .cvpo-live-next small { flex: 0 0 auto; color: #9fb2c9; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .12em; }
.cvpo-live-status .cvpo-live-next strong { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; color: #eaf1fb; font-size: 11px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
/* Watch-only live view: nothing is clickable, nothing is selectable. */
.cvpo-main.is-live-view, .cvpo-main.is-live-view * { pointer-events: none !important; user-select: none !important; -webkit-user-select: none !important; }

/* ============================================================================
   Live vote panel (lobby, normal page).
   ========================================================================== */
.cvpo-vote {
    position: relative;
    margin: 26px clamp(16px, 4vw, 40px) 10px;
    padding: 22px clamp(16px, 3vw, 28px) 20px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(155deg, rgba(15,32,55,.7), rgba(4,12,26,.82));
    color: #d8e3f2;
}
.cvpo-vote-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.cvpo-vote-kicker { margin: 0; color: #ff5968; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .16em; }
.cvpo-vote-kicker i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #ff5968; box-shadow: 0 0 10px #ff5968; animation: cvpo-vote-blink 1.4s ease-in-out infinite; }
@keyframes cvpo-vote-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.cvpo-vote h2 { margin: 8px 0 4px; font-size: 20px; letter-spacing: -.02em; }
.cvpo-vote-lead { margin: 0; color: #9fb2c9; font-size: 12px; }
.cvpo-vote-now { padding: 9px 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.28); font-size: 12px; }
.cvpo-vote-now span { display: block; color: #75dfff; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .12em; margin-bottom: 4px; }
.cvpo-vote-now strong { font-size: 13px; }
.cvpo-vote-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; margin-top: 16px; align-items: start; }
/* Stream slot: 9:16 portrait, capped so it does not dominate on desktop. */
.cvpo-vote-stream { position: relative; width: 100%; max-width: 420px; aspect-ratio: 9 / 16; margin: 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: #04101f; }
.cvpo-vote-stream iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cvpo-vote-stream-soon { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; background: radial-gradient(circle at 50% 40%, rgba(75,215,208,.12), transparent 55%); }
.cvpo-vote-stream-soon p { margin: 0; color: #ff5968; font: 700 10px/1 ui-monospace, monospace; letter-spacing: .2em; }
.cvpo-vote-stream-soon strong { font-size: 20px; }
.cvpo-vote-stream-soon small { color: #9fb2c9; font-size: 11px; }
/* Standings: per game, top packs as bars. */
.cvpo-vote-games { display: grid; gap: 18px; min-width: 0; }
.cvpo-vote-game { min-width: 0; }
.cvpo-vote-game h3 { margin: 0 0 8px; color: #9fb2c9; font: 700 10px/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.cvpo-vote-empty { margin: 0; padding: 8px 0; color: #6f829c; font-size: 11px; }
.cvpo-vote-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 5px 0; }
.cvpo-vote-row img { width: 30px; height: 42px; object-fit: contain; }
.cvpo-vote-row-body { display: grid; gap: 5px; min-width: 0; }
.cvpo-vote-row strong { overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.cvpo-vote-bar { display: block; height: 7px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.08); }
.cvpo-vote-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #4bd7d0, #75dfff); transition: width .5s cubic-bezier(.16,1,.3,1); }
.cvpo-vote-row.is-leading .cvpo-vote-bar i { background: linear-gradient(90deg, #ffb347, #ffd66f); }
.cvpo-vote-row em { min-width: 34px; text-align: right; font: 700 12px/1 ui-monospace, monospace; font-style: normal; color: #cfdbea; }
.cvpo-vote-row.is-leading em { color: #ffd66f; }
.cvpo-vote-row.is-mine strong::after { content: " · 投票済み"; color: #ff5968; font-size: 10px; }
/* Lobby tile = the pack button (tap = open) + a separate vote button below it
   (tap = vote). Two elements so a vote can never accidentally open the pack. */
.cvpo-pack-tile { display: flex; flex-direction: column; min-width: 0; align-self: stretch; }
.cvpo-pack-tile > .cvpo-pack-choice { flex: 1 1 auto; width: 100%; }
.cvpo-pack-tile > .cvpo-pack-open, .cvpo-pack-tile > .cvpo-pack-vote { flex: 0 0 auto; }
.cvpo-pack-vote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 34px;
    margin-top: 6px;
    padding: 0 8px;
    box-sizing: border-box;
    border: 1px solid rgba(255,89,104,.45);
    border-radius: 3px;
    color: #ffb3bb;
    background: rgba(255,89,104,.07);
    font: 700 11px/1 system-ui, sans-serif;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.cvpo-pack-vote i { width: 7px; height: 7px; border-radius: 50%; background: #ff5968; box-shadow: 0 0 8px #ff5968; }
.cvpo-pack-vote em { padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.14); font-style: normal; font-size: 10px; color: #fff; }
.cvpo-pack-vote em[hidden] { display: none; }
.cvpo-pack-vote:hover { background: rgba(255,89,104,.16); border-color: #ff5968; color: #fff; }
.cvpo-pack-vote.is-mine { background: #ff5968; border-color: #ff5968; color: #fff; }
.cvpo-vote-status { min-height: 14px; margin: 12px 0 0; color: #75dfff; font-size: 12px; }
@media (max-width: 760px) {
    .cvpo-vote { margin: 18px 12px 6px; padding: 16px 12px 14px; }
    .cvpo-vote-body { grid-template-columns: 1fr; gap: 16px; }
    .cvpo-vote-stream { max-width: none; }
}

/* "Open this pack" under the tile: primary action, sits above the vote. */
.cvpo-pack-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 38px;
    margin-top: 6px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 0;
    border-radius: 3px;
    color: #041018;
    background: linear-gradient(90deg, var(--cvpo-accent, #4bd7d0), color-mix(in srgb, var(--cvpo-accent, #4bd7d0) 70%, #fff));
    font: 800 12px/1 system-ui, sans-serif;
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform .2s, filter .2s;
}
.cvpo-pack-open:hover { transform: translateY(-1px); filter: brightness(1.08); }
.cvpo-pack-open i { font-style: normal; }
.cvpo-label-short { display: none; }
/* On air: no scrollbars anywhere (the console is fixed and never scrolls). */
html.cvpo-live-html, html.cvpo-live-html body, .cvpo-main.is-live, .cvpo-main.is-live .cvpo-console, .cvpo-main.is-live .cvpo-result { scrollbar-width: none; }
html.cvpo-live-html::-webkit-scrollbar, .cvpo-main.is-live *::-webkit-scrollbar { display: none; }
.cvpo-main.is-live .cvpo-result { overflow: hidden; }
/* On air the action bar is a slim strip pinned to the bottom, carrying only
   the site call. It stays out of the way of the stage above. */
/* Also in the result view, whose own rule would otherwise grow it to 72px. */
.cvpo-main.is-live .cvpo-actionbar,
.cvpo-main.is-live.is-immersive.is-result-view .cvpo-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-height: 0;
    padding: 0 12px;
    box-sizing: border-box;
    background: rgba(2,8,21,.94);
    border-top: 1px solid rgba(255,255,255,.08);
}
.cvpo-main.is-live .cvpo-actionbar::after {
    position: static;
    transform: none;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}


/* On air the top-right status box owns the right ~45% of the head; keep the
   progress row clear of it instead of letting the bar run under it. */
.cvpo-main.is-live .cvpo-console-head .cvpo-progress { padding-right: calc(min(46vw, 270px) + 24px); box-sizing: border-box; }


/* ------------------------------------------------------------------------
   House oripa promos: coupon slots, the floating coupon button, its sheet and
   the between-packs full screen. Nothing here renders unless the operator
   switched the placement on and a live offer exists.
   ------------------------------------------------------------------------ */
.cvpo-promo-slot {
    margin: 22px clamp(16px, 4vw, 40px) 6px;
}
.cvpo-promo-heading {
    margin: 0 0 9px;
    color: #ffd66f;
    font: 700 10px/1 ui-monospace, monospace;
    letter-spacing: .16em;
}
.cvpo-promo-note {
    display: block;
    margin-top: 9px;
    color: #7f90a9;
    font: 400 11px/1.5 system-ui, sans-serif;
}
/* White card on purpose: the simulator is near-black, so a dark promo would
   read as part of the UI. White separates the paid slot from the product. */
.cvpo-promo-card {
    position: relative;
    display: block;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(0,0,0,.45);
    color: #16202f;
}
/* ロゴの列と本文の列。以前はカードそのものがこの2列だったが、順位バッジ・
   リボン・全幅のボタンが乗るので、内側に移した。 */
.cvpo-promo-top {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.cvpo-promo-brand { min-width: 0; }
/* 1位だけ枠で囲む。 */
.cvpo-promo-card.is-first {
    border: 2px solid #ff7a1a;
    box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 3px rgba(255,122,26,.14);
}
.cvpo-promo-ribbon {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    max-width: calc(100% - 32px);
    padding: 4px 14px;
    border-radius: 999px;
    background: #ff7a1a;
    color: #fff;
    font: 800 11px/1.2 system-ui, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 4px 12px rgba(255,122,26,.4);
}
/* 順位。ロゴの左上に重ねる。1位だけ赤、以降は灰色。 */
.cvpo-promo-rank {
    position: absolute;
    top: -7px;
    left: -7px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #8a97a8;
    color: #fff;
    font: 800 13px/1 system-ui, sans-serif;
}
.cvpo-promo-card.is-first .cvpo-promo-rank { background: #e2431c; }
/* 訴求文言。頭のチェックは文字ではなく擬似要素で置く（読み上げに混ざらない）。 */
.cvpo-promo-points { margin: 0; padding: 0; list-style: none; }
.cvpo-promo-points li {
    position: relative;
    margin: 0 0 5px;
    padding-left: 19px;
    color: #16202f;
    font: 600 13px/1.5 system-ui, sans-serif;
}
.cvpo-promo-points li::before {
    content: "\2714";
    position: absolute;
    left: 0;
    color: #e2431c;
    font-weight: 800;
}
.cvpo-promo-points li:last-child { margin-bottom: 0; }
/* 黄色マーカーは下半分だけ。文字の色は変えない。 */
.cvpo-promo-mark { background: linear-gradient(transparent 62%, #ffe680 62%); color: inherit; }
.cvpo-promo-red { color: #e2431c; font-style: normal; font-weight: 800; }
/* 特典。以前は左上に貼り付く小さなピンクのタグだった。 */
.cvpo-promo-badge-box {
    display: inline-block;
    margin-top: 9px;
    padding: 5px 10px;
    border: 1px solid #ff6a3d;
    border-radius: 6px;
    color: #e2431c;
    font: 800 12px/1.3 system-ui, sans-serif;
}
.cvpo-promo-coupon-label {
    flex: 0 0 auto;
    color: #6b7686;
    font: 700 11px/1.3 system-ui, sans-serif;
    font-style: normal;
}
.cvpo-promo-visual-text { padding: 6px; }
.cvpo-promo-more-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 9px;
    background: rgba(255,255,255,.08);
    color: #eef3fb;
    font: 800 13px/1 system-ui, sans-serif;
    cursor: pointer;
}
.cvpo-promo-more-btn:hover { background: rgba(255,255,255,.16); }
.cvpo-promo-panel .cvpo-promo-more-btn { border-color: #cfd8e6; background: #f2f5fa; color: #2a3547; }
/* 狭い画面ではロゴの列を細くする。文言が2文字で折り返すのを避ける。 */
@media (max-width: 520px) {
    .cvpo-promo-top { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; }
    .cvpo-promo-visual { width: 72px; height: 72px; }
    .cvpo-promo-points li { font-size: 12.5px; }
}
.cvpo-promo-pr {
    position: absolute;
    top: 9px;
    right: 11px;
    color: #8a97a8;
    font: 700 9px/1 ui-monospace, monospace;
    letter-spacing: .12em;
}
.cvpo-promo-badge {
    position: absolute;
    top: -9px;
    left: 13px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #ff3d7f;
    color: #fff;
    font: 800 10px/1 system-ui, sans-serif;
    letter-spacing: .04em;
    box-shadow: 0 4px 12px rgba(255,61,127,.35);
}
.cvpo-promo-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 104px;
    height: 104px;
    border-radius: 10px;
    background: linear-gradient(160deg, #eef2f8, #dbe4f0);
    color: #4a5768;
    font: 800 12px/1.3 system-ui, sans-serif;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
/* Whole banner, never cropped: the operator uploads square or portrait art
   and it must show as uploaded. */
.cvpo-promo-visual img { width: 100%; height: 100%; object-fit: contain; }
.cvpo-promo-name a { color: #2f6fd0; text-decoration: none; }
.cvpo-promo-name a:hover { text-decoration: underline; }
.cvpo-promo-brand .cvpo-promo-name {
    margin: 6px 0 0;
    font: 800 12px/1.3 system-ui, sans-serif;
    text-align: center;
    word-break: break-word;
}
.cvpo-promo-copy {
    padding: 5px 10px;
    border: 0;
    border-radius: 5px;
    background: #16202f;
    color: #fff;
    font: 800 11px/1 system-ui, sans-serif;
    cursor: pointer;
}
.cvpo-promo-copy.is-done { background: #1f9d6a; }
.cvpo-promo-body { min-width: 0; }
.cvpo-promo-body h4 { margin: 0; font: 800 16px/1.3 system-ui, sans-serif; }
.cvpo-promo-body p {
    margin: 4px 0 0;
    color: #4d5a6b;
    font: 400 12px/1.5 system-ui, sans-serif;
}
/* ★折り返し任せをやめる。左＝ラベル＋コード（1行目）と効果（2行目）、
   右＝コピー。文字数が変わっても形が変わらない。 */
.cvpo-promo-coupon {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 9px;
    padding: 7px 8px 7px 10px;
    border: 1px dashed #ff6a3d;
    border-radius: 7px;
    background: #fff5ef;
}
.cvpo-promo-coupon-main { flex: 1 1 auto; min-width: 0; }
.cvpo-promo-coupon-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cvpo-promo-coupon b { color: #e2431c; font: 800 13px/1.2 ui-monospace, monospace; letter-spacing: .06em; word-break: break-all; }
.cvpo-promo-coupon em { display: block; margin-top: 3px; color: #2a3547; font: 700 11px/1.35 system-ui, sans-serif; font-style: normal; }
.cvpo-promo-coupon em:first-child { margin-top: 0; }
.cvpo-promo-copy { flex: 0 0 auto; white-space: nowrap; }
.cvpo-promo-cta {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 11px 12px;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(135deg, #ff7a45, #ff3d7f);
    color: #fff;
    font: 800 13px/1 system-ui, sans-serif;
    cursor: pointer;
}
.cvpo-promo-cta:hover { filter: brightness(1.05); }

/* Floating coupon button. It shares the bottom-right corner with the card
   gestures, so the opening states hide it (see promoSyncFloat). */
.cvpo-promo-float {
    position: fixed;
    right: 12px;
    bottom: 16px;
    z-index: 1000001;
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 9px 15px 9px 9px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 999px;
    background: linear-gradient(135deg, #ff7a45, #ff3d7f);
    color: #fff;
    box-shadow: 0 12px 30px rgba(255,61,127,.4);
    cursor: pointer;
    transition: opacity .25s, transform .25s;
}
.cvpo-promo-float i {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    color: #ff3d7f;
    font: 900 15px/1 system-ui, sans-serif;
    font-style: normal;
}
/* ★チケットの絵。以前は「％」の文字だったが、特典が率でないことがある。 */
.cvpo-promo-float .cvpo-promo-float-icon::before {
    display: block;
    width: 17px;
    height: 17px;
    background: currentColor;
    -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.5A1.5 1.5 0 0 1 4.5 6h15A1.5 1.5 0 0 1 21 7.5v2.2a2.3 2.3 0 0 0 0 4.6v2.2a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 16.5v-2.2a2.3 2.3 0 0 0 0-4.6V7.5Z'/%3E%3Cpath fill='%23fff' d='M14.6 8.2h1.5v7.6h-1.5z'/%3E%3C/svg%3E");
    mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.5A1.5 1.5 0 0 1 4.5 6h15A1.5 1.5 0 0 1 21 7.5v2.2a2.3 2.3 0 0 0 0 4.6v2.2a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 16.5v-2.2a2.3 2.3 0 0 0 0-4.6V7.5Z'/%3E%3Cpath fill='%23fff' d='M14.6 8.2h1.5v7.6h-1.5z'/%3E%3C/svg%3E");
    content: "";
}
/* 枠を複数並べるので、カード同士に隔たりを作る。 */
.cvpo-promo-list .cvpo-promo-card + .cvpo-promo-card { margin-top: 14px; }
.cvpo-promo-panel .cvpo-promo-card + .cvpo-promo-card { margin-top: 14px; }
.cvpo-promo-float strong { display: block; font: 800 13px/1.1 system-ui, sans-serif; }
.cvpo-promo-float small { display: block; margin-top: 3px; font: 700 10px/1 system-ui, sans-serif; opacity: .92; }
.cvpo-promo-float.is-hidden { opacity: 0; transform: translateY(14px); pointer-events: none; }
.cvpo-promo-float.is-above-bar { bottom: 88px; }
/* ★下部メニュー（.cvm-dock）が出ている間はその上に逃がす。
   重なると「コレクション」「ウォッチ」が押せなくなる。
   隔たりは 8px。以前は 82px の目測りで 27px も空いていた。 */
@media (max-width: 720px) {
    body.cv-has-dock:not(.cvpo-immersive-active) .cvpo-promo-float { bottom: calc(var(--cvm-dock-h, 55px) + 8px); }
    body.cv-has-dock:not(.cvpo-immersive-active) .cvpo-promo-float.is-above-bar { bottom: calc(var(--cvm-dock-h, 55px) + 76px); }
}
/* PCの下部メニューは下中央の帯。画面が狭いと左右で重なるので上に逃がす。 */
@media (min-width: 721px) and (max-width: 960px) {
    body.cv-has-dock:not(.cvpo-immersive-active) .cvpo-promo-float { bottom: 88px; }
    body.cv-has-dock:not(.cvpo-immersive-active) .cvpo-promo-float.is-above-bar { bottom: 156px; }
}

.cvpo-promo-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000002;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    background: rgba(2,6,16,.72);
    transition: opacity .22s;
}
.cvpo-promo-sheet.is-open { opacity: 1; }
.cvpo-promo-panel {
    position: relative;
    width: 100%;
    max-height: 88vh;
    overflow: auto;
    padding: 18px 16px 24px;
    border-top: 1px solid rgba(255,255,255,.14);
    border-radius: 18px 18px 0 0;
    background: #0c1730;
    transform: translateY(18px);
    transition: transform .24s cubic-bezier(.16,1,.3,1);
}
.cvpo-promo-sheet.is-open .cvpo-promo-panel { transform: none; }
/* ★閉じるは常に見えている必要がある。以前はパネルに絶対配置していたので、
   中身が伸びるとスクロールで一緒に流れて消えていた。上に貼り付ける。 */
.cvpo-promo-panel-head {
    position: sticky;
    /* ★sticky の基準はパネルの内側（padding の内）なので、top:0 だと
       パネル上端との間に padding 分（18px）の隙間が残り、スクロールした
       中身がそこを通り抜けて帯の上に見えていた（実機で発覚 2026-08-25）。
       padding の分だけ引き上げて、上端まで覆う。 */
    top: -18px;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    /* 下の余白を広く取る。1枚目の順位バッジ（カードの外に -7px 出る）と
       リボン（-11px）が、この帯の下に潜り込んで隠れるため。 */
    margin: -18px -16px 32px;
    padding: 10px 12px 6px;
    background: #0c1730;
}
.cvpo-promo-close {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    color: #eef3fb;
    font: 700 19px/1 system-ui, sans-serif;
    cursor: pointer;
}
.cvpo-promo-close:hover { background: rgba(255,255,255,.24); }
.cvpo-promo-close-bottom {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 9px;
    background: rgba(255,255,255,.1);
    color: #eef3fb;
    font: 800 14px/1 system-ui, sans-serif;
    cursor: pointer;
}
.cvpo-promo-close-bottom:hover { background: rgba(255,255,255,.2); }
.cvpo-promo-more { display: flex; gap: 9px; margin-top: 14px; overflow-x: auto; }
.cvpo-promo-more-item {
    flex: 0 0 46%;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 10px;
    background: #fff;
    color: #16202f;
    text-align: left;
    cursor: pointer;
}
.cvpo-promo-more-item strong { display: block; overflow: hidden; font: 700 12px/1.3 system-ui, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.cvpo-promo-more-item .cvpo-promo-coupon { margin-top: 7px; padding: 4px 7px; }
.cvpo-promo-more-item .cvpo-promo-coupon b { font-size: 11px; }

/* Between packs. */
.cvpo-promo-full {
    position: fixed;
    inset: 0;
    z-index: 1000003;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    opacity: 0;
    background: rgba(2,6,16,.86);
    transition: opacity .2s;
}
.cvpo-promo-full.is-open { opacity: 1; }
.cvpo-promo-full .cvpo-promo-card {
    position: relative;
    grid-template-columns: 1fr;
    width: min(400px, 100%);
    padding: 22px 18px 16px;
    text-align: center;
}
.cvpo-promo-full .cvpo-promo-visual {
    width: min(300px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}
.cvpo-promo-full .cvpo-promo-coupon { margin-left: auto; margin-right: auto; }
.cvpo-promo-full .cvpo-promo-note { text-align: left; }
.cvpo-promo-full-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 40px;
    height: 40px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #16202f;
    color: #fff;
    font: 800 18px/1 system-ui, sans-serif;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.cvpo-promo-full-close:disabled { background: #6b7688; cursor: default; }

@media (max-width: 560px) {
    .cvpo-promo-slot { margin: 18px 12px 4px; }
    .cvpo-promo-card { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 12px; }
    .cvpo-promo-visual { width: 76px; height: 76px; }
    .cvpo-promo-coupon { gap: 6px; padding: 5px 6px 5px 8px; }
    .cvpo-promo-coupon b { font-size: 12px; }
    .cvpo-promo-coupon em { font-size: 10px; }
    .cvpo-promo-body h4, .cvpo-promo-body .cvpo-promo-name { font-size: 15px; }
    .cvpo-promo-more-item { flex-basis: 62%; }
}

/* On air there are no promos at all; belt and braces if a payload ever slips. */
.cvpo-main.is-live ~ .cvpo-promo-float,
.cvpo-main.is-live .cvpo-promo-slot { display: none !important; }


/* Player account bar in the lobby head, and the record line on the result. */
.cvpo-account {
    position: relative;
    z-index: 3;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 44px 18px;
    padding: 11px 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
}
.cvpo-account-pitch { margin: 0; flex: 1 1 220px; color: #a8b7cc; font: 400 12px/1.6 system-ui, sans-serif; }
.cvpo-account-login {
    flex: 0 0 auto;
    padding: 10px 18px;
    border-radius: 999px;
    background: #fff;
    color: #16202f;
    font: 800 13px/1 system-ui, sans-serif;
    text-decoration: none;
}
.cvpo-account-who { display: flex; gap: 9px; align-items: center; color: inherit; text-decoration: none; }
.cvpo-account-who img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.cvpo-account-who strong { font: 700 13px/1 system-ui, sans-serif; }
.cvpo-account-attempts { display: flex; gap: 8px; align-items: baseline; margin-left: auto; }
.cvpo-account-attempts b { color: var(--cvpo-accent, #4fd6c8); font: 800 15px/1 ui-monospace, monospace; }
.cvpo-account-attempts small { color: #8fa0ba; font: 700 10px/1 system-ui, sans-serif; }
.cvpo-account-links a { color: #9fb2c9; font: 700 11px/1 system-ui, sans-serif; text-decoration: none; }
.cvpo-account-links a:hover { color: #eaf1fb; text-decoration: underline; }

.cvpo-account-outcome {
    display: grid;
    gap: 5px;
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--cvpo-accent) 42%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--cvpo-accent) 9%, rgba(6,15,31,.85));
}
.cvpo-account-outcome strong { font: 800 15px/1.3 system-ui, sans-serif; }
.cvpo-account-outcome small { color: #9fb2c9; font: 400 11px/1.5 system-ui, sans-serif; }
.cvpo-account-outcome a { color: var(--cvpo-accent, #4fd6c8); font: 700 12px/1 system-ui, sans-serif; text-decoration: none; }

@media (max-width: 760px) {
    .cvpo-account { margin: 0 16px 14px; }
}
@media (max-width: 560px) {
    .cvpo-account { margin: 0 12px 12px; }
    .cvpo-account-attempts { margin-left: auto; }
    .cvpo-account-links { flex-basis: 100%; }
}


.cvpo-share-bonus { margin: 8px 0 0; color: #ffd66f; font: 700 11px/1.5 system-ui, sans-serif; }
.cvpo-share-bonus[hidden] { display: none; }
.cvpo-account-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 1000004;
    padding: 12px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #4fd6c8, #3f8cff);
    color: #04121f;
    font: 800 13px/1 system-ui, sans-serif;
    box-shadow: 0 14px 34px rgba(0,0,0,.5);
    opacity: 0;
    transform: translate(-50%, 12px);
    transition: opacity .25s, transform .25s;
    pointer-events: none;
}
.cvpo-account-toast.is-on { opacity: 1; transform: translate(-50%, 0); }


/* On air: who the current run belongs to. A full-width translucent band right
   above the slim bar, so a viewer scrubbing past the stream can tell at a
   glance whether a person is playing or the show is running itself. */
.cvpo-live-actor {
    position: fixed;
    right: 0;
    bottom: 36px;
    left: 0;
    z-index: 1000000;
    display: flex;
    gap: 9px;
    align-items: center;
    justify-content: center;
    height: 34px;
    border-top: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(3,9,20,.5), rgba(3,9,20,.82));
    color: #b9c8dc;
    font: 700 13px/1 "IBM Plex Sans JP", system-ui, sans-serif;
    letter-spacing: .04em;
    backdrop-filter: blur(6px);
    pointer-events: none;
}
.cvpo-live-actor::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}
.cvpo-live-actor.is-guest {
    border-top-color: rgba(79,214,200,.45);
    background: linear-gradient(180deg, rgba(6,38,44,.5), rgba(4,24,32,.85));
    color: #7fe6da;
}
.cvpo-live-actor.is-player {
    border-top-color: rgba(255,214,111,.55);
    background: linear-gradient(180deg, rgba(52,38,8,.5), rgba(30,22,4,.86));
    color: #ffd66f;
}


/* One quiet line above the grid: it is read right before the cards are tapped,
   which is where it is useful, and it stays out of the totals. */
.cvpo-result-hint {
    display: flex;
    gap: 7px;
    align-items: center;
    margin: -10px 0 16px;
    color: #90a2bb;
    font: 500 12px/1.5 "IBM Plex Sans JP", system-ui, sans-serif;
}
.cvpo-result-hint i {
    flex: 0 0 auto;
    width: 13px;
    height: 17px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    opacity: .75;
}
.cvpo-result-hint i::after {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    margin: 9px 0 0 6px;
    border-radius: 50%;
    background: currentColor;
}
/* On air nobody can tap anything. */
.cvpo-main.is-live .cvpo-result-hint { display: none; }
@media (max-width: 560px) {
    .cvpo-result-hint { margin: -6px 0 14px; font-size: 11px; }
}


/* Result -> the pack's high-value ranking on the card archive. */
.cvpo-archive-link {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--cvpo-accent) 38%, transparent);
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--cvpo-accent) 12%, rgba(6,15,31,.85)), rgba(4,11,24,.85));
    color: #eaf1fb;
    text-decoration: none;
    transition: transform .2s, filter .2s;
}
.cvpo-archive-link:hover { transform: translateY(-2px); filter: brightness(1.06); }
.cvpo-archive-link span { display: grid; gap: 4px; min-width: 0; margin-right: auto; }
.cvpo-archive-art {
    flex: 0 0 auto;
    width: 40px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.55));
}
.cvpo-archive-link small { color: #93a7c1; font: 700 11px/1 system-ui, sans-serif; letter-spacing: .04em; }
.cvpo-archive-link strong {
    overflow: hidden;
    font: 800 14px/1.3 "IBM Plex Sans JP", system-ui, sans-serif;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.cvpo-archive-link i {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cvpo-accent, #4fd6c8);
    color: #04121f;
    font: 800 14px/1 system-ui, sans-serif;
    font-style: normal;
}
/* Not on air: nothing there can be clicked. */
.cvpo-main.is-live .cvpo-archive-link { display: none; }
@media (max-width: 560px) {
    .cvpo-archive-link { gap: 10px; padding: 11px 12px; }
    .cvpo-archive-link strong { font-size: 13px; }
    .cvpo-archive-art { width: 34px; height: 50px; }
}


/* The pack being opened, shown in the console head next to its name. */
.cvpo-console-art {
    flex: 0 0 auto;
    width: 34px;
    height: 49px;
    object-fit: contain;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,.55));
}
.cvpo-console-art[hidden] { display: none; }
/* The art lives inside the title block, so the head keeps its three parts:
   back button, pack (art + name), progress. */
.cvpo-console-title { display: flex; gap: 11px; align-items: center; }
.cvpo-console-title-copy { min-width: 0; }
.cvpo-main.is-immersive .cvpo-console-head { align-items: center; }
@media (max-width: 760px) {
    .cvpo-console-art { width: 28px; height: 40px; }
}
/* On air the head also carries the status box; keep the art small there. */
.cvpo-main.is-live .cvpo-console-art { width: 26px; height: 38px; }


/* 遅延計測用の時計（?cvpo_clock=1 のときだけ表示） */
.cvpo-live-clock {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1000005;
    padding: 10px 18px;
    border-radius: 10px;
    background: rgba(0,0,0,.72);
    color: #fff;
    font: 800 42px/1 ui-monospace, monospace;
    letter-spacing: .06em;
    transform: translate(-50%, -50%);
    pointer-events: none;
}


/* 配信機は絵をCPUで描くため、ぼかし（blur / backdrop-filter）と大きな影は
   1枚あたりの描画時間を跳ね上げ、演出が飛び飛びになる。?cvpo_lean=1 の配信では
   これらを止めて、動きの滑らかさを優先する。見た目の差は光と影の柔らかさだけで、
   構図・文字・カードの解像感は変わらない。 */
html.cvpo-lean-html .cvpo-main *,
html.cvpo-lean-html .cvpo-main *::before,
html.cvpo-lean-html .cvpo-main *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.cvpo-lean-html .cvpo-card-halo,
html.cvpo-lean-html .cvpo-pack-shadow,
html.cvpo-lean-html .cvpo-speed-field,
html.cvpo-lean-html .cvpo-vignette { display: none !important; }
html.cvpo-lean-html .cvpo-main .cvpo-card,
html.cvpo-lean-html .cvpo-main .cvpo-card-crop,
html.cvpo-lean-html .cvpo-main .cvpo-pack,
html.cvpo-lean-html .cvpo-main .cvpo-card-deck,
html.cvpo-lean-html .cvpo-main .cvpo-extract-stack { filter: none !important; }


/* Result screen: the binder the pulled cards fly into. */
.cvpo-binder {
    display: flex;
    gap: 14px;
    align-items: center;
    margin: 18px 0 0;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    color: #eaf1fb;
    text-decoration: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s, transform .3s, border-color .3s;
}
.cvpo-binder.is-on { opacity: 1; transform: none; }
.cvpo-binder.is-done { border-color: color-mix(in srgb, var(--cvpo-accent) 45%, transparent); }
.cvpo-binder.has-new { border-color: rgba(255,214,111,.6); }
.cvpo-binder.is-locked { border-style: dashed; }
.cvpo-binder-book {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 56px;
    perspective: 400px;
}
.cvpo-binder-book i {
    position: absolute;
    inset: 0;
    border-radius: 4px 6px 6px 4px;
    background: linear-gradient(150deg, #2c3d63, #16233c);
    box-shadow: 0 6px 16px rgba(0,0,0,.45);
    transform-origin: left center;
    transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.cvpo-binder-book i:first-child { background: linear-gradient(150deg, #3b4f7c, #1e2d4c); transform: rotateY(-40deg); }
.cvpo-binder-book.is-closed i:first-child { transform: rotateY(0deg); }
.cvpo-binder-book.is-catch { animation: cvpo-binder-catch .32s ease-out; }
@keyframes cvpo-binder-catch { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.cvpo-binder-copy { display: grid; gap: 4px; min-width: 0; }
.cvpo-binder-copy strong { font: 800 14px/1.3 "IBM Plex Sans JP", system-ui, sans-serif; }
.cvpo-binder-copy small { color: var(--cvpo-accent, #4fd6c8); font: 700 11px/1.4 system-ui, sans-serif; }
.cvpo-binder.is-locked .cvpo-binder-copy strong { font-size: 13px; color: #cfdbea; }
.cvpo-binder-ghost {
    position: fixed;
    z-index: 1000004;
    border-radius: 6px;
    object-fit: cover;
    pointer-events: none;
    box-shadow: 0 10px 24px rgba(0,0,0,.5);
    transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s;
}
.cvpo-result-item.is-new-pull .cvpo-card-crop { box-shadow: 0 0 0 2px #ffd66f, 0 0 26px rgba(255,214,111,.45); }
.cvpo-result-item.is-new-pull::before {
    content: "NEW";
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    padding: 3px 7px;
    border-radius: 999px;
    background: #ffd66f;
    color: #241b00;
    font: 900 9px/1 ui-monospace, monospace;
    letter-spacing: .1em;
}
.cvpo-result-item { position: relative; }
/* Never on air: the loop is not a person's collection. */
.cvpo-main.is-live .cvpo-binder { display: none; }



/* 呼びかけの差し替えは、消してから出す。
   ★10秒ごとに瞬間で入れ替えていたら配信で点滅してエラーのように見えた
     （オーナー指摘 2026-08-22）。ここは指定が2箇所あるので末尾で上書きする。 */
.cvpo-main.is-live .cvpo-actionbar::after {
    transition: opacity .5s ease;
}

.cvpo-cta-out .cvpo-main.is-live .cvpo-actionbar::after {
    opacity: 0;
}


/* LINEのボタン。ログインついでに友だち追加まで終わるのはLINEだけなので上に置く。 */
.cvpo-account-login.is-line { background: #06c755; color: #fff; }


/* ------------------------------------------------------------------
   見出し構造（オーナー承認 2026-08-23）
     H1 ロビーの見出し＝タイトルタグと同一文言
     H2 カードゲームを選ぶ
     H3 ゲームタブのゲーム名（ポケモンカード／ワンピースカード／遊戯王OCG）
   ロビーの色調（#8fa2bd）に合わせ、既存の余白を崩さない位置に置く。
------------------------------------------------------------------ */
.cvpo-lobby-section {
    position: relative;
    z-index: 3;
    margin: 4px 44px 10px;
    color: #8fa2bd;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* 本文セクション。ツールの下に置く読み物なので、サイト共通の明るい配色。 */
.cvpo-seo {
    margin-top: 60px;
    color: var(--cvpo-ink);
}
.cvpo-main.is-immersive .cvpo-seo { display: none; }
.cvpo-seo-inner {
    display: grid;
    gap: 44px;
    max-width: 860px;
}
.cvpo-seo-block h2 {
    margin: 0 0 6px;
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: -.02em;
}
.cvpo-seo-block h3 {
    margin: 22px 0 8px;
    font-size: 16px;
    line-height: 1.5;
}
.cvpo-seo-block p {
    margin: 0;
    color: var(--cvpo-ink-soft);
    font-size: 14px;
    line-height: 1.95;
}
.cvpo-seo-block a { color: var(--cvpo-blue); }
.cvpo-seo-packs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px 16px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.cvpo-seo-packs a {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 9px 12px;
    border: 1px solid var(--cvpo-line);
    border-radius: 9px;
    color: var(--cvpo-ink);
    background: #fff;
    text-decoration: none;
}
.cvpo-seo-packs a:hover { border-color: #b9c6d4; background: #fbfdff; }
.cvpo-seo-packs b {
    flex: 0 0 auto;
    color: #8a97a8;
    font: 700 10px/1 ui-monospace, monospace;
    letter-spacing: .08em;
}
.cvpo-seo-packs span { flex: 1 1 auto; font-size: 13px; line-height: 1.4; }
.cvpo-seo-packs small { flex: 0 0 auto; color: #8a97a8; font-size: 10px; }

@media (max-width: 1080px) {
    .cvpo-lobby-section { margin-right: 30px; margin-left: 30px; }
}
@media (max-width: 760px) {
    .cvpo-lobby-section { margin-right: 22px; margin-left: 22px; }
    .cvpo-seo { margin-top: 44px; }
    .cvpo-seo-inner { gap: 34px; }
    .cvpo-seo-block h2 { font-size: 20px; }
    .cvpo-seo-block h3 { font-size: 15px; }
}
@media (max-width: 480px) {
    .cvpo-lobby-section { margin-right: 16px; margin-left: 16px; }
    .cvpo-seo-packs { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
    .cvpo-lobby-section { margin-right: 12px; margin-left: 12px; }
}


/* ------------------------------------------------------------------
   見出しタグの既定値を打ち消す（オーナー指摘 2026-08-23）。
   ロビーに出るパック名はすべて H3 にしたが、見た目は前のままにする。
------------------------------------------------------------------ */
.cvpo-focus-copy .cvpo-focus-name,
.cvpo-pack-choice-copy .cvpo-pack-choice-name,
.cvpo-vote-now-title,
.cvpo-promo-body .cvpo-promo-name {
    font-family: inherit;
    font-weight: 700;
}
.cvpo-pack-choice-copy .cvpo-pack-choice-name { margin-bottom: 0; }

/* いま配信中（h3 にしたが枠の見た目は変えない）。 */
.cvpo-vote-now-title { margin: 0; font-size: inherit; line-height: inherit; }

/* アンケートの見出し。ゲーム名ではなく順位が入るので、等幅・大文字化をやめる。 */
.cvpo-vote-poll { min-width: 0; }
.cvpo-vote-poll-title {
    margin: 0 0 12px;
    color: #dce7f5;
    font-size: 14px;
    letter-spacing: -.01em;
}
.cvpo-vote-game h3 {
    color: #9fb2c9;
    font: 700 11px/1.5 inherit;
    letter-spacing: 0;
    text-transform: none;
}
.cvpo-vote h2.cvpo-vote-poll-title { font-size: 14px; margin: 0 0 12px; }


/* ------------------------------------------------------------------
   本文セクションを開閉式にする（オーナー指摘 2026-08-23）。
   開封シミュレーターなのに下へ文章が続いて間延びする、という指摘への対応。
   閉じていても HTML には載るのでクロールはされる。
------------------------------------------------------------------ */
.cvpo-seo-block {
    border: 1px solid var(--cvpo-line);
    border-radius: 10px;
    background: #fff;
}
.cvpo-seo-head {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
}
.cvpo-seo-head::-webkit-details-marker { display: none; }
.cvpo-seo-head:hover { background: #fbfdff; }
.cvpo-seo-head h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: -.01em;
}
.cvpo-seo-head i {
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    transition: transform .2s;
}
.cvpo-seo-head i::before,
.cvpo-seo-head i::after {
    content: '';
    position: absolute;
    background: #8a97a8;
}
.cvpo-seo-head i::before { top: 6px; left: 0; width: 14px; height: 2px; }
.cvpo-seo-head i::after { top: 0; left: 6px; width: 2px; height: 14px; transition: opacity .2s; }
.cvpo-seo-block[open] .cvpo-seo-head i::after { opacity: 0; }
.cvpo-seo-body { padding: 0 18px 20px; }
.cvpo-seo-body > h3:first-child { margin-top: 0; }
.cvpo-seo-inner { gap: 12px; }
@media (max-width: 760px) {
    .cvpo-seo-head { padding: 14px 15px; }
    .cvpo-seo-head h2 { font-size: 15px; }
    .cvpo-seo-body { padding: 0 15px 17px; }
}


/* ランキング／コレクションを上へ動かしたぶん、
   「カードゲームを選ぶ」との間に余白を入れる（オーナー指摘 2026-08-23）。 */
.cvpo-member-nav + .cvpo-lobby-section { margin-top: 18px; }
@media (max-width: 760px) { .cvpo-member-nav + .cvpo-lobby-section { margin-top: 14px; } }


/* 開閉ブロックはツール本体と同じ幅にそろえる（左に寄って見えるため）。 */
.cvpo-seo-inner { max-width: none; }
.cvpo-seo { margin-right: clamp(16px, 4vw, 40px); margin-left: clamp(16px, 4vw, 40px); }


/* パック一覧の各行を見出しにした（オーナー指示 2026-08-23：全パックをH3に）。
   見た目は今までの1行のままにする。 */
.cvpo-seo-packs h3.cvpo-seo-pack-name {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.4;
}
.cvpo-seo-packs h3.cvpo-seo-pack-name span { flex: 1 1 auto; font-size: 13px; }


/* 「パックを選ぶ」はトップ以外では見出しではなく操作のラベル。
   p タグになっても太字のまま見せる。 */
.cvpo-pack-browser > header .cvpo-pack-select-label { font-weight: 700; }


/* 「{ゲーム名}シミュレーターで／開封するパックを選ぶ」の2行見出し。
   上の行は小さい赤字（オーナー指示 2026-08-23）。 */
.cvpo-pack-select-title {
    margin: 0;
    font-size: 23px;
    line-height: 1.25;
    letter-spacing: -.03em;
}
.cvpo-pack-select-kicker {
    display: block;
    margin-bottom: 4px;
    color: #ff5968;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}
@media (max-width: 760px) {
    .cvpo-pack-select-title { font-size: 20px; }
    .cvpo-pack-select-kicker { font-size: 10px; }
}

/* 「このパックを剥く」はリンクになった。下線と既定の色を消す。 */
.cvpo-pack-open { text-decoration: none !important; }
.cvpo-pack-open:hover { color: #041018; }


/* 品番と名前をまとめて見出しにした。h3 の既定値だけ打ち消し、
   中の small / span には今までの指定がそのまま効く。 */
.cvpo-pack-choice-copy .cvpo-pack-choice-heading {
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
}

/* --- サーバー遷移リンク（2026-08-24） --- */
/* ★ゲームタブ・パックタイル・ロビーへ戻る導線は、ボタンからリンクになった。
   階層が変わる操作はサーバーに取りに行かせるため（同じURLが別の中身を返す
   のをやめる）。見た目と当たり判定はボタンだったときのままにする。 */
a.cvpo-game-tab,
a.cvpo-pack-choice,
a.cvpo-back-lobby {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

a.cvpo-game-tab:focus-visible,
a.cvpo-pack-choice:focus-visible,
a.cvpo-back-lobby:focus-visible {
    outline: 2px solid var(--cvpo-accent);
    outline-offset: 2px;
}