/* ステラオーブ ステージモード(試作・非公開ページ)の画面。hexdrop.css(宇宙の背景・ボタン・盤面・設定パネル)の上に重ねる */ /* ================================ UI v2 デザイントークン (W2: ボタン・パネル) ========================= 他の担当の変更もこの名前に頼る。ボタンの段階は .hd-btn.primary / .secondary / .tertiary / .danger(下の「UI v2 ボタンの段階」)。 角丸は 12px(チップ・小さいボタン)と 16px(パネル・ダイアログ・大きいボタン)だけ。円・カプセルは 50% / 999px のまま。 */ :root { --st-r-s: 12px; /* チップ・小さいボタン */ --st-r-l: 16px; /* パネル・ダイアログ・大きいボタン */ --st-gold: #f2c14e; --st-gold-soft: #ffe08a; --st-gold-line: #d9b45a; /* 大事なパネルの上辺の細い金線: border-top: 1px solid var(--st-gold-line) */ --st-plate: linear-gradient(180deg, #fff2bf 0%, #ffd45e 38%, #e8a93a 70%, #c17a1a 100%); /* 主ボタン = 金の板(2026-10-24。オレンジをやめた) */ --st-plate-down: linear-gradient(180deg, #ffe08a, #c98f2a); /* 押している間(少し暗い金) */ --st-plate-edge: #8a5a14; /* 板の縁 */ --st-plate-base: #7a4a0c; /* 板の下の2px影 */ --st-plate-text: #2a1704; --st-blue: #5b7bff; /* 「選んでいる」状態だけ */ --st-red: #e0546a; /* 警告・危険な操作 */ --st-red-soft: #ff9aa8; --st-navy-0: #05071e; --st-navy-1: #0a0e3c; --st-navy-2: #141a5c; --st-rar-3: #c9d3e6; /* ★3 銀 */ --st-rar-4: #d9962a; /* ★4 琥珀(星と枠は同じ色。★5 の淡い金と1pxの線でも見分けられる) */ --st-rar-5: #ffe9a6; /* ★5 淡い金(枠は白く光る金のきらめき。虹は結果の大きな星だけ) */ --st-blur: 16px; /* パネルの背景ぼかし */ --st-panel-bg: linear-gradient(rgba(16,20,70,0.78), rgba(5,7,30,0.88)); /* 副ボタン(濃紺 + 金の縁)の共通部品。ロビー右の丸ボタン・ミッションと同じ見た目。使うのは「副ボタンの形」の1か所(下の UI v2 ボタンの段階) */ --st-sub-bw: 2px; /* 金の縁の太さ(小さな札は 1px に) */ --st-sub-fill: linear-gradient(#232c78, #0f1347 60%, #0a0d33); --st-sub-rim: linear-gradient(#fff3b8, #dba43a 45%, #8a5a14); --st-sub-text: #fff3cf; --st-sub-shadow: inset 0 1px 0 rgba(255,244,190,0.4), inset 0 -3px 0 rgba(0,0,0,0.38), 0 3px 8px rgba(0,0,0,0.5), 0 0 12px rgba(255,200,90,0.16); --st-sub-on-fill: linear-gradient(rgba(255,214,120,0.34), rgba(255,214,120,0.12)), var(--st-sub-fill); /* 選んでいる = 金の色づけ + 明るい縁 */ --st-sub-on-rim: linear-gradient(#fffbe0, #ffd45e 45%, #c98f2a); --st-screen-in: 160ms; /* 画面の切り替え: 160ms の 8px のスライド(フェードなし: 透明の画面を見せない) */ } /* ================================ /UI v2 デザイントークン ================================ */ :root { --el-fire: #ff7a2a; --elt-fire: #2a1002; --el-water: #4485ff; --elt-water: #031433; --el-grass: #3ccf66; --elt-grass: #03230e; --el-light: #ffd24a; --elt-light: #2e2300; --el-dark: #a655ff; --elt-dark: #14012b; --st-glass: var(--st-panel-bg); --st-line: rgba(150,170,255,0.3); } /* 色覚サポート「見分けやすい配色」のときは、属性の色も盤面の玉と同じ色にそろえる(JS が html.st-cud を付ける) */ html.st-cud { --el-fire: #f57c54; --elt-fire: #2a0e05; --el-water: #166084; --elt-water: #ffffff; --el-grass: #89d5bb; --elt-grass: #082a20; --el-light: #fef05b; --elt-light: #2e2600; --el-dark: #935ee9; --elt-dark: #ffffff; } .st-page { padding-bottom: 8px; } .st-screen[hidden] { display: none; } .st-screen { min-width: 0; } .st-note { margin: 6px 2px; font-size: 0.75rem; color: #aeb5d8; line-height: 1.6; } .st-back { min-height: 34px; } /* ---- 属性のバッジ(色+漢字。色だけに頼らない) ---- */ .st-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 1.5em; height: 1.5em; padding: 0 0.3em; border-radius: 999px; font-size: 0.75rem; font-weight: 800; line-height: 1; letter-spacing: 0; border: 1px solid rgba(255,255,255,0.55); background: var(--el, #666); color: var(--elt, #fff); text-shadow: none; box-shadow: 0 1px 3px rgba(0,0,0,0.5); } html.st-cud .st-badge { border-color: rgba(0,0,0,0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.6); } .el-fire { --el: var(--el-fire); --elt: var(--elt-fire); } .el-water { --el: var(--el-water); --elt: var(--elt-water); } .el-grass { --el: var(--el-grass); --elt: var(--elt-grass); } .el-light { --el: var(--el-light); --elt: var(--elt-light); } .el-dark { --el: var(--el-dark); --elt: var(--elt-dark); } /* 星の大きさは「どこでも整数の px」(font-size を整数の px にし、星は 1em = その px)。rem / vw / clamp にすると 12.8px のような小数になり、 画面の拡大率によっては列の中の1つだけ丸めで小さく見える(2026-10-24)。gap も整数。場所ごとの大きさは下の .st-stars の font-size だけで決める。 */ /* ---- レア度の見た目(UI v2): ★3 銀 / ★4 金 / ★5 虹。星は SVG の形に切り抜いた (SL.starsHtml)。枠は .rf + .r3/.r4/.r5(::before のリング) ---- */ .r3 { --rc: #c9d3e6; --rc-grad: linear-gradient(135deg, #f1f5fc, #c9d3e6 45%, #8e9bb8); } .r4 { --rc: #d9962a; --rc-grad: linear-gradient(135deg, #ffe08a, #d9962a 45%, #9a5f0e); } .r5 { --rc: #ffe9a6; --rc-grad: linear-gradient(110deg, #f0a818, #ffd24a 25%, #fffdf0 40%, #ffd24a 55%, #f0a818 75%, #ffd24a); } /* ★5 の大きな枠: 金 → 白 → 金のきらめき */ .st-stars { display: inline-flex; align-items: center; gap: 1px; font-size: 12px; line-height: 1; color: var(--rc, #c9d3e6); white-space: nowrap; vertical-align: middle; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.85)); } .st-star { display: block; flex: none; width: 1em; height: 1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.2 6.8 7.4 1-5.4 5.1 1.4 7.4L12 18.4l-6.6 3.5 1.4-7.4L1.4 9.4l7.4-1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.2 6.8 7.4 1-5.4 5.1 1.4 7.4L12 18.4l-6.6 3.5 1.4-7.4L1.4 9.4l7.4-1z'/%3E%3C/svg%3E") center / contain no-repeat; } /* UI v3: 星は ★3 銀 / ★4 金 / ★5 明るい金 + 白いハイライトの点(小さい星で虹色にすると、緑〜水色しか見えず別の数に見えた)。虹は大きい星(20px 以上 = ガチャ結果)だけ */ .st-stars.r4 .st-star { background: linear-gradient(135deg, #f6c85f, #d9962a 62%, #bf7d17); } /* ★4 金〜琥珀(枠の琥珀と同じ系統) */ .st-stars.r5 { color: #ffd23a; filter: drop-shadow(0 0 3px rgba(255,214,90,0.85)) drop-shadow(0 1px 1px rgba(0,0,0,0.85)); } .st-stars.r5 .st-star { background: radial-gradient(circle at 36% 30%, #fff 0 15%, rgba(255,255,255,0) 26%), linear-gradient(135deg, #fff1a0, #ffd23a 55%, #f0a818); } .st-rv-spot .big-stars .st-stars.r5 .st-star, .st-rv-cards.one .face .st-stars.r5 .st-star { background: radial-gradient(circle at 36% 30%, #fff 0 10%, rgba(255,255,255,0) 20%), linear-gradient(90deg, #ff7aa8, #ffd24a 28%, #9dffc4 52%, #62c8ff 76%, #c58bff); } /* 枠(.rf)。一覧(キャラ・パーティー・コレクション)は 1px の線: ★5 金 / ★4 銀 / ★3 ブロンズ(--rl)。虹・金属色のグラデーション(--rc-grad)は、結果とキャラ詳細の大きなカードだけ(下の .rf-hero 相当) */ .r3 { --rl: #c9d3e6; } /* ★3 銀 / ★4 琥珀 / ★5 淡い金 = 星の色(--st-rar-*)と同じ系統 */ .r4 { --rl: #d9962a; } /* ★4 琥珀 */ .r5 { --rl: #ffe9a6; } /* ★5 淡い金 + 内側に 1px の光(下の .rf.r5::before) */ .rf.r5:where(:not(.face, .frame, .st-sh-art)) { box-shadow: 0 0 6px rgba(255,233,166,0.34); } .rf.r5:where(:not(.face, .frame, .st-sh-art))::before { filter: drop-shadow(0 0 1.5px rgba(255,250,224,0.95)); } /* 1px の線の内側と外側がにじむ = ★4 の琥珀と並べても 1px で見分けられる */ /* ★5 の一覧の枠だけ、ほのかな光 */ .rf { position: relative; --rf-w: 1px; } .rf::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: var(--rf-w); background: var(--rl, var(--rc)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; } .st-sh-art.rf::before, .st-rv-card .face.rf::before, .st-rv-spot .frame.rf::before { background: var(--rc-grad); } .st-rv-card .face.rf { --rf-w: 1.5px; } .st-rv-card.r5 .face.rf { --rf-w: 2px; } .st-rv-card.r3 .face.rf::before { opacity: 0.7; } @keyframes rfPrism { to { background-position: 200% 0; } } /* 丸いアイコン(元の絵は正方形。丸く切り抜き、属性色の縁) */ .st-ico { display: block; border-radius: 50%; object-fit: cover; background: #0c1030; border: 2px solid var(--el, rgba(255,255,255,0.4)); } /* ============================ ステージ選択 ============================ */ .st-chapter { margin: 8px 0 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .st-chapter h2 { margin: 0; font-size: 1.05rem; text-shadow: 0 0 12px rgba(120,140,255,0.5), 0 1px 2px rgba(0,0,0,0.8); } .st-chapter span { font-size: 0.75rem; color: #b3b9dc; } .st-list { display: grid; gap: 8px; } .st-stage-card { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 8px 12px 8px 8px; text-align: left; color: #f0f0f5; font: inherit; background: var(--st-glass); border: 1px solid var(--st-line); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 16px rgba(90,100,255,0.14); cursor: pointer; } .st-stage-card:hover { filter: brightness(1.12); } .st-stage-card:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; } .st-stage-card .st-ico { width: 56px; height: 56px; } .st-sc-id { font-size: 0.75rem; color: #9fb4ff; font-weight: 700; } .st-sc-name { font-size: 1rem; font-weight: 800; line-height: 1.25; } .st-sc-desc { margin-top: 2px; font-size: 0.75rem; color: #c6cbe8; line-height: 1.4; } .st-sc-state { font-size: 0.75rem; font-weight: 700; text-align: right; white-space: nowrap; color: #8fd4a6; } .st-sc-state small { display: block; font-weight: 400; color: #aeb5d8; } .st-stage-card[aria-disabled="true"] { cursor: not-allowed; filter: grayscale(0.85) brightness(0.62); } .st-stage-card[aria-disabled="true"]:hover { filter: grayscale(0.85) brightness(0.62); } .st-stage-card[aria-disabled="true"] .st-sc-state { color: #aeb5d8; } /* ============================ 編成 ============================ */ .st-waves { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-size: 0.75rem; color: #b3b9dc; flex-wrap: wrap; } .st-wave-ico { position: relative; width: 34px; height: 34px; } .st-wave-ico .st-ico { width: 34px; height: 34px; border-width: 2px; } .st-wave-ico.boss .st-ico { border-color: #ff6a7d; box-shadow: 0 0 8px rgba(255,90,110,0.7); } .st-wave-tier { position: absolute; right: -4px; bottom: -3px; padding: 0 3px; border-radius: 5px; font-size: 0.75rem; line-height: 1.4; color: #1a1030; background: linear-gradient(180deg, #ffe08a, #e9b440); pointer-events: none; } /* 編成の3つの枠 = 横一列のカード(2026-10-24 オーナー承認 案B2)。上の行に リーダーの札(左)・金の形のアイコン(右)、顔(48px・右下に属性のオーブ)、名前(1行・…)、Lv */ .st-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .st-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; width: 100%; padding: 4px 4px 5px; font: inherit; text-align: center; color: #f0f0f5; cursor: pointer; background: var(--st-glass); border: 1px solid var(--st-line); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .st-slot.sel { border-color: #ffd166; box-shadow: 0 0 0 2px rgba(255,209,102,0.55), 0 0 14px rgba(255,209,102,0.3); } .st-slot:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; } .st-slot-top { display: flex; align-items: center; justify-content: flex-end; align-self: stretch; gap: 4px; min-height: 20px; } .st-slot-top .st-lead-tag { margin-right: auto; padding: 0 5px; line-height: 1.3; } .st-slot-top .st-si.sc svg { width: 20px; height: 20px; } .st-slot-top .st-si.sc.line svg { width: 32px; height: 10px; } .st-slot-face { position: relative; display: block; width: 48px; height: 48px; flex: none; } .st-slot .st-ico { width: 48px; height: 48px; } .st-slot-face .st-badge { position: absolute; right: -7px; bottom: -4px; } .st-slot-face .st-badge img { width: 18px; height: 18px; } .st-slot-name { display: block; max-width: 100%; font-size: 0.82rem; font-weight: 800; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-slot .st-own { line-height: 1.2; } .st-roster-h { margin: 10px 0 4px; font-size: 0.78rem; color: #cfd8ff; } .st-roster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .st-rc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px 3px; font: inherit; color: #f0f0f5; cursor: pointer; background: rgba(14,18,64,0.7); border: 1px solid var(--st-line); border-radius: 10px; } .st-rc .st-ico { width: 100%; max-width: 52px; height: auto; aspect-ratio: 1; } .st-rc-name { font-size: 0.75rem; font-weight: 700; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-rc .st-badge { position: absolute; top: 2px; left: 2px; font-size: 0.75rem; } .st-rc.used { opacity: 0.55; } .st-rc.used::after { content: attr(data-slot-label); position: absolute; right: 2px; top: 2px; font-size: 0.75rem; font-weight: 800; padding: 0 3px; border-radius: 4px; background: rgba(110,130,255,0.9); color: #fff; } .st-rc:focus-visible { outline: 3px solid #ffd166; outline-offset: 1px; } .st-pfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .st-psum { font-size: 0.78rem; color: #cfd8ff; } .st-psum b { color: #7CFC9C; } /* ============================ 戦闘 ============================ */ .st-battle { max-width: 520px; margin: 0 auto; } .st-bhead { margin-bottom: 4px; } .st-bhead .hd-title { font-size: 0.95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-stage.hd-stage { display: flex; flex-direction: column; align-items: center; gap: 6px; } .st-stage .hd-play, .st-stage .hd-controls { grid-area: auto; } #stBelow { width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 6px; } #stBelow .hd-controls { max-width: 420px; } .st-stage #stEnemy { width: 100%; max-width: 520px; } /* ---- 敵のエリア: 大きな敵の絵(.st-efx) + 足元のHPバー(色=属性) + 左にカウントダウンの数字。WAVEは左上、NEXTは右 ---- */ .st-enemy { position: relative; display: flex; flex-direction: column; align-items: stretch; } .st-dg-ico { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--el, #d9b45a); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--el, #d9b45a) 30%, rgba(20,24,64,0.9)), rgba(8,10,34,0.95) 70%); box-shadow: 0 0 10px color-mix(in srgb, var(--el, #d9b45a) 45%, transparent); } .st-dg-ico.coin { --el: #f2c14e; } .st-dg-ico .st-item-ico { width: 38px; height: 38px; object-fit: contain; } .st-sel-pick { display: grid; gap: 12px; padding: 8px 0 16px; } .st-sel-pick[hidden], #stTabs[hidden], #stChapters[hidden] { display: none; } .st-pick { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 92px; padding: 14px 18px; text-align: left; border-radius: var(--st-r-l, 16px); border: 1px solid rgba(217,180,90,0.55); background: linear-gradient(135deg, rgba(34,40,96,0.92), rgba(14,18,52,0.92)); color: #eef1ff; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,10,0.45); transition: transform .12s ease, box-shadow .12s ease; } .st-pick b { font-family: var(--st-font-head, serif); font-size: 1.25rem; font-weight: 800; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; } .st-pick > span { font-size: 0.82rem; color: #b9c3ef; } .st-pick.main { border-color: rgba(255,190,90,0.7); } .st-pick:active { transform: translateY(1px) scale(0.99); box-shadow: 0 3px 10px rgba(0,0,10,0.45); } .st-pick .st-tab-dot { position: static; } .st-e-name { grid-column: 1 / -1; grid-row: 1; justify-self: center; min-width: 0; max-width: calc(100% - 168px); display: block; text-align: center; padding-bottom: 1px; font-size: 0.78rem; font-weight: 800; line-height: 1.2; color: #eef1ff; text-shadow: 0 1px 3px rgba(0,0,0,0.95); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } /* 2026-10-13: HPバーのすぐ上の中央(足元の帯の1行目。カウントダウン・バッジとは重ならない) */ .st-e-name::before { content: ''; display: inline-block; vertical-align: -0.5px; margin-right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--el, #9aa3c8); box-shadow: 0 0 4px var(--el, #9aa3c8); } .st-e-wave { position: absolute; left: 4px; top: 2px; z-index: 2; font-size: 0.75rem; font-weight: 800; color: #cdd5ff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,0.9); line-height: 1.2; pointer-events: none; } .st-enemy.boss .st-e-wave { color: #ff9aa8; } .st-e-act { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font-size: 0.75rem; font-weight: 700; color: #ffc0cb; text-shadow: 0 1px 3px rgba(0,0,0,0.95); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity 0.2s; } .st-e-act.on { opacity: 1; } .st-e-foot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 58% minmax(0, 1fr); align-items: center; padding: 2px 0 0; } .st-e-foot .st-e-bar { grid-column: 2; grid-row: 2; } /* 敵の行動カウント(2026-10-22): 行動の種類ごとの丸いバッジを、敵のHPバーの左右の1列に(足元の帯 #stEFoot の2行目: 左 #stCdL・HPバー・右 #stCdR)。 偶数番の種類 = 左・奇数番 = 右(バーに近い方が若い番)。バッジ = 種類のアイコン(左上の小さな丸)・数字・残りの量の輪(最大の手数に対する残り)。 いちばん近い種類(.soonest)は 1.2 倍(36px)+ 脈動、ほかは 0.8 倍(24px)。バーより背の高いバッジは上へはみ出す(帯の高さは増えない)。タップの範囲は ::after で 44px 以上 */ .st-cds { display: contents; } .st-cd-side { grid-row: 2; display: flex; align-items: flex-end; gap: 14px; height: 16px; min-width: 0; pointer-events: none; z-index: 3; } .st-cd-side.l { grid-column: 1; flex-direction: row-reverse; padding-right: 9px; } .st-cd-side.r { grid-column: 3; padding-left: 9px; } .st-cd { position: relative; flex: none; display: grid; place-items: center; box-sizing: border-box; width: 24px; height: 24px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: rgba(0,0,20,0.7); color: #fff; font: inherit; line-height: 1; cursor: pointer; pointer-events: auto; } .st-cd::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; } .st-cd-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; pointer-events: none; } .st-cd-ring circle { fill: none; stroke-width: 3.6; } .st-cd-ring .bg { stroke: rgba(160,180,255,0.3); } .st-cd-ring .fg { stroke: #b9c8ff; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc((1 - var(--f, 1)) * 100); transition: stroke-dashoffset 0.35s ease-out, stroke 0.2s; } /* 2026-10-22: アイコン = 行動のすべての効果(最大 4 つ。5 つ以上は 4 つ目の角を「+」)。バッジの円のふち(斜め 45°)に小さな丸を置く: 丸の中心は円のふちの外(円の半径 + 丸の直径の 0.38 倍)で、円の内側へもぐるのは丸の直径の 1 割ほど(絵は丸の 6 割なので、絵にはかからない)。 1 つ目 = 左上・2 つ目 = 右上・3 つ目 = 右下・4 つ目 = 左下。丸 13px(バッジ 24px)/ 15px(36px)。円の内側へもぐる部分は、バッジの円の形のマスクで切る(バッジの背景が半透明でも、丸が透けない。円の形の半径 = 箱の半分 - --m)。 丸の中の絵は丸の真ん中。となりのバッジの丸とかぶらないよう、バッジの間は 14px(PC は 18px)。色は効果ごと(.ic-*)。左の情報パネル(.st-info-ics)・吹き出し(.st-cdt-l)は、同じ丸を横・行頭に並べる */ .st-cd { --o: -6.5px; } /* --o = 丸の外への出(バッジの箱の角から丸の角まで。上の計算: 24px のバッジ・13px の丸で -6.5px) */ .st-cd-ics { --m: 8px; position: absolute; inset: calc(0px - var(--m)); z-index: 1; pointer-events: none; -webkit-mask-image: radial-gradient(circle closest-side, transparent calc(100% - var(--m) - 0.3px), #000 calc(100% - var(--m) + 0.3px)); mask-image: radial-gradient(circle closest-side, transparent calc(100% - var(--m) - 0.3px), #000 calc(100% - var(--m) + 0.3px)); } .st-cd-ic { flex: none; width: 13px; height: 13px; display: grid; place-items: center; border-radius: 50%; background: #10132e; border: 1px solid rgba(160,180,255,0.65); color: #cfd8ff; font-size: 0.7rem; font-weight: 900; line-height: 1; box-sizing: border-box; pointer-events: none; } .st-cd-ics .st-cd-ic { position: absolute; } .st-cd-ics .st-cd-ic:nth-child(1) { top: calc(var(--m) + var(--o)); left: calc(var(--m) + var(--o)); } .st-cd-ics .st-cd-ic:nth-child(2) { top: calc(var(--m) + var(--o)); right: calc(var(--m) + var(--o)); } .st-cd-ics .st-cd-ic:nth-child(3) { bottom: calc(var(--m) + var(--o)); right: calc(var(--m) + var(--o)); } .st-cd-ics .st-cd-ic:nth-child(4) { bottom: calc(var(--m) + var(--o)); left: calc(var(--m) + var(--o)); } .st-cd-ic svg, .st-info-ic svg { display: block; width: 64%; height: 64%; } .ic-sword { color: #ffb3c0; } .ic-meteor { color: #ffb070; } .ic-drop { color: #c9a0ff; } .ic-down { color: #ff9a6a; } .ic-heart { color: #8dffb0; } .ic-shield { color: #9fd8ff; } .ic-lock { color: #d9c0ff; } .ic-clock { color: #ffe08a; } .ic-skull { color: #e6e0ff; } .ic-tint { color: #ffffff; } .ic-warn { color: #ffd36a; } .st-cd.soonest { width: 36px; height: 36px; background: rgba(40,34,10,0.78); box-shadow: 0 0 10px 2px rgba(255,232,160,0.5); z-index: 1; animation: stCdPulse 1.1s ease-in-out infinite alternate; } .st-cd.soonest .st-cd-ring .fg { stroke: #ffe8a0; } .st-cd.soonest { --o: -6.5px; } .st-cd.soonest .st-cd-ic { width: 15px; height: 15px; } .st-cd b { font-family: var(--st-font-num); font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,0.8); line-height: 1; pointer-events: none; } .st-cd:not(.soonest) b { font-size: 0.85rem; } .st-cd.soonest b { font-size: 1.35rem; } .st-cd.warn { background: rgba(120,10,30,0.6); animation: stCdPulse 0.7s ease-in-out infinite alternate, stWarn 0.7s ease-in-out infinite alternate; } .st-cd.warn b { color: #ff9aa8; } .st-cd.warn .st-cd-ring .fg { stroke: #ff6a7d; } .st-cd.bump b { animation: stCdFlip 0.34s ease-out; } @keyframes stWarn { from { box-shadow: 0 0 0 rgba(255,80,110,0); } to { box-shadow: 0 0 10px rgba(255,80,110,0.85); } } @keyframes stCdPulse { from { transform: scale(1); } to { transform: scale(1.08); } } /* 2026-10-22: 縦に縮んで(最小 0.3)から戻る。数字は消さない(rotateX 90° で数字の無い円盤だけのコマが出ていた) */ @keyframes stCdFlip { 0% { transform: scale(1.2, 0.3); } 55% { transform: scale(1.08, 1.06); } 100% { transform: none; } } .st-next { position: absolute; right: 4px; top: 2px; z-index: 2; display: flex; flex-direction: column; align-items: center; pointer-events: none; } .st-next .k { font-size: 0.75rem; color: #9aa0c3; line-height: 1; } /* 敵のHPバーの色 = 敵の属性(.el-* が付く)。数字は小さくバーの上 */ .st-bar.st-e-bar { height: 16px; } .st-bar.st-e-bar > i { background: linear-gradient(rgba(255,255,255,0.3), rgba(0,0,0,0.2)), var(--el, #d12a46); } .st-bar.st-e-bar > b { white-space: nowrap; font-size: 0.8rem; color: #fff; -webkit-text-stroke: 1px #0b1236; paint-order: stroke fill; } /* 橙の上の白の数字: 1px の濃紺の縁 */ .st-bar.st-e-bar { box-shadow: 0 4px 7px -1px rgba(2,4,24,0.85); } /* バーの下に濃い影の帯 */ /* HPバー(敵・パーティー共通): 数字はバーの上に重ねる */ .st-bar { position: relative; height: 14px; border-radius: 8px; background: rgba(0,0,20,0.6); border: 1px solid rgba(160,180,255,0.35); overflow: hidden; } .st-bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left center; transform: scaleX(1); background: linear-gradient(#ff7d8e, #d12a46); transition: transform 0.25s ease-out; border-radius: 8px 0 0 8px; } /* ダメージの残像(パーティーのHPバー): 緑の塗りの下に赤い帯。減る前の幅(scaleX)で止めて、約0.4秒のあと新しいHPまで縮んで消える。transform / opacity だけを動かす */ .st-bar.st-p-bar > i.st-ghost { background: linear-gradient(#ffe3e8, #ff5a73); box-shadow: 0 0 6px rgba(255,90,115,0.85); opacity: 0; transform: scaleX(0); transition: none; } /* 2026-10-22: 明るい赤の帯にして目立たせる(危険な赤の塗りとも見分けがつく) */ /* .low / .crit の塗りの色(.st-p-bar.low > i)より強く。危険な赤の塗りとも見分けがつく濃い赤 */ /* 回復の予告(COMBAT V3): 回復の玉が飛び始めたら、いまの緑の塗りの先から回復後のHPまで、薄い緑の帯(赤い残像の緑・薄い版)。緑の塗りの下に敷く。届いたら塗りが伸びて帯は消える。transform / opacity だけ */ .st-bar.st-p-bar > i.st-heal-prev { background: repeating-linear-gradient(135deg, rgba(124,252,156,0.9) 0 4px, rgba(47,184,96,0.9) 4px 8px); opacity: 0; transform: scaleX(0); transition: none; } /* 回復の予告の先端の光(段ごとに帯が左→右へ伸びるとき、先端に添える白っぽいやわらかい光): バー全幅の要素を translateX で動かし、右端 8% だけが光る。transform / opacity だけ */ .st-bar.st-p-bar > i.st-heal-prev-hl { background: linear-gradient(90deg, rgba(255,255,255,0) 90%, rgba(255,255,255,0.85) 100%); border-radius: 0; opacity: 0; transform: translateX(-100%); transition: none; pointer-events: none; } .st-bar > b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--st-font-num); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 3px rgba(0,0,0,0.8); letter-spacing: 0.02em; } .st-p-bar > i { background: linear-gradient(#7CFC9C, #2fb860); } .st-p-bar.low > i { background: linear-gradient(#ffd166, #e08a1a); } .st-p-bar.crit > i { background: linear-gradient(#ff7d8e, #d12a46); } /* ダメージの数字: 敵のパネルの上に浮いて消える(使い回しの要素。数が多いときは古いものから置き換える) */ .st-dmg-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 3; } /* 敵の上の数字の層の箱(2026-10-22): body 直下・演出の canvas(.st-bfx z 6)より上。位置と大きさは画面のスクリプトが #stEnemy に合わせる。カットインの間は隠す */ .st-dmg-top { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 7; pointer-events: none; overflow: visible; transition: opacity 0.12s; } .st-dmg-top.cut { opacity: 0; } body:not(.st-in-battle) .st-dmg-top { display: none; } .st-dmg { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--st-font-num); font-weight: 700; line-height: 1; opacity: 0; color: var(--dc, #fff); font-size: calc(1.05rem * var(--ds, 1)); -webkit-text-stroke: 3px rgba(6,8,28,0.92); paint-order: stroke fill; text-shadow: 0 0 10px var(--dc, #fff); font-variant-numeric: tabular-nums; } /* 属性の色の数字(2026-10-22): 白の縁 2px(paint-order で外側の半分 = 4px の線)+ 暗い影。白い数字は今までどおりの濃紺の縁 */ .st-dmg.el { -webkit-text-stroke: 4px #fff; text-shadow: 0 0 1px rgba(6,8,28,1), 0 0 4px rgba(6,8,28,0.95), 0 3px 4px rgba(6,8,28,0.9), 0 0 14px var(--dc, #fff); } .st-dmg.weak::after { content: '弱点!'; margin-left: 3px; font-size: 0.55em; color: #fff3b0; } .st-dmg.resist { opacity: 0; filter: saturate(0.5); } .st-dmg.go { animation: stDmgUp 0.95s ease-out forwards; } @keyframes stDmgUp { 0% { opacity: 0; transform: translate(var(--dx, 0px), 6px) scale(0.5); } 12% { opacity: 1; transform: translate(var(--dx, 0px), -4px) scale(1.2); } 28% { transform: translate(var(--dx, 0px), -8px) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0px), -34px) scale(0.95); } } .st-dmg.pop { color: #7CFC9C; text-shadow: 0 0 10px #2fb860; } .st-dmg.hurt { color: #ff3b5c; -webkit-text-stroke: 4px #fff; text-shadow: 0 0 10px rgba(255,59,92,0.8); } /* 敵の攻撃 = 赤 #ff3b5c 1色(白縁) */ .st-dmg.txt { font-family: inherit; font-weight: 900; font-size: calc(0.78rem * var(--ds, 1)); -webkit-text-stroke-width: 2.5px; } .st-dmg.txt.go { animation-duration: 1.25s; } /* まとめた攻撃(1手のダメージの合計)が敵に当たったときの大きな数字: 少し長く残る */ .st-dmg.strike { -webkit-text-stroke-width: 4px; z-index: 1; } .st-dmg.strike.go { animation: stDmgStrike 0.8s ease-out forwards; } /* 2026-10-22: 1.9 → 1.0 の弾み(約 0.25 秒)のあと、30px 上へ流れながら 0.5 秒で消える(合わせて約 0.8 秒。敵の顔の上に長く残さない) */ @keyframes stDmgStrike { 0% { opacity: 0; transform: translate(0, 0) scale(1.9); } 12% { opacity: 1; transform: translate(0, -2px) scale(0.92); } 22% { transform: translate(0, -4px) scale(1.06); } 32% { opacity: 1; transform: translate(0, -5px) scale(1); animation-timing-function: ease-in; } 100% { opacity: 0; transform: translate(0, -35px) scale(0.98); } } /* 倒した一撃の数字: 1.3 倍に弾んで 0.4 秒で消える(次のウェーブの上に残さない) */ .st-dmg.strike.kill.go { animation: stDmgKill 0.4s ease-out forwards; } @keyframes stDmgKill { 0% { opacity: 1; transform: translate(0, 0) scale(0.9); } 35% { opacity: 1; transform: translate(0, -4px) scale(1.3); } 100% { opacity: 0; transform: translate(0, -8px) scale(1.3); } } /* 敵の攻撃の「-N」(パーティーのHPバーの真上の中央。下端を基準に 24px 落ちて消える)・回復の「+N」(右寄りで、重ならない)。点 (x, y) は数字の下端の中央 */ .st-dmg.hurt.big, .st-dmg.heal { -webkit-text-stroke-width: 4px; } .st-dmg.hurt.big.go { animation: stHurtDrop 1.1s ease-out forwards; } @keyframes stHurtDrop { 0% { opacity: 0; transform: translate(-50%, calc(-100% - 40px)) scale(1.5); } 12% { opacity: 1; transform: translate(-50%, calc(-100% - 36px)) scale(1); } 30% { transform: translate(-50%, calc(-100% - 34px)) scale(1.06); } 72% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, calc(-100% - 10px)) scale(1); } } .st-dmg.heal.go { animation: stHealRise 1.1s ease-out forwards; } @keyframes stHealRise { 0% { opacity: 0; transform: translate(-50%, calc(-100% + 4px)) scale(0.6); } 14% { opacity: 1; transform: translate(-50%, calc(-100% - 2px)) scale(1.15); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, calc(-100% - 26px)) scale(1); } } /* 戦闘の演出(stella-battle-fx.js): スキルの光・ためている数字・必殺技のカットインを描く、画面全体のオーバーレイ(固定・クリック不可) */ .st-bfx { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; contain: strict; } /* ---- パーティーのパネル ---- */ .st-party { position: relative; width: 100%; padding: 5px 8px 6px; background: var(--st-glass); border: 1px solid var(--st-line); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 16px rgba(90,100,255,0.14); } .st-p-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; min-height: 16px; } .st-p-top .st-bar { flex: 1 1 90px; min-width: 70px; } .st-p-top .st-bar.hurt { animation: stShake 0.4s ease-out; } /* 敵に攻撃された: パーティーのパネルが 6px で 2 往復揺れる・3枚のカードが 80ms だけ暗くなる(動きを減らす設定では付けない) */ .st-party.hit { animation: stPartyHit 0.34s linear; } .st-party.hit .st-p-top .st-bar.hurt { animation: none; } @keyframes stPartyHit { 0%, 100% { transform: none; } 12.5% { transform: translateX(-6px); } 37.5% { transform: translateX(6px); } 62.5% { transform: translateX(-6px); } 87.5% { transform: translateX(6px); } } .st-members.dim { animation: stCardDim 0.1s linear; } @keyframes stCardDim { 0%, 75% { filter: brightness(0.6); } 100% { filter: none; } } @keyframes stShake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } } .st-buffs { display: flex; gap: 3px; flex: 0 1 auto; min-width: 0; justify-content: flex-start; flex-wrap: nowrap; overflow: hidden; } .st-chip { flex: none; padding: 0 5px; height: 15px; display: inline-flex; align-items: center; border-radius: 7px; font-size: 0.75rem; font-weight: 800; line-height: 1; color: #fff; background: rgba(60,90,200,0.85); border: 1px solid rgba(190,205,255,0.6); white-space: nowrap; } .st-chip.good { background: rgba(30,130,70,0.85); border-color: rgba(160,255,190,0.6); } .st-chip.bad { background: rgba(150,40,70,0.85); border-color: rgba(255,170,190,0.6); } .st-chip.foe { background: rgba(150,90,20,0.85); border-color: rgba(255,210,150,0.6); } /* 敵にかかっている効果(弱点付与・時間停止) */ .st-chip.ebuf { background: rgba(170,30,40,0.88); border-color: rgba(255,160,160,0.65); } /* 敵自身の状態(防御の構え・怒り・復活。RULES_VERSION 13) */ /* ---- 敵にかかった味方の毒(2026-10-26。stella-stage.js の pzSync)。敵の状態の行の先頭: 紫のしずく + 残りの手数 + 2 つ以上のとき「×2」。押す・カーソルを乗せると吹き出し(.st-cd-tip と同じ見た目)。 色は --pz(色覚サポートでは明るい紫ピンク。stella-stage.js の PZ_STD / PZ_CUD と同じ)。出入りの動きは Web Animations(動きを減らす設定では動かさない) ---- */ .st-pz { --pz: #d05cff; position: relative; pointer-events: auto; flex: none; display: inline-flex; align-items: center; gap: 2px; height: 24px; min-width: 24px; padding: 0 7px 0 4px; box-sizing: border-box; border-radius: 12px; font: inherit; color: #fff; background: rgba(52, 14, 88, 0.92); border: 1.5px solid var(--pz); box-shadow: 0 0 8px color-mix(in srgb, var(--pz) 55%, transparent); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .st-pz::before { content: ''; position: absolute; inset: -10px -6px; } /* 押せる範囲を広げる(見た目は 24px のまま) */ .st-pz[hidden] { display: none; } .st-pz:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; } .st-pz-ic, .st-info-pz .st-pz-ic { flex: none; display: inline-flex; width: 18px; height: 18px; color: var(--pz); } .st-pz-ic svg { display: block; width: 100%; height: 100%; } .st-pz-n { display: inline-block; font-family: var(--st-font-num); font-size: 0.95rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); } .st-pz-x { font-style: normal; font-size: 0.72rem; font-weight: 800; line-height: 1; color: #f3d6ff; } .st-pz-x[hidden] { display: none; } .st-pz-tip { z-index: 21; } html.st-cud .st-pz, html.st-cud .st-info-pz { --pz: #f0a0ff; } .st-info-pz { --pz: #d05cff; display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 8px; border-radius: 10px; background: rgba(52, 14, 88, 0.55); border: 1px solid color-mix(in srgb, var(--pz) 65%, transparent); font-size: 0.95rem; font-weight: 700; line-height: 1.3; color: #f3dcff; } /* 広い画面の左の情報パネル(同じ文を出す) */ .st-info-pz[hidden] { display: none; } .st-e-buffs { position: absolute; left: 48px; top: 20px; z-index: 2; display: flex; gap: 3px; flex-wrap: wrap; max-width: 60%; pointer-events: none; } .st-cd.stopped { background: rgba(20,70,120,0.6); opacity: 0.85; } /* 時間停止中のカウントダウン(色と透明度だけ) */ .st-cd.stopped b { color: #bfe6ff; } .st-cd.stopped .st-cd-ring .fg { stroke: #9fd8ff; } /* パーティーのパネル(戦闘の下)。普段は横長のカード(輪 + 名前 + ゲージ)。盤の下に余白があるとき(.st-roomy、layout() が測る)は、縦長のカードにして輪とHPバーを大きくする */ .st-members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; } .st-mem { position: relative; display: grid; grid-template-columns: var(--st-ring, 46px) minmax(0, 1fr); align-items: center; gap: 6px; padding: 3px 4px 3px 3px; text-align: left; font: inherit; color: #f0f0f5; cursor: pointer; background: rgba(14,18,64,0.7); border: 1px solid var(--st-line); border-radius: 12px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .st-mem:focus-visible { outline: 3px solid #ffd166; outline-offset: 1px; } /* ゲージの輪(円グラフ): 輪の太さ4px、中にアイコン */ .st-gring { position: relative; width: var(--st-ring, 46px); height: var(--st-ring, 46px); border-radius: 50%; background: linear-gradient(135deg, var(--el, #8fb3ff), color-mix(in srgb, var(--el, #8fb3ff) 40%, #0a0e34)); display: grid; place-items: center; } /* UI v3: 輪は属性色の枠だけ(ゲージは下の細い棒 + 数字)。満タンで金色 */ /* ゲージ: 細い棒(5px)+ 数字。--g(0..1)は JS がカード(.st-mem)に入れる */ .st-mem-bar { display: block; width: 100%; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.18); overflow: hidden; } .st-mem-bar i { display: block; height: 100%; width: calc(var(--g, 0) * 100%); border-radius: 3px; background: var(--el, #8fb3ff); transition: width 0.2s ease-out; } .st-mem.ready .st-mem-bar i { background: #ffd166; } .st-gring .st-ico { width: calc(var(--st-ring, 46px) - 8px); height: calc(var(--st-ring, 46px) - 8px); border: 0; } .st-mem-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.1; } .st-mem-slot { display: flex; align-items: center; gap: 3px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0; color: #dfe6ff; white-space: nowrap; min-width: 0; } /* 属性のオーブは輪の角に(名前の横に置くと「ピラミッド」と重なっていた)。普段は右下、縦長のカードでは右上 */ .st-gring .st-badge { position: absolute; right: -3px; bottom: -4px; z-index: 2; } .st-mem-g { font-family: var(--st-font-num); font-weight: 700; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: #b3b9dc; white-space: nowrap; } .st-mem-ult { display: none; font-size: 0.75rem; font-weight: 900; color: #fff; letter-spacing: 0.04em; } .st-mem.ready { border-color: #ffd166; box-shadow: 0 0 0 2px rgba(255,209,102,0.7), 0 0 14px rgba(255,209,102,0.55); animation: stReady 0.9s ease-in-out infinite alternate; background: rgba(60,50,10,0.75); } .st-mem.ready .st-mem-g { display: none; } .st-mem.ready .st-mem-ult { display: block; color: #ffe08a; } .st-mem.ready .st-gring { background: conic-gradient(#ffd166 1turn, #ffd166 0); } .st-mem.pop { animation: stPop 0.4s ease-out; } .st-mem:disabled { opacity: 0.9; cursor: default; } .st-mem .st-key { position: absolute; right: 4px; bottom: 1px; font-size: 0.75rem; color: #9aa0c3; line-height: 1; } @keyframes stReady { from { transform: none; } to { transform: translateY(-2px); } } @keyframes stPop { 0% { transform: scale(1.12); filter: brightness(1.6); } 100% { transform: none; filter: none; } } .st-mem .st-key { display: none; } @media (pointer: fine) { .st-mem .st-key { display: block; } } /* 1/2/3 のキーの目印は、マウスのある端末だけ(タッチの端末では出さない) */ /* 必殺技が使えるあいだ: 金色の光の輪が脈打ち、小さな光の粒がアイコンのまわりをまわる(transform / opacity だけ。再描画は軽い) */ .st-mem.ready .st-gring::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 9px 3px rgba(255,209,102,0.95), inset 0 0 6px 1px rgba(255,224,138,0.7); pointer-events: none; animation: stUltGlow 0.9s ease-in-out infinite alternate; } .st-mem.ready .st-gring::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; animation: stUltOrbit 2.6s linear infinite; background: radial-gradient(circle at 50% 3%, #fff 0 1.3px, rgba(255,224,138,0.9) 1.6px, transparent 3px), radial-gradient(circle at 97% 50%, #fff 0 1px, rgba(255,224,138,0.8) 1.3px, transparent 2.6px), radial-gradient(circle at 50% 97%, #fff 0 1.3px, rgba(255,224,138,0.9) 1.6px, transparent 3px), radial-gradient(circle at 3% 50%, #fff 0 1px, rgba(255,224,138,0.8) 1.3px, transparent 2.6px); } @keyframes stUltGlow { from { opacity: 0.45; transform: scale(0.97); } to { opacity: 1; transform: scale(1.04); } } @keyframes stUltOrbit { to { transform: rotate(1turn); } } /* 満タンになった瞬間: 光の輪が広がって消える・「必殺技 READY!」が浮かぶ */ .st-ult-burst { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #ffd166; box-shadow: 0 0 12px 2px rgba(255,224,138,0.9); pointer-events: none; opacity: 0; animation: stUltBurst 0.6s ease-out forwards; } .st-ult-txt { position: absolute; left: 50%; bottom: 100%; margin-bottom: 2px; white-space: nowrap; pointer-events: none; z-index: 4; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.04em; color: #ffe08a; text-shadow: 0 0 6px #b8860b, 0 1px 2px #000; opacity: 0; animation: stUltRise 0.9s ease-out forwards; } @keyframes stUltBurst { 0% { transform: scale(0.7); opacity: 0.95; } 100% { transform: scale(2.4); opacity: 0; } } @keyframes stUltRise { 0% { transform: translate(-50%, 8px); opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -16px); opacity: 0; } } /* 波の表示・ボス警告(盤の上に重ねる。クリックは通さない) */ .st-banner { position: absolute; left: 0; right: 0; top: 40%; text-align: center; line-height: 1.15; pointer-events: none; opacity: 0; z-index: 2; } .st-banner .m { display: block; font-size: 1.7rem; font-weight: 900; color: #fff; letter-spacing: 0.06em; text-shadow: 0 0 16px rgba(130,160,255,0.95), 0 2px 0 rgba(0,0,0,0.7); } .st-banner .s { display: block; margin-top: 2px; font-size: 0.9rem; font-weight: 800; color: #d6dcff; text-shadow: 0 2px 0 rgba(0,0,0,0.7); } .st-banner.boss .m { color: #ff9aa8; text-shadow: 0 0 18px rgba(255,60,90,1), 0 2px 0 rgba(0,0,0,0.7); font-size: 2rem; } .st-banner.boss .s { color: #ffd0d6; } .st-banner.show { animation: stBanner 1.5s ease-out forwards; } .st-banner.boss.show { animation-duration: 2s; } @keyframes stBanner { 0% { opacity: 0; transform: scale(1.5); } 14% { opacity: 1; transform: scale(1); } 72% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } } /* 敵の攻撃: 画面のふちが赤くなる */ .st-flash { position: fixed; inset: 0; pointer-events: none; z-index: 6; opacity: 0; box-shadow: inset 0 0 60px 6px rgba(255,59,92,0.7); } /* 2026-10-22: 画面の縁だけ(中心は透明・外周 60px が赤)。全画面の赤い塗りはなし */ .st-flash.go { animation: stFlash 0.45s ease-out; } @keyframes stFlash { 0% { opacity: 1; } 100% { opacity: 0; } } /* 戦闘の結果・一時停止のパネル(盤面の上): ボタンが3つ縦に並ぶ */ .st-battle .hd-overlay > div { width: 100%; max-width: 280px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; } .st-battle .hd-overlay h2 { margin-bottom: 0; } .st-battle .hd-overlay p { margin-bottom: 4px; } .st-battle .hd-overlay .hd-btn[hidden] { display: none; } .st-battle .hd-overlay .hd-btn { padding: 9px 12px; } .st-battle .hd-overlay #ovText { white-space: pre-line; overflow-wrap: anywhere; } /* 負けの画面のコンティニュー(スターコア) */ .st-battle .hd-overlay .hd-btn.st-cont-btn { color: var(--st-gold-soft); border-color: var(--st-gold); font-weight: 800; } .st-battle .hd-overlay .hd-btn.st-cont-btn:disabled { background: rgba(80, 80, 110, 0.6); border-color: rgba(160, 160, 200, 0.4); color: #c5c8e0; font-weight: 400; cursor: not-allowed; } .st-battle .hd-overlay h2.win { color: #ffe08a; text-shadow: 0 0 16px rgba(255,209,102,0.8); } .st-battle .hd-overlay h2.lose { color: #ff9aa8; } /* 演出を減らす設定: 動きをやめて、数字は短く出て消えるだけ */ html.hd-reduce .st-dmg.go { animation: stDmgFade 0.9s linear forwards; } html.hd-reduce .st-banner.show, html.hd-reduce .st-banner.boss.show { animation: stBannerFade 1.6s linear forwards; } html.hd-reduce .st-flash { display: none; } /* 動きを減らす設定: 赤・白のフラッシュは出さない */ html.hd-reduce .st-p-top .st-bar.hurt, html.hd-reduce .st-cd.bump, html.hd-reduce .st-mem.pop, html.hd-reduce .st-mem.ready, html.hd-reduce .st-cd.warn { animation: none; } html.hd-reduce .st-bar > i { transition: none; } html.hd-reduce .st-mem.ready .st-gring::before { animation: none; opacity: 1; } html.hd-reduce .st-mem.ready .st-gring::after, html.hd-reduce .st-ult-burst, html.hd-reduce .st-ult-txt { display: none; } @keyframes stDmgFade { 0% { opacity: 1; transform: translate(var(--dx, 0px), 0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0px), 0); } } @keyframes stBannerFade { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } @keyframes stFlashFade { 0% { opacity: 0.6; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-dmg.go { animation: stDmgFade 0.9s linear forwards; } html:not(.hd-motion) .st-banner.show, html:not(.hd-motion) .st-banner.boss.show { animation: stBannerFade 1.6s linear forwards; } html:not(.hd-motion) .st-flash { display: none; } html:not(.hd-motion) .st-p-top .st-bar.hurt, html:not(.hd-motion) .st-cd.bump, html:not(.hd-motion) .st-mem.pop, html:not(.hd-motion) .st-mem.ready, html:not(.hd-motion) .st-cd.warn { animation: none; } html:not(.hd-motion) .st-bar > i { transition: none; } html:not(.hd-motion) .st-mem.ready .st-gring::before { animation: none; opacity: 1; } html:not(.hd-motion) .st-mem.ready .st-gring::after, html:not(.hd-motion) .st-ult-burst, html:not(.hd-motion) .st-ult-txt { display: none; } } /* ============================ 持ち物(ステージ選択の上) ============================ */ .st-inv { display: flex; gap: 4px 10px; flex-wrap: wrap; align-items: center; margin: 0 0 8px; font-size: 0.75rem; color: #cfd8ff; } .st-inv-i { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 3px; border-radius: 999px; background: rgba(14,18,64,0.7); border: 1px solid var(--st-line); } .st-inv-i small { font-size: 0.75rem; color: #b3b9dc; } .st-inv-i b { font-size: 0.8rem; color: #fff; font-variant-numeric: tabular-nums; } .st-item-ico { display: block; object-fit: contain; flex: none; } /* ============================ キャラの詳細ボタン(編成画面) ============================ */ .st-rcw { position: relative; min-width: 0; } .st-dbtn { font: inherit; cursor: pointer; line-height: 1; } /* 色・縁は「副ボタンの形」(UI v2 ボタンの段階) */ .st-dbtn:focus-visible { outline: 3px solid #ffd166; outline-offset: 1px; } .st-detail { position: absolute; right: 8px; top: 6px; padding: 3px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; } .st-rc-i { position: absolute; right: 3px; bottom: 26px; width: 20px; height: 20px; padding: 0; border-radius: 50%; font-size: 0.75rem; font-weight: 800; } .st-rc { width: 100%; height: 100%; } /* ============================ 戦闘中のキャラの状態カード ============================ */ .st-pop { position: fixed; z-index: 7; width: min(330px, calc(100vw - 16px)); padding: 7px 9px 8px; pointer-events: none; background: linear-gradient(rgba(22,26,84,0.97), rgba(8,10,40,0.98)); border: 2px solid var(--el, rgba(160,180,255,0.6)); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.7), 0 0 14px rgba(90,100,255,0.3); font-size: 0.75rem; line-height: 1.4; color: #f0f0f5; text-align: left; } .st-pop[hidden] { display: none; } .st-pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .st-pop-head .st-ico { width: 40px; height: 40px; flex: none; } .st-pop-t { min-width: 0; } .st-pop-n { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .st-pop-n b { font-size: 0.88rem; } .st-pop-s { font-size: 0.75rem; color: #b8c2f0; } .st-pop-stats { display: flex; gap: 2px 10px; flex-wrap: wrap; margin-bottom: 4px; font-size: 0.75rem; font-weight: 700; color: #dfe6ff; font-variant-numeric: tabular-nums; } .st-pop-stats .g.ready { color: #ffe08a; } .st-sk { display: grid; grid-template-columns: 8.4em minmax(0, 1fr); gap: 6px; align-items: baseline; padding: 2px 0; border-top: 1px solid rgba(160,180,255,0.14); } .st-sk-l { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 800; color: #cfd8ff; white-space: nowrap; } .st-sk-t { font-size: 0.75rem; color: #ffe9a6; } .st-sk.off .st-sk-l, .st-sk.off .st-sk-t { color: #8d95bd; font-weight: 400; } .st-sk.off { opacity: 0.88; } /* v5: 状態カードのワザの行 = 見出し(アイコン + ピラミッド(担当))の下に説明を積む。横並びだと 390px で見出しが説明に重なる */ .st-pop .st-sk { grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 3px 0 4px; } .st-pop .st-sk-l { white-space: normal; min-width: 0; } .st-pop .st-sk-t { min-width: 0; overflow-wrap: anywhere; line-height: 1.4; } .st-pop-ult { margin-top: 3px; padding-top: 4px; border-top: 1px solid rgba(160,180,255,0.3); font-size: 0.75rem; color: #d6dcff; } .st-pop-ult b { color: #fff; } /* ============================ キャラの詳細(編成画面で開くシート) ============================ */ .st-sheet-bg { position: fixed; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; padding: 10px; background: rgba(2,3,18,0.78); } .st-sheet-bg[hidden] { display: none; } .st-sheet { position: relative; display: flex; flex-direction: column; width: min(440px, 100%); max-height: min(640px, 100%); overflow: hidden; background: linear-gradient(rgba(24,28,84,0.98), rgba(8,10,40,0.99)); border: 1px solid rgba(170,190,255,0.5); border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.7), 0 0 20px rgba(90,100,255,0.3); color: #f0f0f5; text-align: left; } .st-sheet:focus { outline: none; } .st-sheet-x { position: absolute; right: 6px; top: 4px; z-index: 1; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(170,190,255,0.5); background: rgba(10,14,60,0.85); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; } .st-sheet-x:focus-visible { outline: 3px solid #ffd166; outline-offset: 1px; } .st-sheet-body { overflow-y: auto; padding: 10px 12px 4px; -webkit-overflow-scrolling: touch; } .st-sheet-foot { padding: 6px 12px 10px; text-align: center; } .st-sh-top { display: flex; gap: 12px; align-items: flex-start; } .st-sh-art { flex: none; width: 108px; aspect-ratio: 3 / 5; border-radius: 10px; overflow: hidden; border: 2px solid var(--el, #8fb3ff); background: #0c1030; box-shadow: 0 0 14px color-mix(in srgb, var(--el, #8fb3ff) 55%, transparent); } .st-sh-art img, .st-sh-art video, .st-sh-art canvas { display: block; width: 100%; height: 100%; object-fit: cover; } .st-sh-info { min-width: 0; flex: 1; padding-right: 26px; } .st-sh-name { margin: 0; font-size: 1.15rem; text-shadow: 0 1px 3px rgba(0,0,0,0.8); } .st-sh-title { font-size: 0.75rem; color: #c8d0ff; margin-bottom: 4px; } .st-sh-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .st-sh-meta .st-stars { font-size: 13px; } .st-sh-origin { font-size: 0.75rem; padding: 1px 7px; border-radius: 999px; background: rgba(110,130,255,0.3); border: 1px solid rgba(160,180,255,0.4); } .st-sh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } .st-stat { padding: 3px 4px; text-align: center; border-radius: 8px; background: rgba(0,0,24,0.5); border: 1px solid rgba(160,180,255,0.25); line-height: 1.2; } .st-stat small { display: block; font-size: 0.75rem; color: #aab3dd; } .st-stat b { font-size: 0.9rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .st-stat b.long { font-size: 0.76rem; } /* 7文字以上(130,941 など。★5 の高いレベル) */ .st-sh-sec { margin-top: 10px; } .st-sh-sec h3 { margin: 0 0 3px; font-size: 0.78rem; color: #cfd8ff; } .st-sh-sec .st-sk { grid-template-columns: 5.2em minmax(0, 1fr); padding: 4px 0; } .st-sh-sec .st-sk-l { font-size: 0.75rem; flex-wrap: wrap; row-gap: 2px; white-space: normal; min-width: 0; } /* 「編成中」の札が枠の名前と並んで 5.2em の列からはみ出し、右の文に重なるのを防ぐ(ja・en・th・de で重なった。2026-11-02 実機)。収まるときは今まで通り横並び */ .st-sh-sec .st-sk-tag { margin-left: 0; } .st-sh-sec .st-sk-l > .st-sk-tag:not(:first-child) { margin-left: 2px; } .st-sh-sec .st-sk-t { font-size: 0.76rem; } /* 戦績のシート(≡ メニュー → 戦績): 数字のマス(4つの段は2列)・よく使うキャラの行 */ .st-ps-grid { gap: 6px; } .st-ps-grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-ps-ch { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(160,180,255,0.15); } .st-ps-ch:last-child { border-bottom: 0; } .st-ps-ch .st-ps-rank { width: 1.4em; text-align: center; font-weight: 700; color: #ffe9a6; } .st-ps-ch .st-ico { width: 36px; height: 36px; flex: none; } .st-ps-ch .n { flex: 1; min-width: 0; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-ps-ch b { font-size: 0.82rem; font-variant-numeric: tabular-nums; } .st-sh-sec.ult p { margin: 0; font-size: 0.78rem; line-height: 1.5; color: #ffe9a6; } /* ============================ ステージクリアの報酬の画面 ============================ */ .st-rw { position: fixed; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 14px; background: radial-gradient(ellipse at 50% 40%, rgba(60,50,120,0.88), rgba(4,5,26,0.96) 75%); opacity: 0; transition: opacity 0.45s ease-out; } .st-rw[hidden] { display: none; } .st-rw.go, .st-rw.still { opacity: 1; } .st-rw-in { width: min(360px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; } .st-rw-title { font-size: 2rem; font-weight: 900; letter-spacing: 0.06em; color: #ffe08a; text-shadow: 0 0 18px rgba(255,209,102,0.9), 0 2px 0 rgba(0,0,0,0.7); transform: scale(0.4); opacity: 0; } .st-rw.go .st-rw-title { animation: rwTitle 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) forwards; } .st-rw.still .st-rw-title { transform: none; opacity: 1; } @keyframes rwTitle { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .st-rw-sub { margin: 0; font-size: 0.8rem; color: #d6dcff; min-height: 1.2em; opacity: 0; } .st-rw.go .st-rw-sub, .st-rw.still .st-rw-sub { opacity: 1; transition: opacity 0.4s 0.35s; } .st-rw-label { margin-top: 4px; padding: 2px 14px; border-radius: 999px; font-size: 0.75rem; font-weight: 800; color: #dfe6ff; background: rgba(110,130,255,0.35); border: 1px solid rgba(170,190,255,0.5); } .st-rw-label.first { color: #3a2600; background: linear-gradient(#ffe9a6, #ffc84a); border-color: #fff3c4; } /* 後から出るもの(ラベル・持ち物・ボタン)は、場所を空けたまま(レイアウトが動かない)ふわっと出す */ .st-rw-label, .st-rw-total, .st-rw-btn { transition: opacity 0.4s ease-out, transform 0.4s ease-out; } .st-rw-label[hidden], .st-rw-total[hidden], .st-rw-btn[hidden] { display: block; visibility: hidden; opacity: 0; transform: translateY(6px); } .st-rw-items { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; min-height: 112px; } .st-rw-item { position: relative; width: 112px; padding: 8px 6px 6px; border-radius: 14px; background: linear-gradient(rgba(40,50,130,0.8), rgba(14,18,64,0.85)); border: 1px solid rgba(190,205,255,0.55); box-shadow: 0 0 14px rgba(120,140,255,0.3); overflow: hidden; opacity: 0; transform: scale(0.3); } .st-rw-item .ic { position: relative; display: grid; place-items: center; height: 60px; } .st-rw-item .nm { margin-top: 2px; font-size: 0.75rem; font-weight: 800; line-height: 1.25; } .st-rw-item.bonus { border-color: rgba(255,224,138,0.7); } .st-rw-bn { position: absolute; top: 4px; left: 0; right: 0; font-size: 0.75rem; font-weight: 900; color: #ffe08a; letter-spacing: 0.04em; z-index: 1; } .st-rw-item.long .n { font-size: 1.05rem; } .st-rw-item .n { display: block; margin-top: 1px; font-size: 1.3rem; font-weight: 900; color: #ffe08a; text-shadow: 0 0 10px rgba(255,209,102,0.7), 0 2px 0 rgba(0,0,0,0.7); font-variant-numeric: tabular-nums; } .st-rw-item.in { opacity: 1; transform: none; animation: rwPop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both; } .st-rw-item::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.65), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; } .st-rw-item.in::after { animation: rwShine 0.9s 0.25s ease-out both; } .st-rw-item.in .st-item-ico { animation: rwIcon 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both; } @keyframes rwPop { 0% { transform: scale(0.3); opacity: 0; } 55% { transform: scale(1.14); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes rwShine { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } } @keyframes rwIcon { 0% { transform: rotate(-20deg) scale(0.6); } 100% { transform: none; } } .st-rw-item .sp { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff6c8; box-shadow: 0 0 6px #ffd24a; opacity: 0; } .st-rw-item.in .sp { animation: rwSpark 0.8s 0.1s ease-out both; } @keyframes rwSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-44px) scale(0.3); } } .st-rw-total { margin: 0; font-size: 0.75rem; color: #b8c2f0; } .st-rw-total b { color: #fff; font-variant-numeric: tabular-nums; } /* プレイヤー経験値・レベルアップ(勝ちの報酬の画面) */ .st-rw-plv { margin: 6px 0 0; font-size: 0.8rem; color: #dfe6ff; transition: opacity 0.4s ease-out, transform 0.4s ease-out; } .st-rw-plv:empty { display: none; } .st-rw-plv[hidden] { display: block; visibility: hidden; opacity: 0; transform: translateY(6px); } .st-rw-plv[hidden]:empty { display: none; } .st-rw-pexp { margin: 0; } .st-rw-pexp b { color: #9fe0ff; font-variant-numeric: tabular-nums; } .st-rw-pnow { margin: 3px 0 0; display: flex; gap: 8px; align-items: center; justify-content: center; } .st-rw-pnow span { font-weight: 800; color: #fff; } .st-rw-pnow small { font-size: 0.75rem; color: #b8c2f0; } .st-rw-lvup { margin: 8px auto 0; padding: 8px 14px; max-width: 320px; border-radius: 12px; background: linear-gradient(180deg, rgba(255,220,120,0.22), rgba(255,170,60,0.12)); border: 1px solid rgba(255,214,120,0.7); box-shadow: 0 0 18px rgba(255,214,120,0.35); } .st-rw-lvup-t { display: block; font-size: 1.05rem; font-weight: 900; color: #ffe08a; letter-spacing: 0.04em; } .st-rw-lvup-l { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; justify-content: center; font-size: 0.76rem; } .st-rw-lvup-l li.tk { color: #ffe08a; font-weight: 800; } html.hd-reduce .st-rw-plv { transition: none; } .st-rw-btn { min-width: 11em; margin-top: 6px; padding: 10px 18px; } /* 動きを減らす: 演出なし(すぐに全部表示) */ .st-rw.still .st-rw-item, .st-rw.still .st-rw-item.in { opacity: 1; transform: none; animation: none; } html.hd-reduce .st-rw, html.hd-reduce .st-rw-sub { transition: none; } html.hd-reduce .st-rw-title, html.hd-reduce .st-rw-item.in { animation: none; } html.hd-reduce .st-rw-label, html.hd-reduce .st-rw-total, html.hd-reduce .st-rw-btn { transition: none; } html.hd-reduce .st-rw-title { transform: none; opacity: 1; } html.hd-reduce .st-rw-item.in { transform: none; } html.hd-reduce .st-rw-item::after, html.hd-reduce .st-rw-item .sp { animation: none; display: none; } html.hd-reduce .st-rw-item.in .st-item-ico { animation: none; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-rw, html:not(.hd-motion) .st-rw-sub { transition: none; } html:not(.hd-motion) .st-rw-title, html:not(.hd-motion) .st-rw-item.in { animation: none; } html:not(.hd-motion) .st-rw-label, html:not(.hd-motion) .st-rw-total, html:not(.hd-motion) .st-rw-btn { transition: none; } html:not(.hd-motion) .st-rw-title { transform: none; opacity: 1; } html:not(.hd-motion) .st-rw-item.in { transform: none; } html:not(.hd-motion) .st-rw-item::after, html:not(.hd-motion) .st-rw-item .sp { animation: none; display: none; } html:not(.hd-motion) .st-rw-item.in .st-item-ico { animation: none; } } /* iOS の長押しメニュー・選択・タップの色・画像のドラッグに邪魔されない(長押しで詳細を出すため) */ .st-slot, .st-rc, .st-dbtn, .st-slot img, .st-rc img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .st-ico, .st-item-ico { -webkit-user-drag: none; user-drag: none; } .st-rw:focus { outline: none; } .st-swallow { position: fixed; inset: 0; z-index: 20; background: transparent; } /* ---- 小さい画面(幅480px以下) ---- */ @media (max-width: 480px) { .st-bhead .hd-title { font-size: 0.86rem; } .st-mem { grid-template-columns: var(--st-ring, 40px) minmax(0, 1fr); gap: 4px; } .st-gring { width: var(--st-ring, 40px); height: var(--st-ring, 40px); } .st-gring .st-ico { width: calc(var(--st-ring, 40px) - 7px); height: calc(var(--st-ring, 40px) - 7px); } .st-party { padding: 4px 6px 5px; } #stBelow { gap: 5px; } #stBelow .hd-pad { height: 48px; } .st-banner .m { font-size: 1.4rem; } .st-banner.boss .m { font-size: 1.7rem; } } /* 盤の下に余白があるとき(hexdrop.js layout() が測り、#stBelow に .st-roomy・--st-ring・--st-hpbar を付ける): 縦長のカード。輪を大きく、HPバーを太く */ .st-roomy .st-party { padding: 8px 10px 10px; } .st-roomy .st-p-top { margin-bottom: 4px; min-height: var(--st-hpbar, 22px); } .st-roomy .st-p-bar { height: var(--st-hpbar, 22px); border-radius: 11px; } .st-roomy .st-p-bar > i { border-radius: 11px 0 0 11px; } .st-roomy .st-p-bar > b { font-size: 0.9rem; } .st-roomy .st-members { margin-top: 8px; gap: 8px; } .st-roomy .st-mem { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 14px 6px 6px; text-align: center; } .st-roomy .st-mem-txt { align-items: center; gap: 1px; width: 100%; } .st-roomy .st-mem-slot { justify-content: center; font-size: 0.82rem; } .st-roomy .st-mem-g { font-size: 0.8rem; } .st-roomy .st-mem-ult { font-size: 0.82rem; } .st-roomy .st-mem .st-key { bottom: 3px; right: 5px; } .st-roomy .st-gring .st-ico { width: calc(var(--st-ring) - 10px); height: calc(var(--st-ring) - 10px); } .st-roomy .st-gring .st-badge { right: -4px; bottom: auto; top: -3px; } /* ---- サーバー保存(ログイン必須・スタミナ) ---- */ .st-stamina { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 10px; padding: 6px 10px; border-radius: 12px; background: rgba(14,18,64,0.7); border: 1px solid var(--st-line); font-size: 0.78rem; color: #dfe6ff; } .st-stamina[hidden] { display: none; } .st-stamina .st-sta-t { font-weight: 800; font-variant-numeric: tabular-nums; } .st-stamina .st-sta-t.low { color: #ffb4a0; } .st-stamina .st-sta-bar { flex: 1 1 90px; min-width: 70px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.14); overflow: hidden; } .st-stamina .st-sta-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4fd2a0, #9bf0c8); } .st-stamina .hd-btn { white-space: nowrap; } .st-sc-cost { display: block; margin-top: 2px; font-size: 0.75rem; font-weight: 700; color: #aee4ff; } .st-stage-card.nostamina .st-sc-cost { color: #ff9c8a; } .st-stage-card.nostamina { filter: brightness(0.8); } .st-stage-card.nostamina:hover { filter: brightness(0.9); } .st-claim { position: fixed; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,5,26,0.86); } .st-claim[hidden] { display: none; } /* ほかの端末・タブがセッションを取ったときの案内: ほかのダイアログ・演出・設定より上(このページの操作をすべて止める) */ .st-claim.st-claim-top { z-index: 100; } .st-claim-in { width: min(340px, 100%); padding: 18px 16px; border-radius: 16px; text-align: center; background: linear-gradient(rgba(40,50,130,0.92), rgba(14,18,64,0.95)); border: 1px solid rgba(190,205,255,0.5); } .st-claim-text { margin: 0 0 12px; font-size: 0.92rem; line-height: 1.7; color: #eef1ff; } .st-claim-btns { display: flex; flex-direction: column; gap: 8px; } .st-claim-btns .hd-btn[hidden] { display: none; } .st-toast { position: fixed; left: 50%; bottom: 18px; z-index: 7; max-width: min(92vw, 420px); transform: translateX(-50%); padding: 9px 14px; border-radius: 12px; font-size: 0.8rem; line-height: 1.5; text-align: center; color: #fff; background: rgba(20,26,84,0.96); border: 1px solid rgba(190,205,255,0.5); box-shadow: 0 6px 20px rgba(0,0,0,0.5); } .st-toast[hidden] { display: none; } /* ============================ ガチャ(無償通貨=スターコア) ============================ */ .st-link { padding: 4px 6px; border: 0; background: none; color: #9fc0ff; font: inherit; font-size: 0.8rem; text-decoration: none; cursor: pointer; } .st-link:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; border-radius: 4px; } .st-own { display: inline-block; font-size: 0.75rem; font-weight: 800; color: #ffe9a6; white-space: nowrap; } .st-roster-sep { grid-column: 1 / -1; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--st-line); font-size: 0.75rem; color: #aab3dd; } .st-rc.locked { cursor: not-allowed; background: rgba(8,10,36,0.6); } .st-rc.locked .st-ico { filter: grayscale(1) brightness(0.32) contrast(1.1); border-color: rgba(150,160,200,0.3); } .st-rc.locked .st-rc-name { color: #8c95bf; } .st-rc.locked .st-stars { opacity: 0.5; } .st-gc-scene { position: relative; height: 150px; margin: 4px 0 6px; border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse at 50% 55%, rgba(110,90,220,0.25), rgba(8,10,40,0.45) 75%), var(--st-u-gacha, url('stella-chars/bg/gacha.webp')) center / cover no-repeat #03041a; border: 1px solid var(--st-line); } .st-gc-scene .core { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: radial-gradient(circle, #fff, #ffd98a 45%, rgba(255,200,90,0) 72%); box-shadow: 0 0 36px 10px rgba(255,214,120,0.55); animation: gcPulse 2.8s ease-in-out infinite; } .st-gc-scene i { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(190,205,255,0.5); transform-origin: 50% 50%; } .st-gc-scene .o1 { width: 90px; height: 90px; margin: -45px; animation: gcSpin 12s linear infinite; border-style: dashed; } .st-gc-scene .o2 { width: 150px; height: 150px; margin: -75px; animation: gcSpin 20s linear infinite reverse; border-color: rgba(255,214,120,0.4); } .st-gc-scene .o3 { width: 230px; height: 230px; margin: -115px; animation: gcSpin 30s linear infinite; border-style: dotted; } @keyframes gcPulse { 0%, 100% { transform: scale(0.9); opacity: 0.85; } 50% { transform: scale(1.15); opacity: 1; } } @keyframes gcSpin { to { transform: rotate(360deg); } } .st-gc-wallet { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; margin: 6px 0; font-size: 0.82rem; color: #dfe6ff; } .st-gc-w { display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px 3px 6px; border-radius: 999px; background: rgba(14,18,64,0.7); border: 1px solid var(--st-line); } .st-gc-w b { color: #fff; font-size: 0.95rem; font-variant-numeric: tabular-nums; } .st-gc-pity { --p: 0%; margin: 6px auto; padding: 6px 12px; max-width: 420px; text-align: center; font-size: 0.86rem; font-weight: 800; color: #ffe9a6; } .st-gc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 420px; margin: 10px auto 6px; } .st-gc-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; line-height: 1.2; } .st-gc-btn .t { font-size: 1.05rem; font-weight: 900; } .st-gc-btn small { font-size: 0.75rem; font-weight: 700; opacity: 0.9; } .st-gc-btn.tk { grid-column: 1 / -1; } .st-gc-btn.tk[hidden] { display: none; } .st-gc-btn:disabled { opacity: 0.5; cursor: not-allowed; } .st-gc-sub { margin: 4px 2px; text-align: center; font-size: 0.75rem; color: #c6cbe8; min-height: 1.3em; } .st-gc-sub.st-gc-region { color: #ffcf8a; } /* 有償スターコアをガチャに使えない国の知らせ(§11.16) */ .st-gc-links { margin: 2px 0; text-align: center; } /* ガチャ画面(モンスト風): 見出し → スターコアガチャ(提供割合・詳細) → バナー → 天井 → 2つの大きなボタン */ .st-gc-head { flex-wrap: wrap; row-gap: 6px; } .st-gc-head .hd-head-buttons { align-items: center; flex-wrap: wrap; justify-content: flex-end; } #stGacha { max-width: 720px; margin-left: auto; margin-right: auto; } .st-gc-sechead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; } .st-gc-sectitle { margin: 0; font-size: 1.05rem; font-weight: 900; color: #ffe9a6; letter-spacing: 0.04em; } .st-gc-mini { display: flex; gap: 6px; flex: none; } .st-gc-minibtn { min-height: 44px; min-width: 44px; padding: 4px 12px; font: inherit; font-size: 0.76rem; font-weight: 800; cursor: pointer; } .st-gc-minibtn:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; } .st-gc-banner { display: block; width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,214,120,0.45); box-shadow: 0 0 22px rgba(255,200,90,0.18); background: #03041a; } .st-gc-banner img { display: block; width: 100%; height: auto; } /* ガチャのバナー(frontend/stella-gacha-banner.js): 文字なしの絵の上に、題・副題・名前の札の文字を HTML で重ねる。バナーの幅 1670 = 100 とした px を --u で掛ける(container query。絵と同じ割合で拡大縮小) */ .st-bn { position: relative; display: block; width: 100%; container-type: inline-size; } .st-bn:not(.is-ready) { visibility: hidden; } /* 絵と文字(字体・大きさの調整)がそろうまで見せない(場所は取るので、あとから動かない) */ .st-bn-ov { --u: calc(1cqw * 100 / 1670); position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 16px; } @supports not (width: 1cqw) { .st-bn-ov { --u: calc(min(100vw, 720px) / 1670); } } .st-bn-t, .st-bn-s, .st-bn-n { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; text-align: center; line-height: 1; margin: 0; -webkit-font-smoothing: antialiased; } .st-bn-t { font-family: 'Shippori Mincho B1', 'Noto Serif', 'Noto Serif TC', 'Noto Serif KR', 'Noto Serif Thai', serif; font-weight: 800; color: #321600; -webkit-text-stroke: calc(var(--u) * 8) #321600; filter: drop-shadow(calc(var(--u) * 6) calc(var(--u) * 8) calc(var(--u) * 8) rgba(0, 0, 0, 0.67)); padding: calc(var(--u) * 4); } .st-bn-t::after { content: attr(data-t); position: absolute; inset: 0; padding: inherit; color: transparent; -webkit-text-stroke: 0; -webkit-text-fill-color: transparent; background: linear-gradient(180deg, #fff8d2 8%, #f7cf6e 46%, #d69628 92%); -webkit-background-clip: text; background-clip: text; } /* 後ろ = 濃い茶のふち(本体の文字)・前 = 金のグラデーション(::after) */ .st-bn-s { font-family: 'Zen Maru Gothic', 'Nunito', 'Noto Sans TC', 'Noto Sans KR', 'Noto Sans Thai', sans-serif; font-weight: 700; color: #fffaeb; -webkit-text-stroke: calc(var(--u) * 6) var(--bn-edge, #180205); paint-order: stroke fill; } .st-bn-n { font-family: 'Shippori Mincho B1', 'Noto Serif', 'Noto Serif TC', 'Noto Serif KR', 'Noto Serif Thai', serif; font-weight: 800; color: #faf6eb; text-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 3) rgba(0, 0, 0, 0.55); } .st-bn-clip { overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } /* 読める下限を守るとき(日本語以外)は、札・枠の幅で切って末尾を … に */ .st-bn-sn { text-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(0, 0, 0, 0.75); } .st-bn-ti { position: absolute; display: block; transform: translate(-50%, -50%); } .st-bn-ti img { display: block; width: 100%; height: auto; } .st-bn[data-bn="fire"] { --bn-edge: #180205; } .st-bn[data-bn="water"] { --bn-edge: #020618; } .st-bn[data-bn="grass"] { --bn-edge: #021007; } .st-bn[data-bn="light"] { --bn-edge: #1a1204; } .st-bn[data-bn="dark"] { --bn-edge: #070212; } .st-gc-owned { margin: 4px 0 0; text-align: center; font-size: 0.75rem; color: #aeb6dc; } .st-gc-owned b { color: #fff; } #stGacha .st-gc-btns { max-width: 720px; margin-top: 8px; } #stGacha .st-gc-btn { min-height: 64px; padding: 10px 6px; } #stGacha .st-gc-btn small { font-size: 0.78rem; font-weight: 800; opacity: 1; } #stGacha .st-gc-btn:disabled { opacity: 0.45; filter: grayscale(0.4); } /* 円の目安(2026-11-02 国ごとの決まり)・提供割合への入口。小さく控えめに(ボタンの主役はスターコアの数)。中身が無いときは場所を取らない */ .st-gc-btn small.st-gc-yen, #stGacha .st-gc-btn small.st-gc-yen { font-size: 0.75rem; font-weight: 700; opacity: 0.88; } .st-gc-btn small.st-gc-yen:empty { display: none; } .st-gc-fine { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 2px auto 4px; max-width: 420px; text-align: center; } .st-gc-fine-note { margin: 0; padding: 3px 10px; border-radius: 10px; background: rgba(6,8,36,0.55); font-size: 0.75rem; line-height: 1.45; color: #c6cbe8; } .st-gc-fine-note[hidden] { display: none; } .st-gc-ratelink { min-height: 44px; padding: 4px 14px; background: rgba(6,8,36,0.55); border: 0; border-radius: 999px; font: inherit; font-size: 0.78rem; font-weight: 800; color: #cfe0ff; cursor: pointer; } .st-gc-ratelink::after { content: " ›"; } .st-gc-ratelink:hover { color: #fff; } .st-gc-ratelink:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; border-radius: 6px; } .st-fine { margin: 6px 2px 0; font-size: 0.75rem; line-height: 1.5; color: #aeb6dc; text-align: center; } .st-fine[hidden] { display: none; } .st-rt-fold { margin-top: 4px; } .st-rt-fold > summary { cursor: pointer; font-size: 0.75rem; font-weight: 800; color: #cfe0ff; min-height: 32px; display: flex; align-items: center; } .st-rk-wk-e { flex-basis: 100%; } .st-rt-note { margin: 8px 0 0; font-weight: 800; color: #ffe9a6; } /* ---- 提供割合・ルールのシート ---- */ .st-rt-p { margin: 4px 0; font-size: 0.76rem; line-height: 1.55; color: #dfe6ff; } .st-rt-row { margin: 6px 0; padding: 6px 8px; border-radius: 10px; background: rgba(0,0,24,0.45); border: 1px solid color-mix(in srgb, var(--rc, #9fc0ff) 55%, transparent); } .st-rt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .st-rt-star { color: var(--rc, #ffd24a); font-weight: 900; font-size: 0.9rem; } .st-rt-head b { font-size: 0.95rem; font-variant-numeric: tabular-nums; } .st-rt-chars { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; } .st-rt-ch { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 2px; border-radius: 999px; font-size: 0.75rem; background: rgba(14,18,64,0.7); border: 1px solid var(--st-line); } .st-rt-ch b { font-variant-numeric: tabular-nums; color: #ffe9a6; } .st-rt-ch .st-badge { font-size: 0.75rem; } /* ---- 演出(召喚 → カードがめくれる → 結果) ---- */ .st-rv { position: fixed; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 10px; overflow-y: auto; background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--rc, #9fc0ff) 18%, rgba(30,28,100,0.3)), rgba(3,4,22,0.62) 76%), var(--st-u-gacha, url('stella-chars/bg/gacha.webp')) center / cover no-repeat #03041a; } .st-rv[hidden] { display: none; } .st-rv:focus { outline: none; } .st-rv-main { width: min(480px, 100%); margin: auto; text-align: center; transition: opacity 0.4s; } .st-rv-main.wait { opacity: 0; } .st-rv-title { margin: 0 0 8px; font-size: 1.1rem; font-weight: 900; letter-spacing: 0.08em; color: #fff; text-shadow: 0 0 14px var(--rc, #9fc0ff), 0 2px 0 rgba(0,0,0,0.7); } .st-rv-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .st-rv-cards.one { grid-template-columns: minmax(0, min(250px, 64vw)); justify-content: center; margin: 6px 0; } .st-rv-card { position: relative; perspective: 700px; aspect-ratio: 3 / 4.8; } /* 背が高いカード(立ち絵を切り取る) */ .st-rv-cards.one .st-rv-card { aspect-ratio: 3 / 5; } .st-rv-card .in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.3, 1.3, 0.5, 1); } .st-rv-card.up .in { transform: rotateY(180deg); } .st-rv-card.noanim .in { transition: none; } .st-rv-card .back, .st-rv-card .face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; } /* 裏 = オーナー提供の絵(2026-10-23。青 = ふつう・★3 / 金 = ★5。tools/art/make_card_backs.py)。絵は本体(角丸の長方形)がカードの箱ぴったりで、上下の菱形の先端だけ箱の外へ(inset: -2.47% 0)。青は ::before、金は ::after(★5で透明から重ねる) */ .st-rv-card .back { overflow: visible; justify-content: flex-end; padding-bottom: 4.5%; isolation: isolate; border: 0; background: none; } .st-rv-card .back::before, .st-rv-card .back::after { content: ''; position: absolute; inset: -2.47% 0; z-index: 0; pointer-events: none; background: var(--st-u-back-normal, url('stella-ui/gacha-back-normal.webp')) center / 100% 100% no-repeat; } .st-rv-card .back::after { background-image: var(--st-u-back-star5, url('stella-ui/gacha-back-star5.webp')); opacity: 0; transition: opacity 0.3s ease-out; } .st-rv-card .face { display: block; transform: rotateY(180deg); padding: 0; border: 0; background: radial-gradient(ellipse at 50% 32%, color-mix(in srgb, var(--rc) 34%, #1c2268), #080b30 78%); box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 40%, transparent); } /* ★4 = 青い裏のまま、形に沿った金の縁の光(drop-shadow は絵の透明部分に沿う)。★5 = 金の裏 + 白金の強い光(虹の気配つき) */ .st-rv-card.bk4 .back { filter: drop-shadow(0 0 4px rgba(255,208,96,1)) drop-shadow(0 0 10px rgba(255,186,48,0.85)) drop-shadow(0 0 20px rgba(255,170,40,0.4)); } .st-rv-card.bk5 .back { filter: drop-shadow(0 0 5px rgba(255,244,190,1)) drop-shadow(0 0 14px rgba(255,214,90,0.8)) drop-shadow(0 0 24px rgba(197,139,255,0.45)); } .st-rv-card.bk5 .back::after { opacity: 1; } html.hd-reduce .st-rv-card .back::after { transition: none; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-rv-card .back::after { transition: none; } } .st-rv-card.tease .in { animation: rvTease 0.5s ease-in-out infinite; } .st-rv-card.tint .in { animation: rvTint 0.45s ease-out; } /* ★5だけの演出(見た目だけ): 時間停止・夜明け・逆転の一番星・影の気配。transform / opacity / filter だけで軽く */ .st-rv.timestop { filter: grayscale(1) contrast(1.15); } .st-rv.timestop .st-rv-summon * { animation-play-state: paused !important; } .st-rv.tsburst::before { content: ''; z-index: 4; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, #fff 0, #ffe9a6 18%, rgba(255,190,50,0.65) 40%, rgba(255,190,50,0) 70%); animation: rvTsBurst 0.9s ease-out forwards; pointer-events: none; } @keyframes rvTsBurst { 0% { transform: scale(0.15); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } } .st-gth-dawn { position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--dw, 0) * 0.85); background: radial-gradient(ellipse at 50% 105%, rgba(255,236,160,0.95), rgba(255,170,60,0.55) 38%, rgba(255,120,60,0) 72%), linear-gradient(to top, rgba(255,190,80,0.5), rgba(255,130,70,0.18) 50%, rgba(255,130,70,0) 80%); } .st-rv-card.starwait .in { animation: rvStarWait 0.8s ease-in-out infinite alternate; } .st-rv-card.starhit .in { animation: rvTint 0.45s ease-out; } @keyframes rvStarWait { from { filter: brightness(1); } to { filter: brightness(1.5); } } .st-rv-star { position: fixed; z-index: 5; width: 0; height: 0; pointer-events: none; animation: rvStarFly 0.72s cubic-bezier(0.45, 0, 0.9, 0.7) forwards; } .st-rv-star::before { content: ''; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #fff 0, #fff3b0 40%, rgba(255,210,74,0) 72%); box-shadow: 0 0 14px 4px rgba(255,210,74,0.85); } .st-rv-star::after { content: ''; position: absolute; left: 0; top: -2px; width: min(60vw, 260px); height: 4px; border-radius: 2px; transform-origin: 0 50%; transform: rotate(var(--ang)); background: linear-gradient(to right, rgba(255,250,215,0.95), rgba(255,214,90,0.5) 40%, rgba(255,214,90,0)); } @keyframes rvStarFly { from { transform: translate(var(--dx), var(--dy)); } to { transform: translate(0, 0); } } .st-rv-card .back .shd { position: absolute; z-index: 1; inset: 6% 8%; width: 84%; height: 88%; object-fit: contain; object-position: center top; filter: brightness(0); opacity: 0.55; pointer-events: none; -webkit-user-drag: none; } /* 絵の上でも見えるよう、以前(0.32 / 0.22)より濃く */ .st-rv-card.shadow .back .shd { animation: rvShadow 1.3s ease-in-out forwards; } @keyframes rvShadow { 0% { opacity: 0; } 55% { opacity: 0.7; } 100% { opacity: 0.5; } } @keyframes rvTease { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-3px) rotate(-2deg); } 75% { transform: translateX(3px) rotate(2deg); } } @keyframes rvTint { 0% { transform: scale(1); filter: brightness(1); } 40% { transform: scale(1.12); filter: brightness(1.8); } 100% { transform: scale(1); filter: brightness(1); } } .st-rv-card[tabindex] { cursor: pointer; } .st-rv-card[tabindex]:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; } .st-rv-card.r5 .face { box-shadow: 0 0 18px var(--rc), 0 0 28px rgba(255,236,170,0.4); } .st-rv-card.up.r5 .face { animation: rvShimmer 1.6s ease-in-out infinite alternate; } .st-rv-card.r5 .face.rf::before { background-size: 200% 100%; animation: rfPrism 3.2s linear infinite; } .st-rv-cards:not(.one) .st-rv-card.r5 .face.rf::before { background: linear-gradient(110deg, #f0a818, #ffd24a 25%, #fff6c8 40%, #ffd24a 55%, #f0a818 75%, #ffd24a); background-size: 200% 100%; } /* 10連の★5は虹ではなく金の光沢(虹は単発の大きなカードだけ) */ /* 結果のカード: 切り取った立ち絵(全面)+ 下に名前と★ + 角にバッジ(NEW = 金のリボン / ×N = 紺) */ .st-rv-card .face .art { position: absolute; inset: 0; } .st-rv-card .face .art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; -webkit-user-drag: none; } .st-rv-cards:not(.one) .st-rv-card .face .art img { object-fit: contain; object-position: 50% 0; } /* 10連のカードもキャラ全体を映す(ズームしない。オーナー 2026-10-13)。単発は全身のまま */ .st-rv-card .face::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44%; background: linear-gradient(transparent, rgba(3,4,22,0.94)); pointer-events: none; } .st-rv-card .face .cap { position: absolute; left: 2px; right: 2px; bottom: 5px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; } .st-rv-card .nm { max-width: 100%; padding: 0 2px; font-size: 0.75rem; font-weight: 800; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px #000, 0 0 6px rgba(0,0,0,0.8); } .st-rv-card .face .st-stars { font-size: 11px; } .st-rv-card .bdg { position: absolute; top: 4px; left: 4px; z-index: 3; padding: 1px 6px; border-radius: 12px; font-size: 0.75rem; font-weight: 900; line-height: 1.25; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .st-rv-card .bdg.new, .st-rv-spot .big-lab.new { color: #3a2600; background: linear-gradient(#fff0b8, #f2c14e); box-shadow: 0 1px 0 #a3731a, 0 0 8px rgba(242,193,78,0.7); } .st-rv-card .bdg.dupe, .st-rv-spot .big-lab.dupe { color: #dfe6ff; background: rgba(10,14,60,0.88); border: 1px solid rgba(190,205,255,0.6); } .st-rv-cards.one .nm { font-size: 1.15rem; padding-bottom: 1px; } .st-rv-cards.one .face .st-stars { font-size: 20px; gap: 3px; } .st-rv-cards.one .face .cap { bottom: 12px; gap: 5px; } .st-rv-cards.one .bdg { top: 8px; left: 8px; padding: 2px 10px; font-size: 0.85rem; } .st-rv-cards.one .face { --rf-w: 3px; } /* ★4以上のスポットライト(結果の画面): 色はレア度の色(★4 金 / ★5 虹)。aura = カードの後ろの光、rays = 単発の放射状の光 */ .st-rv-card .in { z-index: 1; } .st-rv-card .aura { position: absolute; inset: -2px; z-index: 0; border-radius: 12px; pointer-events: none; opacity: 0; box-shadow: 0 0 12px 2px color-mix(in srgb, var(--rc) 75%, transparent), 0 0 30px color-mix(in srgb, var(--rc) 40%, transparent); animation: rvAuraIn 0.4s 0.3s ease-out forwards, rvAura 1.8s 0.7s ease-in-out infinite alternate; } .st-rv-card.r5 .aura { box-shadow: 0 0 14px 3px rgba(255,233,166,0.85), 0 0 30px rgba(255,255,255,0.35), 0 10px 30px rgba(255,214,90,0.4); } .st-rv-card .rays { --ray: min(100vw, 520px); position: absolute; left: 50%; top: 50%; z-index: 0; width: var(--ray); height: var(--ray); margin: calc(var(--ray) / -2) 0 0 calc(var(--ray) / -2); pointer-events: none; opacity: 0; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 55%, transparent) 0deg 5deg, transparent 5deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 26%, transparent 68%); mask-image: radial-gradient(circle, #000 26%, transparent 68%); animation: rvAuraIn 0.6s 0.3s ease-out forwards, rvSpin 24s linear infinite; } .st-rv-card.r5 .rays { background: repeating-conic-gradient(from 0deg, rgba(255,122,168,0.5) 0deg 4deg, transparent 4deg 10deg, rgba(255,226,122,0.55) 10deg 14deg, transparent 14deg 20deg, rgba(98,200,255,0.5) 20deg 24deg, transparent 24deg 30deg); } @keyframes rvAuraIn { to { opacity: 1; } } @keyframes rvAura { from { opacity: 0.75; } to { opacity: 1; } } .st-rv-res { margin-top: 12px; } .st-rv-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 0.9rem; font-weight: 800; color: #fff; } .st-rv-sum .sum-c { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 12px; background: rgba(10,14,60,0.72); border: 1px solid color-mix(in srgb, var(--rc) 65%, transparent); } .st-rv-sum .sum-s { display: inline-flex; font-size: 0.8rem; } .st-rv-sum .sum-c b { font-size: 0.9rem; font-variant-numeric: tabular-nums; } .st-rv-sum .sum-new { padding: 3px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 900; color: #3a2600; background: linear-gradient(#fff0b8, #f2c14e); box-shadow: 0 1px 0 #a3731a, 0 0 8px rgba(242,193,78,0.6); } .st-rv-note { margin: 0 0 6px; font-size: 0.75rem; color: #aab3dd; } .st-rv-wallet { margin: 4px 0 8px; font-size: 0.76rem; color: #c6cbe8; } .st-rv-btns { display: flex; flex-direction: column; gap: 8px; max-width: 280px; margin: 0 auto; } .st-rv-btns .hd-btn { padding: 10px 14px; } .st-rv-res[hidden], .st-rv-spot[hidden], .st-rv-skip[hidden] { display: none; } .st-rv-skip { position: absolute; right: 10px; bottom: 12px; z-index: 3; } /* 集める演出: スターコアが浮かび、長押しで真ん中へ集まる(canvas は stella-stage-gacha-fx.js。核・ゲージの輪・文字は DOM)。 --p = ゲージ(0..1)、--g = 集まり具合(0..1)。核の色は r3 / r4 / r5(結果のレア度を超えない。JS が選ぶ) */ .st-rv-summon { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 0.4s; pointer-events: none; overflow: hidden; touch-action: none; cursor: pointer; } .st-rv.gather .st-rv-summon { opacity: 1; pointer-events: auto; } .st-rv-summon.fusing { pointer-events: none; cursor: default; } .st-rv-summon, .st-rv-summon * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .st-gth-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; } .st-gth-core { position: absolute; left: 50%; top: 45%; width: 220px; height: 220px; margin: -110px; border-radius: 50%; pointer-events: none; isolation: isolate; filter: drop-shadow(0 0 calc(6px + 26px * var(--g, 0)) var(--rc, #9fc0ff)) brightness(calc(1.15 + 0.6 * var(--g, 0))) saturate(1.2); /* --g はこの要素だけに、1/12 刻みで JS が書く(毎コマ描き直さない) */ transform: scale(0.5); will-change: transform; } /* 大きさは JS が transform で書く(合成だけ)。will-change で、はじけて scale(12) になるときも、拡大した大きさで描き直さない(スマホで巨大なテクスチャを作らない) */ /* 集まる先: オーナー提供の星雲の靄(stella-chars/bg/core-nebula.webp)。ゆっくり回り、核の色(レア度の色)に染まる。中心は白く光る */ .st-gth-core::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--st-u-core-nebula, url('stella-chars/bg/core-nebula.webp')) center / contain no-repeat; animation: gthSpin 48s linear infinite; } .st-gth-core::after { content: ''; position: absolute; inset: 4%; z-index: 1; border-radius: 50%; background: radial-gradient(circle, var(--tint, transparent) 0, color-mix(in srgb, var(--tint, transparent) 70%, transparent) 32%, transparent 64%); mix-blend-mode: color; opacity: 0; transition: opacity 0.5s; } .st-rv-summon.r4 .st-gth-core::after { --tint: var(--st-rar-4, #d9962a); opacity: 0.75; } /* ★4 = 金(全体のレア度の色と同じ)・★5 = 虹(プリズム)に染まる。青(★3)は絵の色のまま */ .st-rv-summon.r5 .st-gth-core::after { background: conic-gradient(from 0deg, #ff6b6b, #ffd24a, #7bff8a, #4fd4ff, #8a7bff, #ff7be0, #ff6b6b); -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0,0,0,0.7) 32%, transparent 64%); mask-image: radial-gradient(circle, #000 0, rgba(0,0,0,0.7) 32%, transparent 64%); opacity: 0.85; animation: gthSpin 9s linear infinite; } .hd-reduce .st-rv-summon.r5 .st-gth-core::after { animation: none; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-rv-summon.r5 .st-gth-core::after { animation: none; } } .st-gth-glow { position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; margin: -15%; border-radius: 50%; z-index: 2; background: radial-gradient(circle, #fff 0, rgba(255,255,255,0.85) 22%, color-mix(in srgb, var(--rc, #9fc0ff) 60%, transparent) 50%, transparent 72%); opacity: calc(0.45 + 0.55 * var(--g, 0)); } @keyframes gthSpin { to { transform: rotate(360deg); } } .hd-reduce .st-gth-core::before { animation: none; } .st-gth-ring { position: absolute; left: 50%; top: 45%; width: 188px; height: 188px; margin: -94px; transform: rotate(-90deg); pointer-events: none; overflow: visible; opacity: 0; } /* 輪のゲージは見せない(オーナー指定)。読み上げ用の進み具合としてだけ残す */ .st-gth-ring circle { fill: none; stroke-width: 7; } .st-gth-ring .trk { stroke: rgba(190, 205, 255, 0.22); } .st-gth-ring .bar { stroke: var(--rc, #9fc0ff); stroke-linecap: round; stroke-dasharray: 553; stroke-dashoffset: 553; } /* 輪は見せていない(上の opacity: 0)ので、光のフィルターは掛けない */ .st-gth-text { position: absolute; left: 0; right: 0; top: calc(var(--gr-hy, calc(45% + 74px)) + 56px); padding: 0 12px; text-align: center; pointer-events: none; } .st-gth-prompt { margin: 0; font-size: 1.05rem; font-weight: 900; letter-spacing: 0.06em; color: #fff; text-shadow: 0 0 12px var(--rc, #9fc0ff), 0 2px 0 rgba(0, 0, 0, 0.7); } .st-gth-sub { margin: 4px 0 0; font-size: 0.75rem; font-weight: 600; color: #b7c0ec; } .st-rv-summon.waiting .st-gth-prompt, .st-rv-summon:not(.holding):not(.full) .st-gth-prompt { animation: rvBlink 1.6s ease-in-out infinite; } .st-rv-summon.full .st-gth-core { animation: gthPulse 0.6s ease-in-out infinite alternate; } .st-rv-summon.fusing .st-gth-core { filter: brightness(1.75) saturate(1.2); animation: gthFuse 0.6s ease-in forwards; } /* はじける(.fusing): ×12 に拡大するものには、CSS の filter(drop-shadow / brightness)・mix-blend-mode を使わない。拡大した大きさで毎コマ描き直され、スマホで 100〜300ms 固まる原因だった。 同じ光は、1度だけ描いた光のふち(.st-gth-halo = ぼかし済みの放射グラデーション)と、transform / opacity だけの動きで出す。最後のはじけ(.fin)は、核を 0 まで薄くして、消え終わり(animationend)で JS が片づける */ .st-rv-summon.fusing.fin .st-gth-core { animation: gthFuse 0.6s ease-in forwards, gthFade 0.4s 0.6s linear forwards; } .st-gth-halo { position: absolute; left: 50%; top: 45%; width: 308px; height: 308px; margin: -154px; border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(0.5); background: radial-gradient(circle closest-side, color-mix(in srgb, var(--rc, #9fc0ff) 54%, transparent) 0, color-mix(in srgb, var(--rc, #9fc0ff) 40%, transparent) 62%, transparent 100%); } .st-rv-summon.fusing .st-gth-halo { will-change: transform; animation: gthFuse 0.6s ease-in forwards; } .st-rv-summon.fusing.fin .st-gth-halo { animation: gthFuse 0.6s ease-in forwards, gthFade 0.4s 0.6s linear forwards; } .st-rv-summon.fusing .st-gth-ring, .st-rv-summon.fusing .st-gth-text { opacity: 0; transition: opacity 0.25s; } .st-rv-summon.full .st-gth-sub { visibility: hidden; } @keyframes gthPulse { from { transform: scale(1.05); } to { transform: scale(1.18); } } @keyframes gthFuse { 0% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(12); opacity: 0.2; } } @keyframes gthFade { from { opacity: 0.2; } to { opacity: 0; } } @keyframes rvShake { 0%, 100% { transform: none; } 8% { transform: translate(-12px, 6px) rotate(-0.5deg); } 20% { transform: translate(11px, -7px) rotate(0.4deg); } 32% { transform: translate(-9px, -4px); } 46% { transform: translate(8px, 5px); } 60% { transform: translate(-5px, 3px); } 75% { transform: translate(3px, -2px); } 88% { transform: translate(-1px, 1px); } } .st-rv.crack { animation: rvShake 0.5s linear; } .st-rv-shatter { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; display: block; pointer-events: none; } /* 確定演出「画面割れ」の canvas(ひび・破片。stella-stage-gacha-fx.js の createShatter が描く)。はじけの閃光(z-index 4)より上 */ .st-rv.crack::before { content: ''; z-index: 4; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, #fff 0, rgba(255, 255, 255, 0.85) 32%, rgba(255, 255, 255, 0) 78%); animation: rvCrackFlash 0.4s ease-out forwards; pointer-events: none; } @keyframes rvCrackFlash { 0% { opacity: 1; } 100% { opacity: 0; } } html.hd-reduce .st-rv.crack, html.hd-reduce .st-rv.crack::before { animation: none; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-rv.crack, html:not(.hd-motion) .st-rv.crack::before { animation: none; } } .st-rv-auto { position: absolute; left: 10px; bottom: 12px; z-index: 3; min-height: 44px; } .st-rv-auto[hidden] { display: none; } .st-rv-skip { min-height: 44px; } .st-rv.burst::after { content: ''; z-index: 4; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, #fff, color-mix(in srgb, var(--rc, #9fc0ff) 70%, transparent) 38%, rgba(255,255,255,0) 72%); animation: rvFlash 0.6s ease-out forwards; pointer-events: none; } @keyframes rvFlash { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes rvShimmer { from { box-shadow: 0 0 12px var(--rc), inset 0 0 10px rgba(255,214,90,0.3); } to { box-shadow: 0 0 26px var(--rc), inset 0 0 18px rgba(255,214,90,0.6); } } /* ★4以上の紹介(全画面) */ .st-rv-spot { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; overflow: hidden; cursor: pointer; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--rc) 28%, rgba(14,12,50,0.5)), rgba(3,4,20,0.78) 74%); animation: rvSpotIn 0.35s ease-out; } .st-rv-spot .frame, .st-rv-spot .info { position: relative; z-index: 1; } .st-rv-spot .frame { height: min(52vh, 440px); aspect-ratio: 3 / 5; max-width: 78vw; border-radius: 14px; overflow: hidden; border: 2px solid var(--rc); background: #0c1030; box-shadow: 0 0 28px var(--rc), 0 0 70px color-mix(in srgb, var(--rc) 45%, transparent); animation: rvArt 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both; } .st-rv-spot.r5 .frame { animation: rvArt 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both, rvGlow 1.6s 0.6s ease-in-out infinite alternate; } .st-rv-spot .art { display: block; width: 100%; height: 100%; object-fit: cover; } .st-rv-spot video.art { pointer-events: none; } .st-rv-spot .info { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; animation: rvText 0.5s 0.25s ease-out both; } .st-rv-spot .big-stars { display: flex; justify-content: center; font-size: 1.6rem; } .st-rv-spot .big-stars .st-stars { font-size: 26px; gap: 4px; filter: drop-shadow(0 0 8px var(--rc)) drop-shadow(0 2px 0 rgba(0,0,0,0.7)); } .st-rv-spot .frame.rf:not(.cut) { border-color: transparent; --rf-w: 3px; } .st-rv-spot .frame.cut::before { display: none; } .st-rv-spot .big-name { font-size: 1.5rem; font-weight: 900; color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.8), 0 2px 0 rgba(0,0,0,0.7); } .st-rv-spot .big-title { font-size: 0.78rem; color: #d6dcff; } .st-rv-spot .big-lab { margin-top: 2px; padding: 2px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 800; } .st-rv-spot .hint { margin-top: 4px; font-size: 0.75rem; color: #aab3dd; animation: rvBlink 1.4s ease-in-out infinite; } .st-rv-spot .rays { position: absolute; left: 50%; top: 40%; width: 117vmax; height: 117vmax; margin: -58.5vmax 0 0 -58.5vmax; background: repeating-conic-gradient(from 0deg, rgba(255,214,90,0.3) 0deg 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(circle closest-side, #000 0, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 0, transparent 100%); animation: rvSpin 18s linear infinite; pointer-events: none; } .st-rv-spot .bring { position: absolute; left: 50%; top: 40%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 3px solid #ffe08a; opacity: 0; pointer-events: none; animation: rvBring 1.4s ease-out forwards; } .st-rv-spot .bring.b1 { animation-delay: 0.25s; } .st-rv-spot .bring.b2 { animation-delay: 0.5s; } .st-rv-spot .spk { position: absolute; left: 50%; top: 40%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff6c8; box-shadow: 0 0 8px #ffd24a; opacity: 0; pointer-events: none; transform: rotate(var(--a)) translateX(0); animation: rvSpk 1.2s var(--d) ease-out forwards; } .st-rv-spot.r5::before { content: ''; position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; animation: rvFlash 0.7s ease-out; } @keyframes rvSpotIn { from { opacity: 0; } to { opacity: 1; } } @keyframes rvArt { from { transform: scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes rvText { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes rvGlow { from { box-shadow: 0 0 24px var(--rc), 0 0 60px rgba(255,200,80,0.35); } to { box-shadow: 0 0 40px var(--rc), 0 0 110px rgba(255,200,80,0.7); } } @keyframes rvBlink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } @keyframes rvSpin { to { transform: rotate(360deg); } } @keyframes rvBring { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(16); opacity: 0; } } @keyframes rvSpk { 0% { transform: rotate(var(--a)) translateX(0); opacity: 1; } 100% { transform: rotate(var(--a)) translateX(var(--x)); opacity: 0; } } /* 動きを減らす(設定「演出を減らす」・OSの設定): 演出なしで結果だけ出す(JS も演出を飛ばす)。念のため、残るアニメーションも止める */ .st-rv.still *, .st-rv.still *::before, .st-rv.still *::after { animation: none !important; transition: none !important; } html.hd-reduce .st-rv *, html.hd-reduce .st-rv *::before, html.hd-reduce .st-rv *::after, html.hd-reduce .st-gc-scene *, html.hd-reduce .st-gc-scene .core { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-rv *, html:not(.hd-motion) .st-rv *::before, html:not(.hd-motion) .st-rv *::after, html:not(.hd-motion) .st-gc-scene *, html:not(.hd-motion) .st-gc-scene .core { animation: none !important; transition: none !important; } } @media (max-width: 480px) { .st-rv-cards { gap: 4px; } .st-rv-card .nm { font-size: 0.75rem; } .st-rv-card .lab { font-size: 0.75rem; } .st-rv-spot .big-name { font-size: 1.3rem; } } .st-rv-card, .st-rv-spot, .st-rv-spot img { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } /* ================================================================================================ ガチャ: 運ぶ操作の手元のスターコア(.st-gth-hand)と、キャラの紹介(柱の演出。.st-gr-intro / .gi)(2026-10-18。stella-stage-gacha-reveal.js) 集める画面は従来どおり(上の .st-rv-summon / .st-gth-*)。手元のスターコアは画面の下(--gr-hy)にあり、つかんで真ん中の核へ運ぶ。 紹介は、紹介のあるカード(単発・★5・NEW)がめくられる番のとき、一覧の上に重なる。絵は GACHA_ART(柱・属性の紋。透明 webp)。動きを減らす設定は、下の .gi.rd と html.hd-reduce の規則 ================================================================================================ */ .st-gr-intro { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; } .st-gr-intro[hidden] { display: none; } .st-gr-msg { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* 読み上げ専用(名前・★ の知らせ) */ .st-gth-hand { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; outline: none; will-change: transform; pointer-events: none; } .st-gth-hand .hh { position: absolute; left: -48px; top: -48px; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 238, 180, 0.6), rgba(140, 170, 255, 0.28) 46%, transparent 70%); animation: gthHand 1.2s ease-in-out infinite alternate; } .st-gth-hand img { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; filter: drop-shadow(0 0 8px #ffd24a); -webkit-user-drag: none; } .st-gth-hand:focus-visible::after { content: ''; position: absolute; left: -36px; top: -36px; width: 72px; height: 72px; border-radius: 50%; border: 2px solid #ffd166; } .st-gth-hint { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 7%); transform: translateX(-50%); z-index: 3; opacity: 0; pointer-events: none; } .st-gth-hint.on { opacity: 1; transition: opacity 0.3s ease-out; } /* 消すときは、すぐ(transition なし) */ /* タイトルの「CLICK TO START」(.op-start-t)と同じ文字・枠・光・ゆっくりした点滅。手元のスターコアの下に出す(スターコアにも、真ん中にも重ならない) */ .st-gth-hint > span { position: relative; display: block; white-space: nowrap; padding: 4px 0 4px 0.24em; text-align: center; font-family: var(--st-font-head, 'Cinzel', serif); font-size: clamp(1.05rem, 4.4vw, 1.5rem); font-weight: 700; letter-spacing: 0.24em; color: #fff4cf; text-shadow: 0 0 14px rgba(255, 214, 120, 0.7), 0 2px 8px rgba(0, 0, 0, 0.9); animation: opBlink 2.6s ease-in-out infinite; } .st-gth-hint > span::after { content: ''; position: absolute; inset: -6px -14px -6px -12px; border: 1.5px solid rgba(255, 244, 207, 0.85); border-radius: 8px; box-shadow: 0 0 12px rgba(255, 214, 120, 0.45), inset 0 0 10px rgba(255, 214, 120, 0.2); pointer-events: none; } html.hd-reduce .st-gth-hint > span { animation: none; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-gth-hint > span { animation: none; } } .st-gth-hand.gone { opacity: 0; transition: opacity 0.25s ease-out; } .st-gth-hand::before { content: ''; position: absolute; left: -44px; top: -44px; width: 88px; height: 88px; border-radius: 50%; border: 2px solid rgba(255, 226, 140, 0.9); opacity: 0; pointer-events: none; } .st-gth-hand.idle::before { animation: gthHint 1.4s ease-out infinite; } /* まだ触っていない: つかめると知らせる輪が、手元のスターコアから広がる */ @keyframes gthHint { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.5); } } .st-rv-summon.grabbing { cursor: grabbing; } /* 単発の結果: 紹介の最後の姿(全身・紋・名前・★・NEW)を残して、結果のボタン・まとめを下に重ねる(カードは出さない)。紹介の絵は少し上へ縮めて、文字がボタンに重ならないように */ @property --feet { syntax: ''; inherits: true; initial-value: 64%; } @property --ch { syntax: ''; inherits: true; initial-value: 400px; } .gi { transition: --feet 0.45s ease-out, --ch 0.45s ease-out; } .st-rv.over { overflow: hidden; } .st-rv.over .gi { --feet: 40%; --ch: min(36vh, 100vw); } .st-rv.over .gi-hint { display: none; } .st-rv.over .st-rv-main { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; width: 100%; margin: 0; padding: 22px 12px calc(env(safe-area-inset-bottom, 0px) + 12px); background: linear-gradient(to top, rgba(3, 4, 22, 0.94) 70%, rgba(3, 4, 22, 0)); } .st-rv.over .st-rv-title, .st-rv.over .st-rv-cards { display: none; } @keyframes gthHand { from { opacity: 0.75; transform: scale(0.92); } to { opacity: 1; transform: scale(1.1); } } /* ---- キャラの紹介(曲の時間割。着地 = 0 秒。--k = 時間の倍率(いまは常に 1)。クラス p1〜p6・n1〜n4 を JS が時間割で付ける) ---- */ .gi { --feet: 64%; --ch: min(58vh, 140vw); --cw: calc(var(--ch) * 0.6); --k: 1; position: absolute; inset: 0; color: #fff; } .gi-veil { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 90% 70% at 50% 60%, color-mix(in srgb, var(--el, #8fb3ff) 34%, #05061c), #02030f 80%); } .gi.p1 .gi-veil { animation: giFadeIn calc(0.35s * var(--k)) ease-out forwards; } .gi-dawn { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 130% 60% at 50% 100%, rgba(255, 214, 120, 0.9), rgba(255, 150, 60, 0.3) 52%, transparent 78%); } .gi.r5.p6 .gi-dawn { animation: giFadeIn calc(1.2s * var(--k)) ease-out forwards; } /* ★5 だけ: 3.5 秒で空が金色の夜明けに(★ はこの時点まで見せない) */ .gi-line { position: absolute; left: 50%; top: 0; bottom: calc(100% - var(--feet)); width: 2px; margin-left: -1px; opacity: 0; transform: scaleY(0); transform-origin: 50% 100%; background: linear-gradient(to top, #fff, color-mix(in srgb, var(--el, #8fb3ff) 65%, #fff) 45%, transparent); } .gi.p1 .gi-line { animation: giLine calc(0.35s * var(--k)) ease-out forwards; } .gi.p2 .gi-line { animation: giLineOut calc(0.3s * var(--k)) ease-out forwards; } .gi-pillar { position: absolute; left: 50%; top: 0; bottom: calc(100% - var(--feet)); width: calc(var(--cw) * 1.5); margin-left: calc(var(--cw) * -0.75); display: flex; opacity: 0; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 88%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 88%, transparent); } .gi-pillar .pl, .gi-pillar .pr { flex: 1; } .gi-pillar .pl { background: linear-gradient(to right, transparent, color-mix(in srgb, var(--el, #8fb3ff) 40%, #cfe6ff) 62%, #fff); transform-origin: 0 50%; } .gi-pillar .pr { background: linear-gradient(to left, transparent, color-mix(in srgb, var(--el, #8fb3ff) 40%, #cfe6ff) 62%, #fff); transform-origin: 100% 50%; } .gi-pillar.art { mix-blend-mode: normal; } /* 絵は透明 webp(光は alpha)= 普通の合成。左右の半分ずつに同じ絵の半分を出す */ .gi-pillar.art .pl { background: var(--pillar) 0 0 / 200% 100% no-repeat; } .gi-pillar.art .pr { background: var(--pillar) 100% 0 / 200% 100% no-repeat; } .gi.p2 .gi-pillar { animation: giPillarOpen calc(0.2s * var(--k)) ease-out forwards; } .gi.p4 .gi-pillar { animation: giPillarNarrow calc(1.5s * var(--k)) ease-in-out forwards; } /* 色が戻っていく間、柱は少しずつ狭まる */ .gi.p5 .gi-pillar { transform: scaleX(0.5); animation: giPillarOut calc(0.8s * var(--k)) ease-out forwards; } /* 本当の色になりきったら、柱はやわらかく消える(裂けない) */ .gi.p5::before { content: ''; position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 50% 56%, rgba(255, 255, 255, 0.85), transparent 70%); animation: giFlash2 calc(0.5s * var(--k)) ease-out; } .gi-emblem { position: absolute; left: 50%; width: min(calc(var(--cw) * 2.2), 98vw); aspect-ratio: 1; bottom: calc(100% - var(--feet) - min(calc(var(--cw) * 1.1), 49vw)); margin-left: max(calc(var(--cw) * -1.1), -49vw); opacity: 0; color: var(--el, #8fb3ff); pointer-events: none; transform: perspective(700px) rotateX(66deg); } .gi-emblem svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px currentColor); } .gi-emblem svg g { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .gi-emblem svg g .d { fill: currentColor; stroke: none; } .gi-emblem svg .ring { fill: none; stroke: currentColor; stroke-width: 0.8; opacity: 0.6; } .gi-emblem.art { } /* 全キャラ共通の天体図(金色のまま。属性色には染めない)。絵は中の .spin に */ .gi-emblem .spin { position: absolute; inset: 0; } .gi-emblem.art .spin { background: var(--emb) center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(255, 214, 120, 0.55)); } .gi.p6 .gi-emblem { animation: giEmblem calc(0.7s * var(--k)) ease-out forwards; } .gi.p6 .gi-emblem .spin { animation: giSpin 50s linear infinite; } /* 天体図が、床の面の上でゆっくり回る(約 50 秒で 1 周。動きを減らす設定では回らない) */ .gi-char { position: absolute; left: 50%; bottom: calc(100% - var(--feet)); width: var(--cw); height: var(--ch); margin-left: calc(var(--cw) / -2); transform-origin: 50% 100%; } .gi-char.framed { border-radius: 14px; overflow: hidden; } .gi-char.framed img { object-fit: cover; object-position: 50% 10%; } .gi-sil, .gi-full .art { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; -webkit-user-drag: none; pointer-events: none; } .gi-sil { filter: brightness(0); opacity: 0; } /* 黒いシルエット(レア度は見せない) */ .gi-sil.cv { filter: none; } /* canvas に黒で描いたシルエット(filter を使わない = 動いても描き直さない) */ .gi-char.framed .gi-sil.cv { object-fit: cover; object-position: 50% 10%; } .gi.wait .gi-char, .gi.wait .gi-text { visibility: hidden; } /* 絵のデコードを待つあいだ(最大 1.5 秒)は、キャラ・文字を出さない */ .gi.p2 .gi-sil { animation: giRise calc(0.2s * var(--k)) ease-out forwards; } .gi-glows { position: absolute; inset: 0; opacity: 0; pointer-events: none; } .gi.p3 .gi-glows { opacity: 1; transition: opacity calc(0.4s * var(--k)); } .gi-glows .gl { position: absolute; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #fff 0, color-mix(in srgb, var(--el, #8fb3ff) 88%, #fff) 24%, transparent 70%); animation: giGlow calc(1.1s * var(--k)) var(--gd, 0s) ease-in-out infinite alternate; } .gi-full { position: absolute; inset: 0; opacity: 0; } .gi.p4 .gi-full { opacity: 1; } /* 色の絵は、黒いシルエットが薄くなり始める 1.4 秒から(2026-10-26: 0.55 秒からだと、足元から伸びる途中の黒の上に色が一瞬見えた)。以前の注記: 黒が完全に覆っているので見えない) */ .gi.p4 .gi-sil { animation: giSilFade calc(1.55s * var(--k)) cubic-bezier(0.45, 0, 0.55, 1) forwards; } /* 1.4 秒から 2.95 秒へ、黒の透明度だけを下げる(opacity だけ = 軽い)。2.95 秒にちょうど本当の色 */ .gi.p5 .gi-char { animation: none; } .gi.p5 .gi-sil, .gi.p5 .gi-glows { opacity: 0; animation: none; } .gi.p5 .gi-full { opacity: 1; } .gi-text { position: absolute; left: 0; right: 0; top: calc(var(--feet) + 3%); bottom: 2%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 14px; text-align: center; } .gi-name { font-size: clamp(1.4rem, 6.4vw, 2.1rem); font-weight: 900; line-height: 1.2; text-shadow: 0 0 14px var(--el, #8fb3ff), 0 2px 0 rgba(0, 0, 0, 0.85); opacity: 0; } .gi-title { font-size: 0.85rem; color: #d6dcff; opacity: 0; text-shadow: 0 1px 3px #000; } .gi-stars { display: flex; justify-content: center; font-size: 1.5rem; min-height: 1.6rem; } .gi-stars .st-stars { font-size: 24px; gap: 4px; } .gi-stars .st-star { opacity: 0; transform: scale(0.3); } .gi-stars .st-star.on { animation: giStarPop 0.28s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; } .gi-new { margin-top: 2px; padding: 2px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 900; color: #3a2600; background: linear-gradient(#fff0b8, #f2c14e); box-shadow: 0 1px 0 #a3731a, 0 0 8px rgba(242, 193, 78, 0.7); opacity: 0; } .gi.n4 .gi-new { animation: giStarPop 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; } .gi-hint { margin: 6px 0 0; font-size: 0.8rem; color: #aab3dd; opacity: 0; } .gi.hint .gi-hint { animation: rvBlink 1.4s ease-in-out infinite; } .gi.n1 .gi-name { animation: giText calc(0.4s * var(--k)) ease-out forwards; } .gi.n2 .gi-title { animation: giText calc(0.4s * var(--k)) ease-out forwards; } /* 次へ(タップ): 名前・★ は一度に出して、0.25 秒で消える */ .gi.done .gi-veil { opacity: 1; animation: none; } .gi.done .gi-name, .gi.done .gi-title { opacity: 1; animation: none; transform: none; } .gi.done.n4 .gi-new { opacity: 1; animation: none; transform: none; } .gi.done .gi-stars .st-star { opacity: 1; transform: none; animation: none; } .gi.done .gi-hint { opacity: 0; animation: none; } .gi.done .gi-full { opacity: 1; animation: none; transform: none; } .gi.done .gi-pillar { opacity: 0; animation: none; } .gi.leave { opacity: 0; transition: opacity 0.25s linear; } .st-gr-intro.out .gi { opacity: 0; transition: opacity 0.4s linear; } /* 動きを減らす設定(JS が .rd を付ける): アニメーションは止まるので、最後の形をそのまま。0.3 秒のフェードインは JS(Web Animations)で */ .gi.rd .gi-veil, .gi.rd .gi-full, .gi.rd .gi-name, .gi.rd .gi-title, .gi.rd .gi-stars .st-star { opacity: 1; transform: none; } .gi.rd .gi-hint { opacity: 0.8; } .gi.rd .gi-sil, .gi.rd .gi-line, .gi.rd .gi-pillar, .gi.rd .gi-emblem, .gi.rd .gi-dawn, .gi.rd .gi-new { opacity: 0; } .gi.rd.n4 .gi-new { opacity: 1; transform: none; } @keyframes giFadeIn { to { opacity: 1; } } @keyframes giLine { 0% { opacity: 1; transform: scaleY(0); } 100% { opacity: 1; transform: scaleY(1); } } @keyframes giLineOut { from { opacity: 1; transform: scaleY(1); } to { opacity: 0; transform: scaleY(1); } } @keyframes giPillarOpen { from { opacity: 0; transform: scaleX(0.15); } to { opacity: 1; transform: scaleX(1); } } @keyframes giPillarNarrow { from { opacity: 1; transform: scaleX(1); } to { opacity: 1; transform: scaleX(0.5); } } @keyframes giPillarOut { from { opacity: 1; } to { opacity: 0; } } @keyframes giSilFade { from { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } to { opacity: 0; clip-path: inset(0 0 0 0); transform: none; } } @keyframes giSpin { to { transform: rotate(360deg); } } @keyframes giFlash2 { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes giRise { from { opacity: 1; clip-path: inset(92% 0 0 0); transform: translateY(8%); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } } @keyframes giBreath { from { transform: scale(1); } to { transform: scale(1.014); } } @keyframes giGlow { from { opacity: 0.45; } to { opacity: 1; } } @keyframes giEmblem { from { opacity: 0; transform: perspective(700px) rotateX(66deg) scale(0.7); } to { opacity: 0.9; transform: perspective(700px) rotateX(66deg) scale(1); } } @keyframes giText { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes giStarPop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } } @media (max-width: 480px) { .gi-name { font-size: 1.5rem; } } /* 動きを減らす(設定「演出を減らす」・OSの設定): 星降ろしの動きも止める(星の位置は JS が 10% 刻みで置く) */ html.hd-reduce .st-gr-intro *, html.hd-reduce .st-gr-intro *::before, html.hd-reduce .st-gr-intro *::after, html.hd-reduce .st-gth-hand * { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-gr-intro *, html:not(.hd-motion) .st-gr-intro *::before, html:not(.hd-motion) .st-gr-intro *::after, html:not(.hd-motion) .st-gth-hand * { animation: none !important; transition: none !important; } } /* ================================================================================================ ロビー・出撃・パーティー・キャラ・持ち物・ダイアログ(ステップ7: 1ページの中で切り替わる画面) スマホ(幅375px)で横にはみ出さず、ボタンは44px以上。色は --el-*(「見分けやすい配色」で切り替わる)、動きは「演出を減らす」に従う ================================================================================================ */ .st-screen:not(.st-battle) .hd-head-buttons .hd-btn.small { min-height: 44px; } .st-screen:not(.st-battle) .hd-head-buttons .hd-btn.small.st-nav { min-width: 44px; padding: 6px 10px; } .st-screen .hd-btn { touch-action: manipulation; } .hd-btn:disabled { opacity: 0.5; cursor: not-allowed; } .st-toast { z-index: 11; } .st-stamina .hd-btn { min-height: 44px; } /* ---- ロビー ---- */ .st-hud { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 2px 0 4px; } .st-hud:empty { display: none; } .st-hud-i { display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px 3px 4px; border-radius: 999px; font-size: 0.78rem; background: rgba(14,18,64,0.72); border: 1px solid var(--st-line); color: #dfe6ff; } .st-hud-i:not(:has(img)) { padding-left: 12px; } .st-hud-i small { font-size: 0.75rem; color: #b3b9dc; } .st-hud-i b { color: #fff; font-variant-numeric: tabular-nums; } .st-hud-i.full { border-color: #ffb4a0; } .st-hud-i.full b { color: #ffb4a0; } .st-hud-lv { gap: 4px; } .st-hud-lv b { min-width: 1.4em; } /* プレイヤーレベルの経験値の細いバー(HUD・報酬の画面) */ .st-lv-bar { display: inline-block; position: relative; width: 44px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.16); overflow: hidden; vertical-align: middle; } .st-lv-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #8fd3ff, #c9a7ff); border-radius: 2px; } .st-lv-bar.wide { width: 140px; height: 6px; border-radius: 3px; } .st-lb-party { margin: 8px 0 6px; } .st-lb-none { grid-column: 1 / -1; padding: 14px 8px; text-align: center; border-radius: 12px; background: rgba(14,18,64,0.7); border: 1px dashed var(--st-line); } .st-lbc { position: relative; display: block; width: 100%; aspect-ratio: 3 / 5; padding: 0; overflow: hidden; text-align: left; font: inherit; color: #fff; cursor: pointer; border-radius: 14px; background: #0c1030; border: 2px solid var(--el, #8fb3ff); box-shadow: 0 0 16px color-mix(in srgb, var(--el, #8fb3ff) 45%, transparent), inset 0 0 0 1px rgba(255,255,255,0.14); } .st-lbc:hover { filter: brightness(1.1); } .st-lbc:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; } .st-lbc .art { position: absolute; inset: 0; } .st-lbc .art img, .st-lbc .art video, .st-lbc .art canvas { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; } .st-lbc .art > .mvl { position: absolute; inset: 0; } /* 動く絵の層(ロビーのカード)。止まった絵(img)の上に重ねる。img.mvl は中身のない「型」で見えない */ .st-lbc .art > img.mvl { opacity: 0; pointer-events: none; } .st-lbc .art > video.mvl, .st-lbc .art > canvas.mvl { animation: stLbMvIn 0.24s ease-out both; } .st-lbc .art > video.mvl.out, .st-lbc .art > canvas.mvl.out { animation: stLbMvOut 0.24s ease-in both; } .st-lbc .art:has(> video.mvl:not(.out), > canvas.mvl:not(.out)) > img:not(.mvl) { animation: stLbStillOff 0.01s 0.24s both; } /* 層が出きったら下の止まった絵は隠す(なびく髪の下に止まった髪が見えないように)。消え始めたらすぐ戻る */ @keyframes stLbMvIn { from { opacity: 0; } to { opacity: 1; } } @keyframes stLbMvOut { from { opacity: 1; } to { opacity: 0; } } @keyframes stLbStillOff { from { visibility: visible; } to { visibility: hidden; } } .st-lbc .art video, .st-sh-art video, .st-lbc .art canvas, .st-sh-art canvas, .st-rv-spot canvas.art { pointer-events: none; } /* 背景なしの絵(art.cutout。docs/specs/stella-art-motion.md): 枠・背景を付けず、ロビーの背景の上に立たせる。足元に属性の色のやわらかい光、 名前・★・Lv は下の帯(::after の暗いグラデーション)と文字の影で読みやすく。仮の絵・背景つきの公式の絵は今の枠のまま */ .st-lbc.cut { background: transparent; border-color: transparent; box-shadow: none; } .st-lbc.cut::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: 3%; height: 22%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--el, #8fb3ff) 42%, transparent), transparent); } .st-lbc.cut::after { height: 38%; background: radial-gradient(ellipse 62% 100% at 50% 100%, rgba(2,3,20,0.8), rgba(2,3,20,0.5) 45%, transparent 100%); } .st-sh-art.cut { border-color: transparent; box-shadow: none; background: radial-gradient(ellipse 70% 30% at 50% 92%, color-mix(in srgb, var(--el, #8fb3ff) 40%, transparent), transparent 75%), rgba(12,16,48,0.35); } .st-rv-spot .frame.cut { border-color: transparent; background: radial-gradient(ellipse 65% 45% at 50% 60%, color-mix(in srgb, var(--rc) 45%, transparent), transparent 72%); box-shadow: none; overflow: visible; } @keyframes rvGlowCut { from { filter: drop-shadow(0 0 10px var(--rc)) drop-shadow(0 0 24px rgba(255,200,80,0.35)); } to { filter: drop-shadow(0 0 18px var(--rc)) drop-shadow(0 0 40px rgba(255,200,80,0.7)); } } .st-rv-spot.r5 .frame.cut { animation: rvArt 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both, rvGlowCut 1.6s 0.6s ease-in-out infinite alternate; box-shadow: none; } .st-lbc::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(transparent, rgba(2,3,20,0.92)); pointer-events: none; } .st-lbc .slot { position: absolute; left: 4px; top: 4px; z-index: 1; } .st-lbc .st-badge.el { position: absolute; right: 4px; top: 4px; z-index: 1; } .st-lbc .info { position: absolute; left: 6px; right: 6px; bottom: 5px; z-index: 1; display: flex; flex-direction: column; gap: 1px; } .st-lbc .nm { font-size: 0.82rem; font-weight: 800; line-height: 1.2; text-shadow: 0 1px 3px #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-lbc .row { display: flex; align-items: center; justify-content: space-between; gap: 4px; } .st-lbc .lv { font-size: 0.92rem; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #000; } .st-lb-hp { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 0.8rem; color: #cfd8ff; } .st-lb-hp b { color: #7CFC9C; font-size: 0.95rem; } .st-sortie { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 100%; min-height: 68px; margin: 8px 0; padding: 8px 12px; font: inherit; color: #fff; cursor: pointer; border-radius: 18px; border: 1px solid rgba(255,235,170,0.8); background: linear-gradient(#ffb13d, #e0701a); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 18px rgba(255,150,40,0.45); animation: stSortieGlow 2.6s ease-in-out infinite alternate; } .st-sortie .t { font-size: 1.7rem; font-weight: 900; letter-spacing: 0.3em; padding-left: 0.3em; text-shadow: 0 2px 4px rgba(90,30,0,0.7); } .st-sortie small { font-size: 0.75rem; font-weight: 700; opacity: 0.92; } .st-sortie:hover:not(:disabled) { filter: brightness(1.08); } .st-sortie:disabled { filter: grayscale(0.8) brightness(0.7); cursor: not-allowed; animation: none; } .st-sortie:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } @keyframes stSortieGlow { from { box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 14px rgba(255,150,40,0.35); } to { box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 26px rgba(255,170,60,0.75); } } .st-menu-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 66px; padding: 6px 2px; font: inherit; font-size: 0.75rem; font-weight: 800; color: #eef1ff; cursor: pointer; border-radius: 14px; background: var(--st-glass); border: 1px solid var(--st-line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 14px rgba(90,100,255,0.16); } .st-menu-btn .ic { display: inline-flex; font-size: 1.3rem; line-height: 1; color: #ffe08a; } .st-menu-btn .ic svg { width: 26px; height: 26px; filter: drop-shadow(0 0 4px rgba(255,214,120,0.45)); } .st-menu-btn:hover { filter: brightness(1.15); } .st-menu-btn:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; } .st-menu-btn[hidden] { display: none; } /* ---- 出撃(ステージ選択) ---- */ .st-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 4px 0 8px; } .st-tab { min-height: 44px; padding: 6px 4px; line-height: 1.25; font: inherit; font-weight: 800; font-size: 0.9rem; color: #cfd8ff; cursor: pointer; border-radius: 12px; background: rgba(14,18,64,0.7); border: 1px solid var(--st-line); } .st-tab[aria-pressed="true"] { color: #fff; background: linear-gradient(#5b7bff, #4159d6); border-color: rgba(190,205,255,0.7); box-shadow: 0 0 12px rgba(100,130,255,0.45); } .st-tab[hidden] { display: none; } .st-tab { position: relative; } .st-tab-dot { position: absolute; top: 5px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: #ff5a5a; box-shadow: 0 0 0 2px rgba(14,18,64,0.9); } .st-tab-dot[hidden], .st-sortie-chip[hidden] { display: none; } .st-sortie { position: relative; } .st-sortie-chip { position: absolute; top: 6px; right: 10px; padding: 2px 8px; font-size: 0.75rem; font-weight: 800; line-height: 1.3; color: #fff; background: #d6303a; border: 1px solid rgba(255,255,255,0.8); border-radius: 999px; } .st-stage-card.st-daily-card { grid-template-columns: minmax(0, 1fr) auto; padding-left: 14px; } /* アイコンの列がないので、文の列を広く */ .st-daily-card .st-daily-st.done { color: #9dffb8; } .st-daily-card .st-daily-rule { color: #d6dcff; } .st-daily-card:disabled { filter: grayscale(0.6) brightness(0.75); cursor: wait; } .st-tab:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; } .st-stage-card { align-items: start; } .st-sc-mid { min-width: 0; } .st-sc-name .st-badge { vertical-align: 1px; } .st-sc-cost { display: block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 800; color: #ffe9a6; background: rgba(0,0,24,0.5); border: 1px solid rgba(255,214,120,0.4); } .st-stage-card.nostamina .st-sc-cost { color: #ffb4a0; border-color: rgba(255,160,140,0.5); } .st-sc-rw { display: grid; gap: 2px; margin-top: 4px; } .st-rwl { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; } .st-rwl-l { flex: none; padding: 1px 7px; border-radius: 6px; font-size: 0.75rem; font-weight: 800; color: #dfe6ff; background: rgba(110,130,255,0.32); border: 1px solid rgba(160,180,255,0.45); } .st-rwl.first .st-rwl-l { color: #3a2400; background: #ffd24a; border-color: #fff0b0; } .st-rwl.got { opacity: 0.55; } .st-rwl.got .st-rwl-l { color: #dfe6ff; background: rgba(110,130,255,0.25); border-color: rgba(160,180,255,0.4); } .st-rwc { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 3px; border-radius: 999px; font-size: 0.75rem; background: rgba(0,0,24,0.5); border: 1px solid rgba(160,180,255,0.28); } .st-rwc b { font-variant-numeric: tabular-nums; } /* 長押し(bindLong / bindMember)の要素は、文字・絵を選択させず、長押しメニューも出さない */ .st-long, .st-long * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } /* 専用ダンジョン: 1つのダンジョンに難易度のボタン(初級・中級・上級・超級) */ .st-dg-card { padding: 8px 10px 10px 8px; color: #f0f0f5; background: var(--st-glass); border: 1px solid var(--st-line); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 16px rgba(90,100,255,0.14); } .st-dg-top { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: start; } .st-dg-top .st-ico { width: 48px; height: 48px; } .st-dg-lvs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 8px; } .st-dg-lv { display: grid; justify-items: center; gap: 1px; min-height: 58px; padding: 5px 4px; font: inherit; color: #f0f0f5; cursor: pointer; border-radius: 11px; background: rgba(14,18,64,0.75); border: 1px solid rgba(160,180,255,0.4); } .st-dg-lv.lv2 { border-color: rgba(120,200,255,0.55); } .st-dg-lv.lv3 { border-color: rgba(255,140,170,0.6); background: rgba(48,12,52,0.7); } .st-dg-lv.lv4 { border-color: rgba(255,210,74,0.7); background: rgba(52,36,8,0.7); } .st-dg-lv:hover { filter: brightness(1.15); } .st-dg-lv.single { grid-column: 1 / -1; } /* 星の坑道: 難易度は1つ(横いっぱいの「挑戦する」) */ .st-dg-lv:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; } .st-dg-n { font-size: 0.92rem; font-weight: 800; } .st-dg-c { font-size: 0.75rem; font-weight: 800; color: #ffe9a6; white-space: nowrap; } .st-dg-s { font-size: 0.75rem; font-weight: 700; color: #aeb5d8; white-space: nowrap; } .st-dg-lv.nostamina .st-dg-c { color: #ffb4a0; } .st-dg-lv[aria-disabled="true"] { cursor: not-allowed; filter: grayscale(0.85) brightness(0.62); } .st-dg-lv[aria-disabled="true"]:hover { filter: grayscale(0.85) brightness(0.62); } /* ---- 出撃の確認 ---- */ .st-cf .st-waves { margin: 0 0 6px; } .st-cf .st-sc-rw { margin: 4px 0 8px; } .st-cf-sta { margin: 6px 0; font-size: 0.82rem; font-weight: 700; color: #dfe6ff; } .st-cf-sta.short { color: #ffb4a0; } .st-cf-party { margin-top: 8px; padding: 8px; border-radius: 12px; background: rgba(0,0,24,0.4); border: 1px solid rgba(160,180,255,0.28); } .st-cf-ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.82rem; } .st-cf-change { min-height: 44px; padding: 4px 12px; font-size: 0.9rem; } .st-cf-mems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 2px; } .st-cf-mem { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; } .st-cf-mem .st-ico { width: 44px; height: 44px; } .st-cf-mem .l { margin: 1px 0; } .st-cf-mem .v { font-size: 0.8rem; font-variant-numeric: tabular-nums; } .st-cf-hp { margin: 6px 0 0; text-align: center; font-size: 0.78rem; color: #cfd8ff; } .st-cf-hp b { color: #7CFC9C; } /* ---- ダイアログ ---- */ .st-dlg-bg { position: fixed; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(2,3,18,0.78); } .st-dlg-bg[hidden] { display: none; } .st-dlg { display: flex; flex-direction: column; width: min(420px, 100%); max-height: 100%; overflow: hidden; color: #f0f0f5; background: linear-gradient(rgba(24,28,84,0.98), rgba(8,10,40,0.99)); border: 1px solid rgba(170,190,255,0.5); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.7), 0 0 20px rgba(90,100,255,0.3); } .st-dlg:focus { outline: none; } .st-dlg-title { margin: 0; padding: 14px 16px 6px; font-size: 1.05rem; text-align: center; text-shadow: 0 0 12px rgba(120,140,255,0.5); } .st-dlg-body { overflow-y: auto; padding: 4px 14px 8px; -webkit-overflow-scrolling: touch; } .st-dlg-p { margin: 4px 0; font-size: 0.88rem; line-height: 1.65; color: #eef1ff; } .st-dlg-btns { display: flex; flex-direction: column; gap: 8px; padding: 8px 14px 14px; } .st-dlg-btns .hd-btn { min-height: 46px; } .st-warn { margin: 8px 0 2px; padding: 8px 10px; border-radius: 10px; background: rgba(120,20,40,0.5); border: 1px solid rgba(255,140,160,0.6); font-size: 0.82rem; line-height: 1.5; } .st-warn b { color: #ffd0d8; } .st-warn p { margin: 2px 0; } .st-warn-l { margin: 4px 0 0; padding-left: 1.2em; font-size: 0.78rem; color: #ffe0e6; } .st-lbn-l { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 4px; } .st-lbn-i { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 96px; padding: 10px 12px; border-radius: 14px; background: radial-gradient(rgba(255,214,120,0.28), rgba(14,18,64,0.7)); border: 1px solid rgba(255,214,120,0.6); animation: stLbnPop 0.55s calc(var(--i, 0) * 0.14s) cubic-bezier(0.2, 1.5, 0.4, 1) both; } .st-lbn-i .nm { font-size: 0.78rem; font-weight: 700; } .st-lbn-i .n { font-size: 1.3rem; color: #ffe08a; font-variant-numeric: tabular-nums; } @keyframes stLbnPop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } } /* ---- プレゼントボックス(ロビーの右上のボタン + 一覧の画面) ---- */ .st-gift-btn { position: relative; display: inline-flex; align-items: center; gap: 4px; } .st-gift-i { display: inline-flex; color: #ffe08a; } .st-gift-btn.has .st-gift-i { animation: stGiftWiggle 2.4s ease-in-out infinite; } .st-gift-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #ff4d6d; color: #fff; font-size: 0.75rem; font-weight: 900; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #0b0e2e; font-variant-numeric: tabular-nums; } .st-gift-badge[hidden] { display: none; } @media (max-width: 400px) { .st-gift-t { display: none; } .st-gift-btn { min-width: 44px; justify-content: center; } } @keyframes stGiftWiggle { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } } .st-gift-bar { display: flex; justify-content: flex-end; margin: 4px 0 8px; } .st-gift-bar .hd-btn { min-height: 44px; width: auto; padding: 8px 18px; } .st-gift-bar .hd-btn[hidden] { display: none; } .st-gift-list { display: grid; gap: 8px; } .st-gift { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--st-glass); border: 1px solid var(--st-line); } .st-gift-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .st-gift-ttl { font-size: 0.98rem; color: #fff; } .st-gift-date { font-size: 0.75rem; color: #b8c2f0; } .st-gift-msg { margin: 0; font-size: 0.8rem; line-height: 1.55; color: #dfe6ff; white-space: pre-wrap; overflow-wrap: anywhere; } .st-gift-items { display: flex; flex-wrap: wrap; gap: 6px; } .st-gift-it { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; border-radius: 999px; background: rgba(14,18,64,0.72); border: 1px solid rgba(255,214,120,0.45); font-size: 0.78rem; } .st-gift-it .st-item-ico { width: 30px; height: 30px; } .st-gift-it .n { color: #ffe08a; font-variant-numeric: tabular-nums; } .st-gift-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .st-gift-exp { font-size: 0.75rem; color: #b8c2f0; } .st-gift-exp.soon { color: #ffb4a0; font-weight: 700; } .st-gift-get { min-height: 44px; min-width: 96px; } .st-gift-empty { margin: 24px 0; text-align: center; color: #b8c2f0; } .st-gift-warn { color: #ffd0b8; } html.hd-reduce .st-gift-btn.has .st-gift-i { animation: none; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-gift-btn.has .st-gift-i { animation: none; } } /* ---- 持ち物 ---- */ .st-items { display: grid; gap: 6px; } .st-it-h { margin: 10px 0 0; font-size: 0.86rem; color: #cfd8ff; display: flex; align-items: center; gap: 4px; } .st-it { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 12px; background: var(--st-glass); border: 1px solid var(--st-line); } .st-it.zero { opacity: 0.62; } .st-it .st-item-ico { width: 44px; height: 44px; } .st-it-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .st-it-t .nm { font-size: 0.92rem; } .st-it-t .ds { font-size: 0.75rem; line-height: 1.4; color: #b8c2f0; } .st-it-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .st-it-r .n { font-size: 1.05rem; font-variant-numeric: tabular-nums; } .st-it-use { min-height: 44px; min-width: 64px; } /* ---- ならびかえ・属性のしぼりこみ・キャラのタイル ---- */ .st-tools { margin: 4px 0 8px; } .st-tool-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .st-sortl { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: #cfd8ff; min-width: 0; } .st-sel { min-height: 44px; padding: 0 8px; font: inherit; font-size: 0.86rem; color: #fff; background: rgba(14,18,64,0.85); border: 1px solid var(--st-line); border-radius: 10px; max-width: 100%; } .st-sel:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; } .st-sellmode { min-height: 44px; padding: 6px 14px; } .st-sellmode[aria-pressed="true"] { background: linear-gradient(#e0546a, #b02a44); border-color: rgba(255,170,185,0.7); } .st-fchips { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 4px; } .st-fchip { min-height: 44px; padding: 2px 0; font: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer; border-radius: 10px; color: #dfe6ff; background: rgba(14,18,64,0.7); border: 1px solid var(--st-line); } .st-fchip[aria-pressed="true"] { color: #fff; background: linear-gradient(#5b7bff, #4159d6); border-color: rgba(190,205,255,0.8); box-shadow: 0 0 10px rgba(100,130,255,0.45); } .st-fchip[data-f="fire"]::before, .st-fchip[data-f="water"]::before, .st-fchip[data-f="grass"]::before, .st-fchip[data-f="light"]::before, .st-fchip[data-f="dark"]::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 3px; border-radius: 50%; background: var(--el); border: 1px solid rgba(255,255,255,0.7); } .st-fchip:focus-visible { outline: 3px solid #ffd166; outline-offset: 1px; } .st-ugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; } .st-ut { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; min-height: 88px; padding: 5px 2px 4px; font: inherit; color: #f0f0f5; cursor: pointer; background: rgba(14,18,64,0.7); border: 1px solid var(--st-line); border-radius: 10px; touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .st-ut .st-ico { width: 100%; max-width: 54px; height: auto; aspect-ratio: 1; } .st-ut .st-badge.el { position: absolute; left: 3px; top: 3px; font-size: 0.75rem; } .st-ut .st-si.ut { position: absolute; right: 2px; top: 2px; } .st-ut .st-si.ut.line svg { width: 32px; height: 10px; } .st-ut .tag { position: absolute; right: 3px; top: 3px; min-width: 1.6em; padding: 1px 4px; border-radius: 6px; font-size: 0.75rem; font-weight: 800; text-align: center; color: #fff; background: rgba(90,110,255,0.95); border: 1px solid rgba(220,230,255,0.7); } .st-ut .tag:empty { display: none; } .st-ut .nm { max-width: 100%; font-size: 0.75rem; font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-ut .row { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 100%; line-height: 1.15; } /* ★ の下に Lv(2桁・3桁でも切れない) */ .st-ut .lv { white-space: nowrap; } .st-ut .st-stars { font-size: 10px; gap: 0; } /* 一覧のタイルは幅がせまい: ★5つで約50px(SVG の星は文字より広いので小さめ) */ /* 一覧のタイルの星: 星1つずつのマスク(5個 × 数十タイル)と filter: drop-shadow は、スクロールで新しい行が出るたびに style・paint・レイヤーの組み直しが重かった。 レア度ごとに「星の列(形・色・影・★5 の光)」を1枚の画像(WebP。3.6倍の細かさ)にして背景に敷く。見た目は .st-star と同じ形・色。。 影・光の分、上下左右に 0.5em の余白(padding)を取り、同じだけ負の margin で打ち消す(配置は星だけのときと同じ) */ .st-ut .st-stars.simg { display: block; box-sizing: content-box; height: 1em; padding: 0.5em; margin: -0.5em; filter: none; background-repeat: no-repeat; background-size: 100% 100%; } .st-ut .st-stars.simg.r3 { width: 3em; background-image: url("data:image/webp;base64,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"); } .st-ut .st-stars.simg.r4 { width: 4em; background-image: url("data:image/webp;base64,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"); } .st-ut .st-stars.simg.r5 { width: 5em; background-image: url("data:image/webp;base64,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"); } .st-ut .lv { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: #fff; } .st-ut.used { border-color: rgba(140,160,255,0.75); } .st-ut.cur { border-color: #ffd166; box-shadow: 0 0 0 2px rgba(255,209,102,0.55); } .st-ut.picked { border-color: #ff8a9a; box-shadow: 0 0 0 2px rgba(255,138,154,0.65); background: rgba(90,20,40,0.6); } .st-ut.picked .tag { background: #d12a46; } .st-ut.locked { opacity: 0.45; cursor: not-allowed; } .st-ut:hover:not(.locked) { filter: brightness(1.15); } .st-ut:focus-visible { outline: 3px solid #ffd166; outline-offset: 1px; } .st-ut img { pointer-events: none; } /* ---- パーティー ---- */ .st-slot-empty { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 2px dashed var(--st-line); font-weight: 800; color: #aab3dd; } .st-pfoot { position: sticky; bottom: 0; z-index: 4; margin: 10px -10px 0; padding: 8px 10px; background: linear-gradient(rgb(10,12,52), rgb(4,5,26)); border-top: 1px solid rgba(190,205,255,0.5); box-shadow: 0 -6px 20px rgba(0,0,0,0.45); } body.st-has-tb .st-pfoot { bottom: var(--st-tb); } .st-pfoot .hd-btn { min-height: 46px; } .st-save { min-width: 150px; } /* ---- 売却 ---- */ .st-sellhint { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; font-size: 0.75rem; line-height: 1.55; color: #ffe0e6; background: rgba(120,20,40,0.38); border: 1px solid rgba(255,140,160,0.45); } .st-sellhint[hidden] { display: none; } body.st-selling .st-page { padding-bottom: 130px; } .st-sellbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; width: 100%; max-width: 760px; margin: 0 auto; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(rgba(10,12,52,0.96), rgba(4,5,26,0.98)); border-top: 1px solid rgba(190,205,255,0.5); box-shadow: 0 -6px 20px rgba(0,0,0,0.5); } .st-sellbar[hidden] { display: none; } .st-sellsum { margin-bottom: 6px; font-size: 0.8rem; color: #dfe6ff; text-align: center; } .st-sellsum b { color: #fff; } .st-sellsum b.coin { color: #ffe08a; } .st-sellbtns { display: flex; gap: 6px; } .st-sellbtns .hd-btn { flex: 1 1 auto; min-height: 46px; padding: 6px 8px; font-size: 0.82rem; } .st-sellbtns .st-sell-go { flex: 0 0 96px; } /* ---- キャラの詳細・レベルアップ ---- */ .st-ud-lv { display: flex; align-items: baseline; gap: 4px; margin: 2px 0 2px; } .st-ud-lv .k { font-size: 0.8rem; color: #b3b9dc; font-weight: 800; } .st-ud-lv .n { font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px color-mix(in srgb, var(--el, #8fb3ff) 70%, transparent); } .st-ud-lv .cap { font-size: 0.75rem; color: #b3b9dc; } .st-ud-exp { margin-bottom: 8px; } .st-ud-bar, .st-pv-bar { height: 10px; } .st-ud-bar > i, .st-pv-bar > i { background: linear-gradient(90deg, #5aa8ff, #9fd2ff); transition: transform 0.5s ease-out; } /* 経験値は青(緑は HP だけ) */ .st-ud-exp .t, .st-pv-exp { display: block; margin-top: 2px; font-size: 0.75rem; color: #b8c2f0; } .st-inparty { background: rgba(90,110,255,0.5); } /* キャラの型のチップ(体力型 = 緑、攻撃型 = 赤、技巧型 = 紫、バランス型 = 既定の青) */ .st-type { font-weight: 700; } .st-type-tank { background: rgba(70,170,110,0.35); border-color: rgba(130,220,160,0.5); } .st-type-attack { background: rgba(220,80,80,0.35); border-color: rgba(255,150,150,0.5); } .st-type-skill { background: rgba(160,90,220,0.35); border-color: rgba(210,160,255,0.5); } .st-lvp { margin-top: 12px; padding: 10px; border-radius: 14px; background: var(--st-glass); border: 1px solid var(--st-line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .st-lvp-h { margin: 0 0 4px; font-size: 1rem; text-shadow: 0 0 10px rgba(120,140,255,0.5); } .st-lvp-note { margin: 0 0 4px; } .st-lv-max { margin: 6px 0; font-size: 0.86rem; color: #ffe9a6; } /* 素材のアイコン一覧(レベルアップの欄)。そのキャラの属性が先(金の枠 + 「+25%」)、ほかの属性は火水草光闇の順。持っていない素材は出さない。 タップで +1(アイコンに +N)・角の「−」で −1(押せる範囲は44px)。数・バッジは position:absolute なので、出ても並びはずれない。360〜412px で折り返す(横スクロールなし) */ .st-auto { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; } .st-auto-l { flex: none; font-size: 0.82rem; font-weight: 800; color: #ffe9a6; } .st-achip { flex: 1 1 0; min-width: 44px; min-height: 44px; padding: 0 4px; font: inherit; font-size: 0.95rem; font-weight: 800; color: #fff; cursor: pointer; border-radius: 12px; background: linear-gradient(rgba(64,74,170,0.92), rgba(38,44,120,0.94)); border: 1px solid rgba(255,255,255,0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .st-achip:disabled { opacity: 0.4; cursor: not-allowed; } .st-achip:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; } .st-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 12px 6px; margin-top: 12px; } .st-mcell { position: relative; min-width: 0; } .st-mcell[hidden] { display: none; } .st-mbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; min-height: 62px; padding: 8px 2px 4px; font: inherit; color: #fff; cursor: pointer; border-radius: 12px; background: rgba(30,36,100,0.62); border: 2px solid rgba(160,180,255,0.28); touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .st-mcell.own .st-mbtn { border-color: #ffd166; box-shadow: 0 0 0 1px rgba(255,209,102,0.4), inset 0 0 14px rgba(255,209,102,0.16); } .st-mcell.on .st-mbtn { background: linear-gradient(rgba(70,80,190,0.95), rgba(44,50,130,0.96)); } .st-mbtn[aria-disabled="true"] img { opacity: 0.5; } .st-mbtn:focus-visible, .st-mminus:focus-visible { outline: 3px solid #ffd166; outline-offset: 1px; } .st-mico { position: relative; display: block; width: 36px; height: 36px; } .st-mico img { display: block; width: 36px; height: 36px; } .st-mn { position: absolute; right: -12px; bottom: -2px; min-width: 22px; padding: 0 5px; border-radius: 10px; font-size: 0.72rem; font-weight: 900; line-height: 18px; text-align: center; color: #10202a; background: #7CFC9C; box-shadow: 0 1px 4px rgba(0,0,0,0.5); font-variant-numeric: tabular-nums; pointer-events: none; } .st-mn[hidden] { display: none; } .st-mbtn .own { font-size: 0.76rem; font-weight: 700; color: #ffe9a6; font-variant-numeric: tabular-nums; white-space: nowrap; } .st-mbonus { position: absolute; left: -4px; top: -9px; padding: 0 4px; border-radius: 8px; font-size: 0.62rem; font-weight: 900; line-height: 16px; color: #2a1a00; background: linear-gradient(#ffe9a6, #ffc13a); box-shadow: 0 1px 4px rgba(0,0,0,0.45); pointer-events: none; font-variant-numeric: tabular-nums; } .st-mminus { position: absolute; top: -12px; right: -12px; width: 44px; height: 44px; padding: 0; font: inherit; cursor: pointer; border: 0; background: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .st-mminus[hidden] { display: none; } .st-mminus .g { display: block; width: 22px; height: 22px; margin: 11px auto 0; border-radius: 50%; font-size: 1rem; font-weight: 900; line-height: 20px; color: #fff; background: #c0405a; border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 1px 4px rgba(0,0,0,0.5); } .st-mats { display: grid; } .st-mat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; padding: 6px 0; border-top: 1px solid rgba(160,180,255,0.18); } .st-mat-l { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 140px; } .st-mat-t { display: flex; flex-direction: column; min-width: 0; } .st-mat-t .nm { font-size: 0.9rem; } .st-mat-t .own { font-size: 0.75rem; color: #ffe9a6; font-variant-numeric: tabular-nums; } .st-mat-t .ex { font-size: 0.75rem; color: #aab3dd; } .st-mat-c { display: flex; align-items: center; gap: 4px; margin-left: auto; } .st-step, .st-max { font: inherit; font-weight: 800; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .st-step { width: 44px; height: 44px; font-size: 1.5rem; line-height: 1; padding: 0; } .st-max { min-width: 52px; min-height: 44px; padding: 0 8px; font-size: 0.8rem; } .st-step:focus-visible, .st-max:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; } .st-cnt { display: inline-block; min-width: 44px; text-align: center; font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #aab3dd; } .st-cnt.on { color: #fff; } .st-pv { margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,24,0.45); border: 1px solid rgba(160,180,255,0.25); } .st-pv-lv { font-size: 1.05rem; font-weight: 800; margin-bottom: 4px; } .st-pv-lv b.up, .st-pv-s b.up { color: #7CFC9C; } .st-pv-lv .cap { font-size: 0.75rem; color: #ffe08a; } .st-pv-stats { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; font-size: 0.82rem; font-variant-numeric: tabular-nums; } .st-pv-coin { display: flex; flex-wrap: wrap; align-items: center; margin-top: 4px; font-size: 0.82rem; } .st-pv-coin b { margin: 0 2px; color: #ffe08a; font-variant-numeric: tabular-nums; } .st-pv-coin b.short { color: #ff8a9a; } .st-pv-msg { margin: 6px 0 0; min-height: 1.3em; font-size: 0.75rem; line-height: 1.5; color: #c6cbe8; } .st-pv-msg.bad { color: #ffb4a0; } .st-lvp-btns { display: flex; gap: 6px; margin-top: 8px; } .st-lvp-btns .hd-btn { min-height: 48px; flex: 0 1 auto; padding: 6px 12px; font-size: 0.85rem; white-space: nowrap; } .st-lvp-btns .st-lv-go { flex: 1 1 auto; font-size: 0.98rem; } .st-sh-art.lvpulse { animation: stLvPulse 0.9s ease-out; } @keyframes stLvPulse { 0% { filter: brightness(2.2); transform: scale(1.06); } 100% { filter: none; transform: none; } } /* レベルアップの演出(押し続けなくてよい短いもの。クリック・タップで消える) */ .st-lvfx { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--el, #ffd24a) 28%, rgba(8,10,40,0.35)), rgba(2,3,18,0.62) 70%); cursor: pointer; animation: stLvfxIn 0.25s ease-out; } .st-lvfx .box { position: relative; z-index: 1; padding: 16px 22px; text-align: center; border-radius: 18px; background: rgba(10,12,52,0.88); border: 2px solid var(--el, #ffd24a); box-shadow: 0 0 30px var(--el, #ffd24a); animation: stLvfxBox 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both; } .st-lvfx .big { font-size: 2rem; font-weight: 900; letter-spacing: 0.08em; color: #ffe08a; text-shadow: 0 0 14px rgba(255,200,80,0.9), 0 2px 0 rgba(90,50,0,0.8); } .st-lvfx .lv { margin-top: 2px; font-size: 1.15rem; font-weight: 800; } .st-lvfx .lv b { color: #7CFC9C; font-size: 1.5rem; } .st-lvfx .st { margin-top: 4px; font-size: 0.75rem; color: #dfe6ff; } .st-lvfx .ring { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px; border-radius: 50%; border: 3px solid var(--el, #ffd24a); opacity: 0; animation: stLvfxRing 1.1s ease-out forwards; } .st-lvfx .spk { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3px; border-radius: 50%; background: #fff6c8; box-shadow: 0 0 8px #ffd24a; opacity: 0; transform: rotate(var(--a)) translateX(0); animation: stLvfxSpk 1.1s var(--d) ease-out forwards; } @keyframes stLvfxIn { from { opacity: 0; } to { opacity: 1; } } @keyframes stLvfxBox { from { transform: scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes stLvfxRing { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(9); opacity: 0; } } @keyframes stLvfxSpk { 0% { transform: rotate(var(--a)) translateX(30px); opacity: 1; } 100% { transform: rotate(var(--a)) translateX(150px); opacity: 0; } } /* 動きを減らす(設定・OS): ロビー・ダイアログ・レベルアップの動きを止める */ html.hd-reduce .st-sortie, html.hd-reduce .st-lbn-i, html.hd-reduce .st-lvfx, html.hd-reduce .st-lvfx *, html.hd-reduce .st-sh-art.lvpulse { animation: none !important; } html.hd-reduce .st-ud-bar > i, html.hd-reduce .st-pv-bar > i { transition: none; } .st-lvfx.still, .st-lvfx.still * { animation: none !important; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-sortie, html:not(.hd-motion) .st-lbn-i, html:not(.hd-motion) .st-lvfx, html:not(.hd-motion) .st-lvfx *, html:not(.hd-motion) .st-sh-art.lvpulse { animation: none !important; } html:not(.hd-motion) .st-ud-bar > i, html:not(.hd-motion) .st-pv-bar > i { transition: none; } } @media (max-width: 380px) { .st-menu-btn { font-size: 0.75rem; } .st-ugrid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 5px; } .st-sellbtns .hd-btn { font-size: 0.75rem; } .st-sellbtns .st-sell-go { flex-basis: 76px; } } .st-link { min-height: 44px; } body.st-selling .st-toast { bottom: 150px; } .st-sh-art img, .st-lbc .art img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; } .st-toast:not([hidden]) { pointer-events: auto; cursor: pointer; } /* 出ている間だけ触れる(タップで消せる)。隠れている間は display:none で下に触れる */ /* 届いたあいさつの知らせ: 下のボタン(ミッション・コレクション)に重ならないよう、上の HUD の下に出す。右のメニューの列(約 80px)も避ける。 句(.st-toast-p)は途中で折り返さない = 「あいさ/つ(+5)」のように分かれない(句の間でだけ折り返す) */ .st-toast.st-toast-high, body.st-has-tb .st-toast.st-toast-high { top: 112px; bottom: auto; left: 12px; transform: none; width: fit-content; max-width: min(calc(100vw - 100px), 340px); } .st-toast-p { display: inline-block; } .st-lvp-btns { flex-wrap: wrap; } .st-lvp-btns .st-lv-go { flex: 1 1 140px; } .st-screen h1:focus { outline: none; } /* ロビーから開いた設定パネル(戦闘の画面の外なので、画面の上に浮かせる) */ .hd-settings.hd-set-float { position: fixed; inset: 12px; z-index: 60; margin: 0 auto; max-width: 560px; overflow-y: auto; justify-content: flex-start; } /* ---- ロビーの3体のリング(stella-carousel.js)。3枚を同じマスに重ねて、位置・大きさ・暗さは JS が毎フレーム transform / opacity で決める ---- */ .st-car-ring { position: relative; display: grid; justify-items: center; align-items: center; padding: 10px 0 6px; overflow-x: clip; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; } .st-car.drag .st-car-ring { cursor: grabbing; } .st-car-ring::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: 0; height: 18%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(150,170,255,0.32), rgba(150,170,255,0) 70%); pointer-events: none; } /* 足もとの輪(回る台) */ .st-car-i { grid-area: 1 / 1; width: min(46%, 205px); touch-action: pan-y; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } .st-car-i .dim { position: absolute; inset: 0; z-index: 3; background: #02031a; opacity: 0; pointer-events: none; border-radius: inherit; } .st-car.mv .st-car-i { will-change: transform; } /* 動かしている間だけ専用レイヤーにする(常時だとGPUタイルを食う) */ .st-car-i.front { box-shadow: 0 0 26px color-mix(in srgb, var(--el, #8fb3ff) 65%, transparent), inset 0 0 0 1px rgba(255,255,255,0.2); } .st-car-i:not(.front) { cursor: pointer; } .st-car-i.st-lbc.cut, .st-car-i.st-lbc.cut.front { box-shadow: none; } /* 背景なしの絵: 正面の光の枠も付けない(足元の光だけ) */ .st-car-i.st-lbc.cut .dim { display: none; } .st-car-i:not(.front) .info .nm { font-size: 0.75rem; } .st-car-i:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; } .st-car-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .st-car { position: relative; } /* 立ち絵の長押し(キャラの詳細の絵) */ .st-sh-art { position: relative; } .st-sh-art { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; cursor: zoom-in; } .st-sh-art:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; } .st-sheet .st-sh-art { cursor: default; } .st-sheet .st-sh-art.st-zoomable { cursor: zoom-in; } /* キャラの詳細の立ち絵: 長押しで拡大(未入手のキャラは拡大しない) */ .st-sheet .st-sh-art .st-art-zoom { left: 4px; top: 4px; width: 24px; height: 24px; } .st-sheet .st-sh-art .st-art-zoom svg { width: 14px; height: 14px; } /* 立ち絵ビューア(stella-viewer.js。全画面) */ .st-vw { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 12px calc(10px + env(safe-area-inset-bottom, 0px)); cursor: zoom-out; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: none; background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--el, #8fb3ff) 26%, rgba(14,12,50,0.985)), rgba(3,4,20,0.995) 74%); animation: stVwIn 0.2s ease-out; } .st-vw[hidden] { display: none; } .st-vw-art { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; } .st-vw-art video, .st-vw-art canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; pointer-events: none; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--el, #8fb3ff) 55%, transparent)); } .st-vw-art img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; -webkit-user-drag: none; -webkit-touch-callout: none; pointer-events: none; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--el, #8fb3ff) 55%, transparent)); } .st-vw-cap { flex: none; text-align: center; } .st-vw-name { margin: 0; font-size: 1.25rem; font-weight: 900; text-shadow: 0 2px 6px #000; } .st-vw-meta { margin: 2px 0 0; display: flex; gap: 8px; align-items: center; justify-content: center; } .st-vw-stars { font-size: 18px; gap: 3px; } .st-vw-hint { margin: 3px 0 0; font-size: 0.75rem; color: #aab4e6; } .st-vw-x { position: absolute; right: 10px; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 1; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(170,190,255,0.6); background: rgba(10,14,60,0.88); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; } .st-vw-x:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; } @keyframes stVwIn { from { opacity: 0; } to { opacity: 1; } } html.hd-reduce .st-vw { animation: none; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-vw { animation: none; } } /* ---- デイリーチャレンジ(出撃のデイリータブ・戦闘の画面の表示)。#stBattle に .st-daily が付いている間は、敵・パーティーのパネルの代わりに記録を出す ---- */ .st-dhud { display: none; } .st-daily .st-efxw, .st-daily .st-efx, .st-daily .st-e-foot, .st-daily .st-e-wave, .st-daily #stPartyPanel { display: none; } /* 加速ボタン(ゆっくり下ろす)はデイリー(重力あり)だけ。ただし操作ボタンの列(#controls)は戦闘では出さない。スワイプは、バトルもデイリーも上下どちらも即落下(早見の文は1つ)。必殺技の早見はキャラのいるバトルだけ */ .st-battle:not(.st-daily) .hd-controls .st-soft-pad, .st-battle.st-daily .st-hint-ult { display: none; } .st-daily .st-enemy { padding-right: 66px; min-height: 52px; justify-content: center; } .st-daily .st-dhud { display: flex; align-items: stretch; gap: 6px; min-width: 0; } /* デイリーの盤は画面の下寄せ(親指の届く位置。盤の上の記録(レベル・消したボール・スコア・NEXT・歯車)はそのまま上)。パーティー・操作ボタンが無くて、盤の下に大きな空きができるのを防ぐ。 盤の大きさは幅で決まる(hexdrop.js layout が敵の欄の真下から測る)。戦闘の画面(#stBattle)をその分の高さまで伸ばし、盤を下端へ(margin-top: auto)。操作(タップ・スワイプ)は盤の外の空きでも効く */ body.st-in-battle .st-battle.st-daily { display: flex; flex-direction: column; min-height: calc(100vh - max(4px, env(safe-area-inset-top, 0px)) - 6px - env(safe-area-inset-bottom, 0px)); min-height: calc(100dvh - max(4px, env(safe-area-inset-top, 0px)) - 6px - env(safe-area-inset-bottom, 0px)); } /* 戦闘の上に広告が出る(body.st-bt-ad = .hd-page の上の余白が 広告 + 8px)ときは、その分を引く。引かないと盤の下が画面の外へはみ出す(2026-11-02 修正) */ html.ad-sp body.st-in-battle.st-bt-ad .st-battle.st-daily { min-height: calc(100vh - var(--st-adh) - env(safe-area-inset-top, 0px) - 8px - 6px - env(safe-area-inset-bottom, 0px)); min-height: calc(100dvh - var(--st-adh) - env(safe-area-inset-top, 0px) - 8px - 6px - env(safe-area-inset-bottom, 0px)); } .st-daily .st-stage.hd-stage { flex: 1 1 auto; } .st-daily #playArea { margin-top: auto; margin-bottom: 8px; } .st-daily #stBelow { display: none; } .st-dhud-i { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3px 4px; border-radius: 10px; background: rgba(0,0,20,0.45); border: 1px solid rgba(160,180,255,0.35); line-height: 1.1; } .st-dhud-i small { font-size: 0.75rem; color: #b3b9dc; white-space: nowrap; } .st-dhud-i b { font-size: 1.15rem; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,0.8); } .st-dhud-i:first-child b { color: #ffe08a; } /* 担当(リング・ピラミッド・ライン)のアイコン: 金色の丸6個(枠線だけ。属性の色にはしない = 「緑のリング」と思われるため)をワザの形に並べたもの(stella-stage.js slotIcon)。外の枠はなし。絵の上でも見えるよう影だけ付ける */ .st-si { display: inline-flex; align-items: center; justify-content: center; line-height: 0; filter: drop-shadow(0 0 1.5px rgba(0,0,0,0.95)) drop-shadow(0 0 3px rgba(0,0,0,0.6)); } .st-si svg { display: block; width: 26px; height: 26px; } .st-si.line svg { width: 44px; height: 13px; } .st-si.in svg { width: 16px; height: 16px; } .st-si.in.line svg { width: 26px; height: 8px; } .st-sk.off .st-si { opacity: 0.55; } /* フォント(2026-10-05 オーナー決定 A案「神話・気品」): 本文は禅角ゴシック、見出し(画面のタイトル・出撃・キャラ名・ダイアログの題など)は 英数字が Cinzel・日本語がしっぽり明朝。Google Fonts から読み込む(stella-orbs.html の 、display=swap: 読み込むまでは端末のフォントで表示)。 */ :root { --st-font-body: 'Zen Kaku Gothic New', 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; --st-font-head: 'Cinzel', 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif; --st-font-num: 'Chakra Petch', 'Zen Kaku Gothic New', 'Segoe UI', sans-serif; /* 戦闘の数字(ダメージ・HP・カウント)は Chakra Petch 700 に統一(2026-10-22。stella-orbs.html で読み込む) */ } body, button, input, select, textarea { font-family: var(--st-font-body); } .hd-title, .st-dlg-title, .st-rv-title, .st-rw-title, .st-sortie .t, .st-slot-name, .st-sh-name, .st-sh-title, .st-sc-name, .st-pop-n, .st-banner, .st-rw-bn, #settingsTitle, #ovTitle { font-family: var(--st-font-head); } .hd-title small { font-family: var(--st-font-body); } /* ============================ 使いやすさの調整(2026-10-06、UI UX Pro Max の点検) ============================ * 見た目・配置は変えず、(1) 押せる範囲を 44px 以上に、(2) 8px 前後の小さすぎる文字をおおむね 10px 以上に上げる。 */ /* (1) 押せる範囲: ロビーの設定ボタンは幅を 44px に。対戦中のヘッダーのボタンは縦の場所を取らないよう、見た目の高さはそのままで * 透明な当たり判定を上下に広げる(::before)。オーバーレイ・ガチャ結果のボタンは高さ 44px */ #stLobbySettings { min-width: 44px; } .st-cal-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .st-battle .hd-head-buttons .hd-btn.small { position: relative; } .st-battle .hd-head-buttons .hd-btn.small::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; } .st-page .hd-overlay .hd-btn, .st-rv-btns .hd-btn { min-height: 44px; } /* (2) 小さすぎる文字 */ .st-next .k { font-size: 0.75rem; } .st-page .hd-pad small { font-size: 0.75rem; } .st-gring .st-badge, .st-ut .st-badge.el, .st-rc .st-badge, .st-rt-ch .st-badge { font-size: 0.75rem; } .st-mem .st-key, .st-rc.used::after { font-size: 0.75rem; } .st-chip { font-size: 0.75rem; } .st-ut .nm { font-size: 0.75rem; } .st-own { font-size: 0.75rem; } .st-stat small, .st-dhud-i small { font-size: 0.75rem; } .st-mat-t .ex, .st-rwl-l { font-size: 0.75rem; } .st-rv-card .nm { font-size: 0.75rem; } .st-rv-card .lab { font-size: 0.75rem; } @media (max-width: 480px) { .st-rv-card .nm { font-size: 0.75rem; } .st-rv-card .lab { font-size: 0.75rem; } } /* ---- 報酬の画面: プレイヤー経験値バーの演出とレベルアップのバースト(stella-stage.js の rwPlayer / rwPlayerRun)。動きを減らす設定では、いずれも出さず結果だけ ---- */ .st-lv-bar.wide i { transition: none; } .st-lv-bar.wide.full { box-shadow: 0 0 10px 2px rgba(255,224,138,0.9); animation: stBarFlash 0.26s ease-out; } .st-lv-bar.wide.full i { background: linear-gradient(90deg, #fff6c8, #ffd24a); } .st-rw-pnow span.tick { display: inline-block; animation: stLvTick 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); color: #ffe08a; } .st-rw-lvup.pend, .st-rw-lvup-l li.pend { visibility: hidden; } .st-rw-lvup-l li.in { animation: stLiPop 0.34s cubic-bezier(0.2, 1.6, 0.4, 1) both; } .st-rw-lvup-l li.tk.in { background: linear-gradient(100deg, #ffe08a 20%, #fff 45%, #ffd24a 60%, #ffe08a 80%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; animation: stLiPop 0.34s cubic-bezier(0.2, 1.6, 0.4, 1) both, stShimmer 1.6s linear 0.3s infinite; filter: drop-shadow(0 0 6px rgba(255,210,74,0.8)); } .st-rw-burst { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } .st-rw-burst .glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 48%, rgba(255,226,140,0.55), rgba(255,200,80,0.12) 45%, transparent 70%); animation: stBurstGlow 1.3s ease-out forwards; } .st-rw-burst .rays { position: absolute; left: 50%; top: 48%; width: 150vmax; height: 150vmax; margin: -75vmax; background: repeating-conic-gradient(from 0deg, rgba(255,230,150,0.38) 0 6deg, transparent 6deg 20deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 38%); mask-image: radial-gradient(circle, #000 0, transparent 38%); opacity: 0; animation: stBurstRays 1.3s ease-out forwards; } .st-rw-burst .ring { position: absolute; left: 50%; top: 48%; width: 60px; height: 60px; margin: -30px; border-radius: 50%; border: 3px solid #ffd24a; opacity: 0; animation: stLvfxRing 1.1s ease-out forwards; } .st-rw-burst .spk { position: absolute; left: 50%; top: 48%; width: 7px; height: 7px; margin: -3px; border-radius: 50%; background: #fff6c8; box-shadow: 0 0 8px #ffd24a; opacity: 0; transform: rotate(var(--a)) translateX(0); animation: stLvfxSpk 1.1s var(--d) ease-out forwards; } .st-rw-burst .txt { position: relative; font-family: var(--f-display, 'Chakra Petch', sans-serif); font-size: 2.6rem; font-weight: 900; letter-spacing: 0.08em; color: #ffe08a; text-shadow: 0 0 16px rgba(255,200,80,0.95), 0 3px 0 rgba(90,50,0,0.85); animation: stBurstTxt 1.3s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; } .st-rw-burst .lv { position: relative; margin-top: 2px; font-family: var(--f-display, 'Chakra Petch', sans-serif); font-size: 1.4rem; font-weight: 800; color: #7CFC9C; text-shadow: 0 0 10px rgba(124,252,156,0.8); animation: stBurstTxt 1.3s 0.05s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; } @keyframes stBarFlash { 0% { filter: brightness(2.2); } 100% { filter: none; } } @keyframes stLvTick { 0% { transform: scale(1.9); } 100% { transform: scale(1); } } @keyframes stLiPop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: none; opacity: 1; } } @keyframes stShimmer { 0% { background-position: 120% 0; } 100% { background-position: -100% 0; } } @keyframes stBurstGlow { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } } @keyframes stBurstRays { 0% { opacity: 0; transform: rotate(0) scale(0.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(40deg) scale(1.1); } } @keyframes stBurstTxt { 0% { transform: scale(0.3); opacity: 0; } 22% { transform: scale(1.15); opacity: 1; } 34% { transform: scale(1); } 78% { opacity: 1; } 100% { transform: scale(1.04); opacity: 0; } } html.hd-reduce .st-rw-burst, html.hd-reduce .st-lv-bar.wide.full, html.hd-reduce .st-rw-pnow span.tick, html.hd-reduce .st-rw-lvup-l li.in, html.hd-reduce .st-rw-lvup-l li.tk.in { animation: none !important; } .st-rw.still .st-rw-lvup-l li.tk.in { animation: none; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-rw-burst, html:not(.hd-motion) .st-lv-bar.wide.full, html:not(.hd-motion) .st-rw-pnow span.tick, html:not(.hd-motion) .st-rw-lvup-l li.in { animation: none !important; } } /* ---- デイリーミッション・図鑑のバッジ(ロビーのメニュー。プレゼントのバッジと同じ見た目) ---- */ .st-menu-badge { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #ff4d6d; color: #fff; font-size: 0.75rem; font-weight: 900; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #0b0e2e; font-variant-numeric: tabular-nums; } .st-menu-badge[hidden] { display: none; } .st-menu-btn.has { border-color: rgba(255,214,120,0.75); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 16px rgba(255,200,90,0.35); } .st-menu-btn.has .ic { animation: stGiftWiggle 2.4s ease-in-out infinite; } /* ---- デイリーミッション ---- */ .st-ms-list { display: grid; gap: 8px; } .st-ms { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--st-glass); border: 1px solid var(--st-line); } .st-ms.done { border-color: rgba(255,214,120,0.75); box-shadow: 0 0 14px rgba(255,200,90,0.25); } .st-ms.claimed { opacity: 0.72; } .st-ms.all { background: linear-gradient(rgba(70,50,120,0.7), rgba(20,14,60,0.8)); } .st-ms-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .st-ms-name { font-size: 0.95rem; color: #fff; } .st-ms-rw { display: inline-flex; flex-wrap: wrap; gap: 6px; } .st-ms-f { display: flex; align-items: center; gap: 10px; } .st-ms-bar { position: relative; flex: 1 1 auto; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(8,10,40,0.8); border: 1px solid var(--st-line); } .st-ms-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, #7ad7ff, #ffe08a); transition: width 0.4s ease-out; } .st-ms-n { min-width: 64px; font-size: 0.78rem; color: #dfe6ff; text-align: right; font-variant-numeric: tabular-nums; } /* ---- キャラコレクション ---- */ .st-dex-sum { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; padding: 10px 12px; border-radius: 14px; background: var(--st-glass); border: 1px solid var(--st-line); } .st-dex-top { display: flex; align-items: center; gap: 10px; } .st-dex-cnt { font-size: 0.95rem; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; } .st-dex-next { margin: 0; font-size: 0.82rem; color: #ffe08a; } .st-dex-ms { display: flex; flex-wrap: wrap; gap: 6px; } .st-dex-all { min-height: 44px; align-self: flex-end; width: auto; padding: 8px 18px; } .st-dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .st-dex-c { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; padding: 8px 4px; font: inherit; color: #eef1ff; border-radius: 12px; background: var(--st-glass); border: 1px solid var(--st-line); } button.st-dex-c { cursor: pointer; } button.st-dex-c:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; } .st-dex-c.rf, .st-ut.rf { border-color: transparent; } /* レア度の枠(.rf のリング)が縁の代わり。選択中の状態では下で消す */ /* 一覧のタイル(.st-ut)の枠は、マスクで抜いた ::before ではなく内側の box-shadow で描く(数千体の一覧をスクロールするとき、タイルごとのマスク・フィルターのラスタライズが重かった)。見た目は同じ: 1px の線 + ★5 だけほのかな光 */ .st-ut.rf::before { display: none; } .st-ut.rf.r3:not(.used):not(.cur):not(.picked) { box-shadow: inset 0 0 0 1px var(--rl); } .st-ut.rf.r4:not(.used):not(.cur):not(.picked) { box-shadow: inset 0 0 0 1px var(--rl); } .st-ut.rf.r5:not(.used):not(.cur):not(.picked) { box-shadow: inset 0 0 0 1px var(--rl), inset 0 0 3px 0 rgba(255,250,224,0.7), 0 0 6px rgba(255,233,166,0.34), 0 0 2px rgba(255,250,224,0.55); } .st-ut.rf.used { border-color: rgba(140,160,255,0.75); } .st-ut.rf.cur { border-color: #ffd166; } .st-ut.rf.picked { border-color: #ff8a9a; } .st-sh-art.rf:not(.cut) { border-color: transparent; } .st-sh-art.rf { --rf-w: 3px; } .st-sh-art.rf.cut::before { display: none; } .st-dex-c.off .st-star { background: #8f98c8; } .st-dex-c .nm { font-size: 0.75rem; font-weight: 700; text-align: center; } .st-dex-c.off { background: rgba(14,18,64,0.5); } .st-dex-c.off .nm, .st-dex-c.off .st-stars { color: #8f98c8; } .st-dex-sil { filter: grayscale(1) brightness(0.7); opacity: 0.75; } .st-dex-no { font-size: 0.75rem; font-weight: 700; color: #b8c2f0; padding: 0 6px; border-radius: 999px; border: 1px solid var(--st-line); } .st-notyet img, .st-notyet canvas { filter: grayscale(1) brightness(0.8); } .st-sh-notyet { display: inline-block; align-self: flex-start; padding: 1px 10px; margin-bottom: 2px; border-radius: 999px; font-size: 0.8rem; font-weight: 800; color: #dfe4ff; background: rgba(90,100,150,0.55); border: 1px solid var(--st-line); } /* ---- ログインカレンダー(7日のカード。2026-10-30: 縦長の7列をやめ、横1列のカードを横にスクロール) ---- カードは日ごとに 日付 + 状態(今日・済み・特別)の見出しと、報酬(絵 + 数)の行。ダイアログは横にスクロールさせず、この帯だけが横にスクロール(スナップ)。 端は、まだ先があるときだけ薄く消す(.can-l / .can-r。JS が付ける)。PC は細いスクロールバーも出す。最初の位置は今日のカードが真ん中(JS) */ .st-lbn { min-width: 0; } .st-cal { position: relative; display: flex; gap: 8px; margin: 2px 0 6px; padding: 12px 8px 12px; list-style: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(170,190,255,0.55) transparent; } .st-cal::-webkit-scrollbar { height: 6px; } .st-cal::-webkit-scrollbar-thumb { background: rgba(170,190,255,0.5); border-radius: 3px; } .st-cal::-webkit-scrollbar-track { background: rgba(14,18,64,0.5); border-radius: 3px; } .st-cal.can-l.can-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); } .st-cal.can-l:not(.can-r) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px); mask-image: linear-gradient(90deg, transparent, #000 24px); } .st-cal.can-r:not(.can-l) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); } .st-cal-d { position: relative; flex: 0 0 108px; display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 10px; border-radius: 12px; background: rgba(14,18,64,0.7); border: 1px solid var(--st-line); scroll-snap-align: center; } .st-cal-d .hd { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 20px; } .st-cal-d .dn { font-size: 0.84rem; font-weight: 700; color: #b8c2f0; white-space: nowrap; } .st-cal-d .tg { padding: 1px 6px; border-radius: 8px; font-size: 0.7rem; font-weight: 700; line-height: 1.3; color: #ffe08a; background: rgba(255,214,120,0.16); border: 1px solid rgba(255,214,120,0.55); white-space: nowrap; } .st-cal-d .pair { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; } .st-cal-d .pair .one { display: flex; align-items: center; gap: 6px; min-width: 0; } .st-cal-d .pair .one .st-item-ico { flex: none; width: 28px; height: 28px; } .st-cal-d .n { font-size: 0.86rem; color: #ffe08a; font-variant-numeric: tabular-nums; white-space: nowrap; } .st-cal-d .ck { flex: none; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.75rem; font-weight: 900; line-height: 1; color: #d6ffe0; background: #1f6a3c; border: 1px solid #9fe8b0; } .st-cal-d.past { opacity: 0.72; } .st-cal-d.past .pair { opacity: 0.8; } .st-cal-d.last { background: radial-gradient(rgba(255,214,120,0.35), rgba(40,20,80,0.85)); border-color: rgba(255,214,120,0.85); } .st-cal-d.last .pair .one:first-child .st-item-ico { width: 32px; height: 32px; } .st-cal-d.today { border-color: #ffe08a; box-shadow: 0 0 10px rgba(255,214,120,0.7); animation: stCalPop 0.5s 0.15s cubic-bezier(0.2, 1.6, 0.4, 1) both; } .st-cal-d.today .dn { color: #fff1c4; } .st-cal-d .stamp { position: absolute; right: -6px; bottom: -8px; padding: 0 5px; border: 2px solid #ff6b81; border-radius: 6px; color: #ff6b81; font-size: 0.8rem; font-weight: 900; background: rgba(20,6,20,0.85); transform: rotate(-14deg); animation: stCalStamp 0.4s 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both; } @keyframes stCalPop { from { transform: scale(0.6); } to { transform: none; } } @keyframes stCalStamp { from { opacity: 0; transform: rotate(-14deg) scale(2.4); } to { opacity: 1; transform: rotate(-14deg) scale(1); } } .st-cal.still .st-cal-d, .st-cal.still .stamp { animation: none; } html.hd-reduce .st-cal-d, html.hd-reduce .st-cal-d .stamp, html.hd-reduce .st-menu-btn.has .ic { animation: none; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-cal-d, html:not(.hd-motion) .st-cal-d .stamp, html:not(.hd-motion) .st-menu-btn.has .ic { animation: none; } } /* 軽量背景(スマホ・タッチ端末): 全画面の常時アニメ+screen合成はGPUのタイルメモリを食い、画面の一部が描かれない(チカチカ)原因になるため、 静止画の背景だけにする(オーロラ・もや・またたきは出さない)。デスクトップは従来どおり。/stella-orbs は hexdrop.css のみなので影響なし */ @media (pointer: coarse), (max-width: 820px) { /* 動かない絵なので、層に昇格させない(translate3d・will-change・backface-visibility はどれも別の層にして、画面の 5.7 倍の大きさの層を作っていた)。 位置は left/top に足して、見える範囲は今までと同じ。:root:root は、hexdrop.css の「演出を減らす」の transform(html.hd-reduce .bgpan 等)に負けないため */ :root:root .bgpan { animation: none; will-change: auto; backface-visibility: visible; transform: none; left: calc(var(--l) + var(--x0, 0px)); top: calc(var(--t) + var(--y0, 0px)); } .aur, .haze, .tw { display: none; } #space .layer { animation: none; transform: none; } } /* スマホでスクロールの端に来たとき、URLバーの出入りやオーバースクロールの伸びで全画面が再描画されてチカチカするのを防ぐ */ html, body { overscroll-behavior-y: none; } /* 長い一覧(キャラ・パーティー)は、あとから行を描いて伸びる。ブラウザのスクロール固定(scroll anchoring)が位置をずらさないように(画面を開いたときは先頭のまま) */ #stParty, #stBox, #stSelect { overflow-anchor: none; } @supports (height: 100lvh) { #space { inset: auto; left: 0; top: 0; width: 100%; height: 100lvh; } /* URLバーが出入りしても背景のサイズが変わらない */ } /* 盤の上(盤面が13段になって空いた所)に大きく出す敵の絵。高さは決まった帯(盤はその下の残りに合わせて大きさが決まる)。 アニメは transform / opacity だけ、ふだんは何も動かない。ブレンド・フィルタ・マスクは使わない */ .st-efx { position: relative; width: 100%; height: clamp(56px, 10vh, 120px); /* 高さは hexdrop.js layout() が余った高さに合わせて上書きする */ display: flex; align-items: center; justify-content: center; pointer-events: none; background: radial-gradient(ellipse 46% 58% at 50% 62%, rgba(120,100,255,0.18), rgba(120,100,255,0) 72%); } .st-efx .efx-art { display: block; height: calc(100% - 4px); width: auto; aspect-ratio: 1 / 1; object-fit: contain; pointer-events: none; -webkit-user-drag: none; user-select: none; } /* 枠を付けない(オーナー方針 2026-10-08 docs/specs/stella-art-motion.md): 透明の絵をそのまま。canvas(なびく・弾む動き)は img と同じ class を持つ */ .st-efx img.efx-art[hidden] { display: none; } /* ボスの立ち絵は全身(2026-10-19 オーナー: 上だけの切り出しをやめる)。敵のエリアの中に収めて、足元(下の端)をそろえる。 大きさの調整は --boss-scale だけ(1 = 敵のエリアの高さいっぱい。1 より大きくすると、上へはみ出して大きく出る。下(名前・HPバー)には はみ出さない) */ .st-efx { --boss-scale: 1; } .st-efx .efx-art.boss { aspect-ratio: 3 / 5; height: var(--bh); margin-bottom: calc(var(--bh) * var(--bb) * -1); margin-left: calc(var(--bh) * 1.2 * (0.5 - var(--bcx))); object-fit: contain; object-position: 50% 100%; align-self: flex-end; } /* 2026-11-03 ボスの大きさ: 絵の見えている部分(透明な余白を除く。hexdrop 側ではなく stella-stage.js efxFitMeasure が割合を --bvh/--bvw/--bb/--bcx に入れる)が、エリアの高さ・幅いっぱいに収まる枠の高さ --bh。 見える部分の下端が足元(名前・HPバー)の上に来るよう、枠の下の透明な余白ぶん下へずらす(--bb)・見える部分を横の真ん中へ(--bcx)。変数が無いときは 1 / 1 / 0 / 0.5 = 枠いっぱい(今まで通り)。 エリアの大きさは container query の単位(.st-efx が size container)。測り終わるまで絵は出さない(.efx-fit) */ .st-efx { container-type: size; --bvh: 1; --bvw: 1; --bb: 0; --bcx: 0.5; --boss-up: 24px; } /* --boss-up = 帯の上(ステージ名・⚙の行の真ん中の空き)へ上にはみ出してよい高さ。横長のボス戦(.st-bosswide)は 0 */ .st-bosswide .st-efx { --boss-up: 0px; } .st-efx .efx-art.boss, .st-efx-red.boss { --bh: calc(min((100cqh - 4px + var(--boss-up)) / var(--bvh), (100cqw - 8px) / (var(--bvw) * 0.6)) * var(--boss-scale)); } .st-efx.efx-fit .efx-art, .st-efx.efx-fit .st-efx-red { visibility: hidden; } .st-efx .efx-art.boss:not(.cut) { border-radius: 10px; } /* 背景つきのキャラの絵(仮の絵など)は四角のまま(輪・光の枠は付けない) */ .st-efx-red { position: absolute; height: calc(100% - 4px); aspect-ratio: 1 / 1; pointer-events: none; opacity: 0; background: var(--tint, rgb(255,30,40)); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .st-efx-red[hidden] { display: none; } .st-efx-red.boss { aspect-ratio: 3 / 5; height: var(--bh); margin-bottom: calc(var(--bh) * var(--bb) * -1); margin-left: calc(var(--bh) * 1.2 * (0.5 - var(--bcx))); align-self: flex-end; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: 50% 100%; mask-position: 50% 100%; } /* 赤い被せ物もボスの絵と同じ全身の形 */ .st-efx .efx-art.hit { animation: stEfxHit 0.22s ease-out; } .st-efx .efx-art.hitM { animation: stEfxHitM 0.26s ease-out; } .st-efx .efx-art.hitH { animation: stEfxHitH 0.3s ease-out; } .st-efx-red.hit { animation: stRedFlash 0.07s ease-out; } .st-efx-red.hitM { animation: stRedFlash 0.08s ease-out; } .st-efx-red.hitH { animation: stRedFlash 0.09s ease-out; } /* 着弾: 攻撃の色で 1 コマだけ塗って 60〜90ms で戻る */ .st-efx-red.down { animation: stRedDown 0.5s ease-in forwards; } .st-efx-red.st-efx-after { background: rgb(255,59,92); } .st-efx-red.st-efx-after.lunge { animation: stAfterImg 0.1s 0.04s ease-out both; } /* 敵の突進の残像: 1.12 倍の半透明の影(0.1 秒) */ @keyframes stAfterImg { 0% { opacity: 0.45; transform: scale(1.12); } 100% { opacity: 0; transform: translateY(8%) scale(1.12); } } @keyframes stRedDown { 0% { opacity: 0; background: var(--tint, #fff); } 40% { opacity: 1; background: #fff; } 100% { opacity: 0; background: #fff; } } /* 大技の放射線: 敵の後ろに属性色の 24 本(15 度おき)。200ms */ .st-efx-lines { position: absolute; left: 0; right: 0; top: -35%; bottom: -35%; pointer-events: none; opacity: 0; background: repeating-conic-gradient(from 0deg at 50% 55%, var(--lc, #fff) 0 2.6deg, transparent 2.6deg 15deg); -webkit-mask-image: radial-gradient(circle at 50% 55%, transparent 16%, #000 34%, transparent 66%); mask-image: radial-gradient(circle at 50% 55%, transparent 16%, #000 34%, transparent 66%); } .st-efx-lines.go { animation: stLines 0.2s ease-out; } @keyframes stLines { 0% { opacity: 0; transform: scale(0.75); } 35% { opacity: 0.85; } 100% { opacity: 0; transform: scale(1.18); } } .st-efx.jolt { animation: stEfxJolt 0.2s ease-out; } .st-efx .efx-art.lunge { animation: stEfxLunge 0.36s ease-out; } .st-efx .efx-art.in { animation: stEfxIn 0.45s ease-out; } .st-efx .efx-art.down { animation: stEfxDown 0.5s ease-in forwards; } /* 強化版(・強/・極/・超/・改)の印: WAVE の横に小さく */ .st-e-tier { display: inline-block; margin-left: 2px; padding: 0 5px; border-radius: 6px; font-size: 0.75rem; line-height: 1.5; color: #1a1030; background: linear-gradient(180deg, #ffe08a, #e9b440); vertical-align: 1px; } .st-e-tier[hidden] { display: none; } .st-daily .st-efx { display: none; } /* 着弾のずれ: 当たった向きと反対へ 6 / 8 / 10px(--kx・--ky は efx() が入れる)ずれて、ease-out で戻る */ @keyframes stEfxHit { 0% { transform: translate(var(--kx, 0px), var(--ky, -6px)); opacity: 0.85; } 100% { transform: none; } } @keyframes stEfxHitM { 0% { transform: translate(var(--kx, 0px), var(--ky, -8px)) scale(0.95); opacity: 0.8; } 100% { transform: none; } } @keyframes stEfxHitH { 0% { transform: translate(var(--kx, 0px), var(--ky, -10px)) scale(0.92); opacity: 0.75; } 55% { transform: translate(calc(var(--kx, 0px) * -0.2), calc(var(--ky, -10px) * -0.2)) scale(1.01); } 100% { transform: none; } } @keyframes stRedFlash { 0% { opacity: 0.75; } 100% { opacity: 0; } } @keyframes stRedFlashW { 0% { opacity: 0.4; } 100% { opacity: 0; } } .st-efx-red.wh.hit, .st-efx-red.wh.hitM, .st-efx-red.wh.hitH { animation-name: stRedFlashW; } /* 白い攻撃の塗りは 0.4 まで(2026-10-22) */ @keyframes stEfxJolt { 0% { transform: translateY(0); } 25% { transform: translateY(3px); } 55% { transform: translateY(-2px); } 100% { transform: none; } } @keyframes stEfxLunge { 0% { transform: none; } 35% { transform: translateY(10%) scale(1.12); } 100% { transform: none; } } @keyframes stEfxIn { from { opacity: 0; transform: scale(0.9); } } @keyframes stEfxDown { 0%, 40% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.96); } } /* 倒れる: 色で塗られている間(0.2 秒)は絵のまま、そのあと背景へ薄れる */ html.hd-reduce .st-efx img { animation: none; } html.hd-reduce .st-efx.jolt { animation: none; } html.hd-reduce .st-efx-red.hit, html.hd-reduce .st-efx-red.hitM, html.hd-reduce .st-efx-red.hitH { animation-duration: 0.1s; } html.hd-reduce .st-efx img.down { opacity: 0; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-efx img { animation: none; } html:not(.hd-motion) .st-efx.jolt { animation: none; } html:not(.hd-motion) .st-efx-red.hit, html:not(.hd-motion) .st-efx-red.hitM, html:not(.hd-motion) .st-efx-red.hitH { animation-duration: 0.1s; } html:not(.hd-motion) .st-efx img.down { opacity: 0; } } /* リーダー(リング枠)の目印: ロビーのカード・パーティー編成の枠・戦闘のメンバー */ .st-lead-tag { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 0.75rem; font-weight: 900; line-height: 1.35; letter-spacing: 0.04em; white-space: nowrap; color: #3a2200; background: linear-gradient(#ffe9a6, #ffbf4d); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), 0 1px 3px rgba(0,0,0,0.5); } .st-lbc .st-lead-tag { position: absolute; left: 50%; top: 5px; transform: translateX(-50%); z-index: 1; font-size: 0.75rem; } .st-mem .st-lead-tag { position: absolute; left: 3px; top: 1px; z-index: 3; width: 17px; height: 12px; padding: 0; overflow: hidden; border-radius: 0; font-size: 0; line-height: 0; color: transparent; box-shadow: none; clip-path: polygon(0 100%, 0 25%, 26% 60%, 50% 0, 74% 60%, 100% 25%, 100% 100%); pointer-events: none; } /* UI v3: リーダーの目印はカードの枠の中。せまいカード(横長)では金の冠だけ */ .st-roomy .st-mem .st-lead-tag { left: 4px; top: 4px; width: auto; height: auto; padding: 0 6px; overflow: visible; border-radius: 8px; font-size: 0.75rem; line-height: 1.4; color: #3a2200; clip-path: none; } /* 縦長のカードでは「リーダー」の文字の札(左上の角のタブ) */ .st-slot-ls, .st-pop-ls, .st-cf-ls { font-size: 0.75rem; color: #ffd98a; line-height: 1.35; } .st-pop-ls { margin-top: 3px; } .st-sh-sec.ls p { margin: 0; font-size: 0.8rem; color: #ffe2a0; } .st-vw-ls { margin: 3px 0 0; font-size: 0.78rem; font-weight: 700; color: #ffe2a0; } /* 戦闘の始まりの帯の3行目(リーダースキル)。あるときは帯を少し長く出す */ .st-banner .l { display: block; margin-top: 4px; font-size: 0.82rem; font-weight: 800; color: #ffe08a; text-shadow: 0 2px 0 rgba(0,0,0,0.7); } .st-banner .l:empty { display: none; } .st-banner.lead.show { animation-duration: 2.4s; } html.hd-reduce .st-banner.lead.show { animation-duration: 2.4s; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-banner.lead.show { animation-duration: 2.4s; } } .st-cf-ls { margin: 4px 0 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* v5: 1行(長ければ…) */ /* 下の操作ボタン(左・加速・右・回転・即落下)は出さない(オーナー指定 2026-10-06。操作はキーボード・スワイプ/タップ)。盤面の高さの計算は offsetHeight 0 になるだけ */ #controls { display: none; } /* 対戦中のメニュー(歯車1つ。一時停止・やり直し・設定・ロビーへをまとめる) */ .st-menuwrap { position: relative; } .st-menubtn { min-width: 40px; justify-content: center; font-size: 1.05rem; line-height: 1; } .st-menubtn[aria-expanded="true"] { border-color: rgba(190,205,255,0.8); background: rgba(120,140,255,0.28); } .st-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 168px; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 12px; background: rgba(14,18,64,0.96); border: 1px solid rgba(190,205,255,0.45); box-shadow: 0 6px 20px rgba(0,0,0,0.5); } .st-menu[hidden] { display: none; } .st-battle .st-menu .hd-btn.small.st-mi { min-height: 44px; width: 100%; justify-content: flex-start; text-align: left; padding: 8px 14px; font-size: 0.86rem; } .st-battle .st-menu .hd-btn.small.st-mi::before { content: none; } .st-menu .hd-gear-t { display: inline; } /* 新しい版の案内(上に出る小さなバナー。閉じられる。375px でも折り返して収まる) */ .st-upd { position: fixed; top: 8px; left: 50%; z-index: 12; transform: translateX(-50%); width: min(94vw, 440px); box-sizing: border-box; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 6px 6px 6px 14px; border-radius: 14px; background: linear-gradient(rgba(40,50,130,0.94), rgba(14,18,64,0.96)); border: 1px solid rgba(190,205,255,0.5); box-shadow: 0 6px 20px rgba(0,0,0,0.5); color: #eef1ff; } .st-upd[hidden] { display: none; } .st-upd-t { flex: 1 1 140px; font-size: 0.84rem; font-weight: 800; line-height: 1.4; } .st-upd .st-upd-go { flex: 0 0 auto; min-height: 44px; padding: 0 16px; } .st-upd-x { flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: #cfd6ff; font-size: 1.3rem; line-height: 1; cursor: pointer; } .st-upd-x:hover, .st-upd-x:focus-visible { background: rgba(255,255,255,0.12); color: #fff; } /* ======================================================================== ロビー(モンスト風の1画面) 上の帯 / 真ん中にリーダー(右のふちに縦のアイコン)/ 出撃の段 / いちばん下のタブ。どの高さでも、ページはスクロールしない: 全体 = 画面の高さ(dvh)・真ん中(.st-hero)だけが伸び縮みして、リーダーの絵の大きさがそれに合わせて変わる */ .st-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } body.st-in-lobby { overflow: hidden; } /* ゲームの全画面: サイトのヘッダー(UAJ Studio のロゴ・アカウント)は出さない(アカウント・ログアウトは ≡ メニューの中、画面の移動は下のタブ) */ .site-header { display: none; } body.st-in-lobby .hd-page { max-width: 480px; height: 100vh; height: 100dvh; padding: 0 10px; } .st-lobby:not([hidden]) { display: flex; flex-direction: column; height: 100%; padding-top: env(safe-area-inset-top, 0px); } #stLobbyBody:not([hidden]) { flex: 1 1 0; min-height: 0; width: 100%; display: flex; flex-direction: column; } .st-lobby .st-note { margin: 4px 2px; } /* オープニング(タイトル画面。stella-opening.js・docs/specs/stella-opening.md)。画面いっぱいの固定の層(サイトのヘッダー・ダイアログの下・読み込みの失敗の案内の上)。 動画は高さいっぱい・中央(.op-vwrap)。縦長の画面は左右が切れる(object-fit: cover)/ 横長の画面は左右に side.webp。ロゴ・下のエリアはこの上に重ねる */ .st-title { display: none !important; } /* 旧タイトル画面(オープニングに置き換え)。show('stTitle') の受け皿だけ */ .op { position: fixed; inset: 0; z-index: 50; overflow: hidden; background: #05061a; color: #fff; touch-action: manipulation; -webkit-user-select: none; user-select: none; } .op[hidden] { display: none; } /* 切り抜き用の入れ物(stella-opening.js が中身を包む)。ふだんは何もしない。切り替えの間だけ JS が回して動かす(transform だけ = 描き直さない) */ .op-pivot, .op-clip, .op-inner, .op-stage { position: absolute; inset: 0; } .op-stage { background: #05061a; } .op.op-wipe { background: transparent; } .op-side { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; } .op-vwrap { position: absolute; top: 0; bottom: 0; left: 50%; height: 100%; max-width: 100%; aspect-ratio: 720 / 1196; transform: translateX(-50%); overflow: hidden; } .op-poster, .op-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .op-video { background: transparent; } .op-logo { position: absolute; left: 50%; top: 22%; width: 70%; margin: 0; transform: translate(-50%, -50%); opacity: 0; transition: opacity 1.5s linear; pointer-events: none; } .op.op-logo-in .op-logo { opacity: 1; } .op.op-logo-fast .op-logo { transition-duration: 0.35s; } /* 待ちをタップで飛ばした */ .op-logo:focus { outline: none; } /* 出たときに h1 へフォーカスを移すだけ(読み上げ用)。枠は出さない */ .op-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.55)); } .op-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none; background: linear-gradient(rgba(5, 6, 26, 0), rgba(5, 6, 26, 0.62)); } /* 下のエリア(画面の高さの 86〜90% あたりを中心に、下の端から) */ .op-bottom { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 7%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 16px; pointer-events: none; } .op-bottom > * { pointer-events: auto; } /* 作品の注記(フィクション。小さく目立たせない。タイトル画面の一番下) */ .op-fiction { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); margin: 0; padding: 0 14px; text-align: center; font-size: 0.64rem; line-height: 1.35; color: rgba(214, 224, 255, 0.55); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); pointer-events: none; z-index: 1; } .op-boot, .op-login { display: none; } .op.op-show-progress .op-boot { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(300px, 80vw); } .op.op-show-login .op-login { display: flex; animation: opFadeIn 0.5s ease-out both; } .op .st-title-btns { flex-direction: column; gap: 12px; width: min(340px, 88vw); margin: 0; } .op .st-title-btn { width: 100%; min-height: 52px; font-size: 1rem; } .op .st-note { margin: 0; text-align: center; font-size: 0.85rem; color: #dfe4ff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); } .op .st-boot-bar { position: relative; left: auto; right: auto; bottom: auto; width: 100%; } .op .st-boot-btns { margin: 0 auto; } /* TAP / CLICK TO START: 画面全体を覆う本物のボタン(Enter / Space でも押せる)。文字だけ下のほうで、ゆっくり点滅 */ .op-start { position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } .op-start[hidden] { display: none; } .op-start-t { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 9%); transform: translateX(-50%); white-space: nowrap; padding: 4px 0 4px 0.24em; text-align: center; font-family: var(--st-font-head, 'Cinzel', serif); font-size: clamp(1.05rem, 4.4vw, 1.5rem); font-weight: 700; letter-spacing: 0.24em; color: #fff4cf; text-shadow: 0 0 14px rgba(255, 214, 120, 0.7), 0 2px 8px rgba(0, 0, 0, 0.9); animation: opBlink 2.6s ease-in-out infinite; } .op-start:focus { outline: none; } .op-start-t::after { content: ''; position: absolute; inset: -6px -14px -6px -12px; border: 1.5px solid rgba(255, 244, 207, 0.85); border-radius: 8px; box-shadow: 0 0 12px rgba(255, 214, 120, 0.45), inset 0 0 10px rgba(255, 214, 120, 0.2); pointer-events: none; } /* 枠: 文字と同じ色・同じ光(文字と一緒に点滅する)。10-17 オーナー */ .op-start:focus-visible .op-start-t::after { border-width: 2px; border-color: #fff4cf; } /* 音のボタン(右上。アイコンだけ・44px) */ .op-snd { position: absolute; z-index: 2; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 10px; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(10, 12, 40, 0.5); color: #fff4cf; cursor: pointer; } .op-snd:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; } .op-snd .x { display: none; } .op-snd.off .w { display: none; } .op-snd.off .x { display: inline; } @keyframes opBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } @keyframes opFadeIn { from { opacity: 0; } to { opacity: 1; } } /* 羽根の切り替え: 羽根は別の層(transform だけを動かす)。オープニング本体は mask-image で切り抜く(stella-opening.js) */ .op-feathers { position: fixed; inset: 0; z-index: 51; overflow: hidden; pointer-events: none; } .op-feathers img { position: absolute; width: 566px; height: 1400px; max-width: none; transform-origin: 50% 50%; will-change: transform; transform: translate3d(-9999px, 0, 0); } body.st-opening-wipe .op { pointer-events: none; } .op.op-black .op-vwrap, .op.op-black .op-side, .op.op-black .op-shade, .op.op-black .op-bottom, .op.op-black .op-snd, .op.op-black .op-fiction { visibility: hidden; } /* オープニングが出ている間: 読み込みの失敗・ゲームの更新などの案内(ダイアログ・知らせ)はオープニングより上 */ body.st-opening .st-claim, body.st-opening .st-dlg-bg, body.st-opening .st-toast { z-index: 120; } body.st-opening { overflow: hidden; } html.hd-reduce .op-start-t { animation: none; } html.hd-reduce .op-logo { transition-duration: 0.01s; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .op-start-t { animation: none; } } /* お知らせ(ページを開くたび最初に 1 回。stella-opening.js が作る。ダイアログの見た目は .st-dlg を使う。OK がスマホでの最初の操作 = 閉じるとタイトルの曲が始まる) */ .op-notice-bg { animation: opFadeIn 0.25s ease-out both; } .op-notice { width: min(380px, 100%); } .op-notice .op-notice-h { font-weight: 800; font-size: 0.95rem; line-height: 1.5; text-align: center; overflow-wrap: anywhere; } .op-notice .st-dlg-p { overflow-wrap: anywhere; } .op-notice .op-notice-more { margin: 2px 0 0; text-align: center; } .op-notice-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 16px; color: #ffe08a; font-weight: 700; text-decoration: none; border: 1px solid rgba(255, 224, 138, 0.55); border-radius: 12px; background: rgba(255, 224, 138, 0.08); } /* 下線は使わない(このCSSの決まり)。枠で押せると分かるように */ .op-notice-link:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; border-radius: 8px; } .op-notice .st-dlg-btns { padding-top: 4px; } .op-notice .st-dlg-btns .hd-btn { min-height: 48px; } html.hd-reduce .op-notice-bg { animation: none; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .op-notice-bg { animation: none; } } /* 上の帯 */ .st-topbar { flex: none; display: flex; align-items: stretch; gap: 8px; margin: 6px 0 0; padding: 4px 10px; border-radius: 14px; background: var(--st-glass); border: 1px solid var(--st-line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .st-tb-l { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; } /* 上の帯は低く(2026-10-30 オーナー: コンパクトに。情報はそのまま。文字は 12px 以上) */ .st-tb-l .st-hud { margin: 0; flex-wrap: nowrap; } .st-tb-l .st-hud-i { flex: 1 1 auto; width: 100%; padding: 0; background: none; border: 0; font-size: 0.9rem; line-height: 1.1; } .st-tb-l .st-hud-i small { font-size: 0.75rem; } .st-tb-l .st-hud-i b { font-size: 1.05rem; } .st-tb-l .st-lv-bar { flex: 1 1 auto; width: auto; height: 6px; border-radius: 3px; } .st-topbar .st-stamina:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; padding: 0; background: none; border: 0; font-size: 0.75rem; } .st-topbar .st-stamina .st-sta-t { line-height: 1.2; overflow-wrap: anywhere; } .st-topbar .st-stamina .st-sta-bar { flex: none; width: 100%; height: 6px; min-width: 0; } .st-topbar .st-stamina .hd-btn { display: none; } /* スターミンは「持ち物」から使う(足りないときは出撃のときに案内) */ .st-tb-r { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 3px; margin: 0; } .st-tb-r .st-hud-i { min-width: 96px; justify-content: flex-end; padding: 1px 10px 1px 3px; font-size: 0.9rem; line-height: 1.1; } .st-tb-r .st-item-ico { width: 18px; height: 18px; } .st-tb-r .st-hud-i:not(:has(img)) { padding-left: 10px; } .st-tb-r .st-hud-i small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* 名前は読み上げだけ(絵で分かる) */ .st-tb-r .st-hud-i b { margin-left: auto; font-size: 1rem; line-height: 1.1; } /* 真ん中: リーダー(大)・あとの2体(小)・右のふちの縦のアイコン */ .st-hero { position: relative; flex: 1 1 0; min-height: 120px; container-type: size; } .st-lb-party { --lead-h: 34vh; position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } @supports (height: 1cqh) { .st-lb-party { --lead-h: max(110px, min(calc(100cqh - 34px), 100cqw)); } /* 正面のカードの高さ = 真ん中の高さ(HPの行の分を引く)・幅いっぱいを超えない */ } .st-lb-party .st-car { flex: none; width: 100%; } /* 後ろのカードは余白(ページの左右の詰め物)で切らず、ページの端まで出す。切るのはページの端(スマホ = 画面の端、PC = 中央の列の端) */ .st-lb-party .st-car-ring { overflow-x: visible; } body.st-in-lobby .hd-page { overflow-x: clip; } .st-lb-party .st-car-ring { height: calc(var(--lead-h) + 8px); padding: 4px 0; isolation: isolate; } /* isolate: カードの z-index が右のアイコンより上に出ない */ .st-lb-party .st-car-i { aspect-ratio: auto; width: calc(var(--lead-h) * 0.6); height: var(--lead-h); } /* 横のカードにも、枠のアイコン・★・名前・Lv を出す(カードごと小さくなる。正面になったときに急に出る・大きさが変わることがないように。2026-10-24)。★の大きさは .st-stars の整数の px のまま */ .st-lb-party .st-car-i .nm { font-size: 0.95rem; } .st-lbc .ttl { font-size: 0.75rem; font-weight: 700; line-height: 1.2; color: #ffe2a0; text-shadow: 0 1px 3px #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-lb-party .st-car-i .ttl { font-size: 0.78rem; } /* 肩書は正面だけ。display ではなく透明度で出し入れ(0.2秒)。行の高さは残るので、名前の位置は動かない */ .st-lb-party .st-car-i .ttl { transition: opacity 0.2s ease; } .st-lb-party .st-car-i:not(.front) .ttl { opacity: 0; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-lb-party .st-car-i .ttl { transition: none; } } html.hd-reduce .st-lb-party .st-car-i .ttl { transition: none; } .st-lb-hp { flex: none; grid-column: auto; margin: 0; font-size: 0.75rem; line-height: 1.2; } .st-lb-hp b { font-size: 0.85rem; } .st-lb-none { position: relative; max-width: 80%; } .st-lb-side { position: absolute; right: 0; top: 6px; z-index: 5; display: flex; flex-direction: column; gap: 8px; } .st-lb-sideL { right: auto; left: 0; } /* 左のふち(ランキング。右の列の鏡。2026-11-03) */ .st-ib { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 44px; min-height: 44px; padding: 0; font: inherit; color: #eef1ff; cursor: pointer; background: none; border: 0; touch-action: manipulation; } /* 丸 = 紺の地 + 金の縁(ミッション/コレクションのプレートと同じ作り)。中のアイコンは金の塗り(docs/specs/stella-icons.md) */ .st-ib-c { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid transparent; background: radial-gradient(circle at 50% 30%, #2b3586 0, #121749 62%, #0a0d33 100%) padding-box, linear-gradient(#fff3b8, #dba43a 48%, #8a5a14) border-box; box-shadow: inset 0 1px 0 rgba(255,244,190,0.45), inset 0 -2px 0 rgba(0,0,0,0.35), 0 3px 8px rgba(0,0,0,0.5), 0 0 12px rgba(255,200,90,0.18); transition: transform 0.08s; } .st-ib-c svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 1px rgba(60,30,0,0.6)); } .st-ib-t { max-width: 66px; letter-spacing: 0; font-size: 0.75rem; font-weight: 800; line-height: 1.2; white-space: nowrap; color: #ffe9a8; text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.8); } .st-ib:hover .st-ib-c { filter: brightness(1.18); } .st-ib:active .st-ib-c { transform: translateY(1px) scale(0.96); } .st-ib:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; border-radius: 12px; } .st-ib[hidden] { display: none; } .st-ib .st-gift-badge { top: -5px; right: -5px; } .st-cal-btn { color: #ffe08a; } .st-lb-pop { position: absolute; right: 54px; top: 6px; z-index: 6; min-width: 196px; max-width: calc(100% - 64px); padding: 6px; border-radius: 14px; background: rgba(12,15,52,0.97); border: 1px solid rgba(190,205,255,0.5); box-shadow: 0 8px 26px rgba(0,0,0,0.55); } .st-lb-pop[hidden] { display: none; } .st-pop-i { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; font: inherit; font-size: 0.88rem; font-weight: 700; color: #eef1ff; text-align: left; text-decoration: none; cursor: pointer; background: none; border: 0; border-radius: 10px; } .st-pop-i:hover { background: rgba(120,140,255,0.2); } .st-pop-i:focus-visible { outline: 3px solid #ffd166; outline-offset: -3px; } .st-pop-acct { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--st-line); } .st-pop-acct:empty { display: none; } .st-pop-name { padding: 4px 12px; font-size: 0.75rem; color: #aab4e6; overflow-wrap: anywhere; } /* 出撃の段: 真ん中に六角形の出撃・左 ミッション・右 図鑑 */ .st-actions { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 8px; padding: 12px 0 4px; } .st-actions .st-menu-btn { width: 100%; max-width: 108px; min-height: 64px; } .st-actions #stMenuMission { justify-self: start; } .st-actions .st-sortie { width: clamp(108px, 33vw, 128px); aspect-ratio: 627 / 720; min-height: 0; margin: 0; padding: 4px; border-radius: 0; gap: 0; } /* 六角形の絵(尖った頂点が上下)の縦横比に合わせる */ .st-actions .st-sortie .t { font-size: 1.7rem; letter-spacing: 0.08em; padding-left: 0.08em; } .st-actions .st-sortie small { display: none; } .st-actions .st-sortie-chip { top: auto; bottom: 2px; right: auto; left: 50%; transform: translateX(-50%); white-space: nowrap; } /* いちばん下のタブ */ /* 下のタブ: 戦闘のほかの全画面で、画面の下に固定(JS が起動時に body の直下へ移す)。戦闘・ガチャの演出・ダイアログ・全画面の表示のあいだは隠す */ .st-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; width: 100%; max-width: 760px; margin: 0 auto; box-sizing: border-box; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)); background: rgba(8,10,40,0.98); border-top: 1px solid var(--st-line); } .st-tabbar[hidden] { display: none; } body.st-in-lobby .st-tabbar { max-width: 480px; } /* 画面の上の広告(スマホだけ。site-ads.js・docs/specs/site-ads-imobile.md)。セーフエリア(上)+ 320x50 の広告(ぴったり。上に空きの帯は作らない)+ 細い下線(box-shadow なので高さに入らない)。 「広告」などの文字は出さない。下のメニューのすぐ隣には置かない(誤クリックを招くため)。メニューは元どおり bottom:0。 広告の高さ分だけ、画面の中身を下げる(--st-adt。ない = 0 = 今までどおり)。--st-adt は html.ad-sp(site-ads.js が付ける)と、下のメニューが出る画面(body.st-has-tb)のときだけ。戦闘・読み込めなかったときは付かない。 ダイアログ・シートの間は広告だけ隠れ、--st-adt は残す(幕の裏で中身が上下に動かない。下のメニューの --st-tb も同じ) */ html.ad-sp { --st-adh: 50px; } html.ad-sp body.st-has-tb { --st-adt: calc(var(--st-adh) + env(safe-area-inset-top, 0px)); } /* 広告の出し入れは site-ads.js が付ける html.ad-sp に頼る(:where = 詳しさを増やさない。下の「隠す」ルールのほうが後ろで勝つ)。読めなかったときは何も出ない。 z-index は 6: それより上の全画面の幕・ダイアログ・シート・お知らせ(7 以上)が広告の上に重なり、広告を押せなくする */ :where(html.ad-sp) body.st-has-tb .st-adbar { display: flex; } /* 戦闘(スマホ)も上の広告を出す(2026-10-30 オーナー: 全体を少し詰めれば出したままにできる)。盤・パーティー・ボタンの大きさは変えず、広告の分(50px + 8px)は敵の絵の帯から取る。 帯が最小(hexdrop.js EFX_MIN)でも盤が幅いっぱいの大きさで入る高さのときだけ、hexdrop.js layout が body.st-bt-ad を付ける(足りない短い画面では戦闘の間だけ出さない)。 ここは下の「戦闘では隠す」より詳しいので勝つ。ダイアログ・シートの間に隠すルール(同じ詳しさ・後ろ)には負ける = 幕の間は広告だけ隠れ、中身の位置はそのまま */ :where(html.ad-sp) body.st-in-battle.st-bt-ad .st-adbar { display: flex; } html.ad-sp body.st-in-battle.st-bt-ad .hd-page { padding-top: calc(var(--st-adh) + env(safe-area-inset-top, 0px) + 8px); } body .st-adbar { z-index: 6; top: 0; bottom: auto; padding: env(safe-area-inset-top, 0px) 0 0; min-height: calc(var(--ad-h, 50px) + env(safe-area-inset-top, 0px)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); } /* 下の線(枠線にしない = 高さがセーフエリア+広告ちょうど) */ body.st-opening .st-adbar { display: none; } /* タイトル画面(オープニング)の間は出さない = 見えない裏で広告を読まない */ body.st-in-lobby .st-adbar { max-width: 480px; } body.st-in-battle :is(.st-tabbar, .st-adbar), body:has(.st-sheet-bg:not([hidden]), .st-dlg-bg:not([hidden]), .st-rv:not([hidden]), .st-claim:not([hidden]), .st-rw:not([hidden]), .st-lvfx, .st-vw:not([hidden]), .hd-settings:not([hidden])) :is(.st-tabbar, .st-adbar) { display: none; } /* タブの分の余白(隠れないように): ロビーは下を空ける・ほかの画面は一番下に足す。売るバーなど下に張り付くものは、タブの上に積む */ body.st-has-tb { --st-tb: calc(61px + env(safe-area-inset-bottom, 0px)); } /* 上の広告の分、画面の中身を下げる: ロビーは上の余白(ステータスの帯と 8px 以上あける)・ほかの画面は .hd-page の上の余白・全画面の地図は上の端 */ html.ad-sp body.st-has-tb .st-lobby:not([hidden]) { padding-top: calc(var(--st-adt) + 4px); } html.ad-sp body.st-has-tb:not(.st-in-lobby) .hd-page { padding-top: calc(var(--st-adt) + 8px); } html.ad-sp body.st-has-tb .st-tree.st-tr-full { top: var(--st-adt); } html.ad-sp body.st-has-tb .st-tr-strip { top: 8px; } body.st-has-tb .st-lobby:not([hidden]) { padding-bottom: var(--st-tb); } body.st-has-tb:not(.st-in-lobby) .hd-page { padding-bottom: calc(var(--st-tb) + 24px); } body.st-has-tb .st-sellbar { bottom: var(--st-tb); padding-bottom: 8px; } body.st-has-tb.st-selling .st-page { padding-bottom: calc(var(--st-tb) + 130px); } body.st-has-tb .st-toast { bottom: calc(var(--st-tb) + 10px); } body.st-has-tb.st-selling .st-toast { bottom: calc(var(--st-tb) + 150px); } .st-tbb { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; padding: 2px 0; font: inherit; font-size: 0.75rem; font-weight: 800; color: #aab4e6; cursor: pointer; border-radius: 12px; background: none; border: 1px solid transparent; touch-action: manipulation; } /* アイコンは手描きの金グラデーションの塗りSVG(docs/specs/stella-icons.md)。選択中 = 明るい金+やわらかい光、非選択 = 彩度と明るさを落とした金 */ .st-tbb .ic { display: inline-flex; font-size: 1.2rem; line-height: 1; color: #8f9bd6; } .st-tbb .ic svg { width: 24px; height: 24px; opacity: 0.58; filter: saturate(0.45) brightness(0.9); } .st-tbb:hover { color: #fff; } .st-tbb:focus-visible { outline: 3px solid #ffd166; outline-offset: -2px; } .st-tbb.on { color: #ffe08a; text-shadow: 0 0 8px rgba(255,214,120,0.55); background: linear-gradient(rgba(91,123,255,0.34), rgba(65,89,214,0.2)); border-color: rgba(190,205,255,0.55); box-shadow: 0 0 12px rgba(100,130,255,0.35); } .st-tbb.on .ic { color: #ffe08a; } .st-tbb.on .ic svg { opacity: 1; filter: drop-shadow(0 0 5px rgba(255,214,120,0.75)); } .st-tbb[hidden] { display: none; } /* 低い画面(小さな電話・横向き): 出撃・タブ・上の帯を少しずつ小さく。絵(.st-hero)がいちばん先に縮むので、ページは伸びない */ @media (max-height: 700px) { .st-topbar { margin-top: 4px; padding: 4px 8px; } .st-tb-l { gap: 3px; } .st-actions { padding: 10px 0 2px; } .st-actions .st-sortie { width: clamp(92px, 27vw, 108px); } .st-actions .st-sortie .t { font-size: 1.4rem; } .st-actions .st-menu-btn { min-height: 56px; } .st-tbb { min-height: 48px; } body.st-has-tb { --st-tb: calc(57px + env(safe-area-inset-bottom, 0px)); } .st-tbb .ic { font-size: 1.05rem; } .st-tbb .ic svg { width: 21px; height: 21px; } } @media (max-height: 560px) { .st-lb-side { gap: 4px; } .st-tbb { min-height: 44px; } body.st-has-tb { --st-tb: calc(53px + env(safe-area-inset-bottom, 0px)); } .st-tbb .ic { display: none; } } /* ---- 戦闘は1画面に収める(スクロールなし): サイトのヘッダーを隠し、余白を詰める。盤・敵の絵の大きさは hexdrop.js layout() が見えている高さから決める ---- */ body.st-in-battle .hd-page { padding-top: max(4px, env(safe-area-inset-top, 0px)); padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); } body.st-in-battle .st-bhead { margin-bottom: 0; flex-wrap: nowrap; } body.st-in-battle .st-bhead .hd-title { flex: 1 1 auto; } body.st-in-battle .st-stage.hd-stage { gap: 4px; } body.st-in-battle .st-e-buffs { max-height: 44px; overflow: hidden; padding: 4px; margin: -4px; } /* padding = 毒のアイコンが弾んで少し大きくなっても切れない余白(位置は margin で打ち消す) */ /* 状態アイコンが多くても、下の盤を押し下げない(絶対配置のうえ高さを制限) */ @media (max-height: 700px) { body.st-in-battle .st-e-foot { padding-top: 0; } #stBelow { gap: 4px; } } /* ============================ 2026-10-08: ロック・検索・プリセット・ボックスの拡張 ============================ */ .st-ut .st-lk { position: absolute; right: 2px; bottom: 30px; font-size: 0.75rem; line-height: 1; padding: 1px 2px; border-radius: 4px; background: rgba(0,0,24,0.75); pointer-events: none; } .st-search { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; min-width: 0; } .st-search-in { width: 100%; box-sizing: border-box; min-width: 0; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(160,180,255,0.4); background: rgba(0,0,24,0.6); color: #fff; font-size: 0.85rem; } .st-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; } .st-search-g { flex-wrap: wrap; } .st-bxe-c { justify-content: center; margin: 8px 0; } /* ============================ 2026-10-08: 攻撃の予告・全消し(RULES_VERSION 14) ============================ */ .st-cd:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; } .st-cd.soon { background: rgba(120,60,0,0.55); } .st-cd.soon b { color: #ffd08a; } .st-cd.soon .st-cd-ring .fg { stroke: #ffb04a; } .st-cd-tip { position: absolute; z-index: 20; pointer-events: auto; width: max-content; max-width: min(260px, calc(100vw - 32px)); padding: 6px 8px; border-radius: 8px; background: rgba(8,10,40,0.96); border: 1px solid rgba(160,180,255,0.5); box-shadow: 0 4px 14px rgba(0,0,0,0.6); text-align: left; font-size: 0.75rem; line-height: 1.4; color: #e8ecff; cursor: default; } .st-cdt-h { display: block; margin-bottom: 2px; color: #ffe9a6; } .st-cdt-l { margin: 0; padding: 0; list-style: none; } /* 行頭は、効果のアイコン(バッジの丸と同じ) */ .st-cdt-l li { display: flex; align-items: center; gap: 6px; margin: 2px 0; } .st-cdt-l .st-cd-ic { width: 16px; height: 16px; flex: none; } .st-cdt-l .st-cdt-est { color: #ffb3c0; font-weight: 700; } #boardWrap.st-edge-warn { box-shadow: inset 0 0 0 2px rgba(255,80,100,0.55), 0 0 14px rgba(255,60,90,0.45); border-radius: 10px; } #boardWrap.st-allclear { box-shadow: 0 0 0 3px rgba(255,240,170,0.9), 0 0 32px rgba(255,230,140,0.85); border-radius: 10px; animation: stAllClear 1.1s ease-out; } @keyframes stAllClear { 0% { box-shadow: 0 0 0 0 rgba(255,240,170,0), 0 0 0 rgba(255,230,140,0); } 25% { box-shadow: 0 0 0 4px rgba(255,240,170,1), 0 0 44px rgba(255,230,140,1); } 100% { box-shadow: 0 0 0 0 rgba(255,240,170,0), 0 0 0 rgba(255,230,140,0); } } html.hd-reduce #boardWrap.st-allclear { animation: none; } /* ============================ 2026-10-12 UI 点検 第1弾(見た目・配置はそのまま。押した感触・押しやすさ・読みやすさ・主ボタンの色) ============================ */ /* (1) 押した感触: 押している間だけ少し縮めて暗くする(約80ms)。押せないボタン・transform で位置や動きを決めているもの(詳細ボタン・カルーセル・ガチャのカード)は縮めず、暗くするだけ。 * 動きを減らす設定では縮めない(--st-press: 1) */ html { --st-press: 0.96; } html.hd-reduce { --st-press: 1; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) { --st-press: 1; } } button:not(:disabled):not([aria-disabled="true"]):not(.st-detail):not(.st-grow):not(.st-car-i):not(.hd-pad):not(.site-header *):not(.st-lb-party *):active { transform: scale(var(--st-press)); filter: brightness(0.88); transition: transform 80ms ease-out, filter 80ms ease-out; } button.st-detail:not(:disabled):active, button.st-grow:not(:disabled):active, button.st-car-i:active { filter: brightness(0.88); } /* (9) 主ボタンは金の板に統一(2026-10-24: オレンジから変更。下の UI v2 ボタンの段階)。青は「選んでいる」状態(タブ・絞り込みのチップ)だけ。コンティニュー(紫)は別の意味なのでそのまま。 * ★5確定ガチャ(チケット)は持っているときだけ出て、そのとき 10連 は副になる(ふつうの主ボタンの金の板と同じ。専用の金の色は無し) */ /* ============================ UI v2 ボタンの段階(W2) ============================ 主(.primary): 1画面・1ダイアログに最大1つ。金の板(縦のグラデーション + 下の2px影)、押すと1px沈んで少し暗く、キーボードの輪は白(金の上では金の輪が消える) 副(.secondary): 濃紺 + 金の細い縁 / 3番目(.tertiary): 枠なしの文字 / 危険(.danger): 赤の縁 .ghost は副の別名(旧クラス)、.st-back(もどる・ロビーへ)は3番目として描く */ .hd-btn { border-radius: var(--st-r-l); } .hd-btn.small { border-radius: var(--st-r-s); } .hd-btn.primary, .st-rv-btns:has(#stRvAgain[hidden]) #stRvBack { color: var(--st-plate-text); font-weight: 800; letter-spacing: 0.06em; text-shadow: 0 1px 0 rgba(255,250,220,0.5); background: var(--st-plate); border: 1px solid var(--st-plate-edge); box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -2px 0 rgba(120,70,10,0.35), 0 2px 0 var(--st-plate-base), 0 4px 12px rgba(0,0,0,0.45), 0 0 14px rgba(255,210,100,0.22); } .hd-btn.primary:not(:disabled):not([aria-disabled="true"]):active, .st-rv-btns:has(#stRvAgain[hidden]) #stRvBack:active { transform: translateY(1px) !important; background: var(--st-plate-down); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 0 rgba(120,70,10,0.35), 0 1px 0 var(--st-plate-base), 0 2px 8px rgba(0,0,0,0.45); } .hd-btn.primary:focus-visible, .st-rv-btns:has(#stRvAgain[hidden]) #stRvBack:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* 副ボタンの形(2026-10-24): ロビーの横ボタン・ミッションと同じ「濃紺 + 金の縁」。位置・大きさ・形は各ボタンのまま、色と縁だけをここで決める。 使う: 副(.secondary / .ghost)・詳細/育成(.st-dbtn)・提供割合(.st-gc-minibtn)・ページの矢印(.st-cf-arrow)・＋/最大(.st-step/.st-max)・ダイアログとシートの閉じる(.tertiary)。 状態: 押す = 全ボタン共通の縮み(UI 点検 第1弾)/ 選んでいる(.on / aria-pressed) = 金の色づけ + 明るい縁 / 押せない = 下の B1(金にしない) / キーボード = 黄色の輪(各ボタン) */ .hd-btn.secondary, .hd-btn.ghost:not(.st-back):not(.st-mi):not(.st-menubtn), #stGacha:has(#stPullT:not([hidden])) #stPull10, .st-dbtn, .st-gc-minibtn, .st-cf-arrow, .st-step, .st-max, #stDlgBtns .hd-btn.tertiary, #stSheetClose, #settingsDone { color: var(--st-sub-text); font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.8); border: var(--st-sub-bw) solid transparent; border-radius: var(--st-r-s); background: var(--st-sub-fill) padding-box, var(--st-sub-rim) border-box; box-shadow: var(--st-sub-shadow); } .st-dbtn:hover, .st-gc-minibtn:hover, .st-cf-arrow:hover, .st-step:hover, .st-max:hover { filter: brightness(1.18); } .st-detail { --st-sub-bw: 1px; } /* カードの上の小さな「詳細」の札は細い縁 */ .hd-btn.secondary.on, .hd-btn.secondary[aria-pressed="true"], .st-fsbtn.on { color: #fff; background: var(--st-sub-on-fill) padding-box, var(--st-sub-on-rim) border-box; box-shadow: inset 0 1px 0 rgba(255,244,190,0.5), inset 0 -3px 0 rgba(0,0,0,0.3), 0 3px 8px rgba(0,0,0,0.5), 0 0 14px rgba(255,214,120,0.5); } .hd-btn.tertiary, .hd-btn.st-back { color: #cdd5f7; font-weight: 700; background: none; border-color: transparent; box-shadow: none; text-decoration: none; } .hd-btn.tertiary:hover, .hd-btn.st-back:hover { filter: none; color: #fff; text-decoration-color: currentColor; } .hd-btn.danger { color: var(--st-red-soft); font-weight: 700; text-shadow: none; background: linear-gradient(180deg, rgba(100,22,44,0.6), rgba(44,8,26,0.8)); border: 1px solid var(--st-red); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,30,0.45); } .hd-btn.secondary:disabled, .hd-btn.danger:disabled { box-shadow: none; } .hd-btn.tertiary:disabled { text-decoration: none; } /* ============================ UI v2 パネルの標準(W2) ============================ 角丸 12 / 16、大事なパネルの上辺に金の細い線、背景は濃いガラス + ぼかし(長い一覧のタイルにはぼかしを使わない) */ .st-stage-card, .st-dg-card, .st-gift, .st-lvp, .st-ms, .st-dex-sum, .st-claim-in, .st-dlg, .st-sheet, .st-upd, .st-lvfx .box { border-radius: var(--st-r-l); } .st-slot, .st-it, .st-cal-d, .st-dg-lv, .st-dex-c, .st-stat { border-radius: var(--st-r-s); } .st-stage-card, .st-dg-card, .st-gift, .st-lvp, .st-ms, .st-dex-sum, .st-claim-in, .st-dlg, .st-sheet, .st-upd { border-top: 1px solid var(--st-gold-line); } .st-dg-card, .st-gift, .st-lvp, .st-ms, .st-dex-sum { -webkit-backdrop-filter: blur(var(--st-blur)); backdrop-filter: blur(var(--st-blur)); } .st-dlg, .st-sheet, .st-claim-in, .st-upd { background: linear-gradient(rgba(18,22,76,0.92), rgba(5,7,30,0.95)); -webkit-backdrop-filter: blur(var(--st-blur)); backdrop-filter: blur(var(--st-blur)); } .st-dlg-title { font-size: 1.3rem; font-weight: 800; letter-spacing: 0.04em; } .st-ms.all { background: var(--st-panel-bg); } .st-ms.all .st-ms-name { color: var(--st-gold-soft); } /* 緑・紫は使わない(緑 = HPだけ): クリア済み = 金のチェック帯、受け取り済み = 金 */ .st-stage-card.cleared, .st-dg-card.cleared { border-color: var(--st-line); border-top-color: var(--st-gold-line); } .st-stage-card.cleared .st-sc-state, .st-dg-lv.cleared .st-dg-s { color: var(--st-gold); } .st-sc-state { color: #dfe6ff; } .st-dg-lv.cleared { box-shadow: inset 0 0 0 1px rgba(242,193,78,0.5); } .st-pv-lv b.up, .st-pv-s b.up, .st-lvfx .lv b { color: var(--st-gold-soft); } .st-rw-burst .lv { color: var(--st-gold-soft); text-shadow: 0 0 10px rgba(255,209,102,0.8); } /* 画面の切り替え: 160ms の 8px のスライドだけ(戦闘の画面は盤面の測定があるので除く。動きを減らす設定では止める)。 2026-10-23: 透明(opacity 0)からのフェードはやめた。切り替えの直後に重い描画(一覧のタイル・絵のデコード)が続くと、スマホでは透明に近いまま数百ms 止まり、 「何も出ていない画面」が一瞬見えていたため(4倍の CPU 制限の計測: キャラの一覧・パーティーで 200〜330ms 空の画面)。中身は最初のフレームから見える */ @keyframes stScreenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes stScreenSlide { from { transform: translateY(8px); } to { transform: none; } } .st-screen:not(.st-battle):not([hidden]) { animation: stScreenSlide var(--st-screen-in) ease-out backwards; } html.hd-reduce .st-screen { animation: none !important; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-screen { animation: none !important; } } /* ============================ /UI v2 (W2) ============================ */ /* ============================ UI v3 (R4): 持ち物のタイル・ガチャ/ミッションの余白・設定パネル・パネルの背景 ============================ */ /* 持ち物: 3列のタイル(絵 + 個数 + 小さい名前)。個数0は薄くするだけ(押せないボタンは出さない)。選んだタイル = 金の枠。説明は、その行の下に横いっぱいで開く */ .st-items { display: block; } .st-itg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; } .st-itt { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; min-height: 96px; min-width: 0; padding: 8px 4px 6px; font: inherit; color: #eef1ff; cursor: pointer; background: var(--st-glass); border: 1px solid var(--st-line); border-radius: var(--st-r-s); -webkit-tap-highlight-color: transparent; } .st-itt .st-item-ico { width: 48px; height: 48px; flex: none; } .st-itt .n { font-size: 1.05rem; line-height: 1.25; font-variant-numeric: tabular-nums; } .st-itt .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; line-height: 1.25; color: #b8c2f0; } /* 0個: タイルごと半分の濃さ + 絵は白黒。持っている: 数は金で少し大きく */ .st-itt.zero { opacity: 0.5; } .st-itt.zero.sel { opacity: 0.8; } .st-itt.zero .st-item-ico { filter: grayscale(1); } .st-itt.zero .nm { color: #8f98c8; } .st-itt:hover { filter: brightness(1.12); } .st-itt:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; } .st-itt.sel { border-color: var(--st-gold-line); box-shadow: inset 0 0 0 1px var(--st-gold-line), 0 0 12px rgba(217,180,90,0.3); } .st-itd { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--st-panel-bg); border: 1px solid var(--st-line); border-top-color: var(--st-gold-line); border-radius: var(--st-r-s); } .st-itd-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .st-itd-top .nm { font-size: 0.95rem; color: #fff; } .st-itd-top .n { font-size: 0.8rem; color: #ffe08a; font-variant-numeric: tabular-nums; white-space: nowrap; } .st-itd-p { margin: 0; font-size: 0.8rem; line-height: 1.5; color: #c6cff3; } .st-itd .st-it-use { align-self: flex-start; } .st-itd { animation: stScreenIn 160ms ease-out backwards; } /* 「演出を減らす」= オフなら、端末が減らす設定でも出す。減らすときは下の2行 */ @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-itd { animation: none !important; } } html.hd-reduce .st-itd { animation: none !important; } /* 「★5確定まであと N 回」= 金の縁の小さな札 + 下に細い進みの棒(--p = 引いた回数 / 天井。JS が入れる)。動かさない(棒は値が変わるだけ) */ #stGacha .st-gc-pity { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: fit-content; max-width: 100%; min-height: 36px; margin: 8px auto 4px; padding: 3px 18px 9px; font-size: 0.86rem; line-height: 1.2; border-radius: 999px; border: 1px solid var(--st-gold-line); background: rgba(8,11,44,0.88); box-shadow: inset 0 1px 0 rgba(255,244,190,0.22), 0 2px 6px rgba(0,0,0,0.4); } #stGacha .st-gc-pity:not(.st-gc-fpbal)::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #ffd45e var(--p), rgba(255,255,255,0.16) var(--p)); } #stGacha .st-gc-fpbal { padding-bottom: 3px; } /* ミッション: 2列(左 = 名前 + 進みの棒と数 / 右 = 報酬 + 受け取り)で、1枚 約90px */ .st-ms-list { gap: 8px; } .st-ms { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 8px 12px; } .st-ms-l { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .st-ms-r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .st-ms-name { font-size: 0.92rem; line-height: 1.3; } .st-ms-f { gap: 8px; } .st-ms-n { min-width: 0; white-space: nowrap; } .st-ms .st-gift-it { padding: 1px 9px 1px 3px; } .st-ms .st-gift-it .st-item-ico { width: 24px; height: 24px; } .st-ms .st-gift-get { min-width: 92px; } /* ミッションの状態の札: 「挑戦中」= 灰色 / 「受け取り済み」= 金のうす色。ボタンではない(span。縁なし・影なし・押せる見た目にしない) */ .st-ms-state { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; line-height: 1.3; white-space: nowrap; color: #a9b3dc; background: rgba(255,255,255,0.07); } .st-ms-state.claimed { color: rgba(255,224,138,0.82); background: rgba(255,214,120,0.08); } /* 設定(ロビーから開く): 高さは中身に合わせる(長いときだけ中でスクロール) */ .hd-settings.hd-set-float { inset: 12px 12px auto 12px; bottom: auto; height: auto; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); } /* 高さが中身ぴったりなので、パネルの外(ロビー)は押せないように、薄い幕を敷く */ body:has(.hd-settings.hd-set-float:not([hidden]))::after { content: ''; position: fixed; inset: 0; z-index: 59; background: rgba(2,3,16,0.5); } /* パネルの下の写真(星雲)を 15% 暗くする(持ち物・ミッション・コレクション・設定)。パネルは blur(16px) */ body:has(#stItems:not([hidden]), #stMission:not([hidden]), #stDex:not([hidden]), .hd-settings.hd-set-float:not([hidden])) #space::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: rgba(2,3,16,0.15); } /* ============================ /UI v3 (R4) ============================ */ /* (3) 押せる範囲 44px 以上・間隔 10px 以上 */ .st-search-in { min-height: 44px; } .st-search-row { gap: 10px 12px; } .st-fchips { gap: 10px; } .st-fchips.st-search-g { display: flex; flex-wrap: wrap; } .st-search-g .st-fchip { min-width: 44px; padding: 2px 10px; } #stBoxExpand { min-height: 44px; padding: 8px 14px; } .st-dlg-btns { gap: 12px; } .st-battle .hd-head-buttons .hd-btn.small { min-width: 44px; } .st-menu { gap: 10px; } /* (5) 対戦: 一時停止の画面(再開 / やり直し / ロビーへ)。壊す操作(やり直し・ロビーへ)を「再開」から離す。歯車のメニューが開いている間は、この画面は隠す(同時に出さない) */ .st-battle .hd-overlay > div { gap: 12px; } .st-battle .hd-overlay #ovBtn { margin-bottom: 8px; } .hd-overlay.st-menu-hide { visibility: hidden; } #space { contain: paint; } /* 背景(bgA / bgB / bgpan)がはみ出して横スクロールの幅を広げないように */ /* (4) ガチャの結果(10連): キャラ名は出さない(アイコン・★・NEW/N体目だけ。名前は aria-label / title に残す。オーナー決定 2026-10-12)。1回引きは名前を大きく出したまま */ .st-rv-cards:not(.one) .st-rv-card .nm { display: none; } /* (6) 押せない理由 */ .st-sc-unlock { font-size: 0.75rem; white-space: normal; max-width: 9em; margin-left: auto; line-height: 1.25; } .st-dg-u { white-space: nowrap; font-size: 0.75rem; color: #aeb5d8; text-align: center; line-height: 1.2; } .st-mat-t .own.none { color: #ffb4a0; } .st-it-use:disabled { white-space: nowrap; } /* (7) 写真の背景の上の薄い文字に、うすい座布団(読みやすさ)。パーティーHP・ガチャの上の注記 */ .st-lb-hp, #stGcSub, .st-gc-owned { background: rgba(6,8,36,0.5); border-radius: 10px; padding: 3px 10px; } .st-lb-hp { color: #dbe2ff; } #stGcSub:empty { background: none; padding: 0; } /* (8) 飾りの動きは数回で止める(ずっと動き続けない)。戦闘の警告・必殺技の準備・出撃の光・待ちの合図は、そのまま */ .st-gift-btn.has .st-gift-i { animation-iteration-count: 3; } .st-menu-btn.has .ic { animation-iteration-count: 3; } .st-rv-summon.waiting .st-gth-prompt, .st-rv-summon:not(.holding):not(.full) .st-gth-prompt { animation-iteration-count: 3; } .st-rv-summon.full .st-gth-core { animation-iteration-count: 4; } .st-rv-spot .hint { animation-iteration-count: 3; } .st-note { text-wrap: balance; } /* ============================ 2026-10-31b: 属性の印 = オーブ画像・検索のリセット・プリセットの編集 ============================ */ .st-badge.st-orb { --orb: 20px; width: var(--orb); height: var(--orb); min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; vertical-align: middle; } html.st-cud .st-badge.st-orb { border: 0; box-shadow: none; } .st-badge.st-orb img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); pointer-events: none; } .st-rc .st-badge.st-orb { --orb: 18px; } .st-ut .st-badge.el.st-orb { --orb: 18px; } .st-ut .st-badge.st-orb { border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.6); } /* 一覧のタイル: 属性の印の影は、画像の filter: drop-shadow(タイルごとに効果のレイヤーができて重い)ではなく、丸い枠の影で */ .st-ut .st-badge.st-orb img { filter: none; } .st-lbc .st-badge.el.st-orb { --orb: 24px; } .st-gring .st-badge.st-orb { --orb: 18px; } .st-rt-ch .st-badge.st-orb { --orb: 18px; } .st-sh-meta .st-badge.st-orb, .st-vw-meta .st-badge.st-orb { --orb: 22px; } .st-sc-name .st-badge.st-orb { --orb: 18px; vertical-align: -3px; } /* ---- 長い一覧(キャラ・パーティーの候補)は見えている行だけを描く(stella-stage.js の vgrid)。行の高さは最初のタイルで測って grid-auto-rows にそろえる ---- */ .st-ugrid.st-virt { align-content: start; } .st-ugrid.st-virt > .st-ut { overflow: hidden; contain: layout paint style; } /* タイルの中の変化が外のレイアウトに響かない(数千体の一覧のスクロール) */ /* タイルを使い回す一覧(キャラ): 並べるのは JS(position: absolute + transform)。一覧の高さは style.height、タイルの幅・高さも JS が測った値を入れる。流れていった行のタイルを新しい行へ回すので、DOM の追加・削除が無い */ .st-ugrid.st-pool { position: relative; } .st-ugrid.st-pool > .st-ut { position: absolute; left: 0; top: 0; margin: 0; overflow: visible; contain: layout style; } /* タイルごとの clip(overflow: hidden / contain: paint)は、数十タイルぶんのレイヤー・プロパティツリーの組み直しが重かった。中身は枠からはみ出さない(名前は省略記号) */ /* ============================ UI v2 (W5): 一覧とレイアウト ============================ */ /* ---- ステージ選択: 章の見出し(進みのバー)・クリア済みの低いカード・金のチェックのリボン ---- */ .st-chapter { flex-wrap: wrap; align-items: center; margin: 16px 0 8px; } .st-chapter h2 { font-family: var(--st-font-head); font-size: 1.3rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.25; } .st-chapter .st-ch-n { font-size: 0.78rem; font-weight: 700; color: #cdd5f5; white-space: nowrap; font-variant-numeric: tabular-nums; } .st-chapter.full .st-ch-n { color: #ffe08a; } .st-ch-bar { flex: 1 0 100%; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(8,10,40,0.8); border: 1px solid var(--st-line); } .st-ch-bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b88a2e, #ffe08a); transition: width 0.4s ease-out; } html.hd-reduce .st-ch-bar > i { transition: none; } .st-sc-state { color: #ffe08a; } .st-stage-card.cleared { border-color: var(--st-line); padding-top: 5px; padding-bottom: 5px; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; } .st-stage-card.cleared .st-ico { width: 44px; height: 44px; } .st-stage-card.cleared .st-sc-name { font-size: 0.95rem; } .st-stage-card.cleared .st-sc-rw { margin-top: 3px; } .st-sc-rw.one .st-rwl { flex-wrap: nowrap; overflow: hidden; } .st-stage-card > .st-sc-rw { grid-column: 1 / -1; margin-top: 0; } /* まだのステージの報酬: 下いっぱいに、1行ずつ(初回・周回) */ .st-stage-card > .st-sc-rw .st-rwl { flex-wrap: nowrap; overflow: hidden; } .st-sc-ribbon { position: absolute; top: -1px; right: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 3px; font-size: 0.75rem; font-weight: 800; line-height: 1.3; color: #3a2400; background: linear-gradient(#ffe08a, #d9b45a); border-radius: 0 0 8px 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.4); pointer-events: none; } .st-stage-card.cleared .st-sc-state { align-self: end; padding-top: 18px; } .st-stage-card.cleared .st-sc-state small { color: #cdd5f5; } .st-dg-card.cleared { border-color: var(--st-line); border-top: 1px solid var(--st-gold-line, #d9b45a); } .st-dg-lv.cleared { box-shadow: inset 0 0 0 1px rgba(217,180,90,0.5); } .st-dg-lv.cleared .st-dg-s { color: #ffe08a; } /* ---- コレクション: 報酬トラック(進みのバーに節目の印。受け取れる印だけが光る) ---- */ .st-trk { position: relative; height: 64px; margin: 6px 26px 0; } .st-trk-bar { position: absolute; left: 0; right: 0; top: 15px; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(8,10,40,0.85); border: 1px solid var(--st-line); } .st-trk-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, #b88a2e, #ffe08a); transition: width 0.5s ease-out; } html.hd-reduce .st-trk-bar > i { transition: none; } .st-trk-n { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 44px; min-height: 44px; padding: 0; font: inherit; color: #cdd5f5; background: none; border: 0; } button.st-trk-n { cursor: pointer; } button.st-trk-n:focus-visible { outline: 3px solid #ffd166; outline-offset: 1px; border-radius: 12px; } .st-trk-n .dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 0.75rem; font-weight: 800; line-height: 1; background: #0e1240; border: 2px solid rgba(150,170,255,0.5); } .st-trk-n .lb { font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .st-trk-n.got { color: #cdb27a; } .st-trk-n.got .dot { color: #3a2400; background: #b8964a; border-color: #8a6a24; } .st-trk-n.todo .dot { border-style: dashed; } .st-trk-n.can { color: #ffe08a; } .st-trk-n.can .dot { background: linear-gradient(#ffe08a, #e0a43a); border-color: #fff3c4; box-shadow: 0 0 0 3px rgba(255,214,120,0.28), 0 0 14px rgba(255,200,90,0.8); animation: stTrkGlow 1.6s ease-in-out infinite; } .st-trk-n.can .dot::after { content: ''; width: 10px; height: 10px; background: #5a3a00; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .st-trk-n.can:disabled { opacity: 0.6; } @keyframes stTrkGlow { 0%, 100% { box-shadow: 0 0 0 3px rgba(255,214,120,0.2), 0 0 8px rgba(255,200,90,0.5); } 50% { box-shadow: 0 0 0 5px rgba(255,214,120,0.34), 0 0 18px rgba(255,200,90,0.95); } } html.hd-reduce .st-trk-n.can .dot { animation: none; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-trk-n.can .dot { animation: none; } } .st-dex-all { align-self: stretch; width: auto; } .st-dex-bar { height: 6px; } /* ---- パーティーのプリセット: 5つのチップを横一列(空は点線)。「編集」で 保存・リセット ---- */ /* ---- 持ち物: 行は 絵・名前・個数 だけ。説明は行をタップすると開く ---- */ .st-it { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; padding: 0 10px 0 0; } .st-it-tg { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 54px; padding: 5px 4px 5px 6px; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-radius: 12px; } button.st-it-tg { cursor: pointer; } button.st-it-tg:focus-visible { outline: 3px solid #ffd166; outline-offset: -2px; } .st-it-chev { width: 8px; height: 8px; margin-right: 6px; border-right: 2px solid #9aa6d8; border-bottom: 2px solid #9aa6d8; transform: rotate(45deg); transition: transform 0.16s ease-out; } .st-it.open .st-it-chev { transform: rotate(-135deg); } html.hd-reduce .st-it-chev { transition: none; } .st-it-ds { grid-column: 1 / -1; margin: 0; padding: 0 4px 8px 60px; font-size: 0.78rem; line-height: 1.45; color: #b8c2f0; } .st-it-ds[hidden] { display: none; } .st-it .st-it-r { flex-direction: row; align-items: center; gap: 10px; } /* ---- キャラ一覧: 同じキャラは1枚にまとめて ×N ---- */ .st-ut .st-dupn { position: absolute; right: 3px; bottom: 38px; z-index: 3; box-sizing: border-box; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: #3a2400; background: linear-gradient(#ffe08a, #d9b45a); border: 1px solid #fff3c4; box-shadow: 0 1px 3px rgba(0,0,0,0.6); pointer-events: none; } /* UI v3: 22px の丸(右下 = アイコンの角)。属性バッジ(左上)とは別 */ /* ============================ 2026-10-12 UI第2弾 A: 「絞り込み」シート(キャラ一覧・コレクション)とキャラ詳細(立ち絵が主役) ============================ */ /* 上の1行: ならびかえ + 「絞り込み」 + (売る / ボックス拡張)。高さは44px */ .st-boxbar { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 8px; } .st-boxbar .st-tools { flex: 1 1 auto; min-width: 0; margin: 0; } .st-boxbar #stBoxExpand { flex: none; min-height: 44px; min-width: 52px; padding: 6px 10px; white-space: nowrap; } .st-lbar { flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin-bottom: 0; } .st-fsbtn, .st-lbar .st-sellmode { min-height: 44px; padding: 6px 12px; white-space: nowrap; font-size: 0.85rem; } .st-lbar-info { font-size: 0.8rem; color: #cfd8ff; margin-left: 2px; } /* 並べ替えのシート(2026-10-15): 向きは2つの切りかえ(横いっぱいに半分ずつ)、並べ方のチップは下。下の「リセット」「この条件で表示」は出さない */ .st-fs.sortmode .st-fs-foot { display: none; } .st-fs-body .st-fchips.st-sortdir { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* タイルの Lv の場所に攻撃・HP・必殺の値を出すとき(「HP 12,345」): 長くなるので少し小さく、タイルの幅からはみ出さない */ .st-ut .lv.stat { font-size: 0.68rem; letter-spacing: -0.02em; overflow: hidden; text-overflow: clip; max-width: 100%; } /* 下から出るシート */ /* 絞り込み・並べ替えのシート(.st-fs-bg)が開いている間は、広告も隠す(シートの下のボタンに広告を重ねない) */ body:has(.st-fs-bg:not([hidden])) .st-adbar { display: none; } .st-fs-bg { position: fixed; inset: 0; z-index: 10; display: flex; align-items: flex-end; justify-content: center; background: rgba(2,3,18,0.7); } .st-fs-bg[hidden] { display: none; } .st-fs { display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(86vh, 86dvh); overflow: hidden; color: #f0f0f5; background: linear-gradient(rgba(24,28,84,0.99), rgba(8,10,40,0.99)); border: 1px solid rgba(170,190,255,0.5); border-bottom: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,0.6), 0 0 20px rgba(90,100,255,0.25); padding-bottom: env(safe-area-inset-bottom, 0px); } .st-fs:focus { outline: none; } .st-fs.in { animation: stFsUp 0.22s ease-out; } @keyframes stFsUp { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } } .st-fs-head { display: flex; align-items: center; gap: 10px; padding: 10px 8px 6px 16px; } .st-fs-title { margin: 0; font-size: 1.05rem; font-family: var(--st-font-head); text-shadow: 0 0 12px rgba(120,140,255,0.5); } .st-fs-info { flex: 1; font-size: 0.8rem; color: #cfd8ff; font-variant-numeric: tabular-nums; } .st-fs-x { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(170,190,255,0.5); background: rgba(10,14,60,0.85); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; } .st-fs-x:focus-visible { outline: 3px solid #ffd166; outline-offset: 1px; } .st-fs-body { overflow-y: auto; padding: 4px 16px 8px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .st-fs-sec { margin: 0 0 12px; } .st-fs-lab { margin: 0 0 4px; font-size: 0.8rem; font-weight: 800; color: #cfd8ff; } .st-fs-body .st-search { margin: 0; gap: 0; } .st-fs-body .st-fchips.st-search-g { gap: 8px; } .st-fs-body .st-sel { width: 100%; } .st-fs-foot { display: flex; gap: 12px; padding: 8px 16px 14px; } .st-fs-btn { flex: 1 1 0; min-height: 48px; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-fs.in { animation: none; } } html.hd-reduce .st-fs.in { animation: none; } /* キャラ詳細: 立ち絵が主役。スマホで画面の幅の約1/3、PCでは大きく。下に素材の欄は「レベルアップ」ボタンでたたむ */ #stUnitBody .st-ud-stats { margin-top: 10px; } #stUnitBody .st-ud-stats .st-stat b { font-size: 1rem; } #stUnitBody .st-ud-stats .st-stat b.long { font-size: 0.9rem; } .st-lvtoggle { display: block; width: 100%; min-height: 48px; margin-top: 10px; font-size: 1rem; } .st-lvtoggle[aria-expanded="true"] { filter: saturate(0.85); } .st-lvp[hidden] { display: none; } /* ---- 出撃・ガチャのトップの背景絵(宇宙の背景 #space の上に重ねる。上から少し暗くして文字を読みやすく) ---- */ body.st-bg-select #space::after, body.st-bg-gacha #space::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(rgba(6,8,30,0.28), rgba(6,8,30,0.5)), var(--st-bg-img) center / cover no-repeat #060826; } body.st-bg-select { --st-bg-img: var(--st-u-select, url('stella-chars/bg/select.webp')); } body.st-bg-gacha { --st-bg-img: var(--st-u-gacha-top, url('stella-chars/bg/gacha-top.webp')); } /* ---- 出撃ボタン: オーナー提供の六角形の宝石(stella-ui/sortie-hex-*.webp、緑背景を抜き、正六角形の比率に縦を補正したもの)。ラベルは宝石の上に重ねる ---- */ .st-actions .st-sortie { background: var(--st-u-sortie-240, url('stella-ui/sortie-hex-240.webp')) center / contain no-repeat; background-color: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0; filter: drop-shadow(0 4px 10px rgba(255,150,40,0.45)); animation: stSortieGem 2.6s ease-in-out infinite alternate; } @media (min-resolution: 2.5dppx) { .st-actions .st-sortie { background-image: var(--st-u-sortie-360, url('stella-ui/sortie-hex-360.webp')); } } .st-actions .st-sortie .t { color: #fff; text-shadow: 0 0 3px rgba(70,20,0,0.95), 0 2px 5px rgba(70,20,0,0.9), 0 0 10px rgba(70,20,0,0.7); } .st-actions .st-sortie:hover:not(:disabled) { filter: brightness(1.1) drop-shadow(0 4px 14px rgba(255,170,60,0.7)); } .st-actions .st-sortie:disabled { filter: grayscale(0.8) brightness(0.7); animation: none; } .st-actions .st-sortie:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 14px; } @keyframes stSortieGem { from { filter: drop-shadow(0 3px 8px rgba(255,150,40,0.3)); } to { filter: drop-shadow(0 4px 18px rgba(255,185,70,0.85)); } } html.hd-reduce .st-actions .st-sortie { animation: none !important; } @media (prefers-reduced-motion: reduce) { html:not(.hd-motion) .st-actions .st-sortie { animation: none !important; } } /* ============================ UI v3 / R2: リンク・見出し・用語・ロビーのラベル・出撃の確認・ならびかえ ============================ (1) 下線つきの文字リンクは無し: 3番目のボタン(.tertiary / .st-back)は 金の文字 + 小さな ‹ (戻る・閉じる) / › (進む)、押せる高さ 44px (2) 見出しは「看板」: 明朝・1.3rem・太さ800・下に金の細い線(「?」は縦中央) (3) ロビーの右のラベルは文字に影、デイリー未挑戦のリボン(と宝石)は 12px 上へ (4) 出撃の確認: 改 の印は敵の絵の右上に小さく / 消費スタミナはボタンの中 / パーティーは横並びで低く (5) ならびかえは