/* AKARI Video Lab — 共通部品: シリアルナンバー付き Lifetime パス（.pass-card） ※パスレーン所有
*
* 読み込み（base.css の後）:
*
*
*
* いちばん短い使い方（中身は空のまま置けば pass-card.js が描く）:
*
* ← 無料会員（点線の「無し」カード）
*
* 属性:
* data-tier lifetime | member（既定 lifetime）
* data-serial 0〜500。表示は常に 3 桁（000 は開発者 = FOUNDER 表記）
* data-holder ホルダー名（英字は大文字で表示）
* data-size lg 560px | md 400px | sm 260px（既定 md。幅は親に収まるよう縮む。--pc-w で任意の幅も可）
* data-pose tilt（少し斜めに構える）| flat（正面）。既定は lg / md = tilt、sm = flat
* data-static 付けるとポインタで傾かない・光らない（reduced-motion では常に静止）
* data-tilt-area=".selector" ポインタを拾う範囲（card.closest(selector)。既定はカード自身）
*
* 中の寸法はすべて cqw（カードの幅に対する %）なので、どの大きさでも同じ見た目で縮む。
* 常時アニメーションは無し。動くのは「ポインタがあるときの傾き・鏡面」と「画面に入ったとき 1 回だけの光」だけ。
*/
.pass-card {
--pc-w: 400px;
--pc-t: 0.26cqw; /* 厚みの層 1 枚の間隔 */
--rest-rx: 5deg; /* 構え（静止時の傾き） */
--rest-ry: -9deg;
--rx: 0deg; /* ポインタで足される傾き（JS が書く） */
--ry: 0deg;
--mx: 30%; /* 鏡面ハイライトの位置 */
--my: 18%;
--hx: 30; /* ホログラムの位相 0〜100 */
--pc-radius: 3.9cqw;
position: relative;
display: block;
width: min(100%, var(--pc-w));
aspect-ratio: 85.6 / 54;
container-type: inline-size;
perspective: 1500px;
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
}
.pass-card[data-size="lg"] { --pc-w: 560px; }
.pass-card[data-size="md"] { --pc-w: 400px; }
.pass-card[data-size="sm"] { --pc-w: 260px; --rest-rx: 0deg; --rest-ry: 0deg; }
.pass-card[data-pose="flat"] { --rest-rx: 0deg; --rest-ry: 0deg; }
.pass-card[data-pose="tilt"] { --rest-rx: 5deg; --rest-ry: -9deg; }
/* ── 本体（傾く箱）── */
.pc__body {
position: absolute; inset: 0;
transform-style: preserve-3d;
transform: rotateX(calc(var(--rest-rx) + var(--rx))) rotateY(calc(var(--rest-ry) + var(--ry)));
transition: transform 0.9s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.pass-card.is-live .pc__body { transition: none; }
/* 厚み（側面）: 同じ形の層を奥へ重ねる。傾けたときだけ縁から覗く */
.pc__edge {
position: absolute; inset: 0; border-radius: var(--pc-radius);
transform: translateZ(calc(var(--i) * var(--pc-t) * -1));
background: linear-gradient(100deg, #6f6b66 0%, #cfccc7 22%, #8e8a85 48%, #bebbb6 74%, #6a6661 100%);
box-shadow: inset 0 0 0 0.12cqw rgba(0, 0, 0, 0.18);
}
.pc__edge:last-of-type { background: linear-gradient(100deg, #55524e, #9d9994 40%, #5f5c58); }
/* ── 表・裏の面 ── */
.pc__face {
position: absolute; inset: 0; overflow: hidden; border-radius: var(--pc-radius);
backface-visibility: hidden; -webkit-backface-visibility: hidden;
transform: translateZ(0.01px);
color: #57524c;
font-family: var(--font-en, "Inter Tight", system-ui, sans-serif);
line-height: 1;
letter-spacing: 0;
}
.pc__face--back { transform: translateZ(calc(var(--pc-t) * -6)) rotateY(180deg); }
/* プラチナの地金（わずかに暖色の環境光を拾う） */
.pc__metal {
position: absolute; inset: 0;
background:
linear-gradient(112deg, #cfcdc9 0%, #f3f2ef 15%, #c3c0bb 31%, #e9e7e3 47%, #b1aea9 64%, #dedcd8 80%, #c2bfba 100%);
}
/* ヘアライン（横方向の筋）: 引き延ばしたノイズ + 1px の細線。静止画なので描画は 1 回だけ */
.pc__hair {
position: absolute; inset: 0; opacity: 0.62; mix-blend-mode: overlay;
background:
url("data:image/svg+xml;utf8,") 0 0 / 100% 100%,
repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 1px, rgba(0, 0, 0, 0.05) 1px 2px, rgba(255, 255, 255, 0) 2px 3px);
}
/* 右側の刻印: 大きな灯る球の輪郭と、その中だけの同心の筋（ギョーシェ） */
.pc__mark {
position: absolute; width: 74cqw; height: 74cqw; right: -20cqw; top: -2cqw; pointer-events: none;
opacity: 0.9;
}
.pc__mark .m-ring { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.9; }
.pc__mark .m-ring-d { fill: none; stroke: rgba(70, 64, 58, 0.18); stroke-width: 0.9; }
.pc__mark .m-cut { stroke: rgba(70, 64, 58, 0.05); stroke-width: 18.6; }
.pc__mark .m-cut-l { stroke: rgba(255, 255, 255, 0.22); stroke-width: 0.7; fill: none; }
.pc__rings {
position: absolute; width: 74cqw; height: 74cqw; right: -20cqw; top: -2cqw; border-radius: 50%; pointer-events: none;
background: repeating-radial-gradient(circle at 50% 50%, rgba(70, 64, 58, 0.075) 0 0.16cqw, rgba(255, 255, 255, 0.1) 0.16cqw 0.34cqw, rgba(0, 0, 0, 0) 0.34cqw 0.82cqw);
-webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
opacity: 0.85;
}
/* 鏡面ハイライト: ポインタの点の光 + 縦に伸びる帯（横ヘアラインの異方性反射）+ 斜めの帯 */
.pc__sheen {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(52cqw 36cqw at var(--mx) var(--my), rgba(255, 255, 255, 0.78), rgba(255, 250, 242, 0.18) 45%, rgba(255, 255, 255, 0) 72%),
linear-gradient(90deg, rgba(255, 255, 255, 0) calc(var(--mx) - 16%), rgba(255, 252, 246, 0.4) var(--mx), rgba(255, 255, 255, 0) calc(var(--mx) + 16%)),
linear-gradient(118deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.28) 44%, rgba(255, 238, 214, 0.1) 50%, rgba(255, 255, 255, 0) 60%);
mix-blend-mode: soft-light;
}
.pc__spec {
position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
background: radial-gradient(34cqw 24cqw at var(--mx) var(--my), rgba(255, 252, 246, 0.42), rgba(255, 255, 255, 0) 70%);
}
/* ハイライトの反対側は少し沈む（金属が周りの暗さを映す） */
.pc__shade {
position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
background: radial-gradient(80cqw 56cqw at calc(100% - var(--mx)) calc(100% - var(--my)), rgba(96, 90, 84, 0.26), rgba(255, 255, 255, 0) 72%);
}
/* 画面に入ったとき 1 回だけ走る光 */
.pc__glint {
position: absolute; inset: -10% -40%; pointer-events: none; opacity: 0;
background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.75) 48%, rgba(255, 236, 206, 0.35) 52%, rgba(255, 255, 255, 0) 62%);
mix-blend-mode: soft-light;
transform: translateX(-60%);
}
.pass-card.is-glint .pc__glint { animation: pcGlint 1.5s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) forwards; }
@keyframes pcGlint { 0% { opacity: 1; transform: translateX(-60%); } 100% { opacity: 1; transform: translateX(60%); } }
/* 縁の面取り（上左が明るく下右が暗い） */
.pc__rim {
position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
box-shadow:
inset 0 0.22cqw 0 rgba(255, 255, 255, 0.95),
inset 0.18cqw 0 0 rgba(255, 255, 255, 0.5),
inset 0 -0.22cqw 0 rgba(40, 36, 32, 0.34),
inset -0.18cqw 0 0 rgba(40, 36, 32, 0.18),
inset 0 0 0 0.08cqw rgba(60, 55, 50, 0.3);
}
/* ── レイアウト ── */
.pc__lay {
position: absolute; inset: 0; padding: 5.4cqw 6.2cqw 5.2cqw;
display: grid; grid-template-rows: auto auto 1fr auto; align-content: stretch;
}
.pc__row { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; min-width: 0; }
/* 刻印（凹）と エンボス（凸） */
.pc__engr { color: #5b5650; text-shadow: 0 0.14cqw 0 rgba(255, 255, 255, 0.78), 0 -0.06cqw 0 rgba(40, 36, 32, 0.25); }
.pc__emb {
color: #a19c95;
text-shadow:
-0.12cqw -0.12cqw 0 rgba(255, 255, 255, 0.95),
0.14cqw 0.14cqw 0 rgba(58, 53, 48, 0.5),
0.26cqw 0.32cqw 0.4cqw rgba(0, 0, 0, 0.2);
}
.pc__brand { display: inline-flex; align-items: center; gap: 1.9cqw; min-width: 0; }
.pc__orb { width: 6.4cqw; height: 6.4cqw; flex: none; filter: drop-shadow(0 0.3cqw 0.4cqw rgba(110, 40, 0, 0.35)); }
.pc__brand-t { font-weight: 700; font-size: 2.55cqw; letter-spacing: 0.2em; white-space: nowrap; }
.pc__brand-t i { font-style: normal; font-weight: 500; opacity: 0.8; }
/* ホログラムのシール: 地の銀 + 角度で流れる虹 + 回折の同心円 + 球の紋章 */
.pc__holo {
position: relative; flex: none; width: 13.6cqw; height: 9.4cqw; border-radius: 1.3cqw; overflow: hidden;
background: linear-gradient(135deg, #d6d9df, #f8f8fa 42%, #c0c4cc);
box-shadow: inset 0 0 0 0.14cqw rgba(255, 255, 255, 0.75), inset 0 0 1.6cqw rgba(255, 255, 255, 0.45), 0 0.12cqw 0.3cqw rgba(0, 0, 0, 0.28);
isolation: isolate;
}
.pc__holo::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background: linear-gradient(115deg, #ff9fd0, #ffd49a, #f4ff9c, #98ffc9, #9ed6ff, #c7a2ff, #ff9fd0, #ffd49a, #f4ff9c);
background-size: 300% 300%;
background-position: calc(var(--hx) * 1%) calc(100% - var(--hx) * 1%);
opacity: 0.62; filter: saturate(1.25);
transition: background-position 0.9s var(--ease-out, ease);
}
.pass-card.is-live .pc__holo::before { transition: none; }
.pc__holo::after {
content: ""; position: absolute; inset: 0; z-index: 3;
background:
radial-gradient(70% 90% at calc(var(--hx) * 1.2%) 20%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 62%),
repeating-radial-gradient(circle at 50% 54%, rgba(255, 255, 255, 0.7) 0 0.18cqw, rgba(255, 255, 255, 0) 0.18cqw 0.5cqw),
repeating-linear-gradient(62deg, rgba(255, 255, 255, 0.28) 0 0.1cqw, rgba(255, 255, 255, 0) 0.1cqw 0.42cqw);
mix-blend-mode: overlay;
}
.pc__holo svg { position: absolute; z-index: 2; left: 50%; top: 52%; width: 6.8cqw; height: 6.8cqw; transform: translate(-50%, -50%); mix-blend-mode: multiply; opacity: 0.5; }
/* チップ（EMV の接点パターン・SVG） */
.pc__row--chip { justify-content: flex-start; gap: 2.4cqw; margin-top: 5.6cqw; }
.pc__chip { width: 13.4cqw; height: auto; flex: none; overflow: visible; filter: drop-shadow(0 0.14cqw 0.16cqw rgba(30, 24, 16, 0.35)); }
.pc__nfc { width: 4.6cqw; height: 4.6cqw; flex: none; color: #7a746d; filter: drop-shadow(0 0.12cqw 0 rgba(255, 255, 255, 0.75)); }
/* シリアル */
.pc__serialrow { align-self: end; display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqw; margin-bottom: 3.1cqw; }
.pc__serial { display: inline-flex; align-items: baseline; gap: 1.6cqw; white-space: nowrap; }
.pc__no { font-weight: 600; font-size: 4.2cqw; letter-spacing: 0.02em; }
.pc__digits {
display: inline-flex; font-weight: 600; font-size: 11.4cqw; letter-spacing: 0.035em; line-height: 0.86;
font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.pc__of { font-family: var(--font-mono, monospace); font-weight: 500; font-size: 2.3cqw; letter-spacing: 0.08em; }
.pc__founder {
align-self: center; display: inline-flex; align-items: center; height: 3.9cqw; padding: 0 1.6cqw; border-radius: 99cqw;
font-family: var(--font-mono, monospace); font-weight: 500; font-size: 1.9cqw; letter-spacing: 0.2em; color: #fff4e6;
background: linear-gradient(180deg, #ffa53d, #ee6a12);
box-shadow: inset 0 0.14cqw 0 rgba(255, 230, 190, 0.8), inset 0 -0.14cqw 0 rgba(120, 40, 0, 0.45), 0 0.16cqw 0.3cqw rgba(90, 30, 0, 0.35);
text-shadow: 0 -0.08cqw 0 rgba(120, 40, 0, 0.5);
}
.pc__valid { display: flex; flex-direction: column; align-items: flex-end; gap: 0.9cqw; }
.pc__valid b { font-weight: 500; font-size: 4.6cqw; line-height: 0.8; }
/* スロットの桁（登場演出のときだけ） */
.pc__reel { display: inline-block; height: 1em; overflow: hidden; line-height: 1; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.pc__reel.is-stopped { -webkit-mask-image: none; mask-image: none; }
.pc__strip { display: flex; flex-direction: column; will-change: transform; }
.pc__strip > span { display: block; height: 1em; line-height: 1; }
.pc__digits.is-reels { line-height: 1; }
.pc__lbl { display: block; font-family: var(--font-mono, monospace); font-weight: 500; font-size: 1.36cqw; letter-spacing: 0.22em; }
.pc__row--foot { align-items: flex-end; }
.pc__field { display: flex; flex-direction: column; gap: 1.1cqw; min-width: 0; }
.pc__holder {
font-family: var(--font-mono, monospace); font-weight: 500; font-size: 3.05cqw; letter-spacing: 0.12em; text-transform: uppercase;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52cqw; padding: 0.2cqw 0.3cqw;
}
.pc__holder.is-ja { font-family: var(--font-jp, sans-serif); font-weight: 700; letter-spacing: 0.08em; }
.pc__product { text-align: right; flex: none; }
.pc__product b { display: block; font-weight: 800; font-size: 3.3cqw; letter-spacing: 0.16em; }
.pc__product small { display: block; margin-top: 0.9cqw; font-family: var(--font-mono, monospace); font-size: 1.36cqw; letter-spacing: 0.3em; }
/* 小さいカードでは細字のラベルを省く（5px 未満になって読めないため） */
@container (max-width: 380px) {
.pc__lbl, .pc__product small { display: none; }
}
@container (max-width: 300px) {
.pc__of { display: none; }
.pc__holder { font-size: 3.4cqw; }
}
/* 落ち影（カードの外。傾きに少しだけ追従） */
.pc__shadow {
position: absolute; left: 8%; right: 8%; bottom: -9%; height: 16%; pointer-events: none; border-radius: 50%;
background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
transform: scaleX(0.96);
filter: blur(1.4cqw); z-index: -1;
}
.pass-card[data-tier="lifetime"] .pc__face--front { box-shadow: 0 0 9cqw -3cqw rgba(255, 138, 0, 0.38); }
/* ── 裏面（登場演出で回転するときに見える）── */
.pc__stripe { position: absolute; left: 0; right: 0; top: 11%; height: 19%; background: linear-gradient(180deg, #1b1917, #2c2926 40%, #151311); box-shadow: inset 0 0.2cqw 0 rgba(255, 255, 255, 0.08); }
.pc__back-lay { position: absolute; inset: 0; padding: 38% 6.2cqw 5.2cqw; display: flex; flex-direction: column; justify-content: space-between; }
.pc__back-sign {
height: 8cqw; border-radius: 0.8cqw; display: flex; align-items: center; justify-content: flex-end; padding: 0 2cqw;
background: repeating-linear-gradient(135deg, #efece7 0 0.6cqw, #e2ded8 0.6cqw 1.2cqw);
box-shadow: inset 0 0.12cqw 0.3cqw rgba(0, 0, 0, 0.2);
font-family: var(--font-mono, monospace); font-size: 2.6cqw; letter-spacing: 0.1em; color: #6d6861;
}
.pc__back-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 2cqw; }
.pc__back-foot .pc__orb { width: 7cqw; height: 7cqw; }
.pc__back-t { font-family: var(--font-mono, monospace); font-size: 1.6cqw; letter-spacing: 0.18em; line-height: 1.7; }
/* ══════════ 無料会員: 点線の輪郭だけの「無い」カード ══════════ */
.pass-card[data-tier="member"] { --rest-rx: 0deg; --rest-ry: 0deg; }
.pass-card[data-tier="member"] .pc__face {
background: radial-gradient(90% 120% at 20% 0%, rgba(255, 236, 214, 0.035), rgba(255, 236, 214, 0) 60%);
color: var(--text-2, #c9bfb3);
box-shadow: none;
}
.pc__dash { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pc__dash rect { fill: none; stroke: rgba(255, 236, 214, 0.34); stroke-width: 3.2; stroke-dasharray: 2 13; stroke-linecap: round; }
.pc__ghost { position: absolute; inset: 0; padding: 5.4cqw 6.2cqw 5.2cqw; display: grid; grid-template-rows: auto auto 1fr auto; }
.pc__ghost-brand { font-weight: 700; font-size: 2.55cqw; letter-spacing: 0.2em; color: rgba(255, 236, 214, 0.3); }
.pc__ghost-chip { width: 13.4cqw; aspect-ratio: 100 / 76; margin-top: 5.6cqw; border-radius: 1.6cqw; border: 0.3cqw dashed rgba(255, 236, 214, 0.22); }
.pc__ghost-no { align-self: end; font-weight: 600; font-size: 11.4cqw; line-height: 0.86; letter-spacing: 0.035em; color: transparent; -webkit-text-stroke: 0.18cqw rgba(255, 236, 214, 0.2); margin-bottom: 3.1cqw; white-space: nowrap; }
.pc__ghost-no small { font-size: 4.2cqw; margin-right: 1.6cqw; }
.pc__ghost-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 2cqw; }
.pc__ghost-say { font-family: var(--font-jp, sans-serif); font-weight: 700; font-size: 3.5cqw; letter-spacing: 0.06em; color: var(--text, #f4ede4); line-height: 1.3; }
.pc__ghost-say small { display: block; margin-top: 1cqw; font-family: var(--font-mono, monospace); font-weight: 500; font-size: 1.6cqw; letter-spacing: 0.26em; color: rgba(255, 236, 214, 0.42); }
.pc__ghost-lock { width: 5.4cqw; height: 5.4cqw; color: rgba(255, 236, 214, 0.32); }
@container (max-width: 300px) { .pc__ghost-say { font-size: 4.4cqw; } .pc__ghost-say small { display: none; } }
/* ══════════ 登場演出（AkariPassCard.reveal）══════════ */
.pcr {
position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden;
color: var(--text, #f4ede4); font-family: var(--font-jp, sans-serif);
outline: none;
}
.pcr__bg { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, #1a120c, #080605 70%); }
.pcr__bloom {
position: absolute; left: 50%; top: var(--pcr-cy, 40%); width: 110vmax; height: 110vmax; margin: -55vmax 0 0 -55vmax; pointer-events: none; opacity: 0;
background: radial-gradient(closest-side, rgba(255, 214, 160, 0.55), rgba(255, 138, 0, 0.22) 26%, rgba(255, 90, 31, 0.06) 48%, rgba(0, 0, 0, 0) 70%);
}
.pcr__rays {
position: absolute; left: 50%; top: var(--pcr-cy, 40%); width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; pointer-events: none; opacity: 0;
background: repeating-conic-gradient(from 0deg, rgba(255, 170, 80, 0.16) 0deg 2.2deg, rgba(0, 0, 0, 0) 2.2deg 12deg);
-webkit-mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, 0.5) 30%, transparent 62%);
mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, 0.5) 30%, transparent 62%);
}
.pcr__streak {
position: absolute; left: 50%; top: var(--pcr-cy, 40%); width: 70vmax; height: 2px; margin-left: -35vmax; pointer-events: none; opacity: 0;
background: linear-gradient(90deg, rgba(255, 138, 0, 0), rgba(255, 150, 40, 0.3) 45%, #ffe2b8 88%, #fff 97%, rgba(255, 255, 255, 0));
box-shadow: 0 0 18px 2px rgba(255, 150, 40, 0.55);
border-radius: 2px;
}
.pcr__ring {
position: absolute; left: 50%; top: calc(var(--pcr-cy, 40%) + var(--pcr-ch, 180px) * 0.5); width: var(--pcr-cw, 520px); height: calc(var(--pcr-cw, 520px) * 0.2);
margin-left: calc(var(--pcr-cw, 520px) * -0.5); margin-top: calc(var(--pcr-cw, 520px) * -0.1);
border-radius: 50%; border: 2px solid rgba(255, 200, 140, 0.85); box-shadow: 0 0 30px rgba(255, 138, 0, 0.6), inset 0 0 30px rgba(255, 138, 0, 0.4);
pointer-events: none; opacity: 0;
}
.pcr__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pcr__main { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(22px, 4.2vh, 44px); width: min(100% - 32px, 760px); }
.pcr__stage { position: relative; width: 100%; display: grid; place-items: center; }
.pcr__stage .pass-card { --pc-w: min(560px, 86vw, calc((100svh - 330px) * 1.585)); perspective: 1100px; --rest-rx: 0deg; --rest-ry: 0deg; }
.pcr__floor {
position: absolute; left: 50%; bottom: -12%; width: 80%; height: 30%; transform: translateX(-50%); pointer-events: none; opacity: 0;
background: radial-gradient(closest-side, rgba(255, 138, 0, 0.28), rgba(255, 138, 0, 0));
filter: blur(8px);
}
.pcr__copy { text-align: center; display: grid; justify-items: center; gap: 12px; }
.pcr__k { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 0.22em; color: var(--orange-2, #ffa53d); text-transform: uppercase; }
.pcr__title { font-size: clamp(1.55rem, 3.4vw, 2.6rem); font-weight: 900; line-height: 1.25; letter-spacing: 0.02em; }
.pcr__title em { font-style: normal; font-family: var(--font-en, sans-serif); color: var(--orange, #ff8a00); text-shadow: 0 0 34px rgba(255, 138, 0, 0.55); white-space: nowrap; }
.pcr__desc { color: var(--text-2, #c9bfb3); font-size: clamp(0.95rem, 1.3vw, 1.08rem); line-height: 1.7; }
.pcr__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.pcr__btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px;
font-weight: 700; font-size: 15px; letter-spacing: 0.04em; white-space: nowrap;
border: 1px solid var(--line-2, rgba(255, 236, 214, 0.16)); background: rgba(255, 236, 214, 0.04); color: var(--text, #f4ede4);
transition: transform 0.4s var(--ease-out, ease), border-color 0.3s, background 0.3s;
}
.pcr__btn svg { width: 17px; height: 17px; flex: none; }
.pcr__btn:hover { border-color: var(--orange, #ff8a00); }
.pcr__btn--x { background: var(--text, #f4ede4); color: #0b0908; border-color: transparent; box-shadow: 0 12px 40px -12px rgba(255, 220, 180, 0.45); }
.pcr__btn--x:hover { border-color: transparent; transform: translateY(-1px); }
.pcr__btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.pcr__btn--ghost { background: transparent; border-color: transparent; color: var(--text-2, #c9bfb3); }
.pcr__btn--ghost:hover { color: var(--text, #f4ede4); border-color: var(--line-2, rgba(255, 236, 214, 0.16)); }
.pcr__x {
position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); z-index: 3;
width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
border: 1px solid var(--line-2, rgba(255, 236, 214, 0.16)); color: var(--text-2, #c9bfb3); background: rgba(11, 9, 8, 0.4);
}
.pcr__x svg { width: 18px; height: 18px; }
.pcr__x:hover { color: var(--text, #f4ede4); border-color: var(--orange, #ff8a00); }
.pcr__skip { position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; z-index: 3; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.16em; color: rgba(255, 236, 214, 0.38); transition: opacity 0.4s; }
.pcr.is-done .pcr__skip { opacity: 0; }
.pcr__toast { position: absolute; left: 50%; bottom: 28px; z-index: 4; padding: 10px 18px; border-radius: 999px; background: var(--text, #f4ede4); color: #0b0908; font-weight: 700; font-size: 14px; transform: translate(-50%, 20px); opacity: 0; transition: opacity 0.35s, transform 0.45s var(--ease-out, ease); pointer-events: none; }
.pcr__toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* 演出中は見えていないボタンを押せないようにする（画面を押す = 演出を飛ばす）*/
.pcr.is-playing .pcr__copy { pointer-events: none; }
@media (max-width: 560px) {
.pcr__main { gap: 22px; }
.pcr__actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.pcr__btn { padding: 0 12px; font-size: 14px; gap: 8px; }
.pcr__btn--ghost { grid-column: 1 / -1; min-height: 42px; }
}
@media (max-height: 640px) {
.pcr__main { gap: 16px; }
.pcr__stage .pass-card { --pc-w: min(440px, 80vw, calc((100svh - 280px) * 1.585)); }
}
@media (prefers-reduced-motion: reduce) {
.pc__body, .pc__holo::before { transition: none; }
.pass-card.is-glint .pc__glint { animation: none; }
}