/* ── 立体スライド ─────────────────────────── */
.deck{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column;
  justify-content:center;padding:6px 0 0;touch-action:pan-y;
  overflow:hidden;overflow:clip}
.rail-wrap{flex:0 0 auto}
.rail{position:relative;height:var(--ch);perspective:1400px;perspective-origin:50% 50%;
  margin:0 auto;width:100%;max-width:1200px;cursor:grab}
.rail.drag{cursor:grabbing}
#rail .slot{position:absolute;left:50%;top:0;width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) / -2);
  transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.24,.72,.18,1),opacity 1.05s;
  will-change:transform}
#rail .slot .shot{position:relative;width:100%;height:100%;overflow:hidden}
#rail .slot .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 10%;
  transition:transform 1.05s cubic-bezier(.3,.6,.2,1),filter 1.05s cubic-bezier(.3,.6,.2,1),opacity 1.05s;
  /* 下へ向かって画像そのものを透かす。黒を重ねないので左右に帯が出ない */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 95%,rgba(0,0,0,.5) 98%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 95%,rgba(0,0,0,.5) 98%,transparent 100%)}
/* 中央のキャラクターは、ゆっくり呼吸するように伸び縮みする */
@keyframes swell{from{transform:scale(1.03)}to{transform:scale(1.13)}}
.slot.center .shot{animation:swell 3s cubic-bezier(.24,.62,.24,1) forwards}
/* 選択したキャラクターは大きくなりながら、周りは小さくなりながら消える。
   はじめは速く、終わりはゆっくり */
.rail.leaving .slot{transition:transform 2.15s cubic-bezier(.28,.42,.3,1),opacity 1.9s cubic-bezier(.3,.5,.35,1)}
.rail.leaving .slot .shot{animation:none}
.slot.zoom{z-index:110}
#rail .slot .shot img{transition:filter .55s cubic-bezier(.22,.7,.2,1)}
.slot.side .shot{cursor:pointer}
/* 中央から離れるほど、ぼかして奥へ沈ませる */
.slot.d1 .shot img{filter:blur(2.4px) brightness(.62) saturate(.85)}
.slot.d2 .shot img{filter:blur(4.4px) brightness(.5)  saturate(.75)}

/* 中央のキャラクター情報 */
/* 星のきらめき。キャラクターの背後でさりげなく光る */
@keyframes twinkle{
  0%,100%{opacity:0;transform:scale(.35)}
  45%    {opacity:1;transform:scale(1.25)}
  55%    {opacity:1;transform:scale(1.15)}
}
/* 星はキャラクターより後ろ、背景より前 */
.stars{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;pointer-events:none;overflow:hidden}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#FFFFFF;
  box-shadow:0 0 9px 2px rgba(200,230,255,1), 0 0 18px 4px rgba(150,200,255,.45);opacity:0;
  animation:twinkle 4.6s ease-in-out infinite}

/* 中心から放たれる星。数は少なく、静かに外へ流れていく。
   進む向きと尾の向きを揃えるため、
   外側の枠が「動く」、内側の線が「傾く」と役割を分ける      */
@keyframes radiate{
  0%  {transform:translate(var(--x0),var(--y0));opacity:0}
  14% {opacity:1}
  76% {opacity:.9}
  100%{transform:translate(var(--x1),var(--y1));opacity:0}
}
@keyframes radiateLine{
  0%  {transform:scaleX(.2)}
  40% {transform:scaleX(1)}
  100%{transform:scaleX(.7)}
}
.stars u{position:absolute;left:50%;top:46%;display:block;width:0;height:0;opacity:0;
  animation:radiate var(--dur,2s) cubic-bezier(.34,.06,.62,1) forwards}
.stars u::before{content:"";position:absolute;left:0;top:0;
  width:var(--len,74px);height:1.4px;border-radius:2px;
  transform-origin:0 50%;rotate:var(--deg,0deg);
  background:linear-gradient(to left,rgba(255,255,255,.95),rgba(185,220,255,.5) 40%,transparent 100%);
  box-shadow:0 0 7px 1px rgba(190,225,255,.7);
  animation:radiateLine var(--dur,2s) cubic-bezier(.34,.06,.62,1) forwards}

/* 尾のない小さな粒。中心から静かに散っていく */
@keyframes grain{
  0%  {transform:translate(var(--x0),var(--y0)) scale(.6);opacity:0}
  16% {opacity:1}
  70% {opacity:.85}
  100%{transform:translate(var(--x1),var(--y1)) scale(1);opacity:0}
}
.stars s{position:absolute;left:50%;top:46%;display:block;
  width:var(--sz,1.6px);height:var(--sz,1.6px);border-radius:50%;
  background:#FFFFFF;box-shadow:0 0 5px 1px rgba(190,225,255,.7);
  opacity:0;text-decoration:none;
  animation:grain var(--dur,2.4s) cubic-bezier(.3,.08,.6,1) forwards}

@media (prefers-reduced-motion: reduce){
  .stars i,.stars u,.stars s{animation:none;opacity:0}
}

/* 下半分にかける黒。キャラクターの上、文字の下に入る
   （重なりの順：文字 → この黒 → キャラクター → 背景）*/
.scrim{position:absolute;left:0;right:0;bottom:0;height:75%;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(4,7,11,.8) 0%,rgba(4,7,11,0) 100%)}

/* キャラクターの右側に、縦書きでメッセージを置く */
.vmsg{position:absolute;z-index:6;pointer-events:none;
  display:flex;flex-direction:row-reverse;align-items:flex-start}
.vmsg .ln{position:relative;writing-mode:vertical-rl;white-space:nowrap;
  font-family:var(--min);letter-spacing:.22em;line-height:1;color:#FFFFFF;
  padding:26px 5px 12px;
  text-shadow:
    0 0 6px rgba(4,7,11,1),
    0 1px 14px rgba(4,7,11,.98),
    0 0 34px rgba(4,7,11,.92),
    0 0 68px rgba(4,7,11,.8),
    0 0 110px rgba(4,7,11,.6)}
/* 帯は行ごと。文字と同じ長さで、文字と一緒に上から伸びる */
.vmsg .band{position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(4,7,11,0) 0%, rgba(4,7,11,.42) 11%, rgba(4,7,11,.42) 89%, rgba(4,7,11,0) 100%);
  opacity:0;animation:bandIn .9s ease both}
@keyframes bandIn{from{opacity:0}to{opacity:1}}
/* 一文字ずつ、上から降りてくる */
@keyframes vchar{from{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:none}}
.vmsg .ln > span{position:relative;display:inline-block;opacity:0;
  animation:vchar .66s cubic-bezier(.18,.72,.2,1) both}

.info-c{position:relative;z-index:5;text-align:center;padding:4px 20px 0;min-height:150px;
  margin-top:calc(var(--overlap) * -1)}
.info-c::before{content:"";position:absolute;left:50%;top:-24px;translate:-50% 0;width:min(680px,94vw);
  height:calc(100% + 40px);pointer-events:none;
  background:radial-gradient(56% 56% at 50% 52%,rgba(4,7,11,.34),transparent 76%)}
.info-c>div{position:relative}
/* 親しさの★。数字のすぐ上に置く。
   数字の位置は動かさず、星だけを上下できるようにしている。
   下の数値を小さくするほど星は下がり、大きくするほど上がる    */
.info-c .agent .bondStars{display:flex !important;gap:9px;height:34px;
  align-items:center;justify-content:center;
  margin:0 0 -16px;position:relative;z-index:2}
/* アプリとして開いたとき（PWA）に大きくならないよう、
   上限もあわせて指定しておく                          */
.info-c .agent .st{width:32px;height:32px;min-width:32px;min-height:32px;
  max-width:32px;max-height:32px;flex:none;
  opacity:0;transform-origin:50% 50%;
  animation:starIn .78s cubic-bezier(.2,.7,.2,1) .55s forwards}
@keyframes starIn{
  0%   {opacity:0; transform:rotate(-220deg) scale(.2)}
  55%  {opacity:1; transform:rotate(10deg)  scale(1.4)}
  72%  {opacity:1; transform:rotate(-4deg)  scale(.95)}
  100% {opacity:1; transform:rotate(0)      scale(1)}
}
/* 現れたあとも、ゆっくり明滅して輝き続ける */
.info-c .agent{display:flex;flex-direction:column;align-items:center;gap:2px}
.info-c .agent b{font-family:var(--num);font-size:108px;font-weight:500;font-style:italic;line-height:.86;
  letter-spacing:.02em;color:transparent;
  -webkit-text-stroke:.75px var(--c);paint-order:stroke fill}
.info-c .agent span{font-family:var(--mel);font-weight:300;font-size:7.6px;letter-spacing:.3em;
  text-indent:.3em;color:var(--dim)}
.info-c h2{font-family:var(--min);font-size:clamp(25px,3.2vw,36px);font-weight:600;letter-spacing:.22em;margin:9px 0 0}
.info-c .rom{font-family:var(--mel);font-weight:300;font-size:9.1px;letter-spacing:.3em;
  text-indent:.3em;color:var(--dim);margin-top:8px}
.info-c .tag{font-family:var(--min);font-size:clamp(14px,1.6vw,17px);color:#C3D0DA;margin:0;
  letter-spacing:.06em;line-height:1.8}
.info-c .go{margin-top:16px;border-color:#FFFFFF;color:#FFFFFF}
.fade{animation:fadein .78s cubic-bezier(.16,.74,.2,1) both}
@keyframes fadein{from{opacity:0;transform:translateY(calc(var(--overlap) + 10px))}to{opacity:1;transform:none}}

/* 操作 */
.nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;gap:20px;padding:14px 0 8px;
  filter:drop-shadow(0 2px 10px rgba(4,7,11,.92))}
.nav button{width:44px;height:44px;border:1px solid rgba(255,255,255,.55);color:#FFFFFF;
  display:grid;place-items:center;font-size:18px;transition:.25s;border-radius:50%}
.dots{display:flex;gap:7px;align-items:center}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.75);transition:.3s;cursor:pointer;display:block;
  box-shadow:0 1px 4px rgba(4,7,11,.9)}
.dots i.on{background:var(--acc);box-shadow:0 0 8px var(--acc);width:20px;border-radius:99px}

.empty{border:1px solid var(--line);padding:34px 22px;text-align:center;color:var(--dim);font-size:15px;line-height:2;
  max-width:520px;margin:60px auto}

/* パソコンだけ。721px以上のときにここが当たる。
   スマホ（720px以下）とアプリ（PWA）には影響しない          */
@media(min-width:721px){
  .info-c .agent .bondStars{margin-bottom:-30px}
}

@media(max-width:720px){
  :root{--overlap:44px}
  .deck{padding-top:0}
  .info-c .agent .bondStars{margin-bottom:-7px}
  .info-c{min-height:0;padding-top:0}
  .info-c .agent b{font-size:74px}
  .info-c h2{margin-top:5px}
  .info-c .rom{margin-top:6px}
  .vmsg{letter-spacing:.2em}
  .info-c .go{margin-top:14px}
  .nav{gap:14px;padding:10px 0 4px}
  .nav button{width:38px;height:38px}
  .dots i{width:5px;height:5px}
}

/* アプリとして開いたとき（PWA）は、数字の位置が上にずれるので広めにとる。
   スマホの指定より後に置いて、こちらを優先させる                      */
/* アプリとして開いたとき（PWA）。
   スマホ用の指定より後に置き、!important で確実に上書きする */
@media (display-mode:standalone), (display-mode:fullscreen){
  .info-c .agent .bondStars{margin-bottom:9px !important}
}


/* ── キャラクター詳細 ─────────────────────── */
#sheet .inner{max-width:1280px;margin:0 auto;padding:0 24px;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px;align-items:start}
/* パソコンでは、円環が枠の外へ出ても切れないよう左右に余白を取る */
#sheet .fig{position:relative;padding:44px 8% 0}
#sheet .stage{position:relative;display:block;width:100%;aspect-ratio:var(--ar,1/1.04)}
/* 縦は必ず全体を見せる。横がはみ出したときだけ、外側（.box）で切る */
/* 位置は外側の枠が受け持ち、回転と浮遊は内側の画像が受け持つ */
#sheet .layer{position:absolute;left:50%;top:50%;translate:-50% -50%;line-height:0}
#sheet .layer img{position:static;display:block;width:100%;height:auto;border:0}
#sheet .l-en{opacity:.9}
#sheet .l-obj{opacity:.95}
#sheet .l-pose{z-index:2}
#sheet .l-pose img{filter:drop-shadow(0 30px 60px rgba(0,0,0,.85))}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-r{to{transform:rotate(-360deg)}}
@keyframes float{0%,100%{transform:translateY(-1.4%)}50%{transform:translateY(1.4%)}}
#sheet .info{padding-top:70px}
/* 下部のCLOSEバーを廃止したので、その分の余白は減らします */
#sheet .box{padding-bottom:56px}
#sheet .info .agent{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
/* 獲得した星。ナンバーの上に置きます */
#sheet .info .agent .bondStars{display:flex !important;gap:8px;align-items:center;
  height:auto;margin:0 0 4px}
#sheet .info .agent .st{width:29px;height:29px;min-width:29px;min-height:29px;
  max-width:29px;max-height:29px;flex:none;
  opacity:0;transform-origin:50% 50%;
  animation:starIn .78s cubic-bezier(.2,.7,.2,1) .35s forwards}
#sheet .info .agent b{font-family:var(--num);font-size:108px;font-weight:500;font-style:italic;line-height:.86;
  letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px var(--c);paint-order:stroke fill}
#sheet .info .agent span{font-family:var(--mel);font-weight:300;font-size:8.8px;letter-spacing:.3em;
  text-indent:.3em;color:var(--dim)}
#sheet .info h2{font-family:var(--min);font-size:40px;font-weight:600;margin:20px 0 8px;letter-spacing:.14em}
#sheet .info .rom{font-family:var(--mel);font-weight:300;font-size:9.1px;letter-spacing:.3em;
  text-indent:.3em;color:var(--dim)}
#sheet .info .lead{font-family:var(--min);font-size:16px;line-height:2.1;color:#C6D2DB;margin:26px 0 0;letter-spacing:.05em}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* ── 集めたカード（紹介ページの下）──

   12枚を4列×3行。01〜10 は親密度で受け取るもの、
   11・12 はシークレットイベント用の空きです。
   カードの比率は 5:7。まだ受け取っていない枠も押せば大きく見られます。

   クラス名は mcard（ミラメタカード）。
   card という名前は、ほかの画面でも使われていて紛れるためです。 */
/* 立ち姿と紹介文の、両方にまたがる幅で並べます（枠は最大1280px）*/
#sheet .cards{grid-column:1 / -1;width:100%;max-width:980px;margin:56px auto 0}
#sheet .cards h3{font-family:var(--mel);font-weight:300;font-size:9.5px;letter-spacing:.3em;
  color:var(--faint);margin:0 0 16px;text-align:left}

/* パソコンは4枚ずつ3段 */
#sheet .cards .mcGrid{display:grid !important;grid-template-columns:repeat(4,1fr) !important;
  gap:13px;width:100%;margin:0;padding:0;list-style:none}

#sheet .cards .mcGrid > .mcard{position:relative;display:block;width:100%;height:auto;
  aspect-ratio:5/7;border-radius:0;overflow:hidden;cursor:default;padding:0;margin:0;
  border:1px solid var(--line);background:var(--void);
  transition:border-color .3s ease,transform .5s cubic-bezier(.2,.7,.2,1)}

/* 裏。全カード共通の絵柄。比率のまま、枠いっぱいに敷きます */
#sheet .cards .mcGrid > .mcard .cbBack,
#sheet .cards .mcGrid > .mcard .cbPic{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;border-radius:0;border:0;margin:0}
#sheet .cards .mcGrid > .mcard .cbPic{z-index:1}
/* 受け取ったカードだけ、押して大きく見られます */
#sheet .cards .mcGrid > .mcard.got{border-color:var(--line-hi);cursor:pointer}
#sheet .cards .mcGrid > .mcard.got .cbBack{display:none}

#sheet .cards .mcGrid > .mcard b{position:absolute;left:7px;bottom:6px;z-index:2;
  font-family:var(--num);font-size:11.5px;font-weight:400;color:var(--dim);
  letter-spacing:.06em;text-shadow:0 1px 5px rgba(0,0,0,.85)}
#sheet .cards .mcGrid > .mcard.got b{color:var(--txt)}

@media (hover:hover) and (pointer:fine){
  /* 受け取ったカードだけ、押せる見た目にします */
  #sheet .cards .mcGrid > .mcard.got:hover{border-color:var(--c,var(--acc));transform:translateY(-3px)}
}

/* スマートフォンは1行3枚（4段） */
@media(max-width:860px){
  #sheet .cards{margin-top:40px;padding:0 18px}
  #sheet .cards .mcGrid{grid-template-columns:repeat(3,1fr) !important;gap:9px}
}

@media(max-width:860px){
  #sheet .inner{grid-template-columns:1fr;gap:0;padding:0}
  /* スマホは中央に揃える */
  #sheet .info{text-align:center}
  #sheet .info .agent{align-items:center}
  #sheet .info .agent b{font-size:74px}
  #sheet .info .agent .bondStars{justify-content:center;gap:7px}
  #sheet .info .agent .st{width:25px;height:25px;min-width:25px;min-height:25px;
    max-width:25px;max-height:25px}
  /* スマホは左右が画面から出てもよい。縦は切らない */
  #sheet .fig{padding:34px 0 0}
  #sheet .info{padding:18px 18px 0}
  #sheet .info h2{font-size:31px}
}


/* ── カードを大きく見る ──
   画面いっぱいに、比率を保ったまま出します。
   まだ受け取っていないカードも、裏のまま大きく見られます。 */
#cardView{position:fixed;inset:0;z-index:190;background:rgba(4,7,11,.96);
  display:grid;place-items:center;padding:64px 20px 30px;
  opacity:0;pointer-events:none;
  /* 閉じるときは少し待ってから暗くする。カードが戻る動きを見せるためです */
  transition:opacity .5s ease .34s}
#cardView.on{transition:opacity .3s ease}
#cardView.on{opacity:1;pointer-events:auto}
/* cvBox は flex を使いません。preserve-3d の子（.cvCard）が flex の子だと、
   一部のブラウザ（特にSafari系）で3D回転が正しく効かないバグがあるためです。
   代わりに、中央寄せは text-align で行います。 */
#cardView .cvBox{display:block;text-align:center;max-width:100%;max-height:100%}

/* カードと同じ大きさの、位置決めのための舞台。
   粒や光沢は、この舞台を基準に配置します（画面全体ではなく）。 */
/* 奥行き（perspective）は、回転する要素（.cvCard）の
   すぐ親であるここに置きます。2階層以上離れた場所に置くと、
   間に挟まる要素によって効果が薄まり、正しく回らないことがあるためです。 */
#cardView .cvStage{position:relative;display:inline-block;max-width:100%;
  vertical-align:top;perspective:1600px;perspective-origin:50% 50%}
/* 幅で大きさを決め、高さは比率にまかせます。
   高さを先に決めると、画面が狭いときに枠だけ縦に伸びてしまうためです。
   5/7 の 7 で割った値が、高さの上限になります */
/* カードそのもの。表と裏の2枚を、この箱の中で3D回転させます。
   大きさは、開くときにJSで px 指定します（sizeCardView 関数）。
   ここにある幅・高さは、JSが動く前の一瞬だけ使われる、簡単な保険です。
   以前は calc(100dvh...) を使っていましたが、この単位が効かない環境では
   width の指定全体が無効になり、カードが0×0になってしまうため、
   確実さを優先してJS側の計算に切り替えました。 */
#cardView .cvCard{position:relative;display:block;overflow:hidden;
  width:320px;aspect-ratio:5/7;height:auto;max-width:86vw;
  border:1px solid var(--line);background:var(--void);
  transform-origin:50% 50%;
  box-shadow:0 40px 90px rgba(0,0,0,.55);
  /* 角を丸めない・くり抜かない。ほかの指定に影響されて
     楕円に切り抜かれることがあったため、ここで明示して打ち消しています */
  border-radius:0 !important;
  clip-path:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important}
/* 回転そのものは、JSが1フレームずつ角度を指定して動かします。
   ここに transform の transition を書くと、その補間と競合して
   指定した回転量が守られなくなるため、書きません。 */

/* カードは1枚です。表と裏を別々に持つのはやめました。
   回って裏を向いたときは、その絵の反対側（鏡に映したような向き）が見えます。 */
#cardView .cvCard img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  border-radius:0 !important;
  clip-path:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important}
#cardView .cvCard.got{border-color:var(--line-hi)}

/* 位置を測っているあいだと、押したカードの姿へ戻すあいだは動かさない */
#cardView .cvCard.hold{transition:none}
/* 閉じるとき。1回転ぶんなので、ゆっくり見せます */
#cardView .cvCard.closing{transition:transform .86s cubic-bezier(.34,.02,.28,1)}

/* 隣のカードへ送るあいだ。回さずに、横へ滑らせて差し替えます。
   毎回まわすと、めくるたびに待たされて煩わしいためです */
/* 送るあいだの動き。出ていく側と入ってくる側で、同じ効き方にそろえています。
   終わりぎわがゆっくり止まるので、急に現れる感じになりません。 */
#cardView .cvCard.stepping{transition:transform .56s cubic-bezier(.22,.68,.24,1),
  opacity .5s cubic-bezier(.3,.5,.3,1)}

/* 斜めに走る光。受け取った実感が出るよう、開いた直後に一度だけ流します。
   カードの中に置き、overflow:hidden で確実にカードの内側だけに収めます。 */
#cardView .cvCard::after{content:"";position:absolute;inset:0;z-index:3;
  pointer-events:none;opacity:0;
  background:linear-gradient(102deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);
  transform:translateX(-160%)}
#cardView.lit .cvCard::after{animation:cvShine 1.05s .72s cubic-bezier(.3,.1,.2,1) both}
@keyframes cvShine{
  0%  {opacity:0;transform:translateX(-160%)}
  16% {opacity:1}
  100%{opacity:0;transform:translateX(160%)}
}

/* 名前は、カードが回りきるころに追いつくよう遅らせます */
#cardView .cvCap{opacity:0;transform:translateY(7px);
  transition:opacity .5s ease .8s, transform .5s ease .8s}
#cardView.on .cvCap{opacity:1;transform:none}
#cardView .cvCap{display:block;margin-top:18px;
  font-family:var(--min);font-size:14px;color:var(--dim);letter-spacing:.08em;
  text-align:center;line-height:1.9}
#cardView .cvCap span{font-family:var(--num);font-size:13px;color:var(--faint);margin-left:4px}
#cardView .cvCap em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;
  color:var(--faint);letter-spacing:.14em;margin-top:5px}
/* ── そのミラメタの色の粒 ──

   2つに分けています。
     spin … 回っているあいだ、カードの上で次々に弾ける
     aura … 回りきったあと、カードのまわりで静かに瞬く

   どちらもカードとは別の層なので、回転には巻き込まれません。 */
#cardView .cvBox{position:relative}
/* cvStage（カードと同じ大きさ）が基準。画面全体ではなく、カードの位置に合わせます */
#cardView .cvSparks{position:absolute;pointer-events:none}
#cardView .cvSparks i{position:absolute;width:var(--sz,3px);height:var(--sz,3px);
  border-radius:50%;background:var(--c,#fff);opacity:0;
  box-shadow:0 0 7px var(--c,#fff),0 0 15px var(--c,#fff)}

/* 回転中。カードの上で、短く弾けて消える */
#cardView .cvSparks.spin{left:0;right:0;top:0;bottom:0;z-index:5}
#cardView.on .cvSparks.spin i{animation-name:cvBurst;animation-timing-function:cubic-bezier(.2,.8,.3,1);
  animation-fill-mode:both}
@keyframes cvBurst{
  0%  {opacity:0;transform:scale(.2)}
  30% {opacity:1;transform:scale(1.25)}
  100%{opacity:0;transform:scale(.35) translateY(-9px)}
}

/* 回りきったあと。カードの外側とふちのあたりで、ゆっくり瞬く */
#cardView .cvSparks.aura{left:-14%;right:-14%;top:-8%;bottom:-8%;z-index:3;
  opacity:0;transition:opacity .9s ease 1.05s}
#cardView.on .cvSparks.aura{opacity:1}
#cardView .cvSparks.aura i{animation-name:cvSpark;animation-timing-function:ease-in-out;
  animation-iteration-count:infinite}
@keyframes cvSpark{
  0%  {opacity:0;transform:scale(.3)}
  22% {opacity:.8;transform:scale(1)}
  46% {opacity:.12;transform:scale(.7)}
  62% {opacity:.55;transform:scale(.95)}
  100%{opacity:0;transform:scale(.35)}
}

/* ── 隣のカードへ送る矢印 ── */
#cardView .cvArrow{position:absolute;top:50%;translate:0 -50%;z-index:6;
  width:52px;height:52px;display:grid;place-items:center;color:var(--dim);
  opacity:0;transition:opacity .5s ease .7s, color .25s ease}
#cardView.on .cvArrow{opacity:1}
#cardView .cvArrow svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
#cardView .cvArrow.prev{left:16px}
#cardView .cvArrow.next{right:16px}
@media (hover:hover) and (pointer:fine){
  #cardView .cvArrow:hover{color:var(--txt)}
}
@media(max-width:560px){
  #cardView .cvArrow{width:44px;height:44px}
  #cardView .cvArrow svg{width:22px;height:22px}
  #cardView .cvArrow.prev{left:2px}
  #cardView .cvArrow.next{right:2px}
}

/* 閉じる × 。紹介ページの × と同じ形にそろえています */
#cardClose{position:absolute;top:14px;right:16px;z-index:7;
  width:46px;height:46px;display:grid;place-items:center;padding:0;
  color:var(--dim);background:rgba(4,7,11,.5);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:50%;
  transition:color .25s,border-color .25s}
#cardClose svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round}
@media (hover:hover) and (pointer:fine){
  #cardClose:hover{color:var(--txt);border-color:var(--line-hi)}
}
@media(max-width:560px){
  #cardClose{top:10px;right:11px;width:42px;height:42px}
}
@media(max-width:560px){
  #cardView{padding:56px 16px 22px}
}

/* ── チャット ─────────────────────────────── */
.chat{position:fixed;inset:0;z-index:130;display:flex;flex-direction:column;background:var(--void);
  visibility:hidden;transform:translateY(100%);
  transition:transform .78s cubic-bezier(.32,.02,.18,1),visibility 0s .78s}
.chat.on{visibility:visible;transform:none;
  transition:transform .78s cubic-bezier(.18,.6,.16,1),visibility 0s 0s}
.chat::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(90% 55% at 50% -10%,var(--acc-soft),transparent 70%)}
.chead{position:relative;z-index:3;display:flex;align-items:center;gap:11px;padding:10px 13px;
  border-bottom:1px solid var(--line);background:rgba(6,10,14,.9);backdrop-filter:blur(14px)}
.back{width:36px;height:36px;flex:none;display:grid;place-items:center;padding:0;
  font-family:var(--mono);font-size:19px;line-height:1;color:var(--dim);border-radius:50%;transition:color .25s}
.ava{width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--raise);flex:none;
  border:1px solid var(--line-hi);padding:0}
/* グループのときは、丸い枠をやめて、顔を横にずらして重ねる */
/* グループのときは、ただの飾り。押しても何も起きない */
.ava.grp{width:auto;height:40px;border:0;background:none;border-radius:0;overflow:visible;
  display:flex;align-items:center;cursor:default;pointer-events:none}
.ava.grp .gface{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;
  border:1.5px solid var(--void);background:var(--raise);box-shadow:0 0 0 1px var(--line-hi)}
.ava.grp .gface + .gface{margin-left:-13px}
.ava.grp .gface img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
button.ava{cursor:pointer;transition:border-color .25s}
.row .pic{cursor:pointer}
.ava img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.chead .who{flex:1;min-width:0;text-align:center}
.chead .who b{display:block;font-size:16px;font-weight:500;letter-spacing:.1em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* グループのときは、名前ではなくグループ名なので水色にする。
   チャットの中では --acc が相手の色に差し替わっているので、
   ここでは水色を直に書く                                    */
.chat.grp .chead .who b{color:#38D6E6}
.chead .who span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--dim);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ava.me{display:grid;place-items:center;font-family:var(--mono);font-size:14px;color:var(--dim);
  pointer-events:none;cursor:default}
.kebab{width:38px;height:38px;flex:none;display:grid;place-items:center;padding:0;
  font-size:31px;line-height:1;color:#F2F6F9;border-radius:50%;transition:color .25s}
/* ボタンとメニューの隙間をつなぐ。押せなくならないよう、下だけに置く */

.log{position:relative;z-index:2;flex:1;overflow-y:auto;padding:20px 8px 10px;display:flex;flex-direction:column;gap:14px}
.log .sys{align-self:center;text-align:center;max-width:520px;font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;color:var(--faint);line-height:2;padding:6px 14px;border:1px solid var(--line)}
.row{display:flex;gap:10px;align-items:flex-start;max-width:min(760px,95%)}
/* 自分の行。顔がないぶん、文が細くならないよう幅をとる */
.row.me{align-self:flex-end;flex-direction:row-reverse;max-width:min(680px,88%)}
.row.me .stack{flex:1 1 auto;align-items:flex-end}
.row .pic{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none;border:1px solid var(--line);background:var(--raise)}
.row .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
/* アイコンが重なった、グループの印 */
.row .pic.grp{display:grid;pointer-events:none}
.row .pic.grp img{grid-area:1/1;width:74%;height:74%;border-radius:50%;border:1.5px solid var(--void);
  place-self:center;object-fit:cover}
.row .pic.grp img:nth-child(1){place-self:start start}
.row .pic.grp img:nth-child(2){place-self:end end}
.row .pic.grp img:nth-child(3){place-self:end start}
.stack{display:flex;flex-direction:column;gap:6px;min-width:0;padding-top:1px}
/* 名前は日本語で、吹き出しのすぐ上 */
.nm{font-size:12.5px;letter-spacing:.04em;color:var(--dim);margin-left:3px;line-height:1}
/* 相手の吹き出し。1対1では枠は控えめなグレー、左端だけ相手の色。
   グループでは枠線も --c-line（白寄り）に揃える。全員色を分けない、という方針のため */
.bub{position:relative;padding:10px 14px;font-size:16px;line-height:1.75;letter-spacing:.01em;
  white-space:pre-wrap;word-break:break-word;background:var(--panel2);
  border:1px solid var(--c-line, var(--line));
  border-radius:2px 14px 14px 14px;color:#E2EAF1}
/* 左のラインは、その発言をしたキャラクターの色。
   グループでは行ごとに変わるので --line-c を見る（1対1では --acc と同じ）*/
.bub::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;background:var(--line-c, var(--acc))}
/* 自分の吹き出しは --u-acc（グループでは白、1対1では相手の色のまま） */
.row.me .bub{border-radius:14px 2px 14px 14px;
  background:var(--u-acc-soft, var(--acc-soft));
  border-color:var(--u-acc, var(--acc));color:#EAF3F7}
.row.me .bub::before{display:none}
.side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.time{font-family:var(--mono);font-size:10px;color:var(--faint)}
/* チャットの行にある削除。ふだんは隠しておく。
   チャットログ一覧のごみ箱まで消えないよう、行の中だけに効かせる */
.row .del{font-family:var(--mono);font-size:10px;color:var(--faint);opacity:0;transition:.2s;letter-spacing:.1em}
.row:hover .del,.row:focus-within .del{opacity:1}
.think{display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid var(--line);background:var(--panel2);border-radius:2px 14px 14px 14px}
.think span{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--dim)}
.err{align-self:center;max-width:520px;font-size:13.5px;line-height:1.9;color:#FFB4AE;border:1px solid rgba(255,68,54,.4);
  background:rgba(255,68,54,.07);padding:11px 15px}
.err b{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--warn);font-weight:400;margin-bottom:4px}

.dock{position:relative;z-index:2;display:flex;align-items:flex-end;gap:10px;padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);
  background:rgba(6,10,14,.9);backdrop-filter:blur(14px)}
.dock textarea{flex:1;resize:none;max-height:132px;min-height:44px;padding:11px 13px;background:var(--panel2);
  border:1px solid var(--line);color:var(--txt);font-family:var(--sans);font-size:16px;line-height:1.6;border-radius:3px}
.dock textarea::placeholder{color:var(--faint)}
.dock textarea:focus{border-color:var(--u-acc, var(--acc));outline:none}
.send{width:44px;height:44px;flex:none;border:1px solid var(--u-acc, var(--acc));color:var(--u-acc, var(--acc));
  display:grid;place-items:center;border-radius:3px;transition:.25s}
.send:disabled{opacity:.3;cursor:not-allowed}
.send svg{width:17px;height:17px;fill:currentColor}
.ended{position:relative;z-index:2;text-align:center;font-size:13px;line-height:1.9;color:#FFB4AE;
  padding:14px 18px;border-top:1px solid rgba(255,68,54,.35);background:rgba(255,68,54,.06)}

@keyframes up{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.row,.log .sys,.err{animation:up .38s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}