/* build: v2026-09-06-1 （index.htmlのwindow.APP_BUILDと同じ番号のものを必ずセットで使うこと） */ /* ========================================================================== アニメップル：チャット吹き出しスキン専用CSS ========================================================================== 新しいスキン(コラボ等)を追加する時は、このファイルの末尾に .bubble-skin- のブロックを1つ足すだけでいい。JS側は一切触らなくてよい。 （skinMap経由でユーザーごとにIDを渡すと、そのユーザーの投稿だけこのCSSが当たる） 最低限クラスの中に用意されているもの: .bubble-skin- 共通の外枠（padding・border-radius等の基準はdefaultを参照） .bubble-skin-.is-mine 自分の投稿の時 .bubble-skin-.is-theirs 相手の投稿の時 .bubble-skin-.is-grouped 連投2件目以降（しっぽを付けない等） .bubble-inner / .bubble-text 吹き出しの中身・本文 .bubble-quote / .bubble-quote-name / .bubble-quote-body 返信時の引用ブロック 背景画像やキャラのシルエットを入れたい場合は ::after 等の疑似要素を使う （.chat-bubble に position:relative; z-index分けは既に用意済みなので、 本文の上に被らないよう z-index:0 以下、pointer-events:none を付けること）。 ========================================================================== */ .chat-bubble { position:relative; } .chat-bubble .bubble-inner { position:relative; z-index:1; padding:9px 13px; } .chat-bubble .bubble-text { font-size:14px; line-height:1.65; white-space:pre-wrap; word-break:break-word; text-align:left; } .chat-bubble .bubble-quote { padding-left:8px; margin-bottom:7px; opacity:.85; } .chat-bubble .bubble-quote-name { display:block; font-size:10.5px; font-weight:800; } .chat-bubble .bubble-quote-body { display:block; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:min(300px,54vw); } /* ── default：今の標準の見た目。全員のデフォルト ── */ .bubble-skin-default { max-width:min(440px,70vw); border-width:1px; border-style:solid; } .bubble-skin-default.is-mine { max-width:min(440px,74vw); } .bubble-skin-default.is-mine, .bubble-skin-default.is-theirs { border-radius:14px 14px 14px 4px; } .bubble-skin-default.is-mine { border-radius:14px 14px 4px 14px; } .bubble-skin-default.is-grouped { border-radius:14px; } .bubble-skin-default.is-mine { background:#2f7d55; border-color:rgba(255,255,255,.09); box-shadow:0 10px 22px -16px rgba(0,0,0,.8); } .bubble-skin-default.is-mine .bubble-text { color:#f2fbf5; } .bubble-skin-default.is-mine .bubble-quote-name { color:#d6f2e2; } .bubble-skin-default.is-mine .bubble-quote-body { color:#cfe8da; } .bubble-skin-default.is-mine .bubble-quote { border-left:2px solid rgba(255,255,255,.35); } .bubble-skin-default.is-theirs { background:#262e33; border-color:rgba(255,255,255,.08); box-shadow:0 8px 18px -16px rgba(0,0,0,.8); } .bubble-skin-default.is-theirs .bubble-text { color:#e6efe9; } .bubble-skin-default.is-theirs .bubble-quote-name { color:#9be3bd; } .bubble-skin-default.is-theirs .bubble-quote-body { color:#b6c8bd; } .bubble-skin-default.is-theirs .bubble-quote { border-left:2px solid rgba(147,226,183,.5); } /* ── レビューカードのスキン。card-skin- で背景・装飾を丸ごと差し替える。 スキンごとに「通常」「上質(is-quality)」の2パターンを用意する （例: 夜空スキンなら .card-skin-yozora＝通常夜空、.card-skin-yozora.is-quality＝上質夜空） ── */ .card-skin-default { background:linear-gradient(180deg,#20392b 0%,#16291d 100%); --card-panel-bg:#09201b; --card-panel-border:rgba(255,255,255,.14); } .card-skin-default.is-quality { background:linear-gradient(180deg,#3a2f10 0%,#241c08 100%); --card-panel-bg:#241c08; --card-panel-border:rgba(224,178,86,.35); } /* ── アイコンフレーム。全アイコン（掲示板・DM・レビューカード・ヘッダー・マイページ）共通。 「自分の投稿だから金色」ではなく、「そのユーザーが今装備しているフレーム」を表示する。 新しいフレームは .avatar-frame- を1つ足すだけでよい ── */ /* ── アイコンフレーム。全アイコン（掲示板・DM・レビューカード・ヘッダー・マイページ）共通。 「自分の投稿だから金色」ではなく、「そのユーザーが今装備しているフレーム」を表示する。 box-shadowで枠を作る（borderだと要素のサイズ自体が変わって場所によってズレるため）。 新しいフレームは .avatar-frame- を1つ足すだけでよい ── */ .avatar-frame-default { border: none; box-shadow: 0 0 0 3px #000, 0 0 0 4px rgba(255,255,255,.16); } /* ── 通知バッジ・未読ドットの色。--badge-colorを上書きするだけで全部変わる。 新しいスキンは body に .badge-skin- を付けて --badge-color を変えるだけでよい ── */ :root { --badge-color: #e5484d; } .badge-skin-default { --badge-color: #e5484d; } /* ── 掲示板全体の見た目（吹き出し以外の背景・入力欄など）。自分が見る時だけのテーマで、 投稿者ごとではなく閲覧者本人の好み。.board-skin- を .board-page-wrap に付けて使う ── */ /* ══════════════════════════════════════════════════════════════════ 全スキン共通の土台（今後スキンを何個追加しても、ここは触らなくていい） ・「掲示板」「マイページ」テーマの外枠(position/z-index/画面いっぱいに覆う)は ここで一括固定する。個別スキン側は「content」と「background(-image)」だけ書けばよい。 ・!important を付けているのは、個別スキン側がposition/insetをうっかり 書いてしまっても、必ずこちらが勝つようにするため（＝毎回チェック不要にする）。 ══════════════════════════════════════════════════════════════════ */ [class*="board-skin-"], [class*="mypage-skin-"] { position: relative !important; isolation: isolate !important; min-height: 100vh !important; /* 100%だと親要素に明示的な高さが無い場合に効かず、コンテンツが短いページ(サーバー選択画面など)で背景が途中で切れるため、ビューポート基準に変更 */ } [class*="board-skin-"]::before, [class*="board-skin-"]::after, [class*="mypage-skin-"]::before, [class*="mypage-skin-"]::after { position: fixed !important; /* absoluteだと親要素の実サイズ次第で余白が出るため、常にビューポート基準に固定する */ inset: 0 !important; pointer-events: none !important; } [class*="board-skin-"]::before, [class*="mypage-skin-"]::before { z-index: -2 !important; } [class*="board-skin-"]::after, [class*="mypage-skin-"]::after { z-index: -1 !important; } /* ══════════════════════════════════════════════════════════════════ #themeScenery：「月・星・天の川」等、画面全体に1枚だけ敷く背景シーン ・board-skin- / mypage-skin- の箱(#page-mypage 等)は横幅が固定＆ 中央寄せなので、箱自体に背景を塗ると画面が広い時に箱の外側(左右の余白) との継ぎ目が見えてしまう(色が違う/絵がズレる)。 ・そこで「月・星・天の川・ベースの空色」といった重い絵は、box幅に関係なく 常に画面いっぱいを覆う #themeScenery (position:fixed;inset:0、body直下に 1個だけ置いてある実要素)側にまとめて描く。JS側が今アクティブなページの スキンに応じて #themeScenery のクラスを scenery-board- / scenery-mypage- に付け替える(updateThemeScenery()。nav()と applyMyEquippedCustomization()から呼ばれる)。 ・箱(board-skin-/mypage-skin-)側は、--board-panel-bg 等の 「必須CSS変数」と、::before/::after の瞬く星・流れ星アニメだけを持つ。 ・新しいスキンを追加したら、下に scenery-board- / scenery-mypage- を1つずつ足すこと（忘れると新スキンの時だけ画面の余白部分が テーマ色に揃わないバグになる）。 ══════════════════════════════════════════════════════════════════ */ #themeScenery { position: fixed; inset: 0; z-index: -3; pointer-events: none; } .board-skin-default { background: transparent; --board-panel-bg: var(--bg); --board-input-bg:#12291d; --board-input-border:rgba(255,255,255,.14); --hdr-bg: rgba(7,21,13,.9); --board-icon-muted:#5f7268; --board-icon-active:#c3d4c9; --board-reaction-mine-bg:rgba(92,201,142,.18); --board-reaction-mine-border:rgba(92,201,142,.5); --board-reaction-bg:rgba(255,255,255,.05); --board-reaction-border:rgba(255,255,255,.1); } .board-skin-default .board-composer { background:#0b1a11; } /* ── マイページ全体の見た目。自分が見る時だけのテーマ（他人には影響しない）。 #page-mypage に .mypage-skin- を付けて使う ── */ .mypage-skin-default { background: transparent; --card-panel-bg:#09201b; --card-panel-border:rgba(255,255,255,.14); --hdr-bg: rgba(7,21,13,.9); --mypage-cover-a: rgba(92,201,142,.22); --mypage-cover-b: rgba(217,164,65,.16); --card-preview-bg: radial-gradient(130% 110% at 12% 0%, #17402a 0%, #0b1f14 60%, #061109 100%); --card-preview-dot-bg: linear-gradient(150deg,#4a2f6d,#241a2c); --card-preview-dot-border: rgba(240,201,74,.6); --card-preview-accent: rgba(142,226,165,.4); --card-preview-graph-fill: rgba(92,201,142,.3); --card-preview-graph-stroke: #5cc98e; --mypage-card-bg: linear-gradient(150deg,#173021 0%,#0e2015 60%,#0c1c12 100%); } /* ========================================================================== 夜空スキン（yozora）／skins.css の末尾にそのまま貼り足す ========================================================================== カテゴリ：① board ② mypage ③ card（通常/上質） ④ frame ⑥ badge_color （⑤ 称号バッジは skin-catalogs-yozora.js 側） 共通の土台ルールに合わせてあります： ・position / inset / z-index は一切書いていません（[class*="board-skin-"] 等が !important で面倒を見るため）。疑似要素は content と background だけ。 ・::before / ::after は共通ルールで inset:0 の全画面レイヤーになるので、 流れ星は「細い棒の要素」ではなく、全画面レイヤーの中に background-image で 1本の光の筋を描き、その筋ごと transform で動かす形にしています。 ・必須CSS変数（--hdr-bg / --board-icon-* / --bg / --card / --card2 / --line / --mypage-card-bg / --card-preview-* など）は全部揃えてあります。 夜空の作り方＝色替えではなく「層」で作っています。下から順に： ① 地平の大気光を含むベースグラデ（上ほど暗い #05070f → 下 #141c46） ② 星雲のにじみ（青紫2つ） ③ 天の川の帯（斜めの薄い白青） ④ 星（静止・大小18粒。等級差を出すため大きさと不透明度を散らしてある） ⑤ 月（小さな円＋広いグロー） ⑥ 瞬く星（::before・opacity だけ動かす7粒）＋ 夜空全体のゆっくりした流れ ⑦ 流れ星（::after・1レイヤーで3本ぶんを時間差で流す。24秒周期） 動かすのは opacity と transform だけなので再描画は起きません。 ========================================================================== */ /* ══ 共通キーフレーム ══ */ @keyframes yozora-twinkle { 0%,100% { opacity:.32 } 50% { opacity:1 } } /* 夜空の流れ。3〜4分で一巡する、ごくゆっくりした斜めの移動＋わずかな拡大。 月と星雲は動かさず固定の目印として残し、星の層だけが流れる。 translate は最大2.2%、拡大は1.06〜1.09倍なので、縁が透けることはない。 */ @keyframes yozora-drift { 0% { transform:translate3d(0,0,0) scale(1.06); } 50% { transform:translate3d(-2.2%,1.4%,0) scale(1.09); } 100% { transform:translate3d(0,0,0) scale(1.06); } } /* 流れ星。1レイヤーで3本ぶん。消えている間に次の開始位置へ飛ばしているので レイヤーは1枚で足りる。transform-origin が光の筋の根元なので、 rotate で軌道の角度、scaleX で尾の伸び縮みを表している。 */ @keyframes yozora-meteor-track { /* ―― 1本目：左上から浅い角度で長く ―― */ 0% { opacity:0; transform:translate3d(6vw,7vh,0) rotate(22deg) scaleX(.15); } 1.5% { opacity:.95; transform:translate3d(8vw,calc(7vh + 18px),0) rotate(22deg) scaleX(1); } 6% { opacity:0; transform:translate3d(calc(6vw + 330px),calc(7vh + 133px),0) rotate(22deg) scaleX(.9); } 6.01% { opacity:0; transform:translate3d(38vw,4vh,0) rotate(36deg) scaleX(.15); } /* ―― 2本目：右寄りから急な角度で短く ―― */ 37% { opacity:0; transform:translate3d(38vw,4vh,0) rotate(36deg) scaleX(.15); } 38.2% { opacity:.85; transform:translate3d(calc(38vw + 22px),calc(4vh + 16px),0) rotate(36deg) scaleX(1); } 42% { opacity:0; transform:translate3d(calc(38vw + 210px),calc(4vh + 153px),0) rotate(36deg) scaleX(.9); } 42.01%{ opacity:0; transform:translate3d(22vw,24vh,0) rotate(11deg) scaleX(.15); } /* ―― 3本目：中ほどをゆっくり ―― */ 71% { opacity:0; transform:translate3d(22vw,24vh,0) rotate(11deg) scaleX(.15); } 72.5% { opacity:.7; transform:translate3d(calc(22vw + 26px),calc(24vh + 5px),0) rotate(11deg) scaleX(1); } 79% { opacity:0; transform:translate3d(calc(22vw + 400px),calc(24vh + 78px),0) rotate(11deg) scaleX(.9); } 100% { opacity:0; transform:translate3d(6vw,7vh,0) rotate(22deg) scaleX(.15); } } /* ══════════ #themeScenery（画面全体に1枚だけ敷く背景シーン。box幅に一切縛られない） ══════════ */ #themeScenery.scenery-board-yozora { background: /* 月 */ radial-gradient(13px 13px at 85% 11%, rgba(255,246,226,.9) 0 56%, rgba(255,246,226,0) 58%), radial-gradient(240px 240px at 85% 11%, rgba(255,238,200,.10) 0%, rgba(255,238,200,.035) 42%, transparent 70%), /* 星（静止・18粒） */ radial-gradient(1.9px 1.9px at 11% 14%, rgba(255,255,255,.95) 0 55%, transparent 56%), radial-gradient(1.1px 1.1px at 26% 8%, rgba(207,224,255,.7) 0 55%, transparent 56%), radial-gradient(1.5px 1.5px at 38% 19%, rgba(255,255,255,.8) 0 55%, transparent 56%), radial-gradient(1px 1px at 47% 6%, rgba(207,224,255,.55) 0 55%, transparent 56%), radial-gradient(2.1px 2.1px at 62% 16%, rgba(255,246,226,.85) 0 55%, transparent 56%), radial-gradient(1.2px 1.2px at 73% 25%, rgba(207,224,255,.65) 0 55%, transparent 56%), radial-gradient(1px 1px at 92% 21%, rgba(255,255,255,.6) 0 55%, transparent 56%), radial-gradient(1.6px 1.6px at 8% 33%, rgba(255,255,255,.75) 0 55%, transparent 56%), radial-gradient(1.1px 1.1px at 31% 38%, rgba(207,224,255,.6) 0 55%, transparent 56%), radial-gradient(1.3px 1.3px at 55% 34%, rgba(255,255,255,.7) 0 55%, transparent 56%), radial-gradient(1px 1px at 79% 41%, rgba(207,224,255,.5) 0 55%, transparent 56%), radial-gradient(1.7px 1.7px at 17% 52%, rgba(255,255,255,.6) 0 55%, transparent 56%), radial-gradient(1.1px 1.1px at 44% 57%, rgba(207,224,255,.45) 0 55%, transparent 56%), radial-gradient(1.4px 1.4px at 68% 61%, rgba(255,246,226,.5) 0 55%, transparent 56%), radial-gradient(1px 1px at 88% 55%, rgba(255,255,255,.4) 0 55%, transparent 56%), radial-gradient(1.2px 1.2px at 24% 71%, rgba(207,224,255,.35) 0 55%, transparent 56%), radial-gradient(1px 1px at 59% 78%, rgba(255,255,255,.3) 0 55%, transparent 56%), radial-gradient(1.3px 1.3px at 82% 84%, rgba(207,224,255,.28) 0 55%, transparent 56%), /* 天の川 */ linear-gradient(107deg, transparent 37%, rgba(198,214,255,.06) 45%, rgba(216,228,255,.11) 50%, rgba(198,214,255,.055) 56%, transparent 64%), /* 星雲 */ radial-gradient(58% 40% at 20% 28%, rgba(96,120,220,.16) 0%, transparent 70%), radial-gradient(52% 36% at 80% 64%, rgba(122,88,184,.13) 0%, transparent 72%), /* ベース（下が地平の大気光でわずかに明るい） */ linear-gradient(180deg,#05070f 0%,#0a0f26 42%,#0d1533 76%,#141c46 100%); } #themeScenery.scenery-mypage-yozora { background: /* 月は掲示板と左右対称の位置（左上）に置いて、画面ごとの表情を変えている */ radial-gradient(11px 11px at 12% 9%, rgba(255,246,226,.85) 0 56%, rgba(255,246,226,0) 58%), radial-gradient(210px 210px at 12% 9%, rgba(255,238,200,.09) 0%, rgba(255,238,200,.03) 42%, transparent 70%), radial-gradient(1.8px 1.8px at 28% 11%, rgba(255,255,255,.9) 0 55%, transparent 56%), radial-gradient(1.1px 1.1px at 44% 6%, rgba(207,224,255,.65) 0 55%, transparent 56%), radial-gradient(1.5px 1.5px at 61% 15%, rgba(255,255,255,.8) 0 55%, transparent 56%), radial-gradient(2px 2px at 78% 9%, rgba(255,246,226,.8) 0 55%, transparent 56%), radial-gradient(1.2px 1.2px at 91% 19%, rgba(207,224,255,.6) 0 55%, transparent 56%), radial-gradient(1.4px 1.4px at 15% 27%, rgba(255,255,255,.7) 0 55%, transparent 56%), radial-gradient(1px 1px at 37% 33%, rgba(207,224,255,.5) 0 55%, transparent 56%), radial-gradient(1.6px 1.6px at 66% 39%, rgba(255,255,255,.6) 0 55%, transparent 56%), radial-gradient(1.1px 1.1px at 86% 47%, rgba(207,224,255,.45) 0 55%, transparent 56%), radial-gradient(1.3px 1.3px at 22% 58%, rgba(255,255,255,.45) 0 55%, transparent 56%), radial-gradient(1px 1px at 52% 66%, rgba(207,224,255,.35) 0 55%, transparent 56%), radial-gradient(1.2px 1.2px at 74% 77%, rgba(255,255,255,.3) 0 55%, transparent 56%), linear-gradient(73deg, transparent 36%, rgba(198,214,255,.055) 45%, rgba(216,228,255,.1) 50%, rgba(198,214,255,.05) 56%, transparent 65%), radial-gradient(56% 38% at 74% 26%, rgba(96,120,220,.15) 0%, transparent 70%), radial-gradient(50% 34% at 22% 66%, rgba(122,88,184,.12) 0%, transparent 72%), linear-gradient(180deg,#05070f 0%,#0a0f26 44%,#0d1533 78%,#131a42 100%); } /* ══════════ ① 掲示板（board） ══════════ */ .board-skin-yozora { --board-panel-bg:#0c1230; --board-input-bg:#141c46; --board-input-border:rgba(207,224,255,.22); --hdr-bg:rgba(5,7,15,.82); --board-icon-muted:#7c8bc2; --board-icon-active:#dfe6f7; --board-reaction-mine-bg:rgba(159,188,255,.2); --board-reaction-mine-border:rgba(159,188,255,.55); --board-reaction-bg:rgba(207,224,255,.07); --board-reaction-border:rgba(207,224,255,.16); --bg:#080b1a; --card:#0e1430; --card2:#10152e; --line:rgba(207,224,255,.22); /* 月・星・天の川・ベース色は #themeScenery.scenery-board-yozora 側で画面全体に1枚だけ描く （この箱自体の background は使わない＝箱の横幅に縛られて画面外に緑の余白が出ていたバグの原因だった） */ } /* 瞬く星（同時に夜空全体がゆっくり流れる。opacity と transform で別のアニメを重ねている） */ .board-skin-yozora::before { content:''; background-image: radial-gradient(2.2px 2.2px at 19% 22%, rgba(255,255,255,.95) 0 55%, transparent 56%), radial-gradient(1.7px 1.7px at 41% 12%, rgba(207,224,255,.9) 0 55%, transparent 56%), radial-gradient(2.4px 2.4px at 67% 29%, rgba(255,246,226,.9) 0 55%, transparent 56%), radial-gradient(1.6px 1.6px at 88% 17%, rgba(255,255,255,.8) 0 55%, transparent 56%), radial-gradient(1.9px 1.9px at 13% 45%, rgba(207,224,255,.75) 0 55%, transparent 56%), radial-gradient(1.5px 1.5px at 52% 49%, rgba(255,255,255,.7) 0 55%, transparent 56%), radial-gradient(1.8px 1.8px at 76% 68%, rgba(207,224,255,.6) 0 55%, transparent 56%); animation:yozora-twinkle 5.2s ease-in-out infinite, yozora-drift 180s ease-in-out infinite; } /* 流れ星（24秒で3本）。全画面レイヤーの左上に光の筋を1本だけ描き、それを動かす */ .board-skin-yozora::after { content:''; background-image:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(207,224,255,.55) 55%, rgba(232,240,255,.95) 88%, #fff 100%); background-repeat:no-repeat; background-size:130px 1.6px; background-position:0 0; transform-origin:0 0; animation:yozora-meteor-track 24s linear infinite; } .board-skin-yozora .board-composer { background:#0d1330; border-top:1px solid rgba(207,224,255,.14); box-shadow:inset 0 1px 0 rgba(207,224,255,.07); } /* ══ 吹き出し（board カテゴリの一部） ══ */ .bubble-skin-yozora { max-width:min(440px,70vw); border-width:1px; border-style:solid; overflow:hidden; } .bubble-skin-yozora.is-mine { max-width:min(440px,74vw); } .bubble-skin-yozora.is-mine, .bubble-skin-yozora.is-theirs { border-radius:14px 14px 14px 4px; } .bubble-skin-yozora.is-mine { border-radius:14px 14px 4px 14px; } .bubble-skin-yozora.is-grouped { border-radius:14px; } .bubble-skin-yozora.is-mine { background: linear-gradient(112deg, transparent 30%, rgba(198,214,255,.07) 48%, transparent 68%), linear-gradient(160deg,#233070 0%,#182055 52%,#0e1436 100%); border-color:rgba(207,224,255,.24); box-shadow:0 10px 22px -16px rgba(0,0,0,.9), inset 0 1px 0 rgba(207,224,255,.14); } .bubble-skin-yozora.is-mine .bubble-text { color:#eaf1ff; } .bubble-skin-yozora.is-mine .bubble-quote-name { color:#ffd98a; } .bubble-skin-yozora.is-mine .bubble-quote-body { color:#c3cfee; } .bubble-skin-yozora.is-mine .bubble-quote { border-left:2px solid rgba(255,217,138,.55); } .bubble-skin-yozora.is-theirs { background: linear-gradient(112deg, transparent 32%, rgba(198,214,255,.05) 50%, transparent 70%), linear-gradient(160deg,#151a2e 0%,#11152a 52%,#0d1120 100%); border-color:rgba(207,224,255,.13); box-shadow:0 8px 18px -16px rgba(0,0,0,.9); } .bubble-skin-yozora.is-theirs .bubble-text { color:#dfe6f7; } .bubble-skin-yozora.is-theirs .bubble-quote-name { color:#9fbcff; } .bubble-skin-yozora.is-theirs .bubble-quote-body { color:#aab6d2; } .bubble-skin-yozora.is-theirs .bubble-quote { border-left:2px solid rgba(159,188,255,.5); } /* 吹き出しの中の星（静止5粒）。.chat-bubble は position:relative 済みなので z-index:0 以下・pointer-events:none だけ守れば本文に被らない */ .bubble-skin-yozora::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit; background-image: radial-gradient(1.4px 1.4px at 18% 26%, rgba(255,255,255,.85) 0 55%, transparent 56%), radial-gradient(1px 1px at 46% 68%, rgba(207,224,255,.7) 0 55%, transparent 56%), radial-gradient(1.6px 1.6px at 72% 22%, rgba(255,217,138,.7) 0 55%, transparent 56%), radial-gradient(1px 1px at 88% 60%, rgba(255,255,255,.5) 0 55%, transparent 56%), radial-gradient(1.2px 1.2px at 30% 84%, rgba(207,224,255,.45) 0 55%, transparent 56%); opacity:.9; } .bubble-skin-yozora.is-grouped::after { opacity:.45; } /* 瞬く星（3粒だけ・連投時は静止） */ .bubble-skin-yozora::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit; background-image: radial-gradient(1.5px 1.5px at 34% 42%, rgba(255,255,255,.9) 0 55%, transparent 56%), radial-gradient(1.2px 1.2px at 62% 78%, rgba(207,224,255,.8) 0 55%, transparent 56%), radial-gradient(1.7px 1.7px at 82% 34%, rgba(255,217,138,.85) 0 55%, transparent 56%); animation:yozora-twinkle 4.6s ease-in-out infinite; } .bubble-skin-yozora.is-grouped::before { animation:none; opacity:.4; } /* ══════════ ② マイページ（mypage） ══════════ */ .mypage-skin-yozora { --card-panel-bg:#0e1430; --card-panel-border:rgba(207,224,255,.22); --hdr-bg:rgba(5,7,15,.82); --bg:#080b1a; --card:#0e1430; --card2:#10152e; --line:rgba(207,224,255,.22); --mypage-cover-a:rgba(159,188,255,.28); --mypage-cover-b:rgba(207,224,255,.14); --mypage-card-bg:linear-gradient(150deg,#1b2350 0%,#101740 60%,#0a0e26 100%); --card-preview-bg:radial-gradient(130% 110% at 12% 0%, #1e2a63 0%, #101740 60%, #05070f 100%); --card-preview-dot-bg:linear-gradient(150deg,#2a3675,#0b1026); --card-preview-dot-border:rgba(207,224,255,.6); --card-preview-accent:rgba(159,188,255,.4); --card-preview-graph-fill:rgba(142,168,255,.3); --card-preview-graph-stroke:#9fbcff; /* 月・星・天の川・ベース色は #themeScenery.scenery-mypage-yozora 側で画面全体に1枚だけ描く */ } .mypage-skin-yozora::before { content:''; background-image: radial-gradient(2.2px 2.2px at 33% 20%, rgba(255,255,255,.95) 0 55%, transparent 56%), radial-gradient(1.7px 1.7px at 56% 27%, rgba(207,224,255,.9) 0 55%, transparent 56%), radial-gradient(2.3px 2.3px at 82% 33%, rgba(255,246,226,.85) 0 55%, transparent 56%), radial-gradient(1.6px 1.6px at 18% 41%, rgba(255,255,255,.75) 0 55%, transparent 56%), radial-gradient(1.9px 1.9px at 47% 54%, rgba(207,224,255,.7) 0 55%, transparent 56%), radial-gradient(1.5px 1.5px at 70% 62%, rgba(255,255,255,.6) 0 55%, transparent 56%); animation:yozora-twinkle 6.4s ease-in-out infinite, yozora-drift 220s ease-in-out infinite; } /* マイページは落ち着かせたいので流れ星は1本だけ・28秒周期 */ .mypage-skin-yozora::after { content:''; background-image:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(207,224,255,.55) 55%, rgba(232,240,255,.95) 88%, #fff 100%); background-repeat:no-repeat; background-size:118px 1.5px; background-position:0 0; transform-origin:0 0; animation:yozora-meteor-track 28s linear 4s infinite; } /* ══════════ ③ レビューカード（card）／通常・上質の2パターン ══════════ */ .card-skin-yozora { --card-panel-bg:#0c1130; --card-panel-border:rgba(207,224,255,.22); --card2:#0c1130; --line:rgba(207,224,255,.22); background: radial-gradient(9px 9px at 86% 12%, rgba(255,246,226,.75) 0 56%, rgba(255,246,226,0) 58%), radial-gradient(150px 150px at 86% 12%, rgba(255,238,200,.08) 0%, transparent 68%), radial-gradient(1.6px 1.6px at 14% 12%, rgba(255,255,255,.85) 0 55%, transparent 56%), radial-gradient(1.1px 1.1px at 32% 21%, rgba(207,224,255,.6) 0 55%, transparent 56%), radial-gradient(1.4px 1.4px at 52% 9%, rgba(255,255,255,.7) 0 55%, transparent 56%), radial-gradient(1px 1px at 68% 27%, rgba(207,224,255,.5) 0 55%, transparent 56%), radial-gradient(1.3px 1.3px at 24% 39%, rgba(255,255,255,.5) 0 55%, transparent 56%), radial-gradient(1.1px 1.1px at 78% 46%, rgba(207,224,255,.4) 0 55%, transparent 56%), radial-gradient(1px 1px at 46% 61%, rgba(255,255,255,.32) 0 55%, transparent 56%), linear-gradient(104deg, transparent 38%, rgba(198,214,255,.06) 47%, rgba(216,228,255,.1) 51%, transparent 62%), radial-gradient(60% 42% at 24% 24%, rgba(96,120,220,.15) 0%, transparent 72%), linear-gradient(180deg,#1b2350 0%,#101740 46%,#0a0e26 100%); } /* 上質：地は通常と同じ夜空のまま。金は薄いグラデーションで広げず、 月・星4粒・枠・見出しといった「小さく強い点」で純色のまま使う。 地の紺だけ通常よりわずかに紫寄りにして、金が締まって見えるようにしている。 */ .card-skin-yozora.is-quality { --card-panel-bg:#141039; --card-panel-border:rgba(255,205,105,.42); --card2:#141039; --line:rgba(255,205,105,.22); background: /* 月（小さくキレのある金。にじみは最小限） */ radial-gradient(10px 10px at 85% 12%, #ffd06a 0 55%, rgba(255,208,106,0) 58%), radial-gradient(46px 46px at 85% 12%, rgba(255,196,92,.28) 0%, transparent 72%), /* 金の星は4粒だけ。残りは通常と同じ白青 */ radial-gradient(2px 2px at 13% 11%, #ffd06a 0 55%, transparent 56%), radial-gradient(1.6px 1.6px at 66% 26%, #ffc85c 0 55%, transparent 56%), radial-gradient(1.5px 1.5px at 30% 41%, #ffd884 0 55%, transparent 56%), radial-gradient(1.3px 1.3px at 77% 58%, rgba(255,200,92,.9) 0 55%, transparent 56%), radial-gradient(1.4px 1.4px at 32% 21%, rgba(207,224,255,.75) 0 55%, transparent 56%), radial-gradient(1.6px 1.6px at 52% 9%, rgba(255,255,255,.8) 0 55%, transparent 56%), radial-gradient(1.1px 1.1px at 46% 61%, rgba(207,224,255,.5) 0 55%, transparent 56%), radial-gradient(1.3px 1.3px at 88% 33%, rgba(255,255,255,.55) 0 55%, transparent 56%), /* 天の川は白青のまま（金にしない） */ linear-gradient(104deg, transparent 38%, rgba(198,214,255,.06) 47%, rgba(216,228,255,.11) 51%, transparent 62%), radial-gradient(60% 42% at 24% 24%, rgba(112,104,210,.16) 0%, transparent 72%), linear-gradient(180deg,#221d54 0%,#151041 46%,#0a0820 100%); } /* ══════════ ④ アイコンフレーム（frame）══════════ CSS表示用。Canvas版（AVATAR_FRAME_CANVAS.yozora）と1対1で対応： 0 0 0 3px #0b1026 → 内側の輪（夜空の紺・太め） 0 0 0 4.2px rgba(207,224,255,.75) → 星の白青の細い輪 0 0 0 7px rgba(159,188,255,.18) → 外側のうっすら光る輪 */ .avatar-frame-yozora { border:none; box-shadow: 0 0 0 3px #0b1026, 0 0 0 4.2px rgba(207,224,255,.75), 0 0 0 7px rgba(159,188,255,.18); } /* ══════════ ⑥ 通知バッジ・未読ドット ══════════ 赤（#e5484d）は夜空の中で浮くので、星の白青に寄せている */ .badge-skin-yozora { --badge-color:#8ea8ff; } /* ══════════ 動きを減らす設定の端末では止める ══════════ */ @media (prefers-reduced-motion: reduce) { .board-skin-yozora::after, .mypage-skin-yozora::after { animation:none; opacity:0; } .board-skin-yozora::before, .mypage-skin-yozora::before { animation:none; opacity:.7; transform:none; } .bubble-skin-yozora::before { animation:none; opacity:.7; } }