（テキスト合成/画像）へ置換。divは内在サイズが無いため正方形サイズを明示。 */
width: min(60%, 40vh);
aspect-ratio: 1 / 1;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0.7rem auto 0.2rem;
border-radius: 0.4rem;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
}
/* ゲーム開始時の操作説明モーダル（game-intros.js、ユーザー要望2026-08-12）。 */
.game-intro-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(28rem, 92vw);
z-index: 10601;
background: rgba(15, 23, 32, 0.98);
border: 1px solid rgba(56, 189, 248, 0.4);
border-radius: 0.7rem;
padding: 1.3rem 1.4rem 1.1rem;
color: #e2e8f0;
font-family: sans-serif;
box-shadow: 0 20px 55px rgba(0, 0, 0, 0.65);
}
.game-intro-title {
font-size: 1.15rem;
font-weight: bold;
margin-bottom: 0.7rem;
}
.game-intro-body {
font-size: 0.9rem;
line-height: 1.7;
color: #cbd5e1;
margin-bottom: 1.2rem;
}
.game-intro-actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.game-intro-ok {
padding: 0.55rem 1rem;
background: #0284c7;
border: none;
border-radius: 0.4rem;
color: #fff;
font-size: 0.9rem;
font-weight: bold;
cursor: pointer;
}
.game-intro-ok:hover {
filter: brightness(1.1);
}
.game-intro-alloff {
padding: 0.35rem;
background: none;
border: none;
color: rgba(148, 163, 184, 0.85);
font-size: 0.78rem;
cursor: pointer;
text-decoration: underline;
}
.game-intro-alloff:hover {
color: #cbd5e1;
}
/* 用語リンク（glossary-linkify.js）。ルール説明・チュートリアル文中の基本用語をクリック可能に。 */
.glossary-term {
color: #7dd3fc;
text-decoration: underline dotted;
text-underline-offset: 2px;
cursor: pointer;
}
.glossary-term:hover {
color: #bae6fd;
text-decoration-style: solid;
}
.glossary-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(24rem, 92vw);
max-height: 80vh;
overflow-y: auto;
z-index: 10701;
background: rgba(15, 23, 32, 0.98);
border: 1px solid rgba(56, 189, 248, 0.5);
border-radius: 0.7rem;
padding: 1.1rem 1.2rem 1rem;
color: #e2e8f0;
font-family: sans-serif;
box-shadow: 0 20px 55px rgba(0, 0, 0, 0.65);
}
.glossary-popup-title {
font-size: 1.05rem;
font-weight: bold;
margin-bottom: 0.6rem;
color: #bae6fd;
}
.glossary-popup-paragraph {
font-size: 0.9rem;
line-height: 1.7;
color: #cbd5e1;
margin: 0 0 0.6rem;
}
.glossary-popup-close {
display: block;
margin: 0.4rem 0 0 auto;
padding: 0.4rem 1.1rem;
background: rgba(56, 189, 248, 0.18);
border: 1px solid rgba(56, 189, 248, 0.6);
border-radius: 0.4rem;
color: #e2e8f0;
cursor: pointer;
font-size: 0.85rem;
}
.glossary-popup-close:hover {
filter: brightness(1.12);
}
/* 「今後このモーダルを表示しない」（confirmTouchAction、ロック前/手札使用前の確認）。
Yes/Noの下に控えめな小さいテキストリンクとして置く。押すと以後この確認を出さない
設定にして、その回の操作はそのまま実行する（再表示はオプションの基本設定から）。 */
#touch-action-confirm-dontshow {
display: block;
margin: 0.7rem auto 0;
background: none;
border: none;
color: rgba(254, 243, 199, 0.65);
font-family: sans-serif;
font-size: 0.72rem;
text-decoration: underline;
cursor: pointer;
}
#touch-action-confirm-dontshow:hover {
color: #fef3c7;
}
/* ゲストログイン前の注意確認（続き83、opening-screen.jsのconfirmGuestLogin）。
#touch-action-confirm-modalと同じ「中央固定・.contact-approval-*クラスを
使い回す」構成。注意喚起の意味合いを強めるため、他の確認モーダル（金色系）とは
別の赤系の縁取りにする。
ユーザー報告（続き103）「ゲストでログインを押しても何も起きない」の原因判明:
このモーダルは#opening-screen（z-index:50000）がまだ表示されている間に出る
（ログイン完了前の確認のため）唯一の確認モーダルだが、z-indexが他の対局中専用の
確認モーダル（#touch-action-confirm-modal/#generic-confirm-modal、続き89、
z-index:10611のまま）と同じ値を使い回していたため、#opening-screenの裏に
完全に隠れて見えなくなっていた。main.jsのopenFirstLoginProfileModal
（同じく#opening-screenより手前に出す必要がある、z-index:50100）と同じ考え方で
#opening-screenより確実に高いz-indexに変更した。 */
#guest-login-confirm-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(26rem, 90vw);
z-index: 50110;
background: linear-gradient(160deg, #3f1414, #1c0808);
border: 2px solid #f87171;
border-radius: 0.7rem;
padding: 1rem 1.4rem;
text-align: center;
font-family: sans-serif;
color: #fef2f2;
box-shadow: 0 0 1.5rem rgba(248, 113, 113, 0.5), 0 20px 50px rgba(0, 0, 0, 0.6);
}
/* 手品師の技専用（ユーザー要望「儀式的に相手の手札が裏向きの状態のまま画面中央に
拡大表示されてその中から選ぶ方式にしたい」、main.jsのrequestOpponentHandRitualPick）。
紫系にして他の確認モーダル（金色系）と見分けやすくする。 */
#sleight-ritual-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90vw;
z-index: 10621;
background: linear-gradient(160deg, #1e1b4b, #0f0a24);
border: 2px solid #a78bfa;
border-radius: 0.8rem;
padding: 1.2rem 1.6rem;
text-align: center;
font-family: sans-serif;
color: #ede9fe;
box-shadow: 0 0 1.5rem rgba(167, 139, 250, 0.5), 0 20px 50px rgba(0, 0, 0, 0.6);
}
.sleight-ritual-title {
font-weight: bold;
font-size: 0.95rem;
margin-bottom: 0.9rem;
}
.sleight-ritual-cards {
display: flex;
gap: 0.6rem;
justify-content: center;
flex-wrap: wrap;
}
.sleight-ritual-card {
/* ユーザー報告「手札を選ぶときのカードが正方形になっていない」への対応。 */
position: relative; /* カード面テキストのマウント(.card-face-mount inset:0)の包含ブロック */
width: 6rem;
height: 6rem;
overflow: hidden;
background-size: cover;
background-position: center;
border-radius: 0.3rem;
cursor: pointer;
transition: transform 0.15s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.sleight-ritual-card:hover {
transform: translateY(-0.4rem) scale(1.05);
}
/* ゲート侵攻の複数枚奪取（requestOpponentHandRitualMultiPick）: タップで選択中のカードを
金色で強調。確定ボタンは必要枚数に達するまで無効（ユーザー要望2026-08-13）。 */
.sleight-ritual-card.is-selected {
transform: translateY(-0.6rem) scale(1.1);
box-shadow: 0 0 1.2rem rgba(250, 204, 21, 0.95), 0 6px 14px rgba(0, 0, 0, 0.6);
outline: 3px solid #facc15;
z-index: 1;
}
#sleight-ritual-multi-confirm {
margin-top: 1rem;
align-self: center;
}
#sleight-ritual-multi-confirm:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ユーザー要望「スリカエで1枚引っこ抜く前にシャッフル演出が欲しい」。ピック開始前の
一定時間だけ、裏向きの手札を中央へ寄せて戻す動きを繰り返し、シャッフルしている様子を
見せる（この間はクリック不可＝pointer-events:none）。各カードの--shuffle-x/--shuffle-rotと
animation-delayはmain.jsのrequestOpponentHandRitualPickが1枚ごとに設定する。 */
@keyframes sleight-shuffle {
0% { transform: translateX(0) rotate(0deg); }
45% { transform: translateX(var(--shuffle-x, 0)) rotate(var(--shuffle-rot, 0deg)); }
55% { transform: translateX(var(--shuffle-x, 0)) rotate(var(--shuffle-rot, 0deg)); }
100% { transform: translateX(0) rotate(0deg); }
}
#sleight-ritual-modal.is-shuffling .sleight-ritual-card {
pointer-events: none;
animation: sleight-shuffle 0.55s ease-in-out infinite;
}
/* ユーザー要望「奪われる側にも表向きで表示されて相手のマウスがどこにホバー
されているかわかるようにしてほしい」。相手側の画面から届いたホバー位置に
対応するカードを光らせる（main.jsのopenRitualPickWatch/onRitualPickHoverEvents）。 */
.sleight-ritual-card.is-hovered {
transform: translateY(-0.4rem) scale(1.05);
box-shadow: 0 0 1rem rgba(250, 204, 21, 0.9), 0 4px 10px rgba(0, 0, 0, 0.5);
outline: 3px solid #facc15;
}
/* ユーザー要望「奪われるカードが決まったら、そのカードを拡大し『このカードが
奪われました』的な感じでわかるようにしてほしい」（main.jsのrevealRitualPickWatchResult）。
選ばれた1枚だけ赤系に発光・拡大させ、選ばれなかった残りは薄暗くして目立たなくする。 */
.sleight-ritual-card.is-stolen-reveal {
transform: translateY(-0.6rem) scale(1.25);
box-shadow: 0 0 1.4rem rgba(248, 113, 113, 0.95), 0 6px 14px rgba(0, 0, 0, 0.6);
outline: 3px solid #f87171;
z-index: 1;
}
.sleight-ritual-card.is-not-picked {
opacity: 0.35;
filter: grayscale(60%);
transform: scale(0.92);
}
/* ゲート侵攻の奪取（#9）はサーバーが無作為に決めた札を左→右にめくって公開するだけで、
スリカエの本物のピックのように個別の札を選べるわけではない。個別カードのホバーで浮く演出は
「この札を選んでいる」誤解を招くので消す（タップでめくる操作自体は有効なままにする）。
めくり終えた札(is-stolen-reveal)の拡大表示はそのまま残す。 */
#sleight-ritual-modal.is-steal-reveal .sleight-ritual-card:not(.is-stolen-reveal):hover {
transform: none;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
/* 合同建設の「山札から/手札から」選択（main.jsのrequestPlaceSourceChoiceForEffect）。 */
.place-source-choice-buttons {
display: flex;
gap: 0.8rem;
justify-content: center;
}
.place-source-choice-buttons button {
padding: 0.6rem 1rem;
background: rgba(167, 139, 250, 0.2);
color: #ede9fe;
border: 1px solid rgba(167, 139, 250, 0.6);
border-radius: 0.4rem;
cursor: pointer;
font-family: sans-serif;
font-size: 0.85rem;
}
.place-source-choice-buttons button:hover {
background: rgba(167, 139, 250, 0.4);
}
/* ターン終了時の中央告知（src/turn-announce.js）。ゲーム操作を妨げないよう
pointer-events:noneにし、一瞬だけ画面中央に大きく次のプレイヤー名を表示してから
自動的に消える（クリック不要のトースト、victory-modalとは違い操作を待たない）。 */
#turn-announce-toast {
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%) scale(0.7);
z-index: 9000;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#turn-announce-toast.show {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* 【ユーザー要望2026-09-05・②】ターンの始まりに、その人の席の方向から光が走ってくる。
モーダルを増やすと待ち時間が伸びるので、今のモーダルに重ねるだけの一発演出にした
（1.1秒で消える・クリックは一切拾わない）。色はその人の駒の色。 */
.turn-announce-sweep {
position: fixed;
inset: 0;
z-index: 8999;
pointer-events: none;
opacity: 0;
background: linear-gradient(
var(--turn-announce-sweep-angle, 0deg),
transparent 0%,
color-mix(in srgb, var(--turn-announce-color, #facc15) 55%, transparent) 18%,
transparent 42%
);
background-size: 100% 300%;
animation: turn-announce-sweep 1.1s cubic-bezier(0.25, 0.8, 0.3, 1) forwards;
}
/* 席の辺＝光がやって来る向き。手前(bottom)の席なら画面の下から上へ。 */
.turn-announce-sweep[data-from="bottom"] { --turn-announce-sweep-angle: 0deg; }
.turn-announce-sweep[data-from="top"] { --turn-announce-sweep-angle: 180deg; }
.turn-announce-sweep[data-from="left"] { --turn-announce-sweep-angle: 90deg; }
.turn-announce-sweep[data-from="right"] { --turn-announce-sweep-angle: 270deg; }
@keyframes turn-announce-sweep {
0% {
opacity: 0;
background-position: 50% 100%;
}
25% {
opacity: 0.85;
}
100% {
opacity: 0;
background-position: 50% 0%;
}
}
body.reduce-glow .turn-announce-sweep {
animation: none;
opacity: 0;
}
.turn-announce-label {
font-family: sans-serif;
font-weight: bold;
font-size: 2.2rem;
color: #fef3c7;
background: linear-gradient(160deg, rgba(66, 32, 6, 0.92), rgba(28, 16, 4, 0.92));
border: 3px solid #facc15;
border-radius: 1rem;
padding: 1rem 2.2rem;
text-shadow: 0 0 0.6rem rgba(250, 204, 21, 0.8);
/* 【②】枠と光は、その番のプレイヤーの駒の色（未指定なら従来の金色）。 */
border-color: var(--turn-announce-color, #facc15);
text-shadow: 0 0 0.6rem color-mix(in srgb, var(--turn-announce-color, #facc15) 80%, transparent);
box-shadow:
0 0 2.5rem color-mix(in srgb, var(--turn-announce-color, #facc15) 55%, transparent),
0 20px 50px rgba(0, 0, 0, 0.6);
white-space: nowrap;
}
/* 【②】自分の番の時だけ、名前が一拍だけ大きく脈打つ（相手の番は静かなまま）。 */
.turn-announce-label.is-self {
animation: turn-announce-self-beat 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s 1 both;
}
@keyframes turn-announce-self-beat {
0% { transform: scale(1); }
35% { transform: scale(1.14); }
100% { transform: scale(1); }
}
body.reduce-glow .turn-announce-label.is-self {
animation: none;
}
/* フェイズ自動進行（src/phase-automation.js）。ユーザー要望「効果自動処理がオンの時は
フェイズも自動で流れるように。フェイズごとに画面中央に『ロックフェイズ』とかを
英語とカタカナルビでかっこよく表示」。turn-announce-toastと同じ「一瞬だけ表示して
自動的に消える」トーストパターン。 */
.phase-announce-toast {
position: fixed;
top: 32%;
left: 50%;
transform: translate(-50%, -50%) scale(0.7);
z-index: 9001;
pointer-events: none;
opacity: 0;
text-align: center;
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.phase-announce-toast.show {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.phase-announce-title {
font-family: sans-serif;
font-weight: bold;
font-size: 2.6rem;
letter-spacing: 0.15em;
color: #e0f2fe;
text-shadow: 0 0 0.8rem rgba(56, 189, 248, 0.8), 0 4px 12px rgba(0, 0, 0, 0.7);
}
.phase-announce-ruby {
display: block;
font-size: 0.95rem;
letter-spacing: 0.3em;
color: #7dd3fc;
margin-top: 0.1rem;
}
.phase-announce-desc {
margin-top: 0.4rem;
font-family: sans-serif;
font-size: 1rem;
color: #fef3c7;
background: linear-gradient(160deg, rgba(66, 32, 6, 0.92), rgba(28, 16, 4, 0.92));
border: 2px solid #facc15;
border-radius: 0.6rem;
padding: 0.4rem 1.2rem;
display: inline-block;
box-shadow: 0 0 1.2rem rgba(250, 204, 21, 0.4), 0 10px 25px rgba(0, 0, 0, 0.5);
}
/* 常設のスキップボタン。ユーザー報告「他のアイコンと被っている」への対応で、固定座標
ではなく#phase-guide-bar（flexコンテナ）内でロックボタンの直後（＝右隣）にDOM上の
兄弟として挿入する方式に変更した（phase-automation.js側）。ここでは通常のflexアイテム
として振る舞わせるだけでよく、position:fixedは不要になった。ムーブフェイズは
「移動」か「接触」を必ず行う必要があるルールのため対象外（JS側でdisplay制御）。
ユーザー要望「難しければ管理者モードに位置調整を追加してほしい」への対応で、
微調整用のオフセットCSS変数（--phase-skip-button-offset-x/-y、admin.js）も
pulseアニメーションのtransformに含めてある。 */
#phase-automation-skip-button {
/* ユーザー要望（続き76、当初は「案内板の右へ」だったが後に「案内板の上へ」に
変更）。#phase-guide-bar（position:fixed）の子のまま、position:absoluteで
フローから外し、バーの真上に浮かせる——src/timer-toggle.jsの#timer-toggle-button
（バーの右上に浮かぶポップオーバー）と全く同じ技法。左右が被らないよう、
あちらはright:0、こちらはleft:0にしてある。 */
position: absolute;
bottom: calc(100% + 0.6rem);
left: 0;
z-index: 1001;
display: none;
padding: 0.5rem 1.1rem;
background: linear-gradient(160deg, #facc15, #f59e0b);
border: none;
border-radius: 0.5rem;
color: #1c1006;
font-weight: bold;
font-family: sans-serif;
font-size: 0.9rem;
cursor: pointer;
box-shadow: 0 0 1rem rgba(250, 204, 21, 0.6), 0 6px 14px rgba(0, 0, 0, 0.5);
animation: phase-automation-skip-pulse 1.6s ease-in-out infinite;
}
@keyframes phase-automation-skip-pulse {
0%, 100% { transform: translate(var(--phase-skip-button-offset-x, 0rem), var(--phase-skip-button-offset-y, 0rem)) scale(1); }
50% { transform: translate(var(--phase-skip-button-offset-x, 0rem), var(--phase-skip-button-offset-y, 0rem)) scale(1.06); }
}
#phase-automation-skip-button:hover {
filter: brightness(1.1);
}
/* マイデッキ戦（マイデッキ.txt）: ロックフェイズの「マイデッキから1枚引く」ボタン。
スキップボタン(left:0, 案内板の真上)と縦に段積みして重ならないよう、さらに一段上に置く。
スキップ(黄)と区別できるよう青系にする。 */
#phase-automation-mydeck-button {
position: absolute;
bottom: calc(100% + 3.2rem);
left: 0;
z-index: 1001;
display: none;
padding: 0.5rem 1.1rem;
background: linear-gradient(160deg, #38bdf8, #0ea5e9);
border: none;
border-radius: 0.5rem;
color: #04121f;
font-weight: bold;
font-family: sans-serif;
font-size: 0.9rem;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 0 1rem rgba(56, 189, 248, 0.55), 0 6px 14px rgba(0, 0, 0, 0.5);
}
#phase-automation-mydeck-button:hover:not(:disabled) {
filter: brightness(1.1);
}
#phase-automation-mydeck-button:disabled {
opacity: 0.6;
cursor: default;
}
/* ユーザー要望（続き81）「スキップボタンについては個別でサイズ位置調整も追加して」。
このボタンは常時pulseアニメーション中で、通常のtransformプロパティは実行中の
キーフレームに丸ごと上書きされてしまう（transformの値はカスケードで合成されず、
実行中のアニメーションのtransformが常に勝つ）ため、スマホ専用の位置・サイズは
静的なtransformとしてではなく、専用のキーフレーム名に差し替える形で実現する
（animation-nameだけを上書きし、duration等は元のanimationショートハンドの
ままにする）。transform-originはボタン自身の固定辺（bottom/left）に合わせる。 */
@keyframes phase-automation-skip-pulse-phone {
0%, 100% {
transform: translate(
calc(var(--phase-skip-button-offset-x, 0rem) + var(--phase-skip-button-pos-phone-x, 0rem)),
calc(var(--phase-skip-button-offset-y, 0rem) + var(--phase-skip-button-pos-phone-y, 0rem))
) scale(var(--phase-skip-button-scale-phone, 1));
}
50% {
transform: translate(
calc(var(--phase-skip-button-offset-x, 0rem) + var(--phase-skip-button-pos-phone-x, 0rem)),
calc(var(--phase-skip-button-offset-y, 0rem) + var(--phase-skip-button-pos-phone-y, 0rem))
) scale(calc(var(--phase-skip-button-scale-phone, 1) * 1.06));
}
}
body.is-phone-device #phase-automation-skip-button {
animation-name: phase-automation-skip-pulse-phone;
transform-origin: bottom left;
}
/* ユーザー要望（続き76）「スキップボタンを表示させていない時は『自分のターンです』
『相手のターンです』とそこに表示させておきたい」。スキップボタンと同じ枠
（#phase-guide-bar末尾）を共有し、どちらか一方だけ表示する（phase-automation.js
のupdateSkipButtonVisibility参照）。 */
#phase-automation-turn-status {
/* スキップボタンと同じ「バーの真上に浮かぶ」位置（上のコメント参照）。
ハマりどころ（ユーザー報告「スマホでターン表示が画面右端で見切れる」）: 案内板バーは
画面右下(right:2.3rem)にあるため、left:0基準＋nowrapで右へ伸ばすと長文
（「相手のターンです（ムーブフェイズ）（優先権は相手にあります）」等）が画面右端を
越えて切れていた。右端基準(right:0)にして左方向へ伸ばし、画面内に収める。 */
position: absolute;
bottom: calc(100% + 0.6rem);
right: 0;
display: none;
padding: 0.4rem 0.9rem;
background: rgba(15, 23, 32, 0.75);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 0.5rem;
color: #e2e8f0;
font-family: sans-serif;
font-size: 0.8rem;
font-weight: bold;
white-space: nowrap;
text-align: right;
}
/* ユーザー要望（続き81）「相手のターン自分のターン表示についても個別でサイズ位置
調整も追加して」。こちらはアニメーション無しの静止要素のため、スキップボタンと
違い素直にtransformを重ねるだけでよい。 */
body.is-phone-device #phase-automation-turn-status {
transform-origin: bottom right;
transform: translate(var(--phase-turn-status-pos-phone-x, 0rem), var(--phase-turn-status-pos-phone-y, 0rem))
scale(var(--phase-turn-status-scale-phone, 1));
/* スマホでは画面幅を越える長文（フェイズ名・優先権の注記付き）は折り返して見切れを防ぐ。 */
white-space: normal;
/* 【#414・2026-10-16】ユーザー報告「右下の『エイドスのターンです』の**改行が気になります**」。
原因は `max-width` ではなく**入れ物の幅**だった——この表示は案内板バーの中に
`position: absolute; right: 0` で置かれており、**幅を auto にしていると入れ物（バー）の
幅までしか広がれない**（実測: 上限は352pxと書いてあるのに、折り返した時の箱は
実画面168px＝CSS約279pxで頭打ち）。名前が入って1文字ぶん長くなるだけで折り返す。
`width: max-content` にすると**入れ物をはみ出して左へ伸びられる**ので1行に収まる
（右端基準なので、伸びる先は画面の内側）。長すぎる時だけ max-width で折り返す。
⚠ `vw` は使わない（ステージ倍率が掛かるので実画面では意図の半分以下になる＝続き575 の★）。 */
width: max-content;
max-width: 44rem;
}
body.reduce-glow #phase-automation-skip-button {
animation: none;
}
/* フェイズ案内板（phase-guide.js）で、今のフェイズのボタンだけ光らせる
（phase-guide.js冒頭コメントで「将来の土台」として予告されていた仕組み）。 */
#phase-guide-bar button.is-current-phase {
outline: 2px solid rgba(56, 189, 248, 0.9);
outline-offset: 2px;
animation: phase-guide-current-glow 1.8s ease-in-out infinite;
}
@keyframes phase-guide-current-glow {
0%, 100% { box-shadow: 0 0 0.4rem 0.05rem rgba(56, 189, 248, 0.6); }
50% { box-shadow: 0 0 1rem 0.3rem rgba(56, 189, 248, 0.9); }
}
body.reduce-glow #phase-guide-bar button.is-current-phase {
animation: none;
}
/* 自動フェイズ送りトグル（フェイズ案内板の先頭）。ON＝緑枠、OFF＝暗い赤枠で状態が
ひと目で分かるようにし、丸アイコンの右下に ON/OFF バッジを重ねる。 */
.phase-auto-skip-toggle .phase-auto-skip-toggle-glyph {
font-size: 1.2rem;
line-height: 1;
}
.phase-auto-skip-toggle .phase-auto-skip-toggle-state {
position: absolute;
bottom: -0.15rem;
right: -0.15rem;
font-size: 0.5rem;
font-weight: bold;
padding: 0.02rem 0.22rem;
border-radius: 0.5rem;
line-height: 1.3;
pointer-events: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.phase-auto-skip-toggle.is-on .icon-action-button-icon-wrap {
border-color: rgba(74, 222, 128, 0.9);
}
.phase-auto-skip-toggle.is-on .phase-auto-skip-toggle-state {
background: #15803d;
color: #dcfce7;
}
.phase-auto-skip-toggle.is-off .icon-action-button-icon-wrap {
border-color: rgba(248, 113, 113, 0.8);
}
.phase-auto-skip-toggle.is-off .phase-auto-skip-toggle-glyph {
opacity: 0.65;
}
.phase-auto-skip-toggle.is-off .phase-auto-skip-toggle-state {
background: #7f1d1d;
color: #fecaca;
}
/* ムーブフェイズの移動可能／接触可能ハイライト。既存のcard-effect-target-cell
（黄色、クリックして選ぶ候補）とは別物であることが分かるよう、移動可能は緑、
接触可能はオレンジにする。 */
.cell.phase-move-highlight {
outline: 3px solid rgba(74, 222, 128, 0.85);
outline-offset: -3px;
animation: phase-move-highlight-pulse 1.4s ease-in-out infinite;
}
.cell.phase-contact-highlight {
outline: 3px solid rgba(251, 146, 60, 0.9);
outline-offset: -3px;
animation: phase-contact-highlight-pulse 1.4s ease-in-out infinite;
}
/* ユーザー報告「接触できる相手の駒がなぜかペッちゃんこです」の原因・修正: opacity（0.7↔1）で
パルスさせていたが、opacityが1未満の要素はブラウザが独立した合成レイヤーへ強制的に
分離する仕様のため、その中にいる3D立体駒（buildCubePieceのpreserve-3dキューブ技法）が
平面化して描画されてしまっていた。既存のtutorial-move-range-pulse（.card-effect-
target-cell等で使用、駒を巻き込む心配のない実績あるパターン）と同じくoutline-colorの
明暗だけをパルスさせる方式に変更する。 */
@keyframes phase-move-highlight-pulse {
0%, 100% { outline-color: rgba(74, 222, 128, 0.9); }
50% { outline-color: rgba(74, 222, 128, 0.35); }
}
@keyframes phase-contact-highlight-pulse {
0%, 100% { outline-color: rgba(251, 146, 60, 0.9); }
50% { outline-color: rgba(251, 146, 60, 0.35); }
}
body.reduce-glow .cell.phase-move-highlight,
body.reduce-glow .cell.phase-contact-highlight {
animation: none;
}
/* ユーザー要望「移動先ハイライト時、範囲外のトーンを落としてください。ジャンプ台の時と
同じように」。card-effect-picking-cellsと同じ「候補以外を暗くする」演出だが、ここでは
filter/opacityを使わない。理由（ユーザー報告、2件）:
① filterを.cellへ直接かけると.board-card（カード画像）はなぜか暗くならず、マス自体しか
暗くならなかった。
② .cellはpreserve-3dで自分の駒(.piece、buildCubePieceの立方体技法)を子に持つことがあり、
filter/opacityはCSS仕様上その要素を独立した合成レイヤーへ強制分離してしまうため、
中の3D立体駒が平面化（ペっちゃんこ）して描画される（前回のパルス演出と同じ既知の罠）。
代わりに、::after擬似要素で半透明の黒を「一番最後に重ねて描く」オーバーレイ方式にする。
擬似要素は他のfilter/opacity系プロパティを一切使わないため合成レイヤー分離が起きず、
かつ通常のDOM子要素より必ず後に描画される（＝マスの背景にもカード画像にも重なって
両方きちんと暗く見える）。box-shadow: insetも試したが、不透明なカード画像の「下」に
描かれてしまい見た目に反映されなかったため採用しなかった。 */
body.phase-move-picking .cell:not(.phase-move-highlight):not(.phase-contact-highlight)::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(0, 0, 0, 0.55);
pointer-events: none;
}
/* ユーザー要望「ロックフェイズではロックできるカードのみ手札内でハイライトし、それ以外は
トーンオフしてほしい」。.hand-cardは（.cellと違い）preserve-3dの3D立体駒を子に持つ
ことがないため、filterを直接かけても平面化の罠は無い（既存のcard-effect-picking-hand
と同じ、実績のある方式をそのまま流用する）。 */
.hand-card.phase-lock-highlight {
outline: 3px solid rgba(74, 222, 128, 0.9);
outline-offset: 2px;
animation: phase-move-highlight-pulse 1.4s ease-in-out infinite;
}
body.reduce-glow .hand-card.phase-lock-highlight {
animation: none;
}
/* ユーザー報告（続き85）「紫のキューブの追色コストを選ぶとき手札のゴメンナサイが
トーンオフされてしまっている」の原因: このロックフェイズ用の暗転ルールが
card-effect-target-cell（手札効果の追色コスト等、別のピッカーの候補ハイライト）を
考慮しておらず、ロックフェイズ中に手札効果の候補選択が重なると、ロック候補では
ないというだけで手札効果側の正当な候補まで暗くしてしまっていた。 */
body.phase-lock-picking .hand-card:not(.phase-lock-highlight):not(.card-effect-target-cell) {
filter: brightness(0.45) saturate(0.6);
transition: filter 0.2s ease;
}
/* フェイズ自動スキップの通知モーダル（src/phase-automation.js）。confirm-modalと似た
見た目だが、クリック不要で数秒後に自動的に消える（1ターンに複数回起こり得るため）。 */
.phase-skip-modal-backdrop {
position: fixed;
inset: 0;
z-index: 10002;
background: rgba(0, 0, 0, 0.35);
}
.phase-skip-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10003;
background: rgba(15, 23, 32, 0.98);
border: 2px solid rgba(148, 163, 184, 0.5);
border-radius: 0.6rem;
padding: 1rem 1.6rem;
color: #e2e8f0;
font-family: sans-serif;
font-size: 0.9rem;
text-align: center;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
cursor: pointer;
}
/* 手札効果「このカードを使用します」告知モーダル（src/hand-effect-ui.js）。
ユーザー要望「到達拡大モーダルの位置に表示・同じく消えないように」への対応で、
card-arrival-modal（到達）と全く同じ位置・大きさ・消え方（--card-arrival-modal-*
のCSS変数を共有）にしてある。到達と使用が同時に起きた場合は後から表示された
方が手前に重なる（DOM appendの順序通り）——別々のDOM/タイマーで管理しているため
互いを消し合うことは無い。 */
.hand-effect-use-modal {
position: fixed;
top: var(--card-arrival-modal-top);
right: var(--card-arrival-modal-right);
z-index: 10600;
width: var(--card-arrival-modal-size);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: 0.6rem;
background: rgba(15, 23, 32, 0.5);
border-radius: 0.8rem;
transform-origin: top right;
transform: scale(0.85);
opacity: 0;
pointer-events: auto;
transition: opacity 0.3s ease, transform 0.3s ease;
cursor: pointer;
}
.hand-effect-use-modal.show {
opacity: 1;
transform: scale(1);
}
.hand-effect-use-modal-label {
font-family: sans-serif;
font-weight: bold;
font-size: 1.1rem;
letter-spacing: 0.2em;
color: #38bdf8;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
.hand-effect-use-modal img,
.hand-effect-use-modal .card-box {
width: 100%;
display: block;
border-radius: 0.6rem;
border: 2px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.7);
}
.hand-effect-use-modal-name {
font-family: sans-serif;
font-size: 0.7rem;
color: #e2e8f0;
text-align: center;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
/* ユーザー要望「スリカエなどで渡されたカードは何が渡されたのか大きくモーダルで
表示してわかるようにしてほしい」（src/hand-effect-ui.jsのshowCardReceivedModal）。
儀式的ピック系モーダル（紫系）や使用告知（水色・左上）と見分けやすいよう緑系・
画面中央・背景ディム付きにする。 */
.card-received-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.85);
z-index: 10641;
width: 13rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1.1rem 1.3rem;
background: linear-gradient(160deg, #052e1f, #021208);
border: 2px solid #34d399;
border-radius: 0.9rem;
opacity: 0;
pointer-events: auto;
cursor: pointer;
transition: opacity 0.25s ease, transform 0.25s ease;
box-shadow: 0 0 1.8rem rgba(52, 211, 153, 0.5), 0 20px 50px rgba(0, 0, 0, 0.6);
}
.card-received-modal.show {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.card-received-modal-label {
font-family: sans-serif;
font-weight: bold;
font-size: 1.2rem;
letter-spacing: 0.2em;
color: #6ee7b7;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
.card-received-modal img,
.card-received-modal .card-box {
width: 100%;
display: block;
border-radius: 0.6rem;
border: 2px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.7);
}
.card-received-modal-name {
font-family: sans-serif;
font-size: 0.95rem;
font-weight: bold;
color: #ecfdf5;
text-align: center;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.card-received-modal-subtitle {
font-family: sans-serif;
font-size: 0.75rem;
color: #a7f3d0;
text-align: center;
}
/* 複数枚をまとめて見せる中央モーダル（showMultipleCardsReceivedModal、ゲート侵攻の複数枚奪取。
ユーザー要望2026-08-13）。カードを横並び（枚数が多ければ折り返す）。 */
.card-received-modal-multi {
width: auto;
max-width: min(46rem, 94vw);
cursor: pointer;
}
.card-received-modal-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.7rem;
}
.card-received-modal-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
width: 8rem;
max-width: 40vw;
}
.card-received-modal-card .card-box {
width: 100%;
border-radius: 0.4rem;
border: 2px solid rgba(255, 255, 255, 0.7);
}
/* プレゼントの到達効果等で「誰がドロー対象か」をアバターで画面中央に周知するモーダル
（main.jsのannounceDrawTargetsForEffect）。ユーザー要望2026-08-07。 */
.draw-targets-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.85);
z-index: 10641;
max-width: min(30rem, 92vw);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
padding: 1.2rem 1.5rem;
background: linear-gradient(160deg, #0b2e4a, #041524);
border: 2px solid #38bdf8;
border-radius: 0.9rem;
opacity: 0;
pointer-events: auto;
cursor: pointer;
transition: opacity 0.25s ease, transform 0.25s ease;
box-shadow: 0 0 1.8rem rgba(56, 189, 248, 0.5), 0 20px 50px rgba(0, 0, 0, 0.6);
}
.draw-targets-modal.show {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.draw-targets-modal-title {
font-family: sans-serif;
font-weight: bold;
font-size: 1rem;
color: #bae6fd;
text-align: center;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
.draw-targets-modal-avatars {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.draw-targets-modal-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
}
.draw-targets-modal-avatar {
width: 4.5rem;
height: 4.5rem;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.3);
}
.draw-targets-modal-avatar img,
.draw-targets-modal-avatar svg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.draw-targets-modal-name {
font-family: sans-serif;
font-size: 0.8rem;
font-weight: bold;
color: #e0f2fe;
text-align: center;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
/* ライトテーマ（body.theme-light）: プレゼント等の「ドロー対象周知」モーダルがダークのままだった
ので、他のライトモーダルと同じアイボリー地＋ゴールド枠＋濃い文字へ（ユーザー報告2026-08-08）。 */
body.theme-light .draw-targets-modal {
background: linear-gradient(160deg, #fffdf7, #f6efdd);
border-color: rgba(176, 141, 63, 0.7);
box-shadow: 0 0 1.4rem rgba(176, 141, 63, 0.3), 0 20px 50px rgba(0, 0, 0, 0.25);
}
body.theme-light .draw-targets-modal-title {
color: #6b4e0a;
text-shadow: none;
}
body.theme-light .draw-targets-modal-name {
color: #3a3326;
text-shadow: none;
}
/* 効果の発動理由を説明するモーダル（src/hand-effect-ui.jsのshowEffectReasonModal、
例: カウンターロックの「あなたは１番少なくロックしているので１枚ドローします」・
不発の案内）。ユーザー要望「すぐ消える一時的なモーダルは画面中央に表示させて
ください」への対応で画面中央に出す（以前は到達モーダル（右上）・使用モーダル
（左上）との重なりを避けるため画面下中央にしていたが、このモーダル自体は毎回
awaitして単独で表示されるタイミングでしか出さないため、中央に出しても他の
モーダルと同時に重なることは無い）。 */
.effect-reason-modal {
position: fixed;
top: 50%;
left: 50%;
z-index: 10600;
width: min(20rem, 80vw);
padding: 0.7rem 1rem;
background: rgba(15, 23, 32, 0.92);
border: 1px solid rgba(56, 189, 248, 0.6);
border-radius: 0.6rem;
text-align: center;
transform: translate(-50%, -50%) scale(0.94);
opacity: 0;
pointer-events: auto;
cursor: pointer;
transition: opacity 0.3s ease, transform 0.3s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
.effect-reason-modal.show {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.effect-reason-modal-name {
font-family: sans-serif;
font-weight: bold;
font-size: 0.75rem;
color: #7dd3fc;
margin-bottom: 0.3rem;
}
.effect-reason-modal-text {
font-family: sans-serif;
font-size: 0.8rem;
color: #e2e8f0;
line-height: 1.5;
}
/* 手札効果の選択肢モーダル（なないろの欠片等、src/hand-effect-ui.js）。使用できない
選択肢はグレー表示・クリック不可にする（ユーザー要望）。 */
.hand-effect-option-picker-backdrop {
position: fixed;
inset: 0;
z-index: 10004;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.2s ease;
}
.hand-effect-option-picker-backdrop.show {
opacity: 1;
}
.hand-effect-option-picker {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
z-index: 10005;
width: min(20rem, 90vw);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
background: rgba(15, 23, 32, 0.98);
border: 2px solid rgba(148, 163, 184, 0.5);
border-radius: 0.6rem;
padding: 1.2rem;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.hand-effect-option-picker.show {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.hand-effect-option-picker-title {
font-family: sans-serif;
font-size: 0.9rem;
color: #e2e8f0;
text-align: center;
}
.hand-effect-option-picker-img {
position: relative;
width: 6rem;
border-radius: 0.5rem;
border: 2px solid rgba(255, 255, 255, 0.6);
/*
![]()
→
（テキスト合成/画像）へ置換したため、正方形・クリップ・画像敷き設定を明示。 */
aspect-ratio: 1 / 1;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hand-effect-option-picker-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
}
.hand-effect-option-picker-btn {
padding: 0.6rem 0.8rem;
background: rgba(56, 189, 248, 0.2);
color: #e2e8f0;
border: 1px solid rgba(56, 189, 248, 0.6);
border-radius: 0.4rem;
cursor: pointer;
font-family: sans-serif;
font-size: 0.85rem;
}
.hand-effect-option-picker-btn:hover {
background: rgba(56, 189, 248, 0.4);
}
.hand-effect-option-picker-btn.is-unusable {
background: rgba(100, 116, 139, 0.15);
color: rgba(226, 232, 240, 0.4);
border-color: rgba(100, 116, 139, 0.35);
cursor: not-allowed;
}
/* ユーザー要望「選択モーダルが盤面を隠していて見にくい。『盤面を見る』ボタンを
モーダル内に追加、押すと盤面を確認することができる。適当にクリックすると
選択モーダルに戻る」への対応（hand-effect-ui.jsのshowHandEffectOptionPicker）。
ユーザー要望「『盤面を見る』ボタンを押したとき、モーダルは消すのではなく画面の
左側に移すようにしてほしい」への対応で、非表示にする代わりに画面左端へ寄せる
（盤面の中央〜右側が見えるようにしつつ、モーダル自体は見えたまま操作もできる）。 */
.hand-effect-option-picker-backdrop.is-peeking {
background: transparent;
}
.hand-effect-option-picker.is-peeking {
left: 1.5rem;
transform: translate(0, -50%) scale(1);
}
/* ユーザー報告「『盤面を見る』が薄くて見にくい」。半透明グレーだと、特に既定のライト
（アイボリー）モーダル上でほぼ見えなかった。濃いスレートの単色ボタンにして両テーマで
はっきり読めるようにする。 */
.hand-effect-option-picker-peek-btn {
width: 100%;
padding: 0.5rem 0.8rem;
background: rgba(71, 85, 105, 0.9);
color: #f1f5f9;
border: 1px solid rgba(30, 41, 59, 0.9);
border-radius: 0.4rem;
cursor: pointer;
font-family: sans-serif;
font-size: 0.85rem;
font-weight: 600;
}
/* クリックしても「何も起きない」と誤解されないための軽いお知らせ（main.js showQuickNote）。 */
.quick-note-toast {
position: fixed;
left: 50%;
bottom: 6rem;
transform: translate(-50%, 1rem);
z-index: 10050;
padding: 0.7rem 1.2rem;
border-radius: 0.5rem;
background: rgba(15, 23, 32, 0.92);
color: #f1f5f9;
border: 1px solid rgba(251, 191, 36, 0.5);
font-family: sans-serif;
font-size: 0.9rem;
box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.45);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.quick-note-toast.show {
opacity: 1;
transform: translate(-50%, 0);
}
/* 不具合報告モーダル（bug-report.js）。 */
#bug-report-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(34rem, 94vw);
z-index: 10041;
background: rgba(15, 23, 32, 0.98);
border: 1px solid rgba(251, 191, 36, 0.5);
border-radius: 0.6rem;
padding: 1.3rem;
font-family: sans-serif;
color: #e2e8f0;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.bug-report-title {
font-weight: bold;
font-size: 1.1rem;
color: #fbbf24;
margin-bottom: 0.6rem;
padding-right: 1.6rem;
}
.bug-report-desc {
font-size: 0.82rem;
line-height: 1.6;
color: #cbd5e1;
margin-bottom: 0.8rem;
}
/* 不具合報告の画像添付（bug-report.js、ユーザー要望2026-08-29）。
ボタン／プレビュー／ドラッグ中のハイライト。 */
.bug-report-attach {
margin-top: 0.5rem;
padding: 0.5rem;
border: 1px dashed rgba(148, 163, 184, 0.45);
border-radius: 0.4rem;
}
.bug-report-attach.is-dragover {
border-color: rgba(250, 204, 21, 0.9);
background: rgba(250, 204, 21, 0.08);
}
.bug-report-attach-btn {
padding: 0.35rem 0.7rem;
border-radius: 0.35rem;
border: 1px solid rgba(148, 163, 184, 0.5);
background: rgba(2, 6, 12, 0.4);
color: #e2e8f0;
font-size: 0.82rem;
cursor: pointer;
}
.bug-report-attach-btn:hover { background: rgba(30, 41, 59, 0.6); }
/* 「今の画面の状態も送る」のチェック行（続き572）。文字色は決め打ちせず周りから継ぐ
——明暗2テーマがあり、決め打ちすると片方で文字が見えなくなる（教訓15）。 */
.bug-report-screen {
display: flex;
align-items: center;
gap: 0.45rem;
margin-top: 0.5rem;
font-size: 0.8rem;
cursor: pointer;
}
.bug-report-screen input {
flex: none;
width: 1rem;
height: 1rem;
cursor: pointer;
}
.bug-report-attach-hint {
margin-top: 0.35rem;
font-size: 0.7rem;
color: #94a3b8;
line-height: 1.5;
}
.bug-report-attach-preview { display: flex; align-items: flex-start; gap: 0.5rem; }
.bug-report-attach-preview img {
max-width: 12rem;
max-height: 8rem;
border-radius: 0.3rem;
border: 1px solid rgba(148, 163, 184, 0.4);
}
.bug-report-attach-remove {
padding: 0.25rem 0.5rem;
border-radius: 0.3rem;
border: 1px solid rgba(248, 113, 113, 0.5);
background: transparent;
color: #fca5a5;
font-size: 0.72rem;
cursor: pointer;
}
body.theme-light .bug-report-attach-btn { background: #fff; color: #1f2937; }
body.theme-light .bug-report-attach-hint { color: #4b5563; }
.bug-report-textarea {
width: 100%;
box-sizing: border-box;
resize: vertical;
padding: 0.6rem 0.7rem;
border-radius: 0.4rem;
border: 1px solid rgba(148, 163, 184, 0.5);
background: rgba(2, 6, 12, 0.5);
color: #f1f5f9;
font-family: sans-serif;
font-size: 0.9rem;
line-height: 1.5;
}
.bug-report-status {
min-height: 1.2rem;
font-size: 0.82rem;
color: #86efac;
margin: 0.5rem 0 0.2rem;
}
.bug-report-status.is-error {
color: #fca5a5;
}
.bug-report-actions {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
margin-top: 0.6rem;
}
.bug-report-cancel,
.bug-report-submit {
padding: 0.5rem 1.3rem;
border: none;
border-radius: 0.35rem;
cursor: pointer;
font-family: sans-serif;
font-size: 0.9rem;
font-weight: 600;
}
.bug-report-cancel {
background: rgba(148, 163, 184, 0.25);
color: #e2e8f0;
}
.bug-report-submit {
background: #f59e0b;
color: #201400;
}
.bug-report-submit:disabled,
.bug-report-cancel:disabled {
opacity: 0.6;
cursor: default;
}
/* ライトテーマ（既定）でも読めるように。 */
body.theme-light #bug-report-modal {
background: #fdfbf5;
border-color: rgba(176, 141, 63, 0.6);
color: #3a3326;
}
body.theme-light .bug-report-desc {
color: #6b5c3c;
}
body.theme-light .bug-report-title {
color: #a67c1a;
}
body.theme-light .bug-report-textarea {
background: #fff;
border-color: rgba(176, 141, 63, 0.5);
color: #3a3326;
}
/* ライトテーマではキャンセルボタンの文字（既定は白 #e2e8f0）が、薄いグレー地＋アイボリーの
モーダル背景に埋もれて読めなかった（ユーザー報告「送信ボタンの横のボタンが読めない」）。
ゴールド系の薄地＋濃いめの文字＋枠線で、他のライトモーダルのボタンと揃えて読めるようにする。 */
body.theme-light .bug-report-cancel {
background: rgba(176, 141, 63, 0.14);
color: #6b5c3c;
border: 1px solid rgba(176, 141, 63, 0.45);
}
/* 【続き572・2026-10-11】**スマホでは報告モーダル全体を拡大する。**
このアプリは 1600x900 のステージを画面に収まる倍率へ縮めて表示するので、iPhoneの
横持ち（932x430）では 1rem が実画面で 7〜8px にしかならない。実測で**送信ボタンの文字が
6.9px・添付の案内が 5.4px・ボタンの高さが19px**＝読めず押しにくい状態だった
（続き566 の CAMPFIRE リンク 6.3px、#389 の「画面最上部の17pxの帯」と同じ形）。
不具合を報告する側の画面が読めないと報告自体が来ないので、オープニングと同じ考え方で
文字と当たり判定を 2 倍前後に拡大する。**PCは一切変えない**（この規則はスマホ判定時だけ）。
入力欄は行数（rows=6）のままだと拡大で縦に伸びすぎるので、高さを決めて抑える。 */
body.is-phone-device #bug-report-modal {
width: min(60rem, 94vw);
padding: 2rem 2.2rem;
border-radius: 1rem;
/* 画像を添付するとプレビュー（最大8rem）が増えて画面の高さを超えかけるので上限を決める。
ステージは900px高（=56.25rem）なので52remでほぼ画面いっぱい。はみ出す分は中で巻く。 */
max-height: 52rem;
overflow-y: auto;
}
body.is-phone-device .bug-report-title {
font-size: 2.2rem;
margin-bottom: 1rem;
padding-right: 3rem;
}
body.is-phone-device .bug-report-desc {
font-size: 1.35rem;
margin-bottom: 1rem;
}
body.is-phone-device .bug-report-textarea {
font-size: 1.6rem;
height: 9rem;
padding: 0.9rem 1rem;
border-radius: 0.7rem;
}
body.is-phone-device .bug-report-attach { padding: 0.9rem; border-radius: 0.7rem; }
body.is-phone-device .bug-report-attach-btn {
font-size: 1.5rem;
padding: 0.6rem 1.2rem;
border-radius: 0.6rem;
}
body.is-phone-device .bug-report-attach-hint { font-size: 1.2rem; margin-top: 0.6rem; }
body.is-phone-device .bug-report-attach-remove { font-size: 1.3rem; padding: 0.5rem 0.9rem; }
body.is-phone-device .bug-report-screen { font-size: 1.5rem; gap: 0.8rem; margin-top: 0.9rem; padding: 0.35rem 0; }
body.is-phone-device .bug-report-screen input { width: 2.4rem; height: 2.4rem; }
body.is-phone-device .bug-report-status { font-size: 1.35rem; min-height: 2rem; }
body.is-phone-device .bug-report-cancel,
body.is-phone-device .bug-report-submit {
font-size: 1.6rem;
padding: 0.8rem 2rem;
border-radius: 0.6rem;
}
.hand-effect-option-picker-peek-btn:hover {
background: rgba(51, 65, 85, 1);
}
.hand-effect-option-picker-peek-hint {
position: fixed;
top: 1.2rem;
left: 50%;
transform: translateX(-50%);
z-index: 10006;
padding: 0.5rem 1rem;
background: rgba(15, 23, 32, 0.85);
color: #e2e8f0;
border: 1px solid rgba(148, 163, 184, 0.5);
border-radius: 2rem;
font-family: sans-serif;
font-size: 0.8rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.hand-effect-option-picker-peek-hint.show {
opacity: 1;
}
/* ザ・ギャンブル/試練の儀式の「色を宣言する」モーダル。 */
.declare-colors-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10631;
width: min(20rem, 90vw);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
background: rgba(15, 23, 32, 0.98);
border: 2px solid rgba(148, 163, 184, 0.5);
border-radius: 0.6rem;
padding: 1.2rem;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.declare-colors-modal-title {
font-family: sans-serif;
font-size: 0.9rem;
color: #e2e8f0;
text-align: center;
}
/* 7色を七角形に並べる（緑=上・赤=左下から時計回り）。位置はJS側で slot に%指定
（main.jsのdeclareColorsForEffect）。位置(slot)とホバー拡大(swatch)を別要素に分けて
transformの衝突を避ける。 */
.declare-colors-modal-grid {
position: relative;
width: 15rem;
height: 15rem;
margin: 0.1rem auto 0;
}
.declare-colors-modal-slot {
position: absolute;
transform: translate(-50%, -50%);
}
.declare-colors-modal-swatch {
position: relative;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: var(--swatch-color);
border: 3px solid rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.declare-colors-modal-swatch:hover {
transform: scale(1.12);
}
/* 【撤去（ユーザー報告2026-09-01 #193）】以前は「選択が1つでもあれば未選択を沈める」に
していたが、3色宣言のカードで1色選んだ時点で残り6色が薄くなり「もう選べないのか」と
誤解させてしまった。選択済みは下の白＋金の二重リングと✓で十分に目立つので、
未選択を沈める処理はやめる。 */
/* 選択された色を、どの色の上でもはっきり分かるようにする（白＋金の二重リング・
強めの拡大・持続する発光・中央のチェックマーク）。 */
.declare-colors-modal-swatch.is-selected {
border-color: #fff;
transform: scale(1.22);
box-shadow:
0 0 0 3px #fff,
0 0 0 6px #facc15,
0 0 16px 4px rgba(250, 204, 21, 0.85);
z-index: 1;
}
.declare-colors-modal-swatch.is-selected::after {
content: "✓";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 900;
color: #fff;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8);
pointer-events: none;
}
.declare-colors-modal-confirm {
padding: 0.6rem 1.2rem;
background: rgba(56, 189, 248, 0.2);
color: #e2e8f0;
border: 1px solid rgba(56, 189, 248, 0.6);
border-radius: 0.4rem;
cursor: pointer;
font-family: sans-serif;
font-size: 0.85rem;
}
.declare-colors-modal-confirm:hover:not(:disabled) {
background: rgba(56, 189, 248, 0.4);
}
/* ライト配色（theme-light=全体 / theme-light-ingame=盤面）時は明るいパネルに（ユーザー報告）。 */
body.theme-light .declare-colors-modal,
body.theme-light-ingame .declare-colors-modal {
background: rgba(255, 253, 245, 0.98);
border-color: rgba(146, 102, 10, 0.45);
box-shadow: 0 20px 50px rgba(80, 60, 20, 0.35);
}
body.theme-light .declare-colors-modal-title,
body.theme-light-ingame .declare-colors-modal-title {
color: #1e293b;
}
body.theme-light .declare-colors-modal-swatch,
body.theme-light-ingame .declare-colors-modal-swatch {
border-color: rgba(30, 41, 59, 0.28);
}
body.theme-light .declare-colors-modal-confirm,
body.theme-light-ingame .declare-colors-modal-confirm {
background: rgba(14, 116, 144, 0.15);
color: #0e5568;
border-color: rgba(14, 116, 144, 0.5);
}
body.theme-light .declare-colors-modal-confirm:hover:not(:disabled),
body.theme-light-ingame .declare-colors-modal-confirm:hover:not(:disabled) {
background: rgba(14, 116, 144, 0.28);
}
/* 色宣言の常駐表示（src/main.jsのshowDeclaredColorsIndicator、続き65）。画面中央に
出た直後、少し経つと画面左側へすっと移行して常駐する（結果が判明するまで自動では
消えない）。丸いアイコンは.declare-colors-modal-swatchと同じ--swatch-color変数を使う。 */
:root {
--declared-colors-corner-left: 1rem;
--declared-colors-corner-scale: 0.85;
}
.declared-colors-indicator {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10615;
background: linear-gradient(160deg, #1e293b, #0f172a);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 0.7rem;
/* ユーザー要望「色周知モーダルをもっと大きく」。中央に出る瞬間を大きく見せる
（隅へ寄った後の大きさは --declared-colors-corner-scale で従来どおり調整可能）。 */
padding: 1.1rem 1.8rem;
text-align: center;
font-family: sans-serif;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
transition: top 0.6s ease, left 0.6s ease, transform 0.6s ease, padding 0.6s ease;
}
/* ユーザー要望（続き68）「モーダルを左下に移動するのではなくそのまま左に移動して
ほしい」への対応。以前は下端(bottom:1rem)＋左端(left:1rem)の「左下」だったが、
topは基本形（top:50%）のまま変えず、transformのY成分だけ-50%を保つことで、
垂直方向の位置は動かさず水平方向にだけ寄せる「まっすぐ左」の移動にした。
位置(--declared-colors-corner-left)・大きさ(--declared-colors-corner-scale)は
管理者モードから調整できる（admin.jsのGROUPS参照、範囲は大きめに確保）。 */
.declared-colors-indicator.is-corner {
left: var(--declared-colors-corner-left, 1rem);
transform: translate(0, -50%) scale(var(--declared-colors-corner-scale, 0.85));
transform-origin: center left;
}
.declared-colors-indicator-title {
font-size: 1rem;
font-weight: 700;
color: #e2e8f0;
margin-bottom: 0.5rem;
white-space: nowrap;
}
.declared-colors-indicator-swatches {
display: flex;
gap: 0.45rem;
justify-content: center;
}
.declared-colors-indicator-swatch {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: var(--swatch-color);
border: 2px solid rgba(255, 255, 255, 0.4);
}
/* ユーザー要望「作業を促すモーダルに『盤面を見る』ボタンをつけてほしい」への対応
（main.jsのdeclareColorsForEffect、hand-effect-option-picker-peek-*と共通のクラスを流用）。
ユーザー要望「『盤面を見る』ボタンを押したとき、モーダルは消すのではなく画面の
左側に移すようにしてほしい」への対応で非表示にせず画面左端へ寄せる。 */
.declare-colors-modal.is-peeking {
left: 1.5rem;
transform: translate(0, -50%);
}
/* ユーザー報告（続き92）「パーティ・選べる罠の選択モーダルで盤面を見るを押した時
画面左端で見切れる」と全く同じCSS詳細度の逆転が、同じ「盤面を見る」機構を使う
このモーダル（ザ・ギャンブル・試練の儀式の色宣言）にも起きていたため、
同じ考え方で修正する（.hand-effect-option-picker.is-peeking参照）。
transform-originも同じ理由（既定の中心基準だとscale()で左半分が画面外へ
はみ出す）で左端に固定する。 */
body.is-phone-device .declare-colors-modal.is-peeking {
transform-origin: 0% 50%;
transform: translate(0, -50%) scale(var(--center-modal-scale-phone, 1));
}
.declare-colors-modal-confirm:disabled {
background: rgba(100, 116, 139, 0.15);
color: rgba(226, 232, 240, 0.4);
border-color: rgba(100, 116, 139, 0.35);
cursor: not-allowed;
}
/* ユーザー要望「全員のマウスカーソルの位置が全員に見える化したい。アバターとその
プレイヤーの色、名前が載っているとわかりやすい」（main.jsのensureRemoteCursorEl/
onCursorPositionEvents参照）。document.bodyの直下に置くことで、既存のステージの
scale/offset transform（applyViewportStage）をそのまま自動的に受け継ぐ
（left/topはstageClientToLocalで変換したステージのローカル座標＝1600x900基準）。 */
.remote-cursor {
position: fixed;
z-index: 10700;
display: flex;
align-items: center;
gap: 0.3rem;
pointer-events: none;
transform: translate(0.6rem, 0.6rem);
transition: left 0.08s linear, top 0.08s linear;
}
.remote-cursor-avatar {
width: 1.8rem;
height: 1.8rem;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
border-radius: 50%;
border: 2px solid var(--cursor-color, #94a3b8);
overflow: hidden;
background: #1e293b;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.remote-cursor-avatar .avatar-image {
width: 100%;
height: 100%;
}
.remote-cursor-name {
font-family: sans-serif;
font-size: 0.7rem;
font-weight: bold;
color: #fff;
background: rgba(15, 23, 32, 0.85);
border: 1px solid var(--cursor-color, #94a3b8);
padding: 0.1rem 0.5rem;
border-radius: 0.3rem;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
/* ユーザー要望「配置後ここに配置したよがわかるように配置場所をしっかりハイライトして
ください。マスの枠だけでなくカードの面もね」。マスの枠はoutline（3D立体駒を巻き込む
filter/opacity系の罠を避けるため、既存のphase-move-highlight-pulseと同じ手法を流用）、
カードの面はbox-shadow（.board-card自体は3D立体では無いためfilter系でも問題無いが、
card-effect-target-cellの既存の光り方と揃える）。 */
@keyframes card-effect-just-placed-pulse {
0%, 100% { outline-color: rgba(250, 204, 21, 0.9); }
50% { outline-color: rgba(250, 204, 21, 0.35); }
}
.cell.card-effect-just-placed {
outline: 3px solid rgba(250, 204, 21, 0.9);
outline-offset: -3px;
animation: card-effect-just-placed-pulse 1.4s ease-in-out infinite;
}
body.reduce-glow .cell.card-effect-just-placed {
animation: none;
}
.cell.card-effect-just-placed .board-card {
box-shadow: 0 0 1.2rem 0.4rem rgba(250, 204, 21, 0.85);
}
/* 7色ロック達成時の勝利モーダル。金色のグロー＋トロフィーで祝う演出。 */
@keyframes victory-modal-glow {
0%, 100% { box-shadow: 0 0 2rem 0.4rem rgba(250, 204, 21, 0.5), 0 20px 60px rgba(0, 0, 0, 0.7); }
50% { box-shadow: 0 0 4rem 1rem rgba(250, 204, 21, 0.9), 0 20px 60px rgba(0, 0, 0, 0.7); }
}
@keyframes victory-modal-pop-in {
0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
/* ============================================================================
勝利演出「七色、集結」（src/victory-celebration.js）。
WAIT → COLORS → GATHER → PULSE → FLASH → VICTORY →（リザルトへ）
物語の線引き: 七色を集めたことで世界に色が戻ったとは断定しない。だから盤面に色を戻す演出は
入れず、何が起きたのかは白い光で覆い隠す。
盤面は3D階層なので盤面自身に filter は掛けない（3Dが平坦化して壊れる。CLAUDE.md教訓2）。
暗くするのは上に重ねたオーバーレイ側で行う。
数値は全て --vic-* のCSS変数（管理者モードのシミュレーターが同じ変数を書き換える）。
========================================================================= */
:root {
--vic-speed: 0.85; /* 全体の速さ（大きいほど速い）。既定=派手版 */
--vic-color-step: 1; /* 1色ごとの間隔 */
--vic-gather-speed: 1; /* キューブへ集まる速さ */
--vic-stream: 1.8; /* 光の帯・霧の量。既定=派手版 */
--vic-pulse-count: 3; /* 脈動の回数 */
--vic-pulse-power: 1.6; /* 脈動の強さ。既定=派手版 */
--vic-shake: 1.6; /* 画面振動の強さ。既定=派手版 */
--vic-flash-speed: 1; /* 白飛びが広がる速さ */
--vic-white: 0.88; /* 白オーバーレイの濃さ（0.5〜0.98） */
--vic-residue: 2; /* 白い画面の中の七色残光の量。既定=派手版 */
--vic-rings: 1.2; /* 【#385】脈動ごとの七色の衝撃波（0で切れる） */
--vic-rays: 1; /* 【#385】VICTORYの背後の七色の光芒（0で切れる） */
/* 脈動している疑似キューブの「白い芯」の強さ。0にすると白い丸が完全に消えて、
勝者の色のにじみだけになる（ユーザー要望2026-08-31「脈動中の白丸いらないかも」）。 */
--vic-cube-white: 0;
--vic-avatar-size: 16; /* 勝者アバターの大きさ（vmin） */
--vic-fan: 1; /* ロックした7枚を中央に扇状に並べるか（0/1） */
--vic-hold: 1; /* 勝利表示を見せる長さ */
}
/* 演出中は盤面に触らせない（勝敗・通信処理は演出とは切り離して既に確定済み）。 */
body.victory-celebration-active #game-table,
body.victory-celebration-active #option-area {
pointer-events: none;
}
#victory-celebration {
position: fixed;
inset: 0;
z-index: 10450; /* 勝利モーダル(10500)より下・盤面より上 */
pointer-events: none;
overflow: hidden;
}
/* スキップ用に、演出中だけタップを拾う（押すと残りが一気に詰まる）。 */
#victory-celebration.is-hushed { pointer-events: auto; }
/* WAIT: 世界の音と光が引く。勝者のロックエリアの周りだけ残す。 */
#victory-celebration .vic-veil {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 420ms cubic-bezier(0.3, 0, 0.2, 1);
background: radial-gradient(ellipse at 50% 50%, rgba(3, 4, 8, 0.35) 0%, rgba(3, 4, 8, 0.82) 100%);
}
@supports (backdrop-filter: saturate(1)) or (-webkit-backdrop-filter: saturate(1)) {
#victory-celebration .vic-veil {
-webkit-backdrop-filter: saturate(0.35) brightness(0.42);
backdrop-filter: saturate(0.35) brightness(0.42);
}
}
#victory-celebration.is-hushed .vic-veil { opacity: 1; }
/* 【重さ対策・2026-09-06】白い光が画面を覆った後（.is-flash）は、この幕は白の裏に隠れて
ほとんど見えないのに、**画面全体の backdrop-filter を毎フレーム掛け続ける**。勝利演出は
そのまま勝利モーダル→通貨→順位→個人結果→対戦終了パネルの背景として数分間残るので、
その間ずっと画面全体のフィルタが走り、実機（iPhone）で1フレーム 740→1500ms まで落ちていた
（報告 #318 のログ）。暗い地のグラデーション自体は残すので見た目はほぼ変わらない。 */
#victory-celebration.is-flash .vic-veil {
-webkit-backdrop-filter: none;
backdrop-filter: none;
/* filter を外すと盤面が白の向こうに薄く透けてしまう（白は 88% で、残り 12% に盤面が出る）。
見た目を今までどおり「一面の白」に保つため、幕の地の色そのものをほぼ不透明にして盤面を隠す。
ただの塗りなので、毎フレーム画面全体を作り直す backdrop-filter とは負荷が桁違いに軽い。 */
background: rgba(3, 4, 8, 0.96);
}
/* GATHER: 光の帯・霧を描くキャンバス（位置に依らない大量描画はここ） */
#victory-celebration .vic-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* COLORS: 勝者のロックスロットが順に発光 → 最後に同時に強く光る。
【重要】盤面側の .lock-slot を光らせると、幕(.vic-veil)の backdrop-filter で彩度と明るさが
落ちるため「暗転の裏側」になって色が出なかった（ユーザー報告2026-08-30）。そこで、幕より
手前のこのレイヤーに、スロットと同じ位置・同じ大きさの光を置き直している（JS側の
spawnSlotFlares が矩形を実測して配置する）。色は演出用の VIVID（--vic-slot-rgb）。 */
#victory-celebration .vic-slots {
position: absolute;
inset: 0;
}
/* 【重要】盤面のスロットは画面上では台形に映る（傾き・縮み・せん断が混ざる）。
矩形をそのまま重ねると光が「立って」見え、自前の perspective で寝かせても盤面とは消失点が
違うので位置がずれる（ユーザー報告2026-08-31）。そこで JS 側（measureSlotQuad）が実際の
写り方を測って matrix() を作り、この箱にそのまま当てる。板の拡大縮小は、その写り方の
「中で」行うので、いつでもスロットの上に乗ったままになる。 */
#victory-celebration .vic-slot {
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
pointer-events: none;
}
#victory-celebration .vic-slot-plate {
width: 100%;
height: 100%;
border-radius: 12%;
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0.82);
/* 「スロットそのものが灯った」ように見せる＝中は淡く、ふちだけはっきり。
にじみ(box-shadow)を大きくしすぎると隣とつながって、ただの虹色の帯に見えてしまう。 */
background: radial-gradient(closest-side,
rgba(var(--vic-slot-rgb, 255, 255, 255), 0.55) 0%,
rgba(var(--vic-slot-rgb, 255, 255, 255), 0.28) 62%,
rgba(var(--vic-slot-rgb, 255, 255, 255), 0) 100%);
will-change: transform, opacity;
}
#victory-celebration .vic-slot-plate.is-lit {
animation: vic-slot-lit 900ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes vic-slot-lit {
0% { opacity: 0; transform: scale(0.82); }
20% {
opacity: 1;
transform: scale(1.16);
box-shadow: inset 0 0 0 0.14rem rgba(var(--vic-slot-rgb), 1),
0 0 1.1rem 0.12rem rgba(var(--vic-slot-rgb), 0.9),
0 0 2.2rem 0.4rem rgba(var(--vic-slot-rgb), 0.45);
}
100% {
opacity: 0.95;
transform: scale(1);
box-shadow: inset 0 0 0 0.1rem rgba(var(--vic-slot-rgb), 0.9),
0 0 0.6rem 0.02rem rgba(var(--vic-slot-rgb), 0.7),
0 0 1.2rem 0.14rem rgba(var(--vic-slot-rgb), 0.3);
}
}
#victory-celebration .vic-slot-plate.is-all {
animation: vic-slot-all 560ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes vic-slot-all {
0% { opacity: 0.95; transform: scale(1); }
30% {
opacity: 1;
transform: scale(1.3);
box-shadow: inset 0 0 0 0.16rem rgba(var(--vic-slot-rgb), 1),
0 0 1.6rem 0.3rem rgba(var(--vic-slot-rgb), 0.95),
0 0 3rem 0.7rem rgba(var(--vic-slot-rgb), 0.5);
}
100% {
opacity: 1;
transform: scale(1.06);
box-shadow: inset 0 0 0 0.12rem rgba(var(--vic-slot-rgb), 0.95),
0 0 0.8rem 0.06rem rgba(var(--vic-slot-rgb), 0.75),
0 0 1.7rem 0.2rem rgba(var(--vic-slot-rgb), 0.35);
}
}
/* カードが浮き上がったら、色はカードへ移ったものとしてロックエリアの光は消す。
（.is-all より後に書くこと。同じ詳細度なので後勝ちでアニメーションを差し替える。） */
#victory-celebration .vic-slot-plate.is-drained {
animation: vic-slot-drain 620ms ease-out forwards;
}
@keyframes vic-slot-drain {
0% { opacity: 1; transform: scale(1.06); }
100% { opacity: 0; transform: scale(0.94); box-shadow: none; }
}
/* （任意）ロックした7枚が中央に扇状に並び、最後はキューブへ吸われるように消える */
#victory-celebration .vic-card {
position: absolute;
transform-origin: 50% 50%;
transform: translate(0, 0) rotate(0deg) scale(1);
opacity: 1;
transition: transform 900ms cubic-bezier(0.22, 0.9, 0.24, 1), opacity 320ms ease-in;
will-change: transform;
}
#victory-celebration .vic-card .card-box {
width: 100%;
height: 100%;
border-radius: 0.5rem;
box-shadow: 0 0 0 0.18rem var(--vic-card-color), 0 0 1.2rem 0.25rem var(--vic-card-color),
0 0.4rem 1.4rem rgba(0, 0, 0, 0.5);
}
#victory-celebration .vic-card.is-flying {
transform: translate(var(--vic-card-tx), var(--vic-card-ty)) rotate(var(--vic-card-rot)) scale(var(--vic-card-scale));
}
/* キューブへ飛び込んで消える（その場で縮むのではなく、位置ごと駒へ吸い込ませる）。 */
#victory-celebration .vic-card.is-absorbing {
transition: transform 520ms cubic-bezier(0.55, 0, 0.75, 0.3), opacity 520ms ease-in 120ms;
transform: translate(var(--vic-card-tx), var(--vic-card-ty))
rotate(calc(var(--vic-card-rot) + var(--vic-card-spin, 0deg))) scale(0.08);
opacity: 0;
}
/* GATHER〜PULSE: 勝者のキューブ。実物の駒はそのままに、少し半透明の「疑似的な駒」を幕より
手前に重ねて、そちらを脈動させる（ユーザー提案2026-08-30。実物は幕の裏で暗くなるうえ、
以前は白い丸が広がるだけに見えていた）。中身はドラッグゴーストと同じく本物の .piece の
複製で、perspective + 盤面と同じ傾きの入れ子に入れて立方体のまま見せる。
駒は preserve-3d なので filter は使わず box-shadow だけで光らせる（教訓2）。 */
#victory-celebration .vic-cubes {
position: absolute;
inset: 0;
}
#victory-celebration .vic-cube {
position: absolute;
transform: translate(-50%, -50%);
perspective: var(--camera-perspective);
opacity: 0;
transition: opacity 460ms ease-out;
will-change: transform, opacity;
}
#victory-celebration .vic-cube-inner {
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
/* 実物と重なっても「もう1つ乗っている」と分かる程度の半透明にする。 */
#victory-celebration .vic-cube.is-charging { opacity: 0.66; }
/* 発光は「白い芯＋勝者の色の広いにじみ」。白を強く広く出すと、脈動が画面の中央で
ただの白い丸に見えてしまう（ユーザー報告2026-08-31）。白は薄く狭く、色は広くぼかす。 */
/* 【重要】にじみを大きく取ると、駒のまわりに丸い光の溜まり＝スポットライトができてしまう
（ユーザー報告2026-08-31「スポットライトは不要で駒自体が光ってればそれでいい」）。
ぼかしは駒の輪郭からわずかに出る程度に留める。 */
#victory-celebration .vic-cube .piece-face {
box-shadow:
0 0 0.35rem 0 rgba(255, 255, 255, calc(0.3 * var(--vic-cube-white, 1))),
0 0 0.7rem 0.02rem rgba(var(--vic-cube-rgb, 255, 255, 255), 0.5);
}
#victory-celebration .vic-cube.is-pulse .piece-face {
animation: vic-cube-face-beat var(--vic-pulse-ms, 380ms) cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes vic-cube-face-beat {
0% {
box-shadow: 0 0 0.35rem 0 rgba(255, 255, 255, calc(0.3 * var(--vic-cube-white, 1))),
0 0 0.7rem 0.02rem rgba(var(--vic-cube-rgb, 255, 255, 255), 0.5);
}
35% {
box-shadow:
0 0 calc(0.5rem * var(--vic-pulse-power, 1)) 0 rgba(255, 255, 255, calc(0.42 * var(--vic-cube-white, 1))),
0 0 calc(1.3rem * var(--vic-pulse-power, 1)) calc(0.12rem * var(--vic-pulse-power, 1)) rgba(var(--vic-cube-rgb, 255, 255, 255), 0.85);
}
100% {
box-shadow: 0 0 0.35rem 0 rgba(255, 255, 255, calc(0.3 * var(--vic-cube-white, 1))),
0 0 0.7rem 0.02rem rgba(var(--vic-cube-rgb, 255, 255, 255), 0.5);
}
}
/* 脈動のたびに、同じキューブが一回り大きく広がって消える残像を1つ置く。 */
#victory-celebration .vic-cube.is-echo {
opacity: 0.45;
animation: vic-cube-echo 880ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes vic-cube-echo {
0% { opacity: 0.45; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(calc(1.9 + 1.1 * var(--vic-echo-power, 1))); }
}
/* 脈動に合わせた、ごく小さな画面振動（盤面のtransformには触らず、ステージ全体を揺らす）。 */
#victory-celebration.is-pulsing .vic-cubes {
animation: vic-shake var(--vic-pulse-ms, 380ms) ease-out;
}
@keyframes vic-shake {
0%, 100% { transform: translate(0, 0); }
20% { transform: translate(calc(var(--vic-shake-amp, 2px) * -1), var(--vic-shake-amp, 2px)); }
45% { transform: translate(var(--vic-shake-amp, 2px), calc(var(--vic-shake-amp, 2px) * -0.6)); }
70% { transform: translate(calc(var(--vic-shake-amp, 2px) * -0.5), 0); }
}
/* （脈動のたびの「白い丸」は、上の疑似キューブの残像 .vic-cube.is-echo に置き換えた。 */
/* FLASH: キューブ中心から白が全画面へ。真っ白にはしない＝盤面の輪郭がうっすら残る。 */
#victory-celebration .vic-flash {
position: absolute;
inset: 0;
opacity: 0;
background:
radial-gradient(circle at var(--vic-flash-x, 50%) var(--vic-flash-y, 50%),
rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.96) 42%, rgba(255, 255, 255, 0.9) 100%);
}
#victory-celebration.is-flash .vic-flash {
animation: vic-flash-expand var(--vic-flash-ms, 560ms) cubic-bezier(0.3, 0, 0.15, 1) forwards;
}
@keyframes vic-flash-expand {
0% { opacity: 0; clip-path: circle(0% at var(--vic-flash-x, 50%) var(--vic-flash-y, 50%)); }
35% { opacity: 1; }
100% { opacity: var(--vic-white-alpha, 0.88); clip-path: circle(150% at var(--vic-flash-x, 50%) var(--vic-flash-y, 50%)); }
}
/* 白い光の中を漂う、ごく淡い七色の残光（世界へ放出されたようには見せない）。 */
#victory-celebration.is-flash .vic-flash::after {
content: "";
position: absolute;
inset: -20%;
opacity: calc(0.1 * var(--vic-residue, 1));
/* 【重さ対策・2026-09-06】以前はここに filter: blur(18px) を掛けていた。全画面より一回り
大きい板（inset:-20%）を毎フレームぼかし直す＝実機で一番重かった処理で、しかも勝利演出は
リザルトの背景として数分間残るため、その間ずっと効き続けていた（実測: これを外すだけで
1フレーム 333ms→250ms＝演出前の水準に戻る）。ぼかしの代わりに、グラデーションを中心から
そのまま薄れる形にして同じやわらかさを出す（不透明度0.1・白地の上なので見分けは付かない）。 */
background:
radial-gradient(circle at 22% 32%, #ff405c 0%, transparent 46%),
radial-gradient(circle at 68% 24%, #ff8a32 0%, transparent 44%),
radial-gradient(circle at 82% 58%, #ffd84a 0%, transparent 46%),
radial-gradient(circle at 58% 78%, #42e58a 0%, transparent 44%),
radial-gradient(circle at 30% 72%, #49a8ff 0%, transparent 46%),
radial-gradient(circle at 12% 54%, #ff74c8 0%, transparent 44%),
radial-gradient(circle at 46% 46%, #a875ff 0%, transparent 48%);
animation: vic-residue-drift 9s ease-in-out infinite alternate;
}
@keyframes vic-residue-drift {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(2.5%, -2%) scale(1.06); }
}
/* VICTORY: 白い光の中に浮かび上がる勝利表示。文言は意味を断定しないものだけ。 */
#victory-celebration .vic-text {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
opacity: 0;
transform: translateY(1.2rem);
transition: opacity 520ms ease-out, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
color: #2f2a22;
text-align: center;
text-shadow: 0 0.1rem 0.6rem rgba(255, 255, 255, 0.9);
}
#victory-celebration.is-victory .vic-text { opacity: 1; transform: translateY(0); }
#victory-celebration .vic-avatar {
line-height: 1;
filter: drop-shadow(0 0.3rem 1.2rem rgba(0, 0, 0, 0.22));
}
#victory-celebration .vic-avatar img {
width: 1em;
height: 1em;
border-radius: 50%;
object-fit: cover;
}
#victory-celebration .vic-lead {
font-size: 1.5rem;
letter-spacing: 0.5em;
text-indent: 0.5em;
font-weight: 600;
opacity: 0.85;
}
#victory-celebration .vic-title {
font-size: 3.6rem;
font-weight: 800;
letter-spacing: 0.18em;
text-indent: 0.18em;
line-height: 1.05;
}
#victory-celebration .vic-name {
font-size: 1.25rem;
font-weight: 700;
opacity: 0.9;
}
/* リザルトへ渡した後、白をゆっくり引く（急な切り替えにしない）。 */
/* 【重さ対策・2026-09-06】演出が終わってリザルトの背景になった後（.is-settled）は、
白の中の七色残光を止める。全画面より一回り大きい板に七色のグラデーションを7枚重ねて
常時ゆっくり動かし続けるもので、実測でフレーム間隔が 250ms→300ms（＝この1枚だけで
2割増し）になっていた。演出中（FLASH〜VICTORY の数秒）はそのまま見せる。 */
#victory-celebration.is-settled .vic-flash::after { display: none; }
#victory-celebration.is-dismissing { transition: opacity 650ms ease-out; opacity: 0; }
@media (max-width: 760px) {
#victory-celebration .vic-lead { font-size: 1.05rem; }
#victory-celebration .vic-title { font-size: 2.4rem; }
#victory-celebration .vic-name { font-size: 1rem; }
}
#victory-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(26rem, 90vw);
padding: 2.2rem 1.5rem;
border-radius: 1rem;
background: linear-gradient(160deg, #422006, #1c1004);
border: 3px solid #facc15;
text-align: center;
z-index: 10501;
font-family: sans-serif;
color: #fff8e1;
animation: victory-modal-glow 2s ease-in-out infinite, victory-modal-pop-in 0.4s ease-out;
}
/* ユーザー要望「勝利モーダルにはアバターも大きく表示させてください」。 */
.victory-modal-avatar {
width: 8rem;
height: 8rem;
margin: 0 auto 0.8rem;
border-radius: 50%;
overflow: hidden;
border: 3px solid #facc15;
box-shadow: 0 0 1rem 0.2rem rgba(250, 204, 21, 0.6);
background: #1c1004;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
line-height: 1;
}
.victory-modal-avatar .avatar-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.victory-modal-trophy {
font-size: 4rem;
line-height: 1;
margin-bottom: 0.8rem;
filter: drop-shadow(0 0 0.6rem rgba(250, 204, 21, 0.8));
}
.victory-modal-title {
font-size: 1.5rem;
font-weight: bold;
color: #facc15;
margin-bottom: 0.5rem;
letter-spacing: 0.03em;
}
.victory-modal-subtitle {
font-size: 0.9rem;
opacity: 0.85;
}
.victory-modal-close {
background: rgba(255, 255, 255, 0.12);
}
/* ユーザー要望「勝利時ランクアップした場合に何かモーダル出したい」。post-game-panel.js
が承認後の見込みティアを楽観的に計算して呼ぶ（rank-up-modal.js参照）。 */
@keyframes rank-up-modal-pop-in {
0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
#rank-up-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(24rem, 90vw);
padding: 1.8rem 1.5rem;
border-radius: 1rem;
background: linear-gradient(160deg, #1e1b4b, #0f0a2e);
border: 2px solid #a855f7;
box-shadow: 0 0 2.5rem 0.4rem rgba(168, 85, 247, 0.5), 0 20px 60px rgba(0, 0, 0, 0.7);
text-align: center;
z-index: 10701;
font-family: sans-serif;
color: #f5f3ff;
animation: rank-up-modal-pop-in 0.4s ease-out;
}
.rank-up-modal-title {
font-size: 1.3rem;
font-weight: bold;
margin-bottom: 1.2rem;
letter-spacing: 0.03em;
}
.rank-up-modal-row {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 1rem;
}
.rank-up-modal-arrow {
font-size: 1.5rem;
color: #c4b5fd;
}
.rank-up-modal-badge {
width: 4rem;
height: 4rem;
border-radius: 50%;
border: 0.4rem solid var(--rank-up-badge-color, #facc15);
display: flex;
align-items: center;
justify-content: center;
opacity: 0.7;
}
.rank-up-modal-badge.is-large {
width: 6rem;
height: 6rem;
opacity: 1;
box-shadow: 0 0 1rem 0.2rem var(--rank-up-badge-color, #facc15);
}
.rank-up-modal-badge.is-rainbow {
border: none;
background: conic-gradient(#ef4444, #f97316, #eab308, #22c55e, #3b82f6, #6366f1, #a855f7, #ef4444);
}
.rank-up-modal-subtitle {
font-size: 0.85rem;
color: #c4b5fd;
line-height: 1.5;
}
.rank-up-modal-close {
background: rgba(255, 255, 255, 0.12);
}
/* ユーザー要望（続き87）「勝利時にお金を獲得した演出モーダルが欲しい」。
victory.jsのcheckForVictory()から、勝利モーダルが閉じた後に出す。 */
@keyframes currency-award-modal-pop-in {
0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes currency-award-modal-coin-bounce {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-0.4rem) rotate(-8deg); }
}
#currency-award-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(20rem, 88vw);
padding: 1.8rem 1.5rem;
border-radius: 1rem;
background: linear-gradient(160deg, #14532d, #052e16);
border: 2px solid #4ade80;
box-shadow: 0 0 2.5rem 0.4rem rgba(74, 222, 128, 0.5), 0 20px 60px rgba(0, 0, 0, 0.7);
text-align: center;
z-index: 10520;
font-family: sans-serif;
color: #f0fdf4;
animation: currency-award-modal-pop-in 0.4s ease-out;
}
.currency-award-modal-coin {
font-size: 3.4rem;
line-height: 1;
margin-bottom: 0.6rem;
animation: currency-award-modal-coin-bounce 1s ease-in-out infinite;
}
.currency-award-modal-title {
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 0.4rem;
letter-spacing: 0.03em;
color: #86efac;
}
.currency-award-modal-amount {
font-size: 2.2rem;
font-weight: bold;
color: #facc15;
}
/* ユーザー要望（続き87）「勝利後、自分の順位を表示させたい。最下位から順位が
上がっていき、自分の順位のところで自分が強調されている感じがいい」。
通貨獲得モーダルが閉じた後に出す（rank-reveal-modal.js参照）。 */
@keyframes rank-reveal-modal-pop-in {
0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes rank-reveal-modal-settle-glow {
0% { text-shadow: none; }
100% { text-shadow: 0 0 0.8rem rgba(250, 204, 21, 0.9); }
}
#rank-reveal-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(22rem, 88vw);
padding: 1.8rem 1.5rem;
border-radius: 1rem;
background: linear-gradient(160deg, #0c4a6e, #082f49);
border: 2px solid #38bdf8;
box-shadow: 0 0 2.5rem 0.4rem rgba(56, 189, 248, 0.5), 0 20px 60px rgba(0, 0, 0, 0.7);
text-align: center;
z-index: 10530;
font-family: sans-serif;
color: #f0f9ff;
animation: rank-reveal-modal-pop-in 0.4s ease-out;
}
.rank-reveal-modal-title {
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 0.8rem;
letter-spacing: 0.03em;
color: #7dd3fc;
}
/* 対戦終了後のランキング演出（ユーザー要望「アバターと名前が連なる一覧を最下位から登っていく」）。
一覧をスクロール可能にし、ハイライトが下から自分の行まで上がっていく。 */
#rank-reveal-modal.is-climb {
width: min(30rem, 92vw);
}
.rank-reveal-climb-list {
max-height: 55vh;
overflow-y: auto;
text-align: left;
margin: 0.4rem 0 0.6rem;
scroll-behavior: smooth;
}
.rank-reveal-climb-row {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.35rem 0.5rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 0.4rem;
font-size: 0.9rem;
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.rank-reveal-climb-row .rr-rank {
color: #7dd3fc;
font-weight: bold;
min-width: 2.2rem;
text-align: right;
font-variant-numeric: tabular-nums;
}
.rank-reveal-climb-row .rr-avatar {
width: 1.9rem;
height: 1.9rem;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
}
.rank-reveal-climb-row .rr-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rank-reveal-climb-row .rr-val {
color: #bae6fd;
font-variant-numeric: tabular-nums;
}
/* 登っていく途中でフォーカスされている行（一時的な明滅）。 */
.rank-reveal-climb-row.is-climb-focus {
background: rgba(56, 189, 248, 0.22);
box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.6) inset;
}
/* 自分の行（到達前は控えめにマーク）。 */
.rank-reveal-climb-row.is-self .rr-name {
font-weight: bold;
color: #fde68a;
}
/* 到達＝自分の順位。強く光らせて脈動させる。 */
.rank-reveal-climb-row.is-arrived {
background: rgba(250, 204, 21, 0.22);
box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.85) inset, 0 0 1rem rgba(250, 204, 21, 0.4);
animation: rank-reveal-arrived-pulse 1.4s ease-in-out infinite;
}
@keyframes rank-reveal-arrived-pulse {
0%,
100% {
box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.85) inset, 0 0 0.6rem rgba(250, 204, 21, 0.3);
}
50% {
box-shadow: 0 0 0 1px rgba(250, 204, 21, 1) inset, 0 0 1.4rem rgba(250, 204, 21, 0.6);
}
}
@media (prefers-reduced-motion: reduce) {
.rank-reveal-climb-list {
scroll-behavior: auto;
}
.rank-reveal-climb-row.is-arrived {
animation: none;
}
}
/* 未ランクイン時：勝率ランキング一覧＋理由説明＋ログイン導線（showNotRankedModal）。 */
#rank-reveal-modal.is-not-ranked {
text-align: left;
width: min(24rem, 90vw);
}
.rank-reveal-leaderboard {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin: 0.2rem 0 0.8rem;
max-height: 38vh;
overflow-y: auto;
}
.rank-reveal-leaderboard-row {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.5rem;
border-radius: 0.4rem;
background: rgba(255, 255, 255, 0.05);
font-size: 0.85rem;
}
.rank-reveal-leaderboard-row .rr-rank { color: #7dd3fc; font-weight: bold; min-width: 2.6rem; }
.rank-reveal-leaderboard-row .rr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-reveal-leaderboard-row .rr-val { color: #bae6fd; font-variant-numeric: tabular-nums; }
.rank-reveal-leaderboard-empty { font-size: 0.85rem; color: #bae6fd; text-align: center; padding: 0.8rem 0; }
.rank-reveal-not-ranked-note {
font-size: 0.85rem;
line-height: 1.6;
color: #e0f2fe;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(56, 189, 248, 0.35);
border-radius: 0.5rem;
padding: 0.6rem 0.7rem;
}
.rank-reveal-cta-btn {
display: block;
width: 100%;
margin-top: 0.7rem;
padding: 0.6rem 1rem;
border: none;
border-radius: 0.6rem;
cursor: pointer;
font-family: sans-serif;
font-size: 0.95rem;
font-weight: bold;
background: linear-gradient(160deg, #38bdf8, #0ea5e9);
color: #082f49;
}
.rank-reveal-cta-btn:hover { filter: brightness(1.08); }
.rank-reveal-modal-number {
font-size: 2.6rem;
font-weight: bold;
color: #f0f9ff;
font-variant-numeric: tabular-nums;
}
.rank-reveal-modal-number.is-settled {
color: #facc15;
animation: rank-reveal-modal-settle-glow 0.6s ease-out forwards;
}
.rank-reveal-modal-delta {
margin-top: 0.6rem;
font-size: 1rem;
font-weight: bold;
min-height: 1.4rem;
color: #cbd5e1;
}
.rank-reveal-modal-delta.is-up {
color: #4ade80;
}
.rank-reveal-modal-delta.is-down {
color: #f87171;
}
/* ユーザー要望（続き95）「対戦終了時の個人結果を実装」。match-personal-result-modal.js、
システム順位モーダル(rank-reveal-modal)の後・戦績パネルの前に出す。 */
@keyframes match-personal-result-modal-pop-in {
0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
#match-personal-result-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(24rem, 90vw);
max-height: 85vh;
overflow-y: auto;
padding: 1.6rem 1.4rem;
border-radius: 1rem;
background: linear-gradient(160deg, #4c1d95, #1e1b4b);
border: 2px solid #a78bfa;
box-shadow: 0 0 2.5rem 0.4rem rgba(167, 139, 250, 0.5), 0 20px 60px rgba(0, 0, 0, 0.7);
text-align: center;
z-index: 10531;
font-family: sans-serif;
color: #f5f3ff;
animation: match-personal-result-modal-pop-in 0.4s ease-out;
box-sizing: border-box;
}
.match-personal-result-title {
font-size: 1.15rem;
font-weight: bold;
margin-bottom: 0.9rem;
letter-spacing: 0.03em;
color: #c4b5fd;
}
.match-personal-result-standings {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-bottom: 1rem;
}
.match-personal-result-row {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.4rem 0.6rem;
border-radius: 0.5rem;
background: rgba(255, 255, 255, 0.06);
text-align: left;
}
.match-personal-result-row.is-self {
background: rgba(167, 139, 250, 0.28);
border: 1px solid #c4b5fd;
}
.match-personal-result-rank {
font-weight: bold;
font-variant-numeric: tabular-nums;
min-width: 2.2rem;
color: #ddd6fe;
}
.match-personal-result-row.is-winner .match-personal-result-rank {
color: #facc15;
}
.match-personal-result-avatar {
width: 2rem;
height: 2rem;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.match-personal-result-avatar .avatar-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.match-personal-result-name {
flex: 1;
font-size: 0.9rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.match-personal-result-locked {
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
color: #ddd6fe;
}
.match-personal-result-self {
padding-top: 0.8rem;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.match-personal-result-self-title {
font-size: 0.85rem;
color: #c4b5fd;
margin-bottom: 0.3rem;
}
.match-personal-result-self-stats {
font-size: 1.05rem;
font-weight: bold;
}
.match-personal-result-self-stats-sub {
font-size: 0.85rem;
color: #ddd6fe;
margin-top: 0.3rem;
}
/* MVPカード（全体・自分、対戦終了時の個人結果モーダル）。 */
.match-personal-result-mvp {
padding-top: 0.8rem;
margin-top: 0.8rem;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.match-personal-result-mvp-row {
display: flex;
justify-content: center;
gap: 1.4rem;
margin-top: 0.4rem;
}
.match-personal-result-mvp-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
}
.match-personal-result-mvp-label {
font-size: 0.8rem;
color: #fbbf24;
font-weight: bold;
}
.match-personal-result-mvp-card {
position: relative;
width: 6rem;
aspect-ratio: 1 / 1;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 0.4rem;
box-shadow: 0 0.3rem 0.9rem rgba(0, 0, 0, 0.5);
}
.match-personal-result-mvp-name {
font-size: 0.8rem;
text-align: center;
max-width: 8rem;
line-height: 1.4;
}
/* ターンごとのロック枚数の折れ線グラフ（対戦終了時の個人結果モーダル）。 */
.match-personal-result-chart {
padding-top: 0.8rem;
margin-top: 0.8rem;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.match-lock-chart-wrap {
margin-top: 0.4rem;
}
.match-lock-chart {
width: 100%;
height: auto;
display: block;
}
.match-lock-chart-legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.3rem 0.9rem;
margin-top: 0.4rem;
font-size: 0.8rem;
}
.match-lock-chart-legend-item {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.match-lock-chart-legend-dot {
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
display: inline-block;
}
/* 効果音ごとの音量（0〜100）。src/sound.jsがオプションメニューの「マスター音量」と
掛け算して最終的な再生音量にする。管理者モードの「効果音の音量（個別）」グループから
調整できる。 */
:root {
--sound-volume-hand-shuffle: 80;
--sound-volume-deck-shuffle: 80;
--sound-volume-card-flip: 80;
--sound-volume-card-place: 80;
--sound-volume-card-draw: 80;
--sound-volume-arrival-effect: 80;
--sound-volume-lock: 80;
}
/* プレイヤーDのロックエリア(.lock-right)は7色スロットの並び順を正すため祖先自体に
180度回転を掛けている。柱状バースト・ロックスタンプはどの辺でも常に画面の「上方向」に
伸びる向きで作られているため、そのままだとD側だけ上下逆さまに表示されてしまう。
main.jsのappendEffectHost()が、.lock-rightの子孫にだけこの入れ子（180度回転）を
挟んで祖先の回転を打ち消す（中身は中心基準の配置・アニメーションのため、入れ子を
挟んでも見た目の位置はズレない）。 */
.effect-side-flip {
position: absolute;
inset: 0;
pointer-events: none;
transform: rotate(180deg);
}
/* 駒がカードに到達した瞬間、そのマス/ロックスロット自体がカードの色で発光する演出
（main.jsのtriggerCardArrival参照。.cell/.lock-slotは元からposition:relativeなので、
このposition:absoluteな子要素はそのマスを基準に配置される）。カードの外枠(.arrival-effect-frame)
が縁取りとして光り、そこから複数の柱(.arrival-effect-flame、太さ・タイミングをずらして
3本重ねることで1本より厚みのある「オーラ」らしい揺らめきを出す)が立ち上り、根本に光の輪
(.arrival-effect-ring)が広がる、という3層構成。アニメーション終了後はJS側がsetTimeoutで
要素ごと消す（使い捨てのワンショット演出）。 */
.arrival-effect-burst {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 30;
}
/* カードの外枠自体が発光源になっているように見せる縁取り（「カードの枠から立ち上る」印象を
柱の演出より先に作る）。 */
.arrival-effect-frame {
position: absolute;
inset: -8%;
border: 0.2rem solid var(--arrival-effect-color);
border-radius: 0.3rem;
box-shadow:
0 0 0.5rem 0.15rem var(--arrival-effect-color),
0 0 1.4rem 0.5rem var(--arrival-effect-color),
inset 0 0 0.9rem 0.3rem var(--arrival-effect-color);
opacity: 0;
animation: arrival-frame-glow 1.3s ease-out forwards;
}
/* 柱本体。base(80%幅)・mid(55%幅)・core(32%幅、遅れて立ち上る芯)の3本を重ね、
mix-blend-mode:screenで色を飽和させすぎずに濃く見せる。 */
.arrival-effect-flame {
position: absolute;
left: 50%;
bottom: 45%;
width: 80%;
height: 320%;
transform-origin: bottom center;
background: linear-gradient(
to top,
var(--arrival-effect-color) 0%,
color-mix(in srgb, var(--arrival-effect-color) 80%, transparent) 32%,
color-mix(in srgb, var(--arrival-effect-color) 40%, transparent) 62%,
transparent 100%
);
border-radius: 50% 50% 0 0 / 16% 16% 0 0;
filter: blur(0.15rem);
mix-blend-mode: screen;
opacity: 0;
animation: arrival-pillar-rise 1.3s cubic-bezier(0.15, 0.7, 0.25, 1) forwards;
}
.arrival-effect-flame-mid {
width: 55%;
animation-delay: 0.08s;
animation-duration: 1.15s;
}
.arrival-effect-flame-core {
width: 32%;
filter: blur(0.05rem);
animation-delay: 0.15s;
animation-duration: 1s;
}
.arrival-effect-ring {
position: absolute;
left: 50%;
top: 50%;
width: 55%;
height: 55%;
transform: translate(-50%, -50%) scale(0);
border-radius: 50%;
background: radial-gradient(
circle,
var(--arrival-effect-color) 0%,
color-mix(in srgb, var(--arrival-effect-color) 45%, transparent) 45%,
transparent 75%
);
opacity: 0;
animation: arrival-burst-ring 0.9s ease-out forwards;
}
/* 虹（なないろの欠片）カードの到達演出だけ、柱・光の輪を単色ではなく虹色にする。
border-color/box-shadow/color-mix()はグラデーションを受け付けないため、
--arrival-effect-colorをそのまま使う通常ルールでは虹を表現できない。
spawnArrivalBurst()がcolor==="rainbow"の時だけこのクラスを付け、柱・光の輪の
background/枠線だけをここで個別に上書きする（transform/opacityのアニメーションは
通常ルールと共通のまま）。 */
.arrival-effect-burst.is-rainbow .arrival-effect-frame {
border-color: transparent;
border-image: linear-gradient(90deg, #c70025, #ee781f, #fabe00, #22ac38, #1bb8ce, #f19ec2, #915da3) 1;
box-shadow:
0 0 0.5rem 0.15rem rgba(255, 255, 255, 0.55),
0 0 1.4rem 0.5rem rgba(255, 255, 255, 0.35);
}
.arrival-effect-burst.is-rainbow .arrival-effect-flame {
background: linear-gradient(
to top,
#c70025 0%,
#ee781f 14%,
#fabe00 28%,
#22ac38 42%,
#1bb8ce 57%,
#f19ec2 71%,
#915da3 85%,
transparent 100%
);
}
.arrival-effect-burst.is-rainbow .arrival-effect-ring {
background: conic-gradient(#c70025, #ee781f, #fabe00, #22ac38, #1bb8ce, #f19ec2, #915da3, #c70025);
}
@keyframes arrival-frame-glow {
0% {
opacity: 0;
}
18% {
opacity: 1;
}
65% {
opacity: 0.7;
}
100% {
opacity: 0;
}
}
/* rise(縦に伸びる)・widen(横に太くなる)・flicker(左右にわずかに揺れる)を1つの
transformにまとめて焼き込む。別々の@keyframesを同じtransformプロパティに重ねがけ
することはできない（後勝ちで上書きされる）ため、この形にしている。 */
@keyframes arrival-pillar-rise {
0% {
transform: translateX(-50%) scaleY(0) scaleX(0.5);
opacity: 0;
}
12% {
opacity: 1;
}
30% {
transform: translateX(-53%) scaleY(0.5) scaleX(0.8);
}
45% {
transform: translateX(-47%) scaleY(0.75) scaleX(1);
}
60% {
transform: translateX(-51%) scaleY(0.95) scaleX(1.2);
opacity: 1;
}
80% {
transform: translateX(-49%) scaleY(1.05) scaleX(1.4);
opacity: 0.8;
}
100% {
transform: translateX(-50%) scaleY(1.1) scaleX(1.55);
opacity: 0;
}
}
@keyframes arrival-burst-ring {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0.95;
}
60% {
transform: translate(-50%, -50%) scale(2.6);
opacity: 0.6;
}
100% {
transform: translate(-50%, -50%) scale(3.6);
opacity: 0;
}
}
/* エターナルカード獲得演出（ユーザー要望「ゲート侵攻によりエターナルカードを手に入れる
ときの演出を取り入れたい」、main.jsのplayEternalAcquisitionAnim参照）。画面中央固定の
カード1枚を、裏向き待機(is-suspense、虹色の縁取りが脈打つ)→3Dフリップ(is-flipped)→
表向きで色付きに脈打つ(is-revealed)、と切り替えていく。flyGhostの.setup-fly-cardと
違い、こちらは「止まって見せる」区間を持つため専用のクラスにしてある。 */
/* ザ・ギャンブル成功／試練の儀式「〇回成功！」のお祝い演出（案A: 紙吹雪＋大きな見出し）。
ユーザー要望2026-08-07。tone-success=紙吹雪あり、tone-fail=控えめ。 */
.result-celebration {
position: fixed;
inset: 0;
z-index: 10650;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease;
}
.result-celebration.show {
opacity: 1;
}
.result-celebration-card {
text-align: center;
transform: scale(0.6);
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
padding: 1.2rem 2rem;
}
.result-celebration.show .result-celebration-card {
transform: scale(1);
}
.result-celebration-headline {
font-family: "Arial Black", sans-serif;
font-weight: 900;
font-size: clamp(2.4rem, 9vw, 5rem);
letter-spacing: 0.02em;
color: #fde68a;
text-shadow: 0 2px 0 #b45309, 0 0 1.4rem rgba(251, 191, 36, 0.9), 0 6px 18px rgba(0, 0, 0, 0.6);
animation: celebration-pop 0.6s ease-out;
}
.result-celebration.tone-fail .result-celebration-headline {
color: #cbd5e1;
text-shadow: 0 2px 0 #334155, 0 6px 18px rgba(0, 0, 0, 0.6);
font-size: clamp(1.8rem, 6vw, 3.2rem);
}
.result-celebration-sub {
margin-top: 0.8rem;
font-family: sans-serif;
font-size: clamp(0.9rem, 2.4vw, 1.15rem);
font-weight: bold;
color: #f1f5f9;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
@keyframes celebration-pop {
0% { transform: scale(0.5); }
60% { transform: scale(1.12); }
100% { transform: scale(1); }
}
.result-celebration-confetti {
position: absolute;
inset: 0;
overflow: hidden;
}
.result-celebration-confetti i {
position: absolute;
top: -8%;
width: 0.6rem;
height: 1rem;
border-radius: 1px;
opacity: 0.95;
animation-name: confetti-fall;
animation-timing-function: ease-in;
animation-iteration-count: 1;
}
@keyframes confetti-fall {
0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(112vh) translateX(var(--drift, 0)) rotate(var(--rot, 360deg)); opacity: 0.9; }
}
body.reduce-glow .result-celebration-confetti i,
body.reduce-glow .result-celebration-headline {
animation: none;
}
/* マスチェンジの入れ替え演出（ユーザー要望2026-08-08: 発光＋不安定な電撃で結ばれて入れ替わる）。 */
:root {
--swap-anim-charge-duration: 0.8; /* 発光＋電撃の“溜め”（秒） */
--swap-anim-flight-duration: 0.6; /* 入れ替え飛翔（秒） */
}
.piece-swap-glow {
filter: drop-shadow(0 0 0.35rem #fb923c) drop-shadow(0 0 0.8rem #fdba74);
animation: piece-swap-glow-pulse 0.5s ease-in-out infinite alternate;
}
@keyframes piece-swap-glow-pulse {
from {
filter: drop-shadow(0 0 0.25rem #f97316) drop-shadow(0 0 0.5rem #fdba74);
}
to {
filter: drop-shadow(0 0 0.6rem #fb923c) drop-shadow(0 0 1.2rem #fed7aa);
}
}
/* ユーザー要望2026-08-08: 鋭い実線の電撃ではなく「ぼやけた湯気のようなオーラの電撃」に。
芯(bolt)も白ではなく暖色にしてぼかし、外側にglow・auraの2層のにじみを重ねて霞ませる。 */
.swap-arc-bolt {
fill: none;
stroke: #fed7aa; /* 芯も白ではなく淡い橙にして柔らかく */
stroke-width: 6;
stroke-linejoin: round;
stroke-linecap: round;
opacity: 0.85;
filter: blur(2.5px) drop-shadow(0 0 6px #fb923c) drop-shadow(0 0 12px #f97316);
}
.swap-arc-bolt-glow {
stroke: #f97316;
stroke-width: 22;
opacity: 0.3;
filter: blur(9px);
}
/* いちばん外側の、広くぼかした“湯気のようなオーラ” */
.swap-arc-bolt-aura {
stroke: #fdba74;
stroke-width: 40;
opacity: 0.18;
filter: blur(18px);
}
body.reduce-glow .piece-swap-glow {
animation: none;
}
.eternal-reveal-card {
position: fixed;
z-index: 9999;
pointer-events: none;
}
/* スマホの一部ブラウザでrotateY＋backface-visibility＋preserve-3dのフリップが効かず
「裏向きのまま」になる報告への対応で、3Dを使わず横スケール(scaleX)＋絵の差し替えで
反転する方式に変更（JS側 playEternalAcquisitionAnim 参照）。transform-originを中央に
して、横幅が中央から0へつぶれて戻るようにする。 */
.eternal-reveal-card-inner {
position: relative;
width: 100%;
height: 100%;
transform-origin: center center;
}
.eternal-reveal-card-face {
position: absolute;
inset: 0;
/* カードは正方形で reveal も正方形なので cover でも切れないが、万一枠と絵の比率が
ずれても上下左右が絶対に切れないよう contain にする（ユーザー報告: フリップ時に上下が
見切れる、への保険）。 */
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border-radius: 0.5rem;
box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.6);
}
.eternal-reveal-card.is-suspense::before {
content: "";
position: absolute;
inset: -0.5rem;
border-radius: 0.8rem;
background: conic-gradient(#c70025, #ee781f, #fabe00, #22ac38, #1bb8ce, #f19ec2, #915da3, #c70025);
filter: blur(0.7rem);
z-index: -1;
animation: eternal-rainbow-shimmer 1.1s linear infinite;
}
@keyframes eternal-rainbow-shimmer {
0% {
filter: blur(0.7rem) hue-rotate(0deg);
}
100% {
filter: blur(0.7rem) hue-rotate(360deg);
}
}
.eternal-reveal-card.is-bursting::after {
content: "";
position: absolute;
inset: -1.5rem;
border-radius: 50%;
background: radial-gradient(circle, var(--eternal-reveal-color, #fff) 0%, transparent 70%);
opacity: 0.9;
animation: eternal-burst-pulse 0.5s ease-out;
}
@keyframes eternal-burst-pulse {
0% {
transform: scale(0.4);
opacity: 1;
}
100% {
transform: scale(1.6);
opacity: 0;
}
}
/* ハマりどころ（ユーザー報告「エターナル獲得でフリップ後に一瞬裏向き＝2回フリップに見える」）:
glowをpreserve-3dの.eternal-reveal-card-innerにfilterで掛けていたが、filterはpreserve-3dを
フラット化する（このプロジェクトの駒立方体“ぺっちゃんこ”と同じCSSの罠）。その結果フリップ直後に
backface-visibilityの効きが崩れ、裏面が一瞬見えて「もう一度フリップした」ように見えていた。
3Dに触れないよう、フラットな表面(.is-front)へbox-shadowでglowを掛ける。 */
.eternal-reveal-card.is-revealed .eternal-reveal-card-face.is-front {
animation: eternal-color-pulse 1.1s ease-in-out infinite;
}
@keyframes eternal-color-pulse {
0%,
100% {
box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.6), 0 0 1rem var(--eternal-reveal-color, #fff);
}
50% {
box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.6), 0 0 2.4rem var(--eternal-reveal-color, #fff);
}
}
/* クイックスタート: 画面右上（山札一覧/セットアップ/オプションの下）に常設する、
「無色あり/なし」の切り替えと「2人/3人/4人」のボタン。押すだけでセットアップ
ウィザードの０〜３を一気に実行する（quick-start.js参照）。 */
#quick-start-bar {
position: fixed;
top: 9rem;
right: 1rem;
z-index: 900;
display: flex;
flex-direction: column;
gap: 0.3rem;
align-items: flex-end;
}
.quick-start-toggle,
.quick-start-counts {
display: flex;
gap: 0.2rem;
}
.quick-start-toggle button,
.quick-start-counts button {
padding: 0.3rem 0.55rem;
background: rgba(15, 23, 32, 0.85);
color: #e2e8f0;
border: 1px solid rgba(148, 163, 184, 0.4);
border-radius: 0.4rem;
cursor: pointer;
font-family: sans-serif;
font-size: 0.7rem;
white-space: nowrap;
}
.quick-start-toggle button:hover,
.quick-start-counts button:hover {
background: rgba(56, 189, 248, 0.2);
}
.quick-start-toggle button.is-selected {
background: rgba(56, 189, 248, 0.35);
border-color: #7dd3fc;
font-weight: bold;
}
.quick-start-counts button {
background: rgba(8, 145, 178, 0.25);
}
.quick-start-counts button:hover {
background: rgba(8, 145, 178, 0.45);
}
/* オンライン対戦（第一弾・最小構成）中は、まだサーバー側にポートしていないアクション
（セットアップウィザードの個別ステップ・クイックスタート）へ繋がるボタンを丸ごと隠す。
main.jsのrender()がisOnlineMode()に応じてbody.is-online-modeを付け外しするだけで
済むよう、CSS側でまとめて隠す。手札シャッフルはSHUFFLE_HANDアクションをso7-apply-action
Edge Function側にもポートしたため、ここでは隠さない（state.js/shuffleHand参照）。 */
body.is-online-mode #game-setup-toggle-button,
body.is-online-mode #quick-start-bar {
display: none;
}
/* CPU戦（1人用）の間は、右上の「🎲 セットアップ」ウィザードのボタン／パネル／人数バーを
隠す（ユーザー要望2026-08-07: CPU対戦時は不要）。パネルのボタンはopen/closeでinlineの
displayを付け外しするため、!importantでCSSを優先させる。cpu-battle.jsがbodyに
cpu-battle-modeクラスを付ける。 */
body.cpu-battle-mode #game-setup-toggle-button,
body.cpu-battle-mode #game-setup-panel,
body.cpu-battle-mode #quick-start-bar {
display: none !important;
}
/* セットアップアニメーション（src/setup-animation.js）: ファーストカード配布・盤面への
カード配置を、山/ファーストカードの位置から各マス/ロックスロットへ飛んでいく演出で見せる。 */
/* 配られる最中はまだ場の実物要素を隠しておき、ゴーストが届いた瞬間に表示に切り替える。
.board-cardと.pieceの両方に使うため、共通のopacity/transformプロパティだけを扱う。 */
.is-setup-pending {
opacity: 0;
}
.piece.is-setup-pending {
transform: scale(0.2);
}
/* 通常時のtransition。is-setup-pendingが外れた瞬間にこのtransitionで滑らかに現れる
（駒はcubic-bezierのオーバーシュートで「ぶわーん」というポップ感を出す）。
ハマりどころ（ユーザー報告、タブレット）: セットアップ配布時、is-setup-pendingが外れて
opacity:0→1へtransitionする瞬間、深いpreserve-3d階層の中のこのカードが一瞬プレイマットの
下に回り込んで見える（アニメーション終了後は正しく最前面に戻る）ことがあった。一旦
will-change: opacityを試したが、同じ発想で.pieceに適用した際に実機PCで駒自体が
描画されなくなる重大な副作用が判明したため、こちらも安全のため撤去した（.board-cardは
preserve-3dの子要素を持たない平面要素で.pieceほどのリスクは無いはずだが、確認する
手段が無い以上は同じ性質の対策を残さない判断とした）。この表示崩れ自体への対策は
持ち越しとなる。 */
.board-card {
transition: opacity 0.2s ease-out;
}
.piece {
transition:
opacity 0.3s ease-out,
transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ファーストカードの山・山札からマス/ロックスロットへ飛んでいく途中のゴースト。
ドラッグ中のゴースト(.drag-ghost)と同じくdocument.body直下、3D空間の外に浮かべる。 */
/* 駒の移動の飛翔ゴースト。カードと同じ仕組み（.setup-fly-card）を使うが、駒のスキン画像は
正方形なので、カードのように上下が切れる心配はない。 */
.setup-fly-piece {
position: fixed;
left: 0;
top: 0;
z-index: 9998;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
filter: drop-shadow(0 0.2rem 0.3rem rgba(0, 0, 0, 0.45));
}
/* 【ユーザー要望2026-09-05】駒の移動を「立体のまま跳ねて動く」ようにする（.setup-fly-piece の
平たい1枚絵に代わるもの）。役割を3枚に分けているのが要点:
.piece-hop-ghost … 横の移動だけ（transition で A地点→B地点）
.piece-hop-lift … 上下の跳ねと潰れ（squash & stretch）だけ（CSSアニメ）
.piece-hop-inner … 盤面と同じ傾き（rotateX）。中に本物の .piece（立方体）が入る
横と縦を別の要素に分けると、それぞれ別のイージングをかけられるので素直な放物線になる。 */
.piece-hop-ghost {
position: fixed;
left: 0;
top: 0;
perspective: var(--camera-perspective);
pointer-events: none;
z-index: 9998;
will-change: transform;
}
.piece-hop-lift {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform-origin: 50% 100%; /* 足元を軸に潰れる（浮き上がって見えないように） */
/* 【ユーザー報告2026-09-05】アニメは .is-animating を付けてから始める。0%が squash
（scale(1.12, 0.85)）なので、付けたまま置くと**大きさを測る前に横へ1.12倍された値**を
測ってしまう（main.js の playPieceHopGhost が実物と大きさを揃えるために測っている）。 */
animation-timing-function: linear; /* 緩急はキーフレームの配置側で作る */
animation-fill-mode: both;
}
.piece-hop-lift.is-animating {
animation-name: piece-hop-lift;
}
.piece-hop-inner {
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
/* 【ユーザー要望2026-09-05】「移動方向に前方を持ち上げて、よっこいしょって感じ」。
進行方向を +X に合わせる(.piece-hop-yaw) → その辺を持ち上げる(.piece-hop-pitch) →
向きを戻す(.piece-hop-yaw) の3枚重ね。立方体そのものは回さない（面ごとの陰影が固定なので、
回すと暗い面が正面に来て光の向きが破綻するため）。 */
.piece-hop-yaw,
.piece-hop-pitch {
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.piece-hop-pitch.is-leaning {
animation-name: piece-hop-lean;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}
@keyframes piece-hop-lean {
0% {
transform: rotateY(0deg);
}
22% {
transform: rotateY(calc(var(--piece-hop-lean, 16deg) * -1));
}
62% {
transform: rotateY(calc(var(--piece-hop-lean, 16deg) * -0.7));
}
90% {
transform: rotateY(calc(var(--piece-hop-lean, 16deg) * 0.35));
}
100% {
transform: rotateY(0deg);
}
}
/* ワープ（紫のキューブ ディメンションの移動）。跳ばずに、その場で縦に伸びて消え、
移動先で戻る。位置の瞬間移動はJS側（消えている一瞬で行う）。 */
.piece-hop-lift.is-warp.is-animating {
animation-name: piece-warp-lift;
animation-timing-function: ease-in-out;
}
@keyframes piece-warp-lift {
0% {
transform: scale3d(1, 1, 1);
opacity: 1;
}
30% {
transform: scale3d(0.55, 1.7, 0.55);
opacity: 0.55;
}
46%, 54% {
transform: scale3d(0.06, 2.3, 0.06);
opacity: 0;
}
70% {
transform: scale3d(0.55, 1.7, 0.55);
opacity: 0.55;
}
88% {
transform: scale3d(1.12, 0.86, 1.12);
opacity: 1;
}
100% {
transform: scale3d(1, 1, 1);
opacity: 1;
}
}
/* 通り道に残る光の軌跡（連続移動で道になる）。左端(0 50%)を起点に回転させて置く。 */
.piece-move-trail {
position: fixed;
left: 0;
top: 0;
pointer-events: none;
z-index: 9996;
border-radius: 999px;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
var(--trail-color, #ffffff) 22%,
var(--trail-color, #ffffff) 78%,
rgba(255, 255, 255, 0) 100%
);
filter: blur(1.5px);
animation-name: piece-move-trail;
animation-timing-function: ease-out;
animation-fill-mode: both;
}
@keyframes piece-move-trail {
0% {
opacity: 0;
}
18% {
opacity: var(--trail-peak, 0.4);
}
100% {
opacity: 0;
}
}
@keyframes piece-hop-lift {
0% {
transform: translateY(0) scale(1.12, 0.85);
}
14% {
transform: translateY(calc(var(--piece-hop-height, 2rem) * -0.55)) scale(0.94, 1.1);
}
46% {
transform: translateY(calc(var(--piece-hop-height, 2rem) * -1)) scale(1, 1);
}
80% {
transform: translateY(calc(var(--piece-hop-height, 2rem) * -0.45)) scale(0.97, 1.05);
}
93% {
transform: translateY(0) scale(1.16, 0.82);
}
100% {
transform: translateY(0) scale(1, 1);
}
}
/* 盤面に落ちる影。浮いている間だけ薄くぼやける（高さが伝わる）。移動そのものは
transition（JS側）で駒と一緒に動かすので、ここでは transform を触らない
——同じプロパティをアニメとトランジションの両方で動かすと取り合いになるため。 */
.piece-hop-shadow {
position: fixed;
left: 0;
top: 0;
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 72%);
pointer-events: none;
z-index: 9997;
}
.piece-hop-shadow.is-flying {
animation-name: piece-hop-shadow;
animation-timing-function: linear;
animation-fill-mode: both;
}
@keyframes piece-hop-shadow {
0% {
opacity: 0.6;
filter: blur(0.5px);
}
46% {
opacity: 0.22;
filter: blur(2.5px);
}
100% {
opacity: 0.6;
filter: blur(0.5px);
}
}
/* 着地の衝撃。マス（3D変形の中）の子なので、輪は盤面に寝た状態で広がる。 */
.piece-land-ring {
position: absolute;
left: 50%;
top: 50%;
width: 70%;
height: 70%;
border: 0.12rem solid var(--land-ring-color, #fff);
border-radius: 50%;
pointer-events: none;
animation: piece-land-ring 0.42s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes piece-land-ring {
0% {
transform: translate(-50%, -50%) scale(0.25);
opacity: 0.9;
}
100% {
transform: translate(-50%, -50%) scale(1.6);
opacity: 0;
}
}
.setup-fly-card {
position: fixed;
left: 0;
top: 0;
z-index: 9998;
border-radius: 0.3rem;
/* カード画像は正方形。飛翔ゴーストのサイズは飛び元の要素（ロックスロット/マス等、
必ずしも正方形でない）に合わせるため、cover だと縦長の時にカード上下が切れていた
（ユーザー報告「手札に入る時などのアニメでカードの上下が切れる」）。contain にして
カード全体が必ず収まるようにする。 */
background-size: contain;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}
/* ③演出（ユーザー要望2026-08-18）: カード配置/回収の「着地の風/ホコリ」。document.body直下・
ステージのtransform下に置くゴースト(.setup-fly-card)と同じ層。位置は外側(.card-landing-puff)の
inline transformで、拡大＋フェードは内側(.card-landing-puff-inner)のアニメで——同じtransformを
2箇所から操作すると後勝ちで壊れる（既存の教訓）ため役割を分ける。 */
.card-landing-puff {
position: fixed;
left: 0;
top: 0;
z-index: 9997; /* 飛翔ゴースト(.setup-fly-card=9998)のすぐ下 */
pointer-events: none;
}
.card-landing-puff-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(245, 240, 225, 0) 40%,
rgba(245, 240, 225, 0.5) 52%,
rgba(245, 240, 225, 0.12) 64%,
rgba(245, 240, 225, 0) 74%
);
animation: card-landing-puff-kf 480ms ease-out forwards;
will-change: transform, opacity;
}
@keyframes card-landing-puff-kf {
0% {
transform: scale(0.35);
opacity: 0.9;
}
60% {
opacity: 0.6;
}
100% {
transform: scale(1.3);
opacity: 0;
}
}
/* 続き216（ユーザー要望2026-08-18）: 手札の使用が決定した時、画面中央にカードを拡大表示し、
その色のオーラ(--burn-color)を纏いつつ、下から燃えて「燃えカス(embers)」になって崩れ消える演出。
document.body直下・pointer-events:noneで下の盤面操作は妨げない。演出のあとに右の使用モーダル。 */
.hand-effect-burn-overlay {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 10660;
--burn-color: #f6c945;
}
.hand-effect-burn-aura {
position: absolute;
width: 34rem;
height: 34rem;
border-radius: 50%;
background: radial-gradient(
circle,
var(--burn-color) 0%,
color-mix(in srgb, var(--burn-color) 45%, transparent) 30%,
transparent 66%
);
filter: blur(2.6rem);
mix-blend-mode: screen;
opacity: 0;
animation: hand-effect-burn-aura-kf calc(var(--hand-burn-duration, 2.6) * 1s) ease-out forwards;
}
.hand-effect-burn-stage {
position: relative;
width: var(--hand-burn-card-size, 17rem);
height: var(--hand-burn-card-size, 17rem);
}
.hand-effect-burn-card {
position: absolute;
inset: 0;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border-radius: 0.6rem;
transform-origin: center;
animation: hand-effect-burn-card-kf calc(var(--hand-burn-duration, 2.6) * 1s) cubic-bezier(0.33, 0, 0.2, 1) forwards;
will-change: transform, opacity, filter;
}
/* 虹（なないろ）は単色オーラではなく虹色のオーラにする（drop-shadowは単色制約のため金の光のまま）。 */
.hand-effect-burn-overlay:has(.hand-effect-burn-card.is-rainbow) .hand-effect-burn-aura {
background: conic-gradient(
from 0deg,
#ef4444,
#f97316,
#eab308,
#22c55e,
#3b82f6,
#ec4899,
#a855f7,
#ef4444
);
}
@keyframes hand-effect-burn-aura-kf {
0% {
opacity: 0;
transform: scale(0.7);
}
12% {
opacity: 0.8;
transform: scale(1);
}
55% {
opacity: 0.95;
transform: scale(1.05);
}
100% {
opacity: 0;
transform: scale(1.32);
}
}
/* 続き217（ユーザー報告「手札使用演出が早すぎて何が起きたかわからない」）: カードを“読める”よう
全面表示＋glowで長めにホールドしてから（〜55%）、下から上へ燃え上がって崩れ消える。マス境界は
0〜55%はカードの下（全面可視）、55〜100%で上へ掃引して燃え尽きる。 */
@keyframes hand-effect-burn-card-kf {
0% {
transform: scale(0.55) translateY(1.4rem);
opacity: 0;
filter: brightness(1) saturate(1) drop-shadow(0 0 0 transparent);
-webkit-mask-image: linear-gradient(to top, transparent -20%, #000 -10%);
mask-image: linear-gradient(to top, transparent -20%, #000 -10%);
}
6% {
transform: scale(1.03) translateY(0);
opacity: 1;
}
16% {
transform: scale(1);
opacity: 1;
filter: brightness(1.06) saturate(1.05) drop-shadow(0 0 0.6rem var(--burn-color));
}
55% {
/* ここまで全面が見えている（読める）。マス境界はカードの下（-15%付近）で維持。 */
transform: scale(1.02);
opacity: 1;
filter: brightness(1.12) saturate(1.25) drop-shadow(0 0 1rem var(--burn-color));
-webkit-mask-image: linear-gradient(to top, transparent -20%, #000 -10%);
mask-image: linear-gradient(to top, transparent -20%, #000 -10%);
}
66% {
/* 着火 */
transform: scale(1.05);
filter: brightness(1.28) saturate(1.55) drop-shadow(0 0 1.5rem var(--burn-color));
}
85% {
/* 焦げていく */
filter: brightness(0.55) saturate(1.6) drop-shadow(0 0 1rem var(--burn-color));
}
100% {
transform: scale(1.18) translateY(-1.3rem);
opacity: 1;
filter: brightness(0.28) saturate(1) drop-shadow(0 0 0.55rem var(--burn-color));
/* マスの透明域が下から上へ完全に抜け切る＝燃え尽きて消える。 */
-webkit-mask-image: linear-gradient(to top, transparent 112%, #000 122%);
mask-image: linear-gradient(to top, transparent 112%, #000 122%);
}
}
.hand-effect-burn-embers {
position: absolute;
inset: 0;
pointer-events: none;
}
.hand-effect-burn-embers i {
position: absolute;
left: 50%;
top: 50%;
width: 0.42rem;
height: 0.42rem;
border-radius: 50%;
background: radial-gradient(circle, #fff 0%, var(--burn-color) 45%, transparent 76%);
box-shadow: 0 0 0.5rem var(--burn-color);
opacity: 0;
transform: translate(-50%, -50%) translate(var(--ex), var(--ey)) scale(var(--ers));
animation-name: hand-effect-burn-ember-kf;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
/* 続き218: 燃えカスは中央のカード位置(ex,ey)から右上(etx,ety＝使用モーダルの方)へ流れて集まる。 */
@keyframes hand-effect-burn-ember-kf {
0% {
opacity: 0;
transform: translate(-50%, -50%) translate(var(--ex), var(--ey)) scale(var(--ers));
}
16% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(-50%, -50%) translate(var(--etx), var(--ety)) scale(calc(var(--ers) * 0.5));
}
}
/* 手札シャッフル演出（main.jsのanimateHandShuffle）: 裏向きのまま1束に集め、その場で数枚が
出たり入ったりしてから、元の手札の位置へ戻る間だけ現れるゴースト。.setup-fly-cardと同じ
「document.body直下、3D空間の外」の考え方。位置(transform: translate)はJS側が制御し、
「出し入れ」の動き(translate/rotateプロパティ、transform関数とは別物)はCSSアニメーション側が
担当する——同じtransformを2箇所から操作すると後勝ちで上書きされてしまう
（box-shadowの合成不可バグと同種の教訓）ため、位置と出し入れモーションを独立した
CSSプロパティに分けた。 */
.hand-shuffle-ghost {
position: fixed;
left: 0;
top: 0;
z-index: 9998;
border-radius: 0.3rem;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
pointer-events: none;
}
.hand-shuffle-ghost.is-popping {
animation: hand-shuffle-pop 0.5s ease-in-out;
animation-delay: var(--pop-delay, 0s);
}
@keyframes hand-shuffle-pop {
0%,
100% {
translate: 0 0;
rotate: 0deg;
}
45% {
translate: 0 -1.6rem;
rotate: -6deg;
}
}
/* アニメーション中に画面全体を覆う透明な受け皿。クリックで残りを即座に完了させる
（セットアップは何度もやり直すことが多いテストプレイ用途を考慮）。 */
#setup-animation-skip-overlay {
position: fixed;
inset: 0;
z-index: 9997;
cursor: pointer;
}
.setup-animation-skip-hint {
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
background: rgba(15, 23, 32, 0.85);
color: rgba(226, 232, 240, 0.8);
border: 1px solid rgba(148, 163, 184, 0.4);
border-radius: 0.4rem;
padding: 0.4rem 0.9rem;
font-family: sans-serif;
font-size: 0.75rem;
pointer-events: none;
}
/* オープニング画面（起動直後の「ローカル」「オンライン」2択メニュー、opening-screen.js
参照）。ゲーム本体より確実に手前に出す必要があるため、他のどのモーダル/パネルより
高いz-indexにしてある。画像・メニューともゆっくりフェードインさせる演出。 */
#opening-screen {
position: fixed;
inset: 0;
z-index: 50000;
/* ユーザー要望「STARTを押した後、暗転せずに白からタイトル画像へそのまま行きたい」。
以前は暗い背景色だったため、.opening-start-gate（白背景）がフェードアウトし
きる前にタイトル画像がまだ薄い間、この暗い下地が透けて一瞬暗転して見えていた。
白にすることで「白→（うっすら）タイトル画像→タイトル画像」と自然に繋がる。 */
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
touch-action: none; /* オープニング画面表示中のピンチでもブラウザ標準ズームが出ないように */
/* ユーザー報告「盤面画面に移動した時、何かクリックしてからじゃないとマウスホイール
ズームなどいろいろ動作しません」の原因調査で発見: ログインカードを✕で閉じても
（hideCard()）このオーバーレイ自体（画面全体をinset:0で覆う、全体の中で最も高い
z-index）はdisplay:noneにならず、右下の小さい「ログイン」ボタン等を表示したまま
居座り続ける設計になっている。その状態でこの要素自体がpointer-events:autoの
ままだと、見た目には盤面が透けて見えていても実際のクリック・ホイールは全てこの
透明な全画面レイヤーに吸われてしまい、盤面の.sceneには一切届いていなかった。
コンテナ自体はクリックを素通しにし（none）、実際に押せる必要がある子要素
（ログインカード一式・ストーリーテロップ・STARTボタン、テストモードボタンは
既に個別にautoを持つ）にだけ明示的にautoを戻す。 */
pointer-events: none;
}
#opening-screen.is-closing {
transition: opacity 0.6s ease;
opacity: 0;
pointer-events: none;
}
.opening-screen-bg {
position: absolute;
inset: 0;
/* 背景画像はJS側(opening-screen.js)でinline styleとして設定する。CSSのurl()は
このスタイルシート自身の場所(src/)基準で解決されるため、プロジェクトルート直下の
assets/を指すにはJS側（ドキュメント基準で解決される）で設定する必要がある
（他の実物画像アセットと同じ、このプロジェクト共通の設定方法）。 */
background-size: cover;
background-position: center;
opacity: 0;
}
/* ユーザー要望「最初は真っ白な画面にSTARTボタン。押したらタイトル画像がフェードイン」。
以前はページ読み込み直後に無条件でフェードインしていたが、.opening-start-gateが
最初に全体を覆っているため、STARTボタンが押されて#opening-screenに
stage-titleクラスが付いた時だけこのフェードインを再生するようにした。 */
#opening-screen.stage-title .opening-screen-bg {
animation: opening-screen-fade-in 1.6s ease forwards;
}
.opening-screen-dim {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.7) 100%);
}
/* タイトル画面のペット散歩（title-pet.js）。画面下側を横切る飾りレイヤー。クリックは透過。 */
.title-pet-layer {
position: absolute;
left: 0;
right: 0;
bottom: 9%;
height: 6rem;
z-index: 1;
pointer-events: none;
overflow: visible;
}
.title-pet {
position: absolute;
left: 0;
bottom: 0;
height: 6rem;
width: auto;
max-width: none;
will-change: transform;
filter: drop-shadow(0 0.35rem 0.5rem rgba(0, 0, 0, 0.5));
user-select: none;
}
/* ユーザー要望「ログインモーダルは画面中央左側に表示してほしい」。以前は画面下部中央
だったが、縦中央・横は左寄りに変更した。 */
.opening-screen-content {
position: absolute;
top: 50%;
left: 12%;
transform: translateY(-50%);
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
opacity: 0;
/* #opening-screen自体はpointer-events:noneにしたため、ここ（ログインボタン一式）は
明示的に戻す。 */
pointer-events: auto;
}
/* ストーリーテロップが終わる（または飛ばされる）と#opening-screenに
stage-contentクラスが付き、ここで初めてログインボタンが浮かび上がる。 */
#opening-screen.stage-content .opening-screen-content {
animation: opening-screen-content-rise-in 1.1s ease forwards;
animation-delay: 0.2s;
}
.opening-screen-menu {
display: flex;
gap: 1.5rem;
}
.opening-screen-menu-btn {
font-family: sans-serif;
font-size: 1.05rem;
letter-spacing: 0.05em;
padding: 0.9rem 2.4rem;
border-radius: 2rem;
background: rgba(15, 23, 32, 0.75);
border: 1px solid rgba(226, 232, 240, 0.5);
color: #f1f5f9;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.opening-screen-menu-btn:hover {
background: rgba(56, 189, 248, 0.25);
border-color: rgba(56, 189, 248, 0.85);
transform: translateY(-0.15rem);
}
/* ローカル1人用「CPU戦」の入口ボタン（cpu-battle.js）。ログインボタンの下に少し離して置き、
遊びの導線だと分かるようシアン寄りの控えめなアクセントにする。 */
.opening-screen-cpu-btn {
margin-top: 0.9rem;
font-size: 0.95rem;
padding: 0.7rem 1.9rem;
background: rgba(8, 145, 178, 0.4);
border-color: rgba(56, 189, 248, 0.7);
}
.opening-screen-cpu-btn:hover {
background: rgba(8, 145, 178, 0.6);
}
/* 【2026-09-11】試遊の入口（?trial・opening-screen.js / trial-entry.js）。
ログインのボタンの代わりに出す。タイトルの絵の上に乗るので、文字には影を付けて読めるようにする。 */
.opening-trial-panel {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
/* 22rem だと右端がタイトルロゴの「SHADES」の文字にかかり、説明文が読みにくかった（実測）。 */
width: 18rem;
max-width: 100%;
}
/* 「開発中のアプリです」の囲み。ユーザー要望「最初にでっかく、しっかり出そう」で、パネルの先頭で
一番目立つもの（不透明な地＝タイトルの絵に重なっても読める）にした。 */
.opening-trial-notice {
width: 100%;
box-sizing: border-box;
background: rgba(154, 52, 18, 0.94);
border: 2px solid #fbbf24;
border-radius: 0.8rem;
padding: 0.55rem 0.8rem 0.6rem;
margin-bottom: 0.4rem;
text-align: center;
box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.35);
}
.opening-trial-notice-title {
font-family: sans-serif;
font-size: 1.5rem;
font-weight: 800;
line-height: 1.3;
color: #ffffff;
}
.opening-trial-notice-note {
font-family: sans-serif;
font-size: 0.78rem;
line-height: 1.5;
color: #ffedd5;
margin-top: 0.25rem;
}
.opening-trial-lead {
font-family: sans-serif;
font-size: 1rem;
color: #f8fafc;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
margin: 0.2rem 0 0.3rem;
text-align: center;
}
.opening-trial-btn {
width: 100%;
margin-top: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
}
.opening-trial-btn.is-primary {
background: rgba(8, 145, 178, 0.6);
border-color: rgba(56, 189, 248, 0.9);
}
.opening-trial-desc {
font-family: sans-serif;
font-size: 0.75rem;
line-height: 1.5;
color: rgba(241, 245, 249, 0.9);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
text-align: center;
}
/* スマホ: このアプリは1600x900の画面を縮めて描くので、1remが実画面で7px前後にしかならない
（続き439の実測）。そのままでは説明文が4〜5pxで読めないため、スマホでは説明文を省き、
ボタンと見出しを指で押せる大きさにする（ボタンは不透明なので、ロゴに重なっても読める）。 */
body.is-phone-device .opening-trial-panel {
/* 幅を決めておかないと、囲みの説明文が1行に伸びようとしてパネルごと横に広がる。 */
width: 42rem;
gap: 0.7rem;
}
body.is-phone-device .opening-trial-notice {
border-width: 0.25rem;
border-radius: 1.4rem;
padding: 0.7rem 1.6rem 0.8rem;
margin-bottom: 0;
}
body.is-phone-device .opening-trial-notice-title {
font-size: 3rem;
}
body.is-phone-device .opening-trial-notice-note {
font-size: 1.7rem;
}
body.is-phone-device .opening-trial-lead {
font-size: 2.1rem;
}
body.is-phone-device .opening-trial-btn {
font-size: 2.5rem;
padding: 1.1rem 2.2rem;
margin-top: 0.4rem;
}
body.is-phone-device .opening-trial-desc {
display: none;
}
/* 「ログインして、すべての機能を使う」は、以前は下線付きの小さな文字だった。ユーザー要望で
他の2つと同じボタン（.opening-trial-btn）にしたので、専用の見た目はもう持たない。 */
/* ユーザー要望「1画面で複数人が遊べるモードは、実際にそういう遊び方をさせる予定が
無いのでテストモード画面とし、右下に小さく置きたい」。ログイン導線（.opening-screen-menu-btn）
とは違い、あえて目立たせない見た目にする。#opening-screenがposition:fixed要素の
基準（main.jsのステージ方式）になっているため、これも同じくposition:fixedで
画面右下に固定できる。 */
.opening-test-mode-btn {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 2;
font-family: sans-serif;
font-size: 0.7rem;
letter-spacing: 0.05em;
padding: 0.3rem 0.7rem;
border-radius: 0.3rem;
background: rgba(15, 23, 32, 0.35);
border: 1px solid rgba(148, 163, 184, 0.3);
color: rgba(226, 232, 240, 0.55);
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: background 0.2s ease, color 0.2s ease, opacity 0.6s ease;
}
/* ログインボタン(.opening-screen-content)が浮かび上がるのと同じタイミングで
一緒に現れるようにする（タイトル演出・ストーリーテロップの最中は隠しておく）。 */
#opening-screen.stage-content .opening-test-mode-btn {
opacity: 1;
pointer-events: auto;
transition-delay: 0.3s;
}
.opening-test-mode-btn:hover {
background: rgba(15, 23, 32, 0.6);
color: rgba(226, 232, 240, 0.9);
}
/* 管理者パネルを開くボタン（タイトル画面、テストモードの少し上）。ユーザー要望で、
テストモードともども管理者(body.is-admin-user)にだけ表示する。 */
/* 【2026-09-07・ユーザー報告】右下の管理者向けボタンは4つ縦に並ぶが、**間隔がボタンの高さより
狭く**、実測で「管理者パネル×テストモード」が2px、「スモークテスト×ダッシュボード」が18px
重なっていた。ここは position:fixed だが**変形した祖先（1600x900のステージ）の中にある**ため
fixed が absolute のように振る舞い、1rem が実画面では約12.9px にしかならない。一方ボタンの
高さは実測23px（＝約1.78rem。border 1px×2 は rem に連動しないぶん相対的に厚くなる）。
つまり **rem で 1.7〜1.8 の間隔を空けても足りない**。実測に合わせて 2.1rem 間隔にしてある。
**数字を変える時は必ず実際に測って重なりが0であることを確かめること**（計算だけで決めない）。 */
.opening-admin-btn {
position: fixed;
right: 1rem;
bottom: 3.1rem;
z-index: 2;
font-family: sans-serif;
font-size: 0.7rem;
letter-spacing: 0.05em;
padding: 0.3rem 0.7rem;
border-radius: 0.3rem;
background: rgba(15, 23, 32, 0.4);
border: 1px solid rgba(250, 204, 21, 0.45);
color: rgba(253, 224, 71, 0.85);
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: background 0.2s ease, color 0.2s ease, opacity 0.6s ease;
}
#opening-screen.stage-content .opening-admin-btn {
opacity: 1;
pointer-events: auto;
transition-delay: 0.3s;
}
.opening-admin-btn:hover {
background: rgba(15, 23, 32, 0.65);
color: #fde68a;
}
/* 管理者ダッシュボード（別ページ）へのリンク（タイトル画面、管理者パネルのさらに上）。
ユーザー要望2026-09-02。テストモード(1rem)・管理者パネル(3.1rem)の上に 2.1rem 間隔で置く。
※以前ここに「ボタンの高さ28px＜間隔28.8pxなので1pxも重ならない」と書いていたが、**実測は
高さ23px・間隔22px で逆に重なっていた**（1rem が16pxではない。上の .opening-admin-btn の
コメント参照）。表示は管理者(body.is-admin-user)のときだけ。 */
.opening-dashboard-btn {
position: fixed;
right: 1rem;
bottom: 5.2rem;
z-index: 2;
font-family: sans-serif;
font-size: 0.7rem;
letter-spacing: 0.05em;
padding: 0.3rem 0.7rem;
border-radius: 0.3rem;
background: rgba(15, 23, 32, 0.4);
border: 1px solid rgba(56, 189, 248, 0.45);
color: rgba(125, 211, 252, 0.85);
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}
#opening-screen.stage-content .opening-dashboard-btn {
opacity: 1;
pointer-events: auto;
transition-delay: 0.3s;
}
.opening-dashboard-btn:hover {
background: rgba(15, 23, 32, 0.65);
color: #bae6fd;
}
/* テストモード・管理者パネルのボタンは管理者(body.is-admin-user)にだけ表示する（ユーザー要望）。 */
body:not(.is-admin-user) .opening-test-mode-btn,
body:not(.is-admin-user) .opening-admin-btn,
body:not(.is-admin-user) .opening-dashboard-btn {
display: none;
}
/* HUERISE画面右下の控えめなバージョン表示（opening-screen.js）。白いスタート画面(#fff、
.opening-start-gate z-index:10)の上に出すためz-index:11。白背景でも、その後のタイトル
画像（暗め）でも読めるよう、暗い文字＋白い薄縁取り(text-shadow)にする。テストモード
ボタン(bottom:1rem)の下にこっそり置く。 */
.opening-version-badge {
position: fixed;
right: 0.7rem;
bottom: 0.55rem;
z-index: 11;
font-family: sans-serif;
/* ユーザー要望2026-08-25「白背景枠はダサい。サイズは今のままで、もう少しさりげなく」。
続き249で読みやすさ用に付けていた白い下地・枠・影を廃止し、文字自体に薄い影だけ付けて
どんな背景でも読めるが控えめに見えるようにする（サイズ 1.15rem／スマホ 1.5rem は維持）。 */
font-size: 1.15rem;
font-weight: 500;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.6);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.55);
pointer-events: none;
user-select: text;
}
/* スマホはさらに大きく（ステージ縮小で小さくなる分を補う）。 */
body.is-phone-device .opening-version-badge {
font-size: 1.5rem;
}
/* 言語トグル（日本語 / English）。START画面から見えるよう、開始ゲート(z-index:10)・
バージョン表示(z-index:11)より上のz-index:12で固定する。
ユーザー要望: 右上のオプションアイコン(#options-menu-button, top:0.3rem/right:1rem)と
重なっていたので**左上**へ移動。両方の言語を並べ、今の言語(.is-current)を大きく明るく、
切り替え先を小さく淡くして「今どちらのモードか」が一目で分かるようにする。 */
.opening-lang-toggle {
position: fixed;
top: 0.6rem;
left: 0.7rem;
z-index: 12;
display: flex;
align-items: baseline;
gap: 0.15rem;
background: rgba(15, 23, 42, 0.55);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
padding: 0.22rem 0.5rem;
backdrop-filter: blur(2px);
/* どこを押しても次の言語へ切り替わる（2026-09-11 ユーザー要望）。 */
cursor: pointer;
/* 【2026-09-11 実測で判明】#opening-screen は pointer-events:none（下の .opening-screen-content と
同じ事情）で、このトグルはそれを受け継いだまま戻していなかった＝**押しても指が素通りして、
一度も切り替わっていなかった**（その点の最前面は開始ゲート／#scene だった）。 */
pointer-events: auto;
}
.opening-lang-toggle:hover {
border-color: rgba(255, 255, 255, 0.6);
}
.opening-lang-toggle-seg {
font-family: sans-serif;
font-weight: 600;
letter-spacing: 0.02em;
background: none;
border: none;
border-radius: 999px;
cursor: pointer;
/* 既定＝切り替え先（小さく淡く） */
font-size: 0.72rem;
color: rgba(226, 232, 240, 0.55);
padding: 0.18rem 0.5rem;
/* font-size はトランジションさせない（文字サイズが動くと隣の文字が押されて読みにくい）。 */
transition: color 0.15s, background 0.15s;
}
/* 枠のどこにカーソルを乗せても、切り替え先の文字が明るくなる（押すとそちらになる、の合図）。 */
.opening-lang-toggle:hover .opening-lang-toggle-seg:not(.is-current) {
color: #f8fafc;
background: rgba(255, 255, 255, 0.12);
}
/* 現在の言語＝大きく明るく（押すと次の言語へ切り替わるので、カーソルは指のまま） */
.opening-lang-toggle-seg.is-current {
font-size: 1.02rem;
color: #f8fafc;
background: rgba(255, 255, 255, 0.18);
}
/* 【続き575】実測で選んでいない側が7.3px・選んでいる側が10.3px。どちらも押すものなので、
指で押せる大きさにする（「English」が読めないと切り替えられない）。 */
body.is-phone-device .opening-lang-toggle-seg {
font-size: 1.5rem;
padding: 0.45rem 1rem;
}
body.is-phone-device .opening-lang-toggle-seg.is-current {
font-size: 1.7rem;
}
@keyframes opening-screen-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes opening-screen-rise-in {
from { opacity: 0; transform: translateY(0.9rem); }
to { opacity: 1; transform: translateY(0); }
}
/* .opening-screen-contentは縦中央寄せのtranslateY(-50%)を基本transformに持つため、
共有のopening-screen-rise-inをそのまま使うと（アニメーション側のtransformが
丸ごと上書きしてしまい）中央寄せが解除されてしまう。中央寄せの分を織り込んだ
専用のkeyframeにする。 */
@keyframes opening-screen-content-rise-in {
from { opacity: 0; transform: translateY(calc(-50% + 0.9rem)); }
to { opacity: 1; transform: translateY(-50%); }
}
/* ユーザー要望「最初真っ白な画面に7色のオーラが漂い、STARTボタンがフェードイン。押すと
BGM再生開始」。#opening-screen内の最前面レイヤーとして、bg/dim/contentを完全に覆い
隠す（真っ白なので下のタイトル画像も見えない）。STARTを押すとJS側(opening-screen.js)
がis-closingを付けてフェードアウトさせ、その後display:noneにする。 */
.opening-start-gate {
position: absolute;
inset: 0;
z-index: 10;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
/* #opening-screen自体はpointer-events:noneにしたため、ここ（STARTボタン）は
明示的に戻す。 */
pointer-events: auto;
}
.opening-start-gate.is-closing {
transition: opacity 0.6s ease;
opacity: 0;
pointer-events: none;
}
/* 7色の人魂風のオーラ。ぼかした円形グラデーションを、色ごとに異なる経路・速さで
ふわふわ漂わせる（@keyframesを色ごとに分けて、動きが揃って見えないようにしている）。
ユーザー要望「もっと活発に移動、ぼやけすぎなのでもっとはっきり」を受けて一度
blur()を外したが、その後「輪郭はボケていた方がいい、ただの丸ではなく軌跡が
欲しい（同じ道を戻らず動く感じ）」と方針が変わった。CSSの@keyframesは
必ず一定周期で同じ経路をなぞり直してしまうため、位置の計算自体をJS側
（opening-screen.jsのstartAuraTrails、requestAnimationFrameでのワンダリング
アルゴリズム）に移し、CSSは「ぼかした円をwrap内の%位置に置く」ことだけを
担当するようにした。1つの人魂につき複数の.opening-aura-dot（本体+残像）を
position:left/top(%指定、JSが毎フレーム更新)で並べ、本体に近いほど不透明・
大きく、古い残像ほど透明・小さくすることで彗星の尾のように見せる。 */
.opening-aura-wrap {
position: absolute;
inset: 0;
pointer-events: none;
}
.opening-aura-dot {
position: absolute;
width: 12rem;
height: 12rem;
border-radius: 50%;
filter: blur(1.4rem);
background: radial-gradient(circle, var(--aura-color) 0%, transparent 70%);
pointer-events: none;
will-change: left, top, opacity, transform;
}
/* ユーザー報告「2D表示・アニメーション削減を全部オンにしても古いタブレットで画面が
壊れる」への対応（opening-screen.jsのstartAuraTrailsSimplified参照）。2D表示中は
blur()もアニメーションも一切使わない、色ごとに1個だけの静止した単色円に差し替える。 */
.opening-aura-dot-static {
position: absolute;
border-radius: 50%;
background: var(--aura-color);
opacity: 0.5;
pointer-events: none;
}
/* ユーザー要望「人魂の設定をしようとする時は疑似的にオープニングの人魂の画面に
なるようにしてほしい」。管理者パネル(z-index:1000)より奥・実際のゲーム画面より
手前に、オープニングのSTART画面と同じ白背景+人魂だけを一時的に表示する
（opening-screen.jsのpreviewOpeningAuras参照、admin.jsのスライダー操作から
注入パターンで呼ばれる）。クリックすると即座に閉じられる。 */
#opening-aura-preview {
position: fixed;
inset: 0;
z-index: 900;
background: #ffffff;
cursor: pointer;
overflow: hidden;
}
/* ユーザー提供の画像（assets/opening-start-btn.png、HUERISEブランドのSTARTボタン
グラフィック）に差し替えたため、丸ボタンの背景色・枠線・文字装飾は不要になった。
ボタン自体は透明な当たり判定の器にするだけで、見た目は中のimg1枚に任せる。 */
.opening-start-btn {
position: relative;
z-index: 1;
padding: 0;
border: none;
background: none;
cursor: pointer;
opacity: 0;
/* ユーザー要望「STARTボタンのフェードインをもっとゆっくりじれったく」。
delay・durationともに大幅に伸ばした。 */
animation: opening-screen-rise-in 4s ease forwards;
animation-delay: 2.5s;
transition: transform 0.2s ease;
}
/* 【#277】ホバーできる端末（マウス）だけに限定する。タッチ端末では「1回目のタップが
hover 扱いになり click が来ない」ことがあり、STARTボタンが何度も押さないと反応しない
原因になる（ユーザー報告2026-09-05）。 */
@media (hover: hover) and (pointer: fine) {
.opening-start-btn:hover {
transform: translateY(-0.15rem) scale(1.03);
}
}
.opening-start-btn img {
display: block;
width: 20rem;
max-width: 60vw;
height: auto;
pointer-events: none;
}
/* ユーザー要望「優しく、すごくゆっくり、完全に消えない（透過率50%〜0%＝不透明度
50%〜100%）を繰り返す点滅」。最初のフェードインが終わった後(opening-screen.jsの
animationendで付与)、無限に繰り返す。 */
@keyframes opening-start-btn-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.opening-start-btn.is-blinking {
animation: opening-start-btn-blink 6s ease-in-out infinite;
}
/* ユーザー要望「タイトル画像フェードイン中にストーリーテロップを流す。クリックで
飛ばせる」。bg/dimより手前、ログインボタン(content)より奥に表示する
（z-indexは.opening-screen-contentの1より大きく、.opening-start-gateの10より
小さい値にする）。 */
.opening-story-crawl {
position: absolute;
inset: 0;
z-index: 5;
display: none;
cursor: pointer;
overflow: hidden;
/* #opening-screen自体はpointer-events:noneにしたため、ここ（クリックでスキップ）は
明示的に戻す。 */
pointer-events: auto;
}
/* ハマりどころ（ユーザー報告「まだ下から出てこない」、34remでも直らなかった）:
前回はtranslateYの開始位置を「中央からの相対オフセット」にしていたが、
このテロップは39行分の長文でトータルの高さがかなりあり（line-height2で
概算80rem前後）、flexで縦中央寄せされた状態だと先頭行が中央よりかなり上に
来てしまうため、そこから34rem下げた程度では画面内にまだ入ってしまっていた
（文章が長いほど必要なオフセットも増える、という文章の長さ依存の問題だった）。
文章の長さに関係なく確実に「画面外の下」から始まるよう、flexでの中央寄せをやめて
position:absolute; top:100%（＝このオーバーレイの一番下の外側）を先頭行の基準位置
にし、そこからtranslateYだけで押し上げる方式に変更した。 */
.opening-story-crawl-text {
position: absolute;
top: 100%;
left: 50%;
width: min(34rem, 80vw);
text-align: center;
color: #f8fafc;
font-family: sans-serif;
line-height: 2;
text-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.9), 0 0.1rem 0.3rem rgba(0, 0, 0, 0.8);
/* ハマりどころ: 当初はJS側(opening-screen.js)がdisplay:flexにした直後にJSで
animationDurationを上書きする方式だったが、display変更と同じ同期処理内でも
ブラウザがまずスタイルシート側の既定（animationショートハンドにdurationを
書いていなかったため実質0秒）でアニメーションを開始・即完了させてしまい、
その後のJSでのduration上書きが間に合わずanimationendが一瞬で発火する不具合が
あった（move-blink-durationと同じ「calc(var(...))をスタイルシート側に直接
書く」方式に変更して解決）。 */
animation-name: opening-story-crawl-scroll;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-duration: calc(var(--opening-story-crawl-duration, 40) * 1s);
}
.opening-story-crawl-text p {
margin: 0 0 0.3rem 0;
}
.opening-story-crawl-text p.is-blank {
margin-bottom: 1.1rem;
}
@keyframes opening-story-crawl-scroll {
/* left:50%だけでは横方向が中央寄せにならない（translateX(-50%)とセットで初めて
中央寄せになる）ため、アニメーション側のtransformにも常にtranslateX(-50%)を
含めておく必要がある（animationのtransformは要素の基本transformを丸ごと
上書きするため）。top:100%で既に画面外(下)から始まっているため、あとは文章
全体の高さ＋画面の高さ分だけ上へ動かせば確実に上まで抜けられる。39行・
line-height2での実測高さ（約85rem）にステージの高さ(56.25rem)を足した140remを、
余裕を見て160remにした。文章を増減した場合はこの値も調整が必要（JSで実測して
自動計算する方式ではない）。 */
from { transform: translateX(-50%) translateY(0); opacity: 0; }
5% { opacity: 1; }
95% { opacity: 1; }
to { transform: translateX(-50%) translateY(-160rem); opacity: 0; }
}
.opening-story-crawl-skip-hint {
position: absolute;
bottom: 6%;
left: 50%;
transform: translateX(-50%);
color: rgba(248, 250, 252, 0.6);
font-family: sans-serif;
font-size: 0.85rem;
letter-spacing: 0.05em;
}
/* オープニング画面のログインカード（opening-screen.js参照）。ゲストログインを主ボタンに
据え、マジックリンク・Googleログインは右下の「その他のログイン方法」に格納してある。 */
.opening-login-card {
position: relative;
width: min(24rem, 90vw);
max-height: 80vh;
overflow-y: auto;
box-sizing: border-box;
background: rgba(15, 23, 32, 0.82);
border: 1px solid rgba(226, 232, 240, 0.35);
border-radius: 1rem;
padding: 1.5rem 1.6rem 1.1rem;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.7rem;
color: #f1f5f9;
font-family: sans-serif;
}
.opening-login-title {
font-size: 0.9rem;
text-align: center;
color: #cbd5e1;
margin-bottom: 0.2rem;
}
.opening-login-primary-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
}
.opening-login-primary-btn {
font-family: sans-serif;
font-size: 1.05rem;
letter-spacing: 0.05em;
padding: 0.85rem 2.2rem;
border-radius: 2rem;
background: rgba(56, 189, 248, 0.18);
border: 1px solid rgba(56, 189, 248, 0.7);
color: #f1f5f9;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.opening-login-primary-btn:hover:not(:disabled) {
background: rgba(56, 189, 248, 0.32);
transform: translateY(-0.1rem);
}
.opening-login-primary-btn:disabled { opacity: 0.6; cursor: default; }
.opening-login-info-btn {
flex-shrink: 0;
width: 1.7rem;
height: 1.7rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(226, 232, 240, 0.45);
color: #f1f5f9;
font-size: 0.85rem;
font-style: italic;
font-family: serif;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.opening-login-info-btn:hover { background: rgba(255, 255, 255, 0.2); }
.opening-login-status {
min-height: 1.1em;
font-size: 0.78rem;
color: #94a3b8;
text-align: center;
}
.opening-login-local-link,
.opening-login-signout-link {
background: none;
border: none;
color: #94a3b8;
font-size: 0.8rem;
text-decoration: underline;
cursor: pointer;
padding: 0.2rem;
align-self: center;
}
.opening-login-local-link:hover,
.opening-login-signout-link:hover { color: #e2e8f0; }
/* ゲストログインボタン専用（続き85）。ユーザー要望「Googleでログインの下に、
もっと小さく」。.opening-login-local-link等と同じ下線付きテキストリンク調。 */
.opening-login-tiny-btn {
background: none;
border: none;
color: #94a3b8;
font-size: 0.75rem;
text-decoration: underline;
cursor: pointer;
padding: 0.2rem;
}
.opening-login-tiny-btn:hover:not(:disabled) { color: #e2e8f0; }
.opening-login-tiny-btn:disabled { opacity: 0.6; cursor: default; }
.opening-login-more-row {
align-self: flex-end;
font-size: 0.78rem;
color: #94a3b8;
cursor: pointer;
user-select: none;
margin-top: 0.3rem;
}
.opening-login-more-row:hover { color: #e2e8f0; }
.opening-login-more-section {
display: none;
flex-direction: column;
gap: 0.5rem;
border-top: 1px solid rgba(148, 163, 184, 0.25);
padding-top: 0.7rem;
margin-top: 0.2rem;
}
.opening-login-secondary-btn {
display: block;
width: 100%;
box-sizing: border-box;
padding: 0.5rem;
border-radius: 0.4rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(148, 163, 184, 0.4);
color: #f1f5f9;
cursor: pointer;
font-size: 0.85rem;
}
.opening-login-secondary-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.opening-login-secondary-btn:disabled { opacity: 0.6; cursor: default; }
.opening-login-divider {
text-align: center;
font-size: 0.7rem;
color: #94a3b8;
}
.opening-login-email-input {
width: 100%;
box-sizing: border-box;
padding: 0.4rem;
border-radius: 0.3rem;
border: 1px solid rgba(148, 163, 184, 0.4);
background: rgba(255, 255, 255, 0.05);
color: inherit;
}
#opening-login-info-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 51100;
background: rgba(15, 23, 32, 0.97);
border: 1px solid rgba(226, 232, 240, 0.3);
border-radius: 0.6rem;
padding: 1.2rem 1.4rem;
width: min(26rem, 90vw);
color: #f1f5f9;
font-family: sans-serif;
}
/* ============================================================
* 管理者モードの値の「唯一の正」となる:rootブロック（ファイル末尾）
* ------------------------------------------------------------
* ハマりどころ（重大）: これまで管理者モードで調整した値をadmin.jsの
* `default:`フィールドだけ更新して「反映済み」としてきたが、実際に画面に
* 描画される値はadmin.jsのdefaultを一切参照しない。特にタブレット専用の
* 変数の多くは「var(--foo-touch, var(--foo, 固定値))」という3段階の
* フォールバック構造になっており、--foo-touch自体がどこにも:root宣言
* されていない限り、常に中間のPC用--foo（さらにその固定フォールバック）に
* 落ちてしまい、admin.jsのdefaultは事実上「スライダーの初期表示用の見た目
* だけの値」でしかなかった（ユーザー報告「大幅に変えたのに再起動したら
* 反映されていない」の直接の原因）。
* このブロックはadmin.jsのCONTROLS全項目（ユーザーから明示的に「無視して
* ください」と指定された手札Z値5項目・手札A傾き角度は除く）を、実際に
* 効果を持つ直接の:root宣言としてファイル最後に書き出したもの。CSSの
* カスケード規則上、同じ詳細度の:root宣言は「後に書かれた方が勝つ」ため、
* ファイル末尾に置くことで、これより前にある個別の:root宣言や
* var()の途中フォールバックより必ず優先される。
* 今後、管理者モードの値を同期する際は、admin.jsのdefaultを更新するのと
* 必ずセットで、このブロックも同じ値に更新すること（このブロックだけが
* 実際の見た目を決める「本当の」デフォルト値）。
* このブロックはregen_override_block.js相当のスクリプトで丸ごと再生成する
* 前提（手動で個別に編集しない）。admin.jsのCONTROLSが変わったら、この
* ブロック全体をadmin.jsの現在値から再生成し直すこと。
* ============================================================ */
:root {
--table-tilt: 42deg;
--camera-perspective: 1090px;
--camera-perspective-origin-y: 8.4rem;
--camera-offset-y: -1.4rem;
--camera-zoom: 1.05;
--card-preview-size: 32rem;
--home-rank-pos-x: 43.8rem;
--home-rank-pos-y: 13.1rem;
--home-rank-scale: 1;
--home-rank-name-pos-x: 0rem;
--home-rank-name-pos-y: -1.8rem;
--mypage-rank-name-pos-x: 0rem;
--mypage-rank-name-pos-y: -2.8rem;
--shop-thumb-x: 0rem;
--shop-thumb-y: 0rem;
--shop-thumb-scale: 0.6;
--shop-bg-x: 0rem;
--shop-bg-y: -3.5rem;
--shop-bg-scale: 1.35;
--shop-bg-rotate: 0deg;
--shop-price-x: 0rem;
--shop-price-y: 0rem;
--shop-price-scale: 1;
--shop-badge-x: 0rem;
--shop-badge-y: 0rem;
--shop-badge-scale: 1;
--shop-card-bg-alpha: 0.04;
--shop-thumb-shadow-alpha: 0.4;
--shop-thumb-shadow-blur: 0.5rem;
--shop-thumb-shadow-y: 0.35rem;
--hand-pickup-toast-scale: 1.3;
--hand-pickup-toast-duration: 5;
--card-arrival-modal-size: 25rem;
--card-arrival-modal-duration: 5;
--card-arrival-modal-top: 3rem;
--card-arrival-modal-right: 1rem;
--card-landing-glide-ms: 300;
--card-landing-hold-ms: 500;
--card-landing-drop-ms: 150;
--card-landing-lift-scale: 1.08;
/* 続き220: 手札使用のCanvas霧散演出（card-dissolve.js）の調整値。speedは小さいほど長い。 */
--dissolve-speed: 0.85;
--dissolve-mist: 1;
--dissolve-residue: 1.6;
--dissolve-card-size: 340;
--hand-burn-duration: 2.6;
--hand-burn-card-size: 17rem;
--hand-burn-modal-delay: 2;
--move-blink-duration: 7;
--move-blink-arrow-size: 1.6rem;
--move-blink-arrow-stroke: 0.2rem;
--move-blink-avatar-rotate: 0deg;
--start-player-avatar-size: 12rem;
--gate-invasion-modal-size: 28rem;
--gate-invasion-modal-step-duration: 3.5;
/* 駒が1マス移動するのにかける時間（秒）。一瞬で次のマスに現れると「移動した」感じが
しないため、他人の移動を見せる時と同じ飛翔演出を自分/CPUの移動にも使う。 */
--piece-move-duration: 0.45;
--contact-anim-pre-delay: 1;
--contact-anim-runup-duration: 0.5;
--contact-anim-tackle-duration: 0.5;
--contact-anim-flight-duration: 0.5;
--eternal-anim-glow-duration: 1;
--eternal-anim-flight-duration: 1.5;
--eternal-anim-suspense-duration: 1.5;
--eternal-anim-flip-duration: 1;
--eternal-anim-hold-duration: 2;
--eternal-anim-return-duration: 1;
--spotlight-inner-radius: 15%;
--spotlight-outer-radius: 100%;
--spotlight-opacity: 0.95;
--spotlight-width: 55%;
--spotlight-height: 50%;
--pet-dist: 0.9;
--pet-lift: 0.05;
--pet-size: 0.85;
--pet-follow: 0.16;
--pet-wander: 0.35;
--pet-liveliness: 1;
--pet-orbit-radius: 1.1;
--pet-orbit-squash: 0.72;
--pet-orbit-dur: 3.4;
--pet-orbit-offset-x: 0;
--pet-orbit-offset-y: 0;
--sound-volume-button-press: 80%;
--sound-volume-hand-shuffle: 80%;
--sound-volume-deck-shuffle: 80%;
--sound-volume-card-flip: 80%;
--sound-volume-card-place: 80%;
--sound-volume-piece-place: 80%;
--sound-volume-card-draw: 80%;
--sound-volume-arrival-effect: 80%;
--sound-volume-lock: 80%;
--sound-volume-turn-switch: 80%;
--sound-volume-swap: 80%;
--sound-volume-jump: 80%;
--sound-volume-victory-bgm: 40%;
--sound-volume-opening-bgm: 40%;
--sound-volume-game-bgm: 40%;
--sound-volume-waiting-bgm: 40%;
--opening-story-crawl-duration: 40;
--opening-aura-size: 2rem;
--opening-aura-trail-length: 25;
--opening-aura-speed: 1;
--board-zoom-margin: 1;
--board-zoom-offset-x: 0rem;
--board-zoom-offset-y: 3.2rem;
--board-zoom-reference-height: 1000px;
--board-zoom-2-margin: 2;
--board-zoom-2-offset-x: 0rem;
--board-zoom-2-offset-y: -2.5rem;
--board-zoom-2-reference-height: 1000px;
--home-tile-icon-size: 12rem;
--home-title-offset-y: 0rem;
--home-grid-pos-x: 0rem;
--home-grid-pos-y: 6.4rem;
--home-grid-scale: 1;
--phase-guide-bottom: 0rem;
--phase-guide-right: 2.3rem;
--phase-guide-pos-x: 0rem;
--phase-guide-pos-y: 0rem;
--phase-guide-scale: 1;
--phase-guide-pos-touch-x: 0rem;
--phase-guide-pos-touch-y: 0rem;
--phase-guide-scale-touch: 1;
--turn-round-counter-top: 3.1rem;
--turn-round-counter-right: 1.6rem;
--turn-round-counter-font-size: 0.65rem;
--phase-skip-button-offset-x: 0rem;
--phase-skip-button-offset-y: 0rem;
--home-badge-offset-x: 2rem;
--home-badge-offset-y: 1.6rem;
--home-new-badge-offset-x: 2rem;
--home-new-badge-offset-y: 1.6rem;
--bug-report-icon-size: 1.9rem;
/* 全画面ボタンを不具合報告(旧19.5)と2D/3D(16.9)の間へ入れるため、不具合報告を19.5→22.1へ左送り。 */
--bug-report-icon-right: 22.1rem;
--bug-report-icon-top: 0.6rem;
--action-log-icon-size: 1.95rem;
--action-log-icon-right: 3.9rem;
--action-log-icon-top: 0.6rem;
--profile-maindeck-right: 2.5rem;
--profile-maindeck-bottom: 0rem;
--profile-maindeck-width: 10.5rem;
--profile-maindeck-scale: 2.25;
--profile-maindeck-badge-x: 0rem;
--profile-maindeck-badge-y: 2.1rem;
--profile-maindeck-badge-scale: 0.7;
--profile-maindeck-name-x: 0rem;
--profile-maindeck-name-y: -1.9rem;
--profile-maindeck-name-scale: 1;
--profile-maindeck-edit-x: 0.3rem;
--profile-maindeck-edit-y: -1.7rem;
--profile-maindeck-edit-scale: 0.8;
--smoke-test-btn-right: 1rem;
--smoke-test-btn-bottom: 7.3rem;
--smoke-test-btn-font-size: 0.85rem;
--turn-timer-rope-pos-x: 0rem;
--turn-timer-rope-pos-y: 0rem;
--turn-timer-rope-width: 46rem;
--priority-transfer-pos-x: -1.6rem;
--priority-transfer-pos-y: 1.5rem;
--piece-hitbox-scale: 1;
--playmat-scale: 1.42;
--playmat-pos-x: 0%;
--playmat-pos-y: 0%;
--table-background-scale-x: 4.75;
--table-background-scale-y: 4.85;
--table-background-pos-x: 0%;
--table-background-pos-y: 108.5%;
--self-status-icon-piece-size: 1.5rem;
--self-status-icon-cardback-size: 1.5rem;
--self-status-icon-playmat-size: 1.5rem;
--self-status-icon-background-size: 1.5rem;
--self-status-icon-online-size: 2.6rem;
--self-status-icon-gap: 0.4rem;
--self-status-large-avatar-size: 16rem;
--self-status-large-avatar-pos-x: -0.7rem;
--self-status-large-avatar-pos-y: -11.5rem;
--self-status-large-avatar-ghost-scale: 1.6;
--self-status-large-avatar-ghost-offset-x: -1.6rem;
--self-status-large-avatar-ghost-offset-y: -8.1rem;
--self-status-large-avatar-ghost-opacity: 0.35;
--self-status-pos-x: 0rem;
--self-status-pos-y: 0rem;
--self-status-info-pos-x: -9.8rem;
--self-status-info-pos-y: -1.5rem;
--self-status-icon-piece-pos-x: 0rem;
--self-status-icon-piece-pos-y: 0rem;
--self-status-icon-cardback-pos-x: 0rem;
--self-status-icon-cardback-pos-y: 0rem;
--self-status-icon-playmat-pos-x: 0rem;
--self-status-icon-playmat-pos-y: 0rem;
--self-status-icon-background-pos-x: 0rem;
--self-status-icon-background-pos-y: 0rem;
--self-status-icon-online-pos-x: 1.42rem;
--self-status-icon-online-pos-y: 1.01rem;
--self-status-icons-group-x: 3.6rem;
--self-status-icons-group-y: 1.1rem;
--self-status-icons-group-scale: 1.45;
--lock-top-pos-x: 0rem;
--lock-top-pos-y: -1.8rem;
--lock-bottom-pos-x: 0rem;
--lock-bottom-pos-y: 1.8rem;
--lock-left-pos-x: -1.9rem;
--lock-left-pos-y: 0rem;
--lock-right-pos-x: 1.8rem;
--lock-right-pos-y: 0rem;
--lock-slot-border-width: 0.01rem;
--lock-slot-glow-scale: 0.25;
--lock-bar-scale: 1.13;
--lock-bar-top-pos-x: 0rem;
--lock-bar-top-pos-y: 0rem;
--lock-bar-bottom-pos-x: 0rem;
--lock-bar-bottom-pos-y: 0rem;
--lock-bar-left-pos-x: 0rem;
--lock-bar-left-pos-y: 0rem;
--lock-bar-right-pos-x: 0rem;
--lock-bar-right-pos-y: 0rem;
--label-a-pos-x: -14.7rem;
--label-a-pos-y: -1.1rem;
--label-b-pos-x: -4.5rem;
--label-b-pos-y: -5.1rem;
--label-c-pos-x: 7.3rem;
--label-c-pos-y: -7rem;
--label-d-pos-x: 3.8rem;
--label-d-pos-y: -5.2rem;
--label-bcd-font-size: 1.6rem;
--avatar-a-size: 5.7rem;
--avatar-b-size: 8rem;
--avatar-c-size: 8rem;
--avatar-d-size: 8rem;
--avatar-a-pos-x: 0rem;
--avatar-a-pos-y: 1.9rem;
--avatar-b-pos-x: -3.5rem;
--avatar-b-pos-y: 0.1rem;
--avatar-c-pos-x: 0.1rem;
--avatar-c-pos-y: -6.8rem;
--avatar-d-pos-x: 3.5rem;
--avatar-d-pos-y: -0.1rem;
--hand-a-pos-x: 0rem;
--hand-a-pos-y: 4.3rem;
--hand-b-pos-x: -0.3rem;
--hand-b-pos-y: 0rem;
--hand-c-pos-x: 0rem;
--hand-c-pos-y: -3rem;
--hand-d-pos-x: 0rem;
--hand-d-pos-y: 0rem;
--mini-lock-bottom: -0.2rem;
--mini-lock-x-offset: 0rem;
--mini-lock-top: 2.2rem;
--mini-lock-top-x-offset: 0rem;
--mini-lock-bottom-fixed-hand: 0rem;
--fixed-hand-bottom: 0.5rem;
--fixed-hand-x-offset: 0rem;
--fixed-hand-scale: 1;
--hand-a-size: 17rem;
--hand-b-size: 7rem;
--hand-c-size: 7rem;
--hand-d-size: 7rem;
--hand-a-thickness: 10rem;
--hand-b-thickness: 5rem;
--hand-c-thickness: 4rem;
--hand-d-thickness: 5rem;
--hand-a-peek-lift: 3rem;
--hand-card-self-size: 9rem;
--hand-card-opponent-size: 2.6rem;
--deck-scale: 1;
--deck-pos-x: 4.1rem;
--deck-pos-y: 1.5rem;
--discard-scale: 1;
--discard-pos-x: -4.1rem;
--discard-pos-y: -3.7rem;
--eternal-scale: 1;
--eternal-pos-x: 4.1rem;
--eternal-pos-y: -3.7rem;
--first-scale: 1;
--first-pos-x: -4.1rem;
--first-pos-y: 1.5rem;
--declared-colors-corner-left: 1rem;
--declared-colors-corner-scale: 0.85;
--icon-pos-hand-shuffle-x: -7.5rem;
--icon-pos-hand-shuffle-y: 7.79rem;
--icon-pos-board-zoom-x: 0rem;
--icon-pos-board-zoom-y: -0.71rem;
--icon-pos-draw-x: -8rem;
--icon-pos-draw-y: -4.71rem;
--icon-pos-end-turn-x: 0rem;
--icon-pos-end-turn-y: -3.4rem;
--icon-pos-options-x: 0rem;
--icon-pos-options-y: 0rem;
--icon-pos-help-x: 0rem;
--icon-pos-help-y: 0rem;
--currency-display-pos-x: 0rem;
--currency-display-pos-y: 0rem;
--icon-pos-piece-hide-x: 0rem;
--icon-pos-piece-hide-y: 0rem;
--icon-pos-card-hide-x: 0rem;
--icon-pos-card-hide-y: 0rem;
--icon-pos-public-draw-x: 0.3rem;
--icon-pos-public-draw-y: 1rem;
--icon-size-hand-shuffle: 3.5rem;
--icon-size-board-zoom: 3.5rem;
--icon-size-draw: 3.5rem;
--icon-size-end-turn: 3.5rem;
--icon-size-options: 2.6rem;
--icon-size-help: 2.6rem;
--icon-size-piece-hide: 2.6rem;
--icon-size-card-hide: 2.6rem;
--icon-size-public-draw: 3.5rem;
--icon-pos-hand-shuffle-touch-x: -8.1rem;
--icon-pos-hand-shuffle-touch-y: 11.38rem;
--icon-size-hand-shuffle-touch: 6rem;
--icon-pos-board-zoom-touch-x: 0.9rem;
--icon-pos-board-zoom-touch-y: -3.6rem;
--icon-size-board-zoom-touch: 6rem;
--icon-pos-draw-touch-x: -9rem;
--icon-pos-draw-touch-y: -7.6rem;
--icon-size-draw-touch: 6rem;
--icon-pos-end-turn-touch-x: 0.7rem;
--icon-pos-end-turn-touch-y: 0rem;
--icon-size-end-turn-touch: 6rem;
--icon-pos-options-touch-x: 1.7rem;
--icon-pos-options-touch-y: -0.9rem;
--icon-size-options-touch: 6rem;
--icon-pos-piece-hide-touch-x: 0rem;
--icon-pos-piece-hide-touch-y: -20rem;
--icon-size-piece-hide-touch: 6rem;
--icon-pos-card-hide-touch-x: 6.7rem;
--icon-pos-card-hide-touch-y: -16.3rem;
--icon-size-card-hide-touch: 6rem;
--priority-transfer-pos-touch-x: -2.2rem;
--priority-transfer-pos-touch-y: -5rem;
--icon-pos-public-draw-touch-x: 0.3rem;
--icon-pos-public-draw-touch-y: -1.2rem;
--icon-size-public-draw-touch: 4.7rem;
--phase-guide-bottom-touch: 0rem;
--phase-guide-right-touch: 2.3rem;
--self-status-icon-online-pos-touch-x: 0.27rem;
--self-status-icon-online-pos-touch-y: -4.14rem;
--self-status-icon-online-size-touch: 3.2rem;
--hand-a-pos-touch-x: 0rem;
--hand-a-pos-touch-y: 2.6rem;
--option-area-pos-phone-x: 0rem;
--option-area-pos-phone-y: 0rem;
--option-area-scale-phone: 1.65;
--icon-pos-options-phone-x: 0.7rem;
--icon-pos-options-phone-y: -0.7rem;
--icon-size-options-phone: 3.9rem;
--center-modal-scale-phone: 2;
--options-menu-scale-phone: 1;
--admin-panel-scale-phone: 1.45;
--self-status-large-avatar-size-phone: 10.2rem;
/* スマホでの「半透明の巨大アバター（背面ゴースト）」だけを、PCとは別に調整するための値
（ユーザー要望2026-08-31）。既定はPCと同じなので、触らなければ今までと同じ見た目。 */
--self-status-large-avatar-ghost-scale-phone: 1.45;
--self-status-large-avatar-ghost-offset-x-phone: -1.6rem;
--self-status-large-avatar-ghost-offset-y-phone: -4.7rem;
--self-status-large-avatar-ghost-opacity-phone: 0.35;
/* スマホでの「本体（半透明でない方）」の位置。PCとは画面の余白の作りが違うので別に持つ
（ユーザー要望2026-08-31）。既定はPCと同値なので、触らなければ今までと同じ位置。
この2つは本体だけでなく、背面ゴーストとランクリングの基準位置にもなっている（3つとも
この値を土台に自分のずらし量を足す作り）ので、動かすと3つまとめて同じだけ動く。 */
--self-status-large-avatar-pos-x-phone: -0.7rem;
--self-status-large-avatar-pos-y-phone: -7.5rem;
--phase-guide-pos-phone-x: 0rem;
--phase-guide-pos-phone-y: 0rem;
--phase-guide-scale-phone: 2.1;
--phase-skip-button-pos-phone-x: 3.2rem;
--phase-skip-button-pos-phone-y: 0rem;
--phase-skip-button-scale-phone: 0.9;
--phase-turn-status-pos-phone-x: -4.3rem;
--phase-turn-status-pos-phone-y: 0rem;
--phase-turn-status-scale-phone: 0.6;
--hand-a-pos-phone-x: -26.3rem;
--hand-a-pos-phone-y: -10.5rem;
--hand-a-size-phone: 15rem;
--hand-a-rotate-z-phone: 70deg;
--fixed-hand-bottom-phone: 11.3rem;
--fixed-hand-x-offset-phone: -34.1rem;
--fixed-hand-scale-phone: 1;
--fixed-hand-rotate-phone: 47deg;
--eraser-icons-pos-phone-x: 5.4rem;
--eraser-icons-pos-phone-y: 19rem;
--eraser-icons-size-phone: 5.3rem;
/* スマホ専用: 盤面拡大ボタンの位置・大きさ（管理者モード、ユーザー要望2026-09-05・#278）。 */
--board-zoom-btn-pos-phone-x: 0rem;
--board-zoom-btn-pos-phone-y: 0rem;
--board-zoom-btn-size-phone: 3.5rem;
--mini-lock-top-phone: 4.3rem;
--mini-lock-top-x-offset-phone: 0rem;
--mini-lock-top-scale-phone: 1;
--mini-lock-bottom-phone: 0rem;
--mini-lock-x-offset-phone: 0rem;
--mini-lock-scale-phone: 1;
--hand-reveal-fixed-phone-x: 15.3rem;
--hand-reveal-fixed-phone-y: -17.5rem;
--hand-reveal-fixed-phone-scale: 1.4;
--hand-reveal-fixed-phone-rotate: -64deg;
--hand-a-translate-z-touch: 2.4rem;
--hand-b-translate-z-touch: 0.5rem;
--hand-c-translate-z-touch: 0.5rem;
--hand-d-translate-z-touch: 0.5rem;
--label-translate-z-touch: 0rem;
--hand-a-rotate-x-touch: -40deg;
--table-tilt-flat: -21deg;
--table-scale-flat: 0.99;
--table-flat-offset-x: -0.1rem;
--table-flat-offset-y: 6.2rem;
--hand-a-rotate-x-flat: 0deg;
--hand-a-flat-offset-x: 0rem;
--hand-a-flat-offset-y: 5.8rem;
--hand-b-rotate-x-flat: 0deg;
--hand-b-flat-offset-x: 0rem;
--hand-b-flat-offset-y: 0rem;
--hand-c-rotate-x-flat: 0deg;
--hand-c-flat-offset-x: 0rem;
--hand-c-flat-offset-y: 0rem;
--hand-d-rotate-x-flat: 0deg;
--hand-d-flat-offset-x: 0rem;
--hand-d-flat-offset-y: 0rem;
--icon-pos-hand-shuffle-flat-x: 0rem;
--icon-pos-hand-shuffle-flat-y: -2.3rem;
--icon-pos-board-zoom-flat-x: 0rem;
--icon-pos-board-zoom-flat-y: 0rem;
--icon-pos-draw-flat-x: 0.9rem;
--icon-pos-draw-flat-y: 0rem;
--icon-pos-end-turn-flat-x: 0rem;
--icon-pos-end-turn-flat-y: -2.3rem;
--icon-pos-piece-hide-flat-x: 0rem;
--icon-pos-piece-hide-flat-y: 0rem;
--icon-pos-card-hide-flat-x: 0rem;
--icon-pos-card-hide-flat-y: 0rem;
--icon-pos-public-draw-flat-x: 0rem;
--icon-pos-public-draw-flat-y: 0rem;
--priority-transfer-flat-x: 0rem;
--priority-transfer-flat-y: 0rem;
--phase-guide-bottom-flat: 0rem;
--phase-guide-right-flat: 0.7rem;
--self-status-icon-online-flat-x: 0rem;
--self-status-icon-online-flat-y: 0rem;
--camera-perspective-touch: 1090px;
--camera-perspective-origin-y-touch: 8.4rem;
--self-status-scale-touch: 1.5;
--self-status-pos-touch-x: 0rem;
--self-status-pos-touch-y: 0rem;
--self-status-scale-phone: 1.75;
--self-status-pos-phone-x: 0rem;
--self-status-pos-phone-y: 3.7rem;
--priority-transfer-scale-touch: 1;
--hand-reveal-card-size: 2.9rem;
--hand-reveal-bottom-pos-x: -16.2rem;
--hand-reveal-bottom-pos-y: -0.4rem;
--hand-reveal-top-pos-x: 13rem;
--hand-reveal-top-pos-y: -2.2rem;
--hand-reveal-left-pos-x: -1rem;
--hand-reveal-left-pos-y: -13.4rem;
--hand-reveal-right-pos-x: -2.4rem;
--hand-reveal-right-pos-y: 13.5rem;
--rank-ring-thickness: 0.75rem;
--rank-ring-offset-x: 0rem;
--rank-ring-offset-y: 0rem;
--rank-ring-orbit-size: 0.4rem;
--rank-ring-orbit-trail-length: 23;
--rank-ring-orbit-speed: 7.6;
}
/* チュートリアル（tutorial.js）。実際の盤面のUI要素をハイライトしながら遊び方を
説明するステップ形式のオーバーレイ。既存モーダル（最大z-index約10701）より
確実に上、ただしオープニング画面(#opening-screen、50000)よりは下にする
（チュートリアルはオープニング画面が終わった後にしか出さないため実害は無いが、
念のため序列を保つ）。 */
#tutorial-overlay {
position: fixed;
inset: 0;
z-index: 40000;
display: none;
}
#tutorial-overlay.is-visible {
display: block;
}
#tutorial-scrim {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
}
/* ハイライト対象の実際の位置・サイズにJS(tutorial.js)が毎回合わせる。box-shadowの
スプレッドを画面全体を覆うほど大きくすることで、この要素自体は透明なまま
「周囲だけ暗い穴」を作る、よくあるスポットライト演出の手法。 */
#tutorial-spotlight {
position: fixed;
border-radius: 0.4rem;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
outline: 2px solid rgba(250, 204, 21, 0.9);
outline-offset: 0.2rem;
pointer-events: none;
transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}
/* ユーザー要望「ムーブフェイズ、実際に駒を移動できる範囲をハイライトさせたりできる？」
への対応。自分の駒に隣接する最大4マスへ、tutorial.jsが直接このクラスを付け外しする
（#tutorial-spotlightと違い、実際の盤面要素そのものを軽く縁取るだけの簡易版）。 */
.cell.tutorial-move-range {
outline: 3px solid rgba(250, 204, 21, 0.9);
outline-offset: -3px;
animation: tutorial-move-range-pulse 1.4s ease-in-out infinite;
}
@keyframes tutorial-move-range-pulse {
0%, 100% { outline-color: rgba(250, 204, 21, 0.9); }
50% { outline-color: rgba(250, 204, 21, 0.3); }
}
body.reduce-glow .cell.tutorial-move-range {
animation: none;
}
/* カード効果の自動処理（card-effect-engine.js）が、対象マス・対象の手札カードを
プレイヤーに選ばせる時のハイライト。tutorial-move-rangeと同じ黄色パルスの見た目だが、
クリックで選べることを示すためcursor:pointerを明示している。 */
.cell.card-effect-target-cell,
.hand-card.card-effect-target-cell,
/* ロックスロットも候補になり得る（ゴメンナサイで奪う相手のロックを選ぶ等）。以前は
.cell/.hand-cardにしか黄色ハイライトが付かず、ロックスロットを候補にすると盤面が
暗転するだけで「どこを押せばいいか分からない」状態だった（ユーザー報告「ゴメンナサイを
使うを押したら盤面がグレーになっただけで何も起きない」の主因）。 */
.lock-slot.card-effect-target-cell {
outline: 3px solid rgba(250, 204, 21, 0.9);
outline-offset: -3px;
animation: tutorial-move-range-pulse 1.4s ease-in-out infinite;
cursor: pointer;
}
body.reduce-glow .cell.card-effect-target-cell,
body.reduce-glow .hand-card.card-effect-target-cell,
body.reduce-glow .lock-slot.card-effect-target-cell {
animation: none;
}
/* ユーザー要望「移動先候補が少しわかりずらい。ほかのマスのトーンを落として、カードの面も
ハイライトされるようにしたい」への対応。候補選択中は他の全マス/手札カードを暗くし、
候補の中の実際のカード画像自体にも光彩を足す（枠線だけだと目に入りにくいため）。
ユーザー報告「マスチェンジの手札効果で入れ替える相手を選ぶ時、自分の駒がぺっちゃんこに
なっている」への対応: `.cell`はpreserve-3dで自分の駒(.piece、buildCubePieceの立方体
技法)を子に持つことがあり、filter/opacityを直接かけるとCSSの仕様上その要素が独立した
合成レイヤーへ強制分離され、中の3D立体駒が平面化してしまう（phase-move-picking側で
既に踏んだのと同じ罠——あちらは::afterオーバーレイ方式へ切り替えて解決済みだった。
詳しい経緯は下のbody.phase-move-picking .cell::afterのコメント参照）。同じ理由で
ここも::afterの半透明オーバーレイへ切り替える。 */
body.card-effect-picking-cells .cell:not(.card-effect-target-cell)::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(0, 0, 0, 0.55);
pointer-events: none;
}
/* 上のbody.phase-lock-pickingルールと同じ理由で、逆方向（手札効果の候補選択中に
ロックフェイズのハイライトが重なる場合）も互いのハイライトを暗転対象から除外する。 */
body.card-effect-picking-hand .hand-card:not(.card-effect-target-cell):not(.phase-lock-highlight) {
filter: brightness(0.45) saturate(0.6);
transition: filter 0.2s ease;
}
.cell.card-effect-target-cell .board-card {
box-shadow: 0 0 1.2rem 0.3rem rgba(250, 204, 21, 0.85);
}
body.reduce-glow .cell.card-effect-target-cell .board-card {
box-shadow: 0 0 0.4rem 0.1rem rgba(250, 204, 21, 0.6);
}
/* ユーザー要望「マスの選択などをさせる場合は案内を出してほしい」への対応。候補選択中、
案内バナーを出す。pointer-events:noneで盤面・手札のクリックは一切妨げない
（turn-announce-toastと同じ「操作を止めないトースト」パターン）。ユーザー要望
「作業を促すモーダルは画面中央にお願いします」への対応で画面上部から中央へ移動した
（pointer-events:noneのままなので、中央に表示されても盤面/手札のクリックは
引き続き妨げない）。 */
#card-effect-picker-hint {
position: fixed;
/* 以前は top:50%（画面ど真ん中）で、サフラン等の「マスを選択」時に選択対象マスの上に
案内バナーが被って見づらかった（不具合報告）。ヘッダー直下の上部に固定して、盤面中央の
選択マスに被らないようにする。pointer-events:none なのでクリック自体は元々通す。 */
top: 4.6rem;
left: 50%;
transform: translate(-50%, -0.6rem);
z-index: 3200;
pointer-events: none;
opacity: 0;
background: linear-gradient(160deg, rgba(66, 32, 6, 0.92), rgba(28, 16, 4, 0.92));
border: 2px solid #facc15;
border-radius: 0.6rem;
padding: 0.5rem 1.2rem;
color: #fef3c7;
font-family: sans-serif;
font-weight: bold;
font-size: 0.9rem;
white-space: nowrap;
box-shadow: 0 0 1.5rem rgba(250, 204, 21, 0.4), 0 10px 25px rgba(0, 0, 0, 0.5);
transition: opacity 0.25s ease, transform 0.25s ease;
}
#card-effect-picker-hint.show {
opacity: 1;
transform: translateX(-50%);
/* ユーザー要望「目立つように枠を点滅させる等の工夫をしてほしい」。出現時の
フェードインとは別に、表示中はずっと枠が点滅し続けて視線を誘導する。 */
animation: card-effect-picker-hint-blink 1.1s ease-in-out infinite;
}
@keyframes card-effect-picker-hint-blink {
0%, 100% { border-color: #facc15; box-shadow: 0 0 1.5rem rgba(250, 204, 21, 0.4), 0 10px 25px rgba(0, 0, 0, 0.5); }
50% { border-color: #fff7cc; box-shadow: 0 0 2.6rem rgba(250, 204, 21, 0.9), 0 10px 25px rgba(0, 0, 0, 0.5); }
}
/* CPU自動スキップOFF時「画面をクリックしてCPUの手を進める」案内（main.js）。画面下部に
出す。pointer-events:none で下のクリックを妨げない（クリックはdocumentのcaptureで拾う）。 */
#cpu-step-hint {
position: fixed;
bottom: 1.4rem;
left: 50%;
transform: translate(-50%, 0.6rem);
z-index: 3200;
pointer-events: none;
opacity: 0;
background: linear-gradient(160deg, rgba(6, 40, 52, 0.94), rgba(4, 18, 28, 0.94));
border: 2px solid #38bdf8;
border-radius: 0.6rem;
padding: 0.5rem 1.2rem;
color: #e0f2fe;
font-family: sans-serif;
font-weight: bold;
font-size: 0.9rem;
white-space: nowrap;
box-shadow: 0 0 1.5rem rgba(56, 189, 248, 0.4), 0 10px 25px rgba(0, 0, 0, 0.5);
transition: opacity 0.25s ease, transform 0.25s ease;
}
#cpu-step-hint.show {
opacity: 1;
transform: translate(-50%, 0);
animation: cpu-step-hint-blink 1.1s ease-in-out infinite;
}
@keyframes cpu-step-hint-blink {
0%, 100% { border-color: #38bdf8; box-shadow: 0 0 1.5rem rgba(56, 189, 248, 0.4), 0 10px 25px rgba(0, 0, 0, 0.5); }
50% { border-color: #bae6fd; box-shadow: 0 0 2.6rem rgba(56, 189, 248, 0.9), 0 10px 25px rgba(0, 0, 0, 0.5); }
}
body.reduce-glow #cpu-step-hint.show {
animation: none;
}
body.reduce-glow #card-effect-picker-hint.show {
animation: none;
}
/* 「これ以上選ばない」スキップボタン（任意選択の効果。requestCellChoiceForEffectの
options.allowSkip / showEffectSkipButton参照）。案内バナー(#card-effect-picker-hint)の
すぐ下に、クリック可能(pointer-events:auto=button既定)なボタンとして出す。黄のキューブ
サフラン等の「してもよい」効果を途中でやめられるようにするため。 */
#card-effect-skip-button {
position: fixed;
/* 案内バナー(#card-effect-picker-hint)を上部へ移したので、そのすぐ下へ合わせる。 */
top: 7.4rem;
left: 50%;
transform: translateX(-50%);
z-index: 3201;
display: none;
padding: 0.4rem 1.1rem;
border: 1px solid rgba(250, 204, 21, 0.7);
border-radius: 0.5rem;
background: rgba(28, 16, 4, 0.95);
color: #fde68a;
font-family: sans-serif;
font-size: 0.85rem;
font-weight: bold;
cursor: pointer;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
#card-effect-skip-button.show {
display: block;
}
#card-effect-skip-button:hover {
filter: brightness(1.12);
}
/* 【続き545】捨てる枚数が決まっている場面で、枚数が揃うまで確定を薄く見せる。
実際に押せなくしているのは confirmOrder 側（このボタンは自前の当たり判定で拾うため）。 */
#card-effect-skip-button:disabled {
opacity: 0.45;
cursor: default;
box-shadow: none;
}
#card-effect-skip-button:disabled:hover {
filter: none;
}
/* 【2026-09-28】順番にこだわらない人のための「おまかせ」。確定ボタンのすぐ下に出す。
横に並べると確定ボタンの文言の長さで中央がズレる（枚数によって文字数が変わる）ので、
同じ中央寄せのまま真下に置く。色は控えめにして、主役（確定）と見分けが付くようにする。 */
#card-effect-auto-button {
position: fixed;
top: 10.3rem;
left: 50%;
transform: translateX(-50%);
z-index: 3201;
display: none;
padding: 0.3rem 0.9rem;
border: 1px solid rgba(148, 163, 184, 0.6);
border-radius: 0.5rem;
background: rgba(15, 23, 32, 0.95);
color: #cbd5e1;
font-family: sans-serif;
font-size: 0.78rem;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
#card-effect-auto-button.show {
display: block;
}
#card-effect-auto-button:hover {
filter: brightness(1.2);
}
/* ユーザー要望「収穫と種まきで獲得したカードを手札の中で効果が終わるまで光らせて
ほしい」。既存のhas-mystic-auraとは別に、緑系の「獲得しました」を表す光。 */
.hand-card.card-effect-just-acquired-glow {
animation: card-effect-hand-acquired-glow 1.4s ease-in-out infinite;
}
@keyframes card-effect-hand-acquired-glow {
0%, 100% { box-shadow: 0 0 0.6rem 0.15rem rgba(74, 222, 128, 0.7); }
50% { box-shadow: 0 0 1.4rem 0.5rem rgba(74, 222, 128, 0.95); }
}
body.reduce-glow .hand-card.card-effect-just-acquired-glow {
animation: none;
box-shadow: 0 0 0.5rem 0.15rem rgba(74, 222, 128, 0.6);
}
/* ユーザー要望「スリカエを所持しているときは常に手札のスリカエに対し特殊なEFFECTで
めだたせてください」。「いつでも使える」＝手札に持っている間ずっと使用可能という
特殊な状態を伝える常設演出のため、上のcard-effect-just-acquired-glow（一時的な
「獲得した」演出、緑）とは別の色（金）にして意味の違いを見た目でも区別する。 */
.hand-card.is-anytime-usable-glow {
animation: card-effect-anytime-usable-glow 1.8s ease-in-out infinite;
}
@keyframes card-effect-anytime-usable-glow {
0%, 100% { box-shadow: 0 0 0.6rem 0.15rem rgba(250, 204, 21, 0.7); }
50% { box-shadow: 0 0 1.4rem 0.5rem rgba(250, 204, 21, 0.95); }
}
body.reduce-glow .hand-card.is-anytime-usable-glow {
animation: none;
box-shadow: 0 0 0.5rem 0.15rem rgba(250, 204, 21, 0.6);
}
/* ユーザー要望「ハンドフェイズに『善処の原則』等により使えない手札はトーンダウン
させてください」（自動処理モード中限定、main.jsのbuildPlayerZone参照）。実際に
ドラッグ操作は妨げない（pointer-events:autoのまま）——あくまで見た目の判別用。 */
.hand-card.hand-card-effect-unusable {
filter: grayscale(75%) brightness(0.6);
opacity: 0.55;
}
/* ユーザー要望「どこに置かれるのかを忘れないように置かれるマスをハイライトして
ほしい」。クリックして選ぶ候補（黄色、.card-effect-target-cell）とは見た目を変え、
「あなたが選んだ結果、ここに戻ってくる」という情報表示専用（クリック対象ではない）
ことが分かるよう青系にする。 */
.cell.card-effect-placement-target {
outline: 3px dashed rgba(56, 189, 248, 0.9);
outline-offset: -3px;
animation: card-effect-placement-target-pulse 1.6s ease-in-out infinite;
}
@keyframes card-effect-placement-target-pulse {
0%, 100% { box-shadow: inset 0 0 0.6rem rgba(56, 189, 248, 0.3); }
50% { box-shadow: inset 0 0 1.2rem rgba(56, 189, 248, 0.6); }
}
body.reduce-glow .cell.card-effect-placement-target {
animation: none;
}
#tutorial-callout {
position: fixed;
width: min(22rem, 90vw);
background: rgba(15, 23, 32, 0.98);
border: 1px solid rgba(250, 204, 21, 0.5);
border-radius: 0.6rem;
padding: 1rem;
font-family: sans-serif;
color: #e2e8f0;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
transition: left 0.25s ease, top 0.25s ease;
}
.tutorial-callout-title {
display: flex;
align-items: center;
gap: 0.4rem;
font-weight: bold;
font-size: 1rem;
margin-bottom: 0.5rem;
color: #fde68a;
}
/* ユーザー提供の到達効果/手札効果アイコン（tutorial.jsのstep.icon）。 */
.tutorial-callout-title-icon {
width: 1.5rem;
height: 1.5rem;
object-fit: contain;
flex-shrink: 0;
}
.tutorial-callout-body p {
margin: 0 0 0.6rem 0;
font-size: 0.85rem;
line-height: 1.6;
}
.tutorial-callout-body p:last-child {
margin-bottom: 0;
}
/* ユーザー要望「チュートリアルの続き（到達効果・手札効果・ゲート侵攻の応用ルール）」
への対応。手札効果の説明で実際のカード（画像＋名前＋補足）を見せる部分。
ユーザー要望「カードはもっともっと大きく！ホバー拡大時くらいのサイズがいい」への
対応で、盤面のホバー拡大プレビューと同じ--card-preview-size変数をそのまま流用する
（管理者モードでそちらのサイズを変えると、この例も連動して大きさが変わる）。
画像がかなり大きくなるため、横並びではなく縦積みレイアウトに変更した。 */
.tutorial-card-example {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.4rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 0.4rem;
padding: 0.6rem;
margin: 0.4rem 0 0.6rem;
}
.tutorial-card-example-image {
position: relative;
width: min(var(--card-preview-size, 20rem), 100%);
aspect-ratio: 1 / 1;
object-fit: contain;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 0.4rem;
}
.tutorial-card-example-name {
font-weight: bold;
font-size: 0.9rem;
margin-top: 0.2rem;
}
.tutorial-card-example-note {
font-size: 0.78rem;
color: #cbd5e1;
line-height: 1.5;
}
/* 手札効果ステップはカード画像がかなり大きくなるため、コールアウト自体も広げる
（tutorial.jsのstep.wideフラグで切り替える）。 */
#tutorial-callout.is-wide {
width: min(28rem, 92vw);
}
/* ユーザー要望「ダミーの手札を一時的に持たせる」への対応。本物の.hand-fanへ一時的に
追加する見た目だけのカード（tutorial.jsのapplyDummyHand参照）。本物のhand-cardと
同じ見た目にしつつ、操作対象にはしない。 */
.tutorial-dummy-hand-card {
pointer-events: none;
}
/* ユーザー要望「駒を1マス前に、隣に相手の駒を、もう一方のマスのカードを無くして
説明しやすくできますか？必要があれば仮想盤面としてもいいです」への対応。本物の
盤面には一切触れない、説明パネル内だけの簡易な仮想盤面（tutorial.jsの
buildMoveDemoDiagram）。十字型に5マスだけ配置する。 */
.tutorial-move-diagram {
display: grid;
grid-template-columns: repeat(3, 3.4rem);
grid-template-rows: repeat(3, 3.4rem);
grid-template-areas:
". up ."
"left center right"
". down .";
gap: 0.3rem;
justify-content: center;
margin: 0.5rem auto 0.6rem;
}
.tutorial-move-diagram-cell {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(148, 163, 184, 0.3);
border-radius: 0.3rem;
}
.tutorial-move-diagram-cell.pos-up { grid-area: up; }
.tutorial-move-diagram-cell.pos-left { grid-area: left; }
.tutorial-move-diagram-cell.pos-center { grid-area: center; }
.tutorial-move-diagram-cell.pos-right { grid-area: right; }
.tutorial-move-diagram-cell.pos-down { grid-area: down; }
.tutorial-move-diagram-cell.is-target {
outline: 3px solid rgba(250, 204, 21, 0.9);
outline-offset: -3px;
animation: tutorial-move-range-pulse 1.4s ease-in-out infinite;
}
.tutorial-move-diagram-card {
width: 80%;
height: 80%;
background-size: cover;
background-position: center;
border-radius: 0.2rem;
}
.tutorial-move-diagram-piece {
width: 1.4rem;
height: 1.4rem;
border-radius: 0.3rem;
background: var(--diagram-piece-color, #94a3b8);
box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.5);
}
.tutorial-move-diagram-label {
position: absolute;
bottom: 0.1rem;
font-size: 0.6rem;
color: #cbd5e1;
width: 100%;
text-align: center;
}
.tutorial-move-diagram-empty {
width: 70%;
height: 70%;
border: 1px dashed rgba(148, 163, 184, 0.4);
border-radius: 0.2rem;
}
.tutorial-callout-footer {
font-size: 0.72rem;
color: #94a3b8;
font-style: italic;
}
.tutorial-callout-progress {
font-size: 0.7rem;
color: #94a3b8;
margin-top: 0.4rem;
}
.tutorial-callout-buttons {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.8rem;
}
.tutorial-callout-skip {
margin-right: auto;
background: none;
border: none;
color: #94a3b8;
font-size: 0.8rem;
cursor: pointer;
text-decoration: underline;
padding: 0.3rem 0;
}
.tutorial-callout-back,
.tutorial-callout-next {
padding: 0.4rem 0.9rem;
border-radius: 0.3rem;
font-size: 0.85rem;
cursor: pointer;
}
.tutorial-callout-back {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(148, 163, 184, 0.3);
color: #e2e8f0;
}
.tutorial-callout-back:disabled {
opacity: 0.4;
cursor: default;
}
.tutorial-callout-next {
background: #be185d;
border: none;
color: white;
font-weight: bold;
}
/* ホーム画面（続き73、src/home-screen.js）。HUERISE→タイトル画面→ログイン後の
ナビゲーションのハブとなる画面全体のページ（モーダルではない）。opening-screen.js
の「オンラインで続ける」から遷移する。 */
#home-screen {
position: fixed;
inset: 0;
/* ユーザー要望どおりフレンドリーマッチ/ショップを実際に開けるようにした際、
ショップパネル(#shop-panel、z-index:2601)がこのホーム画面より低いz-indexだと
裏に隠れてしまうことが実機確認で判明した。ショップ/マイページ等の既存パネルは
いずれも2000〜2601付近のz-indexを使っているため、ホーム画面はその全てより
確実に低い値にしておく（オンライン対戦パネル、z-index:10002は元々余裕がある）。 */
z-index: 1500;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 2rem 1rem;
/* ユーザー提供の背景画像（assets/home-bg.webp、元は画像素材/ホーム画面/タイトル寄せ.png）。
ユーザー報告「ホームに入る時に一瞬“以前の黒い画面”が出て、そこへ今のホーム画面が覆い
かぶさるように出る」の対策として、下地の色を（旧デザインの暗色ではなく）画像に近い
クリーム色にした。画像の読み込みが間に合わない一瞬でも暗転せず、オープニングの黒からの
切替も自然になる。画像自体はhome-screen.jsで事前読み込み(preload)する。 */
background: url("../assets/home-bg.webp") center / cover no-repeat, #ece6da;
font-family: sans-serif;
color: #1e293b;
overflow-y: auto;
box-sizing: border-box;
}
/* ユーザー報告「明るい背景で文字が見えにくい」。濃色＋白いにじみ影で明るい背景でも読める
ようにする。 */
#home-screen-title {
font-size: 1.6rem;
font-weight: bold;
letter-spacing: 0.08em;
color: #1e293b;
text-shadow: 0 1px 8px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(255, 255, 255, 0.95);
/* タイトルの縦位置（ユーザー報告「上すぎる」2026-08-16）。管理者モードで調整（--home-title-offset-y）。 */
margin-top: var(--home-title-offset-y, 0rem);
}
#home-screen-subtitle {
font-size: 0.9rem;
color: #334155;
margin-bottom: 1.6rem;
letter-spacing: 0.2em;
text-shadow: 0 1px 5px rgba(255, 255, 255, 0.85);
}
/* ホームの現ランク表示（rank-badge.js、フェーズ4/6）。ホームは常にクリーム色のライト背景なので
枠は付けず（ユーザー要望「枠はいらないかも」）、文字はタイトルと同じ濃色＋白いにじみ影で読ませる。
位置・サイズは管理者モードで調整（--home-rank-pos-x/y/scale）。 */
/* ユーザー報告2026-08-16「ホーム画面が縦に大きくなってスクロールが必要」。ランク表示（大きな
バッジで背が高い）を flex フローから外して absolute にし、グリッド（8メニュー）を押し下げない
ようにする。位置は --home-rank-pos-x/y（左右・上下オフセット）で調整。#home-screen は
position:fixed なので絶対配置の基準になる。 */
#home-screen-rank {
position: absolute;
/* 大きなランクバッジのヒーロー表示は背が高く、中央の8メニュー（グリッド）はほぼ全画面を使うため、
縦にも横にも並べると短い画面では重なる/スクロールする。既定はコンパクトに左上へ置いて重ならない
ようにし、位置・サイズは --home-rank-pos-x/y・--home-rank-scale で自由に調整できる（ユーザーが
好きな場所・大きさへ）。 */
top: 2%;
left: 2%;
flex-direction: column;
align-items: center;
gap: 0.2rem;
transform: translate(var(--home-rank-pos-x, 43.8rem), var(--home-rank-pos-y, 13.1rem)) scale(var(--home-rank-scale, 1));
transform-origin: top left;
pointer-events: none; /* 表示専用。裏のグリッド等のクリックを妨げない。 */
}
.home-rank-label {
font-size: 0.72rem;
letter-spacing: 0.15em;
color: #475569;
text-shadow: 0 1px 4px rgba(255, 255, 255, 0.85);
}
#home-screen-rank .rank-badge-name { color: #1e293b; text-shadow: 0 1px 4px rgba(255, 255, 255, 0.9); }
#home-screen-rank .rank-badge-dot { background: rgba(30, 41, 59, 0.16); border-color: rgba(30, 41, 59, 0.28); }
.home-rank-name {
font-size: 0.95rem;
font-weight: 800;
color: #1e293b;
text-shadow: 0 1px 4px rgba(255, 255, 255, 0.9);
/* 段位名テキスト（「ブロンズ」等）の位置を管理者モードで調整（ユーザー要望2026-08-17）。
transformなのでレイアウトに影響せずショーケースとは独立に動かせる。 */
transform: translate(var(--home-rank-name-pos-x, 0rem), var(--home-rank-name-pos-y, 0rem));
}
#home-screen-grid {
display: grid;
/* ユーザー要望「4個ずつ並べて（今は上5下3でバランスが悪い）」。8タイルを4×2にする。 */
grid-template-columns: repeat(4, 1fr);
gap: 1.6rem 1.6rem;
/* ユーザー報告「アイコンを9.8rem以上にしても大きくならない」。原因は、グリッド幅が
固定(46rem)で1マス≒11.5rem→中身(img)がその幅にmax-width:100%で頭打ちだったこと。
グリッド幅をアイコンサイズに連動させ、マスがアイコンより十分広くなるようにする
（5.5rem時=46remで従来と同じ、大きくすると比例して広がる）。 */
width: min(100%, calc(4 * var(--home-tile-icon-size, 5.5rem) + 24rem));
/* 8メニューの一括位置・サイズ調整（ユーザー要望2026-08-16）。管理者モードの
--home-grid-pos-x/y/scale。transformなのでレイアウトに影響せず自由に動かせる。 */
transform: translate(var(--home-grid-pos-x, 0rem), var(--home-grid-pos-y, 6.4rem)) scale(var(--home-grid-scale, 1));
}
/* スマホなど狭い画面では2列に（4列だと窮屈なため）。 */
@media (max-width: 34rem) {
#home-screen-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ユーザー要望「アイコンごとの枠は不要」。従来の枠（背景グラデ・枠線・角丸）を撤去し、
アイコン画像＋ラベルだけを表示する。ホバーは軽い浮き上がり＋明るさで示す。 */
.home-screen-tile {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 0.4rem;
padding: 0.5rem;
background: none;
border: none;
border-radius: 0;
color: #e2e8f0;
font-family: sans-serif;
cursor: pointer;
transition: transform 0.15s ease, filter 0.15s ease;
}
.home-screen-tile:hover {
transform: translateY(-0.2rem);
filter: brightness(1.12);
}
.home-screen-tile.is-soon {
color: rgba(226, 232, 240, 0.6);
filter: grayscale(0.6) opacity(0.75);
}
.home-screen-tile.is-soon:hover {
transform: none;
filter: grayscale(0.6) opacity(0.75);
}
.home-screen-tile-icon {
position: relative;
font-size: 2rem;
line-height: 1;
}
.home-screen-tile-icon-img {
position: relative;
z-index: 1;
/* 管理者モードで一括調整できるサイズ（ユーザー要望）。admin.jsのGROUPS参照。 */
width: var(--home-tile-icon-size, 5.5rem);
height: var(--home-tile-icon-size, 5.5rem);
object-fit: contain;
display: block;
/* 明るい背景でも細い線が見えるよう、暗い影で縁取りする（ユーザー報告の視認性対策）。 */
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.4));
}
/* ホバー時に背面へ浮かび上がる幻想的なオーラ（ユーザー要望）。放射状の淡いグロー＋回転する
虹色リングの2枚重ね。どちらもアイコンの後ろ(z-index:0 < img:1)、クリックは奪わない。 */
.home-screen-tile-icon::before,
.home-screen-tile-icon::after {
content: "";
position: absolute;
border-radius: 50%;
opacity: 0;
pointer-events: none;
z-index: 0;
transition: opacity 0.35s ease, transform 0.35s ease;
}
.home-screen-tile-icon::before {
inset: -28%;
background: radial-gradient(
circle,
rgba(147, 197, 253, 0.6),
rgba(196, 181, 253, 0.42) 42%,
rgba(253, 224, 71, 0.28) 66%,
transparent 75%
);
filter: blur(9px);
transform: scale(0.6);
}
.home-screen-tile-icon::after {
inset: -22%;
background: conic-gradient(
from 0deg,
rgba(248, 113, 113, 0.5),
rgba(251, 191, 36, 0.5),
rgba(74, 222, 128, 0.5),
rgba(56, 189, 248, 0.5),
rgba(167, 139, 250, 0.5),
rgba(244, 114, 182, 0.5),
rgba(248, 113, 113, 0.5)
);
filter: blur(8px);
transform: scale(0.7);
}
.home-screen-tile:hover .home-screen-tile-icon::before {
opacity: 1;
transform: scale(1.05);
animation: home-icon-aura-pulse 2.2s ease-in-out infinite;
}
.home-screen-tile:hover .home-screen-tile-icon::after {
opacity: 0.5;
transform: scale(0.95);
animation: home-icon-aura-rotate 7s linear infinite;
}
.home-screen-tile.is-soon:hover .home-screen-tile-icon::before,
.home-screen-tile.is-soon:hover .home-screen-tile-icon::after {
opacity: 0; /* 近日公開タイルはオーラを出さない */
}
@keyframes home-icon-aura-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.15);
}
}
@keyframes home-icon-aura-rotate {
to {
transform: rotate(360deg);
}
}
.home-screen-tile-label {
font-size: 1rem;
font-weight: bold;
text-align: center;
line-height: 1.35;
/* アイコンが大きくなったぶん、ラベルは幅を抑えてアイコンの下にまとまるようにする。 */
max-width: 12rem;
margin-top: 0.1rem;
/* 明るい背景で読めるよう濃色＋白いにじみ影（ユーザー報告の視認性対策）。 */
color: #1e293b;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 4px rgba(255, 255, 255, 0.75);
}
/* ユーザー要望「近日公開／NEWバッジが小さく見づらい」→ 大きく・くっきりに。
近日公開は淡い半透明ではなく、濃いアンバー地＋濃い文字でコントラストを上げる。 */
.home-screen-tile-badge {
position: absolute;
/* 位置は管理者モードで微調整できる（--home-badge-offset-x/y、admin.js）。既定値はユーザー調整値。 */
top: calc(0.5rem + var(--home-badge-offset-y, 1.6rem));
right: calc(0.5rem + var(--home-badge-offset-x, 2rem));
font-size: 0.8rem;
font-weight: 800;
padding: 0.24rem 0.6rem;
border-radius: 999px;
background: rgba(250, 204, 21, 0.95);
border: 1px solid rgba(146, 100, 12, 0.7);
color: #3f2a00;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
/* 未読お知らせの「NEW」バッジ（ユーザー要望）。明るい背景でも目立つ赤＋白フチ＋鼓動。 */
.home-screen-tile-new-badge {
position: absolute;
/* 位置は管理者モードで微調整できる（--home-new-badge-offset-x/y、admin.js）。既定値はユーザー調整値。 */
top: calc(0.1rem + var(--home-new-badge-offset-y, 1.6rem));
right: calc(0.9rem + var(--home-new-badge-offset-x, 2rem));
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.06em;
padding: 0.16rem 0.5rem;
border-radius: 999px;
background: #ef4444;
color: #fff;
white-space: nowrap;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 2px 6px rgba(0, 0, 0, 0.4);
animation: home-new-badge-pulse 1.5s ease-in-out infinite;
}
@keyframes home-new-badge-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.14);
}
}
/* 続き162: ランク戦タイルの「今◯人が募集中」バッジ。NEWバッジと同じ配置の考え方で緑・下寄せ。 */
.home-screen-tile-waiting-badge {
position: absolute;
bottom: 0.5rem;
left: 50%;
transform: translateX(-50%);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.02em;
padding: 0.16rem 0.6rem;
border-radius: 999px;
background: #16a34a;
color: #fff;
white-space: nowrap;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 2px 6px rgba(0, 0, 0, 0.4);
animation: home-new-badge-pulse 1.5s ease-in-out infinite;
pointer-events: none;
}
/* 続き162: ランク戦「対戦相手が現れたら通知」のバナー（ranked-notify.js）。画面上部中央に固定。 */
#ranked-notify-banner {
position: fixed;
top: 0.8rem;
left: 50%;
transform: translateX(-50%);
z-index: 21000;
display: flex;
align-items: center;
gap: 0.7rem;
max-width: min(92vw, 34rem);
padding: 0.55rem 0.7rem 0.55rem 1rem;
background: linear-gradient(160deg, #14532d, #052e16);
border: 1px solid #22c55e;
border-radius: 0.7rem;
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
color: #eafff1;
font-size: 0.92rem;
animation: ranked-ready-pop 0.3s ease;
}
.ranked-notify-banner-text {
flex: 1;
line-height: 1.35;
}
.ranked-notify-banner-join {
flex-shrink: 0;
padding: 0.4rem 1rem;
border: none;
border-radius: 0.5rem;
background: linear-gradient(160deg, #4ade80, #16a34a);
color: #04240f;
font-weight: 800;
font-size: 0.9rem;
cursor: pointer;
}
.ranked-notify-banner-join:hover {
filter: brightness(1.08);
}
.ranked-notify-banner-close {
flex-shrink: 0;
padding: 0.2rem 0.4rem;
border: none;
background: transparent;
color: #a7f3c8;
font-size: 1.1rem;
cursor: pointer;
line-height: 1;
}
/* 図鑑／ルールブックの全画面版（codex-page.js）。ランキング/プロフィール全画面と同じ器。 */
#codex-page {
position: fixed;
inset: 0;
z-index: 1500;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 1rem;
background: radial-gradient(ellipse at top, #1e293b 0%, #0f172a 60%, #060a12 100%);
font-family: sans-serif;
color: #e2e8f0;
overflow-y: auto;
box-sizing: border-box;
}
#codex-page-back {
align-self: flex-start;
background: none;
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 0.4rem;
color: #e2e8f0;
padding: 0.35rem 0.8rem;
cursor: pointer;
font-size: 0.85rem;
}
#codex-page-back:hover {
background: rgba(56, 189, 248, 0.15);
border-color: rgba(56, 189, 248, 0.6);
}
#codex-page-title {
font-size: 1.4rem;
font-weight: bold;
letter-spacing: 0.06em;
margin: 0.4rem 0 1.2rem;
}
#codex-page-content {
width: min(72rem, 100%);
}
.codex-section-heading {
font-size: 1.05rem;
font-weight: bold;
color: #7dd3fc;
border-bottom: 1px solid rgba(148, 163, 184, 0.3);
padding-bottom: 0.3rem;
margin: 1.4rem 0 0.8rem;
}
.codex-section-heading:first-child {
margin-top: 0;
}
#home-screen-toast {
position: fixed;
left: 50%;
bottom: 2.2rem;
transform: translate(-50%, 0.6rem);
z-index: 9100;
background: rgba(15, 23, 32, 0.95);
border: 1px solid rgba(250, 204, 21, 0.5);
border-radius: 0.5rem;
padding: 0.6rem 1rem;
font-family: sans-serif;
font-size: 0.8rem;
color: #e2e8f0;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
white-space: nowrap;
}
#home-screen-toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
/* 対戦モード選択モーダル（home-screen.js openMatchChoiceModal、ユーザー要望2026-08-08）。
「CPUマッチ＆フレンドリーマッチ」を押すと出る、フレンドリー/CPUを選ぶ巨大モーダル。 */
#home-match-choice {
position: fixed;
inset: 0;
z-index: 9200;
display: flex;
align-items: center;
justify-content: center;
background: rgba(4, 8, 14, 0.72);
backdrop-filter: blur(3px);
font-family: sans-serif;
animation: home-match-choice-fade 0.2s ease-out;
}
@keyframes home-match-choice-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.home-match-choice-panel {
width: min(46rem, 94vw);
box-sizing: border-box;
padding: 2rem 1.6rem 1.6rem;
background: radial-gradient(1000px 300px at 50% -10%, rgba(56, 189, 248, 0.12), transparent 60%),
linear-gradient(160deg, rgba(20, 28, 40, 0.98), rgba(8, 12, 20, 0.99));
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 1rem;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
color: #e2e8f0;
text-align: center;
}
.home-match-choice-title {
font-size: 1.5rem;
font-weight: bold;
letter-spacing: 0.05em;
margin-bottom: 1.4rem;
}
.home-match-choice-options {
display: flex;
gap: 1.2rem;
justify-content: center;
flex-wrap: wrap;
}
.home-match-choice-option {
flex: 1 1 16rem;
min-width: 13rem;
max-width: 20rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1.6rem 1.2rem;
cursor: pointer;
color: #e6edf6;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 0.9rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, border-color 0.15s ease-out;
}
.home-match-choice-option:hover {
transform: translateY(-0.3rem);
border-color: rgba(56, 189, 248, 0.7);
box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.5), 0 0 1.2rem rgba(56, 189, 248, 0.25);
}
.home-match-choice-option-icon {
font-size: 3.4rem;
line-height: 1;
}
.home-match-choice-option-label {
font-size: 1.15rem;
font-weight: bold;
}
.home-match-choice-option-desc {
font-size: 0.82rem;
color: #9fb0c3;
line-height: 1.5;
}
.home-match-choice-cancel {
margin-top: 1.4rem;
background: rgba(148, 163, 184, 0.12);
border: 1px solid rgba(148, 163, 184, 0.6);
border-radius: 0.4rem;
color: #e2e8f0;
font-family: sans-serif;
font-size: 0.9rem;
font-weight: bold;
padding: 0.5rem 1.4rem;
cursor: pointer;
}
.home-match-choice-cancel:hover {
border-color: rgba(56, 189, 248, 0.8);
background: rgba(56, 189, 248, 0.18);
}
/* CPU戦の強さ選択（対戦モード選択モーダル内、ユーザー要望2026-08-09）。 */
.home-match-choice-difficulty {
margin-top: 1.4rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.55rem;
}
.home-match-choice-difficulty-label {
font-size: 0.9rem;
font-weight: bold;
color: #cbd5e1;
}
.home-match-choice-segment {
display: inline-flex;
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 0.5rem;
overflow: hidden;
}
.home-match-choice-segment-btn {
padding: 0.4rem 0.95rem;
background: rgba(255, 255, 255, 0.04);
border: none;
border-right: 1px solid rgba(148, 163, 184, 0.25);
color: #cbd5e1;
font-family: sans-serif;
font-size: 0.9rem;
font-weight: bold;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.home-match-choice-segment-btn:last-child {
border-right: none;
}
.home-match-choice-segment-btn:hover {
background: rgba(56, 189, 248, 0.15);
}
.home-match-choice-segment-btn.is-selected {
background: linear-gradient(160deg, #38bdf8, #0ea5e9);
color: #06202e;
}
.home-match-choice-difficulty-hint {
font-size: 0.75rem;
color: #8397ab;
line-height: 1.5;
max-width: 32rem;
}
/* CPU戦の「対戦ルール」4つ（続き506）。人数・強さのセグメントと違い、それぞれが独立した
入/切なので、1つずつ枠を持たせて折り返せるようにする（スマホでは2行になる）。 */
.home-match-choice-rules {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4rem;
}
.home-match-choice-rule-btn {
padding: 0.4rem 0.85rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 0.5rem;
color: #cbd5e1;
font-family: sans-serif;
font-size: 0.85rem;
font-weight: bold;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.home-match-choice-rule-btn:hover {
background: rgba(56, 189, 248, 0.15);
}
.home-match-choice-rule-btn.is-selected {
background: linear-gradient(160deg, #38bdf8, #0ea5e9);
border-color: rgba(56, 189, 248, 0.7);
color: #06202e;
}
/* ライトテーマ */
body.theme-light #home-match-choice {
background: rgba(60, 51, 38, 0.5);
}
body.theme-light .home-match-choice-panel {
background: linear-gradient(160deg, #fffdf7, #f3ecdd);
border-color: rgba(176, 141, 63, 0.4);
color: #3a3326;
}
body.theme-light .home-match-choice-option {
background: rgba(255, 253, 247, 0.9);
border-color: rgba(176, 141, 63, 0.4);
color: #3a3326;
}
body.theme-light .home-match-choice-option-desc {
color: #6b5c3c;
}
body.theme-light .home-match-choice-option:hover {
border-color: rgba(176, 141, 63, 0.9);
}
body.theme-light .home-match-choice-difficulty-label {
color: #6b5c3c;
}
body.theme-light .home-match-choice-segment {
border-color: rgba(176, 141, 63, 0.5);
}
body.theme-light .home-match-choice-segment-btn {
background: rgba(255, 253, 247, 0.9);
border-right-color: rgba(176, 141, 63, 0.35);
color: #6b5c3c;
}
body.theme-light .home-match-choice-segment-btn:hover {
background: rgba(176, 141, 63, 0.15);
}
body.theme-light .home-match-choice-segment-btn.is-selected {
background: linear-gradient(160deg, #d9b45a, #b8933f);
color: #3a2f15;
}
body.theme-light .home-match-choice-difficulty-hint {
color: #8a7a55;
}
/* ライトテーマの「← 戻る」ボタン（ユーザー報告2026-08-09「薄くて見づらい」）。
既定の淡いグレー文字だとアイボリー背景に沈むため、濃い文字＋金の枠＋淡い塗りにする。 */
body.theme-light .home-match-choice-cancel {
background: rgba(176, 141, 63, 0.12);
border-color: rgba(176, 141, 63, 0.7);
color: #4a3f28;
}
body.theme-light .home-match-choice-cancel:hover {
border-color: rgba(176, 141, 63, 1);
background: rgba(176, 141, 63, 0.22);
}
/* プロフィール／マイページの画面全体版（続き74、src/profile-page.js）。中身
（アバター・戦績等）はmy-page.jsのrenderMyPageBody()を呼んで作るため、器だけを
ホーム画面と揃えた見た目にする。 */
#profile-page {
position: fixed;
inset: 0;
/* 不具合#84: ショップ(#shop-panel z:2601)を開いたままオプションエリアのマイページを押すと、
マイページ(旧z:1500)がショップの裏に開いて見えなかった。ショップ/管理者パネル(2600)より
前面へ上げ、どこから開いても最前面に出す（閉じると元の画面＝ショップ/ホームへ戻る）。 */
z-index: 2650;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 1rem;
background: radial-gradient(ellipse at top, #1e293b 0%, #0f172a 60%, #060a12 100%);
font-family: sans-serif;
color: #e2e8f0;
overflow-y: auto;
box-sizing: border-box;
}
#profile-page-back {
align-self: flex-start;
background: none;
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 0.4rem;
color: #e2e8f0;
font-family: sans-serif;
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
cursor: pointer;
margin-bottom: 1rem;
}
#profile-page-back:hover {
border-color: rgba(56, 189, 248, 0.7);
background: rgba(56, 189, 248, 0.12);
}
#profile-page-title {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 1.4rem;
}
#profile-page-card {
width: min(24rem, 92vw);
background: rgba(15, 23, 32, 0.7);
border: 1px solid rgba(148, 163, 184, 0.3);
border-radius: 0.6rem;
padding: 1.2rem;
}
/* =========================================================================
ライトテーマ（body.theme-light）— 第1弾：マイページのみ。
ユーザー方針「事故防止のため従来のダークUIは残し、管理者トグルでライトに切り替える。
まずはマイページから」。ダーク既定には一切手を入れず、theme-light が付いている時だけ
アイボリー／羊皮紙＋ゴールド（王家）系に上書きする。アプリの明るい水彩＋金彩の
絵柄となじむ配色。インラインstyleで色指定された要素だけ !important を使う。
========================================================================= */
body.theme-light #profile-page {
background: url("../assets/backgrounds/page-bg-light.webp") center / cover no-repeat, #f0e8d6;
color: #3a3326;
}
body.theme-light #profile-page-title {
color: #3a3326;
}
body.theme-light #profile-page-back {
border-color: rgba(176, 141, 63, 0.5);
color: #6b5c3c;
}
body.theme-light #profile-page-back:hover {
border-color: rgba(176, 141, 63, 0.9);
background: rgba(176, 141, 63, 0.12);
}
body.theme-light #profile-page-card {
background: rgba(255, 253, 247, 0.92);
border: 1px solid rgba(176, 141, 63, 0.4);
box-shadow: 0 10px 30px rgba(120, 100, 60, 0.15);
}
/* 名前行・戦績行（インラインstyleの色を上書き）。行の値(.my-page-row-value)は
色指定インラインが無く親から継承するため、上でcolorを暗色にすれば自動で暗くなる。 */
body.theme-light .my-page-row {
border-bottom-color: rgba(176, 141, 63, 0.25) !important;
}
body.theme-light .my-page-row-label {
color: #8a7d63 !important;
}
body.theme-light .my-page-name-input {
background: #ffffff !important;
border-color: rgba(176, 141, 63, 0.6) !important;
color: #3a3326 !important;
}
/* 着せ替えボタン群（.my-page-cosmetic-* はスタイルシート側のクラスなので !important 不要）。 */
body.theme-light .my-page-cosmetics-title {
color: #6b5c3c;
}
body.theme-light .my-page-cosmetic-btn {
background: rgba(176, 141, 63, 0.12);
border-color: rgba(176, 141, 63, 0.45);
color: #3a3326;
}
body.theme-light .my-page-cosmetic-btn:hover {
background: rgba(176, 141, 63, 0.22);
border-color: rgba(176, 141, 63, 0.8);
}
/* アバター変更ボタン・名前の鉛筆・戦績ステータス文（いずれもインラインstyleの
薄い文字色のため、白背景では見えなくなる。theme-lightで暗色へ上書き）。 */
body.theme-light .my-page-change-btn {
background: rgba(176, 141, 63, 0.12) !important;
border-color: rgba(176, 141, 63, 0.45) !important;
color: #3a3326 !important;
}
body.theme-light .my-page-name-pencil {
color: #8a7d63 !important;
}
body.theme-light .my-page-status {
color: #6b5c3c !important;
}
/* モーダル版マイページ（#my-page-panel、インラインstyleのため !important）。 */
body.theme-light #my-page-panel {
background: rgba(255, 253, 247, 0.98) !important;
border-color: rgba(176, 141, 63, 0.4) !important;
color: #3a3326 !important;
box-shadow: 0 20px 50px rgba(120, 100, 60, 0.25) !important;
}
/* 共通の「×」閉じるボタン（.modal-close-x）は各ライトモーダルで薄い白のままだと見えづらい
ので暗色に（マイページ/ショップ/ルールブック/オンライン等すべてのライトモーダル共通）。 */
body.theme-light .modal-close-x {
color: #8a7d63;
}
body.theme-light .modal-close-x:hover {
color: #3a3326;
}
/* ---- ライトテーマ：ランキング画面（#ranking-page）。全てCSSクラス/id指定なので
!important不要。構造はマイページ全画面版と同じ（ゴールド系アクセント）。 ---- */
body.theme-light #ranking-page {
background: url("../assets/backgrounds/page-bg-light.webp") center / cover no-repeat, #f0e8d6;
color: #3a3326;
}
body.theme-light #ranking-page-title {
color: #3a3326;
}
body.theme-light #ranking-page-back {
border-color: rgba(176, 141, 63, 0.5);
color: #6b5c3c;
}
body.theme-light #ranking-page-back:hover {
border-color: rgba(176, 141, 63, 0.9);
background: rgba(176, 141, 63, 0.12);
}
body.theme-light #ranking-page-info-btn {
border-color: rgba(176, 141, 63, 0.6);
color: #8a7d63;
}
body.theme-light #ranking-page-info-btn:hover {
border-color: rgba(176, 141, 63, 0.9);
color: #a67c1a;
}
body.theme-light #ranking-page-status,
body.theme-light .ranking-page-empty {
color: #8a7d63;
}
body.theme-light .ranking-page-column-heading {
color: #a67c1a;
border-bottom-color: rgba(176, 141, 63, 0.35);
}
body.theme-light .ranking-page-row {
border-bottom-color: rgba(176, 141, 63, 0.2);
}
body.theme-light .ranking-page-row-rank {
color: #8a7d63;
}
body.theme-light .ranking-page-row.is-top1 .ranking-page-row-rank {
color: #b8860b; /* 金は白背景だと薄いのでダークゴールドへ */
}
body.theme-light .ranking-page-row.is-top2 .ranking-page-row-rank {
color: #6b7280; /* シルバーも白背景だと薄いので濃いグレーへ */
}
body.theme-light .ranking-page-row.is-self .ranking-page-row-name {
color: #a67c1a; /* is-selfの淡い黄名は白背景で見えないため暗いゴールドへ */
}
body.theme-light #ranking-info-modal {
background: rgba(255, 253, 247, 0.98);
border-color: rgba(176, 141, 63, 0.4);
color: #3a3326;
}
/* ---- ライトテーマ：オプションメニュー（右上ドロップダウン、#options-menu-panel）。
中身はCSSクラス/idなので !important 不要。 ---- */
body.theme-light #options-menu-panel {
background: rgba(255, 253, 247, 0.98);
border-color: rgba(176, 141, 63, 0.4);
color: #3a3326;
box-shadow: 0 10px 24px rgba(120, 100, 60, 0.25);
}
body.theme-light .options-menu-item {
color: #3a3326;
}
body.theme-light .options-menu-item:hover {
background: rgba(176, 141, 63, 0.18);
}
body.theme-light .options-menu-section-title,
body.theme-light .options-menu-sub-label,
body.theme-light .options-menu-details-title::before {
color: #a67c1a;
}
body.theme-light .options-menu-plain-group-header {
color: #3a3326;
border-bottom-color: rgba(176, 141, 63, 0.3);
}
body.theme-light .options-menu-detail-entry {
color: #3a3326;
background: rgba(176, 141, 63, 0.12);
border-color: rgba(176, 141, 63, 0.4);
}
body.theme-light .options-menu-detail-entry:hover {
background: rgba(176, 141, 63, 0.22);
border-color: rgba(176, 141, 63, 0.7);
}
body.theme-light .options-menu-detail-entry-hint {
color: #6b5c3c;
}
body.theme-light .options-menu-divider {
border-top-color: rgba(176, 141, 63, 0.3);
}
body.theme-light .options-menu-details {
border-color: rgba(176, 141, 63, 0.3);
}
body.theme-light .options-menu-reset-hint {
color: #8a7d63;
}
body.theme-light .options-menu-stats-link-card.is-linked .options-menu-stats-link-title {
color: #6b5c3c;
}
/* 折りたたみ見出し（音量・表示演出・自動処理タイマー・ショートカット）の薄い文字色や、
各ボタン（戻す／アカウント初期化／ショートカットキー）が白背景で読みづらかったのを暗色化
（ユーザー報告のライトモード視認性）。 */
body.theme-light .options-menu-details > summary {
color: #3a3326;
}
body.theme-light .options-menu-details {
border-color: rgba(176, 141, 63, 0.3);
}
body.theme-light .options-menu-divider {
border-top-color: rgba(176, 141, 63, 0.3);
}
body.theme-light .options-menu-stats-link-title {
color: #a67c1a;
}
body.theme-light .options-menu-section-reset-btn {
color: #6b5c3c;
background: rgba(176, 141, 63, 0.12);
border-color: rgba(176, 141, 63, 0.4);
}
body.theme-light .options-menu-section-reset-btn:hover {
background: rgba(176, 141, 63, 0.22);
color: #3a3326;
}
body.theme-light .options-menu-reset-btn {
color: #3a3326;
background: rgba(176, 141, 63, 0.14);
}
body.theme-light .options-menu-reset-btn:hover {
background: rgba(176, 141, 63, 0.24);
}
body.theme-light .options-menu-shortcut-key,
body.theme-light .options-menu-shortcut-clear {
color: #3a3326;
background: rgba(176, 141, 63, 0.14);
border-color: rgba(176, 141, 63, 0.4);
}
body.theme-light .options-menu-shortcut-key:hover,
body.theme-light .options-menu-shortcut-clear:hover {
background: rgba(176, 141, 63, 0.24);
}
body.theme-light .options-menu-item:hover,
body.theme-light .options-menu-shortcut-row.is-highlighted {
background: rgba(176, 141, 63, 0.18);
}
/* ---- ライトテーマ：オンライン対戦パネル（部屋一覧 #online-panel と待合 .online-lobby-card）。
中身はインライン指定が多いが、器を明るくすれば継承テキストは暗色になり読める。入力欄や
ボタン（暗色コントロール）はアイボリー地の上でもそのままで自然なので触らない。薄い
グレー/ゴールドの見出し類だけ暗色化する。 ---- */
body.theme-light #online-panel,
body.theme-light .online-lobby-card {
background: rgba(255, 253, 247, 0.98);
border-color: rgba(176, 141, 63, 0.4);
color: #3a3326;
box-shadow: 0 20px 50px rgba(120, 100, 60, 0.25);
}
body.theme-light .online-lobby-count {
color: #6b5c3c;
}
body.theme-light .online-lobby-waiting {
color: #a67c1a;
}
/* ---- ライトテーマ：図鑑の「山札一覧を開く」ボタン（インラインで白文字＝白地で見えない）。 ---- */
body.theme-light .codex-open-deck-btn {
background: rgba(176, 141, 63, 0.12) !important;
border-color: rgba(176, 141, 63, 0.5) !important;
color: #3a3326 !important;
}
/* ---- ライトテーマ：お知らせ／更新情報（#changelog-modal）。 ---- */
body.theme-light #changelog-modal {
background: url("../assets/backgrounds/page-bg-light.webp") center / cover no-repeat, #f0e8d6;
border-color: rgba(176, 141, 63, 0.4);
color: #3a3326;
box-shadow: 0 20px 50px rgba(120, 100, 60, 0.25);
}
body.theme-light .changelog-modal-title {
color: #a67c1a;
}
body.theme-light .changelog-entry {
border-top-color: rgba(176, 141, 63, 0.2);
}
body.theme-light .changelog-date {
color: #2563eb;
}
/* ---- ライトテーマ：チュートリアル（ヘルプから開始、#tutorial-callout）。スクリム(暗幕)は
注目を集める演出なのでダークのまま。説明ボックスだけライトに。 ---- */
body.theme-light #tutorial-callout {
background: rgba(255, 253, 247, 0.98);
border-color: rgba(176, 141, 63, 0.6);
color: #3a3326;
box-shadow: 0 20px 50px rgba(120, 100, 60, 0.28);
}
body.theme-light .tutorial-callout-title {
color: #a67c1a;
}
body.theme-light .tutorial-callout-footer,
body.theme-light .tutorial-callout-progress,
body.theme-light .tutorial-callout-skip {
color: #8a7d63;
}
body.theme-light .tutorial-card-example {
background: rgba(176, 141, 63, 0.08);
border-color: rgba(176, 141, 63, 0.3);
}
body.theme-light .tutorial-card-example-note {
color: #6b5c3c;
}
body.theme-light .tutorial-callout-back {
background: rgba(176, 141, 63, 0.14);
border-color: rgba(176, 141, 63, 0.4);
color: #3a3326;
}
/* ---- ライトテーマ：物語チュートリアル（tutorial-battle-ui.js、#tutorial-battle-callout）。
【2026-09-11・ユーザー報告「最初のチュートリアルはモーダルがダークになっている」】
あちらは自前の