/* =========================================================
   ネオン管のデザイン（2026-10-03 本人が見本の「C ネオン管」を選んだ）
   ---------------------------------------------------------
   ゾーンのネオンの枠と同じ言葉を画面の部品に広げる：
   ・暗いガラスの札を、その意味の色の「ネオン管」（2px の線＋光）で囲む
   ・見出し／名前は Dela Gothic One（太い・少し斜め）、数字は Rajdhani、本文は Zen Kaku Gothic New
   ・進み具合は 10 マス（ゾーンの枠と同じ）
   フォントは 3 つとも OFL（無料・商用可・アプリに同梱できる）。いまは Google Fonts から読む（index.html）。
   ⚠ 公開の前に woff2 をアプリに入れる（ネットが無いと元の字に戻る）。
   実績 → ショップ → スキル → ポップアップ → ステータス（2026-10-03 本人の指示の順）。新しい画面もここに足す
   ========================================================= */
:root{
  --nzD:"Dela Gothic One","Hiragino Sans","Noto Sans JP",sans-serif;   /* 見出し・名前 */
  --nzN:"Rajdhani","Zen Kaku Gothic New","Hiragino Sans",sans-serif;   /* 数字・英字の札（漢字の単位は本文の字に落ちる） */
  --nzB:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;/* 本文 */
  --nzGlass:rgba(5,8,15,.94);                                           /* 札の中（暗いガラス） */
  --nzCyan:122,215,255; --nzGold:255,216,74; --nzGreen:125,255,176; --nzViolet:182,162,255; --nzRed:255,107,122;
  --nzDim:150,170,195;
}

/* ---------------- 実績 ---------------- */
#stage #screenAchieve .pBody{font-family:var(--nzB);}

/* 見出し：ACHIEVEMENT ◯ / 104 */
#stage #screenAchieve .acCount em{font-family:var(--nzN);font-style:normal;font-weight:700;font-size:13px;letter-spacing:.24em;
  color:#9a7400;text-shadow:none;}   /* 白地の上なので光らせず濃い金 */
#stage #screenAchieve .acCount b{font-family:var(--nzN);font-style:normal;font-weight:700;font-size:34px;color:#0b1220;text-shadow:none;}
#stage #screenAchieve .acCount i{font-family:var(--nzN);font-weight:700;font-size:15px;color:#5a6a80;}
/* 全体の進み：ネオン管のバー（暗い管の中に光） */
#stage #screenAchieve .acHead .pBar{height:10px;border-radius:3px;background:var(--nzGlass);
  border:2px solid rgba(var(--nzGold),.85);box-shadow:0 0 8px rgba(var(--nzGold),.55);}
#stage #screenAchieve .acHead .pBar span{border-radius:0;background:rgb(var(--nzGold));box-shadow:0 0 10px rgb(var(--nzGold));}
#stage #screenAchieve .acLeft{font-family:var(--nzB);color:#8a6a00;}
#stage #screenAchieve .acLeft b{font-family:var(--nzN);font-size:17px;}

/* まとめて受取：金のネオン */
#stage #screenAchieve .acAll{border-radius:4px;background:var(--nzGlass);color:#fff;
  font-family:var(--nzD);font-weight:400;font-size:15px;letter-spacing:.06em;
  border:2px solid rgb(var(--nzGold));
  box-shadow:0 0 10px rgba(var(--nzGold),.75),inset 0 0 10px rgba(var(--nzGold),.3);
  text-shadow:0 0 8px rgba(var(--nzGold),.8);}
#stage #screenAchieve .acAll u{font-family:var(--nzN);font-weight:700;font-size:13px;letter-spacing:.04em;
  color:rgb(var(--nzGold));text-shadow:none;}

/* 絞り込みの札：消えている管 → 選ぶと点く */
#stage #screenAchieve .acTab,#stage #screenAchieve .acGen{border-radius:4px;background:var(--nzGlass);
  font-family:var(--nzB);font-weight:700;color:rgb(var(--nzDim));border:2px solid rgba(var(--nzDim),.28);}
#stage #screenAchieve .acGen s{font-family:var(--nzN);font-size:10.5px;color:rgba(var(--nzDim),.8);}
#stage #screenAchieve .acTab.on{color:#fff;background:var(--nzGlass);border-color:rgb(var(--nzCyan));
  box-shadow:0 0 8px rgba(var(--nzCyan),.8),inset 0 0 6px rgba(var(--nzCyan),.35);text-shadow:0 0 6px rgba(var(--nzCyan),.9);}
#stage #screenAchieve .acGen.on{color:#fff;background:var(--nzGlass);border-color:rgb(var(--nzGold));
  box-shadow:0 0 8px rgba(var(--nzGold),.8),inset 0 0 6px rgba(var(--nzGold),.35);text-shadow:0 0 6px rgba(var(--nzGold),.9);}
#stage #screenAchieve .acGen.on s{color:rgb(var(--nzGold));}

/* ジャンルの見出し：白地の上の太い斜めの字 */
#stage #screenAchieve .pSec{font-family:var(--nzD);font-weight:400;font-size:15px;letter-spacing:.04em;color:#0b1220;
  transform:skewX(-8deg);transform-origin:left;margin:16px 2px 8px;}
#stage #screenAchieve .pSec b{font-family:var(--nzN);font-weight:700;font-size:13px;color:#5a6a80;margin-left:8px;}

/* 1件：暗いガラスの札をネオン管で囲む。色＝状態（受け取れる 金／受取済 緑／未達成 消えた管） */
#stage #screenAchieve .acRow{border-radius:4px;background:var(--nzGlass);padding:11px 12px;margin-bottom:8px;
  border:2px solid rgba(var(--nzDim),.3);box-shadow:none;}
#stage #screenAchieve .acIc{width:24px;height:24px;border:2px solid rgba(var(--nzDim),.4);font-size:12px;}
#stage #screenAchieve .acNm{font-family:var(--nzD);font-weight:400;font-size:14.5px;letter-spacing:.02em;color:#fff;}
#stage #screenAchieve .acNm .big{font-family:var(--nzB);font-weight:900;border-radius:3px;}
#stage #screenAchieve .acMain u{font-family:var(--nzB);font-weight:500;font-size:11px;color:#a7b4c6;}
#stage #screenAchieve .acRw{font-family:var(--nzB);font-weight:700;font-size:11px;color:#cfdbea;}
#stage #screenAchieve .acRw .num{font-family:var(--nzN);font-weight:700;font-size:15px;}
/* 進み具合：10 マス（ゾーンの枠と同じ。マスの切れ目を上にかぶせる） */
#stage #screenAchieve .acProg{position:relative;height:7px;border-radius:0;margin-top:7px;
  background:rgba(var(--nzViolet),.12);}
#stage #screenAchieve .acProg span{border-radius:0;background:rgb(var(--nzViolet));box-shadow:0 0 8px rgb(var(--nzViolet));}
#stage #screenAchieve .acProg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 3px),var(--nzGlass) calc(10% - 3px) 10%);}
#stage #screenAchieve .acProgN{font-family:var(--nzN);font-weight:700;font-size:12px;color:#c9b9ff;}
/* 状態 */
/* 未達成：札は透かさない（白地で灰色に濁るため）。管が消えている＝枠と字を暗く */
#stage #screenAchieve .acRow.yet{opacity:1;}
#stage #screenAchieve .acRow.yet .acNm{color:#b9c4d3;}
#stage #screenAchieve .acRow.yet .acMain u,#stage #screenAchieve .acRow.yet .acRw{color:#7f8da0;}
#stage #screenAchieve .acRow.yet .num{color:#9fb0c4;}
#stage #screenAchieve .acRow.taken{border-color:rgba(var(--nzGreen),.55);}
#stage #screenAchieve .acRow.taken .acIc{border-color:rgb(var(--nzGreen));color:rgb(var(--nzGreen));background:none;
  box-shadow:0 0 6px rgba(var(--nzGreen),.7);}
#stage #screenAchieve .acRow.ready{border-color:rgb(var(--nzGold));background:var(--nzGlass);
  box-shadow:0 0 10px rgba(var(--nzGold),.7),inset 0 0 10px rgba(var(--nzGold),.22);}
#stage #screenAchieve .acRow.ready .acIc{border-color:rgb(var(--nzGold));color:#fff4c2;box-shadow:0 0 8px rgba(var(--nzGold),.9);}
#stage #screenAchieve .acRow.ready .num{color:rgb(var(--nzGold));text-shadow:0 0 6px rgba(var(--nzGold),.8);}
/* 受取：点いている金の管のボタン（脈打つのは今までどおり） */
#stage #screenAchieve .acGet{border-radius:4px;background:rgba(var(--nzGold),.14);color:#fff;
  font-family:var(--nzD);font-weight:400;font-size:13px;letter-spacing:.12em;
  border:2px solid rgb(var(--nzGold));text-shadow:0 0 6px rgba(var(--nzGold),.9);}
#stage #screenAchieve .acSt{font-family:var(--nzN);font-weight:700;font-size:12px;letter-spacing:.06em;}
/* ⚠ ちらつき（nzFlicker）は 2026-10-03 本人の指示で無し */

/* ---------------- ショップ（端末の画面の中＝暗い地） ---------------- */
#stage #screenShop .shList,#stage #screenShop .shLead{font-family:var(--nzB);}
#stage #screenShop .shLead{color:#a7b4c6;}
/* 札（SHOP／PP／Ex／両替）：消えた管 → 選ぶと点く */
#stage #screenShop .sTab.sh{border-radius:4px;background:var(--nzGlass);font-family:var(--nzN);font-weight:700;font-size:14px;letter-spacing:.12em;
  color:rgb(var(--nzDim));border:2px solid rgba(var(--nzDim),.3);box-shadow:none;}
#stage #screenShop .sTab.sh.on{color:#fff;border-color:rgb(var(--nzCyan));background:var(--nzGlass);
  box-shadow:0 0 8px rgba(var(--nzCyan),.8),inset 0 0 6px rgba(var(--nzCyan),.3);text-shadow:0 0 6px rgba(var(--nzCyan),.9);}
#stage #screenShop .sTab.sh.pp.on{border-color:rgb(var(--nzGreen));box-shadow:0 0 8px rgba(var(--nzGreen),.8),inset 0 0 6px rgba(var(--nzGreen),.3);text-shadow:0 0 6px rgba(var(--nzGreen),.9);}
#stage #screenShop .sTab.sh.ex.on{border-color:rgb(var(--nzGold));box-shadow:0 0 8px rgba(var(--nzGold),.8),inset 0 0 6px rgba(var(--nzGold),.3);text-shadow:0 0 6px rgba(var(--nzGold),.9);}
/* 財布：金の管 */
#stage #screenShop .shWallet{border-radius:4px;background:var(--nzGlass);border:2px solid rgba(var(--nzGold),.8);
  box-shadow:0 0 8px rgba(var(--nzGold),.5),inset 0 0 8px rgba(var(--nzGold),.18);}
#stage #screenShop .shWallet .lbl{font-family:var(--nzB);font-weight:700;color:#cfdbea;}
#stage #screenShop .shWallet b{font-family:var(--nzN);font-style:normal;font-weight:700;font-size:36px;text-shadow:0 0 8px rgba(var(--nzGold),.75);}
#stage #screenShop .shWallet.pp{border-color:rgba(var(--nzGreen),.8);box-shadow:0 0 8px rgba(var(--nzGreen),.5),inset 0 0 8px rgba(var(--nzGreen),.18);}
#stage #screenShop .shWallet s,#stage #screenShop .shWallet u{font-family:var(--nzN);font-weight:700;}
/* 棚の見出し：太い斜めの字＋その棚の色で光る */
#stage #screenShop .sChap{font-family:var(--nzD);font-weight:400;font-size:17px;letter-spacing:.04em;
  transform:skewX(-8deg);transform-origin:left;text-shadow:0 0 8px currentColor;}
#stage #screenShop .sChap small{font-family:var(--nzB);font-weight:500;text-shadow:none;}
/* 品物：品物の色（--c）のネオン管で囲む */
#stage #screenShop .shItem{--c:#7ad7ff;border-radius:4px;background:var(--nzGlass);padding:10px 11px;margin-bottom:8px;
  border:2px solid color-mix(in srgb,var(--c) 70%,transparent);
  box-shadow:0 0 7px color-mix(in srgb,var(--c) 45%,transparent),inset 0 0 7px color-mix(in srgb,var(--c) 15%,transparent);}
#stage #screenShop .shItem .ic{border-radius:50%;border:2px solid color-mix(in srgb,var(--c) 75%,transparent);background:none;
  box-shadow:0 0 6px color-mix(in srgb,var(--c) 55%,transparent);}
#stage #screenShop .shItem .nm{font-family:var(--nzD);font-weight:400;font-size:15px;letter-spacing:.02em;color:#fff;}
#stage #screenShop .shItem .nm b{font-family:var(--nzN);font-weight:700;font-size:13px;color:var(--c);}
#stage #screenShop .shItem .ds{font-family:var(--nzB);font-weight:500;font-size:11px;color:#a7b4c6;}
#stage #screenShop .shItem .ds b{color:#fff;}
#stage #screenShop .shItem .pr b{font-family:var(--nzN);font-style:normal;font-weight:700;font-size:21px;
  color:rgb(var(--nzGold));text-shadow:0 0 6px rgba(var(--nzGold),.75);}
#stage #screenShop .shItem .pr s{font-family:var(--nzN);font-weight:700;font-size:10px;letter-spacing:.24em;color:#a7b4c6;}
/* 買えない／上限／LOCK／SOON：管が消えている（札は透かさない） */
#stage #screenShop .shItem.poor,#stage #screenShop .shItem.maxed,#stage #screenShop .shItem.lock,#stage #screenShop .shItem.hold{opacity:1;
  border-color:rgba(var(--nzDim),.3);box-shadow:none;}
#stage #screenShop .shItem.poor .ic,#stage #screenShop .shItem.maxed .ic,#stage #screenShop .shItem.lock .ic,#stage #screenShop .shItem.hold .ic{
  border-color:rgba(var(--nzDim),.35);box-shadow:none;opacity:.7;}
#stage #screenShop .shItem.poor .nm,#stage #screenShop .shItem.maxed .nm,#stage #screenShop .shItem.lock .nm,#stage #screenShop .shItem.hold .nm{color:#b9c4d3;}
#stage #screenShop .shItem.poor .pr b{color:#8e7a3c;text-shadow:none;}
#stage #screenShop .shItem.maxed .pr b{color:rgb(var(--nzGreen));text-shadow:0 0 6px rgba(var(--nzGreen),.6);font-size:16px;}
#stage #screenShop .shItem.lock .pr b,#stage #screenShop .shItem.hold .pr b{color:#8b9bb0;text-shadow:none;font-size:15px;}
/* 購入済の背景・ジュークボックスの ON／OFF・選曲 */
#stage #screenShop .bgTgl{border-radius:4px;font-family:var(--nzN);font-weight:700;letter-spacing:.12em;background:var(--nzGlass);
  border:2px solid rgba(var(--nzDim),.35);color:rgb(var(--nzDim));}
#stage #screenShop .bgTgl.on{border-color:rgb(var(--nzGreen));color:#fff;box-shadow:0 0 8px rgba(var(--nzGreen),.8);text-shadow:0 0 6px rgba(var(--nzGreen),.9);}

/* ---------------- スキル（下の説明欄・スロット・載せ替えの一覧） ---------------- */
#stage #screenSkill .skDesc{border-radius:4px;background:var(--nzGlass);border:2px solid rgba(var(--nzDim),.3);font-family:var(--nzB);}
#stage #screenSkill .skDesc:not(.plain){border-color:var(--c);
  box-shadow:0 0 9px color-mix(in srgb,var(--c) 70%,transparent),inset 0 0 9px color-mix(in srgb,var(--c) 22%,transparent);}
#stage #screenSkill .sdHead em{font-family:var(--nzD);font-weight:400;font-size:15px;letter-spacing:.02em;}
#stage #screenSkill .sdHead i{font-family:var(--nzN);font-weight:700;font-size:11px;border-radius:3px;}
#stage #screenSkill .sdHead s{font-family:var(--nzN);font-weight:700;font-size:15px;}
#stage #screenSkill .sdWhat{font-size:11px;color:#a7b4c6;}
#stage #screenSkill .sdGain{border-radius:3px;font-weight:700;}
#stage #screenSkill .sdOk,#stage #screenSkill .sdNo{border-radius:4px;font-family:var(--nzD);font-weight:400;font-size:13px;letter-spacing:.1em;}
#stage #screenSkill .sdOk u,#stage #screenSkill .sdNo u{font-family:var(--nzB);font-weight:500;letter-spacing:0;}
#stage #screenSkill .sdNo{background:var(--nzGlass);border:2px solid rgba(var(--nzDim),.35);color:#c3cddb;}
#stage #screenSkill .sdOk{background:rgba(var(--nzGold),.14);color:#fff;border:2px solid rgb(var(--nzGold));
  box-shadow:0 0 9px rgba(var(--nzGold),.75);text-shadow:0 0 6px rgba(var(--nzGold),.9);}
#stage #screenSkill .sdOk.off{background:var(--nzGlass);border-color:rgba(var(--nzDim),.3);color:#7b8ba3;box-shadow:none;text-shadow:none;}
#stage #screenSkill .skSlot{border-radius:4px;background:var(--nzGlass);border:2px solid rgba(var(--nzDim),.3);}
#stage #screenSkill .skSlot span{font-family:var(--nzB);font-weight:700;}
#stage #screenSkill .skSlot.has{border-color:var(--c);box-shadow:0 0 7px color-mix(in srgb,var(--c) 65%,transparent);}
#stage #screenSkill .skPick{border-radius:4px;background:var(--nzGlass);border:2px solid rgba(var(--nzCyan),.7);
  box-shadow:0 0 10px rgba(var(--nzCyan),.5),0 16px 44px rgba(0,0,0,.6);}
#stage #screenSkill .skPickHead{font-family:var(--nzN);font-weight:700;font-size:12px;letter-spacing:.2em;}

/* ---------------- ステータス（白地の上の暗い札。実績と同じ） ---------------- */
#stage #screenStatus .pBody{font-family:var(--nzB);}
#stage #screenStatus .pSec{font-family:var(--nzD);font-weight:400;font-size:15px;letter-spacing:.04em;color:#0b1220;
  transform:skewX(-8deg);transform-origin:left;margin:16px 2px 8px;}
#stage #screenStatus .pSec b{font-family:var(--nzN);font-weight:700;font-size:12px;color:#5a6a80;}
#stage #screenStatus .pLv em{font-family:var(--nzN);font-style:normal;font-weight:700;letter-spacing:.24em;color:#1f6ea0;}
#stage #screenStatus .pLv b{font-family:var(--nzN);font-style:normal;font-weight:700;font-size:38px;color:#0b1220;text-shadow:none;}
#stage #screenStatus .pBar{height:10px;border-radius:3px;background:var(--nzGlass);border:2px solid rgba(var(--nzCyan),.85);
  box-shadow:0 0 8px rgba(var(--nzCyan),.5);}
#stage #screenStatus .pBar span{border-radius:0;background:rgb(var(--nzCyan));box-shadow:0 0 10px rgb(var(--nzCyan));}
#stage #screenStatus .pNote{font-family:var(--nzN);font-weight:700;font-size:12px;}
#stage #screenStatus .pRow,#stage #screenStatus .pSlot{border-radius:4px;background:var(--nzGlass);padding:10px 12px;margin-bottom:8px;
  border:2px solid rgba(var(--nzCyan),.45);box-shadow:0 0 6px rgba(var(--nzCyan),.25);}
#stage #screenStatus .pRow .nm,#stage #screenStatus .pSlot .nm{font-family:var(--nzD);font-weight:400;font-size:14px;letter-spacing:.02em;}
#stage #screenStatus .pRow .nm u,#stage #screenStatus .pSlot .nm u{font-family:var(--nzB);font-weight:500;font-size:11px;color:#a7b4c6;letter-spacing:0;}
#stage #screenStatus .pRow .vl{font-family:var(--nzN);font-style:normal;font-weight:700;font-size:22px;}
#stage #screenStatus .pRow .eff{font-family:var(--nzB);font-weight:700;}
#stage #screenStatus .pSlot .lv{font-family:var(--nzN);font-style:normal;font-weight:700;}
#stage #screenStatus .pRow.pt,#stage #screenStatus .pRow.ex,#stage #screenStatus .pRow.pp{border-color:rgba(var(--nzGold),.7);box-shadow:0 0 7px rgba(var(--nzGold),.35);}
#stage #screenStatus .pRow.pt .vl,#stage #screenStatus .pRow.ex .vl,#stage #screenStatus .pRow.pp .vl{text-shadow:0 0 6px rgba(var(--nzGold),.7);}
#stage #screenStatus .pRow.off{opacity:1;border-color:rgba(var(--nzDim),.3);box-shadow:none;}
#stage #screenStatus .pRow.off .nm{color:#b9c4d3;}

/* ---------------- ポップアップ（購入の確認・レベルアップ・解放・案内・日替わり・持ち込み・ステージの確認） ---------------- */
#stage .boBox,#stage .lvBox,#stage .dpBox,#stage .soBox,#stage #spot .spotMsg{border-radius:6px;background:var(--nzGlass);
  border:2px solid rgb(var(--nzCyan));box-shadow:0 0 12px rgba(var(--nzCyan),.6),inset 0 0 12px rgba(var(--nzCyan),.18),0 18px 44px rgba(0,0,0,.6);
  font-family:var(--nzB);}
#stage .lvBox{border-color:rgb(var(--nzGold));box-shadow:0 0 14px rgba(var(--nzGold),.65),inset 0 0 12px rgba(var(--nzGold),.2),0 18px 44px rgba(0,0,0,.6);}
#stage .dpBox{border-color:rgb(var(--nzGold));box-shadow:0 0 12px rgba(var(--nzGold),.55),inset 0 0 12px rgba(var(--nzGold),.15),0 18px 44px rgba(0,0,0,.6);}
#stage .spBox{border-color:rgb(var(--nzViolet)) !important;background:var(--nzGlass) !important;
  box-shadow:0 0 14px rgba(var(--nzViolet),.7),inset 0 0 12px rgba(var(--nzViolet),.2),0 18px 44px rgba(0,0,0,.6) !important;}
#stage .ipBox{border-color:rgb(var(--nzCyan));box-shadow:0 0 12px rgba(var(--nzCyan),.55),inset 0 0 12px rgba(var(--nzCyan),.15),0 18px 44px rgba(0,0,0,.6);}
/* 中の字 */
#stage .boTtl,#stage .soTtl{font-family:var(--nzN);font-style:normal;font-weight:700;font-size:13px;letter-spacing:.24em;}
#stage .boName,#stage .soName{font-family:var(--nzD);font-weight:400;letter-spacing:.02em;}
#stage .boFig{border-radius:3px;}
#stage .boRow b{font-family:var(--nzN);font-weight:700;font-size:19px;}
#stage #spot .spotMsg p{font-family:var(--nzB);font-weight:700;}
/* ボタン：やめる＝消えた管／決める＝点いた管 */
#stage .boAct button,#stage #spot .spotNext{border-radius:4px;font-family:var(--nzD);font-weight:400;letter-spacing:.1em;}
#stage .boNo{background:var(--nzGlass);border:2px solid rgba(var(--nzDim),.4);color:#c3cddb;}
#stage .boYes,#stage #spot .spotNext{background:rgba(var(--nzGold),.14);color:#fff;border:2px solid rgb(var(--nzGold));
  box-shadow:0 0 9px rgba(var(--nzGold),.75);text-shadow:0 0 6px rgba(var(--nzGold),.9);}
#stage #spot .spotNext{border-color:rgb(var(--nzCyan));background:rgba(var(--nzCyan),.14);box-shadow:0 0 9px rgba(var(--nzCyan),.75);text-shadow:0 0 6px rgba(var(--nzCyan),.9);}
/* ステータスのクラス（能力／スキル／プレイ）・レベルの NEXT。ランクの字（E〜SS）は今のまま */
#stage #screenStatus .clsRow{border-radius:4px;background:var(--nzGlass);border:2px solid rgba(var(--nzCyan),.7);
  box-shadow:0 0 8px rgba(var(--nzCyan),.4),inset 0 0 8px rgba(var(--nzCyan),.12);}
#stage #screenStatus .clsNm{font-family:var(--nzD);font-style:normal;font-weight:400;font-size:21px;letter-spacing:.04em;
  transform:skewX(-8deg);text-shadow:0 0 8px rgba(var(--nzCyan),.7);}
#stage #screenStatus .clsPct{font-family:var(--nzN);font-weight:700;font-size:15px;}
#stage #screenStatus .pLv i{font-family:var(--nzN);font-style:normal;font-weight:700;font-size:14px;letter-spacing:.12em;color:#5a6a80;}
#stage #screenStatus .pLv i b{font-family:var(--nzN);font-style:normal;font-weight:700;font-size:30px;letter-spacing:0;color:#0b1220;}
/* スキル画面の四隅の札：名前と SP の字だけ（角を切った形と Lv の字・大きさは本人が 10-02 に決めたまま） */
#stage #screenSkill .skTag{border-width:2px;background:var(--nzGlass);}
#stage #screenSkill .skTag .nm{font-family:var(--nzD);font-weight:400;font-size:13px;letter-spacing:.04em;text-shadow:0 0 6px var(--c);}
#stage #screenSkill .skTag .sp{font-family:var(--nzN);font-weight:700;font-size:12px;}

/* ---------------- 2026-10-03 9回目 ---------------- */
/* 購入の確認：説明の「あと ◯ / ◯ 個」を2段目に（\n で改行） */
#stage .boDesc{white-space:pre-line;}
/* ショップの丸いアイコンの中の字・記号（2026-10-03 本人「下にずれている」）。
   原因：ネオン管で本文の字を Zen Kaku Gothic New にした → この字は記号（◷ ✧ ④ ♪ …）を約 1.3px 低く置く。
   下に余白を足して字だけ持ち上げる（絵の .ic は余白なし＝今のまま）。数字は本人の見た目で合わせた */
#stage #screenShop .shItem .ic{line-height:1;box-sizing:border-box;padding:0;}
/* 2026-10-04：余白での調整（PC 2.6px／iPhone 0.6px・2.4px）はやめ、記号をキャンバスに描いて真ん中に置く（ui.js `icGlyphCanvas`） */
#stage #screenShop .shItem .ic canvas.icG{display:block;flex:0 0 auto;}
/* ステータスの見出し（能力・スキルなど）を大きく */
#stage #screenStatus .pSec{font-size:20px;margin:20px 2px 10px;}
#stage #screenStatus .pSec b{font-size:14px;}

/* ---------------- カプセルラボの札（ホーム。2026-10-03・CSS の演出） ----------------
   全体の秒 --ltDur（TUNE）。各段は % で決めてあるので、秒を変えても割合は同じ。
   0〜6%  ネオンの線が真ん中から左右へ走る（.ltScan）
   6〜22% 線が上下に分かれて帯が開く（.ltBand の clip-path）・字が光りながら出る
   22〜80% 止まる（字の光がゆっくり息をする程度。ちらつかせない）
   80〜100% 古いテレビを消すように縦につぶれて（scaleY）→ 横に縮んで消える
   動かすのは transform／opacity／clip-path だけ＝スマホでも滑らか */
.labTelop{position:absolute;left:0;right:0;top:50%;z-index:60;pointer-events:none;
  transform:translateY(-50%) scale(var(--ltScale,1));transform-origin:center;}
.labTelop .ltBand{position:relative;margin:0 auto;width:100%;padding:16px 0 14px;text-align:center;
  background:linear-gradient(90deg,rgba(5,8,15,0),rgba(5,8,15,.86) 14%,rgba(5,8,15,.86) 86%,rgba(5,8,15,0));
  clip-path:inset(50% 0 50% 0);
  animation:ltOpen var(--ltDur,2.2s) linear both, ltOff var(--ltDur,2.2s) linear both;}
.labTelop .ltLine{position:absolute;left:8%;right:8%;height:2px;background:rgb(var(--nzCyan));
  box-shadow:0 0 8px rgb(var(--nzCyan)),0 0 18px rgba(var(--nzCyan),.7);}
.labTelop .ltLine.t{top:0;} .labTelop .ltLine.b{bottom:0;}
.labTelop .ltMain{font-family:var(--nzD);font-size:38px;line-height:1.1;letter-spacing:.08em;color:#fff;
  transform:skewX(-8deg);
  text-shadow:0 0 6px rgba(var(--nzCyan),1),0 0 16px rgba(var(--nzCyan),.85),0 0 32px rgba(var(--nzCyan),.5);
  animation:ltText var(--ltDur,2.2s) linear both;}
.labTelop .ltSub{margin-top:4px;font-family:var(--nzN);font-weight:700;font-size:15px;letter-spacing:.6em;padding-left:.6em;
  color:rgb(var(--nzCyan));text-shadow:0 0 6px rgba(var(--nzCyan),.9);
  animation:ltSub var(--ltDur,2.2s) linear both;}
.labTelop .ltScan{position:absolute;left:50%;top:50%;width:100%;height:2px;margin-top:-1px;transform:translateX(-50%) scaleX(0);
  background:#fff;box-shadow:0 0 10px #fff,0 0 22px rgb(var(--nzCyan)),0 0 40px rgba(var(--nzCyan),.7);
  animation:ltScan var(--ltDur,2.2s) linear both;}
/* 帯が上下に開く → 最後に縦につぶれる */
@keyframes ltOpen{
  0%,6%{clip-path:inset(50% 0 50% 0);}
  12%{clip-path:inset(18% 0 18% 0);animation-timing-function:ease-out;}
  22%,100%{clip-path:inset(0 0 0 0);}}
@keyframes ltOff{
  0%,80%{transform:none;opacity:1;filter:none;}
  88%{transform:scaleY(.04);opacity:1;filter:brightness(2.2);}
  96%{transform:scaleY(.04) scaleX(.02);opacity:1;filter:brightness(2.5);}
  100%{transform:scaleY(.04) scaleX(0);opacity:0;}}
/* 最初の線：真ん中から左右へ走って、帯が開くと消える */
@keyframes ltScan{
  0%{transform:translateX(-50%) scaleX(0);opacity:1;}
  6%{transform:translateX(-50%) scaleX(1);opacity:1;}
  16%{transform:translateX(-50%) scaleX(1);opacity:0;}
  100%{transform:translateX(-50%) scaleX(1);opacity:0;}}
/* 字：帯が開くのに合わせて、白く強く光って出る → 落ち着く → 止まっているあいだはゆっくり息をする */
@keyframes ltText{
  0%,8%{opacity:0;transform:skewX(-8deg) scale(1.12);filter:brightness(3) blur(2px);}
  18%{opacity:1;transform:skewX(-8deg) scale(1);filter:brightness(1.8) blur(0);}
  26%{filter:brightness(1);}
  50%{filter:brightness(1.15);}
  80%,100%{opacity:1;transform:skewX(-8deg) scale(1);filter:brightness(1);}}
/* 英字：少し遅れて、字間が詰まりながら出る */
@keyframes ltSub{
  0%,16%{opacity:0;letter-spacing:1.2em;}
  30%,100%{opacity:1;letter-spacing:.6em;}}
@media (prefers-reduced-motion:reduce){.labTelop *{animation-duration:.01s !important;}}
#stage #screenStatus .pRow .nm u.one{white-space:nowrap;}   /* 経験値 ％・ポイント ％を1行に（2026-10-03） */
/* ステータスの見出しの説明を2段目に（`.pSec b.br`。2026-10-04 本人の指示：アイテムの効果） */
#stage #screenStatus .pSec b.br{display:block;margin:4px 0 0;margin-left:0;}

/* 実績の称号（2026-10-04 本人の指示）。ホームの DAILY（left 12・top 108・56px）の右にネオン管の札。出るだけ（ui.js `syncHomeMaster`） */
#hMaster{position:absolute;z-index:3;left:76px;top:110px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none;}
#hMaster .hm{--c:255,214,90;display:block;padding:3px 9px 2px;border-radius:4px;white-space:nowrap;
  font-family:var(--nzD);font-weight:400;font-size:13px;letter-spacing:.08em;color:#fff;
  background:rgba(5,8,15,.72);border:2px solid rgb(var(--c));
  box-shadow:0 0 8px rgba(var(--c),.75),inset 0 0 6px rgba(var(--c),.25);text-shadow:0 0 6px rgba(var(--c),.95);}
#hMaster .hm.ch_pr200{--c:125,255,176;}
/* 実績の名前が長いときは「大きな報酬」の札を2段目へ（2026-10-04 本人の指示：「本当にありがとうございます」で札が切れた） */
#stage #screenAchieve .acNm.brk .big{display:table;margin:3px 0 0;}

/* ---------------- EX-6 エンディング（2026-10-04。js/ending.js） ----------------
   スタッフロール：画面いっぱいの層（指は通す）。原子より前・一時停止のボタンより後ろ。上下の端はふわっと消える */
#endRoll{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);}
#endRoll .erIn{position:absolute;left:0;right:0;top:0;text-align:center;will-change:transform;
  text-shadow:0 0 6px rgba(0,0,0,.95),0 2px 10px rgba(0,0,0,.9);}
#endRoll .er.title{font-family:var(--nzD);font-size:calc(34px * var(--erK,1));letter-spacing:.06em;color:#fff;margin:6px 0;
  text-shadow:0 0 10px rgba(var(--nzCyan),.9),0 0 22px rgba(var(--nzCyan),.6),0 2px 10px rgba(0,0,0,.9);}
#endRoll .er.head{font-family:var(--nzN);font-weight:700;font-size:calc(13px * var(--erK,1));letter-spacing:.3em;color:rgb(var(--nzCyan));margin:4px 0 6px;
  text-shadow:0 0 8px rgba(var(--nzCyan),.8),0 2px 8px rgba(0,0,0,.9);}
#endRoll .er.name{font-family:var(--nzB);font-weight:700;font-size:calc(17px * var(--erK,1));color:#fff;line-height:1.7;}
#endRoll .er.gap{height:calc(26px * var(--erK,1));}
#endRoll .er.gapL{height:120px;}
/* 締めのあいだは画面の外の帯も黒く（2026-10-05 本人：スマホで上下に余白が見えた）。ending.js が #app に付け外し */
#app.endBlack{background:#000;transition:background-color 1.5s ease;}
#app.endBlack::before{opacity:0;transition:opacity 1.5s ease;}
/* 締め：暗転 →「THANK YOU FOR PLAYING!!」→ フェードアウト。アイキャッチ（z 200）より後ろ */
#endFin{position:absolute;inset:0;z-index:150;background:#000;opacity:0;pointer-events:auto;
  transition:opacity var(--efIn,1.5s) ease;}
#endFin b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;}   /* 下の余白（padding-bottom 12vh・下の行）で真ん中より少し上へ。2行になっても塊ごと真ん中より少し上（2026-10-04 本人「少し下寄り」） */
/* 語り（システムのログ）：真ん中に左揃えで1行ずつ。打っている行の後ろにカーソル（2026-10-04） */
#endFin .efLog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92%,360px);
  font-family:"Rajdhani","Zen Kaku Gothic New",monospace;font-weight:600;font-size:13px;line-height:2;letter-spacing:.02em;   /* 15 → 13px（2026-10-05。行が折れないよう ending.js がさらに縮める） */
  color:#cfeaff;text-shadow:0 0 6px rgba(var(--nzCyan),.6);transition:opacity 1s ease;}
#endFin .efLog.out{opacity:0;}
#endFin .efRow{white-space:pre;}   /* 折り返さない（2026-10-05） */
#endFin .efRow.cur::after{content:'_';margin-left:2px;animation:efCaret .8s steps(1) infinite;}
@keyframes efCaret{50%{opacity:0;}}
#endFin.in{opacity:1;}
#endFin b{font-family:var(--nzD);font-weight:400;font-size:26px;letter-spacing:.06em;color:#fff;text-align:center;padding:0 16px 12vh;
  opacity:0;transform:scale(.96);transition:opacity 1.2s ease,transform 1.6s ease;
  text-shadow:0 0 10px rgba(var(--nzCyan),.85),0 0 26px rgba(var(--nzCyan),.5);}
#endFin.txt b{opacity:1;transform:scale(1);}
#endFin.out b{opacity:0;transition:opacity var(--efOut,1.5s) ease;}
/* 右の色のバー（必要数）は出さない */
#hud.ending #gaugeR,#hud.ending #gaugeL,#hud.ending #skillIcons{display:none !important;}   /* 右の色のバー・左上のスキルのアイコン（#skillIcons）（2026-10-04）*/

/* ---------------- メニューの「クレジット」「注意事項」（2026-10-04。js/docs.js） ---------------- */
#menu .mPanel.docPanel{width:min(90%,340px);display:flex;flex-direction:column;max-height:82%;}
#menu .mPanel.docPanel.hidden{display:none;}
#menu .docBody{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 4px 8px;
  font-family:var(--nzB);font-size:12.5px;line-height:1.75;color:#cfdbea;text-align:left;}
#menu .docBody h3{font-family:var(--nzD);font-weight:400;font-size:20px;text-align:center;color:#fff;margin:4px 0 2px;
  text-shadow:0 0 8px rgba(var(--nzCyan),.7);}
#menu .docBody h4{font-family:var(--nzB);font-weight:900;font-size:13px;letter-spacing:.06em;color:rgb(var(--nzCyan));
  margin:12px 0 4px;padding-bottom:3px;border-bottom:1px solid rgba(var(--nzCyan),.3);}
#menu .docBody p{margin:0 0 4px;word-break:break-word;overflow-wrap:anywhere;}
#menu .docBody .dGap{height:6px;}
#menu .docBody .dGap.big{height:18px;}
#menu .docBody .dPre{white-space:pre-wrap;font-family:Menlo,Consolas,monospace;font-size:9.5px;line-height:1.5;color:#9fb0c4;
  margin:10px 0 0;padding:8px;border:1px solid rgba(var(--nzCyan),.2);border-radius:4px;background:rgba(0,0,0,.25);}
#menu .docBody .dPre:empty{display:none;}
#menu .docBody .dRoll{text-align:center;}
#menu .docBody .dRoll h4{border-bottom:0;margin-bottom:0;}
/* 両替機（S-7 クリア後。2026-10-06）：出す／受け取るを選ぶ */
#stage #screenShop .swBox{background:var(--nzGlass);border-radius:4px;padding:10px 10px 8px;margin-bottom:8px;
  border:1px solid rgba(var(--nzCyan),.25);}
#stage #screenShop .swRow{display:flex;align-items:center;gap:6px;}
#stage #screenShop .swLbl{flex:0 0 56px;font-family:var(--nzB);font-weight:700;font-size:11px;color:#a7b4c6;}
#stage #screenShop .swChip{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px;border-radius:4px;
  background:rgba(0,0,0,.3);border:1.5px solid color-mix(in srgb,var(--c) 35%,transparent);color:#cfd8e3;cursor:pointer;}
#stage #screenShop .swChip b{font-family:var(--nzD);font-weight:400;font-size:14px;color:var(--c);}
#stage #screenShop .swChip s{text-decoration:none;font-family:var(--nzN);font-size:10px;color:#8ba0b8;}
#stage #screenShop .swChip.on{border-color:var(--c);box-shadow:0 0 8px color-mix(in srgb,var(--c) 55%,transparent),inset 0 0 6px color-mix(in srgb,var(--c) 30%,transparent);
  background:color-mix(in srgb,var(--c) 14%,rgba(0,0,0,.3));}
#stage #screenShop .swChip.off{opacity:.25;pointer-events:none;}
#stage #screenShop .swArrow{text-align:center;font-size:10px;color:#6f8399;margin:3px 0 3px 56px;}
/* ショップの札（2026-10-06 本人「タブがスライドしないので両替所が選びづらい」）：横にはみ出したら指でスライド。札は縮めない */
#stage #screenShop #shTabs{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;touch-action:pan-x;padding:3px 2px 5px;scroll-padding:0 12px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent);}
#stage #screenShop #shTabs::-webkit-scrollbar{display:none;}
#stage #screenShop #shTabs .sTab{flex:0 0 auto;white-space:nowrap;-webkit-user-select:none;user-select:none;}
#stage #screenShop #shTabs.atEnd{-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px);mask-image:linear-gradient(90deg,transparent,#000 18px);}
#stage #screenShop #shTabs.atEnd.atStart{-webkit-mask-image:none;mask-image:none;}
#stage #screenShop #shTabs.mid{-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);}
/* EX-9 あとがき（作者のメッセージ。2026-10-06）：暗転した画面の真ん中に文だけ */
#endFin .epAfter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(86%,330px);
  font-family:var(--nzB);font-weight:500;font-size:14px;line-height:2;color:#e6eef8;text-align:center;white-space:pre-wrap;
  opacity:0;transition:opacity var(--eaIn,2s) ease;}
#endFin .epAfter.in{opacity:1;}
#endFin .epAfter.out{opacity:0;transition:opacity var(--eaOut,2s) ease;}
#endFin .efLog.solo{text-align:center;}   /* EPILOGUE の「演出: 消す」のあと、ひとつだけの行は真ん中（2026-10-06） */
/* ヘルプ（2026-10-07）：ジャンルの一覧はメニューと同じボタン。説明はクレジット・注意事項と同じ字 */
#menu #helpPanel .hpLead{margin:0 0 10px;font-size:12px;color:#9fb6cf;text-align:center;}
#menu #helpPanel .hpGen{width:100%;margin:0 0 8px;}
#menu #helpPanel .docBody h4{margin-top:12px;}
/* Q&A（2026-10-07）：質問だけ並べ、押すと答えが開く */
#menu #qaPanel .hpLead{margin:0 0 8px;font-size:12px;color:#9fb6cf;text-align:center;}
#menu #qaPanel .qaItem{margin:0 0 6px;border:1.5px solid rgba(var(--nzCyan),.35);border-radius:4px;background:rgba(0,0,0,.25);}
#menu #qaPanel .qaQ{display:flex;gap:6px;width:100%;padding:9px 10px;background:none;border:0;color:#eaf6ff;text-align:left;
  font-family:var(--nzB);font-weight:800;font-size:13px;line-height:1.5;cursor:pointer;}
#menu #qaPanel .qaQ i,#menu #qaPanel .qaA i{font-style:normal;font-weight:900;color:rgb(var(--nzCyan));flex:0 0 auto;}
#menu #qaPanel .qaA{display:none;gap:6px;padding:0 10px 9px;}
#menu #qaPanel .qaA i{color:rgb(var(--nzGold));}
#menu #qaPanel .qaItem.open{border-color:rgb(var(--nzCyan));}
#menu #qaPanel .qaItem.open .qaA{display:flex;}
#menu #qaPanel .qaA p{margin:0 0 4px;}