:root { --bg: #14201a; --felt: #1f4d3a; --felt-edge: #163a2b; --ink: #e8efe9; --muted: #9bb3a6; --accent: #f6b352; --danger: #e85d75; /* virtual stage dimensions (16:9) — must match STAGE_W/STAGE_H in app/stage.js */ --stage-w: 1280px; --stage-h: 720px; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; overflow: hidden; } body { background: #000; /* letterbox bars around the stage */ color: var(--ink); font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; } /* Letterbox viewport: fills the window, centers the fixed-size stage. */ #stage-viewport { position: fixed; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* The stage itself: a fixed 1280x720 canvas, scaled by JS (transform:scale). transform-origin defaults to center, matching the flex centering above. */ #app { position: relative; flex: none; width: var(--stage-w); height: var(--stage-h); background: var(--bg); overflow: hidden; } /* Each screen fills the stage. The active one shows; if its content exceeds the stage it scrolls internally rather than pushing buttons out of view. */ .screen { position: absolute; inset: 0; overflow: auto; padding: 24px; } .hidden { display: none !important; } /* ---- scenario player (紙芝居) ---- */ #scenario-screen { position: absolute; inset: 0; padding: 0; overflow: hidden; cursor: pointer; user-select: none; z-index: 50; } .sc-bg { position: absolute; inset: 0; background: #1c140e; transition: background .4s ease; } .sc-stage { position: absolute; inset: 0; } /* 立ち絵スロット: left は JS が % で指定（left/center/right=22/50/78%）。底辺合わせ。 left/opacity に transition を効かせることで、position 変更=左右スライド、登場/退場= フェードを実現する（scenarioPlayer の reconcileStage が要素を使い回す）。 */ .sc-slot { position: absolute; bottom: 0; transform: translateX(-50%); opacity: 1; transition: left .45s cubic-bezier(.22,.61,.36,1), opacity .4s ease; } /* 登場直前の状態（次フレームで外してフェードイン）／退場（フェードアウトして除去） */ .sc-slot.sc-enter { opacity: 0; } .sc-slot.sc-exit { opacity: 0; } /* 高さだけ全キャラ共通に揃え、幅は元画像の比率なり（クロップなし＝全身が必ず収まる）。 元画像のアスペクト比はバラバラ（0.33〜1.25）なので横幅は差が出て、複数表示時は 重なることがあるが「ちぎれ無し」を優先。小さい画像は拡大されジャギるが許容。 */ .sc-standing { display: block; height: calc(var(--stage-h) * 0.82); width: auto; max-width: none; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(0,0,0,.55)) brightness(.9); opacity: 1; transition: opacity .25s ease, filter .25s ease, transform .25s ease; /* キャラ別の見せ方チューニング（バストアップ化等）を JS が --sc-tune に注入（translate+scale）。 上端基準で拡大＝頭を残して下を切る。未設定は空＝無変形。 */ transform-origin: top center; transform: var(--sc-tune, none); } /* 話者は明るく前面、非話者は減光して後退。--sc-tune を合成（空フォールバックで lift が消えないように）。 */ .sc-standing.sc-active { filter: drop-shadow(0 8px 24px rgba(0,0,0,.55)) brightness(1.05); opacity: 1; z-index: 2; transform: translateY(-6px) var(--sc-tune,); } .sc-standing.sc-dim { filter: drop-shadow(0 6px 18px rgba(0,0,0,.5)) brightness(.55) saturate(.85); opacity: .8; z-index: 1; transform: var(--sc-tune, none); } .sc-fx-screen { position: absolute; inset: 0; pointer-events: none; } /* メッセージ枠は購入UIセット(gameUIset_19 v100)の message_window.png を採用。 1280×228 の全幅バー画像で、上部 0–48px に名前タブ／48–190px に本文帯／192–228px に底枠。 画像が枠・装飾を担うので、独自の border/影/角丸は外し、テキストを座標で帯に載せる。 */ .sc-textbox { /* 立ち絵(.sc-slot は transform で stacking context を作る)より前面に。メッセージ最優先で表示。 */ position: absolute; z-index: 5; left: 0; bottom: 0; width: var(--stage-w); height: 228px; background: url("graphic/ui/sc/msgwin.png") no-repeat center / 100% 100%; } /* 名前 = 左上の金タブ（〜x543 × 〜48px）に中央寄せ。画像側に枠があるので文字だけ。 */ .sc-name { position: absolute; top: 4px; left: 24px; width: 500px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 700; color: #f4e3b4; letter-spacing: .08em; text-shadow: 0 1px 2px rgba(0,0,0,.85); margin: 0; padding: 0; background: none; border: 0; border-radius: 0; } /* 本文 = 中央の帯。青海波の装飾を避けて左右に余白。 */ .sc-text { position: absolute; left: 78px; right: 78px; top: 66px; font-size: 21px; line-height: 1.6; color: #f6efe1; text-shadow: 0 1px 3px rgba(0,0,0,.9); } /* クリック待ち = pagebreak グリフ（24×24）を帯の右下で点滅。 */ .sc-hint { position: absolute; right: 40px; bottom: 46px; width: 24px; height: 24px; color: transparent; font-size: 0; background: url("graphic/ui/sc/pagebreak.png") no-repeat center / contain; animation: sc-blink 1.4s infinite; } .sc-progress { position: absolute; top: auto; bottom: 7px; left: 28px; font-size: 12px; color: #d8c79a; background: transparent; padding: 0; border-radius: 0; } @keyframes sc-blink { 0%,100%{opacity:.4} 50%{opacity:1} } /* システムバー（自動/早送/履歴/目録）= 文字焼込みのシステムボタン素材。右上に横並び。 */ .sc-sysbar { position: absolute; top: 12px; right: 14px; z-index: 6; display: flex; gap: 6px; } .sc-sys { width: 86px; height: 34px; cursor: pointer; padding: 0; border: 0; color: transparent; font-size: 0; /* 文字は画像側に焼込み済み */ background: no-repeat center / contain; } .sc-sys-auto { background-image: url("graphic/ui/sc/sys_auto.png"); } .sc-sys-skip { background-image: url("graphic/ui/sc/sys_skip.png"); } .sc-sys-log { background-image: url("graphic/ui/sc/sys_log.png"); } .sc-sys-menu { background-image: url("graphic/ui/sc/sys_menu.png"); } .sc-sys-auto:hover { background-image: url("graphic/ui/sc/sys_auto_hover.png"); } .sc-sys-skip:hover { background-image: url("graphic/ui/sc/sys_skip_hover.png"); } .sc-sys-log:hover { background-image: url("graphic/ui/sc/sys_log_hover.png"); } .sc-sys-menu:hover { background-image: url("graphic/ui/sc/sys_menu_hover.png"); } /* オン状態（オート/スキップ作動中）= active 素材へ。 */ .sc-sys-auto.is-on { background-image: url("graphic/ui/sc/sys_auto_on.png"); } .sc-sys-skip.is-on { background-image: url("graphic/ui/sc/sys_skip_on.png"); } /* バックログ（履歴）オーバーレイ。クリックで閉じる。 */ .sc-backlog { position: absolute; inset: 0; z-index: 8; cursor: pointer; background: rgba(8,10,8,.82); backdrop-filter: blur(2px); display: flex; flex-direction: column; align-items: center; } .sc-backlog-inner { width: min(86%, 920px); max-height: calc(var(--stage-h) - 96px); margin-top: 40px; overflow-y: auto; padding: 8px 18px; cursor: default; } .sc-bl-row { padding: 12px 4px; border-bottom: 1px solid rgba(246,179,82,.16); line-height: 1.6; } .sc-bl-name { display: inline-block; min-width: 5em; margin-right: 12px; font-weight: 700; color: #f4e3b4; } .sc-bl-text { color: #eef0e8; } .sc-backlog-hint { margin-top: 6px; font-size: 13px; color: var(--muted); } /* 立ち絵演出 (characterEffect) — duration は --sc-dur で上書き */ .scfx-ch-jump { animation: sc-jump var(--sc-dur,400ms) ease; } .scfx-ch-shake { animation: sc-shake var(--sc-dur,350ms) ease; } .scfx-ch-fade_in { animation: sc-fade-in var(--sc-dur,600ms) ease; } .scfx-ch-fade_out { animation: sc-fade-out var(--sc-dur,600ms) ease forwards; } @keyframes sc-jump { 0%,100%{transform:translateY(0)} 30%{transform:translateY(-40px)} 55%{transform:translateY(0)} 70%{transform:translateY(-14px)} 85%{transform:translateY(0)} } @keyframes sc-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-14px)} 40%{transform:translateX(12px)} 60%{transform:translateX(-8px)} 80%{transform:translateX(5px)} } @keyframes sc-fade-in { from{opacity:0} to{opacity:1} } @keyframes sc-fade-out { from{opacity:1} to{opacity:.15} } /* 画面演出 (screenEffect) */ .scfx-sc-flash { animation: sc-flash var(--sc-dur,300ms) ease; } .scfx-sc-shake { animation: sc-screen-shake var(--sc-dur,350ms) ease; } .scfx-sc-fade_in { animation: sc-veil-in var(--sc-dur,600ms) ease; } .scfx-sc-fade_out { animation: sc-veil-out var(--sc-dur,600ms) ease; } @keyframes sc-flash { 0%{background:rgba(255,255,255,0)} 25%{background:rgba(255,255,255,.85)} 100%{background:rgba(255,255,255,0)} } @keyframes sc-screen-shake { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-10px,6px)} 50%{transform:translate(8px,-6px)} 75%{transform:translate(-6px,4px)} } @keyframes sc-veil-in { from{background:rgba(0,0,0,1)} to{background:rgba(0,0,0,0)} } @keyframes sc-veil-out { from{background:rgba(0,0,0,0)} to{background:rgba(0,0,0,1)} } /* ---- menu screens (home / free-battle / online / settings) ---- */ .menu-screen { max-width: 560px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; } .menu-head { text-align: center; } .menu-head h1 { font-size: 40px; margin: 8px 0; letter-spacing: .02em; } .menu-head h1 small { color: var(--accent); font-size: 18px; } .menu-list { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 380px; } .menu-btn { display: flex; flex-direction: column; gap: 3px; text-align: left; background: #1c2c24; color: var(--ink); border: 2px solid #2a3f34; border-radius: 14px; padding: 16px 22px; cursor: pointer; transition: .14s ease; } .menu-btn:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.35); } .menu-btn:disabled { opacity: .42; cursor: default; } .menu-btn-title { font-size: 19px; font-weight: 700; } .menu-btn-sub { font-size: 13px; color: var(--muted); } .ghost-back { background: transparent; color: var(--muted); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 8px 18px; font-size: 14px; cursor: pointer; transition: .12s; } .ghost-back:hover { color: var(--ink); border-color: rgba(255,255,255,.4); } /* ---- home top: 起動ごとのランダム立ち絵（左右の出迎え） ---- 中央メニュー(幅560px)とは被らせず、左右ガター(各〜360px)に全身立ち絵を大きく置く。 装飾なのでクリックは透過し、メニューより必ず背面に回す。 */ /* ホームだけは全幅にして左右ガターを確保（中身は flex 中央寄せのまま）。 既定の .menu-screen は max-width:560px で中央に絞られ、絶対配置の立ち絵が その箱に閉じ込められて中央メニューに被るため、ここで全幅へ戻す。 */ #home-screen.menu-screen { max-width: none; } .home-cast { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } #home-screen > .menu-head, #home-screen > .menu-list, #home-screen > #debug-menu-btn { position: relative; z-index: 1; } .home-cast-fig { position: absolute; bottom: 0; width: 340px; height: 100%; overflow: hidden; /* zoom 調整で拡大しても枠外＝中央メニュー側へはみ出さないよう切る */ opacity: 0; animation: home-cast-in .6s ease forwards; } .home-cast-fig.is-left { left: 6px; } .home-cast-fig.is-right { right: 6px; } /* 底辺・中央合わせ（左右で挙動を変えない＝imagePos.topCast の調整が両側で同じに効く）。 個別の大きさ/位置は homeCast.js が img.transform に topCast を流し込む。 */ .home-cast-fig img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 8px 22px rgba(0,0,0,.5)); } @keyframes home-cast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .coming-soon { text-align: center; color: var(--muted); } .coming-soon-badge { display: inline-block; font-size: 22px; font-weight: 800; letter-spacing: .08em; color: var(--accent); border: 2px solid var(--accent); border-radius: 12px; padding: 12px 26px; margin-bottom: 16px; } .settings-card { width: 100%; max-width: 380px; background: #1c2c24; border: 2px solid #2a3f34; border-radius: 14px; padding: 10px 22px 18px; } .select-back { position: absolute; left: 0; top: 4px; } /* ---- ロード画面（起動時にリソース先読み・下部ゲージ） ---- */ #loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; overflow: hidden; } .load-stage { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; } .load-logo { font-size: 44px; margin: 0; letter-spacing: .03em; } .load-logo small { color: var(--accent); font-size: 18px; } .load-tip { color: var(--muted); font-size: 14px; margin: 0; } /* ---- タイトルロゴ画像（ロード画面／ホーム共通） ---- 透過PNGはダークネイビー主体なので、後ろに柔らかいクリーム光を敷いて暗背景でも読ませる。 ※ 現ロゴはAI生成の仮組み。本リリースでデザイナー版へ差し替え（graphic/title.png）。 */ .title-logo-img { display: block; width: min(560px, 68vw); height: auto; max-height: 300px; object-fit: contain; /* 文字が暗背景に沈まないよう、白＝クリームの淡い発光を後光に */ filter: drop-shadow(0 0 26px rgba(246, 240, 224, .5)) drop-shadow(0 0 60px rgba(246, 240, 224, .28)) drop-shadow(0 10px 22px rgba(0,0,0,.5)); } .load-logo .title-logo-img { width: min(600px, 72vw); max-height: 340px; } /* 画像ロゴを載せる見出しは、テキスト見出し用のネームプレート(plate.png の border-image fill)を外す。 plate.png の fill がロゴ背後に赤金の帯として出てしまうため、装飾を全て打ち消す。 ※ `.menu-head h1`(specificity 0-1-1) に勝つよう、型を含めた `.menu-head h1.home-logo-h1` で上書き。 */ .menu-head h1.home-logo-h1 { margin: 4px 0 2px; line-height: 0; display: block; padding: 0; border: 0; border-image: none; background: none; text-shadow: none; } .home-logo-h1 .title-logo-img { width: min(760px, 72vw); max-height: 328px; margin: 0 auto; } /* トップは大きめロゴ＋3メニューを 1280×720 に内部スクロールなしで収める（fixed-stage policy）。 ロゴを主役に据えたぶん、メニュー側の縦余白・ボタンpaddingを詰めて総高を 720px 内に収める。 .menu-screen/.menu-list/.menu-btn は他メニュー画面と共有なので #home-screen に限定して上書き。 */ #home-screen.menu-screen { gap: 14px; } #home-screen .menu-head { margin-top: -6px; } #home-screen .menu-list { gap: 8px; } #home-screen .menu-btn { padding: 9px 22px; } /* ---- 仮ロゴ注記（ロード画面／ホーム下部に小さく） ---- */ .placeholder-note { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; text-align: center; white-space: nowrap; font-size: 11px; letter-spacing: .02em; color: var(--muted); opacity: .72; pointer-events: none; } .load-bar { position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); width: 640px; height: 26px; overflow: hidden; background: url("graphic/ui/sc/gauge_base.png") no-repeat center / 100% 100%; } .load-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: url("graphic/ui/sc/load_fill.png") no-repeat left center / 640px 100%; transition: width .2s ease; } /* ---- 対戦ホーム (battle-home) — 案2「左主役＋右ミニ枠」 ---- */ /* 立ち絵を左に拡大して主役に。情報・導線は右の細い枠へ退ける。1280x720固定・内部スクロール禁止。 こぱんだ屋UIで和風スキン: talk=メッセージ枠 / card=金縁パネル / 見出し=プレート。 */ /* 固定ステージ・内部スクロール禁止に揃える（.screen の overflow:auto を明示的に打ち消す）。 */ #battle-home-screen { overflow: hidden; } #roguelite-screen { overflow: hidden; } /* 楼光の館：固定ステージ・内部スクロール禁止（モーダル肥大の保険） */ .battle-home { height: 100%; display: flex; align-items: stretch; gap: 16px; } /* 左ステージ＝立ち絵をバストアップ級に拡大（下半身をクロップ）。セリフ枠は下部にVN風オーバーレイ。 */ .bh-stage { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; } .bh-portrait-wrap { position: absolute; inset: 0; overflow: hidden; cursor: pointer; display: flex; justify-content: center; align-items: flex-start; /* 上揃え＝頭から見せる */ } .bh-portrait { /* 高さ基準クロップ：立ち絵は縦長(600x1800)なので height で引き量を制御。 310%＝画面に上から約32%ぶん＝頭〜胸元全体が入るバストアップ。値を下げるほど更に引く。 キャラ別の寄せ/拡大は JS が --bh-x/--bh-y/--bh-zoom を差し込む（HOME_PORTRAIT_TUNE）。 */ height: 310%; width: auto; max-width: none; max-height: none; transform: translate(var(--bh-x, 0), var(--bh-y, 0)) scale(var(--bh-zoom, 1)); transform-origin: top center; filter: drop-shadow(0 10px 26px rgba(0,0,0,.5)); transition: transform .18s ease; } /* ホバーの -4px リフト。--bh-y のフォールバックは calc 用に必ず単位付き(0px)にする （単位なし 0 だと calc(0 - 4px) が無効になり、var()入りの transform 全体が none にリセットされて キャラ別 offset が消える＝ホバーで元位置に戻るバグになる）。 */ .bh-portrait-wrap:hover .bh-portrait { transform: translate(var(--bh-x, 0px), calc(var(--bh-y, 0px) - 4px)) scale(var(--bh-zoom, 1)); } .bh-portrait-fallback { width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 140px; font-weight: 800; color: rgba(255,255,255,.85); } .bh-talk { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; background: url("graphic/ui/sc/msgwin.png") no-repeat center / 100% 100%; padding: 22px 30px; font-size: 18px; line-height: 1.6; min-height: 84px; display: flex; align-items: center; } .bh-change { position: absolute; top: 10px; left: 10px; z-index: 2; color: var(--muted); background: none; border: 10px solid transparent; border-image: url("graphic/ui/sc/btn.png") 11 15 fill / 10px 14px / 0 stretch; padding: 4px 18px; font-size: 13px; cursor: pointer; transition: .12s; } .bh-change:hover { color: var(--accent); border-image-source: url("graphic/ui/sc/btn_hover.png"); } /* 相棒のネームプレート（紙芝居風の話者名タブ）。メッセージ窓の上に出し、立ち絵の主が誰か即わかる。 */ .bh-charname { position: absolute; left: 22px; bottom: 92px; z-index: 2; font-size: 17px; font-weight: 800; letter-spacing: .05em; color: var(--name-c, var(--accent)); padding: 4px 16px; border-radius: 8px; pointer-events: none; background: rgba(8,10,8,.82); border: 1px solid color-mix(in srgb, var(--name-c, var(--accent)) 52%, #2f4a3b); box-shadow: 0 4px 14px rgba(0,0,0,.5); backdrop-filter: blur(2px); } .bh-charname:empty { display: none; } /* 右カラム: 情報カード / 導線 / 戻る を縦に積む（スリム＝立ち絵を邪魔しない） */ .bh-side { flex: 0 0 332px; max-width: 332px; display: flex; flex-direction: column; justify-content: center; gap: 12px; } .bh-card { border: 14px solid transparent; border-image: url("graphic/ui/sc/panel.png") 18 / 14px / 0 stretch; border-radius: 0; background: rgba(20,32,26,.90); padding: 2px 14px 12px; } .bh-title { border: solid transparent; border-width: 10px 14px; border-image: url("graphic/ui/sc/plate.png") 14 18 fill / 10px 14px / 0 stretch; margin: -2px 0 10px; padding: 2px 8px; font-size: 22px; text-align: center; letter-spacing: .04em; } .bh-info { display: flex; flex-direction: column; gap: 8px; } .bh-info-row { display: flex; align-items: baseline; gap: 12px; font-size: 15px; } .bh-info-row[hidden] { display: none; } /* hidden属性を .bh-info-row の display:flex に勝たせる */ .bh-info-k { flex: 0 0 76px; color: var(--muted); font-size: 13px; } .bh-info-v { color: var(--ink); font-weight: 600; } .bh-info-v.bh-bond { color: var(--accent); } /* 帯名の右に Lv実数＋pt(現在/次まで)。帯より控えめ＝関係の質感を主・数値を従に。 */ .bh-bond-pt { margin-left: 8px; color: var(--muted); font-weight: 500; font-size: 12px; letter-spacing: .02em; } /* 絆の下に「次のLvまでの進捗」を見せる細ゲージ（pt の cur/need と一致）。 */ .bh-info-row--bond { align-items: center; } .bh-bond-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .bh-bond-gauge { height: 4px; border-radius: 2px; background: rgba(255,255,255,.13); overflow: hidden; } .bh-bond-gauge[hidden] { display: none; } .bh-bond-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 2px; transition: width .35s ease; } .bh-info-v.bh-streak { color: var(--danger); } /* 背景・BGM（カード下部に現在値＋「変更」ボタン。変更で一覧モーダル） */ .bh-amb { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); } .bh-amb-cur { flex: 1 1 0; min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bh-amb-cur span { color: var(--ink); } .bh-amb-dot { color: var(--muted) !important; margin: 0 4px; } .bh-amb-btn { flex: 0 0 auto; font-size: 12px; color: var(--muted); background: none; text-align: center; border: 9px solid transparent; border-image: url("graphic/ui/sc/btn.png") 11 15 fill / 8px 12px / 0 stretch; border-radius: 0; padding: 3px 12px; cursor: pointer; transition: .12s; white-space: nowrap; } .bh-amb-btn:hover { color: var(--accent); border-image-source: url("graphic/ui/sc/btn_hover.png"); } /* 背景・BGM 設定モーダル（picker の金縁パネルを流用）。背景プレビューを見せたいのでスクリムは薄め。 */ .bh-amb-modal .bh-picker-scrim { background: rgba(0,0,0,.38); } .bh-amb-modal .bh-picker-card { width: min(560px, 92%); gap: 10px; } .bh-amb-sec { display: flex; flex-direction: column; gap: 8px; } .bh-amb-sec-h { font-size: 13px; color: var(--accent); letter-spacing: .04em; } /* 背景は横スクロールの帯（増えても1行で右に流れる。今の3枚はそのまま収まる）。 マウスはドラッグ、タッチはネイティブ・スワイプでスクロール（attachDragScroll）。 */ .bh-amb-grid { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; cursor: grab; touch-action: pan-x; scroll-behavior: smooth; } .bh-amb-grid.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; } .bh-amb-grid.is-dragging .bh-amb-tile { pointer-events: none; } .bh-amb-tile { flex: 0 0 150px; position: relative; aspect-ratio: 16/9; background-size: cover; background-position: center; border: 9px solid transparent; border-image: url("graphic/ui/sc/btn.png") 11 15 / 8px 11px / 0 stretch; border-radius: 0; cursor: pointer; transition: .12s; overflow: hidden; } .bh-amb-tile:hover { transform: translateY(-2px); } .bh-amb-tile.is-selected { border-image-source: url("graphic/ui/sc/btn_hover.png"); box-shadow: 0 0 0 2px var(--accent) inset; } .bh-amb-tile-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: 12px; color: #fff; background: rgba(0,0,0,.55); text-align: center; } /* BGMは縦リスト。マウスはドラッグ、タッチはネイティブ・スワイプで縦スクロール。 */ .bh-amb-list { display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; overflow-x: hidden; cursor: grab; touch-action: pan-y; scroll-behavior: smooth; } .bh-amb-list.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; } .bh-amb-list.is-dragging .bh-amb-row { pointer-events: none; } .bh-amb-row { display: flex; align-items: center; justify-content: space-between; color: var(--ink); background: none; border: 10px solid transparent; border-image: url("graphic/ui/sc/btn.png") 11 15 fill / 8px 13px / 0 stretch; border-radius: 0; padding: 4px 4px; cursor: pointer; transition: .12s; font-size: 14px; } .bh-amb-row:hover { border-image-source: url("graphic/ui/sc/btn_hover.png"); } .bh-amb-row.is-selected { border-image-source: url("graphic/ui/sc/btn_hover.png"); box-shadow: 0 0 0 2px var(--accent) inset; } .bh-amb-row.is-selected .bh-amb-row-name { color: var(--accent); } .bh-amb-row-cue { color: var(--muted); font-size: 11px; } .bh-amb-tile.is-locked, .bh-amb-row.is-locked { opacity: .4; cursor: default; filter: grayscale(.7); } .bh-amb-tile.is-locked:hover, .bh-amb-row.is-locked:hover { transform: none; border-image-source: url("graphic/ui/sc/btn.png"); } .bh-routes { display: flex; flex-direction: column; gap: 10px; } /* フリー対戦・宝珠ショップは横2カラム（楼光の館＝主役の下に小さく並べ、固定ステージ720pxに収める）。 */ .bh-route-duo { display: flex; gap: 10px; } .menu-btn--duo { flex: 1 1 0; min-width: 0; align-items: center; text-align: center; gap: 2px; padding: 10px 10px; } .menu-btn--duo .menu-btn-title { font-size: 17px; } .menu-btn--duo .menu-btn-sub { font-size: 11px; white-space: nowrap; } .bh-back { align-self: center; } /* お気に入りキャラ選択モーダル（金縁パネルで統一） */ .bh-picker { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; } .bh-picker-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); } .bh-picker-card { position: relative; background: rgba(20,32,26,.97); border: 18px solid transparent; border-image: url("graphic/ui/sc/panel.png") 18 / 18px / 0 stretch; border-radius: 0; padding: 18px 22px; width: min(880px, 92%); max-height: 84%; display: flex; flex-direction: column; gap: 14px; } .bh-picker-title { margin: 0; font-size: 22px; text-align: center; } .bh-picker-x { position: absolute; top: 8px; right: 12px; background: transparent; color: var(--muted); border: none; font-size: 20px; cursor: pointer; z-index: 1; } .bh-picker-x:hover { color: var(--ink); } .bh-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; overflow: auto; padding: 4px; } .bh-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink); background: none; border: 11px solid transparent; border-image: url("graphic/ui/sc/btn.png") 11 15 fill / 10px 13px / 0 stretch; border-radius: 0; padding: 8px 4px; cursor: pointer; transition: .12s; } .bh-pick:hover { border-image-source: url("graphic/ui/sc/btn_hover.png"); transform: translateY(-2px); } .bh-pick.is-active { border-image-source: url("graphic/ui/sc/btn_hover.png"); box-shadow: 0 0 0 2px var(--accent) inset; } .bh-pick.is-locked { opacity: .4; cursor: default; filter: grayscale(.7); } .bh-pick.is-locked:hover { transform: none; border-image-source: url("graphic/ui/sc/btn.png"); } .bh-pick-face { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: rgba(255,255,255,.9); } .bh-pick-name { font-size: 12px; color: var(--ink); text-align: center; } /* ---- mentor mode: avatar create / detail (Phase 2A) ---- */ /* All UI must fit inside the fixed 1280x720 stage with NO internal scroll. Avatar screens use the full width as 3 columns + a full-width footer so the form never grows past 720px tall (override .menu-screen centering). */ .avatar-screen.menu-screen { max-width: 1120px; justify-content: center; gap: 16px; padding: 16px 24px; } .avatar-head h1 { font-size: 30px; margin: 2px 0 4px; } /* 弟子作成・師匠選択で共通のグリッド土台。実際のカラム構成は画面ごとの修飾子で与え、 片側の空カラムによる左右の偏りを避ける（弟子作成=3カラム / 師匠選択=2カラム）。 */ .avatar-create-layout { display: grid; width: 100%; gap: 16px 30px; align-items: start; } .avatar-create-layout .avatar-preview { grid-area: preview; } .av-footer { grid-area: footer; } /* 弟子作成: 名前/プロフィール ｜ 見た目 ｜ プレビュー の3カラムで均等に埋める。 */ .avatar-create-layout--create { grid-template-columns: 1fr 1fr 300px; grid-template-areas: "identity look preview" "footer footer footer"; } .av-col-identity { grid-area: identity; } .av-col-look { grid-area: look; } /* 師匠選択: 師匠/能力 ｜ プレビュー の2カラム。固定幅を中央寄せにして左右の偏りを解消 しつつ、内容（立ち絵プレビュー＋初期パラメータ）が 720px に収まる高さに抑える。 */ .avatar-create-layout--mentor { grid-template-columns: minmax(0, 540px) 240px; grid-template-areas: "center preview" "footer footer"; justify-content: center; } .av-col-center { grid-area: center; display: flex; flex-direction: column; gap: 14px; } .av-col { display: flex; flex-direction: column; gap: 14px; } .av-field { display: flex; flex-direction: column; gap: 6px; } .av-field-grow { flex: 1; } .av-label { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .03em; } .av-input { background: #16241d; color: var(--ink); border: 2px solid #2a3f34; border-radius: 10px; padding: 8px 11px; font-size: 14px; font-family: inherit; } .av-input:focus { outline: none; border-color: var(--accent); } .av-textarea { resize: none; line-height: 1.45; } /* 師匠ヒーロー表示（立ち絵大きめ＋変更ボタン） */ .av-mentor-hero { --role: var(--accent); display: flex; gap: 14px; align-items: stretch; background: #1c2c24; border: 2px solid var(--role); border-radius: 14px; padding: 12px; } .av-mentor-hero-portrait { width: 132px; height: 168px; flex: none; border-radius: 12px; overflow: hidden; border: 2px solid var(--role); background: rgba(0,0,0,.25); } .av-mentor-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .av-mentor-hero-info { display: flex; flex-direction: column; gap: 6px; justify-content: center; } .av-mentor-hero-name { font-size: 24px; font-weight: 800; } .av-mentor-hero-sub { font-size: 13px; color: var(--role); font-weight: 700; letter-spacing: .04em; } .av-mentor-change { margin-top: 8px; align-self: flex-start; cursor: pointer; transition: .14s ease; background: transparent; color: var(--ink); border: 2px solid var(--role); border-radius: 10px; padding: 8px 18px; font-size: 14px; font-weight: 700; font-family: inherit; } .av-mentor-change:hover { background: var(--role); color: #12100c; } /* 師匠選びオーバーレイ（#app が transform 済みなので fixed はステージ基準で全面を覆う） */ .av-mentor-picker { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(8,10,9,.78); backdrop-filter: blur(2px); } .av-mentor-picker-panel { background: #16241d; border: 2px solid #2a3f34; border-radius: 18px; padding: 22px 26px; width: min(880px, 86%); max-height: calc(var(--stage-h) - 80px); display: flex; flex-direction: column; align-items: center; gap: 18px; } .av-mentor-picker-title { font-size: 24px; font-weight: 800; margin: 0; } /* フリー対戦のキャラ選択に寄せたロール別グループ（3ロール横並び） */ .av-mentor-picker-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: 100%; } .av-mentor-role-group { --role: var(--accent); display: flex; flex-direction: column; gap: 8px; } .av-mentor-role-head { display: flex; align-items: center; gap: 8px; border-bottom: 2px solid var(--role); padding-bottom: 4px; } .av-mentor-role-name { font-size: 14px; font-weight: 800; color: var(--role); letter-spacing: .04em; } .av-mentor-role-cards { display: flex; flex-direction: column; gap: 8px; } .av-mentor-pick-card { display: flex; align-items: center; gap: 10px; position: relative; text-align: left; background: #1c2c24; border: 2px solid #2a3f34; border-radius: 12px; padding: 8px 12px; cursor: pointer; transition: .14s ease; } .av-mentor-pick-card:hover:not(.is-locked) { transform: translateY(-2px); border-color: var(--role); } .av-mentor-pick-card.selected { border-color: var(--role); box-shadow: 0 0 0 2px var(--role) inset; } .av-mentor-pick-icon { width: 44px; height: 44px; flex: none; border-radius: 50%; overflow: hidden; border: 2px solid var(--role); background: rgba(0,0,0,.25); } .av-mentor-pick-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .av-mentor-pick-name { font-size: 15px; font-weight: 700; } /* シナリオ／能力が未実装の師匠はグレーアウト＆選択不可 */ .av-mentor-pick-card.is-locked { cursor: default; opacity: .42; filter: grayscale(.85); } .av-mentor-pick-lock { margin-left: auto; font-size: 10px; font-weight: 800; color: #ffd9a0; background: rgba(58,36,16,.9); border: 1px solid #e0a44b; border-radius: 7px; padding: 2px 7px; letter-spacing: .03em; white-space: nowrap; } .av-skill-row { display: flex; flex-direction: column; gap: 10px; } .av-skill-card { text-align: left; background: #1c2c24; border: 2px solid #2a3f34; border-radius: 12px; padding: 10px 13px; cursor: pointer; transition: .14s ease; display: flex; flex-direction: column; gap: 3px; } .av-skill-card:hover { border-color: var(--accent); } .av-skill-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; } .av-skill-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .av-skill-name { font-size: 15px; font-weight: 700; } .av-skill-rarity { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .av-skill-desc { font-size: 12px; color: var(--muted); line-height: 1.45; } .av-look-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .av-look-item { display: flex; flex-direction: column; gap: 4px; } .av-look-label { font-size: 12px; color: var(--muted); } /* 弟子グラフィック（アイコン＋立ち絵をセットで選ぶ）サムネ一覧 */ .av-deshi-wrap { display: flex; flex-direction: column; gap: 5px; } .av-deshi-grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); gap: 6px; } .av-deshi-card { width: 50px; height: 50px; padding: 0; border-radius: 10px; overflow: hidden; background: #16241d; border: 2px solid #2a3f34; cursor: pointer; transition: .14s ease; } .av-deshi-card:hover { border-color: var(--accent); transform: translateY(-1px); } .av-deshi-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; } .av-deshi-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } /* 個別設定（アップロード）未実装のグレーアウト注記 */ .av-look-note { font-size: 11px; color: var(--muted); opacity: .55; margin: 2px 0; line-height: 1.4; } .av-footer { display: flex; align-items: center; gap: 14px; margin-top: 4px; } .av-error { color: var(--danger); font-size: 14px; margin: 0; flex: 1; } .av-footer .ghost-back { margin-left: auto; } .av-footer .primary { min-width: 200px; margin-top: 0; } /* フッターは独立行なので primary の上マージンを消す */ /* preview / portrait card (shared by create & detail) */ .avatar-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; } .av-preview-bg { width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; border: 2px solid #2a3f34; display: flex; align-items: center; justify-content: center; overflow: hidden; } .av-preview-icon { width: 56%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; border: 4px solid var(--accent); background: rgba(0,0,0,.25); } .av-preview-img { width: 100%; height: 100%; object-fit: cover; } .av-preview-name { font-size: 19px; font-weight: 800; } /* 作成画面プレビュー: 立ち絵バストアップ＋丸アイコンを併置（詳細画面は従来の中央アイコンのまま）。 立ち絵PNGは透過なので背景プリセットの上に重なる。 */ .avatar-create-layout .av-preview-bg { position: relative; } .av-preview-standing { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; /* バストアップ＝頭〜胸を残し下を切る */ } .avatar-create-layout .av-preview-icon { position: absolute; left: 8px; bottom: 8px; z-index: 2; width: 40%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; border: 3px solid var(--accent); background: rgba(0,0,0,.4); box-shadow: 0 2px 8px rgba(0,0,0,.55); } .av-preview-meta { font-size: 12px; color: var(--muted); } .av-detail-bio { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 4px 0 0; text-align: center; } /* detail screen: portrait (left) + stats (right), fits within the stage. */ .avatar-detail-layout { display: grid; grid-template-columns: 280px 1fr; gap: 28px; width: 100%; align-items: start; } .avatar-stats { display: flex; flex-direction: column; gap: 9px; } .av-stat-row { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #25342c; padding-bottom: 7px; } .av-stat-key { width: 90px; color: var(--muted); font-size: 14px; flex: none; } .av-stat-val { font-size: 16px; font-weight: 700; } .av-stat-hp { align-items: stretch; } .av-hp-box { position: relative; flex: 1; height: 22px; background: #16241d; border-radius: 6px; overflow: hidden; } .av-hp-bar { height: 100%; background: linear-gradient(90deg,#7bb274,#4ea1d3); } .av-hp-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; } /* オートバトル能力値（6 パラメータ） */ .av-params { width: 100%; margin-top: 14px; } .av-params-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; } .av-params-ttl { font-size: 16px; font-weight: 800; color: var(--accent); letter-spacing: .04em; } .av-params-note { font-size: 11px; color: var(--muted); } .av-params-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .av-pstat { background: #16241d; border: 1px solid #2a3f34; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; } .av-pstat-top { display: flex; align-items: center; gap: 8px; } .av-pstat-rank { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 16px; font-weight: 900; color: #1a120a; background: #8a99a8; } .av-pstat-label { flex: 1; font-size: 15px; font-weight: 700; display: flex; flex-direction: column; line-height: 1.15; } .av-pstat-label small { font-size: 10px; color: var(--muted); font-weight: 400; } .av-pstat-lv { font-size: 13px; font-weight: 700; color: #d9c9a3; } .av-pstat-bar { height: 8px; border-radius: 5px; overflow: hidden; background: #0f1a15; border: 1px solid #2a3f34; } .av-pstat-fill { height: 100%; background: linear-gradient(90deg,#7bb274,#c8a44d); } .av-pstat-up { font-size: 10px; color: #9bb39a; } .av-pstat-aff { font-size: 10px; color: var(--muted); line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ランク色（サクセス育成風 G〜S） */ .rank-S { background: linear-gradient(135deg,#ffe39a,#d6a23a); color:#3a2400; box-shadow:0 0 8px rgba(214,162,58,.6); } .rank-A { background: linear-gradient(135deg,#ff9d7a,#e0573a); color:#3a0e00; } .rank-B { background: linear-gradient(135deg,#ffd06b,#d39a32); color:#3a2600; } .rank-C { background: linear-gradient(135deg,#9fd07a,#5a9a3a); color:#0e2400; } .rank-D { background: linear-gradient(135deg,#7ec0d6,#3a7a9a); color:#04202c; } .rank-E { background: #6f7da0; color:#0a1020; } .rank-F { background: #5a6472; color:#e8eef6; } .rank-G { background: #444d57; color:#cfd6df; } /* マイキャラ作成 確認モーダル */ .ac-confirm { position:absolute; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .18s ease; } .ac-confirm.is-open { opacity:1; } .ac-cf-scrim { position:absolute; inset:0; background:rgba(6,10,8,.7); } .ac-cf-card { position:relative; z-index:1; width:520px; max-width:88%; padding:22px 24px; background:#1c2c24; color:var(--ink); border:2px solid var(--accent); border-radius:16px; box-shadow:0 26px 64px rgba(0,0,0,.6); transform:translateY(10px) scale(.98); transition:transform .18s ease; } .ac-confirm.is-open .ac-cf-card { transform:none; } .ac-cf-ttl { font-size:20px; font-weight:800; text-align:center; color:var(--accent); margin-bottom:14px; letter-spacing:.04em; } .ac-cf-id { display:flex; gap:14px; align-items:center; margin-bottom:14px; } .ac-cf-iconwrap { width:72px; height:72px; flex:none; border-radius:50%; overflow:hidden; border:2px solid var(--accent); background:#16241d; } .ac-cf-iconwrap img { width:100%; height:100%; object-fit:cover; } .ac-cf-idtxt { flex:1; min-width:0; } .ac-cf-name { font-size:19px; font-weight:800; } .ac-cf-bio { font-size:12px; color:var(--muted); margin:3px 0 5px; line-height:1.4; max-height:34px; overflow:hidden; } .ac-cf-mentor { font-size:13px; color:#cde0d6; } .ac-cf-mentor b { color:#ffe39a; } .ac-cf-shead { font-size:12px; color:var(--muted); letter-spacing:.1em; margin-bottom:7px; } .ac-cf-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:7px 12px; margin-bottom:14px; } .ac-cf-stat { display:flex; align-items:center; gap:7px; background:#16241d; border:1px solid #2a3f34; border-radius:7px; padding:5px 9px; } .ac-cf-rank { width:22px; height:22px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:5px; font-size:13px; font-weight:900; color:#1a120a; } .ac-cf-slab { width:56px; flex:none; font-size:13px; color:#e8efe9; } .ac-cf-gauge { flex:1; } .ac-cf-sval { width:22px; flex:none; text-align:right; font-size:15px; font-weight:800; color:#d9c9a3; } /* ランク段ゲージ（1段=1ランク・共通） */ .statgauge { display:flex; gap:2px; align-items:center; } .statgauge-seg { flex:1; height:7px; min-width:4px; border-radius:2px; background:#2a3f34; box-shadow:inset 0 1px 1px rgba(0,0,0,.4); } .statgauge-seg.on { box-shadow:0 0 4px rgba(255,220,140,.35), inset 0 1px 1px rgba(255,255,255,.3); } .ac-cf-msg { font-size:14px; line-height:1.6; text-align:center; margin:0 0 16px; color:#e8efe9; } .ac-cf-msg b { color:#ffe39a; } .ac-cf-btns { display:flex; gap:12px; justify-content:center; } .ac-cf-btns .ac-cf-no { min-width:120px; } .ac-cf-btns .ac-cf-yes { min-width:160px; } /* ---- mentor mode: home / rest / growth / ability-change (Phase 2B) ---- */ /* Fixed 1280x720 stage, no internal scroll. Hub is centered; sub-screens stack. */ .mentor-screen.menu-screen { max-width: 720px; gap: 16px; padding: 18px 24px; justify-content: center; } .mentor-h1 { font-size: 30px; margin: 2px 0; } /* soul chip (shared) */ .mh-soul, .growth-soul { display: inline-flex; align-items: center; gap: 8px; background: #1c2c24; border: 2px solid #2a3f34; border-radius: 12px; padding: 7px 14px; } .mh-soul-label, .growth-soul .mh-soul-label { font-size: 12px; color: var(--muted); } .mh-soul-val { font-size: 18px; font-weight: 800; color: var(--accent); } /* hub */ .mh-topbar { display: flex; align-items: center; justify-content: space-between; width: 100%; } .mh-stage { display: flex; align-items: center; gap: 18px; width: 100%; background: var(--felt, #1c2c24); border: 2px solid #2a3f34; border-radius: 16px; padding: 12px 16px; } /* Standing art is full-body & portrait-shaped; cover from the TOP so the face shows (center-cover crops to the hips/legs). */ .mh-portrait { width: 120px; height: 150px; object-fit: cover; object-position: top center; border-radius: 12px; flex: none; } .mh-bubble { flex: 1; } .mh-bubble-name { font-size: 13px; font-weight: 700; color: var(--accent); } .mh-bubble-text { font-size: 16px; line-height: 1.6; margin: 6px 0 0; } .mh-summary { font-size: 13px; color: var(--muted); } .mh-menu { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; width: 100%; } .mh-menu-btn { align-items: flex-start; padding: 12px 16px; } /* DEBUG: 1からやりなおす（?debug=tsumoreba のときだけ表示） */ .mh-debug-reset { align-self: center; margin-top: 12px; padding: 7px 16px; border-radius: 8px; font-size: 12px; font-weight: 800; letter-spacing: .03em; cursor: pointer; color: #ffd9a0; background: #3a2410; border: 1px dashed #e0a44b; } .mh-debug-reset:hover { background: #4a2e14; } /* ============================================================ 師弟ホーム 和風リスキン (claude-design 由来) — すべて #mentor-home-screen.mh2 配下に閉じ込め、他画面へ漏らさない。 ============================================================ */ #mentor-home-screen.mh2 { --sumi:#0c1018; --kon:#16243f; --shu:#b8392b; --shu-lit:#d65a47; --kin:#c8a44d; --kin-lit:#ecd592; --paper:#ece2c8; --paper-2:#e0d2ad; --ink-soft:#cdb88f; --font-min:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP","Source Han Serif JP","MS Mincho",serif; --font-go:"Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Noto Sans JP","Meiryo",sans-serif; --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; padding:0; overflow:hidden; background:var(--sumi); font-family:var(--font-min); color:var(--paper); } #mentor-home-screen.mh2 * { box-sizing:border-box; } /* background atmosphere */ #mentor-home-screen.mh2 .mhx-bg { position:absolute; inset:0; z-index:0; } #mentor-home-screen.mh2 .mhx-bg-base { position:absolute; inset:0; background: radial-gradient(90% 70% at 28% 8%, rgba(40,66,118,.40), transparent 62%), radial-gradient(60% 50% at 50% -8%, rgba(210,150,70,.22), transparent 60%), linear-gradient(180deg,#10172a 0%, #0b101c 52%, #080b13 100%); } #mentor-home-screen.mh2 .mhx-shoji { position:absolute; left:0; right:0; top:0; height:470px; opacity:.12; background: repeating-linear-gradient(90deg, rgba(220,210,180,.55) 0 2px, transparent 2px 116px), repeating-linear-gradient(0deg, rgba(220,210,180,.55) 0 2px, transparent 2px 92px); -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent); mask-image:linear-gradient(180deg,#000 60%,transparent); } #mentor-home-screen.mh2 .mhx-floor { position:absolute; left:0; right:0; bottom:0; height:300px; background: linear-gradient(180deg, rgba(8,11,18,0), rgba(6,8,12,.85)), repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 96px), linear-gradient(180deg,#26303f,#161d29); } #mentor-home-screen.mh2 .mhx-floor::before { content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,transparent,rgba(200,164,77,.5),transparent); } #mentor-home-screen.mh2 .mhx-crest { position:absolute; left:120px; top:120px; width:360px; height:360px; border-radius:50%; border:3px solid rgba(200,164,77,.16); box-shadow:inset 0 0 0 14px rgba(200,164,77,.05); z-index:0; } #mentor-home-screen.mh2 .mhx-crest::after { content:"麻"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:150px; color:rgba(200,164,77,.07); font-family:var(--font-min); } #mentor-home-screen.mh2 .mhx-lantern { position:absolute; width:54px; height:72px; z-index:1; opacity:.9; } #mentor-home-screen.mh2 .mhx-cord { position:absolute; left:50%; top:-40px; width:2px; height:42px; background:rgba(200,164,77,.4); transform:translateX(-50%); } #mentor-home-screen.mh2 .mhx-lbody { position:absolute; inset:0; border-radius:50%/44%; background:radial-gradient(60% 60% at 50% 35%, #e6663f, #a82a1e 78%); box-shadow:0 0 28px 6px rgba(200,70,40,.45), inset 0 -8px 14px rgba(0,0,0,.4); border-top:3px solid #3a1410; border-bottom:3px solid #3a1410; background-image:repeating-linear-gradient(180deg,rgba(0,0,0,.18) 0 1px, transparent 1px 9px); } #mentor-home-screen.mh2 .mhx-l1 { left:70px; top:18px; } #mentor-home-screen.mh2 .mhx-l2 { right:470px; top:8px; transform:scale(.82); } /* top info bar */ #mentor-home-screen.mh2 .mhx-topbar { position:absolute; top:0; left:0; right:0; height:46px; z-index:30; display:flex; align-items:center; justify-content:space-between; padding:0 18px; background:linear-gradient(180deg,rgba(10,13,20,.96),rgba(10,13,20,.78)); border-bottom:1px solid rgba(200,164,77,.45); box-shadow:0 2px 10px rgba(0,0,0,.5); } #mentor-home-screen.mh2 .mhx-topbar::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,rgba(236,213,146,.6),transparent); } #mentor-home-screen.mh2 .mhx-chapter { display:flex; align-items:center; gap:9px; } #mentor-home-screen.mh2 .mhx-back { width:26px; height:26px; border-radius:6px; cursor:pointer; color:var(--ink-soft); font-size:20px; line-height:1; border:1px solid rgba(200,164,77,.4); background:rgba(255,255,255,.03); display:flex; align-items:center; justify-content:center; transition:.15s; } #mentor-home-screen.mh2 .mhx-back:hover { background:rgba(200,164,77,.14); color:var(--kin-lit); } #mentor-home-screen.mh2 .mhx-seal { width:24px; height:24px; border-radius:4px; background:var(--shu); display:flex; align-items:center; justify-content:center; color:#f3e2c0; font-size:13px; border:1px solid #e7b56a; box-shadow:inset 0 0 4px rgba(0,0,0,.4); } #mentor-home-screen.mh2 .mhx-cname { font-size:18px; letter-spacing:.12em; color:var(--ink-soft); } #mentor-home-screen.mh2 .mhx-cname b { color:var(--kin-lit); font-weight:600; } #mentor-home-screen.mh2 .mhx-topright { display:flex; align-items:center; gap:12px; } /* 通貨と日付情報をそれぞれ丸ピルでグルーピング＝ひと目で区別（QA #10） */ #mentor-home-screen.mh2 .mhx-purse, #mentor-home-screen.mh2 .mhx-dayinfo { display:flex; align-items:center; gap:15px; padding:4px 14px; background:rgba(255,255,255,.05); border:1px solid rgba(200,164,77,.24); border-radius:999px; } #mentor-home-screen.mh2 .mhx-cur { display:flex; align-items:center; gap:6px; } #mentor-home-screen.mh2 .mhx-coin { width:21px; height:21px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; color:#1a130a; font-family:var(--font-min); flex:none; box-shadow:inset 0 1px 2px rgba(255,255,255,.5), inset 0 -2px 3px rgba(0,0,0,.35), 0 0 6px rgba(0,0,0,.4); } #mentor-home-screen.mh2 .mhx-soul .mhx-coin { background:radial-gradient(circle at 35% 30%,#ff8e6b,#b8392b); color:#ffe; box-shadow:inset 0 1px 2px rgba(255,255,255,.4),0 0 10px rgba(200,70,40,.55); } #mentor-home-screen.mh2 .mhx-kei .mhx-coin { background:radial-gradient(circle at 35% 30%,#f0d68a,#b8902f); } #mentor-home-screen.mh2 .mhx-val { font-family:var(--font-go); font-size:16px; color:#f4ecd6; font-weight:700; letter-spacing:.02em; } #mentor-home-screen.mh2 .mhx-cur-lab { font-family:var(--font-min); font-size:10px; color:var(--ink-soft); opacity:.72; letter-spacing:.05em; } #mentor-home-screen.mh2 .mhx-day { display:flex; align-items:center; font-family:var(--font-min); font-size:14px; color:var(--ink-soft); opacity:.92; } #mentor-home-screen.mh2 .mhx-day b { color:#f4ecd6; font-weight:700; font-size:18px; line-height:1; } #mentor-home-screen.mh2 .mhx-day-u { font-size:13px; margin-left:3px; letter-spacing:.05em; opacity:.85; } #mentor-home-screen.mh2 .mhx-time { margin-left:8px; padding:1px 9px; border-radius:999px; font-family:var(--font-min); font-size:13px; color:#1a120a; background:linear-gradient(135deg,#ffe39a,#d6a23a); font-weight:700; letter-spacing:.08em; } #mentor-home-screen.mh2 .mhx-acts { font-family:var(--font-min); font-size:13px; color:var(--ink-soft); letter-spacing:.06em; opacity:.92; } #mentor-home-screen.mh2 .mhx-acts b { color:#ffcf6b; font-weight:700; font-size:16px; } #mentor-home-screen.mh2 .mhx-acts small { opacity:.7; } /* 調子チップ（5段階・共通トーン） */ .mhx-cond, .ab-cond { display:inline-block; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.04em; line-height:1.5; } .ab-cond { margin-right:12px; font-size:13px; vertical-align:middle; } .tone-vbad { background:#5a3a3a; color:#ffc9c9; } .tone-bad { background:#6a4a3a; color:#ffd8b8; } .tone-ok { background:#3a4a4a; color:#cfe0dd; } .tone-good { background:linear-gradient(135deg,#5a9a3a,#3a7a2a); color:#eaffd9; } .tone-vgood { background:linear-gradient(135deg,#ffe39a,#d6a23a); color:#3a2400; box-shadow:0 0 8px rgba(214,162,58,.6); } /* 師匠の「今日：」ムードはチップ色を踏襲しつつ小さく */ #mentor-home-screen.mh2 .mhx-np-mood.mhx-cond { font-size:11px; } /* 日の始まりバナー */ #mentor-home-screen.mh2 .mhx-db { text-align:center; padding:6px 4px 2px; } #mentor-home-screen.mh2 .mhx-db-day { font-family:var(--font-min); font-size:34px; color:#3a2c14; letter-spacing:.12em; } #mentor-home-screen.mh2 .mhx-db-day b { color:#8f2418; font-size:46px; font-weight:700; } #mentor-home-screen.mh2 .mhx-db-sub { font-family:var(--font-go); font-size:13px; color:#5a4520; margin:8px 0 10px; letter-spacing:.1em; } #mentor-home-screen.mh2 .mhx-db-conds { display:flex; justify-content:center; gap:28px; margin:6px 0 14px; } #mentor-home-screen.mh2 .mhx-db-c { display:flex; flex-direction:column; align-items:center; gap:6px; } #mentor-home-screen.mh2 .mhx-db-ic { width:56px; height:56px; border-radius:50%; overflow:hidden; border:2px solid var(--kin); background:#1c2c24; } #mentor-home-screen.mh2 .mhx-db-ic img { width:100%; height:100%; object-fit:cover; } #mentor-home-screen.mh2 .mhx-db-who { font-family:var(--font-go); font-size:12px; color:#5a4520; } #mentor-home-screen.mh2 .mhx-db .mhx-cond { font-size:14px; padding:3px 12px; } #mentor-home-screen.mh2 .mhx-db-note { font-family:var(--font-go); font-size:11px; color:#6a5836; margin:0 0 14px; opacity:.9; } /* 雀荘巡り 候補リスト */ #mentor-home-screen.mh2 .mhx-pl-list { display:flex; flex-direction:column; gap:10px; margin:4px 0 12px; } #mentor-home-screen.mh2 .mhx-pl { position:relative; display:flex; flex-direction:column; align-items:stretch; gap:6px; text-align:left; cursor:pointer; padding:10px 14px; border-radius:9px; color:#2a2012; background:linear-gradient(180deg,#f3ead0,#e1d2a9); border:1.5px solid #c8a44d; box-shadow:0 3px 0 #9c7a34, 0 5px 10px rgba(0,0,0,.4); transition:transform .1s, box-shadow .1s, filter .1s; } #mentor-home-screen.mh2 .mhx-pl-top { display:flex; align-items:center; gap:9px; } #mentor-home-screen.mh2 .mhx-pl-bot { display:flex; align-items:center; gap:12px; } #mentor-home-screen.mh2 .mhx-pl-name { flex:1; font-family:var(--font-min); font-size:17px; font-weight:700; letter-spacing:.03em; color:#33260f; } #mentor-home-screen.mh2 .mhx-pl-train { font-family:var(--font-go); font-size:11px; color:#5a4520; white-space:nowrap; } #mentor-home-screen.mh2 .mhx-pl-train b { color:#8f2418; } #mentor-home-screen.mh2 .mhx-pl:hover { transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 5px 0 #9c7a34, 0 9px 16px rgba(0,0,0,.45); } #mentor-home-screen.mh2 .mhx-pl:active { transform:translateY(0); box-shadow:0 1px 0 #9c7a34; } #mentor-home-screen.mh2 .mhx-pl.is-off { cursor:default; filter:grayscale(.6) brightness(.82); opacity:.6; box-shadow:0 2px 0 #9c7a34; } #mentor-home-screen.mh2 .mhx-pl.is-off:hover { transform:none; } #mentor-home-screen.mh2 .mhx-pl-tier { flex:none; font-size:13px; } #mentor-home-screen.mh2 .mhx-pl-info { flex:1; font-family:var(--font-go); font-size:14px; color:#4a3c24; } #mentor-home-screen.mh2 .mhx-pl-info b { font-size:18px; color:#8f2418; font-weight:800; margin-right:1px; } #mentor-home-screen.mh2 .mhx-pl-rew { font-family:var(--font-go); font-size:11px; color:#7a5d2e; white-space:nowrap; } #mentor-home-screen.mh2 .mhx-pl-trait { display:block; margin-top:3px; font-family:var(--font-go); font-size:11px; color:#8a6a32; font-style:italic; } #mentor-home-screen.mh2 .mhx-pl-badge { position:absolute; top:-7px; right:10px; padding:1px 9px; border-radius:999px; font-size:11px; font-weight:800; color:#fff; background:linear-gradient(135deg,#b5301a,#7a1c10); border:1px solid #ffd0b8; box-shadow:0 2px 6px rgba(0,0,0,.5); } /* 雀荘リザルト（能力値上昇演出） */ #mentor-home-screen.mh2 .mhx-pr { text-align:center; padding:6px 4px 2px; } #mentor-home-screen.mh2 .mhx-pr-ttl { font-family:var(--font-min); font-size:24px; color:#8f2418; letter-spacing:.1em; } #mentor-home-screen.mh2 .mhx-pr-head { display:flex; align-items:center; justify-content:center; gap:12px; margin:8px 0 6px; } #mentor-home-screen.mh2 .mhx-pr-sum { font-family:var(--font-go); font-size:13px; color:#5a4520; } #mentor-home-screen.mh2 .mhx-pr-sum b { color:#2a2012; font-size:16px; } #mentor-home-screen.mh2 .mhx-pr-soul { font-family:var(--font-go); font-size:14px; color:#5a4520; margin-bottom:12px; } /* 二人打ち：点棒＝HP の増減表示 */ #mentor-home-screen.mh2 .mhx-pr-hp { font-family:var(--font-go); font-size:15px; color:#5a4520; margin:6px 0 10px; } #mentor-home-screen.mh2 .mhx-pr-hp b { font-size:19px; color:#2a2012; } #mentor-home-screen.mh2 .mhx-pr-hp b.up { color:#2e7d32; } #mentor-home-screen.mh2 .mhx-pr-hp b.dn { color:#b8392b; } #mentor-home-screen.mh2 .mhx-pr-hpd { font-size:13px; margin-left:4px; } #mentor-home-screen.mh2 .mhx-pr-hpd.up { color:#2e7d32; } #mentor-home-screen.mh2 .mhx-pr-hpd.dn { color:#b8392b; } #mentor-home-screen.mh2 .mhx-pr-soul b { color:#b8902f; font-size:18px; } #mentor-home-screen.mh2 .mhx-pr-detail { font-family:var(--font-go); font-size:12px; color:#8a6a32; margin:-8px 0 10px; } #mentor-home-screen.mh2 .mhx-pr-sub { font-family:var(--font-min); font-size:14px; color:#8f2418; letter-spacing:.08em; margin-bottom:10px; } #mentor-home-screen.mh2 .mhx-pr-stats { display:flex; flex-direction:column; gap:9px; margin-bottom:16px; } #mentor-home-screen.mh2 .mhx-pr-stat { display:flex; align-items:center; gap:10px; } #mentor-home-screen.mh2 .mhx-pr-lab { width:74px; flex:none; text-align:right; font-family:var(--font-min); font-size:15px; color:#2a2012; } #mentor-home-screen.mh2 .mhx-pr-bar { flex:1; height:12px; border-radius:7px; overflow:hidden; background:#2a1c10; border:1px solid #9c7a34; } #mentor-home-screen.mh2 .mhx-pr-fill { height:100%; background:linear-gradient(90deg,#5a9a3a,#c8a44d); transition:width .55s cubic-bezier(.22,.61,.36,1); } #mentor-home-screen.mh2 .mhx-pr-up { width:42px; flex:none; font-family:var(--font-go); font-size:15px; font-weight:800; color:#3f7a23; opacity:0; transform:scale(.5); } #mentor-home-screen.mh2 .mhx-pr-up.is-pop { animation:mhxPrPop .45s cubic-bezier(.2,1.5,.4,1) forwards; } #mentor-home-screen.mh2 .mhx-pr-now { width:36px; flex:none; font-family:var(--font-go); font-size:16px; font-weight:800; color:#2a2012; text-align:left; } #mentor-home-screen.mh2 .mhx-pr-none { font-family:var(--font-go); font-size:13px; color:#5a4520; } @keyframes mhxPrPop { 0%{opacity:0; transform:scale(.5) translateY(4px);} 60%{opacity:1; transform:scale(1.25) translateY(0);} 100%{opacity:1; transform:scale(1);} } /* 能力値上昇 FE風ゲージ（ランク内を満たし、満タンでランクアップ→次ランクへ） */ #mentor-home-screen.mh2 .mhx-pg-list { display:flex; flex-direction:column; gap:9px; margin-bottom:14px; } #mentor-home-screen.mh2 .mhx-train-gain { margin:6px 0 14px; } #mentor-home-screen.mh2 .mhx-pg-row { display:flex; align-items:center; gap:9px; } #mentor-home-screen.mh2 .mhx-pg-lab { width:74px; flex:none; text-align:right; font-family:var(--font-min); font-size:15px; color:#2a2012; } #mentor-home-screen.mh2 .mhx-pg-rank { width:24px; height:24px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:5px; font-size:14px; font-weight:900; color:#1a120a; } #mentor-home-screen.mh2 .mhx-pg-bar { flex:1; height:13px; border-radius:7px; overflow:hidden; background:#2a1c10; border:1px solid #9c7a34; box-shadow:inset 0 1px 2px rgba(0,0,0,.5); } #mentor-home-screen.mh2 .mhx-pg-fill { height:100%; border-radius:6px; transition:width .2s cubic-bezier(.3,.7,.3,1); box-shadow:0 0 6px rgba(255,210,120,.4); } #mentor-home-screen.mh2 .mhx-pg-now { width:30px; flex:none; text-align:left; font-family:var(--font-go); font-size:16px; font-weight:800; color:#2a2012; } #mentor-home-screen.mh2 .mhx-pg-up { width:42px; flex:none; font-family:var(--font-go); font-size:15px; font-weight:800; color:#3f7a23; opacity:0; transform:scale(.5); } #mentor-home-screen.mh2 .mhx-pg-up.is-pop { animation:mhxPrPop .45s cubic-bezier(.2,1.5,.4,1) forwards; } #mentor-home-screen.mh2 .mhx-pg-row.is-rankup .mhx-pg-rank { animation:mhxPrPop .4s cubic-bezier(.2,1.5,.4,1); } #mentor-home-screen.mh2 .mhx-pg-row.is-rankup .mhx-pg-bar { box-shadow:0 0 12px rgba(255,210,120,.9), inset 0 1px 2px rgba(0,0,0,.5); } /* ランクアップ演出 */ #mentor-home-screen.mh2 .mhx-ru { text-align:center; padding:6px 4px 2px; } #mentor-home-screen.mh2 .mhx-ru-ttl { font-family:var(--font-go); font-size:38px; font-weight:900; letter-spacing:.06em; background:linear-gradient(135deg,#e0892a,#d6531a,#a8301a); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 1px 1px rgba(90,40,10,.35)); animation:mhxRuPop .5s cubic-bezier(.2,1.4,.4,1) both; } #mentor-home-screen.mh2 .mhx-ru-sub { font-family:var(--font-min); font-size:13px; color:#5a4520; margin:4px 0 14px; } #mentor-home-screen.mh2 .mhx-ru-list { display:flex; flex-direction:column; gap:9px; margin-bottom:16px; } #mentor-home-screen.mh2 .mhx-ru-row { display:flex; align-items:center; justify-content:center; gap:12px; } #mentor-home-screen.mh2 .mhx-ru-lab { min-width:84px; text-align:right; font-family:var(--font-min); font-size:17px; color:#2a2012; } #mentor-home-screen.mh2 .mhx-ru-row .mhx-stat-rank { width:30px; height:30px; font-size:18px; } #mentor-home-screen.mh2 .mhx-ru-arrow { color:#a8791e; font-size:14px; } #mentor-home-screen.mh2 .mhx-ru-to { animation:mhxRuPop .45s .15s cubic-bezier(.2,1.5,.4,1) both; } @keyframes mhxRuPop { 0%{transform:scale(.4); opacity:0;} 60%{transform:scale(1.18);} 100%{transform:scale(1); opacity:1;} } #mentor-home-screen.mh2 .mhx-gear { width:30px; height:30px; border-radius:6px; cursor:pointer; border:1px solid rgba(200,164,77,.4); background:rgba(255,255,255,.03); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:16px; transition:.15s; } #mentor-home-screen.mh2 .mhx-gear:hover { background:rgba(200,164,77,.14); color:var(--kin-lit); } /* master scene */ #mentor-home-screen.mh2 .mhx-scene { position:absolute; left:0; top:46px; width:760px; bottom:94px; z-index:10; } #mentor-home-screen.mh2 .mhx-master { position:absolute; left:74px; bottom:0; width:432px; top:78px; border-radius:6px 6px 0 0; background: repeating-linear-gradient(48deg, rgba(255,255,255,.035) 0 16px, rgba(255,255,255,.07) 16px 32px), linear-gradient(180deg,#2a3a4f,#16202f 70%, #0f1722); border:1px solid rgba(200,164,77,.28); border-bottom:none; box-shadow:inset 0 0 60px rgba(0,0,0,.5), 0 0 50px rgba(0,0,0,.45); overflow:hidden; } #mentor-home-screen.mh2 .mhx-master::after { content:"師匠 立ち絵"; white-space:pre; text-align:center; position:absolute; left:0; right:0; top:42%; transform:translateY(-50%); font-family:var(--font-mono); font-size:13px; line-height:1.9; color:rgba(205,184,143,.5); letter-spacing:.05em; } #mentor-home-screen.mh2 .mhx-master-img { position:absolute; left:0; right:0; bottom:0; width:100%; height:100%; object-fit:cover; object-position:top center; z-index:1; opacity:0; transition:opacity .3s ease; } #mentor-home-screen.mh2 .mhx-master-img.is-loaded { opacity:1; } /* 立ち絵が来るまではプレースホルダ文字を出さず、暗いグラデだけで「準備中の枠」に見せる */ #mentor-home-screen.mh2 .mhx-master.has-img::after { display:none; } #mentor-home-screen.mh2 .mhx-port-img { opacity:0; transition:opacity .3s ease; } #mentor-home-screen.mh2 .mhx-port-img.is-loaded { opacity:1; } #mentor-home-screen.mh2 .mhx-floorglow { position:absolute; left:-10%; right:-10%; bottom:-20px; height:90px; background:radial-gradient(50% 100% at 50% 100%, rgba(200,164,77,.22), transparent 70%); z-index:2; } #mentor-home-screen.mh2 .mhx-nameplate { position:absolute; left:74px; bottom:8px; z-index:12; display:flex; align-items:center; gap:8px; padding:6px 16px 6px 12px; background:linear-gradient(180deg,rgba(20,14,10,.95),rgba(12,8,6,.92)); border:1px solid var(--kin); border-left:4px solid var(--shu); border-radius:3px; box-shadow:0 4px 14px rgba(0,0,0,.5); } #mentor-home-screen.mh2 .mhx-np-ttl { font-size:11px; color:var(--shu-lit); letter-spacing:.2em; font-family:var(--font-go); } #mentor-home-screen.mh2 .mhx-np-nm { font-size:21px; color:var(--kin-lit); letter-spacing:.08em; } #mentor-home-screen.mh2 .mhx-np-nm small { font-size:12px; color:var(--ink-soft); letter-spacing:.1em; margin-left:4px; } #mentor-home-screen.mh2 .mhx-bubble { position:absolute; left:362px; top:30px; width:354px; z-index:14; padding:20px 24px 22px; background:linear-gradient(180deg,var(--paper),var(--paper-2)); border:2px solid var(--kin); border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.35); color:#2a2118; } #mentor-home-screen.mh2 .mhx-bubble::before { content:""; position:absolute; left:-18px; top:54px; border-width:13px 20px 13px 0; border-style:solid; border-color:transparent var(--kin) transparent transparent; } #mentor-home-screen.mh2 .mhx-bubble::after { content:""; position:absolute; left:-14px; top:56px; border-width:11px 17px 11px 0; border-style:solid; border-color:transparent var(--paper) transparent transparent; } #mentor-home-screen.mh2 .mhx-q { font-family:var(--font-min); font-size:24px; line-height:1.5; letter-spacing:.04em; color:#241c12; } /* command menu */ #mentor-home-screen.mh2 .mhx-menu { position:absolute; right:18px; top:58px; width:454px; bottom:104px; z-index:20; padding:14px 14px 16px; background: repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 2px, transparent 2px 7px), linear-gradient(180deg,#5d3f24,#43290f); border:2px solid #2c1a0a; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.55), inset 0 0 0 2px rgba(200,164,77,.22), inset 0 2px 6px rgba(255,210,140,.12); } #mentor-home-screen.mh2 .mhx-menu-head { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:12px; color:var(--kin-lit); } #mentor-home-screen.mh2 .mhx-line { flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(200,164,77,.6)); } #mentor-home-screen.mh2 .mhx-line.mhx-r { background:linear-gradient(90deg,rgba(200,164,77,.6),transparent); } #mentor-home-screen.mh2 .mhx-mt { font-size:17px; letter-spacing:.32em; text-shadow:0 1px 2px rgba(0,0,0,.6); } #mentor-home-screen.mh2 .mhx-group { display:flex; align-items:stretch; gap:10px; margin-bottom:11px; } #mentor-home-screen.mh2 .mhx-cat { width:30px; flex:none; border-radius:3px; display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; text-orientation:upright; font-size:14px; letter-spacing:.18em; color:#f6e6c4; background:linear-gradient(180deg,var(--shu),#8f2418); border:1px solid #e7b56a; box-shadow:inset 0 0 5px rgba(0,0,0,.4); } #mentor-home-screen.mh2 .mhx-tags { flex:1; display:flex; gap:9px; } #mentor-home-screen.mh2 .mhx-tag { flex:1; position:relative; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:9px 6px 10px; min-height:62px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 8px), linear-gradient(180deg,#efe3c4 0%, #ddc795 100%); border:1.5px solid #8a6a32; border-radius:5px; box-shadow:0 3px 0 #7c5a28, 0 5px 9px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.5); color:#33260f; transition:transform .12s, box-shadow .12s, filter .12s; } #mentor-home-screen.mh2 .mhx-tag::before { content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%); width:8px; height:8px; border-radius:50%; background:#5b3c18; box-shadow:0 0 0 2px rgba(200,164,77,.5); } #mentor-home-screen.mh2 .mhx-cmd { font-family:var(--font-min); font-size:20px; letter-spacing:.05em; line-height:1; } #mentor-home-screen.mh2 .mhx-desc { font-family:var(--font-go); font-size:11px; color:#7a5d2e; margin-top:5px; letter-spacing:.02em; } #mentor-home-screen.mh2 .mhx-tag:hover { transform:translateY(-3px); filter:brightness(1.05); box-shadow:0 6px 0 #7c5a28,0 10px 16px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.6); } #mentor-home-screen.mh2 .mhx-tag:active { transform:translateY(0); box-shadow:0 1px 0 #7c5a28,0 2px 6px rgba(0,0,0,.45); } #mentor-home-screen.mh2 .mhx-jissen .mhx-tag { background:repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 8px),linear-gradient(180deg,#f3e1b4,#e8c878); border-color:#a87d2e; } #mentor-home-screen.mh2 .mhx-jissen .mhx-tag .mhx-cmd { color:#5a3410; } #mentor-home-screen.mh2 .mhx-jissen .mhx-cat { background:linear-gradient(180deg,#15315a,#0e2241); } /* 無効札（準備中） */ #mentor-home-screen.mh2 .mhx-tag-off { cursor:default; filter:grayscale(.5) brightness(.82); opacity:.62; } #mentor-home-screen.mh2 .mhx-tag-off::before { background:#4a4337; box-shadow:0 0 0 2px rgba(120,120,120,.4); } #mentor-home-screen.mh2 .mhx-tag-off:hover { transform:none; filter:grayscale(.5) brightness(.82); box-shadow:0 3px 0 #7c5a28, 0 5px 9px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.5); } /* 未読バッジ */ #mentor-home-screen.mh2 .mhx-badge2 { position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px; z-index:2; display:flex; align-items:center; justify-content:center; border-radius:10px; background:radial-gradient(circle at 35% 30%,#ff8e6b,#b8392b); color:#fff; font-family:var(--font-go); font-size:12px; font-weight:700; border:1px solid #ffd0b8; box-shadow:0 2px 6px rgba(0,0,0,.5); } /* 能力値ストリップ（修行を選ぶの下・コンパクト表示／クリックでキャラ詳細へ） */ #mentor-home-screen.mh2 .mhx-stats { margin-top:13px; cursor:pointer; } #mentor-home-screen.mh2 .mhx-stats-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; color:var(--kin-lit); } #mentor-home-screen.mh2 .mhx-st-t { font-size:13px; letter-spacing:.26em; text-shadow:0 1px 2px rgba(0,0,0,.6); white-space:nowrap; } #mentor-home-screen.mh2 .mhx-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px 8px; } #mentor-home-screen.mh2 .mhx-stat { display:flex; align-items:center; gap:6px; padding:4px 8px; border-radius:5px; background:linear-gradient(180deg,rgba(245,233,210,.95),rgba(225,205,160,.92)); border:1px solid #8a6a32; box-shadow:0 2px 0 #7c5a28, inset 0 1px 1px rgba(255,255,255,.5); } #mentor-home-screen.mh2 .mhx-stats:hover .mhx-stat { filter:brightness(1.04); } /* 背景はランク色（.rank-*）に任せる＝ゲージ演出(.mhx-pg-rank)と同じ見え方にする（灰固定をやめる） */ #mentor-home-screen.mh2 .mhx-stat-rank { width:20px; height:20px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:4px; font-size:13px; font-weight:900; color:#1a120a; } #mentor-home-screen.mh2 .mhx-stat-lab { flex:1; font-family:var(--font-min); font-size:13px; color:#33260f; letter-spacing:.02em; } #mentor-home-screen.mh2 .mhx-stat-val { font-family:var(--font-go); font-size:14px; font-weight:700; color:#5a3410; } /* disciple status bar */ #mentor-home-screen.mh2 .mhx-status { position:absolute; left:18px; bottom:14px; width:740px; height:76px; z-index:25; cursor:pointer; display:flex; align-items:center; gap:14px; padding:10px 18px 10px 12px; background:linear-gradient(180deg,rgba(16,20,30,.96),rgba(9,12,18,.94)); border:1px solid rgba(200,164,77,.4); border-radius:8px; box-shadow:0 8px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); transition:border-color .15s; } #mentor-home-screen.mh2 .mhx-status:hover { border-color:var(--kin-lit); } #mentor-home-screen.mh2 .mhx-port { width:56px; height:56px; flex:none; border-radius:6px; overflow:hidden; background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 8px,rgba(255,255,255,.1) 8px 16px),linear-gradient(180deg,#3a2c4f,#211733); border:1px solid var(--kin); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:9px; color:rgba(205,184,143,.6); text-align:center; } #mentor-home-screen.mh2 .mhx-port-img { width:100%; height:100%; object-fit:cover; object-position:top center; } #mentor-home-screen.mh2 .mhx-who { flex:none; width:170px; } #mentor-home-screen.mh2 .mhx-dn { font-size:19px; color:#f0e7d0; letter-spacing:.06em; } #mentor-home-screen.mh2 .mhx-dn small { font-size:11px; color:var(--ink-soft); margin-left:4px; letter-spacing:.08em; } #mentor-home-screen.mh2 .mhx-lv { display:inline-flex; align-items:center; gap:5px; margin-top:4px; } #mentor-home-screen.mh2 .mhx-lvtag { font-family:var(--font-go); font-size:10px; color:#1a130a; background:var(--kin); padding:1px 6px; border-radius:3px; letter-spacing:.1em; } #mentor-home-screen.mh2 .mhx-lv b { font-family:var(--font-go); font-size:18px; color:var(--kin-lit); } #mentor-home-screen.mh2 .mhx-hp { flex:1; } #mentor-home-screen.mh2 .mhx-hp-top { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:5px; } #mentor-home-screen.mh2 .mhx-lab { font-family:var(--font-min); font-size:13px; color:var(--ink-soft); letter-spacing:.14em; } #mentor-home-screen.mh2 .mhx-lab b { color:var(--shu-lit); } #mentor-home-screen.mh2 .mhx-num { font-family:var(--font-go); font-size:15px; color:#f0e7d0; font-weight:600; letter-spacing:.02em; } #mentor-home-screen.mh2 .mhx-num small { color:var(--ink-soft); font-weight:400; font-size:12px; } #mentor-home-screen.mh2 .mhx-bar { height:16px; border-radius:9px; overflow:hidden; position:relative; background:linear-gradient(180deg,#2a0f0c,#1a0907); border:1px solid #3a1410; box-shadow:inset 0 1px 3px rgba(0,0,0,.7); } #mentor-home-screen.mh2 .mhx-fill { position:absolute; inset:0; border-radius:8px; background:linear-gradient(180deg,#ffcf6b,#d65a47 55%, #b8392b); box-shadow:0 0 10px rgba(214,90,71,.6), inset 0 1px 2px rgba(255,255,255,.5); } #mentor-home-screen.mh2 .mhx-fill::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 13px); } /* next tournament CTA */ #mentor-home-screen.mh2 .mhx-next { position:absolute; right:18px; bottom:14px; width:454px; height:76px; z-index:25; cursor:pointer; text-align:left; display:flex; align-items:center; gap:14px; padding:0 20px; background:linear-gradient(180deg,#d95a44 0%, #b8392b 60%, #8f2418 100%); border-radius:9px; border:1px solid #f0c074; box-shadow:0 8px 22px rgba(150,40,25,.5), inset 0 1px 0 rgba(255,220,170,.5), inset 0 0 0 2px rgba(200,164,77,.35); color:#fff; overflow:hidden; } #mentor-home-screen.mh2 .mhx-next::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 10px,transparent 10px 20px); } #mentor-home-screen.mh2 .mhx-badge { width:50px; height:50px; flex:none; border-radius:7px; z-index:1; background:linear-gradient(180deg,#ffe6a8,#d8b056); border:1px solid #fff2cf; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#5a3410; box-shadow:0 2px 6px rgba(0,0,0,.35); } #mentor-home-screen.mh2 .mhx-b1 { font-size:9px; letter-spacing:.1em; font-family:var(--font-go); } #mentor-home-screen.mh2 .mhx-b2 { font-size:20px; line-height:1; font-family:var(--font-min); } #mentor-home-screen.mh2 .mhx-txt { z-index:1; flex:1; display:flex; flex-direction:column; justify-content:center; gap:1px; min-width:0; } #mentor-home-screen.mh2 .mhx-s { font-family:var(--font-go); font-size:10px; letter-spacing:.16em; color:#ffd0b3; opacity:.9; } #mentor-home-screen.mh2 .mhx-m { font-family:var(--font-min); font-size:22px; line-height:1.08; letter-spacing:.03em; text-shadow:0 1px 3px rgba(0,0,0,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #mentor-home-screen.mh2 .mhx-tre { font-family:var(--font-min); font-size:12px; letter-spacing:.02em; color:#ffe6b0; opacity:.92; } #mentor-home-screen.mh2 .mhx-tre b { font-weight:600; color:#fff3df; } #mentor-home-screen.mh2 .mhx-tre small { font-size:10px; opacity:.62; margin-left:5px; letter-spacing:.04em; } #mentor-home-screen.mh2 .mhx-na { z-index:1; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; } #mentor-home-screen.mh2 .mhx-na-fmt { font-family:var(--font-go); font-size:12px; letter-spacing:.06em; color:#ffe6b0; opacity:.92; } #mentor-home-screen.mh2 .mhx-na-tier { font-family:var(--font-go); font-size:11px; font-weight:700; color:#5a3410; background:linear-gradient(135deg,#ffe6a8,#d8b056); border-radius:5px; padding:1px 7px; letter-spacing:.04em; } #mentor-home-screen.mh2 .mhx-next:hover { filter:brightness(1.06); } /* 準備中の大会CTA: 脈動なし・くすませる */ #mentor-home-screen.mh2 .mhx-next-off { cursor:default; filter:grayscale(.45) brightness(.7); animation:none; } #mentor-home-screen.mh2 .mhx-next-off:hover { filter:grayscale(.45) brightness(.7); } /* game frame corners */ #mentor-home-screen.mh2 .mhx-corner { position:absolute; width:26px; height:26px; z-index:40; border:2px solid rgba(200,164,77,.55); pointer-events:none; } #mentor-home-screen.mh2 .mhx-tl { left:8px; top:8px; border-right:none; border-bottom:none; } #mentor-home-screen.mh2 .mhx-tr { right:8px; top:8px; border-left:none; border-bottom:none; } #mentor-home-screen.mh2 .mhx-bl { left:8px; bottom:8px; border-right:none; border-top:none; } #mentor-home-screen.mh2 .mhx-br { right:8px; bottom:8px; border-left:none; border-top:none; } /* debug reset, repositioned for the dark hub */ #mentor-home-screen.mh2 .mhx-debug { position:absolute; left:14px; top:54px; z-index:45; margin:0; } /* ---- 師匠名札を「コンパクト・ステータス」に拡張（弟子帯と同程度の情報量）---- */ #mentor-home-screen.mh2 .mhx-nameplate { align-items:flex-start; cursor:pointer; max-width:340px; transition:border-color .15s, box-shadow .15s; } #mentor-home-screen.mh2 .mhx-nameplate:hover, #mentor-home-screen.mh2 .mhx-nameplate:focus-visible { border-left-color:var(--kin-lit); box-shadow:0 6px 20px rgba(0,0,0,.6); outline:none; } #mentor-home-screen.mh2 .mhx-np-main { display:flex; flex-direction:column; gap:3px; } #mentor-home-screen.mh2 .mhx-np-sub { display:flex; align-items:center; gap:7px; flex-wrap:wrap; } #mentor-home-screen.mh2 .mhx-np-title { font-family:var(--font-go); font-size:10px; color:#1a130a; background:var(--kin); padding:1px 7px; border-radius:9px; letter-spacing:.06em; } #mentor-home-screen.mh2 .mhx-np-lv { font-family:var(--font-go); font-size:11px; color:var(--kin-lit); letter-spacing:.04em; } #mentor-home-screen.mh2 .mhx-np-mood { font-family:var(--font-min); font-size:11px; color:var(--ink-soft); letter-spacing:.04em; } /* 能力説明はホバー/フォーカス時だけ出すツールチップ（常設の情報量を増やしすぎない） */ #mentor-home-screen.mh2 .mhx-np-tip { position:absolute; left:0; bottom:calc(100% + 10px); width:300px; padding:11px 13px; z-index:16; background:linear-gradient(180deg,#1b1510,#0d0a07); border:1px solid var(--kin); border-radius:9px; box-shadow:0 10px 28px rgba(0,0,0,.65); opacity:0; visibility:hidden; transform:translateY(5px); transition:opacity .16s, transform .16s, visibility .16s; pointer-events:none; } #mentor-home-screen.mh2 .mhx-nameplate:hover .mhx-np-tip, #mentor-home-screen.mh2 .mhx-nameplate:focus-within .mhx-np-tip { opacity:1; visibility:visible; transform:none; } #mentor-home-screen.mh2 .mhx-np-tip::after { content:""; position:absolute; left:24px; bottom:-7px; width:12px; height:12px; background:#0d0a07; border-right:1px solid var(--kin); border-bottom:1px solid var(--kin); transform:rotate(45deg); } #mentor-home-screen.mh2 .mhx-np-tip-h { font-family:var(--font-go); font-size:9px; letter-spacing:.2em; color:var(--shu-lit); } #mentor-home-screen.mh2 .mhx-np-tip-n { font-family:var(--font-min); font-size:15px; color:var(--kin-lit); margin-top:2px; letter-spacing:.04em; } #mentor-home-screen.mh2 .mhx-np-tip-d { font-family:var(--font-go); font-size:11px; line-height:1.65; color:var(--ink-soft); margin-top:4px; } /* ---- 再利用モーダル（休憩 / 師匠詳細）---- */ #mentor-home-screen.mh2 .mhx-modal { position:absolute; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .18s ease; } #mentor-home-screen.mh2 .mhx-modal.is-open { opacity:1; } #mentor-home-screen.mh2 .mhx-modal-scrim { position:absolute; inset:0; background:rgba(6,8,12,.66); } #mentor-home-screen.mh2 .mhx-modal-card { position:relative; z-index:1; width:540px; max-width:86%; padding:24px 26px 26px; transform:translateY(10px) scale(.98); transition:transform .18s ease; background:linear-gradient(180deg,#f3ead0,#e1d2a9); color:#241c12; border:2px solid var(--kin); border-radius:16px; box-shadow:0 26px 64px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.4); } #mentor-home-screen.mh2 .mhx-modal.is-open .mhx-modal-card { transform:none; } #mentor-home-screen.mh2 .mhx-modal-x { position:absolute; top:9px; right:11px; width:30px; height:30px; border-radius:7px; cursor:pointer; border:1px solid #b79a55; background:rgba(255,255,255,.45); color:#5a4520; font-size:14px; line-height:1; transition:.15s; } #mentor-home-screen.mh2 .mhx-modal-x:hover { background:rgba(184,57,43,.16); color:#8f2418; } #mentor-home-screen.mh2 .mhx-md-head { display:flex; align-items:center; gap:15px; margin-bottom:13px; } #mentor-home-screen.mh2 .mhx-md-icon { width:64px; height:64px; flex:none; border-radius:11px; overflow:hidden; border:2px solid var(--kin); background:#cdbb95; } #mentor-home-screen.mh2 .mhx-md-icon-lg { width:86px; height:86px; } #mentor-home-screen.mh2 .mhx-md-icon img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; } #mentor-home-screen.mh2 .mhx-md-title { display:flex; flex-direction:column; gap:3px; } #mentor-home-screen.mh2 .mhx-md-by { font-family:var(--font-go); font-size:11px; color:var(--shu); letter-spacing:.2em; } #mentor-home-screen.mh2 .mhx-md-ttl { font-family:var(--font-min); font-size:25px; color:#2a2012; letter-spacing:.06em; } #mentor-home-screen.mh2 .mhx-md-ttl small { font-size:12px; color:#7a684a; margin-left:7px; letter-spacing:.1em; } #mentor-home-screen.mh2 .mhx-md-chips { display:flex; gap:6px; margin-top:4px; flex-wrap:wrap; } #mentor-home-screen.mh2 .mhx-chip { font-family:var(--font-go); font-size:11px; padding:2px 9px; border-radius:11px; background:#d8c79d; border:1px solid #b79a55; color:#4a3a18; } #mentor-home-screen.mh2 .mhx-chip-lv { background:var(--kin); color:#2a1f0a; border-color:#a98a3c; } #mentor-home-screen.mh2 .mhx-chip-mood { background:#e9d8b2; } #mentor-home-screen.mh2 .mhx-md-line { font-family:var(--font-min); font-size:18px; line-height:1.65; margin:6px 0 15px; color:#2a2012; } #mentor-home-screen.mh2 .mhx-md-prof { font-family:var(--font-go); font-size:13px; line-height:1.75; color:#4a3c24; margin:0 0 13px; } #mentor-home-screen.mh2 .mhx-md-abil { background:rgba(255,255,255,.42); border:1px solid #c7ad6e; border-radius:11px; padding:11px 13px; margin-bottom:13px; } #mentor-home-screen.mh2 .mhx-md-abil-h { font-family:var(--font-go); font-size:10px; letter-spacing:.2em; color:var(--shu); } #mentor-home-screen.mh2 .mhx-md-abil-n { font-family:var(--font-min); font-size:17px; color:#3a2c12; margin-top:3px; } #mentor-home-screen.mh2 .mhx-md-abil-d { font-family:var(--font-go); font-size:12px; line-height:1.65; color:#5a4a2c; margin-top:4px; } #mentor-home-screen.mh2 .mhx-md-haoh { font-family:var(--font-go); font-size:11px; color:#7a684a; border-top:1px dashed #b79a55; padding-top:9px; letter-spacing:.04em; } #mentor-home-screen.mh2 .mhx-md-hp { margin:8px 0 15px; } #mentor-home-screen.mh2 .mhx-md-hp-top { display:flex; justify-content:space-between; font-family:var(--font-go); font-size:12px; color:#5a4a2c; margin-bottom:6px; } #mentor-home-screen.mh2 .mhx-md-fill { transition:width .6s cubic-bezier(.22,.61,.36,1); } #mentor-home-screen.mh2 .mhx-md-result { font-family:var(--font-go); font-size:14px; color:#4a3c24; font-weight:600; margin:0 0 13px; letter-spacing:.02em; } /* 二人打ち＝師匠タイマンの オート/本気 選択 */ #mentor-home-screen.mh2 .mhx-duo-btns { display:flex; gap:12px; } #mentor-home-screen.mh2 .mhx-duo-btns .mhx-md-btn { flex:1; display:flex; flex-direction:column; gap:3px; line-height:1.2; } #mentor-home-screen.mh2 .mhx-duo-btns .mhx-md-btn small { font-size:11px; font-weight:400; opacity:.85; } #mentor-home-screen.mh2 .mhx-duo-auto { filter:saturate(.85); } /* 得点推移グラフ（1試合ごと・全員） */ .score-graph { position:absolute; inset:0; z-index:95; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; font-family:"Yu Gothic","Noto Sans JP",sans-serif; } .score-graph.is-open { opacity:1; } .score-graph .sg-scrim { position:absolute; inset:0; background:rgba(4,6,10,.84); } .score-graph .sg-card { position:relative; z-index:1; width:1000px; max-width:94%; padding:22px 26px; background:linear-gradient(180deg,#10141e,#0a0d14); border:2px solid #c8a44d; border-radius:16px; box-shadow:0 26px 70px rgba(0,0,0,.7); } .score-graph .sg-head { text-align:center; font-size:22px; letter-spacing:.18em; color:#ecd592; margin-bottom:12px; } .score-graph .sg-body { display:flex; gap:18px; align-items:stretch; } .score-graph .sg-svg { flex:1; height:360px; background:rgba(255,255,255,.03); border:1px solid rgba(200,164,77,.18); border-radius:10px; } .score-graph .sg-base { stroke:rgba(255,255,255,.28); stroke-width:1; stroke-dasharray:5 5; } .score-graph .sg-base-lbl { fill:rgba(255,255,255,.5); font-size:12px; } .score-graph .sg-xl { fill:#9a8a66; font-size:12px; text-anchor:middle; } .score-graph .sg-legend { width:230px; flex:none; display:flex; flex-direction:column; gap:7px; justify-content:center; } .score-graph .sg-leg-row { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; background:rgba(255,255,255,.04); border:1px solid rgba(200,164,77,.16); } .score-graph .sg-leg-row.me { background:linear-gradient(90deg,rgba(214,162,58,.22),rgba(214,162,58,.05)); border-color:rgba(236,213,146,.5); } .score-graph .sg-leg-rank { width:20px; height:20px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:5px; font-weight:900; font-size:12px; color:#1a120a; background:#8a99a8; } .score-graph .sg-leg-row:nth-child(1) .sg-leg-rank { background:linear-gradient(135deg,#ffe39a,#d6a23a); } .score-graph .sg-leg-dot { width:12px; height:12px; flex:none; border-radius:50%; } .score-graph .sg-leg-name { flex:1; font-size:15px; color:#f0e7d0; } .score-graph .sg-leg-pt { font-weight:800; font-size:15px; color:#ffe39a; } .score-graph .sg-close { width:auto; min-width:160px; margin:14px auto 0; display:block; } /* 大会連戦の経過ノート（対局終了画面） */ .go-tourney-note { text-align:center; font-family:"Yu Gothic","Noto Sans JP",sans-serif; font-size:15px; font-weight:700; color:#ffe39a; margin:6px 0 10px; text-shadow:0 2px 6px rgba(0,0,0,.6); } /* 大会 順位表演出（節間・ヒリヒリ） */ .tourney-standings { position:absolute; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; font-family:"Yu Gothic","Noto Sans JP",sans-serif; } .tourney-standings.is-open { opacity:1; } .tourney-standings .ts-scrim { position:absolute; inset:0; background:rgba(4,6,10,.82); } .tourney-standings .ts-card { position:relative; z-index:1; width:560px; max-width:90%; padding:26px 28px; background:linear-gradient(180deg,#10141e,#0a0d14); border:2px solid #c8a44d; border-radius:16px; box-shadow:0 26px 70px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,220,140,.12); } .tourney-standings .ts-head { text-align:center; font-size:22px; letter-spacing:.14em; color:#ecd592; margin-bottom:16px; } .tourney-standings .ts-head small { display:block; font-size:12px; color:#9a8a66; letter-spacing:.1em; margin-top:3px; } .tourney-standings .ts-list { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; max-height:calc(var(--stage-h) * 0.62); overflow-y:auto; } .tourney-standings .ts-row { display:flex; align-items:center; gap:12px; padding:7px 12px; border-radius:9px; background:rgba(255,255,255,.04); border:1px solid rgba(200,164,77,.18); animation:tsRow .4s ease both; } .tourney-standings .ts-row.me { background:linear-gradient(90deg,rgba(214,162,58,.22),rgba(214,162,58,.06)); border-color:rgba(236,213,146,.55); } @keyframes tsRow { 0%{opacity:0; transform:translateX(-18px);} 100%{opacity:1; transform:translateX(0);} } .tourney-standings .ts-place { width:30px; height:30px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:7px; font-weight:900; font-size:16px; color:#1a120a; background:#8a99a8; } .ts-p1 { background:linear-gradient(135deg,#ffe39a,#d6a23a)!important; box-shadow:0 0 10px rgba(214,162,58,.6); } .ts-p2 { background:linear-gradient(135deg,#dfe6ee,#9fb0c4)!important; } .ts-p3 { background:linear-gradient(135deg,#e0b083,#b07a44)!important; } .tourney-standings .ts-name { flex:1; font-size:17px; color:#f0e7d0; } .ts-you { font-size:10px; font-weight:800; color:#1a120a; background:#ecd592; border-radius:4px; padding:1px 6px; margin-left:8px; letter-spacing:.08em; } .tourney-standings .ts-delta { width:56px; text-align:right; font-weight:800; font-size:15px; } .tourney-standings .ts-delta.up { color:#8fd06a; } .tourney-standings .ts-delta.dn { color:#ff8e7a; } .tourney-standings .ts-total { width:64px; text-align:right; font-weight:800; font-size:18px; color:#ffe39a; } .tourney-standings .ts-btns { display:flex; gap:12px; justify-content:center; } .tourney-standings .ts-btns button { min-width:140px; } /* ===== 大会 要項画面（開幕前ブリーフィング・#2）===== */ .tourney-brief { position:absolute; inset:0; z-index:92; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; font-family:"Yu Gothic","Noto Sans JP",sans-serif; } .tourney-brief.is-open { opacity:1; } .tourney-brief .ts-scrim { position:absolute; inset:0; background:rgba(4,6,10,.86); } /* 上下padding 16px: ネームド3枚＋集約1枚（T2団体）でも無スクロールで収まる高さに調整。 */ .tourney-brief .tb-card { position:relative; z-index:1; width:680px; max-width:94%; max-height:calc(var(--stage-h) - 24px); overflow:auto; padding:16px 30px; background:linear-gradient(180deg,#12161f,#0a0d14); border:2px solid #c8a44d; border-radius:16px; box-shadow:0 26px 70px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,220,140,.12); color:#e8efe9; } .tourney-brief .tb-head { display:flex; align-items:center; gap:14px; margin-bottom:14px; } .tourney-brief .tb-cup { width:48px; height:48px; flex:none; border-radius:9px; display:flex; align-items:center; justify-content:center; font-family:var(--font-go); font-size:13px; font-weight:800; color:#5a3410; background:linear-gradient(180deg,#ffe6a8,#d8b056); border:1px solid #fff2cf; box-shadow:0 2px 6px rgba(0,0,0,.4); } .tourney-brief .tb-name { font-family:var(--font-min); font-size:26px; letter-spacing:.04em; color:#ffe7ab; } .tourney-brief .tb-tier { font-family:var(--font-go); font-size:13px; color:#9a8a66; letter-spacing:.06em; margin-top:2px; } .tourney-brief .tb-treasure { display:flex; align-items:center; gap:13px; padding:9px 14px; margin-bottom:11px; background:linear-gradient(90deg,rgba(214,162,58,.16),rgba(214,162,58,.03)); border:1px solid rgba(236,213,146,.4); border-radius:11px; } .tourney-brief .tb-tre-mark { width:34px; height:34px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-min); font-size:16px; color:#1a130a; background:radial-gradient(circle at 35% 30%,#ffe39a,#c8932f); box-shadow:0 0 10px rgba(214,162,58,.5); } .tourney-brief .tb-tre-txt b { font-family:var(--font-min); font-size:19px; color:#fff3df; } .tourney-brief .tb-tre-txt small { font-size:11px; color:#9a8a66; margin-left:7px; } .tourney-brief .tb-tre-sym { font-size:12px; color:#cfc3a6; margin-top:2px; opacity:.9; } .tourney-brief .tb-rules { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; } .tourney-brief .tb-rule { display:flex; gap:12px; align-items:baseline; font-size:13.5px; } .tourney-brief .tb-rk { flex:none; width:74px; font-family:var(--font-go); font-size:11px; letter-spacing:.08em; color:#8aa0c0; text-align:right; } .tourney-brief .tb-rv { color:#e3e9e6; } .tourney-brief .tb-rv b { color:#ffe39a; } .tourney-brief .tb-rivals-head { font-family:var(--font-go); font-size:12px; letter-spacing:.16em; color:#c8a44d; margin:0 0 7px; padding-bottom:4px; border-bottom:1px solid rgba(200,164,77,.25); } .tourney-brief .tb-rivals { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; } .tourney-brief .tb-rival { display:flex; align-items:center; gap:11px; padding:6px 10px; border-radius:9px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); } .tourney-brief .tb-rival.named { background:linear-gradient(90deg,rgba(184,57,43,.16),rgba(255,255,255,.02)); border-color:rgba(240,192,116,.32); } .tourney-brief .tb-rival-art { width:34px; height:34px; flex:none; border-radius:7px; background:#2a2f3a center/180% no-repeat; background-image:var(--art); filter:saturate(.9); } .tourney-brief .tb-rival-name { font-size:15px; font-weight:700; } .tourney-brief .tb-rival-title { font-family:var(--font-go); font-size:11px; color:#e9b87a; letter-spacing:.04em; margin-top:1px; } .tourney-brief .tb-rival-title.tb-mob { color:#7c8694; } .tourney-brief .tb-rival-line { font-size:11.5px; color:#cfc3a6; margin-top:2px; opacity:.9; } .tourney-brief .tb-mobsum .tb-rival-art { filter:grayscale(.4) brightness(.7); } .tourney-brief .tb-btns { display:flex; gap:12px; justify-content:center; } .tourney-brief .tb-btns button { min-width:160px; } /* ===== 対局中の大会バッジ（左上・#2）===== */ .game-tourney-hud { position:absolute; left:14px; top:12px; z-index:30; display:flex; align-items:center; gap:9px; padding:6px 12px 6px 8px; background:linear-gradient(180deg,rgba(18,12,8,.9),rgba(12,8,6,.78)); border:1px solid rgba(240,192,116,.5); border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,.5); pointer-events:none; } .game-tourney-hud .gth-cup { width:30px; height:30px; flex:none; border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:var(--font-go); font-size:10px; font-weight:800; color:#5a3410; background:linear-gradient(180deg,#ffe6a8,#d8b056); } .game-tourney-hud .gth-name { font-family:var(--font-min); font-size:15px; color:#ffe7ab; letter-spacing:.03em; line-height:1.1; } .game-tourney-hud .gth-sec { font-family:var(--font-go); font-size:11px; color:#cdbb92; letter-spacing:.04em; margin-top:2px; } /* ===== 対局開始演出：大会リボン＋ライバル口上（#2）===== */ .mi-tourney { position:absolute; top:64px; left:50%; transform:translateX(-50%); z-index:5; display:flex; align-items:center; gap:11px; padding:6px 16px; background:linear-gradient(180deg,rgba(18,12,8,.92),rgba(12,8,6,.8)); border:1px solid rgba(240,192,116,.55); border-radius:999px; box-shadow:0 4px 16px rgba(0,0,0,.5); } .mi-tourney .mi-tourney-cup { width:26px; height:26px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-go); font-size:9px; font-weight:800; color:#5a3410; background:linear-gradient(180deg,#ffe6a8,#d8b056); } .mi-tourney .mi-tourney-name { font-family:var(--font-min); font-size:17px; color:#ffe7ab; letter-spacing:.04em; } .mi-tourney .mi-tourney-tre { font-size:11px; color:#e9b87a; margin-left:9px; } .mi-tourney .mi-tourney-sec { font-family:var(--font-go); font-size:11px; color:#cdbb92; letter-spacing:.06em; margin-top:1px; } .mi-card.is-rival .mi-card-role { color:#e9b87a; } .mi-card-line { margin-top:6px; font-size:11px; color:#d8cba8; line-height:1.35; max-width:150px; opacity:.92; } /* 大会優勝＝宝の獲得 */ #mentor-home-screen.mh2 .mhx-lg-treasure { text-align:center; font-family:var(--font-min); font-size:17px; color:#5a4520; margin:8px 0 4px; } #mentor-home-screen.mh2 .mhx-lg-treasure b { font-size:24px; color:#8f2418; letter-spacing:.06em; } #mentor-home-screen.mh2 .mhx-lg-treasure small { display:block; font-size:11px; color:#6a5836; margin-top:2px; } /* 大会（M リーグ）最終結果の順位行 */ #mentor-home-screen.mh2 .mhx-lg-list { display:flex; flex-direction:column; gap:5px; margin:8px 0 10px; max-height:calc(var(--stage-h) * 0.5); overflow-y:auto; } #mentor-home-screen.mh2 .mhx-lg-row { display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:7px; background:#16241d; border:1px solid #2a3f34; } #mentor-home-screen.mh2 .mhx-lg-row.me { background:linear-gradient(90deg,rgba(214,162,58,.2),rgba(214,162,58,.05)); border-color:rgba(236,213,146,.5); } #mentor-home-screen.mh2 .mhx-lg-place { width:24px; height:24px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:6px; font-weight:900; font-size:14px; color:#1a120a; background:#8a99a8; } #mentor-home-screen.mh2 .mhx-lg-name { flex:1; font-size:15px; color:#e8efe9; text-align:left; } #mentor-home-screen.mh2 .mhx-lg-pt { font-family:var(--font-go); font-weight:800; font-size:15px; color:#ffe39a; } /* 大会リザルトの評価ランク */ #mentor-home-screen.mh2 .mhx-tr-rank { font-family:var(--font-min); font-size:18px; color:#5a4520; margin:10px 0 6px; } #mentor-home-screen.mh2 .mhx-tr-rank b { font-size:26px; color:#8f2418; letter-spacing:.06em; } /* ===== 異能段位 獲得演出 ===== */ #mentor-home-screen.mh2 .mhx-dan { position:relative; text-align:center; padding:14px 8px 6px; overflow:hidden; } #mentor-home-screen.mh2 .mhx-dan-rays { position:absolute; left:50%; top:84px; width:520px; height:520px; transform:translate(-50%,-50%); pointer-events:none; z-index:0; background:repeating-conic-gradient(from 0deg, rgba(255,221,140,.22) 0deg 7deg, transparent 7deg 16deg); -webkit-mask:radial-gradient(circle, #000 0 38%, transparent 62%); mask:radial-gradient(circle, #000 0 38%, transparent 62%); animation:mhxDanSpin 14s linear infinite; } @keyframes mhxDanSpin { to { transform:translate(-50%,-50%) rotate(360deg); } } #mentor-home-screen.mh2 .mhx-dan-kicker { position:relative; z-index:1; font-family:var(--font-go); font-size:12px; letter-spacing:.34em; color:#c8a44d; margin-bottom:8px; } #mentor-home-screen.mh2 .mhx-dan-seal { position:relative; z-index:1; width:88px; height:88px; margin:2px auto 12px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#3a2400; background:radial-gradient(circle at 38% 32%, #ffe9a8, #d6a23a 70%, #b8862a); border:2px solid #fff2cf; box-shadow:0 0 22px rgba(214,162,58,.7), inset 0 2px 4px rgba(255,255,255,.6), inset 0 -3px 6px rgba(120,80,10,.4); animation:mhxDanPop .5s cubic-bezier(.2,1.5,.4,1) both; } #mentor-home-screen.mh2 .mhx-dan-seal-n { font-family:var(--font-min); font-size:40px; line-height:.9; font-weight:700; } #mentor-home-screen.mh2 .mhx-dan-seal-s { font-family:var(--font-min); font-size:13px; letter-spacing:.1em; opacity:.85; } @keyframes mhxDanPop { from { transform:scale(.3) rotate(-25deg); opacity:0; } } #mentor-home-screen.mh2 .mhx-dan-name { position:relative; z-index:1; font-family:var(--font-min); font-size:38px; letter-spacing:.12em; color:#8f2418; text-shadow:0 1px 0 #fff4dc, 0 0 14px rgba(214,162,58,.45); } #mentor-home-screen.mh2 .mhx-dan-read { position:relative; z-index:1; font-family:var(--font-go); font-size:13px; letter-spacing:.16em; color:#7a5d2e; margin-top:3px; } #mentor-home-screen.mh2 .mhx-dan-msg { position:relative; z-index:1; font-family:var(--font-min); font-size:14px; color:#5a4520; margin:12px 0 16px; } #mentor-home-screen.mh2 .mhx-dan.is-max .mhx-dan-name { font-size:42px; color:#a8202a; text-shadow:0 1px 0 #fff4dc, 0 0 20px rgba(214,162,58,.7); } #mentor-home-screen.mh2 .mhx-dan.is-max .mhx-dan-seal { box-shadow:0 0 34px rgba(214,162,58,.95), inset 0 2px 4px rgba(255,255,255,.6), inset 0 -3px 6px rgba(120,80,10,.4); } /* 段位チップ（ホームの師匠名札・弟子ステータスに表示） */ .mhx-dan-chip { display:inline-block; padding:1px 8px; border-radius:999px; font-family:var(--font-min); font-size:11px; font-weight:700; letter-spacing:.04em; line-height:1.5; white-space:nowrap; color:#3a2400; background:linear-gradient(135deg,#ffe39a,#d6a23a); border:1px solid #fff2cf; box-shadow:0 0 6px rgba(214,162,58,.45); } .mhx-dan-chip.is-none { color:#cfd6df; background:#444d57; border-color:#5a6472; box-shadow:none; } /* 大成功フラッシュ（訓練が大成功した瞬間の閃光＋文字） */ #mentor-home-screen.mh2 .mhx-daiseikou-fx { position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden; border-radius:16px; display:flex; align-items:center; justify-content:center; } #mentor-home-screen.mh2 .mhx-dk-burst { position:absolute; left:50%; top:46%; width:40px; height:40px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(255,243,200,.95) 0%, rgba(255,210,110,.7) 40%, rgba(255,180,80,0) 70%); animation:mhxDkBurst .55s cubic-bezier(.2,.7,.3,1) forwards; } #mentor-home-screen.mh2 .mhx-dk-rays { position:absolute; left:50%; top:46%; width:520px; height:520px; transform:translate(-50%,-50%) scale(.3); opacity:0; background:conic-gradient(from 0deg, rgba(255,220,130,.0) 0deg, rgba(255,220,130,.45) 8deg, rgba(255,220,130,0) 16deg, rgba(255,220,130,0) 30deg, rgba(255,220,130,.45) 38deg, rgba(255,220,130,0) 46deg, rgba(255,220,130,0) 60deg, rgba(255,220,130,.45) 68deg, rgba(255,220,130,0) 76deg, rgba(255,220,130,0) 90deg, rgba(255,220,130,.45) 98deg, rgba(255,220,130,0) 106deg); animation:mhxDkRays 1s ease-out forwards; } #mentor-home-screen.mh2 .mhx-dk-word { position:relative; font-family:var(--font-min); font-size:60px; font-weight:900; letter-spacing:.1em; color:#fff3cf; text-shadow:0 0 18px rgba(255,180,80,.9), 0 3px 8px rgba(120,50,10,.7); transform:scale(.4); opacity:0; animation:mhxDkWord 1.1s cubic-bezier(.2,1.4,.3,1) forwards; } @keyframes mhxDkBurst { 0%{transform:translate(-50%,-50%) scale(.2); opacity:1;} 100%{transform:translate(-50%,-50%) scale(9); opacity:0;} } @keyframes mhxDkRays { 0%{opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(0deg);} 25%{opacity:.85;} 100%{opacity:0; transform:translate(-50%,-50%) scale(1) rotate(40deg);} } @keyframes mhxDkWord { 0%{transform:scale(.4); opacity:0;} 35%{transform:scale(1.15); opacity:1;} 70%{transform:scale(1); opacity:1;} 100%{transform:scale(1); opacity:0;} } /* 今日の手応えサマリ */ #mentor-home-screen.mh2 .mhx-ds { text-align:center; padding:4px 2px 2px; } #mentor-home-screen.mh2 .mhx-ds-ttl { font-family:var(--font-min); font-size:22px; color:#3a2c14; letter-spacing:.08em; } #mentor-home-screen.mh2 .mhx-ds-ttl b { color:#8f2418; font-size:30px; font-weight:700; } #mentor-home-screen.mh2 .mhx-ds-sub { font-family:var(--font-go); font-size:12px; color:#6a5836; letter-spacing:.12em; margin:4px 0 12px; } #mentor-home-screen.mh2 .mhx-ds-log { list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:5px; } #mentor-home-screen.mh2 .mhx-ds-log li { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 12px; background:#16241d; border:1px solid #2a3f34; border-radius:8px; } #mentor-home-screen.mh2 .mhx-ds-act { font-family:var(--font-min); font-size:15px; color:#e8efe9; } /* 行動の成果タグ＝調子トーンの色ピルで一目で良し悪しが分かる（QA #5） */ #mentor-home-screen.mh2 .mhx-ds-tag { font-family:var(--font-go); font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; letter-spacing:.03em; color:#d9c9a3; } #mentor-home-screen.mh2 .mhx-ds-tag.tone-vbad { background:#5a3a3a; color:#ffc9c9; } #mentor-home-screen.mh2 .mhx-ds-tag.tone-bad { background:#6a4a3a; color:#ffd8b8; } #mentor-home-screen.mh2 .mhx-ds-tag.tone-ok { background:#3a4a4a; color:#cfe0dd; } #mentor-home-screen.mh2 .mhx-ds-tag.tone-good { background:linear-gradient(135deg,#5a9a3a,#3a7a2a); color:#eaffd9; } #mentor-home-screen.mh2 .mhx-ds-tag.tone-vgood { background:linear-gradient(135deg,#ffe39a,#d6a23a); color:#3a2400; box-shadow:0 0 7px rgba(214,162,58,.5); } /* 日の移り変わり：前日サマリ→今日の区切り（QA #9 統合モーダル） */ #mentor-home-screen.mh2 .mhx-dt { max-height:calc(var(--stage-h) * 0.82); overflow-y:auto; } #mentor-home-screen.mh2 .mhx-dt .mhx-ds { margin-bottom:4px; } #mentor-home-screen.mh2 .mhx-dt-sep { display:flex; align-items:center; gap:10px; margin:10px 0 14px; color:var(--ink-soft); opacity:.7; font-family:var(--font-min); font-size:12px; letter-spacing:.2em; } #mentor-home-screen.mh2 .mhx-dt-sep::before, #mentor-home-screen.mh2 .mhx-dt-sep::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(200,164,77,.45),transparent); } #mentor-home-screen.mh2 .mhx-dt .mhx-ds-ttl .mhx-ds-sub { margin-left:10px; } #mentor-home-screen.mh2 .mhx-ds-grid { display:flex; flex-direction:column; gap:7px; margin:0 0 16px; } #mentor-home-screen.mh2 .mhx-ds-cell { display:flex; align-items:center; gap:10px; justify-content:center; } #mentor-home-screen.mh2 .mhx-ds-k { font-family:var(--font-go); font-size:12px; color:#6a5836; min-width:78px; text-align:right; } #mentor-home-screen.mh2 .mhx-ds-v { font-family:var(--font-go); font-size:15px; font-weight:700; color:#2a2012; } #mentor-home-screen.mh2 .mhx-ds-v small { color:#6a5836; font-weight:400; } #mentor-home-screen.mh2 .mhx-ds-rk { display:inline-flex; align-items:center; gap:4px; } #mentor-home-screen.mh2 .mhx-ds-rk b { color:#2a2012; } #mentor-home-screen.mh2 .mhx-ds-rk .mhx-stat-rank { width:20px; height:20px; font-size:12px; } /* 休憩の2択コミュ（双方向） */ #mentor-home-screen.mh2 .mhx-rt { margin:4px 0 12px; } #mentor-home-screen.mh2 .mhx-rt-prompt { font-family:var(--font-min); font-size:16px; line-height:1.6; color:#2a2012; margin:0 0 10px; } #mentor-home-screen.mh2 .mhx-rt-choices { display:flex; gap:10px; } #mentor-home-screen.mh2 .mhx-rt-choice { flex:1; padding:10px 8px; cursor:pointer; border-radius:9px; font-family:var(--font-min); font-size:15px; color:#33260f; background:linear-gradient(180deg,#f3ead0,#e1d2a9); border:1.5px solid #c8a44d; box-shadow:0 3px 0 #9c7a34, 0 5px 9px rgba(0,0,0,.3); transition:transform .1s, box-shadow .1s, filter .1s; } #mentor-home-screen.mh2 .mhx-rt-choice:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 5px 0 #9c7a34,0 8px 14px rgba(0,0,0,.35); } #mentor-home-screen.mh2 .mhx-rt-choice:disabled { cursor:default; filter:grayscale(.5) brightness(.86); opacity:.7; box-shadow:0 2px 0 #9c7a34; } #mentor-home-screen.mh2 .mhx-rt-choice.is-picked { filter:none; opacity:1; border-color:var(--shu); box-shadow:0 2px 0 #9c7a34, 0 0 0 2px rgba(184,57,43,.4); } #mentor-home-screen.mh2 .mhx-rt-reply { font-family:var(--font-min); font-size:16px; line-height:1.6; color:#8f2418; margin:11px 0 0; } /* 章解禁通知・大会ストーリーゲートのモーダル（視聴する / あとで） */ #mentor-home-screen.mh2 .mhx-su-name { font-family:var(--font-min); font-size:20px; text-align:center; color:#8f2418; letter-spacing:.08em; margin:4px 0 2px; } #mentor-home-screen.mh2 .mhx-su-btns { display:flex; gap:10px; margin-top:16px; align-items:stretch; } #mentor-home-screen.mh2 .mhx-su-btns .mhx-md-btn { flex:1.4; width:auto; } #mentor-home-screen.mh2 .mhx-su-btns .mhx-rt-choice { flex:1; font-size:16px; } /* 訓練の調子バッジ（大成功/成功/無難/失敗） */ #mentor-home-screen.mh2 .mhx-md-badge { display:inline-block; padding:2px 10px; border-radius:999px; font-weight:800; font-size:13px; color:#fff; } #mentor-home-screen.mh2 .mhx-md-badge.tone-great { background:linear-gradient(135deg,#e0573a,#b5301a); box-shadow:0 0 10px rgba(224,87,58,.5); } #mentor-home-screen.mh2 .mhx-md-badge.tone-good { background:linear-gradient(135deg,#d6a23a,#a87a1e); } #mentor-home-screen.mh2 .mhx-md-badge.tone-ok { background:#7a8a6a; } #mentor-home-screen.mh2 .mhx-md-badge.tone-bad { background:#8a7560; } #mentor-home-screen.mh2 .mhx-md-btn { display:block; width:100%; padding:12px; border-radius:9px; cursor:pointer; font-family:var(--font-min); font-size:18px; letter-spacing:.1em; color:#fff; border:1px solid #f0c074; background:linear-gradient(180deg,#d95a44,#8f2418); box-shadow:0 4px 0 #6e1c12; transition:filter .12s, box-shadow .12s, transform .08s; } #mentor-home-screen.mh2 .mhx-md-btn:hover:not(:disabled) { filter:brightness(1.06); } #mentor-home-screen.mh2 .mhx-md-btn:active:not(:disabled) { transform:translateY(2px); box-shadow:0 2px 0 #6e1c12; } #mentor-home-screen.mh2 .mhx-md-btn:disabled { filter:grayscale(.4) brightness(.92); cursor:default; box-shadow:0 2px 0 #6e1c12; } /* ============================================================ オートバトル（§4.6 プロト）— すべて #autobattle-screen 配下に閉じ込め。 ============================================================ */ #autobattle-screen.ab { padding: 0; overflow: hidden; background: radial-gradient(80% 60% at 50% 0%, rgba(40,66,118,.35), transparent 60%), linear-gradient(180deg, #10172a, #0a0e18 60%, #07090f); color: #ece2c8; font-family: "Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif; } #autobattle-screen .ab-wrap { position:absolute; inset:0; display:flex; flex-direction:column; padding:22px 26px; gap:14px; } #autobattle-screen .ab-top { display:flex; align-items:center; justify-content:space-between; } #autobattle-screen .ab-top-l { font-size:18px; letter-spacing:.06em; color:#cdb88f; } #autobattle-screen .ab-round { color:#ecd592; font-size:22px; } #autobattle-screen .ab-top-l small { color:#9a8a66; font-size:13px; } #autobattle-screen .ab-top-r { font-size:14px; color:#cdb88f; display:flex; align-items:center; gap:8px; } #autobattle-screen .ab-tier { font-family:"Yu Gothic","Noto Sans JP",sans-serif; font-size:16px; font-weight:700; padding:3px 12px; border-radius:20px; letter-spacing:.06em; border:1px solid rgba(255,255,255,.2); } #autobattle-screen .ab-tier-up2 { background:linear-gradient(180deg,#ffe6a8,#d8b056); color:#3a2810; } #autobattle-screen .ab-tier-up1 { background:#3a6b3a; color:#eaffea; } #autobattle-screen .ab-tier-even { background:#3a4258; color:#dde3f0; } #autobattle-screen .ab-tier-dn1 { background:#6b4a2a; color:#ffe6c8; } #autobattle-screen .ab-tier-dn2 { background:#7a2c20; color:#ffdcd0; } #autobattle-screen .ab-tier-dn3 { background:#5a0f0a; color:#ffcaca; box-shadow:0 0 12px rgba(200,40,30,.6); } /* 卓エリア */ #autobattle-screen .ab-table-area { position:relative; flex:1; min-height:360px; } /* 麻雀卓（方形ラシャ＋木枠）。手牌・河・中央パネルの舞台。 */ #autobattle-screen .ab-table { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:460px; height:280px; border-radius:14px; background:radial-gradient(70% 80% at 50% 42%, #2a6b4e, #1d4d39 70%, #173c2d); border:8px solid #3a2410; box-shadow:0 18px 40px rgba(0,0,0,.55), inset 0 0 46px rgba(0,0,0,.45), 0 0 0 2px #1a0f06; } #autobattle-screen .ab-table::after { content:""; position:absolute; inset:6px; border-radius:8px; border:1px solid rgba(200,164,77,.22); pointer-events:none; } /* 中央の局情報パネル（全自動卓の中央表示風）＋意図チップ */ #autobattle-screen .ab-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:128px; padding:7px 8px 8px; border-radius:10px; text-align:center; background:linear-gradient(180deg,#10131c,#0a0c12); border:1.5px solid #5a4a2a; box-shadow:0 4px 14px rgba(0,0,0,.5), inset 0 0 12px rgba(0,0,0,.6); } #autobattle-screen .ab-center-round { font-size:17px; letter-spacing:.14em; color:#ecd592; } #autobattle-screen .ab-center-rc { font-family:"Yu Gothic","Noto Sans JP",sans-serif; font-size:10px; color:#9a8a66; letter-spacing:.18em; } #autobattle-screen .ab-center-intent { display:flex; justify-content:center; min-height:0; } /* 手牌: 相手3席=伏せ牌、自分=表向きフレーバー牌（中央は席アバターが手前に座る） */ #autobattle-screen .ab-hand { position:absolute; display:flex; gap:2px; z-index:1; } #autobattle-screen .ab-hand-top { top:6px; left:50%; transform:translateX(-50%); } #autobattle-screen .ab-hand-you { bottom:8px; left:50%; transform:translateX(-50%); } #autobattle-screen .ab-hand-left { left:8px; top:50%; transform:translateY(-50%); flex-direction:column; } #autobattle-screen .ab-hand-right { right:8px; top:50%; transform:translateY(-50%); flex-direction:column; } #autobattle-screen .ab-tback { width:18px; height:24px; border-radius:3px; background:linear-gradient(180deg,#f2ead6 0 30%, #b8742e 30%); border:1px solid rgba(0,0,0,.45); box-shadow:0 2px 3px rgba(0,0,0,.45); } #autobattle-screen .ab-tback-v { width:24px; height:13px; background:linear-gradient(90deg,#f2ead6 0 30%, #b8742e 30%); } #autobattle-screen .ab-htile { width:24px; height:32px; border-radius:3px; background:#f5efdd; border:1px solid rgba(0,0,0,.4); box-shadow:0 2px 4px rgba(0,0,0,.5); } /* 河（捨て牌ゾーン）: 局の進行で増え、次局頭で流れる */ #autobattle-screen .ab-river { position:absolute; display:flex; flex-wrap:wrap; gap:2px; z-index:1; pointer-events:none; } #autobattle-screen .ab-river-top { top:40px; left:50%; transform:translateX(-50%); width:170px; justify-content:center; } #autobattle-screen .ab-river-you { bottom:48px; left:50%; transform:translateX(-50%); width:170px; justify-content:center; } #autobattle-screen .ab-river-left { left:44px; top:50%; transform:translateY(-50%); width:38px; max-height:150px; } #autobattle-screen .ab-river-right { right:44px; top:50%; transform:translateY(-50%); width:38px; max-height:150px; justify-content:flex-end; } #autobattle-screen .ab-rtile { width:16px; height:21px; border-radius:2px; background:#f5efdd; border:1px solid rgba(0,0,0,.4); box-shadow:0 1px 2px rgba(0,0,0,.4); animation:abRtilePop .22s cubic-bezier(.2,1.4,.4,1); } @keyframes abRtilePop { 0%{transform:scale(.4); opacity:0;} 100%{transform:none; opacity:1;} } /* リーチ棒（千点棒）: 中央パネルの上にスッと置かれる。素材は縦 10×124 → 横倒しで置く。 */ #autobattle-screen .ab-rstick { position:absolute; left:50%; top:74px; width:10px; height:56px; transform:translate(-50%,-6px) rotate(90deg); opacity:0; transition:opacity .25s, transform .25s; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); background:#f4efe3; border:1px solid #c9c2ad; border-radius:5px; /* 素材レスの点棒（象牙色の棒） */ } #autobattle-screen .ab-rstick::after { /* 中央の赤丸（千点棒の標識） */ content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%; background:#d23b3b; transform:translate(-50%,-50%); } #autobattle-screen .ab-rstick.is-on { opacity:1; transform:translate(-50%,0) rotate(90deg); } /* 結果カードの倒牌（合成した和了手13枚＋和了牌がパタパタめくれる） */ #autobattle-screen .ab-r-tiles { display:flex; justify-content:center; gap:2px; min-height:30px; margin-top:4px; } #autobattle-screen .ab-rwtile { width:20px; height:27px; border-radius:3px; background:#f5efdd; border:1px solid rgba(0,0,0,.4); box-shadow:0 2px 4px rgba(0,0,0,.5); opacity:0; animation:abTileFlip .3s cubic-bezier(.2,1.3,.4,1) forwards; } /* 和了牌: 少し離して置き、金縁で「この牌でアガった」を示す */ #autobattle-screen .ab-rwtile-win { margin-left:7px; border-color:#ffd96e; box-shadow:0 0 8px rgba(255,210,110,.75), 0 2px 4px rgba(0,0,0,.5); } @keyframes abTileFlip { 0%{ transform:rotateY(90deg) scale(.8); opacity:0; } 100%{ transform:none; opacity:1; } } #autobattle-screen .ab-seat { position:absolute; width:96px; text-align:center; z-index:3; } #autobattle-screen .ab-s-top { top:0; left:50%; transform:translateX(-50%); } #autobattle-screen .ab-s-left { left:15%; top:46%; transform:translateY(-50%); } #autobattle-screen .ab-s-right { right:15%; top:46%; transform:translateY(-50%); } #autobattle-screen .ab-s-you { bottom:0; left:50%; transform:translateX(-50%); } #autobattle-screen .ab-seat-ic { width:66px; height:66px; border-radius:50%; margin:0 auto; overflow:hidden; border:2px solid #c8a44d; background:#1a2230; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.5); transition:border-color .2s, box-shadow .2s; } #autobattle-screen .ab-s-you .ab-seat-ic { width:74px; height:74px; border-color:#ecd592; } #autobattle-screen .ab-seat-img { width:100%; height:100%; object-fit:cover; object-position:center; } #autobattle-screen .ab-seat-img.is-mob { object-position:top center; filter:brightness(.92); } #autobattle-screen .ab-seat-ph { font-size:24px; color:#6f7da0; } #autobattle-screen .ab-seat-nm { font-size:12px; color:#cdb88f; margin-top:5px; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #autobattle-screen .ab-seat-bar { width:80px; height:8px; margin:5px auto 0; border-radius:5px; overflow:hidden; background:#170b08; border:1px solid #3a1410; box-shadow:inset 0 1px 2px rgba(0,0,0,.7); } #autobattle-screen .ab-seat-num { margin:3px auto 0; font-family:"Yu Gothic","Noto Sans JP",sans-serif; font-size:12px; font-weight:700; color:#d9c9a3; letter-spacing:.02em; } #autobattle-screen .ab-s-you .ab-seat-num { color:#ffcf6b; } #autobattle-screen .ab-seat-fill { height:100%; border-radius:5px; background:linear-gradient(180deg,#9fb0d6,#3a4258); transition:width .55s cubic-bezier(.22,.61,.36,1); } #autobattle-screen .ab-s-you .ab-seat-fill { background:linear-gradient(180deg,#ffcf6b,#d65a47 60%,#b8392b); box-shadow:0 0 8px rgba(214,90,71,.5); } #autobattle-screen .ab-seat.is-winner .ab-seat-ic { border-color:#ffe6a8; box-shadow:0 0 18px rgba(255,210,120,.85); } /* 局結果カード（中央・演出） */ #autobattle-screen .ab-result { position:absolute; left:50%; top:48%; transform:translate(-50%,-50%) scale(.9); width:368px; text-align:center; padding:16px 18px; z-index:6; background:rgba(10,12,20,.93); border:2px solid #c8a44d; border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.6); opacity:0; visibility:hidden; transition:opacity .2s, transform .2s, visibility .2s; } #autobattle-screen .ab-result.is-show { opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); } #autobattle-screen .ab-result-win { border-color:#9be29b; } #autobattle-screen .ab-result-lose { border-color:#ff8e7a; } #autobattle-screen .ab-r-who { font-size:14px; color:#cdb88f; letter-spacing:.06em; } #autobattle-screen .ab-r-yaku { font-size:24px; color:#ecd592; margin:5px 0; } #autobattle-screen .ab-r-han { font-family:"Yu Gothic","Noto Sans JP",sans-serif; font-size:16px; color:#f0e7d0; } #autobattle-screen .ab-r-han-big { font-size:34px; color:#ecd592; letter-spacing:.08em; margin:4px 0 2px; } #autobattle-screen .ab-r-pts { font-family:"Yu Gothic","Noto Sans JP",sans-serif; font-size:16px; color:#f0e7d0; } #autobattle-screen .ab-r-delta { font-family:"Yu Gothic","Noto Sans JP",sans-serif; font-size:26px; font-weight:800; margin-top:8px; } #autobattle-screen .ab-result-win .ab-r-delta { color:#9be29b; } #autobattle-screen .ab-result-lose .ab-r-delta { color:#ff8e7a; } /* 読み合いヒント（3段: 開示=金の確信／曖昧=外れることもある気配／無し） */ #autobattle-screen .ab-hint { text-align:center; font-size:17px; letter-spacing:.06em; min-height:24px; } #autobattle-screen .ab-hint-read { color:#cdb88f; } #autobattle-screen .ab-hint-read b { color:#ecd592; } #autobattle-screen .ab-hint-blind { color:#6f6450; font-style:italic; } #autobattle-screen .ab-hint-vague { color:#9a8a66; } #autobattle-screen .ab-hint-vague i { color:#bfae87; } /* 局の経過ビート（コマンド確定→結果カードの間の地の文） */ #autobattle-screen .ab-beat { position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); z-index:5; max-width:420px; padding:10px 22px; text-align:center; font-size:18px; letter-spacing:.1em; color:#e8dcbf; background:rgba(10,12,20,.82); border:1px solid #5a4a2a; border-radius:10px; text-shadow:0 2px 6px rgba(0,0,0,.8); opacity:0; visibility:hidden; transition:opacity .22s, visibility .22s; } #autobattle-screen .ab-beat.is-show { opacity:1; visibility:visible; } /* 結果カードのめくり演出（リーチ chip / 役名スラム / 翻カウント / 裏ドラ昇格 / 読みバッジ） */ #autobattle-screen .ab-r-riichi { display:inline-block; margin-left:8px; padding:1px 8px; vertical-align:1px; font-size:12px; font-weight:800; letter-spacing:.14em; color:#fff; background:linear-gradient(180deg,#c44, #8e2222); border:1px solid #ffb0a0; border-radius:8px; } #autobattle-screen .ab-r-yaku { min-height:32px; } #autobattle-screen .ab-r-yaku.is-slam { animation:abYakuSlam .28s cubic-bezier(.2,1.6,.4,1); } @keyframes abYakuSlam { 0%{transform:scale(2.2); opacity:0;} 100%{transform:scale(1); opacity:1;} } #autobattle-screen .ab-r-han-big { min-height:42px; } #autobattle-screen .ab-r-han-big.is-big { color:#ffd96e; text-shadow:0 0 14px rgba(255,200,90,.65); } #autobattle-screen .ab-r-ura { min-height:18px; font-size:14px; font-weight:800; letter-spacing:.1em; color:#ffd96e; } #autobattle-screen .ab-result.is-ura { animation:abUraFlash .55s ease; border-color:#ffd96e; } @keyframes abUraFlash { 0%,100%{ box-shadow:0 16px 40px rgba(0,0,0,.6); } 35%{ box-shadow:0 0 36px rgba(255,217,110,.95), 0 16px 40px rgba(0,0,0,.6); } } #autobattle-screen .ab-r-pts { min-height:20px; } #autobattle-screen .ab-r-delta { min-height:32px; } #autobattle-screen .ab-r-edge { display:inline-block; margin-left:8px; padding:2px 9px; vertical-align:3px; font-size:13px; font-weight:800; letter-spacing:.08em; border-radius:9px; animation:abYakuSlam .28s cubic-bezier(.2,1.6,.4,1); } #autobattle-screen .ab-edge-win { color:#2a1f08; background:linear-gradient(180deg,#ffe39a,#dfb55a); border:1px solid #fff0c0; } #autobattle-screen .ab-edge-miss { color:#e8d9d2; background:rgba(120,50,40,.8); border:1px solid #a06050; } /* 師匠の見守りパネル（雀荘に同行・相槌つき）。結果オーバーレイ(z60)中も相槌が見えるよう z65。 */ #autobattle-screen .ab-mentor { position:absolute; right:4px; top:2px; width:150px; z-index:65; text-align:center; } #autobattle-screen .ab-mentor-frame { width:128px; height:158px; margin:0 auto; overflow:hidden; border-radius:10px; background:linear-gradient(180deg,#241a10,#170f08); border:2px solid #8a6a32; box-shadow:0 6px 16px rgba(0,0,0,.55), inset 0 0 18px rgba(0,0,0,.5); display:flex; align-items:flex-start; justify-content:center; } #autobattle-screen .ab-mentor-img { width:100%; height:100%; object-fit:cover; object-position:top center; } #autobattle-screen .ab-mentor-ph { font-size:44px; color:#8a7a55; align-self:center; } #autobattle-screen .ab-mentor-nm { margin-top:4px; font-size:13px; color:#e0cfa3; letter-spacing:.08em; } #autobattle-screen .ab-mentor-nm small { display:block; font-size:10px; color:#9a8a66; letter-spacing:.2em; } #autobattle-screen .ab-mentor.is-talk .ab-mentor-frame { animation:abMentorBounce .4s ease; border-color:#ecd592; } @keyframes abMentorBounce { 0%,100%{transform:none;} 30%{transform:translateY(-5px);} 60%{transform:translateY(1px);} } #autobattle-screen .ab-mentor-bubble { position:absolute; top:100%; right:0; margin-top:8px; width:172px; z-index:65; padding:9px 11px; text-align:left; font-size:13px; line-height:1.55; color:#2a2418; background:linear-gradient(180deg,#f5ecd2,#e8d9b0); border:1.5px solid #8a6a32; border-radius:10px; box-shadow:0 8px 18px rgba(0,0,0,.5); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .18s, transform .18s, visibility .18s; } #autobattle-screen .ab-mentor-bubble::before { content:""; position:absolute; top:-7px; right:24px; border:7px solid transparent; border-bottom-color:#8a6a32; border-top:none; } #autobattle-screen .ab-mentor-bubble.is-show { opacity:1; visibility:visible; transform:none; } /* レア客（ネームドが卓に着く）: 席の★装飾＋登場帯 */ #autobattle-screen .ab-seat.is-rare .ab-seat-ic { border-color:#ffd96e; box-shadow:0 0 14px rgba(255,200,90,.6); } #autobattle-screen .ab-seat-rare { font-weight:800; text-shadow:0 1px 4px rgba(0,0,0,.8); } #autobattle-screen .ab-rare-banner { position:absolute; left:50%; top:34%; transform:translate(-50%,-50%) scale(.94); z-index:8; min-width:340px; max-width:520px; padding:12px 20px; background:linear-gradient(90deg, rgba(10,12,20,0), rgba(10,12,20,.94) 18%, rgba(10,12,20,.94) 82%, rgba(10,12,20,0)); border-top:1px solid #c8a44d; border-bottom:1px solid #c8a44d; opacity:0; transition:opacity .25s, transform .25s; } #autobattle-screen .ab-rare-banner.is-on { opacity:1; transform:translate(-50%,-50%) scale(1); } #autobattle-screen .ab-rare-banner.is-off { opacity:0; } #autobattle-screen .ab-rare-inner { display:flex; align-items:center; gap:14px; justify-content:center; } #autobattle-screen .ab-rare-ic { width:58px; height:58px; border-radius:50%; object-fit:cover; border:2px solid #ffd96e; box-shadow:0 0 14px rgba(255,200,90,.55); } #autobattle-screen .ab-rare-tx { display:flex; flex-direction:column; gap:2px; text-align:left; } #autobattle-screen .ab-rare-cap { font-size:12px; letter-spacing:.18em; color:#cdb88f; } #autobattle-screen .ab-rare-nm { font-size:22px; letter-spacing:.1em; text-shadow:0 2px 6px rgba(0,0,0,.8); } #autobattle-screen .ab-rare-line { font-family:"Yu Gothic","Noto Sans JP",sans-serif; font-size:13px; color:#e8dcbf; } #autobattle-screen .ab-res-rare { margin:4px 0 0; font-size:14px; color:#ffd96e; } #autobattle-screen .ab-res-rare-line { font-family:"Yu Gothic","Noto Sans JP",sans-serif; font-size:12px; color:#cdb88f; } /* ── 打撃感（軸A: 格ゲー流ジュース）── */ /* HP 残像バー: 本体(赤)の下で白いゴーストが遅れて縮む。transition は JS が制御。 */ #autobattle-screen .ab-bar-track { position:relative; } #autobattle-screen .ab-bar-ghost { position:absolute; left:0; top:0; bottom:0; border-radius:9px; background:rgba(255,236,210,.85); } #autobattle-screen .ab-bar-fill { position:relative; z-index:1; } /* 卓シェイク（被ダメ量で 2px / 6px 減衰） */ #autobattle-screen .ab-table-area.ab-shake-sm { animation:abShakeSm .32s linear; } #autobattle-screen .ab-table-area.ab-shake-lg { animation:abShakeLg .5s linear; } @keyframes abShakeSm { 0%,100%{transform:none;} 20%{transform:translate(2px,-1px);} 40%{transform:translate(-2px,1px);} 60%{transform:translate(1px,1px);} 80%{transform:translate(-1px,-1px);} } @keyframes abShakeLg { 0%,100%{transform:none;} 12%{transform:translate(6px,-3px);} 28%{transform:translate(-5px,3px);} 44%{transform:translate(4px,2px);} 60%{transform:translate(-3px,-2px);} 78%{transform:translate(2px,1px);} } /* ヒットストップの白フラッシュ（1 拍止めて重さを出す） */ #autobattle-screen .ab-freeze { position:absolute; inset:0; z-index:9; pointer-events:none; background:#fff; animation:abFreeze .26s ease-out forwards; } @keyframes abFreeze { 0%{opacity:.34;} 100%{opacity:0;} } /* カウンター演出（読み勝ち＝縁の金フラッシュ） */ #autobattle-screen .ab-counterflash { position:absolute; inset:0; z-index:9; pointer-events:none; border-radius:8px; box-shadow:inset 0 0 0 0 rgba(255,217,110,0); animation:abCounter .55s ease-out forwards; } @keyframes abCounter { 0%{ box-shadow:inset 0 0 42px 6px rgba(255,217,110,.85); } 100%{ box-shadow:inset 0 0 0 0 rgba(255,217,110,0); } } /* 結果カードのパンチ（満貫以上のラベルをドン） */ #autobattle-screen .ab-result.is-punch { animation:abPunch .22s cubic-bezier(.2,1.5,.4,1); } @keyframes abPunch { 0%{ transform:translate(-50%,-50%) scale(1.12); } 100%{ transform:translate(-50%,-50%) scale(1); } } /* 飛び/飛ばしの KO 演出（一文字ドン） */ #autobattle-screen .ab-ko { position:absolute; inset:0; z-index:50; pointer-events:none; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at center, rgba(0,0,0,.25), rgba(0,0,0,.78)); opacity:0; transition:opacity .15s; } #autobattle-screen .ab-ko.is-on { opacity:1; } #autobattle-screen .ab-ko.is-off { opacity:0; transition:opacity .3s; } #autobattle-screen .ab-ko-txt { font-size:170px; font-weight:800; letter-spacing:.04em; text-shadow:0 0 40px rgba(0,0,0,.9), 0 6px 18px rgba(0,0,0,.8); transform:scale(2.4); opacity:0; } #autobattle-screen .ab-ko.is-on .ab-ko-txt { animation:abKoSlam .42s cubic-bezier(.18,1.2,.3,1) forwards; } @keyframes abKoSlam { 0%{ transform:scale(2.4); opacity:0; } 55%{ transform:scale(.96); opacity:1; } 100%{ transform:scale(1); opacity:1; } } #autobattle-screen .ab-ko-lose .ab-ko-txt { color:#ff6a55; } #autobattle-screen .ab-ko-win .ab-ko-txt { color:#ffd96e; font-size:96px; } /* ── 意図チップ（軸B: 相手スタンスの可視化・卓中央パネルに埋め込み）── */ #autobattle-screen .ab-intent { position:relative; width:42px; height:42px; margin-top:5px; border-radius:50%; display:none; align-items:center; justify-content:center; background:rgba(10,12,20,.88); border:2px solid #5a4a2a; } #autobattle-screen .ab-intent.is-show { display:flex; animation:abIntentIn .22s cubic-bezier(.2,1.4,.4,1); } @keyframes abIntentIn { 0%{transform:scale(.5); opacity:0;} 100%{transform:none; opacity:1;} } #autobattle-screen .ab-intent-k { font-size:23px; line-height:1; text-shadow:0 2px 6px rgba(0,0,0,.8); } #autobattle-screen .ab-intent-sure { border-color:#ecd592; box-shadow:0 0 14px rgba(236,213,146,.45); } #autobattle-screen .ab-intent-vague { opacity:.62; border-style:dashed; } #autobattle-screen .ab-intent-vague.is-show { animation:abIntentIn .22s cubic-bezier(.2,1.4,.4,1), abIntentWobble 2.2s ease-in-out .25s infinite; } @keyframes abIntentWobble { 0%,100%{ transform:rotate(0deg); } 25%{ transform:rotate(-4deg); } 75%{ transform:rotate(4deg); } } #autobattle-screen .ab-intent-q { position:absolute; top:-8px; right:-6px; font-size:18px; font-weight:800; color:#bfae87; text-shadow:0 1px 4px rgba(0,0,0,.9); } #autobattle-screen .ab-intent-push .ab-intent-k { color:#ff8e7a; } #autobattle-screen .ab-intent-pull .ab-intent-k { color:#8fb8e8; } #autobattle-screen .ab-intent-watch .ab-intent-k { color:#a8c8a0; } #autobattle-screen .ab-intent-last .ab-intent-k { color:#ffd96e; } /* あなたの HP バー */ #autobattle-screen .ab-self-hp { display:flex; align-items:center; gap:12px; padding:4px 2px; } #autobattle-screen .ab-self-lab { width:170px; flex:none; font-size:14px; color:#cdb88f; letter-spacing:.04em; } #autobattle-screen .ab-bar-track { flex:1; height:18px; border-radius:10px; overflow:hidden; background:linear-gradient(180deg,#241410,#170b08); border:1px solid #3a1410; box-shadow:inset 0 1px 3px rgba(0,0,0,.7); } #autobattle-screen .ab-bar-fill { height:100%; border-radius:9px; transition:width .55s cubic-bezier(.22,.61,.36,1); } #autobattle-screen .ab-fill-self { background:linear-gradient(180deg,#ffcf6b,#d65a47 55%,#b8392b); box-shadow:0 0 10px rgba(214,90,71,.6); } #autobattle-screen .ab-self-num { width:160px; flex:none; text-align:right; font-family:"Yu Gothic","Noto Sans JP",sans-serif; font-size:16px; font-weight:700; color:#f0e7d0; } #autobattle-screen .ab-self-num small { color:#9a8a66; font-weight:400; font-size:12px; } #autobattle-screen .ab-self-hp.ab-flash-up { animation:abFlashUp .5s ease; } #autobattle-screen .ab-self-hp.ab-flash-dn { animation:abFlashDn .5s ease; } @keyframes abFlashUp { 0%,100%{filter:none;} 40%{filter:drop-shadow(0 0 10px rgba(155,226,155,.9));} } @keyframes abFlashDn { 0%,100%{filter:none;} 40%{filter:drop-shadow(0 0 10px rgba(255,142,122,.9));} } /* 点棒移動：払い手→勝者へ数字が飛ぶ簡易演出 */ #autobattle-screen .ab-fly { position:absolute; z-index:7; pointer-events:none; white-space:nowrap; font-family:"Yu Gothic","Noto Sans JP",sans-serif; font-weight:800; font-size:22px; text-shadow:0 2px 6px rgba(0,0,0,.85), 0 0 12px rgba(0,0,0,.6); transform:translate(-50%,-50%); animation:abFly 1s cubic-bezier(.4,.05,.5,1) forwards; } #autobattle-screen .ab-fly-gain { color:#ffe39a; } #autobattle-screen .ab-fly-lose { color:#ff8e7a; } #autobattle-screen .ab-fly-neutral { color:#bfc7da; font-size:18px; opacity:.92; } @keyframes abFly { 0% { opacity:0; transform:translate(-50%,-50%) scale(.55); } 18% { opacity:1; transform:translate(-50%,-50%) scale(1.18); } 78% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.85); } } #autobattle-screen .ab-cmds { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } #autobattle-screen .ab-cmd { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:16px 8px; cursor:pointer; border-radius:10px; color:#33260f; background:linear-gradient(180deg,#efe3c4,#ddc795); border:1.5px solid #8a6a32; box-shadow:0 4px 0 #7c5a28, 0 6px 12px rgba(0,0,0,.45); transition:transform .1s, box-shadow .1s, filter .1s; } #autobattle-screen .ab-cmd:hover { transform:translateY(-3px); filter:brightness(1.05); box-shadow:0 7px 0 #7c5a28,0 12px 18px rgba(0,0,0,.5); } #autobattle-screen .ab-cmd:active { transform:translateY(0); box-shadow:0 2px 0 #7c5a28; } #autobattle-screen .ab-cmd-l { font-size:22px; letter-spacing:.06em; } #autobattle-screen .ab-cmd-s { font-family:"Yu Gothic","Noto Sans JP",sans-serif; font-size:11px; color:#7a5d2e; } #autobattle-screen .ab-quit { position:absolute; left:18px; bottom:14px; } /* 能力発動ボタン（4枠目・必殺）。残り回数を ×N で表示。 */ #autobattle-screen .ab-cmd-ability { color:#ffe7c0; background:linear-gradient(180deg,#7a2438,#591726); border-color:#d98a52; box-shadow:0 4px 0 #3d0f1a, 0 6px 14px rgba(0,0,0,.5), inset 0 0 16px rgba(255,180,120,.25); } #autobattle-screen .ab-cmd-ability:hover { box-shadow:0 7px 0 #3d0f1a,0 12px 20px rgba(0,0,0,.55), inset 0 0 22px rgba(255,190,130,.35); } #autobattle-screen .ab-cmd-ability:active { box-shadow:0 2px 0 #3d0f1a, inset 0 0 16px rgba(255,180,120,.3); } #autobattle-screen .ab-cmd-ability .ab-cmd-s { color:#f0c79a; } #autobattle-screen .ab-cmd-uses { font-weight:800; color:#ffe39a; } #autobattle-screen .ab-cmd-ability.is-empty { filter:grayscale(.7) brightness(.7); } #autobattle-screen .ab-cmd:disabled { cursor:default; filter:saturate(.6) brightness(.82); transform:none; } #autobattle-screen .ab-cmd-ability.is-empty .ab-cmd-uses { color:#caa; } /* 影響を受けなかった局（他家への放銃など）の結果カード色 */ #autobattle-screen .ab-result-safe { border-color:#bfc7da; } #autobattle-screen .ab-result-safe .ab-r-delta { color:#bfc7da; font-size:20px; } /* 能力発動カットイン */ #autobattle-screen .ab-cutin { position:absolute; inset:0; z-index:70; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .15s; } #autobattle-screen .ab-cutin.is-on { opacity:1; } #autobattle-screen .ab-cutin.is-off { opacity:0; transition:opacity .3s ease .0s; } #autobattle-screen .ab-cutin-band { position:absolute; left:0; right:0; top:0; bottom:0; background:linear-gradient(115deg, rgba(8,6,10,.0) 0%, rgba(20,8,14,.82) 35%, rgba(60,16,30,.9) 50%, rgba(20,8,14,.82) 65%, rgba(8,6,10,.0) 100%); transform:translateX(-30%) skewX(-8deg); animation:abCutBand 1.3s cubic-bezier(.2,.7,.2,1) forwards; } #autobattle-screen .ab-cutin-img { position:absolute; right:6%; bottom:0; height:104%; max-width:52%; object-fit:contain; object-position:bottom; filter:drop-shadow(0 0 24px rgba(255,170,110,.55)); transform:translateX(60%) scale(1.02); animation:abCutImg 1.3s cubic-bezier(.18,.8,.2,1) forwards; } #autobattle-screen .ab-cutin-txt { position:absolute; left:7%; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:6px; text-shadow:0 3px 10px rgba(0,0,0,.85); animation:abCutTxt 1.3s cubic-bezier(.18,.8,.2,1) forwards; } #autobattle-screen .ab-cutin-who { font-size:18px; letter-spacing:.18em; color:#ffd9a0; } #autobattle-screen .ab-cutin-skill { font-size:46px; font-weight:800; letter-spacing:.06em; color:#fff1d6; } @keyframes abCutBand { 0%{transform:translateX(-60%) skewX(-8deg);} 60%{transform:translateX(0%) skewX(-8deg);} 100%{transform:translateX(40%) skewX(-8deg);} } @keyframes abCutImg { 0%{transform:translateX(60%) scale(1.02); opacity:0;} 30%{opacity:1;} 70%{transform:translateX(0%) scale(1);} 100%{transform:translateX(-6%) scale(1); opacity:1;} } @keyframes abCutTxt { 0%{transform:translateY(-50%) translateX(-40px); opacity:0;} 35%{opacity:1; transform:translateY(-50%) translateX(0);} 100%{opacity:1; transform:translateY(-50%) translateX(0);} } #autobattle-screen .ab-overlay { position:absolute; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; background:rgba(6,8,12,.7); opacity:0; transition:opacity .2s; } #autobattle-screen .ab-overlay.is-open { opacity:1; } #autobattle-screen .ab-res-card { width:520px; max-width:86%; padding:28px; text-align:center; border-radius:16px; background:linear-gradient(180deg,#f3ead0,#e1d2a9); color:#241c12; border:2px solid #c8a44d; box-shadow:0 26px 64px rgba(0,0,0,.6); } #autobattle-screen .ab-res-ttl { font-size:20px; letter-spacing:.1em; color:#5a4520; } #autobattle-screen .ab-res-down { color:#8f2418; font-size:34px; } #autobattle-screen .ab-res-place { font-size:56px; font-weight:800; margin:6px 0; } #autobattle-screen .ab-place-1 { color:#c8a44d; } #autobattle-screen .ab-place-2 { color:#6b7a4a; } #autobattle-screen .ab-place-3 { color:#7a684a; } #autobattle-screen .ab-place-4 { color:#8f5a40; } #autobattle-screen .ab-res-sub { font-family:"Yu Gothic","Noto Sans JP",sans-serif; font-size:14px; color:#5a4a2c; margin:4px 0 16px; } #autobattle-screen .ab-res-row { display:flex; gap:12px; justify-content:center; } #autobattle-screen .ab-res-btn { min-width:150px; } #autobattle-screen .ab-res-note { font-family:"Yu Gothic","Noto Sans JP",sans-serif; font-size:11px; color:#8a7550; margin:12px 0 0; } /* shared card (rest) */ .mentor-card { width: 100%; display: flex; flex-direction: column; gap: 14px; background: #1c2c24; border: 2px solid #2a3f34; border-radius: 16px; padding: 18px 20px; } .mentor-card-bubble { margin: 0; } .rest-hp { display: flex; align-items: center; gap: 12px; } .rest-hp-label { width: 72px; font-size: 13px; color: var(--muted); flex: none; } .rest-result { font-size: 14px; color: var(--accent); margin: 0; font-weight: 700; } .mentor-card .primary { align-self: flex-start; min-width: 180px; } /* growth */ .growth-err { margin: 0; } .growth-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; } .growth-card { display: flex; flex-direction: column; gap: 8px; background: #1c2c24; border: 2px solid #2a3f34; border-radius: 14px; padding: 14px 16px; } .growth-card-title { font-size: 16px; font-weight: 800; } .growth-card-now { font-size: 14px; } .growth-card-next { font-size: 13px; color: var(--muted); line-height: 1.5; flex: 1; } .growth-card-max { font-size: 13px; color: var(--accent); flex: 1; } .growth-buy { align-self: flex-start; } .growth-buy:disabled { opacity: .45; cursor: default; } /* scenario list (Phase 3) */ .sclist { display: flex; flex-direction: column; gap: 8px; width: 100%; max-height: 470px; overflow-y: auto; padding-right: 4px; } .sclist-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 10px 14px; background: #1c2c24; border: 2px solid #2a3f34; border-radius: 12px; cursor: pointer; } .sclist-row:hover:not(:disabled) { border-color: var(--accent); } .sclist-row:disabled { opacity: .5; cursor: default; } /* 覇道編（後編）= 青枠で前後編を見分ける */ .sclist-row.is-kouhen { background: #19243a; border-color: #34507a; } .sclist-row.is-kouhen:hover:not(:disabled) { border-color: #5b86c4; } .sclist-row.is-kouhen .sclist-sub { color: #7fa8da; } .sclist-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sclist-title { font-size: 15px; font-weight: 800; } .sclist-sub { font-size: 11px; color: var(--muted); } .sclist-status { font-size: 12px; font-weight: 700; flex: none; white-space: nowrap; text-align: right; } .sclist-status.is-new { color: var(--accent); } .sclist-status.is-read { color: var(--muted); } .sclist-status.is-lock { color: #d6b07a; font-weight: 600; font-size: 11px; max-width: 320px; white-space: normal; } .sclist-flash { font-size: 13px; color: var(--accent); font-weight: 700; margin: 0; min-height: 18px; } .sclist-empty { font-size: 14px; color: var(--muted); } .sclist-debug { font-size: 12px; font-weight: 800; color: #e0a44b; margin: 0; letter-spacing: .03em; } /* scenario emote (感情アイコン・スプライトシート) — scenarioPlayer が JS でフレーム送り */ .sc-emote-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; } .sc-emote { position: absolute; top: 7%; transform: translateX(-50%); background-repeat: no-repeat; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); } /* ability change */ .ac-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; width: 100%; } .ac-current { font-size: 13px; color: var(--muted); } .ac-warn { font-size: 13px; color: var(--danger); margin: 0; } .ac-err { margin: 0; } .ac-err.ac-ok { color: var(--accent); } .ac-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; } .ac-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; } .ac-cost { font-size: 12px; color: var(--muted); margin-top: 4px; } .ac-cost-short { color: var(--danger); } .ac-footer { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 4px; } .ac-footer .primary { margin-left: auto; min-width: 240px; } .av-detail-soon { display: flex; gap: 8px; margin-top: 8px; } .av-detail-soon .menu-btn { flex: 1; padding: 9px 12px; } /* ---- select screen ---- */ #select-screen { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; } .select-head { position: relative; } .select-head { text-align: center; margin-bottom: 18px; } /* ---- select wizard (①卓 → ②キャラ → ③ルール＆開始) ---- */ /* 進捗インジケーター（ヘッダー内、タイトル下の中央寄せ）。 */ .wiz-steps { list-style: none; display: inline-flex; gap: 8px; margin: 8px 0 0; padding: 0; } .wiz-step { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--muted); padding: 4px 14px; border-radius: 999px; border: 1px solid #2a3f34; transition: .14s; } .wiz-step:hover { color: var(--ink); } .wiz-step .wiz-step-no { font-weight: 800; opacity: .8; } .wiz-step.active { color: #20140a; background: var(--accent); border-color: var(--accent); } .wiz-step.done { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, #2a3f34); } /* 右上のシナリオ（サンプル）導線。本流から外して小さく。 */ .select-scenario { position: absolute; top: 0; right: 0; font-size: 12px; padding: 6px 12px; background: transparent; color: var(--muted); border: 1px solid rgba(246,179,82,.4); border-radius: 8px; cursor: pointer; transition: .12s; } .select-scenario:hover { color: var(--ink); border-color: var(--accent); } /* 本体: 残り高さを占有し、現在のステップだけ表示。 */ .wiz-body { flex: 1; min-height: 0; display: flex; flex-direction: column; } .wiz-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; } .wiz-pane.hidden { display: none; } /* ①形式・②卓・④ルールは内容が少ないので、要素を大きめにして縦いっぱいに広げる（小ぢ んまり防止）。space-evenly で見出し/選択/プレビューを画面全体へ均等配置。③キャラは上詰め。 */ .wiz-pane[data-pane="1"], .wiz-pane[data-pane="2"], .wiz-pane[data-pane="4"] { align-items: center; justify-content: space-evenly; gap: 16px; text-align: center; padding: 8px 0 4px; } .wiz-title { font-size: 30px; font-weight: 800; margin: 0; color: var(--ink); letter-spacing: .04em; } /* ① 形式: 3つのワイドボタンを縦に積んで画面幅をしっかり使う。 */ .battle-mode-grid { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 820px; } .battle-mode-grid .mode-btn.battle-card { display: flex; align-items: center; gap: 26px; text-align: left; width: 100%; padding: 24px 36px; border: 2px solid #2a3f34; border-radius: 18px; background: #1c2c24; color: var(--ink); } .battle-mode-grid .mode-btn.battle-card:hover { border-color: var(--accent); transform: translateY(-2px); } .battle-mode-grid .mode-btn.battle-card.selected { background: #1c2c24; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent); } /* クイックスタート（pane①下部）。細かい設定を飛ばして即対局＝FTUEの摩擦軽減。 */ .wiz-quickstart { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; max-width: 820px; margin-top: 18px; padding: 13px 24px; font-size: 19px; font-weight: 800; letter-spacing: .03em; cursor: pointer; color: #20140a; background: var(--accent, #f6b352); border: 2px solid #0003; border-radius: 14px; box-shadow: 0 6px 18px #0006; } .wiz-quickstart small { font-size: 12px; font-weight: 700; opacity: .8; letter-spacing: 0; } .wiz-quickstart:hover { filter: brightness(1.07); transform: translateY(-1px); } .battle-card-icon { font-size: 46px; line-height: 1; flex: none; width: 56px; text-align: center; } .battle-card-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .battle-card-title { font-size: 28px; font-weight: 800; line-height: 1; color: var(--ink); } .battle-card.selected .battle-card-title { color: var(--accent); } .battle-card-sub { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: .02em; } /* ② 卓: 形式ごとの設定ブロック。表示中の1つが縦いっぱいに均等配置される。 */ .wiz-pane[data-pane="2"] .table-opts { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 16px; text-align: center; } .table-opts.hidden { display: none; } /* 大型の選択カード（4人/3人・東風/半荘）。サブラベルで内容を補足。 */ .wiz-players, .wiz-rounds { gap: 36px; } .wiz-players .mode-btn, .wiz-rounds .mode-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 280px; min-height: 132px; padding: 24px 44px; } .choice-main { font-size: 36px; font-weight: 800; line-height: 1; } .choice-sub { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: .02em; } .mode-btn.selected .choice-sub { color: color-mix(in srgb, var(--accent) 70%, var(--ink)); } .wiz-note { color: var(--muted); font-size: 13px; margin: 0; line-height: 1.7; max-width: 640px; } .wiz-note b { color: var(--accent); } /* ①卓の席プレビュー（表示専用チップ）。ラベル付きの帯として大きく見せる。 */ .seat-preview-block { display: flex; flex-direction: column; align-items: center; gap: 12px; } .seat-preview-label, .wiz-summary-label { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--accent); opacity: .9; } .seat-preview { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .seat-preview .seat-chip { min-width: 184px; padding: 12px 16px; gap: 10px; } .seat-preview .seat-icon { width: 42px; height: 42px; } .seat-preview .seat-role { font-size: 12px; } .seat-preview .seat-pick, .seat-preview .seat-name { font-size: 16px; } .seat-chip.static { cursor: default; } .seat-chip.static:hover { border-color: #2a3f34; } /* ③の確認リスト。広い卓帳のように大きく（ただし下部ナビと干渉しない高さに収める）。 */ .wiz-summary-block { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; } .wiz-summary { display: flex; flex-direction: column; gap: 6px; min-width: 520px; max-width: 620px; background: rgba(20,32,26,.6); border: 1px solid #2a3f34; border-radius: 14px; padding: 16px 32px; } .sum-line { display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 16px; } .sum-line + .sum-line { border-top: 1px solid rgba(255,255,255,.06); padding-top: 6px; } .sum-k { color: var(--muted); font-weight: 700; } .sum-v { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; } .sum-v.sum-random { color: var(--muted); font-weight: 600; } .sum-icon { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid #2a3f34; } /* 下部ナビ（戻る/次へ/開始）。 */ .wiz-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; } .wiz-nav .primary, .wiz-nav .secondary { margin-top: 0; } .wiz-nav .hidden { display: none; } #select-screen h1 { font-size: 40px; margin: 8px 0; letter-spacing: .02em; } #select-screen h1 small { color: var(--accent); font-size: 18px; } .lead { color: var(--muted); margin: 0; } .select-layout { display: grid; grid-template-columns: 1fr 380px; gap: 22px; align-items: start; } /* roster: role-grouped sections, each a labeled header + a grid of horizontal icon+name tiles. Cards are kept short (wide, not tall) so the whole roster fits the fixed 720px-tall stage without scrolling. */ .char-list { display: flex; flex-direction: column; gap: 14px; } .role-group { --role: var(--accent); } .role-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .role-name { font-size: 15px; font-weight: 800; letter-spacing: .04em; color: var(--role); text-shadow: 0 1px 2px rgba(0,0,0,.4); white-space: nowrap; } .role-line { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(to right, var(--role), transparent); opacity: .6; } .role-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .char-card { --role: var(--accent); display: flex; align-items: center; gap: 11px; background: #1c2c24; border: 2px solid color-mix(in srgb, var(--role) 45%, #2a3f34); border-radius: 12px; padding: 8px 12px; cursor: pointer; transition: .14s ease; text-align: left; } .char-card:hover { border-color: var(--role); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.35); } .char-card.selected { border-color: var(--role); box-shadow: 0 0 0 3px color-mix(in srgb, var(--role) 35%, transparent); } .char-card .char-icon { display: block; width: 50px; height: 50px; margin: 0; flex-shrink: 0; border-radius: 50%; object-fit: cover; border: 2px solid color-mix(in srgb, var(--role) 45%, #2a3f34); } .char-card:hover .char-icon, .char-card.selected .char-icon { border-color: var(--role); } .char-card .char-icon-fallback { opacity: .55; } .card-name { font-size: 14px; font-weight: 700; line-height: 1.2; min-width: 0; } /* detail panel */ .char-detail { background: linear-gradient(160deg, #20322a, #16241d); border: 2px solid #2a3f34; border-radius: 18px; position: relative; /* containing block for the absolute portrait-wrap, so overflow:hidden below clips the portrait to this panel */ height: 452px; /* fixed so the whole select screen fits the 720px stage; long bios scroll inside .detail-body rather than growing the panel */ overflow: hidden; /* clips the portrait so it reveals from the right edge */ } .char-detail.empty { display: flex; align-items: center; justify-content: center; padding: 18px; } .detail-prompt { color: var(--muted); text-align: center; line-height: 1.8; font-size: 14px; } /* portrait: anchored to the right, full-height, fully visible (contain = no crop), sliding in from the right edge each time the detail changes. */ .detail-portrait-wrap { position: absolute; top: 0; right: 0; bottom: 0; width: 54%; display: flex; align-items: flex-end; justify-content: flex-end; pointer-events: none; z-index: 1; } .detail-portrait { width: 100%; height: 100%; /* cover = every character fills the same box for a uniform size; top-center anchoring keeps faces in frame (only legs / outer edges are trimmed). */ object-fit: cover; object-position: top center; /* fade the inner (left) edge so the portrait blends into the info area */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%); mask-image: linear-gradient(to right, transparent 0, #000 24%); animation: portraitIn .42s cubic-bezier(.22,.61,.36,1) both; } .detail-portrait-fallback { width: 80%; height: 88%; border-radius: 16px 0 0 0; opacity: .55; } @keyframes portraitIn { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: translateX(0); } } /* info: fills the fixed-height panel, layered above the portrait. Content is bottom-aligned when it's shorter than the panel (margin-top:auto on the first child) and scrolls from the top when it's taller. */ .detail-body { /* full width so the scrollbar sits at the panel's right edge (not over the portrait); the text is kept in the left column by a large right padding. */ position: relative; z-index: 2; width: 100%; height: 100%; padding: 16px 16px 16px 16px; padding-right: 38%; display: flex; flex-direction: column; gap: 5px; overflow-y: auto; text-shadow: 0 1px 4px rgba(0,0,0,.7); } .detail-body > :first-child { margin-top: auto; } .detail-reading { font-size: 12px; color: var(--muted); letter-spacing: .06em; } /* name doubles as the trigger for the flavor (bio + profile) popover */ .detail-name-wrap { position: relative; align-self: flex-start; max-width: 100%; cursor: help; margin: 1px 0 4px; } .detail-name { font-size: 28px; font-weight: 800; line-height: 1.15; border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent); } .detail-flavor { position: absolute; top: 100%; left: 0; z-index: 6; width: 300px; margin-top: 5px; background: #0e1813f7; border: 1px solid #2f4a3b; border-radius: 8px; padding: 10px 12px; text-shadow: none; box-shadow: 0 10px 24px #000b; opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none; transition: opacity .16s ease, transform .16s ease, visibility .16s; } .detail-name-wrap:hover .detail-flavor { opacity: 1; visibility: visible; transform: translateY(0); } .detail-role { display: inline-block; margin: 0 0 7px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .05em; color: var(--role); border: 1px solid color-mix(in srgb, var(--role) 60%, transparent); background: color-mix(in srgb, var(--role) 16%, transparent); } /* bio + profile now live inside the .detail-flavor popover */ .detail-bio { font-size: 13px; color: var(--ink); line-height: 1.5; } /* gauges */ .detail-gauges { margin: 10px 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: center; } .gauge { display: contents; --pip-on: var(--accent); } .g-label { font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; } .g-pips { display: inline-flex; gap: 4px; position: relative; justify-self: start; } .pip { width: 22px; height: 9px; border-radius: 3px; background: #2c4034; transition: .1s; } .pip.on { background: var(--pip-on); box-shadow: 0 0 6px color-mix(in srgb, var(--pip-on) 60%, transparent); } /* HP number drawn on top of its gauge (no separate row) */ .g-overlay { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font-size: 11.5px; font-weight: 800; color: #fff; pointer-events: none; text-shadow: 0 1px 2px #000, 0 0 3px #000; } .detail-profile { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 8px; } /* ability: the key gameplay info — shown expanded (name + description) where the flavor text used to sit. */ .detail-ability { background: #142019; border-radius: 10px; padding: 9px 12px; border: 1px solid #25382d; } .detail-ability-head { font-size: 11px; color: var(--accent); font-weight: 700; letter-spacing: .08em; margin-bottom: 4px; } .ability-item + .ability-item { margin-top: 6px; } .detail-ability-name { font-size: 15px; font-weight: 700; color: var(--ink); } .detail-ability-desc { font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 2px; } /* footer: mode toggle + start */ .select-footer { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 24px; flex-wrap: wrap; } .select-footer .primary { margin-top: 0; } .mode-select { display: flex; align-items: center; gap: 14px; } .mode-label { color: var(--muted); font-size: 15px; } .mode-toggle { display: inline-flex; border: 2px solid #2a3f34; border-radius: 10px; overflow: hidden; } .mode-btn { background: #1c2c24; color: var(--muted); border: none; cursor: pointer; font-size: 15px; font-weight: 700; padding: 10px 22px; transition: .12s; } .mode-btn + .mode-btn { border-left: 2px solid #2a3f34; } .mode-btn:hover { color: var(--ink); } .mode-btn.selected { background: var(--accent); color: #20140a; } /* 席バー: あなた + CPU席を横並びに。フッター内で1行を占有（flex-wrap で他要素の上）。 未指名のCPU席は「おまかせ」、アクティブ席はアクセント枠で示す。 */ .seat-bar { flex-basis: 100%; display: flex; align-items: stretch; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .seat-chip { display: inline-flex; align-items: center; gap: 8px; background: #1c2c24; color: var(--ink); cursor: pointer; border: 2px solid #2a3f34; border-radius: 12px; padding: 6px 12px 6px 8px; min-width: 150px; transition: .12s; text-align: left; } .seat-chip:hover { border-color: var(--accent); } .seat-chip.active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent); } .seat-role { font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--accent); white-space: nowrap; padding: 2px 6px; border-radius: 6px; background: rgba(246,179,82,.12); } .seat-pick { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; } .seat-pick.empty { color: var(--accent); } .seat-pick.random { color: var(--muted); font-weight: 600; } .seat-icon { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid #2a3f34; } .seat-name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seat-reset { margin-left: 4px; cursor: pointer; font-size: 13px; opacity: .65; line-height: 1; padding: 2px 4px; border-radius: 6px; } .seat-reset:hover { opacity: 1; background: rgba(255,255,255,.08); } .seat-allrandom { background: transparent; color: var(--muted); border: 1px dashed rgba(246,179,82,.5); border-radius: 10px; padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; transition: .12s; } .seat-allrandom:hover { color: var(--ink); border-color: var(--accent); } /* roster card 席バッジ（"あなた"/①②③）。割り当て済みカードの右端に小さく表示。 */ .card-seat-badge { margin-left: auto; flex-shrink: 0; font-size: 12px; font-weight: 800; color: #20140a; background: var(--accent); border-radius: 8px; padding: 2px 7px; white-space: nowrap; } .card-seat-badge.hidden { display: none; } /* 未解禁キャラのカード（宝珠ショップで解禁前）。グレーアウト＋鍵で「選べない」を示す。 */ .char-card.locked { opacity: .5; filter: grayscale(.7); cursor: not-allowed; } .char-card.locked:hover { transform: none; border-color: color-mix(in srgb, var(--role) 45%, #2a3f34); box-shadow: none; } .card-lock { margin-left: auto; flex-shrink: 0; font-size: 18px; line-height: 1; filter: none; } .card-lock.hidden { display: none; } /* 詳細パネルの解禁案内（未解禁キャラ選択時）。 */ .detail-lock-note { margin: 0 0 8px; padding: 6px 10px; border-radius: 9px; background: #3a2f1c; border: 1px solid #f6b35255; color: #f6d59a; font-size: 12.5px; font-weight: 700; text-align: center; } .detail-lock-note b { color: #ffe39a; } button.primary { margin-top: 20px; background: var(--accent); color: #20140a; border: none; font-size: 18px; font-weight: 700; padding: 12px 28px; border-radius: 10px; cursor: pointer; } button.primary:disabled { opacity: .4; cursor: default; } button.secondary { background: transparent; color: var(--ink); border: 1px solid rgba(246,179,82,.55); padding: 12px 22px; border-radius: 10px; font-size: 16px; cursor: pointer; } button.secondary:hover { background: rgba(246,179,82,.12); } /* ---- game screen ---- */ #game-screen { display: flex; gap: 16px; height: 100%; padding: 12px; } .table-wrap { position: relative; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; } #table { /* fit inside table-wrap on BOTH axes (auto size + dual max) so the 4:3 board never overflows on short landscape phone screens. min() keeps the 960 cap. */ width: auto; height: auto; max-width: min(960px, 100%); max-height: 100%; background: var(--felt); border: 10px solid var(--felt-edge); border-radius: 18px; } .action-bar { /* jantama-style: lower-right, right-aligned, sitting just above the hand. 手牌を1.5倍に拡大したぶん下~86px(scale≤1)を占有するので、被らないよう bottom を上げる。 */ position: absolute; bottom: 112px; right: 20px; left: auto; transform: none; display: flex; gap: 10px; flex-wrap: wrap-reverse; justify-content: flex-end; align-items: flex-end; max-width: 66%; } .action-bar button { font-size: 16px; font-weight: 700; padding: 10px 18px; border-radius: 10px; border: 2px solid #0003; cursor: pointer; color: #1a120a; } .btn-tsumo, .btn-ron { background: var(--accent); } .btn-riichi { background: #f0d264; } .btn-pon, .btn-chi, .btn-kan { background: #79c0ff; } .btn-skip { background: #b9c6bf; } .btn-ability { background: #c9a0ff; } .action-bar button:disabled { opacity: .4; cursor: default; } /* ability state chips (発動中 / 常時発動 / 残り回数) */ .ability-chip { align-self: center; padding: 8px 12px; border-radius: 9px; font-size: 13px; font-weight: 700; color: #e8d9ff; background: #3a2b55; border: 2px solid #ffffff14; } .ability-chip.active { background: #6b4caa; color: #fff; border-color: #c9a0ff; } .ability-chip.passive { background: #233b30; color: #bfe0cf; } /* 常時(パッシブ)能力インジケータ: 「常時」バッジ＋能力名＋（あれば）メーター。 能力パネルのチップと、自分立ち絵の常設バッジ(.self-ability)で共用する。 */ .passive-ind { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; } .passive-tag { flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: #20140a; } .passive-name { font-weight: 700; } /* 残数メーター（盾の ●○）。armed=黄で点灯／broken=赤で「破れ」を示す。 */ .ability-meter { font-size: 13px; font-weight: 800; letter-spacing: 1px; color: #ffd98a; white-space: nowrap; } .ability-meter.armed { color: #ffd98a; } .ability-meter.broken { color: #ff9a9a; } /* 団体戦・ペア戦ボードの自ブロックに出す常設バッジ（コンパクト版）。空なら畳む。 */ .tb-passives { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 1px; } .tb-passives:empty { display: none; } .tb-passive { display: inline-flex; align-items: center; gap: 5px; background: #0b1410cc; border: 1px solid color-mix(in srgb, var(--accent) 28%, #2f4a3b); border-radius: 8px; padding: 2px 7px; font-size: 11px; color: #eef3ef; } .tb-passive .passive-tag { font-size: 10px; padding: 1px 6px; } .tb-passive .ability-meter { font-size: 12px; } /* 鳴きなし toggle (top-left of the table) */ .nonaki-btn { position: absolute; top: 14px; left: 14px; z-index: 20; border: 2px solid #ffffff22; background: #1a2c23cc; color: #cfe0d6; font-size: 14px; font-weight: 700; padding: 9px 14px; border-radius: 10px; cursor: pointer; backdrop-filter: blur(2px); transition: background .15s ease, color .15s ease, border-color .15s ease; } .nonaki-btn:hover { background: #244b39cc; } .nonaki-btn.on { background: var(--accent); color: #20140a; border-color: var(--accent); } /* オート観戦トグル: 鳴きなしボタンの真下に並べる（フリー対戦時のみ表示）。 */ .auto-btn { top: 58px; } .banner { position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%); font-size: 40px; font-weight: 800; color: var(--accent); text-shadow: 0 3px 12px #000a; pointer-events: none; } /* 模範解答（栞 Lv7+/Lv10）の卓上HUD。卓の左上に小さな黒板風パネルで板書する。 手牌は卓の下端なので上部に置いて被らせない。pointer-events:none で打牌操作を妨げない。 */ .model-advice { position: absolute; top: 10px; left: 10px; z-index: 24; display: flex; flex-direction: column; gap: 6px; max-width: 220px; pointer-events: none; font-size: 12px; line-height: 1.35; } .model-advice.hidden { display: none; } /* 栞の板書は「黒板」。木枠＋艶消しの緑＋白チョークで、卓の一角を教室にする （docs/character-ingame-fx-plan.md 2-4）。助言の中身は変えず、誰の助言かを見せる。 */ .model-advice .ma-block { background: linear-gradient(180deg, #2b4238, #22362e), repeating-linear-gradient(115deg, #ffffff05 0 2px, transparent 2px 7px); border: 3px solid #6b4a2f; border-radius: 4px; box-shadow: 0 3px 12px #0008, inset 0 0 18px #0000004d; padding: 7px 10px; color: #f2f7f2; text-shadow: 0 1px 0 #00000055; } /* 「栞の板書」見出しの前に置く、白いチョークの一本線 */ .model-advice .ma-title::before { content: ""; display: inline-block; vertical-align: middle; width: 10px; height: 3px; margin-right: 5px; border-radius: 1px; background: #f4f7f2; box-shadow: 0 0 4px #ffffff66; } .model-advice .ma-title { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #dff0e6; margin-bottom: 3px; /* 白チョーク */ } .model-advice .ma-line { white-space: nowrap; } .model-advice .ma-comeback .ma-line:first-of-type { color: #f6d24a; font-weight: 700; } .model-advice .ma-lead .ma-line { color: #f6d24a; white-space: normal; } .model-advice .ma-pf .ma-verdict { font-size: 18px; font-weight: 900; letter-spacing: .06em; } .model-advice .ma-pf .ma-reason { font-size: 11px; color: #cfe7df; white-space: normal; margin-top: 2px; } .model-advice .ma-push { border-color: #e0533a; } .model-advice .ma-push .ma-verdict { color: #ff8a6b; } .model-advice .ma-fold { border-color: #5b8def; } .model-advice .ma-fold .ma-verdict { color: #9fc0ff; } .model-advice .ma-hold { border-color: #f6c14a; } .model-advice .ma-hold .ma-verdict { color: #ffd96b; } .side { width: 320px; flex: 0 0 320px; display: flex; flex-direction: column; min-height: 0; } .side h3 { margin: 8px 0; color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; } /* ability controls: stacked full-width buttons/chips in the side panel. The whole section collapses when there are no abilities to show (your turn ends), handing the space back to the log. */ .side-abilities { flex: 0 0 auto; display: flex; flex-direction: column; margin-top: 10px; } .side-abilities:has(#ability-bar:empty) { display: none; } .ability-bar { display: flex; flex-direction: column; gap: 6px; } .ability-bar button, .ability-bar .ability-chip { width: 100%; align-self: stretch; text-align: center; font-size: 14px; font-weight: 700; padding: 9px 12px; border-radius: 9px; } .ability-bar button { border: 2px solid #0003; color: #1a120a; cursor: pointer; } .ability-bar button:disabled { opacity: .4; cursor: default; } /* ペア戦・相方への指示ウィンドウ（能力ボタンの上に常時表示）。文字は読みやすく大きめ。 */ .pair-cmd { display: flex; flex-direction: column; gap: 8px; background: #18241d; border: 2px solid #f6b35255; border-radius: 11px; padding: 10px 11px; margin-bottom: 6px; } .pair-cmd-head { font-size: 15px; font-weight: 800; color: #f6d59a; letter-spacing: .04em; } .pair-cmd .pair-cmd-toggle { width: 100%; display: flex; align-items: center; gap: 9px; text-align: left; font-size: 14px; font-weight: 800; padding: 8px 10px; border-radius: 9px; border: 2px solid #ffffff1f; cursor: pointer; color: #e9f3ec; background: #2a3b30; } .pair-cmd .pair-cmd-toggle.on { background: #2f6d4a; border-color: #6fe0a0; color: #eafff2; } .pair-cmd .pair-cmd-toggle.off { background: #3a2b2b; border-color: #c98a8a; } .pair-cmd-knob { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 14px; background: #cfe0d6; box-shadow: 0 0 0 2px #0003 inset; } .pair-cmd-toggle.on .pair-cmd-knob { background: #b6ffd2; } .pair-cmd-toggle.off .pair-cmd-knob { background: #ffd0d0; } .pair-cmd-rows { display: flex; flex-direction: column; gap: 6px; } .pair-cmd-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pair-cmd-name { font-size: 14px; font-weight: 700; color: #e9f3ec; flex: 1 1 auto; } .pair-cmd .pair-cmd-req { width: auto; flex: 0 0 auto; align-self: auto; font-size: 13px; font-weight: 800; padding: 7px 12px; border-radius: 8px; background: var(--accent, #f6b352); color: #20140a; border: 2px solid #0003; cursor: pointer; } .pair-cmd .pair-cmd-req.is-req { background: #f6d59a; } .pair-cmd .pair-cmd-req.is-active { background: #6b4caa; color: #fff; } .pair-cmd-row.passive { opacity: .9; } .pair-cmd-passive-tag { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #bfe0cf; background: #233b30; border: 1px solid #ffffff14; border-radius: 7px; padding: 5px 9px; } .pair-cmd-empty { font-size: 13px; color: #9fb3a7; } /* remaining-count chip, shown above the activation button */ .ability-remain { align-self: stretch; text-align: center; font-size: 12px; font-weight: 700; color: #cfe0d6; background: #233b30; border: 1px solid #ffffff14; border-radius: 8px; padding: 5px 8px; } /* ---- 相棒ボード: 上部=4人のHPバーを縦に詰める／下部=自キャラのバストアップ ---- */ .hp-board { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; } /* 二人麻雀: 相手(師匠)を上に大きく置く固定レイアウト。①相手HP ②相手立ち絵 ③自分HP ④自分立ち絵(self-stage)。相手立ち絵は中段に固定高で差し込む。 */ .hp-board.futari .opp-bustup { position: relative; height: 230px; margin: 2px 0; border-radius: 12px; overflow: hidden; border: 1px solid #ffffff10; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), #0e1813 72%); } .hp-board.futari .opp-bustup .self-portrait { -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); } /* 1人ぶんの横長HPバー（アイコン＋名前＋ゲージ）。 */ .hp-row { position: relative; display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 10px; background: #0e1813ee; border: 1px solid #ffffff14; transition: border-color .18s ease, box-shadow .18s ease; } /* あなたの席はほんのり強調（枠の色をキャラカラーに）。 */ .hp-row.is-you { border-color: color-mix(in srgb, var(--c) 55%, transparent); } /* 手番のキャラを灯す（共在感）。 */ .hp-row.is-turn { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 40%, transparent); } .hp-row.is-turn .hp-icon { animation: hpTurnPulse 1.6s ease-in-out infinite; } @keyframes hpTurnPulse { 0%,100% { transform: none; } 50% { transform: translateY(-2px); } } /* トビ（持ち点マイナス）は沈ませる。 */ .hp-row.busted { opacity: .5; filter: grayscale(.5); } /* 順位メダル（結果画面の .go-medal と同じ金/銀/銅/灰の意匠の小型版）。 */ .hp-rank { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #2a1d0a; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35), 0 1px 3px #0007; } .hp-rank.m1 { background: linear-gradient(150deg, #ffe9a6, #f3b13f); } .hp-rank.m2 { background: linear-gradient(150deg, #f1f4f7, #b6c0c9); } .hp-rank.m3 { background: linear-gradient(150deg, #f0c08a, #c47e3e); color: #2a1407; } .hp-rank.m4 { background: linear-gradient(150deg, #b9c0bd, #7c8783); } .hp-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; border: 2px solid color-mix(in srgb, var(--c) 55%, #0000); background: #0b120e; } .hp-icon .char-icon { width: 100%; height: 100%; object-fit: cover; display: block; } .hp-icon .char-icon-fallback { width: 100%; height: 100%; } /* モブ顔アイコン: 全身シルエットを丸アイコンに収めるとき、頭部だけをズームクロップする。 object-fit:cover では拡大できないので background 方式。背景URLは各要素の --mob-sil で渡す （makeCharIcon / makeArt / faceMarkup が設定）。画像は頭部が上端中央寄りなので、横は中央・ 縦は上寄り(7%)に置き、約3倍に拡大して頭〜肩を見せる。値は実機で調整。 */ .is-mob-face { background-image: var(--mob-sil); background-repeat: no-repeat; background-position: 50% 7%; background-size: 300% auto; /* 黒シルエットが暗背景に溶けて見えないため、アイコン背景は灰色一色にして頭部を浮かせる。 */ background-color: #b8bcc4; } .hp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .hp-head { display: flex; align-items: baseline; gap: 6px; } .hp-rel { flex: 0 0 auto; font-size: 10px; font-weight: 800; color: #0c130f; background: color-mix(in srgb, var(--c) 70%, #cfe0d6); border-radius: 4px; padding: 1px 5px; } .hp-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hp-val { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: #eef3ef; font-variant-numeric: tabular-nums; } /* 大会中の増減値（現在−開始持ち点）。緑=プラス / 赤=マイナス。 */ .hp-delta { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: #9fb0a8; } .hp-delta.up { color: #8fd06a; } .hp-delta.dn { color: #ff8e7a; } .hp-gauge { position: relative; width: 100%; height: 7px; border-radius: 999px; overflow: hidden; background: #ffffff14; border: 1px solid #00000040; } .hp-fill { height: 100%; border-radius: inherit; transition: width .5s ease; } /* ゲージ内では base(完了済み周回)と fill(現在の周回)を重ねて周回ゲージを作る。 bench バー等の素の .hp-fill は通常フローのまま（ここでは絶対配置しない）。 */ .hp-gauge > .hp-base, .hp-gauge > .hp-fill { position: absolute; left: 0; top: 0; width: 0; height: 100%; border-radius: inherit; transition: width .5s ease; } .hp-gauge > .hp-base { z-index: 0; } /* 完了済み周回ぶん（背面の満タンベース） */ .hp-gauge > .hp-fill { z-index: 1; } /* 現在の周回ぶん（最前面） */ .hp-fill.high { background: linear-gradient(90deg, #3ddc97, #66e6a8); } .hp-fill.mid { background: linear-gradient(90deg, #f6b352, #ffd27d); } .hp-fill.low { background: linear-gradient(90deg, #e85d75, #ff8a9d); } /* 2週目以降（lap）の塗りは僅かに発光させて「満タン突破」を強調。色はJSが直に当てる。 */ .hp-fill.lap { box-shadow: 0 0 6px rgba(255, 220, 120, .55); } .hp-row.lap2 .hp-val { color: #ffd86b; text-shadow: 0 0 8px rgba(255, 200, 90, .5); } /* 短文紹介ポップ（キャラ選択のホバーと同じ素性紹介）。バーの左側に張り出す。 */ .hp-flavor { position: absolute; z-index: 8; width: 230px; right: calc(100% + 8px); top: 50%; transform: translate(6px, -50%); background: #0e1813f7; border: 1px solid #2f4a3b; border-radius: 8px; padding: 9px 11px; text-align: left; box-shadow: 0 10px 24px #000b; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, transform .16s ease, visibility .16s; } .hp-row:hover { z-index: 9; } .hp-row:hover .hp-flavor { opacity: 1; visibility: visible; transform: translate(0, -50%); } .hp-flavor-bio { font-size: 12px; font-weight: 700; color: #eef3ef; line-height: 1.5; } .hp-flavor-profile { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 5px; } /* ---- 自キャラのバストアップ（立ち絵）＋局中セリフ枠 ---- */ .self-stage { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 10px; border-radius: 12px; overflow: hidden; background: radial-gradient(120% 80% at 50% 120%, color-mix(in srgb, var(--accent) 10%, transparent), #0e1813 70%); border: 1px solid #ffffff10; } .self-bustup { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; } .self-portrait { width: 100%; height: 100%; object-fit: cover; object-position: top center; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); } .self-portrait-fb { display: flex; align-items: center; justify-content: center; font-size: 72px; font-weight: 800; color: #ffffffcc; } /* 局中セリフの吹き出し。下端に重ね、未表示時は透明＋無効。showSelfTalk() で .show。 */ .self-talk { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; background: #0b1410f2; border: 1px solid color-mix(in srgb, var(--accent) 35%, #2f4a3b); border-radius: 10px; padding: 10px 12px; box-shadow: 0 8px 20px #000a; font-size: 14px; line-height: 1.55; color: #eef3ef; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .self-talk.show { opacity: 1; visibility: visible; transform: translateY(0); } /* 「幸運のツモ」発動中の特別ツモ演出（自分のツモ牌に金リングがシュンッと収束）。 位置は JS が #table の手牌ヒットボックスから画面座標へ変換して left/top に当てる。 */ .tsumo-fx { position: fixed; z-index: 45; pointer-events: none; } .tsumo-fx > span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); } .tsumo-fx-ring { width: var(--w); height: var(--h); border-radius: 8px; border: 2.5px solid #ffe08a; box-shadow: 0 0 14px #ffd86a, inset 0 0 8px #ffd86a; opacity: 0; } .tsumo-fx-glow { width: calc(var(--w) * 1.7); height: calc(var(--h) * 1.5); background: radial-gradient(closest-side, rgba(255, 224, 138, .55), rgba(255, 210, 90, 0)); opacity: 0; } .tsumo-fx-spark { font-size: calc(var(--h) * 0.5); color: #fff3c4; text-shadow: 0 0 10px #ffd86a; opacity: 0; } .tsumo-fx.go .tsumo-fx-ring { animation: tsumoRing .55s cubic-bezier(.2, .7, .2, 1) both; } .tsumo-fx.go .tsumo-fx-glow { animation: tsumoGlow .6s ease-out both; } .tsumo-fx.go .tsumo-fx-spark { animation: tsumoSpark .6s ease-out both; } @keyframes tsumoRing { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); } 40% { opacity: 1; } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.97); } } @keyframes tsumoGlow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } } @keyframes tsumoSpark { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-30deg); } 45% { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(8deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.9) rotate(0deg); } } /* ============================================================================ 能力の持続レイヤー（キャラ別インゲーム演出の共通の器） --------------------------------------------------------------------------- 「能力＝そのキャラが見ている世界を、一局だけプレイヤーに貸す」という物差しで、 発動中のあいだ卓の左下にそのキャラの"視界"を出す（正典 docs/character-ingame-fx-plan.md）。 器は共通・中身はキャラ別。単発FXは 0.6s 以内、持続表示は発動局のみ＝連戦のテンポを殺さない。 ========================================================================== */ .ability-aura { /* 卓の左下。手牌(下端~86px＋持ち上げ分)と action-bar(右下 bottom:112px) のどちらとも 被らない高さに置く。左側は上家の手牌が縦に並ぶだけなので、この帯が唯一の空きになる。 */ position: absolute; left: 10px; bottom: 108px; z-index: 24; display: flex; flex-direction: column; gap: 6px; max-width: 232px; pointer-events: none; font-size: 12px; line-height: 1.35; } .ability-aura.hidden { display: none; } .aura-panel { border-radius: 9px; padding: 7px 10px; box-shadow: 0 4px 14px #0009; backdrop-filter: blur(2px); animation: auraIn .35s ease-out both; } .aura-panel.aura-out { animation: auraOut .3s ease-in both; } .aura-title { font-size: 11px; font-weight: 800; letter-spacing: .08em; display: flex; align-items: baseline; gap: 6px; } .aura-note { font-size: 11px; margin-top: 3px; opacity: .85; } @keyframes auraIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes auraOut { from { opacity: 1; } to { opacity: 0; transform: translateY(6px); } } /* ---- 姚玖「老頭の庭」: 么九を引くたび庭に灯がともる ---- */ .aura-garden { background: linear-gradient(180deg, #10140fee, #080a07ee); border: 1px solid #4b3a1f; color: #e8d9bd; position: relative; overflow: hidden; } .aura-garden .aura-title { color: #c9a25e; } .aura-garden.lit { border-color: #a8791f; box-shadow: 0 4px 14px #0009, 0 0 18px #f0a23c33; } .garden-lanterns { display: flex; gap: 3px; margin: 5px 0 1px; } .lantern { width: 11px; height: 15px; border-radius: 2px 2px 3px 3px; background: #23261f; border: 1px solid #383c30; } .lantern.on { background: linear-gradient(180deg, #ffd489, #f0a23c); border-color: #ffcc7a; box-shadow: 0 0 7px #f0a23caa; } .lantern.just { animation: lanternPop .55s ease-out both; } @keyframes lanternPop { 0% { transform: scale(.5); box-shadow: 0 0 0 #f0a23c00; } 45% { transform: scale(1.35); box-shadow: 0 0 16px #ffd489; } 100% { transform: scale(1); box-shadow: 0 0 7px #f0a23caa; } } /* 満月: 么九が13種そろう／国士テンパイで庭の隅に昇る */ .garden-moon { position: absolute; right: 8px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe8, #f4dfa0); box-shadow: 0 0 14px #ffe9a8cc, 0 0 30px #ffd97a55; animation: moonRise .8s ease-out both; } @keyframes moonRise { from { opacity: 0; transform: translateY(10px) scale(.7); } to { opacity: 1; transform: none; } } /* 発動中は卓が夜に沈む（四隅を落とす）。灯が9つ以上ともると夜が明るむ。 */ .table-wrap.aura-night::after { content: ""; position: absolute; inset: 0; z-index: 23; pointer-events: none; background: radial-gradient(ellipse at center, transparent 46%, #05070a99 100%); transition: opacity .6s ease; } .table-wrap.aura-night.aura-night-lit::after { opacity: .45; } /* ========================================================================== 場の持続レイヤー（卓の上辺）— 他家由来で卓全体に効いている能力の枠。 自席のオーラ（.ability-aura＝卓の左下）とは住む場所で分ける（§11-4 案a）ので、 自分の能力と場の能力が同時に立っても、どちらも消えない。 ========================================================================== */ .field-aura { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 24; pointer-events: none; max-width: 560px; font-size: 12px; line-height: 1.3; /* 住人が複数のときは横に並べる（泥＋沈黙が同時に立つ局がある）。縦積みだと卓の上辺から せり出して対面の手牌に近づくので、行方向はここで固定する。 */ display: flex; align-items: flex-start; gap: 8px; } .field-aura.hidden { display: none; } .field-aura .aura-panel { display: flex; align-items: baseline; gap: 8px; padding: 5px 12px; } /* ---- 沼田 蓮「泥中の蓮」(他家): 卓が濁る ---- */ .aura-mud { background: linear-gradient(180deg, #1b1710ee, #0d0b08ee); border: 1px solid #4a4030; color: #d9cfba; } .aura-mud .aura-title { color: #b9a06a; } .aura-mud .aura-note { margin-top: 0; } /* ---- JaneDoe「沈黙の処方箋」: 奪った/奪われた時間を「…」の数で見せる（§14-2-2） ---- 完全無言の彼女にとって、点の数そのものが言葉になる。自分が縛る側＝自席レイヤー、 縛られている側＝場レイヤー（他家由来）で、住む場所を分ける。 */ .aura-silence, .aura-silenced { background: linear-gradient(180deg, #14161aee, #08090bee); border: 1px solid #454b55; color: #cdd3dc; } .aura-silence .aura-title, .aura-silenced .aura-title { color: #8b98a8; } .sil-dots { display: inline-flex; gap: 6px; align-items: center; margin: 6px 0 2px; min-height: 12px; } .field-aura .sil-dots { margin: 0 2px; } .sil-dot { width: 8px; height: 8px; border-radius: 50%; background: #cdd3dc; box-shadow: 0 0 8px #8b98a866; animation: silDot 2.2s ease-in-out infinite; } .sil-dot:nth-child(2) { animation-delay: .25s; } .sil-dot:nth-child(3) { animation-delay: .5s; } @keyframes silDot { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } } .aura-silence.done .aura-note { letter-spacing: .3em; opacity: .7; } /* 縛られている側は「打てない」ことが操作情報なので、少しだけ強く見せる */ .aura-silenced { border-color: #6b5560; } .aura-silenced .aura-title { color: #c9a7b4; } .aura-silenced .sil-dot { background: #e3c9d2; box-shadow: 0 0 8px #c9a7b477; } /* ---- カリュブディス「淵の蒐集」: 山が減るほど渦が深くなる（§14-2-3） ---- 彼女だけ和了れない代わりに、流局が和了になる。だから「山が減る」が他の誰とも違う 意味を持つ＝残り牌を数字ではなく渦の深さに翻訳して、彼女の視界を貸す。 */ .aura-abyss { background: linear-gradient(180deg, #0b1418ee, #05090bee); border: 1px solid #2f5b6b; color: #cfe4ec; } .aura-abyss .aura-title { color: #4a8fb5; } .abyss-ring { --depth: 0%; position: relative; height: 42px; min-width: 132px; margin: 6px 0 3px; border-radius: 6px; overflow: hidden; background: radial-gradient(circle at 50% 50%, #0a1a22 0 18%, #071016 42%, #04080b 70%), #04080b; } .abyss-ring::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, #4a8fb500, #4a8fb566 25%, #7fd2e600 50%, #4a8fb566 75%, #4a8fb500); opacity: calc(.25 + var(--depth) / 160); animation: abyssSpin 6s linear infinite; } .aura-abyss.near .abyss-ring::before { animation-duration: 2.4s; } @keyframes abyssSpin { to { transform: rotate(360deg); } } .abyss-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(6px + var(--depth) * .16); height: calc(6px + var(--depth) * .16); border-radius: 50%; background: radial-gradient(circle at 50% 50%, #04080b 55%, #0e2a35); box-shadow: 0 0 14px #04080b, inset 0 0 10px #000; transition: width .6s ease, height .6s ease; } .aura-abyss.near { border-color: #4a8fb5; box-shadow: 0 4px 14px #0009, 0 0 18px #4a8fb544; } /* 掴んだ和了牌が呑まれる（アガれない体質を、いちばん惜しい形で見せる） */ .tsumo-fx.fx-abyss .tsumo-fx-ring { border-color: #4a8fb5; box-shadow: 0 0 14px #0a1a22, inset 0 0 10px #04080b; } .tsumo-fx.fx-abyss .tsumo-fx-glow { background: radial-gradient(closest-side, rgba(10,26,34,.75), rgba(74,143,181,0)); } .tsumo-fx.fx-abyss .tsumo-fx-spark { color: #7fd2e6; text-shadow: 0 0 10px #04080b; } /* 流局＝彼女の和了。蒐集した局だけ、流局カードに渦の縁を与える */ .win-card.abyss { border-color: #2f5b6b; box-shadow: 0 10px 40px #000c, 0 0 26px #4a8fb533; } .win-sub.abyss-collect { color: #9fd8f5; margin-top: 6px; } .win-sub.abyss-collect b { color: #dff3ff; font-size: 1.15em; } /* 卓の"縁"に泥が溜まる。姚玖の夜（::after）と擬似要素を分けて同時に立てられるようにする。 面ではなく縁だけを濁らせるのは、手牌の視認性を落とさないため（実機で下辺グラデを実測して是正）。 */ .table-wrap.field-mud::before { content: ""; position: absolute; inset: 0; z-index: 22; pointer-events: none; box-shadow: inset 0 0 0 2px #3a2f1877, inset 0 -64px 52px -56px #2a2214cc, inset 0 64px 52px -56px #1d180eaa; } /* ---- 沼田 蓮「泥中の蓮」(自席): 沈殿の水位。溜まるのは静かに、引くときだけ花が咲く ---- */ .aura-lotus { background: linear-gradient(180deg, #171410ee, #0b0a07ee); border: 1px solid #4a4030; color: #ded3bb; position: relative; } .aura-lotus .aura-title { color: #c9b07a; } .aura-lotus.has-mud .aura-title { color: #d9c48f; } .mud-gauge { position: relative; height: 34px; min-width: 132px; margin: 5px 0 2px; border-radius: 4px; background: #14120d; border: 1px solid #38321f; overflow: hidden; } .mud-water { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(180deg, #6b5a32, #3a2f18); box-shadow: inset 0 1px 0 #8c7742; transition: height .6s cubic-bezier(.3,.9,.4,1); } .mud-bloom { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%) scale(.2); width: 14px; height: 14px; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 40% 38%, #fff4f7, #f3b9cd 62%, #d98aae); box-shadow: 0 0 10px #f3b9cd88; } .aura-lotus.bloom .mud-bloom { animation: lotusBloom .9s ease-out both; } @keyframes lotusBloom { 0% { opacity: 0; transform: translateX(-50%) scale(.2); } 35% { opacity: 1; transform: translateX(-50%) scale(1.25); } 100% { opacity: .85; transform: translateX(-50%) scale(1); } } /* ---- 焔「大物手の焔」: 手の燃料を炎の高さで見せる（満位＝満貫圏の火柱） ---- */ .aura-flame { background: linear-gradient(180deg, #1a0f0aee, #0b0705ee); border: 1px solid #5a2a17; color: #f0d7c6; position: relative; } .aura-flame .aura-title { color: #e0552b; } .aura-flame.blaze { border-color: #e0552b; box-shadow: 0 4px 14px #0009, 0 0 20px #e0552b55; } .flame-pit { position: relative; height: 44px; min-width: 132px; margin: 5px 0 2px; border-radius: 4px; background: #140c08; border: 1px solid #3a2016; overflow: hidden; } .flame-body { position: absolute; left: 50%; bottom: 0; width: 46%; height: 20%; transform: translateX(-50%); border-radius: 46% 46% 30% 30% / 62% 62% 24% 24%; background: linear-gradient(180deg, #ffd98a, #f0812c 46%, #e0552b 78%, #8c2a12); box-shadow: 0 0 14px #e0552b66; transition: height .5s cubic-bezier(.3,.9,.4,1); animation: flameSway 1.6s ease-in-out infinite; } .aura-flame.blaze .flame-body { box-shadow: 0 0 22px #f0812caa, 0 0 42px #e0552b55; } .aura-flame.flare .flame-body { animation: flameFlare .7s ease-out, flameSway 1.6s ease-in-out infinite; } @keyframes flameSway { 0%, 100% { transform: translateX(-50%) scaleX(1) skewX(0deg); } 50% { transform: translateX(-50%) scaleX(.92) skewX(-3deg); } } @keyframes flameFlare { 0% { filter: brightness(1); } 35% { filter: brightness(1.9) saturate(1.3); } 100% { filter: brightness(1); } } /* ---- 凌雲「琥珀の盾」: 盾が減った／編み直された瞬間 ---- */ /* 盾は1ゲーム通しの持続資源なので、増減そのものが事件になる。 */ .passive-ind.meter-break { animation: shieldBreak .6s cubic-bezier(.3,.1,.2,1) both; } .passive-ind.meter-mend { animation: shieldMend .6s ease-out both; } @keyframes shieldBreak { 0% { transform: none; filter: none; } 18% { transform: translateX(-3px) rotate(-1.2deg); filter: drop-shadow(0 0 8px #f0a23ccc); } 38% { transform: translateX(3px) rotate(1.2deg); } 60% { transform: translateX(-2px); filter: drop-shadow(0 0 4px #f0a23c66); } 100% { transform: none; filter: none; } } @keyframes shieldMend { 0% { transform: scale(1); filter: none; } 35% { transform: scale(1.12); filter: drop-shadow(0 0 12px #ffd489); } 100% { transform: scale(1); filter: none; } } /* ---- ビビ「身代わり人形」: 守りの窓を人形の数で見せる ---- */ .aura-doll { background: linear-gradient(180deg, #0d1a24ee, #071018ee); border: 1px solid #2f6d8e; color: #dceefb; } .aura-doll .aura-title { color: #5aa9e6; } .aura-doll.last { border-color: #e0a03c; box-shadow: 0 4px 14px #0009, 0 0 18px #e0a03c44; } .aura-doll.last .aura-note b { color: #ffd48a; } .doll-marks { display: flex; gap: 6px; margin: 6px 0 2px; height: 18px; align-items: flex-end; } /* 人形＝丸い頭＋台形の体（絵文字はテーマから色が浮くので描画で作る） */ .doll { position: relative; width: 11px; height: 17px; } .doll::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background: #cfe9ff; box-shadow: 0 0 6px #5aa9e6aa; } .doll::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 0; height: 0; border-bottom: 10px solid #9fd8f5; border-left: 5px solid transparent; border-right: 5px solid transparent; filter: drop-shadow(0 0 4px #5aa9e688); } .doll.spent::before { background: #2c3a44; box-shadow: none; } .doll.spent::after { border-bottom-color: #2c3a44; filter: none; } .doll.just { animation: dollBreak .55s ease-out both; } @keyframes dollBreak { 0% { transform: scale(1) rotate(0); opacity: 1; } 35% { transform: scale(1.25) rotate(-12deg); opacity: .9; } 70% { transform: scale(.9) rotate(10deg); opacity: .5; } 100% { transform: scale(1) rotate(0); opacity: 1; } } /* ---- 春嬋「韋駄天の中張」: 走った距離が見える ---- */ .aura-sprint { background: linear-gradient(180deg, #0c1f1eee, #071413ee); border: 1px solid #2b7d74; color: #dff5f1; } .aura-sprint .aura-title { color: #46c2b5; } .aura-sprint.rush { border-color: #46c2b5; box-shadow: 0 4px 14px #0009, 0 0 18px #46c2b544; } .step-marks { display: flex; gap: 5px; margin: 6px 0 2px; height: 13px; align-items: center; } /* 一歩＝翠のシェブロン（走った距離が右へ伸びていく）。絵文字だと色がテーマから浮くので描画で作る。 */ .step-mark { width: 7px; height: 11px; opacity: .9; border-right: 2.5px solid #7fe6d8; border-top: 2.5px solid #7fe6d8; transform: rotate(45deg); animation: stepPop .45s ease-out both; } @keyframes stepPop { 0% { opacity: 0; transform: rotate(45deg) translate(-6px, 6px) scale(.7); } 60% { opacity: 1; transform: rotate(45deg) translate(2px, -2px) scale(1.15); } 100% { opacity: .9; transform: rotate(45deg); } } .sprint-badge { margin-left: auto; font-size: 11px; font-weight: 900; letter-spacing: .1em; color: #0a1614; background: #46c2b5; border-radius: 4px; padding: 1px 6px; animation: lanternPop .5s ease-out both; } /* 足跡テロップ（席の横に「一歩」「二歩」…） */ .step-call { position: absolute; z-index: 26; pointer-events: none; font-size: 20px; font-weight: 900; color: #bff0e8; text-shadow: 0 2px 8px #000c, 0 0 14px #46c2b5aa; opacity: 0; transform: translate(-50%, -50%) translateX(-14px); transition: opacity .18s ease-out, transform .5s cubic-bezier(.2,.7,.2,1); } .step-call.show { opacity: 1; transform: translate(-50%, -50%) translateX(14px); } /* 聴牌到達の一閃（画面を横切る風） */ .sprint-flash { position: absolute; inset: 0; z-index: 27; pointer-events: none; overflow: hidden; } .sprint-flash::before { content: ""; position: absolute; top: 0; bottom: 0; width: 42%; background: linear-gradient(100deg, transparent, #9ff0e455, #ffffff88, #9ff0e455, transparent); animation: sprintSweep .55s cubic-bezier(.3,.6,.2,1) both; } @keyframes sprintSweep { from { left: -45%; } to { left: 105%; } } /* ツモ牌FXの色バリアント（既定=詩玥の金）。姚玖=橙の灯、春嬋=翠の風 */ .tsumo-fx.fx-lantern .tsumo-fx-ring { border-color: #ffbe6a; box-shadow: 0 0 14px #f0a23c, inset 0 0 8px #f0a23c; } .tsumo-fx.fx-lantern .tsumo-fx-glow { background: radial-gradient(closest-side, rgba(240,162,60,.55), rgba(240,162,60,0)); } .tsumo-fx.fx-lantern .tsumo-fx-spark { color: #ffe3b0; text-shadow: 0 0 10px #f0a23c; } .tsumo-fx.fx-wind .tsumo-fx-ring { border-color: #7fe6d8; box-shadow: 0 0 14px #46c2b5, inset 0 0 8px #46c2b5; } .tsumo-fx.fx-wind .tsumo-fx-glow { background: radial-gradient(closest-side, rgba(70,194,181,.5), rgba(70,194,181,0)); } .tsumo-fx.fx-wind .tsumo-fx-spark { color: #d8fff8; text-shadow: 0 0 10px #46c2b5; } /* ============================================================================ ルクス・ゼロ「ゼロ・リサーチ」— 山を照らす計器 走査 → 捕捉（予約）→ 次のツモで回収、という因果を目に見える形にするためのUI。 無機質・等幅・シアン＝彼の人格そのものを操作画面にする（素のボタン列にしない）。 ========================================================================== */ .lux-scan { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 28; min-width: 330px; max-width: 420px; background: linear-gradient(180deg, #060d12f2, #030709f7); border: 1px solid #2f6d8e; border-radius: 10px; box-shadow: 0 10px 40px #000c, 0 0 26px #4ea1d322; color: #cfe6f4; padding: 12px 14px 11px; font-family: "SFMono-Regular", Consolas, "Courier New", monospace; animation: luxIn .22s ease-out both; } .lux-scan.hidden, .lux-alert.hidden { display: none; } @keyframes luxIn { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; } } .lux-head { display: flex; align-items: baseline; gap: 8px; font-size: 11px; letter-spacing: .18em; color: #4ea1d3; border-bottom: 1px solid #1d4256; padding-bottom: 6px; margin-bottom: 8px; } .lux-head .lux-tag { font-weight: 800; } .lux-head .lux-meta { margin-left: auto; color: #6f93a8; letter-spacing: .06em; } .lux-rows { display: flex; flex-direction: column; gap: 6px; } .lux-row { display: flex; align-items: center; gap: 10px; width: 100%; background: #0a1a24; border: 1px solid #27596f; border-radius: 7px; padding: 8px 10px; cursor: pointer; color: #e6f4fb; font-family: inherit; font-size: 13px; text-align: left; } .lux-row:hover { border-color: #4ea1d3; background: #0e2534; box-shadow: 0 0 12px #4ea1d344; } .lux-row .lux-tile { font-size: 16px; font-weight: 800; color: #9fd8f5; min-width: 46px; } .lux-row .lux-num { color: #7fb6d0; font-size: 11px; letter-spacing: .06em; } .lux-row .lux-num b { color: #d6f0ff; font-weight: 700; } .lux-foot { display: flex; align-items: center; margin-top: 9px; } .lux-note { font-size: 11px; color: #86a6b8; letter-spacing: .04em; } .lux-cancel { margin-left: auto; background: none; border: 1px solid #2c4a5a; border-radius: 6px; color: #8fb2c4; font-family: inherit; font-size: 11px; padding: 4px 10px; cursor: pointer; } .lux-cancel:hover { border-color: #4ea1d3; color: #cfe6f4; } /* 誤差の一打（超越帯 Lv9+）: 計器がいちど ERROR を吐き、そのうえで掴みにいく＝反転 */ .lux-scan.fallback { border-color: #8e6a2f; box-shadow: 0 10px 40px #000c, 0 0 26px #f0a23c22; } .lux-scan.fallback .lux-head { color: #f0a23c; border-bottom-color: #5a4520; } .lux-scan.fallback .lux-row { border-color: #6b5426; } .lux-scan.fallback .lux-row:hover { border-color: #f0a23c; box-shadow: 0 0 12px #f0a23c44; } .lux-err { color: #ffb765; font-size: 12px; margin-bottom: 8px; letter-spacing: .04em; } .lux-err b { display: block; color: #ffd9a8; font-size: 13px; margin-top: 3px; letter-spacing: .02em; } /* 「該当なし」告知（能力が使えない＝場に出切っている、という読みの材料） */ .lux-alert { /* 卓の中央上（中央情報パネルのすぐ上）。対面の伏せ牌に被らない高さに置く。 */ position: absolute; left: 50%; top: 40%; transform: translateX(-50%); z-index: 28; pointer-events: none; background: #050c11ee; border: 1px solid #2f6d8e; border-radius: 8px; padding: 8px 14px; color: #cfe6f4; font-family: "SFMono-Regular", Consolas, "Courier New", monospace; box-shadow: 0 8px 26px #000a; animation: luxAlertIn .3s ease-out both; } .lux-alert .la-tag { font-size: 11px; letter-spacing: .18em; color: #ff9c6b; font-weight: 800; } .lux-alert .la-main { font-size: 13px; margin-top: 3px; } .lux-alert .la-sub { font-size: 11px; color: #86a6b8; margin-top: 2px; } .lux-alert.out { animation: luxAlertOut .4s ease-in both; } @keyframes luxAlertIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translateX(-50%); } } @keyframes luxAlertOut { from { opacity: 1; } to { opacity: 0; transform: translate(-50%, -6px); } } /* 捕捉（予約）の光点: 山＝卓中央に刺さり、次のツモで手牌へ流れ込む */ .lux-point { position: absolute; z-index: 26; pointer-events: none; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle, #eaf8ff, #4ea1d3 55%, #4ea1d300 70%); box-shadow: 0 0 14px #4ea1d3, 0 0 30px #4ea1d366; animation: luxPulse 1.4s ease-in-out infinite; transition: left .42s cubic-bezier(.3,.1,.2,1), top .42s cubic-bezier(.3,.1,.2,1), opacity .2s ease; } @keyframes luxPulse { 0%,100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.45); opacity: .6; } } .tsumo-fx.fx-scan .tsumo-fx-ring { border-color: #9fd8f5; box-shadow: 0 0 14px #4ea1d3, inset 0 0 8px #4ea1d3; } .tsumo-fx.fx-scan .tsumo-fx-glow { background: radial-gradient(closest-side, rgba(78,161,211,.55), rgba(78,161,211,0)); } .tsumo-fx.fx-scan .tsumo-fx-spark { color: #dff3ff; text-shadow: 0 0 10px #4ea1d3; } /* ========================================================================== 賭羽ルイナ「大博打」— 賭場（賭け金の選択）とポット（卓に積んだ賭け金） 賭け金は前払い＝選んだ瞬間に点棒(HP)が減る。だから選ばせる前に「払ったあと」を見せ、 賭けたあとは結末まで卓に置いておく（docs §11-2-2）。 ========================================================================== */ .kakeha-bet { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 28; min-width: 340px; max-width: 430px; background: linear-gradient(180deg, #16101ff2, #0a070ef7); border: 1px solid #6d4a9e; border-radius: 10px; box-shadow: 0 10px 40px #000c, 0 0 26px #8b5cf622; color: #e6ddf4; padding: 12px 14px 11px; animation: kbIn .22s ease-out both; } .kakeha-bet.hidden { display: none; } @keyframes kbIn { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; } } .kb-head { display: flex; align-items: baseline; gap: 8px; font-size: 11px; letter-spacing: .16em; color: #a78bfa; border-bottom: 1px solid #3d2a5c; padding-bottom: 6px; margin-bottom: 9px; } .kb-head .kb-tag { font-weight: 800; } .kb-hold { margin-left: auto; letter-spacing: .04em; color: #9c8cb5; font-size: 12px; } .kb-hold b { color: #efe6ff; font-size: 14px; } .kb-hold.paying b { color: #ff8a9d; text-shadow: 0 0 10px #e85d7566; } .kb-cards { display: flex; gap: 10px; } .kb-card { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; background: #1a1226; border: 1px solid #4c3673; border-radius: 8px; padding: 9px 8px 8px; color: #e6ddf4; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; } .kb-card:hover:not(:disabled), .kb-card:focus-visible:not(:disabled) { transform: translateY(-3px); border-color: #a78bfa; box-shadow: 0 6px 18px #0009, 0 0 18px #8b5cf655; } .kb-card:disabled, .kb-card.out { opacity: .4; cursor: not-allowed; } .kb-sticks { display: flex; gap: 4px; height: 12px; } .kb-stick { width: 34px; height: 8px; border-radius: 2px; align-self: center; background: linear-gradient(180deg, #f4f0e6, #cfc6b4); border: 1px solid #8d8471; box-shadow: 0 1px 3px #0007; position: relative; } .kb-stick::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 4px; height: 4px; border-radius: 50%; background: #c0392b; } .kb-amount { font-size: 19px; font-weight: 900; letter-spacing: .02em; } .kb-amount i { font-size: .5em; font-style: normal; margin-left: 2px; color: #b7a9cc; } .kb-mult { font-size: 12px; font-weight: 800; color: #c4b5fd; } .kb-after { font-size: 11px; color: #9c8cb5; } .kb-card:hover:not(:disabled) .kb-after { color: #ff8a9d; } .kb-foot { display: flex; align-items: center; gap: 10px; margin-top: 9px; } .kb-note { font-size: 11px; color: #8b7da3; } .kb-cancel { margin-left: auto; background: #241a33; border: 1px solid #4c3673; border-radius: 6px; color: #c9bcdd; font-size: 12px; padding: 5px 12px; cursor: pointer; } .kb-cancel:hover { border-color: #a78bfa; color: #efe6ff; } /* ---- ポット: 卓に積んだ賭け金。アガれなければ灰になる ---- */ .aura-pot { background: linear-gradient(180deg, #150f1fee, #08060cee); border: 1px solid #4c3673; color: #e6ddf4; } .aura-pot .aura-title { color: #a78bfa; } .pot-stack { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 3px; min-width: 132px; } .pot-stick { height: 9px; border-radius: 2px; position: relative; background: linear-gradient(180deg, #f4f0e6, #cfc6b4); border: 1px solid #8d8471; box-shadow: 0 1px 4px #000a, 0 0 10px #8b5cf633; } .pot-stick::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 4px; height: 4px; border-radius: 50%; background: #c0392b; } .pot-stack.just .pot-stick { animation: potDrop .6s cubic-bezier(.2,1.2,.4,1) both; } @keyframes potDrop { 0% { opacity: 0; transform: translateY(-14px) scaleX(.8); } 60% { opacity: 1; transform: translateY(2px) scaleX(1.04); } 100% { opacity: 1; transform: none; } } /* 外した局＝賭け金は戻らない。点棒が灰になって、結末が絵になる。 */ .aura-pot.ash { border-color: #3a3340; } .aura-pot.ash .aura-title { color: #7d7489; } .aura-pot.ash .pot-stick { background: linear-gradient(180deg, #6e6a66, #47443f); border-color: #565049; box-shadow: none; filter: grayscale(1); transition: background .8s ease, filter .8s ease; } .aura-pot.ash .pot-stick::after { background: #5a5450; } /* ---- 「運命を手繰る」(超越帯) のツモ: 詩玥の金と見分けがつく紫 ---- */ .tsumo-fx.fx-fate .tsumo-fx-ring { border-color: #c4b5fd; box-shadow: 0 0 14px #8b5cf6, inset 0 0 8px #8b5cf6; } .tsumo-fx.fx-fate .tsumo-fx-glow { background: radial-gradient(closest-side, rgba(139,92,246,.55), rgba(139,92,246,0)); } .tsumo-fx.fx-fate .tsumo-fx-spark { color: #efe6ff; text-shadow: 0 0 10px #8b5cf6; } /* ========================================================================== ドラニエル「天啓ドラ寄せ」— 積んだ確定ドラの札束と、四開槓の崖（docs §11-2-4） 暴いたドラは全員に乗る＝諸刃。めくった瞬間に卓が光り、崖が近づくほど札が軋む。 ========================================================================== */ .aura-dora { background: linear-gradient(180deg, #1a1408ee, #0b0904ee); border: 1px solid #6b5417; color: #f0e4c2; } .aura-dora .aura-title { color: #d9a521; } .dora-stack { display: flex; gap: 4px; margin: 6px 0 3px; min-width: 132px; min-height: 22px; align-items: flex-end; } .dora-card { width: 15px; height: 21px; border-radius: 2px; background: linear-gradient(180deg, #ffe9a8, #d9a521 62%, #a97c10); border: 1px solid #ffd77a; box-shadow: 0 2px 6px #000a, 0 0 10px #d9a52166; } .dora-stack.just .dora-card { animation: doraCardIn .6s cubic-bezier(.2,1.2,.4,1) both; } @keyframes doraCardIn { 0% { opacity: 0; transform: translateY(-10px) rotate(-8deg); } 60% { opacity: 1; transform: translateY(2px) rotate(2deg); } 100% { opacity: 1; transform: none; } } .dora-cliff { color: #e8b45c; margin-left: 4px; } /* 崖が近い＝あと1枚で場が流れる。札束が赤熱して軋む。 */ .aura-dora.cliff { border-color: #c0392b; box-shadow: 0 4px 14px #0009, 0 0 18px #c0392b55; } .aura-dora.cliff .dora-cliff { color: #ff8a6b; font-weight: 800; } .aura-dora.cliff .dora-card { border-color: #ffae8a; box-shadow: 0 2px 6px #000a, 0 0 12px #c0392b88; } /* 背水の天啓（超越帯）＝紙の点棒が火力に反転している最中。札が金に燃える。 */ .aura-dora.laststand .aura-title { color: #ffd77a; text-shadow: 0 0 12px #d9a52188; } .aura-dora.laststand .dora-card { animation: doraBurn 1.6s ease-in-out infinite; } @keyframes doraBurn { 0%, 100% { box-shadow: 0 2px 6px #000a, 0 0 10px #d9a52166; } 50% { box-shadow: 0 2px 6px #000a, 0 0 20px #ffd77aaa; } } /* めくった瞬間、卓中央（ドラ表示の段）を走る金の閃光 */ .dora-flash { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none; z-index: 26; background: #fff6d8; box-shadow: 0 0 18px #ffd77a, 0 0 42px #d9a521; animation: doraFlash .65s ease-out both; } @keyframes doraFlash { 0% { opacity: 0; transform: scale(.4); } 22% { opacity: 1; transform: scale(3.4); } 100% { opacity: 0; transform: scale(9); } } /* 手にある新ドラが灯る（暴いた恩恵が自分の手にも乗った瞬間） */ .tsumo-fx.fx-dora .tsumo-fx-ring { border-color: #ffd77a; box-shadow: 0 0 14px #d9a521, inset 0 0 8px #d9a521; } .tsumo-fx.fx-dora .tsumo-fx-glow { background: radial-gradient(closest-side, rgba(217,165,33,.55), rgba(217,165,33,0)); } .tsumo-fx.fx-dora .tsumo-fx-spark { color: #fff6d8; text-shadow: 0 0 10px #d9a521; } /* ---- 焔「大物手の焔」: 1巡目にしか張れない＝窓が開いているのは今だけ（§11-2-1 #4） ---- */ .btn-ability.ability-window { animation: flameWindow 1.15s ease-in-out infinite; } @keyframes flameWindow { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,85,43,0); } 50% { box-shadow: 0 0 0 3px rgba(224,85,43,.38), 0 0 16px rgba(224,85,43,.55); } } /* ========================================================================== 沼田 蓮「泥中の蓮」が咲いた和了（§11-2-3 #4）— 本作でいちばん地味な手に、 いちばん綺麗な絵を当てる＝派手さの反転。泥の水面が満ちて、中央に蓮がひらく。 文字より後ろ（z-index 1）で咲かせて、点数表示の邪魔をしない。 ========================================================================== */ .lotus-bloom .win-rich::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 1; background: linear-gradient(0deg, rgba(58,47,24,.72), rgba(42,34,20,.32) 62%, transparent); animation: lotusWater 1.1s ease-out .15s forwards; } @keyframes lotusWater { from { height: 0; } to { height: 38%; } } .lotus-bloom .win-rich::after { content: ""; position: absolute; left: 50%; bottom: 12%; z-index: 1; width: 128px; height: 128px; margin-left: -64px; transform: scale(.2); opacity: 0; border-radius: 50%; background: radial-gradient(circle at 50% 58%, #fff6f9 0 12%, rgba(255,246,249,0) 42%), conic-gradient(from 0deg, #f3b9cd 0 8%, rgba(243,185,205,.12) 8% 12.5%, #efaec5 12.5% 20.5%, rgba(243,185,205,.12) 20.5% 25%, #f3b9cd 25% 33%, rgba(243,185,205,.12) 33% 37.5%, #efaec5 37.5% 45.5%, rgba(243,185,205,.12) 45.5% 50%, #f3b9cd 50% 58%, rgba(243,185,205,.12) 58% 62.5%, #efaec5 62.5% 70.5%, rgba(243,185,205,.12) 70.5% 75%, #f3b9cd 75% 83%, rgba(243,185,205,.12) 83% 87.5%, #efaec5 87.5% 95.5%, rgba(243,185,205,.12) 95.5% 100%); filter: drop-shadow(0 0 18px rgba(243,185,205,.55)); animation: lotusOpen 1.4s cubic-bezier(.2,.9,.3,1) .5s forwards; } @keyframes lotusOpen { 0% { opacity: 0; transform: scale(.2) rotate(-18deg); } 55% { opacity: .95; transform: scale(1.12) rotate(4deg); } 100% { opacity: .82; transform: scale(1) rotate(0deg); } } /* リコール・ディール（エージェント・RE）: 取り戻す光と手放す光がすれ違う */ .recall-dot { position: absolute; z-index: 26; pointer-events: none; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; transition: left .46s cubic-bezier(.35,.05,.25,1), top .46s cubic-bezier(.35,.05,.25,1), opacity .3s ease; } .recall-dot.in { background: radial-gradient(circle, #eaf2f8, #7f8c99 55%, #7f8c9900 70%); box-shadow: 0 0 12px #b8c6d2, 0 0 26px #7f8c9966; } .recall-dot.out { background: radial-gradient(circle, #cfe0ee, #4a6d8e 55%, #4a6d8e00 70%); box-shadow: 0 0 10px #4a6d8e, 0 0 22px #4a6d8e55; } /* ============================================================================ 篠宮 栞「答え合わせ」— 対局後に一度だけ開く黒板 模範解答は“プレイヤーを賢くする道具”なので、放っておくと誰の能力でもよくなる。 だから対局のあとに彼女が一言だけ返す。取り上げるのは正答率ではなく、 「わたしが選ばなかった牌」を切ったその一打（docs/character-ingame-fx-plan.md 2-4）。 ========================================================================== */ .shiori-review { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: #04080699; backdrop-filter: blur(2px); animation: srIn .3s ease-out both; } .shiori-review.hidden { display: none; } @keyframes srIn { from { opacity: 0; } to { opacity: 1; } } .sr-card { position: relative; display: flex; align-items: stretch; gap: 0; width: min(560px, 86%); min-height: 196px; background: linear-gradient(180deg, #2b4238, #1e302a); border: 5px solid #6b4a2f; border-radius: 6px; box-shadow: 0 18px 50px #000b, inset 0 0 30px #00000055; overflow: hidden; animation: srCard .34s cubic-bezier(.2,.8,.3,1) both; } @keyframes srCard { from { transform: translateY(14px) scale(.97); } to { transform: none; } } .sr-portrait { width: 148px; flex: none; overflow: hidden; background: #16241f; position: relative; } /* 立ち絵は fillPortrait（相棒ボードと同じ imagePos）で入れたうえで、この枠では顔に寄せる。 absolute で敷くことでカードの高さは本文（黒板の文章）が決め、絵が縦に引き伸ばさない。 裾のマスクは黒板側では不要なので打ち消す。 */ .sr-portrait .self-portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; -webkit-mask-image: none; mask-image: none; } .sr-body { flex: 1 1 auto; padding: 14px 16px 13px; color: #f2f7f2; text-shadow: 0 1px 0 #00000055; } .sr-head { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #dff0e6; margin-bottom: 8px; } .sr-head::before { content: ""; width: 12px; height: 3px; border-radius: 1px; background: #f4f7f2; box-shadow: 0 0 4px #ffffff66; } .sr-line { font-size: 14px; line-height: 1.75; } .sr-tile { display: inline-block; margin: 0 2px; padding: 1px 7px; border: 1px solid #7fe0c2; border-radius: 4px; color: #d7fff0; font-weight: 800; } .sr-sub { margin-top: 9px; font-size: 11px; color: #a8c4b6; letter-spacing: .03em; } .sr-close { margin-top: 12px; background: #2f9e7e; border: none; border-radius: 6px; color: #06231a; font-weight: 800; font-size: 13px; padding: 7px 16px; cursor: pointer; } .sr-close:hover { background: #3fb894; } /* 常時能力の常設バッジ: 立ち絵の左上に重ね、手番に関係なく見せる。空なら畳む。 */ .self-abilities { position: absolute; left: 8px; top: 8px; right: 8px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; } .self-abilities:empty { display: none; } .self-ability { max-width: 100%; background: #0b1410e0; border: 1px solid color-mix(in srgb, var(--accent) 30%, #2f4a3b); border-radius: 9px; padding: 4px 8px; box-shadow: 0 4px 12px #0008; font-size: 12px; color: #eef3ef; backdrop-filter: blur(2px); } /* ---- win screen: centered overlay + sequential yaku reveal ---- */ .win-overlay { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; /* reserve the right-side space for the bust-up; the card centers in the rest */ box-sizing: border-box; padding-right: 36%; background: rgba(8, 14, 11, 0.55); backdrop-filter: blur(2px); } .win-card { min-width: 360px; max-width: 80%; background: #16241cf2; border: 3px solid var(--accent); border-radius: 18px; padding: 26px 34px; text-align: center; box-shadow: 0 12px 48px #000b; animation: winCardIn .35s ease; } @keyframes winCardIn { 0% { transform: scale(0.8) translateY(12px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } } /* Bust-up: floats large in the right-side space, outside the card. */ .win-portrait, .win-portrait-fallback { position: absolute; right: clamp(8px, 3%, 48px); bottom: 0; margin: 0; z-index: 1; animation: winCardIn .35s ease; } .win-portrait { height: 98%; width: auto; max-width: 34%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 10px 30px #000d); } .win-portrait-fallback { width: 32%; max-width: 340px; min-width: 200px; height: 90%; max-height: 620px; display: flex; align-items: center; justify-content: center; font-size: 140px; font-weight: 800; color: #0c150f; border-radius: 16px; background: linear-gradient(160deg, var(--char-color), #0c150f); border: 3px solid var(--char-color); box-shadow: 0 10px 30px #000a; } .win-how { font-size: 18px; color: var(--muted); font-weight: 700; } .win-title { margin: 4px 0 14px; font-size: 34px; font-weight: 800; } .win-sub { font-size: 15px; color: var(--muted); } /* ---- winning hand row on the result screen ---- */ .win-hand { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 10px; margin: 6px auto 14px; max-width: 560px; } .win-hand-concealed, .win-hand-agari, .win-hand-melds, .win-meld { display: flex; align-items: flex-end; gap: 1px; } .win-hand-melds { gap: 8px; } .win-tile { height: 34px; width: auto; border-radius: 3px; background: #fff; box-shadow: 0 2px 5px #0007; } .win-tile-agari { margin-left: 2px; box-shadow: 0 0 0 2px var(--accent), 0 2px 6px #0008; transform: translateY(-4px); } .yaku-list { list-style: none; margin: 14px auto; padding: 0; max-width: 340px; } .yaku-item { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 14px; margin: 6px 0; border-radius: 7px; background: #14201988; border-left: 3px solid var(--accent); opacity: 0; transform: translateX(-12px); transition: opacity .28s ease, transform .28s ease; } .yaku-item.show { opacity: 1; transform: translateX(0); } .yaku-item .yaku-name { font-size: 17px; font-weight: 600; color: var(--ink); } .yaku-item .yaku-han { font-size: 16px; color: var(--accent); font-weight: 700; } .win-score { font-size: 32px; font-weight: 800; color: var(--accent); margin: 14px 0 4px; } .win-score.pop { animation: scorePop .42s ease; } @keyframes scorePop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.14); } 100% { transform: scale(1); opacity: 1; } } .win-buttons { margin-top: 16px; display: flex; gap: 12px; justify-content: center; } .win-buttons button { font-size: 16px; font-weight: 700; padding: 10px 24px; border-radius: 10px; border: 2px solid #0003; cursor: pointer; color: #1a120a; } .win-buttons .btn-tsumo { background: var(--accent); } .win-buttons .skip-reveal { background: #b9c6bf; } .rank-list { margin: 12px 0; } .rank-row { display: flex; justify-content: space-between; gap: 28px; font-size: 18px; padding: 6px 4px; border-bottom: 1px solid #ffffff10; } /* ---- naki call banner (ポン/チー/カン) + point deltas ---- */ .naki-fx, .point-fx { position: absolute; inset: 0; pointer-events: none; z-index: 25; } .naki-call { position: absolute; transform: translate(-50%, -50%) scale(0.4); font-size: 52px; font-weight: 900; color: #fff; text-shadow: 0 0 12px #000, 0 3px 6px #000, 0 0 24px var(--accent); -webkit-text-stroke: 2px #c0392b; opacity: 0; transition: transform .22s cubic-bezier(.2,1.4,.4,1), opacity .22s ease; } .naki-call.show { opacity: 1; transform: translate(-50%, -50%) scale(1); } .naki-call.win-call { font-size: 68px; -webkit-text-stroke: 3px #b8860b; text-shadow: 0 0 16px #000, 0 4px 8px #000, 0 0 32px #ffd34d; color: #fff7e0; } .point-delta { position: absolute; transform: translate(-50%, -50%); font-size: 30px; font-weight: 900; text-shadow: 0 0 8px #000, 0 2px 4px #000; opacity: 0; transition: transform .9s ease, opacity .9s ease; } .point-delta.plus { color: #62e08a; } .point-delta.minus { color: #ff6b81; } .point-delta.show { opacity: 1; transform: translate(-50%, -130%); } /* ---- ability cut-in: bust-up + big skill name sweeps across, holds, sweeps off ---- */ .ability-cutin { position: absolute; inset: 0; z-index: 28; pointer-events: none; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* ===== 能力発動カットイン（variant="bold"）: 雀荘の能力発動と同じ「大きな立ち絵＋斜め ウォッシュ」。立ち絵は画面の高さいっぱい・右下アンカーでドンと出す。入場→ホールド→退場の 3拍を --cut-dur（JS が渡す表示時間）にぴったり合わせる。 ===== */ .cutin-band[data-variant="bold"] { position: absolute; inset: 0; overflow: hidden; } .cutin-band[data-variant="bold"] .cutin-bandbg { position: absolute; inset: -2% -4%; background: linear-gradient(115deg, transparent 0%, rgba(11,21,16,.82) 34%, color-mix(in srgb, var(--char-color) 55%, #0b1510) 50%, rgba(11,21,16,.82) 66%, transparent 100%); transform: translateX(-30%) skewX(-8deg); animation: cutinBand var(--cut-dur, 1.6s) cubic-bezier(.2,.7,.2,1) forwards; } .cutin-band[data-variant="bold"] .cutin-portrait { position: absolute; right: 6%; bottom: 0; height: 100%; max-width: 50%; width: auto; object-fit: contain; object-position: bottom; filter: drop-shadow(0 0 28px color-mix(in srgb, var(--char-color) 55%, transparent)) drop-shadow(0 10px 22px #000d); animation: cutinImg var(--cut-dur, 1.6s) cubic-bezier(.18,.8,.2,1) forwards; } .cutin-band[data-variant="bold"] .cutin-portrait-fallback { display: flex; align-items: flex-end; justify-content: center; overflow: hidden; height: 86%; width: 32%; max-width: 360px; border-radius: 16px 16px 0 0; font-size: 160px; font-weight: 800; color: #0c150f; line-height: 1.2; background: linear-gradient(160deg, var(--char-color), #0c150f); border: 3px solid #ffffffcc; border-bottom: none; } .cutin-band[data-variant="bold"] .cutin-text { position: absolute; left: 7%; top: 50%; transform: translateY(-50%); text-align: left; color: #fff; text-shadow: 0 3px 12px rgba(0,0,0,.85); animation: cutinTxt var(--cut-dur, 1.6s) cubic-bezier(.18,.8,.2,1) forwards; } .cutin-band[data-variant="bold"] .cutin-char { font-size: 28px; font-weight: 800; letter-spacing: .12em; text-shadow: 0 2px 8px #000c; } .cutin-band[data-variant="bold"] .cutin-name { font-size: 76px; font-weight: 900; letter-spacing: 2px; line-height: 1.02; color: #fff; text-shadow: 0 0 16px #000, 0 4px 12px #000; -webkit-text-stroke: 2px #0009; } /* 能力カットインの副題＝「その能力が“自分に”何をするのか」の一行。技名より一段落とし、 読める長さの文として見せる（旧36pxの大書きは未使用のまま残っていた値）。 */ .cutin-band[data-variant="bold"] .cutin-sub { font-size: 19px; font-weight: 700; letter-spacing: 1px; margin-top: 10px; color: #ffe9a8; text-shadow: 0 0 10px #000, 0 2px 6px #000; max-width: calc(var(--stage-w) * 0.55); /* 固定ステージ基準（vw はスケールと無関係になる） */ } @keyframes cutinBand { 0% { transform: translateX(-58%) skewX(-8deg); opacity: 0; } 12% { transform: translateX(0) skewX(-8deg); opacity: 1; } 82% { transform: translateX(0) skewX(-8deg); opacity: 1; } 100% { transform: translateX(42%) skewX(-8deg); opacity: 0; } } @keyframes cutinImg { 0% { transform: translateX(72%) scale(1.05); opacity: 0; } 16% { transform: translateX(0) scale(1); opacity: 1; } 82% { transform: translateX(0) scale(1); opacity: 1; } 100% { transform: translateX(-10%) scale(1.02); opacity: 0; } } @keyframes cutinTxt { 0% { transform: translateY(-50%) translateX(-52px); opacity: 0; } 18% { transform: translateY(-50%) translateX(0); opacity: 1; } 82% { transform: translateY(-50%) translateX(0); opacity: 1; } 100% { transform: translateY(-50%) translateX(-28px); opacity: 0; } } /* ===== 満貫以上の和了カットイン（variant="band"）: 旧カットイン＝横帯＋バストアップ ===== */ .cutin-band[data-variant="band"] { display: flex; align-items: center; gap: 28px; width: 130%; padding: 16px 48px; transform: skewX(-8deg); background: linear-gradient(100deg, #0b1510f2 0%, #0b1510cc 30%, color-mix(in srgb, var(--char-color) 55%, #0b1510) 50%, #0b1510cc 70%, #0b1510f2 100%); border-top: 3px solid #ffffffcc; border-bottom: 3px solid #ffffffcc; box-shadow: 0 18px 60px #000c, 0 0 40px var(--char-color); animation: cutinSweep var(--cut-dur, 1.7s) cubic-bezier(.2,.8,.2,1) forwards; } .cutin-band[data-variant="band"] .cutin-bandbg { display: none; } .cutin-band[data-variant="band"] .cutin-portrait { transform: skewX(8deg); height: 210px; width: auto; max-width: 220px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 8px 18px #000c); } .cutin-band[data-variant="band"] .cutin-portrait-fallback { transform: skewX(8deg); width: 160px; height: 200px; display: flex; align-items: center; justify-content: center; font-size: 104px; font-weight: 800; color: #0c150f; border-radius: 14px; background: linear-gradient(160deg, var(--char-color), #0c150f); border: 3px solid #ffffffcc; } .cutin-band[data-variant="band"] .cutin-text { transform: skewX(8deg); text-align: left; color: #fff; } .cutin-band[data-variant="band"] .cutin-char { font-size: 24px; font-weight: 800; text-shadow: 0 2px 8px #000c; } .cutin-band[data-variant="band"] .cutin-name { font-size: 60px; font-weight: 900; letter-spacing: 2px; line-height: 1.05; color: #fff; text-shadow: 0 0 14px #000, 0 4px 10px #000; -webkit-text-stroke: 2px #0009; } .cutin-band[data-variant="band"] .cutin-sub { font-size: 30px; font-weight: 900; letter-spacing: 4px; margin-top: 2px; color: #ffe9a8; text-shadow: 0 0 10px #000, 0 3px 8px #000; } @keyframes cutinSweep { 0% { transform: translateX(115%) skewX(-8deg); opacity: 0; } 14% { transform: translateX(0) skewX(-8deg); opacity: 1; } 82% { transform: translateX(0) skewX(-8deg); opacity: 1; } 100% { transform: translateX(-125%) skewX(-8deg); opacity: 0; } } /* リーチ宣言テロップ（ポン/カンと同系、金赤）。 */ .naki-call.riichi-call { font-size: 60px; -webkit-text-stroke: 3px #b8860b; color: #fff3d0; text-shadow: 0 0 14px #000, 0 4px 8px #000, 0 0 28px #ffd34d; } /* 北抜きテロップ（三麻の抜きドラ。ポン/チーと同系、青銀＝北風の色）。 */ .naki-call.kita-call { -webkit-text-stroke: 2px #2e6da4; text-shadow: 0 0 12px #000, 0 3px 6px #000, 0 0 24px #7ec8ff; } /* ===== 役満 専用の特別演出（長尺・新演出） ===== 回転する金光のレイ → 開幕の白フラッシュ → 立ち絵が下からせり上がり金のオーラ → 「役満」の大書きがスラム → 役名 → 勝者名。最後に全体をフェードアウト。 */ .yakuman-fx { position: absolute; inset: 0; overflow: hidden; animation: ymOut .5s ease-in 3.3s forwards; } @keyframes ymOut { to { opacity: 0; } } .yakuman-fx .ym-rays { position: absolute; left: 50%; top: 52%; width: 220vmax; height: 220vmax; transform: translate(-50%,-50%); background: repeating-conic-gradient(from 0deg, rgba(255,207,94,0) 0deg, rgba(255,207,94,.22) 4deg, rgba(255,207,94,0) 8deg); opacity: 0; animation: ymRays 3.8s linear forwards; } @keyframes ymRays { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(0deg); } 14% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%,-50%) rotate(50deg); } } .yakuman-fx .ym-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, #fff 0%, #fff6d8 26%, transparent 70%); opacity: 0; animation: ymFlash 1s ease-out forwards; } @keyframes ymFlash { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } } .yakuman-fx .ym-portrait { position: absolute; right: 7%; bottom: 0; height: 102%; max-width: 52%; width: auto; object-fit: contain; object-position: bottom; filter: drop-shadow(0 0 48px #ffcf5e) drop-shadow(0 10px 26px #000d); opacity: 0; animation: ymPortrait 3.8s cubic-bezier(.16,.8,.2,1) forwards; } .yakuman-fx .ym-portrait-fallback { display: flex; align-items: flex-end; justify-content: center; overflow: hidden; height: 88%; width: 34%; max-width: 380px; border-radius: 16px 16px 0 0; font-size: 170px; font-weight: 800; color: #0c150f; line-height: 1.2; background: linear-gradient(160deg, var(--char-color), #0c150f); border: 3px solid #ffd86b; border-bottom: none; } @keyframes ymPortrait { 0% { opacity: 0; transform: translate(8%,16%) scale(1.08); } 14% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 1; transform: translate(0,0) scale(1); } } .yakuman-fx .ym-center { position: absolute; left: 8%; top: 50%; transform: translateY(-50%); max-width: 48%; text-align: left; text-shadow: 0 3px 14px rgba(0,0,0,.9); } .yakuman-fx .ym-how { font-size: 30px; font-weight: 800; letter-spacing: .2em; color: #ffe9a8; opacity: 0; animation: ymFade .5s ease-out .35s forwards; } .yakuman-fx .ym-title { font-size: 108px; font-weight: 900; letter-spacing: 6px; line-height: 1; margin: 2px 0; white-space: nowrap; background: linear-gradient(180deg, #fff6cf 0%, #ffd770 48%, #b8860b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff6d0; filter: drop-shadow(0 0 18px #ffcf5e) drop-shadow(0 4px 10px #000); opacity: 0; transform: scale(2.2); transform-origin: left center; animation: ymSlam .6s cubic-bezier(.2,1.3,.3,1) .7s forwards; } @keyframes ymSlam { 0% { opacity: 0; transform: scale(2.2); } 60% { opacity: 1; transform: scale(.94); } 100% { opacity: 1; transform: scale(1); } } .yakuman-fx .ym-name { font-size: 50px; font-weight: 900; letter-spacing: 4px; color: #fff; line-height: 1.1; text-shadow: 0 0 14px #000, 0 4px 10px #000; -webkit-text-stroke: 1.5px #0009; opacity: 0; transform: translateX(-30px); animation: ymSlideIn .6s cubic-bezier(.18,.8,.2,1) 1.3s forwards; } .yakuman-fx .ym-who { font-size: 26px; font-weight: 800; letter-spacing: .14em; margin-top: 8px; opacity: 0; animation: ymFade .5s ease-out 1.7s forwards; } @keyframes ymFade { to { opacity: 1; } } @keyframes ymSlideIn { to { opacity: 1; transform: translateX(0); } } /* ---- DEBUG: ホームの 🐛 ボタン＋演出プレビューメニュー（?debug=tsumoreba 時のみ） ---- */ .debug-fab { position: absolute; left: 14px; bottom: 14px; z-index: 30; background: #3a1d2b; color: #ffd9a0; border: 1px solid #7a3f55; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 800; cursor: pointer; } .debug-fab:hover { background: #4a2536; } .dbg-overlay { position: absolute; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(6,10,8,.72); } .dbg-panel { position: relative; z-index: 2; width: 560px; max-width: 92%; max-height: 88%; overflow: auto; background: #16241cf2; border: 2px solid var(--accent); border-radius: 14px; padding: 18px 20px; color: var(--ink); box-shadow: 0 20px 60px #000a; backdrop-filter: blur(3px); } .dbg-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 18px; color: var(--accent); margin-bottom: 12px; } .dbg-close { background: none; border: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; } .dbg-close:hover { color: var(--ink); } .dbg-sec { font-size: 13px; color: var(--muted); margin: 14px 0 8px; border-bottom: 1px solid #ffffff14; padding-bottom: 4px; } .dbg-row { display: flex; align-items: center; gap: 8px; margin: 10px 0; flex-wrap: wrap; } .dbg-row label { font-size: 13px; color: var(--muted); min-width: 92px; } .dbg-overlay select { background: #0e1a14; color: var(--ink); border: 1px solid var(--accent); border-radius: 7px; padding: 6px 8px; font-size: 13px; cursor: pointer; } .dbg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .dbg-btn { background: #244b39; color: #eaf3ee; border: 1px solid #3c6b50; border-radius: 8px; padding: 9px 10px; font-size: 13px; font-weight: 700; cursor: pointer; } .dbg-btn:hover { background: #2f6049; } .dbg-mini { padding: 7px 14px; } .dbg-note { font-size: 11px; color: var(--muted); margin-top: 14px; } /* 演出 FX host はパネルの上・全画面。立ち絵カットイン/席バナーをそのまま再生する。 */ .dbg-overlay > .naki-fx, .dbg-overlay > .ability-cutin { position: absolute; inset: 0; } /* ---- settings (gear icon + volume panel) ---- */ .settings-btn { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; border: 2px solid #ffffff22; background: #1a2c23cc; color: #cfe0d6; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .15s ease, background .15s ease, color .15s ease; z-index: 20; backdrop-filter: blur(2px); } .settings-btn:hover { background: #244b39cc; color: var(--accent); transform: rotate(40deg); } .settings-panel { position: absolute; top: 64px; right: 14px; width: 260px; background: #1a2c23ee; border: 2px solid var(--accent); border-radius: 12px; padding: 14px 16px; color: var(--ink); z-index: 21; box-shadow: 0 6px 20px #0008; backdrop-filter: blur(2px); } .settings-header { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 15px; color: var(--accent); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #ffffff14; } .settings-header button { background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; } .settings-header button:hover { color: var(--ink); } .settings-row { margin: 12px 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .settings-row-inline { flex-direction: row; align-items: center; gap: 8px; } .settings-label { display: flex; justify-content: space-between; align-items: center; color: var(--muted); } .vol-val { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; } .settings-row input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; } .settings-row input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; } .settings-row label { cursor: pointer; } /* note: the fixed stage (app/stage.js) scales the whole 1280x720 layout to fit any window, so the old viewport-based responsive rules for the game/select screens were removed — the stage handles "small window" by scaling down. On portrait phones the stage additionally rotates 90° (see stage.js) so the landscape game is playable without turning the device, hence no "rotate to landscape" prompt is needed. */ /* ============================================================================ 購入UIセット（gameUIset_19）全体スキン — 和風(青海波＋金枠)テーマ 画像は graphic/ui/sc/ に集約。後方互換のため末尾追記（後勝ちで既存定義を上書き）。 ・汎用ボタン枠 = button_rectangle_01 を 9スライス(border-image, fill)で任意サイズへ ・パネル枠 = window_01_01 を 9スライス(枠のみ)＝既存の暗色背景に金縁を付与 ・全画面背景 = background.png(1280×720) ・HPゲージ/チェック/スライダー/設定アイコン = 専用素材へ差し替え ※在ゲームの行動ボタン(ツモ/ロン/ポン…)は色分けが機能なので対象外。 ============================================================================ */ /* --- 全画面背景 --- */ #app { background-color: #15110d; background-image: url("graphic/ui/sc/bg.png"); background-size: cover; background-position: center; } /* --- 汎用ボタン枠（9スライス＋中央塗り）--- */ .menu-btn, .ghost-back, button.primary, button.secondary, .mode-btn, .sclist-row { background: none; border: 12px solid transparent; border-image: url("graphic/ui/sc/btn.png") 11 15 fill / 12px 15px / 0 stretch; border-radius: 0; box-shadow: none; color: var(--ink); } .menu-btn:hover:not(:disabled), .ghost-back:hover, button.primary:hover:not(:disabled), button.secondary:hover, .mode-btn:hover, .sclist-row:hover:not(:disabled) { border-image-source: url("graphic/ui/sc/btn_hover.png"); background: none; transform: translateY(-1px); } .menu-btn:disabled, button.primary:disabled, .sclist-row:disabled { opacity: .5; transform: none; } button.primary { color: var(--accent); font-weight: 800; } button.secondary { color: var(--ink); } /* セグメント(人数/対局方式)は枠を個別ボタン化。選択中は点灯枠＋金文字。 */ .mode-toggle { border: 0; border-radius: 0; overflow: visible; gap: 6px; } .mode-btn { color: var(--muted); } .mode-btn + .mode-btn { border-left: 12px solid transparent; } .mode-btn.selected { border-image-source: url("graphic/ui/sc/btn_hover.png"); background: none; color: var(--accent); } /* シナリオ一覧: 覇道編(青)の区別は内側の青リングで維持。 */ .sclist-row.is-kouhen { background: none; box-shadow: inset 0 0 0 2px rgba(91,134,196,.9); } .sclist-row.is-kouhen:hover:not(:disabled) { box-shadow: inset 0 0 0 2px rgba(127,168,218,1); } /* --- パネル枠（金縁・中央は既存の暗色背景を温存）--- */ .settings-card, .settings-panel, .char-detail, .win-card { border: 16px solid transparent; /* fill を付けない＝金縁だけ採用し、中央は各パネル従来の暗色背景を温存（可読性優先）。 */ border-image: url("graphic/ui/sc/panel.png") 18 / 16px / 0 stretch; border-radius: 0; } .settings-card { background: rgba(20,32,26,.94); } .settings-panel { background: rgba(20,32,26,.97); } .char-detail { background: rgba(20,32,26,.86); } /* --- HPゲージ（detail パネル）= ヘルスゲージ素材へ --- */ .g-pips { background: url("graphic/ui/sc/gauge_base.png") no-repeat center / 100% 100%; padding: 4px 7px; gap: 3px; } .pip { background: #34211a; border-radius: 1px; box-shadow: none; } .pip.on { background: linear-gradient(#b5413f, #7c2422); box-shadow: none; } /* --- 設定: チェックボックス／スライダー差し替え --- */ .settings-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; margin: 0; background: url("graphic/ui/sc/check_off.png") center / contain no-repeat; cursor: pointer; } .settings-row input[type="checkbox"]:checked { background-image: url("graphic/ui/sc/check_on.png"); } .settings-row input[type="range"] { -webkit-appearance: none; appearance: none; height: 26px; background: transparent; cursor: pointer; } .settings-row input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: url("graphic/ui/sc/slider_base.png") no-repeat center / 100% 8px; } .settings-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; background: url("graphic/ui/sc/slider_handle.png") center / contain no-repeat; border: 0; } .settings-row input[type="range"]::-moz-range-track { height: 8px; background: url("graphic/ui/sc/slider_base.png") no-repeat center / 100% 8px; } .settings-row input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; background: url("graphic/ui/sc/slider_handle.png") center / contain no-repeat; border: 0; } /* --- 在ゲームの設定(⚙) = config アイコンへ --- */ .settings-btn { background: url("graphic/ui/sc/btn_config.png") center / contain no-repeat; border: 0; color: transparent; font-size: 0; width: 46px; height: 48px; } .settings-btn:hover { background: url("graphic/ui/sc/btn_config_hover.png") center / contain no-repeat; color: transparent; transform: none; } /* 選択画面: 固定ステージ(720px)に収めるため上下パディング/見出し余白/ロスター間隔を圧縮。 ②キャラのステップはロスター＋詳細＋席バーで縦が詰まりやすいので特に効く。 */ #select-screen { padding-top: 14px; padding-bottom: 14px; } #select-screen .select-head { margin-bottom: 8px; } #select-screen .char-list { gap: 10px; } #select-screen .role-header { margin-bottom: 4px; } /* ============================================================================ 購入UIセット 第2弾スイープ — 見出しプレート / 結果画面 / シナリオ / キャラ選択 ============================================================================ */ /* --- ① 画面見出しの統一プレート化（text_plate を 9スライス）--- */ .menu-head h1, .mentor-h1, #select-screen .select-head h1 { display: inline-block; margin: 4px auto; padding: 2px 24px; font-size: 28px; white-space: nowrap; line-height: 1.15; border: 11px solid transparent; border-image: url("graphic/ui/sc/plate.png") 14 18 fill / 11px 16px / 0 stretch; border-radius: 0; color: #f4e3b4; text-shadow: 0 2px 4px rgba(0,0,0,.7); } /* 見出しプレート化に伴う上部の詰め（選択画面は情報量が多いので余白を最小化）。 */ #select-screen .select-head { margin-bottom: 6px; } .menu-head h1 small { color: var(--accent); } /* --- ② 結果画面の作り込み --- */ /* 対局終了の順位行を木目プレートに。 */ .rank-list { display: flex; flex-direction: column; gap: 8px; margin: 14px auto; max-width: 460px; } .rank-row { border: 11px solid transparent; border-image: url("graphic/ui/sc/btn.png") 11 15 fill / 11px 15px / 0 stretch; border-radius: 0; font-size: 18px; padding: 6px 6px; } /* 役行は金縁を強めて読みやすく。 */ .yaku-item { background: rgba(20,32,25,.86); border-left-color: var(--accent); border-radius: 0; } /* 勝利タイトル・スコアに金の発光を添える。 */ .win-title { text-shadow: 0 2px 8px rgba(0,0,0,.6), 0 0 18px rgba(246,179,82,.25); } /* スコアは木目プレートに乗せて要点を強調（リッチ化）。 */ .win-score { display: inline-block; padding: 4px 30px; border: 13px solid transparent; border-image: url("graphic/ui/sc/plate.png") 14 18 fill / 13px 18px / 0 stretch; border-radius: 0; color: #f6e7b6; text-shadow: 0 0 16px rgba(246,179,82,.45), 0 2px 4px rgba(0,0,0,.7); } /* 結果画面のボタンも木目枠に統一（色は据え置きで視認性確保）。 */ .win-buttons button { border: 12px solid transparent; border-image: url("graphic/ui/sc/btn.png") 11 15 fill / 12px 15px / 0 stretch; border-radius: 0; background: none; color: var(--accent); font-weight: 800; } .win-buttons button:hover { border-image-source: url("graphic/ui/sc/btn_hover.png"); } /* アビリティ・カットインの帯を白→金縁へ。 */ .cutin-band { border-top-color: var(--accent); border-bottom-color: var(--accent); } /* --- ③ シナリオ周りの仕上げ --- */ /* 一覧の「NEW」に新着アイコン(!)を前置。 */ .sclist-status.is-new::before { content: ""; display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; background: url("graphic/ui/sc/new_icon.png") no-repeat center / contain; } /* ソウル残高チップを金縁プレート化。 */ .mh-soul, .growth-soul { border: 11px solid transparent; border-image: url("graphic/ui/sc/btn.png") 11 15 fill / 11px 15px / 0 stretch; border-radius: 0; background: none; } /* --- ④ キャラ選択の作り込み --- */ /* ロール見出しはタブ素材を「背景」で敷く（border-image だと箱が太り一覧が縦に伸びるため、 レイアウト高を変えない背景方式にする）。 */ .role-name { background: url("graphic/ui/sc/tab.png") no-repeat left center / 100% 100%; color: #f4e3b4; border: 0; border-radius: 0; padding: 4px 18px; text-shadow: 0 1px 2px rgba(0,0,0,.7); } /* キャラカードは枠を太らせず、金のリング＋選択時のロール色リングで装飾（多数並ぶので高さ据え置き）。 */ .char-card { border-color: rgba(246,179,82,.5); } .char-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.4); } .char-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--role) 60%, transparent); } /* ===================== 対局開始演出（全対局共通） ===================== */ #match-intro-screen { position: absolute; inset: 0; padding: 0; overflow: hidden; cursor: pointer; user-select: none; z-index: 50; } .match-intro { position: absolute; inset: 0; background: radial-gradient(circle at 50% 18%, rgba(246,210,100,.10), transparent 60%), linear-gradient(160deg, #1b2536 0%, #2d3c54 55%, #0e151f 100%); } .mi-phase { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .mi-skip { position: absolute; right: 18px; bottom: 16px; z-index: 30; background: rgba(10,14,12,.55); color: #f4e3b4; border: 1px solid rgba(246,210,100,.5); border-radius: 999px; padding: 8px 18px; font-size: 14px; cursor: pointer; transition: background .15s, transform .1s; } .mi-skip:hover { background: rgba(20,28,24,.8); transform: translateY(-1px); } /* ---- Phase A: VS 対戦カード ---- */ .mi-modebar { position: absolute; top: 28px; display: flex; gap: 12px; z-index: 4; } .mi-badge { background: rgba(8,12,18,.6); color: #f4e3b4; border: 1px solid rgba(246,210,100,.55); border-radius: 999px; padding: 6px 18px; font-size: 15px; font-weight: 700; letter-spacing: .06em; text-shadow: 0 1px 2px rgba(0,0,0,.6); } .mi-vs { position: absolute; top: 44%; left: 50%; z-index: 3; pointer-events: none; transform: translate(-50%,-50%) scale(.4); opacity: 0; font-size: 200px; font-weight: 900; font-style: italic; color: rgba(246,210,100,.9); mix-blend-mode: screen; text-shadow: 0 0 40px rgba(246,210,100,.6), 0 6px 18px rgba(0,0,0,.7); transition: transform .5s cubic-bezier(.2,1.3,.4,1), opacity .5s; } .mi-vs.in { transform: translate(-50%,-50%) scale(1); opacity: .22; } .mi-cards { display: flex; gap: 18px; align-items: flex-end; justify-content: center; z-index: 2; } .mi-card { width: 224px; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, rgba(20,28,24,.4), rgba(8,12,10,.85)); border: 2px solid color-mix(in srgb, var(--role) 55%, #2a3f34); box-shadow: 0 10px 26px rgba(0,0,0,.45); opacity: 0; transform: translateY(40px) scale(.96); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.9,.3,1); } .mi-card:nth-child(odd) { transform: translateY(40px) translateX(-26px) scale(.96); } .mi-card:nth-child(even) { transform: translateY(40px) translateX(26px) scale(.96); } .mi-card.in { opacity: 1; transform: translateY(0) translateX(0) scale(1); } .mi-card.is-human { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(246,210,100,.4), 0 12px 28px rgba(0,0,0,.5); } .mi-card-art { position: relative; height: 286px; background: #0a0e0c; overflow: hidden; /* 立ち絵ズーム(scale)を枠内にクリップ＝名前欄へはみ出さない */ } .mi-card-portrait { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } /* モブの立ち絵（黒シルエット）は対局時の表示に限り灰背景を敷く。透過部に色が出るので felt/暗カードに溶けず輪郭が分かる。シナリオ登場時は別経路で描くため影響しない。 */ .mi-mob-bg { background-color: #b8bcc4; } .mi-art-fallback { display: flex; align-items: center; justify-content: center; font-size: 80px; font-weight: 800; color: rgba(255,255,255,.85); } .mi-card-info { position: relative; padding: 10px 12px 14px; text-align: center; } .mi-card-reading { font-size: 12px; color: var(--muted); letter-spacing: .08em; min-height: 14px; } .mi-card-name { font-size: 22px; font-weight: 800; line-height: 1.15; text-shadow: 0 1px 2px rgba(0,0,0,.5); } .mi-card-role { display: inline-block; margin: 6px 0 8px; font-size: 12px; font-weight: 700; color: var(--role); border: 1px solid color-mix(in srgb, var(--role) 60%, transparent); background: color-mix(in srgb, var(--role) 16%, transparent); border-radius: 999px; padding: 2px 12px; } .mi-hp { display: flex; align-items: center; justify-content: center; gap: 8px; } .mi-hp-pips { display: inline-flex; gap: 3px; } .mi-pip { width: 14px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.16); } .mi-pip.on { background: var(--accent); } .mi-hp-val { font-size: 13px; font-weight: 700; color: #cfe0d6; } .mi-card-you { position: absolute; top: -12px; right: 10px; background: var(--accent); color: #1a1a1a; font-weight: 900; font-size: 12px; border-radius: 6px; padding: 2px 8px; box-shadow: 0 2px 6px rgba(0,0,0,.4); } /* 通信対戦カード: ユーザー名＋段位を主役に、持ちキャラ（推し）を添える */ .mi-card-username { font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1.15; text-shadow: 0 1px 2px rgba(0,0,0,.5); word-break: break-word; } .mi-card-dan { display: inline-block; margin: 6px 0 4px; font-size: 12px; font-weight: 800; color: #e7d9b4; border: 1px solid rgba(231,217,180,.5); background: rgba(231,217,180,.12); border-radius: 999px; padding: 2px 12px; letter-spacing: .04em; } .mi-card-dan.is-cpu { color: var(--muted); border-color: #3a5446; background: rgba(58,84,70,.25); } .mi-card-oshi { font-size: 12px; color: var(--muted); margin-top: 2px; } .mi-card-oshi b { font-weight: 800; } /* ---- Phase A（団体戦）: チーム枠に3人カードを並べる。自チームを左上に強調、 先鋒に「一番手」マーク、控えはトーンダウン。2×2 グリッド。 ---- */ .mi-teams { display: grid; grid-template-columns: repeat(2, auto); gap: 24px 44px; align-items: start; justify-content: center; z-index: 2; } /* 3チーム（大三剣杯＝三人打ち卓）のとき、奇数で余る最後のブロックを中央へ。 */ .mi-teams > .mi-team-block:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; } .mi-team-block { border: 2px solid rgba(120,150,170,.4); border-radius: 16px; padding: 12px 16px 16px; background: linear-gradient(180deg, rgba(20,28,36,.5), rgba(8,12,16,.82)); box-shadow: 0 8px 22px rgba(0,0,0,.4); opacity: 0; transform: translateY(30px) scale(.96); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.9,.3,1); } .mi-team-block.in { opacity: 1; transform: none; } .mi-team-block.is-human { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(246,210,100,.35), 0 12px 28px rgba(0,0,0,.5); } .mi-team-head { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 800; color: #dce8f0; margin-bottom: 10px; letter-spacing: .05em; text-shadow: 0 1px 2px rgba(0,0,0,.5); } .mi-team-you { background: var(--accent); color: #1a1a1a; font-weight: 900; font-size: 11px; border-radius: 5px; padding: 1px 7px; } .mi-team-cards { display: flex; gap: 10px; align-items: flex-end; } .mi-tm-card { position: relative; width: 138px; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, rgba(20,28,24,.4), rgba(8,12,10,.85)); border: 2px solid color-mix(in srgb, var(--char) 45%, #2a3f34); } .mi-tm-card.bench { opacity: .55; filter: saturate(.7); } .mi-tm-card.first { box-shadow: 0 0 0 2px color-mix(in srgb, var(--char) 65%, transparent), 0 8px 18px rgba(0,0,0,.5); } .mi-tm-art { position: relative; height: 164px; background: #0a0e0c; } .mi-tm-portrait { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .mi-tm-card .mi-art-fallback { font-size: 50px; } .mi-tm-name { padding: 6px 4px; text-align: center; font-size: 15px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.5); } .mi-tm-badge { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #1a1a1a; font-weight: 900; font-size: 11px; border-radius: 5px; padding: 2px 9px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.5); } .mi-tm-bench-tag { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); background: rgba(10,14,18,.7); color: #9fb0bd; font-weight: 700; font-size: 10px; border: 1px solid rgba(160,180,195,.3); border-radius: 5px; padding: 1px 7px; white-space: nowrap; } /* 団体戦時の VS はカード群に重なりすぎないよう小さめに。 */ .mi-versus-team .mi-vs { font-size: 132px; top: 50%; } /* ペア戦: 2ブロック（自ペア｜相手ペア）の間に VS が収まるよう列間を広げる。 */ .mi-versus-pair .mi-teams { gap: 24px 150px; } .mi-versus-pair .mi-vs { font-size: 120px; top: 50%; } /* ---- Phase B: 座席・親決め ---- */ .mi-table { position: relative; width: 520px; height: 520px; } .mi-table-felt { position: absolute; inset: 70px; border-radius: 22px; background: radial-gradient(circle at 50% 42%, #246048 0%, #163a2b 82%); border: 6px solid #0f2a20; box-shadow: inset 0 0 40px rgba(0,0,0,.5); } .mi-seat { position: absolute; width: 132px; text-align: center; opacity: 0; transition: opacity .35s ease; z-index: 2; } .mi-seat.seated { opacity: 1; } .mi-seat-0 { left: 50%; bottom: 0; transform: translateX(-50%); } .mi-seat-2 { left: 50%; top: 0; transform: translateX(-50%); } .mi-seat-1 { right: 0; top: 50%; transform: translateY(-50%); } .mi-seat-3 { left: 0; top: 50%; transform: translateY(-50%); } .mi-seat-icon { width: 80px; height: 80px; margin: 0 auto; border-radius: 50%; transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 0 0 2px color-mix(in srgb, var(--char) 50%, #223), 0 4px 10px rgba(0,0,0,.4); } .mi-seat-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .mi-seat-img.mi-art-fallback { font-size: 34px; } .mi-seat.rolling .mi-seat-icon { transform: scale(1.16); box-shadow: 0 0 0 4px var(--char), 0 0 26px var(--char); } .mi-seat.dealer .mi-seat-icon { transform: scale(1.12); box-shadow: 0 0 0 4px #f6d264, 0 0 30px rgba(246,210,100,.85); } .mi-seat-name { margin-top: 6px; font-size: 14px; font-weight: 700; color: #e8efe9; text-shadow: 0 1px 2px rgba(0,0,0,.6); } .mi-seat-wind { display: inline-block; margin-top: 3px; min-width: 24px; font-size: 14px; font-weight: 800; color: #cfe0d6; background: rgba(8,12,10,.6); border: 1px solid rgba(255,255,255,.2); border-radius: 6px; padding: 1px 6px; } .mi-seat.dealer .mi-seat-wind { background: #f6d264; color: #1a1a1a; border-color: #f6d264; } .mi-roll-msg { position: absolute; bottom: 40px; font-size: 20px; font-weight: 700; color: #f4e3b4; text-shadow: 0 1px 3px rgba(0,0,0,.7); letter-spacing: .04em; } /* ---- 局名コール ---- */ .mi-kyoku { position: absolute; inset: 0; z-index: 20; pointer-events: none; display: flex; align-items: center; justify-content: center; background: rgba(8,10,9,0); opacity: 0; transition: opacity .5s ease, background .5s ease; } .mi-kyoku.show { opacity: 1; background: rgba(8,10,9,.82); } .mi-kyoku-text { font-size: 84px; font-weight: 900; letter-spacing: .12em; color: #f4e3b4; text-shadow: 0 0 30px rgba(246,210,100,.5), 0 6px 16px rgba(0,0,0,.7); transform: scale(.85); transition: transform .5s cubic-bezier(.2,1.2,.4,1); } .mi-kyoku.show .mi-kyoku-text { transform: scale(1); } /* ============================================================================ ダメージ演出 — 和了後のHPバトル（持ち点=HP）。敗者のHPゲージが削れ、 勝者は回復。ヘルスゲージ素材(gauge_base/fill_high/mid/low)を使用。 ============================================================================ */ .damage-overlay { position: absolute; inset: 0; z-index: 31; display: flex; align-items: center; justify-content: center; background: rgba(6, 10, 8, 0); cursor: pointer; opacity: 0; transition: opacity .28s ease, background .28s ease; } .damage-overlay.show { opacity: 1; background: rgba(6, 10, 8, .72); backdrop-filter: blur(2px); } .dmg-card { min-width: 520px; max-width: 76%; padding: 22px 30px 18px; text-align: center; border: 16px solid transparent; border-image: url("graphic/ui/sc/panel.png") 18 / 16px / 0 stretch; border-radius: 0; background: rgba(16, 24, 19, .96); box-shadow: 0 16px 60px #000c; transform: scale(.92) translateY(10px); transition: transform .3s cubic-bezier(.2,1.2,.4,1); } .damage-overlay.show .dmg-card { transform: scale(1) translateY(0); } .dmg-head { display: inline-block; margin: 0 auto 16px; padding: 2px 22px; font-size: 20px; font-weight: 800; color: #f4e3b4; white-space: nowrap; border: 11px solid transparent; border-image: url("graphic/ui/sc/plate.png") 14 18 fill / 11px 16px / 0 stretch; text-shadow: 0 2px 4px rgba(0,0,0,.7); } /* 各キャラの行: アイコン + 名前/HPゲージ + 数値 */ .dmg-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 8px 6px; margin: 4px 0; } .dmg-face { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: #0c150f; box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 2px 6px #0008; } .dmg-face-fb { display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: #0c150f; background: linear-gradient(160deg, var(--c), #0c150f); box-shadow: 0 0 0 2px var(--c), 0 2px 6px #0008; } .dmg-row.is-win .dmg-face { box-shadow: 0 0 0 2px var(--accent), 0 0 16px rgba(246,210,100,.7); } .dmg-info { flex: 1 1 auto; text-align: left; } .dmg-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; text-shadow: 0 1px 2px #000a; } /* HPゲージ本体: gauge_base を下地に、fill を左から見せて削る */ .hpbar { --bar-w: 340px; position: relative; width: var(--bar-w); height: 22px; max-width: 100%; background: url("graphic/ui/sc/gauge_base.png") no-repeat center / 100% 100%; } .hpfill, .hpfill-ghost { position: absolute; top: 0; bottom: 0; left: 0; height: 100%; background-repeat: no-repeat; background-position: left center; background-size: var(--bar-w) 100%; transition: width .55s cubic-bezier(.3,.7,.2,1); } .hpfill-ghost { background-image: url("graphic/ui/sc/gauge_fill_low.png"); filter: brightness(1.7) saturate(.4); opacity: .8; transition: width .6s ease .1s; } .hpfill.high { background-image: url("graphic/ui/sc/gauge_fill_high.png"); } .hpfill.mid { background-image: url("graphic/ui/sc/gauge_fill_mid.png"); } .hpfill.low { background-image: url("graphic/ui/sc/gauge_fill_low.png"); } /* 完了済み周回ぶん（背面の満タンベース）。色は JS が直に当てる。 */ .hpfill-base { position: absolute; top: 0; bottom: 0; left: 0; height: 100%; width: 0; border-radius: 6px; transition: width .55s cubic-bezier(.3,.7,.2,1); } /* 2週目以降は画像ではなく固定色グラデ（JSがbackgroundを直当て）＋僅かな発光。 */ .hpfill.lap { background-image: none; box-shadow: 0 0 8px rgba(255, 220, 120, .6); } .dmg-hp { flex: 0 0 auto; min-width: 76px; text-align: right; font-size: 22px; font-weight: 800; color: #eef3ee; text-shadow: 0 1px 3px #000b; font-variant-numeric: tabular-nums; } .dmg-row.is-win .dmg-hp { color: var(--accent); } /* 飛び出すダメージ/回復の数値 */ .dmg-pop { position: absolute; right: 104px; top: 50%; font-size: 30px; font-weight: 900; pointer-events: none; opacity: 0; transform: translateY(0) scale(.6); text-shadow: 0 0 10px #000, 0 2px 4px #000; } .dmg-pop.hit { color: #ff6b6b; -webkit-text-stroke: 1px #5a1414; } .dmg-pop.heal { color: #6ff09a; -webkit-text-stroke: 1px #14502a; } .dmg-pop.show { animation: dmgPop 1.1s ease forwards; } /* ---- 守り切った席（琥珀の盾・身代わり人形）------------------------------------ 守備キャラの成果は「点棒が動かないこと」なので、既存の被ダメ演出（点棒が動く＝事件） からこぼれ落ちる。ここでは本来の失点を一度だけ実体化させ、守りの膜に呑ませて消す。 （docs/character-ingame-fx-plan.md §8-1「回避された未来を、一度だけ見せる」） */ .dmg-row.is-guard { position: relative; } .dmg-pop.guard-raw { color: #ff6b6b; -webkit-text-stroke: 1px #5a1414; } .dmg-row.guarding .dmg-pop.guard-raw { animation: guardRawBreak .55s cubic-bezier(.4,0,.7,.2) forwards; } @keyframes guardRawBreak { 0% { opacity: 1; transform: translateY(-14px) scale(1); filter: blur(0); } 55% { opacity: .9; transform: translateY(-12px) scale(.86); filter: blur(1px); } 100% { opacity: 0; transform: translateY(-8px) scale(.55); filter: blur(4px); } } .dmg-pop.guard-kept { color: #dfe9e4; -webkit-text-stroke: 1px #26332c; } /* 守りの膜。琥珀＝硬く固まって砕ける／人形＝身代わりに割れる */ .dmg-guard-veil { position: absolute; inset: -2px; border-radius: 10px; opacity: 0; pointer-events: none; } .dmg-guard-veil.amber { background: linear-gradient(100deg, #f0a23c00, #f0a23c55 45%, #ffd48955 55%, #f0a23c00); box-shadow: inset 0 0 22px #f0a23c66; } .dmg-guard-veil.doll { background: linear-gradient(100deg, #5aa9e600, #5aa9e655 45%, #cfe9ff55 55%, #5aa9e600); box-shadow: inset 0 0 22px #5aa9e666; } .dmg-row.guarding .dmg-guard-veil { animation: guardVeil .85s ease-out both; } @keyframes guardVeil { 0% { opacity: 0; transform: scale(1.06); } 25% { opacity: 1; transform: scale(1); } 70% { opacity: .85; } 100% { opacity: 0; transform: scale(.99); } } /* 何で守ったかのラベル（琥珀の盾／身代わり人形） */ .dmg-guard-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; vertical-align: middle; opacity: 0; transform: translateY(3px); } .dmg-guard-tag.amber { background: #3a2a12; color: #ffcc7a; border: 1px solid #a8791f; } .dmg-guard-tag.doll { background: #12283a; color: #9fd8f5; border: 1px solid #2f6d8e; } .dmg-row.guarding .dmg-guard-tag { animation: guardTagIn .4s ease-out .1s both; } @keyframes guardTagIn { to { opacity: 1; transform: none; } } /* ---- 呪われた席（暗黒星）— 守りの鏡像 ----------------------------------------- 守りが「回避された未来を見せてから消す」なら、呪いは「本来の痛みを見せてから深くする」。 膨らんだぶんは誰の取り分にもならず消える＝この席だけ違うルールで座っている （docs/character-ingame-fx-plan.md §14-1）。 */ .dmg-row.is-cursed { position: relative; } .dmg-pop.curse-raw { color: #b9a7c9; -webkit-text-stroke: 1px #2b2135; } .dmg-row.cursing .dmg-pop.curse-raw { animation: curseRawSink .6s cubic-bezier(.4,0,.7,.2) forwards; } @keyframes curseRawSink { 0% { opacity: 1; transform: translateY(-14px) scale(1); filter: blur(0); } 55% { opacity: .8; transform: translateY(-4px) scale(.9); filter: blur(1px); } 100% { opacity: 0; transform: translateY(6px) scale(.7); filter: blur(4px); } } /* 星の膜。飲み込む方向＝内へ吸い込まれる */ .dmg-curse-veil { position: absolute; inset: -2px; border-radius: 10px; opacity: 0; pointer-events: none; } .dmg-curse-veil.star { background: radial-gradient(circle at 50% 50%, #a78bfa00 30%, #6d4a9e66 70%, #1a0f2b99); box-shadow: inset 0 0 26px #6d4a9e88; } .dmg-row.cursing .dmg-curse-veil { animation: curseVeil .95s ease-out both; } @keyframes curseVeil { 0% { opacity: 0; transform: scale(1.12); } 30% { opacity: 1; transform: scale(1); } 70% { opacity: .9; } 100% { opacity: 0; transform: scale(.96); } } .dmg-curse-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; vertical-align: middle; opacity: 0; transform: translateY(3px); } .dmg-curse-tag.star { background: #221636; color: #c4b5fd; border: 1px solid #6d4a9e; } .dmg-row.cursing .dmg-curse-tag { animation: guardTagIn .4s ease-out .1s both; } /* 呪いの注記は守りの注記と同じ枠・色だけ星に寄せる */ .dmg-blocked-note.is-curse { background: #1a142699; border-color: #4c3673; color: #d6cbe6; } /* 勝った側への説明（守られた分は勝者の取り分からも引かれる） */ .dmg-blocked-note { margin: 6px 4px 0; padding: 7px 12px; border-radius: 8px; background: #17222099; border: 1px solid #3c5a4d; color: #cfe0d6; font-size: 12px; letter-spacing: .02em; display: flex; align-items: baseline; gap: 8px; animation: guardTagIn .45s ease-out .5s both; } .dmg-blocked-note span { margin-left: auto; font-weight: 900; color: #ffb765; font-size: 14px; } /* 真守「見えていました」：警告が当たっていた局だけ、結果の下に静かに1行 */ .dmg-insight { margin: 6px 4px 0; padding: 7px 12px; border-radius: 8px; background: #16241c99; border: 1px solid #3f6b52; color: #d6e9db; font-size: 12px; letter-spacing: .02em; display: flex; align-items: baseline; gap: 8px; animation: guardTagIn .45s ease-out .6s both; } .dmg-insight::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; border: 2px solid #7bb274; box-shadow: 0 0 6px #7bb27488; } .dmg-insight b { color: #a8e0b4; font-weight: 800; } .dmg-insight.missed { border-color: #6b4a3f; background: #241a1699; } .dmg-insight.missed::before { border-color: #d08a6a; box-shadow: 0 0 6px #d08a6a88; } .dmg-insight.missed b { color: #ffb08a; } @keyframes dmgPop { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 22% { opacity: 1; transform: translateY(-10px) scale(1.18); } 40% { transform: translateY(-14px) scale(1); } 100% { opacity: 0; transform: translateY(-34px) scale(1); } } /* 被弾時の赤フラッシュ + 揺れ */ .dmg-row.flash::after { content: ""; position: absolute; inset: -4px; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255,60,60,.5), transparent 70%); opacity: 0; animation: dmgFlash .5s ease; } .dmg-row.is-win.flash::after { background: radial-gradient(ellipse at center, rgba(120,255,160,.45), transparent 70%); } @keyframes dmgFlash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } } .dmg-row.shake { animation: dmgShake .42s cubic-bezier(.36,.07,.19,.97); } @keyframes dmgShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } } .dmg-hint { margin-top: 12px; font-size: 12px; color: var(--muted); opacity: .8; } /* ============================================================================ 和了画面リッチ化 — 全画面シネマティック（雀龍門/雀魂風） 上に手牌・左に立ち絵・右に役/ランク/点数・ドラ表示・煌めき。 ※ 流局/対局終了は従来の .win-card を使うので影響しない。 ============================================================================ */ .win-overlay:has(.win-rich) { padding: 0; } .win-rich { position: relative; width: 100%; height: 100%; overflow: hidden; animation: winCardIn .4s ease; background: radial-gradient(120% 80% at 50% 18%, rgba(246,210,100,.08), transparent 60%), radial-gradient(90% 90% at 30% 100%, rgba(0,0,0,.45), transparent 70%); } /* 上部バナー: 局名 + ツモ/ロン和了 */ .win-banner { position: absolute; top: clamp(6px, 2%, 18px); left: 50%; transform: translateX(-50%); z-index: 4; white-space: nowrap; letter-spacing: .1em; font-size: clamp(22px, 3.4vw, 40px); font-weight: 800; color: #f4e3b4; text-shadow: 0 2px 8px #000, 0 0 20px rgba(246,210,100,.45); } .win-banner-how { color: var(--accent); } .win-banner::after { content: ""; display: block; height: 2px; margin: 4px auto 0; width: 78%; background: linear-gradient(90deg, transparent, var(--accent), transparent); } /* 手牌: 上部中央に大きく */ .win-rich .win-hand { position: absolute; top: clamp(48px, 8.5%, 84px); left: 50%; transform: translateX(-50%); margin: 0; max-width: 95%; justify-content: center; z-index: 3; } .win-rich .win-tile { height: clamp(32px, 4.4vw, 50px); } /* 立ち絵: 左下に大きく（位置は厳密でなくてよい、雰囲気優先） */ .win-rich .win-portrait, .win-rich .win-portrait-fallback { position: absolute; left: clamp(-12px, -1%, 4px); right: auto; bottom: 0; z-index: 1; } .win-rich .win-portrait { height: clamp(58%, 82%, 94%); width: auto; max-width: 46%; object-fit: contain; object-position: bottom left; filter: drop-shadow(0 10px 30px #000d); } .win-rich .win-portrait-fallback { height: 80%; width: 34%; max-width: 320px; font-size: 120px; } /* 名前プレート: 左下 */ .win-nameplate { position: absolute; left: clamp(8px, 1.6%, 20px); bottom: clamp(8px, 2%, 18px); z-index: 3; display: flex; align-items: baseline; gap: 10px; padding: 6px 16px; background: rgba(8, 12, 10, .62); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(246,210,100,.4), 0 4px 14px #0008; } .win-nameplate .win-name { font-size: clamp(18px, 2.4vw, 26px); font-weight: 800; text-shadow: 0 1px 3px #000b; } .win-nameplate .win-from { font-size: 13px; color: var(--muted); } /* ドラ表示: 右上の小パネル */ .win-dora { position: absolute; top: clamp(48px, 9%, 86px); right: clamp(8px, 1.4%, 18px); z-index: 3; padding: 8px 12px; background: rgba(10, 16, 12, .82); border: 11px solid transparent; border-image: url("graphic/ui/sc/panel.png") 18 / 11px / 0 stretch; border-radius: 0; } .win-dora-row { display: flex; align-items: center; gap: 8px; margin: 2px 0; } .win-dora-label { font-size: 12px; color: #cdbb84; font-weight: 700; min-width: 52px; } .win-dora-tiles { display: flex; gap: 2px; } .win-dora-tile { height: 26px; width: auto; border-radius: 2px; background: #fff; box-shadow: 0 1px 3px #0007; } /* 右側カラム: 役リスト + フィナーレ（ランク/点数）。立ち絵の右に縦中央寄せ。 */ .win-body { position: absolute; right: clamp(12px, 3%, 40px); top: 50%; transform: translateY(-44%); z-index: 3; width: min(60%, 540px); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; text-align: right; } .win-rich .yaku-list { margin: 0; max-width: 320px; width: 100%; } .win-rich .yaku-item { background: rgba(14, 22, 17, .82); } .win-finale { display: flex; align-items: flex-end; justify-content: flex-end; gap: clamp(10px, 2vw, 26px); width: 100%; } /* 大ランク文字（グラデ + 発光）。役満は虹、満貫は金、安手は銀。 */ .win-rank { font-size: clamp(40px, 7.2vw, 88px); font-weight: 900; line-height: .95; letter-spacing: .03em; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1px rgba(0,0,0,.35); filter: drop-shadow(0 3px 8px #000a) drop-shadow(0 0 16px rgba(246,210,100,.5)); background-size: 220% 220%; } .win-rich[data-tier="normal"] .win-rank { background-image: linear-gradient(120deg, #eef5ef, #a9cdba 60%, #eef5ef); filter: drop-shadow(0 3px 8px #000a) drop-shadow(0 0 12px rgba(180,220,200,.4)); } .win-rich[data-tier="mangan"] .win-rank { background-image: linear-gradient(120deg, #fff0bf, #f5b14e 45%, #ffe39a 70%, #f5b14e); animation: rankShine 3s ease infinite; } .win-rich[data-tier="yakuman"] .win-rank { background-image: linear-gradient(110deg, #ffd1f3, #b0ecff 30%, #fff0a8 55%, #ff9ecf 80%, #b0ecff); -webkit-text-stroke: 1px rgba(120,60,110,.35); filter: drop-shadow(0 3px 10px #000b) drop-shadow(0 0 22px rgba(255,180,230,.6)); animation: rankShine 2.4s ease infinite; } @keyframes rankShine { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* 点数: ドンと大きく */ .win-scorebox { display: flex; flex-direction: column; align-items: flex-end; } .win-detail { font-size: clamp(13px, 1.6vw, 17px); color: #cdbb84; font-weight: 700; } .win-rich .win-score { display: inline-block; margin: 0; padding: 0; border: 0; background: none; border-radius: 0; font-size: clamp(34px, 6.4vw, 76px); font-weight: 900; color: #f7e6b2; line-height: 1; text-shadow: 0 2px 6px #000b, 0 0 22px rgba(246,210,100,.5); } .win-rich .win-pt { font-size: .42em; margin-left: 4px; color: #e9d9a6; } .win-score-sub { font-size: clamp(14px, 1.8vw, 20px); color: var(--muted); font-weight: 700; margin-top: 2px; } /* 能力で和了点が増減したときの 増加!/減少! ラベル（素点の下にポップ）。 */ .win-score-fx { font-size: clamp(20px, 3vw, 34px); font-weight: 900; letter-spacing: .06em; margin-top: 6px; opacity: 0; transform: translateY(8px) scale(.7); text-shadow: 0 2px 6px #000a; } .win-score-fx.show { animation: scoreFxPop .52s cubic-bezier(.2,1.3,.4,1) forwards; } .win-score-fx.up { color: #ffd24a; text-shadow: 0 2px 8px #000a, 0 0 18px rgba(255,200,70,.75); } .win-score-fx.down { color: #8fd0ff; text-shadow: 0 2px 8px #000a, 0 0 18px rgba(120,190,255,.6); } /* 能力名の一行（scoreFxLabel）は 増加!/減少! より長いので、字数で一段落とす。 固定1280×720ステージ規約に従い vw は使わない（第1弾QAの是正と同じ）。 */ .win-score-fx.is-long { font-size: 26px; letter-spacing: .02em; } .win-score-fx .win-score-note { display: block; margin-top: 3px; font-size: .52em; font-weight: 700; letter-spacing: .02em; color: #efe7d4; opacity: .9; text-shadow: 0 2px 6px #000a; } @keyframes scoreFxPop { 0% { opacity: 0; transform: translateY(8px) scale(.65); } 55% { opacity: 1; transform: translateY(0) scale(1.18); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* ボタン: 右下 */ .win-rich .win-buttons { position: absolute; right: clamp(12px, 3%, 40px); bottom: clamp(10px, 2.4%, 22px); z-index: 5; margin: 0; } /* 煌めき */ .win-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .wspark { position: absolute; width: 10px; height: 10px; transform: scale(var(--s, 1)); opacity: 0; background: radial-gradient(circle, #fff 0%, rgba(255,232,160,.7) 35%, transparent 70%); animation: wspark 2.4s ease-in-out infinite; } .wspark::before { content: ""; position: absolute; inset: -2px; background: radial-gradient(circle, rgba(255,255,255,.9), transparent 60%); transform: scale(.4); } @keyframes wspark { 0%, 100% { opacity: 0; transform: scale(calc(var(--s) * .3)); } 50% { opacity: 1; transform: scale(var(--s)); } } /* ============================================================================ 対局終了画面リッチ化 — 全画面。左に優勝者(立ち絵+王冠+優勝)、右に順位リスト （最終持ち点を HP ゲージで表示）。下位→上位に捲れて、点数カウントアップ。 ============================================================================ */ .win-overlay:has(.go-screen) { padding: 0; } .go-screen { position: relative; width: 100%; height: 100%; overflow: hidden; animation: winCardIn .4s ease; background: radial-gradient(120% 70% at 22% 100%, rgba(246,210,100,.12), transparent 60%), radial-gradient(100% 100% at 60% 0%, rgba(0,0,0,.35), transparent 70%); } .go-banner { position: absolute; top: clamp(8px, 3%, 26px); left: 50%; transform: translateX(-50%); z-index: 4; white-space: nowrap; letter-spacing: .16em; font-size: clamp(30px, 5vw, 56px); font-weight: 900; color: #f4e3b4; text-shadow: 0 3px 10px #000, 0 0 26px rgba(246,210,100,.5); } .go-banner::after { content: ""; display: block; height: 2px; margin: 6px auto 0; width: 86%; background: linear-gradient(90deg, transparent, var(--accent), transparent); } /* 優勝者: 左 */ .go-champion { position: absolute; left: clamp(4px, 3%, 40px); bottom: 0; top: 16%; width: min(40%, 360px); z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; animation: goChampIn .65s cubic-bezier(.2,1.25,.4,1) both; } @keyframes goChampIn { from { opacity: 0; transform: translateY(34px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } } .go-crown { position: absolute; top: -2%; z-index: 3; font-size: clamp(34px, 5vw, 56px); filter: drop-shadow(0 3px 8px #000) drop-shadow(0 0 14px rgba(246,210,100,.7)); animation: goCrown 2.4s ease-in-out infinite; } @keyframes goCrown { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-7px) rotate(4deg); } } .go-champ-portrait { height: 82%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 0 28px rgba(246,210,100,.55)) drop-shadow(0 12px 30px #000d); } .go-champ-fb { height: 70%; width: 80%; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 120px; font-weight: 800; color: #0c150f; background: linear-gradient(160deg, var(--char-color), #0c150f); box-shadow: 0 0 0 3px var(--char-color); } .go-champ-tag { position: relative; z-index: 3; margin-top: -6px; display: flex; align-items: center; gap: 10px; padding: 6px 18px; background: rgba(8, 12, 10, .68); border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(246,210,100,.5), 0 6px 18px #0009; } .go-champ-badge { font-size: clamp(14px, 1.8vw, 20px); font-weight: 900; color: #1a120a; padding: 2px 12px; border-radius: 6px; background: linear-gradient(120deg, #ffe39a, #f5b14e); box-shadow: 0 0 12px rgba(246,210,100,.6); } .go-champ-name { font-size: clamp(18px, 2.4vw, 28px); font-weight: 800; text-shadow: 0 1px 3px #000b; } /* ペア戦リザルト: 優勝ペアの2人を並べて見せる「共闘優勝」スポット。 */ .go-champion-pair { width: min(46%, 420px); } .go-champ-duo { position: relative; width: 100%; height: 82%; display: flex; align-items: flex-end; justify-content: center; } .go-champ-duo .go-champ-portrait { height: 80%; max-width: 60%; } /* HP高い方（エース）を前に大きく、相方を少し後ろ・控えめに重ねる。 */ .go-champ-duo .go-champ-portrait:nth-child(1) { transform: translateX(16%); z-index: 2; } .go-champ-duo .go-champ-portrait:nth-child(2) { transform: translateX(-16%); z-index: 1; height: 72%; filter: drop-shadow(0 10px 26px #000d) brightness(.9); } .go-champ-duo .go-champ-portrait.fallen { filter: grayscale(1) brightness(.55) drop-shadow(0 10px 26px #000d); } .go-champ-pairname { display: flex; align-items: baseline; gap: .15em; flex-wrap: wrap; justify-content: center; } .go-champ-amp { color: var(--accent); font-size: .72em; font-weight: 700; margin: 0 .12em; } .go-champ-sub { position: relative; z-index: 3; margin-top: 5px; font-size: clamp(11px, 1.4vw, 14px); font-weight: 700; color: var(--accent); letter-spacing: .04em; text-shadow: 0 1px 3px #000b; } /* 順位リスト: 右 */ .go-ranks { position: absolute; right: clamp(12px, 3%, 44px); top: 50%; transform: translateY(-50%); z-index: 3; width: min(58%, 560px); display: flex; flex-direction: column; gap: clamp(7px, 1.3vw, 13px); } .go-rank-row { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 14px); padding: clamp(6px, 1vw, 10px) clamp(10px, 1.6vw, 16px); border: 11px solid transparent; border-image: url("graphic/ui/sc/btn.png") 11 15 fill / 11px 15px / 0 stretch; border-radius: 0; animation: goRowIn .5s cubic-bezier(.2,1,.3,1) both; } @keyframes goRowIn { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: translateX(0); } } .go-rank-row.r1 { box-shadow: 0 0 0 2px var(--accent), 0 0 22px rgba(246,210,100,.45); border-image-source: url("graphic/ui/sc/btn_hover.png"); } .go-medal { flex: 0 0 auto; width: clamp(32px, 4vw, 46px); height: clamp(32px, 4vw, 46px); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: clamp(17px, 2.3vw, 26px); font-weight: 900; color: #2a1d0a; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 2px 6px #0008; } .go-medal.m1 { background: linear-gradient(150deg, #ffe9a6, #f3b13f); } .go-medal.m2 { background: linear-gradient(150deg, #f1f4f7, #b6c0c9); } .go-medal.m3 { background: linear-gradient(150deg, #f0c08a, #c47e3e); color: #2a1407; } .go-medal.m4 { background: linear-gradient(150deg, #b9c0bd, #7c8783); } .go-face { flex: 0 0 auto; width: clamp(40px, 4.6vw, 54px); height: clamp(40px, 4.6vw, 54px); border-radius: 50%; object-fit: cover; background: #0c150f; box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 2px 6px #0008; } .go-face-fb { display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: #0c150f; background: linear-gradient(160deg, var(--c), #0c150f); box-shadow: 0 0 0 2px var(--c), 0 2px 6px #0008; } .go-rank-info { flex: 1 1 auto; min-width: 0; } .go-rank-name { font-size: clamp(14px, 1.9vw, 20px); font-weight: 700; margin-bottom: 4px; text-shadow: 0 1px 2px #000a; } .go-bar { --bar-w: 100%; width: 100%; height: clamp(13px, 1.7vw, 18px); } .go-bar .hpfill { background-size: 100% 100%; } .go-rank-pts { flex: 0 0 auto; min-width: clamp(72px, 9vw, 104px); text-align: right; font-size: clamp(20px, 2.8vw, 32px); font-weight: 900; color: #f7e6b2; text-shadow: 0 1px 3px #000b; font-variant-numeric: tabular-nums; } .go-rank-row.r1 .go-rank-pts { color: var(--accent); text-shadow: 0 0 14px rgba(246,210,100,.5); } /* 団体戦の対局終了: チーム3人トリオ（撃沈は灰）＋自チーム強調 */ .go-team-faces { flex: 0 0 auto; display: flex; } .go-team-faces .go-team-face:not(:first-child) { margin-left: -9px; } .go-team-face { width: clamp(30px, 3.4vw, 40px); height: clamp(30px, 3.4vw, 40px); border-radius: 50%; object-fit: cover; background: #0c150f; box-shadow: 0 0 0 2px #0c150f, 0 0 0 3px rgba(255,255,255,.16); } .go-team-face-fb { display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #0c150f; background: linear-gradient(160deg, var(--c), #0c150f); } .go-team-face.fallen { filter: grayscale(1) brightness(.55); } .go-rank-name.mine { color: var(--accent); } .go-champ-trio { position: relative; z-index: 3; display: flex; gap: 6px; margin-top: 8px; } .go-champ-trio .go-team-face { width: clamp(34px, 4vw, 46px); height: clamp(34px, 4vw, 46px); } .go-champ-trio .go-team-face:not(:first-child) { margin-left: 0; } .go-buttons { position: absolute; bottom: clamp(10px, 3%, 26px); left: 50%; transform: translateX(-50%); z-index: 5; margin: 0; } /* ---- トビ（撃沈）ダウン演出 — ダメージシーンで持ち点がマイナスに落ちた敗者 ---- */ /* アイコンが灰色に倒れ込み、行が沈む。 */ .dmg-row.downed { animation: downJolt .5s cubic-bezier(.36,.07,.19,.97); } .dmg-row.downed .dmg-info { opacity: .75; } .dmg-row.downed .dmg-name { color: #8c918e !important; text-shadow: none; } .dmg-row.downed .dmg-hp-num { color: #ff5c5c; } .dmg-row.downed .dmg-face { filter: grayscale(1) brightness(.55); transform: rotate(-16deg) translateY(5px); box-shadow: 0 0 0 2px rgba(120,30,30,.5), 0 3px 8px #000a; transition: filter .45s ease, transform .45s cubic-bezier(.36,.07,.19,.97); } @keyframes downJolt { 0% { transform: translateX(0); } 15% { transform: translate(-9px, 2px); } 30% { transform: translate(10px, -2px); } 45% { transform: translate(-10px, 3px); } 60% { transform: translate(7px, 0); } 100% { transform: translateX(0); } } /* 「撃沈」スタンプが行の中央にドンと捺される。 */ .dmg-down-stamp { position: absolute; left: 50%; top: 50%; z-index: 6; pointer-events: none; white-space: nowrap; font-size: clamp(28px, 4.2vw, 46px); font-weight: 900; letter-spacing: .14em; color: #ff4040; -webkit-text-stroke: 2px #5a0d0d; text-shadow: 0 0 18px rgba(255,40,40,.7), 0 3px 8px #000; padding: 2px 16px; border: 4px solid #ff4040; border-radius: 8px; background: rgba(24, 2, 2, .35); opacity: 0; transform: translate(-50%, -50%) rotate(-15deg) scale(2.6); } .dmg-down-stamp.show { animation: downStamp .5s cubic-bezier(.2,1.5,.3,1) forwards; } @keyframes downStamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-15deg) scale(2.6); } 60% { opacity: 1; transform: translate(-50%, -50%) rotate(-15deg) scale(.9); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-15deg) scale(1); } } /* KO の瞬間、画面全体に赤いビネットが一度だけ走る。 */ .damage-overlay.ko::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; box-shadow: inset 0 0 130px 36px rgba(255,30,30,.5); opacity: 0; animation: koVignette 1s ease; } @keyframes koVignette { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } } /* ============================================================================ セリフ・スピーカー — 立ち絵＋小さめメッセージウィンドウ（マスタ駆動）。 ダメージ演出(左端)・対局開始(単発)・対局終了(下部バー)で共用する。 ============================================================================ */ /* 単発スピーカー用レイヤー（対局開始など。卓の上に重ねる） */ .speaker-fx { position: absolute; inset: 0; z-index: 24; pointer-events: none; } .speaker { position: absolute; bottom: 0; z-index: 8; width: clamp(270px, 30%, 350px); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; pointer-events: none; opacity: 0; transform: translateY(20px); transition: opacity .35s ease, transform .35s cubic-bezier(.2,1,.3,1); } .speaker.show { opacity: 1; transform: translateY(0); } .speaker-left { left: clamp(2px, 1.5%, 16px); } .speaker-right { right: clamp(2px, 1.5%, 16px); } /* 立ち絵はバストアップ切り出し（cover＋上寄せ）で大きく見せる。 */ .speaker-portrait { width: 100%; height: clamp(220px, 48vh, 360px); max-width: 100%; object-fit: cover; object-position: center 8%; filter: drop-shadow(0 8px 22px #000c); margin-bottom: -6px; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); } .speaker-portrait-fb { width: 100%; height: clamp(180px, 38vh, 300px); border-radius: 14px 14px 0 0; display: flex; align-items: center; justify-content: center; font-size: 100px; font-weight: 800; color: #0c150f; background: linear-gradient(160deg, var(--c), #0c150f); box-shadow: inset 0 0 0 3px var(--c); } /* メッセージ枠 = 購入UIセットの msgwin.png（小さめに 9スライス相当でスケール）。 */ .speaker-box { position: relative; width: 100%; min-height: 114px; padding: 30px 30px 24px 30px; box-sizing: border-box; background: url("graphic/ui/sc/msgwin.png") no-repeat center / 100% 100%; } .speaker-name { position: absolute; top: 6px; left: 32px; font-size: 15px; font-weight: 800; letter-spacing: .06em; text-shadow: 0 1px 2px #000c; } .speaker-text { font-size: 15.5px; line-height: 1.55; color: #f6efe1; text-shadow: 0 1px 3px #000c; } /* ダメージ演出にスピーカーが出るときは、カードを右に寄せて左に立ち絵スペースを作る。 */ .damage-overlay.has-speaker { justify-content: flex-end; padding-right: clamp(16px, 4%, 64px); } /* 対局終了用: 右の実況ログ欄を丸ごと「立ち絵＋セリフ」枠に転用する。 */ .side.side-result > #hp-board, .side.side-result > #self-stage, .side.side-result > .side-abilities { display: none; } .side.side-result { justify-content: flex-end; align-items: stretch; background: radial-gradient(120% 70% at 50% 100%, rgba(246,210,100,.08), transparent 60%); } /* 立ち絵＋メッセージをサイド欄いっぱいに縦置き（静的フロー）。 */ .speaker-side { position: static; width: 100%; z-index: auto; margin-top: auto; } .speaker-side .speaker-portrait { height: clamp(300px, 56vh, 480px); } .speaker-side .speaker-box { min-height: 122px; } /* ============================================================================ 団体戦 — 右サイドパネルのチームブロック ============================================================================ */ .hp-board.team-battle { gap: 5px; } .tb-block { border-radius: 10px; border: 1px solid #ffffff18; overflow: hidden; background: #0e1813; } .tb-block.my-team { border-color: #f6b35260; box-shadow: 0 0 0 1px #f6b35225; } .tb-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px; background: #ffffff0a; font-size: 11px; font-weight: 800; color: var(--muted); } .my-team .tb-header { color: var(--accent); } .tb-total { font-size: 12px; font-weight: 900; color: #eef3ef; font-variant-numeric: tabular-nums; } /* 大会中の増減値。auto マージンで合計点の左隣に寄せる（space-between の中央化を防ぐ）。 */ .tb-delta { margin-left: auto; margin-right: 7px; } /* 出場中メンバー */ .tb-active { display: flex; align-items: center; gap: 7px; padding: 6px 10px; background: #141f19; border-bottom: 1px solid #ffffff0e; } .tb-active.is-turn .tb-dot { animation: hpTurnPulse 1.6s ease-in-out infinite; } .tb-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--c, var(--accent)); box-shadow: 0 0 6px var(--c, var(--accent)); } .tb-icon { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .tb-icon img, .tb-icon .char-icon { width: 100%; height: 100%; border-radius: 50%; } .tb-info { flex: 1; min-width: 0; } .tb-name { font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .tb-info .hp-gauge { height: 5px; margin-top: 3px; } .tb-hp { font-size: 12px; font-weight: 800; color: #eef3ef; font-variant-numeric: tabular-nums; flex-shrink: 0; } /* ペア戦: ブロック内の2人をHP順に縦並び（order で並べ替えるため flex 化）。 */ .pb-members { display: flex; flex-direction: column; } .pb-member:last-child { border-bottom: none; } .pb-member.out { opacity: .5; } .pb-member.out .tb-hp { color: var(--danger); } .pb-member.out .tb-name::after { content: "　ダウン"; color: var(--danger); font-size: 10px; font-weight: 700; } /* セリフ吹き出し */ .tb-talk { margin: 0 10px 5px; padding: 5px 10px; font-size: 13px; line-height: 1.45; color: #f6efe1; background: #1a2c23; border: 1px solid #f6b35255; border-radius: 7px; position: relative; } .tb-talk::before { content: ''; position: absolute; top: -6px; left: 18px; border: 5px solid transparent; border-bottom-color: #f6b35255; border-top: 0; } .tb-talk.hidden { display: none; } /* 待機メンバー */ .tb-bench-row { display: flex; gap: 4px; padding: 4px 10px; } .tb-bench { flex: 1; display: flex; align-items: center; gap: 5px; min-width: 0; } .tb-bench.out { opacity: 0.3; filter: grayscale(.8); } .tb-bench-icon { width: 15px; height: 15px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .tb-bench-icon img, .tb-bench-icon .char-icon { width: 100%; height: 100%; border-radius: 50%; } .tb-bench-info { flex: 1; min-width: 0; } .tb-bench-bar { width: 100%; height: 3px; border-radius: 999px; background: #ffffff14; overflow: hidden; margin-bottom: 2px; } .tb-bench-val { font-size: 9px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; } .out .tb-bench-val { text-decoration: line-through; } /* ①卓: 通常/団体戦サブタイトル */ .wiz-sub-title { font-size: 13px; font-weight: 700; color: var(--muted); margin: 14px 0 6px; } /* ============================================================================ 団体戦 — ダメージ演出オーバーレイ ============================================================================ */ .tb-dmg-card { min-width: 520px; max-width: 74%; } .tb-dmg-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .tb-dmg-row { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; } .tb-dmg-tag { font-size: 10px; font-weight: 800; width: 54px; text-align: right; flex-shrink: 0; } .tb-dmg-name { font-size: 12px; font-weight: 800; width: 62px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-dmg-barwrap { flex: 1; height: 8px; background: #ffffff14; border-radius: 999px; overflow: hidden; } .tb-dmg-val { font-size: 12px; font-weight: 800; width: 52px; text-align: right; flex-shrink: 0; } .tb-dmg-delta { font-size: 11px; font-weight: 800; width: 54px; flex-shrink: 0; } .tb-dmg-delta.gain { color: #66e6a8; } .tb-dmg-delta.loss { color: var(--danger); } .tb-dmg-delta.noheal { color: var(--muted); font-size: 10px; font-weight: 700; } /* チーム合計スコア */ .tb-totals { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 0; border-top: 1px solid #ffffff12; border-bottom: 1px solid #ffffff12; margin-bottom: 12px; } .tb-tot-item { text-align: center; } .tb-tot-item.mine .tb-tot-label { color: var(--accent); } .tb-tot-label { font-size: 10px; color: var(--muted); } .tb-tot-val { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; } .tb-tot-sep { width: 1px; height: 30px; background: #ffffff18; } /* 飛びバナー（親満ペナルティ発生時のみ） */ .tb-fly-banner { margin-bottom: 12px; padding: 9px 12px; border-radius: 10px; background: linear-gradient(180deg, rgba(120,30,30,.45), rgba(60,12,12,.6)); border: 1px solid rgba(220,80,80,.5); box-shadow: 0 0 16px rgba(220,60,60,.25) inset; animation: tb-fly-in .35s ease; } @keyframes tb-fly-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .tb-fly-line { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 12px; font-weight: 700; color: #ffd9d9; line-height: 1.5; } .tb-fly-x { color: #ff6b6b; font-weight: 900; } .tb-fly-team { color: #ffb0b0; } .tb-fly-pen { color: #ff7676; font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; } /* 交代ブロック */ .tb-swap-block { background: #131e18; border: 1px solid #ffffff18; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; } .tb-swap-label { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 8px; } .tb-swap-opts { display: flex; gap: 6px; } .tb-swap-opt { flex: 1; display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 8px; cursor: pointer; border: 1px solid #ffffff18; background: #1a2c23; transition: border-color .15s, background .15s; } .tb-swap-opt:hover:not(.out) { border-color: #ffffff30; background: #1f3328; } .tb-swap-opt.selected:not(.out) { border-color: var(--accent); background: #23402e; } .tb-swap-opt.current { border-color: #ffffff22; } .tb-swap-opt.out { opacity: 0.3; cursor: not-allowed; } .tb-swap-icon { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; background: #1e3028; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; } .tb-swap-info { flex: 1; min-width: 0; } .tb-swap-name { font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-swap-gauge { height: 3px; margin-top: 3px; } .tb-swap-hp { font-size: 10px; font-weight: 800; color: var(--muted); flex-shrink: 0; font-variant-numeric: tabular-nums; } .tb-swap-cur { font-size: 9px; font-weight: 800; color: var(--accent); flex-shrink: 0; } .tb-note { font-size: 10px; color: #3e5e4e; text-align: center; margin-bottom: 10px; } .tb-next-btn { width: 100%; padding: 10px; background: var(--accent); border: none; border-radius: 10px; color: #20140a; font-size: 14px; font-weight: 900; cursor: pointer; } .tb-next-btn:hover { background: #ffc46a; } /* ============================================================================ 団体戦 — 追補（HPボード順位メダル / ダメージ演出のシェイク・ゴースト / 交代UIレイアウト修正 / メンバー交代演出） ============================================================================ */ /* HPボード: チーム得点による順位メダル（ヘッダー左） */ .tb-head-left { display: flex; align-items: center; gap: 5px; min-width: 0; } .tb-rank { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 900; color: #2a1d0a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 1px 2px #0007; } .tb-rank.m1 { background: linear-gradient(150deg, #ffe9a6, #f3b13f); } .tb-rank.m2 { background: linear-gradient(150deg, #f1f4f7, #b6c0c9); } .tb-rank.m3 { background: linear-gradient(150deg, #f0c08a, #c47e3e); color: #2a1407; } .tb-rank.m4 { background: linear-gradient(150deg, #b9c0bd, #7c8783); } /* ダメージ演出: ゲージのドレイン＋ゴースト残像、被弾シェイク/フラッシュ、撃沈 */ .tb-dmg-row { position: relative; } .tb-dmg-barwrap { position: relative; } .tb-dmg-barwrap .hp-fill, .tb-dmg-barwrap .hpfill-ghost { position: absolute; left: 0; top: 0; height: 100%; } .tb-dmg-barwrap .hp-fill { transition: width .55s cubic-bezier(.3,.7,.2,1); z-index: 1; } .tb-dmg-barwrap .hpfill-ghost { background: #ffffff70; transition: width .6s ease .1s; } .tb-dmg-delta.show { animation: tbDeltaPop .5s ease; } @keyframes tbDeltaPop { 0% { transform: scale(.4); opacity: 0; } 55% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .tb-dmg-row.flash::after { content: ""; position: absolute; inset: -3px; pointer-events: none; border-radius: 8px; background: radial-gradient(ellipse at center, rgba(255,60,60,.5), transparent 70%); opacity: 0; animation: dmgFlash .5s ease; } .tb-dmg-row.is-win.flash::after { background: radial-gradient(ellipse at center, rgba(120,255,160,.45), transparent 70%); } .tb-dmg-row.shake { animation: dmgShake .42s cubic-bezier(.36,.07,.19,.97); } .tb-dmg-row.downed { animation: downJolt .5s cubic-bezier(.36,.07,.19,.97); } .tb-dmg-row.downed .tb-dmg-name { color: #8c918e !important; } .tb-dmg-row.downed .tb-dmg-num { color: #ff5c5c; } .tb-dmg-stamp { position: absolute; right: 56px; top: 50%; transform: translateY(-50%) scale(.6) rotate(-12deg); font-size: 16px; font-weight: 900; color: #ff5c5c; opacity: 0; -webkit-text-stroke: 1px #4a0d0d; text-shadow: 0 2px 6px #000a; pointer-events: none; } .tb-dmg-stamp.show { animation: downStamp .5s cubic-bezier(.2,1.5,.3,1) forwards; } /* 交代UI: 右側を「HP/出場中」の縦積みにして名前の潰れを解消 */ .tb-swap-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; } /* メンバー交代演出 */ .swapfx-card { min-width: 420px; max-width: 70%; text-align: center; } .swapfx-rows { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; } .swapfx-row { display: flex; align-items: center; gap: 12px; background: #131e18; border: 1px solid #ffffff18; border-radius: 10px; padding: 8px 14px; } .swapfx-row.mine { border-color: var(--accent); } .swapfx-team { font-size: 12px; font-weight: 800; color: var(--muted); width: 92px; text-align: left; flex-shrink: 0; } .swapfx-row.mine .swapfx-team { color: var(--accent); } .swapfx-pair { display: flex; align-items: center; gap: 12px; flex: 1; justify-content: center; } .swapfx-mem { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; } .swapfx-mem.leaving { opacity: .5; } .swapfx-mem.leaving .swapfx-nm { text-decoration: line-through; } .swapfx-mem.entering { animation: swapfxIn .42s ease; } @keyframes swapfxIn { from { opacity: 0; transform: translateX(-10px) scale(.9); } to { opacity: 1; transform: none; } } .swapfx-face { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .swapfx-face-fb { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 35%, #1a2a22); color: #fff; } .swapfx-arrow { font-size: 18px; color: var(--accent); } /* HPボードの順位スライド（FLIP）のため、ブロックを重なり順で前に出せるように */ .tb-block { position: relative; } /* 飛びカットイン（撃沈＋親満払い） */ .fly-cut { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 44px; border-radius: 16px; position: relative; z-index: 2; background: linear-gradient(180deg, rgba(72,12,12,.94), rgba(28,6,6,.97)); border: 2px solid rgba(220,70,70,.6); box-shadow: 0 0 50px rgba(220,40,40,.4), 0 20px 60px rgba(0,0,0,.6); animation: flyCutIn .4s cubic-bezier(.2,1.2,.3,1); } @keyframes flyCutIn { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } } .fly-cut-title { font-size: 15px; font-weight: 900; letter-spacing: .14em; color: #ff9a9a; } .fly-cut-item { text-align: center; } .fly-cut-team { font-size: 12px; font-weight: 800; color: #ffb0b0; margin-bottom: 3px; } .fly-cut-headline { font-size: 30px; font-weight: 900; color: #fff; text-shadow: 0 2px 10px #000; } .fly-cut-x { color: #ff5c5c; margin-right: 6px; } .fly-cut-pen { margin-top: 6px; font-size: 17px; font-weight: 800; color: #ffd9d9; } .fly-cut-pen-num { display: inline-block; margin-left: 4px; font-size: 30px; color: #ff6b6b; -webkit-text-stroke: 1px #4a0d0d; font-variant-numeric: tabular-nums; animation: flyCutSlam .5s cubic-bezier(.2,1.6,.3,1) .5s both; } @keyframes flyCutSlam { 0% { transform: scale(2.4); opacity: 0; } 60% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1); } } /* ============================================================================ 購入UIセット 第3弾 — マイキャラ作成/確認画面に和風UIを当て込む 既存スイープ同様、末尾追記の後勝ちで素のCSSへ金縁パネル/木目枠を被せる。 ・窓（立ち絵プレビュー / 師匠ヒーロー / 師匠選びモーダル）＝ panel.png の金縁 ・「師匠を変更」ボタン＝ btn.png の木目枠 ・入力欄/セレクト＝ plate.png のプレート地 ・密に並ぶカード（能力/弟子/師匠ピック）は枠を太らせず金リングで高さ据え置き ・師匠選びのロール見出し＝ tab.png（キャラ選択と統一） ============================================================================ */ /* --- 窓を金縁パネルに（中央は暗色背景を温存して可読性優先＝fill なし）--- */ .av-preview-bg, .av-mentor-hero, .av-mentor-picker-panel { border: 13px solid transparent; border-image: url("graphic/ui/sc/panel.png") 18 / 13px / 0 stretch; border-radius: 0; } .av-preview-bg { background: rgba(20,32,26,.86); } .av-mentor-hero { background: rgba(20,32,26,.92); } /* 内側の立ち絵枠は role 色を温存 */ .av-mentor-picker-panel { background: rgba(20,32,26,.97); } /* 師匠選びモーダルの見出しもプレート化（他画面の h1 と同じ意匠）。 */ .av-mentor-picker-title { display: inline-block; padding: 2px 22px; border: 11px solid transparent; border-image: url("graphic/ui/sc/plate.png") 14 18 fill / 10px 15px / 0 stretch; border-radius: 0; color: #f4e3b4; text-shadow: 0 2px 4px rgba(0,0,0,.7); } /* ロール見出しはキャラ選択と同じタブ素材を背景敷き（高さを変えない）。 */ .av-mentor-role-name { background: url("graphic/ui/sc/tab.png") no-repeat left center / 100% 100%; color: #f4e3b4; padding: 4px 16px; text-shadow: 0 1px 2px rgba(0,0,0,.7); } .av-mentor-role-head { border-bottom: 0; } /* --- 「師匠を変更」ボタンを木目枠に（色は金で据え置き）--- */ .av-mentor-change { border: 12px solid transparent; border-image: url("graphic/ui/sc/btn.png") 11 15 fill / 11px 15px / 0 stretch; border-radius: 0; background: none; color: var(--accent); font-weight: 800; } .av-mentor-change:hover { border-image-source: url("graphic/ui/sc/btn_hover.png"); background: none; } /* --- 入力欄/セレクトをプレート地に --- */ .av-input { border: 9px solid transparent; border-image: url("graphic/ui/sc/plate.png") 14 18 fill / 8px 13px / 0 stretch; border-radius: 0; background: rgba(10,16,13,.55); } .av-input:focus { filter: brightness(1.12); } /* --- 密に並ぶカードは枠を太らせず金リング＋選択/ホバーでアクセント色 --- */ .av-skill-card, .av-deshi-card, .av-mentor-pick-card { border-color: rgba(246,179,82,.5); } .av-skill-card:hover, .av-mentor-pick-card:hover:not(.is-locked) { border-color: var(--accent); } .av-deshi-card:hover { border-color: var(--accent); } /* ============================================================ 師弟ホーム 追加スキン — 鍛錬の型選択 / 大会の実戦経験 / 覇道編テーマ （すべて #mentor-home-screen.mh2 配下。他画面へ漏らさない） ============================================================ */ /* 鍛錬「型」選択（モーダル内3択。コマンド札は増やさない＝レイアウト不変） */ #mentor-home-screen.mh2 .mhx-tr-styles { margin-top:4px; } #mentor-home-screen.mh2 .mhx-tr-styles .mhx-md-btn small { font-size:10px; white-space:nowrap; letter-spacing:0; } /* 大会リザルト：実戦経験（順位に応じて、その時点の弱点パラメータから伸びる） */ #mentor-home-screen.mh2 .mhx-lg-exp { margin:2px 0 10px; padding:8px 10px 6px; border-radius:8px; border:1px solid rgba(143,36,24,.25); background:rgba(200,164,77,.10); } #mentor-home-screen.mh2 .mhx-lg-exp-h { font-family:var(--font-go); font-size:13px; color:#5a4520; margin-bottom:6px; } #mentor-home-screen.mh2 .mhx-lg-exp-h b { color:#8f2418; font-size:16px; } #mentor-home-screen.mh2 .mhx-lg-exp-h small { color:#6a5836; margin-left:6px; font-size:11px; } /* ---- 覇道編テーマ（師弟編フィナーレ読了後・scenarioService.mentorPhase）---- 道場の藍 → 闘場の緋。空気の色だけ差し替え、配置・骨格は一切変えない。 */ #mentor-home-screen.mh2.is-hadou { --sumi:#120a10; --kon:#3a1020; --shu:#c4252b; --shu-lit:#e8483f; --kin:#d8a93f; --kin-lit:#f4dc9a; } #mentor-home-screen.mh2.is-hadou .mhx-bg-base { background: radial-gradient(90% 70% at 28% 8%, rgba(118,30,44,.46), transparent 62%), radial-gradient(60% 50% at 50% -8%, rgba(220,140,60,.26), transparent 60%), linear-gradient(180deg,#2a0e16 0%, #170810 52%, #0d0409 100%); } #mentor-home-screen.mh2.is-hadou .mhx-shoji { opacity:.08; } #mentor-home-screen.mh2.is-hadou .mhx-floor { background: linear-gradient(180deg, rgba(18,8,11,0), rgba(12,5,8,.85)), repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 96px), linear-gradient(180deg,#3b2026,#1c0e13); } #mentor-home-screen.mh2.is-hadou .mhx-floor::before { background:linear-gradient(90deg,transparent,rgba(232,72,63,.55),transparent); } #mentor-home-screen.mh2.is-hadou .mhx-crest { border-color:rgba(216,169,63,.22); box-shadow:inset 0 0 0 14px rgba(216,169,63,.07); } #mentor-home-screen.mh2.is-hadou .mhx-crest::after { content:"覇"; color:rgba(216,169,63,.10); } #mentor-home-screen.mh2.is-hadou .mhx-lbody { background:radial-gradient(60% 60% at 50% 35%, #ff7a3c, #b81e14 78%); background-image:repeating-linear-gradient(180deg,rgba(0,0,0,.2) 0 1px, transparent 1px 9px); box-shadow:0 0 34px 8px rgba(232,72,63,.5), inset 0 -8px 14px rgba(0,0,0,.45); } #mentor-home-screen.mh2.is-hadou .mhx-topbar { background:linear-gradient(180deg,rgba(22,8,12,.96),rgba(22,8,12,.78)); border-bottom-color:rgba(216,169,63,.5); } #mentor-home-screen.mh2.is-hadou .mhx-floorglow { background:radial-gradient(50% 100% at 50% 100%, rgba(232,100,63,.26), transparent 70%); } #mentor-home-screen.mh2.is-hadou .mhx-seal { border-color:#f0c87a; box-shadow:inset 0 0 4px rgba(0,0,0,.4), 0 0 8px rgba(232,72,63,.45); } /* ---- 覇道編「師匠も伸びる」（二人三脚）---- */ /* 訓練・二人打ちリザルトの師匠成長行（紙モーダル上） */ #mentor-home-screen.mh2 .mhx-md-mentor { font-family:var(--font-go); font-size:12.5px; color:#5a4520; letter-spacing:.03em; margin:8px 0 2px; padding:7px 10px; border-radius:7px; border:1px solid rgba(143,36,24,.22); background:rgba(184,57,43,.07); } #mentor-home-screen.mh2 .mhx-md-mentor b { color:#8f2418; } /* 雀荘リザルトの師匠の一言（帰り際のひとこと。アイコン＋セリフ） */ #mentor-home-screen.mh2 .mhx-pr-quip { display:flex; align-items:center; gap:9px; text-align:left; } #mentor-home-screen.mh2 .mhx-pr-quip img { width:30px; height:30px; border-radius:50%; object-fit:cover; border:1px solid rgba(143,36,24,.35); flex:none; } /* 大会リザルト: 横長2カラム（左=順位表／右=評価・報酬・経験・敗北2択）。 縦積みだと最長ケース（順位8行＋ゲージ＋2択）が 720px を超えるため（無スクロール方針・QA実測）。 */ #mentor-home-screen.mh2 .mhx-modal-card.is-wide { width:840px; max-width:calc(100% - 48px); } #mentor-home-screen.mh2 .mhx-lg-cols { display:flex; gap:20px; align-items:flex-start; text-align:left; margin-top:8px; } #mentor-home-screen.mh2 .mhx-lg-col { flex:1; min-width:0; } /* nameplate の修行 Lv チップ（覇道編のみ） */ #mentor-home-screen.mh2 .mhx-np-shugyo { color:#ffb38a; } /* 師匠詳細の二人三脚ブロック */ #mentor-home-screen.mh2 .mhx-md-haoh-h { font-weight:700; color:#8f2418; margin-bottom:5px; font-size:12px; } #mentor-home-screen.mh2 .mhx-md-haoh-row { display:flex; align-items:center; gap:8px; margin:3px 0; font-size:12px; color:#5a4520; } #mentor-home-screen.mh2 .mhx-md-haoh-row b { color:#8f2418; font-size:14px; } #mentor-home-screen.mh2 .mhx-mg-bar { flex:1; max-width:160px; height:7px; border-radius:4px; overflow:hidden; background:rgba(90,69,32,.18); border:1px solid rgba(90,69,32,.3); } #mentor-home-screen.mh2 .mhx-mg-bar i { display:block; height:100%; background:linear-gradient(90deg,#c8a44d,#e8483f); } /* 師匠の昇段演出（弟子の mhx-dan を流用しつつ、セリフ行は墨で読ませる） */ #mentor-home-screen.mh2 .mhx-dan-mentor .mhx-dan-kicker { color:#8f2418; } #mentor-home-screen.mh2 .mhx-dan-line { font-size:13.5px; line-height:1.7; max-width:430px; margin-left:auto; margin-right:auto; } /* 師匠の技 Lv 超越帯（Lv6〜10・シナリオ起点）＝ nameplate チップをほんのり緋金に */ #mentor-home-screen.mh2 .mhx-np-trans { color:#ffd9a0; text-shadow:0 0 6px rgba(232,72,63,.55); } /* ============================================================ 大会「大一番」構造 — 節前ブリーフィング & オート観戦 ============================================================ */ /* ---- 節前ブリーフィング（第N節: メンツ/形勢/総合順位 → オート・手動の選択） ---- */ .tourney-section { position:absolute; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; font-family:"Yu Gothic","Noto Sans JP",sans-serif; } .tourney-section.is-open { opacity:1; } .tourney-section .ts-scrim { position:absolute; inset:0; background:rgba(4,6,10,.82); } .tourney-section .tsb-card { position:relative; z-index:1; width:620px; max-width:92%; padding:22px 26px 20px; background:linear-gradient(180deg,#10141e,#0a0d14); border:2px solid #c8a44d; border-radius:16px; box-shadow:0 26px 70px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,220,140,.12); color:#e8efe9; } .tourney-section .tsb-head { text-align:center; margin-bottom:14px; } .tourney-section .tsb-kicker { font-size:12px; color:#9a8a66; letter-spacing:.16em; } .tourney-section .tsb-sec { font-size:24px; color:#ecd592; letter-spacing:.18em; margin-top:2px; font-weight:700; } .tourney-section.is-big .tsb-sec { color:#ffb38a; text-shadow:0 0 14px rgba(232,72,63,.5); } .tourney-section.is-big .tsb-card { border-color:#d65a47; box-shadow:0 26px 70px rgba(0,0,0,.7), 0 0 36px rgba(232,72,63,.22), inset 0 0 0 1px rgba(255,180,140,.14); } .tourney-section .tsb-cols { display:flex; gap:16px; margin-bottom:12px; } .tourney-section .tsb-col { flex:1; min-width:0; background:rgba(255,255,255,.03); border:1px solid rgba(200,164,77,.18); border-radius:10px; padding:10px 12px; } .tourney-section .tsb-h { font-size:11px; color:#9a8a66; letter-spacing:.1em; margin-bottom:7px; } .tourney-section .tsb-row { display:flex; align-items:center; gap:8px; padding:4px 2px; font-size:13px; } .tourney-section .tsb-row.me .tsb-name { color:#ffd06b; font-weight:700; } .tourney-section .tsb-row.named .tsb-name { font-weight:700; } .tourney-section .tsb-dot { width:10px; height:10px; border-radius:50%; flex:none; } .tourney-section .tsb-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tourney-section .tsb-title { margin-left:auto; font-size:10.5px; color:#8a96a8; flex:none; } .tourney-section .tsb-tier { margin-top:8px; padding-top:7px; border-top:1px dashed rgba(200,164,77,.3); font-size:12px; color:#9bb3a6; } .tourney-section .tsb-tier b { color:#ecd592; font-size:14px; letter-spacing:.08em; } .tourney-section .tsb-st { display:flex; align-items:center; gap:8px; padding:4px 2px; font-size:13px; } .tourney-section .tsb-st.me .tsb-st-n { color:#ffd06b; font-weight:700; } .tourney-section .tsb-st-p { width:20px; height:20px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:5px; background:#39424e; font-size:11px; font-weight:700; } .tourney-section .tsb-st.me .tsb-st-p { background:#d6a23a; color:#1a120a; } .tourney-section .tsb-st-n { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tourney-section .tsb-st-v { margin-left:auto; font-weight:700; color:#9bb3a6; flex:none; } .tourney-section .tsb-none { color:#8a96a8; font-size:12px; } .tourney-section .tsb-big { margin-bottom:12px; padding:10px 14px; border-radius:10px; background:linear-gradient(90deg,rgba(232,72,63,.14),rgba(232,72,63,.04)); border:1px solid rgba(232,72,63,.4); } .tourney-section .tsb-big-cond { font-size:13px; color:#ffd9c4; font-weight:700; letter-spacing:.04em; margin-bottom:7px; } .tourney-section .tsb-big-line { display:flex; align-items:center; gap:9px; font-size:13px; color:#e8efe9; font-family:"Yu Mincho","Noto Serif JP",serif; } .tourney-section .tsb-big-line img { width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid rgba(232,160,120,.6); flex:none; } .tourney-section .tsb-btns { display:flex; gap:12px; justify-content:center; } .tourney-section .tsb-btns button { min-width:170px; } .tourney-section .tsb-go-big { min-width:260px; font-size:17px; letter-spacing:.12em; } /* ---- オート観戦（雀荘オートと同じ「観るだけ」テンポ・局結果のめくり＋師匠相槌） ---- */ .tourney-watch { position:absolute; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; font-family:"Yu Gothic","Noto Sans JP",sans-serif; } .tourney-watch.is-open { opacity:1; } .tourney-watch .ts-scrim { position:absolute; inset:0; background:rgba(4,6,10,.82); } .tourney-watch .tw-card { position:relative; z-index:1; width:640px; max-width:92%; padding:20px 24px 18px; background:linear-gradient(180deg,#10141e,#0a0d14); border:2px solid #c8a44d; border-radius:16px; box-shadow:0 26px 70px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,220,140,.12); color:#e8efe9; } .tourney-watch .tw-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; } .tourney-watch .tw-kicker { font-size:12px; color:#9a8a66; letter-spacing:.14em; } .tourney-watch .tw-sec { font-size:15px; color:#ecd592; letter-spacing:.1em; font-weight:700; } .tourney-watch .tw-pts { display:flex; gap:8px; margin-bottom:10px; } .tourney-watch .tw-pt { flex:1; min-width:0; background:rgba(255,255,255,.04); border:1px solid rgba(200,164,77,.18); border-radius:9px; padding:6px 9px; text-align:center; } .tourney-watch .tw-pt.me { background:linear-gradient(180deg,rgba(214,162,58,.18),rgba(214,162,58,.05)); border-color:rgba(236,213,146,.5); } .tourney-watch .tw-pt-name { display:block; font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tourney-watch .tw-pt-v { font-size:15px; } .tourney-watch .tw-log { height:210px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; margin-bottom:10px; padding:8px 10px; background:rgba(0,0,0,.25); border:1px solid rgba(200,164,77,.15); border-radius:9px; } .tourney-watch .tw-row { display:flex; align-items:center; gap:10px; font-size:13px; padding:3px 4px; border-radius:6px; animation:tsRow .35s ease both; } .tourney-watch .tw-row.win { background:rgba(214,162,58,.14); } .tourney-watch .tw-row.pay { background:rgba(232,72,63,.12); } .tourney-watch .tw-r-l { flex:none; width:46px; color:#9a8a66; font-size:11px; } .tourney-watch .tw-r-t { min-width:0; } .tourney-watch .tw-bigtag { margin-left:8px; font-style:normal; font-size:11px; color:#ffb38a; font-weight:700; } .tourney-watch .tw-quip { display:flex; align-items:center; gap:9px; min-height:38px; margin-bottom:10px; font-size:13px; color:#e8e2cf; font-family:"Yu Mincho","Noto Serif JP",serif; } .tourney-watch .tw-quip img { width:32px; height:32px; border-radius:50%; object-fit:cover; border:1px solid rgba(200,164,77,.5); flex:none; } .tourney-watch .tw-btns { display:flex; gap:12px; justify-content:center; } .tourney-watch .tw-btns button { min-width:150px; } /* ---- 大会: この節の自分の結果（順位表の最上段で即答する帯） ---- */ .tourney-standings .ts-secres { display:flex; align-items:baseline; gap:12px; margin:-4px 0 12px; padding:10px 16px; border-radius:11px; border:1px solid rgba(236,213,146,.55); background:linear-gradient(90deg,rgba(214,162,58,.26),rgba(214,162,58,.07)); } .tourney-standings .ts-secres.dn { border-color:rgba(232,93,117,.5); background:linear-gradient(90deg,rgba(232,93,117,.2),rgba(232,93,117,.05)); } .tourney-standings .ts-sr-lab { font-size:11px; color:#cdb88f; letter-spacing:.1em; flex:none; } .tourney-standings .ts-secres.dn .ts-sr-lab { color:#d8a8b4; } .tourney-standings .ts-sr-place { font-size:26px; color:#ffd06b; line-height:1; } .tourney-standings .ts-sr-place small { font-size:13px; margin-left:1px; } .tourney-standings .ts-sr-of { font-size:12px; color:#9a8a66; margin-left:2px; } .tourney-standings .ts-secres.dn .ts-sr-place { color:#ff9aa8; } .tourney-standings .ts-sr-pt { font-size:22px; color:#ecd592; line-height:1; } .tourney-standings .ts-sr-pt small { font-size:12px; margin-left:1px; } .tourney-standings .ts-secres.dn .ts-sr-pt { color:#e8a0ac; } .tourney-standings .ts-sr-detail { margin-left:auto; font-size:12px; color:#9bb3a6; flex:none; } /* ---- 大会オーバーレイ共通: モーダル下のボタンをしっかりした押し心地に（細長すぎ対策）。 btn-tsumo=主ボタン（金）/ btn-ron=副ボタン（落ち着いた縁取り）に役割分担。 ---- */ .tourney-brief .tb-btns button, .tourney-standings .ts-btns button, .tourney-section .tsb-btns button, .tourney-watch .tw-btns button { font-size:16px; font-weight:700; padding:13px 26px; border-radius:12px; border:2px solid #0003; cursor:pointer; color:#1a120a; box-shadow:0 4px 14px rgba(0,0,0,.35); } .tourney-brief .tb-btns .btn-ron, .tourney-standings .ts-btns .btn-ron, .tourney-section .tsb-btns .btn-ron, .tourney-watch .tw-btns .btn-ron { background:rgba(255,255,255,.06); color:#e8e2cf; border:2px solid rgba(200,164,77,.5); } .tourney-brief .tb-btns button:hover, .tourney-standings .ts-btns button:hover, .tourney-section .tsb-btns button:hover, .tourney-watch .tw-btns button:hover { filter:brightness(1.1); } .tourney-section .tsb-go-big { padding:15px 34px; font-size:18px; } /* ============================================================ スタッフロール — エピローグ読了後（creditsRoll.js） ============================================================ */ .credits-roll { position:absolute; inset:0; z-index:120; overflow:hidden; opacity:0; transition:opacity .45s; font-family:"Yu Mincho","YuMincho","Noto Serif JP",serif; } .credits-roll.is-open { opacity:1; } .credits-roll .cr-scrim { position:absolute; inset:0; background:#05060a; } .credits-roll .cr-scroll { position:absolute; left:0; right:0; top:0; will-change:transform; text-align:center; color:#ece2c8; } .credits-roll .cr-title { font-size:46px; letter-spacing:.5em; text-indent:.5em; color:#ecd592; margin-bottom:10px; text-shadow:0 0 24px rgba(200,164,77,.35); } .credits-roll .cr-subtitle { font-size:15px; letter-spacing:.3em; color:#9a8a66; margin-bottom:90px; } .credits-roll .cr-section { font-size:13px; letter-spacing:.4em; text-indent:.4em; color:#c8a44d; margin:64px 0 22px; } .credits-roll .cr-row { display:flex; align-items:baseline; justify-content:center; gap:18px; margin:10px 0; } .credits-roll .cr-k { font-size:12px; color:#9a8a66; letter-spacing:.12em; min-width:200px; text-align:right; } .credits-roll .cr-k:empty { min-width:0; } .credits-roll .cr-v { font-size:17px; letter-spacing:.14em; } .credits-roll .cr-v small { display:block; font-size:10.5px; color:#9a8a66; letter-spacing:.2em; margin-top:2px; } .credits-roll .cr-fin { font-size:24px; letter-spacing:.2em; color:#ecd592; margin:110px 0 26px; } .credits-roll .cr-lastline { font-size:15px; line-height:2; color:#e8d8b8; margin-bottom:200px; } .credits-roll .cr-skip { position:absolute; top:14px; right:16px; z-index:2; font-family:"Yu Gothic","Noto Sans JP",sans-serif; font-size:12px; padding:7px 14px; border-radius:8px; cursor:pointer; background:rgba(255,255,255,.06); color:#cdb88f; border:1px solid rgba(200,164,77,.4); } .credits-roll .cr-skip:hover { background:rgba(255,255,255,.12); } .credits-roll .cr-hint { position:absolute; bottom:12px; right:16px; font-family:"Yu Gothic",sans-serif; font-size:10.5px; color:#5d5546; } /* ============================================================================ 師弟 入口/弟子一覧/認証モーダル（Phase 6）— 購入UIセット(gameUIset_19)スキン適用 ・弟子カード = button_rectangle を 9スライス枠（メニューボタンと同じ素材） ・認証モーダル = window_01 の金縁パネル（中央は暗色背景で可読性確保） ============================================================================ */ /* --- 弟子カード（btn.png 9スライス枠・hoverで点灯・修行中は金リング） --- */ .mentor-roster-card { border: 12px solid transparent; border-image: url("graphic/ui/sc/btn.png") 11 15 fill / 12px 15px / 0 stretch; border-radius: 0; background: none; color: var(--ink); cursor: pointer; transition: transform .08s ease; } .mentor-roster-card:hover { border-image-source: url("graphic/ui/sc/btn_hover.png"); transform: translateY(-2px); } .mentor-roster-card.is-active { box-shadow: inset 0 0 0 2px rgba(255,215,102,.9); } .mentor-roster-add { justify-content: center; opacity: .9; } /* --- 認証おすすめモーダル --- */ .auth-modal-overlay { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.62); } .auth-modal { width: 620px; max-width: 90%; max-height: 86%; overflow: auto; padding: 26px 32px 24px; border: 16px solid transparent; border-image: url("graphic/ui/sc/panel.png") 18 / 16px / 0 stretch; border-radius: 0; background: rgba(20,32,26,.96); color: var(--ink); text-align: left; } .auth-modal-title { margin: 0 0 4px; font-size: 24px; color: #f4e3b4; text-shadow: 0 2px 4px rgba(0,0,0,.6); } .auth-modal-lead { margin: 0 0 14px; font-size: 14px; color: var(--muted); } .auth-modal-rec { margin: 0 0 14px; font-size: 15px; line-height: 1.7; } .auth-modal-warn { margin: 0 0 18px; padding: 12px 16px; border-radius: 8px; background: rgba(0,0,0,.25); border-left: 3px solid var(--accent); } .auth-modal-warn-h { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #e7c98a; } .auth-modal-warn-list { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.85; color: #d8d2c4; } .auth-modal-warn-f { margin: 10px 0 0; font-size: 13.5px; color: #cdbf9a; } .auth-modal-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .auth-modal-btns button { width: 100%; } /* --- 汎用 確認モーダル（panel.png 金縁・破壊操作の確認） --- */ .confirm-overlay { position: absolute; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.62); } .confirm-modal { width: 460px; max-width: 90%; padding: 24px 28px 20px; border: 16px solid transparent; border-image: url("graphic/ui/sc/panel.png") 18 / 16px / 0 stretch; border-radius: 0; background: rgba(20,32,26,.96); color: var(--ink); text-align: left; } .confirm-title { margin: 0 0 10px; font-size: 20px; color: #f4e3b4; text-shadow: 0 2px 4px rgba(0,0,0,.6); } .confirm-msg { margin: 0 0 20px; font-size: 14px; line-height: 1.75; color: #e2dccb; } .confirm-btns { display: flex; justify-content: flex-end; gap: 12px; } .confirm-btns button { min-width: 110px; } /* 破壊操作の主ボタンは赤系（btn枠は維持しつつ文字色で危険を示す）。 */ button.primary.danger { color: #ff9a9a; text-shadow: 0 1px 2px rgba(0,0,0,.6); } button.primary.danger:hover { color: #ffbcbc; } /* --- ユーザーネーム入力モーダル（confirm スキンに入力欄を足す） --- */ .username-input { display: block; width: 100%; box-sizing: border-box; margin: 0 0 6px; padding: 10px 14px; font-size: 18px; color: var(--ink); text-align: center; letter-spacing: .04em; } .username-err { min-height: 18px; margin: 0 0 14px; font-size: 13px; color: #ff9a9a; } /* --- アカウント画面 --- */ .account-info { padding: 20px 24px; max-width: 560px; margin: 0 auto 20px; display: flex; flex-direction: column; gap: 0; text-align: left; } /* --- 同期競合モーダル 注記 --- */ .sync-conflict-note { margin: 0 0 14px; font-size: 12px; color: var(--muted); line-height: 1.6; } /* ===== 通信対戦（テスト中） ===== */ /* 結果画面の段位パネル（叩き台・購入UIセット素材） */ .go-rank-panel { margin: 6px auto 12px; width: 460px; max-width: 92%; box-sizing: border-box; padding: 14px 20px 16px; text-align: center; color: var(--ink); border: 16px solid transparent; border-image: url("graphic/ui/sc/panel_light.png") 18 / 16px / 0 stretch; background: rgba(16,26,21,.92); } .go-rank-panel.loading .go-rank-body { color: var(--muted); font-size: 14px; padding: 6px 0; } .go-rank-head { font-size: 12px; letter-spacing: .18em; color: var(--accent); font-weight: 800; margin-bottom: 8px; } .go-rank-main { display: flex; align-items: center; gap: 16px; } .go-rank-dan { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 96px; } .go-rank-title { font-size: 30px; font-weight: 900; color: #f4e3b4; text-shadow: 0 2px 5px rgba(0,0,0,.6); line-height: 1.1; } .go-rank-kana { font-size: 11px; color: var(--muted); letter-spacing: .12em; } .go-rank-gauge { flex: 1; min-width: 0; } .go-rank-bar { --bar-w: 100%; width: 100%; height: 20px; margin: 0 0 4px; } .go-rank-meta { display: flex; justify-content: space-between; font-size: 13px; } .go-rank-rp { color: #d8d2c4; } .go-rank-delta { font-weight: 800; color: #9be29b; } .go-rank-delta.minus { color: #e7a3a3; } /* 昇段バナー＋一言 */ .go-rank-promote { margin: 0 0 12px; padding: 8px 10px; font-size: 19px; font-weight: 900; color: #1f140a; background: linear-gradient(135deg, #ffd277, #e2a23e); border-radius: 6px; box-shadow: 0 1px 0 rgba(0,0,0,.25), 0 0 18px rgba(255,200,90,.35); animation: go-rank-pop .5s cubic-bezier(.2,1.3,.4,1) both; } .go-rank-promote b { color: #3a1f06; } .go-rank-line { margin-top: 10px; font-size: 14px; color: #e7d9b4; font-style: italic; } .go-rank-panel.promoted { box-shadow: 0 0 26px rgba(255,200,90,.28); } @keyframes go-rank-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* 対局終了後のオンライン段位モーダル（FE風ゲージ演出）。go-overlay の上に重ねる独立モーダル。 */ .rankup-overlay { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(6,10,8,.62); opacity: 0; transition: opacity .25s ease; } .rankup-overlay.show { opacity: 1; } .rankup-card { width: 460px; max-width: 90%; box-sizing: border-box; text-align: center; color: var(--ink); padding: 18px 24px 20px; border: 16px solid transparent; border-image: url("graphic/ui/sc/panel_light.png") 18 / 16px / 0 stretch; background: rgba(16,26,21,.96); transform: translateY(10px) scale(.96); transition: transform .25s cubic-bezier(.2,1.2,.4,1); } .rankup-overlay.show .rankup-card { transform: translateY(0) scale(1); } .rankup-card .rankup-head { font-size: 12px; letter-spacing: .18em; color: var(--accent); font-weight: 800; margin-bottom: 10px; } .rankup-promote { margin: 0 auto 12px; display: inline-block; padding: 6px 18px; font-size: 18px; font-weight: 900; color: #1f140a; background: linear-gradient(135deg, #ffd277, #e2a23e); border-radius: 6px; box-shadow: 0 1px 0 rgba(0,0,0,.25), 0 0 18px rgba(255,200,90,.4); animation: go-rank-pop .5s cubic-bezier(.2,1.3,.4,1) both; } .rankup-dan { display: flex; flex-direction: column; align-items: center; margin-bottom: 12px; } .rankup-title { font-size: 34px; font-weight: 900; color: #f4e3b4; text-shadow: 0 2px 6px rgba(0,0,0,.6); line-height: 1.1; } .rankup-kana { font-size: 12px; color: var(--muted); letter-spacing: .14em; } .rankup-bar { --bar-w: 100%; width: 100%; height: 22px; margin: 0; } .rankup-meta { display: flex; justify-content: space-between; font-size: 14px; margin-top: 5px; } .rankup-rp { color: #d8d2c4; font-variant-numeric: tabular-nums; } .rankup-delta { font-weight: 800; color: #9be29b; } .rankup-delta.minus { color: #e7a3a3; } .rankup-line { margin-top: 12px; font-size: 14px; color: #e7d9b4; font-style: italic; } .rankup-close { margin-top: 16px; } .rankup-close:disabled { opacity: .5; cursor: default; } /* 昇段の瞬間フラッシュ：ゲージが光って弾む */ .rankup-overlay.is-rankup .rankup-bar { box-shadow: 0 0 16px rgba(255,210,120,.95), inset 0 1px 2px rgba(0,0,0,.5); } .rankup-overlay.is-rankup .rankup-title { animation: go-rank-pop .4s cubic-bezier(.2,1.5,.4,1); } .test-badge { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .06em; color: #20140a; background: linear-gradient(135deg, #f6b352, #c98a2e); box-shadow: 0 1px 0 rgba(0,0,0,.25); } #online-lobby-screen { display: flex; flex-direction: column; height: 100%; padding: 22px 30px 18px; box-sizing: border-box; gap: 10px; } .online-head { position: relative; text-align: center; } .online-head h1 { margin: 0; font-size: 26px; } .online-back { position: absolute; left: 0; top: 2px; } .online-mode-label { display: inline-block; margin-top: 6px; color: var(--accent); font-weight: 800; letter-spacing: .08em; font-size: 14px; } .online-note { margin: 0; text-align: center; color: var(--muted); font-size: 12px; } .online-body { flex: 1; display: flex; gap: 18px; min-height: 0; } .online-col { background: #1c2c24; border: 2px solid #2a3f34; border-radius: 14px; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; } .online-col-left { width: 420px; flex: none; } .online-col-right { flex: 1; min-width: 0; } /* 合言葉（ルーム） */ .online-codebox { background: #14201a; border: 1px solid #2a3f34; border-radius: 12px; padding: 14px; text-align: center; } .online-codebox-k { color: var(--muted); font-size: 12px; letter-spacing: .14em; } .online-code { font-size: 44px; font-weight: 900; letter-spacing: .22em; color: var(--accent); font-family: "Courier New", monospace; margin: 4px 0 6px; } .online-codebox-sub { color: var(--muted); font-size: 11px; } /* マッチング */ .online-mm { background: #14201a; border: 1px solid #2a3f34; border-radius: 12px; padding: 16px; } /* 通信対戦メニューのプロフィール帯（名前 / よく使う相棒 / 段位・RP） */ .online-profile { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 8px; background: #14201a; border: 1px solid #2a3f34; border-radius: 12px; padding: 12px 16px; } .online-profile .op-cell { display: flex; align-items: center; gap: 10px; } .online-profile .op-k { flex: 0 0 88px; color: var(--muted); font-size: 11px; letter-spacing: .08em; } .online-profile .op-name { font-weight: 800; color: var(--ink); font-size: 16px; } .online-profile .op-bd { display: flex; align-items: center; gap: 8px; min-width: 0; } .op-bd-icon { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid #3a5446; flex: 0 0 auto; } .op-bd-icon.op-bd-fb { display: inline-block; } .online-profile .op-bd-name { font-weight: 700; color: var(--ink); font-size: 14px; } .online-profile .op-bd-none { color: var(--muted); font-size: 13px; } .online-profile .op-rank-row { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; } .online-profile .op-rank-dan { line-height: 1.05; white-space: nowrap; } .online-profile .op-rank-dan b { color: #e7d9b4; font-size: 15px; } .online-profile .op-rank-dan small { display: block; color: var(--muted); font-size: 9px; letter-spacing: .08em; } .online-profile .op-rank-gauge { flex: 1; min-width: 0; } .online-profile .op-rank-bar { display: block; width: 100%; height: 12px; border-radius: 999px; } .online-profile .op-rank-rp { display: block; margin-top: 3px; color: #9be29b; font-size: 11px; font-variant-numeric: tabular-nums; } .online-mm-title { font-weight: 700; color: var(--ink); font-size: 15px; } .online-mm-sub { margin-top: 8px; color: var(--muted); font-size: 12px; } /* マッチング対戦ロビーの戦績パネル（卓表示の代わり） */ .online-stats { margin-top: 12px; background: #14201a; border: 1px solid #2a3f34; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; } .online-stats-head { color: var(--muted); font-size: 12px; letter-spacing: .1em; } .ost-rank { display: flex; align-items: center; gap: 12px; } .ost-dan { line-height: 1.05; white-space: nowrap; } .ost-dan b { color: #e7d9b4; font-size: 18px; } .ost-dan small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .08em; } .ost-gauge { flex: 1; min-width: 0; } .ost-bar { display: block; width: 100%; height: 12px; border-radius: 999px; } .ost-rp { margin-top: 4px; color: #9be29b; font-size: 12px; font-variant-numeric: tabular-nums; } .ost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ost-grid.ost-grid-3 { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .ost-grid-3 .ost-cell { padding: 8px 10px; } .ost-grid-3 .ost-v { font-size: 18px; } .ost-cell { display: flex; flex-direction: column; gap: 2px; background: rgba(16,26,21,.6); border: 1px solid #243a30; border-radius: 10px; padding: 8px 12px; } .ost-k { color: var(--muted); font-size: 11px; letter-spacing: .06em; } .ost-v { color: var(--ink); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; } .ost-buddy { display: flex; align-items: center; gap: 10px; } .ost-buddy-v { display: flex; align-items: center; gap: 8px; } .ost-buddy-icon { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid #3a5446; } .ost-buddy-icon.ost-buddy-fb { display: inline-block; } .ost-buddy-name { color: var(--ink); font-weight: 700; font-size: 15px; } .ost-buddy-none { color: var(--muted); font-size: 13px; } .room-code-input { text-transform: uppercase; letter-spacing: .3em; text-align: center; font-weight: 800; } /* 通信対戦トップ: メニューを横並びにして固定ステージ内（縦スクロールなし）に収める */ #online-screen.menu-screen { max-width: 1000px; gap: 18px; justify-content: center; } #online-screen .menu-list { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 12px; } #online-screen .menu-btn { flex: 1 1 0; min-width: 180px; align-items: center; text-align: center; gap: 4px; padding: 16px 18px; } #online-screen .menu-btn-sub { font-size: 12px; } /* マッチング探索オーバーレイ（reconnect-overlay/-card を流用） */ .match-search-card { text-align: center; min-width: 280px; } .match-search-title { font-weight: 800; color: var(--ink); font-size: 17px; } .match-search-count { margin-top: 10px; font-size: 26px; font-weight: 800; color: var(--accent); } .match-search-sub { margin-top: 6px; color: var(--muted); font-size: 12px; min-height: 1.2em; } .online-mm-bar { margin-top: 12px; height: 8px; border-radius: 999px; background: #0e1813; overflow: hidden; } .online-mm-fill { height: 100%; width: 8%; border-radius: 999px; background: linear-gradient(90deg, #f6b352, #c98a2e); animation: onlineMmScan 1.4s ease-in-out infinite alternate; } @keyframes onlineMmScan { from { width: 12%; } to { width: 86%; } } .online-dots::after { content: ""; animation: onlineDots 1.2s steps(4, end) infinite; } @keyframes onlineDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } } /* 卓の席 */ .online-table-head { color: var(--muted); font-size: 12px; letter-spacing: .1em; } .online-seats { display: flex; flex-direction: column; gap: 8px; } .online-seat { display: flex; align-items: center; justify-content: space-between; background: #14201a; border: 1px solid #2a3f34; border-radius: 10px; padding: 9px 14px; } .online-seat.is-filled { border-color: rgba(246,179,82,.4); } .online-seat-who { font-weight: 700; color: var(--ink); } .online-seat-state { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; } .online-seat-state.is-you { color: var(--accent); font-weight: 800; } .online-seat-connecting { justify-content: center; color: var(--muted); } /* 待合室: 空き枠の CPU 化／解除ボタン（ホストのみ表示）。 */ .online-slot-btn { font-size: 12px; font-weight: 700; color: var(--ink); background: #244b39cc; border: 1px solid #2a3f34; border-radius: 8px; padding: 4px 12px; cursor: pointer; } .online-slot-btn:hover { background: var(--accent); color: #20140a; border-color: var(--accent); } /* 待合室フッタ: 非ホストの「ホストの開始を待っています…」。 */ .online-wait-label { color: var(--muted); font-size: 14px; align-self: center; } .online-spinner { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #2a3f34; border-top-color: var(--accent); display: inline-block; animation: onlineSpin .8s linear infinite; } @keyframes onlineSpin { to { transform: rotate(360deg); } } /* 長考超過 → CPU 代打ち中モーダル（reconnect-overlay/-card を流用） */ .takeover-card { text-align: center; min-width: 260px; } .takeover-title { font-weight: 800; color: #f3b13a; font-size: 18px; letter-spacing: .04em; } .takeover-sub { margin-top: 10px; color: var(--ink); font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; } /* 局間「通信待機中…」は再接続/探索と同じ中央モーダル（.reconnect-overlay/.reconnect-card）を流用。 */ .online-cpu-badge { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #20140a; background: linear-gradient(135deg, #9ec59a, #6f9a6a); } /* 雀士選択グリッド */ .online-pick-head { color: var(--muted); font-size: 12px; letter-spacing: .1em; } .online-char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; overflow: hidden; align-content: start; } .olc-card { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; cursor: pointer; color: var(--ink); background: #14201a; border: 2px solid #2a3f34; border-radius: 12px; transition: border-color .12s, transform .08s; } .olc-card:hover { border-color: var(--role, var(--accent)); transform: translateY(-1px); } .olc-card.is-picked { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(246,179,82,.35) inset; } .olc-icon { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #0e1813; } .olc-icon-fb { width: 46px; height: 46px; border-radius: 50%; } .olc-name { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.2; } /* フッター */ .online-foot { display: flex; justify-content: center; } .online-start { min-width: 240px; } .online-start:disabled { opacity: .45; cursor: not-allowed; } /* 再接続オーバーレイ */ .reconnect-overlay { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(8, 14, 11, .72); } .reconnect-card { display: flex; flex-direction: column; align-items: center; gap: 14px; background: #1c2c24; border: 2px solid #2a3f34; border-radius: 16px; padding: 26px 34px; min-width: 280px; text-align: center; } .reconnect-card .online-spinner { width: 22px; height: 22px; } .reconnect-msg { color: var(--ink); font-weight: 700; font-size: 16px; } .reconnect-btns { display: flex; gap: 12px; align-items: center; } /* ── サクセス暦化（F1）: 年月表示・次の大会カウントダウン ───────────── docs/shitei-calendar-and-roguelite.md「A. 師弟＝サクセス暦化」。styles.css 末尾追記（後勝ち）。 */ .mhx-cal { font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1.1; color: var(--ink, #e8eef0); opacity: .92; text-align: right; margin-bottom: 1px; } .mhx-cal b { font-size: 13px; } .mhx-cal .mhx-cal-s { margin-left: 4px; padding: 0 5px; border-radius: 6px; background: rgba(255, 255, 255, .12); font-size: 10px; } .mhx-cal.is-milestone { color: #f6d27a; } .mhx-cal.is-milestone .mhx-cal-s { background: rgba(246, 210, 122, .2); } .mhx-cd { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, .1); color: var(--ink, #e8eef0); } .mhx-cd b { font-size: 13px; color: #f6d27a; } .mhx-cd.is-open { background: rgba(120, 210, 140, .22); color: #bdf0c6; } .mhx-next.is-waiting { opacity: .6; cursor: default; filter: grayscale(.35); } .mhx-next.is-waiting:hover { transform: none; } .mhx-goal-mk { margin-left: 6px; font-size: 11px; color: #f6d27a; font-weight: 700; } /* ── F2: 大会メニュー（当月開催から選ぶ＋九宝コレクション）───────────── */ .tourney-menu { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .18s; } .tourney-menu.is-open { opacity: 1; } .tourney-menu .ts-scrim { position: absolute; inset: 0; background: rgba(8, 12, 10, .74); } .tmenu-wrap { position: relative; width: min(960px, 94%); max-height: calc(var(--stage-h) - 40px); background: linear-gradient(180deg, #22332a, #1a2620); border: 2px solid #3a5446; border-radius: 16px; padding: 18px 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); display: flex; flex-direction: column; gap: 12px; } .tmenu-head { display: flex; justify-content: space-between; align-items: flex-end; } .tmenu-h-ttl { font-size: 22px; font-weight: 800; color: #f3ead2; } .tmenu-h-sub { font-size: 12px; color: #9fb6a6; } .tmenu-rank { text-align: right; color: #f6d27a; font-size: 13px; font-weight: 700; } .tmenu-rank small { display: block; color: #9fb6a6; font-weight: 600; } .tmc-collection { display: flex; gap: 6px; padding: 8px; background: rgba(0, 0, 0, .22); border-radius: 10px; } .tmc-gem { flex: 1; text-align: center; padding: 6px 2px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid transparent; opacity: .5; } .tmc-gem.is-owned { opacity: 1; background: rgba(246, 210, 122, .16); border-color: rgba(246, 210, 122, .45); } .tmc-gem.is-goal { border-color: #e8b04a; opacity: 1; } .tmc-gem-mk { display: block; font-size: 14px; font-weight: 800; color: #f6d27a; } .tmc-gem-nm { display: block; font-size: 9px; color: #cdddd0; margin-top: 2px; line-height: 1.1; } .tmenu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0; overflow-y: auto; overflow-x: hidden; } .tmenu-card { display: flex; gap: 10px; text-align: left; padding: 12px; border-radius: 12px; background: #243a2f; border: 2px solid #335041; cursor: pointer; transition: transform .1s, border-color .1s; } .tmenu-card:hover { transform: translateY(-2px); border-color: #5b8e72; } .tmenu-card.is-goal { border-color: #e8b04a; box-shadow: 0 0 0 1px rgba(232, 176, 74, .3) inset; } .tmenu-badge { width: 40px; height: 40px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: linear-gradient(135deg, #caa64a, #8a6f2a); color: #1a2620; font-weight: 800; font-size: 11px; } .tmenu-name { font-size: 16px; font-weight: 800; color: #f3ead2; } .tmenu-tre { font-size: 12px; color: #cdddd0; } .tmenu-tre small { color: #9fb6a6; margin-left: 4px; } .tmenu-meta { font-size: 11px; color: #9fb6a6; margin-top: 3px; } .tmenu-tags { display: flex; gap: 4px; margin-bottom: 2px; min-height: 14px; } .tmenu-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; } .tmenu-tag.is-goal { background: rgba(232, 176, 74, .22); color: #f6d27a; } .tmenu-tag.is-owned { background: rgba(120, 210, 140, .2); color: #bdf0c6; } .tmenu-tag.is-story { background: rgba(120, 160, 230, .2); color: #bcd0f5; } .tmenu-eval.ok { color: #bdf0c6; } .tmenu-eval.ng { color: #f0a6a6; } .tmenu-empty { grid-column: 1 / -1; text-align: center; color: #9fb6a6; padding: 30px; } .tmenu-btns { display: flex; justify-content: center; } /* ── F3: シナリオ解禁ゲート（弟子─ゲージ─師匠＋解禁演出）──────────── */ .scgate { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; } .scgate.is-open { opacity: 1; } .scgate-scrim { position: absolute; inset: 0; background: rgba(8, 12, 10, .78); } .scgate-card { position: relative; width: min(440px, 92%); background: linear-gradient(180deg, #22332a, #1a2620); border: 2px solid #3a5446; border-radius: 16px; padding: 26px 28px; text-align: center; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); } .scgate-card.is-unlocked { border-color: #e8b04a; } .scgate-ttl { font-size: 20px; font-weight: 800; color: #f3ead2; margin-bottom: 20px; } .scgate-card.is-unlocked .scgate-ttl { color: #f6d27a; } .scgate-rail { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .scgate-ava, .scgate-mentor { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; overflow: hidden; background: #2c4034; border: 2px solid #4a6a56; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #9fb6a6; } .scgate-ava img, .scgate-mentor img { width: 100%; height: 100%; object-fit: cover; } .scgate-mentor.is-shine { border-color: #f6d27a; box-shadow: 0 0 16px 4px rgba(246, 210, 122, .7); animation: scgate-pop .5s ease; } @keyframes scgate-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } } .scgate-bar { flex: 1; height: 12px; border-radius: 999px; background: rgba(0, 0, 0, .35); overflow: hidden; border: 1px solid #3a5446; } .scgate-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #caa64a, #f6d27a); transition: width 1s cubic-bezier(.2, .8, .2, 1); } .scgate-msg { color: #cdddd0; font-size: 13px; margin-bottom: 18px; } .scgate-cond-h { color: #9fb6a6; font-size: 12px; margin-bottom: 6px; } .scgate-cond { color: #f3ead2; font-size: 14px; line-height: 1.7; margin-bottom: 18px; } .scgate-btns { display: flex; justify-content: center; } .scgate-go, .scgate-close { padding: 8px 28px; border-radius: 10px; font-weight: 800; font-size: 15px; cursor: pointer; border: none; } .scgate-go { background: linear-gradient(135deg, #caa64a, #8a6f2a); color: #1a2620; } .scgate-close { background: #2c4034; color: #cdddd0; border: 1px solid #4a6a56; } .sclist-row.is-gate { cursor: pointer; opacity: .82; } /* ── F4: 修行成果（エピローグ後の評価・タイプ確定）─────────────── */ .succ-result { position: fixed; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s; } .succ-result.is-open { opacity: 1; } .succ-result .ts-scrim { position: absolute; inset: 0; background: rgba(8, 12, 10, .82); } .succ-card { position: relative; width: min(460px, 92%); background: linear-gradient(180deg, #26382d, #19241e); border: 2px solid #caa64a; border-radius: 18px; padding: 28px 30px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); } .succ-ttl { font-size: 15px; letter-spacing: .3em; color: #f6d27a; font-weight: 800; } .succ-name { font-size: 22px; font-weight: 800; color: #f3ead2; margin: 6px 0 14px; } .succ-rank { font-size: 16px; color: #cdddd0; margin-bottom: 16px; } .succ-rank b { font-size: 26px; color: #f6d27a; margin-left: 6px; } .succ-grid { display: flex; gap: 8px; margin-bottom: 16px; } .succ-cell { flex: 1; background: rgba(0, 0, 0, .25); border-radius: 10px; padding: 10px 4px; } .succ-cell span { display: block; font-size: 11px; color: #9fb6a6; margin-bottom: 4px; } .succ-cell b { font-size: 16px; color: #f3ead2; } .succ-role { font-size: 15px; color: #cdddd0; margin-bottom: 14px; } .succ-role b { font-size: 18px; } .succ-note { font-size: 12px; color: #9fb6a6; line-height: 1.6; margin-bottom: 18px; } .succ-go { padding: 9px 32px; border-radius: 10px; border: none; font-weight: 800; font-size: 15px; cursor: pointer; background: linear-gradient(135deg, #caa64a, #8a6f2a); color: #1a2620; } .succ-rep-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-height: 0; overflow-y: auto; } .succ-rep-card { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 10px; background: #2c4034; border: 1px solid #4a6a56; color: #f3ead2; cursor: pointer; } .succ-rep-card:hover { border-color: #caa64a; } .succ-rep-card span { font-size: 12px; color: #9fb6a6; } .succ-rep-cancel { padding: 7px 22px; border-radius: 9px; border: 1px solid #4a6a56; background: #2c4034; color: #cdddd0; cursor: pointer; } /* F6: フリー対戦の「あなたの弟子」セクション（修行完了弟子＝席0専用）。role-group を流用し、 育てた弟子だと一目で分かる金のアクセントだけ足す（数値は見せない方針は不変）。 */ .role-group.deshi-group { --role: #e0b85a; } .role-group.deshi-group .role-name::before { content: "🎓 "; } .role-group.deshi-group .role-name { color: #e0b85a; letter-spacing: .04em; } /* 弟子セクションぶんロスターが伸びても固定ステージ(720)を割らないよう、③のロスター列だけ 上限を設けて内部スクロールに逃がす（vh/vw 不使用＝stage基準の固定値。不変条件の許容パターン）。 弟子0〜数枠なら上限未満で従来どおりスクロールは出ない。 */ #select-screen .wiz-pane[data-pane="3"] #seat-bar { flex: 0 0 auto; } #select-screen .wiz-pane[data-pane="3"] .select-layout { flex: 1 1 auto; min-height: 0; align-items: stretch; } #select-screen .wiz-pane[data-pane="3"] .char-list { min-height: 0; max-height: none; height: 100%; overflow-y: auto; padding-right: 4px; } /* ===================================================================== F7 ローグライト 対戦ホーム→ローグライト。固定ステージ(1280×720)・ロスターのみ内部スクロールに逃がす。 こぱんだ屋UIに馴染むダーク＋金枠トーン。色はレア度で動的(--rarity)。 */ .rl-screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 22px 30px; gap: 12px; } .rl-head { display: flex; align-items: baseline; justify-content: space-between; } .rl-title { margin: 0; font-size: 28px; color: var(--accent); letter-spacing: .04em; } .rl-best { font-size: 15px; color: var(--muted); } .rl-best b { color: var(--ink); font-size: 18px; } .rl-lead { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; } .rl-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px 1fr; gap: 18px; } .rl-party { display: flex; flex-direction: column; gap: 10px; } .rl-party-head, .rl-roster-head { font-size: 13px; color: var(--muted); } .rl-roster-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .rl-roster-legend { font-size: 11px; color: var(--muted); opacity: .85; display: inline-flex; align-items: center; gap: 6px; } .rl-legend-lamp { width: 9px; height: 9px; border-radius: 50%; background: conic-gradient(from 220deg, #8893a4, #5fae9a, #5ea0d6, #e8c45d, #f2a6bd, #8893a4); box-shadow: 0 0 6px rgba(232,196,93,.4); } .rl-party-slots { display: flex; flex-direction: column; gap: 10px; } /* 絆の帯(0..4) → 枠の「灯の色」。出会ったばかりの石灰 → 青磁 → 空青 → 楼光金 → 無二の薔薇金。 */ .tone-bond0 { --bond:#8893a4; --bond-glow:rgba(136,147,164,.14); --bond-edge:rgba(136,147,164,.34); } /* 出会ったばかり */ .tone-bond1 { --bond:#5fae9a; --bond-glow:rgba(95,174,154,.16); --bond-edge:rgba(95,174,154,.46); } /* 打ち解け始め */ .tone-bond2 { --bond:#5ea0d6; --bond-glow:rgba(94,160,214,.17); --bond-edge:rgba(94,160,214,.50); } /* 気を許す仲 */ .tone-bond3 { --bond:#e8c45d; --bond-glow:rgba(232,196,93,.18); --bond-edge:rgba(232,196,93,.56); } /* 相棒 */ .tone-bond4 { --bond:#f2a6bd; --bond-glow:rgba(242,166,189,.20); --bond-edge:rgba(242,166,189,.62); } /* 無二の相棒 */ .rl-slot { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 8px 12px; border: 2px dashed rgba(246,179,82,.35); border-radius: 12px; color: var(--muted); background: rgba(0,0,0,.18); font-size: 14px; cursor: default; } .rl-slot.filled { border-style: solid; border-color: var(--bond-edge, rgba(246,179,82,.6)); color: var(--ink); cursor: pointer; background: linear-gradient(90deg, var(--bond-glow, transparent), rgba(0,0,0,.18) 62%); transition: border-color .14s, box-shadow .14s; } .rl-slot.you.filled { box-shadow: 0 0 0 1px var(--bond-edge, rgba(246,179,82,.3)) inset; } .rl-slot.filled:hover { box-shadow: 0 0 12px var(--bond-glow, transparent), 0 0 0 1px var(--bond-edge, transparent) inset; } .rl-slot-face, .rl-cell-face, .rl-slot-face.rl-face-fb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; object-position: top center; } .rl-slot-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .rl-slot-name { font-size: 16px; font-weight: 700; line-height: 1.15; } .rl-slot-hp { font-size: 11px; color: var(--muted); display: flex; align-items: baseline; gap: 6px; } .rl-slot-hp b { font-size: 15px; color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; } .rl-slot-bond { color: var(--bond, var(--accent)); font-weight: 700; font-size: 10.5px; letter-spacing: .03em; } .rl-slot-tag { font-size: 12px; color: var(--bond, var(--accent)); align-self: flex-start; } .rl-roster { display: flex; flex-direction: column; gap: 8px; min-height: 0; } .rl-roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: 10px; overflow: hidden auto; padding: 4px; align-content: start; min-height: 0; } /* 縦のみスクロール（端カードのホバーポップが横スクロールバーを誘発しないよう x はクリップ） */ .rl-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 6px 8px; border: 1.5px solid var(--bond-edge, rgba(255,255,255,.12)); border-radius: 13px; background: radial-gradient(120% 88% at 50% -12%, var(--bond-glow, transparent), transparent 62%), rgba(0,0,0,.24); color: var(--ink); cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; } .rl-cell:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--bond, var(--accent)); box-shadow: 0 6px 18px rgba(0,0,0,.42), 0 0 0 1px var(--bond-edge, transparent); } .rl-cell:disabled { opacity: .4; cursor: default; } .rl-cell.picked { border-color: var(--bond, var(--accent)); outline: 2px solid var(--bond, var(--accent)); outline-offset: -2px; box-shadow: 0 0 0 2px var(--bond-edge, rgba(246,179,82,.35)) inset, 0 0 14px var(--bond-glow, transparent); } .rl-cell-face { width: 64px; height: 64px; } .rl-cell-name { font-size: 12px; text-align: center; line-height: 1.2; font-weight: 700; } /* 出発時HP＝実値＋点棒ゲージ（短く赤い＝脆い／長く金＝堅い） */ .rl-cell-hp { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; } .rl-cell-hp-line { display: flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; } .rl-cell-hp-line b { font-size: 16px; font-weight: 800; color: #f3ece0; line-height: 1; letter-spacing: .01em; } .rl-cell-hp-unit { font-size: 9px; color: var(--muted); letter-spacing: .1em; } .rl-cell-hp-gauge { position: relative; width: 80%; height: 5px; border-radius: 3px; overflow: hidden; background: linear-gradient(90deg, #b8503a 0%, #d99a4e 56%, #e8c45d 100%); } .rl-cell-hp-gauge > i { position: absolute; inset: 0 0 0 auto; width: calc((1 - var(--fill, .5)) * 100%); background: rgba(8,6,4,.78); } /* 間柄ラベル＝枠の灯と同色の点＋帯名（数値は出さない＝CLAUDE.md 絆表示方針） */ .rl-cell-bond { font-size: 9.5px; font-weight: 700; letter-spacing: .03em; color: var(--bond, var(--muted)); display: inline-flex; align-items: center; gap: 4px; } .rl-cell-bond::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--bond, var(--muted)); box-shadow: 0 0 5px var(--bond, transparent); } /* 無二の相棒(band4)＝最高絆の特別。灯がゆっくり呼吸する（控えめ・reduced-motion で停止） */ .rl-cell.tone-bond4::after { content: ""; position: absolute; inset: -1px; border-radius: 13px; pointer-events: none; box-shadow: 0 0 12px rgba(242,166,189,.32); animation: rl-bond-breathe 3.4s ease-in-out infinite; } @keyframes rl-bond-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .rl-cell.tone-bond4::after { animation: none; opacity: .7; } } .rl-cell.locked { filter: grayscale(.75); } /* 未解禁＝鍵・非アクティブ（:disabled の dim と併用） */ .rl-cell.locked::after { display: none; } .rl-cell-lock { position: absolute; top: 4px; left: 4px; font-size: 15px; line-height: 1; filter: none; } .rl-cell-badge { position: absolute; top: 4px; right: 4px; font-size: 10px; padding: 1px 5px; background: #e0b85a; color: #2a1f08; border-radius: 6px; font-weight: 700; } .rl-face-fb { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; background: var(--c, #555); color: #fff; } .is-mob-face { background-image: var(--mob-sil); background-size: 240%; background-position: top center; background-repeat: no-repeat; } .rl-foot { display: flex; align-items: center; justify-content: space-between; } /* ボタン（楼光トーン：金のプライマリ／枠線のセカンダリ） */ .rl-start { padding: 10px 28px; font-size: 16px; font-weight: 700; color: #1a1206; letter-spacing: .02em; background: linear-gradient(180deg, #f0d98a, #e8c45d); border: none; border-radius: 11px; cursor: pointer; box-shadow: 0 4px 14px rgba(232,196,93,.28); transition: transform .14s, box-shadow .14s, filter .14s; } .rl-start:disabled { opacity: .4; cursor: default; box-shadow: none; } .rl-start:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 6px 18px rgba(232,196,93,.4); } .rl-retreat { padding: 10px 22px; font-size: 15px; font-weight: 700; color: #e0a89c; background: transparent; border: 1px solid rgba(255,120,100,.42); border-radius: 11px; cursor: pointer; transition: .14s; } .rl-retreat:hover { background: rgba(255,80,60,.1); border-color: var(--danger); color: #ffcec5; } /* ===== 出陣編成（戦闘突入の直前・フルスクリーン）===== 楼光ハブと同じ世界観トークン。 */ .rl-deploy { align-items: stretch; } /* rl-overlay の中央寄せを解除し wrap で全面を使う */ .rl-deploy-wrap { margin: auto; width: min(1080px, 94%); height: 100%; display: flex; flex-direction: column; padding: 18px 0 14px; gap: 10px; color: var(--rl-ink); } .rl-deploy-top { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--rl-edge); } .rl-deploy-battle { display: block; font-family: var(--font-min, "Shippori Mincho", serif); font-size: 30px; letter-spacing: .06em; color: var(--rl-ink); margin-top: 2px; } .rl-deploy.tone-elite .rl-deploy-battle { color: #f0b86a; text-shadow: 0 2px 14px rgba(240,184,106,.35); } .rl-deploy.tone-boss .rl-deploy-battle { color: #ff8a72; text-shadow: 0 2px 16px rgba(255,84,80,.4); } .rl-deploy-choose { display: flex; align-items: center; justify-content: center; gap: 16px; } .rl-deploy-choose span { font-family: var(--font-min, serif); font-size: 18px; letter-spacing: .26em; color: var(--rl-ink); } .rl-deploy-choose::before, .rl-deploy-choose::after { content: ""; height: 1px; width: 110px; background: linear-gradient(90deg, transparent, var(--rl-edge)); } .rl-deploy-choose::after { background: linear-gradient(90deg, var(--rl-edge), transparent); } .rl-deploy-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 360px; gap: 20px; } .rl-deploy-lineup { display: flex; flex-direction: column; gap: 10px; min-height: 0; } .rl-deploy-lineup-head { font-size: 13px; letter-spacing: .04em; color: var(--rl-gold); } .rl-deploy-lineup-head small { color: var(--muted); font-weight: 400; margin-left: 8px; letter-spacing: 0; } /* 立ち絵3カラム構図（左＝着卓／右＝控え）。各列＝立ち絵＋HP＋能力チップ。 */ .rl-deploy-stage { flex: 1 1 auto; display: flex; gap: 12px; min-height: 0; align-items: stretch; } .rl-deploy-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; border: 1px solid var(--rl-edge); background: linear-gradient(180deg, rgba(30,24,40,.6), rgba(13,9,19,.62)); transition: border-color .12s, opacity .12s; } .rl-deploy-col.seated { border-color: var(--rl-gold); box-shadow: inset 0 0 0 1px rgba(232,196,93,.22); } .rl-deploy-col.bench { opacity: .82; } .rl-deploy-col.is-down { opacity: .45; filter: grayscale(.6); } .rl-deploy-col-portrait { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.28); } .rl-deploy-col-art { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .rl-deploy-col-art.rl-face-fb { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 52px; background: var(--c, #555); color: #fff; } .rl-deploy-col-tag { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; backdrop-filter: blur(2px); } .rl-deploy-col-tag.active { background: rgba(232,196,93,.85); color: #2a1d04; } .rl-deploy-col-tag.bench { background: rgba(20,16,28,.7); color: var(--muted); } .rl-deploy-col-move { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; } .rl-deploy-col-move button { width: 30px; height: 26px; border-radius: 8px; border: 1px solid var(--rl-edge); background: rgba(13,9,19,.78); color: var(--rl-ink); font-size: 13px; cursor: pointer; line-height: 1; } .rl-deploy-col-move button:hover:not(:disabled) { border-color: var(--rl-gold); color: var(--rl-gold); } .rl-deploy-col-move button:disabled { opacity: .3; cursor: default; } .rl-deploy-col-name { font-size: 16px; font-weight: 800; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rl-deploy-col-hp { display: flex; flex-direction: column; gap: 4px; } .rl-deploy-col-hpval { font-size: 18px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; color: var(--rl-ink); } .rl-deploy-col-hpval small { font-size: 11px; opacity: .55; font-weight: 600; } .rl-deploy-col-abils { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; min-height: 24px; } .rl-deploy-abk { font-size: 11px; color: var(--muted); letter-spacing: .04em; } .rl-deploy-abchip { font-size: 11.5px; font-weight: 600; color: #f0e6d2; background: rgba(0,0,0,.3); border: 1px solid var(--rl-edge); padding: 3px 10px; border-radius: 999px; cursor: pointer; transition: border-color .12s, color .12s; } .rl-deploy-abchip:hover { border-color: var(--rl-gold); color: var(--rl-gold); } .rl-deploy-abnone { font-size: 12px; color: var(--muted); } .rl-deploy-vdivider { flex: 0 0 1px; align-self: stretch; position: relative; background: linear-gradient(180deg, transparent, var(--rl-edge) 18%, var(--rl-edge) 82%, transparent); margin: 0 4px; } .rl-deploy-vdivider span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); writing-mode: vertical-rl; font-size: 10px; letter-spacing: .18em; color: var(--muted); background: var(--rl-bg, #0d0913); padding: 6px 1px; } /* 能力詳細の小モーダル */ .rl-abil-card { max-width: 420px; text-align: left; } .rl-abil-h { font-family: var(--font-min, serif); font-size: 22px; font-weight: 800; color: var(--rl-gold); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .rl-abil-kind { font-size: 11.5px; font-weight: 700; color: var(--rl-ink); background: rgba(232,196,93,.14); border: 1px solid var(--rl-edge); padding: 2px 9px; border-radius: 999px; letter-spacing: .02em; } .rl-abil-desc { font-size: 14px; line-height: 1.7; color: var(--rl-ink); margin: 14px 0 18px; } /* 帰還確認モーダル（持ち帰り未選択） */ .rl-confirm-card { max-width: 440px; text-align: center; } .rl-confirm-h { font-family: var(--font-min, serif); font-size: 20px; font-weight: 800; color: var(--rl-gold); } .rl-confirm-note { font-size: 13.5px; line-height: 1.7; color: var(--rl-ink); margin: 12px 0 18px; } /* 編成入場の「ドドン！」幕間 */ .rl-vs-intro { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; cursor: pointer; background: radial-gradient(circle at 50% 44%, rgba(26,18,36,.82), rgba(6,4,10,.97)); animation: rlVsIn .26s ease both; } .rl-vs-intro.is-leaving { animation: rlVsOut .36s ease both; } .rl-vs-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 24px; } .rl-vs-floor { font-size: 13px; letter-spacing: .3em; color: var(--rl-gold); opacity: .85; } .rl-vs-line { opacity: 0; } .rl-vs-line.show { animation: rlVsPunch .5s cubic-bezier(.18,.92,.24,1) both; } .rl-vs-title { position: relative; font-family: var(--font-min, "Shippori Mincho", serif); font-weight: 800; font-size: 58px; letter-spacing: .05em; color: var(--rl-ink); line-height: 1.1; } .rl-vs-title::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -10px; height: 2px; background: linear-gradient(90deg, transparent, var(--rl-gold), transparent); transform: scaleX(0); } .rl-vs-title.show::after { animation: rlVsSweep .55s ease .08s both; } .rl-vs-mode { font-size: 23px; letter-spacing: .22em; color: #d9cdb6; } .rl-vs-cry { font-family: var(--font-min, serif); font-weight: 800; font-size: 42px; letter-spacing: .04em; color: var(--rl-gold); text-shadow: 0 2px 22px rgba(232,196,93,.5); } .rl-vs-intro.tone-elite .rl-vs-title { color: #f0b86a; text-shadow: 0 3px 22px rgba(240,184,106,.4); } .rl-vs-intro.tone-boss .rl-vs-title { color: #ff8a72; text-shadow: 0 3px 26px rgba(255,84,80,.5); } .rl-vs-intro.tone-boss .rl-vs-cry { color: #ffd0a0; text-shadow: 0 2px 26px rgba(255,120,80,.55); } @keyframes rlVsIn { from { opacity: 0; } to { opacity: 1; } } @keyframes rlVsOut { from { opacity: 1; } to { opacity: 0; transform: scale(1.015); } } @keyframes rlVsPunch { 0% { opacity: 0; transform: translateY(14px) scale(1.2); } 55% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes rlVsSweep { from { transform: scaleX(0); } to { transform: scaleX(1); } } .rl-deploy-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; border-left: 1px solid var(--rl-edge); padding-left: 20px; } .rl-deploy-side-h { font-size: 12px; letter-spacing: .22em; color: var(--rl-gold); } .rl-deploy-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--rl-edge); } .rl-deploy-hint { font-size: 11.5px; color: var(--muted); text-align: center; flex: 1; padding: 0 12px; } /* 能力の源ピップ（基本形。出陣ボタン内で使用） */ .rl-src-pip { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--rl-gold); background: transparent; box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); opacity: .5; } .rl-src-pip.on { background: radial-gradient(circle at 38% 32%, #fff3c8, var(--rl-gold)); opacity: 1; box-shadow: 0 0 8px rgba(232,196,93,.6); } /* 出陣ボタン2種（能力を使う／温存） */ .rl-deploy-actions { display: flex; gap: 10px; align-items: stretch; } .rl-deploy-actions .rl-start { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 18px; line-height: 1.2; } .rl-deploy-actions .rl-start small { font-size: 10.5px; font-weight: 600; opacity: .75; } .rl-start.ghost { background: transparent; color: var(--rl-ink); border: 1px solid var(--rl-edge); box-shadow: none; } .rl-start.ghost:hover:not(:disabled) { background: rgba(232,196,93,.08); box-shadow: none; } .rl-start.armed { background: linear-gradient(180deg, #ffe49a, #f0b94a); box-shadow: 0 4px 16px rgba(240,185,74,.42); } .rl-armed-main { font-size: 16px; font-weight: 800; } /* ボタン内に残り「能力の源」を表示（ピップ＋数） */ .rl-armed-src { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #4a2f06; } .rl-armed-src b { font-weight: 800; } .rl-armed-src .rl-src-pip { width: 10px; height: 10px; border-color: #6b4a12; box-shadow: none; opacity: .42; } .rl-armed-src .rl-src-pip.on { background: radial-gradient(circle at 38% 32%, #fff7df, #b9821f); border-color: #6b4a12; opacity: 1; box-shadow: 0 0 5px rgba(120,80,10,.5); } /* 進路カードの卓サイズバッジ（4麻/3麻/2麻） */ .rl-route-size { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; align-self: center; padding: 3px 12px; border-radius: 999px; font-weight: 800; font-size: 14px; letter-spacing: .04em; border: 1px solid currentColor; } .rl-route-size small { font-size: 9.5px; font-weight: 600; letter-spacing: .02em; opacity: .85; } .rl-route-size.pair { color: #7fc8b0; } .rl-route-size.solo { color: #e8b85d; background: rgba(232,184,93,.1); } .rl-route-solonote { font-size: 11px; font-weight: 700; color: #e0a89c; letter-spacing: .02em; } /* オーバーレイ（ドラフト/継続/結果/各モーダル）。ステージ内に被せる。楼光パレットを供給。 */ .rl-overlay { --rl-gold:#e8c45d; --rl-ink:#f3ece0; --rl-edge:rgba(232,196,93,0.26); --rl-ember:#c0563a; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(8,6,12,0.5) 0%, rgba(6,4,9,0.74) 100%); opacity: 0; transition: opacity .18s; z-index: 30; } .rl-overlay.is-open { opacity: 1; } /* フロスト闇パネル＋金の縁＋上辺アクセント（ハブと同じ世界観） */ .rl-modal { position: relative; width: min(840px, 88%); padding: 24px 30px 26px; border-radius: 18px; text-align: center; color: var(--rl-ink); overflow: hidden; background: linear-gradient(165deg, rgba(28,22,38,0.95) 0%, rgba(13,9,19,0.97) 100%); border: 1px solid var(--rl-edge); box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04); } .rl-modal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--rl-gold), transparent); opacity: .7; } .rl-modal-head { position: relative; font-family: var(--font-min, "Shippori Mincho", serif); font-size: 23px; font-weight: 700; color: var(--rl-gold); letter-spacing: .05em; margin-bottom: 16px; padding-bottom: 12px; } .rl-modal-head::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 56px; height: 1px; background: var(--rl-edge); } .rl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .rl-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 14px; min-height: 160px; border: 2px solid var(--rarity, #888); border-radius: 14px; background: rgba(0,0,0,.35); color: var(--ink); cursor: pointer; text-align: left; transition: transform .12s, box-shadow .12s; } .rl-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 0 2px var(--rarity) inset; } .rl-card-rarity { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #11150f; background: var(--rarity, #888); } .rl-card-name { font-size: 18px; font-weight: 800; } .rl-card-desc { font-size: 13px; color: var(--muted); line-height: 1.5; } .rl-card-empty { color: var(--muted); padding: 30px; } .rl-hp-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .rl-hp-row { display: grid; grid-template-columns: 120px 1fr 110px; align-items: center; gap: 10px; } .rl-hp-name { text-align: right; font-size: 14px; font-weight: 700; } .rl-hp-bar { height: 14px; border-radius: 7px; background: rgba(0,0,0,.4); overflow: hidden; } .rl-hp-fill { display: block; height: 100%; transition: width .3s; } .rl-hp-fill.high { background: #5ad17a; } .rl-hp-fill.mid { background: #e8c45d; } .rl-hp-fill.low { background: var(--danger); } .rl-hp-val { font-size: 12px; color: var(--muted); text-align: left; } .rl-continue-note { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 4px 0 20px; } .rl-continue-note strong { color: var(--danger); } .rl-continue-btns { display: flex; justify-content: center; gap: 16px; } .rl-go-banner { font-size: 26px; font-weight: 800; margin-bottom: 18px; } /* P7：全滅は「記憶として還る」継続。懲罰的な赤(--danger)でなく、塔／記憶の琥珀色で送り出す。 */ .rl-gameover.wiped .rl-go-banner { color: #e8c45d; } .rl-gameover.safe .rl-go-banner { color: var(--accent); } .rl-go-stats { display: flex; justify-content: center; gap: 40px; margin-bottom: 14px; } .rl-go-k { font-size: 13px; color: var(--muted); } .rl-go-v { font-size: 30px; font-weight: 800; color: var(--ink); } .rl-go-sub { font-size: 14px; color: var(--muted); margin-bottom: 22px; } /* 別れ際の2択（提案B §3.2-5・双方向＝プレイヤーが返す→相棒が覚える） */ .rl-go-resolve { margin: 4px 0 16px; } .rl-go-resolve-q { font-size: 13px; color: var(--muted); margin-bottom: 8px; letter-spacing: .04em; } .rl-go-resolve-opts { display: flex; justify-content: center; gap: 12px; } .rl-go-resolve-btn { padding: 9px 22px; border-radius: 999px; font-size: 14px; font-weight: 700; cursor: pointer; color: var(--ink); background: rgba(255,255,255,.05); border: 1px solid rgba(232,196,93,.4); transition: background .18s, transform .12s, border-color .18s; } .rl-go-resolve-btn:hover { background: rgba(232,196,93,.14); border-color: var(--accent, #e8c45d); transform: translateY(-1px); } .rl-go-resolve-reply { font-size: 14px; line-height: 1.7; color: #d8d2df; max-width: 46ch; margin: 4px auto 0; } /* F7 メタ進行＝ローグライク引き継ぎ枠 */ .rl-carry { margin-top: 4px; padding: 10px 12px; border: 1px solid rgba(86,168,255,.4); border-radius: 10px; background: rgba(86,168,255,.08); } .rl-carry-head { font-size: 12px; color: #8fc1ff; margin-bottom: 6px; } .rl-carry-chips { display: flex; flex-wrap: wrap; gap: 6px; } .rl-carry-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--rarity, #888); color: var(--ink); background: rgba(0,0,0,.25); } .rl-carry-pick { margin: 6px 0 18px; padding: 14px; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid rgba(246,179,82,.3); } .rl-carry-pick-head { font-size: 14px; color: var(--ink); margin-bottom: 10px; } .rl-carry-pick-head b { color: var(--accent); } /* 引き継ぎ候補は可変数。深層ランで20枚超のとき固定ステージ(720)を割らないよう、リストだけ内部スクロールに逃がす。 */ .rl-carry-pick-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-height: 104px; overflow-y: auto; } .rl-pick-chip { font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer; border: 2px solid var(--rarity, #888); background: rgba(0,0,0,.3); color: var(--ink); transition: transform .1s; } .rl-pick-chip:hover:not(:disabled) { transform: translateY(-2px); } .rl-pick-chip.picked { background: var(--rarity, #888); color: #11150f; font-weight: 700; } .rl-pick-chip:disabled { opacity: .4; cursor: default; } .rl-carry-count { margin-top: 10px; font-size: 12px; color: var(--muted); } /* 楼光の館：進路選択・追撃・休息/宴会・遭遇イベント */ .rl-route-modal { width: min(880px, 92%); } .rl-route-cards { display: flex; gap: 14px; justify-content: center; margin: 8px 0 18px; } .rl-route-card { flex: 1; max-width: 240px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 14px; min-height: 150px; border: 2px solid var(--rarity, #888); border-radius: 14px; background: rgba(0,0,0,.32); color: var(--ink); cursor: pointer; transition: transform .12s, box-shadow .12s; } .rl-route-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 0 2px var(--rarity) inset; } .rl-route-card.boss { max-width: 360px; } .rl-route-mark { font-size: 34px; line-height: 1; } .rl-route-name { font-size: 19px; font-weight: 800; } .rl-route-blurb { font-size: 12.5px; color: var(--muted); line-height: 1.5; text-align: center; } .rl-pursue-btn { border-color: var(--accent); color: var(--accent); } .rl-pursue-btn:hover { background: rgba(246,179,82,.15); } /* 追撃モーダル：卓上の順位（他グループの点数＝HP＋自分の順位）＋「やめたら何が起きるか」結末バナー */ .rl-pursue-modal { width: min(720px, 90%); max-height: 92vh; overflow-y: auto; } /* ボス必勝制で文言が増えても 720p からはみ出さない保険（モーダル内スクロール・画面は溢れない） */ .rl-pursue-standings { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 14px; } .rl-stand-cap { font-size: 11px; letter-spacing: .18em; color: var(--rl-gold); opacity: .82; text-align: left; margin-bottom: 2px; } .rl-stand-row { display: grid; grid-template-columns: 26px auto 96px 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,.26); border: 1px solid transparent; } .rl-stand-row.is-ally { background: rgba(232,196,93,.12); border-color: rgba(232,196,93,.45); box-shadow: inset 0 0 0 1px rgba(232,196,93,.1); } .rl-stand-rank { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; justify-self: center; font-family: var(--font-min, serif); font-size: 14px; font-weight: 800; color: #1a1206; background: #6b6f78; } .rl-stand-rank.r1 { background: linear-gradient(150deg, #f6e3a0, var(--rl-gold)); box-shadow: 0 0 10px rgba(232,196,93,.5); } .rl-stand-rank.r2 { background: linear-gradient(150deg, #e3e6ea, #aab0b8); } .rl-stand-rank.r3 { background: linear-gradient(150deg, #d6a778, #b07b4e); } .rl-stand-faces { display: flex; } .rl-stand-face { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: top center; border: 1.5px solid rgba(255,255,255,.18); margin-left: -7px; background: #1a1320; } .rl-stand-face:first-child { margin-left: 0; } .rl-stand-face.rl-face-fb { display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--c, #555); } .rl-stand-name { text-align: left; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rl-stand-row.is-ally .rl-stand-name { color: var(--rl-gold); } .rl-stand-bar { height: 10px; border-radius: 6px; background: rgba(0,0,0,.45); overflow: hidden; } .rl-stand-fill { display: block; height: 100%; transition: width .3s; } .rl-stand-fill.high { background: #5ad17a; } .rl-stand-fill.mid { background: var(--rl-gold); } .rl-stand-fill.low { background: var(--danger); } .rl-stand-score { justify-self: end; font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 800; color: var(--rl-ink); } .rl-stand-score small { font-size: 10px; font-weight: 600; color: var(--muted); margin-left: 2px; letter-spacing: .04em; } .rl-stand-row.is-ally .rl-stand-score { color: var(--rl-gold); } /* 結末バナー＝signature。上回り=金の突破印／競り負け=朱の警告帯。左の印＋右の読み上げ文。 */ .rl-verdict { display: flex; align-items: center; gap: 14px; text-align: left; padding: 12px 16px; margin: 0 0 16px; border-radius: 12px; border: 1px solid; } .rl-verdict-seal { flex: none; min-width: 76px; padding: 8px 6px; border-radius: 10px; text-align: center; font-family: var(--font-min, serif); font-weight: 800; letter-spacing: .06em; line-height: 1.2; } .rl-verdict-body { font-size: 13.5px; line-height: 1.65; color: var(--rl-ink); } .rl-verdict-body b { font-weight: 800; } .rl-verdict.is-ahead { border-color: rgba(232,196,93,.5); background: linear-gradient(100deg, rgba(232,196,93,.16), rgba(232,196,93,.05)); } .rl-verdict.is-ahead .rl-verdict-seal { font-size: 22px; color: #1a1206; background: linear-gradient(150deg, #f6e3a0, var(--rl-gold)); box-shadow: 0 0 16px rgba(232,196,93,.45); } .rl-verdict.is-ahead .rl-verdict-body b { color: var(--rl-gold); } .rl-verdict.is-behind { border-color: rgba(192,86,58,.6); background: linear-gradient(100deg, rgba(192,86,58,.2), rgba(192,86,58,.06)); } .rl-verdict.is-behind .rl-verdict-seal { font-size: 17px; color: #fff; background: linear-gradient(150deg, #d8694a, var(--rl-ember, #c0563a)); box-shadow: 0 0 16px rgba(192,86,58,.45); } .rl-verdict.is-behind .rl-verdict-body b { color: #f0a48e; } .rl-verdict-ward { display: block; margin-top: 4px; font-size: 12px; color: #8fc1ff; } .rl-pursue-sub { margin: 0 0 18px; } .rl-rest-hung { font-size: 13px; color: #e8c45d; margin: 4px 0 16px; } .rl-event-modal { width: min(840px, 92%); } .rl-event-row { display: flex; gap: 18px; align-items: stretch; } .rl-event-art { width: 200px; min-height: 260px; max-height: 320px; object-fit: cover; object-position: top center; border-radius: 12px; flex-shrink: 0; background: #120d1a; } /* 立ち絵なし（祠など）の枠：楼光トーンの暗パネル＋金の祠グリフ */ .rl-event-art-fb { width: 200px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, rgba(34,26,46,.9), rgba(16,11,22,.95)); border: 1px solid rgba(232,196,93,.18); } .rl-event-art-fb::after { content: "⛩"; font-size: 60px; color: rgba(232,196,93,.32); } .rl-event-body { flex: 1; display: flex; flex-direction: column; text-align: left; min-width: 0; } .rl-event-title { font-size: 16px; font-weight: 800; color: var(--accent); margin-bottom: 10px; } .rl-event-lines p { font-size: 15px; line-height: 1.7; margin: 0 0 6px; } .rl-event-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .rl-event-choice { padding: 12px 14px; font-size: 15px; text-align: left; color: var(--ink); border: 2px solid rgba(246,179,82,.5); border-radius: 10px; background: rgba(0,0,0,.25); cursor: pointer; transition: transform .1s, border-color .1s; } .rl-event-choice:hover { transform: translateX(3px); border-color: var(--accent); } .rl-event-reply { margin-top: 14px; padding: 12px 14px; font-size: 15px; line-height: 1.6; border-left: 3px solid var(--accent); background: rgba(246,179,82,.08); border-radius: 0 8px 8px 0; } .rl-event-go, .rl-event-body .rl-start { margin-top: 14px; align-self: flex-start; } /* 楼光の館 第2弾：光貨・ショップ */ .rl-coins { display: inline-block; margin-left: 10px; font-size: 13px; color: #e8c45d; vertical-align: middle; } .rl-coins b { font-size: 16px; } .rl-shop-modal { width: min(880px, 92%); } .rl-shop-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 10px 0 18px; } .rl-shop-item { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; min-height: 130px; border: 2px solid var(--rarity, #888); border-radius: 12px; background: rgba(0,0,0,.32); color: var(--ink); cursor: pointer; text-align: left; transition: transform .1s, box-shadow .1s; } .rl-shop-item:not([disabled]):hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.4), 0 0 0 2px var(--rarity) inset; } .rl-shop-item[disabled] { cursor: default; opacity: .5; } .rl-shop-item.sold { opacity: .35; } .rl-shop-price { align-self: flex-start; font-size: 12px; font-weight: 700; color: #e8c45d; } .rl-shop-name { font-size: 16px; font-weight: 800; } .rl-shop-desc { font-size: 12px; color: var(--muted); line-height: 1.45; flex: 1; } .rl-shop-tag { align-self: flex-end; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--rarity, #888); color: #11150f; } .rl-shop-item.poor .rl-shop-tag { background: #6b6f78; color: #ccc; } /* UXプレイテスト即修正：編成カード情報・進路ヒント */ .rl-cell-info { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.2; margin-top: 1px; } .rl-route-hint { font-size: 12px; color: var(--muted); margin: -2px 0 12px; line-height: 1.5; } .rl-route-hint b { color: var(--accent); } /* 楼光の館：オート観戦の告知（編成画面フッタ） */ .rl-foot-hint { font-size: 11.5px; color: var(--muted); text-align: center; flex: 1; } /* 楼光の館：意思決定セリフ（発話トースト/モーダル内台詞）・所持バフ一覧 */ .rl-speak { position: absolute; top: 14px; left: 50%; transform: translate(-50%, -12px); z-index: 50; display: flex; align-items: center; gap: 10px; max-width: 560px; padding: 8px 14px 8px 8px; background: linear-gradient(160deg, rgba(28,42,34,.96), rgba(20,29,24,.96)); border: 2px solid rgba(246,179,82,.5); border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.45); opacity: 0; transition: opacity .22s, transform .22s; pointer-events: none; } .rl-speak.show { opacity: 1; transform: translate(-50%, 0); } .rl-speak-face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top center; flex-shrink: 0; } .rl-speak-fb { display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: var(--c, #555); } .rl-speak-bubble { min-width: 0; } .rl-speak-name { font-size: 11px; font-weight: 700; } .rl-speak-line { font-size: 14px; line-height: 1.4; } .rl-modal-speak { margin: 4px 0 12px; padding: 9px 12px; font-size: 14px; line-height: 1.5; text-align: left; border-left: 3px solid var(--c, var(--accent)); background: rgba(246,179,82,.08); border-radius: 0 8px 8px 0; } .rl-modal-speak b { color: var(--c, var(--accent)); } .rl-held { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; max-height: 64px; overflow-y: auto; } .rl-held-label { font-size: 11px; color: var(--muted); margin-right: 2px; } .rl-held-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--rarity, #888); color: var(--ink); background: rgba(0,0,0,.25); } /* 楼光の館：スキルレベル表示・鍛冶屋 */ .rl-skill { display: inline-block; margin-left: 8px; font-size: 13px; color: #8fc1ff; vertical-align: middle; } .rl-skill b { font-size: 16px; color: var(--ink); } .rl-forge .rl-modal { text-align: center; } /* ペア戦：自陣の和了抑止トグル（右サイド・相棒ボード内） */ .pb-winpolicy { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .pb-wp-toggle { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 8px; border: 1px solid rgba(255,255,255,0.18); border-radius: 7px; background: rgba(0,0,0,0.22); color: #cdd3da; font-size: 11px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .pb-wp-toggle:hover { border-color: rgba(255,255,255,0.36); } .pb-wp-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); flex: none; } .pb-wp-toggle.on { background: rgba(232,116,77,0.26); border-color: #e8744d; color: #ffe1d4; } .pb-wp-toggle.on .pb-wp-dot { background: #e8744d; border-color: #ffb89e; box-shadow: 0 0 5px #e8744d; } .pb-wp-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 楼光の館：進路画面の全員HP＋編成ボタン */ .rl-route-party { display: flex; align-items: stretch; gap: 10px; margin: 6px 0 4px; } .rl-route-party .rl-hp-list { flex: 1; } .rl-swap-open { flex: none; align-self: center; padding: 8px 14px; border: 1px solid var(--accent, #e8c45d); border-radius: 8px; background: rgba(232,196,93,0.14); color: var(--ink, #fff); font-size: 13px; cursor: pointer; white-space: nowrap; } .rl-swap-open:hover { background: rgba(232,196,93,0.28); } /* 楼光の館：編成モーダル */ .rl-swap-modal { max-width: 560px; } .rl-swap-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; } .rl-swap-row { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid rgba(255,255,255,0.12); border-radius: 9px; background: rgba(255,255,255,0.04); } .rl-swap-row.is-dead { opacity: 0.45; } .rl-swap-move { display: flex; flex-direction: column; gap: 2px; } .rl-swap-move button { width: 26px; height: 18px; line-height: 14px; border: 1px solid rgba(255,255,255,0.2); border-radius: 5px; background: rgba(0,0,0,0.25); color: #cdd3da; cursor: pointer; font-size: 10px; padding: 0; } .rl-swap-move button:disabled { opacity: 0.3; cursor: default; } .rl-swap-face, .rl-swap-face-wrap img, .rl-swap-face-wrap .rl-swap-face { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; } .rl-swap-face-fb { display: flex; align-items: center; justify-content: center; background: var(--c, #555); color: #fff; font-weight: 700; } .rl-swap-info { flex: 1; min-width: 0; } .rl-swap-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; } .rl-swap-tag { font-size: 10px; padding: 1px 6px; border-radius: 6px; margin-left: 4px; vertical-align: middle; } .rl-swap-tag.active { background: rgba(86,168,255,0.28); color: #bcdcff; } .rl-swap-tag.bench { background: rgba(255,255,255,0.1); color: #9aa3b2; } .rl-swap-info .rl-hp-bar { height: 7px; } .rl-swap-hp { font-size: 12px; color: #cdd3da; flex: none; min-width: 64px; text-align: right; } /* 楼光の館：バフ合計（HP/攻撃/防御）の可視化 */ .rl-buff-totals { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 8px; } .rl-buff-stat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 8px; font-size: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.22); } .rl-buff-stat .rl-buff-k { color: #9aa3b2; font-size: 11px; } .rl-buff-stat b { font-size: 14px; } .rl-buff-stat.hp b { color: #6fe08a; } .rl-buff-stat.atk b { color: #ff8f6b; } .rl-buff-stat.def b { color: #6fb6ff; } .rl-buff-stat.ward b { color: #e8c45d; } .rl-buff-stat.cond { border-color: rgba(217,168,255,0.30); } .rl-buff-stat.cond b { color: #d9a8ff; } /* 楼光の館：ラン専用バックグラウンド（廃墟の館） */ .rl-run-backdrop { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; } .rl-run-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(20,16,26,0.62) 0%, rgba(12,10,18,0.78) 60%, rgba(6,5,10,0.88) 100%); } #roguelite-screen.rl-in-run { background: #0a0810; } #roguelite-screen.rl-in-run .rl-overlay { z-index: 2; } /* 楼光の館：必殺枠の忘却（ポケモン式） */ .rl-forget-modal { max-width: 560px; } .rl-forget-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; } .rl-forget-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; background: rgba(255,255,255,0.04); cursor: pointer; text-align: left; transition: background .15s, border-color .15s; } .rl-forget-row:hover { background: rgba(255,92,80,0.16); border-color: #ff5470; } .rl-forget-row.is-new { border-color: #6fb6ff; background: rgba(86,168,255,0.1); } .rl-forget-info { flex: 1; min-width: 0; } .rl-forget-name { font-size: 14px; font-weight: 700; color: var(--ink, #fff); } .rl-forget-tag { font-size: 10px; background: #6fb6ff; color: #062035; border-radius: 5px; padding: 1px 5px; vertical-align: middle; } .rl-forget-desc { font-size: 11px; color: #9aa3b2; margin-top: 2px; } .rl-forget-x { flex: none; font-size: 12px; color: #ff8f7a; border: 1px solid rgba(255,92,80,0.5); border-radius: 7px; padding: 4px 10px; } /* 楼光の館：カードの分類バッジ（バフ/必殺技/道具） */ .rl-card-tags { display: flex; gap: 6px; align-items: center; justify-content: space-between; margin-bottom: 4px; } .rl-card-cat { font-size: 10px; font-weight: 700; color: var(--cat, #ccc); border: 1px solid var(--cat, #ccc); border-radius: 5px; padding: 1px 6px; } /* 流派タグ（提案A）：カードがどの流派に属すか。集めるとしきい値で跳ねる。 */ .rl-card-cluster { font-size: 10px; font-weight: 700; color: var(--cl, #8fd0ff); background: color-mix(in srgb, var(--cl, #8fd0ff) 16%, transparent); border-radius: 5px; padding: 1px 6px; } /* ── 流派シナジー legible（スライス5・frontend-design） ───────────────────────── */ /* ドラフトのシナジー予告：取ると流派がどう動くか。しきい値到達(開眼)はカードごと光らせる＝決断の山場。 */ .rl-card-syn { margin-top: auto; font-size: 11px; color: var(--cl, #8fd0ff); opacity: .92; padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--cl, #8fd0ff) 28%, transparent); } .rl-card-syn.awaken { display: flex; align-items: center; gap: 7px; color: #fff; } .rl-syn-seal { flex: none; font-weight: 900; font-size: 12px; letter-spacing: .08em; color: #1a1206; background: var(--cl, #8fd0ff); border-radius: 5px; padding: 2px 7px; box-shadow: 0 0 10px color-mix(in srgb, var(--cl, #8fd0ff) 70%, transparent); } .rl-syn-txt { font-size: 11px; line-height: 1.3; } /* 取ると開眼するカードは縁を流派色で点し、ほのかに脈打たせる（控えめに・1点豪華） */ .rl-card.syn-awaken { border-color: var(--cl, #8fd0ff); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cl) 55%, transparent), 0 0 16px color-mix(in srgb, var(--cl) 30%, transparent); animation: rlAwakenPulse 2.2s ease-in-out infinite; } @keyframes rlAwakenPulse { 0%,100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--cl) 50%, transparent), 0 0 12px color-mix(in srgb, var(--cl) 22%, transparent); } 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--cl) 75%, transparent), 0 0 20px color-mix(in srgb, var(--cl) 42%, transparent); } } @media (prefers-reduced-motion: reduce) { .rl-card.syn-awaken { animation: none; } } /* 所持パネルの流派ゲージ：玉(pip)を並べて取得を点灯・節目(しきい値)は大きく・到達で開眼。 */ .rl-cluster { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: color-mix(in srgb, var(--cl, #8fd0ff) 75%, #d8d2c4); border: 1px solid color-mix(in srgb, var(--cl, #8fd0ff) 30%, transparent); border-radius: 999px; padding: 2px 9px; background: color-mix(in srgb, var(--cl, #8fd0ff) 7%, transparent); } .rl-cluster.lit { color: #fff; border-color: color-mix(in srgb, var(--cl, #8fd0ff) 60%, transparent); background: color-mix(in srgb, var(--cl, #8fd0ff) 16%, transparent); box-shadow: 0 0 7px color-mix(in srgb, var(--cl, #8fd0ff) 32%, transparent); } .rl-cluster-name { font-weight: 800; letter-spacing: .04em; } .rl-pips { display: inline-flex; gap: 3px; align-items: center; } .rl-pip { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--cl, #8fd0ff) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cl, #8fd0ff) 35%, transparent); } .rl-pip.brk { width: 9px; height: 9px; } /* 節目の玉は大きい＝「ここで開眼」 */ .rl-pip.on { background: color-mix(in srgb, var(--cl, #8fd0ff) 70%, transparent); } .rl-pip.lit { background: var(--cl, #8fd0ff); box-shadow: 0 0 6px color-mix(in srgb, var(--cl, #8fd0ff) 75%, transparent); } /* 未解放の節目＝薄く（ショップ「流派の極意」で解禁待ち）。取得済みでも lit にはしない＝まだ効いていないことを示す */ .rl-pip.locked { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cl, #8fd0ff) 30%, transparent); opacity: .5; } .rl-clrow-lock { font-size: .82em; opacity: .85; cursor: help; } .rl-cluster-state b { color: #fff; } /* 楼光の館：所持パネル（3分類） */ .rl-inv { display: flex; flex-direction: column; gap: 5px; margin: 6px 0 8px; } .rl-inv-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rl-inv-head { flex: none; font-size: 11px; font-weight: 700; color: var(--cat, #ccc); min-width: 64px; } .rl-inv-head small { font-weight: 400; color: #9aa3b2; } .rl-inv-chips { display: flex; flex-wrap: wrap; gap: 5px; } .rl-inv-chip { font-size: 12px; padding: 2px 9px; border-radius: 7px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); } .rl-inv-chip.skill { color: #ffcdb8; border-color: rgba(255,143,107,0.5); background: rgba(255,143,107,0.12); } .rl-inv-chip.item { color: #f3e3a8; border-color: rgba(232,196,93,0.5); background: rgba(232,196,93,0.12); } .rl-inv-empty { font-size: 12px; color: #6b727e; } .rl-buff-totals { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .rl-buff-stat.skl b { color: #8fc1ff; } .rl-shop-toprow { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 2px; } /* 楼光の館：ダメージ計算の内訳演出 */ .rl-calc-card { max-width: 600px; } .rl-calc-card .dmg-head small { font-size: 12px; color: var(--muted, #9aa3b2); font-weight: 400; } .rl-calc-rows { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 6px; } .rl-calc-row { border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 9px 12px; background: rgba(255,255,255,0.03); } .rl-calc-row.deal { border-left: 3px solid #ff8f6b; } .rl-calc-row.take { border-left: 3px solid #6fb6ff; } .rl-calc-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .rl-calc-kind { font-size: 11px; font-weight: 700; color: #9aa3b2; } .rl-calc-name { font-size: 14px; font-weight: 700; } .rl-calc-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .rl-calc-step { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.12); color: #cdd3da; opacity: 0; transform: translateY(4px); transition: opacity .22s ease var(--d,0ms), transform .22s ease var(--d,0ms); white-space: nowrap; } .rl-calc-step.in { opacity: 1; transform: none; } .rl-calc-step b { margin-left: 5px; color: var(--ink, #fff); } .rl-calc-step.final { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); } .rl-calc-arrow { color: #6b727e; font-size: 11px; } .rl-calc-result { margin-top: 6px; font-size: 20px; font-weight: 800; text-align: right; } .rl-calc-result.deal { color: #ff8f6b; } .rl-calc-result.take { color: #6fb6ff; } .rl-calc-result small { font-size: 11px; font-weight: 600; color: #9aa3b2; margin-left: 4px; } .rl-calc-cap { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; color: #6fe08a; background: rgba(111,224,138,0.14); border-radius: 6px; padding: 1px 8px; } /* 楼光の館：HP行の顔アイコン＋HPゲージ＋ダウン表示（flexで 名前 / ゲージ(伸縮) / 値 を配分） */ .rl-hp-row { display: flex; align-items: center; gap: 8px; } .rl-hp-face { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; flex: none; } .rl-hp-face.rl-face-fb { display: inline-flex; align-items: center; justify-content: center; background: var(--c,#666); color: #fff; font-weight: 700; font-size: 12px; } .rl-hp-row .rl-hp-name { flex: none; min-width: 80px; max-width: 116px; text-align: left; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rl-hp-row .rl-hp-bar { flex: 1 1 auto; min-width: 56px; height: 11px; } .rl-hp-row .rl-hp-val { flex: none; min-width: 72px; text-align: right; } .rl-hp-row.is-down { opacity: 0.5; } .rl-hp-row.is-down .rl-hp-val { color: var(--danger,#ff6b6b); font-weight: 700; } /* 楼光の館：編成セルの選択チェック＋能力ホバー（picked 演出は上部 .rl-cell.picked に一本化済み） */ .rl-cell-check { position: absolute; top: 4px; left: 4px; font-size: 10px; font-weight: 700; color: #1a1206; background: var(--bond, var(--accent,#e8c45d)); border-radius: 5px; padding: 1px 6px; } .rl-cell-pop { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px); width: 200px; padding: 8px 10px; background: #14110d; border: 1px solid rgba(232,196,93,0.5); border-radius: 9px; box-shadow: 0 6px 18px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 20; text-align: left; } .rl-cell:hover .rl-cell-pop { opacity: 1; transform: translateX(-50%) translateY(0); } .rl-cell-pop-name { font-size: 13px; font-weight: 700; color: var(--ink,#fff); margin-bottom: 4px; } .rl-cell-pop-role { font-size: 10px; font-weight: 400; color: #9aa3b2; margin-left: 6px; } .rl-cell-pop-stats { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; } .rl-cell-pop-stats > span { font-size: 10.5px; color: #9aa3b2; } .rl-cell-pop-hp b { color: #f3ece0; font-weight: 800; font-variant-numeric: tabular-nums; margin-left: 4px; } .rl-cell-pop-bond b { color: var(--bond, #e8c45d); font-weight: 700; margin-left: 4px; } .rl-cell-pop-ab { font-size: 11px; color: #cdd3da; } .rl-cell-pop-ab b { color: var(--accent,#e8c45d); display: block; margin-bottom: 2px; } .rl-cell-pop-ab span { color: #aeb6c2; line-height: 1.4; } /* ペア戦：味方の方針トグルを折りたたみに（初心者の混乱回避） */ .pb-wp-head { display: flex; align-items: center; gap: 5px; width: 100%; margin-top: 6px; padding: 3px 6px; border: 1px dashed rgba(255,255,255,0.2); border-radius: 6px; background: transparent; color: #9aa3b2; font-size: 11px; cursor: pointer; } .pb-wp-head:hover { color: #cdd3da; border-color: rgba(255,255,255,0.35); } .pb-wp-caret { transition: transform .15s; display: inline-block; } .pb-wp-head.open .pb-wp-caret { transform: rotate(90deg); } .pb-wp-on-dot { width: 7px; height: 7px; border-radius: 50%; background: #e8744d; box-shadow: 0 0 5px #e8744d; margin-left: auto; } .pb-wp-body[hidden] { display: none; } .pb-wp-body { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } /* 楼光の館：ダメージカードの「計算を見る」ボタン */ .tb-calc-link { margin-top: 6px; background: transparent; border: 1px solid rgba(255,255,255,0.22); color: #cdd3da; border-radius: 7px; padding: 4px 12px; font-size: 12px; cursor: pointer; } .tb-calc-link:hover { border-color: var(--accent,#e8c45d); color: var(--ink,#fff); } .rl-calc-skip { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; font-size: 11px; color: #9aa3b2; cursor: pointer; } .rl-calc-skip input { cursor: pointer; } /* 楼光の館：道具パネル */ .rl-items-modal { max-width: 560px; } .rl-item-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; } .rl-item-slot { border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 9px 12px; background: rgba(255,255,255,0.04); } .rl-item-slot.empty { display: flex; align-items: center; justify-content: center; color: #6b727e; font-size: 12px; border-style: dashed; } .rl-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .rl-item-kind { font-size: 10px; font-weight: 700; color: var(--cat, #ccc); border: 1px solid var(--cat, #ccc); border-radius: 5px; padding: 1px 6px; } .rl-item-name { font-size: 14px; font-weight: 700; color: var(--ink, #fff); } .rl-item-desc { font-size: 12px; color: #aeb6c2; line-height: 1.4; } .rl-item-use { margin-top: 6px; padding: 4px 16px; border: 1px solid var(--accent, #e8c45d); border-radius: 7px; background: rgba(232,196,93,0.16); color: var(--ink, #fff); font-size: 13px; cursor: pointer; } .rl-item-use:hover { background: rgba(232,196,93,0.3); } .rl-item-passive { margin-top: 4px; font-size: 11px; color: #6fb6ff; } .rl-route-btns { display: flex; flex-direction: column; gap: 4px; align-self: center; } .tb-dmg-stamp.endure { background: #6fe08a; color: #07270f; } .rl-go-bond { color: #6fe08a; font-size: 13px; text-align: center; margin: 4px 0; } /* 対戦ホーム：楼光の館ボタンをロゴ画像に（画像が無ければテキストにフォールバック） */ .menu-btn--logo { position: relative; align-items: center; justify-content: center; padding: 10px 16px; min-height: 96px; background: radial-gradient(120% 120% at 50% 30%, #21342a 0%, #16221c 100%); overflow: visible; } .menu-btn-logo { width: 100%; max-width: 340px; max-height: 120px; object-fit: contain; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); transition: transform .14s ease; } .menu-btn--logo:hover:not(:disabled) .menu-btn-logo { transform: scale(1.04); } .menu-btn--logo .fallback { display: none; } /* 画像表示時はテキスト隠す */ .menu-btn--logo.no-logo { align-items: flex-start; } .menu-btn--logo.no-logo .menu-btn-logo { display: none; } /* 画像読込失敗時 */ .menu-btn--logo.no-logo .fallback { display: block; } .menu-btn--logo.no-logo .menu-btn-title { font-size: 19px; font-weight: 700; } .menu-btn--logo.no-logo .menu-btn-sub { font-size: 13px; color: var(--muted); } /* ホバー説明（吹き出し） */ .menu-btn-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); white-space: nowrap; padding: 6px 12px; background: #14110d; color: var(--ink); border: 1px solid var(--accent, #e8c45d); border-radius: 9px; font-size: 13px; box-shadow: 0 6px 16px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 30; } .menu-btn-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--accent, #e8c45d); } .menu-btn--logo:hover .menu-btn-tip { opacity: 1; transform: translateX(-50%) translateY(0); } /* 楼光の館：編成の着卓ライン（戦う2人と控えの境界を明示） */ .rl-swap-divider { display: flex; align-items: center; justify-content: center; margin: 2px 0; } .rl-swap-divider span { font-size: 11px; font-weight: 700; color: #e8c45d; background: rgba(232,196,93,0.12); border: 1px dashed rgba(232,196,93,0.5); border-radius: 7px; padding: 2px 12px; } .rl-swap-row.active { border-color: rgba(86,168,255,0.55); background: rgba(86,168,255,0.08); } .rl-swap-row.bench { opacity: 0.82; } /* ========== 楼光の館：進路ハブ（frontend-design 適用・全画面ホーム風） ========== */ /* 世界観：廃墟の塔を登る雀士。楼光ゴールド＋闇＋朔夜。大胆さは進路カードに集中、他は静かに。 */ .rl-route.rl-hub { position: absolute; inset: 0; display: flex; background: linear-gradient(180deg, rgba(8,6,12,0.42) 0%, rgba(8,6,12,0.74) 70%, rgba(6,4,9,0.86) 100%); z-index: 3; } .rl-hub-wrap { --rl-gold:#e8c45d; --rl-ink:#f3ece0; --rl-panel:rgba(18,14,24,0.62); --rl-edge:rgba(232,196,93,0.26); --rl-ember:#c0563a; margin: auto; width: min(1060px, 94%); height: 100%; display: flex; flex-direction: column; padding: 16px 0 14px; gap: 10px; color: var(--rl-ink); } /* 上部HUD：登攀（第N階）＋資源 */ .rl-hub-top { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--rl-edge); } .rl-hub-eyebrow { display: block; font-size: 11px; letter-spacing: .34em; color: var(--rl-gold); opacity: .85; margin-bottom: 2px; } .rl-hub-floornum { font-family: var(--font-min, "Shippori Mincho", serif); font-size: 26px; line-height: 1; letter-spacing: .04em; } .rl-hub-floornum b { color: var(--rl-gold); font-size: 40px; text-shadow: 0 2px 12px rgba(232,196,93,.4); } .rl-hub-res { display: flex; gap: 20px; } .rl-hub-res-k { font-size: 11px; letter-spacing: .12em; color: #9aa3b2; } .rl-hub-res-i b { color: var(--rl-gold); font-size: 19px; margin-left: 7px; } /* 中央ヒーロー：進路の分かれ道 */ .rl-hub-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 0; } .rl-hub-choose { display: flex; align-items: center; gap: 14px; width: 100%; justify-content: center; } .rl-hub-choose span { font-family: var(--font-min, serif); font-size: 21px; letter-spacing: .28em; color: var(--rl-ink); } .rl-hub-choose::before, .rl-hub-choose::after { content: ""; height: 1px; width: 120px; background: linear-gradient(90deg, transparent, var(--rl-edge)); } .rl-hub-choose::after { transform: rotate(180deg); } .rl-route-cards { display: flex; gap: 18px; justify-content: center; align-items: stretch; flex-wrap: wrap; } .rl-hub-hint { font-size: 12px; color: #9aa3b2; text-align: center; margin: 2px 0 0; } /* 進路カード＝署名要素（boldness をここに集中） */ .rl-hub .rl-route-card { position: relative; width: 236px; min-height: 196px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 20px 18px 15px; border-radius: 16px; cursor: pointer; color: var(--rl-ink); overflow: hidden; background: linear-gradient(180deg, rgba(30,24,40,0.94), rgba(13,9,19,0.96)); border: 1px solid var(--rl-edge); box-shadow: 0 10px 26px rgba(0,0,0,.5); opacity: 0; transform: translateY(12px); transition: opacity .32s ease var(--d,0ms), transform .32s ease var(--d,0ms), border-color .16s, box-shadow .16s; } .rl-hub.is-open .rl-route-card { opacity: 1; transform: none; } .rl-hub .rl-route-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--mark, var(--rl-gold)); opacity: .85; } .rl-hub .rl-route-spark { position: absolute; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, var(--mark, var(--rl-gold)) 0%, transparent 70%); opacity: .14; pointer-events: none; } .rl-hub .rl-route-card:hover { transform: translateY(-7px); border-color: var(--rl-gold); box-shadow: 0 18px 38px rgba(0,0,0,.6), 0 0 0 1px var(--rl-gold); } .rl-hub .rl-route-mark { font-size: 38px; line-height: 1; filter: drop-shadow(0 2px 7px var(--mark, #000)); } .rl-hub .rl-route-name { font-family: var(--font-min, serif); font-size: 20px; font-weight: 700; letter-spacing: .04em; } .rl-hub .rl-route-blurb { font-size: 12px; color: #b3bac6; line-height: 1.55; flex: 1; } .rl-hub .rl-route-go { font-size: 12px; color: var(--rl-gold); border: 1px solid var(--rl-edge); border-radius: 999px; padding: 4px 16px; transition: .16s; } .rl-hub .rl-route-card:hover .rl-route-go { background: var(--rl-gold); color: #1a1206; border-color: var(--rl-gold); } /* 鍛冶屋マスの必要光貨チップ（マス選択画面で常時表示）。不足時は赤系＋カードをグレーアウト。 */ .rl-route-cost { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: #e8c45d; background: rgba(232,196,93,.12); border: 1px solid rgba(232,196,93,.4); border-radius: 999px; padding: 2px 10px; } .rl-route-cost.poor { color: #e0897c; background: rgba(224,120,110,.12); border-color: rgba(224,120,110,.42); } .rl-hub .rl-route-card.is-locked { opacity: .5; cursor: not-allowed; filter: grayscale(.5); } .rl-hub .rl-route-card.is-locked:hover { transform: none; border-color: var(--rl-edge); box-shadow: 0 10px 26px rgba(0,0,0,.5); } .rl-hub .rl-route-card.is-locked .rl-route-go { color: #e0897c; } .rl-hub .rl-route-card.boss { width: 380px; background: linear-gradient(180deg, rgba(64,20,17,0.95), rgba(22,8,10,0.97)); border-color: rgba(192,86,58,0.55); } .rl-hub .rl-route-card.boss::before { background: var(--rl-ember); } .rl-hub .rl-route-card.boss .rl-route-mark { color: var(--rl-ember); filter: drop-shadow(0 2px 10px var(--rl-ember)); } .rl-hub .rl-route-card.boss:hover { border-color: var(--rl-ember); box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 0 1px var(--rl-ember); } /* 下部ドック：パーティ／ビルド／撤退（静かに規律） */ .rl-hub-dock { display: flex; align-items: stretch; gap: 12px; padding-top: 8px; border-top: 1px solid var(--rl-edge); } .rl-hub-party { flex: 1.3; background: var(--rl-panel); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 8px 12px; min-width: 0; } .rl-hub-party-head { font-size: 11px; letter-spacing: .2em; color: var(--rl-gold); margin-bottom: 5px; } .rl-hub-party .rl-hp-list { display: flex; flex-direction: column; gap: 3px; } .rl-hub-actions { display: flex; gap: 8px; margin-top: 7px; } .rl-hub-btn { background: rgba(232,196,93,.1); border: 1px solid var(--rl-edge); color: var(--rl-ink); border-radius: 8px; padding: 5px 14px; font-size: 13px; cursor: pointer; transition: .14s; } .rl-hub-btn:hover { background: rgba(232,196,93,.24); border-color: var(--rl-gold); } .rl-hub-btn b { color: var(--rl-gold); } .rl-hub-build { flex: 1; background: var(--rl-panel); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 8px 12px; display: flex; align-items: center; min-width: 0; } .rl-hub-build .rl-inv { margin: 0; width: 100%; gap: 4px; } .rl-hub-retreat { flex: none; width: 142px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: transparent; border: 1px solid rgba(255,120,100,.35); color: #e0a89c; border-radius: 12px; cursor: pointer; font-size: 14px; transition: .14s; } .rl-hub-retreat small { font-size: 10px; color: #8b929c; font-weight: 400; } .rl-hub-retreat:hover { border-color: var(--danger, #ff6b6b); color: #ffcec5; background: rgba(255,80,60,.08); } @media (prefers-reduced-motion: reduce) { .rl-hub .rl-route-card { transition: border-color .16s, box-shadow .16s; opacity: 1; transform: none; } } /* 楼光の館ハブ：編成・道具を上部HUD右の手が届きやすい位置へ */ .rl-hub-topright { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; } .rl-hub-manage { display: flex; gap: 9px; } .rl-hub-mbtn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; border-radius: 10px; background: rgba(232,196,93,.14); border: 1px solid var(--rl-edge); color: var(--rl-ink); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .14s, border-color .14s, transform .14s; } .rl-hub-mbtn:hover { background: rgba(232,196,93,.3); border-color: var(--rl-gold); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.35); } .rl-hub-mbtn b { color: var(--rl-gold); margin-left: 2px; } .rl-hub-mico { color: var(--rl-gold); font-size: 13px; } /* 楼光の館：遭遇/祠の「獲得した内容」チップ（何が・どれくらい入った/払ったか） */ .rl-event-gain { margin: 9px 0 2px; min-height: 0; } .rl-gain { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; } .rl-event-gain.is-in .rl-gain { opacity: 1; transform: none; } .rl-gain-label { font-size: 11px; letter-spacing: .18em; color: var(--rl-gold, #e8c45d); margin-right: 2px; } .rl-gain-chip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #d8d2c8; border: 1px solid currentColor; background: rgba(255,255,255,.05); } .rl-gain-chip.hp { color: #6fe08a; } .rl-gain-chip.atk { color: #ee9a78; } .rl-gain-chip.def { color: #79b4ee; } .rl-gain-chip.coin { color: #e8c45d; } .rl-gain-chip.skl { color: #6fd6c8; } .rl-gain-chip.skill { color: #b59cff; } .rl-gain-chip.item { color: #c8a6ff; } .rl-gain-chip.gain { color: #e8c45d; } .rl-gain-chip.loss { color: #ff8f86; } .rl-event-gain.is-in .rl-gain-chip { animation: rlChipPop .34s cubic-bezier(.2,.9,.3,1.18) both; } .rl-gain-chip:nth-child(2) { animation-delay: .03s; } .rl-gain-chip:nth-child(3) { animation-delay: .09s; } .rl-gain-chip:nth-child(4) { animation-delay: .15s; } .rl-gain-chip:nth-child(5) { animation-delay: .21s; } @keyframes rlChipPop { from { opacity: 0; transform: scale(.82) translateY(4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .rl-event-gain.is-in .rl-gain-chip { animation: none; } } /* 楼光の館：制圧ボーナス帯（自ペア合計HP > 敵ペア合計で決着＝圧勝報酬） */ .rl-dominate { display: flex; align-items: center; justify-content: center; gap: 10px; margin: -4px 0 14px; padding: 8px 16px; border-radius: 999px; background: linear-gradient(90deg, rgba(232,196,93,.1), rgba(232,196,93,.22), rgba(232,196,93,.1)); border: 1px solid rgba(232,196,93,.4); animation: rlDomIn .4s cubic-bezier(.2,.9,.3,1.2) both; } .rl-dominate-tag { font-family: var(--font-min, serif); font-weight: 700; font-size: 15px; color: #1a1206; background: linear-gradient(180deg, #f0d98a, #e8c45d); padding: 3px 12px; border-radius: 999px; letter-spacing: .06em; white-space: nowrap; } .rl-dominate-note { font-size: 13px; color: #f0d98a; font-weight: 700; } @keyframes rlDomIn { from { opacity: 0; transform: scale(.85) translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .rl-dominate { animation: none; } } /* 楼光の館：被弾告知帯（合計HPで競り負け＝全員に最大HPの30%ダメージ） */ .rl-penalty { display: flex; align-items: center; justify-content: center; gap: 10px; margin: -4px 0 14px; padding: 8px 16px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,84,112,.08), rgba(255,84,112,.2), rgba(255,84,112,.08)); border: 1px solid rgba(255,84,112,.42); animation: rlDomIn .4s cubic-bezier(.2,.9,.3,1.2) both; } .rl-penalty-tag { font-family: var(--font-min, serif); font-weight: 700; font-size: 15px; color: #2a0d12; background: linear-gradient(180deg, #ff8a9c, #ff5470); padding: 3px 12px; border-radius: 999px; letter-spacing: .06em; white-space: nowrap; } .rl-penalty-note { font-size: 13px; color: #ffb3bf; font-weight: 700; } @media (prefers-reduced-motion: reduce) { .rl-penalty { animation: none; } } /* 楼光の館：合計HP敗北ペナルティの被弾カード（インゲームの .dmg-card を踏襲しつつ赤系に） */ .rl-pen-card { border-color: rgba(255,84,112,.5) !important; } .rl-pen-head { color: #ff8a9c !important; } .rl-pen-sub { margin: 2px 0 14px; font-size: 13px; color: #d9b3ba; text-align: center; } /* 楼光の館：流派パネル（①）＝HPバー下に全5流派を行数固定で常設（未取得はグレー）。 増えても縦に伸びない＝進路カードに被らない。1行=1流派の固定高。 */ .rl-clusters { display: flex; flex-direction: column; gap: 2px; margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.07); } .rl-clrow { display: grid; grid-template-columns: 46px auto 1fr; align-items: center; gap: 8px; height: 17px; font-size: 11px; opacity: .4; color: color-mix(in srgb, var(--cl, #8fd0ff) 72%, #d8d2c4); transition: opacity .18s; } .rl-clrow.on { opacity: 1; } .rl-clrow-name { font-weight: 800; letter-spacing: .04em; white-space: nowrap; } .rl-clrow.lit .rl-clrow-name { color: #fff; } .rl-clrow-state { font-size: 10px; color: #9aa3b2; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rl-clrow-state b { color: #fff; } /* 楼光の館：流派レベルアップ演出モーダル（②）＝段を越えた瞬間に呼称＋効果を見せる */ .rl-levelup { z-index: 6; } .rl-lvl-modal { width: min(560px, 88%); border-color: color-mix(in srgb, var(--cl, #8fd0ff) 55%, var(--rl-edge)) !important; } .rl-lvl-modal::before { background: linear-gradient(90deg, transparent, var(--cl, #8fd0ff), transparent) !important; } .rl-lvl-seal { display: inline-block; margin: 2px auto 8px; padding: 4px 18px; border-radius: 999px; font-family: var(--font-min, serif); font-weight: 700; letter-spacing: .12em; color: #fff; background: color-mix(in srgb, var(--cl, #8fd0ff) 26%, transparent); border: 1px solid color-mix(in srgb, var(--cl, #8fd0ff) 60%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--cl, #8fd0ff) 40%, transparent); } .rl-lvl-name { color: color-mix(in srgb, var(--cl, #8fd0ff) 78%, #fff); } .rl-lvl-tiers { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 12px; font-family: var(--font-min, serif); } .rl-lvl-prev { font-size: 15px; color: #8a8f9a; } .rl-lvl-arrow { color: var(--cl, #8fd0ff); } .rl-lvl-now { font-size: 21px; font-weight: 800; color: #fff; text-shadow: 0 0 12px color-mix(in srgb, var(--cl, #8fd0ff) 60%, transparent); } .rl-lvl-desc { font-size: 14px; line-height: 1.6; color: var(--rl-ink); margin: 0 auto 18px; max-width: 42ch; } /* 楼光の館：層(バイオーム)入場演出（frontend-design＝題材に根ざす／層色に大胆さ集中） */ .rl-overlay.rl-biome { background: rgba(6,4,9,0.45); } .rl-biome-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5; } .rl-biome-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 28%, rgba(6,4,9,.9) 100%); } .rl-biome-card { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px; width: min(560px, 88%); padding: 30px 36px 26px; border-radius: 20px; color: var(--rl-ink); background: linear-gradient(165deg, rgba(20,15,28,0.88), rgba(10,7,15,0.92)); border: 1px solid var(--biome, var(--rl-gold)); box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 70px -22px var(--biome, var(--rl-gold)); animation: rlBiomeIn .5s cubic-bezier(.2,.9,.3,1.1) both; } .rl-biome-eyebrow { font-size: 12px; letter-spacing: .3em; color: var(--biome, var(--rl-gold)); opacity: .92; } .rl-biome-glyph { font-size: 62px; line-height: 1; filter: drop-shadow(0 4px 18px var(--biome, var(--rl-gold))); animation: rlBiomeGlyph .6s ease both .12s; } .rl-biome-name { font-family: var(--font-min, "Shippori Mincho", serif); font-size: 33px; font-weight: 700; margin: 0; letter-spacing: .07em; background: linear-gradient(180deg, #fff 10%, var(--biome, var(--rl-gold))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .rl-biome-blurb { font-size: 14px; color: #c2bccb; line-height: 1.7; margin: 0; max-width: 430px; } .rl-biome-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2px 0 4px; } .rl-biome-go { margin-top: 6px; } @keyframes rlBiomeIn { from { opacity: 0; transform: scale(.9) translateY(16px); } to { opacity: 1; transform: none; } } @keyframes rlBiomeGlyph { from { opacity: 0; transform: scale(.5) rotate(-8deg); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .rl-biome-card, .rl-biome-glyph { animation: none; } } /* 楼光の館：章intro（記憶へ踏み入る導入。提案B・縦軸の結びつけ）。記憶の色調で送り出す */ .rl-overlay.rl-chapintro { background: rgba(6,4,9,0.62); --tc: var(--rl-gold); } .rl-overlay.rl-chapintro.tone-gold { --tc: #e8c45d; } .rl-overlay.rl-chapintro.tone-jade { --tc: #6f9b8e; } .rl-overlay.rl-chapintro.tone-ember { --tc: #c0563a; } .rl-overlay.rl-chapintro.tone-ash { --tc: #6b6675; } .rl-chapintro-card { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; width: min(620px, 90%); padding: 30px 36px 26px; border-radius: 20px; color: var(--rl-ink); background: linear-gradient(165deg, rgba(20,15,28,0.92), rgba(10,7,15,0.95)); border: 1px solid var(--tc); box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 80px -26px var(--tc); animation: rlBiomeIn .5s cubic-bezier(.2,.9,.3,1.1) both; } .rl-chapintro-eyebrow { font-size: 12px; letter-spacing: .34em; color: var(--tc); opacity: .92; } .rl-chapintro-name { margin: 0; font-family: var(--font-min, "Shippori Mincho", serif); font-size: 32px; font-weight: 700; letter-spacing: .08em; background: linear-gradient(180deg, #fff 8%, var(--tc)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .rl-chapintro-blurb { margin: 0; font-size: 14px; line-height: 1.85; color: #cfc8d6; max-width: 46ch; } .rl-chapintro-speak { display: flex; align-items: flex-end; gap: 12px; width: 100%; margin-top: 4px; text-align: left; } .rl-chapintro-face { width: 56px; height: 56px; border-radius: 11px; object-fit: cover; object-position: top center; flex: none; border: 1px solid var(--tc); box-shadow: 0 4px 16px -6px var(--tc); } .rl-chapintro-fb { display: grid; place-items: center; font-family: var(--font-min, serif); font-size: 26px; font-weight: 700; color: var(--c, var(--tc)); background: rgba(255,255,255,.05); } .rl-chapintro-bubble { flex: 1 1 auto; min-width: 0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 9px 14px; } .rl-chapintro-who { font-size: 12px; font-weight: 700; letter-spacing: .04em; margin-bottom: 2px; } .rl-chapintro-line { font-size: 14px; line-height: 1.7; color: #ddd7e2; } .rl-chapintro-go { margin-top: 6px; } /* 楼光の館：大章 踏破演出（提案B §3.1・clearFloor の主を退けた祝祭）。章intro語彙＋「踏破」印で締める */ .rl-overlay.rl-chapclear { background: rgba(6,4,9,0.66); --tc: var(--rl-gold); } .rl-overlay.rl-chapclear.tone-gold { --tc: #e8c45d; } .rl-overlay.rl-chapclear.tone-jade { --tc: #6f9b8e; } .rl-overlay.rl-chapclear.tone-ember { --tc: #c0563a; } .rl-overlay.rl-chapclear.tone-ash { --tc: #6b6675; } .rl-chapclear-card { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px; width: min(620px, 90%); padding: 30px 36px 26px; border-radius: 20px; color: var(--rl-ink); background: linear-gradient(165deg, rgba(24,18,33,0.94), rgba(11,8,17,0.96)); border: 1px solid var(--tc); box-shadow: 0 24px 70px rgba(0,0,0,.62), 0 0 110px -30px var(--tc); animation: rlChapClearIn .6s cubic-bezier(.2,.9,.3,1.1) both; } @keyframes rlChapClearIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } } .rl-chapclear-seal { font-family: var(--font-min, "Shippori Mincho", serif); font-size: 15px; font-weight: 700; letter-spacing: .42em; text-indent: .42em; color: var(--tc); padding: 5px 16px 4px; border: 1px solid var(--tc); border-radius: 999px; background: rgba(232,196,93,.08); box-shadow: 0 0 26px -8px var(--tc); animation: rlSealGlow 2.4s ease-in-out infinite; } @keyframes rlSealGlow { 0%,100% { box-shadow: 0 0 26px -10px var(--tc); } 50% { box-shadow: 0 0 34px -4px var(--tc); } } .rl-chapclear-eyebrow { font-size: 12px; letter-spacing: .32em; color: var(--tc); opacity: .92; margin-top: 2px; } .rl-chapclear-name { margin: 0; font-family: var(--font-min, "Shippori Mincho", serif); font-size: 32px; font-weight: 700; letter-spacing: .08em; background: linear-gradient(180deg, #fff 8%, var(--tc)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .rl-chapclear-blurb { margin: 0; font-size: 13.5px; line-height: 1.8; color: #cfc8d6; max-width: 46ch; } .rl-chapclear-speak { display: flex; align-items: flex-end; gap: 12px; width: 100%; margin-top: 2px; text-align: left; } .rl-chapclear-face { width: 56px; height: 56px; border-radius: 11px; object-fit: cover; object-position: top center; flex: none; border: 1px solid var(--tc); box-shadow: 0 4px 16px -6px var(--tc); } .rl-chapclear-fb { display: grid; place-items: center; font-family: var(--font-min, serif); font-size: 26px; font-weight: 700; color: var(--c, var(--tc)); background: rgba(255,255,255,.05); } .rl-chapclear-bubble { flex: 1 1 auto; min-width: 0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 9px 14px; } .rl-chapclear-who { font-size: 12px; font-weight: 700; letter-spacing: .04em; margin-bottom: 2px; } .rl-chapclear-line { font-size: 14px; line-height: 1.7; color: #ddd7e2; } .rl-chapclear-next { font-size: 12.5px; letter-spacing: .03em; padding: 6px 14px; border-radius: 10px; } .rl-chapclear-open { color: var(--tc); background: rgba(232,196,93,.08); border: 1px solid var(--rl-edge); } .rl-chapclear-foretell { color: #9890a6; font-style: italic; } .rl-chapclear-go { margin-top: 4px; } /* 楼光の館：ボス対局前口上（提案B「ボスが覚えている」）。立ち絵＋口上で対峙させる */ .rl-overlay.rl-bossintro { background: rgba(6,4,9,0.62); } .rl-bossintro-card { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; width: min(840px, 92%); padding: 26px 32px 24px; border-radius: 20px; color: var(--rl-ink); background: linear-gradient(165deg, rgba(24,12,16,0.9), rgba(10,7,12,0.94)); border: 1px solid var(--rl-ember); box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 80px -24px var(--rl-ember); animation: rlBiomeIn .5s cubic-bezier(.2,.9,.3,1.1) both; } .rl-bossintro-eyebrow { font-size: 12px; letter-spacing: .34em; color: var(--rl-ember); opacity: .95; } .rl-bossintro-stage { display: flex; justify-content: center; gap: 22px; width: 100%; } .rl-bossintro-boss { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 1 1 0; min-width: 0; max-width: 360px; } .rl-bossintro-art { width: 150px; height: 210px; object-fit: cover; object-position: top center; border-radius: 14px; border: 1px solid var(--c, var(--rl-gold)); box-shadow: 0 10px 34px -12px var(--c, var(--rl-gold)); } .rl-bossintro-art-fb { width: 150px; height: 210px; display: flex; align-items: center; justify-content: center; font-family: var(--font-min, "Shippori Mincho", serif); font-size: 64px; font-weight: 700; color: var(--c, var(--rl-gold)); background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--c, #888) 26%, transparent), rgba(10,7,12,.9)); } .rl-bossintro-name { font-family: var(--font-min, "Shippori Mincho", serif); font-size: 21px; font-weight: 700; letter-spacing: .06em; color: var(--c, var(--rl-gold)); } .rl-bossintro-line { font-size: 14px; line-height: 1.7; color: #d8d2df; max-width: 320px; } .rl-bossintro-go { margin-top: 4px; } /* ペア掛け合い口上：2人目（受け）のセリフをワンテンポ遅らせて会話に見せる（rlBanter と同じ呼吸） */ @keyframes rl-pair-reply { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .rl-bossintro-pair .rl-bossintro-boss:nth-child(2) .rl-bossintro-line { opacity: 0; animation: rl-pair-reply .45s ease .95s forwards; } @media (prefers-reduced-motion: reduce) { .rl-bossintro-card { animation: none; } .rl-bossintro-pair .rl-bossintro-boss:nth-child(2) .rl-bossintro-line { opacity: 1; animation: none; } } /* ============================================================ 楼光の館・大章選択ハブ「記憶の塔」（提案B §3.1 ①） 主題＝記憶を映す塔。塔を登る＝記憶を辿る縦軸を、層の積み上げで体現。 色は記憶ごとの感情色（金=兄弟弟子/青磁=御庭番/燠火=最奥）。 ============================================================ */ .rl-chapter { position: relative; height: 100%; display: flex; flex-direction: column; --gold:#e8c45d; --jade:#6f9b8e; --ember:#c0563a; --ink:#f3ece0; --ash:#6b6675; background: radial-gradient(120% 90% at 50% -10%, #14101c 0%, #0a070f 60%, #060409 100%); color: var(--ink); overflow: hidden; } .rl-chap-backdrop { position: absolute; inset: 0; pointer-events: none; opacity: .5; /* 塔のシルエット＝記憶の柱が立ち上る暗がり（実画像に依存しないプロシージャル背景） */ background: radial-gradient(60% 120% at 50% 120%, rgba(232,196,93,.10), transparent 60%), repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.012) 46px 47px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); } .rl-chap-head { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 2px; padding: 22px 36px 14px; } .rl-chap-eyebrow { grid-column: 1 / -1; font-size: 12px; letter-spacing: .42em; color: var(--gold); opacity: .85; } .rl-chap-title { margin: 0; font-family: var(--font-min, "Shippori Mincho", serif); font-size: 30px; font-weight: 700; letter-spacing: .1em; } .rl-chap-best { font-size: 12px; color: var(--ash); letter-spacing: .08em; } .rl-chap-best b { color: var(--ink); font-size: 18px; font-family: var(--font-min, serif); } .rl-chap-body { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 366px 1fr; gap: 30px; padding: 6px 40px 8px; } /* ── 記憶の塔（縦・麓=下）。column-reverse で第一を最下層に置き、上へ積む ── */ .rl-tower { list-style: none; margin: 0; padding: 6px 4px; display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 12px; } .rl-stratum { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; border-radius: 12px; border: 1px solid rgba(255,255,255,.07); background: linear-gradient(100deg, rgba(22,17,30,.7), rgba(12,9,17,.55)); color: var(--ink); text-align: left; transition: transform .18s ease, border-color .2s ease, box-shadow .25s ease, background .2s ease; animation: rlStratumRise .5s cubic-bezier(.2,.9,.3,1.1) both; animation-delay: var(--rise, 0ms); } @keyframes rlStratumRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .rl-stratum.tone-gold { --tc: var(--gold); } .rl-stratum.tone-jade { --tc: var(--jade); } .rl-stratum.tone-ember { --tc: var(--ember); } .rl-stratum.tone-ash { --tc: var(--ash); } .rl-stratum-rune { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; font-family: var(--font-min, serif); font-size: 18px; color: var(--tc); border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); background: color-mix(in srgb, var(--tc) 12%, transparent); } .rl-stratum-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .rl-stratum-sub { font-size: 11px; letter-spacing: .22em; color: var(--ash); } .rl-stratum-name { font-family: var(--font-min, serif); font-size: 18px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rl-stratum.is-open:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--tc) 50%, transparent); } .rl-stratum.is-focused { border-color: var(--tc); background: linear-gradient(100deg, color-mix(in srgb, var(--tc) 18%, rgba(22,17,30,.8)), rgba(12,9,17,.6)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tc) 40%, transparent), 0 12px 40px -16px var(--tc); } .rl-stratum.is-sealed { cursor: default; opacity: .62; filter: saturate(.5); } .rl-stratum.is-sealed .rl-stratum-rune { color: var(--ash); border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.03); } .rl-stratum.is-sealed.is-focused { border-color: rgba(255,255,255,.18); box-shadow: none; } .rl-stratum:focus-visible { outline: 2px solid var(--tc); outline-offset: 2px; } /* ── 記憶の詳細（選んだ層が立ち上がる）── */ .rl-chap-detail { display: flex; flex-direction: column; gap: 12px; align-self: center; max-width: 560px; --tc: var(--gold); } .rl-chap-detail.tone-gold { --tc: var(--gold); } .rl-chap-detail.tone-jade { --tc: var(--jade); } .rl-chap-detail.tone-ember { --tc: var(--ember); } .rl-chap-detail.tone-ash { --tc: var(--ash); } .rl-chap-sub { font-size: 12px; letter-spacing: .26em; color: var(--tc); } .rl-chap-done { color: var(--gold); } .rl-chap-name { margin: 0; font-family: var(--font-min, serif); font-size: 34px; font-weight: 700; letter-spacing: .06em; background: linear-gradient(180deg, #fff 8%, var(--tc)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .rl-chap-name-sealed { color: var(--ash); -webkit-text-fill-color: var(--ash); } .rl-chap-blurb { margin: 0; font-size: 14.5px; line-height: 1.85; color: #cfc8d6; max-width: 48ch; } .rl-chap-cast { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .rl-chap-cast-k { font-size: 11px; letter-spacing: .2em; color: var(--ash); margin-right: 2px; } .rl-chap-castchip { font-family: var(--font-min, serif); font-size: 13px; padding: 3px 12px; border-radius: 999px; color: var(--ink); border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent); background: color-mix(in srgb, var(--tc) 10%, transparent); } .rl-chap-aim { margin: 2px 0 0; font-size: 13px; color: #b3acbe; } .rl-chap-aim::before { content: "◆ ねらい　"; color: var(--tc); letter-spacing: .1em; } .rl-chap-go { margin-top: 10px; align-self: flex-start; } .rl-chap-seal { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 16px; border-radius: 10px; font-size: 13px; color: #b6b0bf; border: 1px dashed rgba(255,255,255,.16); background: rgba(255,255,255,.03); } .rl-chap-seal-rune { font-family: var(--font-min, serif); color: var(--ash); } .rl-chap-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 8px 36px 16px; } .rl-chap-foot-hint { font-size: 12px; color: var(--ash); letter-spacing: .04em; } @media (prefers-reduced-motion: reduce) { .rl-stratum { animation: none; } } /* 楼光の館：群像の二人相槌（提案B スライス2）。相棒×相方の軽い掛け合い */ .rl-overlay.rl-banter { background: rgba(6,4,9,0.5); } .rl-banter-card { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; width: min(680px, 90%); padding: 26px 30px 22px; border-radius: 20px; color: var(--rl-ink); background: linear-gradient(165deg, rgba(20,15,28,0.9), rgba(10,7,15,0.94)); border: 1px solid var(--rl-edge); box-shadow: 0 24px 70px rgba(0,0,0,.6); animation: rlBiomeIn .45s cubic-bezier(.2,.9,.3,1.1) both; } .rl-banter-row { display: flex; align-items: flex-end; gap: 12px; transition: opacity .3s ease, transform .3s ease; } .rl-banter-r { flex-direction: row-reverse; } .rl-banter-pending { opacity: 0; transform: translateY(8px); } .rl-banter-face { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; object-position: top center; flex: none; border: 1px solid var(--c, var(--rl-gold)); box-shadow: 0 4px 16px -6px var(--c, var(--rl-gold)); } .rl-banter-fb { display: flex; align-items: center; justify-content: center; font-family: var(--font-min, "Shippori Mincho", serif); font-size: 30px; font-weight: 700; color: var(--c, var(--rl-gold)); background: rgba(255,255,255,.05); } .rl-banter-bubble { flex: 1 1 auto; min-width: 0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 9px 14px; } .rl-banter-r .rl-banter-bubble { text-align: right; } .rl-banter-name { font-size: 12px; font-weight: 700; letter-spacing: .04em; margin-bottom: 2px; } .rl-banter-line { font-size: 14px; line-height: 1.65; color: #ddd7e2; } .rl-banter-go { align-self: center; margin-top: 4px; } /* 楼光の館ハブ：現在の層バナー（いまどんな場所か＋効果を常時表示・層色アクセント） */ .rl-hub-biomebar { display: flex; align-items: center; gap: 12px; padding: 9px 16px; margin-top: 2px; border-radius: 12px; background: rgba(18,14,24,0.55); border: 1px solid rgba(255,255,255,.06); border-left: 3px solid var(--biome, var(--rl-gold)); } .rl-hub-biome-glyph { font-size: 22px; line-height: 1; flex: none; filter: drop-shadow(0 1px 5px var(--biome, var(--rl-gold))); } .rl-hub-biome-name { font-family: var(--font-min, "Shippori Mincho", serif); font-size: 17px; font-weight: 700; color: var(--biome, var(--rl-gold)); letter-spacing: .05em; white-space: nowrap; flex: none; } .rl-hub-biome-blurb { flex: 1 1 auto; min-width: 0; font-size: 12px; color: #aab0bd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rl-hub-biome-chips { display: flex; gap: 6px; flex: none; } .rl-hub-biome-chips .rl-gain-chip { font-size: 11px; padding: 3px 9px; } /* 楼光の館：層入場の操作ボタン（踏み入る＋巡りの賽で引き直す） */ .rl-biome-btns { display: flex; align-items: stretch; justify-content: center; gap: 12px; margin-top: 6px; } .rl-biome-reroll { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 7px 18px; font-size: 14px; line-height: 1.15; } .rl-biome-reroll small { font-size: 10px; color: #9aa3b2; font-weight: 400; } .rl-biome-reroll .rl-hub-mico { color: var(--biome, var(--rl-gold)); font-size: 13px; } /* 楼光の館：アカウント通貨「宝珠」表示（層入場の獲得＋ゲームオーバーの集計） */ .rl-biome-orb { margin-top: 2px; font-size: 14px; color: var(--rl-gold, #e8c45d); font-weight: 700; letter-spacing: .04em; } .rl-biome-orb b { font-size: 17px; } .rl-biome-orb-total { margin-left: 10px; font-size: 11px; color: #9aa3b2; font-weight: 400; } .rl-go-orb .rl-go-v { color: var(--rl-gold, #e8c45d); } .rl-go-orb-total { display: block; font-size: 11px; color: #9aa3b2; font-weight: 400; margin-top: 1px; } /* 楼光の館：先見の札＝層入場で次の層を表示 */ .rl-biome-next { margin-top: 2px; font-size: 12px; color: #aab0bd; } .rl-biome-next b { font-family: var(--font-min, serif); font-weight: 700; } /* 楼光の館：流派の門（交代マス） */ .rl-recruit-modal { width: min(720px, 92%); } .rl-rc-sec { font-size: 12px; letter-spacing: .14em; color: var(--rl-gold, #e8c45d); margin: 10px 0 6px; text-align: left; } .rl-rc-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .rl-rc-card { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 110px; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: var(--rl-ink, #f3ece0); cursor: pointer; transition: .14s; } .rl-rc-card:hover { border-color: var(--rl-gold, #e8c45d); transform: translateY(-2px); } .rl-rc-card.sel { border-color: #56c8b0; box-shadow: 0 0 0 2px #56c8b0 inset; background: rgba(86,200,176,.12); } .rl-rc-face { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; object-position: top center; } .rl-rc-face.rl-face-fb { display: inline-flex; align-items: center; justify-content: center; background: var(--c,#666); color: #fff; font-weight: 700; font-size: 22px; } .rl-rc-name { font-size: 13px; font-weight: 700; } .rl-rc-ab { font-size: 10px; color: #aab0bd; line-height: 1.3; text-align: center; } /* ===== 宝珠ショップ (shop-screen) ===== 楼光の館と同系統の和風・暗カード＋金アクセント。1280×720 内に収める。 */ .shop-screen { width: 100%; height: 100%; box-sizing: border-box; padding: 18px 30px; display: flex; flex-direction: column; color: #f3ead9; overflow: hidden; position: relative; /* 購入確認/完了モーダルの絶対配置アンカー */ } .shop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .shop-title { margin: 0; font-size: 30px; font-weight: 800; color: #f6d59a; letter-spacing: .04em; } .shop-orbs { font-size: 17px; color: #e9f3ec; } .shop-orbs b { color: #ffe39a; font-size: 23px; margin-left: 4px; } .shop-lead { margin: 5px 0 8px; color: #c8baa1; font-size: 13.5px; } .shop-lead-hint { color: #f6d59a; font-weight: 700; margin-left: 6px; } /* カテゴリタブ。ジャンルが増えても横に並べ、入り切らなければ横スクロール（はみ出しても枠は崩さない）。 */ .shop-tabs { flex: 0 0 auto; display: flex; gap: 8px; align-items: stretch; border-bottom: 1px solid #f6b35226; padding-bottom: 8px; margin-bottom: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .shop-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; color: #cdbfa6; cursor: pointer; background: #1b261f; border: 2px solid #f6b35226; border-radius: 999px; padding: 7px 14px; white-space: nowrap; transition: color .12s, border-color .12s, background .12s; } .shop-tab:hover { color: #f3ead9; border-color: #f6b35255; } .shop-tab.is-on { color: #20140a; background: var(--accent, #f6b352); border-color: #0003; } .shop-tab-count { font-size: 11.5px; font-weight: 800; line-height: 1; padding: 3px 7px; border-radius: 999px; background: #233b30; color: #bfe0cf; } .shop-tab.is-on .shop-tab-count { background: #00000026; color: #20140a; } /* 本体だけ縦スクロール（ヘッダー／タブ／フッターは固定）。件数が増えてもここで吸収する。 */ .shop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 4px 4px; scrollbar-width: thin; scrollbar-color: #f6b35266 transparent; } .shop-body::-webkit-scrollbar { width: 10px; } .shop-body::-webkit-scrollbar-thumb { background: #f6b35255; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .shop-body::-webkit-scrollbar-track { background: transparent; } .shop-sec-h { font-size: 18px; font-weight: 800; color: #f6d59a; } .shop-sec-sub { font-size: 13px; font-weight: 600; color: #9fb3a7; margin: 0 0 10px 2px; } /* 品揃えの有料更新バー（背景/BGMタブのみ）。 */ .shop-reroll { display: flex; align-items: center; gap: 12px; margin: 0 2px 10px; padding: 7px 12px; border-radius: 10px; background: #2a211433; border: 1px solid #f6b35233; } .shop-reroll-info { font-size: 12.5px; font-weight: 700; color: #c8baa1; } .shop-reroll-info b { color: #ffe39a; font-size: 15px; margin: 0 2px; } .shop-reroll-btn { margin-left: auto; font-size: 12.5px; font-weight: 800; cursor: pointer; padding: 6px 14px; border-radius: 999px; color: #20140a; background: var(--accent, #f6b352); border: 1px solid #0003; } .shop-reroll-btn:hover:not(:disabled) { filter: brightness(1.08); } .shop-reroll-btn:disabled { opacity: .45; cursor: not-allowed; background: #5a4d3a; color: #cdbfa6; } .shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-content: start; } .shop-card { background: #1b261f; border: 2px solid #f6b35233; border-radius: 12px; padding: 12px 13px; display: flex; flex-direction: column; gap: 6px; min-height: 0; } .shop-card.poor { opacity: .72; } .shop-card.maxed { border-color: #6fe0a055; } .shop-card-top { display: flex; align-items: center; gap: 7px; } .shop-card-ico { font-size: 18px; } .shop-card-name { font-size: 15px; font-weight: 800; color: #f3ead9; flex: 1 1 auto; } .shop-card-lv { font-size: 12px; font-weight: 700; color: #bfe0cf; background: #233b30; border-radius: 7px; padding: 3px 8px; } .shop-card-desc { font-size: 12.5px; line-height: 1.45; color: #cdbfa6; flex: 1 1 auto; } .shop-card-eff { font-size: 12.5px; color: #e9f3ec; } .shop-card-eff b { color: #ffe39a; } .shop-buy { margin-top: 4px; align-self: stretch; text-align: center; font-size: 14px; font-weight: 800; padding: 8px 12px; border-radius: 9px; background: var(--accent, #f6b352); color: #20140a; border: 2px solid #0003; cursor: pointer; } .shop-buy:hover:not(:disabled) { filter: brightness(1.08); } .shop-buy:disabled { opacity: .45; cursor: default; background: #5a5247; color: #d8cdb8; } /* 解禁カードはサムネを敷いて、下半分にベール＋情報。 */ .shop-card--unlock { position: relative; overflow: hidden; padding: 0; min-height: 118px; background-size: cover; background-position: center; background-color: #1b261f; } .shop-card--unlock.owned { outline: 2px solid #6fe0a0; } .shop-card-veil { margin-top: auto; padding: 10px 12px; background: linear-gradient(180deg, #0b0f0c00 0%, #0b0f0ce0 46%, #0b0f0cf2 100%); display: flex; flex-direction: column; gap: 5px; } .shop-card--unlock .shop-card-name { font-size: 15px; } .shop-card--unlock .shop-card-desc { flex: 0 0 auto; } .shop-empty { color: #9fb3a7; font-size: 14px; padding: 10px 2px; } /* キャラ解禁カードは立ち絵を (cover) で被せ、用途別オフセット(shop)で顔/バストを見せる（胴体だけにしない）。 立ち絵は絶対配置で背面、ベール(名前/説明/ボタン)は前面。背が高めなので顔出しの余白を確保。 */ .shop-card--char { min-height: 196px; } .shop-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transform-origin: center; z-index: 0; } .shop-card--char .shop-card-veil { position: relative; z-index: 1; } /* 購入確認 / 完了モーダル（shop-screen 内オーバーレイ）。 */ .shop-modal { position: absolute; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; } .shop-modal[hidden] { display: none; } .shop-modal-scrim { position: absolute; inset: 0; background: rgba(6,8,7,.72); backdrop-filter: blur(2px); } .shop-modal-card { position: relative; z-index: 1; width: min(420px, 86%); background: #1b261f; border: 2px solid #f6b35266; border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 60px #000a; } .shop-modal-h { font-size: 19px; font-weight: 800; color: #f6d59a; letter-spacing: .03em; } .shop-modal-badge { align-self: center; font-size: 15px; font-weight: 800; color: #06281d; background: #6fe0a0; border-radius: 999px; padding: 5px 18px; letter-spacing: .06em; } .shop-modal-item { display: flex; align-items: center; gap: 12px; } .shop-modal-ico { font-size: 30px; flex: 0 0 auto; } .shop-modal-itxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .shop-modal-name { font-size: 16px; font-weight: 800; color: #f3ead9; } .shop-modal-eff { font-size: 12.5px; line-height: 1.45; color: #cdbfa6; } .shop-modal-cost { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #e9f3ec; } .shop-modal-cost b { color: #ffe39a; } .shop-modal-bal { font-size: 12.5px; color: #9fb3a7; } .shop-modal-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 2px; } .shop-modal-btns button { font-size: 14px; font-weight: 800; padding: 9px 18px; border-radius: 10px; cursor: pointer; border: 2px solid #0003; } .shop-modal-go, .shop-modal-ok { background: var(--accent, #f6b352); color: #20140a; } .shop-modal-go:hover, .shop-modal-ok:hover { filter: brightness(1.08); } .shop-modal-cancel { background: #2a352d; color: #d8cdb8; border-color: #ffffff14; } .shop-modal-cancel:hover { background: #32402f; } .shop-foot { margin-top: 10px; flex: 0 0 auto; } /* ============================================================ テスト版の窓口 バージョン表示 / 不具合報告 / セーブ初期化 / 対局の中断 / 縦持ち案内 / 例外トースト。 製品版で外すときは、この節と index.html の #settings-test・#build-tag・#rotate-hint を消す。 */ /* ビルド表示: 画面右下に小さく。対局中（#game-screen が出ている間）は隠す。 */ .build-tag { position: absolute; right: 10px; bottom: 8px; z-index: 60; font-size: 11px; letter-spacing: .04em; color: #ffffff5c; text-shadow: 0 1px 2px #0009; pointer-events: none; user-select: text; } #game-screen:not(.hidden) ~ .build-tag { display: none; } /* 設定画面: 音量カードとテスト版カードを横並びにして 1280x720 に収める （固定ステージの不変条件＝画面内スクロールを出さない）。 */ #settings-screen.menu-screen { max-width: none; } .settings-cols { display: flex; gap: 20px; align-items: flex-start; justify-content: center; } .settings-cols > .settings-card { width: 380px; flex: 0 0 auto; } /* 設定画面のテスト版カード。 */ .settings-test { display: flex; flex-direction: column; gap: 10px; } .settings-ver { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--muted); } .settings-ver-val { color: #e7c98a; font-weight: 700; letter-spacing: .04em; } .settings-act { display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%; padding: 10px 14px; border-radius: 10px; cursor: pointer; background: #ffffff0e; border: 1px solid #ffffff1f; color: var(--ink); } .settings-act:hover { background: #ffffff18; border-color: #ffffff33; } .settings-act-t { font-size: 14.5px; font-weight: 700; } .settings-act-s { font-size: 12px; color: var(--muted); } .settings-act-danger { border-color: #e85d7566; } .settings-act-danger:hover { background: #e85d7522; border-color: #e85d75aa; } .settings-act-danger .settings-act-t { color: #ffb3c0; } /* 対局中の設定パネル内「この対局をやめる」。 */ .settings-abort { margin-top: 6px; width: 100%; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; color: #ffc3cd; background: #e85d7522; border: 1px solid #e85d7566; } .settings-abort:hover { background: #e85d7538; border-color: #e85d75aa; } .settings-abort.hidden { display: none; } /* テスト版モーダル（.auth-modal の作りに乗せた差分だけ）。 前回のUXテストで「モーダルが長くてスクロールが出る」指摘を受けているので、 1画面に収まる高さまで各行を詰める。 */ .sup-modal { width: min(560px, 92%); max-height: 93%; padding: 18px 26px 16px; } .sup-modal .auth-modal-lead { margin-bottom: 8px; font-size: 13px; } .sup-modal .auth-modal-warn { margin-bottom: 12px; padding: 10px 14px; } .sup-modal .auth-modal-warn-h { margin-bottom: 6px; font-size: 13px; } .sup-modal .auth-modal-warn-list { font-size: 12.5px; line-height: 1.6; } .sup-ver { margin: -2px 0 8px; font-size: 12.5px; color: #e7c98a; letter-spacing: .04em; } .sup-note { margin: 6px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--muted); } .sup-env { margin-top: 8px; font-size: 12px; color: var(--muted); } .sup-env summary { cursor: pointer; } .sup-env-pre { margin: 8px 0 0; padding: 10px; border-radius: 8px; max-height: 168px; overflow: auto; background: #0b120e; border: 1px solid #ffffff14; color: #cfe0d4; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; } .sup-reset-link { display: block; margin-top: 10px; padding: 0; cursor: pointer; background: none; border: none; color: #ff9fb0; font-size: 12.5px; text-decoration: underline; } .sup-close { margin-top: 10px; width: 100%; padding: 8px; border-radius: 10px; cursor: pointer; background: #ffffff14; border: 1px solid #ffffff24; color: var(--ink); font-size: 14px; } .sup-close:hover { background: #ffffff22; } .sup-danger { background: var(--danger) !important; color: #2a0d13 !important; } /* 縦持ち案内。#app の外（回転しない層）に出す。 */ .rotate-hint { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: #050807e8; padding: 24px; } .rotate-hint.hidden { display: none; } .rotate-hint-card { width: min(320px, 90%); text-align: center; color: var(--ink); background: #1b261f; border: 2px solid #f6b35266; border-radius: 16px; padding: 22px 20px; box-shadow: 0 20px 60px #000a; } .rotate-hint-icon { font-size: 40px; margin-bottom: 8px; } .rotate-hint-title { font-size: 17px; font-weight: 800; color: #f6d59a; margin-bottom: 8px; } .rotate-hint-body { margin: 0 0 16px; font-size: 13px; line-height: 1.7; color: #cdbfa6; } .rotate-hint-close { width: 100%; padding: 9px; border-radius: 10px; cursor: pointer; font-size: 13.5px; background: #ffffff14; border: 1px solid #ffffff24; color: var(--ink); } /* 例外トースト。進行は止めず、右下に控えめに出して自動で引っ込む。 */ .err-toast { position: absolute; right: 14px; bottom: 14px; z-index: 220; width: 300px; padding: 12px 14px; border-radius: 12px; background: #24161aef; border: 1px solid #e85d7566; box-shadow: 0 14px 40px #000a; color: var(--ink); opacity: 0; transform: translateY(10px); transition: opacity .28s ease, transform .28s ease; } .err-toast.show { opacity: 1; transform: translateY(0); } .err-toast-h { font-size: 13px; font-weight: 800; color: #ffb3c0; margin-bottom: 4px; } .err-toast-m { font-size: 11.5px; line-height: 1.6; color: #d8cdc8; margin-bottom: 8px; max-height: 54px; overflow: hidden; word-break: break-all; } .err-toast-btns { display: flex; gap: 8px; align-items: center; } .err-toast-btns button { padding: 5px 10px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 700; background: #ffffff14; border: 1px solid #ffffff24; color: var(--ink); } .err-toast-report { background: #f6b35233 !important; border-color: #f6b35288 !important; color: #ffd89a !important; } .err-toast-close { margin-left: auto; }