/* cloud-yuna v3 frontend — time-linked atmospheric theme */ /* Think Tank (#/think-tank) 用 keyframes (v139) — その他 UI 影響なし */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } :root { /* Defaults overridden by JS based on time-of-day */ --bg-top: #0e0a1a; --bg-mid: #1a1430; --bg-bot: #07050e; --accent: #b69cff; --accent-soft: rgba(182, 156, 255, 0.16); --accent-strong: #d4c5ff; --text-pri: #ece3ff; --text-sec: #a89fc4; --text-mute: #6b6385; --surface: rgba(255, 255, 255, 0.05); --surface-2: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.10); --bubble-user: rgba(124, 92, 240, 0.22); --bubble-char: rgba(255, 255, 255, 0.06); --danger: #ff6b8a; --ok: #7ee7c0; --warn: #f5c87a; --shadow-up: 0 -2px 20px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* iOS standalone PWA: status bar / home indicator (safe-area) と overscroll バウンス領域は の solid background-color が描かれる。fixed gradient だけだとそこが白く露出する (Master 報告「上下が白い」) → solid 色で全埋め。 */ html { background-color: #07050e; color-scheme: dark; } html, body { margin: 0; padding: 0; min-height: 100dvh; background-color: #07050e; background-image: radial-gradient(ellipse at top, var(--bg-top) 0%, transparent 60%), linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-bot) 100%); background-attachment: fixed; background-repeat: no-repeat; color: var(--text-pri); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Segoe UI", sans-serif; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; } body { overflow-x: hidden; min-height: 100dvh; } a { color: var(--accent); text-decoration: none; } #app { min-height: 100dvh; display: flex; flex-direction: column; } .boot { padding: 40vh 0; text-align: center; color: var(--text-mute); } /* ════════════════════════════════════════════════════════════════════ v284-P1: passive heat halo — 受動状態でも空気が冷たくない 全 page の body に薄ピンク halo を 上下から滲ませる。 reduce-motion で pulse は止め、 静止の温度だけ残す。 z-index は #app の下 (背景扱い)。 v284-P8: 時刻別に halo 色相をシフト (CSS var で root に attach)。 ════════════════════════════════════════════════════════════════════ */ :root { --cy-ambient-top: rgba(255, 47, 134, 0.05); --cy-ambient-bot: rgba(255, 47, 134, 0.10); --cy-ambient-pulse: rgba(255, 47, 134, 0.04); } :root[data-time="morning"] { --cy-ambient-top: rgba(255, 180, 160, 0.04); --cy-ambient-bot: rgba(255, 140, 120, 0.07); --cy-ambient-pulse: rgba(255, 180, 160, 0.03); } :root[data-time="afternoon"] { --cy-ambient-top: rgba(200, 180, 220, 0.03); --cy-ambient-bot: rgba(180, 160, 200, 0.06); --cy-ambient-pulse: rgba(200, 180, 220, 0.02); } :root[data-time="evening"] { --cy-ambient-top: rgba(255, 120, 140, 0.06); --cy-ambient-bot: rgba(255, 100, 80, 0.10); --cy-ambient-pulse: rgba(255, 120, 100, 0.05); } :root[data-time="night"] { --cy-ambient-top: rgba(255, 47, 134, 0.06); --cy-ambient-bot: rgba(220, 60, 160, 0.12); --cy-ambient-pulse: rgba(255, 47, 134, 0.05); } body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(140% 50% at 50% -10%, var(--cy-ambient-top) 0%, transparent 55%), radial-gradient(100% 70% at 50% 115%, var(--cy-ambient-bot) 0%, transparent 60%), radial-gradient(80% 60% at 50% 50%, var(--cy-ambient-pulse) 0%, transparent 70%); animation: cy-ambient-breath 7.5s ease-in-out infinite; } @keyframes cy-ambient-breath { 0%, 100% { opacity: 0.74; filter: hue-rotate(0deg); } 50% { opacity: 1.0; filter: hue-rotate(-4deg); } } @media (prefers-reduced-motion: reduce) { body::after { animation: none; opacity: 0.86; } } /* #app は ambient halo の上に必ず重なる */ #app { position: relative; z-index: 1; } /* ════════════════════════════════════════════════════════════════════ v284-P3: touch heat ripple — 触れたら血色が滲む 主要ボタン全部 (.cy-dock-btn / .cy-newrow-btn / .cy-home-card / .foyer-hero / .foyer-hero-go / .menu-btn / .b.up) に共通 ripple。 active 中だけ heat-pink 滲み、 release で淡く消える。 ════════════════════════════════════════════════════════════════════ */ .cy-dock-btn, .cy-newrow-btn, .cy-home-card, .foyer-hero, .foyer-hero-go, .menu-btn, .b.up, .cy-place-cta, .cy-hub-btn { position: relative; overflow: hidden; isolation: isolate; } .cy-dock-btn::after, .cy-newrow-btn::after, .cy-home-card::after, .foyer-hero-go::after, .menu-btn::after, .b.up::after, .cy-place-cta::after, .cy-hub-btn::after { content: ''; position: absolute; inset: -10%; background: radial-gradient(circle at 50% 50%, rgba(255, 47, 134, 0.42) 0%, rgba(255, 140, 196, 0.22) 35%, transparent 70%); opacity: 0; pointer-events: none; transition: opacity 0.42s ease, transform 0.6s var(--cy-spring, ease); transform: scale(0.6); z-index: 0; mix-blend-mode: screen; } .cy-dock-btn:active::after, .cy-newrow-btn:active::after, .cy-home-card:active::after, .foyer-hero-go:active::after, .menu-btn:active::after, .b.up:active::after, .cy-place-cta:active::after, .cy-hub-btn:active::after { opacity: 1; transform: scale(1.3); transition: opacity 0.12s ease, transform 0.32s ease-out; } /* ボタン内 children を ripple の上に確実に */ .cy-dock-btn > *, .cy-newrow-btn > *, .cy-home-card > *, .foyer-hero-go > *, .cy-place-cta > *, .cy-hub-btn > * { position: relative; z-index: 1; } /* ════════════════════════════════════════════════════════════════════ v284-P5: card 呼吸 — 我が家 cluster card に subtle breath 静止画でなく、 微細に scale 振動。 1.0 ↔ 1.011、 周期 4.4s。 card 別 delay で全体が同期しない (生命感)。 ════════════════════════════════════════════════════════════════════ */ @keyframes cy-card-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.011); } } .cy-home-card { animation: cy-card-breath 4.4s ease-in-out infinite; } .cy-home-cards .cy-home-card:nth-child(2) { animation-delay: 0.55s; } .cy-home-cards .cy-home-card:nth-child(3) { animation-delay: 1.10s; } .cy-home-cards .cy-home-card:nth-child(4) { animation-delay: 1.65s; } .cy-home-cards .cy-home-card:nth-child(5) { animation-delay: 2.20s; } .cy-home-cards .cy-home-card:nth-child(6) { animation-delay: 2.75s; } .cy-home-cards .cy-home-card:nth-child(odd):not(:nth-child(1)) { animation-delay: calc(var(--n, 0) * 0.55s); } @media (prefers-reduced-motion: reduce) { .cy-home-card { animation: none; } } /* ════════════════════════════════════════════════════════════════════ v284-P2 改: hero whisper — char 本人の literal な声 を hero 下部に glass 吹き出しで表示。 旧版は中央 + 薄ピンク影で 顔と blend して見えなかった。 改: hero meta (名前/CTA) の すぐ上、 左右に margin あり、 backdrop blur 入り scrim 背景で 確実に読める。 reduce-motion でも見える。 ════════════════════════════════════════════════════════════════════ */ .cy-hero-whisper { position: absolute; left: 18px; right: 18px; bottom: calc(32% + env(safe-area-inset-bottom)); z-index: 4; text-align: center; pointer-events: none; font-family: 'Shippori Mincho', serif; font-size: 1.18rem; letter-spacing: 0.04em; color: #fff; line-height: 1.55; font-weight: 400; padding: 13px 20px; background: rgba(20, 8, 22, 0.52); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); border-radius: 16px; border: 1px solid rgba(255, 47, 134, 0.32); box-shadow: 0 8px 32px rgba(255, 47, 134, 0.22), 0 2px 8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85), 0 0 22px rgba(255, 47, 134, 0.32); max-width: 90vw; margin: 0 auto; opacity: 0; transform: translateY(8px); animation: cy-whisper-appear 0.7s ease-out 0.3s forwards; } @keyframes cy-whisper-appear { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* small "..." cue below the bubble (彼女の声が続きそう) */ .cy-hero-whisper::after { content: '…'; position: absolute; left: 50%; transform: translateX(-50%); bottom: -16px; font-size: 0.84rem; letter-spacing: 0.4em; color: rgba(255, 200, 220, 0.72); text-shadow: 0 0 12px rgba(255, 47, 134, 0.4); animation: cy-whisper-tail 2.6s ease-in-out 1s infinite; } @keyframes cy-whisper-tail { 0%, 100% { opacity: 0.6; } 50% { opacity: 1.0; } } @media (prefers-reduced-motion: reduce) { .cy-hero-whisper { animation: none; opacity: 1; transform: none; } .cy-hero-whisper::after { animation: none; } } /* ─── Home / Foyer (Day 3) ─── */ .home { max-width: 560px; margin: 0 auto; /* 全画面 PWA: home 上端も Dynamic Island/時計 を避ける (Master 報告 2026-05-18 「右上の歯車が押しにくい」の一因)。 */ padding: calc(28px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom)); width: 100%; } .foyer-hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; } .foyer-greet { font-size: 1.5rem; font-weight: 300; letter-spacing: 0.04em; color: var(--text-pri); } .foyer-time { font-size: 0.8rem; color: var(--text-sec); padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); border: 1px solid rgba(255, 255, 255, 0.08); } .foyer-input-row { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 28px; } .foyer-input { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 11px 16px; color: var(--text-pri); font-family: inherit; /* iOS auto-zoom 抑止: 16px 最低保証 (Master 指示 2026-05-22) */ font-size: 16px; line-height: 1.45; resize: none; outline: none; min-height: 44px; } .foyer-input:focus { border-color: var(--accent); } .foyer-go { flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #1a1320; border: none; font-size: 1.2rem; font-weight: 600; } .foyer-go:disabled { background: var(--surface-2); color: var(--text-mute); } /* ─── Foyer hero (背骨①: 入口で掴む「今ここに居る人」) ─── */ .foyer-hero-slot { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; } /* ─── デッキ (1人表示・タップ ‹/› で前後。peek/swipe は廃止=軽量) ─── */ .foyer-deck { position: relative; } .foyer-deck .foyer-hero { position: relative; z-index: 1; } .foyer-deck-next, .foyer-deck-back { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(20, 16, 32, 0.6); color: var(--accent-strong); font-size: 1.2rem; line-height: 1; border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(6px); cursor: pointer; } .foyer-deck-next { right: 10px; } .foyer-deck-back { left: 10px; } .foyer-deck-next:active, .foyer-deck-back:active { background: var(--accent-soft); } .foyer-hero { position: relative; border-radius: 18px; overflow: hidden; cursor: pointer; border: 1px solid var(--border); background: var(--bg-mid); aspect-ratio: 4 / 5; max-height: 64vh; transition: border-color 0.14s, transform 0.14s; } .foyer-hero:active { transform: scale(0.985); border-color: var(--accent); } .foyer-hero-img { position: absolute; inset: 0; background: var(--bg-mid) center / cover no-repeat; } .foyer-hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(7,5,14,0.86) 100%); } .foyer-hero-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 20px; z-index: 1; } .foyer-hero-cue { font-size: 0.72rem; letter-spacing: 0.22em; color: var(--accent-strong); margin-bottom: 6px; } .foyer-hero-name { font-family: 'Shippori Mincho', serif; font-size: 1.7rem; line-height: 1.2; color: var(--text-pri); text-shadow: 0 2px 12px rgba(0,0,0,0.55); } .foyer-hero-work { font-size: 0.78rem; color: var(--text-sec); margin-top: 3px; } .foyer-hero-go { margin-top: 14px; padding: 11px 22px; border-radius: 999px; background: var(--accent); color: #1a1320; border: none; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.03em; } .foyer-hero-go:active { background: var(--accent-strong); } .foyer-or { text-align: center; font-size: 0.74rem; letter-spacing: 0.14em; color: var(--text-mute); margin: 18px 0 10px; } /* ─── Suggestions ─── */ .sug-wrap { margin-bottom: 22px; } .sug-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 0.78rem; color: var(--text-sec); letter-spacing: 0.06em; } .sug-refresh { /* iOS HIG: タップ標的 ≥44px。旧 28px が「押しにくい」主因 (Master報告)。 */ width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--text-sec); font-size: 1.15rem; margin-right: -2px; /* 視覚位置は据え置きつつ縁から指1本分確保 */ } .sug-refresh:active { background: var(--accent-soft); color: var(--accent); } .sug-list { display: grid; gap: 8px; } .sug-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .sug-card:active { background: var(--accent-soft); border-color: var(--accent); } .sug-kind { display: inline-block; font-size: 0.65rem; letter-spacing: 0.08em; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; margin-bottom: 6px; } .sug-reunion .sug-kind { color: #ffb6c1; background: rgba(255, 182, 193, 0.16); } .sug-encounter .sug-kind { color: #9ec5ff; background: rgba(158, 197, 255, 0.16); } .sug-surprise .sug-kind { color: #f5c87a; background: rgba(245, 200, 122, 0.16); } .sug-title { font-size: 0.92rem; font-weight: 500; margin-bottom: 2px; } .sug-sub { font-size: 0.78rem; color: var(--text-sec); line-height: 1.45; } .sug-loading { padding: 12px; text-align: center; color: var(--text-mute); font-size: 0.8rem; } .sug-loading.err { color: var(--danger); } .char-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 380px) { .char-grid { grid-template-columns: 1fr; } } .char-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform 0.12s, border-color 0.12s; display: flex; flex-direction: column; aspect-ratio: 3 / 4; position: relative; } .char-card:active { transform: scale(0.97); border-color: var(--accent); } .char-card .img { flex: 1; background: var(--bg-mid) center / cover no-repeat; position: relative; } .char-card .img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%); } .char-card .meta { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 10px 10px; z-index: 1; } .char-card .name { font-size: 0.95rem; font-weight: 500; } .char-card .role { font-size: 0.7rem; color: var(--text-sec); margin-top: 2px; line-height: 1.3; } .char-card.ephemeral { border-color: rgba(245, 200, 122, 0.4); } .char-card.ephemeral .meta::before { content: "一期一会"; font-size: 0.6rem; color: var(--warn); display: block; margin-bottom: 2px; } /* v232 B-1: TOP「今日のあの子」hero card (Master 嗜好順 1 位 = お気に入り > 最近 chat > name)。 .cy-today-hero は first card に自動付与 (app.js TOP _renderListInto)。 full-width で 1 つ、16:10 wider aspect、Twilight 紫 glow + ✨ badge。 paradise mode 中は body[data-paradise=1] が #app を hide するため、自動的に非表示。 */ .char-card.cy-today-hero { grid-column: 1 / -1; aspect-ratio: 16 / 10; border-color: rgba(200, 160, 255, 0.55); box-shadow: 0 8px 26px rgba(160, 110, 240, 0.32), 0 0 24px rgba(200, 160, 255, 0.22), inset 0 0 24px rgba(120, 80, 175, 0.10); } .char-card.cy-today-hero::before { content: '✨ 今日のあの子'; position: absolute; top: 10px; left: 12px; z-index: 3; padding: 4px 10px; background: rgba(20, 10, 30, 0.78); border: 1px solid rgba(200, 160, 255, 0.55); border-radius: 999px; color: #f0e2ff; font-family: "Shippori Mincho", serif; font-size: 0.72rem; letter-spacing: 0.08em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,0.7); } .char-card.cy-today-hero .meta { padding: 14px 16px; } .char-card.cy-today-hero .cy-card-name, .char-card.cy-today-hero .name { font-size: 1.14rem !important; letter-spacing: 0.06em; } @media (max-width: 380px) { .char-card.cy-today-hero { aspect-ratio: 4 / 3; } } @media (prefers-reduced-motion: reduce) { .char-card.cy-today-hero { box-shadow: 0 6px 18px rgba(0,0,0,0.4); } } .char-card .mood-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); z-index: 2; } .empty { text-align: center; color: var(--text-mute); padding: 60px 20px; font-size: 0.85rem; } .menu-row { display: flex; gap: 8px; margin-top: 8px; } .cy-menu-entry { margin-top: 14px; } .cy-menu-experience { margin-top: 8px; } .cy-menu-label { margin-top: 22px; margin-bottom: 4px; font-family: 'Shippori Mincho', serif; font-size: 0.78rem; color: rgba(200, 160, 255, 0.62); letter-spacing: 0.18em; text-align: center; } .menu-btn { flex: 1; padding: 14px 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; color: var(--text-pri); font-size: 0.84rem; letter-spacing: 0.04em; text-align: center; cursor: pointer; transition: transform 100ms ease, background 200ms ease, border-color 200ms ease; } .menu-btn:active { background: var(--accent-soft); border-color: var(--accent); transform: scale(0.96); } .cy-pinsa-entry { background: linear-gradient(135deg, rgba(80, 14, 28, 0.55), rgba(40, 8, 18, 0.78)); border-color: rgba(255, 107, 138, 0.42); color: #ffe4ea; } .cy-pet-entry { background: linear-gradient(135deg, rgba(60, 30, 30, 0.62), rgba(40, 22, 28, 0.85)); border-color: rgba(220, 160, 140, 0.55); color: #ffe4d0; } .cy-exp-sit { background: linear-gradient(135deg, rgba(40, 28, 60, 0.62), rgba(28, 18, 48, 0.85)); border-color: rgba(150, 130, 220, 0.55); color: #e0d8ff; } .cy-exp-paradise { background: linear-gradient(135deg, rgba(58, 16, 36, 0.62), rgba(38, 10, 24, 0.85)); border-color: rgba(220, 100, 140, 0.55); color: #ffd5e8; } /* v279: 💕 我が家の子たち 横スクロール strip */ .cy-home-strip { margin: 18px 0 14px; } .cy-home-strip-title { font-family: 'Shippori Mincho', serif; font-size: 0.92rem; color: #ffd5e0; letter-spacing: 0.08em; margin-bottom: 8px; text-shadow: 0 0 12px rgba(255, 140, 170, 0.32); } .cy-home-strip-scroll { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scroll-snap-type: x mandatory; } .cy-home-strip-card { flex: 0 0 auto; width: 130px; height: 160px; border-radius: 12px; background: linear-gradient(160deg, rgba(40, 22, 38, 0.78), rgba(22, 12, 28, 0.92)); border: 1px solid rgba(255, 220, 230, 0.18); padding: 12px 10px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; scroll-snap-align: start; transition: transform 100ms ease, border-color 200ms ease; } .cy-home-strip-card:active { transform: scale(0.96); } .cy-home-strip-card.pet { border-color: rgba(220, 160, 140, 0.55); background: linear-gradient(160deg, rgba(60, 30, 30, 0.75), rgba(40, 22, 28, 0.92)); } .cy-home-strip-card.regular { border-color: rgba(255, 200, 100, 0.55); background: linear-gradient(160deg, rgba(60, 40, 14, 0.75), rgba(40, 28, 14, 0.92)); } .cy-home-strip-name { font-family: 'Shippori Mincho', serif; font-size: 0.86rem; color: #ffe4ea; letter-spacing: 0.04em; line-height: 1.4; } .cy-home-strip-meta { font-size: 0.66rem; color: rgba(255, 220, 230, 0.62); letter-spacing: 0.04em; margin-top: auto; } /* ════════════════════════════════════════════════════════════════════ v280-D: 入口 3-dock (場 / 我が家 / 相談) — 大型タップ、 hero の下 v280-D: "新しい子と" 折込 row (一期一会/召喚/自作/ピンサロ) v280-D: ⚙ floating fab (常時アクセス、 右上 glass) v280-A: /place hub のスタイル素材は inline で完結 v280-B: /home hub の cluster header / scroll は inline 完結 ════════════════════════════════════════════════════════════════════ */ .cy-dock { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 6px; margin: 22px 0 12px; } .cy-dock-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 12px 2px 10px; border-radius: 12px; background: linear-gradient(160deg, rgba(20, 16, 32, 0.72), rgba(12, 8, 22, 0.92)); border: 1px solid rgba(200, 160, 255, 0.32); color: #f0e2ff; font-family: 'Shippori Mincho', serif; cursor: pointer; transition: transform 0.16s var(--cy-spring, ease), box-shadow 0.2s ease, border-color 0.2s ease; -webkit-tap-highlight-color: transparent; } .cy-dock-btn:active { transform: scale(0.94); box-shadow: 0 0 0 1.5px currentColor, 0 8px 24px -4px rgba(200, 160, 255, 0.32); filter: brightness(1.15) saturate(1.2); } .cy-dock-emoji { font-size: 1.35rem; line-height: 1; } .cy-dock-label { font-size: 0.66rem; letter-spacing: 0.04em; color: #fff; } .cy-newrow { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; } .cy-newrow-btn { flex: 1 0 auto; min-width: calc(50% - 4px); padding: 11px 8px; background: rgba(20, 16, 32, 0.55); border: 1px solid rgba(200, 160, 255, 0.16); border-radius: 10px; color: #cfc4e6; font-size: 0.8rem; letter-spacing: 0.04em; font-family: 'Shippori Mincho', serif; cursor: pointer; transition: transform 0.14s ease, background 0.2s ease; } .cy-newrow-btn:active { transform: scale(0.96); background: rgba(40, 28, 60, 0.72); } .cy-newrow-pinsa { background: linear-gradient(135deg, rgba(80, 14, 28, 0.55), rgba(40, 8, 18, 0.78)); border-color: rgba(255, 107, 138, 0.42); color: #ffe4ea; } .cy-newrow-label { margin: 22px 0 6px; font-family: 'Shippori Mincho', serif; font-size: 0.74rem; color: rgba(200, 160, 255, 0.55); letter-spacing: 0.18em; text-align: center; } .cy-settings-fab { /* v281-ζ: sug-refresh ⚙ の下 (60px 下) に置く glass fab。 ichigo prefs ⚙ (sug-refresh) と機能が別なので位置で分離。 */ position: fixed; top: calc(env(safe-area-inset-top) + 64px); right: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(20, 16, 32, 0.62); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(200, 160, 255, 0.32); color: #e8d8ff; font-size: 1rem; cursor: pointer; z-index: 22; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: transform 0.16s var(--cy-spring, ease); } .cy-settings-fab:active { transform: scale(0.9); filter: brightness(1.18); } /* /home hub の cluster section (タッチで chat) */ .cy-home-section { margin-bottom: 6px; } .cy-home-section button:active { transform: scale(0.96); } .cy-home-section button { transition: transform 0.14s ease; } /* v281-γ: 廊下 縦長カード (full-width、 BG image full-bleed、 右側 meta) */ .cy-home-cards { display: flex; flex-direction: column; gap: 12px; padding: 2px 0 6px; } .cy-home-card { position: relative; width: 100%; min-height: 210px; padding: 0; background: #1a1322; border: 1px solid rgba(200, 160, 255, 0.22); border-radius: 18px; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42); transition: transform 0.18s var(--cy-spring, ease), box-shadow 0.22s ease; } .cy-home-card:active { transform: scale(0.98); filter: brightness(1.12) saturate(1.18); } .cy-home-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center 22%; filter: brightness(0.92); transition: transform 0.4s ease; } .cy-home-card:active .cy-home-card-bg { transform: scale(1.04); } .cy-home-card-nobg { background: radial-gradient(120% 90% at 30% 30%, rgba(200, 160, 255, 0.32), rgba(20, 16, 32, 0) 70%), radial-gradient(80% 60% at 70% 70%, rgba(255, 140, 180, 0.16), rgba(20, 16, 32, 0) 70%), linear-gradient(180deg, #1a1228 0%, #08040e 100%); } .cy-home-card-tint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8, 4, 14, 0.18) 0%, rgba(8, 4, 14, 0.42) 38%, rgba(8, 4, 14, 0.85) 72%, rgba(8, 4, 14, 0.96) 100%); } .cy-home-card-cont { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; text-align: right; min-height: 210px; padding: 18px 20px 18px 80px; color: #fff; font-family: 'Shippori Mincho', serif; } .cy-home-card-badge { display: inline-block; font-size: 0.66rem; letter-spacing: 0.08em; padding: 4px 11px; background: rgba(20, 12, 28, 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; margin-bottom: 8px; color: #f0e2ff; } .cy-home-card-name { font-size: 1.5rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1.2; margin-bottom: 4px; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85), 0 0 22px rgba(0, 0, 0, 0.5); } .cy-home-card-state { font-size: 0.78rem; color: rgba(240, 226, 255, 0.86); letter-spacing: 0.1em; margin-bottom: 4px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); font-family: 'Noto Sans JP', sans-serif; } .cy-home-card-sub { font-size: 0.7rem; color: rgba(200, 180, 220, 0.74); line-height: 1.5; letter-spacing: 0.04em; font-family: 'Noto Sans JP', sans-serif; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ════════════════════════════════════════════════════════════════════ v281-β: /place 縦長 "館" scene — 場の佇まいを image-forward で 3 scene が full viewport snap、 BG 画像 + tint + 大字場名 + CTA。 image-forward が「3 つの場を扉ごしに felt する」 入口になる。 ════════════════════════════════════════════════════════════════════ */ /* v283 fix: 旧版は margin-left:50% + transform で escape していたが flex 親で ピンサロ scene が右に寄って見えなかった (Master 報告)。 position:fixed の フルブリードに変更 = #app の flex / max-width に依存しない確実な full viewport。 */ .cy-place-wrap { position: fixed; inset: 0; width: 100vw; height: 100dvh; scroll-snap-type: y mandatory; scroll-behavior: smooth; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #04030a; z-index: 50; } .cy-place-back { position: fixed; top: calc(env(safe-area-inset-top) + 12px); left: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(20, 16, 32, 0.6); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 1.1rem; cursor: pointer; z-index: 30; -webkit-tap-highlight-color: transparent; transition: transform 0.16s ease; } .cy-place-back:active { transform: scale(0.9); } .cy-place-scene { position: relative; width: 100vw; min-height: 100dvh; scroll-snap-align: start; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; background-size: cover; background-position: center; } .cy-place-bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; opacity: 0; transition: opacity 0.9s ease; filter: brightness(0.78) saturate(1.05); } .cy-place-tint { position: absolute; inset: 0; pointer-events: none; } .cy-place-cont { position: relative; z-index: 2; width: 100%; max-width: 560px; padding: 0 26px calc(110px + env(safe-area-inset-bottom)); text-align: center; font-family: 'Shippori Mincho', serif; } .cy-place-emoji { font-size: 3.2rem; line-height: 1; margin-bottom: 14px; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.6)); animation: cy-place-breath 4.2s ease-in-out infinite; } @keyframes cy-place-breath { 0%, 100% { transform: scale(1); filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.6)) brightness(1); } 50% { transform: scale(1.05); filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.7)) brightness(1.12); } } .cy-place-name { font-size: 3.2rem; letter-spacing: 0.18em; font-weight: 600; margin-bottom: 14px; line-height: 1.1; text-shadow: 0 3px 22px rgba(0, 0, 0, 0.75); } .cy-place-cue { color: #f0e2ff; font-size: 0.95rem; letter-spacing: 0.16em; margin-bottom: 8px; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85); line-height: 1.6; } .cy-place-tone { color: rgba(220, 200, 240, 0.78); font-size: 0.72rem; letter-spacing: 0.18em; margin-bottom: 26px; font-family: 'Noto Sans JP', sans-serif; } .cy-place-cta { display: inline-block; padding: 16px 36px; font-size: 1rem; font-weight: 700; letter-spacing: 0.14em; font-family: 'Shippori Mincho', serif; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 226, 255, 0.88)); color: #1a0a1e; border: 0; border-radius: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.16s var(--cy-spring, ease), filter 0.2s ease; } .cy-place-cta:active { transform: scale(0.94); filter: brightness(1.18) saturate(1.32); } .cy-place-down { position: absolute; bottom: calc(28px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); font-size: 1.6rem; color: rgba(255, 255, 255, 0.62); pointer-events: none; animation: cy-place-down-bounce 2.2s ease-in-out infinite; z-index: 3; } @keyframes cy-place-down-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.62; } 50% { transform: translateX(-50%) translateY(8px); opacity: 0.92; } } /* ─── Chat view ─── */ .chat { display: flex; flex-direction: column; height: 100dvh; max-width: 640px; width: 100%; margin: 0 auto; position: relative; } .chat-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55; background: var(--char-bg, transparent) center / cover no-repeat; /* iPhone Safari 軽量化: blur 6→2、saturate 削除 */ filter: blur(2px) brightness(0.62); transition: opacity 0.3s; } .chat-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.20) 28%, rgba(0,0,0,0.20) 68%, rgba(0,0,0,0.70) 100%); } /* VN mode: 画像を本気で見せる (Day 5) */ .chat.vn .chat-bg { opacity: 1.0; filter: none; } .chat.vn .chat-log { background: transparent; } .chat.vn .bubble { background: rgba(0, 0, 0, 0.62); border-color: rgba(255, 255, 255, 0.12); /* backdrop-filter は iPhone heavy なので solid に */ } .chat.vn .chat-hd, .chat.vn .chat-foot { background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); } .chat.vn .chat-foot { background: linear-gradient(0deg, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0) 100%); } .chat.vn .chat-bg { pointer-events: auto; cursor: pointer; } .chat .vn-only { display: none; } .chat.vn .vn-only { display: flex !important; } .chat.vn-text-hidden .chat-log, .chat.vn-text-hidden .chat-foot, .chat.vn-text-hidden .chat-hd { opacity: 0; pointer-events: none; transition: opacity 0.3s; } .chat.vn-text-hidden .chat-bg { pointer-events: auto; } .chat-hd { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 14px 8px; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%); z-index: 2; position: relative; } .chat-hd .back { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,0.4); font-size: 1.2rem; color: var(--text-pri); } .chat-hd .who { flex: 1; line-height: 1.2; } .chat-hd .who .name { font-size: 0.95rem; font-weight: 500; } .chat-hd .who .mood { font-size: 0.7rem; color: var(--text-sec); } .chat-hd .gear { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,0.4); font-size: 1rem; color: var(--text-pri); } .chat-log { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 12px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; z-index: 1; position: relative; } .chat-log::-webkit-scrollbar { width: 0; } .turn { display: flex; margin: 8px 0; gap: 8px; } .turn.user { flex-direction: row-reverse; } .turn .avatar { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--char-avatar, var(--bg-mid)) center / cover no-repeat; border: 1px solid var(--border); align-self: flex-end; margin-bottom: 4px; } .turn.user .avatar { display: none; } .bubble { max-width: 78%; padding: 10px 14px; border-radius: 18px; background: rgba(20, 16, 32, 0.72); border: 1px solid var(--border); /* Master 指示 2026-05-20 (2): まだ小さい→もっと大きく。--cy-fs を JS が LS(cy-fontsize) から設定 (小1.15 / 中1.4 / 大1.7 / 特大2.05rem)。 既定 1.4rem (旧 0.92rem の約1.5倍)。narration/dialogue/seg は em 相対 なので連動スケール。 */ font-size: var(--cy-fs, 1.4rem); line-height: 1.75; white-space: pre-wrap; word-break: break-word; position: relative; /* iPhone Safari の重い freeze 対策で backdrop-filter 廃止、solid translucent bg に */ } .turn.user .bubble { background: rgba(124, 92, 240, 0.32); } .turn.user .bubble { background: var(--bubble-user); border-color: rgba(124, 92, 240, 0.35); border-bottom-right-radius: 6px; } .turn.char .bubble { border-bottom-left-radius: 6px; } .bubble.streaming::after { content: "▍"; color: var(--accent); margin-left: 2px; animation: blink 0.9s infinite; } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* waiting: first chunk 到着前の placeholder (• • • bounce) */ .bubble.waiting { min-width: 60px; padding: 12px 18px; } .bubble.waiting::after { content: none; } /* streaming cursor 表示しない */ .bubble.waiting::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 14px 0 var(--accent), 28px 0 var(--accent); animation: dots-bounce 1.1s infinite ease-in-out; } @keyframes dots-bounce { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } .bubble.retrying::after { color: var(--warn); } /* 心の声 (inner monologue) — 全角丸括弧 （…） を視覚的に区別 */ .inner-voice { display: inline; color: var(--accent-strong); opacity: 0.78; font-style: italic; font-size: 0.88em; letter-spacing: 0.02em; } .inner-voice::before, .inner-voice::after { /* 括弧自体は元 string にあるので、装飾線だけ追加 (オプション) */ content: ""; } /* 地の文 (narration) — `*…*`、記号は描画側で除去済。 Master 指示 2026-05-20: ナレーションが見えにくい → 台詞と同じ大きさ・同じ色。 (旧 de-emphasize 方針は廃止。可読性最優先) */ .narration { display: inline; color: rgba(255, 255, 255, 0.97); font-size: 1em; font-style: normal; } /* 台詞 (dialogue) — 「…」『…』 を主役として明色・やや強調 */ .dialogue { display: inline; color: rgba(255, 255, 255, 0.97); font-weight: 500; } /* 段落リズム。⚠実レンダラは .chat27-wrap (旧 .bubble は dead path = DOM 上 0 個)。Master「ずっと変化が見えない」の真因 = これらが .bubble 限定で 実 DOM に一切適用されていなかった。両方に効かせる。 Master 指示 2026-05-20 (3): 境界は少し狭く (2.6→1.9em)。同種連続は詰め (0.45em)。block margin collapse で境界=max(0.45,1.9)=1.9em。 */ .bubble .seg, .chat27-wrap .seg { margin: 0 0 0.45em 0; } .bubble .seg:last-child, .chat27-wrap .seg:last-child { margin-bottom: 0; } .bubble .seg-narration + .seg-dialogue, .bubble .seg-dialogue + .seg-narration, .bubble .seg-narration + .seg-plain, .bubble .seg-plain + .seg-narration, .chat27-wrap .seg-narration + .seg-dialogue, .chat27-wrap .seg-dialogue + .seg-narration, .chat27-wrap .seg-narration + .seg-plain, .chat27-wrap .seg-plain + .seg-narration { margin-top: 1.9em; } .bubble .seg-plain, .chat27-wrap .seg-plain { color: rgba(255, 255, 255, 0.78); } /* 話者名ラベル (名前 + 「台詞」、決定論前置) */ .bubble .speaker, .chat27-wrap .speaker { color: rgba(255, 255, 255, 0.6); font-weight: 600; font-size: 0.9em; margin-right: 0.18em; } /* superseded: 一回目の出力 (validator が reject、二回目で置換中) */ .bubble.superseded { opacity: 0.45; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.4); font-size: 0.82rem; } .chat-foot { flex: 0 0 auto; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0) 100%); z-index: 2; position: relative; } /* mode-row / mode-pill 廃止 (Master 指示: mode 概念削除) */ .input-row { display: flex; gap: 8px; align-items: flex-end; } .input-row textarea { flex: 1; resize: none; background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; color: var(--text-pri); padding: 9px 14px; /* 🩹 Master 指示 2026-05-22: iOS Safari は input 要素の font-size が 16px 未満だと focus 時に auto-zoom する (戻すのが面倒)。16px 直書きで 抑止。padding を 10→9px に下げて visual 高さは旧 (≈40px) と同等に保つ。 */ font-size: 16px; font-family: inherit; line-height: 1.4; max-height: 30vh; min-height: 40px; outline: none; } .input-row textarea:focus { border-color: var(--accent); } .input-row .send { flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #1a1320; border: none; font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; justify-content: center; } .input-row .send:disabled { background: var(--surface-2); color: var(--text-mute); } .input-row .send.stop { background: var(--danger); color: #fff; } /* ─── Long-press annotation menu ─── */ .lp-menu { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(20, 16, 32, 0.97); border-top: 1px solid var(--border); padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); z-index: 30; transform: translateY(100%); transition: transform 0.2s ease-out; backdrop-filter: blur(20px); } .lp-menu.on { transform: translateY(0); } .lp-menu .row { display: flex; gap: 8px; } .lp-menu .b { flex: 1; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; text-align: center; font-size: 0.9rem; } .lp-menu .b.up:active { background: rgba(126, 231, 192, 0.16); border-color: var(--ok); } .lp-menu .b.dn:active { background: rgba(255, 107, 138, 0.16); border-color: var(--danger); } .lp-menu .b.cancel { background: transparent; color: var(--text-mute); } .lp-backdrop { position: fixed; inset: 0; z-index: 29; background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s; } .lp-backdrop.on { opacity: 1; pointer-events: auto; } /* 背の高い sheet (一期一会設定 等) が viewport を超えて画面外に伸び、 上部 (性別/R-18) が触れなくなる事象の修正。sheet 内スクロールに収める。 */ .lp-menu.lp-sheet { max-height: 85vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 選択中 toggle の常時可視化 (従来 :active のみで選択状態が見えなかった) */ .lp-menu .b.up { background: rgba(255, 182, 193, 0.16); border-color: #ffb6c1; color: var(--text-pri); } /* ─── Toast ─── */ .toast { position: fixed; left: 50%; bottom: 24%; transform: translateX(-50%) translateY(20px); background: rgba(20, 16, 32, 0.95); border: 1px solid var(--border); padding: 8px 14px; border-radius: 999px; font-size: 0.8rem; opacity: 0; transition: opacity 0.2s, transform 0.2s; z-index: 40; pointer-events: none; } .toast.on { opacity: 1; transform: translateX(-50%) translateY(0); } /* ─── Flow views (encounter / summon) ─── */ .flow { max-width: 560px; margin: 0 auto; padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); } /* v227 Master 指示 2026-05-24 (重複監査): .flow-back は cy-fab-back FAB と機能重複。視覚的に「ボタン」ではなく 「どこから来たか breadcrumb」になるよう従属表示にする。tap も活きるが primary は左下 FAB、これは context label 兼予備。 */ .flow-back { background: transparent; border: none; color: rgba(168, 159, 196, 0.62); /* dim breadcrumb 色 */ font-size: 0.72rem; /* 小さく */ padding: 4px 2px 4px 0; margin-bottom: 10px; letter-spacing: 0.08em; font-family: -apple-system, BlinkMacSystemFont, "Shippori Mincho", serif; font-weight: 400; cursor: pointer; opacity: 0.85; transition: opacity 160ms ease, color 160ms ease; display: inline-flex; align-items: center; gap: 4px; } .flow-back:hover { opacity: 1; color: rgba(200,160,255,0.92); } .flow-back:active { color: var(--accent); opacity: 1; } .flow h1 { font-size: 1.4rem; font-weight: 300; letter-spacing: 0.05em; margin: 0 0 8px; } .flow-sub { font-size: 0.8rem; color: var(--text-sec); margin-bottom: 22px; line-height: 1.5; } .flow-examples { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .flow-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text-sec); font-size: 0.75rem; padding: 5px 11px; } .flow-chip:active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .flow-textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 11px 14px; color: var(--text-pri); font-family: inherit; /* iOS auto-zoom 抑止 */ font-size: 16px; line-height: 1.5; resize: none; outline: none; margin-bottom: 14px; } .flow-textarea:focus { border-color: var(--accent); } .flow-field { margin-bottom: 14px; } .flow-field label { display: block; font-size: 0.75rem; color: var(--text-sec); margin-bottom: 6px; } .flow-field input[type="text"] { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; color: var(--text-pri); font-family: inherit; /* iOS auto-zoom 抑止 */ font-size: 16px; outline: none; } .flow-field input[type="text"]:focus { border-color: var(--accent); } .cb-label { font-size: 0.85rem; color: var(--text-pri); display: flex; align-items: center; gap: 8px; } .cb-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); } .flow-submit { width: 100%; padding: 14px; font-size: 0.95rem; border-radius: 14px; margin-top: 6px; } .flow-submit:disabled { opacity: 0.5; } .flow-status { margin-top: 12px; font-size: 0.85rem; color: var(--text-sec); text-align: center; min-height: 1.4em; } .flow-status.err { color: var(--danger); } .summon-stages { margin-top: 14px; font-size: 0.8rem; line-height: 1.7; } .summon-stage { color: var(--text-sec); } .summon-stage.done { color: var(--ok); } .summon-stage.failed { color: var(--danger); } /* ─── Ephemeral menu buttons (chat ⋯) ─── */ .lp-menu .b.up:active { background: rgba(255, 182, 193, 0.18); border-color: #ffb6c1; } /* ─── Settings stub ─── */ .settings { max-width: 560px; margin: 0 auto; padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); } .settings h1 { font-size: 1.2rem; font-weight: 400; margin: 0 0 18px; } .settings .field { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; } .settings .field label { display: block; font-size: 0.75rem; color: var(--text-sec); margin-bottom: 6px; } .settings .field input, .settings .field select, .settings .field textarea { width: 100%; background: transparent; border: none; color: var(--text-pri); /* iOS auto-zoom 抑止 */ font-size: 16px; font-family: inherit; outline: none; } .settings .field textarea { resize: vertical; min-height: 60px; } .btn-row { display: flex; gap: 8px; margin-top: 16px; } .btn { padding: 10px 16px; border-radius: 10px; background: var(--accent); color: #1a1320; border: none; font-size: 0.85rem; font-weight: 500; } .btn.sec { background: var(--surface-2); color: var(--text-pri); border: 1px solid var(--border); } .btn:active { opacity: 0.7; } /* ─── Settings / persona editor (Day 6, Master feedback) ─── */ .settings-section-hd { margin: 22px 0 10px; font-size: 0.78rem; color: var(--text-sec); letter-spacing: 0.08em; text-transform: none; } .settings .field input[type="number"] { width: 100%; } .settings .field textarea { width: 100%; background: transparent; border: none; color: var(--text-pri); font-family: inherit; /* iOS auto-zoom 抑止 */ font-size: 16px; outline: none; resize: vertical; min-height: 60px; } .field-row { display: flex; gap: 10px; } .field-row .field { flex: 1; } .persona-editor .field input, .persona-editor .field select { width: 100%; } /* ─── Ephemeral home section (Master feedback: separate from saved) ─── */ .eph-hd { color: var(--warn) !important; margin-top: 24px; } .eph-grid .char-card { border-style: dashed; opacity: 0.92; } /* ─── Relationship editor / sheet ─── */ .lp-sheet .field { margin-bottom: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; } .lp-sheet .field label { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-sec); margin-bottom: 6px; } .lp-sheet .field input[type="range"] { width: 100%; accent-color: var(--accent); } .lp-sheet .field textarea { width: 100%; background: transparent; color: var(--text-pri); border: none; outline: none; font-family: inherit; /* iOS auto-zoom 抑止 */ font-size: 16px; resize: vertical; min-height: 60px; } .range-val { color: var(--accent); font-weight: 500; font-size: 0.85rem; } .lp-sheet h3 { color: var(--text-pri); } /* ─── Memory view (image gallery + set-as-bg) ─── */ .memory { max-width: 720px; margin: 0 auto; padding: 24px 14px calc(24px + env(safe-area-inset-bottom)); } .memory h1 { font-size: 1.3rem; font-weight: 300; margin: 0 0 6px; } .mem-cur { margin: 14px 0 18px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } .mem-cur-empty { font-size: 0.8rem; color: var(--text-mute); text-align: center; } .mem-cur-row { display: flex; gap: 12px; align-items: center; } .mem-cur-thumb { flex: 0 0 64px; height: 64px; background: var(--bg-mid) center / cover no-repeat; border-radius: 8px; border: 1px solid var(--border); } .mem-cur-meta { flex: 1; font-size: 0.78rem; color: var(--text-sec); display: flex; justify-content: space-between; align-items: center; gap: 8px; } .mem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; } .mem-tile { aspect-ratio: 3 / 4; background: var(--bg-mid) center / cover no-repeat; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; position: relative; overflow: hidden; transition: transform 0.12s, border-color 0.12s; } .mem-tile:active { transform: scale(0.96); border-color: var(--accent); } .mem-tile .mem-meta { position: absolute; left: 4px; right: 4px; bottom: 4px; display: flex; flex-wrap: wrap; gap: 3px; } .mem-badge { font-size: 0.6rem; padding: 1px 5px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: var(--text-sec); backdrop-filter: blur(2px); } .mem-badge.r18 { background: rgba(255, 107, 138, 0.8); color: #fff; } .mem-badge.mood { background: rgba(124, 92, 240, 0.65); color: #fff; } .mem-badge.ugo { background: rgba(245, 200, 122, 0.75); color: #1a1320; } /* Image detail modal */ .mem-detail-img { width: 100%; aspect-ratio: 3/4; max-height: 50vh; background: var(--bg-mid) center / contain no-repeat; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 10px; } .mem-detail-line { font-size: 0.78rem; color: var(--text-sec); padding: 3px 2px; line-height: 1.45; word-break: break-word; } .mem-detail-line.tags { color: var(--text-mute); } .mem-detail-line.link { color: var(--accent); display: inline-block; padding: 6px 0; } /* =========================================================== Twilight Intimacy theme (Master 指示 2026-05-15、ux-design-spec) 既存 variables を維持しつつ、spec 名 alias + 時刻連動 + glass + 角丸 =========================================================== */ :root { /* spec alias (existing → new naming) */ --bg-primary: #0a0810; --bg-secondary: #141020; --bg-tertiary: #1e1830; --text-primary: var(--text-pri); --text-secondary: var(--text-sec); --text-tertiary: var(--text-mute); --accent-primary: var(--accent); --accent-warm: #ffb088; --accent-intimate: #ff6888; --accent-success: var(--ok); --bubble-user-border: rgba(160, 120, 255, 0.32); --bubble-char-border: rgba(255, 255, 255, 0.10); --glass: rgba(20, 16, 32, 0.78); --glass-border: rgba(255, 255, 255, 0.10); --glass-blur: 18px; --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.32); --shadow-glow: 0 0 18px rgba(200, 160, 255, 0.10); --font-body: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; --font-display: 'Shippori Mincho', 'Yu Mincho', "Hiragino Mincho ProN", serif; } /* 時刻連動 palette (data-time attribute は index.html の inline script で set) */ [data-time="morning"] { --bg-top: #1a0e0a; --bg-mid: #20140a; --bg-bot: #08060e; --accent: #ffc8a0; --accent-primary: #ffc8a0; --accent-warm: #ff9060; } [data-time="afternoon"] { --bg-top: #0a0a18; --bg-mid: #0e1226; --bg-bot: #06060e; --accent: #88c0ff; --accent-primary: #88c0ff; --accent-warm: #a0d0ff; } [data-time="evening"] { --bg-top: #1a0a0a; --bg-mid: #260e10; --bg-bot: #0c0408; --accent: #ff8860; --accent-primary: #ff8860; --accent-warm: #ffa070; } [data-time="night"] { --bg-top: #0a081c; --bg-mid: #181028; --bg-bot: #05030c; --accent: #c8a0ff; --accent-primary: #c8a0ff; --accent-warm: #ffb088; } /* Font family override (Noto Sans JP body + Shippori display) Master 指示 2026-05-15: specificity 上げる (html, body の specificity 0,0,0,2 を勝つ) */ html, body, html body { font-family: var(--font-body) !important; letter-spacing: 0.015em !important; } /* Display font for headings + Shippori-marked classes */ html h1, html h2, html h3, .display, .char-name-display, .foyer-greet, .foyer-subgreet { font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: 0.04em; } /* Foyer greeting dramatic upgrade (Master 指示 2026-05-15、spec 3.1) */ .foyer-hd { flex-direction: column !important; align-items: flex-start !important; gap: 6px; margin-bottom: 32px !important; } .foyer-greet { font-size: 2.1rem !important; font-weight: 400 !important; color: var(--text-pri); line-height: 1.3 !important; letter-spacing: 0.06em !important; } .foyer-subgreet { font-size: 0.95rem; color: var(--text-sec); margin-top: 2px; letter-spacing: 0.08em; opacity: 0.85; } .foyer-time { font-size: 0.72rem !important; margin-top: 8px; padding: 4px 12px !important; background: rgba(200, 160, 255, 0.10) !important; border: 1px solid rgba(200, 160, 255, 0.20) !important; letter-spacing: 0.15em; font-family: 'Shippori Mincho', serif; } .foyer-input { background: rgba(20, 16, 32, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 18px !important; } .foyer-go { background: linear-gradient(135deg, var(--accent-primary, #c8a0ff), #a07cff) !important; box-shadow: 0 4px 14px rgba(200, 160, 255, 0.30); } /* sug-hd (section header) to Shippori for cohesion */ .sug-hd { font-family: 'Shippori Mincho', serif; letter-spacing: 0.10em; } /* User bubble (chat 画面の右側 user の発言) - 紫帯を強めに */ .bubble[data-role="user"], div[data-role="user"].bubble { border-radius: 18px 18px 4px 18px !important; background: linear-gradient(135deg, rgba(180, 140, 255, 0.30), rgba(140, 100, 230, 0.22)) !important; border: 1px solid rgba(200, 160, 255, 0.40) !important; box-shadow: 0 2px 12px rgba(140, 100, 230, 0.18); } /* Char bubble (左側 kyara) - glass panel + 強めの blur で variation */ .bubble[data-role="assistant"], .bubble[data-role="char"], div[data-role="assistant"].bubble, div[data-role="char"].bubble { border-radius: 18px 18px 18px 4px !important; background: linear-gradient(135deg, rgba(30, 24, 48, 0.78), rgba(20, 16, 32, 0.65)) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); } /* 全体背景 gradient を時刻連動でクッキリ (もっと変化を見せる) */ html, body { background: radial-gradient(ellipse 90% 60% at 50% -20%, var(--accent-soft, rgba(200, 160, 255, 0.18)) 0%, transparent 55%), radial-gradient(ellipse 70% 50% at 90% 80%, rgba(255, 100, 130, 0.06) 0%, transparent 50%), linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 50%, var(--bg-bot) 100%) !important; background-attachment: fixed !important; } /* Reusable glass panel */ .glass { background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-radius: 16px; } /* Twilight bubble: LINE 風の片側だけ小さい角丸 (spec 4.2) */ .bubble[data-role="user"] { border-radius: 18px 18px 4px 18px; background: var(--bubble-user); border: 1px solid var(--bubble-user-border); } .bubble[data-role="assistant"], .bubble[data-role="char"] { border-radius: 18px 18px 18px 4px; background: var(--bubble-char); border: 1px solid var(--bubble-char-border); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } /* Bubble appear animation (spec 4.1) */ @keyframes bubbleIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .bubble { animation: bubbleIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); } /* Avatar mood glow */ .avatar-circle { border: 2px solid var(--accent-primary); box-shadow: 0 0 12px rgba(200, 160, 255, 0.2); transition: box-shadow 0.5s ease, border-color 0.5s ease; } .avatar-circle[data-mood="intimate"] { border-color: var(--accent-intimate); box-shadow: 0 0 16px rgba(255, 104, 136, 0.30); } /* Mode pill (spec 4.4) */ .mode-pill { display: inline-flex; gap: 2px; background: var(--bg-tertiary); border-radius: 20px; padding: 2px; font-size: 0.74rem; } .mode-pill button { padding: 4px 10px; border: none; border-radius: 18px; background: transparent; color: var(--text-secondary); font-family: inherit; cursor: pointer; transition: all 0.2s; } .mode-pill button.active { background: var(--accent-primary); color: var(--bg-primary); font-weight: 500; } /* Tap feedback (spec 6F) */ button { transition: transform 0.08s ease; } button:active { transform: scale(0.97); } /* Character management card (spec 3.4) */ .char-mgmt-section { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--glass-border); border-radius: 14px; padding: 12px 14px; margin: 10px 0; backdrop-filter: blur(8px); } .char-mgmt-section h4 { margin: 0 0 8px; font-size: 0.78rem; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-body); } .char-mgmt-row { display: flex; gap: 10px; padding: 5px 0; font-size: 0.85rem; line-height: 1.6; } .char-mgmt-row .k { flex: 0 0 80px; color: var(--text-tertiary); font-size: 0.74rem; } .char-mgmt-row .v { flex: 1; } .char-mgmt-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; } .char-mgmt-actions .act-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); border-radius: 10px; cursor: pointer; font-size: 0.7rem; color: var(--text-secondary); transition: all 0.18s; } .char-mgmt-actions .act-btn .ic { font-size: 1.3rem; } .char-mgmt-actions .act-btn:hover { color: var(--text-primary); border-color: var(--accent-primary); } .char-mgmt-actions .act-btn.dn { color: var(--danger); } /* Image gallery horizontal scroll (spec 3.4) */ .char-img-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: thin; } .char-img-strip::-webkit-scrollbar { height: 4px; } .char-img-strip::-webkit-scrollbar-thumb { background: var(--accent-soft); border-radius: 2px; } .char-img-strip .img-tile { flex: 0 0 96px; aspect-ratio: 3/4; background: var(--bg-secondary) center / cover no-repeat; border-radius: 8px; border: 1px solid var(--border); scroll-snap-align: start; cursor: pointer; } .char-img-strip .img-tile.r18 { border-color: rgba(255, 100, 130, 0.4); } .char-img-strip .img-tile.ugoira { box-shadow: 0 0 0 2px rgba(126, 231, 192, 0.3); } /* Glass header (spec 3.2) */ .chat-header-glass, header.glass { background: var(--glass); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--glass-border); } /* ════════════════════════════════════════════════════════════════════ cy-fx — 体感レイヤ "Twilight Intimacy / 夜の体温" (Phase2+3, 2026-05-18) コンセプト: エッチでエロくてかわいい。冷たい薄暮に、触れると滲む血色の熱。 方針: 完全 additive。既存規則は一切変更しない。app が既に使う element/class を selector にするので、今ある画面も今後足す新機能も 自動でこの体感を継承する (Master「更新しやすさと両立」)。 ════════════════════════════════════════════════════════════════════ */ :root{ /* ロリポップ=キャンディpop 光沢 + もっと直接的にエッチ (Master 2026-05-18)。 色は飴のように濃く甘く、跳ねは大きく、艶を足す。 */ --cy-heat:#ff2f86; /* ジューシーなキャンディ・マゼンタピンク */ --cy-heat-soft:#ffd0e6; /* 砂糖衣のハイライト */ --cy-glow:rgba(255,47,134,.55); --cy-glow-soft:rgba(255,140,196,.5); --cy-spring:cubic-bezier(.34,1.9,.46,1.0); /* よく跳ねる=ロリポップ */ --cy-silk:cubic-bezier(.22,.61,.36,1); --cy-gloss:linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.07) 36%, rgba(255,255,255,0) 60%); /* 飴の照り */ } /* 1 ── 触れたら "ぷにっ" と沈む ────────────────────────────────────── app 全体が既に使う button/.b/カード類へ自動付与。指で押した手応え。 */ button, .b, [role="button"], .foyer-hero, .foyer-hero-go, .foyer-go, .foyer-deck, .foyer-deck-next, .foyer-deck-back, .char-card, .mem-tile, .lp-menu .b, .mode-pill button, [data-tap]{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:transform .17s var(--cy-spring), filter .17s ease, box-shadow .24s ease; } button:active, .b:active, [role="button"]:active, .foyer-hero:active, .foyer-hero-go:active, .foyer-go:active, .foyer-deck:active, .char-card:active, .mem-tile:active, .lp-menu .b:active, .mode-pill button:active, [data-tap]:active{ transform:scale(.94); /* 飴を押し込む=深め */ filter:brightness(1.2) saturate(1.32); /* ぷるんと甘く発色 */ } /* 主役 (会いに行く / 送信 / ♥ / hero) = 押すと甘く濃い熱がとろける */ .b.up:active, .foyer-hero-go:active, .foyer-go:active{ box-shadow:0 0 0 1.5px var(--cy-heat), 0 10px 42px -4px var(--cy-glow), 0 0 36px var(--cy-glow), inset 0 1px 0 rgba(255,255,255,.4); /* 飴の照り返し */ filter:brightness(1.22) saturate(1.5); } /* 2 ── iOS 慣性スクロール ──────────────────────────────────────────── */ .log, .lp-sheet, .cy-scroll, [data-scroll]{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } /* 3 ── 画面遷移 v284-P4: 扉が開く (薄暗 → 焦点合う → 滲んで居場所が見える) 旧 380ms → 520ms。 最初の 18% は ほぼ黒、 次に focus 焦点が合う、 最後に ピンクの体温が滲む。 reduce-motion で .01ms 抑制。 */ @keyframes cy-route-in{ 0% { opacity: 0; filter: blur(10px) brightness(0.55) saturate(0.7); transform: translateY(8px); } 18% { opacity: 0.32; filter: blur(7px) brightness(0.72) saturate(0.8); } 55% { opacity: 0.82; filter: blur(2px) brightness(0.94) saturate(1.05); } 100% { opacity: 1; filter: blur(0) brightness(1) saturate(1.1); transform: translateY(0); } } #app.cy-in > *{ animation:cy-route-in .52s var(--cy-silk, cubic-bezier(.22,.61,.36,1)) both; will-change: opacity, filter, transform; } /* P4: 扉が開く時のスクリム ── 短い暗幕が "薄く" 横切る */ @keyframes cy-route-scrim { 0% { opacity: 0.85; } 60% { opacity: 0.32; } 100% { opacity: 0; } } #app.cy-in::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 200; background: radial-gradient(120% 100% at 50% 50%, rgba(20, 8, 18, 0.0) 0%, rgba(20, 8, 18, 0.42) 50%, rgba(8, 4, 10, 0.86) 100%); animation: cy-route-scrim .48s ease-out both; } /* 4 ── デッキ/一覧 stagger 登場: Master 指示 2026-05-22 撤廃。 元 .52s × 5 段 stagger でタイルが「次々咲く」=「画像読み込み直し」と 誤解されチラチラ報告の主因。route-in の opacity fade のみで十分。 */ /* 5 ── かわいい生命感: 主役画像が ほのかに呼吸する ─────────────────── */ @keyframes cy-breathe{ 0%,100%{transform:scale(1);filter:brightness(1) saturate(1);} 50% {transform:scale(1.028);filter:brightness(1.08) saturate(1.12);} } .foyer-hero-img{ animation:cy-breathe 4.0s ease-in-out infinite; will-change:transform,filter; } /* ロリポップの照り: hero 画像の上に飴艶 + 下から甘い熱がにじむ (直接的) */ .foyer-hero{position:relative;} .foyer-hero::after{ content:"";position:absolute;inset:0;border-radius:inherit; pointer-events:none;z-index:2; background:var(--cy-gloss), radial-gradient(120% 70% at 50% 118%, rgba(255,47,134,.34) 0%, rgba(255,47,134,0) 60%); mix-blend-mode:screen;opacity:.9; } /* 6 ── 行為の "熱" ブルーム (JS が節目で .cy-bloom を一瞬付与) ───────── */ @keyframes cy-bloom{ 0% {box-shadow:0 0 0 0 var(--cy-glow), 0 0 0 0 var(--cy-glow-soft);} 62% {box-shadow:0 0 0 26px rgba(255,47,134,0), 0 0 0 40px rgba(255,140,196,0);} 100%{box-shadow:0 0 0 0 rgba(255,47,134,0), 0 0 0 0 rgba(255,140,196,0);} } .cy-bloom{animation:cy-bloom .78s ease-out;} /* 7 ── 画像はパッと出さず ふわっ と立ち上がる ──────────────────────── */ .foyer-hero-img, .foyer-deck, .foyer-deck-next, .foyer-deck-back, .char-card, .mem-tile{ transition:opacity .5s var(--cy-silk), transform .52s var(--cy-spring), filter .4s ease; } /* 8 ── かわいい "今ここ" の脈: hero 名の下にそっと灯る熱 ─────────────── */ .foyer-hero-name::after{ content:"";display:block;height:3px;width:40px;margin:8px auto 0; border-radius:3px; background:linear-gradient(90deg,transparent,var(--cy-heat), var(--cy-heat-soft),var(--cy-heat),transparent); box-shadow:0 0 10px var(--cy-glow); opacity:.0;animation:cy-cue 3.0s ease-in-out infinite; } @keyframes cy-cue{0%,100%{opacity:.3;width:32px;}50%{opacity:.85;width:52px;}} /* アクセシビリティ: 動きを抑える設定なら鎮める (体感は残しつつ穏やかに) */ @media (prefers-reduced-motion:reduce){ #app.cy-in > *, #app.cy-in .foyer-deck, #app.cy-in .char-grid > *, #app.cy-in .mem-grid > *, .foyer-hero-img, .foyer-hero-name::after, .cy-bloom, .home > .sug-wrap .foyer-hero-go{ animation-duration:.01ms!important; animation-iteration-count:1!important; } } /* ════════════════════════════════════════════════════════════════════ cy-stage — 入口テイクオーバー (Master 2026-05-18: 露骨/エロ/ドスケベ) CSS のみ・home route 限定 (.home>.sug-wrap)・配線/DOM 完全不変 = cold-load/TDZ の脆弱路を一切触らず、第一瞥を全画面の "今ここに居る 一人" へ。承認済 image-forward を最大化。スワイプ主動詞は既存のまま。 ════════════════════════════════════════════════════════════════════ */ .home > .sug-wrap{ position:relative; width:100vw; margin-left:50%; transform:translateX(-50%); /* 560px 中央枠を破る */ margin-top:calc(-1 * (28px + env(safe-area-inset-top))); /* 時計裏まで全bleed */ margin-bottom:30px; min-height:100dvh; display:flex; flex-direction:column; } /* ラベルは撤去 (web chrome)。⚙ だけ floating glass で安全圏に残す */ .home > .sug-wrap > .sug-hd{ position:absolute; inset:0 0 auto 0; z-index:6; margin:0; padding:calc(env(safe-area-inset-top) + 12px) 14px 0; background:none; pointer-events:none; justify-content:flex-end; } .home > .sug-wrap > .sug-hd > span:first-child{ display:none; } .home > .sug-wrap > .sug-hd .sug-refresh{ pointer-events:auto; background:rgba(20,16,32,.5); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); border-color:rgba(255,255,255,.16); color:#fff; } /* hero スロット/デッキ/カード = 端から端まで全画面 */ .home > .sug-wrap > .foyer-hero-slot{ flex:1; margin:0; gap:0; } .home > .sug-wrap .foyer-deck{ flex:1; display:flex; } .home > .sug-wrap .foyer-hero{ flex:1; border:0; border-radius:0; aspect-ratio:auto; max-height:none; min-height:100dvh; } .home > .sug-wrap .foyer-hero-img{ background-position:center 16%; } /* 露骨 heat: 下から濃く血色がのぼる強 scrim + 飴艶増幅 */ .home > .sug-wrap .foyer-hero-img::after{ background:linear-gradient(180deg, transparent 28%, rgba(7,5,14,.52) 60%, rgba(7,5,14,.94) 100%); } .home > .sug-wrap .foyer-hero::after{ background:var(--cy-gloss), radial-gradient(140% 80% at 50% 124%, rgba(255,47,134,.52) 0%, rgba(255,47,134,0) 60%); opacity:1; } /* meta/CTA = 親指ゾーンへ。名前を大きく、誘いを熱く、CTA は飴スラブ */ .home > .sug-wrap .foyer-hero-meta{ padding:22px 22px calc(26px + env(safe-area-inset-bottom)); z-index:3; } .home > .sug-wrap .foyer-hero-cue{ color:var(--cy-heat-soft); font-size:.74rem; letter-spacing:.26em; text-shadow:0 0 16px var(--cy-glow); } .home > .sug-wrap .foyer-hero-name{ font-size:2.5rem; text-shadow:0 3px 22px rgba(0,0,0,.7), 0 0 26px rgba(255,47,134,.34); } .home > .sug-wrap .foyer-hero-go{ display:block; width:100%; margin-top:18px; padding:17px 22px; font-size:1.06rem; font-weight:700; letter-spacing:.06em; border-radius:18px; color:#2a0716; background:linear-gradient(180deg,var(--cy-heat-soft),var(--cy-heat)); box-shadow:0 10px 34px -6px var(--cy-glow), inset 0 1px 0 rgba(255,255,255,.5); animation:cy-cta-throb 2.4s ease-in-out infinite; } @keyframes cy-cta-throb{ 0%,100%{box-shadow:0 10px 34px -6px var(--cy-glow),inset 0 1px 0 rgba(255,255,255,.5);} 50%{box-shadow:0 13px 48px -3px var(--cy-glow),0 0 30px var(--cy-glow), inset 0 1px 0 rgba(255,255,255,.62);} } /* cold-load / err: spinner をステージ中央に大きく (第一瞥が空でも沈黙しない) */ .home > .sug-wrap .sug-loading{ position:absolute; inset:0; margin:0; display:flex; align-items:center; justify-content:center; padding:0 32px; text-align:center; font-size:.95rem; z-index:1; } /* ── エッチな案内役: 立ち絵 + 囁き口上 (Master 構想 2026-05-18) ────────── ambiance ゆえ pointer 透過 (swipe/タップ/CTA を一切邪魔しない)。 入口の左下に佇み、提示中の子を店員口調で囁いてくる。 🚧 v230 audit 確認: cy-guide-* class 群 (10+) は app.js から参照ゼロ。 但し Master memory `reference_cloud_yuna_guide.md` に「P4 入口 UI 未了」と RESERVED として明示。 make_guide_avatars.py / qwen 口上 generation の backend scaffold は別途存在。実装時に再活性化。 削除禁止 (Master 構想に直結)。 */ .cy-guide{ position:absolute; left:0; right:0; bottom:calc(150px + env(safe-area-inset-bottom)); z-index:4; pointer-events:none; display:flex; align-items:flex-end; gap:10px; padding:0 14px; } .cy-guide-av{ height:30vh; max-height:300px; width:auto; object-fit:contain; filter:drop-shadow(0 6px 18px rgba(0,0,0,.6)) drop-shadow(0 0 14px var(--cy-glow)); animation:cy-breathe 4.6s ease-in-out infinite; flex:0 0 auto; } .cy-guide-say{ align-self:flex-end; margin-bottom:14px; max-width:64%; font-size:.84rem; line-height:1.55; color:#fff; padding:11px 15px; border-radius:16px 16px 16px 4px; background:linear-gradient(180deg,rgba(40,12,30,.82),rgba(24,8,20,.86)); -webkit-backdrop-filter:blur(12px) saturate(150%); backdrop-filter:blur(12px) saturate(150%); border:1px solid var(--cy-glow); box-shadow:0 8px 26px -6px rgba(0,0,0,.6), 0 0 16px var(--cy-glow); text-shadow:0 1px 6px rgba(0,0,0,.6); } @media (max-width:380px){ .cy-guide-av{ height:24vh; } .cy-guide-say{ max-width:60%; font-size:.8rem; } } /* 設定シートの立ち絵候補サムネ */ .cy-guide-thumb{ height:108px; width:auto; flex:0 0 auto; border-radius:10px; background:rgba(255,255,255,.04) center/contain no-repeat; border:2px solid rgba(255,255,255,.14); cursor:pointer; transition:transform .15s var(--cy-spring), border-color .15s; } .cy-guide-thumb:active{ transform:scale(.95); } .cy-guide-thumb.sel{ border-color:var(--cy-heat); box-shadow:0 0 0 1px var(--cy-heat), 0 0 16px var(--cy-glow); } /* 寄り添いモード: チャット隅の小さな相棒 (入力/ログを邪魔しない) */ /* Master #7: 右下21vhはチャット本文/入力に被り邪魔 → 右上へ小さく退避。 header (sticky top) の下、safe-area 込みで配置。pointer-events:none ゆえ header ボタンのタップは貫通=干渉しない。 */ .cy-guide-chat{ position:fixed; left:auto; right:6px; top:calc(env(safe-area-inset-top, 0px) + 60px); bottom:auto; z-index:4; pointer-events:none; flex-direction:column; align-items:flex-end; gap:5px; padding:0; max-width:58vw; } .cy-guide-chat .cy-guide-av{ height:15vh; max-height:138px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.6)) drop-shadow(0 0 12px var(--cy-glow)); opacity:.94; } .cy-guide-chat .cy-guide-say{ align-self:flex-end; margin:0; max-width:54vw; font-size:.78rem; border-radius:14px 14px 14px 4px; animation:cy-route-in .3s var(--cy-silk) both; } @media (max-width:380px){ .cy-guide-chat .cy-guide-av{ height:12vh; } } /* ─── 🩹 iOS Safari auto-zoom guard (Master 指示 2026-05-22) ─── iOS Safari は input/textarea/select の effective font-size が 16px 未満 だと focus 時に viewport を auto-zoom する (`user-scalable=yes` でも同じ)。 ピンチが入ったら戻すのが面倒という主訴。個別 selector を上で 16px 化済 だが、modal/dynamic UI 等で見落とした input にも 安全網として下記を 適用 (text-system 系のみ。range/checkbox/file は対象外で UI 影響なし)。 */ input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input:not([type]), textarea, select { font-size: max(16px, 1em); } /* ─── 🩹 Master 指示 2026-05-22: 🔊 TTS button 状態 visual feedback ───── 旧: emoji 変更 (🔊→⏳→⏸→🔊) のみで「押したか分からない」報告。 新: tap 直後に loading pulse、再生中は purple glow + ring ripple で 一目で状態が分かる。再生中タップで停止 (二重再生防止 = ring 消える)。 */ @keyframes tts-loading-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1.0; } } .tts-loading { animation: tts-loading-pulse 0.7s ease-in-out infinite; background: rgba(255,255,255,0.10) !important; } @keyframes tts-playing-ring { 0% { box-shadow: 0 0 0 0 rgba(200,160,255,0.55); } 70% { box-shadow: 0 0 0 10px rgba(200,160,255,0); } 100% { box-shadow: 0 0 0 0 rgba(200,160,255,0); } } @keyframes tts-playing-glow { 0%, 100% { background: rgba(200,160,255,0.22); } 50% { background: rgba(200,160,255,0.42); } } .tts-playing { background: rgba(200,160,255,0.26) !important; border-color: rgba(200,160,255,0.65) !important; color: #e8d0ff !important; animation: tts-playing-ring 1.4s ease-out infinite, tts-playing-glow 1.4s ease-in-out infinite; } /* ═══ v184 Master 指示 2026-05-23: 使いやすさ UI 一括改善 (additive) ═══ 1) --kb-inset: visualViewport 連動で keyboard 高さを CSS var 化 2) cy-fab-bottom: 「最下部へ」FAB (chat long history 救済) 3) cy-tap44: 全 button に 44pt hit area 強制 (誤タップ予防) 4) cy-mini-player: voice 再生中だけ底に出る replay/stop bar (二重鳴り bug fix の見える化) 5) cy-msg-failed: 失敗 message を紅化 + tap 再送 hint 6) cy-kb-aware: composer 等を keyboard 上に押し出す utility class */ :root { --kb-inset: 0px; } .cy-fab-bottom { position: fixed; right: 14px; bottom: calc(96px + env(safe-area-inset-bottom) + var(--kb-inset)); z-index: 48; width: 46px; height: 46px; border-radius: 50%; background: rgba(20,16,32,0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(200,160,255,0.32); color: #e8d8ff; font-size: 20px; line-height: 1; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.36); cursor: pointer; opacity: 0; transition: opacity 200ms ease, transform 160ms ease; font-family: -apple-system,BlinkMacSystemFont,sans-serif; } .cy-fab-bottom.cy-show { display: flex; opacity: 0.92; } .cy-fab-bottom:active { transform: scale(0.90); } .cy-tap44 { min-width: 44px !important; min-height: 44px !important; } .cy-mini-player { position: fixed; left: 14px; right: 14px; bottom: calc(96px + env(safe-area-inset-bottom) + var(--kb-inset)); z-index: 47; display: none; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(20,16,32,0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(200,160,255,0.26); border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.38); color: #e8d8ff; font-size: 0.78rem; font-family: -apple-system,BlinkMacSystemFont,sans-serif; transition: opacity 200ms ease; } .cy-mini-player.cy-show { display: flex; } .cy-mini-player .cy-mini-btn { background: transparent; border: 0; color: #e8d8ff; font-size: 18px; padding: 4px 8px; cursor: pointer; min-width: 38px; min-height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; } .cy-mini-player .cy-mini-btn:active { background: rgba(200,160,255,0.18); } .cy-mini-player .cy-mini-label { flex: 1; opacity: 0.86; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* mini-player と FAB の縦衝突回避: mini-player 表示中は FAB を 60px 上げる */ .cy-mini-player.cy-show ~ .cy-fab-bottom.cy-show { bottom: calc(156px + env(safe-area-inset-bottom) + var(--kb-inset)); } .cy-msg-failed { outline: 1px solid rgba(255,107,138,0.55) !important; background: rgba(255,107,138,0.10) !important; cursor: pointer !important; position: relative; } .cy-msg-failed::after { content: '⟳ tap で再送'; position: absolute; right: 12px; bottom: -19px; font-size: 0.62rem; color: #ff9bb0; letter-spacing: 0.06em; pointer-events: none; font-family: -apple-system,BlinkMacSystemFont,sans-serif; } /* keyboard 表示中、composer 等を keyboard 上に押し上げる utility */ .cy-kb-aware { padding-bottom: calc(env(safe-area-inset-bottom) + var(--kb-inset)) !important; } /* 未再生 voice の紅 dot (chat list 等で使う) */ .cy-unplayed-dot::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ff6b8a; margin-right: 5px; vertical-align: middle; } /* v279: 設定 4 軸 section (自分 / 素材 / キャラ管理 / 詳細) */ .cy-settings-section { margin: 18px 0 28px; padding: 18px 14px; background: linear-gradient(180deg, rgba(40, 18, 55, 0.42), rgba(20, 10, 30, 0.62)); border: 1px solid rgba(200, 160, 255, 0.28); border-radius: 16px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.38); } .cy-settings-section-label { font-family: "Shippori Mincho", serif; font-size: 1.08rem; letter-spacing: 0.12em; color: #f0d8ff; margin-bottom: 4px; text-shadow: 0 0 10px rgba(200, 160, 255, 0.42); } .cy-settings-section-sub { font-size: 0.74rem; color: rgba(200, 180, 230, 0.58); letter-spacing: 0.04em; margin-bottom: 14px; line-height: 1.5; } /* ═══ v225 P1: 設定 hub menu (6 カテゴリ統合入口、 Twilight Intimacy palette) ═══ */ .cy-settings-hub { margin: 14px 0 24px; padding: 18px 14px; background: linear-gradient(180deg, rgba(40, 18, 55, 0.45), rgba(20, 10, 30, 0.65)); border: 1px solid rgba(200, 160, 255, 0.32); border-radius: 16px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.40); } .cy-settings-hub-title { font-family: "Shippori Mincho", serif; font-size: 1.05rem; font-weight: 500; letter-spacing: 0.18em; color: #ffe0e8; text-shadow: 0 0 14px rgba(200, 160, 255, 0.55); text-align: center; margin-bottom: 4px; } .cy-settings-hub-sub { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.72rem; letter-spacing: 0.14em; color: rgba(200, 160, 255, 0.62); text-align: center; margin-bottom: 16px; } .cy-settings-hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .cy-settings-hub-card { display: flex; flex-direction: column; padding: 14px 12px; background: rgba(28, 14, 40, 0.78); border: 1px solid rgba(200, 160, 255, 0.28); border-radius: 12px; cursor: pointer; user-select: none; min-height: 96px; font-family: -apple-system, BlinkMacSystemFont, "Shippori Mincho", serif; transition: transform 150ms ease, box-shadow 200ms ease, border-color 200ms ease; } .cy-settings-hub-card:active { transform: scale(0.96); border-color: rgba(200, 160, 255, 0.75); box-shadow: 0 4px 18px rgba(200, 160, 255, 0.42), inset 0 0 16px rgba(200, 160, 255, 0.20); } .cy-settings-hub-card .icon { font-size: 1.7rem; margin-bottom: 6px; line-height: 1.1; } .cy-settings-hub-card .label { font-size: 0.96rem; font-weight: 700; color: #f0e2ff; letter-spacing: 0.06em; margin-bottom: 3px; } .cy-settings-hub-card .desc { font-size: 0.68rem; color: rgba(200, 160, 255, 0.72); line-height: 1.35; letter-spacing: 0.02em; } .cy-settings-hub-card.todo { opacity: 0.55; border-style: dashed; } .cy-settings-hub-card.todo .label::after { content: ' (準備中)'; font-size: 0.7rem; font-weight: 400; color: #a98fc8; } /* ═══ v226 P2-P7 hub 共通 layout (6 hub 統一規範) ═══ */ .cy-hub-wrap { padding: 14px 14px 80px; font-family: -apple-system, BlinkMacSystemFont, "Shippori Mincho", serif; } .cy-hub-title { font-family: "Shippori Mincho", serif; font-size: 1.45rem; font-weight: 500; letter-spacing: 0.10em; color: #f0e2ff; text-shadow: 0 0 18px rgba(200, 160, 255, 0.45); margin: 16px 0 4px; display: flex; align-items: center; gap: 10px; } .cy-hub-title .icon { font-size: 1.7rem; } .cy-hub-sub { font-size: 0.78rem; letter-spacing: 0.10em; color: rgba(200, 160, 255, 0.72); margin-bottom: 22px; } .cy-hub-section { margin-bottom: 22px; padding: 14px 14px; background: rgba(30, 16, 45, 0.55); border: 1px solid rgba(200, 160, 255, 0.22); border-radius: 14px; } .cy-hub-section-title { font-family: "Shippori Mincho", serif; font-size: 0.96rem; font-weight: 600; letter-spacing: 0.10em; color: #ffe0e8; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(200, 160, 255, 0.18); } .cy-hub-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; border-bottom: 1px dashed rgba(200, 160, 255, 0.10); font-size: 0.86rem; color: #e8d8ff; } .cy-hub-row:last-child { border-bottom: none; } .cy-hub-row .name { font-weight: 600; flex: 1; } .cy-hub-row .meta { color: rgba(200, 160, 255, 0.72); font-size: 0.74rem; margin-left: 8px; } .cy-hub-btn { background: linear-gradient(135deg, rgba(80, 30, 100, 0.85), rgba(140, 60, 170, 0.92)); color: #fff; border: 1px solid rgba(200, 160, 255, 0.55); border-radius: 8px; padding: 6px 14px; font-size: 0.78rem; font-weight: 700; cursor: pointer; min-height: 32px; letter-spacing: 0.06em; font-family: inherit; } .cy-hub-btn:active { transform: scale(0.95); } .cy-hub-btn.bad { background: linear-gradient(135deg, rgba(120, 30, 60, 0.85), rgba(180, 40, 80, 0.92)); } .cy-hub-btn.muted { background: rgba(40, 24, 55, 0.6); color: #a98fc8; } .cy-hub-stat { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .cy-hub-stat-box { flex: 1; min-width: 100px; padding: 10px 12px; background: rgba(50, 24, 80, 0.55); border: 1px solid rgba(200, 160, 255, 0.22); border-radius: 10px; text-align: center; } .cy-hub-stat-box .v { font-size: 1.3rem; font-weight: 700; color: #ffe0e8; } .cy-hub-stat-box .l { font-size: 0.66rem; color: rgba(200, 160, 255, 0.72); letter-spacing: 0.08em; margin-top: 2px; } .cy-hub-phrase-list { max-height: 280px; overflow-y: auto; padding: 4px; } .cy-hub-phrase-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 4px; background: rgba(40, 20, 55, 0.5); border-radius: 8px; font-size: 0.82rem; color: #e8d8ff; } .cy-hub-phrase-item .ph { flex: 1; word-break: break-all; } .cy-hub-phrase-item.good { border-left: 3px solid #9be7c4; } .cy-hub-phrase-item.bad { border-left: 3px solid #ff9bb0; } .cy-hub-empty { color: rgba(200, 160, 255, 0.5); font-style: italic; text-align: center; padding: 20px; font-size: 0.82rem; } /* ═══ v185 Master 指示 2026-05-23: 戻る button を押しやすく + 必ず前画面 ═══ ・左下に大きめ FAB (50px、44pt 超え)、TOP 以外で全画面常駐 ・mini-player 表示中は scroll FAB と一緒に上げる (重なり回避) */ .cy-fab-back { position: fixed; left: 14px; bottom: calc(96px + env(safe-area-inset-bottom) + var(--kb-inset)); z-index: 48; width: 52px; height: 52px; border-radius: 50%; background: rgba(20,16,32,0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(200,160,255,0.42); color: #e8d8ff; font-size: 22px; line-height: 1; font-weight: 600; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(0,0,0,0.42); cursor: pointer; opacity: 0; transition: opacity 200ms ease, transform 160ms ease; font-family: -apple-system,BlinkMacSystemFont,sans-serif; /* iOS Safari の左 edge swipe と干渉しないよう、左端から 14px 確保 */ } .cy-fab-back.cy-show { display: flex; opacity: 0.95; } .cy-fab-back:active { transform: scale(0.90); background: rgba(200,160,255,0.20); } /* mini-player 表示中は back FAB も上げる (scroll FAB と同じ式) */ .cy-mini-player.cy-show ~ .cy-fab-back.cy-show { bottom: calc(156px + env(safe-area-inset-bottom) + var(--kb-inset)); } /* v185 では .flow-back を 44pt 強制していたが、v227 で重複監査の結果 primary back は左下 cy-fab-back に統一。.flow-back は breadcrumb 化 (上記 .flow-back 定義参照) したので 44pt 強制は撤回。 .foyer-deck-back (deck カルーセル「‹」) は今も primary なので 44pt 維持。 */ .foyer-deck-back { min-width: 44px !important; min-height: 44px !important; padding: 10px 14px !important; } /* ═══ v186 Master 嗜好直結追加 (additive) ═══ A. Twilight Intimacy: voice 再生で 0.5s 暗転→2s 暖色復帰、再生中ずっと薄い暖色 tint B. mini-player progress bar (range slider + 経過秒) C. rim light: voice 再生中、画面端から薄い暖色 glow (彼女の体温) */ body.cy-twilight-darken { transition: filter 0.45s ease-in; filter: brightness(0.18) saturate(0.85); } body.cy-twilight-warm { transition: filter 2.0s ease-out; filter: brightness(0.94) saturate(1.05); } /* rim light: 画面端だけ暖色 glow (中央 = 透明、端だけ tint) */ body.cy-twilight-warm::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 5; background: radial-gradient(ellipse 90% 80% at center, transparent 55%, rgba(255, 170, 200, 0.10) 85%, rgba(220, 130, 180, 0.18) 100%); mix-blend-mode: screen; opacity: 0; transition: opacity 1.6s ease-out; } body.cy-twilight-warm::after { opacity: 1; } /* mini-player progress bar */ .cy-mini-player .cy-mini-progress { flex: 1; min-width: 60px; max-width: 160px; height: 4px; appearance: none; -webkit-appearance: none; background: rgba(200,160,255,0.18); border-radius: 2px; margin: 0 6px; cursor: pointer; outline: none; padding: 0; } .cy-mini-player .cy-mini-progress::-webkit-slider-runnable-track { height: 4px; background: rgba(200,160,255,0.18); border-radius: 2px; } .cy-mini-player .cy-mini-progress::-moz-range-track { height: 4px; background: rgba(200,160,255,0.18); border-radius: 2px; } .cy-mini-player .cy-mini-progress::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #c8a0ff; border: 0; cursor: pointer; margin-top: -5px; box-shadow: 0 1px 4px rgba(0,0,0,0.4); } .cy-mini-player .cy-mini-progress::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #c8a0ff; border: 0; cursor: pointer; } .cy-mini-player .cy-mini-time { font-variant-numeric: tabular-nums; font-size: 0.66rem; opacity: 0.72; min-width: 36px; text-align: right; font-family: -apple-system,BlinkMacSystemFont,sans-serif; letter-spacing: 0.04em; } /* mini-label を progress 優先で縮める (3 行レイアウト崩壊回避) */ .cy-mini-player .cy-mini-label { max-width: 80px; } /* ═══ v187 Master 確定ルール「自動再生 = 完全 NG (外で鳴ったら嫌)」を承けて、 Visual だけで「エッチで嗜好的でむふふ」を強化 (additive、無音) ═══ A. Ken Burns: 大画像 (foyer-hero / chat bg / char img) をゆっくり呼吸 → 平時 22s loop、Twilight 発動中 (audio 再生中) は 11s に倍速で「彼女の息」化 B. chat 空間 warm tint: chat27-wrap を薄い暖色寄りに、Twilight 中に強化 C. cy-fab-back tap ripple: 暖色 ripple で「触れた」感を可視化 D. input/textarea focus 暖色 glow: 触れる前から「呼吸が近い」感 ─ ticket #1 welcome voice は Master 確定却下 (自動再生 NG) ─ ticket #4 戻る label 動的化は撤回 (label 変更は感性外す risk、visual ripple で代替) */ @keyframes cy-ken-burns { 0% { transform: scale(1.000) translate(0, 0 ); } 50% { transform: scale(1.035) translate(-1.2%, 0.6%); } 100% { transform: scale(1.000) translate(0, 0 ); } } .foyer-hero-img, .cy-ken-burns-target { animation: cy-ken-burns 22s ease-in-out infinite; transform-origin: center center; will-change: transform; } body.cy-twilight-warm .foyer-hero-img, body.cy-twilight-warm .cy-ken-burns-target { animation-duration: 11s; } /* chat 空間 warm tint */ .chat27-wrap { background-image: linear-gradient(135deg, rgba(220, 180, 200, 0.04) 0%, transparent 55%); transition: background-image 1.2s ease; } body.cy-twilight-warm .chat27-wrap { background-image: linear-gradient(135deg, rgba(255, 190, 220, 0.12) 0%, transparent 60%); } /* cy-fab-back tap ripple */ @keyframes cy-fab-back-ripple { 0% { box-shadow: 0 0 0 0 rgba(255, 170, 200, 0.50); } 60% { box-shadow: 0 0 0 22px rgba(255, 170, 200, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 170, 200, 0); } } .cy-fab-back:active { animation: cy-fab-back-ripple 0.55s ease-out; } /* textarea / input focus 暖色 glow */ textarea:focus, input[type="text"]:focus, input:not([type]):focus { outline: 0; box-shadow: 0 0 0 1px rgba(255, 170, 200, 0.40), 0 0 22px rgba(255, 170, 200, 0.16) !important; transition: box-shadow 0.4s ease; } /* ═══ v188 Master 確定「雰囲気よりも直接的なエロ」を承け、嗜好にぶっさす Visual ═══ A. .cy-moan 喘ぎ語 emphasize (紅+大+震え bloom anim) → bubble 本文の「あぁ」「んっ」「だめ♡」「イク」「気持ちいい」「♡♡」等を 自動 span 化、登場時に bloom anim で Master 視線吸引 B. .cy-direct-chips 直球 chip 行 (chat input 直上、tap で input 末尾に挿入) → 「もっと」「もう一回」「優しく」「強く」「中で」「お願い」「ねぇ…」「だめ…」 C. placeholder mood-aware rotate (5 文 ローテ、focus 中 skip) → 「触ってもいい?」「ねぇ…」「こっち見て」「もっと近くに」「内緒で…」 全部無音、Master 操作中だけ可視、ガードレールなし。 */ .cy-moan { color: #ff9bb0 !important; font-weight: 700; font-size: 1.07em; text-shadow: 0 0 10px rgba(255, 107, 138, 0.38); letter-spacing: 0.02em; display: inline-block; transform-origin: center center; animation: cy-moan-bloom 0.65s ease-out; } @keyframes cy-moan-bloom { 0% { transform: scale(0.82); opacity: 0.45; color: #ff6b8a; } 55% { transform: scale(1.12); opacity: 1.00; color: #ff8b9f; } 100% { transform: scale(1.00); opacity: 1.00; color: #ff9bb0; } } /* Twilight 発動中は更に紅味を強める */ body.cy-twilight-warm .cy-moan { color: #ff85a0 !important; text-shadow: 0 0 14px rgba(255, 107, 138, 0.52); } .cy-direct-chips { position: fixed; left: 14px; right: 14px; bottom: calc(100px + env(safe-area-inset-bottom) + var(--kb-inset)); z-index: 46; display: none; flex-wrap: wrap; gap: 6px; padding: 7px 8px; background: rgba(20, 14, 28, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 107, 138, 0.26); border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.36); font-family: -apple-system, BlinkMacSystemFont, sans-serif; } .cy-direct-chips.cy-show { display: flex; } .cy-direct-chip { background: rgba(255, 107, 138, 0.10); border: 1px solid rgba(255, 107, 138, 0.36); color: #ffd0db; font-size: 0.82rem; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-weight: 600; letter-spacing: 0.03em; transition: transform 100ms ease, background 200ms ease; } .cy-direct-chip:active { background: rgba(255, 107, 138, 0.32); border-color: rgba(255, 107, 138, 0.75); color: #fff; transform: scale(0.94); } /* mini-player と chip row 同時表示時の縦衝突回避 */ .cy-mini-player.cy-show ~ .cy-direct-chips.cy-show { bottom: calc(160px + env(safe-area-inset-bottom) + var(--kb-inset)); } /* ═══ v189 Master 嗜好「本編チャットと無関係に向こうから言ってくれる」自走化 ═══ ・操作待ち 25-60s ランダム idle で画面右側から薄い吹き出し pop 「ねぇ…」「もっと近くに来て」「ばかぁ」「触れて欲しい…」等 ・5-8s 滞留 → フェードアウト ・Master の tap / scroll / key / touch で即消去 + idle 計測リセット (邪魔しない) ・無音、Visual のみ、ガードレールなし */ .cy-whisper { position: fixed; right: 18px; top: 38%; z-index: 46; max-width: 210px; padding: 10px 16px; background: rgba(45, 20, 35, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 107, 138, 0.45); border-radius: 18px; color: #ffd0db; font-family: -apple-system, BlinkMacSystemFont, "Shippori Mincho", serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1.35; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.48), 0 0 24px rgba(255, 107, 138, 0.22); opacity: 0; transform: translateX(24px) scale(0.92); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.4, 0.0, 0.2, 1); cursor: pointer; pointer-events: auto; user-select: none; } .cy-whisper.cy-show { opacity: 1; transform: translateX(0) scale(1); } /* 吹き出しの尻尾 (右側に三角) */ .cy-whisper::after { content: ''; position: absolute; right: -9px; top: 50%; margin-top: -8px; width: 0; height: 0; border-left: 11px solid rgba(45, 20, 35, 0.92); border-top: 8px solid transparent; border-bottom: 8px solid transparent; filter: drop-shadow(2px 0 4px rgba(255, 107, 138, 0.20)); } /* Twilight 発動中は紅味を強める */ body.cy-twilight-warm .cy-whisper { border-color: rgba(255, 107, 138, 0.65); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), 0 0 32px rgba(255, 107, 138, 0.36); color: #ffe0e8; } /* ═══ v194 Master 指示「カード表面に表示」「chip 行は意味わからない=不要」 ═══ A. .cy-direct-chips (v188 直球 chip) を完全削除 (display: none 強制) B. whisper を TOP の foyer-hero カード表面に absolute 配置 (chat 画面では出さない) */ /* (A) chip 行 完全削除 */ .cy-direct-chips, .cy-direct-chip { display: none !important; } /* ═══ v202 Master 新 spec: char-card 完全再構成 ═══ ・既存 .meta (name + role 引用「じゅわっと溢れた…」) を撤去 ・名前を左上に大きく overlay (cy-card-name) ・誘いバルーン (cy-card-tease) を card 下半分に常時表示、2-3 段、10s 自動切替 ・長押し (600ms) で即切替 ・短 tap は card 全体 (chat 遷移) を阻害しない */ .char-card .meta { display: none !important; } .char-card .cy-card-name { position: absolute; top: 8px; left: 10px; z-index: 5; font-family: -apple-system, BlinkMacSystemFont, "Shippori Mincho", serif; font-size: 1.0rem; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.6); letter-spacing: 0.04em; padding: 2px 6px; border-radius: 6px; pointer-events: none; max-width: calc(100% - 50px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .char-card .cy-card-tease { position: absolute; bottom: 10px; left: 8px; right: 8px; z-index: 5; padding: 9px 12px; background: rgba(60, 18, 38, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1.5px solid rgba(255, 107, 138, 0.78); border-radius: 14px; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "Shippori Mincho", serif; /* v289: DS pool は 12〜50 字、 さらに 4 行まで visible に。 font 少し小さく、 line height ゆとり持って収まる範囲を拡張 */ font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.42; text-align: center; text-shadow: 0 1px 4px rgba(255, 107, 138, 0.55); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 107, 138, 0.40); transition: opacity 0.35s ease; cursor: pointer; user-select: none; -webkit-user-select: none; word-break: break-word; overflow-wrap: anywhere; /* 4 段まで visible: 0.82rem ≒ 13.1px、 line 1.42 = 18.6px、 4 行 ≒ 74px + padding 18 = 92px */ max-height: 96px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .char-card .cy-card-tease.fading { opacity: 0; } .char-card .cy-card-tease:active { transform: scale(0.97); } /* v205: 長押し menu + 全力モード switch */ .cy-tease-menu-overlay { position: fixed; inset: 0; z-index: 99; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .cy-tease-menu { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; background: rgba(20, 16, 32, 0.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1.5px solid rgba(255, 107, 138, 0.58); border-radius: 20px; padding: 10px; min-width: 240px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 32px rgba(255, 107, 138, 0.30); display: flex; flex-direction: column; gap: 4px; font-family: -apple-system, BlinkMacSystemFont, "Shippori Mincho", serif; } .cy-tease-menu .preview { padding: 10px 14px; font-size: 0.84rem; color: #ffd0db; background: rgba(255, 107, 138, 0.10); border-radius: 10px; margin-bottom: 4px; text-align: center; font-style: italic; line-height: 1.4; } .cy-tease-menu-item { padding: 13px 18px; font-size: 1.0rem; color: #fff; text-align: center; border-radius: 12px; cursor: pointer; font-weight: 600; letter-spacing: 0.04em; user-select: none; min-height: 48px; display: flex; align-items: center; justify-content: center; transition: background 150ms ease; } .cy-tease-menu-item:active { background: rgba(255, 107, 138, 0.22); } .cy-tease-menu-item.good { color: #9be7c4; } .cy-tease-menu-item.bad { color: #ff9bb0; } .cy-tease-menu-item.fav { color: #ffd76b; } .cy-tease-menu-item.mute { color: #aab; } .cy-tease-menu-item.cancel { color: #a98fc8; border-top: 1px solid rgba(255,255,255,0.10); margin-top: 4px; font-size: 0.92rem; } /* 💢 全力モード switch */ .cy-intense-switch { position: fixed; top: calc(env(safe-area-inset-top) + 56px); right: 14px; z-index: 49; padding: 9px 16px; border-radius: 999px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; user-select: none; border: 1.5px solid; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: all 250ms ease; min-height: 38px; min-width: 80px; } .cy-intense-switch.off { background: rgba(40, 30, 55, 0.78); color: #a98fc8; border-color: rgba(200, 160, 255, 0.32); } .cy-intense-switch.on { background: rgba(255, 107, 138, 0.38); color: #fff; border-color: rgba(255, 107, 138, 0.90); box-shadow: 0 0 26px rgba(255, 107, 138, 0.60); text-shadow: 0 0 8px rgba(255, 107, 138, 0.85); } /* ═══ v208 秘密の楽園 (paradise mode) - Master 専用フェチ直撃空間 ═══ ・TOP 右下に隠し気味の 🗝 button (薄く、Master しか気づかない感) ・tap で body[data-paradise=1] → palette が dark velvet 紅 に変わる ・cy-card-tease は liked_phrases だけ (Master 好み直撃のみ) ・入場時に「ようこそ…」welcome overlay 1.8s 演出 ・再 tap で退出 (🚪 → 🗝、palette 通常に戻る) */ .cy-paradise-gate { position: fixed; /* v292.17 (Master「pill size で 横並び、 visual coherence」 spec): 別の子 button (bottom 28px center, pill ~200px width) の 右隣に gap 12px で並べる pill (height 48 padding 0 18) で 同 group 認識化。 paradise 中は 「←」、 paradise out 時は display:none。 */ bottom: calc(28px + env(safe-area-inset-bottom) + var(--kb-inset, 0px)); left: calc(50% + 122px); z-index: 47; height: 48px; min-width: 56px; padding: 0 18px; border-radius: 999px; background: linear-gradient(135deg, rgba(80,20,55,0.92), rgba(140,30,70,0.95)); border: 1.5px solid rgba(255,107,138,0.72); color: #ffd6e0; font-family: "Shippori Mincho", serif; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.06em; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; box-shadow: 0 6px 22px rgba(255,107,138,0.45), 0 0 24px rgba(255,107,138,0.30); text-shadow: 0 0 8px rgba(255,107,138,0.7); transition: transform 150ms ease, box-shadow 200ms ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .cy-paradise-gate:hover, .cy-paradise-gate:active { opacity: 1; box-shadow: 0 4px 22px rgba(255,107,138,0.55), inset 0 0 18px rgba(255,107,138,0.40); transform: scale(1.10); } /* v227 重複監査: mini-player (chat 再生中) と縦衝突回避。 mini-player 表示中は cy-paradise-gate も 60px 上げる (cy-fab-back / cy-fab-bottom と同じ式)。 現状 cy-paradise-gate は TOP only だが、防御的に同居時の衝突を排除しておく。 */ .cy-mini-player.cy-show ~ .cy-paradise-gate { bottom: calc(220px + env(safe-area-inset-bottom) + var(--kb-inset)); } .cy-paradise-gate.cy-in { opacity: 1; background: linear-gradient(135deg, rgba(180,40,90,0.92), rgba(90,20,50,0.95)); border-color: rgba(255,107,138,0.85); box-shadow: 0 4px 30px rgba(255,107,138,0.70), inset 0 0 22px rgba(255,107,138,0.50); } /* paradise mode 中の palette override (body[data-paradise=1] 全体に適用) */ body[data-paradise="1"] { background: radial-gradient(ellipse at 50% 30%, #1a0512 0%, #0a0205 70%, #050103 100%) !important; transition: background 1.2s ease; } body[data-paradise="1"] .char-card { background: rgba(40, 14, 28, 0.74) !important; border: 1.5px solid rgba(255,107,138,0.42) !important; box-shadow: 0 4px 18px rgba(255,107,138,0.20) !important; } body[data-paradise="1"] .char-card .cy-card-tease { font-size: 1.05rem !important; border-width: 2px !important; border-color: rgba(255,107,138,0.92) !important; background: rgba(70, 12, 35, 0.96) !important; box-shadow: 0 6px 26px rgba(255,107,138,0.45), 0 0 36px rgba(255,107,138,0.55) !important; -webkit-line-clamp: 4 !important; max-height: 110px !important; text-shadow: 0 1px 6px rgba(255, 107, 138, 0.85) !important; } body[data-paradise="1"] .char-card .cy-card-name { color: #ffe0e8 !important; text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 14px rgba(255,107,138,0.7) !important; } /* 入場 welcome overlay */ .cy-paradise-welcome { position: fixed; inset: 0; z-index: 200; background: radial-gradient(circle at center, rgba(80,15,50,0.88) 0%, rgba(10,5,12,0.96) 100%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #ffd0db; font-family: "Shippori Mincho", serif; letter-spacing: 0.18em; text-shadow: 0 0 22px rgba(255,107,138,0.70); opacity: 0; pointer-events: none; transition: opacity 0.6s ease; } .cy-paradise-welcome.cy-show { opacity: 1; pointer-events: auto; } .cy-paradise-welcome .main { font-size: 1.45rem; font-weight: 500; } .cy-paradise-welcome .sub { font-size: 0.86rem; opacity: 0.78; letter-spacing: 0.22em; } /* v221 「誰を連れ込む?」 picker modal */ .cy-paradise-girl-picker { position: fixed; inset: 0; z-index: 200; background: radial-gradient(ellipse at center, rgba(60, 10, 38, 0.96) 0%, rgba(8, 2, 8, 0.99) 100%); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 30px) 18px calc(env(safe-area-inset-bottom) + 20px); overflow-y: auto; } .cy-paradise-girl-picker .title { color: #ffe0e8; font-family: "Shippori Mincho", serif; font-size: 1.55rem; font-weight: 600; letter-spacing: 0.18em; text-align: center; text-shadow: 0 0 18px rgba(255, 107, 138, 0.72); margin-bottom: 6px; } .cy-paradise-girl-picker .subtitle { color: rgba(255, 200, 220, 0.78); font-family: "Shippori Mincho", serif; font-size: 0.84rem; letter-spacing: 0.20em; text-align: center; margin-bottom: 22px; } .cy-paradise-girl-picker .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; flex: 1; } .cy-paradise-girl-picker .tile { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; cursor: pointer; border: 1.5px solid rgba(255, 107, 138, 0.35); background: rgba(40, 14, 28, 0.55); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); transition: transform 180ms ease, box-shadow 200ms ease, border-color 200ms ease; } .cy-paradise-girl-picker .tile:active { transform: scale(0.96); border-color: rgba(255, 107, 138, 0.85); box-shadow: 0 6px 22px rgba(255, 107, 138, 0.55); } .cy-paradise-girl-picker .tile-img { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; filter: brightness(0.85); } .cy-paradise-girl-picker .tile-name { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px 10px 10px; background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); color: #fff; font-family: "Shippori Mincho", serif; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.06em; text-shadow: 0 1px 4px rgba(0,0,0,0.95); text-align: center; } .cy-paradise-girl-picker .cancel { margin-top: 20px; align-self: center; padding: 12px 32px; background: transparent; border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.6); border-radius: 999px; font-family: "Shippori Mincho", serif; font-size: 0.88rem; letter-spacing: 0.12em; cursor: pointer; min-height: 44px; } .cy-paradise-girl-picker .cancel:active { background: rgba(255,255,255,0.08); } /* v292.13 (Master「背景 2 色 醜い、 スマホファーストでない、 自己満足」 fix): 設定画面では body の twilight 紫 gradient と body::after halo を OFF。 ambient atmosphere は TOP / chat / paradise 用、 settings は単色で集中。 */ body[data-route="settings"] { background: #0a0810 !important; } body[data-route="settings"]::after { display: none !important; } /* v214 楽園完全独立空間: TOP grid 流用やめて専用 layout */ body[data-paradise="1"] { background: #000 !important; /* 真っ黒、hero 画像を最大限引き立てる */ } /* paradise 中は TOP grid (#app) と既存 floating UI を完全 hide */ body[data-paradise="1"] #app { display: none !important; } body[data-paradise="1"] .cy-fab-back, body[data-paradise="1"] .cy-fab-bottom, body[data-paradise="1"] .cy-mini-player { display: none !important; } /* hero の上に薄い暗 vignette (画像が見やすい程度) */ body[data-paradise="1"]::before { content: ''; position: fixed; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.7) 100%); pointer-events: none; } /* hero layer: blur 抑え + brightness up で画像くっきり */ .cy-paradise-hero-bg { position: fixed; inset: 0; z-index: 0; opacity: 0; transition: opacity 1.5s ease; pointer-events: none; overflow: hidden; } .cy-paradise-hero-bg.on { opacity: 1; } .cy-paradise-hero-bg > img, .cy-paradise-hero-bg > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.78) saturate(1.12) contrast(1.08); /* v214: blur off、明るく、画像くっきり */ animation: cy-paradise-hero-pan 18s ease-in-out infinite alternate; } @keyframes cy-paradise-hero-pan { 0% { transform: scale(1.06) translate(0%, 0%); } 100% { transform: scale(1.16) translate(-2%, 1.5%); } } /* v214 hero キャラ名 (左上、控えめ) */ .cy-paradise-hero-name { position: fixed; top: calc(env(safe-area-inset-top) + 14px); left: 14px; z-index: 100; color: rgba(255, 245, 250, 0.92); font-family: "Shippori Mincho", serif; font-size: 0.96rem; font-weight: 500; letter-spacing: 0.18em; text-shadow: 0 1px 6px rgba(0,0,0,0.95), 0 0 14px rgba(255,107,138,0.55); padding: 7px 14px; background: rgba(15, 5, 12, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 8px; pointer-events: none; border: 1px solid rgba(255, 107, 138, 0.30); } /* v214 「別の子 →」 button (下中央、hero 切替) */ /* v292.16 (v292.15 で私が誤読 → revert + 正しい spec): Master 元 spec = 「別の子に変える」 は画面下 center で OK (元位置)、 「戻るボタン (paradiseGate)」 を 別の子 button の右横に持ってくる。 chat space (= 画面下 scene box) には何も置かない。 */ .cy-paradise-next-girl { position: fixed; bottom: calc(28px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 47; padding: 14px 32px; background: linear-gradient(135deg, rgba(80,15,55,0.92), rgba(180,40,90,0.95)); border: 2px solid rgba(255,107,138,0.88); border-radius: 999px; color: #fff; font-family: "Shippori Mincho", serif; font-size: 1.0rem; font-weight: 700; letter-spacing: 0.12em; cursor: pointer; user-select: none; box-shadow: 0 6px 26px rgba(255,107,138,0.58), 0 0 36px rgba(255,107,138,0.40); text-shadow: 0 0 8px rgba(255,107,138,0.8); min-height: 48px; transition: transform 150ms ease, box-shadow 200ms ease; } .cy-paradise-next-girl:active { transform: translateX(-50%) scale(0.94); box-shadow: 0 4px 16px rgba(255,107,138,0.7); } body[data-paradise="1"] .cy-ken-burns-target { animation-duration: 8s !important; } /* v292.20 (Master 指示「左に見切れる + 縦長で chat 欄に半分埋まる」 fix): 旧仕様 = 自由 wrap で text 多行 → 縦伸び → scene box (62vh) 被り + iPhone 幅で text 中央 anchor (translateX -50%) でも 左 viewport overflow 発生。 新仕様: max-width 75vw + nowrap + ellipsis で 1 行強制 + 幅制限 → 縦伸び解消 + 左右 viewport から overflow しない。 font size 範囲も 1.6-3rem → 1.2-2rem に抑制。 */ .cy-paradise-float { position: fixed; z-index: 2; font-family: "Shippori Mincho", serif; font-weight: 800; color: #ffffff !important; text-shadow: 0 2px 4px rgba(0,0,0,0.95), 0 0 18px rgba(255, 95, 130, 0.95), 0 0 36px rgba(255, 95, 130, 0.65), 0 0 60px rgba(255, 95, 130, 0.40); pointer-events: none; user-select: none; letter-spacing: 0.05em; /* v292.22 (Master 報告「中途半端でわけわからない」 fix): v292.20 で nowrap + ellipsis = max-width 超えた phrase が 「…」 で途中切り → 意味不明。 nowrap / ellipsis 撤去、 自然 wrap で全文表示。 font 抑制 + word-break で 左右 viewport 内収め、 max 2 行 wrap で 縦伸び は 12vh 以内に抑制。 */ max-width: 75vw; text-align: center; word-break: keep-all; overflow-wrap: anywhere; line-height: 1.25; animation: cy-paradise-float-anim 5s ease-in-out forwards; will-change: transform, opacity; } /* v292.13: translateX(-50%) で text 中央を left anchor に → 左右 均等分布 */ @keyframes cy-paradise-float-anim { 0% { opacity: 0; transform: translateX(-50%) scale(0.85) translateY(0); } 18% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); } 65% { opacity: 1; transform: translateX(-50%) scale(1.03) translateY(-12px); } 100% { opacity: 0; transform: translateX(-50%) scale(1.08) translateY(-36px); } } /* card tap で 全画面 zoom (paradise 中だけ) */ .cy-paradise-zoom { position: fixed; inset: 0; z-index: 90; background: rgba(12, 4, 10, 0.97); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px 18px calc(40px + env(safe-area-inset-bottom)); animation: cy-paradise-zoom-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); font-family: "Shippori Mincho", serif; } .cy-paradise-zoom .img { width: 92vw; height: 56vh; background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 22px; box-shadow: 0 12px 52px rgba(255, 107, 138, 0.48), 0 0 80px rgba(255, 107, 138, 0.30); border: 2px solid rgba(255, 107, 138, 0.55); animation: cy-ken-burns 9s ease-in-out infinite; } .cy-paradise-zoom .name { color: #ffe0e8; font-size: 1.35rem; font-weight: 700; letter-spacing: 0.08em; text-shadow: 0 0 16px rgba(255, 107, 138, 0.7); } .cy-paradise-zoom .tease { color: #fff; font-size: 1.4rem; font-weight: 700; line-height: 1.5; text-align: center; max-width: 88vw; padding: 16px 24px; background: rgba(70, 12, 35, 0.96); border: 2px solid rgba(255, 107, 138, 0.88); border-radius: 22px; text-shadow: 0 1px 8px rgba(255, 107, 138, 0.78); box-shadow: 0 10px 38px rgba(255, 107, 138, 0.52), 0 0 52px rgba(255, 107, 138, 0.55); cursor: pointer; user-select: none; letter-spacing: 0.05em; } .cy-paradise-zoom .tease:active { transform: scale(0.985); } .cy-paradise-zoom .btns { display: flex; gap: 14px; margin-top: 4px; } .cy-paradise-zoom button { padding: 14px 26px; font-family: "Shippori Mincho", serif; font-size: 1.0rem; font-weight: 700; border-radius: 999px; cursor: pointer; border: 1.5px solid; min-width: 138px; min-height: 52px; letter-spacing: 0.06em; } .cy-paradise-zoom .btn-chat { background: linear-gradient(135deg, #5a1e45, #a02d65); color: #fff; border-color: rgba(255, 107, 138, 0.92); box-shadow: 0 4px 18px rgba(255, 107, 138, 0.45); } .cy-paradise-zoom .btn-close { background: rgba(28, 10, 22, 0.85); color: #ffd0db; border-color: rgba(255, 107, 138, 0.45); } @keyframes cy-paradise-zoom-in { 0% { opacity: 0; transform: scale(0.93); } 100% { opacity: 1; transform: scale(1); } } /* v220 楽園シーン: 画像最大化承け scene は下 25vh だけ、極薄白で大文字 Master「いい感じの画像が見えない」「白背景は極薄でもっと狭く」「文字大きく」 */ .cy-paradise-scene { position: fixed; top: auto; bottom: calc(78px + env(safe-area-inset-bottom)); left: 0; right: 0; height: 25vh; /* v220: 38→25vh、画像領域 75vh 確保 */ z-index: 8; padding: 10px 16px; background: rgba(255, 250, 252, 0.30); /* v220: 0.82→0.30 極薄、画像透ける */ -webkit-backdrop-filter: blur(3px); /* v220: blur 軽く */ backdrop-filter: blur(3px); border-top: 1px solid rgba(255, 107, 138, 0.45); border-radius: 14px 14px 0 0; box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.40); overflow: hidden; pointer-events: auto; opacity: 0; transition: opacity 0.8s ease; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 92%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 92%, transparent 100%); } .cy-paradise-scene.cy-show { opacity: 1; } .cy-paradise-scene-inner { color: #000000; /* 純黒 */ font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1.55rem; /* v220: 1.30→1.55 大きく */ font-weight: 900; line-height: 1.85; letter-spacing: 0.05em; /* v220: 極薄白背景でも contrast 保つよう 白 outline 軽く (halo じゃなく hard outline) */ text-shadow: -1px -1px 0 rgba(255,255,255,0.95), 1px -1px 0 rgba(255,255,255,0.95), -1px 1px 0 rgba(255,255,255,0.95), 1px 1px 0 rgba(255,255,255,0.95), 0 0 8px rgba(255,255,255,0.85); white-space: pre-wrap; padding-top: 45vh; /* v220: 65→45vh (box が小さいので) */ padding-bottom: 35vh; will-change: transform; } /* v295.5: 音声同期 read-along — 今読んでいるチャンクを発光ハイライト */ .cy-paradise-scene-inner .cy-pv-chunk { transition: color 0.35s ease, text-shadow 0.35s ease; } .cy-paradise-scene-inner .cy-pv-chunk-on { color: #b80f5a; text-shadow: -1px -1px 0 rgba(255,255,255,0.98), 1px -1px 0 rgba(255,255,255,0.98), -1px 1px 0 rgba(255,255,255,0.98), 1px 1px 0 rgba(255,255,255,0.98), 0 0 14px rgba(255,47,134,0.6); } /* v212: 「もっと…」 button は撤去 (永遠 auto-scroll なので不要) */ .cy-paradise-scene-more { display: none !important; } /* v230 cleanup: cy-paradise-scene-more-DEAD block (~30 行) を削除。 v212 撤去以前の original 「もっと…」 button styling、現在 cy-paradise-scene-more に `display: none !important` で完全 hide 済 = dead styling 残置。 active class `.cy-show / :active / .loading` は app.js でも参照ゼロ (Grep 確認 9748 のみ remove call)、 rollback は backup tar から復元可。 */ /* タッチで反応する大画像 hero overlay (paradise 中、画面下半分は invisible click 拾い) */ .cy-paradise-touch-area { position: fixed; bottom: 0; left: 0; right: 0; height: 35vh; z-index: 3; pointer-events: auto; background: transparent; } body[data-paradise="1"] .cy-paradise-touch-area { display: block; } body:not([data-paradise="1"]) .cy-paradise-touch-area { display: none; } .cy-paradise-touch-pop { position: fixed; z-index: 5; font-family: "Shippori Mincho", serif; font-weight: 700; color: #fff; text-shadow: 0 0 22px rgba(255, 107, 138, 0.95), 0 0 40px rgba(255, 107, 138, 0.6); pointer-events: none; user-select: none; font-size: 2.1rem; letter-spacing: 0.04em; animation: cy-paradise-touch-pop-anim 1.2s cubic-bezier(0.2,0.8,0.2,1) forwards; } @keyframes cy-paradise-touch-pop-anim { 0% { opacity: 0; transform: scale(0.4) translateY(0); } 35% { opacity: 1; transform: scale(1.15) translateY(-15px); } 100% { opacity: 0; transform: scale(1.35) translateY(-60px); } } /* v206 Master 指示「時限のやつ消せてない?」承け完全撲滅: cy-whisper-on-card を強制 hide (v200/v201 の floating 吹き出しが char-card 上で cy-card-tease と重なってた bug) */ .cy-whisper-on-card { display: none !important; visibility: hidden !important; } .cy-whisper { display: none !important; visibility: hidden !important; } /* (B) whisper を foyer-hero card 表面に — v197 visual (撤去対象、定義のみ残置) */ .cy-whisper-on-card-deadclass-keep { position: absolute; top: 12%; left: 50%; z-index: 10; max-width: 86%; padding: 14px 22px; background: rgba(60, 18, 38, 0.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 2px solid rgba(255, 107, 138, 0.85); border-radius: 22px; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "Shippori Mincho", serif; font-size: 1.18rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.4; text-align: center; text-shadow: 0 1px 6px rgba(255, 107, 138, 0.75), 0 0 18px rgba(255, 107, 138, 0.50); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.65), 0 0 42px rgba(255, 107, 138, 0.55); opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.88); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.4, 0.0, 0.2, 1); cursor: pointer; pointer-events: auto; user-select: none; } .cy-whisper-on-card.cy-show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } /* 吹き出しの尻尾 (下向き三角、立ち絵を指す感) — 大きく + 紅 drop-shadow 強 */ .cy-whisper-on-card::after { content: ''; position: absolute; bottom: -13px; left: 50%; margin-left: -12px; width: 0; height: 0; border-top: 14px solid rgba(60, 18, 38, 0.96); border-left: 12px solid transparent; border-right: 12px solid transparent; filter: drop-shadow(0 3px 6px rgba(255, 107, 138, 0.60)); } /* ═══ v228 商用品質: skeleton / empty / err / banner ═══ Master 指示 2026-05-24: 商用クオリティに照らした gap 解消の第 1 弾。 ・cold paint で 「読み込み中…」と空白で固まる体感を skeleton 化 ・0 件 empty を CTA 付き proper empty state に ・fetch 失敗を「読み込み中…」放置でなく toast + retry に ・Pod 接続切れを persistent banner で見える化 */ @keyframes cy-skel-shimmer { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } } .cy-skel-card { aspect-ratio: 3 / 4; background: rgba(28, 20, 42, 0.55); border: 1px solid rgba(200, 160, 255, 0.15); border-radius: 12px; overflow: hidden; position: relative; } .cy-skel-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(200, 160, 255, 0.12) 50%, transparent 100%); background-size: 200% 100%; animation: cy-skel-shimmer 1.8s ease-in-out infinite; } .cy-skel-row { height: 56px; background: rgba(28, 20, 42, 0.55); border: 1px solid rgba(200, 160, 255, 0.12); border-radius: 12px; margin: 6px 0; position: relative; overflow: hidden; } .cy-skel-row::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(200, 160, 255, 0.10) 50%, transparent 100%); background-size: 200% 100%; animation: cy-skel-shimmer 1.8s ease-in-out infinite; } .cy-skel-msg { display: block; height: 16px; margin: 6px 0; background: rgba(40, 28, 55, 0.55); border-radius: 4px; position: relative; overflow: hidden; } .cy-skel-msg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(200, 160, 255, 0.10) 50%, transparent 100%); background-size: 200% 100%; animation: cy-skel-shimmer 1.4s ease-in-out infinite; } /* Empty state with CTA */ .cy-empty { text-align: center; padding: 40px 24px 28px; color: rgba(200, 180, 230, 0.78); font-family: "Shippori Mincho", serif; } .cy-empty .icon { font-size: 2.8rem; display: block; margin-bottom: 12px; opacity: 0.74; filter: drop-shadow(0 4px 12px rgba(200, 160, 255, 0.32)); } .cy-empty .title { font-size: 1.04rem; letter-spacing: 0.08em; margin-bottom: 6px; color: rgba(232, 220, 250, 0.96); } .cy-empty .sub { font-size: 0.76rem; opacity: 0.62; letter-spacing: 0.04em; margin-bottom: 20px; line-height: 1.55; font-family: -apple-system, BlinkMacSystemFont, sans-serif; white-space: pre-line; } .cy-empty .cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .cy-empty .cta { padding: 10px 18px; background: rgba(120, 80, 175, 0.20); border: 1px solid rgba(200, 160, 255, 0.42); border-radius: 999px; color: rgba(232, 220, 250, 0.96); font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.82rem; letter-spacing: 0.04em; cursor: pointer; min-height: 44px; transition: background 160ms ease, transform 120ms ease; } .cy-empty .cta:hover { background: rgba(160, 110, 220, 0.32); } .cy-empty .cta:active { transform: scale(0.96); } .cy-empty .cta.primary { background: linear-gradient(135deg, rgba(160, 90, 220, 0.42), rgba(180, 110, 240, 0.55)); border-color: rgba(200, 160, 255, 0.78); font-weight: 500; box-shadow: 0 4px 16px rgba(160, 110, 240, 0.32); } /* Error toast (retry + close 付き、cy-fab/gate より上に配置) v230 B12 fix: z-index 99 → 998。 paradise overlay (z-index 100-200) に隠れて見えない bug 解消。 banner (999) 直下に置くことで health fail toast が paradise 中でも前面表示。 */ .cy-toast-err { position: fixed; left: 50%; bottom: calc(180px + env(safe-area-inset-bottom) + var(--kb-inset)); transform: translateX(-50%) translateY(8px); z-index: 998; display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: rgba(60, 15, 30, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 107, 138, 0.58); border-radius: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 107, 138, 0.22); color: #ffe4ea; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.80rem; letter-spacing: 0.03em; max-width: calc(100vw - 28px); opacity: 0; transition: opacity 220ms ease, transform 220ms ease; } .cy-toast-err.cy-show { opacity: 1; transform: translateX(-50%) translateY(0); } .cy-toast-err .label { flex: 1; min-width: 0; line-height: 1.4; } .cy-toast-err .retry { padding: 6px 12px; background: rgba(255, 107, 138, 0.32); border: 1px solid rgba(255, 107, 138, 0.62); border-radius: 8px; color: #fff; font-size: 0.74rem; font-weight: 600; cursor: pointer; white-space: nowrap; min-height: 36px; } .cy-toast-err .retry:active { background: rgba(255, 107, 138, 0.55); } .cy-toast-err .close { padding: 4px 6px; background: transparent; border: 0; color: rgba(255, 228, 234, 0.62); font-size: 16px; cursor: pointer; min-width: 36px; min-height: 36px; } .cy-toast-err .close:hover { color: #ffe4ea; } /* Persistent server-down banner (top of viewport, slides in) */ .cy-banner { position: fixed; left: 0; right: 0; top: 0; z-index: 999; padding: calc(env(safe-area-inset-top) + 8px) 14px 8px; background: linear-gradient(180deg, rgba(80, 15, 30, 0.96), rgba(50, 8, 18, 0.92)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 107, 138, 0.55); color: #ffe4ea; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.80rem; text-align: center; letter-spacing: 0.05em; display: none; transform: translateY(-100%); transition: transform 320ms ease; pointer-events: none; } .cy-banner.cy-show { display: block; transform: translateY(0); } .cy-banner .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ff6b8a; margin-right: 6px; animation: cy-banner-pulse 1.2s ease-in-out infinite; vertical-align: middle; } @keyframes cy-banner-pulse { 0%, 100% { opacity: 0.4; transform: scale(0.85); } 50% { opacity: 1.0; transform: scale(1.15); } } /* prefers-reduced-motion: skeleton/banner pulse は呼吸感を保ったまま rate 半分に shimmer は完全停止 (前庭神経弱い人 NG 配慮) */ @media (prefers-reduced-motion: reduce) { .cy-skel-card::before, .cy-skel-row::before, .cy-skel-msg::before { animation: none !important; background: rgba(200,160,255,0.06) !important; } .cy-banner .dot { animation-duration: 2.4s; } .cy-paradise-hero-bg > img, .cy-paradise-hero-bg > video { animation: none !important; } } /* ═══ v234 B-2 chat header sheet (⚙ menu): VN/長/字 を 1 つの ⚙ に集約 ═══ Master 指示 2026-05-24: chat header 6 要素 (← avatar 名前 🎞 長 字 ⚙) は窮屈 → 4 要素 (← avatar 名前 ⚙) + sheet 内 3 row に整理。視野ノイズ削減 + 機能発見性向上。 popover は header 直下 right 寄せ、tap outside / ESC で閉じる。 各 row = [既存 icon button (36px)] + [label text] の inline-flex layout。 */ .cy-chat-sheet { position: fixed; top: calc(env(safe-area-inset-top) + 60px); right: 12px; z-index: 50; display: none; flex-direction: column; gap: 8px; min-width: 200px; padding: 12px; background: rgba(20, 16, 32, 0.94); border: 1px solid rgba(200, 160, 255, 0.32); border-radius: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.50), 0 0 18px rgba(200, 160, 255, 0.18); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); font-family: -apple-system, BlinkMacSystemFont, "Shippori Mincho", serif; opacity: 0; transform: translateY(-6px) scale(0.98); transition: opacity 180ms ease, transform 180ms ease; pointer-events: none; } .cy-chat-sheet.cy-show { display: flex; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .cy-chat-sheet-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; } .cy-chat-sheet-label { flex: 1; font-size: 0.82rem; letter-spacing: 0.04em; color: #dcd0ee; font-weight: 400; font-family: -apple-system, BlinkMacSystemFont, sans-serif; } @media (prefers-reduced-motion: reduce) { .cy-chat-sheet { transition: none !important; transform: none; } .cy-chat-sheet.cy-show { transform: none; } } /* ═══ v236 💋 ピンクサロン (Master 指示 2026-05-24) ═══ Master フェチ profile 直撃の ephemeral 接客嬢 5 人を一期一会接客。 palette: Twilight 紫 → 紅寄り (店感)、ネオン glow + ガラス backdrop blur。 既存 paradise より warmer、卑語/背徳ニオワセ系の card 表現。 */ .cy-pinsa-wrap { padding: 18px 14px 80px; background: radial-gradient(ellipse at 50% 0%, rgba(50, 8, 28, 0.55) 0%, transparent 60%); } .cy-pinsa-entry { background: linear-gradient(135deg, rgba(120, 30, 80, 0.32), rgba(180, 50, 110, 0.42)) !important; border-color: rgba(255, 107, 138, 0.55) !important; color: #ffe4ea !important; text-shadow: 0 0 8px rgba(255, 107, 138, 0.55); box-shadow: 0 0 14px rgba(255, 107, 138, 0.28); } .cy-pinsa-welcome { text-align: center; padding: 28px 14px 12px; margin-bottom: 16px; background: linear-gradient(180deg, rgba(80, 15, 50, 0.42), rgba(40, 8, 28, 0.62)); border: 1px solid rgba(255, 107, 138, 0.55); border-radius: 16px; box-shadow: 0 0 30px rgba(255, 107, 138, 0.28), inset 0 0 24px rgba(255, 107, 138, 0.18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .cy-pinsa-welcome-title { font-family: "Shippori Mincho", serif; font-size: 1.6rem; color: #ffe4ea; letter-spacing: 0.14em; font-weight: 500; text-shadow: 0 0 18px rgba(255, 107, 138, 0.85), 0 0 36px rgba(255, 107, 138, 0.55); margin-bottom: 8px; } .cy-pinsa-welcome-sub { font-family: "Shippori Mincho", serif; font-size: 0.86rem; color: rgba(255, 220, 230, 0.78); letter-spacing: 0.08em; } .cy-pinsa-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 24px; } .cy-pinsa-card { background: linear-gradient(180deg, rgba(40, 12, 28, 0.78), rgba(20, 8, 18, 0.92)); border: 1.5px solid rgba(255, 107, 138, 0.42); border-radius: 16px; padding: 16px 18px; position: relative; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 14px rgba(255, 107, 138, 0.22), inset 0 0 18px rgba(120, 20, 60, 0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: -apple-system, BlinkMacSystemFont, sans-serif; } .cy-pinsa-card-catch { font-family: "Shippori Mincho", serif; font-size: 1.04rem; color: #ffe4ea; letter-spacing: 0.06em; margin-bottom: 10px; line-height: 1.45; text-shadow: 0 0 8px rgba(255, 107, 138, 0.55); font-weight: 500; } .cy-pinsa-card-name { font-family: "Shippori Mincho", serif; font-size: 1.32rem; color: #ffe4ea; letter-spacing: 0.12em; font-weight: 600; margin-bottom: 8px; text-shadow: 0 0 10px rgba(255, 107, 138, 0.65); } .cy-pinsa-card-name .age { font-size: 0.78rem; color: rgba(255, 220, 230, 0.62); letter-spacing: 0.06em; font-weight: 400; margin-left: 6px; } .cy-pinsa-card-appearance, .cy-pinsa-card-bg { font-size: 0.82rem; line-height: 1.62; color: rgba(255, 220, 230, 0.85); margin-bottom: 6px; letter-spacing: 0.02em; } .cy-pinsa-card-bg { font-style: italic; opacity: 0.92; border-left: 2px solid rgba(255, 107, 138, 0.42); padding-left: 10px; margin: 8px 0; } .cy-pinsa-card-sig { display: flex; gap: 8px; background: rgba(80, 12, 38, 0.42); padding: 8px 10px; border-radius: 8px; margin: 10px 0 14px; font-size: 0.80rem; line-height: 1.55; color: rgba(255, 220, 230, 0.92); } .cy-pinsa-card-sig .label { flex: 0 0 auto; font-family: "Shippori Mincho", serif; color: rgba(255, 168, 188, 0.96); font-weight: 500; letter-spacing: 0.06em; } .cy-pinsa-card-sig .text { flex: 1; letter-spacing: 0.02em; } .cy-pinsa-pick { display: block; width: 100%; padding: 13px; margin-top: 12px; background: linear-gradient(135deg, rgba(160, 30, 80, 0.62), rgba(200, 60, 110, 0.78)); border: 1px solid rgba(255, 107, 138, 0.85); border-radius: 999px; color: #ffe4ea; font-family: "Shippori Mincho", serif; font-size: 0.96rem; letter-spacing: 0.12em; font-weight: 600; cursor: pointer; min-height: 48px; box-shadow: 0 4px 18px rgba(255, 107, 138, 0.42), 0 0 24px rgba(255, 107, 138, 0.32); text-shadow: 0 0 8px rgba(255, 107, 138, 0.85); transition: transform 120ms ease, box-shadow 200ms ease; } .cy-pinsa-pick:active { transform: scale(0.96); box-shadow: 0 2px 10px rgba(255, 107, 138, 0.55); } .cy-pinsa-card-skel { height: 220px; background: linear-gradient(90deg, rgba(40, 12, 28, 0.55) 0%, rgba(80, 24, 50, 0.62) 50%, rgba(40, 12, 28, 0.55) 100%); background-size: 200% 100%; animation: cy-skel-shimmer 1.8s ease-in-out infinite; border: 1px solid rgba(255, 107, 138, 0.22); border-radius: 16px; position: relative; overflow: hidden; } /* v250: admit-async の経過表示 + 「画面切替 OK」hint */ .cy-pinsa-admit-hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: 'Shippori Mincho', serif; color: #ffd5e4; font-size: 0.85rem; line-height: 1.5; letter-spacing: 0.04em; padding: 0 18px; white-space: pre-line; text-shadow: 0 0 12px rgba(255, 107, 138, 0.4); pointer-events: none; } .cy-pinsa-admit-elapsed { position: absolute; right: 14px; bottom: 12px; font-family: 'Shippori Mincho', serif; font-size: 0.65rem; color: rgba(255, 213, 228, 0.78); letter-spacing: 0.08em; pointer-events: none; } .cy-pinsa-card-skel:not(:first-child) .cy-pinsa-admit-hint, .cy-pinsa-card-skel:not(:first-child) .cy-pinsa-admit-elapsed { /* 5 枚並ぶ skeleton のうち先頭以外には hint 表示しない (重複ノイズ防止) */ display: none; } .cy-pinsa-actions { display: flex; gap: 10px; margin-top: 8px; } .cy-pinsa-reroll, .cy-pinsa-leave { flex: 1; padding: 12px; background: rgba(40, 14, 28, 0.62); border: 1px solid rgba(255, 107, 138, 0.32); border-radius: 12px; color: rgba(255, 220, 230, 0.92); font-family: "Shippori Mincho", serif; font-size: 0.86rem; letter-spacing: 0.08em; cursor: pointer; min-height: 44px; } .cy-pinsa-reroll:active, .cy-pinsa-leave:active, .cy-pinsa-prompt-edit:active { background: rgba(80, 20, 50, 0.55); } /* v240 プロンプト編集 button + modal */ .cy-pinsa-prompt-edit { flex: 1; padding: 12px; background: rgba(40, 14, 28, 0.62); border: 1px solid rgba(200, 160, 255, 0.42); border-radius: 12px; color: rgba(220, 200, 245, 0.92); font-family: "Shippori Mincho", serif; font-size: 0.86rem; letter-spacing: 0.08em; cursor: pointer; min-height: 44px; } .cy-pinsa-prompt-modal { max-width: 720px !important; } .cy-pinsa-prompt-textarea { width: 100%; min-height: 240px; max-height: 50vh; padding: 12px 14px; background: rgba(15, 8, 18, 0.82); border: 1px solid rgba(200, 160, 255, 0.42); border-radius: 10px; color: #ffe4ea; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 0.78rem; line-height: 1.6; resize: vertical; outline: none; margin: 12px 0 6px; box-sizing: border-box; } .cy-pinsa-prompt-textarea:focus { border-color: rgba(255, 107, 138, 0.78); box-shadow: 0 0 12px rgba(255, 107, 138, 0.32); } .cy-pinsa-prompt-info { font-size: 0.72rem; letter-spacing: 0.06em; color: rgba(255, 220, 230, 0.62); text-align: right; margin-bottom: 4px; } /* v245: 🐦 X cookie 連携 section in /settings */ .cy-x-cookie-sec { margin: 16px 0 24px; padding: 16px 14px; background: linear-gradient(180deg, rgba(28, 38, 60, 0.55), rgba(18, 22, 38, 0.78)); border: 1px solid rgba(120, 180, 255, 0.32); border-radius: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32); } .cy-x-cookie-title { font-family: "Shippori Mincho", serif; font-size: 1.04rem; letter-spacing: 0.08em; color: rgba(220, 235, 255, 0.96); margin-bottom: 6px; font-weight: 500; text-shadow: 0 0 8px rgba(120, 180, 255, 0.42); } .cy-x-cookie-sub { font-size: 0.76rem; line-height: 1.55; color: rgba(200, 215, 240, 0.72); white-space: pre-line; margin-bottom: 12px; letter-spacing: 0.02em; } .cy-x-cookie-status { font-size: 0.78rem; padding: 8px 12px; background: rgba(20, 24, 38, 0.62); border-radius: 8px; margin-bottom: 10px; color: rgba(180, 200, 230, 0.78); font-family: -apple-system, BlinkMacSystemFont, monospace; word-break: break-all; } .cy-x-cookie-status.cy-x-cookie-saved { color: rgba(155, 231, 196, 0.92); border-left: 3px solid rgba(95, 200, 140, 0.78); } .cy-x-cookie-textarea { width: 100%; min-height: 80px; max-height: 200px; padding: 10px 12px; background: rgba(12, 16, 28, 0.85); border: 1px solid rgba(120, 180, 255, 0.42); border-radius: 10px; color: #ddeaff; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 0.72rem; line-height: 1.55; resize: vertical; outline: none; margin-bottom: 10px; box-sizing: border-box; } .cy-x-cookie-textarea:focus { border-color: rgba(160, 210, 255, 0.78); box-shadow: 0 0 10px rgba(120, 180, 255, 0.32); } .cy-x-cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .cy-x-cookie-actions .btn { min-height: 38px; padding: 8px 14px; font-size: 0.82rem; letter-spacing: 0.05em; border-radius: 9px; cursor: pointer; font-family: "Shippori Mincho", serif; } .cy-x-cookie-actions .btn.primary { background: linear-gradient(135deg, rgba(80, 130, 200, 0.62), rgba(120, 170, 240, 0.85)); border: 1px solid rgba(160, 200, 255, 0.78); color: #fff; } .cy-x-cookie-actions .btn.sec { background: rgba(30, 38, 60, 0.78); border: 1px solid rgba(120, 180, 255, 0.32); color: rgba(220, 235, 255, 0.85); } .cy-x-cookie-actions .btn:active { transform: scale(0.96); } .cy-x-cookie-result { font-size: 0.78rem; line-height: 1.55; padding: 10px 12px; background: rgba(20, 24, 38, 0.55); border-radius: 8px; color: rgba(180, 200, 230, 0.78); font-family: -apple-system, BlinkMacSystemFont, monospace; white-space: pre-line; min-height: 12px; } .cy-x-cookie-result.cy-x-cookie-ok { color: #ffe4ea; background: rgba(40, 90, 60, 0.32); border-left: 3px solid rgba(95, 200, 140, 0.78); } .cy-x-cookie-result.cy-x-cookie-fail { color: #ffe4ea; background: rgba(80, 30, 40, 0.45); border-left: 3px solid rgba(255, 107, 138, 0.78); } /* ─── v250: 📷 X 指定アカウント → ギャラリー section ─── */ .cy-xgal-sec { margin: 16px 0 24px; padding: 16px 14px; background: linear-gradient(180deg, rgba(40, 24, 50, 0.62), rgba(22, 14, 32, 0.82)); border: 1px solid rgba(200, 140, 220, 0.36); border-radius: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); } .cy-xgal-title { font-family: "Shippori Mincho", serif; font-size: 1.04rem; letter-spacing: 0.08em; color: #f0d8ff; margin-bottom: 6px; font-weight: 500; text-shadow: 0 0 8px rgba(200, 140, 220, 0.42); } .cy-xgal-sub { font-size: 0.76rem; line-height: 1.55; color: rgba(220, 200, 235, 0.74); white-space: pre-line; margin-bottom: 12px; letter-spacing: 0.02em; } .cy-xgal-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .cy-xgal-empty { text-align: center; font-family: "Shippori Mincho", serif; font-size: 0.82rem; color: rgba(220, 200, 235, 0.55); padding: 14px; letter-spacing: 0.06em; } .cy-xgal-chip { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(22, 14, 32, 0.78); border: 1px solid rgba(200, 140, 220, 0.28); border-radius: 10px; } .cy-xgal-chip-name { font-family: "Shippori Mincho", serif; font-size: 0.92rem; color: #ffd5f0; letter-spacing: 0.04em; flex-shrink: 0; } .cy-xgal-chip-meta { font-size: 0.7rem; color: rgba(220, 200, 235, 0.62); flex: 1; letter-spacing: 0.02em; } .cy-xgal-chip-acts { display: flex; gap: 6px; } .cy-xgal-chip-btn { min-width: 32px; min-height: 32px; background: rgba(40, 24, 50, 0.72); border: 1px solid rgba(200, 140, 220, 0.36); border-radius: 8px; color: #ffd5f0; font-size: 0.82rem; cursor: pointer; } .cy-xgal-chip-btn.cy-xgal-chip-del { border-color: rgba(255, 107, 138, 0.42); color: #ffb5c8; } .cy-xgal-chip-btn:active { transform: scale(0.92); } .cy-xgal-add-box { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 10px; } .cy-xgal-add-ta { flex: 1; min-height: 64px; padding: 8px 10px; background: rgba(12, 8, 20, 0.78); border: 1px solid rgba(200, 140, 220, 0.42); border-radius: 9px; color: #f0d8ff; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 0.74rem; line-height: 1.5; resize: vertical; outline: none; box-sizing: border-box; } .cy-xgal-add-ta:focus { border-color: rgba(220, 170, 240, 0.78); box-shadow: 0 0 10px rgba(200, 140, 220, 0.32); } .cy-xgal-add-box .btn { min-height: 38px; padding: 8px 14px; font-size: 0.82rem; border-radius: 9px; } .cy-xgal-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; } .cy-xgal-actions .btn { min-height: 38px; padding: 8px 14px; font-size: 0.82rem; border-radius: 9px; cursor: pointer; font-family: "Shippori Mincho", serif; } .cy-xgal-actions .btn.primary { background: linear-gradient(135deg, rgba(140, 90, 180, 0.65), rgba(190, 130, 220, 0.85)); border: 1px solid rgba(220, 170, 240, 0.78); color: #fff; } .cy-xgal-actions .btn.sec { background: rgba(30, 20, 42, 0.78); border: 1px solid rgba(200, 140, 220, 0.36); color: #f0d8ff; } .cy-xgal-total { font-size: 0.78rem; color: rgba(220, 200, 235, 0.72); letter-spacing: 0.04em; } .cy-xgal-sync-status { font-size: 0.75rem; padding: 8px 12px; background: rgba(20, 14, 30, 0.62); border-radius: 8px; color: rgba(220, 200, 235, 0.78); font-family: -apple-system, BlinkMacSystemFont, monospace; white-space: pre-line; min-height: 12px; } .cy-xgal-sync-status.ok { color: #d8ffe4; border-left: 3px solid rgba(95, 200, 140, 0.78); background: rgba(30, 60, 40, 0.32); } .cy-xgal-sync-status.fail { color: #ffd5dc; border-left: 3px solid rgba(255, 107, 138, 0.78); background: rgba(70, 28, 38, 0.42); } .cy-xgal-sync-status.running { color: #ffe4f8; border-left: 3px solid rgba(200, 140, 220, 0.78); } /* gallery viewer modal */ .cy-xgal-modal { position: relative; width: min(92vw, 760px); max-height: 88vh; overflow-y: auto; background: linear-gradient(180deg, rgba(30, 18, 40, 0.97), rgba(16, 10, 24, 0.99)); border: 1px solid rgba(200, 140, 220, 0.42); border-radius: 16px; padding: 18px 16px 16px; box-shadow: 0 12px 50px rgba(0, 0, 0, 0.7); } .cy-xgal-modal-title { font-family: "Shippori Mincho", serif; font-size: 1.1rem; letter-spacing: 0.08em; color: #f8e0ff; text-align: center; margin-bottom: 14px; text-shadow: 0 0 12px rgba(220, 170, 240, 0.5); } .cy-xgal-filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .cy-xgal-filter-sel { padding: 6px 10px; background: rgba(16, 10, 24, 0.85); border: 1px solid rgba(200, 140, 220, 0.42); border-radius: 8px; color: #f0d8ff; font-size: 0.82rem; font-family: -apple-system, BlinkMacSystemFont, sans-serif; min-height: 34px; } .cy-xgal-starred-label { font-size: 0.84rem; color: #ffd5f0; cursor: pointer; } .cy-xgal-grid { display: grid; /* v272: tile を大きく — 110px (iPhone で 3 列詰め込み) → 200px (1-2 列)。 視野内 active 動画数を 12-15 → 2-4 に削減、 IntersectionObserver の decode 殺到を防ぐ。 Master 報告 (2026-05-27): スクロールで crash の根本対策。 */ grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; margin-bottom: 12px; } .cy-xgal-tile { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px; border: 1px solid rgba(200, 140, 220, 0.22); background: rgba(12, 8, 20, 0.6); cursor: pointer; isolation: isolate; } .cy-xgal-tile.starred { border-color: rgba(255, 215, 100, 0.78); box-shadow: 0 0 10px rgba(255, 215, 100, 0.32); } .cy-xgal-tile.video::before { content: "▶"; position: absolute; top: 6px; left: 6px; z-index: 2; color: #fff; font-size: 0.62rem; background: rgba(0,0,0,0.72); padding: 2px 6px; border-radius: 6px; pointer-events: none; text-shadow: 0 1px 2px #000; } .cy-xgal-tile > img, .cy-xgal-tile > video { width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; } /* v253: ☆ / ✕ ボタンを tile 右上に絶対配置 (tap area 36px、 半透明背景で常に押せる) */ .cy-xgal-tile-acts { position: absolute; top: 4px; right: 4px; z-index: 3; /* video / image の上 */ display: flex; flex-direction: column; gap: 4px; pointer-events: auto; } .cy-xgal-tile-acc { position: absolute; bottom: 4px; left: 4px; z-index: 2; font-size: 0.62rem; color: #ffd5f0; letter-spacing: 0.02em; background: rgba(0,0,0,0.72); padding: 2px 6px; border-radius: 5px; text-shadow: 0 1px 2px #000; pointer-events: none; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cy-xgal-tile-btn { width: 36px; height: 36px; /* iPhone tap target 推奨 44 に近い (overlay 内なので 36 で OK) */ min-width: 36px; min-height: 36px; padding: 0; background: rgba(0,0,0,0.82); border: 1.5px solid rgba(255,255,255,0.55); border-radius: 9px; color: #fff; font-size: 1.05rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: rgba(255, 215, 100, 0.3); } .cy-xgal-tile-btn:active { transform: scale(0.9); } .cy-xgal-tile-btn.star { background: rgba(40, 28, 8, 0.88); border-color: rgba(255, 215, 100, 0.62); color: #ffd870; } .cy-xgal-tile-btn.del { background: rgba(40, 14, 22, 0.88); border-color: rgba(255, 107, 138, 0.72); color: #ffb5c8; } /* v254: tile 下部に tag chip strip */ .cy-xgal-tile-tags { position: absolute; left: 4px; right: 4px; bottom: 28px; display: flex; flex-wrap: nowrap; gap: 3px; overflow: hidden; z-index: 2; pointer-events: none; } .cy-xgal-tile-tag { font-size: 0.58rem; background: rgba(0,0,0,0.78); color: #ffe4ea; padding: 1px 6px; border-radius: 4px; letter-spacing: 0.02em; white-space: nowrap; text-shadow: 0 1px 1px #000; border: 1px solid rgba(255,255,255,0.18); } .cy-xgal-tile-tag.plus { background: rgba(120,60,160,0.78); border-color: rgba(220,180,240,0.42); } /* ════════════════════════════════════════════════════════════════════ v285: char-card に 関係 mini-bar / 学習 N / 「N 日ぶり」 を上載せ passive で「この子との関係が育ってる」 felt。 paradise 手応え。 ════════════════════════════════════════════════════════════════════ */ .cy-card-rel { position: absolute; left: 8px; right: 8px; bottom: 7px; z-index: 3; display: flex; align-items: center; gap: 8px; pointer-events: none; } .cy-card-rel-bar { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.14); border-radius: 2px; overflow: hidden; } .cy-card-rel-fill { height: 100%; background: linear-gradient(90deg, rgba(255, 140, 196, 0.62), rgba(255, 47, 134, 0.92)); box-shadow: 0 0 8px rgba(255, 47, 134, 0.6); border-radius: 2px; } .cy-card-learned { flex: 0 0 auto; font-size: 0.66rem; letter-spacing: 0.04em; color: #ffd5e8; padding: 2px 7px; background: rgba(20, 8, 22, 0.62); border: 1px solid rgba(255, 140, 196, 0.42); border-radius: 999px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .cy-card-since { position: absolute; bottom: 22px; right: 8px; z-index: 3; font-size: 0.62rem; letter-spacing: 0.04em; color: rgba(255, 220, 240, 0.85); padding: 2px 7px; background: rgba(20, 8, 22, 0.62); border: 1px solid rgba(200, 160, 255, 0.32); border-radius: 999px; pointer-events: none; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-family: 'Shippori Mincho', serif; } /* grid header (会いに行く 見出し) */ .cy-grid-hd { display: flex; justify-content: space-between; align-items: baseline; margin: 24px 0 8px; padding: 0 2px; } /* v282-D: action タグ chip (色は inline で個別指定) */ .cy-xgal-tile-tag.action { font-weight: 600; border-color: rgba(255, 255, 255, 0.32); } /* v282-D: action filter pill row */ .cy-xgal-pills { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 8px; margin-bottom: 6px; scrollbar-width: none; } .cy-xgal-pills::-webkit-scrollbar { display: none; } .cy-xgal-pill { flex: 0 0 auto; padding: 6px 11px; font-size: 0.74rem; letter-spacing: 0.04em; border: 1px solid rgba(200, 160, 255, 0.22); border-radius: 999px; background: rgba(20, 16, 32, 0.55); color: #cfc4e6; cursor: pointer; white-space: nowrap; font-family: 'Noto Sans JP', sans-serif; transition: transform 0.14s ease, background 0.18s ease, border-color 0.18s ease; -webkit-tap-highlight-color: transparent; } .cy-xgal-pill:active { transform: scale(0.94); } .cy-xgal-pill.on { background: linear-gradient(135deg, rgba(200, 160, 255, 0.42), rgba(122, 95, 255, 0.32)); border-color: rgba(200, 160, 255, 0.62); color: #fff; box-shadow: 0 0 0 1px rgba(200, 160, 255, 0.32), 0 2px 12px rgba(200, 160, 255, 0.22); } /* v254: tag progress (gallery modal 上部) */ .cy-xgal-tag-progress { font-size: 0.7rem; color: rgba(220, 200, 235, 0.62); letter-spacing: 0.04em; margin-bottom: 8px; text-align: center; } /* v254: lightbox (大画面 + 横フリック) */ .cy-xgal-lb-ov { position: fixed; inset: 0; z-index: 100000; background: rgba(8, 5, 14, 0.97); display: flex; flex-direction: column; overflow: hidden; touch-action: pan-y; } .cy-xgal-lb-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: env(safe-area-inset-top, 6px) 12px 8px; background: linear-gradient(180deg, rgba(0,0,0,0.62), transparent); } .cy-xgal-lb-pos { font-family: "Shippori Mincho", serif; font-size: 0.84rem; color: rgba(240, 216, 255, 0.85); letter-spacing: 0.08em; text-shadow: 0 1px 4px #000; } .cy-xgal-lb-close { width: 40px; height: 40px; background: rgba(40, 14, 22, 0.85); border: 1.5px solid rgba(255, 107, 138, 0.72); border-radius: 10px; color: #fff; font-size: 1.2rem; cursor: pointer; } .cy-xgal-lb-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 50px 0 130px; overflow: hidden; touch-action: pan-y; } .cy-xgal-lb-media { max-width: 100%; max-height: 100%; object-fit: contain; background: #000; border-radius: 4px; } .cy-xgal-lb-bottom { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; padding: 8px 10px env(safe-area-inset-bottom, 8px); background: linear-gradient(0deg, rgba(0,0,0,0.85), transparent); display: flex; flex-direction: column; gap: 6px; } .cy-xgal-lb-acc { font-size: 0.78rem; color: #ffd5f0; letter-spacing: 0.04em; text-shadow: 0 1px 3px #000; } .cy-xgal-lb-tags { display: flex; flex-wrap: wrap; gap: 4px; max-height: 56px; overflow-y: auto; } .cy-xgal-lb-tag { font-size: 0.66rem; background: rgba(80, 40, 100, 0.78); border: 1px solid rgba(220, 180, 240, 0.42); color: #f8e0ff; padding: 2px 8px; border-radius: 5px; letter-spacing: 0.04em; white-space: nowrap; } .cy-xgal-lb-tag.none { background: rgba(40, 30, 50, 0.62); color: rgba(220, 200, 235, 0.55); border-color: rgba(120, 100, 140, 0.32); } .cy-xgal-lb-text { font-size: 0.7rem; color: rgba(230, 220, 240, 0.78); line-height: 1.5; letter-spacing: 0.02em; max-height: 48px; overflow-y: auto; text-shadow: 0 1px 2px #000; } .cy-xgal-lb-actions { display: flex; gap: 6px; align-items: center; justify-content: space-between; margin-top: 2px; } .cy-xgal-lb-btn { min-width: 44px; min-height: 44px; padding: 0 12px; background: rgba(30, 20, 42, 0.92); border: 1.5px solid rgba(200, 140, 220, 0.55); border-radius: 10px; color: #f0d8ff; font-size: 0.92rem; cursor: pointer; -webkit-tap-highlight-color: rgba(255, 215, 100, 0.3); } .cy-xgal-lb-btn:active { transform: scale(0.92); } .cy-xgal-lb-btn.nav { min-width: 50px; font-size: 1.5rem; font-weight: 700; padding: 0; } .cy-xgal-lb-btn.star.on { background: rgba(60, 44, 12, 0.92); border-color: rgba(255, 215, 100, 0.78); color: #ffd870; } .cy-xgal-lb-btn.del { border-color: rgba(255, 107, 138, 0.72); color: #ffb5c8; } .cy-xgal-lb-btn.open { flex: 1; background: rgba(40, 60, 90, 0.92); border-color: rgba(130, 180, 230, 0.62); color: #d8e8ff; font-size: 0.78rem; } .cy-xgal-more, .cy-xgal-close { width: 100%; min-height: 40px; margin-top: 6px; background: rgba(30, 20, 42, 0.78); border: 1px solid rgba(200, 140, 220, 0.42); color: #f0d8ff; border-radius: 10px; font-family: "Shippori Mincho", serif; font-size: 0.86rem; letter-spacing: 0.06em; cursor: pointer; } .cy-xgal-close { margin-top: 8px; background: rgba(40, 24, 50, 0.85); } /* v241: prompt modal tabs */ .cy-pinsa-tab-row { display: flex; gap: 6px; margin: 10px 0 8px; } .cy-pinsa-tab-btn { flex: 1; padding: 9px 10px; background: rgba(40, 14, 28, 0.55); border: 1px solid rgba(255, 107, 138, 0.22); border-radius: 10px; color: rgba(255, 220, 230, 0.62); font-family: "Shippori Mincho", serif; font-size: 0.78rem; letter-spacing: 0.04em; cursor: pointer; min-height: 38px; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; } .cy-pinsa-tab-btn.cy-tab-active { background: linear-gradient(135deg, rgba(80, 20, 50, 0.78), rgba(120, 30, 70, 0.92)); color: #ffe4ea; border-color: rgba(255, 107, 138, 0.78); text-shadow: 0 0 6px rgba(255, 107, 138, 0.55); } /* v241: cast card source picker */ .cy-pinsa-source-picker { display: flex; gap: 6px; margin: 0 0 10px; } .cy-pinsa-src-btn { flex: 1; padding: 6px 8px; background: rgba(20, 8, 18, 0.55); border: 1px solid rgba(200, 160, 255, 0.22); border-radius: 8px; color: rgba(220, 200, 245, 0.62); font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.72rem; letter-spacing: 0.04em; cursor: pointer; min-height: 32px; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; } .cy-pinsa-src-btn.cy-src-active { background: rgba(80, 30, 100, 0.55); border-color: rgba(200, 160, 255, 0.62); color: #f0e2ff; box-shadow: 0 0 8px rgba(200, 160, 255, 0.22); } .cy-pinsa-src-btn:active { transform: scale(0.95); } /* v247: kind tabs (image / video) */ .cy-pinsa-kind-tabs { display: flex; gap: 6px; margin: 0 0 8px; } .cy-pinsa-kind-btn { flex: 1; padding: 6px 10px; background: rgba(20, 8, 18, 0.55); border: 1px solid rgba(120, 180, 255, 0.22); border-radius: 8px; color: rgba(220, 235, 255, 0.62); font-family: "Shippori Mincho", serif; font-size: 0.74rem; letter-spacing: 0.04em; cursor: pointer; min-height: 32px; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; } .cy-pinsa-kind-btn.cy-kind-active { background: rgba(30, 60, 120, 0.55); border-color: rgba(160, 200, 255, 0.78); color: #e0eaff; box-shadow: 0 0 10px rgba(120, 180, 255, 0.32); } .cy-pinsa-kind-btn:active { transform: scale(0.95); } .cy-pinsa-photo-video { background: #000; /* v253: video も object-fit:cover、 controls 非表示、 全画面 autoplay loop */ width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* iOS Safari の native video UI / controls overlay を最低限に */ .cy-pinsa-photo-video::-webkit-media-controls-overlay-play-button, .cy-pinsa-photo-video::-webkit-media-controls-start-playback-button { display: none !important; } /* v241: photo source badge (右下) */ .cy-pinsa-photo-source-badge { position: absolute; bottom: 8px; right: 8px; padding: 2px 8px; font-size: 0.65rem; letter-spacing: 0.06em; background: rgba(0, 0, 0, 0.62); color: rgba(255, 220, 230, 0.85); border-radius: 999px; border: 1px solid rgba(255, 107, 138, 0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; z-index: 3; font-family: -apple-system, BlinkMacSystemFont, monospace; } @media (max-width: 380px) { .cy-pinsa-welcome-title { font-size: 1.34rem; } .cy-pinsa-card { padding: 14px 14px; } } @media (prefers-reduced-motion: reduce) { .cy-pinsa-card-skel { animation: none !important; } } /* v237: 馴染み (regular) card + section + leave modal */ .cy-pinsa-section-title { font-family: "Shippori Mincho", serif; font-size: 1.04rem; color: rgba(255, 220, 230, 0.92); letter-spacing: 0.1em; margin: 18px 0 10px; font-weight: 500; text-shadow: 0 0 8px rgba(255, 107, 138, 0.42); } .cy-pinsa-regulars-sec { margin-bottom: 12px; } .cy-pinsa-card-regular { border-color: rgba(255, 200, 100, 0.62) !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 18px rgba(255, 200, 100, 0.32), inset 0 0 18px rgba(120, 80, 30, 0.18) !important; } .cy-pinsa-regular-badge { display: inline-block; padding: 3px 10px; background: rgba(255, 200, 100, 0.22); border: 1px solid rgba(255, 200, 100, 0.62); border-radius: 999px; color: #ffe2a8; font-family: "Shippori Mincho", serif; font-size: 0.72rem; letter-spacing: 0.08em; margin-bottom: 10px; text-shadow: 0 0 6px rgba(255, 200, 100, 0.55); } /* v258: 複数人 cast badge (2 人 / 3 人セット) */ /* v276: 🏠 持ち帰り (24h 咥えっぱなし 日常 RP) — 温かい家庭の色調 */ .cy-pet-wrap { padding: 14px; padding-bottom: 80px; } .cy-pet-welcome { padding: 22px 18px; background: linear-gradient(160deg, rgba(60, 30, 30, 0.78), rgba(85, 45, 50, 0.62), rgba(40, 22, 28, 0.85)); border: 1px solid rgba(220, 160, 140, 0.42); border-radius: 16px; margin-bottom: 18px; box-shadow: 0 6px 22px rgba(80, 40, 40, 0.32); } .cy-pet-welcome-title { font-family: 'Shippori Mincho', serif; font-size: 1.4rem; color: #ffe4d0; letter-spacing: 0.08em; margin-bottom: 8px; text-shadow: 0 0 14px rgba(220, 150, 120, 0.55); } .cy-pet-welcome-sub { font-size: 0.86rem; color: rgba(255, 220, 200, 0.78); line-height: 1.6; letter-spacing: 0.03em; } .cy-pet-keep-btn { display: block; width: 100%; padding: 14px; margin: 16px 0; background: linear-gradient(135deg, rgba(180, 110, 90, 0.55), rgba(140, 70, 60, 0.85)); border: 1px solid rgba(220, 160, 140, 0.78); border-radius: 14px; color: #fff5e8; font-family: 'Shippori Mincho', serif; font-size: 1rem; letter-spacing: 0.06em; cursor: pointer; } .cy-pet-keep-btn:active { transform: scale(0.97); } .cy-pet-empty { text-align: center; font-family: 'Shippori Mincho', serif; color: rgba(220, 200, 195, 0.62); padding: 30px 20px; font-size: 0.88rem; line-height: 1.7; } .cy-pet-card { position: relative; } .cy-pet-style-badge { display: inline-block; margin: 6px 0; padding: 3px 10px; background: rgba(120, 60, 50, 0.55); border: 1px solid rgba(220, 160, 140, 0.55); border-radius: 999px; color: #ffd5b8; font-size: 0.72rem; letter-spacing: 0.05em; } .cy-pet-meta { font-size: 0.7rem; color: rgba(255, 220, 200, 0.55); letter-spacing: 0.04em; margin-top: 4px; } .cy-pet-release-btn { position: absolute; top: 8px; right: 8px; padding: 4px 9px; background: rgba(40, 14, 22, 0.85); border: 1px solid rgba(255, 107, 138, 0.55); border-radius: 8px; color: #ffc4d0; font-size: 0.72rem; cursor: pointer; z-index: 2; } .cy-pet-keep-card { cursor: pointer; } .cy-pet-keep-card:active { transform: scale(0.97); } /* v279: 👄 お口専用館 (cy-mouth-*) CSS 削除済、 v275 で新設したが v278 で廃止 */ .cy-pinsa-member-badge { display: inline-block; padding: 3px 10px; background: rgba(255, 140, 200, 0.22); border: 1px solid rgba(255, 140, 200, 0.62); border-radius: 999px; color: #ffd0e8; font-family: "Shippori Mincho", serif; font-size: 0.72rem; letter-spacing: 0.06em; margin-bottom: 6px; margin-left: 4px; text-shadow: 0 0 6px rgba(255, 140, 200, 0.55); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .cy-pinsa-regular-off { display: block; width: 100%; padding: 9px; margin-top: 8px; background: rgba(40, 14, 28, 0.62); border: 1px solid rgba(180, 60, 90, 0.42); border-radius: 10px; color: rgba(255, 180, 200, 0.78); font-family: "Shippori Mincho", serif; font-size: 0.78rem; letter-spacing: 0.06em; cursor: pointer; min-height: 38px; } .cy-pinsa-regular-off:active { background: rgba(80, 20, 40, 0.62); } /* Leave modal (退店確認: 5 cast 個別 はい/いいえ) */ .cy-pinsa-leave-ov { position: fixed; inset: 0; z-index: 200; background: rgba(8, 4, 12, 0.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 20px; } .cy-pinsa-leave-modal { width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; background: linear-gradient(180deg, rgba(40, 12, 28, 0.96), rgba(20, 8, 18, 0.98)); border: 1.5px solid rgba(255, 107, 138, 0.55); border-radius: 18px; padding: 22px 18px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.62), 0 0 28px rgba(255, 107, 138, 0.32); color: #ffe4ea; font-family: -apple-system, BlinkMacSystemFont, sans-serif; } .cy-pinsa-leave-title { font-family: "Shippori Mincho", serif; font-size: 1.34rem; letter-spacing: 0.12em; text-align: center; margin-bottom: 10px; text-shadow: 0 0 14px rgba(255, 107, 138, 0.72); font-weight: 500; } .cy-pinsa-leave-sub { font-size: 0.78rem; line-height: 1.55; opacity: 0.86; margin-bottom: 18px; white-space: pre-line; letter-spacing: 0.03em; } .cy-pinsa-leave-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .cy-pinsa-leave-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(20, 8, 18, 0.62); border: 1px solid rgba(255, 107, 138, 0.28); border-radius: 10px; transition: border-color 200ms ease, background 200ms ease; } .cy-pinsa-leave-row.save-selected { background: rgba(255, 200, 100, 0.14); border-color: rgba(255, 200, 100, 0.78); } .cy-pinsa-leave-row.del-selected { background: rgba(180, 60, 90, 0.16); border-color: rgba(255, 107, 138, 0.62); opacity: 0.6; } .cy-pinsa-leave-name { flex: 1; font-family: "Shippori Mincho", serif; font-size: 0.94rem; letter-spacing: 0.05em; line-height: 1.45; } .cy-pinsa-leave-catch { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.7rem; opacity: 0.72; margin-top: 2px; letter-spacing: 0.02em; } .cy-pinsa-leave-btns { display: flex; gap: 6px; flex: 0 0 auto; } .cy-pinsa-leave-yes, .cy-pinsa-leave-take, .cy-pinsa-leave-no { width: 42px; height: 42px; font-size: 18px; border-radius: 10px; cursor: pointer; border: 1px solid rgba(255, 220, 230, 0.32); background: rgba(40, 14, 28, 0.62); color: #ffe4ea; display: inline-flex; align-items: center; justify-content: center; } .cy-pinsa-leave-yes { border-color: rgba(255, 200, 100, 0.62); } .cy-pinsa-leave-take { border-color: rgba(220, 160, 140, 0.62); background: rgba(60, 30, 30, 0.62); color: #ffe4d0; } .cy-pinsa-leave-no { border-color: rgba(255, 107, 138, 0.42); } .cy-pinsa-leave-yes:active, .cy-pinsa-leave-take:active, .cy-pinsa-leave-no:active { transform: scale(0.9); } .take-selected { background: rgba(80, 40, 30, 0.32); border-color: rgba(220, 160, 140, 0.62); } .cy-pinsa-leave-note { font-size: 0.72rem; opacity: 0.58; text-align: center; margin: 6px 0 12px; letter-spacing: 0.04em; } .cy-pinsa-leave-actions { display: flex; gap: 10px; margin-top: 14px; } .cy-pinsa-leave-cancel { flex: 1; padding: 12px; background: rgba(60, 40, 60, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; color: rgba(255, 220, 230, 0.78); font-family: "Shippori Mincho", serif; font-size: 0.88rem; letter-spacing: 0.08em; cursor: pointer; min-height: 46px; } .cy-pinsa-leave-confirm { flex: 2; padding: 12px; background: linear-gradient(135deg, rgba(160, 30, 80, 0.78), rgba(220, 60, 120, 0.92)); border: 1px solid rgba(255, 107, 138, 0.92); border-radius: 12px; color: #fff; font-family: "Shippori Mincho", serif; font-size: 0.96rem; letter-spacing: 0.1em; font-weight: 600; cursor: pointer; min-height: 46px; box-shadow: 0 4px 18px rgba(255, 107, 138, 0.42); text-shadow: 0 0 8px rgba(255, 107, 138, 0.78); } .cy-pinsa-leave-confirm:active { transform: scale(0.97); } .cy-pinsa-leave-yes-big, .cy-pinsa-leave-no-big { flex: 1; padding: 14px; border-radius: 12px; font-family: "Shippori Mincho", serif; font-size: 0.94rem; letter-spacing: 0.08em; cursor: pointer; min-height: 50px; font-weight: 500; } .cy-pinsa-leave-yes-big { background: linear-gradient(135deg, rgba(220, 160, 60, 0.78), rgba(255, 200, 100, 0.92)); border: 1px solid rgba(255, 200, 100, 0.92); color: #2a1a05; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.32); box-shadow: 0 4px 16px rgba(255, 200, 100, 0.42); } .cy-pinsa-leave-no-big { background: linear-gradient(135deg, rgba(140, 50, 70, 0.78), rgba(180, 70, 100, 0.92)); border: 1px solid rgba(255, 107, 138, 0.78); color: #ffe4ea; text-shadow: 0 0 6px rgba(255, 107, 138, 0.62); box-shadow: 0 4px 16px rgba(255, 107, 138, 0.32); } .cy-pinsa-leave-yes-big:active, .cy-pinsa-leave-no-big:active { transform: scale(0.96); } /* ═══ v238 写真 + 詳細プロフィール ═══ */ .cy-pinsa-card-photo { position: relative; width: 100%; aspect-ratio: 3 / 4; margin: 0 0 12px; background: linear-gradient(135deg, rgba(40,12,28,0.78), rgba(20,8,18,0.92)); border: 1px solid rgba(255, 107, 138, 0.32); border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .cy-pinsa-photo-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; cursor: zoom-in; transition: opacity 400ms ease; } .cy-pinsa-card-photo.cy-pinsa-photo-loading::before { content: '📸 写真取得中…'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 220, 230, 0.62); font-family: "Shippori Mincho", serif; font-size: 0.84rem; letter-spacing: 0.08em; background: linear-gradient(90deg, rgba(40,12,28,0.55) 0%, rgba(80,24,50,0.62) 50%, rgba(40,12,28,0.55) 100%); background-size: 200% 100%; animation: cy-skel-shimmer 1.8s ease-in-out infinite; } .cy-pinsa-card-photo.cy-pinsa-photo-empty::before { content: '🌫 画像取得失敗 (タグ再構成 / 別 cast 試行)'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 220, 230, 0.48); font-family: "Shippori Mincho", serif; font-size: 0.74rem; text-align: center; padding: 0 12px; } .cy-pinsa-photo-refresh { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; background: rgba(20, 8, 18, 0.85); border: 1px solid rgba(255, 107, 138, 0.55); color: #ffe4ea; font-size: 16px; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 2; opacity: 0.78; transition: opacity 200ms ease, transform 120ms ease; } .cy-pinsa-photo-refresh:hover { opacity: 1; } .cy-pinsa-photo-refresh:active { transform: scale(0.9); } .cy-pinsa-photo-refresh:disabled { opacity: 0.32; cursor: wait; } /* fullscreen view (tap zoom) */ .cy-pinsa-photo-fullscreen { position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 14px; } .cy-pinsa-fullscreen-img { max-width: 100%; max-height: 100%; object-fit: contain; } /* profile (collapsible details) */ .cy-pinsa-card-profile { margin: 10px 0; padding: 10px 12px; background: rgba(20, 8, 18, 0.55); border: 1px solid rgba(200, 160, 255, 0.28); border-radius: 10px; } .cy-pinsa-card-profile-title { font-family: "Shippori Mincho", serif; font-size: 0.84rem; letter-spacing: 0.08em; color: rgba(255, 220, 230, 0.86); cursor: pointer; list-style: none; padding: 4px 0; } .cy-pinsa-card-profile-title::marker, .cy-pinsa-card-profile-title::-webkit-details-marker { display: none; } .cy-pinsa-card-profile-title::before { content: '▶'; display: inline-block; margin-right: 8px; transform: rotate(0deg); transition: transform 200ms ease; font-size: 0.6em; opacity: 0.7; } .cy-pinsa-card-profile[open] .cy-pinsa-card-profile-title::before { transform: rotate(90deg); } .cy-pinsa-card-profile-body { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 107, 138, 0.22); } .cy-pinsa-prof-row { display: flex; gap: 10px; padding: 4px 0; font-size: 0.80rem; line-height: 1.55; } .cy-pinsa-prof-row .k { flex: 0 0 90px; color: rgba(255, 168, 188, 0.86); font-family: "Shippori Mincho", serif; letter-spacing: 0.04em; } .cy-pinsa-prof-row .v { flex: 1; color: rgba(255, 220, 230, 0.92); letter-spacing: 0.02em; } .cy-pinsa-prof-about { margin-top: 10px; padding: 8px 10px; background: rgba(80, 20, 50, 0.32); border-left: 2px solid rgba(255, 107, 138, 0.55); border-radius: 6px; font-style: italic; font-size: 0.80rem; line-height: 1.6; color: rgba(255, 220, 230, 0.92); } @media (prefers-reduced-motion: reduce) { .cy-pinsa-card-photo.cy-pinsa-photo-loading::before { animation: none !important; } .cy-pinsa-card-profile-title::before { transition: none; } } /* ═══ v229 商用品質 #2: チャット段落 👍/👎 学習 reaction ═══ Master 指示 2026-05-24: TOP card whisper の長押し menu と同じ系統を チャット本文 (.seg ごと) に展開。 ・default は控えめ (opacity 0.25)、seg hover or on 状態で 0.9 まで上がる ・on 状態は 👍=緑 glow / 👎=紅 glow で「学習済」を可視化 ・dialogue / narration / inner / plain 系の全 seg に attach 可 ・モバイル親指 tap 重視 (28px round)、accessible (aria-label) */ .cy-seg-react { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; opacity: 0.28; transition: opacity 200ms ease; white-space: nowrap; } .seg:hover .cy-seg-react { opacity: 0.92; } .cy-seg-react:focus-within { opacity: 1; } .cy-seg-react.cy-has-on { opacity: 0.92; } /* 反応済 seg は常時 visible */ .cy-seg-btn { width: 28px; height: 28px; padding: 0; border-radius: 50%; background: rgba(40, 28, 55, 0.55); border: 1px solid rgba(200, 160, 255, 0.20); font-size: 13px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 130ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease; filter: grayscale(0.5) brightness(0.82); -webkit-tap-highlight-color: transparent; } .cy-seg-btn:hover { filter: grayscale(0.2) brightness(1.0); transform: scale(1.06); } .cy-seg-btn:active { transform: scale(0.86); } .cy-seg-btn.cy-on { filter: none; transform: scale(1.04); } .cy-seg-btn.cy-on:active { transform: scale(0.92); } .cy-seg-btn.cy-on.good { background: rgba(95, 200, 140, 0.32); border-color: rgba(95, 200, 140, 0.78); box-shadow: 0 0 10px rgba(95, 200, 140, 0.42), inset 0 0 6px rgba(95, 200, 140, 0.18); } .cy-seg-btn.cy-on.bad { background: rgba(255, 107, 138, 0.32); border-color: rgba(255, 107, 138, 0.78); box-shadow: 0 0 10px rgba(255, 107, 138, 0.42), inset 0 0 6px rgba(255, 107, 138, 0.18); } @media (prefers-reduced-motion: reduce) { .cy-seg-react, .cy-seg-btn { transition: none !important; } .cy-seg-btn:active, .cy-seg-btn.cy-on, .cy-seg-btn:hover { transform: none; } } /* ════════════════════════════════════════════════════════════════════ v293.3 (Task A Step 5): source_type filter ribbon chips ─ char-grid 各画面の上部に 3 chip [すべて / アニメ / リアル] 配置。 active 1 個のみ。 small (header の邪魔にならない)、 横並び。 ════════════════════════════════════════════════════════════════════ */ .cy-source-chips { display: flex; gap: 6px; margin: 4px 0 12px; padding: 0; flex-wrap: wrap; } .cy-source-chip { background: rgba(40, 28, 55, 0.45); border: 1px solid rgba(200, 160, 255, 0.22); color: rgba(200, 160, 255, 0.72); padding: 5px 14px; border-radius: 14px; font-size: 0.72rem; letter-spacing: 0.06em; cursor: pointer; transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 110ms ease; -webkit-tap-highlight-color: transparent; font-family: inherit; } .cy-source-chip:active { transform: scale(0.94); } .cy-source-chip.active { background: rgba(200, 140, 220, 0.22); border-color: rgba(200, 140, 220, 0.62); color: #f0e2ff; box-shadow: 0 0 8px rgba(200, 140, 220, 0.22); } /* ═══════════════════════════════════════════════════════════════════════ cy-fx v2 — 商用アプリ級 均一体感レイヤ (v303, 全 additive・末尾上書き) 思想: 派手な演出ではなく「全要素が均一に・即座に・滑らかに応答」する事が "商用アプリのぬるぬる" の正体。 GPU が軽い transform/opacity だけで 60fps 維持、 layout は一切触らない (= ガタつき/CLS を出さない = "しっかり安定")。 ═══════════════════════════════════════════════════════════════════════ */ :root{ --cy-spring: cubic-bezier(.34, 1.40, .5, 1); /* 軽オーバーシュート = 押して離すと "ぬるっ" */ --cy-snap: cubic-bezier(.4, 0, .2, 1); /* material 標準 = キビキビ */ --cy-silk: cubic-bezier(.22, .61, .36, 1); /* 入場 ease-out (既存値を再宣言・維持) */ --cy-d1: 120ms; --cy-d2: 200ms; --cy-d3: 300ms; } /* 文字を商用アプリ品質に: アンチエイリアス + 文字詰め最適化 */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* 1 ── 全タップ要素に均一な押し心地 (商用感の最大差。 transform のみ=layout 不変) ── touch-action: manipulation で 300ms タップ遅延 + ダブルタップ拡大を除去 → 即応。 */ button, [role="button"], a.b, .b, .cy-tap44, summary, label[for], select, .char-card, .cy-home-card, .cy-home-strip-card, .sug-card, .cy-hub-btn, .cy-dock-btn, .cy-newrow-btn, .menu-btn, .cy-place-cta, .foyer-hero, input[type="submit"], .lp-menu-item, .cy-pinsa-card, .cy-source-chip { touch-action: manipulation; -webkit-user-select: none; user-select: none; } /* 汎用 button / .b に transition (class 付きの専用 :active は specificity で勝ち継続) */ button, [role="button"], .b, .cy-tap44 { transition: transform var(--cy-d1) var(--cy-spring), filter var(--cy-d2) var(--cy-snap), background-color var(--cy-d2) var(--cy-snap), opacity var(--cy-d2) var(--cy-snap); } button:not(:disabled):active, [role="button"]:active, .b:active, .cy-tap44:active, label[for]:active, select:active { transform: scale(.965); } button:disabled { opacity: .5; } /* 2 ── スクロール慣性 + バー消去 + 連鎖の "詰まり" 解消 を全 scroll 容器に均一付与 */ .cy-scroll, [data-scroll], .chat-log, .lp-menu, .lp-sheet, .home, .cy-place, .cy-home, .world-wrap, .cy-modal-body, .talk-log, .gallery-grid, .place-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; } .cy-scroll::-webkit-scrollbar, [data-scroll]::-webkit-scrollbar, .chat-log::-webkit-scrollbar, .lp-menu::-webkit-scrollbar, .lp-sheet::-webkit-scrollbar, .home::-webkit-scrollbar, .cy-modal-body::-webkit-scrollbar, .talk-log::-webkit-scrollbar { width: 0; height: 0; } /* 3 ── route 遷移を "重い blur シネマ(520ms)" → "商用スナップ(300ms)" へ ── 旧 cy-route-in は filter:blur(10px) を DOM 全体に毎回 = スマホで GPU 過負荷 → カクつき & もっさり = "一昔前感" の主因。 軽い opacity + 微小スライドに置換。 */ @keyframes cy-route-in2 { from { opacity: 0; transform: translate3d(0, 9px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } #app.cy-in > * { animation: cy-route-in2 .30s var(--cy-silk) both !important; will-change: opacity, transform; } #app.cy-in::before { animation: none !important; opacity: 0 !important; background: none !important; } /* JS から付けて「下からスッ」と出す共通 helper */ .cy-rise { animation: cy-route-in2 .34s var(--cy-silk) both; } /* 4 ── skeleton shimmer (blank/spinner の代わりに "中身が来る予感" = 体感速度↑) */ .cy-skel { position: relative; overflow: hidden; background: rgba(255,255,255,.055); border-radius: 12px; } .cy-skel::after { content:''; position:absolute; inset:0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.085), transparent); animation: cy-shimmer 1.25s var(--cy-snap) infinite; } @keyframes cy-shimmer { to { transform: translateX(100%); } } /* 5 ── reduce-motion を尊重 (酔い対策・OS 設定追従) */ @media (prefers-reduced-motion: reduce) { #app.cy-in > *, .cy-rise { animation-duration: .01ms !important; } .cy-skel::after { animation: none; } button:active, [role="button"]:active, .b:active, .cy-tap44:active { transform: none; } }