:root{ --ink:#e8f1ff; --dim:#7b8ba3; --accent:#7ad7ff; --danger:#ff6b8a; } *{box-sizing:border-box;margin:0;padding:0;} html,body{height:100%;background:#04060a;overflow:hidden; font-family:"Helvetica Neue",-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif; color:var(--ink);-webkit-font-smoothing:antialiased;} body{display:flex;align-items:center;justify-content:center; overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none; -webkit-touch-callout:none;} /* 長押しで絵の保存メニューを出さない（2026-10-07 最終デバッグ。Safari 向け） */ img{-webkit-touch-callout:none;-webkit-user-drag:none;} #app{position:relative;width:100%;height:100%;overflow:hidden;background:var(--bandCol,#04060a);} /* 画面の外の帯（2026-09-28）：いまの背景の絵をぼかして暗く敷く（ui.js の syncBand）。#stage より後ろ */ #app::before{content:'';position:absolute;inset:-40px;background:var(--bandBg,none) center/cover no-repeat; filter:blur(14px) brightness(.55);pointer-events:none;} /* ⚠ 2026-09-27 本人の指示「iPhone 基準」：**ゲームは常に 390×844 で組み立て、全体を等倍で拡大・縮小**（`--stS`＝game.js の `fitStage`）。 以前は 幅 min(100vw, 高さ×0.62)・高さ 100% で、画面ごとにゾーンの広さが変わり原子の混み具合（手触り）が変わっていた */ /* ⚠ 2026-09-28：`#stage` は safe area の内側に収める（game.js の `fitStage` が left/top と --stS を決める）。 そのため **#stage の中では env(safe-area-inset-*) を使わない**（二重に空く。以前の 5 か所は 0px にした） */ #stage{position:absolute;left:50%;top:50%;width:390px;height:844px; transform:translate(-50%,-50%) scale(var(--stS,1));transform-origin:50% 50%; box-shadow:0 0 90px rgba(90,160,255,.10);overflow:hidden;} #cv{position:absolute;inset:0;display:block;touch-action:none;} /* 背景の絵の層（2026-10-05 発熱対策）。game.js `drawBackground` が絵を 1 回だけ描き、うねりは transform で動かす（描き直さない） */ #cvBg{position:absolute;left:0;top:0;display:none;pointer-events:none;transform-origin:0 0;will-change:transform;} /* ホームバーの帯（2026-09-29）：下のメニューが出ている画面だけ、メニューと同じ色で埋めて切れて見えないように */ #safeBot{position:absolute;left:0;right:0;bottom:0;height:var(--safeBpx,0px);background:rgb(4,8,16);display:none;pointer-events:none;} #app.navOn #safeBot{display:block;} #vignette{position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 38%,rgba(0,0,0,.62) 92%);} /* ---------- HUD（設計図のレイアウト） ---------- */ #hud{position:absolute;inset:0;pointer-events:none;} #cvTop{position:absolute;inset:0;z-index:8;pointer-events:none;} /* HUD・上バー・下バーより前（バーストの見出しと数字。2026-09-23 本人の指示で 6 → 8） */ #hud.hasExit #targetName,#stage.noChar #hud.v2.hasExit #targetName{display:none !important;} /* 耐久の EXIT は上中央＝名前の札と同じ場所（新配置の !important に勝つ） */ #hud > *{position:absolute;} #stageLabel,#targetName{top:1.2%;white-space:nowrap; background:rgba(10,17,29,.82); border:1px solid rgba(122,215,255,.40);border-radius:7px;padding:4px 11px; box-shadow:0 2px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10);} /* STAGE 1-1 ―― 太く傾いた欧文で見出しらしく */ #stageLabel{font-family:Impact,"Haettenschweiler","Arial Narrow Bold","Arial Black","Hiragino Sans","Noto Sans JP", "Helvetica Neue",sans-serif; font-size:17px;font-weight:900;font-style:italic;letter-spacing:.06em; color:#eaf4ff;text-shadow:0 0 14px rgba(122,215,255,.65),0 2px 0 rgba(0,0,0,.5); -webkit-text-stroke:.4px rgba(160,215,255,.5);} #targetName{font-size:12px;font-weight:800;letter-spacing:.12em;color:#eaf4ff; text-shadow:0 0 10px rgba(122,215,255,.5);} /* ポーズ */ #pauseBtn{position:absolute;z-index:7;top:1.2%;right:8px;width:34px;height:30px; display:flex;align-items:center;justify-content:center;gap:4px; background:rgba(10,17,29,.82); border:1px solid rgba(122,215,255,.40);border-radius:7px;cursor:pointer; pointer-events:auto;box-shadow:0 2px 14px rgba(0,0,0,.5);} #pauseBtn span{display:block;width:4px;height:14px;border-radius:1.5px; background:linear-gradient(180deg,#7ad7ff,#8f9bff);} #pauseBtn:active{transform:scale(.94);} #pauseBtn.hidden{display:none !important;} #menu{position:absolute;inset:0;z-index:12;display:flex;align-items:center; justify-content:center;background:rgba(3,6,12,.72);backdrop-filter:blur(4px); pointer-events:auto;} #menu .mPanel{width:min(78%,260px);background:rgba(10,16,28,.96); border:1px solid rgba(122,215,255,.28);border-radius:14px;padding:16px 14px; box-shadow:0 18px 60px rgba(0,0,0,.6);} .mTitle{font-family:Impact,"Arial Black","Helvetica Neue","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic; font-size:19px;letter-spacing:.14em;color:#cfe6ff;text-align:center;margin-bottom:12px; text-shadow:0 0 14px rgba(122,215,255,.5);} /* プレイ中に ⏸ を押したときだけ出る情報（上バーの内容を写したもの・2026-09-06） */ .mInfo{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px; margin:-4px 0 12px;padding:8px 6px;border-radius:9px; background:rgba(6,11,20,.7);border:1px solid rgba(122,215,255,.16); font-size:10px;color:#8ba0b8;} .mInfo.hidden{display:none !important;} .mInfo b{font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic; font-variant-numeric:tabular-nums;font-size:13px;color:#eaf6ff;margin:0 2px;} .mInfo span:first-child b{font-size:16px;text-shadow:0 0 12px rgba(122,215,255,.6);} .mInfo span:last-child b{color:#ffd84a;text-shadow:0 0 10px rgba(255,216,74,.45);} .mBtn{display:flex;width:100%;align-items:center;justify-content:space-between; padding:11px 13px;margin-bottom:8px;border:1px solid rgba(122,215,255,.22); border-radius:9px;background:rgba(20,32,52,.9);color:var(--ink); font-size:13px;font-weight:700;cursor:pointer;} .mBtn b{font-size:11px;color:#7ad7ff;font-weight:800;letter-spacing:.08em;} .mBtn:disabled{opacity:.45;cursor:default;} .mBtn:not(:disabled):active{transform:scale(.98);} .mResume{width:100%;margin-top:6px;padding:12px;border:0;border-radius:999px; background:linear-gradient(90deg,#7ad7ff,#b6a2ff);color:#04060a; font-size:13px;font-weight:800;letter-spacing:.16em;cursor:pointer;} .mResume:active{transform:scale(.97);} /* オプション（2026-09-28） */ #menu .mPanel.hidden{display:none;} .oRow{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:13px;font-weight:700;color:var(--ink);} .oRow > span{flex:0 0 44px;} .oRow input[type=range]{flex:1;accent-color:#7ad7ff;height:24px;} .oRow > b{flex:0 0 30px;text-align:right;font-family:Impact,"Arial Black",sans-serif;font-style:italic;font-size:15px;color:#eaf6ff;} .oSeg{flex:1;display:flex;border:1px solid rgba(122,215,255,.3);border-radius:9px;overflow:hidden;} .oSeg button{flex:1;padding:9px 0;border:0;background:rgba(20,32,52,.9);color:#8ba0b8;font-size:13px;font-weight:800;cursor:pointer;} .oSeg button.on{background:linear-gradient(90deg,#7ad7ff,#b6a2ff);color:#04060a;} .oNote{margin:-6px 0 14px;font-size:10px;color:#7b8ba3;line-height:1.5;} #charBox{display:flex;align-items:center;justify-content:center;text-align:center; border:1px dashed rgba(122,215,255,.28);border-radius:10px; background:rgba(12,20,34,.35);color:#6f86a3;} #charBox span{font-size:11px;font-weight:700;letter-spacing:.08em;color:#6f86a3;line-height:1.7;} /* キャラクター（リョウコ）の立ち絵は**キャンバス側**が描く（game.drawCharacter）。 不思議な玉をキャラより手前に出すため、HUD の DOM では持たない。 ここは読み込めたときに枠と文字を消すだけ。 */ /* 立ち絵が出ているあいだは枠線と下地を消す */ #charBox.hasChar{border-color:transparent;background:none;} #charBox.hasChar span{display:none;} .gauges{display:flex;flex-direction:column;justify-content:center;gap:7px;} .ge{display:grid;grid-template-columns:18px 1fr;grid-template-rows:auto auto; column-gap:5px;row-gap:2px;align-items:center;} .geIcon{grid-row:1 / span 2;width:15px;height:15px;border-radius:50%; border:2px solid #fff;box-sizing:border-box;} .geNum{display:flex;align-items:baseline;gap:2px;line-height:1;white-space:nowrap;} .geNum b{font-size:14px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums; text-shadow:0 0 12px rgba(140,200,255,.5);} .geNum i{font-style:normal;font-size:11px;color:#8ba0b8;font-variant-numeric:tabular-nums;} /* 消化率は「あとどれだけか」を見る一番の手がかりなので、 2026-09-05 に 12px → 16px へ上げて色も明るくした（本人の指示で強調）。 */ .geNum .gePct{margin-left:auto;padding-left:6px;font-size:16px;font-weight:900;color:#eaf6ff; font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(140,200,255,.55);} .geBar{position:relative;height:6px;border-radius:3px; background:rgba(255,255,255,.10);overflow:hidden;} .geBar > i{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0); transition:transform .18s ease-out;} /* ⚠ `> i`：新配置では帯の中に数字の も入る（2026-09-19） */ .ge.done .geNum b,.ge.done .geNum .gePct{color:#7dffb0;} /* まだ足りない色の警告 */ .ge.urge{animation:urge .7s ease-in-out infinite;} .ge.urge .geNum b,.ge.urge .geNum i,.ge.urge .geNum .gePct{color:#ff5d78;} /* .ge.urge .geIcon の赤は 2026-10-03 本人の指示で削除（◯ は元の色のまま） */ .ge.urge .geBar{background:rgba(255,93,120,.18);} @keyframes urge{0%,100%{opacity:1}50%{opacity:.42}} #combo{left:50%;top:62%;transform:translate(-50%,-50%); font-weight:900;color:#fff;text-shadow:0 0 26px rgba(122,215,255,.9);pointer-events:none;} /* 通常のコンボは重要度が低いので、出したらすぐ消す */ #combo.pop{animation:comboPop .5s ease-out forwards;} @keyframes comboPop{ 0%{transform:translate(-50%,-50%) scale(.4);opacity:0} 20%{transform:translate(-50%,-50%) scale(1.15);opacity:1} 40%{transform:translate(-50%,-50%) scale(1);opacity:.95} 100%{transform:translate(-50%,-50%) scale(1.25);opacity:0}} /* ---------- 画面（タイトル / ホーム / ステージ選択） ---------- */ .screen{position:absolute;inset:0;z-index:5;pointer-events:auto; display:flex;flex-direction:column;align-items:center; background:radial-gradient(circle at 50% 40%,rgba(8,14,26,.72),rgba(3,5,9,.93)); backdrop-filter:blur(3px);} .screen.hidden{display:none !important;} .hidden{display:none !important;} /* ⚠ **ボタンは font-family を継承しない。**（2026-09-06） ブラウザの既定で `button` は Arial などの欧文フォントになる。Arial には漢字が無いので 1文字ずつ別のフォントへ落ち、**同じ行の中で「穣」だけ別の書体になって化けて見えた** （ステージ選択の 10-4「2.4穣原子」／10-5「10穣原子」で本人が発見）。 `.sBtn` `.navBtn` `.mBtn` `.shItem` `.pSlot` などは全部 button なので、まとめて継がせる。 ⚠ 個別に Impact を指定している所も、Impact / Arial Black に漢字が無いので 日本語フォントを**必ずスタックの後ろに足しておくこと**。 */ button, input, select, textarea { font-family: inherit; } .hLogo{font-family:Impact,"Arial Black","Helvetica Neue","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic; letter-spacing:.12em;background:linear-gradient(90deg,#7ad7ff,#b6a2ff,#7dffb0); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 26px rgba(122,215,255,.4));} /* ---------- 起動時の会社ロゴ（2026-09-05） ---------- 白背景 → ロゴがフェードイン → 1秒そのまま → 白ごと消えてタイトル。 ⚠ 一番手前（z-index 40）に出し、**クリックは通さない**。 通すと出ている間にタップできてしまい、タイトルを飛ばしてホームへ行く。 秒数は config.js の SPLASH。main.js が CSS 変数にして入れる。 */ #splash{position:absolute;inset:0;z-index:40;background:var(--spBg,#fff); display:flex;align-items:center;justify-content:center;cursor:pointer; transition:opacity var(--spOut,.5s) ease;} /* 消えかけの間はタップを通さない。通すと下のタイトルが反応してホームへ飛ぶ */ #splash.gone{pointer-events:none;} /* 高さ合わせ＝要素の枠が絵とぴったり重なるので、trim が絵の端をそのまま削れる。 絵のほうが横長になったときだけ max-width で収める。 */ #splash img{height:100%;width:auto;max-width:100%;object-fit:contain; clip-path:inset(0 var(--spTrim,0%) 0 0);opacity:0;} /* ⚠ フェードインは**絵が読み終わってから**始める（main.js が .in を付ける）。 最初から animation を書くと読み込み中に時間だけ進んでしまい、 絵が届いた瞬間に opacity 1 でパッと出る（実測：アニメの開始は起動と同時だった）。 */ #splash img.in{animation:spIn var(--spIn,.6s) ease-out forwards;} @keyframes spIn{from{opacity:0}to{opacity:1}} #splash.gone{opacity:0;} #splash img{pointer-events:none;} /* タップは常に #splash 側で受ける */ /* 読み込み中／タップの案内（2026-09-28 スマホ：読み込み前に進めて画面が崩れた・タイトルの音が鳴らない） */ #splashHint{position:absolute;left:0;right:0;bottom:12%;text-align:center; font:800 13px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.3em;color:#8a96a8;opacity:0;transition:opacity .3s;} #splashHint.on{opacity:1;} #splashHint.tap{color:#2a3a52;animation:spHint 1.2s ease-in-out infinite;} /* 読み込みの画面（2026-09-28）。ロゴの時間が終わってもまだ読み込み中のときだけ出る（ロゴには被せない） */ #splashLoad{position:absolute;inset:0;background:#04060a;opacity:0;pointer-events:none;transition:opacity .4s;} #splashLoad.on{opacity:1;} #splashLoad canvas{position:absolute;inset:0;width:100%;height:100%;} #splashLoad .slPct{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center; font:italic 900 34px Impact,"Arial Black",sans-serif;color:#eaf6ff;letter-spacing:.02em; text-shadow:0 0 14px rgba(122,215,255,.6),0 2px 0 rgba(0,0,0,.6);} #splashLoad .slTxt{position:absolute;left:0;right:0;top:calc(50% + 120px);text-align:center;font-style:normal; font:800 15px "Helvetica Neue",Arial,sans-serif;letter-spacing:.24em;color:#9fd0ff;animation:slBlink 2.4s ease-in-out infinite;} #splashLoad .slTxt.tap{color:#eaf6ff;} @keyframes slBlink{0%,100%{opacity:1}50%{opacity:.25}} @keyframes spHint{50%{opacity:.35}} /* ---------- タイトル（2026-09-05／2026-09-18 作り直し） ---------- 2026-09-18 から背景は `title_back_ground2`（ロゴが描かれていない絵）。 **ロゴは文字で置く**（`#tLogo`。旧 title_back_ground.png のロゴを真似た）。 背景は `::before` に貼って**ゆっくり寄っては戻る**（tZoom）。ロゴは寄らない。 数値は config.js の TITLE（絵のパス）と CONFIG.title（TUNE「タイトル画面」）。 CSS 変数 --tLogoY / --tLogoS / --tZoom / --tZoomS / --tDim は applyFaceCss() が入れる。 */ #screenTitle{background:#04060a;backdrop-filter:none;justify-content:flex-end;overflow:hidden;} #screenTitle::before{content:'';position:absolute;inset:0;z-index:0; background:var(--tBg,#04060a) center center/cover no-repeat,#04060a; transform-origin:50% 50%; animation:tZoom var(--tZoomS,36s) ease-in-out infinite alternate;} #screenTitle::after{content:'';position:absolute;inset:0;z-index:0; background:rgba(2,4,10,var(--tDim,0));pointer-events:none;} @keyframes tZoom{from{transform:scale(1)}to{transform:scale(var(--tZoom,1.1))}} /* ロゴ。白い明朝の DPAP に紫の光、線で挟んだカナ、英題。全体を --tLogoS で拡縮 */ #tLogo{position:absolute;z-index:1;left:50%;top:var(--tLogoY,50%); transform:translate(-50%,-50%) scale(var(--tLogoS,1)); width:100%;text-align:center;pointer-events:none;user-select:none; font-family:"Palatino Linotype",Palatino,"Book Antiqua","Times New Roman", "Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; color:#fff; /* 後ろの絵が明るいので、ロゴの周りだけ少し落として文字を立たせる */ filter:drop-shadow(0 0 22px rgba(3,4,14,.9));} #tLogo .tMain{font-size:113px;line-height:.95;letter-spacing:.02em;font-weight:400; text-shadow:0 0 10px rgba(255,255,255,.55),0 0 28px rgba(190,140,255,.85), 0 0 64px rgba(140,80,255,.7),0 2px 6px rgba(0,0,0,.8);} #tLogo .tKana{display:flex;align-items:center;gap:.6em;margin:.02em auto 0;width:88%; font-size:22px;letter-spacing:.32em;font-weight:500; text-shadow:0 0 8px rgba(190,140,255,.9),0 0 22px rgba(140,80,255,.6),0 1px 4px rgba(0,0,0,.9);} #tLogo .tKana::before,#tLogo .tKana::after{content:'';flex:1;height:1.5px; background:linear-gradient(90deg,transparent,#e6d8ff 25%,#e6d8ff 75%,transparent); box-shadow:0 0 8px rgba(190,140,255,.9);} #tLogo .tKana span{white-space:nowrap;padding-left:.32em;} /* letter-spacing の右の余りぶん左にも */ #tLogo .tSub{margin-top:.25em;font-size:20px;letter-spacing:.05em;font-weight:400; text-shadow:0 0 8px rgba(190,140,255,.9),0 0 22px rgba(140,80,255,.6),0 1px 4px rgba(0,0,0,.9);} #tChar{position:absolute;left:50%;top:var(--tcTop,30%);width:var(--tcW,84%); pointer-events:none;user-select:none; /* ⚠ 元絵は**マントが左右の端で、脚が下の端で切れている**（実測：左302行・右288行が端に接する）。 そのままだと直線でスパッと切れて安っぽいので、ゲーム画面の fade / fadeSide と同じように 下端と左右をだんだん消す。縦と横の2枚を intersect で掛け合わせる。 */ -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - var(--tcFade,14%)),transparent 100%), linear-gradient(90deg,transparent 0,#000 var(--tcFadeX,9%), #000 calc(100% - var(--tcFadeX,9%)),transparent 100%); mask-image:linear-gradient(180deg,#000 calc(100% - var(--tcFade,14%)),transparent 100%), linear-gradient(90deg,transparent 0,#000 var(--tcFadeX,9%), #000 calc(100% - var(--tcFadeX,9%)),transparent 100%); -webkit-mask-composite:source-in; /* Safari 用。標準の intersect と同じ意味 */ mask-composite:intersect; /* ゆっくり上下＋静かな濃淡。周期をわざとずらして、繰り返しに気づきにくくしている */ animation:tFloat var(--tcFloatS,5.5s) ease-in-out infinite, tBlink var(--tcBlinkS,4.2s) ease-in-out infinite;} @keyframes tFloat{0%,100%{transform:translate(-50%,calc(var(--tcAmp,.9%) * -1))} 50%{transform:translate(-50%,var(--tcAmp,.9%))}} @keyframes tBlink{0%,100%{opacity:var(--tcMin,.66)}50%{opacity:var(--tcMax,1)}} /* 2026-09-28 本人の指示：ロゴの下あたりへ上げた（下の端から 7% → 画面の上から約 545px。ロゴの下端は 506px） */ .tHint{position:relative;z-index:1;margin-bottom:245px; /* 273 → 245（2026-09-29 本人「あと少しだけ下げて」） */ font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif; font-style:italic;font-size:21px;letter-spacing:.2em;color:#cfe6ff; text-shadow:0 0 14px rgba(4,8,16,.95),0 0 30px rgba(4,8,16,.8); animation:blink 1.8s ease-in-out infinite;} @keyframes blink{0%,100%{opacity:.35}50%{opacity:1}} @media (prefers-reduced-motion:reduce){ #tChar{animation:none;transform:translateX(-50%);} #screenTitle::before{animation:none;} .tHint{animation:none;} } /* ---------- ホーム（2026-09-05／本人のラフに合わせて作り直し） ---------- 上＝インフォメーション＋≡、中＝立ち絵、下＝メニューの並び。 重なりは 立ち絵 → 上のバー → 下のメニュー の順。足元はメニューに隠れてよい。 */ /* ホーム画面の背景（2026-09-06）。絵と暗さは main.js が config の HOME.bg から入れる。 ⚠ 絵は 941x1672（比 0.563）で画面より縦長なので、タイトルと同じく **top 合わせ**にして 下だけ切る。中央合わせにすると上が切れる。 ⚠ 暗くするのは絵の上に重ねる黒（--hBgDim）で、`.screen` の blur は残してある。 立ち絵とメニューを浮かせるため。 */ /* ========================================================= 常設の上バー／下バー（2026-09-06 本人の指示画像） ゲーム画面とリザルト以外では常に出す。z-index は画面(5)より上、リザルト(6)より下。 ========================================================= */ /* ⚠ z-index は **7**。画面（.screen ＝ 5）より手前に出さないと、 あとから書かれている画面に隠れる（同じ 5 だと DOM の順で負ける）。 リザルト（6）とメニュー（8）の間だが、バーはリザルト中には出さないので当たらない。 ⏸（7）はバーが出ている画面では隠しているので重ならない。 */ #topBar{position:absolute;left:0;right:0;top:0;z-index:7; display:flex;align-items:flex-start;gap:8px;padding:7px 8px 8px 12px; background:linear-gradient(180deg,rgba(4,8,16,.92),rgba(4,8,16,.55) 78%,transparent); pointer-events:auto;} #topBar.hidden{display:none !important;} /* 2026-09-06（本人の指示で組み直し） 左上 … **レベルを大きく**、その下に滞在ステージ 右 … 次のLvまで／所持ポイントを**右詰めで縦に揃える** ⚠ 画面の名前はここから外した。下バーが今いる画面を光らせているので重複するため。 戻したくなったら `.tbL` に1行足すだけでよい。 */ .tbL{flex:0 0 auto;display:flex;flex-direction:column;gap:0;} .tbL .tbLv{font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic; font-size:24px;line-height:1.0;color:#eaf6ff;font-variant-numeric:tabular-nums; text-shadow:0 0 16px rgba(122,215,255,.7);} /* ⚠ 滞在場面（HOME / STAGE 3-2 …）は **2026-09-07 に本人の指示で少し大きく**した （10px → 13px）。Lv の下で読みづらかったため。色も少し上げてある。 */ .tbStage{font-size:13px;font-weight:800;letter-spacing:.06em;color:#9fb6cf; line-height:1.25;white-space:nowrap;} /* インフォメーション（2026-09-07 本人の指示）。 レベルと「次のLv」のあいだ。小さな文字が**右から左へ流れる**。 ⚠ **実績専用ではない。**今後いろいろな情報をここに流す（ui.js の infoPush）。 ⚠ 流す時間は文字数で決める（`--infoSec`／ui.js の infoNext）。 短い行を同じ秒数で流すと猛烈に速くなって読めない。 */ .tbInfo{flex:1 1 auto;min-width:0;align-self:center;overflow:hidden; height:15px;line-height:15px;position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);} .tbInfo i{position:absolute;left:0;top:0;white-space:nowrap;font-style:normal; font-size:10px;font-weight:700;letter-spacing:.02em;color:#9fd8ff; will-change:transform; animation:infoFlow var(--infoSec,14s) linear infinite;} @keyframes infoFlow{from{transform:translateX(100%)}to{transform:translateX(-100%)}} @media (prefers-reduced-motion:reduce){ .tbInfo i{animation:none;transform:none;overflow:hidden;text-overflow:ellipsis; max-width:100%;position:static;display:block;}} /* 右側。2行とも**右詰め**。数字の右端が縦に揃う。 ⚠ 幅はインフォメーションに譲るので `flex:0 0 auto`。 */ .tbR{flex:0 0 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-end; gap:1px;font-size:10px;color:#8ba0b8;white-space:nowrap;overflow:hidden;} .tbR span{display:block;} .tbR b{font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic; font-variant-numeric:tabular-nums;margin:0 2px;} .tbR .tbNext{font-size:14px;color:#cfe6ff;} .tbR .tbPt{font-size:14px;color:#ffd84a;text-shadow:0 0 10px rgba(255,216,74,.45);} .hMenu{flex:0 0 auto;align-self:center;width:34px;height:30px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:4px;background:rgba(10,17,29,.82); border:1px solid rgba(122,215,255,.40);border-radius:7px;cursor:pointer;} .hMenu i{display:block;width:16px;height:2px;border-radius:1px; background:linear-gradient(90deg,#7ad7ff,#8f9bff);} .hMenu:active{transform:scale(.94);} /* 下バー。5項目を等分。アイコンは仮（本人が改めて制作する予定） */ #navBar{position:absolute;left:0;right:0;bottom:0;z-index:7;display:flex;gap:4px; padding:7px 6px calc(7px + 0px); background:linear-gradient(0deg,rgba(4,8,16,.96),rgba(4,8,16,.80) 60%,transparent); pointer-events:auto;} #navBar.hidden{display:none !important;} /* ⚠ 2026-09-07 に「実績」が増えて**6つ**になった。320px 幅で「ステータス」が 切れたので、字と余白を少しだけ詰めてある。項目を7つに増やすときは `#navBar` の gap と合わせてここを測り直すこと。 */ .navBtn{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:2px;padding:5px 1px;border-radius:10px;cursor:pointer; border:1px solid rgba(122,215,255,.22);background:rgba(14,23,39,.90);color:#9fb6cf;} .navBtn u{text-decoration:none;font-size:17px;line-height:1;position:relative;} /* 赤い丸（2026-09-07 本人の指示）。**受け取っていない実績があるときだけ**出る。 アイコンの右上。数は ui.js の syncNavBadge が入れる。 */ .navBtn .badge{position:absolute;top:-5px;right:-9px;min-width:15px;height:15px; padding:0 4px;border-radius:99px;font-style:normal;font-size:9px;font-weight:900; line-height:15px;text-align:center;color:#fff;background:#ff3b52; border:1px solid rgba(255,255,255,.8);box-shadow:0 0 10px rgba(255,59,82,.85); animation:badgePulse 1.9s ease-in-out infinite;} .navBtn .badge.hidden{display:none !important;} @keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}} @media (prefers-reduced-motion:reduce){.navBtn .badge{animation:none}} /* 文字（2026-09-07 に作り直し）。**絵の中の文字は 40px では読めなかった**ので、 5つは絵の文字の帯を落として、ここで読める大きさの文字を出している。 彫り込んだ金属に見えるよう、上に明るい線・下に影を1pxずつ置く。 大きさは `--navLb`（config.js の `NAV_ICON.label`）。狭い画面では JS が少し縮める。 */ .navBtn span{font-size:var(--navLb,10px);font-weight:800;letter-spacing:-.02em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%; color:#c6d6e8;line-height:1.15; text-shadow:0 1px 0 rgba(255,255,255,.12), 0 -1px 0 rgba(0,0,0,.9);} /* ---------- アイコンの絵（2026-09-07 本人が制作） ---------- `icon/nav_.png`。**絵の中に文字が入っている**ので、下の文字は既定で出さない （`NAV_ICON.showLabel`）。大きさは `--navIc`（config.js の `NAV_ICON.size`）。 ⚠ 正方形に揃えて書き出してあるので、ここでは box を正方形にするだけでよい。 */ #navBar{--navIc:30px;--navTall:42px;--navLb:10px;} /* ⚠ **HOME だけ絵に文字が入っている**（本人の指示でそのまま使う）。 文字を出さないかわりに、**文字のぶんまで使って大きく**出す＝ ほかの5つの「絵＋文字」と同じ高さになり、バーの並びが揃う。 */ .navBtn.tall .navIc{width:var(--navTall);height:var(--navTall);} /* 2代目のアイコン（2026-09-16）は6つとも文字入りの丸なので、上下の余白を詰めて 絵を 50px まで大きくしてある（バーの高さは 70px のまま＝ 7+7 ＋ 2+50+2 ＋枠2）。 */ .navBtn.tall{padding:2px 1px;gap:0;} .navBtn .navIc{display:block;width:var(--navIc);height:var(--navIc);object-fit:contain; /* ふだんは**少し浮いて見える**ように、下に影を落とす */ filter:drop-shadow(0 1px 1px rgba(0,0,0,.65)); transition:transform .10s ease, filter .10s ease;} /* ---------- 押した／選んでいるときは「凹む」（2026-09-07 本人の指示） ---------- 絵そのものを**下へ沈めて・少し縮めて・暗くする**。同時にボタンの枠に 内側の影を入れて、**バーにはまり込んだ**ように見せる。 ⚠ 暗くするだけだと「使えない」に見えるので、**縁は水色に光らせたまま**にしてある。 */ .navBtn:active{transform:none;} /* 全体を縮めるのはやめて、中身で凹ませる */ /* ⚠ **押している最中**と**選んでいる状態**で沈み具合を変えてある。 押している間は深く（一瞬なので強くてよい）、選んでいる状態は浅く （ずっと出ているので、暗くしすぎると「使えない」に見える）。 */ .navBtn.on span{color:#eaf6ff;transform:translateY(1px); text-shadow:0 0 8px rgba(122,215,255,.75), 0 -1px 0 rgba(0,0,0,.9);} .navBtn:active span{transform:translateY(2px);} .navBtn.on .navIc{transform:translateY(2px) scale(.93); filter:brightness(.74) saturate(.9) contrast(1.05) drop-shadow(0 -1px 0 rgba(255,255,255,.16));} .navBtn:active .navIc{transform:translateY(3px) scale(.90); filter:brightness(.62) saturate(.82) contrast(1.08) drop-shadow(0 -1px 0 rgba(255,255,255,.18));} .navBtn:active{border-color:rgba(122,215,255,.5); background:linear-gradient(180deg,rgba(4,8,16,.98),rgba(12,20,34,.92)); box-shadow:inset 0 4px 8px rgba(0,0,0,.75), inset 0 -1px 0 rgba(255,255,255,.05);} .navBtn.on{border-color:rgba(122,215,255,.7);color:#eaf6ff; /* 選んでいる項目＝**押し込まれたまま**。上が暗く、下にわずかな返り光 */ background:linear-gradient(180deg,rgba(6,11,20,.98),rgba(18,32,54,.94)); box-shadow:inset 0 5px 10px rgba(0,0,0,.78), inset 0 -1px 0 rgba(255,255,255,.06), 0 0 12px rgba(122,215,255,.22);} .navBtn.on u{text-shadow:0 0 12px rgba(122,215,255,.8);} /* 赤い丸だけは凹みに巻き込まない（沈むと読みにくいため） */ .navBtn .badge{transform-origin:center;} @media (prefers-reduced-motion:reduce){.navBtn .navIc{transition:none}} /* バーがある画面は、中身が隠れないように上下を空ける */ /* ⚠ 2026-09-07 に下バーが**絵＋文字**になって 66px → 70px に高くなった。 ここを直さないと、画面の一番下の中身がバーの裏に隠れる。 */ #stage.navOn .screen{padding-top:54px;padding-bottom:76px;} /* ⚠ TUNE（デバッグ用）は**ホームの EXTRA ボタンと重なる**ので、その上へ逃がす （2026-09-07）。ショップの品物とも重なりにくくなる。 */ /* ホームの並びボタンは下から 78px の位置に 78px の高さで出るので、 TUNE はその**上**（78+78=156 より上）へ逃がす。 */ #stage.navOn #tuneBtn{bottom:168px;} #stage.navOn #pauseBtn{display:none;} /* ========================================================= ホーム（2026-09-06 本人の指示画像） 立ち絵を左へ大きく、右上に名前と取得スキル、中央下に「続きから」。 ========================================================= */ #screenHome{justify-content:flex-start;background:none;backdrop-filter:none; overflow:hidden;padding:0 !important;} /* 背景と立ち絵は枠いっぱいに敷くので padding を外す */ /* 背景（2026-09-06 に本人の指示で作り直し）。 絵が **2229x1237 の横長**（`home_background2`）になったので、 **縦を画面に合わせて、余った横をゆっくり流す**。 `background-size: auto 100%` で縦が画面ぴったり、横は画面の約3倍はみ出す。 ⚠ 折り返しで止まって見えないよう ease-in-out の alternate にしてある。 ⚠ 動かしているのは `background-position-x` の 0%（左端合わせ）〜100%（右端合わせ）。 はみ出したぶんをちょうど端から端まで流す。絵の横幅が変わっても自動で合う。 */ .hBg{position:absolute;inset:0;z-index:0;background-image:var(--hBg,none); background-size:auto 100%;background-position:0% center;background-repeat:no-repeat; animation:hbgSlide var(--hBgSec,64s) ease-in-out infinite alternate;} .hBg::after{content:"";position:absolute;inset:0; background:rgba(3,5,9,var(--hBgDim,.58));} @keyframes hbgSlide{from{background-position-x:0%} to{background-position-x:100%}} /* 白い背景（2026-09-18 本人の指示）。絵と暗幕を使わず、原子だけが漂う。 2026-09-19：ホームだけでなく **ステージ選択／ステータス／スキル／実績も同じ**（本人の指示）。 白と原子は画面の外（`#wBg`・z 4）に1つだけ置き、白い画面（`.screen.white`）は背景を透明にする */ #screenHome.white .hBg{display:none;} #wBg{position:absolute;inset:0;z-index:4;background:#fff;pointer-events:none;} #wBg.hidden{display:none !important;} #wBg canvas{position:absolute;inset:0;width:100%;height:100%;} /* ホームだけの背景の絵（home_bg4。2026-09-19 本人制作）。かなりゆっくり拡大縮小。原子より後ろ */ #wBg .wPic{position:absolute;inset:0;background:var(--wPic,none) center/cover no-repeat;display:none; transform-origin:50% 50%;animation:wPicZoom var(--wPicSec,40s) ease-in-out infinite alternate;} #wBg.home .wPic{display:block;} @keyframes wPicZoom{from{transform:scale(1)}to{transform:scale(var(--wPicZoom,1.05))}} @media (prefers-reduced-motion:reduce){#wBg .wPic{animation:none}} .screen.white{background:transparent;backdrop-filter:none;} /* 白い背景のときのボタン。暗い背景用の色だと浮くので、白地に合う縁と影に */ #screenHome.white .hDaily{border-color:rgba(200,150,20,.55); background:linear-gradient(180deg,rgba(255,250,230,.96),rgba(255,240,200,.96)); box-shadow:0 6px 18px rgba(0,0,0,.14);} #screenHome.white .hDaily u{color:#d09a00;} #screenHome.white .hDaily .dTtl{color:#5a4a10;} #screenHome.white .hDaily .dNum{color:#7a6a40;} /* ⚠ `.hStart` に box-shadow を足すと絵のボタン（.img）が四角く光る（2026-09-18 本人が発見）。何も足さない */ @media (prefers-reduced-motion:reduce){.hBg{animation:none}} /* 立ち絵。左へ寄せて大きく。下端はゆるく消してバーへ溶かす */ #hChar{position:absolute;z-index:1;left:50%;bottom:var(--hcBottom,0%); height:var(--hcH,106%);width:auto; transform:translateX(calc(-50% + var(--hcX,-20%))); -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - var(--hcFade,8%)),transparent 100%); mask-image:linear-gradient(180deg,#000 calc(100% - var(--hcFade,8%)),transparent 100%); pointer-events:none;} /* 名前と取得スキル。立ち絵の右上に重ねる */ .hName{position:absolute;z-index:2;right:12px;top:56px;max-width:56%;text-align:right; pointer-events:none;} .hName b{display:block;font-size:22px;font-weight:900;letter-spacing:.10em;color:#f2f8ff; text-shadow:0 0 18px rgba(122,215,255,.65),0 2px 6px rgba(0,0,0,.9);} .hName > span{display:block;font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic; font-size:26px;letter-spacing:.10em;color:#cfe6ff;margin-top:-1px; text-shadow:0 0 20px rgba(122,215,255,.7),0 2px 6px rgba(0,0,0,.9);} .hSkills{margin-top:9px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;} .hSkills em{display:flex;align-items:center;gap:5px;font-style:normal;font-size:11px; font-weight:800;color:#eaf6ff;padding:3px 8px;border-radius:99px; background:rgba(6,11,20,.72);border:1px solid currentColor; text-shadow:0 0 8px rgba(0,0,0,.9);} .hSkills em s{text-decoration:none;font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif; font-style:italic;font-size:11px;opacity:.9;} .hSkills .none{color:#7b8ba3;border-color:rgba(122,215,255,.2);} /* 中央下の「続きから」 */ .hStart{position:absolute;z-index:3;left:50%;bottom:88px;transform:translateX(-50%); min-width:52%;padding:13px 26px;border-radius:14px;cursor:pointer; border:1px solid rgba(255,255,255,.55); background:linear-gradient(180deg,#7ad7ff,#8f9bff);color:#06101f; box-shadow:0 10px 30px rgba(60,120,220,.45), inset 0 1px 0 rgba(255,255,255,.6);} .hStart span{display:block;font-size:17px;font-weight:900;letter-spacing:.06em;} .hStart b{display:block;font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic; font-size:19px;letter-spacing:.06em;color:#0d2440;margin-top:1px;} .hStart:active{transform:translateX(-50%) scale(.98);} /* ステージ選択 */ .sHead{display:flex;align-items:center;justify-content:space-between;width:100%; padding:14px 52px 10px 14px;flex:0 0 auto;} /* 右はポーズボタンのぶん空ける */ .sHead span{font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic;font-size:19px; letter-spacing:.12em;color:#cfe6ff;text-shadow:0 0 16px rgba(122,215,255,.5);} .sHead .sBtns{display:flex;align-items:center;gap:7px;flex:0 0 auto;} #sBack{padding:7px 14px;border:1px solid rgba(122,215,255,.4);border-radius:9px; background:rgba(12,20,34,.92);color:#cfe6ff;font-size:12px;font-weight:800;cursor:pointer;} /* 通常ステージ ⇄ スペシャルステージ の切り替え。 いま出ていない方の名前を出す＝押すとどちらへ行くかが分かる。 */ #sMode{padding:7px 13px;border-radius:9px;background:rgba(12,20,34,.92);cursor:pointer; font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic;font-size:13px; letter-spacing:.08em;border:1px solid;} #sMode.toSpecial{color:#ff6a6a;border-color:rgba(255,106,106,.55); text-shadow:0 0 12px rgba(255,80,80,.55);} #sMode.toNormal{color:#ffd84a;border-color:rgba(255,216,74,.55); text-shadow:0 0 12px rgba(255,200,60,.55);} .sList{flex:1 1 auto;width:100%;overflow-y:auto;padding:0 12px 24px; -webkit-overflow-scrolling:touch;} .sChap{font-size:10px;letter-spacing:.22em;color:#7ad7ff;font-weight:800; margin:14px 2px 7px;} .sBtn{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:9px; width:100%;padding:13px 12px;margin-bottom:7px;border-radius:10px; border:1px solid rgba(122,215,255,.18);background:rgba(10,17,29,.86); color:var(--ink);cursor:pointer;text-align:left;} .sBtn .no{font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic;font-size:17px; color:#cfe6ff;letter-spacing:.03em;} /* 目標物の名前・細胞数・原子数を1行に並べる（2026-09-05 本人の見本に合わせた）。 名前が一番大きく、数字はこのゲームの背骨なのでほぼ同じ大きさで隣に置く。 ⚠ 折り返さない（nowrap）。長い名前で溢れるぶんは ui.js の fitSelectRows() が --nm / --fig を入れて縮める。既定値をここで変えたらあちらの NM / FIG も直すこと。 */ .sBtn .mid{min-width:0;} /* これが無いとグリッドの 1fr が中身ぶん広がる */ .sBtn .info{display:flex;align-items:baseline;flex-wrap:nowrap;gap:0 11px;} .sBtn .nm{font-size:var(--nm,21px);font-weight:800;color:#f2f8ff;letter-spacing:.02em; white-space:nowrap;text-shadow:0 0 12px rgba(122,215,255,.30);} .sBtn .fig{font-size:var(--fig,16px);font-weight:800;color:#9fd8ff; font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap;} .sBtn .fig b{font-weight:900;color:#eaf7ff;font-size:calc(var(--fig,16px) + 1px);} /* 縮めても入らない最後の手段。数字は必ず残し、名前だけ「…」で切る */ .sBtn .info.clip .nm{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;} /* スペシャルの補足文（準備中／解放条件）は今までどおり名前の下に小さく置く */ .sBtn .at{font-size:10px;color:#8ba0b8;font-variant-numeric:tabular-nums; display:block;margin-top:2px;} .sBtn .st{font-size:10px;font-weight:800;letter-spacing:.1em;color:#7dffb0;} .sBtn.cleared{border-color:rgba(125,255,176,.35);} .sBtn.locked{opacity:.34;cursor:default;} .sBtn.locked .st{color:#7b8ba3;} .sBtn:not(.locked):not(.soon):active{transform:scale(.99);background:rgba(20,34,56,.95);} /* スペシャルステージ。本編と見分けがつくように金色寄りにする */ .sBtn.special{border-color:rgba(255,190,107,.34);} .sBtn.special .no{color:#ffbe6b;} .sBtn.special .st{color:#ffbe6b;} .sBtn.special.locked .st{color:#7b8ba3;} .sBtn.soon{cursor:default;} .sBtn.soon:not(.locked){opacity:.62;} /* ---------- tuning ---------- */ #tuneBtn{position:absolute;right:12px;bottom:12px;z-index:6;font-size:10px;letter-spacing:.2em; font-weight:800;color:#9fd8ff;background:rgba(20,30,46,.8);border:1px solid rgba(122,215,255,.3); padding:8px 12px;border-radius:8px;cursor:pointer;} /* ホームは下いっぱいにメニューが並ぶので、TUNE をその上へ逃がす（開発用ボタン） */ #tune{position:absolute;right:0;top:0;bottom:0;width:min(320px,86%);z-index:7; background:rgba(8,12,20,.94);border-left:1px solid rgba(122,215,255,.18); display:flex;flex-direction:column;backdrop-filter:blur(8px);} .thead{display:flex;justify-content:space-between;align-items:center;padding:12px 14px; font-size:12px;font-weight:800;letter-spacing:.1em;border-bottom:1px solid rgba(255,255,255,.08);} .thead button{background:rgba(255,255,255,.07);color:var(--ink);border:0;border-radius:6px; padding:5px 9px;margin-left:6px;font-size:11px;cursor:pointer;} #tuneBody{overflow-y:auto;padding:8px 14px 30px;} .tgrp{font-size:10px;letter-spacing:.2em;color:var(--accent);margin:16px 0 8px;font-weight:800;} .trow{display:grid;grid-template-columns:92px 1fr 42px;align-items:center;gap:8px;margin:7px 0;} .tlabel{font-size:11px;color:#9fb0c6;} .tval{font-size:11px;text-align:right;color:#fff;font-variant-numeric:tabular-nums;} .trow input[type=range]{width:100%;accent-color:#7ad7ff;height:18px;} /* ---------- 組み合わせパターン欄（画面右） ---------- */ #recipes{position:absolute;right:8px;top:74px;width:70px;display:flex;flex-direction:column;gap:9px;} .rcp{background:rgba(10,16,26,.55);border:1px solid rgba(122,215,255,.14);border-radius:9px; padding:5px 5px 6px;transition:border-color .2s,background .2s;} .rcp.hit{animation:rhit .3s ease-out;} @keyframes rhit{0%{transform:scale(1)}35%{transform:scale(1.09); background:rgba(122,215,255,.20)}100%{transform:scale(1)}} .rcp.done{border-color:rgba(125,255,176,.55);background:rgba(20,50,38,.5);} .rIcons{display:flex;align-items:center;justify-content:center;gap:0;height:28px;} .rIcon{display:block;margin:0 -4px;} .rPlus{font-size:10px;color:#7f93ab;font-weight:800;margin:0 -1px;z-index:1;} .rBar{position:relative;height:3px;margin:3px 2px 3px;border-radius:2px; background:rgba(255,255,255,.10);overflow:hidden;} .rBar i{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0); background:linear-gradient(90deg,#7ad7ff,#b6a2ff);transition:transform .18s ease-out;} .rcp.done .rBar i{background:linear-gradient(90deg,#7dffb0,#7ad7ff);} .rNum{font-size:8.5px;text-align:center;color:#93a6bd;font-variant-numeric:tabular-nums; letter-spacing:.01em;white-space:nowrap;overflow:hidden;line-height:1.35;height:12px;} .rcp.done .rNum{color:#7dffb0;font-weight:800;letter-spacing:.06em;} #ovLines b{color:#cfe6ff;} #tuneOut{width:calc(100% - 28px);margin:8px 14px 0;height:96px;font-size:10px;line-height:1.4; background:#05080d;color:#9fd8ff;border:1px solid rgba(122,215,255,.25);border-radius:6px; padding:6px;resize:vertical;font-family:ui-monospace,Menlo,monospace;} /* ---------- リザルト ---------- */ #result{position:absolute;inset:0;z-index:6;pointer-events:auto;} #result.hidden{display:none !important;} #result > *{position:absolute;left:0;right:0;} /* 見出し：白抜き＋青フチ。 ⚠ 左右は 3% ではなく**ポーズボタンぶんの 46px**（右8px＋幅34px＋余白4px）を空ける。 リザルト中も ⏸ を出すようになったので、3% だと見出しの右上角にボタンが重なる。 左右を同じだけ空けているのは、見出しの文字を画面の中央に置いたままにするため。 */ .rHead{top:2%;padding:9px 10px;margin:0 46px;text-align:center;border-radius:11px; background:linear-gradient(180deg,#7ad7ff,#8f9bff); border:1px solid rgba(255,255,255,.55); box-shadow:0 8px 28px rgba(90,150,255,.35), inset 0 1px 0 rgba(255,255,255,.6);} .rStage{font-family:Impact,"Arial Black","Helvetica Neue","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic; font-size:16px;letter-spacing:.05em;color:#06101f;line-height:1.25; text-shadow:0 1px 0 rgba(255,255,255,.4);} .rStage span{font-family:"Helvetica Neue",-apple-system,"Hiragino Sans",sans-serif; font-style:normal;font-weight:800;font-size:14px;letter-spacing:.06em;} .rBig{font-family:Impact,"Arial Black","Helvetica Neue","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic; font-size:26px;letter-spacing:.06em;color:#06101f;margin-top:2px; text-shadow:0 1px 0 rgba(255,255,255,.5);} #result.failed .rHead{background:linear-gradient(180deg,#ffb0c6,#b6a2ff);} /* 失敗時は色ごとの行が並ぶので、枠を上げて行間を詰める */ #result.failed .rStats{top:31%;bottom:auto;padding:12px 16px;} #result.failed .rRow{padding:3px 0;} #result.failed .rRow.sub b{font-size:23px;} #result.failed .rRow span{font-size:14px;} /* 数値の並び */ /* ⚠ クリア側は**下を固定して上へ伸ばす**（2026-09-06）。 獲得経験値・獲得ポイント・LEVEL UP が入って行数が変わるようになったので、 top を決め打ちにすると下のボタンに被る。bottom はボタン（top:81%＋高さ）の少し上。 */ .rStats{top:auto;bottom:21%;margin:0 6%;padding:14px 16px;border-radius:14px; background:rgba(6,11,20,.86);border:1px solid rgba(122,215,255,.20);} /* 行が6〜7本並ぶので、クリア側だけ少し詰める */ #result:not(.failed) .rRow{padding:4px 0;} #result:not(.failed) .rRow b{font-size:30px;} #result:not(.failed) .rRow.sub b{font-size:23px;} .rRow{display:flex;align-items:baseline;justify-content:space-between;gap:10px; padding:5px 0;} .rRow span{font-size:15px;font-weight:800;letter-spacing:.04em;color:#cfe0f2; text-shadow:0 1px 0 rgba(0,0,0,.6);} .rRow b{font-family:Impact,"Arial Black","Helvetica Neue","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic; font-size:34px;line-height:1.05;color:#fff;font-variant-numeric:tabular-nums; letter-spacing:.02em;text-shadow:0 0 18px rgba(140,205,255,.75),0 3px 0 rgba(8,20,60,.85);} .rRow.sub b{font-size:27px;color:#dff0ff;} .rRow .dot{display:inline-block;width:11px;height:11px;border-radius:50%; border:2px solid #fff;box-sizing:border-box;margin-right:6px;vertical-align:-1px;} .rRow.done b{color:#7dffb0;text-shadow:0 0 14px rgba(125,255,176,.7),0 2px 0 rgba(8,40,24,.8);} /* ボタン */ /* ⚠ 2026-09-15 に HOME を足して**3つ並び**になった。間と余白を少し詰め、字も一回り小さく。 */ .rBtns{top:81%;display:flex;gap:8px;justify-content:center;margin:0 5%;} .rBtn{flex:1 1 0;min-width:0;padding:15px 0;border:1px solid rgba(122,215,255,.45);border-radius:12px; background:rgba(12,20,34,.92); color:#cfe6ff;font-family:Impact,"Arial Black","Helvetica Neue","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic; font-size:18px;letter-spacing:.06em;cursor:pointer;white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10); text-shadow:0 0 14px rgba(122,215,255,.5);} .rBtn.primary{background:linear-gradient(180deg,#7ad7ff,#8f9bff);color:#06101f; border-color:rgba(255,255,255,.55); box-shadow:0 8px 24px rgba(90,150,255,.35), inset 0 1px 0 rgba(255,255,255,.6); text-shadow:0 1px 0 rgba(255,255,255,.4);} /* ⚠ **日本語のラベルは Impact の斜体に載らない**（2026-09-11 本人の指示で作った）。 Impact に日本語の字が無いぶん代替の字体へ落ち、そこへブラウザが斜体を 機械的に掛けるので「ホームへ」がにじんで見えていた。 日本語のときは**太いゴシックを立てたまま、字間を広げて**見せる。 ⚠ 判断は JS 側（`mk()` が `.jp` を付ける）。文字を見て決めているので、 日本語のボタンを増やしても手当ては要らない。 */ .rBtn.jp{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP", "Yu Gothic UI","Meiryo",sans-serif; font-style:normal;font-weight:900;font-size:18px;letter-spacing:.22em; text-indent:.22em;} .rBtn:active{transform:scale(.97);} /* ========================================================= 育成まわり（2026-09-06） ステータス／量子スキル／ショップは、それぞれ1つの画面。 色と角丸は既存のUI（.mBtn / .sBtn）に合わせてある。 ========================================================= */ /* ---------- 装備中の量子スキルのアイコン（プレイ中・キャラ枠の下端） ---------- */ #skillIcons{position:absolute;z-index:3;display:flex;gap:5px;pointer-events:none;} #skillIcons i{position:relative;display:flex;align-items:center;justify-content:center; width:20px;height:20px;border-radius:6px;font-style:normal;font-size:12px;font-weight:800; background:rgba(8,14,26,.72);border:1px solid currentColor; box-shadow:0 0 10px rgba(0,0,0,.55);text-shadow:0 0 8px currentColor;} /* スキルのレベル（2026-09-07 本人の指示）。 ⚠ **2桁（Lv10・11）で枠からはみ出していた。**中に収めようとすると読めない大きさに なるので、**右下の角に置いて外へはみ出させ、縁取りで浮かせる**ことにした。 ・`position:absolute` ＝ 枠の中の絵文字の中央寄せに影響しない（今まで数字のぶん左へ寄っていた） ・縁取りは**8方向の影**。`-webkit-text-stroke` は paint-order が効かない環境で 字がつぶれるので使わない。7px の字でも輪郭が残る */ #skillIcons i sub{position:absolute;right:-3px;bottom:-3px; margin:0;padding:0 1px;font-size:7px;font-weight:900;line-height:1; vertical-align:baseline;opacity:1;color:#eaf6ff;letter-spacing:-.02em; text-shadow:-1px -1px 0 rgba(4,8,16,.95), 1px -1px 0 rgba(4,8,16,.95), -1px 1px 0 rgba(4,8,16,.95), 1px 1px 0 rgba(4,8,16,.95), 0 0 4px rgba(4,8,16,.95);} /* ---------- ステータス／量子スキルの画面（2026-09-06 に共用パネルから移した） ---------- 下バーの選択項目になったので、他の画面と同じ「1画面」として出す。 中身の組み立て（.pLv / .pRow / .pSlot）はパネルのときのまま使い回している。 */ .pBody{flex:1 1 auto;width:100%;overflow-y:auto;padding:6px 14px 16px; -webkit-overflow-scrolling:touch;} #screenStatus{justify-content:flex-start;} /* スキル画面（2026-09-06 本人の指示）。 背景に prayer の立ち絵を薄く敷き、**中身は画面の真ん中から下**に出す。 隠れているぶんはその枠の中でスクロールして読める。 */ #screenSkill{justify-content:flex-start;padding:0 !important;overflow:hidden;} /* 立ち絵の中央に置く**弱め・大きめの放射状の光**（2026-09-06 本人の指示）。 量子を少しだけ目立たせるためのもので、輪郭は出さない。絵より後ろ（z-index 0）。 */ .skGlow{position:absolute;left:50%;top:26%;width:150%;aspect-ratio:1;z-index:0; transform:translate(-50%,-50%);pointer-events:none; background:radial-gradient(circle, rgba(190,225,255,.34) 0%, rgba(150,200,255,.20) 26%, rgba(110,160,235,.09) 50%, rgba(90,140,220,0) 72%);} /* 立ち絵の**手のところ**に置く強い光（2026-09-06 本人の指示）。 ツリーが多少見えにくくなってもよい、とのことなので絵より前（z-index 1）に出す。 位置は `--skHandY`（画面の高さに対する割合）。立ち絵を差し替えたら取り直す。 */ .skHand{position:absolute;left:50%;top:var(--skHandY,23%);width:64%;aspect-ratio:1;z-index:1; transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen; background:radial-gradient(circle, rgba(255,255,255,.92) 0%, rgba(210,235,255,.62) 9%, rgba(150,200,255,.34) 20%, rgba(110,165,240,.15) 38%, rgba(90,140,220,0) 62%); animation:skHandPulse 3.4s ease-in-out infinite alternate;} @keyframes skHandPulse{from{opacity:.85;transform:translate(-50%,-50%) scale(.96)} to{opacity:1;transform:translate(-50%,-50%) scale(1.05)}} @media (prefers-reduced-motion:reduce){.skHand{animation:none}} .skBg{position:absolute;left:50%;top:0;height:100%;width:auto;transform:translateX(-50%); opacity:var(--skOp,.20); /* 80%透過（本人の指示） */ pointer-events:none;z-index:0; -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 96%); mask-image:linear-gradient(180deg,#000 62%,transparent 96%);} #screenSkill .pBody{position:absolute;left:0;right:0;top:50%;bottom:64px; z-index:1;padding:4px 14px 12px;} /* レベルの帯 */ .pLv{display:flex;align-items:baseline;gap:9px;margin-bottom:7px;} .pLv em{font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic;font-size:13px; letter-spacing:.14em;color:#7ad7ff;} .pLv b{font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic;font-size:32px; color:#eaf6ff;line-height:1;text-shadow:0 0 16px rgba(122,215,255,.6);} .pLv i{font-style:normal;font-size:11px;color:#8ba0b8;margin-left:auto;} .pBar{height:7px;border-radius:99px;background:rgba(122,215,255,.14);overflow:hidden; margin-bottom:4px;} .pBar span{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,#7ad7ff,#b6a2ff);box-shadow:0 0 12px rgba(122,215,255,.6);} .pNote{font-size:10px;color:#8ba0b8;text-align:right;margin-bottom:13px; font-variant-numeric:tabular-nums;} /* 見出し */ .pSec{font-size:10px;letter-spacing:.22em;color:#7ad7ff;font-weight:800;margin:14px 2px 7px;} /* 1項目（ステータス・所持数など） */ .pRow{display:flex;align-items:center;gap:10px;padding:9px 11px;margin-bottom:6px; border:1px solid rgba(122,215,255,.18);border-radius:9px;background:rgba(16,26,44,.85);} .pRow .nm{font-size:13px;font-weight:800;color:#eaf6ff;flex:1 1 auto;min-width:0;} .pRow .nm u{display:block;text-decoration:none;font-size:10px;font-weight:600; color:#8ba0b8;margin-top:2px;line-height:1.35;} .pRow .vl{font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic;font-size:19px; color:#eaf6ff;flex:0 0 auto;font-variant-numeric:tabular-nums;} .pRow .vl s{text-decoration:none;font-size:11px;color:#7dffb0;margin-left:5px;} /* スキルの効果（2026-09-07 本人の指示）。 ⚠ `.vl` ではなく専用の `.eff` に入れる。`.vl` は Impact 系の斜体なので 「流入間隔」のような漢字がその字だけ別のフォントに落ちて文字化けに見える。 */ .pRow .eff{flex:0 0 auto;text-align:right;font-size:12px;font-weight:800;color:#cfe6ff; line-height:1.35;} .pRow .eff s{display:block;text-decoration:none;font-size:10px;font-weight:700; color:#7dffb0;margin-top:1px;} .pRow.off{opacity:.5;} .pRow.off .eff{color:#9fb6cf;} .pRow.off .eff s{color:#7b8ba3;} .pRow.off .num{color:#9fb6cf;text-shadow:none;} .pSec b{font-family:inherit;font-weight:600;font-size:9.5px;letter-spacing:.04em; color:#8ba0b8;margin-left:8px;} .pNote.left{text-align:left;} /* 量子スキルのスロット */ .pSlot{display:flex;align-items:center;gap:10px;padding:10px 11px;margin-bottom:6px; width:100%;border:1px solid rgba(122,215,255,.22);border-radius:9px; background:rgba(16,26,44,.85);color:var(--ink);text-align:left;cursor:pointer;} .pSlot:active{transform:scale(.99);} .pSlot.lock{opacity:.4;cursor:default;} .pSlot.empty .nm{color:#7b8ba3;font-weight:700;} .pSlot .ic{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:flex; align-items:center;justify-content:center;font-size:15px;font-weight:800; border:1px solid currentColor;background:rgba(8,14,26,.7);text-shadow:0 0 9px currentColor;} .pSlot .nm{flex:1 1 auto;min-width:0;font-size:13px;font-weight:800;color:#eaf6ff;} .pSlot .nm u{display:block;text-decoration:none;font-size:10px;font-weight:600; color:#8ba0b8;margin-top:2px;} .pSlot .lv{flex:0 0 auto;font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic; font-size:14px;color:#7ad7ff;} /* 装備を選ぶときの一覧（スロットを押すと下に開く） */ .pPick{margin:-2px 0 8px;padding-left:10px;border-left:1px solid rgba(122,215,255,.2);} .pPick .pSlot{margin-bottom:4px;padding:8px 10px;background:rgba(12,20,34,.8);} .pPick .pSlot.on{border-color:rgba(125,255,176,.55);} /* ========================================================= 日替わりミッション（2026-09-07 本人の指示） バナー … ホームの**左上**。上バー（Lv・場面名）のすぐ下＝立ち絵の頭の上あたり。 ポップアップ … **画面の中央**。受け取りは手動。 ========================================================= */ .hDaily{position:absolute;z-index:3;left:12px;top:52px; display:flex;align-items:center;gap:7px;padding:7px 12px 7px 10px; border-radius:11px;cursor:pointer;text-align:left; border:1px solid rgba(255,216,74,.42); background:linear-gradient(180deg,rgba(34,28,10,.92),rgba(10,14,24,.92)); box-shadow:0 6px 20px rgba(0,0,0,.5), inset 0 0 18px rgba(255,216,74,.07);} .hDaily u{text-decoration:none;font-size:15px;line-height:1;color:#ffd84a; text-shadow:0 0 10px rgba(255,216,74,.75);} .hDaily .dTtl{font-size:11px;font-weight:800;letter-spacing:.04em;color:#f2e7c2;} .hDaily .dNum{font-size:11px;font-weight:800;color:#9fb6cf;} .hDaily .dNum b{font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif; font-style:italic;font-size:15px;color:#eaf6ff;margin-right:1px;} .hDaily.full{border-color:#ffd84a;box-shadow:0 6px 20px rgba(0,0,0,.5), 0 0 18px rgba(255,216,74,.3);} .hDaily.full .dNum b{color:#ffd84a;} .hDaily:active{transform:scale(.98);} /* 受け取っていないものがあるときの赤い丸（下バーの実績と同じ見た目） */ .hDaily .badge{position:absolute;top:-6px;right:-6px;min-width:15px;height:15px; padding:0 4px;border-radius:99px;font-style:normal;font-size:9px;font-weight:900; line-height:15px;text-align:center;color:#fff;background:#ff3b52; border:1px solid rgba(255,255,255,.8);box-shadow:0 0 10px rgba(255,59,82,.85); animation:badgePulse 1.9s ease-in-out infinite;} .hDaily .badge.hidden{display:none !important;} /* ポップアップ本体。**画面の中央**（本人の指示） */ #dailyPop,#itemPop{position:absolute;inset:0;z-index:9;display:flex;align-items:center; justify-content:center;padding:16px;background:rgba(3,6,12,.68); backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);} #dailyPop.hidden,#itemPop.hidden{display:none !important;} /* 持ち込みアイテム（2026-09-22）：ホームのボタンは日替わりの下・同じ形。ポップアップは青系 */ .hItems{position:absolute;z-index:3;left:12px;top:96px; display:flex;align-items:center;gap:7px;padding:7px 12px 7px 10px; border-radius:11px;cursor:pointer;text-align:left; border:1px solid rgba(122,215,255,.42); background:linear-gradient(180deg,rgba(14,30,48,.92),rgba(10,14,24,.92)); box-shadow:0 6px 20px rgba(0,0,0,.5), inset 0 0 18px rgba(122,215,255,.07);} .hItems u{text-decoration:none;font-size:15px;line-height:1;color:#7ad7ff;text-shadow:0 0 10px rgba(122,215,255,.75);} .hItems .dTtl{font-size:11px;font-weight:800;letter-spacing:.04em;color:#dbeeff;} .hItems .dNum{font-size:11px;font-weight:800;color:#9fb6cf;} .hItems .dNum b{font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic;font-size:15px;color:#eaf6ff;} .hItems .dNum i{font-style:normal;font-size:10px;color:#7dffb0;margin-left:5px;} .hItems:active{transform:scale(.98);} #screenHome.white .hItems{border-color:rgba(40,110,170,.5); background:linear-gradient(180deg,rgba(235,247,255,.96),rgba(210,232,250,.96));box-shadow:0 6px 18px rgba(0,0,0,.14);} #screenHome.white .hItems u{color:#2a7fc0;} #screenHome.white .hItems .dTtl{color:#1f3a58;} #screenHome.white .hItems .dNum{color:#4a6a88;} #screenHome.white .hItems .dNum b{color:#15243a;} .ipBox{border-color:rgba(122,215,255,.45);box-shadow:0 20px 60px rgba(0,0,0,.7), inset 0 0 40px rgba(122,215,255,.05);} .ipBox .dpHead{border-bottom-color:rgba(122,215,255,.22);} .ipBox .dpHead em{color:#7ad7ff;text-shadow:0 0 14px rgba(122,215,255,.5);} .ipRow{display:flex;align-items:center;gap:10px;padding:9px 11px;margin-bottom:6px;border-radius:10px;cursor:pointer; border:1px solid rgba(122,215,255,.18);background:rgba(16,26,44,.88);text-align:left;width:100%;font-family:inherit;} .ipRow .ic{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center; font-size:15px;font-weight:900;background:rgba(255,255,255,.06);} .ipRow .mid{flex:1 1 auto;min-width:0;} .ipRow .nm{display:block;font-size:14px;font-weight:900;color:#eaf4ff;} .ipRow .nm b{font-size:11px;color:#7ad7ff;margin-left:6px;} .ipRow .ds{display:block;font-size:10.5px;color:#8ba0b8;margin-top:2px;line-height:1.35;} .ipRow .sel{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.06em;padding:5px 8px;border-radius:7px; color:#9fb6cf;border:1px solid rgba(139,160,184,.35);} .ipRow.on{border-color:rgba(125,255,176,.6);box-shadow:0 0 14px rgba(125,255,176,.2) inset;} .ipRow.on .sel{color:#0b1a12;background:#7dffb0;border-color:#7dffb0;} .ipRow:active{transform:scale(.99);} /* ステージ確認画面の持ち込み枠（2026-09-22。リストから選ぶ） */ .soCarry{margin-top:8px;padding-top:8px;border-top:1px solid rgba(122,215,255,.16);} .soCarryHead{font-size:12px;font-weight:800;color:#c6d6e8;margin:0 0 6px 2px;letter-spacing:.04em;} .soCarryHead small{font-size:10px;font-weight:600;color:#8ba0b8;margin-left:4px;} .ipRow.small{padding:6px 9px;margin-bottom:5px;gap:8px;} .ipRow.small .ic{width:22px;height:22px;font-size:12px;} .ipRow.small .nm{font-size:12px;} .ipRow.small .ds{font-size:9.5px;} .ipRow.small .sel{font-size:9px;padding:4px 7px;} .sChap.carry{color:#7dffb0;} .sChap.util{color:#c8b5ff;} .soCarry b button{font-family:inherit;font-size:12px;font-weight:800;padding:5px 10px;border-radius:8px;cursor:pointer; color:#eaf6ff;border:1px solid rgba(125,255,176,.55);background:rgba(20,44,32,.9);} .soCarry b button.none{color:#9fb6cf;border-color:rgba(139,160,184,.35);background:rgba(14,23,39,.9);} .soCarry b button:active{transform:scale(.97);} /* 一時停止の持ち込み表示 */ .mInfo .mCarry{flex-basis:100%;text-align:center;font-size:11px;color:#c6d6e8;} .mInfo .mCarry b{color:#7dffb0;} /* 日替わりの引き直し */ .dpReroll{display:block;width:100%;margin-top:4px;padding:9px 10px;border-radius:9px;cursor:pointer;font-family:inherit; font-size:12px;font-weight:800;color:#eaf6ff;border:1px solid rgba(255,216,74,.5);background:rgba(34,28,10,.92);} .dpReroll:disabled{opacity:.45;cursor:default;} .dpReroll b{color:#ffd84a;} .dpBox{width:100%;max-width:420px;max-height:82%;display:flex;flex-direction:column; border-radius:15px;overflow:hidden; border:1px solid rgba(255,216,74,.45);background:rgba(8,14,24,.98); box-shadow:0 20px 60px rgba(0,0,0,.7), inset 0 0 40px rgba(255,216,74,.05);} .dpHead{flex:0 0 auto;display:flex;align-items:baseline;gap:9px;padding:11px 13px 9px; border-bottom:1px solid rgba(255,216,74,.22);} .dpHead em{font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif; font-style:italic;font-size:15px;letter-spacing:.12em;color:#ffd84a; text-shadow:0 0 14px rgba(255,216,74,.5);} .dpHead .dpDay{font-size:11px;font-weight:700;color:#8ba0b8;font-variant-numeric:tabular-nums;} .dpClose{margin-left:auto;width:28px;height:28px;border-radius:8px;cursor:pointer; font-size:16px;line-height:1;color:#9fb6cf; border:1px solid rgba(122,215,255,.24);background:rgba(14,23,39,.9);} .dpClose:active{transform:scale(.95);} .dpBody{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:10px 12px 13px;} .dpNote{font-size:10.5px;color:#8ba0b8;line-height:1.5;margin-bottom:9px;} .dpNote b{color:#ffd84a;font-weight:800;} /* 1件 */ .dpRow{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;margin-bottom:6px; border:1px solid rgba(122,215,255,.18);border-radius:10px;background:rgba(16,26,44,.85);} .dpIc{flex:0 0 auto;width:20px;height:20px;border-radius:50%;font-size:11px; display:flex;align-items:center;justify-content:center; border:1px solid rgba(122,215,255,.3);color:#7dffb0;} .dpMain{flex:1 1 auto;min-width:0;} .dpNm{display:block;font-size:13px;font-weight:800;color:#eaf6ff;} .dpBar{height:4px;border-radius:99px;background:rgba(122,215,255,.14); overflow:hidden;margin-top:5px;} .dpBar span{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,#7ad7ff,#b6a2ff);} .dpN{display:block;font-size:9px;color:#7b8ba3;text-align:right;margin-top:1px; font-variant-numeric:tabular-nums;} .dpRw{display:block;margin-top:3px;font-size:10.5px;font-weight:700;color:#cfe6ff;} .dpRow.yet{opacity:.6;} .dpRow.yet .dpIc{color:#5d6f85;border-color:rgba(139,160,184,.3);} .dpRow.yet .num{color:#9fb6cf;text-shadow:none;} .dpRow.taken .dpIc{background:rgba(125,255,176,.14);border-color:rgba(125,255,176,.5);} .dpRow.ready{border-color:#ffd84a;background:rgba(40,32,8,.9); box-shadow:0 0 18px rgba(255,216,74,.2) inset;} .dpRow.ready .dpIc{color:#ffd84a;border-color:#ffd84a;box-shadow:0 0 10px rgba(255,216,74,.7);} .dpRow.bonus{margin-top:9px;border-style:dashed;} .dpRow.bonus .dpIc{color:#ffd84a;border-color:rgba(255,216,74,.5);} .dpGet{flex:0 0 auto;align-self:center;padding:9px 13px;border-radius:9px;cursor:pointer; font-size:12px;font-weight:900;letter-spacing:.06em;color:#241c02; border:1px solid #ffd84a;background:linear-gradient(180deg,#ffe797,#ffd84a); box-shadow:0 0 16px rgba(255,216,74,.45); animation:acGetPulse 1.6s ease-in-out infinite;} .dpGet:active{transform:scale(.97);} .dpSt{flex:0 0 auto;align-self:center;font-size:10px;font-weight:800;color:#7b8ba3;} .dpRow.taken .dpSt{color:#7dffb0;} @media (prefers-reduced-motion:reduce){.dpGet,.hDaily .badge{animation:none}} /* ========================================================= 画面上部中央の小さいポップアップ（2026-09-07 本人の指示） ⚠ **お知らせ専用の共通の入れ物。**日替わりミッション以外にも使う。 上バーを流れるインフォメーションとは役目が違う（あちらは常設、こちらは一瞬）。 ========================================================= */ /* ⚠ 上は 94px。ホームの日替わりミッションのバナー（top:52px・高さ32px）の すぐ下に出す。58px だとバナーに重なって文字が読めなかった（2026-09-07 に実測）。 */ #toast{position:absolute;z-index:11;left:50%;top:94px;transform:translateX(-50%); max-width:86%;padding:8px 15px;border-radius:99px;pointer-events:auto;cursor:pointer; font-size:11.5px;font-weight:700;line-height:1.35;text-align:center;color:#eaf6ff; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid rgba(122,215,255,.4);background:rgba(8,14,26,.96); box-shadow:0 10px 30px rgba(0,0,0,.6);opacity:0;} #toast.hidden{display:none !important;} #toast b{color:#ffd84a;font-weight:900;} #toast.ok{border-color:rgba(255,216,74,.6); box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 20px rgba(255,216,74,.22);} #toast.in{animation:toastIn 2.6s ease-out forwards;} @keyframes toastIn{ 0%{opacity:0;transform:translate(-50%,-12px)} 9%{opacity:1;transform:translate(-50%,0)} 84%{opacity:1;transform:translate(-50%,0)} 100%{opacity:0;transform:translate(-50%,-8px)}} @media (prefers-reduced-motion:reduce){ #toast.in{animation:none;opacity:1;transform:translate(-50%,0)}} /* ========================================================= スペシャルステージの簡易ストーリー（2026-09-07 本人の指示） 構成は **簡易ストーリー → ゲーム → 簡易ストーリー**。 ⚠ 画面ぜんぶが「次へ」の当たり判定なので、上下のバーは出していない （`showScreen` の `bars` から外してある）。 ========================================================= */ #screenStory{padding:0 !important;overflow:hidden;cursor:pointer;} /* 背景はスペシャルステージと同じ絵。少しだけゆっくり寄る */ .stBg{position:absolute;inset:0;z-index:0; background-image:var(--stBg,none);background-size:cover;background-position:center; animation:stZoom 34s ease-in-out infinite alternate;} .stBg::after{content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(3,6,12,.55),rgba(3,6,12,.30) 40%,rgba(3,6,12,.92));} @keyframes stZoom{from{transform:scale(1)}to{transform:scale(1.10)}} @media (prefers-reduced-motion:reduce){.stBg{animation:none}} /* ========================================================= 立ち絵（2026-09-09 本人の指示で作り直し） --------------------------------------------------------- **窓（`.stCharWrap`）で切り取り、中の絵は「高さだけ」で拡大率を決める。** ⚠ 以前は `` に `object-fit:cover` を掛けていたが、立ち絵ごとに 縦横比が 0.27〜0.53 とばらばらで**幅のほうで拡大率が決まってしまい**、 頭の大きさが 68px〜132px と2倍近く変わっていた（本人の指摘）。 絵はどれも「頭のてっぺんから足先まで」で切り抜いてあるので、 **高さを揃えれば頭の大きさも揃う。** | | | |---|---| | 窓の位置・見える範囲 | `.stCharWrap`（TUNE の「立ち絵の寄り」「下端」） | | 絵の拡大率 | `.stChar` の `height`（TUNE の「立ち絵の大きさ」＝ vh） | | 絵の上下 | `.stChar` の `top`（TUNE の「立ち絵の上下」） | ========================================================= */ .stCharWrap{position:absolute;z-index:1;left:50%;bottom:var(--faceB,26%); transform:translateX(-50%); width:var(--faceW,94%);height:var(--faceH,52%); overflow:hidden;pointer-events:none; filter:drop-shadow(0 0 40px rgba(122,215,255,.28)); -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 97%); mask-image:linear-gradient(180deg,#000 76%,transparent 97%); animation:stFloat 6.5s ease-in-out infinite alternate;} .stCharWrap.hidden{display:none !important;} .stChar{position:absolute;left:50%;top:var(--faceY,0%);transform:translateX(-50%); height:var(--figH,979px);width:auto;max-width:none;display:block; transition:opacity .45s ease;} .stChar.hidden{display:none !important;} .stChar.fade{opacity:0;} /* ⚠ `op`（プレイヤーを覗き込む絵）だけは別扱い。 寝ている視点なので**上下がひっくり返して描いてある**。顔は絵の下のほうにあり、 絵の上端は胴体の切れ目なので、**上端を画面の外へ逃がして絵ぜんぶを見せる**。 窓では切り取らない（`overflow:visible`）。 */ .stCharWrap.top{top:var(--opTop,-16%);bottom:auto;left:50%; width:100%;height:112%;overflow:visible; -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%); mask-image:linear-gradient(180deg,#000 88%,transparent 100%); animation:stHang 7s ease-in-out infinite alternate;} .stCharWrap.top .stChar{top:0;height:112%;max-width:165%;width:auto; object-fit:contain;} /* ⚠ **アクションの絵**（`action1` / `main_action1〜14`）は別扱い。 頭から足先までの絵ではないので、高さを揃えると顔が画面の外へ飛び出す （`main_action14` は 1123x1251。高さ942pxに揃えると幅846pxになり、 375px の画面から左へ235pxはみ出していた／2026-09-10 本人の指摘）。 **窓の幅に合わせて絵ぜんぶを入れる。** */ .stCharWrap.act .stChar{height:auto;width:100%;max-width:100%;top:0;} /* ⚠ **全身**（`立ち絵: front4 全身`。2026-09-11 本人の指示）。 ふだんは高さで拡大率を決めて上半身を切り取るので、**下半身が中途半端に切れる。** ここでは**頭を画面の上へ寄せ、体は画面の下まで通す。** ⚠ 2026-09-11（2回目）に本人の絵の指示で**大きさを 66% → 104% に上げた。** 66% だと全身は入るが人が小さく、部屋の奥に立っているように見えていた。 いまは**膝から下が台詞の枠と画面の外に隠れる**（本人の指示：「下部のみマスクで良い」）。 ⚠ はみ出したぶんは `#stage` の `overflow:hidden` が切る。 */ /* ⚠ `top` は 2026-09-11 に本人の指示で **4% → 8%**（「もう少し下げて」）。 */ .stCharWrap.whole{top:8%;bottom:auto;height:104%;width:100%;overflow:visible;} .stCharWrap.whole .stChar{height:100%;width:auto;max-width:none;top:0;} /* 上から降りてくる（`立ち絵:op 画面上部から下がってくる`）。 */ .stCharWrap.stIn{animation:stDrop 1.5s cubic-bezier(.16,.9,.3,1) both, stHang 7s ease-in-out 1.5s infinite alternate;} @keyframes stDrop{from{transform:translate(-50%,-102%)}to{transform:translate(-50%,0)}} @keyframes stHang{from{transform:translate(-50%,0)}to{transform:translate(-50%,1.4%)}} @keyframes stFloat{from{transform:translate(-50%,0)}to{transform:translate(-50%,-1.1%)}} @media (prefers-reduced-motion:reduce){.stCharWrap{animation:none}} /* ---- チュートリアルの重ね（2026-09-09 本人の指示） ---- ゲーム画面の上に台詞の枠だけを重ねる。**枠の外はゲームの操作に通す** （原子を触る・引っぱるのが目的なので、画面ぜんぶを当たり判定にできない）。 */ #tut{position:absolute;inset:0;z-index:60;pointer-events:none;} #tut.hidden{display:none !important;} /* チュートリアルの立ち絵（2026-09-09 本人の指示で作り直し）。 **位置はゲーム中のキャラと同じ＝画面の左**。 ⚠ **左右を反転して、さらに左へ寄せてある**（2026-09-09 本人の指示）。 そのままだと差し出した手と体がジェネシス（中央の玉）に重なって隠れていた。 反転すると手が内側（玉のほう）を向き、体も左へ逃げるので玉が見える。 ⚠ 条件を待っているあいだは消す（盤面をぜんぶ見せるため）。 */ #tut .stCharWrap{z-index:1;opacity:.97; /* ⚠ `--tutX` は 2026-09-11 に本人の指示で **-19% → -10%**（「もう少し右へ」）。 マイナスは画面の左外への逃がし量。0 に近づくほど右へ寄る。 */ left:var(--tutX,-10%);right:auto;top:2%;bottom:auto; transform:none; width:66%;height:46%; -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 99%); mask-image:linear-gradient(180deg,#000 80%,transparent 99%); animation:none;} #tut .stCharWrap .stChar{transform:translateX(-50%) scaleX(-1);} #tut .stCharWrap.top{width:80%;height:52%;top:0;left:0;} /* ⚠ **会話中は盤面を触らせない**（2026-09-09 本人の指示）。 `talking` のあいだは重ね全体が指を受け止めるので、 画面のどこを押しても会話が進み、原子には触れない。 条件待ちのあいだは `talking` を外す＝指がキャンバスまで通る。 */ #tut.talking{pointer-events:auto;cursor:pointer;} #tut.talking .stChar,#tut.talking .stBox{pointer-events:none;} #tut.talking .stSkip{pointer-events:auto;} /* 操作が終わった直後だけ、誤タップで会話が飛ばないよう指を受け付けない */ #tut.talking.lock{pointer-events:none;} #tut.talking.lock .stSkip{pointer-events:auto;} #tut .stBox,#tut .stSkip{pointer-events:auto;} #tut .stBox.hidden{display:none !important;} /* ---- キャラ絵の旗（2026-09-17）。`CONFIG.art.character = 0` のとき main.js が `#stage.noChar` を付ける。 立ち絵の窓（チュートリアル／ストーリー）・タイトル・ホームの立ち絵と名札をまとめて消す。 素材も CSS の元の定義も残す＝旗を立てれば元どおり。 */ #stage.noChar .stCharWrap, #stage.noChar #tChar, #stage.noChar #hChar, #stage.noChar #screenHome .hName, #stage.noChar #targetName, /* 右上の名前の札 → 左の説明に移した */ #stage.noChar .skBg, /* スキル画面の後ろの立ち絵（光は残す） */ #stage.noChar #charBox{display:none !important;} /* ゲーム中の左上の枠（「読込中」の札ごと） */ /* キャラ絵なし版：ゲーム中の左の「面の名前と説明」。位置は `place()`（LAYOUT.infoNoChar） */ #tgtInfo{display:none;flex-direction:column;justify-content:flex-start;gap:5px; padding:9px 10px;border-radius:9px; background:rgba(10,17,29,.70);border:1px solid rgba(122,215,255,.30); box-shadow:0 2px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);} #stage.noChar #tgtInfo{display:flex;} #hud.tutOn #tgtInfo{display:none !important;} #tgtInfo b{font-size:15px;font-weight:900;line-height:1.25;color:#eaf4ff;letter-spacing:.04em; text-shadow:0 0 10px rgba(122,215,255,.5);word-break:keep-all;overflow-wrap:anywhere;} #tgtInfo i{font-style:normal;font-size:11px;font-weight:700;color:#a9d8ff;letter-spacing:.06em; font-variant-numeric:tabular-nums;} #tgtInfo i:empty{display:none;} /* ---- 説明の絵（txt の `画像:`。2026-09-17 本人のチュートリアル txt から） ---- **画面の中央に置く。台詞の枠には被せない。** 帯の下端は台詞の枠の上（`.stBox` は bottom:13% ＋ 高さ 120〜170px）。 ⚠ 立ち絵より手前（z-index:2）。説明のあいだは絵が主役なので、立ち絵の手に重なってもよい。 ⚠ 指は通さない（pointer-events:none）。会話中は `#tut.talking` が受けるので、絵の上を押しても会話が進む。 */ #tut .stPicWrap,#screenStory .stPicWrap{position:absolute;z-index:2;left:0;right:0; top:calc(8% + 0px); bottom:calc(13% + 0px + 182px); display:flex;align-items:center;justify-content:center; pointer-events:none;opacity:0;transition:opacity .35s ease;} #tut .stPicWrap.show,#screenStory .stPicWrap.show{opacity:1;} #tut .stPicWrap.hidden,#screenStory .stPicWrap.hidden{display:none !important;} #tut .stPicWrap img,#screenStory .stPicWrap img{max-width:84%;max-height:100%;object-fit:contain; border-radius:12px;border:1px solid rgba(122,215,255,.45); box-shadow:0 14px 44px rgba(0,0,0,.65),0 0 24px rgba(122,215,255,.18); background:rgba(6,12,22,.85);} /* 動く見本（`デモ:`。2026-09-20）。同じ枠にキャンバス。絵と同じ縁取り */ #screenStory .stPicWrap canvas.stDemo{display:none;width:84%;max-height:100%;aspect-ratio:1/1; border-radius:12px;border:1px solid rgba(122,215,255,.45); box-shadow:0 14px 44px rgba(0,0,0,.65),0 0 24px rgba(122,215,255,.18); background:radial-gradient(ellipse at 50% 45%,rgba(20,30,52,.92),rgba(4,8,16,.94));} #screenStory .stPicWrap.demo canvas.stDemo{display:block;} #screenStory .stPicWrap.demo img{display:none;} /* 白へ落とすときに、白と同じ時間をかけて溶かす（2026-09-10） */ .stBox.fade{opacity:0;} /* チュートリアル中は「各色の消化数」も「目標物の名前」も出さない（本人の指示）。 */ #hud.tutOn .gauges,#hud.tutOn #targetName,#hud.tutOn #skillIcons, #hud.tutOn #stageLabel{display:none !important;} /* ========================================================= Endless（EX-1。2026-09-15 本人の指示） 目標物もゲージも無い（難易度なし）。画面上部中央に EXIT。 ========================================================= */ #hud.endlessOn .gauges{display:none !important;} #exitBtn{top:1.2%;left:50%;transform:translateX(-50%);pointer-events:auto;z-index:8; padding:7px 26px;border-radius:10px;cursor:pointer; font-family:Impact,"Arial Black","Helvetica Neue",sans-serif;font-style:italic; font-size:17px;letter-spacing:.14em;color:#fff; border:1px solid rgba(255,140,150,.85); background:linear-gradient(180deg,rgba(150,40,60,.92),rgba(70,14,30,.95)); box-shadow:0 0 18px rgba(255,90,110,.45), inset 0 1px 0 rgba(255,255,255,.18); text-shadow:0 0 10px rgba(255,120,140,.8);} /* 2026-10-01 本人の指示：EXIT を少し小さく（TOTAL の札に被らない） */ #hud.hasExit #exitBtn:not(.always){top:.6%;padding:4px 18px;font-size:14px;border-radius:8px;} #exitBtn.hidden{display:none !important;} #exitBtn:active{transform:translateX(-50%) scale(.96);} /* ========================================================= 新しいゲーム画面の配置（2026-09-19 本人の見本 1・2）。`#hud.v2`（`CONFIG.ui.layout2`） 上段：STAGE の札（左）／目標物の名前（中央）／EXIT（右・⏸の左）。 右：ゲージは縦に4本、色の帯の中に％と数字、右端に色の丸。 位置（左の情報欄・ゲージ・スキルの印）は ui.js の `place()` が `LAYOUT.v2` から入れる。 ========================================================= */ #hud.v2 #targetName{left:50%;right:auto !important;transform:translateX(-50%); font-size:13px;padding:5px 18px;border-radius:99px;min-width:34%;text-align:center;} #stage.noChar #hud.v2 #targetName{display:block !important;} /* 名前の札を復活（左の欄は「クリア条件」に）。noChar の !important に勝つ */ #hud.v2 #exitBtn.always{display:block;left:auto;right:50px;transform:none; padding:5px 12px;font-size:15px;letter-spacing:.1em;} #hud.v2 #exitBtn.always:active{transform:scale(.96);} #hud.v2 #exitBtn.always.hidden{display:block !important;} /* 旧配置の setExit(false) に負けない */ .gauges.v2{justify-content:flex-start;gap:6px;} .ge.v2{display:grid;grid-template-columns:1fr 16px;grid-template-rows:auto;column-gap:6px;align-items:center;} .ge.v2 .geIcon{grid-row:auto;grid-column:2;width:16px;height:16px;} .ge.v2 .geBar{grid-column:1;height:26px;border-radius:6px;background:rgba(10,17,29,.55); border:1px solid rgba(255,255,255,.14);box-shadow:0 2px 10px rgba(0,0,0,.4);} .ge.v2 .geBar > i{border-radius:5px;} .ge.v2 .geNum{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between; padding:0 7px 0 8px;line-height:1;} .ge.v2 .geNum .gePct{margin:0;padding:0;font-size:14px;color:#fff; text-shadow:0 0 6px rgba(0,0,0,.7),0 1px 0 rgba(0,0,0,.6);} .ge.v2 .geNum em{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-style:normal;} .ge.v2 .geNum em b{font-size:9px;color:#fff;text-shadow:0 0 4px rgba(0,0,0,.8);} .ge.v2 .geNum em i{font-size:8px;color:rgba(255,255,255,.85);text-shadow:0 0 4px rgba(0,0,0,.8);} .ge.v2.done .geNum .gePct,.ge.v2.done .geNum b{color:#dfffe9;} /* 左の情報欄：見出し「クリア条件」は小さく */ #hud.v2 #tgtInfo b{font-size:11px;letter-spacing:.14em;color:#9fd0ff;} #hud.v2 #tgtInfo i{font-size:12px;color:#eaf4ff;} /* 三本線から戻ってきたとき、どの項目から来たのかを一瞬光らせる */ @keyframes mFocus{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 2px rgba(122,215,255,.85),0 0 18px rgba(122,215,255,.55)}} .mBtn.mFocus{animation:mFocus 1.6s ease-out 2;} /* 台詞の枠。下に固定する */ /* ⚠ 下端の位置（2026-09-09 本人の指示で**もっと高く**した。元は 18px）。 スマホは下端が持ちにくく、枠が画面のふちに寄りすぎていた。 */ .stBox{position:absolute;z-index:2;left:14px;right:14px; bottom:calc(13% + 0px); min-height:118px;padding:13px 15px 26px;border-radius:14px; background:rgba(6,12,22,.90);border:1px solid rgba(122,215,255,.34); box-shadow:0 14px 44px rgba(0,0,0,.6), inset 0 0 30px rgba(122,215,255,.06);} .stWho{font-size:11px;font-weight:800;letter-spacing:.14em;color:#7ad7ff; text-shadow:0 0 12px rgba(122,215,255,.5);margin-bottom:6px;} .stText{font-size:15px;font-weight:700;line-height:1.65;color:#eaf6ff;} .stBox.hidden{display:none !important;} /* 白へ落とすときに、白と同じ時間をかけて溶かす（2026-09-10） */ .stBox.fade{opacity:0;} .stNext{position:absolute;right:14px;bottom:7px;font-size:11px;font-weight:800; color:#9fd8ff;animation:stBlink 1.3s ease-in-out infinite;} .stNext.last{color:#ffd84a;letter-spacing:.06em; text-shadow:0 0 12px rgba(255,216,74,.55);} @keyframes stBlink{0%,100%{opacity:.35}50%{opacity:1}} @media (prefers-reduced-motion:reduce){.stNext{animation:none;opacity:1}} /* ⚠ 右端は ⏸ が居るので、そのぶん空ける（右8px＋幅34px＋余白4px ＝ 46px）。 リザルトの見出しと同じ逃がしかた。 */ .stSkip{position:absolute;z-index:3;top:calc(10px + 0px);right:50px; padding:6px 12px;border-radius:99px;cursor:pointer; font-size:11px;font-weight:800;color:#9fb6cf; border:1px solid rgba(122,215,255,.28);background:rgba(6,12,22,.8);} .stSkip:active{transform:scale(.97);} /* ステージ選択：遊べるスペシャル（2026-09-07）。ふつうの面と見分けが付くように光らせる */ .sBtn.special.playable{border-color:rgba(255,120,150,.55); background:linear-gradient(180deg,rgba(52,20,34,.92),rgba(18,14,26,.94)); box-shadow:0 0 18px rgba(255,120,150,.16) inset;} .sBtn.special.playable .no{color:#ff8fa8;} .sBtn.special.playable .st{color:#ffd84a;} /* ========================================================= 実績（2026-09-07 本人の指示で新規） ステータス画面と同じ枠（.pBody）を使う。中身は achieve.js の ACHIEVEMENTS。 ⚠ **達成しても自動では受け取らない。**「受取」を押して初めて報酬が入る。 ========================================================= */ #screenAchieve .pBody{position:absolute;left:0;right:0;top:50px;bottom:64px;z-index:1; padding:10px 12px 12px;overflow-y:auto;-webkit-overflow-scrolling:touch;} .acHead{margin-bottom:10px;} .acCount{display:flex;align-items:baseline;gap:8px;margin-bottom:7px;} .acCount em{font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif; font-style:italic;font-size:12px;letter-spacing:.14em;color:#ffd84a;} .acCount b{font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif; font-style:italic;font-size:30px;line-height:1;color:#eaf6ff; text-shadow:0 0 16px rgba(255,216,74,.55);} .acCount i{font-style:normal;font-size:12px;color:#8ba0b8;} .acHead .pBar span{background:linear-gradient(90deg,#ffd84a,#ffa63b); box-shadow:0 0 12px rgba(255,216,74,.6);} .acLeft{margin-top:5px;font-size:11px;font-weight:700;color:#ffd84a;line-height:1.4;} .acLeft b{font-size:14px;} .acLeft u{display:block;text-decoration:none;font-size:10px;font-weight:600;color:#8ba0b8;} .acLeft.off{color:#8ba0b8;font-weight:600;} /* まとめて受取（2026-09-07 本人の指示）。受け取れるものがあるときだけ出る。 1件ずつの「受取」と同じ金色だが、こちらは幅いっぱいで**先に目に入る**。 */ .acAll{display:block;width:100%;margin-top:7px;padding:9px 10px;border-radius:9px; cursor:pointer;font-family:inherit;font-size:14px;font-weight:800;line-height:1.25; color:#2a1e00;background:linear-gradient(180deg,rgba(255,216,74,.95),rgba(226,168,20,.95)); border:1px solid rgba(255,236,160,.8);box-shadow:0 0 16px rgba(255,216,74,.32);} .acAll u{display:block;text-decoration:none;font-size:10px;font-weight:700; color:rgba(42,30,0,.72);margin-top:1px;} .acAll:active{transform:scale(.99);} /* 絞り込み */ .acTabs{display:flex;gap:5px;margin-bottom:4px;} .acTab{flex:1 1 0;padding:6px 4px;border-radius:8px;cursor:pointer; font-size:11px;font-weight:800;color:#9fb6cf; border:1px solid rgba(122,215,255,.22);background:rgba(14,23,39,.9);} .acTab.on{border-color:rgba(122,215,255,.7);color:#eaf6ff; background:linear-gradient(180deg,rgba(60,110,175,.55),rgba(20,34,56,.95));} .acTab:active{transform:scale(.98);} /* ジャンルの札（2026-10-01）。5列×2段 */ .acGens{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:2px 0 6px;} .acGen{position:relative;padding:5px 2px 4px;border-radius:7px;cursor:pointer;line-height:1.15; font-size:11px;font-weight:800;color:#9fb6cf;white-space:nowrap; border:1px solid rgba(255,216,74,.22);background:rgba(14,23,39,.9);} .acGen s{display:block;text-decoration:none;font-size:9px;font-weight:700;color:#6f829a;margin-top:1px;} .acGen.on{border-color:rgba(255,216,74,.8);color:#ffe89a; background:linear-gradient(180deg,rgba(120,90,20,.6),rgba(30,24,8,.95));} .acGen.on s{color:#d8c070;} .acGen em{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:#ff4d5e; box-shadow:0 0 6px rgba(255,77,94,.8);} .acGen:active{transform:scale(.97);} /* 1件 */ .acRow{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;margin-bottom:6px; border:1px solid rgba(122,215,255,.18);border-radius:9px;background:rgba(16,26,44,.85);} .acIc{flex:0 0 auto;width:20px;height:20px;border-radius:50%;font-size:11px; display:flex;align-items:center;justify-content:center; border:1px solid rgba(122,215,255,.3);color:#7dffb0;} .acMain{flex:1 1 auto;min-width:0;} .acNm{display:block;font-size:13px;font-weight:800;color:#eaf6ff;} .acNm .big{font-style:normal;font-size:9px;font-weight:800;margin-left:6px; padding:1px 6px;border-radius:99px;color:#241c02;background:#ffd84a; letter-spacing:.04em;vertical-align:1px;} .acMain u{display:block;text-decoration:none;font-size:10px;font-weight:600; color:#8ba0b8;margin-top:2px;line-height:1.35;} .acRw{display:block;margin-top:4px;font-size:10.5px;font-weight:700;color:#cfe6ff;} /* 未達成の進み具合 */ .acProg{height:4px;border-radius:99px;background:rgba(122,215,255,.14); overflow:hidden;margin-top:5px;} .acProg span{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,#7ad7ff,#b6a2ff);} .acProgN{font-size:9px;color:#7b8ba3;text-align:right;margin-top:1px; font-variant-numeric:tabular-nums;} /* 状態 */ .acRow.yet{opacity:.55;} .acRow.yet .acIc{color:#5d6f85;border-color:rgba(139,160,184,.3);} .acRow.yet .num{color:#9fb6cf;text-shadow:none;} .acRow.taken .acIc{background:rgba(125,255,176,.14);border-color:rgba(125,255,176,.5);} /* 受け取れるもの＝**光らせる**。ここを押すのが報酬の入口 */ .acRow.ready{border-color:#ffd84a;background:rgba(40,32,8,.9); box-shadow:0 0 18px rgba(255,216,74,.22) inset;} .acRow.ready .acIc{color:#ffd84a;border-color:#ffd84a; box-shadow:0 0 10px rgba(255,216,74,.7);} .acGet{flex:0 0 auto;align-self:center;padding:9px 13px;border-radius:9px;cursor:pointer; font-size:12px;font-weight:900;letter-spacing:.06em;color:#241c02; border:1px solid #ffd84a;background:linear-gradient(180deg,#ffe797,#ffd84a); box-shadow:0 0 16px rgba(255,216,74,.45); animation:acGetPulse 1.6s ease-in-out infinite;} .acGet:active{transform:scale(.97);} @keyframes acGetPulse{0%,100%{box-shadow:0 0 12px rgba(255,216,74,.35)} 50%{box-shadow:0 0 22px rgba(255,216,74,.75)}} @media (prefers-reduced-motion:reduce){.acGet{animation:none}} .acSt{flex:0 0 auto;align-self:center;font-size:10px;font-weight:800;color:#7b8ba3;} .acRow.taken .acSt{color:#7dffb0;} /* ---------- ショップ ---------- */ .sHead .shPt{font-family:inherit;font-style:normal;font-size:12px;letter-spacing:.02em; color:#8ba0b8;text-shadow:none;} .sHead .shPt b{font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic;font-size:17px; color:#ffd84a;text-shadow:0 0 12px rgba(255,216,74,.5);margin:0 2px;} #shBack{padding:7px 14px;border:1px solid rgba(122,215,255,.4);border-radius:9px; background:rgba(12,20,34,.92);color:#cfe6ff;font-size:12px;font-weight:800;cursor:pointer;} .shList{flex:1 1 auto;width:100%;overflow-y:auto;padding:0 12px 24px; -webkit-overflow-scrolling:touch;} .shLead{font-size:11px;color:#8ba0b8;line-height:1.6;margin:2px 2px 10px;} .shItem{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;margin-bottom:7px; border:1px solid rgba(122,215,255,.22);border-radius:10px;background:rgba(16,26,44,.9); color:var(--ink);text-align:left;cursor:pointer;} .shItem:not(:disabled):active{transform:scale(.99);} .shItem:disabled{cursor:default;} .shItem.poor{opacity:.5;} .shItem.maxed{opacity:.45;} .shItem .ic{flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:flex; align-items:center;justify-content:center;font-size:16px;font-weight:800; border:1px solid currentColor;background:rgba(8,14,26,.7);text-shadow:0 0 9px currentColor;} .shItem .mid{flex:1 1 auto;min-width:0;} .shItem .nm{display:block;font-size:14px;font-weight:800;color:#f2f8ff;} .shItem .nm b{font-size:11px;color:#7ad7ff;margin-left:6px;} .shItem .ds{display:block;font-size:10px;color:#8ba0b8;margin-top:3px;line-height:1.4;} .shItem .pr{flex:0 0 auto;text-align:right;} .shItem .pr b{display:block;font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic; font-size:18px;color:#ffd84a;font-variant-numeric:tabular-nums;} .shItem .pr s{display:block;text-decoration:none;font-size:9px;letter-spacing:.14em; color:#8ba0b8;margin-top:1px;} .shItem.maxed .pr b{color:#7dffb0;font-size:13px;} /* ---------- リザルトの報酬（経験値・ポイント） ---------- */ .rRow.gain b{color:#ffd84a;text-shadow:0 0 14px rgba(255,216,74,.55);} .rRow.lvup{justify-content:center;} .rRow.lvup span{font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic; font-size:15px;letter-spacing:.14em;color:#7dffb0; text-shadow:0 0 16px rgba(125,255,176,.7);} /* TUNE パネルのデバッグ操作（2026-09-06）。キーボードの C / U と同じことをボタンでできる */ #tuneDebug{margin-bottom:4px;} /* TUNE のジャンル（2026-09-24） */ .tcats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0;} .tcat{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 10px;border-radius:10px;cursor:pointer; background:rgba(122,215,255,.08);border:1px solid rgba(122,215,255,.25);color:#e6f4ff;text-align:left;} .tcat b{font-size:12.5px;font-weight:800;} .tcat small{font-size:10px;color:#86a0bb;} .tcat:active{transform:scale(.97);} .tback{display:flex;align-items:center;gap:10px;width:100%;margin:4px 0 2px;padding:9px 10px;border-radius:8px;cursor:pointer; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:#9fd8ff;font-size:11px;} .tback b{color:#fff;font-size:13px;font-weight:800;} .tbtns{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 10px;} .tdbg{flex:1 1 44%;padding:7px 6px;border-radius:8px;cursor:pointer; border:1px solid rgba(122,215,255,.35);background:rgba(20,32,52,.92); color:#cfe6ff;font-size:11px;font-weight:800;letter-spacing:.02em;} .tdbg:active{transform:scale(.97);} /* ========================================================= スキルツリー（2026-09-06 に本人の見本画像に合わせて図に作り直し） 立ち絵の上に SVG を重ねる。中心のハブから4本の幹が伸び、それぞれ3列に分かれる。 埋めたノードはスキルの色で光り、開けられるノードは黄色く点滅する ＝**強くなったのが目で分かる**、という本人の狙い。 ========================================================= */ #screenSkill .pBody{position:absolute;left:0;right:0;top:50px;bottom:64px;z-index:1; padding:0;display:flex;flex-direction:column;overflow:visible;} /* ツリーは**寄せて表示**し、ドラッグで見回す（2026-09-06 本人の指示）。 .skTree が窓、.skTreeInner が窓より大きい中身。ドラッグで中身を動かす。 ⚠ 拡大率は `--skZoom`。上げるほど寄る（＝見える範囲が狭くなる）。 */ .skTree{flex:1 1 auto;min-height:0;position:relative;overflow:hidden; touch-action:none;cursor:grab;} .skTree.drag{cursor:grabbing;} .skTreeInner{position:absolute;left:0;top:0; width:calc(100% * var(--skZoom,1.8));height:calc(100% * var(--skZoom,1.8)); will-change:transform;} .skTreeInner svg{width:100%;height:100%;display:block;overflow:visible;} /* 土台の絵（2026-09-07 本人の指示）。BG/skill_tree.png を 80%透過で敷き、 まわりに白い光彩を少し。**この上にノードと線を描く。** ⚠ 当たり判定を食わないように pointer-events は切る。 ⚠ 濃さと光彩は `config.js` の `SKILL_TREE_MAP.imgOpacity` / `imgGlow`。 */ .skBase{pointer-events:none;} /* 枝の線。**下地の絵に線がもう描いてある**ので、ここは重ねるだけ。 ⚠ **太くしない**（2026-09-07 本人の指示。太いとチープに見える）。 下地の線の太さは実測で **1.16**（viewBox 幅100 のとき）。 ・埋まっていない線 … 下地とぴったり同じ太さで、ごく薄く添えるだけ ・埋まった線 … **下地より細い芯**を色で光らせる。太さで主張しない */ .tl{stroke:rgba(122,215,255,.10);stroke-width:1.16;} .tl.on{stroke-width:.55;opacity:1;filter:drop-shadow(0 0 .8px currentColor);} /* 中心のハブ */ .thub{fill:none;stroke:rgba(122,215,255,.35);stroke-width:.8;} .thub2{fill:rgba(190,230,255,.55);} /* ノード */ .tn .hit{fill:transparent;} /* ⚠ 半径は SVG 側（`SKILL_TREE_MAP.r` ＝ 絵の丸と同じ 3.99）で入れている。 ここで r を書いているのは「今すぐ開ける」ときだけ（一回り大きくする）。 */ /* ⚠ 塗りは**薄め**。下の絵（原子の模様）が透けたほうが土台が生きる。 */ .tn .dot{fill:rgba(10,17,29,.45);stroke:rgba(122,215,255,.26);stroke-width:.5;} .tn .ti{font-size:4px;text-anchor:middle;dominant-baseline:central; fill:rgba(190,230,255,.8);pointer-events:none;} .tn.lock .dot{opacity:.45;} .tn.open .dot{stroke:rgba(122,215,255,.6);} /* 今すぐ開けるノード。**押せば上がる**ことが分かるよう、一回り大きくして 「＋」と広がる輪を出す（2026-09-06 本人の指示）。 */ .tn.can{cursor:pointer;} .tn.can .dot{r:4.8px;fill:rgba(30,24,6,.92);stroke:#ffd84a;stroke-width:.55; /* 2026-09-19 本人「細く」1.2 → .55 */ filter:drop-shadow(0 0 3px rgba(255,216,74,.95));animation:tnPulse 1.5s ease-in-out infinite;} .tn.can .tplus{font-size:5.6px;font-weight:900;text-anchor:middle;dominant-baseline:central; fill:#ffd84a;pointer-events:none;} .tn.can .ring{fill:none;stroke:#ffd84a;stroke-width:.4;transform-origin:center; /* 2026-09-19 .9 → .4 */ transform-box:fill-box;animation:tnRing 1.8s ease-out infinite;} @keyframes tnPulse{0%,100%{opacity:.82}50%{opacity:1}} @keyframes tnRing{0%{transform:scale(1);opacity:.8} 70%{transform:scale(2.4);opacity:0} 100%{transform:scale(2.4);opacity:0}} /* 選んでいるノード（2026-09-07）。押しても即取得しないので、 どれの説明が下に出ているのかを白い輪で示す。 */ .tn.sel .selr{fill:none;stroke:#eaf6ff;stroke-width:.7;opacity:.9; filter:drop-shadow(0 0 2px rgba(234,246,255,.8));} /* 取ったノード（2026-09-07 本人の指示で作り直し）。 ⚠ **塗りつぶさない。**下地の原子の絵をそのまま見せて、 **輪だけを細く対応色で光らせ、中にそのスキルの印を出す。** 塗ると絵が消えてチープに見える、という指摘に対応したもの。 */ .tn.on .dot{fill:none;stroke:var(--c);stroke-width:.3; /* 2026-09-19 .5 → .3 */ filter:drop-shadow(0 0 1.4px var(--c)) drop-shadow(0 0 .6px var(--c));} /* 光彩は少し強く（2026-09-19 2回目） */ .tn.on .ti{fill:var(--c);font-size:4.4px; filter:drop-shadow(0 0 .8px var(--c));} .tn.can:active .dot{r:3.4;} @media (prefers-reduced-motion:reduce){.tn.can .dot,.tn.can .ring{animation:none} .tn.can .ring{opacity:0}} /* スキルの札（2026-09-06 に本人の指示で SVG から**四隅の HTML** へ移した）。 ⚠ **窓に貼り付いていて、拡大にもスクロールにも影響されない。** SVG に描いていたときは寄せるとツリーに重なって開放箇所が見えなくなった。 角を落とした HUD 風の枠。どの角に出るかは `skillCornersHTML()` が決める。 */ .skTag{position:absolute;z-index:3;pointer-events:none; display:flex;align-items:baseline;gap:5px;padding:5px 9px; background:rgba(6,12,22,.88);border:1px solid var(--c); box-shadow:0 0 12px rgba(0,0,0,.55), inset 0 0 10px rgba(0,0,0,.4);} .skTag.top{top:6px;} .skTag.bottom{bottom:6px;} /* ⚠ **スロットの一覧を出しているあいだは札を隠す**（2026-09-07 本人の指摘）。 札は z-index 3 で一覧（.skPick は 2）より手前に出るので、 下の2つ（分裂・威力）が一覧に重なって中身が読めなくなっていた。 */ .skTree.picking .skTag{opacity:0;visibility:hidden;} .skTag.left{left:6px;clip-path:polygon(0 6px,6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%);} .skTag.right{right:6px;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));} .skTag u{text-decoration:none;font-size:12px;line-height:1;color:var(--c); text-shadow:0 0 8px currentColor;} .skTag .nm{font-size:12px;font-weight:800;color:var(--c);letter-spacing:.06em;} .skTag .sp{font-size:10px;font-weight:800;color:#5d6f85;} .skTag .sp.has{color:#ffd84a;text-shadow:0 0 8px rgba(255,216,74,.6);} .skTag .lv{font-family:Impact,"Arial Black","Hiragino Sans",sans-serif;font-style:italic; font-size:12px;color:#eaf6ff;} /* 下の帯：説明欄とスロット。 ⚠ 説明欄（.skDesc）は **スキルスロットの真上**（2026-09-07 本人の指示）。 .skFoot はツリーの窓の**外**なので、四隅の札（スキル名・Lv）とは重ならない。 */ .skFoot{flex:0 0 auto;padding:4px 10px 6px; background:linear-gradient(0deg,rgba(4,8,16,.92),rgba(4,8,16,.72) 78%,transparent);} .skDesc{margin-bottom:5px;padding:7px 9px;border-radius:9px; background:rgba(6,11,20,.9);border:1px solid rgba(122,215,255,.18);} /* ノードを選んでいないときの案内。高さは選択時と揃えて、出入りで跳ねないようにする */ .skDesc.plain{font-size:11px;color:#9fd8ff;line-height:1.45;min-height:30px; display:flex;align-items:center;} .skDesc.plain b{color:#ffd84a;font-weight:800;text-shadow:0 0 10px rgba(255,216,74,.5);} /* 選んだノードの中身。枠はそのスキルの色で光らせる */ .skDesc:not(.plain){border-color:var(--c); box-shadow:0 0 18px rgba(0,0,0,.5), inset 0 0 24px rgba(0,0,0,.45);} .sdHead{display:flex;align-items:baseline;gap:7px;margin-bottom:3px;} .sdHead u{text-decoration:none;font-size:13px;line-height:1;color:var(--c); text-shadow:0 0 9px currentColor;} .sdHead em{font-style:normal;font-size:13px;font-weight:800;color:#eaf6ff;letter-spacing:.03em;} .sdHead i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.06em; color:var(--c);padding:1px 6px;border-radius:99px; border:1px solid currentColor;opacity:.75;} .sdHead s{text-decoration:none;margin-left:auto;font-size:11px;font-weight:800;color:#9fd8ff;} .sdWhat{font-size:10px;color:#8ba0b8;line-height:1.4;margin-bottom:5px;} .sdGain{font-size:11.5px;font-weight:700;color:#cfe6ff;line-height:1.45; padding:4px 7px;border-radius:6px;background:rgba(122,215,255,.07);} .sdGain.done{color:#7dffb0;background:rgba(125,255,176,.08);} .sdGain.lock{color:#8ba0b8;background:rgba(139,160,184,.08);} .sdNow{font-size:11px;color:#8ba0b8;margin-top:4px;} .sdNow .to{color:#eaf6ff;font-weight:800;} /* 決定・やめる（ワンステップ確認） */ .sdAct{display:flex;gap:6px;margin-top:6px;} .sdOk,.sdNo{flex:1 1 0;padding:7px 6px;border-radius:8px;cursor:pointer; font-size:12px;font-weight:800;letter-spacing:.04em;line-height:1.2;} .sdOk u,.sdNo u{display:block;text-decoration:none;font-size:9px;font-weight:600; opacity:.75;margin-top:1px;letter-spacing:0;} .sdNo{flex:0 0 32%;border:1px solid rgba(122,215,255,.22); background:rgba(14,23,39,.9);color:#9fb6cf;} .sdOk{border:1px solid #ffd84a;color:#241c02; background:linear-gradient(180deg,#ffe797,#ffd84a); text-shadow:none;box-shadow:0 0 16px rgba(255,216,74,.35);} .sdOk.off{border-color:rgba(122,215,255,.2);background:rgba(14,23,39,.85); color:#7b8ba3;box-shadow:none;cursor:default;} .sdOk:not(.off):active,.sdNo:active{transform:scale(.98);} /* 強調する数字（2026-09-07 本人の指示）。 ⚠ **本文と同じ書体のまま**太く・大きく・金色にする。 Impact 系にすると後ろの「個」「秒」だけ別のフォントに落ちて文字化けに見える。 */ .num{font-family:inherit;font-style:normal;font-weight:900;font-size:1.16em; color:#ffd84a;text-shadow:0 0 10px rgba(255,216,74,.45);letter-spacing:.01em;} .skSlots{display:flex;gap:5px;} .skSlot{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px; padding:5px 2px;border-radius:9px;cursor:pointer; border:1px solid rgba(122,215,255,.22);background:rgba(14,23,39,.9);color:#9fb6cf;} .skSlot u{text-decoration:none;font-size:14px;line-height:1;color:var(--c); text-shadow:0 0 8px currentColor;} .skSlot span{font-size:8.5px;font-weight:800;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;max-width:100%;} .skSlot.has{border-color:var(--c);color:#eaf6ff;} .skSlot.lock{opacity:.4;cursor:default;} .skSlot:not(.lock):active{transform:scale(.97);} /* スロットの載せ替えの一覧（下の帯の上に出す） */ .skPick{position:absolute;left:10px;right:10px;bottom:76px;z-index:2; max-height:52%;overflow-y:auto;padding:9px 10px 6px;border-radius:12px; background:rgba(8,14,24,.97);border:1px solid rgba(122,215,255,.3); box-shadow:0 16px 44px rgba(0,0,0,.6);} .skPickHead{font-size:10px;letter-spacing:.16em;color:#7ad7ff;font-weight:800;margin-bottom:6px;} /* リザルトの SP 行 */ .rRow.lvup.sp span{font-family:inherit;font-style:normal;font-size:11px;font-weight:800; color:#ffd84a;letter-spacing:.02em;text-shadow:0 0 12px rgba(255,216,74,.55);} /* 初クリア報酬の行（2026-09-16 本人の指示）：見出しは左に小さく、中身は右寄せで1行ずつ。 文は長い（「アトミック・バースト習得」）ので数字より小さめの 19px */ .rRow.first{align-items:center;} .rRow.first span{flex:0 0 auto;font-size:11px;color:#ffd84a;text-shadow:0 0 12px rgba(255,216,74,.55);} .rRow.first b{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0; font-size:19px !important;line-height:1.15;text-align:right;} .rRow.first b i{display:block;font-style:italic;white-space:nowrap;} /* 行が多いとき（9行以上）は詰める。クリア側の下固定の枠が目標物・見出しに届かないように */ #result.dense .rRow{padding:2px 0;} #result.dense .rRow b{font-size:25px;} #result.dense .rRow.sub b{font-size:20px;} #result.dense .rRow span{font-size:13px;} #result.dense .rRow.first b{font-size:17px !important;} #result.dense .rRow.lvup span{font-size:13px;} #result.dense .rRow.lvup.sp span{font-size:10px;} #result.dense .rStats{padding:10px 14px;} /* 数字のうしろの単位（億・兆・京・垓・秭・穣）。 ⚠ 数字は Impact / 太字 / 大きめで出しているが、**その書体には漢字が無い**ので 単位まで同じ指定にすると、その字だけ別のフォントに落ちて書体が揃わない （本人には「穣が文字化けしている」ように見えていた・2026-09-06）。 単位は本文と同じ書体・太さで出すこと。 */ .rRow b u{text-decoration:none;font-family:"Helvetica Neue",-apple-system, "Hiragino Sans","Noto Sans JP",sans-serif;font-style:normal;font-weight:800; font-size:.62em;margin-left:2px;letter-spacing:0;} /* ショップ（2026-09-06 に本人の指示でモニターの中に収めた）。 背景の絵は PC の画面。**文字と品目はモニターの内側に入れる。** ⚠ `.shFrame` は**絵とまったく同じ縦横比**（583 x 1052）にしてあり、 高さを画面に合わせている。だから絵の中のモニターの位置を **割合で指せば、どの画面サイズでもぴったり合う**（cover で切ると割合がずれる）。 ⚠ モニターの画面（暗いところ）は実測で **x 9.4%〜92.3% / y 9.5%〜82.2%**。 文字が縁に触れないよう少し内側に入れてある。絵を差し替えたら測り直すこと。 */ .shFrame{position:absolute;left:50%;top:0;height:100%;aspect-ratio:583 / 1052; transform:translateX(-50%);background-image:var(--shBg,none); background-size:100% 100%;background-repeat:no-repeat;} .shScreen{position:absolute;left:11.5%;right:9.5%;top:11.5%;bottom:19.5%; display:flex;flex-direction:column;overflow:hidden;border-radius:2px; background:rgba(3,5,9,var(--shDim,.55));} #screenShop .sHead{padding:8px 10px 4px;flex:0 0 auto;} /* ショップの札（SHOP／PP 交換所／Ex 交換所。2026-09-21）。モニターの中なので少し小さめ。 PP は緑・Ex は暗い黄（ステージ選択の PRACTICE／EXTRA と同じ色） */ #shTabs{display:flex;gap:5px;flex-wrap:wrap;} .sTab.sh{padding:7px 11px;font-size:12px;letter-spacing:.05em;border-radius:9px;} .sTab.sh.pp.on{border-color:rgba(110,230,160,.8); background:linear-gradient(180deg,rgba(38,124,86,.55),rgba(14,42,30,.95));box-shadow:0 0 14px rgba(125,255,176,.3);} .sTab.sh.ex.on{border-color:rgba(214,178,40,.85); background:linear-gradient(180deg,rgba(120,98,18,.60),rgba(40,32,6,.95));box-shadow:0 0 14px rgba(255,216,74,.3);} /* 札の下の財布。いま見ている棚の通貨を**大きく**出す（2026-09-21 本人の指示） */ .shWallet{flex:0 0 auto;display:flex;align-items:baseline;gap:6px;margin:2px 10px 8px;padding:8px 12px 7px; border:1px solid rgba(122,215,255,.22);border-radius:10px;background:rgba(10,18,32,.7);} .shWallet .lbl{font-size:13px;font-weight:800;color:#8ba0b8;letter-spacing:.04em;white-space:nowrap;} .shWallet b{font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic;font-size:30px;line-height:1; color:#ffd84a;text-shadow:0 0 14px rgba(255,216,74,.5);margin-left:auto;} .shWallet s{text-decoration:none;font-size:13px;font-weight:800;color:#8ba0b8;letter-spacing:.08em;} .shWallet u{text-decoration:none;font-size:10px;color:#6f849c;letter-spacing:.02em;white-space:nowrap;} .shWallet.pp{border-color:rgba(110,230,160,.35);} .shWallet.pp b{color:#7dffb0;text-shadow:0 0 14px rgba(125,255,176,.5);} .shWallet.ex{border-color:rgba(214,178,40,.4);} .shWallet.ex b{color:#ffd84a;} #screenShop .shList{flex:1 1 auto;min-height:0;padding:0 8px 10px;} #screenShop .shLead{font-size:10px;margin:0 2px 8px;} #screenShop .shItem{padding:8px 9px;margin-bottom:6px;} #screenShop .shItem .nm{font-size:12px;} #screenShop .shItem .ds{font-size:9px;} #screenShop .shItem .pr b{font-size:15px;} #screenShop .shItem .ic{width:24px;height:24px;font-size:13px;} /* ---------- スキルツリーの拡大縮小スライダー（2026-09-06 本人の指示） ---------- 右端に縦で置く。`writing-mode` は Safari で range が縦にならないことがあるので、 **横のスライダーを回して**縦にしている（どのブラウザでも同じに出る）。 */ .skZoomBar{position:absolute;right:6px;top:50%;transform:translateY(-50%); width:26px;height:44%;display:flex;align-items:center;justify-content:center; z-index:3;pointer-events:auto;} .skZoomBar input{-webkit-appearance:none;appearance:none; width:100%;height:4px;border-radius:99px;margin:0;cursor:pointer; transform:rotate(-90deg);transform-origin:center; width:var(--zw,140px); background:linear-gradient(90deg,rgba(122,215,255,.25),rgba(122,215,255,.6));} .skZoomBar input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none; width:16px;height:16px;border-radius:50%;background:#cfe6ff; border:1px solid rgba(122,215,255,.9);box-shadow:0 0 10px rgba(122,215,255,.7);} .skZoomBar input::-moz-range-thumb{width:16px;height:16px;border-radius:50%; background:#cfe6ff;border:1px solid rgba(122,215,255,.9);} /* ---------- ショップのモニターの電子ノイズ（2026-09-06 本人の指示） ---------- **目立たない程度**にする。走査線がゆっくり流れ、ときどき一瞬だけ帯がちらつく。 ⚠ `pointer-events:none`。品目のタップを邪魔しないこと。 ⚠ 濃くしたいときは .scan / .band の opacity を上げる。 */ .shNoise{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden; mix-blend-mode:screen;} .shNoise .scan{position:absolute;left:0;right:0;top:-100%;height:300%; background:repeating-linear-gradient(180deg, rgba(150,205,255,.055) 0px, rgba(150,205,255,.055) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px); animation:shScan 7s linear infinite;} @keyframes shScan{from{transform:translateY(0)} to{transform:translateY(33.333%)}} .shNoise .band{position:absolute;left:0;right:0;height:12%;top:0;opacity:0; background:linear-gradient(180deg,rgba(0,0,0,0),rgba(180,225,255,.16),rgba(0,0,0,0)); animation:shBand 9s linear infinite;} /* ほとんどの時間は消えていて、たまに1回だけ流れる */ @keyframes shBand{ 0%,86% {opacity:0; transform:translateY(0)} 87% {opacity:.9; transform:translateY(0)} 93% {opacity:.55; transform:translateY(700%)} 95% {opacity:0; transform:translateY(820%)} 100% {opacity:0; transform:translateY(820%)}} @media (prefers-reduced-motion:reduce){.shNoise .scan,.shNoise .band{animation:none} .shNoise .band{opacity:0}} /* ---------- レベルアップのポップアップ（2026-09-06 本人の指示） ---------- リザルトの上に大きく出す。**数字を一番強く見せる**（「Lv UP！6→7」）。 ⚠ 2.8秒で自分から消える。タップでも消える。 */ #lvUp{position:absolute;inset:0;z-index:9;display:flex;align-items:center; justify-content:center;pointer-events:auto;background:rgba(3,6,12,.42);} #lvUp.hidden{display:none !important;} .lvBox{display:flex;flex-direction:column;align-items:center;gap:2px; padding:20px 34px;border-radius:16px; background:radial-gradient(ellipse at 50% 30%,rgba(24,44,78,.97),rgba(6,11,20,.97)); border:1px solid rgba(255,216,74,.55); box-shadow:0 0 40px rgba(255,216,74,.30), inset 0 1px 0 rgba(255,255,255,.14);} #lvUp.in .lvBox{animation:lvPop .5s cubic-bezier(.2,1.5,.4,1) both;} @keyframes lvPop{from{transform:scale(.6);opacity:0} to{transform:scale(1);opacity:1}} .lvTtl{font-family:Impact,"Arial Black","Hiragino Sans",sans-serif;font-style:italic; font-size:26px;letter-spacing:.12em;color:#ffd84a; text-shadow:0 0 22px rgba(255,216,74,.8),0 2px 0 rgba(60,40,0,.8);} .lvNum{display:flex;align-items:center;gap:10px;margin-top:2px;} .lvNum b{font-family:Impact,"Arial Black","Hiragino Sans",sans-serif;font-style:italic; font-size:52px;line-height:1;color:#eaf6ff;font-variant-numeric:tabular-nums; text-shadow:0 0 26px rgba(122,215,255,.85),0 3px 0 rgba(8,20,60,.9);} .lvNum b.to{color:#fff8d8;font-size:66px; text-shadow:0 0 30px rgba(255,216,74,.95),0 3px 0 rgba(60,40,0,.9);} #lvUp.in .lvNum b.to{animation:lvHit .55s cubic-bezier(.2,1.6,.4,1) .18s both;} @keyframes lvHit{from{transform:scale(.5);opacity:0} to{transform:scale(1);opacity:1}} .lvNum i{font-style:normal;font-size:26px;color:#9fb6cf;} .lvSp{margin-top:7px;font-size:11px;font-weight:800;color:#ffd84a;text-align:center; text-shadow:0 0 12px rgba(255,216,74,.5);} .lvSp:empty{display:none;} @media (prefers-reduced-motion:reduce){ #lvUp.in .lvBox,#lvUp.in .lvNum b.to{animation:none}} /* ---------- スペシャルステージの解放（2026-09-07 本人の指示） ---------- **レベルアップと同等の強調**で出す。枠と出かたは .lvBox をそのまま使い、 色だけスペシャル側（青紫）に寄せている。SE は pop_up1。 ⚠ 3.2秒で自分から消える。タップでも消える。 */ #spUp{position:absolute;inset:0;z-index:10;display:flex;align-items:center; justify-content:center;pointer-events:auto;background:rgba(3,6,12,.42);} #spUp.hidden{display:none !important;} .spBox{border-color:rgba(168,140,255,.60) !important; background:radial-gradient(ellipse at 50% 30%,rgba(38,28,86,.97),rgba(8,8,22,.97)) !important; box-shadow:0 0 44px rgba(168,140,255,.34), inset 0 1px 0 rgba(255,255,255,.14) !important;} #spUp.in .spBox{animation:lvPop .5s cubic-bezier(.2,1.5,.4,1) both;} .spBox .lvTtl{color:#c9b6ff;font-size:20px; text-shadow:0 0 22px rgba(168,140,255,.85),0 2px 0 rgba(20,8,50,.8);} .spName{white-space:pre-line;font-family:Impact,"Arial Black","Hiragino Sans",sans-serif;font-style:italic; font-size:40px;line-height:1.1;margin-top:4px;color:#fff8d8;text-align:center; text-shadow:0 0 30px rgba(255,216,74,.9),0 3px 0 rgba(40,20,60,.9);} #spUp.in .spName{animation:lvHit .55s cubic-bezier(.2,1.6,.4,1) .18s both;} .spLead{margin-top:6px;font-size:13px;font-weight:800;color:#eaf6ff; text-shadow:0 0 12px rgba(122,215,255,.6);} .spWhere{color:#c9b6ff !important;font-weight:700;} @media (prefers-reduced-motion:reduce){ #spUp.in .spBox,#spUp.in .spName{animation:none}} /* ジェネシス・セル GET！（2026-09-16 本人の指示）。同じ枠で、色を赤（セルの絵の色）に寄せる */ .spImg{width:96px;height:96px;object-fit:contain;margin-top:6px; filter:drop-shadow(0 0 18px rgba(255,90,110,.75));} .spImg.hidden{display:none !important;} #spUp.in .spImg{animation:lvHit .55s cubic-bezier(.2,1.6,.4,1) .10s both;} #spUp.cell .spBox{border-color:rgba(255,120,140,.62) !important; background:radial-gradient(ellipse at 50% 30%,rgba(86,24,40,.97),rgba(22,6,12,.97)) !important; box-shadow:0 0 44px rgba(255,90,110,.36), inset 0 1px 0 rgba(255,255,255,.14) !important;} #spUp.cell .lvTtl{color:#ffb3bf;text-shadow:0 0 22px rgba(255,90,110,.85),0 2px 0 rgba(50,8,20,.8);} #spUp.cell .spName{font-size:34px;} #spUp.cell .spWhere{color:#ffd0d8 !important;} /* ステータス・ショップ・ステージ一覧に出すセルの小さい絵 */ .cellIc{width:22px;height:22px;object-fit:contain;vertical-align:-6px;margin-right:6px;} .shItem .ic img{width:100%;height:100%;object-fit:contain;display:block;} .sChap.cell{color:#ff8fa8;} .pRow.cell .nm u{display:block;} /* ステージ一覧（SPECIAL）の「初回のみジェネシス・セル」の行 */ .sBtn .cellAt{display:flex;align-items:center;gap:4px;margin-top:3px;font-size:10px; font-weight:700;color:#ff9fb0;line-height:1.3;} .sBtn .cellAt img{width:14px;height:14px;object-fit:contain;flex:0 0 auto;} .sBtn .cellAt.got{color:#8ba0b8;} /* ---------- ショップの購入確認（2026-09-07 本人の指示） ---------- **ワンステップ確認。**押した品の名前・値段・買ったあとの残りを出してから買う。 スキルツリーの説明欄（.sdAct）と同じ「やめる／決定」の並び。 */ #buyOk{position:absolute;inset:0;z-index:11;display:flex;align-items:center; justify-content:center;pointer-events:auto;background:rgba(3,6,12,.60);} #buyOk.hidden{display:none !important;} /* 確認の小窓（gameAsk。2026-10-07）。チュートリアルの重ね（#tut 60）・案内（#spot 180）より前、アイキャッチ（200）より後ろ */ #stage .soCarry .noUse{font-style:normal;color:#ff9a7a;} #gameAsk{position:absolute;inset:0;z-index:190;display:flex;align-items:center;justify-content:center;pointer-events:auto;background:rgba(3,6,12,.60);} .boBox{display:flex;flex-direction:column;align-items:stretch; width:min(80%,300px);padding:16px 18px 14px;border-radius:14px; background:radial-gradient(ellipse at 50% 0%,rgba(18,34,60,.98),rgba(6,11,20,.98)); border:1px solid rgba(122,215,255,.45); box-shadow:0 0 34px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); animation:lvPop .28s cubic-bezier(.2,1.4,.4,1) both;} .boTtl{font-size:11px;font-weight:800;letter-spacing:.18em;color:#8ba0b8;text-align:center;} .boName{margin-top:6px;font-size:17px;font-weight:800;color:#eaf6ff;text-align:center; line-height:1.3;} /* 絵のアイコン（ジェネシス・セル）は文字の高さに揃える。2026-09-16 */ .boName img{width:28px;height:28px;object-fit:contain;vertical-align:-8px;} .boDesc{margin-top:4px;font-size:11px;color:#9fb6cf;text-align:center;line-height:1.45;} .boFig{margin-top:10px;padding:8px 10px;border-radius:9px; background:rgba(0,0,0,.32);border:1px solid rgba(122,215,255,.16);} .boRow{display:flex;align-items:baseline;justify-content:space-between;gap:8px; font-size:11px;color:#9fb6cf;padding:2px 0;} .boRow b{font-size:16px;font-weight:800;color:#eaf6ff;font-variant-numeric:tabular-nums;} .boRow.rest{margin-top:3px;padding-top:5px;border-top:1px solid rgba(122,215,255,.16);} .boRow.rest b{color:#ffd84a;} .boAct{display:flex;gap:8px;margin-top:12px;} .boAct button{flex:1;padding:9px 0;border-radius:9px;cursor:pointer; font-family:inherit;font-size:13px;font-weight:800;} .boNo{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#c8d6e6;} .boYes{background:linear-gradient(180deg,rgba(255,216,74,.95),rgba(226,168,20,.95)); border:1px solid rgba(255,236,160,.8);color:#2a1e00; box-shadow:0 0 18px rgba(255,216,74,.35);} @media (prefers-reduced-motion:reduce){.boBox{animation:none}} /* ========================================================= EXTRA ステージまわり（2026-09-07 本人の指示で新規） ========================================================= */ /* ステージ選択の札（NORMAL / SPECIAL / EXTRA）。 ⚠ EXTRA は解放されるまで **DOM ごと作らない**（ui.js の buildSelectTabs）。 */ #sTabs{display:flex;gap:5px;} .sTab{padding:6px 12px;border-radius:8px;cursor:pointer;font-family:inherit; font-size:11px;font-weight:800;letter-spacing:.06em; border:1px solid rgba(122,215,255,.28);background:rgba(14,23,39,.9);color:#9fb6cf;} .sTab.on{border-color:rgba(122,215,255,.75);color:#eaf6ff; background:linear-gradient(180deg,rgba(60,110,175,.55),rgba(20,34,56,.95)); box-shadow:0 0 12px rgba(122,215,255,.28) inset;} .sTab.special.on{border-color:rgba(168,140,255,.8); background:linear-gradient(180deg,rgba(96,70,180,.55),rgba(26,20,54,.95));} /* EXTRA は**暗めの黄色**（2026-09-19 本人の指示。橙 → 暗い黄） */ .sTab.extra.on{border-color:rgba(214,178,40,.85); background:linear-gradient(180deg,rgba(120,98,18,.60),rgba(40,32,6,.95));} /* STORY の札（2026-09-18・枠だけ）。選べないことが分かるよう薄く・破線 */ .sTab.story.soon{opacity:.55;border-style:dashed;color:#8391a6;} /* 「今後実装予定」のポップアップ。#spUp と同じ置きかた */ #soonPop{position:absolute;inset:0;z-index:10;display:flex;align-items:center; justify-content:center;pointer-events:auto;background:rgba(3,6,12,.42);} #soonPop.hidden{display:none !important;} #soonPop .lvBox{border-color:rgba(122,215,255,.5);} #soonPop.in .lvBox{animation:lvPop .5s cubic-bezier(.2,1.5,.4,1) both;} /* プラクティスの札は**緑**。ノーマル（青）・スペシャル（紫）・EXTRA（橙）と分ける */ .sTab.practice.on{border-color:rgba(110,230,160,.8); background:linear-gradient(180deg,rgba(38,124,86,.55),rgba(14,42,30,.95));} .sTab:active{transform:scale(.97);} /* ========================================================= プラクティスのレベル選び（2026-09-11 本人の指示で新規） **面は1つ。代わりにレベルを選ぶ。**上に大きく今のレベル、下に一覧。 ========================================================= */ .pBox{margin:8px 2px 14px;padding:14px 14px 12px;border-radius:14px; border:1px solid rgba(110,230,160,.34);background:rgba(10,26,20,.86); box-shadow:0 8px 26px rgba(0,0,0,.45), inset 0 0 30px rgba(110,230,160,.06);} .pTop{display:flex;align-items:baseline;justify-content:center;gap:8px;} .pLbl{font-size:11px;font-weight:800;letter-spacing:.18em;color:#8fe6b6;} .pLv{font-family:Impact,"Arial Black","Helvetica Neue",sans-serif;font-style:italic; font-size:40px;line-height:1;color:#eafff2;text-shadow:0 0 18px rgba(110,230,160,.6);} .pMax{font-size:12px;font-weight:800;color:#7b9a8a;} .pFig{margin-top:6px;text-align:center;font-size:12px;font-weight:700;color:#cfe6da;} .pFig b{font-size:16px;color:#eafff2;} .pStep{display:flex;gap:8px;margin:12px 0 10px;} .pB{flex:1 1 0;padding:10px 0;border-radius:10px;cursor:pointer;font-family:inherit; font-size:13px;font-weight:800;letter-spacing:.04em; border:1px solid rgba(110,230,160,.35);background:rgba(16,38,29,.92);color:#cfe6da;} .pB:active{transform:scale(.96);} .pGo{display:block;width:100%;padding:14px 0;border:0;border-radius:12px;cursor:pointer; font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; font-weight:900;font-size:16px;letter-spacing:.16em;text-indent:.16em;color:#04120b; background:linear-gradient(180deg,#9fe9c0,#6fd6a4); box-shadow:0 8px 24px rgba(60,180,120,.32), inset 0 1px 0 rgba(255,255,255,.6);} .pGo:active{transform:scale(.98);} /* 一覧の行。緑に寄せ、いま選んでいるレベルだけ枠を光らせる */ .sBtn.practice{border-color:rgba(110,230,160,.28);} .sBtn.practice.on{border-color:rgba(110,230,160,.85); box-shadow:0 0 14px rgba(110,230,160,.30) inset;} /* EXTRA の行。**暗めの黄色**（2026-09-19 本人の指示。以前は橙） */ .sBtn.extra{border-color:rgba(214,178,40,.34);background:rgba(28,24,8,.90);} .sBtn.extra.playable{border-color:rgba(214,178,40,.80); box-shadow:0 0 14px rgba(214,178,40,.22) inset;background:rgba(36,30,8,.92);} .sBtn.extra .no,.sBtn.special.extra.playable .no{color:#d6b228;} /* `.sBtn.special.playable .no`（桃）より強く */ .sBtn.extra .st{color:#d6b228;} .sBtn.extra.locked .st{color:#7b8ba3;} /* ホーム中央下の並び（2026-09-07 本人の指示）。 「続きから」の左右に SPECIAL / EXTRA。**解放されるまで出さない。** */ .hGo{position:absolute;left:0;right:0;bottom:78px;z-index:3; display:flex;align-items:stretch;justify-content:center;gap:8px;padding:0 14px;} /* ⚠ **`.hJump`（ホームの SPECIAL / EXTRA の近道）は 2026-09-11 に本人の指示で廃止。** 絵柄は残してあるので、復活させるときは `index.html` にボタンを戻すだけでいい。 いまはどこからも使っていない。 */ .hJump{flex:0 0 auto;min-width:74px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:1px;padding:8px 10px;border-radius:12px; cursor:pointer;font-family:inherit; border:1px solid rgba(168,140,255,.6);color:#eaf6ff; background:linear-gradient(180deg,rgba(52,38,102,.92),rgba(16,12,34,.94)); box-shadow:0 0 16px rgba(168,140,255,.22), inset 0 1px 0 rgba(255,255,255,.10);} .hJump.hidden{display:none !important;} .hJump u{text-decoration:none;font-size:17px;font-weight:900;line-height:1; font-family:Impact,"Arial Black","Hiragino Sans",sans-serif;font-style:italic;} .hJump span{font-size:9px;font-weight:800;letter-spacing:.08em;opacity:.85;} .hJump.hEx{border-color:rgba(255,182,74,.65); background:linear-gradient(180deg,rgba(96,62,18,.92),rgba(30,18,6,.94)); box-shadow:0 0 16px rgba(255,182,74,.22), inset 0 1px 0 rgba(255,255,255,.10);} .hJump:active{transform:translateY(1px) scale(.98);} /* 「続きから」は横並びの中に入れる。 ⚠ 元は `position:absolute` ＋ `translateX(-50%)` で中央に置いていた。 横並び（`.hGo`）に入れたので**その2つを解除する**。 `:active` の縮みも translateX を持っていたので入れ直す。 */ .hGo .hStart{position:static;transform:none;flex:1 1 auto; min-width:0;max-width:236px;padding:13px 18px;} .hGo .hStart:active{transform:translateY(1px) scale(.98);} /* 絵のボタン（2026-09-16 本人の指示・`icon_2/next_stage.png`）。 絵は横長の札で、**左に NEXT の丸、右が空白**。空白に「STAGE 1-2」だけ書く。 ⚠ 文字の位置（left 45%）は絵に合わせた実測。絵を差し替えたら取り直す。 */ .hGo .hStart.img{position:relative;left:auto;bottom:auto;padding:0;border:0;background:none;box-shadow:none; max-width:232px;width:57%;border-radius:0;overflow:visible;margin-bottom:14px;} .hGo .hStart.img img{display:block;width:100%;height:auto; filter:drop-shadow(0 8px 22px rgba(60,120,220,.45));} .hGo .hStart.img span{display:none;} /* 空白に「STAGE」「5-5」を**二段**で大きく（2026-09-16 本人の指示）。幅は絵の空白に合わせて cqw で決める */ .hGo .hStart.img b{position:absolute;left:44%;right:5%;top:8%;bottom:8%;margin:0; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0; color:#eaf6ff;letter-spacing:.02em;white-space:nowrap;line-height:1; text-shadow:0 0 14px rgba(122,215,255,.8),0 2px 0 rgba(8,20,60,.9);} .hGo .hStart.img b i{display:block;font-style:italic;} .hGo .hStart.img b i.w1{font-size:26px;} .hGo .hStart.img b i.w2{font-size:36px;margin-top:2px;} /* S-6「THE HARDEST」（2026-09-25）は長いので小さく。⚠ 本人の指摘で枠からはみ出していた → **ボタンの幅に合わせた大きさ**（cqw）にして 文字の幅がボタンの約 40% に収まるようにし、右の丸い縁に掛からないよう少し左へ寄せる */ .hGo .hStart.img{container-type:inline-size;} .hGo .hStart.img b i.w2.long{font-size:min(17px,7.4cqw);margin-top:6px;letter-spacing:0;white-space:nowrap;transform:translateX(-4%);} .hGo .hStart.img:active img{filter:brightness(.8) drop-shadow(0 4px 12px rgba(60,120,220,.45));} /* Ex ポイントの見せかた（金色寄り）。ふつうのポイントと混ぜない */ /* ========================================================= スキルの「さらに強化」（2026-09-11 本人の指示） **ツリーを全部開けたあと、1か所につき5段階まで盛れる。** 盛ったノードは外側にもう1本輪が出て、右上に「+3」のように段数が付く。 ========================================================= */ .tn .pring{fill:none;stroke:var(--c);stroke-width:.5;opacity:.55; stroke-dasharray:2.4 2.0;} .tn.pmax .pring{opacity:.95;stroke-width:.7;stroke-dasharray:none;} /* 「+5」は小さく、**最前面**（ノードの上に別の層 `.pnums` として最後に描く。2026-09-19 本人の指示） */ .pnums{pointer-events:none;} .pnum{font-size:3.4px;font-weight:900;fill:var(--c);text-anchor:middle; dominant-baseline:middle;paint-order:stroke;stroke:rgba(4,8,16,.5);stroke-width:.8px;} .pnum.pmax{fill:#ffe27a;} #stage.whiteUI .pnum{stroke:rgba(255,255,255,.3);stroke-width:.8px;} /* 縁の白は薄く（2026-09-19 2回目） */ /* 2026-09-24 本人の指摘「+5 の白い縁が消えている」：外側に薄い白縁。黒い細縁の外に白を重ねる */ #stage.whiteUI .pnum,.pnum{stroke:rgba(255,255,255,.62);stroke-width:1px;stroke-linejoin:round;} /* 説明欄の「さらに強化　+2 / 5 段階」の行 */ .sdGain.more{color:#ffe27a;} .sdGain.more b{font-size:15px;} /* 四隅の札に出す合計（Lv.11 +7 の「+7」） */ .skTag .lv .pl{font-style:normal;margin-left:3px;color:#ffe27a;font-weight:900;} .sChap.ex{color:#ffd84a;} /* PP 交換所（2026-09-21）。棚の見出しと所持 PP は緑。LOCK は薄く、SOON（保留）は少し薄く */ .sChap.pp{color:#7dffb0;} .shLead.pp .ppNum{color:#7dffb0;} .shItem.lock{opacity:.4;} .shItem.lock .nm,.shItem.lock .ds{color:#8ba0b8;} .shItem.hold{opacity:.6;} .shItem.lock .pr b,.shItem.hold .pr b{font-size:13px;color:#8ba0b8;} .shLead.ex .exNum,.rRow.gain.ex b,.pRow.ex .vl,.pRow.pt .vl,.pRow.pp .vl{color:#ffd84a;} .pRow .vl s.w{color:#ffffff;} /* 最大連鎖の「連鎖」は白（2026-09-30） */ /* ステータスの習得した力（アトミック・バースト／レゾナンス）の名前は大きく（2026-09-30 本人の指示） */ #screenStatus .pRow.pw .nm{font-size:19px;} #screenStatus .pRow.pw .nm u{font-size:11px;margin-top:4px;} /* ========================================================= 白幕（2026-09-09 本人の指示） 画面の切り替えをディゾルブでつなぐ。**1枚しか無い**ので、 タイトル→OP／OP→チュートリアル／チュートリアル→ステージ で使い回す。 ⚠ 白の上では指を通さない（切り替えの途中に触られないように）。 ========================================================= */ /* ⚠ z-index は**画面のどの部品よりも上**にする。スキップ（.stSkip）や ⏸ が 白の上に残って見えていた（2026-09-09 本人の指摘）。 */ #veil{position:absolute;inset:0;z-index:900;background:#fff; opacity:0;pointer-events:none; transition:opacity var(--veilT,1s) ease;} #veil.on{opacity:1;pointer-events:auto;} /* ========================================================= 案内のスポットライト（2026-09-09 本人の指示） **そこ以外を暗くして、そこ以外は押せなくする。** 穴は box-shadow を使って開ける（1枚の要素で「まわりだけ暗い」を作れる）。 ========================================================= */ #spot{position:absolute;inset:0;z-index:180;} #spot.hidden{display:none !important;} #spot .spotHole{position:absolute; left:var(--sx,50%);top:var(--sy,50%); width:var(--sw,120px);height:var(--sh,60px); transform:translate(-50%,-50%); border-radius:var(--sr,14px); box-shadow:0 0 0 9999px rgba(2,5,11,.86), 0 0 26px rgba(122,215,255,.55) inset; border:2px solid rgba(122,215,255,.9); animation:spotPulse 1.8s ease-in-out infinite; pointer-events:none; transition:left .35s ease,top .35s ease,width .35s ease,height .35s ease;} @keyframes spotPulse{0%,100%{box-shadow:0 0 0 9999px rgba(2,5,11,.86),0 0 26px rgba(122,215,255,.45) inset} 50%{box-shadow:0 0 0 9999px rgba(2,5,11,.86),0 0 40px rgba(122,215,255,.85) inset}} #spot .spotMsg{position:absolute;left:16px;right:16px; bottom:calc(14% + 0px); padding:15px 16px 13px;border-radius:14px; background:rgba(6,12,22,.95);border:1px solid rgba(122,215,255,.42); box-shadow:0 14px 44px rgba(0,0,0,.7);} #spot .spotMsg.top{bottom:auto;top:22%;} #spot .spotMsg p{margin:0 0 12px;font-size:14px;font-weight:700;line-height:1.7;color:#eaf6ff;white-space:pre-line;} /* \n で改行（2026-09-22。ショップの説明の箇条書き） */ #spot .spotNext{display:block;margin-left:auto;padding:8px 20px;border:0;border-radius:10px; font-size:13px;font-weight:800;letter-spacing:.06em;color:#04121f;cursor:pointer; background:linear-gradient(135deg,#9fe0ff,#c7b4ff);} /* ⚠ **初回の案内が終わるまで一時停止ボタンを出さない**（2026-09-10 本人の指示）。 プロローグ・チュートリアル・最初の 1-1 のあいだ。 進みかたは「スキップ」と台詞のタップだけに絞って、迷わせない。 */ #stage.introOn #pauseBtn{display:none !important;} /* EXTRA の難易度（レベル）の札（2026-09-16 本人の指示。EX-2／EX-3）。 面のボタンの**すぐ下**に並ぶ。選んでいるものが光り、クリア済みには ✓ */ .exLv{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-4px 0 10px 0;padding:0 4px;} .exLvNote{font-size:10px;color:#8ba0b8;margin-right:2px;} .exLvBtn{padding:5px 12px;border-radius:8px;border:1px solid rgba(214,178,40,.40); background:rgba(14,23,39,.9);color:#c6d6e8;font-size:12px;font-weight:800;cursor:pointer; font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic;letter-spacing:.06em;} .exLvBtn i{font-style:normal;font-size:9px;color:#ffd84a;margin-left:3px;} .exLvBtn.on{border-color:rgba(255,216,74,.85);color:#fff8d8;background:rgba(60,44,14,.92); box-shadow:0 0 12px rgba(255,216,74,.35);} .exLvBtn:active{transform:translateY(1px);} /* タイムアタック（EX-5。2026-09-20）のベスト5。レベルの札の下に横並び */ .exLv.taRec{margin-top:-6px;} .taT{font-size:12px;font-weight:800;color:#ffe9a6;letter-spacing:.04em; font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic;} .taT i{font-style:normal;font-size:9px;color:#8ba0b8;margin-right:3px;} .taT.none{font-family:inherit;font-style:normal;font-weight:600;color:#8ba0b8;font-size:10px;} /* リザルトのタイムとベスト5 */ .rRow.ta b{color:#ffe9a6;} .rRow.taList b{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:14px !important;line-height:1.15;} .rRow.taList b i{display:block;font-style:italic;white-space:nowrap;color:#c6d6e8;} .rRow.taList b i.now{color:#ffd84a;text-shadow:0 0 10px rgba(255,216,74,.55);} #result.dense .rRow.taList b{font-size:12px !important;} /* ========================================================= 白い背景の画面（2026-09-19 本人の指示：ホーム／ステージ選択／ステータス／スキル／実績） --------------------------------------------------------- `#stage.whiteUI` のあいだ、白地に直接のっている薄い文字（見出し・注記）を濃くする。 暗い札（.pRow .acRow .sBtn）はそのまま＝白地の上でも読める。 スキル画面は**土台の絵・光・立ち絵を出さない**（本人「無くしても大丈夫」）。線とノードは濃く。 ========================================================= */ #stage.whiteUI .sChap,#stage.whiteUI .pSec,#stage.whiteUI .skPickHead, #stage.whiteUI .pLv em{color:#3a5678;} #stage.whiteUI .pSec b,#stage.whiteUI .sChap b{color:#5a6f88;} #stage.whiteUI .pLv b{color:#15243a;text-shadow:none;} #stage.whiteUI .pLv i,#stage.whiteUI .pNote,#stage.whiteUI .acCount i,#stage.whiteUI .acLeft u, #stage.whiteUI .acLeft.off,#stage.whiteUI .exLvNote{color:#5a6a80;} #stage.whiteUI .pBar{background:rgba(20,40,70,.12);} #stage.whiteUI .acCount b{color:#15243a;text-shadow:none;} #stage.whiteUI .acCount em,#stage.whiteUI .acLeft{color:#b07a00;} #stage.whiteUI .sHead span{color:#15243a;text-shadow:none;} #stage.whiteUI .exNote,#stage.whiteUI .sNote{color:#3a4a60;} /* スキル画面：光・立ち絵は出さない。**土台の絵（.skBase）は残す**（2026-09-19 本人「下地だけは継続」）。線とノードを白地向けに */ #stage.whiteUI .skGlow,#stage.whiteUI .skHand,#stage.whiteUI .skBg{display:none !important;} #stage.whiteUI .tl{stroke:rgba(40,70,110,.28);} #stage.whiteUI .thub{stroke:rgba(40,70,110,.55);} #stage.whiteUI .thub2{fill:rgba(40,70,110,.55);} #stage.whiteUI .tn .dot{fill:rgba(255,255,255,.92);stroke:rgba(40,70,110,.55);stroke-width:.6;} #stage.whiteUI .tn .ti{fill:#2f4460;} #stage.whiteUI .tn.lock .dot{opacity:.55;} #stage.whiteUI .tn.on .dot{fill:rgba(255,255,255,.95);stroke-width:.45;} #stage.whiteUI .tn.sel .selr{stroke:#15243a;} #stage.whiteUI .skZoomBar{filter:invert(.7);} /* ========================================================= 生成解放（2026-09-19）：ホームの「次の目標」カード・図鑑／統計ボタン・図鑑・統計 ========================================================= */ #hGoal{position:absolute;z-index:3;left:50%;top:64%;transform:translateX(-50%); width:78%;max-width:340px;padding:8px 12px;border-radius:12px;text-align:center; background:rgba(12,20,34,.90);border:1px solid rgba(214,178,40,.55); box-shadow:0 6px 18px rgba(0,0,0,.18);color:#eaf4ff;line-height:1.35;} #hGoal.hidden{display:none !important;} #hGoal em{display:block;font-family:Impact,"Arial Black","Hiragino Sans",sans-serif;font-style:italic; font-size:10px;letter-spacing:.2em;color:#ffd84a;} #hGoal b{display:block;font-size:14px;font-weight:900;letter-spacing:.02em;} #hGoal span{display:block;font-size:12px;color:#c6d6e8;} #hGoal span i{font-style:normal;color:#ffe27a;font-weight:800;} #hGoal u{display:block;text-decoration:none;font-size:10px;color:#8ba0b8;margin-top:2px;} .hSide{position:absolute;z-index:3;right:12px;top:52px;display:flex;flex-direction:column;gap:6px;} .hSide button{display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:11px;cursor:pointer; font-family:inherit;font-size:12px;font-weight:800;color:#eaf4ff; border:1px solid rgba(122,215,255,.45);background:linear-gradient(180deg,rgba(24,40,66,.94),rgba(10,17,29,.94)); box-shadow:0 6px 18px rgba(0,0,0,.18);} .hSide button u{text-decoration:none;font-size:14px;line-height:1;color:#7ad7ff;} .hSide button.soon{border-style:dashed;opacity:.8;} /* 本来は 5-1 で開く（いまは見るために常に押せる） */ .hSide button:active{transform:translateY(1px) scale(.98);} /* 絵のボタン（2026-09-23 本人制作の DEX／DATA）。丸い絵そのものを置く＝枠も背景も出さない */ .hSide{gap:8px;} .hSide button.img{padding:0;border:0;background:none;box-shadow:none;width:56px;height:56px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));} .hSide button.img img{display:block;width:100%;height:100%;object-fit:contain;} .hSide button.img.soon{opacity:.55;filter:grayscale(.5) drop-shadow(0 4px 10px rgba(0,0,0,.45));} .hSide button.img:active{transform:scale(.94);} @media (max-height:640px){.hSide button.img{width:48px;height:48px;}} #screenCollect,#screenStats{justify-content:flex-start;} /* 図鑑の札（GENERATE／ITEM。2026-09-21）と「アイテム」の行 */ #screenCollect .sHead,#screenStats .sHead{padding:8px 14px 2px;flex:0 0 auto;} /* 図鑑／統計のホームへ戻るボタン（2026-09-29）。上の帯に置くのでスクロールしても動かない */ .homeBack{flex:0 0 auto;padding:8px 14px;border:1px solid rgba(122,215,255,.45);border-radius:9px; background:rgba(12,20,34,.92);color:#cfe6ff;cursor:pointer; font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic;font-size:14px;letter-spacing:.08em;} .homeBack:active{transform:scale(.96);} #colTabs{display:flex;gap:5px;} .sTab.col.item.on{border-color:rgba(214,178,40,.85); background:linear-gradient(180deg,rgba(120,98,18,.60),rgba(40,32,6,.95));box-shadow:0 0 14px rgba(255,216,74,.3);} .itmRow{display:flex;align-items:center;gap:10px;padding:9px 10px;margin-bottom:6px;border-radius:10px; border:1px solid rgba(122,215,255,.18);background:rgba(16,26,44,.88);} .itmRow .ic{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center; font-size:15px;font-weight:900;background:rgba(255,255,255,.06);color:#5a6f88;} .itmRow .ic img{width:100%;height:100%;object-fit:contain;display:block;} .itmRow .mid{flex:1 1 auto;min-width:0;} .itmRow .nm{display:block;font-size:14px;font-weight:900;color:#7b8ba3;} .itmRow.own .nm{color:#eaf4ff;} .itmRow .ds{display:block;font-size:10.5px;color:#8ba0b8;margin-top:2px;line-height:1.35;} .itmRow .ct{flex:0 0 auto;text-align:right;font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic; font-size:16px;color:#7dffb0;} .itmRow .ct s{display:block;text-decoration:none;font-family:inherit;font-style:normal;font-size:9px;color:#6f849c;letter-spacing:.06em;} .itmRow.own{border-color:rgba(125,255,176,.35);} #screenCollect .pBody,#screenStats .pBody{width:100%;flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 14px 12px;} .colGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px;} .colCard{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px 7px;border-radius:10px; border:1px solid rgba(122,215,255,.22);background:rgba(16,26,44,.88);text-align:center;} .colCard.done{border-color:rgba(214,178,40,.55);} .colPic{width:64px;height:64px;} .colNo{font-family:Impact,"Arial Black","Hiragino Sans",sans-serif;font-style:italic;font-size:11px;color:#9fb6cf;letter-spacing:.06em;} .colNm{font-size:12px;font-weight:900;color:#eaf4ff;line-height:1.2;word-break:keep-all;} .colCard:not(.done) .colNm{color:#7b8ba3;} .colGen{font-size:9px;font-weight:700;color:#c6d6e8;line-height:1.25;} .colCard.done .colGen{color:#ffe27a;} .colGen.hold{color:#7b8ba3;} /* ========================================================= 文節で折り返す（2026-09-20 本人の指示）。文字は config.js の jpWrap() が文節の切れ目に ZWSP を入れる。 keep-all で ZWSP・空白・改行のところだけで折り返し、1 文節が枠より長いときだけ字の途中で折る。 ========================================================= */ .stText,#spot .spotMsg p,#toast span,.spName,.spLead,.spWhere,.boDesc,#hGoal b,#hGoal span,.acLeft,.mHint,.pNote {word-break:keep-all;overflow-wrap:anywhere;} #toast{white-space:normal;} /* ========================================================= 文字を大きく（2026-09-20 本人の指示） ・ステータスの見出し（能力／スキルの効果／ジェネシス・セル／ポイント／記録）は **2倍** ・ショップの見出しと品目・所持P ・図鑑（特にステージ番号） ・実績の「まとめて受取」の件数と P、各実績の報酬 ========================================================= */ #screenStatus .pSec{font-size:20px;letter-spacing:.12em;margin:18px 2px 9px;} #screenStatus .pSec b{font-size:12px;} .sChap{font-size:16px;letter-spacing:.12em;} #screenShop .shItem .nm{font-size:15px;} #screenShop .shItem .nm b{font-size:12px;} #screenShop .shItem .ds{font-size:10.5px;} #screenShop .shItem .pr b{font-size:18px;} .sHead .shPt{font-size:15px;} .sHead .shPt b{font-size:24px;} #screenCollect .pSec{font-size:14px;letter-spacing:.14em;} .colNo{font-size:16px;color:#7b8ba3;} .colNm{font-size:15px;} .colGen{font-size:11.5px;} .acAll{font-size:16px;} .acAll u{font-size:14px;margin-top:3px;} .acRw{font-size:13px;} .acRw b{font-size:16px;} /* ステージの確認（2026-09-20）。購入確認（.boBox）の見た目を使い回す */ #stageOk{position:absolute;inset:0;z-index:11;display:flex;align-items:center; justify-content:center;pointer-events:auto;background:rgba(3,6,12,.66);} #stageOk.hidden{display:none !important;} .soBox{width:min(84%,320px);max-height:92%;} /* 持ち込みのリストが長いときは数字の欄ごとスクロール（2026-09-22） */ .soBox .soFig{overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;} .soTtl{font-family:Impact,"Arial Black","Hiragino Sans",sans-serif;font-style:italic;font-size:14px;letter-spacing:.14em;color:#ffd84a;} .soPic{display:block;width:min(62%,200px);height:auto;aspect-ratio:1/1;margin:8px auto 2px;} .soName{font-size:22px;} .soDesc:empty{display:none;} .soFig .boRow{font-size:12px;} .soFig .boRow b{font-size:15px;} .colGen,.acNm,.shItem .nm{word-break:keep-all;overflow-wrap:anywhere;} /* ステージ選択の札（GENERATE／PRACTICE／SPECIAL／EXTRA／STORY）をもう少し大きく目立たせる（2026-09-20 本人の指示） */ .sTab{padding:9px 15px;font-size:14px;letter-spacing:.08em;border-radius:10px;} .sTab.on{box-shadow:0 0 14px rgba(122,215,255,.35);} /* ステータスの NEXT の経験値を大きく（2026-09-20 本人の指示） */ #screenStatus .pLv i{font-size:14px;font-weight:800;color:#9fb6cf;} #screenStatus .pLv i b{font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic; font-size:26px;color:#ffd84a;margin-left:4px;text-shadow:0 0 12px rgba(255,216,74,.45);} /* 新しい力の取得（アトミック・バースト／レゾナンス。2026-09-20）：金色で強調 */ #spUp.power .spBox{border-color:rgba(255,216,74,.75) !important;box-shadow:0 0 40px rgba(255,216,74,.35),0 0 90px rgba(255,160,40,.25);} #spUp.power .lvTtl{color:#ffe27a;text-shadow:0 0 22px rgba(255,216,74,.9),0 2px 0 rgba(60,40,0,.8);} #spUp.power .spName{color:#fff3c0;text-shadow:0 0 18px rgba(255,216,74,.9),0 0 40px rgba(255,160,40,.6);} #spUp.power .spWhere{color:#ffe9a8 !important;} /* 取得・解放のテロップの書体（2026-09-20 本人「太めのしっかりした書体に」）： Impact の斜体（日本語が無い）をやめて、太いゴシックを立てて出す。英字の見出し（.lvTtl）はそのまま */ .spName{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","Meiryo",sans-serif; font-style:normal;font-weight:900;letter-spacing:.04em;font-size:34px;} #spUp.cell .spName{font-size:30px;} /* ショップの見出しの括弧書き（PP 交換所（プラクティスポイント）など）は小さく（2026-09-21 本人の指示） */ .sChap small{font-size:.62em;font-weight:600;letter-spacing:.02em;opacity:.8;margin-left:2px;} /* テロップ風の数字（2026-09-22。js/telop.js の telopHTML）。高さ 1em の絵を背景に、字ごとに幅と位置を em で */ .tg{display:inline-block !important;height:1em;vertical-align:-0.12em;background:url(/icon/telop_digits.png) no-repeat;background-size:auto 1em;} /* !important＝#tgtInfo の i{display:none} に勝つ */ /* fps の表示（2026-09-23。TUNE「演出」→「fps を出す」が 1 のときだけ出る） */ #fpsBox{position:absolute;z-index:9;right:10px;bottom:44px;padding:3px 7px;border-radius:7px; font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.04em;color:#9fe8ff; background:rgba(4,9,16,.72);border:1px solid rgba(122,215,255,.3);pointer-events:none;} /* ステージ選択の札の色（2026-09-24 本人の指示）：GENERATE＝赤／PRACTICE＝白と灰色／SPECIAL＝青／EXTRA＝緑。 選んでいないときも縁と字にうっすら色を付け、選んだ札は色の帯で塗る */ .sTab.normal{border-color:rgba(255,90,90,.45);color:#ff9a9a;} .sTab.normal.on{border-color:rgba(255,90,90,.9);color:#fff; background:linear-gradient(180deg,rgba(200,40,40,.75),rgba(70,10,14,.95));box-shadow:0 0 14px rgba(255,70,70,.45);} .sTab.practice{border-color:rgba(200,206,214,.5);color:#d4d9e0;} .sTab.practice.on{border-color:rgba(245,247,250,.95);color:#1c2430; background:linear-gradient(180deg,#ffffff,#9ea6b2);box-shadow:0 0 14px rgba(220,226,234,.45);} .sTab.special{border-color:rgba(80,150,255,.5);color:#8fc0ff;} .sTab.special.on{border-color:rgba(90,160,255,.9);color:#fff; background:linear-gradient(180deg,rgba(40,110,230,.75),rgba(10,28,70,.95));box-shadow:0 0 14px rgba(70,140,255,.45);} .sTab.extra{border-color:rgba(70,210,120,.5);color:#8ee8ad;} .sTab.extra.on{border-color:rgba(80,225,130,.9);color:#fff; background:linear-gradient(180deg,rgba(30,160,80,.75),rgba(8,50,24,.95));box-shadow:0 0 14px rgba(60,210,110,.45);} /* ========================================================= ステージ選択の中身をタブの色に合わせる（2026-09-24 本人の指示） GENERATE＝赤／PRACTICE＝白と灰色／SPECIAL＝青／EXTRA＝緑。`ui.js` が `.sList` に `data-mode` を付ける ========================================================= */ /* GENERATE（赤） */ #stage.whiteUI .sList[data-mode=normal] .sChap{color:#b8323a;} #stage.whiteUI .sList[data-mode=normal] .sChap b{color:#c9575e;} .sList[data-mode=normal] .sBtn{border-color:rgba(255,90,90,.30); background:linear-gradient(180deg,rgba(48,12,17,.93),rgba(22,8,12,.95));} .sList[data-mode=normal] .sBtn.cleared{border-color:rgba(255,110,110,.55);} .sList[data-mode=normal] .sBtn .no{color:#ff9a9a;} .sList[data-mode=normal] .sBtn .nm{text-shadow:0 0 12px rgba(255,90,90,.35);} .sList[data-mode=normal] .sBtn .fig{color:#ffb3b3;} .sList[data-mode=normal] .sBtn .fig b{color:#fff0f0;} .sList[data-mode=normal] .sBtn .st{color:#ffb0b0;} .sList[data-mode=normal] .sBtn.locked .st{color:#8a7b80;} /* SPECIAL（青） */ #stage.whiteUI .sList[data-mode=special] .sChap{color:#2f6fd0;} .sList[data-mode=special] .sBtn.special{border-color:rgba(80,150,255,.35); background:linear-gradient(180deg,rgba(12,24,52,.93),rgba(8,14,30,.95));box-shadow:none;} .sList[data-mode=special] .sBtn.special.playable{border-color:rgba(90,160,255,.75); background:linear-gradient(180deg,rgba(24,56,120,.93),rgba(10,20,46,.95));box-shadow:0 0 18px rgba(80,150,255,.20) inset;} .sList[data-mode=special] .sBtn.special .no, .sList[data-mode=special] .sBtn.special.playable .no{color:#8fc0ff;} .sList[data-mode=special] .sBtn.special .st, .sList[data-mode=special] .sBtn.special.playable .st{color:#bcd9ff;} .sList[data-mode=special] .sBtn .nm{text-shadow:0 0 12px rgba(80,150,255,.40);} .sList[data-mode=special] .sBtn .fig{color:#a9ccff;} .sList[data-mode=special] .sBtn.special.locked .st{color:#7b8ba3;} /* EXTRA（緑） */ #stage.whiteUI .sList[data-mode=extra] .sChap, #stage.whiteUI .sList[data-mode=extra] .sChap.ex{color:#1f9a4e;} .sList[data-mode=extra] .sBtn.extra{border-color:rgba(70,210,120,.34); background:linear-gradient(180deg,rgba(10,38,20,.93),rgba(6,20,12,.95));box-shadow:none;} .sList[data-mode=extra] .sBtn.extra.playable{border-color:rgba(80,225,130,.80); background:linear-gradient(180deg,rgba(18,70,36,.93),rgba(8,28,16,.95));box-shadow:0 0 14px rgba(70,210,120,.22) inset;} .sList[data-mode=extra] .sBtn.extra .no, .sList[data-mode=extra] .sBtn.special.extra.playable .no{color:#6fe39a;} .sList[data-mode=extra] .sBtn.extra .st, .sList[data-mode=extra] .sBtn.special.extra.playable .st{color:#a6f0c0;} .sList[data-mode=extra] .sBtn .nm{text-shadow:0 0 12px rgba(70,210,120,.35);} .sList[data-mode=extra] .sBtn .fig{color:#9fe8b8;} .sList[data-mode=extra] .sBtn.extra.locked .st{color:#7b8ba3;} /* PRACTICE（白と灰色）：レベル切り替えの箱は明るい白〜灰、一覧の行は暗い灰 */ #stage.whiteUI .sList[data-mode=practice] .sChap{color:#4a5260;} .sList[data-mode=practice] .pBox{border-color:rgba(150,158,170,.55); background:linear-gradient(180deg,#fbfcfd,#d9dde3); box-shadow:0 8px 22px rgba(20,30,45,.22), inset 0 1px 0 #fff;} .sList[data-mode=practice] .pLbl{color:#6b7482;} .sList[data-mode=practice] .pLv{color:#1c2430;text-shadow:0 2px 0 rgba(255,255,255,.8);} .sList[data-mode=practice] .pMax{color:#7a8390;} .sList[data-mode=practice] .pFig{color:#3a4350;} .sList[data-mode=practice] .pFig b{color:#111a26;} .sList[data-mode=practice] .pB{border-color:rgba(140,148,160,.6);background:#ffffff;color:#2a3340;} .sList[data-mode=practice] .pGo{color:#fff;background:linear-gradient(180deg,#6b7482,#3d4450); box-shadow:0 8px 20px rgba(30,40,55,.30), inset 0 1px 0 rgba(255,255,255,.35);} .sList[data-mode=practice] .sBtn.practice{border-color:rgba(200,206,214,.30); background:linear-gradient(180deg,rgba(46,50,57,.94),rgba(26,29,34,.96));} .sList[data-mode=practice] .sBtn.practice.on{border-color:rgba(240,244,248,.90);box-shadow:0 0 14px rgba(230,236,244,.25) inset;} .sList[data-mode=practice] .sBtn .no{color:#e6eaef;} .sList[data-mode=practice] .sBtn .nm{text-shadow:0 0 10px rgba(255,255,255,.25);} .sList[data-mode=practice] .sBtn .fig{color:#c8ced6;} .sList[data-mode=practice] .sBtn .st{color:#dfe3e8;} /* スキルのアイコンの絵（2026-09-24。`SKILLS[].icon` が ） */ .skImg{display:inline-block;width:1.3em;height:1.3em;object-fit:contain;vertical-align:-0.3em; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));pointer-events:none;user-select:none;} /* ツリーのノードのスキルの絵（2026-09-24）。取っていないノード（幹の1個目の目印）は薄く */ .tn .tiImg{opacity:.45;pointer-events:none;} .tn.on .tiImg{opacity:1;} /* 四隅の札のアイコンは大きめに */ .skTag u .skImg{width:22px;height:22px;vertical-align:middle;} .pSlot u .skImg{width:28px;height:28px;vertical-align:middle;} .sdHead u .skImg{width:24px;height:24px;vertical-align:middle;} .shItem .ic .skImg,.pSlot .ic .skImg{width:34px;height:34px;vertical-align:middle;} /* ゲーム中の装備スキル：絵になったので枠を外して大きく（2026-09-24） */ #skillIcons{gap:2px;} #skillIcons i{width:var(--skS,22px);height:var(--skS,22px);background:none;border:0;box-shadow:none;} #skillIcons i .skImg{width:var(--skS,22px);height:var(--skS,22px);vertical-align:middle;} #skillIcons i sub{font-size:9px;} /* ツリーのノードの下地を透過（2026-09-24 本人の指示：取ったノードの白い下地がダサい。下の絵が見えるように）。 取得済み（on）と、さらに強化できる取得済み（more）は下地を塗らない。枠の色の線だけ残す */ #stage.whiteUI .tn.on .dot,.tn.on .dot{fill:transparent;} #stage.whiteUI .tn.can.more .dot,.tn.can.more .dot{fill:transparent;stroke:#ffd84a;} .tn.more .tiImg{opacity:1;} .tn.can .tplus.mini{font-size:3.4px;paint-order:stroke;stroke:rgba(20,16,4,.85);stroke-width:.7px;} /* リザルト：余剰の生成量から足したぶん（2026-09-25）。「＋540」を小さく緑で添える */ .rRow b s.over{text-decoration:none;font-size:.6em;color:#7dffb0;margin-left:6px;font-style:normal;letter-spacing:0;} /* Ex 交換所のアイコンの絵（2026-09-25） */ .exImg{display:inline-block;width:1.4em;height:1.4em;object-fit:contain;vertical-align:-0.3em;pointer-events:none;user-select:none;} .shItem .ic .exImg{width:34px;height:34px;vertical-align:middle;} .exImg.face{border-radius:50%;} /* 日替わりの4つめ（2026-09-25）：色を少し変えて「毎日 3つ」と見分ける */ .dpRow.plus{border-color:rgba(200,181,255,.55);background:rgba(28,20,48,.88);} .dpRow.plus .dpNm::after{content:'＋1';margin-left:6px;font-size:.75em;font-weight:800;color:#c8b5ff;} .dpRow.plus.ready{border-color:#c8b5ff;} /* 購入の確認の注意の1行（2026-09-25） */ .boWarn{margin:6px 0 2px;padding:6px 8px;border-radius:8px;font-size:12px;font-weight:800;line-height:1.45; color:#ffd0d0;background:rgba(120,20,30,.55);border:1px solid rgba(255,110,110,.6);} /* 2026-09-25 本人の指示：ゲーム画面の左上の「クリア条件」の欄を出さない（新配置）。 右の各色のゲージは**％だけ**（獲得／必要の数字は出さない）。％はゲージの真ん中に */ #stage #hud.v2 #tgtInfo{display:none !important;} .ge.v2 .geNum em{display:none;} .ge.v2 .geNum{justify-content:center;} .ge.v2 .geNum .gePct{font-size:15px;} /* 各色のゲージは右から左へ伸びる（2026-09-25 本人の指示。新配置のみ） */ .ge.v2 .geBar > i{transform-origin:right center;} /* ========================================================= クラス（2026-09-26 本人の指示）：ステータスの一番上・一時停止 能力／スキル／プレイを大きな字で、右に E〜SS。色は E 水色／D 緑／C 黄／B オレンジ／A 赤／S ピンク／SS 虹 ========================================================= */ #screenStatus .pLv b{font-size:58px;line-height:.95;} /* レベルの数字を大きく */ .pCls,.mCls{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px;} .mCls{flex-basis:100%;margin:6px 0 2px;gap:4px;} .clsRow{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 16px;border-radius:12px; background:linear-gradient(90deg,rgba(8,14,28,.94),rgba(18,30,52,.9)); border:1px solid rgba(160,215,255,.35);box-shadow:0 4px 14px rgba(0,0,0,.25);} .clsNm{white-space:nowrap;font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic;font-weight:900; font-size:22px;letter-spacing:.06em;color:#fff; text-shadow:0 0 10px rgba(122,215,255,.55),0 2px 0 rgba(0,0,0,.6);} .clsPct{margin-left:auto;font-style:normal;font-size:12px;font-weight:800;color:#8fb2d4;} .rk{min-width:1.3em;text-align:center;font-family:Impact,"Arial Black",sans-serif;font-style:italic;font-weight:900; font-size:40px;line-height:1;letter-spacing:-.02em; text-shadow:0 0 12px currentColor,-1px -1px 0 #0a1020,1px -1px 0 #0a1020,-1px 1px 0 #0a1020,1px 1px 0 #0a1020;} .rk.rkSS{color:transparent !important;text-shadow:none; background:linear-gradient(90deg,#ff4d4d,#ffb03a,#ffe84a,#5dff8a,#4ad7ff,#8a7bff,#ff62c2,#ff4d4d); background-size:200% 100%;-webkit-background-clip:text;background-clip:text; filter:drop-shadow(0 0 6px rgba(255,255,255,.55)) drop-shadow(0 1px 0 #0a1020); animation:rkRainbow 2.4s linear infinite;} @keyframes rkRainbow{to{background-position:200% 0;}} .mCls .clsRow{padding:3px 12px;} .mCls .clsNm{font-size:14px;white-space:nowrap;letter-spacing:.02em;} .mCls .rk{font-size:28px;} /* ゲーム中の装備スキル：左上に縦に4つ・右隣にレベル（2026-09-26 本人の指示。`hud.place`） */ #skillIcons.vert{flex-direction:column;gap:4px;} #skillIcons.vert i{width:var(--skS,26px);height:var(--skS,26px);} #skillIcons.vert i .skImg{width:var(--skS,26px);height:var(--skS,26px);} #skillIcons.vert i sub{left:calc(100% + 6px);right:auto;bottom:auto;top:50%;transform:translateY(-50%); font-family:Impact,"Arial Black",sans-serif;font-style:italic;font-size:15px;font-weight:900;white-space:nowrap; color:#eaf6ff;padding:0;} #skillIcons.vert i sub::before{content:'Lv';font-size:10px;margin-right:2px;color:#9fd0ff;} /* ステータスの「能力」の行は全部白（2026-09-27 本人の指示）：名前・説明・数字・「次」「強化+」「生成+」 */ #screenStatus .pRow.abil .nm,#screenStatus .pRow.abil .nm u{color:#ffffff !important;} /* 右側（レベル・数字・秒）は赤（2026-09-29 本人の指示） */ #screenStatus .pRow.abil .vl,#screenStatus .pRow.abil .vl s,#screenStatus .pRow.abil .vl *{color:#ff4d5e !important;} /* テスト用ステージ（2026-09-29 本人の指示）：ホームの右端の入口と、ゲーム中の下のボタン */ #hTest,#hEye{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:5;padding:14px 7px; writing-mode:vertical-rl;border:1px solid rgba(255,190,90,.6);border-right:0;border-radius:10px 0 0 10px; background:rgba(40,24,6,.88);color:#ffd27a;cursor:pointer; font-family:Impact,"Arial Black",sans-serif;font-style:italic;font-size:14px;letter-spacing:.2em;} #hTest:active,#hEye:active{background:rgba(90,56,10,.95);} /* アイキャッチの確認（2026-09-29）：TEST の下 */ #hEye{top:calc(50% + 50px);transform:none;border-color:rgba(122,215,255,.6);background:rgba(6,20,40,.88);color:#9fe4ff;} #labBar{position:absolute;left:8px;right:8px;bottom:6px;z-index:40;display:flex;flex-direction:column;gap:5px;} /* APNG の試し（2026-10-03）：EYE の下。押すと画面の真ん中に APNG/ の絵。押すと次の絵／最後で閉じる */ #hApng{position:absolute;right:0;top:calc(50% + 116px);z-index:5;padding:14px 7px;writing-mode:vertical-rl;border:1px solid rgba(125,255,176,.6);border-right:0;border-radius:10px 0 0 10px;background:rgba(6,30,18,.88);color:#9fffc4;cursor:pointer;font-family:Impact,"Arial Black",sans-serif;font-style:italic;font-size:14px;letter-spacing:.2em;} #apngView{position:absolute;inset:0;z-index:80;background:rgba(4,6,12,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;} #apngView img{max-width:92%;max-height:70%;object-fit:contain;} #apngView small{font:12px/1.4 Menlo,monospace;color:#9fb6cf;text-align:center;padding:0 16px;} html.release #hApng{display:none !important;} #labBar.hidden{display:none;} #labBar .lbRow{display:flex;gap:5px;} #labBar button{flex:1 1 0;padding:8px 4px;border-radius:9px;border:1px solid rgba(122,215,255,.45); background:rgba(10,18,32,.9);color:#eaf4ff;font-size:13px;font-weight:900;cursor:pointer; display:flex;align-items:center;justify-content:center;gap:5px;touch-action:manipulation;} #labBar button:active{transform:scale(.95);} #labBar .lbCol{border-color:rgba(var(--c),.8);color:rgb(var(--c));font-family:Impact,"Arial Black",sans-serif;font-style:italic;font-size:16px;} #labBar .lbCol i{width:14px;height:14px;border-radius:50%;background:rgb(var(--c));box-shadow:0 0 8px rgba(var(--c),.9);} #labBar .lbRnd{border-color:rgba(255,210,122,.7);color:#ffd27a;} #labBar .lbClr{border-color:rgba(255,120,140,.7);color:#ff9aaa;} /* ========================================================= リザルト（2026-09-29 本人の指示で作り直し。ui.js の showResult） ① 報酬の大きな枠（経験値・各種ポイント）② 大きく知らせるもの（Lv UP・SP・習得）③ 細かい情報は小さく（合計生成量はいちばん下） ========================================================= */ .rGainBox{padding:8px 14px;border-radius:12px;border:1.5px solid rgba(255,216,74,.65); background:linear-gradient(180deg,rgba(70,54,10,.60),rgba(24,18,4,.45)); box-shadow:0 0 22px rgba(255,216,74,.22),inset 0 0 18px rgba(255,216,74,.10);} .rg{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 0;} .rg span{font-size:14px;font-weight:900;letter-spacing:.06em;color:#ffe9a6;} .rg b{font-family:Impact,"Arial Black","Helvetica Neue",sans-serif;font-style:italic;font-size:36px;line-height:1.05; color:#ffd84a;letter-spacing:.02em;font-variant-numeric:tabular-nums; text-shadow:0 0 16px rgba(255,216,74,.6),0 3px 0 rgba(40,24,0,.85);} .rg.exp span{color:#bfe9ff;} .rg.exp b{color:#7ad7ff;text-shadow:0 0 16px rgba(122,215,255,.65),0 3px 0 rgba(8,20,60,.85);} .rg.ex b{color:#ffb86b;text-shadow:0 0 16px rgba(255,184,107,.6),0 3px 0 rgba(50,20,0,.85);} .rg b u{text-decoration:none;font-family:"Helvetica Neue",-apple-system,"Hiragino Sans",sans-serif;font-style:normal; font-weight:800;font-size:.5em;margin-left:3px;} .rg b s.over{text-decoration:none;font-size:.45em;color:#7dffb0;margin-left:6px;font-style:normal;} .rHi{margin-top:8px;padding:6px 10px;border-radius:11px;text-align:center; border:1.5px solid rgba(125,255,176,.6);background:rgba(20,60,40,.45);box-shadow:0 0 18px rgba(125,255,176,.22);} .rHi em{display:block;font-family:Impact,"Arial Black",sans-serif;font-style:italic;font-size:14px;letter-spacing:.22em;color:#7dffb0;} .rHi b{display:block;font-family:Impact,"Arial Black","Hiragino Sans","Noto Sans JP",sans-serif;font-style:italic; font-size:30px;line-height:1.1;color:#fff;text-shadow:0 0 18px rgba(125,255,176,.85),0 3px 0 rgba(0,30,15,.85);} .rHi i{display:block;font-style:normal;font-size:12px;font-weight:800;color:#c8f5dc;margin-top:1px;} .rHi.sp{border-color:rgba(255,216,74,.65);background:rgba(60,46,8,.45);box-shadow:0 0 18px rgba(255,216,74,.22);} .rHi.sp em{color:#ffd84a;} .rHi.sp b{font-family:"Helvetica Neue",-apple-system,"Hiragino Sans",sans-serif;font-style:normal;font-weight:900;font-size:17px; line-height:1.35;text-shadow:0 0 12px rgba(255,216,74,.7);} .rHi.get{border-color:rgba(255,120,160,.75);background:rgba(70,14,34,.5);box-shadow:0 0 22px rgba(255,90,140,.35);} .rHi.get em{color:#ff8fb0;} .rHi.get b{font-size:26px;text-shadow:0 0 18px rgba(255,120,160,.9),0 3px 0 rgba(40,0,15,.85);} /* タップでポップアップをもう一度（2026-10-04） */ .rHi.again{cursor:pointer;-webkit-tap-highlight-color:transparent;} .rHi.again:active{transform:scale(.97);} .rHi u{display:block;text-decoration:none;font-size:10px;font-weight:800;letter-spacing:.06em;color:rgba(255,200,220,.75);margin-top:2px;} #result.dense2 .rHi u{font-size:9px;margin-top:0;} .rHi.ta{border-color:rgba(255,233,166,.7);background:rgba(60,50,20,.45);} .rHi.ta em{color:#ffe9a6;} .rMini{margin-top:8px;padding-top:6px;border-top:1px solid rgba(122,215,255,.16);} .rMiniRow{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:1px 0;} .rMiniRow span{font-size:11px;font-weight:700;color:#8ba0b8;letter-spacing:.04em;} .rMiniRow b{font-family:Impact,"Arial Black","Helvetica Neue",sans-serif;font-style:italic;font-size:16px;color:#c6d6e8; font-variant-numeric:tabular-nums;} .rMiniRow b u{text-decoration:none;font-family:"Helvetica Neue",-apple-system,"Hiragino Sans",sans-serif;font-style:normal; font-weight:800;font-size:.7em;margin-left:1px;} .rMiniRow b em{font-family:"Helvetica Neue",-apple-system,sans-serif;font-style:normal;font-size:10px;color:#6f849c;} .rMiniRow b s.over{text-decoration:none;font-size:.65em;color:#7dffb0;margin-right:5px;font-style:normal;} .rMiniRow.done b{color:#7dffb0;} .rMiniRow .dot{display:inline-block;width:9px;height:9px;border-radius:50%;border:2px solid #fff;box-sizing:border-box;margin-right:5px;} .rMiniRow.taList b{display:flex;flex-direction:column;align-items:flex-end;font-size:12px;line-height:1.15;} .rMiniRow.taList b i{font-style:italic;white-space:nowrap;} .rMiniRow.taList b i.now{color:#ffd84a;} #result .rStats{padding:12px 14px;} #result.failed .rStats{top:auto;bottom:21%;} #result.dense .rg b{font-size:30px;} #result.dense .rHi{margin-top:6px;padding:4px 8px;} #result.dense .rHi b{font-size:22px;} #result.dense .rHi.sp b{font-size:14px;} #result.dense2 .rStats{padding:8px 12px;} #result.dense2 .rGainBox{padding:4px 12px;} #result.dense2 .rg{padding:0;} #result.dense2 .rg b{font-size:25px;} #result.dense2 .rg span{font-size:12px;} #result.dense2 .rHi{margin-top:5px;padding:3px 8px;} #result.dense2 .rHi em{font-size:11px;} #result.dense2 .rHi b{font-size:19px;} #result.dense2 .rHi.sp b{font-size:12px;line-height:1.3;} #result.dense2 .rHi i{font-size:10px;} #result.dense2 .rMini{margin-top:5px;padding-top:4px;} #result.dense2 .rMiniRow b{font-size:13px;} /* 実績の報酬を受け取ったとき、ボタンの上から小さく浮かぶ（2026-09-29。ui.js の popGain） */ .gainPop{position:absolute;z-index:12;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;text-align:center; font-family:Impact,"Arial Black",sans-serif;font-style:italic;font-size:20px;color:#ffd84a; text-shadow:0 0 10px rgba(255,216,74,.8),0 2px 0 rgba(40,24,0,.9);animation:gainPop 1.2s ease-out forwards;} .gainPop i{display:block;font-family:"Helvetica Neue",-apple-system,"Hiragino Sans",sans-serif;font-style:normal;font-weight:900; font-size:11px;color:#fff3c4;} @keyframes gainPop{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)} 15%{opacity:1;transform:translate(-50%,-60%) scale(1.08)} 70%{opacity:1;transform:translate(-50%,-120%) scale(1)} 100%{opacity:0;transform:translate(-50%,-160%) scale(1)}} /* スキル画面の背景はホームの絵（2026-09-29 本人の指示）。少し暗くして、ツリーの線とノードを読みやすく。光・手の絵は出さない */ #wBg.skill .wPic::after{content:"";position:absolute;inset:0;background:rgba(3,6,14,.55);} #stage.skillPic .skGlow,#stage.skillPic .skHand,#stage.skillPic .skBg{display:none !important;} /* 取ったノードの光彩（2026-09-29 本人「取った所のまわりに対応した色の光彩があったはずが消えている」）。 白い背景のときの灰色の枠（#stage.whiteUI .tn .dot）に上書きされていた。対応色の輪をはっきり光らせる */ .tn.on .dot,#stage.whiteUI .tn.on .dot{stroke:var(--c);stroke-width:.5; filter:drop-shadow(0 0 2.2px var(--c)) drop-shadow(0 0 1px var(--c));} .tn.on .tiImg{filter:drop-shadow(0 0 1.6px var(--c));} /* ショップのスクロールバーを透過（2026-09-29 本人の指示：白地に灰色のバーが目立つ）。下地が透けて見えるくらいの細い線だけ */ #screenShop .shList{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;} #screenShop .shList::-webkit-scrollbar{width:4px;background:transparent;} #screenShop .shList::-webkit-scrollbar-track{background:transparent;} #screenShop .shList::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:4px;} /* プラクティスの上の1行（2026-09-29）：小さく1行に */ .sChap.pNoteLine{font-size:11px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px;margin-bottom:6px;} /* ステータスの習得した力の下に、Ex 交換所で交換した強化のアイコン（2026-09-29） */ .pwIcons{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;} .pwIcons i{display:inline-flex;width:26px;height:26px;} .pwIcons i .exImg{width:26px;height:26px;vertical-align:middle;} /* リザルトの報酬の数字：右端をそろえる（ボーナスの「＋40」は数字の上に小さく乗せて幅を取らない） */ .rg b{position:relative;text-align:right;} .rg b s.over{position:absolute;right:0;top:-.55em;margin:0;} /* ========================================================= アイキャッチ（2026-09-29 本人の指示。js/eyecatch.js） 斜めの2枚の板が左右から覆う → 継ぎ目に光の線と原子の紋章・DPAP → 板が反対へ抜ける ========================================================= */ #eyecatch{position:absolute;inset:0;z-index:200;overflow:hidden;pointer-events:auto;} #eyecatch.hidden{display:none !important;} .ecPanel{position:absolute;inset:0;will-change:transform; background:repeating-linear-gradient(118deg,rgba(122,215,255,.07) 0 2px,transparent 2px 16px), linear-gradient(160deg,#0d2250 0%,#050a18 55%,#0b1d44 100%);} .ecPanel.a{clip-path:polygon(0 0,100% 0,100% 45%,0 60%);transform:translateX(-105%);} .ecPanel.b{clip-path:polygon(0 60%,100% 45%,100% 100%,0 100%);transform:translateX(105%);} #eyecatch.in .ecPanel.a{animation:ecInA var(--ecIn,.34s) cubic-bezier(.75,0,.2,1) forwards;} #eyecatch.in .ecPanel.b{animation:ecInB var(--ecIn,.34s) cubic-bezier(.75,0,.2,1) forwards;} #eyecatch.out .ecPanel.a{animation:ecOutA var(--ecOut,.42s) cubic-bezier(.7,0,.3,1) forwards;} #eyecatch.out .ecPanel.b{animation:ecOutB var(--ecOut,.42s) cubic-bezier(.7,0,.3,1) forwards;} @keyframes ecInA{from{transform:translateX(-105%)}to{transform:translateX(0)}} @keyframes ecInB{from{transform:translateX(105%)}to{transform:translateX(0)}} @keyframes ecOutA{from{transform:translateX(0)}to{transform:translateX(105%)}} @keyframes ecOutB{from{transform:translateX(0)}to{transform:translateX(-105%)}} .ecSeam{position:absolute;left:-10%;width:120%;top:52.5%;height:3px;margin-top:-1.5px;opacity:0; background:linear-gradient(90deg,transparent,#7ad7ff 18%,#fff 50%,#7ad7ff 82%,transparent); box-shadow:0 0 12px #7ad7ff,0 0 30px rgba(122,215,255,.8);transform:rotate(var(--ecAng,-16deg)) scaleX(0);} #eyecatch.in .ecSeam{animation:ecSeam .55s ease-out calc(var(--ecIn,.34s) - .06s) forwards;} #eyecatch.out .ecSeam{animation:ecFade calc(var(--ecOut,.42s) * .6) ease-in forwards;} @keyframes ecSeam{0%{opacity:1;transform:rotate(var(--ecAng,-16deg)) scaleX(0)} 45%{opacity:1;transform:rotate(var(--ecAng,-16deg)) scaleX(1)} 100%{opacity:.8;transform:rotate(var(--ecAng,-16deg)) scaleX(1)}} @keyframes ecFade{from{opacity:.8}to{opacity:0}} .ecFlash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;} #eyecatch.in .ecFlash{animation:ecFlash .38s ease-out calc(var(--ecIn,.34s) - .05s);} @keyframes ecFlash{0%{opacity:.5}100%{opacity:0}} /* 紋章は #stage と同じ倍率（アイキャッチは画面ぜんぶ＝#app に置くため。2026-09-30） */ .ecEmbWrap{position:absolute;left:50%;top:52.5%;width:0;height:0;transform:scale(var(--ecS,1));pointer-events:none;} /* ⚠ 2026-09-30 本人の指摘（iPhone）：扉が閉まったころに紋章とロゴが一瞬左へずれた。 原因：幅が中身まかせで、下の英題の字間アニメーション（.9em → .36em）で**幅が縮む**。Safari は translate(-50%) の アニメーション中、％を始まったときの幅のまま使うので、縮んだぶん左へずれ、アニメーションが終わると戻っていた。 → **幅を固定**（中身の幅に左右されない）。英題の字間は右端にも付くので、左にも同じだけ余白を足して真ん中に見せる */ .ecEmblem{position:absolute;left:0;top:0;width:480px;display:flex;flex-direction:column;align-items:center; transform:translate(-50%,-50%) scale(.3);opacity:0;pointer-events:none;} #eyecatch.in .ecEmblem{animation:ecEmb .55s cubic-bezier(.2,1.45,.4,1) calc(var(--ecIn,.34s) - .06s) forwards;} #eyecatch.out .ecEmblem{animation:ecEmbOut var(--ecOut,.42s) ease-in forwards;} @keyframes ecEmb{from{opacity:0;transform:translate(-50%,-50%) scale(.3)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} @keyframes ecEmbOut{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.5)}} .ecAtom{position:relative;width:132px;height:132px;animation:ecSpin 2.6s linear infinite;} .ecAtom i{position:absolute;left:0;top:44px;width:132px;height:44px;box-sizing:border-box;border-radius:50%; border:2px solid rgba(122,215,255,.95);box-shadow:0 0 10px rgba(122,215,255,.8),inset 0 0 8px rgba(122,215,255,.45);} .ecAtom i:nth-child(2){transform:rotate(60deg);} .ecAtom i:nth-child(3){transform:rotate(-60deg);} .ecAtom i::after{content:"";position:absolute;left:-5px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%; background:#fff;box-shadow:0 0 8px #fff,0 0 16px #7ad7ff;} .ecAtom b{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px;border-radius:50%; background:radial-gradient(circle,#fff 0 28%,#aee8ff 52%,rgba(122,215,255,0) 72%); box-shadow:0 0 26px #7ad7ff,0 0 54px rgba(122,215,255,.7);animation:ecPulse .5s ease-in-out infinite alternate;} @keyframes ecSpin{to{transform:rotate(360deg)}} @keyframes ecPulse{from{transform:scale(.9)}to{transform:scale(1.15)}} .ecLogo{position:relative;margin-top:4px;font-family:Impact,"Arial Black",sans-serif;font-style:italic;font-size:66px;line-height:1; letter-spacing:.06em;color:#fff;text-shadow:0 0 18px rgba(122,215,255,.95),0 4px 0 rgba(10,30,70,.9);clip-path:inset(-60px 100% -60px -60px);} #eyecatch.in .ecLogo{animation:ecReveal .32s cubic-bezier(.3,.8,.3,1) calc(var(--ecIn,.34s) + .1s) forwards, ecGlow .9s ease-in-out calc(var(--ecIn,.34s) + .4s) infinite;} @keyframes ecReveal{to{clip-path:inset(-60px -60px -60px -60px)}} /* 光彩が切れて四角く見えないよう外側に余白 */ @keyframes ecGlow{0%,100%{text-shadow:0 0 18px rgba(122,215,255,.95),0 4px 0 rgba(10,30,70,.9)}50%{text-shadow:0 0 34px rgba(190,240,255,1),0 0 60px rgba(122,215,255,.8),0 4px 0 rgba(10,30,70,.9)}} .ecSub{margin-top:8px;font:800 11px "Helvetica Neue",-apple-system,sans-serif;letter-spacing:.9em;color:#9fd8ff;opacity:0; text-shadow:0 0 10px rgba(122,215,255,.8);white-space:nowrap;padding-left:.9em;} #eyecatch.in .ecSub{animation:ecSub .5s ease-out calc(var(--ecIn,.34s) + .28s) forwards;} @keyframes ecSub{to{opacity:1;letter-spacing:.36em;padding-left:.36em}} @media (prefers-reduced-motion:reduce){.ecAtom,.ecAtom b{animation:none}} /* ========================================================= 面の始まりの演出（2026-09-29。js/eyecatch.js の stageIntro） クリア条件の札 → 画面いっぱいに 3・2・1 → START ========================================================= */ #stIntro{position:absolute;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;} #stIntro.hidden{display:none !important;} #stIntro.card{background:rgba(2,5,12,.55);pointer-events:auto;} #stIntro.count{pointer-events:none;background:transparent;} .siCard{width:78%;padding:16px 16px 18px;border-radius:16px;text-align:center; background:linear-gradient(180deg,rgba(12,26,52,.94),rgba(4,9,20,.94)); border:1.5px solid rgba(122,215,255,.55);box-shadow:0 0 30px rgba(122,215,255,.25),0 18px 40px rgba(0,0,0,.6); animation:siIn .38s cubic-bezier(.2,1.3,.4,1);} #stIntro.count .siCard{display:none;} @keyframes siIn{from{opacity:0;transform:scale(.85) translateY(14px)}to{opacity:1;transform:none}} .siLabel{font-family:Impact,"Arial Black",sans-serif;font-style:italic;font-size:15px;letter-spacing:.14em;color:#7ad7ff;} .siName{margin-top:2px;font-size:20px;font-weight:900;color:#fff;letter-spacing:.06em;text-shadow:0 0 14px rgba(122,215,255,.55);} .siPic{display:block;width:150px;height:150px;margin:8px auto 4px;filter:drop-shadow(0 0 16px rgba(122,215,255,.35));} .siCondHead{margin-top:6px;font-family:Impact,"Arial Black",sans-serif;font-style:italic;font-size:12px;letter-spacing:.28em;color:#ffd84a;} .siCond{margin-top:3px;font-size:17px;font-weight:900;color:#fff;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere;} .siCount{display:none;font-family:Impact,"Arial Black",sans-serif;font-style:italic;line-height:1;color:#fff; text-shadow:0 0 30px rgba(122,215,255,.95),0 0 70px rgba(122,215,255,.6),0 8px 0 rgba(8,20,60,.9);} #stIntro.count .siCount{display:block;} .siCount.pop{font-size:200px;animation:siPop .6s cubic-bezier(.2,1.2,.4,1) forwards; position:relative;left:-8px;} /* 斜体で右へ寄って見えるので少し左へ（2026-10-05 本人の指示）。transform はアニメが使うので left で */ .siCount.go{font-size:92px;letter-spacing:.06em;color:#ffe066; text-shadow:0 0 30px rgba(255,216,74,.95),0 0 70px rgba(255,160,40,.6),0 6px 0 rgba(60,30,0,.9); animation:siGo .62s ease-out forwards;} @keyframes siPop{0%{opacity:0;transform:scale(1.8)}25%{opacity:1;transform:scale(.95)}40%{transform:scale(1)}85%{opacity:1}100%{opacity:0;transform:scale(.9)}} @keyframes siGo{0%{opacity:0;transform:scale(.5)}20%{opacity:1;transform:scale(1.15)}35%{transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:scale(1.3)}} /* ホームの DAILY（左上）・ITEM（DEX・DATA の下）の絵のボタン（2026-09-29 本人制作）。DEX／DATA と同じ大きさ */ #screenHome .hDaily.img,#screenHome.white .hDaily.img{left:12px;top:108px;padding:0;border:0;background:none;box-shadow:none; width:56px;height:56px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));} #screenHome .hDaily.img img,#screenHome .hItems.img img{display:block;width:100%;height:100%;object-fit:contain;} /* 四角い絵（DAILY・ITEM）は丸い DEX・DATA より大きく見えるので、絵だけ少し小さく（2026-09-29 本人の指示。ボタンの位置・当たりはそのまま） */ #screenHome .hDaily.img img,#screenHome .hItems.img img{transform:scale(.9);} #screenHome .hDaily.img .dNum,#screenHome .hItems.img .dNum{display:none;} #screenHome .hDaily.img .badge{top:0;right:0;} #screenHome .hDaily.img:active,#screenHome .hItems.img:active{transform:scale(.94);} #screenHome .hSide .hItems.img{position:relative;left:auto;top:auto;padding:0;border:0;background:none;box-shadow:none; width:56px;height:56px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));} /* タイトルの TAP TO START（2026-09-29 本人の画像）：ロゴの位置を基準に置く（画面の高さが変わってもロゴに重ならない） */ #screenTitle .tHint{position:absolute;left:50%;top:calc(var(--tLogoY,50%) + 140px);margin:0;transform:translate(-50%,-50%);white-space:nowrap;} /* ステータスの習得した力：交換した強化のアイコンは枠の外（下）に（2026-09-29） */ .pwIconRow{display:flex;flex-wrap:wrap;gap:5px;margin:-2px 4px 10px;} .pwIconRow i{display:inline-flex;width:28px;height:28px;} .pwIconRow i .exImg{width:28px;height:28px;vertical-align:middle;} /* リザルトの報酬の見出し（2026-09-29 本人「テロップをかっこよく」）：英語を大きく斜体・色のグラデーション・下に斜めの線、日本語は小さく */ .rg span{display:flex;flex-direction:column;align-items:flex-start;line-height:1;position:relative;padding-bottom:5px;} .rg span em{font-family:Impact,"Arial Black",sans-serif;font-style:italic;font-size:21px;letter-spacing:.1em; background:linear-gradient(180deg,#fff 20%,#ffd84a 95%);-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 6px rgba(255,216,74,.55));} .rg span small{margin-top:3px;font-size:9px;font-weight:800;letter-spacing:.2em;color:rgba(255,233,166,.75);} .rg span::after{content:"";position:absolute;left:0;bottom:0;width:100%;min-width:64px;height:2px; background:linear-gradient(90deg,#ffd84a,rgba(255,216,74,0));transform:skewX(-30deg);} .rg.exp span em{background-image:linear-gradient(180deg,#fff 20%,#7ad7ff 95%);filter:drop-shadow(0 0 6px rgba(122,215,255,.6));} .rg.exp span small{color:rgba(191,233,255,.8);} .rg.exp span::after{background:linear-gradient(90deg,#7ad7ff,rgba(122,215,255,0));} .rg.ex span em{background-image:linear-gradient(180deg,#fff 20%,#ffb86b 95%);} .rg.ex span::after{background:linear-gradient(90deg,#ffb86b,rgba(255,184,107,0));} .rg{align-items:center;padding:4px 0;animation:rgIn .45s cubic-bezier(.2,1.2,.4,1) backwards;} .rg:nth-child(2){animation-delay:.12s}.rg:nth-child(3){animation-delay:.24s}.rg:nth-child(4){animation-delay:.36s} @keyframes rgIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}} /* 枠に光が一度走る */ .rGainBox{position:relative;overflow:hidden;} .rGainBox::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-20deg); animation:rgShine 1.4s ease-out .5s 1 forwards;} @keyframes rgShine{to{left:130%}} #result.dense2 .rg span em{font-size:16px;} #result.dense2 .rg span small{display:none;} /* チュートリアルのポップアップ（2026-09-29 本人の指示：ポップアップ → 実践のテンポ。tutorial.js `tutPop`）。 真ん中に大きく出て、`dock` でゾーンの上端（--dockY）へ小さく寄って残る。`ok` は「NICE!」を一瞬。指は通す */ #tutPop{position:absolute;z-index:70;left:50%;top:44%;transform:translate(-50%,-50%) scale(1);pointer-events:none; padding:14px 26px;border-radius:16px;background:rgba(6,14,32,.82);border:2px solid rgba(122,215,255,.85); box-shadow:0 0 26px rgba(90,190,255,.55),0 10px 30px rgba(0,0,0,.55); color:#fff;font-weight:900;font-size:25px;line-height:1.3;letter-spacing:.04em;text-align:center; /* ⚠ 折り返す：長い文が画面より広いと #app が横にずれた（2026-09-29） */ white-space:normal;width:max-content;max-width:calc(100% - 40px);box-sizing:border-box;word-break:keep-all; text-shadow:0 0 12px rgba(122,215,255,.9);opacity:0; transition:top .38s cubic-bezier(.3,.8,.3,1),transform .38s cubic-bezier(.3,.8,.3,1),opacity .2s;} #tutPop.hidden{display:none;} #tutPop.in{opacity:1;animation:tutPopIn .42s cubic-bezier(.2,1.3,.4,1);} #tutPop.dock{top:var(--dockY,270px);transform:translate(-50%,-50%) scale(.62);opacity:.92;} #tutPop.ok{transition:none;border-color:#ffd84a;color:#ffe680;font-size:40px;font-style:italic;background:rgba(30,20,0,.6); text-shadow:0 0 16px rgba(255,216,74,.95),0 4px 0 rgba(60,30,0,.9);box-shadow:0 0 30px rgba(255,200,60,.5);} #tutPop.ok.in{animation:tutPopOk .9s ease-out forwards;} @keyframes tutPopIn{0%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}60%{opacity:1;transform:translate(-50%,-50%) scale(.95)}100%{transform:translate(-50%,-50%) scale(1)}} @keyframes tutPopOk{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}35%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}} /* スキルツリー：上限や SP 無しのときの「+N」も、強化できるときと同じ黄色い小さな字（2026-09-29 本人の指示。`.pnums` の層に描く） */ .pnums .tplus.mini{font-size:3.4px;font-weight:900;text-anchor:middle;dominant-baseline:central;fill:#ffd84a; paint-order:stroke;stroke:rgba(20,16,4,.85);stroke-width:.7px;pointer-events:none;} /* ショップの札：新しい品がある棚に小さな赤丸（2026-09-29） */ .sTab.sh{position:relative;} .sTab.sh .shNew{position:absolute;top:2px;right:4px;width:8px;height:8px;border-radius:50%;background:#ff3b5c;box-shadow:0 0 6px rgba(255,59,92,.8);} /* 一時停止：クリアに必要な生成量（2026-09-29 本人の指示）。1行ぶん使う */ .mInfo .mNeed{flex-basis:100%;text-align:center;font-weight:800;} .mInfo .mNeed b{font-size:18px;color:#7dffb0;text-shadow:0 0 10px rgba(125,255,176,.5);margin:0 2px 0 6px;} /* 失敗したときのワンポイントアドバイス（2026-09-29 本人の指示）。タップするまで消えない */ #failTip{position:absolute;inset:0;z-index:120;display:flex;align-items:center;justify-content:center; background:rgba(0,4,14,.62);cursor:pointer;} #failTip.hidden{display:none;} #failTip .ftBox{width:calc(100% - 48px);box-sizing:border-box;padding:22px 20px 16px;border-radius:18px;text-align:center; background:linear-gradient(180deg,rgba(18,30,58,.97),rgba(8,14,32,.97));border:2px solid rgba(122,215,255,.8); box-shadow:0 0 30px rgba(90,190,255,.45),0 14px 40px rgba(0,0,0,.6);} #failTip.in .ftBox{animation:ftIn .42s cubic-bezier(.2,1.3,.4,1);} #failTip em{display:block;font-family:Impact,"Arial Black",sans-serif;font-style:italic;font-size:26px;letter-spacing:.04em; color:#ffd84a;text-shadow:0 0 14px rgba(255,216,74,.7);} #failTip small{display:block;font-size:11px;font-weight:800;color:#9fb6cf;margin-top:2px;} #failTip p{margin:16px 0 14px;font-size:19px;font-weight:900;line-height:1.55;color:#fff;word-break:keep-all; text-shadow:0 0 10px rgba(122,215,255,.6);} #failTip i{font-style:normal;font-size:12px;font-weight:700;color:#7ad7ff;animation:ftBlink 1.4s ease-in-out infinite;} @keyframes ftIn{0%{opacity:0;transform:scale(1.25)}60%{opacity:1;transform:scale(.97)}100%{transform:scale(1)}} @keyframes ftBlink{0%,100%{opacity:.45}50%{opacity:1}} /* ステージ選択の札（GENERATE／PRACTICE／CHALLENGE／EXTRA）を画面の幅に収める（2026-09-30 本人の指摘：EXTRA が右端にかかっていた）。 4つで幅を分け合い、右にも左と同じ余白 */ #sTabs{gap:6px;margin-right:-26px;flex:1 1 auto;min-width:0;} /* 親（.sHead）の右の余白 52px のうち半分ぶん戻して、下のステージの札の右端にそろえる */ #sTabs .sTab{flex:1 1 0;min-width:0;padding:9px 2px;font-size:12.5px;letter-spacing:.03em;text-align:center;white-space:nowrap;} /* 両替所の札（2026-09-30） */ .sTab.sh.swap.on{border-color:rgba(122,215,255,.85);} /* 横長のホーム背景（2026-09-30。HOME_BGS の wide）：縦を画面に合わせ、左右は --wPicX（ホームでスワイプ）。拡大縮小の動きは止める */ #wBg.home.wide .wPic{display:none;} /* 横長は .wLab（js/homelab.js）で出す */ /* ショップの「ホームの背景」の ON／OFF */ .shItem.bgOwn .bgTgl{min-width:58px;padding:8px 10px;border-radius:9px;font:900 13px Impact,"Arial Black",sans-serif;letter-spacing:.08em; border:1px solid rgba(122,215,255,.35);background:rgba(14,23,39,.9);color:#9fb6cf;cursor:pointer;} .shItem.bgOwn .bgTgl.on{border-color:rgba(125,255,176,.85);color:#7dffb0;box-shadow:0 0 10px rgba(125,255,176,.35);} /* ========================================================= カプセルラボ（2026-09-30 本人の指示。js/homelab.js） 絵（1280×720）と同じ大きさの層。中の物は絵の上の % で置くので、絵と一緒に伸び縮み・横に動く ========================================================= */ #wBg .wLab{position:absolute;left:0;top:0;height:100%;will-change:transform;} #wBg .wLab.hidden{display:none;} #wBg .wLab .hlImg,#wBg .wLab .hlFront{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;} #wBg .wLab .hlCh5{position:absolute;display:none;object-fit:contain;pointer-events:none;} #wBg .wLab .hlCh5.on{display:block;} #wBg .wLab .hlCh5.mon{filter:drop-shadow(0 0 14px rgba(122,215,255,.45));} #wBg .wLab .hlCh5.srv,#wBg .wLab .hlCh5.hum{filter:brightness(.82) drop-shadow(0 0 10px rgba(122,215,255,.25));} /* カプセルの中：ガラスの形で切り抜き、目標物は**かなり薄く**・加算で光って見える・ゆっくり上下 */ #wBg .wLab .hlCap{position:absolute;overflow:hidden;border-radius:46% 46% 8% 8% / 78% 78% 10% 10%;} #wBg .wLab .hlCap img{position:absolute;object-fit:contain;opacity:.42;mix-blend-mode:screen; filter:saturate(1.15) drop-shadow(0 0 10px rgba(140,220,255,.7));animation:hlFloat 5.2s ease-in-out infinite alternate;} #wBg .wLab .hlCap:not(.full) img{display:none;} @keyframes hlFloat{from{transform:translateY(3%)}to{transform:translateY(-4%)}} /* 空のカプセル：真ん中に淡い「＋」（タップで入れられる） */ #wBg .wLab .hlCap i{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);display:none; font:300 34px/1 "Helvetica Neue",sans-serif;color:rgba(190,235,255,.55);text-shadow:0 0 10px rgba(122,215,255,.8); animation:hlPlus 2.4s ease-in-out infinite;} #wBg .wLab .hlCap.canAdd i{display:block;} @keyframes hlPlus{0%,100%{opacity:.35}50%{opacity:.9}} /* 人間（5-5）：いつもの背景の真ん中の奥に小さく薄く */ #wBg .wPic .wHuman{position:absolute;left:50%;top:48%;height:14%;transform:translateX(-50%);display:none; opacity:.42;filter:brightness(.9) drop-shadow(0 0 12px rgba(140,200,255,.8));pointer-events:none;} #wBg .wPic .wHuman.on{display:block;} /* カプセルに入れる目標物を選ぶポップアップ */ #hlPick{position:absolute;inset:0;z-index:185;background:rgba(2,6,14,.62);display:flex;align-items:center;justify-content:center;} #hlPick.hidden{display:none;} #hlPick .hpPanel{width:calc(100% - 32px);max-height:78%;display:flex;flex-direction:column;border-radius:16px; background:linear-gradient(180deg,rgba(18,32,56,.97),rgba(8,14,26,.97));border:1px solid rgba(122,215,255,.45); box-shadow:0 0 30px rgba(122,215,255,.25);padding:14px 12px 12px;} #hlPick .hpHead{display:flex;align-items:baseline;gap:10px;margin:0 4px 10px;} #hlPick .hpHead b{font:900 italic 22px Impact,"Arial Black",sans-serif;letter-spacing:.06em;color:#eaf6ff;text-shadow:0 0 12px rgba(122,215,255,.8);} #hlPick .hpHead span{font-size:12px;font-weight:800;color:#9fb6cf;} #hlPick .hpGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;overflow-y:auto;padding:2px;} #hlPick .hpItem{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 3px 5px;border-radius:10px;cursor:pointer; border:1px solid rgba(122,215,255,.22);background:rgba(10,18,32,.9);color:#cfe6ff;font-family:inherit;} #hlPick .hpItem.on{border-color:rgba(125,255,176,.9);box-shadow:0 0 12px rgba(125,255,176,.4) inset;} #hlPick .hpItem img{width:100%;aspect-ratio:1;object-fit:contain;} #hlPick .hpItem i{position:absolute;left:6px;top:4px;font:900 italic 10px Impact,sans-serif;color:#7ad7ff;font-style:italic;} #hlPick .hpItem b{font-size:10px;font-weight:800;line-height:1.2;text-align:center;word-break:keep-all;overflow-wrap:anywhere;} #hlPick .hpBtns{display:flex;gap:8px;margin-top:12px;} #hlPick .hpBtns button{flex:1;padding:11px 0;border-radius:10px;font:800 14px inherit;font-family:inherit;cursor:pointer; border:1px solid rgba(122,215,255,.35);background:rgba(14,23,39,.95);color:#cfe6ff;} #hlPick .hpBtns .hpClose{background:linear-gradient(180deg,#bcd9ff,#8fb6ef);color:#0b1830;border-color:transparent;} /* ========================================================= ステージ選択の表紙（2026-09-30 本人の指示。ui.js の buildSelCover） 札ごとの色（--scC）で、紋章（回る輪・六角の枠・絵）→ 名前 → 説明 → 進み具合 → TAP ========================================================= */ #screenSelect .sList.hidden{display:none;} .sCover{position:relative;flex:1 1 auto;width:100%;overflow:hidden;cursor:pointer;--scC:122,215,255; display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 16px 84px;user-select:none;-webkit-user-select:none;} .sCover.hidden{display:none;} .sCover[data-mode=normal]{--scC:255,92,110;} .sCover[data-mode=practice]{--scC:210,228,248;} .sCover[data-mode=special]{--scC:150,124,255;} .sCover[data-mode=extra]{--scC:93,255,160;} .sCover .scGlow{position:absolute;left:50%;top:40%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none; background:radial-gradient(circle,rgba(var(--scC),.26) 0%,rgba(var(--scC),.08) 32%,rgba(0,0,0,0) 62%);} .sCover .scGrid{position:absolute;inset:0;pointer-events:none;opacity:.35; background:repeating-linear-gradient(0deg,rgba(var(--scC),.07) 0 1px,transparent 1px 28px), repeating-linear-gradient(90deg,rgba(var(--scC),.07) 0 1px,transparent 1px 28px); -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 70%);mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 70%);} .sCover .scNo{position:absolute;left:18px;top:10px;font:900 italic 40px/1 Impact,"Arial Black",sans-serif;letter-spacing:.02em; color:rgba(var(--scC),.9);text-shadow:0 0 16px rgba(var(--scC),.6);opacity:0;} .sCover .scNo i{display:block;font:800 9px/1.6 "Helvetica Neue",sans-serif;letter-spacing:.3em;font-style:normal;color:rgba(255,255,255,.55);text-shadow:none;} /* 紋章 */ .sCover .scEmb{position:relative;width:250px;max-width:70%;aspect-ratio:1;margin-bottom:4px;opacity:0;} .sCover .scRings{position:absolute;inset:0;width:100%;height:100%;overflow:visible;} .sCover .scRings circle{stroke:rgba(var(--scC),.75);transform-origin:100px 100px;filter:drop-shadow(0 0 3px rgba(var(--scC),.9));} .sCover .scRings .r1{animation:scSpin 38s linear infinite;stroke:rgba(var(--scC),.45);} .sCover .scRings .r2{animation:scSpin 22s linear infinite reverse;} .sCover .scRings .r3{animation:scSpin 60s linear infinite;stroke:rgba(var(--scC),.35);} .sCover .scRings .r4{animation:scSpin 6s linear infinite;stroke:rgba(255,255,255,.9);} @keyframes scSpin{to{transform:rotate(360deg)}} .sCover .scHex{position:absolute;inset:17%;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); background:linear-gradient(160deg,rgba(var(--scC),.55),rgba(var(--scC),.08) 45%,rgba(var(--scC),.4));} .sCover .scHex::after{content:"";position:absolute;inset:2px;clip-path:inherit; background:radial-gradient(circle at 50% 45%,rgba(20,32,56,.55),rgba(4,8,16,.92) 75%);} .sCover .scHex.b{inset:14%;opacity:.35;transform:rotate(30deg);animation:scHexB 7s ease-in-out infinite alternate;} .sCover .scHex.b::after{display:none;} @keyframes scHexB{from{transform:rotate(30deg) scale(1)}to{transform:rotate(50deg) scale(1.04)}} .sCover .scPic{position:absolute;left:50%;top:50%;width:52%;height:52%;object-fit:contain;transform:translate(-50%,-50%); filter:drop-shadow(0 0 18px rgba(var(--scC),.75));animation:scFloat 3.6s ease-in-out infinite alternate;} @keyframes scFloat{from{transform:translate(-50%,-47%)}to{transform:translate(-50%,-53%)}} .sCover .scScan{position:absolute;inset:17%;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);pointer-events:none;overflow:hidden;} .sCover .scScan::before{content:"";position:absolute;left:-10%;right:-10%;height:18%;top:-20%; background:linear-gradient(180deg,transparent,rgba(var(--scC),.35),rgba(255,255,255,.5),rgba(var(--scC),.35),transparent); animation:scScan 3.2s cubic-bezier(.5,0,.5,1) infinite;} @keyframes scScan{0%{top:-20%}60%,100%{top:110%}} /* 名前・説明 */ .sCover .scTitle{position:relative;margin-top:4px;opacity:0;} .sCover .scTitle b{display:block;font:900 italic 46px/1 Impact,"Arial Black",sans-serif;letter-spacing:.05em;color:#fff; text-shadow:0 0 22px rgba(var(--scC),.95),0 0 44px rgba(var(--scC),.5),0 4px 0 rgba(0,0,0,.5);} .sCover .scTitle::after{content:"";position:absolute;inset:-6px -30px;pointer-events:none; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);background-size:250% 100%; mix-blend-mode:overlay;animation:scShine 4.5s ease-in-out 1s infinite;} @keyframes scShine{0%{background-position:120% 0}40%,100%{background-position:-120% 0}} .sCover .scJp{margin-top:9px;font-size:15px;font-weight:800;letter-spacing:.14em;color:#eaf6ff;opacity:0; text-shadow:0 0 12px rgba(var(--scC),.8),0 2px 6px rgba(0,0,0,.8);padding:5px 16px;position:relative;} .sCover .scJp::before,.sCover .scJp::after{content:"";position:absolute;top:50%;width:26px;height:1px;background:rgba(var(--scC),.9);box-shadow:0 0 6px rgba(var(--scC),1);} .sCover .scJp::before{right:100%;} .sCover .scJp::after{left:100%;} /* 進み具合 */ .sCover .scStats{display:flex;gap:10px;margin-top:14px;opacity:0;} .sCover .scSt{min-width:118px;padding:8px 14px 9px;border-radius:10px;text-align:center; background:linear-gradient(180deg,rgba(14,24,42,.88),rgba(6,11,20,.92));border:1px solid rgba(var(--scC),.45); box-shadow:0 0 14px rgba(var(--scC),.18) inset;} .sCover .scSt i{display:block;font:800 9px "Helvetica Neue",sans-serif;letter-spacing:.24em;font-style:normal;color:rgba(var(--scC),.95);} .sCover .scSt b{font:900 italic 24px/1.15 Impact,"Arial Black",sans-serif;color:#fff;letter-spacing:.03em;} .sCover .scSt s{text-decoration:none;margin-left:5px;font-size:11px;font-weight:800;color:#9fb6cf;} .sCover .scTap{margin-top:16px;text-align:center;opacity:0;} .sCover .scTap span{display:block;font:900 italic 15px Impact,"Arial Black",sans-serif;letter-spacing:.32em;color:#fff; text-shadow:0 0 12px rgba(var(--scC),1);animation:scBlink 1.6s ease-in-out infinite;} .sCover .scTap u{display:block;text-decoration:none;font-size:10px;font-weight:700;letter-spacing:.2em;color:rgba(234,246,255,.6);margin-top:3px;} @keyframes scBlink{0%,100%{opacity:.35}50%{opacity:1}} /* 入ってくる（札を押したとき） */ .sCover.in .scNo{animation:scInL .5s cubic-bezier(.2,.9,.3,1) .05s forwards;} .sCover.in .scEmb{animation:scInEmb .7s cubic-bezier(.2,1.3,.35,1) forwards;} .sCover.in .scTitle{animation:scInTitle .55s cubic-bezier(.2,.9,.3,1) .22s forwards;} .sCover.in .scJp{animation:scInUp .5s ease-out .36s forwards;} .sCover.in .scStats{animation:scInUp .5s ease-out .46s forwards;} .sCover.in .scTap{animation:scInUp .5s ease-out .7s forwards;} @keyframes scInL{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}} @keyframes scInEmb{from{opacity:0;transform:scale(.6) rotate(-25deg)}to{opacity:1;transform:none}} @keyframes scInTitle{from{opacity:0;transform:translateX(40px) skewX(-18deg);filter:blur(4px)}to{opacity:1;transform:none;filter:none}} @keyframes scInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* タップ：紋章が光って大きく抜ける */ .sCover.go .scEmb{animation:scGoEmb .36s ease-in forwards;} .sCover.go .scTitle,.sCover.go .scJp,.sCover.go .scStats,.sCover.go .scTap,.sCover.go .scNo{animation:scGoFade .25s ease-in forwards;} @keyframes scGoEmb{0%{opacity:1;transform:scale(1);filter:brightness(1)}40%{filter:brightness(2.2)}100%{opacity:0;transform:scale(1.9);filter:brightness(3)}} @keyframes scGoFade{to{opacity:0;transform:translateY(-8px)}} /* 一覧が入ってくる：札が下から順に */ .sList.enter > *{animation:slIn .42s cubic-bezier(.2,.9,.3,1) both;} .sList.enter > *:nth-child(1){animation-delay:.00s}.sList.enter > *:nth-child(2){animation-delay:.03s} .sList.enter > *:nth-child(3){animation-delay:.06s}.sList.enter > *:nth-child(4){animation-delay:.09s} .sList.enter > *:nth-child(5){animation-delay:.12s}.sList.enter > *:nth-child(6){animation-delay:.15s} .sList.enter > *:nth-child(7){animation-delay:.18s}.sList.enter > *:nth-child(8){animation-delay:.21s} .sList.enter > *:nth-child(n+9){animation-delay:.24s} @keyframes slIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.sCover *{animation:none !important;opacity:1 !important}} /* ショップのジュークボックス（2026-10-01）：「選曲」で開く曲の一覧 */ .sChap.juke{color:#ffbe6b;} .sChap.exlv{color:#ffd84a;} .jukeList{margin:-2px 0 8px 34px;display:flex;flex-direction:column;gap:4px;} .jukeRow{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border-radius:9px;cursor:pointer;text-align:left; font-family:inherit;font-size:13px;font-weight:800;color:#c6d6e8; border:1px solid rgba(122,215,255,.22);background:rgba(14,23,39,.9);} .jukeRow i{flex:0 0 14px;font-style:normal;font-size:11px;color:#ffbe6b;} .jukeRow.on{color:#ffbe6b;border-color:rgba(255,190,107,.75);box-shadow:0 0 10px rgba(255,190,107,.25);} .jukeRow:active{transform:scale(.99);} /* ========================================================= 主目標のカウントダウン（2026-10-01 本人の指示。ui.js syncHomeQuest） ホームの左上・DAILY の上。電子的な枠（四隅の鉤・走査線・ゆっくり明滅） ========================================================= */ #hQuest{position:absolute;z-index:3;left:12px;top:50px;width:156px;height:50px;box-sizing:border-box; display:flex;flex-direction:column;justify-content:center;padding:4px 9px 5px 13px;pointer-events:none; /* 2026-10-01 2回目：本人「バグにも見える」→ 角の切り欠き・走査線・半透明の鉤をやめて、整った札に。左に光る縦線 */ border:1px solid rgba(122,215,255,.5);border-radius:8px;overflow:hidden; background:linear-gradient(180deg,rgba(12,32,60,.92),rgba(6,16,34,.92)); box-shadow:0 4px 14px rgba(0,0,0,.45), 0 0 12px rgba(122,215,255,.18), inset 0 1px 0 rgba(255,255,255,.08);} #hQuest::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px; background:linear-gradient(180deg,#bfeaff,#7ad7ff 50%,#3a8fd0);box-shadow:0 0 8px rgba(122,215,255,.8);} #hQuest .qc{display:none;} #hQuest .qTag{font:700 8.5px/1 Menlo,Consolas,monospace;letter-spacing:.18em;color:rgba(122,215,255,.8);white-space:nowrap;overflow:hidden;} #hQuest .qTag::before{content:'▮ ';animation:hqBlink 1.1s steps(1) infinite;} #hQuest .qMain{margin-top:3px;font-size:15px;font-weight:900;letter-spacing:.06em;color:#eaf6ff;white-space:nowrap; text-shadow:0 0 8px rgba(122,215,255,.7);display:flex;align-items:baseline;gap:6px;} #hQuest .qMain b{font:900 24px/0.9 Impact,"Arial Black",sans-serif;letter-spacing:.02em;color:#7ad7ff; text-shadow:0 0 10px rgba(122,215,255,.9),0 0 22px rgba(122,215,255,.5);animation:hqPulse 2.4s ease-in-out infinite;} #hQuest.hardest{border-color:rgba(255,77,94,.6);box-shadow:0 4px 14px rgba(0,0,0,.45), 0 0 12px rgba(255,77,94,.25), inset 0 1px 0 rgba(255,255,255,.08); background:linear-gradient(180deg,rgba(58,12,22,.92),rgba(30,6,12,.92));} #hQuest.hardest::before{background:linear-gradient(180deg,#ffb0b8,#ff4d5e 50%,#b0202e);box-shadow:0 0 8px rgba(255,77,94,.8);} #hQuest.hardest .qTag{color:rgba(255,120,130,.9);} #hQuest.hardest .qMain{font-size:12.5px;letter-spacing:0;color:#fff0f2;text-shadow:0 0 8px rgba(255,77,94,.8);animation:hqPulse 2.4s ease-in-out infinite;} #hQuest.end{border-color:rgba(255,216,74,.7);box-shadow:0 4px 14px rgba(0,0,0,.45), 0 0 12px rgba(255,216,74,.3), inset 0 1px 0 rgba(255,255,255,.08); background:linear-gradient(180deg,rgba(58,44,10,.92),rgba(30,22,4,.92));} #hQuest.end::before{background:linear-gradient(180deg,#fff0b0,#ffd84a 50%,#c09010);box-shadow:0 0 8px rgba(255,216,74,.8);} #hQuest.end .qTag{color:rgba(255,216,74,.9);} #hQuest.end .qMain{letter-spacing:0;font:900 italic 13px/1 "Arial Black",Impact,sans-serif;color:#ffe89a;text-shadow:0 0 10px rgba(255,216,74,.9);} @keyframes hqBlink{50%{opacity:0}} @keyframes hqPulse{0%,100%{opacity:1}50%{opacity:.72}} @media (prefers-reduced-motion:reduce){#hQuest .qTag::before,#hQuest .qMain b,#hQuest.hardest .qMain{animation:none}} /* 主目標の枠：「人間の生成まで」（2026-10-03 本人の指示で「究極の」から戻した）は少し小さく */ #hQuest.count .qMain{font-size:13px;letter-spacing:.03em;gap:5px;} /* 称号（2026-10-01 本人の指示）。DAILY（top 108・56px）の下。出るだけ */ #hTitle{position:absolute;z-index:3;left:12px;top:170px;--tc:#ffd84a;pointer-events:none; display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:4px 10px 5px;border-radius:7px; border:1px solid color-mix(in srgb,var(--tc) 70%,transparent); background:linear-gradient(180deg,rgba(40,30,6,.88),rgba(18,12,2,.88)); box-shadow:0 4px 12px rgba(0,0,0,.45),0 0 10px color-mix(in srgb,var(--tc) 30%,transparent);} #hTitle small{font:700 7.5px/1 Menlo,Consolas,monospace;letter-spacing:.2em;color:color-mix(in srgb,var(--tc) 80%,transparent);} #hTitle b{font-size:13px;font-weight:900;letter-spacing:.08em;color:var(--tc);white-space:nowrap; text-shadow:0 0 8px color-mix(in srgb,var(--tc) 70%,transparent);} .sChap.ttl{color:#ffd84a;} /* 公開版（2026-10-01。config.js の RELEASE）。開発用のボタンを出さない */ html.release #tuneBtn,html.release #tunePanel,html.release #hTest,html.release #hEye,html.release #labBar,html.release #fpsBox{display:none !important;} /* 主目標のカウントダウン演出（2026-10-01 本人の指示。ui.js の homeQuestFx） */ #hqFx{position:absolute;inset:0;z-index:40;pointer-events:auto;} #hqFx .hqDim{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(6,20,44,.55),rgba(0,4,12,.88));opacity:0;transition:opacity .45s ease;} #hqFx.in .hqDim{opacity:1;} #hqFx.out .hqDim{opacity:0;transition-duration:.4s;} #hqFx .hqRings{position:absolute;width:0;height:0;opacity:0;transition:opacity .4s ease;} #hqFx.in .hqRings{opacity:1;} #hqFx.out .hqRings{opacity:0;} #hqFx .hqRings i{position:absolute;left:50%;top:50%;border-radius:50%;border:2px solid rgba(122,215,255,.55);transform:translate(-50%,-50%); box-shadow:0 0 14px rgba(122,215,255,.35),inset 0 0 14px rgba(122,215,255,.2);} #hqFx .hqRings i:nth-child(1){width:210px;height:210px;border-style:dashed;animation:hqSpin 6s linear infinite;} #hqFx .hqRings i:nth-child(2){width:176px;height:176px;border-width:1px;border-color:rgba(122,215,255,.35);border-top-color:#bfeaff;border-bottom-color:#bfeaff;animation:hqSpin 2.4s linear infinite reverse;} #hqFx .hqRings i:nth-child(3){width:240px;height:240px;border-width:1px;border-color:rgba(122,215,255,.18);border-left-color:rgba(191,234,255,.8);animation:hqSpin 3.6s linear infinite;} #hqFx.fin .hqRings i{border-color:rgba(255,255,255,.7);} @keyframes hqSpin{to{transform:translate(-50%,-50%) rotate(360deg);}} #hqFx .hqLbl{position:absolute;transform:translate(-50%,-50%) translateY(8px);opacity:0;transition:opacity .4s ease .2s,transform .4s ease .2s; display:flex;flex-direction:column;align-items:center;gap:4px;font-size:16px;font-weight:900;letter-spacing:.14em;color:#eaf6ff;white-space:nowrap; text-shadow:0 0 10px rgba(122,215,255,.8);} #hqFx .hqLbl small{font:700 9px/1 Menlo,Consolas,monospace;letter-spacing:.3em;color:rgba(122,215,255,.85);} #hqFx.in .hqLbl{opacity:1;transform:translate(-50%,-50%);} #hqFx.out .hqLbl{opacity:0;transition-delay:0s;} #hqFx .hqNum{position:absolute;transform:translate(-50%,-50%) scale(1);transition:left .55s cubic-bezier(.2,.8,.2,1),top .55s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1);} #hqFx .hqNum.big{transform:translate(-50%,-50%) scale(4.6);} #hqFx .hqNum b{display:block;font:900 24px/0.9 Impact,"Arial Black",sans-serif;letter-spacing:.02em;color:#7ad7ff; text-shadow:0 0 6px rgba(122,215,255,.95),0 0 16px rgba(122,215,255,.6);} #hqFx .hqNum.tick b{animation:hqTick .32s cubic-bezier(.2,.9,.3,1);} #hqFx .hqNum.fin b{color:#ffffff;text-shadow:0 0 6px #fff,0 0 14px rgba(122,215,255,1),0 0 30px rgba(122,215,255,.9);} @keyframes hqTick{0%{transform:scale(1.35) translateY(-3px);filter:brightness(2.2);}100%{transform:scale(1) translateY(0);filter:brightness(1);}} #hqFx .hqBoom{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;opacity:0; border:3px solid rgba(191,234,255,.9);box-shadow:0 0 22px rgba(122,215,255,.8),inset 0 0 18px rgba(122,215,255,.6);} #hqFx .hqBoom.go{animation:hqBoom .5s ease-out;} #hqFx.fin .hqBoom.go{animation:hqBoomBig .9s ease-out;} @keyframes hqBoom{0%{opacity:.9;transform:scale(.6);}100%{opacity:0;transform:scale(2.1);}} @keyframes hqBoomBig{0%{opacity:1;transform:scale(.6);border-color:#fff;}100%{opacity:0;transform:scale(3.6);}} #hQuest.hqHit{animation:hqHit .8s ease-out;} @keyframes hqHit{0%{filter:brightness(2.4);transform:scale(1.08);}100%{filter:brightness(1);transform:scale(1);}} /* 残り 10 秒のサイレン（2026-10-02 本人の指示）。game.js の syncSiren が .on を付け外し。 画面全体がうっすら赤み＋縁から赤い光が脈打つ（回転灯のように 0.9 秒周期）。押すのは邪魔しない */ #siren{position:absolute;inset:0;z-index:30;pointer-events:none;opacity:0;transition:opacity .3s ease; background:radial-gradient(ellipse at 50% 50%,rgba(255,0,30,0) 45%,rgba(255,10,40,.55) 100%),rgba(255,0,30,.10);} #siren.on{animation:sirenPulse .9s ease-in-out infinite;} @keyframes sirenPulse{0%,100%{opacity:.15;}45%{opacity:1;}} /* スキル画面のスキル Lv を大きく（2026-10-02 本人の指示）。四隅の札と、スロットの一覧 */ .skTag .lv{font-size:20px;line-height:1;color:#ffffff;text-shadow:0 0 8px var(--c),0 0 14px var(--c);letter-spacing:.02em;} .skTag .lv .pl{font-size:14px;} .pSlot .lv{font-size:19px;text-shadow:0 0 8px rgba(122,215,255,.6);} /* カプセルラボ（2026-10-02 本人の指示：ヒューマノイドを全身・カプセルの後ろに立つように）。 ドーム（.hlFront）は半透明＝奥がガラス越しに透ける。台（.hlBase）は不透明＝奥の物の足もとを隠す */ #wBg .wLab .hlFront{opacity:.55;} #wBg .wLab .hlFront.hlBase{opacity:1;} /* スキル画面の Lv：大きさはそのまま、少しだけ下げる（2026-10-02 本人の指示「見栄えのバランス」） */ .skTag .lv{position:relative;top:2px;} /* 残りわずかの赤い点滅（2026-10-03 本人の指示）：右上の色の ◯ は赤くしない・点滅させない（何色が必要か分からなくなるため）。 点滅は ◯ 以外（数字・バー）だけ */ .ge.urge{animation:none;} .ge.urge > :not(.geIcon){animation:urge .7s ease-in-out infinite;} /* やり込みの勲章（2026-10-03 本人の指示。#hTitle の札をやめて、DPAP のロゴを縦に並べる） */ #hTitle{padding:0;border:0;background:none;box-shadow:none;gap:2px;align-items:center;width:64px;} #hTitle .medal{display:block;width:64px;height:auto;pointer-events:none; filter:drop-shadow(0 3px 6px rgba(0,0,0,.55));} #hTitle .medal.gold{filter:drop-shadow(0 0 6px rgba(255,214,90,.55)) drop-shadow(0 3px 6px rgba(0,0,0,.55));} #hTitle .medal.rainbow{filter:drop-shadow(0 0 7px rgba(255,140,220,.6)) drop-shadow(0 3px 6px rgba(0,0,0,.55)); animation:medalShine 3s linear infinite;} @keyframes medalShine{0%{filter:hue-rotate(0deg) drop-shadow(0 0 7px rgba(255,140,220,.6));}100%{filter:hue-rotate(360deg) drop-shadow(0 0 7px rgba(255,140,220,.6));}} /* 札を2段目に（`tagBr`。やり込みの勲章の 0 / 4 が途中で折れていた。2026-10-03） */ .shItem .nm b.br{display:block;margin:2px 0 0;white-space:nowrap;} /* バーストの締め：増えた色のバーが伸びるあいだ光る（`finGrow`。2026-10-03） */ .ge.finGrow .geBar > i{filter:brightness(1.7) saturate(1.2);box-shadow:0 0 10px rgba(255,255,255,.85),0 0 18px rgba(255,255,255,.45);} .ge.finGrow .gePct,.ge.finGrow .geNum b{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.9);} /* START の動く PNG（2026-10-03）。ゾーンの真ん中あたり・触るのは下へ通す。幅は TUNE「動く PNG の幅」 */ .apngFx{position:absolute;inset:0;z-index:60;pointer-events:none;display:flex;align-items:center;justify-content:center;overflow:hidden;} .apngFx img{flex:0 0 auto;max-width:none;height:auto;} /* まとめ買い（2026-10-04 本人の指示：研究データ）。購入の確認の個数の行 */ .boQty{margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:6px;} .boQty .bqN{font-size:12px;color:#9fb6cf;} .boQty .bqN b{font-size:20px;font-weight:800;color:#eaf6ff;font-variant-numeric:tabular-nums;} .boQty .bqN .bqGet{font-style:normal;margin-left:10px;font-size:18px;font-weight:800;color:#ffd84a;font-variant-numeric:tabular-nums;} /* × n の横に受け取る総量（2026-10-06） */ .boQty .bqBtns{display:flex;gap:6px;width:100%;} .boQty button{flex:1;padding:7px 0;border-radius:4px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:800; background:rgba(122,215,255,.1);border:2px solid rgba(122,215,255,.7);color:#eaf6ff;box-shadow:0 0 7px rgba(122,215,255,.4);} .boQty button[data-q="0"]{background:rgba(255,255,255,.05);border-color:rgba(195,205,219,.4);box-shadow:none;color:#c3cddb;} /* ショップの新しく並んだ品：左上の角に赤丸（2026-10-04 本人の指示）。見て出るか棚を替えるまで残す（ui.js `commitShopPeek`） */ #screenShop .shItem{position:relative;} /* 2026-10-04 2回目：丸では何の印か分からない → 「NEW」の赤い札 */ #screenShop .shItem .shNewDot{position:absolute;top:-6px;left:-5px;padding:1px 6px 0;border-radius:8px; font:italic 900 10px/14px Impact,"Arial Black",sans-serif;letter-spacing:.06em;color:#fff;font-style:italic; background:#ff3b5c;box-shadow:0 0 0 2px rgba(10,14,24,.9),0 0 8px rgba(255,59,92,.9);pointer-events:none;z-index:2; animation:shNewPulse 1.2s ease-in-out infinite;} @keyframes shNewPulse{50%{box-shadow:0 0 0 2px rgba(10,14,24,.9),0 0 14px rgba(255,59,92,1);}} /* 一時停止のメニュー：ステータスはボタンで開く（2026-10-04）。必要な生成量の箱とボタンの間を詰める */ .mInfo.mNeedBox{margin:-4px 0 8px;padding:6px;} #stPanel .stInfo{margin:0 0 12px;} /* 面の始まり（3・2・1）のあいだは ⏸ を押せない（2026-10-04） */ #pauseBtn.wait{opacity:.35;} /* プラクティスの「経験値↑」（2026-10-05 本人の指示）：ステージ選択の表紙と一覧の見出し */ .sCover .scBadge{margin:8px auto 0;display:table;padding:3px 12px;border-radius:999px;font-size:13px;font-weight:900;letter-spacing:.12em; color:#062014;background:linear-gradient(180deg,#9dffc6,#3fe08a);box-shadow:0 0 12px rgba(80,255,160,.7);} .sChap.pNoteLine .expUp{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:900; color:#062014;background:linear-gradient(180deg,#9dffc6,#3fe08a);} /* 実績の取得履歴の日時（2026-10-05） */ .acRow .acWhen{display:block;font-style:normal;font-size:10.5px;letter-spacing:.06em;color:#7ad7ff;margin-bottom:2px;} /* 復興の記録（2026-10-05。S-7 クリア後、ホームの NEXT の代わり） */ #hRebirth{position:relative;z-index:3;min-width:220px;padding:8px 16px 10px;border-radius:12px; background:linear-gradient(180deg,rgba(10,24,44,.88),rgba(4,10,22,.88));border:1.5px solid rgba(122,215,255,.6); box-shadow:0 0 18px rgba(122,215,255,.35);color:#eaf6ff;} #hRebirth.hidden{display:none;} #hRebirth .hrHead{font-family:Impact,"Arial Black",sans-serif;font-style:italic;font-size:13px;letter-spacing:.3em;color:#7ad7ff;text-align:center;margin-bottom:4px;} #hRebirth .hrRow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:13px;font-weight:800;line-height:1.6;} #hRebirth .hrRow b{font-family:Impact,"Arial Black",sans-serif;font-style:italic;font-size:19px;letter-spacing:.02em;color:#fff;} #hRebirth .hrRow b s{text-decoration:none;font-size:11px;margin-left:2px;color:#9fc8e8;font-style:normal;} #hRebirth .hrRow.lv b{color:#ffd84a;font-size:22px;text-shadow:0 0 10px rgba(255,216,74,.6);} /* エンディング（2026-10-05）：2 回目からの SKIP・暗転中の解放の知らせ・知らせの行を揃える */ #endSkip{position:absolute;right:12px;top:calc(var(--safeTpx,0px) + 12px);z-index:160;pointer-events:auto; padding:6px 14px;border-radius:999px;border:1.5px solid rgba(122,215,255,.7);background:rgba(4,10,22,.75); color:#eaf6ff;font-family:Impact,"Arial Black",sans-serif;font-style:italic;font-size:14px;letter-spacing:.12em;cursor:pointer;} #spUp.overEnd{z-index:260;} #spUp .spWhere .spRow{display:block;margin:4px 0;} #spUp .spLead:empty{display:none;} /* 復興の枠の「？」・釣り合いの一言・ログ（2026-10-05） */ #hRebirth{cursor:pointer;pointer-events:auto;} #hRebirth .hrQ{position:absolute;right:6px;top:6px;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(122,215,255,.8); background:rgba(4,10,22,.8);color:#9fe0ff;font-size:13px;font-weight:900;line-height:18px;padding:0;cursor:pointer;} #hRebirth .hrHint{margin-top:3px;font-size:11px;font-weight:800;text-align:center;color:#7dffb0;} #hRebirth .hrHint.house,#hRebirth .hrHint.people{color:#ffbe6b;} #hRebirth .hrLog{margin-top:4px;font-size:11px;font-weight:800;text-align:center;color:#9fc8e8;letter-spacing:.04em;} /* ジェネシスの玉を背景に（2026-10-05。ending.js genesisBack）：枠の真ん中・文字より後ろ・少し薄く */ .genesisBack{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;opacity:.55;transition:opacity 1s ease;} .genesisBack.out{opacity:0;} #spUp .genesisBack{opacity:.95;} #endFin .efLog{z-index:1;} #endFin .genesisBack{opacity:.8;} /* 長い説明（人類再生ログ）は枠の中でスクロール（2026-10-05） */ #spot .spotMsg.scroll{overflow:hidden;} #spot .spotMsg.scroll p{max-height:58vh;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;position:relative;z-index:1;} #spot .spotMsg.scroll .spotNext{position:relative;z-index:1;} /* 話し手「ジェネシス」の札（2026-10-06 本人の指示：案内・チュートリアルのシステムメッセージをジェネシスに）。左に小さな光の玉 */ #spot .spotMsg .spotWho,#tutPop .tpWho{display:flex;align-items:center;gap:6px;font-style:normal;font-family:"Rajdhani","Zen Kaku Gothic New",sans-serif; font-weight:700;font-size:11px;letter-spacing:.12em;color:#9fdcff;text-shadow:0 0 6px rgba(122,215,255,.7);margin:0 0 6px;} #spot .spotMsg .spotWho::before,#tutPop .tpWho::before{content:'';width:9px;height:9px;border-radius:50%;flex:0 0 auto; background:radial-gradient(circle at 40% 38%,#fff 0 18%,#bfe9ff 30%,#4aa8ff 70%,rgba(74,168,255,0) 100%);box-shadow:0 0 8px rgba(122,215,255,.9);} #tutPop .tpWho{justify-content:center;font-size:12px;margin-bottom:4px;} #tutPop.ok .tpWho{display:none;} /* カプセルラボのときの復興の枠（2026-10-07）：たたむと見出し＋復興レベルだけ。.open で全部 */ #hRebirth.fold:not(.open) .hrRow:not(.lv),#hRebirth.fold:not(.open) .hrHint,#hRebirth.fold:not(.open) .hrLog,#hRebirth.fold:not(.open) .hrQ{display:none;} #hRebirth.fold:not(.open){padding:6px 14px 6px;} #hRebirth .hrArw{font-style:normal;font-size:10px;letter-spacing:0;margin-left:8px;color:#9fdcff;}