/* 支給フォント。サーバー内に置いています */
@font-face{font-family:"Melete";src:url("assets/fonts/Melete-UltraLight.woff2") format("woff2");font-weight:200;font-display:swap}
@font-face{font-family:"Melete";src:url("assets/fonts/Melete-Light.woff2")      format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Melete";src:url("assets/fonts/Melete-Regular.woff2")    format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Melete";src:url("assets/fonts/Melete-Medium.woff2")     format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Melete";src:url("assets/fonts/Melete-Bold.woff2")       format("woff2");font-weight:700;font-display:swap}

:root{
  --overlap:46px;   /* 情報を画像へ重ねる量 */
  --void:#04070B; --panel:#0A1015; --panel2:#0E161D; --raise:#131E26;
  --line:rgba(126,168,190,.16); --line-hi:rgba(126,168,190,.34);
  --txt:#E6EDF3; --dim:#7A8B98; --faint:#4B5B67;
  --warn:#FF4436;
  --acc:#38D6E6; --acc-soft:rgba(56,214,230,.13);
  --gold:#F0C24A;   /* ★。全員共通。一覧の金の星（deck.js）の中間色に合わせています */
  --mono:"Chakra Petch",ui-monospace,monospace;
  --disp:"Michroma","Chakra Petch",sans-serif;
  --min:"Shippori Mincho",serif;
  --sans:"Noto Sans JP",system-ui,sans-serif;
  --num:"Barlow Condensed",var(--mono);
  --mel:"Melete",var(--mono);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--void);color:var(--txt);font-family:var(--sans);font-weight:300}
body{min-height:100dvh;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit}
a{color:var(--acc)}
:focus-visible{outline:1px solid var(--acc);outline-offset:3px}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:var(--line-hi)}
::-webkit-scrollbar-track{background:transparent}
.hide{display:none!important}

/* ── 星を獲得したお知らせ ──
   いちばん大きな祝いの画面。背景と立ち姿を、画面いっぱいに見せます。 */
#starView{position:fixed;inset:0;z-index:230;overflow:hidden;background:var(--void);
  opacity:0;pointer-events:none;transition:opacity .9s ease}
#starView.on{opacity:1;pointer-events:auto}

/* 背景。はじめは真っ暗で、星が出そろってから静かに浮かび上がります。
   --wait は、星の数に合わせてJSが渡します */
#starView .svBg{position:absolute;inset:-4%;
  background:url("../assets/bg.webp") center/cover no-repeat;
  opacity:0;transform:scale(1.06);
  transition:opacity 1.8s ease var(--wait,1.5s), transform 11s linear var(--wait,1.5s)}
#starView.on .svBg{opacity:.9;transform:scale(1.16)}
/* 中央を少し暗くして、文字を読みやすくします */
#starView .svBg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 42%,rgba(4,7,11,.15) 0%,rgba(4,7,11,.72) 72%)}

#starView .svWrap{position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:30px 20px;text-align:center}

/* 立ち姿と円環。紹介ページと同じ組み方です */
#starView .svFig{position:relative;width:min(60vw,min(52dvh,460px));aspect-ratio:1/1.04;
  flex:none;margin-bottom:8px;
  opacity:0;transform:scale(.92);
  transition:opacity 1.5s ease calc(var(--wait,1.5s) + .1s),
             transform 1.8s cubic-bezier(.2,.72,.2,1) calc(var(--wait,1.5s) + .1s)}
#starView.on .svFig{opacity:1;transform:none}
#starView .svFig .layer{position:absolute;left:50%;top:50%;translate:-50% -50%;line-height:0}
#starView .svFig .layer img{display:block;width:100%;height:auto}
#starView .svFig .l-en{opacity:.9}
#starView .svFig .l-obj{opacity:.95}
#starView .svFig .l-pose{z-index:2}
#starView .svFig .l-pose img{filter:drop-shadow(0 30px 60px rgba(0,0,0,.85))}

/* 獲得した星。ひとつずつ、光りながら出ます */
/* ── 星 ──
   一覧と同じ金の星（SVG）を、この画面用に大きく使います。
   輪ではなく、光条と弾ける粒で華やかさを出しています。 */
#starView .svStarWrap{position:relative;flex:none;display:flex;justify-content:center;
  margin:6px 0 24px}
#starView .svStars{position:relative;z-index:3;display:flex;gap:18px;flex:none}

#starView .svStar{display:block;opacity:0;transform:scale(.2) rotate(-40deg);
  animation:svPop 1.25s cubic-bezier(.18,.82,.22,1) forwards;
  animation-delay:var(--d,0s)}
/* 一覧の星をそのまま使い、大きさだけ広げます */
#starView .svStar .bondStars{display:flex !important;gap:0;height:auto}
#starView .svStar .bondStars svg{width:84px;height:84px;
  filter:drop-shadow(0 0 16px rgba(255,205,90,.75))}
@keyframes svPop{
  0%  {opacity:0;transform:scale(.2) rotate(-40deg)}
  32% {opacity:1;transform:scale(2.5) rotate(10deg)}
  60% {transform:scale(.9) rotate(-3deg)}
  100%{opacity:1;transform:none}
}
/* 出たあとも、静かに脈打ちます */
#starView .svStar .bondStars svg{animation:svBeat 2.8s ease-in-out infinite;
  animation-delay:calc(var(--d,0s) + 1.25s)}
@keyframes svBeat{
  0%,100%{filter:drop-shadow(0 0 14px rgba(255,205,90,.6))}
  50%    {filter:drop-shadow(0 0 30px rgba(255,238,190,1))}
}

/* ── 星から放たれる光条 ──
   長さも太さもばらつかせ、線を引いたようには見せません */
#starView .svRays{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:1;
  width:0;height:0;pointer-events:none}
#starView .svRays i{position:absolute;left:0;top:0;transform-origin:0 50%;
  width:var(--len,36vmax);opacity:0;
  background:linear-gradient(90deg,rgba(255,252,238,.95) 0%,rgba(255,232,170,.4) 18%,transparent 58%);
  animation:svRay 1.7s cubic-bezier(.12,.72,.2,1) forwards}
@keyframes svRay{
  0%  {opacity:0;transform:rotate(var(--a,0deg)) scaleX(0)}
  14% {opacity:1}
  100%{opacity:0;transform:rotate(var(--a,0deg)) scaleX(1)}
}

/* ── 星から弾け飛ぶ粒 ── */
#starView .svBurst{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  width:0;height:0;pointer-events:none}
#starView .svBurst i{position:absolute;left:0;top:0;
  width:var(--sz,3px);height:var(--sz,3px);border-radius:50%;
  background:#FFF6DC;opacity:0;
  box-shadow:0 0 10px rgba(255,246,220,1),0 0 20px rgba(255,201,60,.8);
  animation:svBurst 1.6s cubic-bezier(.12,.75,.25,1) forwards}
@keyframes svBurst{
  0%  {opacity:0;transform:rotate(var(--a,0deg)) translateX(0) scale(.4)}
  18% {opacity:1;transform:rotate(var(--a,0deg)) translateX(calc(var(--far,20vmin) * .35)) scale(1.2)}
  100%{opacity:0;transform:rotate(var(--a,0deg)) translateX(var(--far,20vmin)) scale(.3)}
}

/* ── 画面いっぱいの光の粒 ──
   下から上へ、左右に揺れながら昇ります */
#starView .svDust{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity 1.4s ease var(--wait,1.5s)}
#starView.on .svDust{opacity:1}
#starView .svDust i{position:absolute;bottom:-6%;width:var(--sz,3px);height:var(--sz,3px);
  border-radius:50%;background:#FFF6DC;
  box-shadow:0 0 9px rgba(255,246,220,.95),0 0 18px rgba(240,194,74,.55);
  animation:svRise var(--dur,9s) linear infinite}
@keyframes svRise{
  0%  {opacity:0;transform:translate(0,0) scale(.5)}
  10% {opacity:.95}
  50% {transform:translate(var(--sway,0px),-54dvh) scale(1)}
  72% {opacity:.85}
  100%{opacity:0;transform:translate(0,-112dvh) scale(1.15)}
}

#starView .svTxt{position:relative;z-index:3;margin:0 0 26px;font-size:15px;line-height:2;
  color:var(--txt);font-weight:400;text-shadow:0 2px 14px rgba(4,7,11,.9);
  opacity:0;transform:translateY(8px);
  transition:opacity .9s ease calc(var(--wait,1.5s) + .5s),
             transform .9s ease calc(var(--wait,1.5s) + .5s)}
#starView.on .svTxt{opacity:1;transform:none}

#starView .svClose{position:relative;z-index:3;font-family:var(--mel);font-weight:300;
  font-size:12px;letter-spacing:.26em;color:var(--dim);padding:12px 20px;
  opacity:0;transition:opacity .8s ease calc(var(--wait,1.5s) + 1s), color .25s}
#starView.on .svClose{opacity:1}
@media (hover:hover) and (pointer:fine){
  #starView .svClose:hover{color:var(--txt)}
}

@media(max-width:560px){
  #starView .svFig{width:min(82vw,min(44dvh,360px))}
  #starView .svStar .bondStars svg{width:58px;height:58px}
  #starView .svStars{gap:10px}
  #starView .svStarWrap{margin-bottom:18px}
  #starView .svTxt{font-size:13.5px}
}
@media (prefers-reduced-motion: reduce){
  #starView,#starView .svBg,#starView .svFig,#starView .svTxt,#starView .svClose{transition:none}
  #starView .svStar{animation:none;opacity:1;transform:none}
  #starView .svStar .bondStars svg{animation:none}
  #starView .svRays,#starView .svDust,#starView .svBurst{display:none}
}

/* ── カードを受け取ったお知らせ ──
   共鳴値が区切りに届いたとき、チャットの上に静かに出します。
   枠の色は、そのミラメタの色です。 */
#gotView{position:fixed;inset:0;z-index:210;display:grid;place-items:center;
  padding:40px 20px;background:rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transition:opacity .55s ease}
#gotView.on{opacity:1;pointer-events:auto}

#gotView .gvBox{width:min(420px,100%);max-height:100%;overflow-y:auto;
  padding:34px 30px 26px;text-align:center;
  background:rgba(4,7,11,.8);border:1px solid var(--c,var(--acc));border-radius:18px;
  box-shadow:0 0 40px rgba(0,0,0,.6), 0 0 22px -8px var(--c,var(--acc));
  transform:translateY(14px) scale(.97);
  transition:transform .62s cubic-bezier(.2,.72,.2,1)}
#gotView.on .gvBox{transform:none}

/* そのミラメタの立ち姿。縦横の比はまちまちなので、
   高さだけを決めて、はみ出さないように収めます */
#gotView .gvPic{margin:0 auto 22px;line-height:0}
#gotView .gvPic img{max-width:74%;max-height:min(44dvh,300px);width:auto;height:auto;
  margin:0 auto;display:block;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.6))}

#gotView .gvTxt{margin:0 0 24px;font-size:14px;line-height:2;color:var(--txt);
  font-weight:400}

#gotView .gvClose{font-family:var(--mel);font-weight:300;font-size:11.5px;
  letter-spacing:.26em;color:var(--dim);padding:10px 18px;transition:color .25s}
@media (hover:hover) and (pointer:fine){
  #gotView .gvClose:hover{color:var(--txt)}
}
@media(max-width:560px){
  #gotView .gvBox{padding:28px 22px 22px}
  #gotView .gvTxt{font-size:13px}
}
@media (prefers-reduced-motion: reduce){
  #gotView,#gotView .gvBox{transition:none}
}

/* ── ページを移るときの暗幕 ──
   別ページへ移る前に、この幕で暗転しきります。
   移った先も暗い状態から始まるので、継ぎ目が出ません。 */
#pageVeil{position:fixed;inset:0;background:var(--void);z-index:400;
  opacity:0;pointer-events:none;transition:opacity .38s ease}
#pageVeil.on{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion: reduce){ #pageVeil{transition:none} }

/* ── 共通パーツ ───────────────────────────── */
.meter{display:flex;gap:3px;align-items:flex-end;height:12px}
.meter i{width:3px;height:6px;background:var(--faint);display:block;transition:height .5s cubic-bezier(.2,.7,.2,1),background .5s}
.meter i.on{background:var(--acc);height:12px;box-shadow:0 0 7px var(--acc)}
.meter.sm i{width:2px}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
.meter.live i.on:nth-child(odd){animation:pulse 1.7s ease-in-out infinite}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:14px 26px;
  border:1px solid var(--acc);color:var(--acc);font-family:var(--mono);font-size:12.5px;letter-spacing:.24em;
  transition:.28s;background:transparent}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.ghost{border-color:var(--line-hi);color:var(--dim)}
.btn.danger{border-color:rgba(255,68,54,.55);color:#FF8177}
.btn.sm{padding:10px 17px;font-size:11.5px;letter-spacing:.18em}

.field{display:block;margin-bottom:16px}
.field span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--dim);margin-bottom:8px}
.field input,.field select{width:100%;padding:13px 14px;background:var(--panel2);
  border:1px solid var(--line);color:var(--txt);font-size:16px;border-radius:2px}
.field input:focus,.field select:focus{border-color:var(--acc);outline:none}
/* 日付の欄。暗い背景でもカレンダーの印が見えるようにします */
.field input[type="date"]{min-height:49px}
.field input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1) opacity(.55);cursor:pointer}
/* 変更できない項目（IDなど）は、見た目でもそれとわかるようにする */
.field input[readonly]{color:var(--dim);background:var(--panel);cursor:default}
.field input[readonly]:focus{border-color:var(--line)}
.note{font-size:13px;line-height:1.9;color:var(--dim)}
.alert{font-size:13.5px;line-height:1.85;padding:12px 15px;border:1px solid rgba(255,68,54,.4);
  background:rgba(255,68,54,.07);color:#FFB4AE;margin-bottom:16px}
.done{border-color:rgba(56,214,230,.4);background:rgba(56,214,230,.07);color:#A9E9F1}

/* ── ログイン ─────────────────────────────── */
@keyframes loginIn{from{opacity:0}to{opacity:1}}
@keyframes fieldIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#login{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;
  background:radial-gradient(90% 60% at 50% 0%,rgba(56,214,230,.10),transparent 62%),var(--void);
  animation:loginIn .42s ease both}
#login .mark   {animation:fieldIn .55s cubic-bezier(.2,.7,.2,1) .08s both}
#login form    {animation:fieldIn .55s cubic-bezier(.2,.7,.2,1) .2s both}
#login .closeText{animation:fieldIn .5s cubic-bezier(.2,.7,.2,1) .34s both}
#login .box{width:100%;max-width:372px}
#login .mark{display:block;margin:0 auto 38px;width:min(348px,84vw);color:var(--txt)}
#login .mark img{width:100%;display:block}
#login form{border:1px solid var(--line);background:rgba(10,16,21,.6);padding:26px 22px 22px}
#login .btn{width:100%;margin-top:6px}
#login .closeText{display:block;margin:20px auto 0;padding:8px 14px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.24em;color:var(--faint);background:none;border:0;transition:color .25s}

/* ── ヘッダー ─────────────────────────────── */
.topbar{position:sticky;top:0;z-index:100;display:grid;grid-template-columns:36px 1fr 36px;
  align-items:center;padding:13px 13px;background:rgba(4,7,11,.82);backdrop-filter:blur(14px)}
.brand{grid-column:2;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:9px;
  background:none;border:0;padding:0;cursor:pointer}
.tbBack{grid-column:1;justify-self:start;width:36px;height:36px;display:grid;place-items:center;
  font-family:var(--mono);font-size:19px;line-height:1;color:#F2F6F9;border-radius:50%;transition:color .25s}
/* 一覧のときだけ、左上にグループの入口を出す */
/* 左上のボタン。ふだんは重なった丸、押すと回って × になる */
.tbGroup{grid-column:1;justify-self:start;width:36px;height:36px;display:grid;place-items:center;
  color:#F2F6F9;border-radius:50%;
  transition:color .25s, transform .5s cubic-bezier(.2,.72,.2,1), opacity .5s ease}
/* 管理メニューを開いている間は、そっと消す（急に消さない）。
   deck.css の .fade（紹介の出現）と名前がぶつかるので、別の名前にしている */
.tbGroup.dim-out{opacity:0;pointer-events:none}
.tbGroup i{position:relative;display:block;width:17px;height:15px}
.tbGroup i::before,.tbGroup i::after{content:"";position:absolute;
  width:9px;height:9px;border-radius:50%;
  border:1.3px solid currentColor;background:#04070B;
  transition:width .5s cubic-bezier(.2,.72,.2,1), height .5s cubic-bezier(.2,.72,.2,1),
             border-radius .5s cubic-bezier(.2,.72,.2,1), border-width .5s ease,
             background .5s ease, left .5s cubic-bezier(.2,.72,.2,1),
             top .5s cubic-bezier(.2,.72,.2,1), transform .5s cubic-bezier(.2,.72,.2,1)}
.tbGroup i::before{left:0;top:4px}
.tbGroup i::after{left:7px;top:0}

/* 開いているとき。丸が細い棒に伸びて、交差して × になる */
.tbGroup.open{transform:rotate(180deg)}
.tbGroup.open i::before,.tbGroup.open i::after{
  width:17px;height:1.6px;border-radius:2px;border-width:0;
  background:currentColor;left:0;top:6.7px}
.tbGroup.open i::before{transform:rotate(45deg)}
.tbGroup.open i::after {transform:rotate(-45deg)}
.wordmark{display:block;height:13px;max-width:64vw}
.wordmark img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:center;display:block}
.brand .sub{font-family:var(--mel);font-weight:300;font-size:8.2px;letter-spacing:.34em;
  text-indent:.34em;color:var(--dim);line-height:1;display:inline-flex;align-items:baseline}
.brand .sub em{font-style:normal;font-size:12.5px;line-height:0;letter-spacing:0;margin-left:-.1em}
.tick{width:24px;height:1px;background:var(--line-hi)}
/* 右上のボタン。ふだんは縦に3つの点、押すと回って × になる。
   真ん中の点は消え、上下の点が棒に伸びて交差する              */
.acct{width:38px;height:38px;color:#F2F6F9;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  transform-origin:50% 50%;
  transition:color .25s, transform .52s cubic-bezier(.2,.72,.2,1),
             gap .52s cubic-bezier(.2,.72,.2,1)}
.acct i{position:relative;display:block;width:3px;height:3px;flex:none;
  border-radius:50%;background:currentColor;
  transition:width .52s cubic-bezier(.2,.72,.2,1), height .52s cubic-bezier(.2,.72,.2,1),
             border-radius .52s cubic-bezier(.2,.72,.2,1),
             opacity .3s ease, transform .52s cubic-bezier(.2,.72,.2,1),
             margin .52s cubic-bezier(.2,.72,.2,1)}

/* 開いているとき */
.acct.open{transform:rotate(180deg);gap:0}
.acct.open i:nth-child(1){width:17px;height:1.6px;border-radius:2px;
  transform:rotate(45deg);margin-bottom:-1.6px}
.acct.open i:nth-child(2){opacity:0;transform:scale(.2)}
.acct.open i:nth-child(3){width:17px;height:1.6px;border-radius:2px;
  transform:rotate(-45deg);margin-top:-1.6px}

.pfp{width:38px;height:38px;border-radius:50%;background:var(--raise);border:1px solid var(--line-hi);
  overflow:hidden;display:grid;place-items:center;font-family:var(--mono);font-size:14px;color:var(--dim)}
.pfp img{width:100%;height:100%;object-fit:cover}
/* 右上のボタンを置く枠 */
.mwrap{grid-column:3;justify-self:end;position:relative}

/* 左メニューの × 。一覧の左上ボタンと同じ場所に重ねる */
.smClose{position:fixed;left:13px;top:13px;z-index:30;background:none;border:0;padding:0;cursor:pointer}
/* 管理メニューの × 。中身の右上に置く（隙間の上には出さない）*/
/* 管理メニューの × 。スクロールしても動かない */
.mgClose{position:fixed;right:13px;top:13px;z-index:30;background:none;border:0;padding:0;cursor:pointer}

/* ── 管理ページの共通タブ ─────────────────────
   アカウント管理・クレジット管理・開発管理を行き来する   */
/* ヘッダーが sticky なので、タブは重ならないよう
   いちど枠のいちばん上に置いてから、中身をずらす        */
/* チャットメニューのタブ（.smTabs）と同じ形にそろえています */
/* 右上の × と重ならないよう、チャットメニューより少し下げる */
.mgTabs{position:sticky;top:0;z-index:20;display:flex;gap:2px;align-items:center;
  max-width:1080px;margin:0 auto;padding:72px 20px 0;
  background:linear-gradient(180deg,var(--void) 74%,transparent)}
.mgTabs::after{content:"";position:absolute;left:20px;right:20px;bottom:0;
  height:1px;background:var(--line)}
.mgTabs a, .mgTabs button{padding:14px 22px;font-size:15.5px;color:var(--dim);
  border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none;
  background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;
  transition:color .25s;white-space:nowrap}
.mgTabs a.on, .mgTabs button.on{color:var(--txt);border-bottom-color:var(--acc)}
/* ログアウトは右端に寄せる。大きさは変えず、色で区別する */
.mgTabs #mLogout{margin-left:auto;color:#E8873A;font-size:14px;padding:14px 20px}
/* 開発管理への入口。ふつうの操作と分けたいのでオレンジにする */
#toDev{border-color:#E8873A;color:#E8873A}

/* 画面が狭いときは、字を詰めて4つとも収める */
@media(max-width:720px){
  /* 上の余白（72px）は消さない。左右だけ詰める */
  .mgTabs{padding-left:12px;padding-right:12px}
  .mgTabs a, .mgTabs button{padding:13px 12px;font-size:14.5px}
  .mgTabs #mLogout{font-size:12.5px;padding:13px 10px}
}
@media(max-width:390px){
  .mgTabs a, .mgTabs button{padding:13px 8px;font-size:13px}
  .mgTabs #mLogout{font-size:11.5px;padding:13px 6px}
}

/* ヘッダーのメニュー。右から滑り出す */

/* ── オーバーレイ共通 ─────────────────────── */
@keyframes ovIn{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}
@keyframes ovOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(1.015)}}
/* モーダルは、ヘッダー（z-index:100）より前に出す。
   そうしないと、中の × をヘッダーのボタンが横取りしてしまう */
.ov{position:fixed;inset:0;z-index:120;display:none}
.ov.on{display:block;animation:ovIn .38s cubic-bezier(.2,.7,.2,1) both}
.ov.out{animation:ovOut .46s cubic-bezier(.4,0,.2,1) both}
.ov .veil{position:absolute;inset:0;background:var(--void);overflow:hidden}
/* 紹介ページは、一覧と同じ背景（波紋・星）をそのまま透かして見せる */
#sheet .veil{background:transparent}
#sheet .veil::after{content:"";position:absolute;inset:0;background:rgba(4,7,11,.3)}
/* 紹介を開いているあいだ、一覧の中身だけを隠す（背景は残す）*/
#app.behind > *:not(.bg){visibility:hidden}
.ov .box{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:0 0 48px}

/* 紹介ページを閉じる × ボタン。右上に置きます。
   position は fixed ではなく absolute にします。
   .ov.on には出入りのアニメーションが掛かっており、
   動きのある要素の中では fixed が画面ではなくその要素を基準にしてしまい、
   思った位置に出ないためです。 */
.sheetX{position:absolute;top:14px;right:16px;z-index:6;
  width:46px;height:46px;display:grid;place-items:center;
  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}
.sheetX svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round}
@media (hover:hover) and (pointer:fine){
  .sheetX:hover{color:var(--txt);border-color:var(--line-hi)}
}
@media(max-width:560px){
  .sheetX{top:10px;right:11px;width:42px;height:42px}
}
.closeX{position:fixed;top:13px;right:13px;z-index:3;font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;color:var(--dim)}
/* 紹介ページの下部に固定する2つのボタン */
/* 紹介ページの下は、閉じるボタンだけ */
/* 紹介ページの下部バーは廃止しました（右上の × に変更）。
   ほかの画面では使っていないため、指定も残していません */
.sheetBar--removed{position:fixed;left:0;right:0;bottom:0;z-index:4;display:grid;grid-template-columns:1fr;gap:0;
  background:var(--void);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.sheetBar .btn{border:0;height:60px;border-radius:0;background:var(--void)}
/* 2つのボタンの境界。隙間ではなく線で分ける */
.sheetBar .btn + .btn{box-shadow:inset 1px 0 0 var(--line)}
.sheetBar .btn.solid{background:var(--c);color:#04070B;font-weight:400}
.sheetBar .btn.ghost{color:var(--dim);font-family:var(--mono);letter-spacing:.26em}


/* ── アカウント設定 ───────────────────────── */
/* チャットログ管理と同じ幅に揃える */
#acct .inner{max-width:1080px;margin:0 auto;padding:104px 20px 96px}
/* グループ情報・左メニューは、チャット画面の上からでも開けるようにする */
#groupInfo, #sideMenu, #mgMenu{z-index:160}

/* ── 左右から滑り出すメニュー ─────────────────
   左メニューは左から、管理メニューは右から。
   反対側に少し隙間を空けて、うしろが見えるようにしています。
   開くときと閉じるときは、同じ長さ（1.15秒）              */
/* この2つは、消すのではなく画面の外に置いておく。
   そうしないと、出したその瞬間から動かすことができない */
#sideMenu, #mgMenu{display:block;visibility:hidden;
  transition:visibility 0s 1.15s}
#sideMenu.on, #mgMenu.on{visibility:visible;transition:visibility 0s 0s}
#sideMenu.on, #mgMenu.on,
#sideMenu.out, #mgMenu.out{animation:none}
#sideMenu.out, #mgMenu.out{visibility:visible;transition:visibility 0s 1.15s}

/* うしろを覆う幕 */
#sideMenu .veil, #mgMenu .veil{background:rgba(4,7,11,.55);backdrop-filter:blur(3px);
  opacity:0;transition:opacity 1.15s ease}
#sideMenu.on .veil, #mgMenu.on .veil{opacity:1}
#sideMenu.out .veil, #mgMenu.out .veil{opacity:0}

/* 中身。反対側に隙間を残す */
#sideMenu .box, #mgMenu .box{
  background:var(--void);
  transition:transform 1.15s cubic-bezier(.2,.72,.2,1)}
/* パソコンでは、中身が入る幅だけ出す（1080px + 左右の余白）*/
#sideMenu .box{right:auto;width:min(620px,calc(100% - 64px));
  transform:translateX(-101%)}
#mgMenu   .box{left:auto; right:0; width:min(1120px,calc(100% - 64px));
  transform:translateX(101%)}
#sideMenu.on .box, #mgMenu.on .box{transform:none}
#sideMenu.out .box{transform:translateX(-101%)}
#mgMenu.out   .box{transform:translateX(101%)}

/* 画面が狭いときは、隙間を小さくする */
@media(max-width:720px){
  #sideMenu .box{right:38px;left:0;width:auto}
  #mgMenu   .box{left:38px;right:0;width:auto}
}

/* ── 左メニューのタブ ─────────────────────────
   開発管理のタブと同じ見た目にそろえています */
.smTabs{position:sticky;top:0;z-index:2;display:flex;gap:2px;
  max-width:1080px;margin:0 auto;padding:52px 20px 0;
  background:linear-gradient(180deg,var(--void) 74%,transparent)}
/* 下線は、中身の幅に合わせて引く（端まで伸ばさない）*/
.smTabs::after{content:"";position:absolute;left:20px;right:20px;bottom:0;
  height:1px;background:var(--line)}
.smTabs button{padding:14px 20px;font-size:14px;color:var(--dim);
  border-bottom:2px solid transparent;margin-bottom:-1px;background:none;border-top:0;border-left:0;border-right:0;
  cursor:pointer;transition:color .25s}
.smTabs button.on{color:var(--txt);border-bottom-color:var(--acc)}
/* タブが3つになったので、狭い画面では字と余白を詰めます */
@media(max-width:720px){
  .smTabs{padding-left:14px;padding-right:14px}
  .smTabs::after{left:14px;right:14px}
  .smTabs button{padding:13px 11px;font-size:13px}
}
@media(max-width:390px){
  .smTabs button{padding:12px 7px;font-size:11.5px}
}
/* ── CONNECT（親密度の一覧）──
   左メニューの中に開きます。ページは移りません。 */
#smConn .cnLoad{font-family:var(--mono);font-size:11.5px;color:var(--faint);
  letter-spacing:.1em;padding:26px 0}

/* 境界線は引きません。顔・名前・ゲージだけの、静かな並びにしています */
#smConn .cnRow{display:flex;align-items:center;gap:14px;padding:15px 0}
#smConn .cnFace{width:44px;height:44px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--panel2);border:1px solid var(--line)}
#smConn .cnFace img{width:100%;height:100%;object-fit:cover;display:block}
#smConn .cnMain{flex:1;min-width:0}

/* 名前の長さがまちまちでも、共鳴値と★の位置がそろうよう、
   列の幅を決めて並べます */
#smConn .cnTop{display:grid;align-items:center;gap:0 10px;margin-bottom:9px;
  grid-template-columns:minmax(0,7.6em) minmax(0,7.4em) 1fr}
#smConn .cnTop b{font-family:var(--min);font-size:15px;font-weight:400;letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* 次の★まで、どこまで来たか */
#smConn .cnStep{font-family:var(--num);font-size:12.5px;color:var(--dim);
  letter-spacing:.06em;white-space:nowrap}
/* 「共鳴値」の見出し。数値より小さく、控えめに添えます */
#smConn .cnStep em{font-style:normal;font-family:var(--sans);font-size:10px;
  color:var(--faint);letter-spacing:.1em;margin-right:5px}

/* ★は全員共通の金。まだ途中の人は右端に置きます */
#smConn .cnStars{font-size:12.5px;letter-spacing:.12em;color:var(--faint);
  justify-self:end;white-space:nowrap}
#smConn .cnStars i{font-style:normal;display:inline-block}
#smConn .cnStars i.on{color:var(--gold)}

/* ── 開くたびの動き ──
   ゲージが伸び、そのあとで★が光って出てきます */
#smConn .cnStars.pop i.on{opacity:0;transform:scale(.4);
  animation:cnStar .62s cubic-bezier(.2,.7,.2,1) forwards}
#smConn .cnStars.pop i.on:nth-child(1){animation-delay:var(--d,.45s)}
#smConn .cnStars.pop i.on:nth-child(2){animation-delay:calc(var(--d,.45s) + .13s)}
#smConn .cnStars.pop i.on:nth-child(3){animation-delay:calc(var(--d,.45s) + .26s)}
@keyframes cnStar{
  0%  {opacity:0;transform:scale(.4) rotate(-22deg);
       filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
  55% {opacity:1;transform:scale(1.32) rotate(4deg);
       filter:drop-shadow(0 0 9px rgba(255,247,214,.95))}
  100%{opacity:1;transform:none;
       filter:drop-shadow(0 0 3px rgba(240,194,74,.45))}
}

/* ── ゲージ ──
   次の★までの道のりを表します。区間はそのつど変わります。

     ★なし … 0〜30（区切りは 10・20）
     ★     … 30〜60（40・50）
     ★★   … 60〜100（70・80・90）

   目盛りは1ポイントごとに細い線、10ポイントごとに太い線。
   線の間隔（--t1／--t10）は、区間の幅に合わせてJSが渡します。
   色は全員共通の白です。幅は0から始め、開いたあとで伸ばします。 */
#smConn .cnBar{position:relative;height:5px;background:var(--raise);overflow:hidden}
#smConn .cnBar i{display:block;height:100%;width:0;background:#fff;
  box-shadow:0 0 9px rgba(255,255,255,.5);
  transition:width 1.05s cubic-bezier(.2,.7,.2,1)}

/* 目盛り。塗りの上に重ねます。
   1つめの層が10ポイントごとの太い線（バーの高さいっぱい）、
   2つめが1ポイントごとの細い線（上半分だけ）です。 */
#smConn .cnBar::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,
      transparent 0, transparent calc(var(--t10,25%) - 1.6px),
      rgba(4,7,11,.82) calc(var(--t10,25%) - 2.2px), rgba(4,7,11,.82) var(--t10,25%)),
    repeating-linear-gradient(90deg,
      transparent 0, transparent calc(var(--t1,2.5%) - 1px),
      rgba(4,7,11,.45) calc(var(--t1,2.5%) - 1px), rgba(4,7,11,.45) var(--t1,2.5%));
  background-size:100% 100%, 100% 46%;
  background-position:0 0, 0 0;
  background-repeat:no-repeat}
/* ★★★に到達したら、目盛りは引きません */
#smConn .cnBar.done::after{display:none}

/* ── ★★★に届いた行 ──
   ゲージをなくし、顔・名前・達成・★を同じ高さで一列に並べます。
   星は少し大きくして左に詰め、顔のまわりを星と同じ金で光らせます。 */
#smConn .cnRow.done .cnTop{margin-bottom:0}
#smConn .cnRow.done .cnMain{display:flex;align-items:center}
/* 星は右端に寄せず、共鳴値のすぐ隣（3列目の先頭）に置きます */
#smConn .cnRow.done .cnStars{justify-self:start;font-size:15px;letter-spacing:.14em}
/* 顔のまわりが、星と同じ金に光ります */
#smConn .cnRow.done .cnFace{border-color:rgba(240,194,74,.75);
  box-shadow:0 0 14px rgba(240,194,74,.5), 0 0 3px rgba(240,194,74,.9) inset;
  animation:cnGlow 3s ease-in-out infinite}
@keyframes cnGlow{
  0%,100%{box-shadow:0 0 12px rgba(240,194,74,.42), 0 0 3px rgba(240,194,74,.8) inset}
  50%    {box-shadow:0 0 22px rgba(255,224,150,.8), 0 0 4px rgba(255,224,150,1) inset}
}
@media(max-width:560px){
  #smConn .cnRow.done .cnStars{font-size:13.5px}
}
@media (prefers-reduced-motion: reduce){
  #smConn .cnRow.done .cnFace{animation:none}
}

/* 目盛りの数値。バーのすぐ下に、小さく置きます */
#smConn .cnScale{position:relative;height:13px;margin-top:3px}
#smConn .cnScale span{position:absolute;top:0;transform:translateX(-50%);
  font-family:var(--num);font-size:10.5px;color:var(--txt);letter-spacing:.04em;
  line-height:1;white-space:nowrap;opacity:.8}
/* いちばん右の数値は、はみ出さないよう内側に寄せます */
#smConn .cnScale span.end{transform:translateX(-100%)}

@media(max-width:560px){
  #smConn .cnRow{gap:11px;padding:13px 0}
  #smConn .cnFace{width:38px;height:38px}
  #smConn .cnTop{gap:0 8px;grid-template-columns:minmax(0,6.4em) minmax(0,6.8em) 1fr}
  #smConn .cnTop b{font-size:14px}
  #smConn .cnStep em{font-size:9.5px;margin-right:4px}
  #smConn .cnStep{font-size:11.5px}
  #smConn .cnScale{height:12px}
  #smConn .cnScale span{font-size:9.5px}
}
@media (prefers-reduced-motion: reduce){
  #smConn .cnBar i{transition:none}
  #smConn .cnStars.pop i.on{animation:none;opacity:1;transform:none}
}


/* タブがある分、中身の上余白は詰める */
#sideMenu .smPane{max-width:1080px;margin:0 auto;padding:34px 20px 96px}
#mgMenu .mgPane{max-width:1080px;margin:0 auto;padding:34px 20px 96px}
#acct h2{font-family:var(--min);font-size:27px;font-weight:600;letter-spacing:.14em;margin:0 0 4px}
#acct .who{font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;color:var(--dim)}
.panel{border:1px solid var(--line);background:var(--panel);padding:22px;margin-top:22px}
.panel h3{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.26em;margin:0 0 18px;color:var(--dim)}
.avarow{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.avabig{width:78px;height:78px;border-radius:50%;overflow:hidden;background:var(--raise);border:1px solid var(--line-hi);
  display:grid;place-items:center;font-family:var(--mono);font-size:22px;color:var(--faint);flex:none}
.avabig img{width:100%;height:100%;object-fit:cover}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:16px}
.toggle .t{font-size:15px;line-height:1.8}
.toggle .t small{display:block;font-size:13px;color:var(--dim);margin-top:4px;line-height:1.8}
.sw{width:50px;height:27px;border:1px solid var(--line-hi);border-radius:999px;position:relative;flex:none;transition:.3s;background:var(--panel2)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--faint);transition:.3s}
.sw.on{border-color:var(--acc);background:var(--acc-soft)}
.sw.on::after{left:26px;background:var(--acc);box-shadow:0 0 10px var(--acc)}
/* 行のどこを押しても、そのチャットが開く */
.logrow{display:flex;align-items:center;gap:13px;padding:13px 0;
  border-bottom:1px solid var(--line);cursor:pointer;transition:background .2s}
.logrow:last-of-type{border-bottom:0}
/* グループの行は、水色を敷いて見分けやすくする */
.logrow.grp{background:rgba(56,214,230,.25)}
.logrow .pic{width:36px;height:36px;border-radius:50%;overflow:hidden;border:1px solid var(--line);flex:none;background:var(--raise)}
.logrow .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
/* 印だけのボタン。枠は付けず、印だけ置く */
.icoBtn{width:30px;height:30px;flex:none;display:grid;place-items:center;
  border:0;background:none;color:#8FA0AD;
  cursor:pointer;transition:color .2s}
/* グループのときは、顔を横にずらして重ねる（チャット画面のヘッダーと同じ形）*/
.logrow .pic.grp{width:auto;height:36px;border:0;background:none;border-radius:0;overflow:visible;
  display:flex;align-items:center}
.logrow .pic.grp .gface{width:31px;height:31px;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)}
.logrow .pic.grp .gface + .gface{margin-left:-12px}
.logrow .pic.grp .gface img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.logrow .m{flex:1;min-width:0}
.logrow .m b{display:block;font-size:15px;font-weight:400;letter-spacing:.08em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logrow .m span{display:block;font-size:13px;color:var(--dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 使った分。上に最後に話した日、下に「合計 送信/受信」 */
.logrow .n{flex:none;white-space:nowrap;text-align:right;line-height:1.5;min-width:158px}
.logrow .n small{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--dim);opacity:1}
.logrow .n .day{margin-bottom:2px}
/* 合計は明細の左にそろえる。大きさは同じで、白く少し太く */
.logrow .n .sum{display:flex;gap:9px;justify-content:flex-end;align-items:baseline}
.logrow .n .sum b{font-weight:600;color:var(--txt);font-size:11.5px;letter-spacing:.06em}
/* ボタンは縮ませず、必ず1行で */
.logrow .btn{flex:none;white-space:nowrap}

/* スマホでは2段にする。
   上段：顔・名前・最新のひとこと
   下段：使った分と、ごみ箱            */
@media(max-width:720px){
  .logrow{flex-wrap:wrap;gap:1px 10px;padding:6px 0}
  .logrow .pic{width:38px;height:38px;order:1}
  .logrow .m{flex:1 1 0;min-width:0;order:2}
  /* ここで改行させて、下段に送る */
  .logrow::after{content:"";order:3;flex-basis:100%;height:0}
  /* 下段は、日付・使った分・ごみ箱を横一列に並べる */
  .logrow .n{order:4;flex:1 1 auto;min-width:0;text-align:left;
    display:flex;align-items:baseline;gap:12px;line-height:1.25;margin-top:-2px}
  .logrow .n small{display:inline;font-size:11.5px}
  .logrow .n .day{margin-bottom:0}
  .logrow .n .sum{justify-content:flex-start}
  .logrow .icoBtn{order:5;align-self:center}
  .logrow .m b{font-size:14.5px}
  .logrow .m span{font-size:12px}
}


/* ── 確認ダイアログ ───────────────────────── */
/* ── 起動画面 ───────────────────────────────
   真っ黒な画面に、縦書きで一文字ずつ立ち上がる */
/* 0と1（重なり120）より下に置き、降ってくる数字の向こうで文字が落ちる */
/* 読み込み中の目隠し。中身が整うまで、下の画面を見せない */
#boot{position:fixed;inset:0;z-index:170;background:#04070B;
  transition:opacity .3s ease}
#boot.out{opacity:0;pointer-events:none}
#boot.gone{display:none}

#splash{position:fixed;inset:0;z-index:150;display:grid;place-items:center;
  background:#04070B;transition:opacity .5s ease}
#splash.out{opacity:0;pointer-events:none}
#splash.gone{display:none}
#splash .ttl{writing-mode:vertical-rl;white-space:nowrap;font-family:var(--min);
  /* A と I も縦に積む */
  text-orientation:upright;-webkit-text-orientation:upright;
  font-size:clamp(15px,2.1vw,21px);letter-spacing:.28em;line-height:1;color:#F2F6F9;
  text-shadow:0 0 22px rgba(120,190,255,.28)}
@keyframes splashChar{
  from{opacity:0;transform:translateY(-16px)}
  to  {opacity:1;transform:none}
}
/* 数字と一緒に、まとまって下へ沈みながら消える */
@keyframes splashFall{
  from{opacity:1;transform:translateY(0)}
  to  {opacity:0;transform:translateY(150px)}
}
#splashSkip{position:absolute;left:50%;bottom:38px;translate:-50% 0;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.26em;color:var(--faint);
  padding:10px 18px;background:none;border:0;transition:color .25s;
  opacity:0;animation:splashChar .5s ease .15s both}
#splashSkip:hover{color:var(--txt)}
#splash.fall #splashSkip{opacity:0;transition:opacity .3s;pointer-events:none}

#splash .ttl span{display:inline-block;opacity:0;
  animation:splashChar .72s cubic-bezier(.18,.72,.2,1) forwards;
  animation-delay:calc(.35s + var(--i) * .075s)}
#splash.fall .ttl{
  animation:splashFall 1.5s cubic-bezier(.42,0,.62,1) forwards}
/* 落ちきったら、そのまま消えた状態を保つ */
#splash.fell .ttl{opacity:0;transform:translateY(150px)}



/* ── サブスクリプション ─────────────────────── */
.planWrap, .page{max-width:1080px;margin:0 auto;padding:104px 20px 96px;display:block}
.planWrap h2, .page h2{font-family:var(--min);font-size:26px;font-weight:600;letter-spacing:.14em;margin:0 0 6px}
.planWrap .lead, .page .lead{font-size:13px;color:var(--dim);line-height:1.9;margin-bottom:34px}
.planWrap section, .page section{margin-bottom:46px}
.planWrap h3, .page h3{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--dim);
  margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
/* キャンペーンのお知らせ */
.camp{border:1px solid var(--acc);background:rgba(56,214,230,.07);
  padding:18px 20px;margin-bottom:34px}
.camp b{display:block;font-size:13.5px;color:var(--acc);letter-spacing:.06em;margin-bottom:8px}
.camp p{margin:0;font-size:13px;color:#C6D2DB;line-height:1.9}
.camp .tag{display:inline-block;background:var(--acc);color:#04070B;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;padding:3px 9px;margin-right:10px;vertical-align:2px}

.bal{display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.bal .ring{position:relative;width:172px;height:172px;flex:none}
.bal .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.bal .ring .mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.3}
.bal .ring .mid b{display:block;font-family:var(--num);font-size:40px;font-weight:500;font-style:italic;color:var(--txt)}
.bal .ring .mid span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--dim)}
.bal .facts{display:grid;gap:10px;font-size:13.5px;color:#C6D2DB}
.bal .facts b{font-family:var(--num);font-size:19px;font-weight:500;color:var(--txt);margin-right:6px}
.cycle{display:inline-flex;border:1px solid var(--line-hi);border-radius:999px;overflow:hidden;margin-bottom:22px}
.cycle button{padding:11px 22px;font-size:13px;color:var(--dim)}
.cycle button.on{background:var(--txt);color:#04070B}
.cycle button small{margin-left:8px;font-size:11px;opacity:.75}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan-c{position:relative;border:1px solid var(--line-hi);padding:24px 22px 26px;background:rgba(6,10,14,.5)}
.plan-c.now{border-color:var(--acc)}
.plan-c .tagNow{position:absolute;top:-1px;right:-1px;background:var(--acc);color:#04070B;
  font-size:11px;letter-spacing:.12em;padding:5px 12px}
.plan-c h4{font-family:var(--mono);font-size:15px;letter-spacing:.18em;margin:0 0 14px}
.plan-c .price{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.plan-c .price b{font-family:var(--num);font-size:44px;font-weight:500;line-height:1}
.plan-c .price span{font-size:12.5px;color:var(--dim)}
.plan-c .sub{font-size:11.5px;color:var(--faint);min-height:18px;margin-bottom:18px}
.plan-c ul{list-style:none;display:grid;gap:9px;margin:0 0 22px;font-size:13px;color:#C6D2DB}
.plan-c li::before{content:"—";color:var(--faint);margin-right:8px}
.plan-c .btn{width:100%}
.ptable{width:100%;border-collapse:collapse;font-size:13px}
.ptable th,.ptable td{border:1px solid var(--line);padding:12px 14px;text-align:left}
.ptable th{background:var(--panel2);color:var(--dim);font-weight:400;font-size:12px}
.ptable td:first-child{color:var(--dim)}
.credits{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.credit-c{border:1px solid var(--line-hi);padding:20px 16px;text-align:center;background:rgba(6,10,14,.5)}
.credit-c b{display:block;font-family:var(--num);font-size:32px;font-weight:500;line-height:1;margin-bottom:4px}
.credit-c em{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--faint);margin-bottom:12px}
.credit-c .yen{display:block;font-size:14px;margin-bottom:14px}
.credit-c .yen small{font-size:11px;color:var(--dim)}
.legal{font-size:12px;color:var(--dim);line-height:2}
.legal dl{display:grid;grid-template-columns:11em 1fr;gap:0;border-top:1px solid var(--line)}
.legal dt,.legal dd{border-bottom:1px solid var(--line);padding:11px 4px;margin:0}
.legal dt{color:var(--faint)}
.legal .todo{color:#FFB86B}
@media(max-width:860px){
  .planWrap{padding:56px 16px 90px}
  .plans{grid-template-columns:1fr}
  .credits{grid-template-columns:repeat(2,1fr)}
  .bal{gap:22px}
  .legal dl{grid-template-columns:1fr}
  .legal dt{border-bottom:0;padding-bottom:0}
}


/* ── 画面の切り替え ─────────────────────────── */
/* 幕：これが濃くなっていく間に、後ろで画面が入れ替わる */
#wipeVeil{position:fixed;inset:0;z-index:190;display:none;pointer-events:none;
  background:var(--void);opacity:0}
#wipeVeil.on{display:block}
/* 降り注ぐ数字。幕より手前に置き、最後まで見えている */
#wipe{position:fixed;inset:0;z-index:200;display:none;pointer-events:none}
#wipe.on{display:block}

#ask{position:fixed;inset:0;z-index:220;display:none;place-items:center;padding:24px;background:rgba(2,4,7,.88)}
#ask.on{display:grid}
#ask .b{width:100%;max-width:380px;border:1px solid var(--line-hi);background:var(--panel);padding:24px}
#ask h4{margin:0 0 10px;font-size:17px;font-weight:500;letter-spacing:.08em}
#ask p{margin:0 0 22px;font-size:14px;line-height:1.9;color:var(--dim)}
#ask .r{display:flex;gap:10px;justify-content:flex-end}

/* ── ホバーの扱い ──
   タッチ端末では、1回目のタップがホバー扱いになり
   ボタンが二度押しを求める状態になる。
   マウスなど、実際に重ねられる機器のときだけ効かせる */
@media (hover: hover) and (pointer: fine){
  .btn:hover:not(:disabled){background:var(--acc);color:#04070B}
  /* 開発管理はオレンジのままで */
  #toDev:hover:not(:disabled){background:#E8873A;color:#04070B}
  .btn.ghost:hover{background:transparent;border-color:var(--txt);color:var(--txt)}
  .btn.danger:hover{background:var(--warn);border-color:var(--warn);color:#fff}
  #login .closeText:hover{color:var(--txt)}
  .acct:hover{color:#FFFFFF}
  .tbGroup:hover{color:#FFFFFF}
  .mgTabs a:hover, .mgTabs button:hover{color:var(--txt)}
  /* グループを選ぶとき、重ねると枠の中で絵が大きくなる */
  .logrow:hover{background:rgba(126,168,190,.06)}
  .icoBtn.del:hover{color:#FF8177}
  .gnCard:hover{border-color:var(--c,var(--acc))}
  .gnCard:hover .pic img{transform:scale(1.12)}
  .info-c .go:hover{background:#FFFFFF;color:#04070B}
  .nav button:hover{border-color:var(--acc);color:var(--acc)}
  .closeX:hover{color:var(--txt)}
  .sheetBar .btn.solid:hover{filter:brightness(1.12)}
  .sheetBar .btn.ghost:hover{background:var(--raise);color:var(--txt)}
  .back:hover{color:var(--txt)}
  button.ava:hover{border-color:var(--txt)}
  .kebab:hover{color:var(--txt)}
  .menu button:hover{background:var(--raise)}
  .del:hover{color:#FF8177}
  .send:hover:not(:disabled){background:var(--acc);color:#04070B}
}

.acct:focus-visible{color:var(--txt)}

/* タッチ端末では、重ねる操作がないので出しっぱなしにする */
@media (hover: none){
  .row .del{opacity:1}
}

/* タップの遅延をなくす */
button, .card, .slot, .row .pic, .dots i{touch-action:manipulation}






/* ── アプリの土台と背景 ── */
#app{position:relative;min-height:100dvh;display:flex;flex-direction:column}
/* 背景。太陽のフレアのように、内側から燃えて揺らぐ

   画面が横長になるほど、画像の見えている範囲が広がって
   周辺の暗い部分が増える。スマホと同じ明るさに見えるよう、
   横長の画面では拡大して中心だけを見せる。            */
@keyframes flareBase{
  0%  {transform:translate(-50%,-50%) scale(1) rotate(0deg);            filter:brightness(1) contrast(1) saturate(1)}
  30% {transform:translate(-50%,-50%) scale(1.03) rotate(.35deg); filter:brightness(1.1) contrast(1.05) saturate(1.12)}
  60% {transform:translate(-50%,-50%) scale(1.01) rotate(-.3deg); filter:brightness(.96) contrast(1.02) saturate(1.05)}
  100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);            filter:brightness(1) contrast(1) saturate(1)}
}
@keyframes flareGlow{
  0%  {transform:translate(-50%,-50%) scale(.99) rotate(0deg);    opacity:.16}
  25% {transform:translate(-50%,-50%) scale(1.06) rotate(-1.4deg); opacity:.46}
  50% {transform:translate(-50%,-50%) scale(1.02) rotate(.9deg);   opacity:.24}
  75% {transform:translate(-50%,-50%) scale(1.09) rotate(1.6deg);  opacity:.42}
  100%{transform:translate(-50%,-50%) scale(.99) rotate(0deg);    opacity:.16}
}
@keyframes flareCore{
  0%,100%{opacity:.30;transform:scale(1)}
  35%    {opacity:.62;transform:scale(1.13)}
  70%    {opacity:.38;transform:scale(.95)}
}

.bg{position:fixed;inset:0;z-index:0;background:var(--void);overflow:hidden;pointer-events:none}
.bg .lay{position:absolute;left:50%;top:50%;width:100%;height:100%;
  object-fit:cover;object-position:50.7% 50.6%;
  transform:translate(-50%,-50%) scale(1)}
/* 下地 */
.bg .base{opacity:1;animation:flareBase 34s ease-in-out infinite}
/* 燃えている層。重ねて明るく */
.bg .glow{mix-blend-mode:screen;filter:blur(16px) saturate(1.5);
  animation:flareGlow 19s ease-in-out infinite}
/* 歪ませた背景は常に出しておく。走っていないときは静止した絵を映す。
   使えない端末では、もとの画像がそのまま見える */
.bg .wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.bg.gl .wave{opacity:1}
.bg.gl .base{opacity:0}

/* 中心の閃光 */
.bg .core{position:absolute;left:50%;top:50%;width:150%;height:150%;
  transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 50%,
    rgba(150,205,255,.42) 0%, rgba(90,150,235,.20) 16%, rgba(60,100,200,.06) 30%, transparent 52%);
  animation:flareCore 11s ease-in-out infinite}
/* 背景には何も被せない。画像をそのまま出す */
@media (prefers-reduced-motion: reduce){ .bg .lay,.bg .core{animation:none} }

/* ── メニューの見た目 ── */
.menu{position:absolute;top:56px;right:12px;z-index:5;background:var(--panel2);border:1px solid var(--line-hi);
  min-width:196px;display:none}
.menu.on{display:block}
.menu button{display:block;width:100%;text-align:left;padding:14px 17px;font-size:14px;border-bottom:1px solid var(--line)}
.menu button:last-child{border-bottom:0}
.menu button.warn{color:#FF8177}

/* ── 下層ページの本文 ─────────────────────── */
.page{position:relative;z-index:10;flex:1 1 auto;min-height:0;
  max-width:1080px;width:100%;margin:0 auto;padding:44px 20px 96px;
  display:block;text-align:left}
/* 下層ページは、画面ごと縦に流す。背景は貼りついたまま */
body.sub{overflow-y:auto}
body.sub #app{min-height:100dvh;height:auto;display:block}
body.sub .bg{position:fixed;inset:0;z-index:0}
body.sub .topbar{position:fixed;left:0;right:0;top:0}
body.sub .page{position:relative;z-index:10;padding-top:104px;margin-top:0}

/* 背景に30%の黒を重ねて、文字を読みやすく */



/* ── 下層ページは、背景を静かに沈める ───────── */
body.sub .bg .base{opacity:.22!important;animation:none!important}
body.sub .bg.gl .base{opacity:.22!important}
body.sub .bg .glow,
body.sub .bg .core,
body.sub .bg .wave,
body.sub .bg .stars{display:none}
body.sub .bg::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(4,7,11,.68)}


/* ── グループを作る ─────────────────────── */
/* パソコンでは6人ずつ、2行で12人が収まるようにする */
.gnGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
/* スマートフォンでは3人ずつ */
@media(max-width:720px){
  .gnGrid{grid-template-columns:repeat(3,1fr);gap:10px}
}
.gnCard{position:relative;border:1px solid var(--line);padding:10px 8px 12px;text-align:center;
  cursor:pointer;transition:border-color .2s,background .2s}
/* 一覧と同じ立ち姿を使うので、縦長の枠にする */
.gnCard .pic{width:64px;height:64px;aspect-ratio:1;border-radius:50%;overflow:hidden;margin:0 auto 9px;
  background:var(--raise)}
.gnCard .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transition:transform .5s cubic-bezier(.2,.72,.2,1)}
.gnCard b{display:block;font-size:12.5px;font-weight:400}
.gnCard.on{border-color:var(--c,var(--acc));background:color-mix(in srgb, var(--c,var(--acc)) 10%, transparent)}
.gnCard.on::after{content:"✓";position:absolute;top:6px;right:8px;color:var(--c,var(--acc));font-size:13px}
.gnCard.dim{opacity:.35;pointer-events:none}
/* ── 選んだミラメタが並ぶところ ──
   顔が隠れないよう、少しずつずらして重ねています。
   左の人ほど前に来ます（重なりの順は group.js で付けています）。 */
.gnStage{position:relative;display:flex;align-items:flex-end;justify-content:center;
  height:0;margin:0;overflow:hidden;
  transition:height .5s cubic-bezier(.2,.7,.2,1),margin .5s cubic-bezier(.2,.7,.2,1)}
.gnStage.on{height:210px;margin:22px 0 4px}

.gnFig{position:relative;flex:none;width:150px;height:200px;
  opacity:0;transform:translateX(46px) scale(.94);
  transition:opacity .52s ease,transform .52s cubic-bezier(.2,.7,.2,1)}
/* 2人目からは、左へ食い込ませて重ねる。顔は隠れません */
.gnFig + .gnFig{margin-left:-62px}
.gnFig.in{opacity:1;transform:none}
.gnFig.out{opacity:0;transform:translateX(38px) scale(.94)}
/* 元の位置へ戻している、ひと呼吸のあいだだけ動きを止める。
   ここで止めておかないと、戻す動きまで見えてしまいます */
.gnFig.hold{transition:none}

.gnFig img{width:100%;height:100%;object-fit:cover;object-position:50% 8%;display:block;
  /* 下端をぼかす幅。数字を小さくするほど、ぼけはじめが上がって強くなります */
  -webkit-mask-image:linear-gradient(to bottom,#000 84%,rgba(0,0,0,.5) 94%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 84%,rgba(0,0,0,.5) 94%,transparent 100%)}

/* 足もとに、その人の色の淡い光を敷く */
.gnFig::after{content:"";position:absolute;left:50%;bottom:2px;translate:-50% 0;
  width:104px;height:16px;border-radius:50%;
  background:radial-gradient(ellipse at center,var(--c,var(--acc)) 0%,transparent 70%);
  opacity:.26;filter:blur(5px);pointer-events:none}

@media(max-width:560px){
  .gnStage.on{height:168px;margin:18px 0 2px}
  .gnFig{width:118px;height:160px}
  .gnFig + .gnFig{margin-left:-48px}
  .gnFig::after{width:82px;height:13px}
}
@media (prefers-reduced-motion: reduce){
  .gnStage,.gnFig{transition:none}
  .gnFig{opacity:1;transform:none}
}

.gnInput{width:100%;padding:13px 14px;background:var(--panel2);border:1px solid var(--line);
  color:var(--txt);font-size:14px}
.gnInput:focus{border-color:var(--acc);outline:none}
#gnCount{color:var(--dim);font-weight:400;letter-spacing:0}

/* グループ情報のメンバー一覧 */
.giRename{display:flex;gap:10px}
.giRename .gnInput{flex:1}
.giMember{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.giMember:last-child{border-bottom:0}
.giMember .pic{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none;
  border:1px solid var(--line);background:var(--raise)}
.giMember .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.giMember b{font-size:14px;font-weight:400}
.giMember span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--faint)}