/* =====================================================================
   game.css : このゲーム専用の見た目（index.html から読み込んでいます）

   見た目は「表参道 × ファッション誌」（設計書3章「表参道リニューアル」）。
   色・線の太さ・斜めの大きさ・動きの速さは、すぐ下の「デザインの値」に
   まとめてあります。ここを変えると、全部の画面がそろって変わります。

   大きさの数字は、ゲームの画面（横720×縦1280）の中での値です。

   ■ 斜めの部品の作り方（全部の画面で同じ）
     部品の中に <span class="frame shape-〇〇"></span> を1つ入れると、
       .frame::before … 線の色の形（いちばん外側）
       .frame::after  … 塗りの色の形（線の太さぶん内側）
     が重なって、「斜めに切ったパネル＋細い黒の線」になります。
     形は shape-cut（角を切る）・shape-hex（両はしがとがる）・shape-slant（平行四辺形）。
     pop を付けると右下にオレンジの影がつきます。
     .frame の中には文字を入れません（文字も形に切り取られるため）。
   ===================================================================== */

:root {
    /* ---- デザインの値 ここから ---- */

    /* 文字の形（data/others/fonts/ に入っている。fonts.css で読み込む）
       --font         … 日本語（角ゴシック Zen Kaku Gothic New）。会話の文字は Config.tjs の userFace でも決めているので2か所そろえる
       --font-display … 飾りの英数字（Playfair のイタリック）。ロゴ・選択肢の番号・LOVE UP!・END
       --font-label   … 小さな英字（Montserrat）。MENU・AUTO・LOVE AFTER SIX など
       --display-opsz … 飾りの英数字の「大きく見せる用の形」の強さ（大きいほど、線の太い細いの差が大きい）
       --number-opsz  … 番号（選択肢 01・セーブ 01・設定の音量）の形の強さ。1200 だと「4」がくずれた形になるので小さめ。
                        番号は、そろった高さの数字（lining-nums）で出す */
    --font: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
    --font-display: "Playfair", "Times New Roman", serif;
    --font-label: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --display-opsz: 1200;
    --number-opsz: 120;

    /* 色 */
    --c-orange: #FF5030;      /* メイン：ビビッドオレンジ（影・三角・しま・LOVE UP!） */
    --c-blue: #174ADC;        /* サブ：コバルトブルー（番号・MENU・しま・影） */
    --c-cream: #FFF6EA;       /* ベース：クリームホワイト（パネル・ボタンの地） */
    --c-ink: #202020;         /* 文字・細い線：ブラック */
    --c-white: #FFFFFF;
    --c-sub: #6B6B6B;         /* 控えめな文字（とじる・注意書き） */
    --c-on-orange: #D9381A;   /* 白い文字を乗せるオレンジ（名札・見出し・強調ボタン）。白い文字との見やすさの比 4.6：1 */
    --c-page: #FFF6EA;        /* 画面の外の余白の色（帯の絵が出るまで） */

    /* 線と形 */
    --line: 2px;              /* 細い黒の線 */
    --line-strong: 4px;       /* 選んだ選択肢のオレンジの線 */
    --cut: 30px;              /* 会話窓・パネルの角を斜めに切る大きさ */
    --slant: 16px;            /* 名札・見出しの斜めの傾き */
    --btn-slant: 22px;        /* ボタンの斜めの傾き */
    --point: 30px;            /* 選択肢の両はしのとがり */
    --pop: 8px;               /* オレンジの影のずれ */

    /* 選択肢・メニューのときの背景 */
    --choice-dim: 0.22;       /* 暗くする濃さ（0〜1） */
    --choice-blur: 3px;       /* ぼかし（0px でぼかさない） */
    /* 選択肢の並べ方（game.js の GAME.layoutChoices がここを読む） */
    --choice-h: 104px;        /* 選択肢1つの高さ */
    --choice-h-min: 84px;     /* 数が多くて入らないときの、いちばん小さい高さ */
    --choice-gap: 24px;       /* 選択肢どうしのすき間 */
    --choice-bottom: 1184px;  /* いちばん下の選択肢の、下のはしの位置 */
    --choice-top: 150px;      /* 見出しを入れて、ここより上には出さない */

    /* 動き */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);          /* 最初が速く、最後がゆっくり */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);    /* 少し行きすぎてもどる */
    --t-press: 120ms;         /* 押したときに縮む速さ */
    --press-scale: 0.96;      /* 押したときの大きさ（元の96%） */
    --t-panel: 200ms;         /* パネルが出る速さ */
    --t-choice: 300ms;        /* 選択肢が出る速さ */
    --t-choice-gap: 60ms;     /* 選択肢を1つずつずらす間隔 */
    --t-choice-out: 200ms;    /* 選んだあと、ほかの選択肢が消える速さ（macro_game.ks の [choice_end] の待ち時間と合わせる） */
    --t-loveup: 1600ms;       /* LOVE UP! の長さ。実際は settings.ks の tf.LOVEUP_TIME の値を game.js が入れる（こちらは予備） */
    --t-flash: 900ms;         /* スチルが出るときの光の長さ */
    --t-toast: 2400ms;        /* 「ギャラリーに追加されました」が出ている長さ */
    --t-logo: 700ms;          /* タイトルの文字・エンディングの文字が出る速さ */
    --t-backdrop: 800ms;      /* 画面の外の帯の絵が切り替わる速さ */
    --t-op-out: 300ms;        /* OPムービーが終わる・とばしたときに、すっと消える速さ（game.js がこの値を読む） */
    --t-logo-skip: 250ms;     /* 起動のロゴをタップでとばしたときに、すっと消える速さ（game.js がこの値を読む） */
    --t-logo-hold: 600ms;     /* ロゴのあと、OPの黒い幕が上に重なるまで、クリームの地を残す長さ（game.js がこの値を読む） */
    --t-logo-guard: 700ms;    /* ロゴをとばしたあと、続けてタップしてもOPまでとばされないようにする長さ（game.js がこの値を読む） */
    /* 起動のロゴがじわっと出る・消える長さは、settings.ks の tf.LOGO の time から game.js が決める（最大0.4秒） */

    /* 画面の外の帯（縦長のスマホの上下・パソコンの左右に、いまの背景をぼかして敷く） */
    --backdrop-blur: 28px;    /* ぼかしの強さ */
    --backdrop-white: 0.35;   /* 上に重ねるクリームの濃さ（0〜1）。大きいほど目立たなくなる */

    /* ---- デザインの値 ここまで ---- */
}


/* =====================================================================
   全体（スマホ用の細かい修正をふくむ）
   ===================================================================== */
html, body {
    background: var(--c-page) !important;   /* 縦長のスマホで上下にできる余白（ティラノの初期値は黒） */
    overscroll-behavior: none;              /* 画面を引っぱっても、ゴムのように伸びないようにする */
    -webkit-tap-highlight-color: transparent;
}
body { background: transparent !important; }          /* html の色の上に、帯の絵 #game_backdrop が見えるように */
#tyrano_base { background-color: transparent !important; }

/* game.js が作る部品は、ティラノの文字の設定が届かないので、ここで文字の形を決める */
.ui_bar_label, #game_gauge, .game_panel, .glink_button.btn_choice, .glink_button.btn_menu, .glink_button.skip_area,
.plate, .title_cover, .page_head, .loveup, #game_toast, .game_ending, .credits_roll, .tap_note,
.boot_notice, .boot_logo {
    font-family: var(--font);
}


/* =====================================================================
   共通の部品：斜めの形（.frame）と、オレンジの札（.plate）
   ===================================================================== */
.frame {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    --frame-line: var(--c-ink);      /* 線の色 */
    --frame-fill: var(--c-cream);    /* 塗りの色 */
}
.frame::before,
.frame::after {
    content: "";
    position: absolute;
}
.frame::before { inset: 0; background: var(--frame-line); --k: var(--k-out); }
.frame::after  { inset: var(--line); background: var(--frame-fill); --k: var(--k-in); }
.frame.pop { filter: drop-shadow(var(--pop) var(--pop) 0 var(--c-orange)); }

/* 形。--k-out は外側、--k-in は線の内側（線の太さが斜めの辺でも同じに見えるように少し小さく） */
.shape-cut   { --k-out: var(--cut);       --k-in: calc(var(--cut) - var(--line) * 0.59); }
.shape-hex   { --k-out: var(--point);     --k-in: calc(var(--point) - var(--line) * 0.5); }
.shape-slant { --k-out: var(--btn-slant); --k-in: calc(var(--btn-slant) - var(--line) * 0.3); }
.shape-cut::before, .shape-cut::after {
    clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
}
.shape-hex::before, .shape-hex::after {
    clip-path: polygon(var(--k) 0, calc(100% - var(--k)) 0, 100% 50%, calc(100% - var(--k)) 100%, var(--k) 100%, 0 50%);
}
.shape-slant::before, .shape-slant::after {
    clip-path: polygon(var(--k) 0, 100% 0, calc(100% - var(--k)) 100%, 0 100%);
}

/* オレンジの札（名札・選択肢の見出し・LOVE UP! のお知らせ・エンディング名）
   平行四辺形の札と、右はしの「///」。色は --plate-color（決めていなければ --c-on-orange） */
.chara_name_area, .plate {
    position: absolute;
    box-sizing: border-box;
    height: 56px;
    line-height: 56px !important;
    padding: 0 36px 0 32px;
    margin: 0 !important;
    z-index: 102;
    isolation: isolate;
    font-size: 28px;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    color: var(--c-white) !important;
    white-space: nowrap;
    text-shadow: none !important;
}
.chara_name_area::before, .plate::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--plate-color, var(--c-on-orange));
    clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
}
.chara_name_area::after, .plate::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(100% - 6px);
    width: 50px;
    height: 100%;
    color: var(--plate-color, var(--c-on-orange));
    background: repeating-linear-gradient(106deg, currentColor 0 7px, transparent 7px 14px);
    clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
}


/* =====================================================================
   会話窓（ティラノの .message_outer）と名札（.chara_name_area）
   位置と大きさは macro_game.ks の [msg_setup]
   ===================================================================== */
.message0_fore .message_outer {
    background: transparent !important;     /* ティラノが付ける色・透明度を上書き */
    border: none !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    filter: drop-shadow(var(--pop) var(--pop) 0 var(--c-orange));   /* 右下のオレンジの影 */
    --k-out: var(--cut);
    --k-in: calc(var(--cut) - var(--line) * 0.59);
}
.message0_fore .message_outer::before,
.message0_fore .message_outer::after {
    content: "";
    position: absolute;
    clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
}
.message0_fore .message_outer::before { inset: 0; background: var(--c-ink); --k: var(--k-out); }
/* 塗りの中に、右上の青いしま「/////」を描く */
.message0_fore .message_outer::after {
    inset: var(--line);
    --k: var(--k-in);
    background:
        repeating-linear-gradient(106deg, var(--c-blue) 0 6px, transparent 6px 13px) right 46px top 18px / 58px 12px no-repeat,
        var(--c-cream);
}

/* 名札：話しているキャラの色（settings.ks の tf.CHARA_COLOR。game.js が --name-a を入れる） */
.chara_name_area { --plate-color: var(--name-a, var(--c-on-orange)); }
.chara_name_area:empty { display: none; }   /* 名前がないとき（地の文）は名札ごと消す */

/* 「次へ」の印（[glyph html=...]）：オレンジの三角が小さく弾む */
@keyframes next-bob {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(5px); }
}
.next_mark {
    display: block;
    width: 26px;
    height: 30px;
    background: var(--c-orange);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    animation: next-bob 900ms ease-in-out infinite;
}


/* =====================================================================
   上のバー（AUTO・SKIP・LOG・MENU）
   押せる場所はティラノの [button]（すき通った ui_bar_hit.png）。見た目は、そのすぐ後ろに
   game.js（GAME.topbar）が置く .ui_bar_label が描く（押せる場所は見た目より上下に10ずつ大きい）
   オート中・スキップ中は、ティラノが画像を ui_bar_on.png に差し替えるので、それを見てオレンジにする
   ===================================================================== */
img.ui_bar_hit {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}
.ui_bar_label {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    isolation: isolate;
    pointer-events: none;            /* タップは後ろの [button] に通す */
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.12em;
    color: var(--c-ink);
    z-index: 99999999;
    transition: transform var(--t-press) var(--ease-out);
}
.ui_bar_label .frame { inset: 10px 0; --k-out: var(--slant); --k-in: calc(var(--slant) - var(--line) * 0.3); }
img.ui_bar_hit[src*="ui_bar_on"] + .ui_bar_label { color: var(--c-white); }
img.ui_bar_hit[src*="ui_bar_on"] + .ui_bar_label .frame { --frame-fill: var(--c-on-orange); --frame-line: var(--c-on-orange); }
img.ui_bar_hit:active + .ui_bar_label { transform: scale(0.94); }
/* MENU：右はしの青いつまみ（右側は画面のはしまで） */
.ui_bar_label.is-menu { color: var(--c-white); letter-spacing: 0.3em; padding-left: 12px; justify-content: flex-start; }
.ui_bar_label.is-menu .frame { inset: 14px 0; --frame-fill: var(--c-blue); --frame-line: var(--c-blue); }
.ui_bar_label.is-menu .frame::before,
.ui_bar_label.is-menu .frame::after { clip-path: polygon(var(--k) 0, 100% 0, 100% 100%, 0 100%); }
.ui_bar_label .burger {
    display: block;
    width: 26px;
    height: 18px;
    margin-left: 14px;
    background:
        linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat,
        linear-gradient(currentColor 0 0) 0 50% / 100% 2px no-repeat,
        linear-gradient(currentColor 0 0) 0 100% / 100% 2px no-repeat;
}


/* =====================================================================
   右上の好感度（ふだんは出さない。settings.ks の tf.GAUGE_SHOW を true にすると出る）
   ===================================================================== */
#game_gauge {
    position: absolute;
    left: 420px;
    top: 104px;              /* 上のバーのすぐ下 */
    width: 280px;
    height: 72px;
    box-sizing: border-box;
    padding: 0 28px 0 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    isolation: isolate;
    z-index: 99999998;       /* 上のボタンのすぐ下。セーブ画面などよりは下 */
    pointer-events: none;    /* 押せない（タップは後ろのゲームに通す） */
    transition: opacity var(--t-panel) ease;
}
#game_gauge .frame { --k-out: var(--slant); --k-in: calc(var(--slant) - var(--line) * 0.3); }
#game_gauge .gauge_heart { width: 34px; height: 34px; flex: none; }
#game_gauge .gauge_heart path { fill: var(--gauge-a, var(--c-orange)); }
#game_gauge .gauge_body { flex: 1; min-width: 0; }
#game_gauge .gauge_name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--c-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#game_gauge .gauge_bar {
    position: relative;
    height: 10px;
    margin-top: 8px;
    border: var(--line) solid var(--c-ink);
    background: var(--c-white);
    transform: skewX(-20deg);
}
#game_gauge .gauge_fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: var(--gauge-a, var(--c-orange));
    transition: width 600ms var(--ease-out);
}
#game_gauge .gauge_fill.no-anim { transition: none; }
#game_gauge_label {
    position: absolute;
    right: 28px;
    top: 184px;
    padding: 4px 16px;
    font: italic 900 24px/1 var(--font-display);
    font-variation-settings: "opsz" var(--display-opsz);
    color: var(--c-white);
    background: var(--gauge-a, var(--c-orange));
    z-index: 99999998;
    pointer-events: none;
    transition: opacity var(--t-panel) ease, transform var(--t-panel) var(--ease-out);
}
#game_gauge_label.is-down { background: var(--c-sub); }
#game_gauge.is-hidden, #game_gauge_label.is-hidden { opacity: 0; }
#game_gauge_label.is-hidden { transform: translateY(-8px); }


/* =====================================================================
   選択肢（[choice_dim]・[choice]・[choice_end]）
   ===================================================================== */
/* 背景だけ少し暗く・少しぼかす（game.js が背景のレイヤーに置く。キャラは暗くしない） */
@keyframes game-fade-in { from { opacity: 0; } to { opacity: 1; } }
.choice_veil {
    position: absolute;
    left: 0; top: 0;
    width: 720px;
    height: 1280px;
    background: rgba(32, 32, 32, var(--choice-dim));
    -webkit-backdrop-filter: blur(var(--choice-blur));
    backdrop-filter: blur(var(--choice-blur));
    pointer-events: none;
    animation: game-fade-in 160ms ease both;
}
/* 「どう答える？」の見出し（free レイヤー。[cm] で消える） */
.plate.choice_head {
    height: 60px;
    line-height: 60px !important;
    font-size: 30px;
    padding: 0 40px 0 34px;
    z-index: 99999999;
    pointer-events: none;
    animation: choice-in var(--t-choice) var(--ease-out) backwards;
}
/* 選択肢のボタン（glink に btn_choice が付いたもの。中身は game.js の GAME.choiceHtml） */
.glink_button.btn_choice {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 56px 0 52px !important;
    margin: 0 !important;
    isolation: isolate;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    color: var(--c-ink) !important;
    text-shadow: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: transform var(--t-press) var(--ease-out);
    animation: choice-in var(--t-choice) var(--ease-out) backwards;   /* 1つずつのずらしは game.js が animation-delay で入れる */
}
@keyframes choice-in {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: none; }
}
.btn_choice .choice_no {
    flex: none;
    display: flex;
    align-items: center;
    min-width: 64px;
    white-space: nowrap;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 46px;
    font-variant-numeric: lining-nums;
    font-variation-settings: "opsz" var(--number-opsz);
    line-height: 1;
    color: var(--c-blue);
}
/* 番号のあとの斜めの細い線「/」 */
.btn_choice .choice_no::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 40px;
    margin-left: 14px;
    background: var(--c-ink);
    transform: skewX(-24deg);
}
.btn_choice .choice_text { flex: 1; min-width: 0; padding-left: 26px; }
/* 29文字以上の文は少し小さくして、2行に収める（34文字くらいまで。game.js が is-long を付ける） */
.btn_choice .choice_text.is-long { font-size: 26px; line-height: 1.25; }
.glink_button.btn_choice:active { transform: scale(var(--press-scale)); top: 0; }
@media (hover: hover) and (pointer: fine) {
    .btn_choice:hover .frame { --frame-line: var(--c-orange); }
}
/* 選んだ選択肢：オレンジの太い線と、右下にずれた影。少しはずむ（ティラノが glink_button_clicked を付ける） */
.btn_choice.glink_button_clicked .frame { --frame-line: var(--c-orange); }
.btn_choice.glink_button_clicked .frame::before { inset: -2px calc(var(--pop) * -1) calc(var(--pop) * -1) -2px; }
.btn_choice.glink_button_clicked .frame::after { inset: var(--line-strong); }
.glink_button.btn_choice.glink_button_clicked { animation: choice-pick 240ms var(--ease-spring); }
@keyframes choice-pick {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}
/* 選んだあと：もう押せない。ほかのボタンはすっと消える（game.js が is-locked・is-faded を付ける） */
.btn_choice.is-locked { pointer-events: none; }
.btn_choice.is-faded, .choice_head.is-faded { opacity: 0; transition: opacity var(--t-choice-out) ease; }


/* =====================================================================
   ボタン（[btn]。タイトル・おまけ・エンディング・ギャラリーなど。中身は game.js の GAME.btnHtml）
   ===================================================================== */
.glink_button.btn_menu {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 48px !important;
    margin: 0 !important;
    isolation: isolate;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.3em;
    color: var(--c-ink) !important;
    text-shadow: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: transform var(--t-press) var(--ease-out);
}
.btn_menu.has_icon { padding: 0 64px 0 128px !important; }
.btn_menu .btn_icon {
    position: absolute;
    left: 14px;
    top: 8px;
    bottom: 8px;
    width: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-white);
    background: var(--btn-accent, var(--c-orange));
    clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}
.btn_menu .btn_icon svg { width: 34px; height: 34px; }
.btn_menu.accent_blue { --btn-accent: var(--c-blue); }
.btn_menu .btn_chev {
    position: absolute;
    right: 40px;
    top: 50%;
    width: 14px;
    height: 14px;
    border-top: 3px solid var(--c-orange);
    border-right: 3px solid var(--c-orange);
    transform: translateY(-50%) rotate(45deg);
}
.glink_button.btn_menu:active { transform: translate(2px, 2px) scale(0.98); top: 0; }
@media (hover: hover) and (pointer: fine) {
    .btn_menu:hover .frame { --frame-line: var(--c-orange); }
}
/* 強調ボタン（「中断したところから」「はじめる」など。cls="primary"） */
.glink_button.btn_menu.primary { color: var(--c-white) !important; }
.btn_menu.primary .frame { --frame-fill: var(--c-on-orange); --frame-line: var(--c-ink); }
.btn_menu.primary .btn_icon { background: var(--c-ink); }
.btn_menu.primary .btn_chev { border-color: var(--c-white); }
/* 7文字以上のボタンは、字の間をつめる（[btn] が is-long を付ける） */
.glink_button.btn_menu.is-long { letter-spacing: 0.08em; }
/* 押したあと、ほかのボタンを押せないようにする間（ティラノの glink の決まり）も見た目は変えない */
.btn_menu.glink_button_clicked .frame { --frame-line: var(--c-orange); }


/* =====================================================================
   タイトルの表紙（game.js の GAME.titleCover がレイヤー1に作る。文字は settings.ks の tf.TITLE_TEXT）
   --title-shift … 「中断したところから」があるときに、キャッチなどを上へずらす量（game.js が入れる）
   ===================================================================== */
.title_cover { position: absolute; left: 0; top: 0; width: 720px; height: 1280px; pointer-events: none; --title-shift: 0px; color: var(--c-ink); }
.title_cover > * { position: absolute; }
.tc_panel_bottom { left: 0; top: 0; width: 720px; height: 1280px; background: var(--c-cream);
    clip-path: polygon(0 calc(900px - var(--title-shift)), 100% calc(744px - var(--title-shift)), 100% 100%, 0 100%); }
.tc_panel_top { left: 0; top: 0; width: 520px; height: 330px; background: var(--c-cream); clip-path: polygon(0 0, 100% 0, 52% 100%, 0 100%); }
.tc_corner { left: 0; top: 0; width: 250px; height: 120px; background: var(--c-orange); clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); }
.tc_blue { left: 470px; top: 0; width: 250px; height: 64px; background: var(--c-blue); clip-path: polygon(36px 0, 100% 0, 100% 100%, 0 100%); }
.tc_kicker { left: 30px; top: 18px; font: 600 14px/1.55 var(--font-label); letter-spacing: 0.34em; }
.tc_kicker::after { content: ""; display: block; width: 22px; height: 2px; margin-top: 8px; background: var(--c-ink); }
.tc_logo { left: 18px; top: 82px; white-space: nowrap; font: italic 700 100px/1 var(--font-display); letter-spacing: -0.03em; font-variation-settings: "opsz" var(--display-opsz); }
.tc_logo_sub { left: 34px; top: 186px; font: 800 46px/0.96 var(--font-label); letter-spacing: -0.01em; color: var(--c-blue); }
.tc_side { left: 32px; top: 300px; font: 600 13px/1.95 var(--font-label); letter-spacing: 0.32em; }
.tc_side::after { content: ""; display: block; width: 22px; height: 2px; margin-top: 6px; background: var(--c-ink); }
.tc_line { height: 2px; background: var(--c-ink); transform-origin: left center; }
.tc_catch { left: 54px; top: calc(548px - var(--title-shift)); white-space: nowrap; font-weight: 900; transform: skewX(-6deg); }
.tc_catch .l1, .tc_catch .l2 { display: block; font-size: 82px; text-shadow: 0 0 14px var(--c-cream), 0 0 28px var(--c-cream); }
.tc_catch .l1 { line-height: 1.05; letter-spacing: 0.02em; }
.tc_catch .l2 { line-height: 1.1; letter-spacing: 0.01em; margin-left: 40px; }
.tc_catch .accent { display: inline-block; font-size: 1.36em; color: var(--c-orange); transform: skewX(-8deg) translateY(4px); margin-right: 2px; }
.tc_swoosh { left: 150px; top: calc(770px - var(--title-shift)); width: 470px; height: 40px; overflow: visible; }
.tc_swoosh path { fill: none; stroke: var(--c-orange); stroke-width: 5; stroke-linecap: round; }
.tc_tagline { left: 0; width: 720px; top: calc(790px - var(--title-shift)); display: flex; align-items: center; justify-content: center; gap: 22px; font: 600 20px/1 var(--font-label); letter-spacing: 0.5em; }
.tc_tagline::before, .tc_tagline::after { content: ""; width: 54px; height: 2px; background: var(--c-ink); }
.tc_tagline .accent { color: var(--c-orange); font-style: italic; font-weight: 800; }
.tc_dots { width: 110px; height: 90px; background: radial-gradient(var(--dot-color, var(--c-blue)) 2.2px, transparent 2.6px) 0 0 / 12px 12px;
    -webkit-mask-image: linear-gradient(110deg, #000 30%, transparent 95%); mask-image: linear-gradient(110deg, #000 30%, transparent 95%); }
.tc_shape { background: var(--shape-color, var(--c-orange)); }
.tc_shape.is-blue { --shape-color: var(--c-blue); }
.tc_note { left: 0; width: 720px; top: 1236px; text-align: center; font-size: 18px; font-weight: 500; color: var(--c-sub); letter-spacing: 0.04em; }
/* 表紙が出るときの動き（最初に開いたときだけ。game.js が is-enter を付ける） */
@keyframes tc-slide { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@keyframes tc-pop { from { opacity: 0; transform: skewX(-6deg) translateY(24px) scale(0.92); } to { opacity: 1; transform: skewX(-6deg); } }
@keyframes tc-draw { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }
.title_cover.is-enter .tc_corner, .title_cover.is-enter .tc_panel_top, .title_cover.is-enter .tc_blue { animation: game-fade-in 300ms ease both; }
.title_cover.is-enter .tc_logo, .title_cover.is-enter .tc_logo_sub, .title_cover.is-enter .tc_kicker, .title_cover.is-enter .tc_side { animation: tc-slide var(--t-logo) var(--ease-out) 120ms both; }
.title_cover.is-enter .tc_catch { animation: tc-pop var(--t-logo) var(--ease-spring) 320ms both; }
.title_cover.is-enter .tc_swoosh path { stroke-dasharray: 520; animation: tc-draw 500ms var(--ease-out) 760ms both; }
.title_cover.is-enter .tc_tagline { animation: game-fade-in 400ms ease 900ms both; }


/* =====================================================================
   見出し（おまけ・ギャラリー。game.js の GAME.pageHead）と、タップ開始画面の文字
   ===================================================================== */
.page_head {
    position: absolute;
    left: 0;
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 18px 64px 18px 44px;
    isolation: isolate;
    pointer-events: none;
}
/* どんな背景の上でも読めるように、クリームの札を敷く（右はしは斜め） */
.page_head::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--c-cream);
    clip-path: polygon(0 0, 100% 0, calc(100% - 36px) 100%, 0 100%);
}
.page_head .en { font: italic 900 76px/1 var(--font-display); font-variation-settings: "opsz" var(--display-opsz); color: var(--c-ink); }
.page_head .ja { font-size: 24px; font-weight: 700; letter-spacing: 0.2em; color: var(--c-on-orange); }
.tap_note { text-shadow: none !important; letter-spacing: 0.08em; }


/* =====================================================================
   OP・エンドロールの「タップでとばす」（画面全体が押せる、すき間の glink）
   ===================================================================== */
.glink_button.skip_area {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    box-sizing: border-box !important;
    padding: 0 36px 40px !important;
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    color: var(--c-ink) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: 0 0 6px var(--c-cream), 0 0 12px var(--c-cream) !important;
}


/* =====================================================================
   OPムービー（game.js の 16.  op.ks の [op_movie]）
     ゲームの画面いっぱいに黒い幕を敷き、その上にムービーを流す。タップはここで受ける
     「タップでとばす」は、上の skip_area と同じ見た目
     「タップでOPを再生」は、ブラウザに自動再生を止められたときだけ出る（.is-waiting）
   ===================================================================== */
.op_movie {
    position: absolute;
    left: 0; top: 0;
    width: 720px;
    height: 1280px;
    z-index: 100000000;      /* いちばん上（LOVE UP! と同じ） */
    background: #000;
    font-family: var(--font);
    cursor: pointer;
    animation: op-in 300ms ease-out;
    transition: opacity var(--t-op-out) ease;
}
.op_movie.is-out { opacity: 0; pointer-events: none; }
@keyframes op-in { from { opacity: 0; } }
.op_movie video {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;       /* 縦横の比がちがうムービーでも、黒い帯を出さずに画面いっぱいにする */
    background: #000;
    pointer-events: none;
}
.op_movie .op_skip {
    position: absolute;
    right: 0; bottom: 0;
    padding: 24px 36px 40px 48px;   /* 押しやすいように、字のまわりも押せる場所にする */
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--c-ink);
    text-shadow: 0 0 6px var(--c-cream), 0 0 12px var(--c-cream);
}
.op_movie .op_start {
    display: none;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    gap: 18px;
    padding: 28px 48px;
    white-space: nowrap;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--c-ink);
    background: var(--c-cream);
    border: var(--line) solid var(--c-ink);
    box-shadow: var(--pop) var(--pop) 0 var(--c-orange);
}
.op_movie.is-waiting .op_start { display: flex; }
.op_movie .op_start_icon {
    width: 0; height: 0;
    border-left: 26px solid var(--c-orange);
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
}


/* =====================================================================
   起動のロゴと注意書き（game.js の 17。first.ks から使う）
     注意書き（.boot_notice）… タップ開始画面の真ん中あたりに出す、クリームの札＋細い黒の線
                                 文は settings.ks の tf.NOTICE_TEXT
     ロゴ（.boot_logo）……… 画面いっぱいのクリームの地の真ん中。じわっと出て、じわっと消える
                                 中身は settings.ks の tf.LOGO。タップでとばせる
     動きは「じわっと出る・消える」だけなので、「視差効果を減らす」設定のスマホでも同じ
   ===================================================================== */
.boot_notice {
    position: absolute;
    left: 50%;
    top: 600px;               /* 札の上のはしの位置（上の飾りの線・下の「タップ」の案内と重ならない高さ） */
    transform: translateX(-50%);
    width: max-content;
    max-width: 600px;         /* 文が長いときは、この幅で折り返す */
    box-sizing: border-box;
    padding: 34px 52px;
    isolation: isolate;
    pointer-events: none;     /* 札は押せない（下の「はじめる」を押す） */
}
.boot_notice_text {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--c-ink);
    text-shadow: none;
}

.boot_logo {
    position: absolute;
    left: 0; top: 0;
    width: 720px;
    height: 1280px;
    z-index: 100000000;       /* いちばん上（OPムービーと同じ。あとから出るOPムービーは、この上に重なる） */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-cream);
    cursor: pointer;
}
.boot_logo_mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 600px;
    animation: boot-logo-in var(--t-logo-fade, 400ms) ease-out;
    transition: opacity var(--t-logo-fade, 400ms) ease-in;
}
@keyframes boot-logo-in { from { opacity: 0; } }
.boot_logo.is-out .boot_logo_mark { opacity: 0; }
.boot_logo.is-quick .boot_logo_mark { transition-duration: var(--t-logo-skip); }
/* 文字のロゴ（仮の名前）：飾りの英字（Playfair のイタリック）の黒＋オレンジの短い線 */
.boot_logo_text {
    font: italic 900 72px/1.15 var(--font-display);
    font-variation-settings: "opsz" var(--display-opsz);
    letter-spacing: 0.01em;
    color: var(--c-ink);
    text-align: center;
    overflow-wrap: anywhere;  /* 長い名前でも、画面からはみ出さない */
}
.boot_logo_line {
    width: 96px;
    height: 8px;
    background: var(--c-orange);
    transform: skewX(-30deg);
}
/* ロゴをとばしたあとの、透明な「タップよけ」（--t-logo-guard の間だけ、OPより上に置く） */
.boot_logo_guard {
    position: absolute;
    left: 0; top: 0;
    width: 720px;
    height: 1280px;
    z-index: 100000001;
    background: transparent;
}
/* 画像のロゴ（tf.LOGO の image）：画面の真ん中に、はみ出さない大きさで出す */
.boot_logo_image {
    display: block;
    max-width: 600px;
    max-height: 600px;
    object-fit: contain;
}


/* =====================================================================
   パネル（≡メニュー・確認・設定。game.js が作る）
   ===================================================================== */
.game_veil {
    position: absolute;
    left: 0; top: 0;
    width: 720px;
    height: 1280px;
    background: rgba(32, 32, 32, var(--choice-dim));
    -webkit-backdrop-filter: blur(var(--choice-blur));
    backdrop-filter: blur(var(--choice-blur));
}
@keyframes game-panel-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
.game_panel {
    position: absolute;
    left: 64px;
    width: 592px;
    box-sizing: border-box;
    padding: 48px 48px 34px;
    isolation: isolate;
    color: var(--c-ink);
    animation: game-panel-in var(--t-panel) var(--ease-out);
}
.game_panel h2 { margin: 0 0 30px; display: flex; align-items: baseline; gap: 18px; font-weight: 700; }
.game_panel h2 .en { font: italic 900 56px/1 var(--font-display); font-variation-settings: "opsz" var(--display-opsz); color: var(--c-ink); }
.game_panel h2 .ja { font-size: 22px; font-weight: 700; letter-spacing: 0.2em; color: var(--c-on-orange); }
.game_panel h2::after { content: ""; flex: 1; height: 2px; background: var(--c-ink); align-self: center; }
.game_panel h2.is-text { font-size: 34px; font-weight: 900; }          /* 確認の見出し（日本語だけ） */
.game_panel h2.is-text::after { display: none; }
.game_panel p { margin: 0 0 30px; font-size: 24px; line-height: 1.7; }
.game_panel .panel_btn {
    position: relative;
    isolation: isolate;
    height: 84px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.16em;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: transform var(--t-press) var(--ease-out);
}
.game_panel .panel_btn .frame { --k-out: 20px; --k-in: calc(20px - var(--line) * 0.3); }
.game_panel .panel_btn:active { transform: translate(2px, 2px) scale(0.98); }
@media (hover: hover) and (pointer: fine) {
    .game_panel .panel_btn:hover .frame { --frame-line: var(--c-orange); }
}
.game_panel .panel_btn.primary { color: var(--c-white); }
.game_panel .panel_btn.primary .frame { --frame-fill: var(--c-on-orange); }
.game_panel .panel_btn.small { font-size: 23px; letter-spacing: 0.06em; }
.game_panel .row { display: flex; gap: 20px; }
.game_panel .row .panel_btn { flex: 1; margin-bottom: 0; }
.game_panel .game_close {
    margin-top: 6px;
    padding: 10px 0;
    text-align: center;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--c-sub);
    cursor: pointer;
}

/* 設定（BGM・効果音の音量。game.js の GAME.openSettings） */
.game_settings .game_slider { display: block; margin: 0 0 34px; }
.game_settings .lab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 26px; font-weight: 700; }
.game_settings .lab .val { font: italic 700 36px/1 var(--font-display); font-variant-numeric: lining-nums; font-variation-settings: "opsz" var(--number-opsz); color: var(--c-orange); }
/* スライダー：指で動かしやすいように、つまみを大きくしている */
.game_settings input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 56px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    touch-action: none;    /* 動かしている間に、画面がスクロールしないようにする */
}
.game_settings input[type=range]:focus { outline: none; }
.game_settings input[type=range]::-webkit-slider-runnable-track {
    height: 20px;
    box-sizing: border-box;
    border: var(--line) solid var(--c-ink);
    background: linear-gradient(var(--c-orange) 0 0) 0 0 / var(--val, 0%) 100% no-repeat, var(--c-white);
}
.game_settings input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 50px;
    margin-top: -17px;
    box-sizing: border-box;
    border: var(--line) solid var(--c-ink);
    border-radius: 0;
    background: var(--c-cream);
    box-shadow: 4px 4px 0 var(--c-blue);
}
.game_settings input[type=range]::-moz-range-track {
    height: 20px;
    box-sizing: border-box;
    border: var(--line) solid var(--c-ink);
    background: var(--c-white);
}
.game_settings input[type=range]::-moz-range-progress { height: 16px; background: var(--c-orange); }
.game_settings input[type=range]::-moz-range-thumb {
    width: 40px;
    height: 50px;
    box-sizing: border-box;
    border: var(--line) solid var(--c-ink);
    border-radius: 0;
    background: var(--c-cream);
    box-shadow: 4px 4px 0 var(--c-blue);
}
.game_settings p.note { margin: -6px 0 22px; font-size: 21px; text-align: center; color: var(--c-sub); }


/* =====================================================================
   セーブ・ロード・会話ログの画面（ティラノ標準の画面を、新しい見た目に上書き）
   ===================================================================== */
#menu_save_wrapper, #menu_load_wrapper, #menu_backlog_wrapper {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: radial-gradient(rgba(23, 74, 220, 0.16) 2px, transparent 2.4px) 0 0 / 18px 18px, var(--c-cream);
    font-family: var(--font) !important;
    animation: game-panel-in var(--t-panel) var(--ease-out);
}
#menu_save_wrapper, #menu_load_wrapper { padding-top: 150px; }
/* 標準の背景画像・見出し画像・スクロール矢印は使わない */
#menu_save_wrapper .img_bg_base, #menu_load_wrapper .img_bg_base, #menu_backlog_wrapper .img_bg_base,
#menu_save_wrapper .img_label, #menu_load_wrapper .img_label, #menu_backlog_wrapper .img_label,
#menu_save_wrapper .button_smart, #menu_load_wrapper .button_smart, #menu_backlog_wrapper .button_smart {
    display: none !important;
}
/* 見出し「SAVE セーブ」（英字は ::before、日本語は ::after） */
#menu_save_wrapper::before, #menu_load_wrapper::before, #menu_backlog_wrapper::before {
    position: absolute;
    left: 40px;
    top: 38px;
    font: italic 900 64px/1 var(--font-display);
    font-variation-settings: "opsz" var(--display-opsz);
    color: var(--c-ink);
}
#menu_save_wrapper::after, #menu_load_wrapper::after, #menu_backlog_wrapper::after {
    position: absolute;
    top: 64px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--c-on-orange);
}
#menu_save_wrapper::before    { content: "SAVE"; }
#menu_load_wrapper::before    { content: "LOAD"; }
#menu_backlog_wrapper::before { content: "LOG"; }
#menu_save_wrapper::after     { content: "セーブ"; left: 236px; }
#menu_load_wrapper::after     { content: "ロード"; left: 236px; }
#menu_backlog_wrapper::after  { content: "これまでの会話"; left: 186px; }

/* 「とじる」（右上）。標準のボタン画像は見えなくして、上に文字のボタンを重ねる */
#menu_save_wrapper .menu_item, #menu_load_wrapper .menu_item, #menu_backlog_wrapper .menu_item {
    position: absolute !important;
    float: none !important;
    right: 30px;
    top: 40px;
    width: 170px;
    height: 72px;
    margin: 0 !important;
    z-index: 10;
    isolation: isolate;
    transition: transform var(--t-press) var(--ease-out);
}
#menu_save_wrapper .menu_item::before, #menu_load_wrapper .menu_item::before, #menu_backlog_wrapper .menu_item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(var(--c-cream) 0 0) var(--line) var(--line) / calc(100% - var(--line) * 2) calc(100% - var(--line) * 2) no-repeat,
        var(--c-ink);
    clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
#menu_save_wrapper .menu_item:active, #menu_load_wrapper .menu_item:active, #menu_backlog_wrapper .menu_item:active {
    transform: translate(2px, 2px) scale(0.98);
}
#menu_save_wrapper .menu_item::after, #menu_load_wrapper .menu_item::after, #menu_backlog_wrapper .menu_item::after {
    content: "とじる";
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--c-ink);
    pointer-events: none;
}
#menu_save_wrapper .menu_close, #menu_load_wrapper .menu_close, #menu_backlog_wrapper .menu_close {
    position: absolute;
    left: 0; top: 0;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
}

/* セーブデータの一覧（標準の表の形をやめて、上から並べる） */
#menu_save_wrapper .area_save_list, #menu_load_wrapper .area_save_list {
    width: 680px !important;
    height: 1110px !important;
    margin: 0 auto !important;
    padding: 4px 0 0 4px;
    box-sizing: border-box;
}
#menu_save_wrapper .save_list, #menu_load_wrapper .save_list {
    display: flex !important;
    flex-direction: column;
    gap: 20px;
    width: 648px !important;
    height: auto !important;
    font-family: var(--font) !important;
    counter-reset: slot;
}
#menu_save_wrapper .save_list_item, #menu_load_wrapper .save_list_item {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 20px;
    width: auto !important;
    height: 156px !important;
    padding: 0 22px 0 100px;
    box-sizing: border-box;
    isolation: isolate;
    background: transparent !important;
    counter-increment: slot;
    transition: transform var(--t-press) var(--ease-out);
}
#menu_save_wrapper .save_list_item::before, #menu_load_wrapper .save_list_item::before,
#menu_save_wrapper .save_list_item::after, #menu_load_wrapper .save_list_item::after {
    content: "";
    position: absolute;
    clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
#menu_save_wrapper .save_list_item::before, #menu_load_wrapper .save_list_item::before { inset: 0; z-index: -2; background: var(--c-ink); }
#menu_save_wrapper .save_list_item::after, #menu_load_wrapper .save_list_item::after { inset: var(--line); z-index: -1; background: var(--c-cream); }
#menu_save_wrapper .save_list_item:active, #menu_load_wrapper .save_list_item:active { transform: translate(2px, 2px); }
#menu_save_wrapper .save_list_item:hover::before, #menu_load_wrapper .save_list_item:hover::before { background: var(--c-orange); }
/* 番号「01」 */
#menu_save_wrapper .save_list_item_thumb::before, #menu_load_wrapper .save_list_item_thumb::before {
    content: counter(slot, decimal-leading-zero);
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    font: italic 700 46px/1 var(--font-display);
    font-variant-numeric: lining-nums;
    font-variation-settings: "opsz" var(--number-opsz);
    color: var(--c-blue);
}
#menu_save_wrapper .save_list_item_thumb, #menu_load_wrapper .save_list_item_thumb {
    display: block !important;
    flex: none;
    width: 72px !important;
    height: 128px !important;
    box-sizing: border-box;
    border: var(--line) solid var(--c-ink) !important;
    background: #EFE4D4 !important;
    overflow: hidden;
}
#menu_save_wrapper .save_list_item_thumb img, #menu_load_wrapper .save_list_item_thumb img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    object-fit: cover;
}
#menu_save_wrapper .save_list_item_area, #menu_load_wrapper .save_list_item_area {
    display: block !important;
    flex: 1;
    min-width: 0;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
#menu_save_wrapper .save_list_item_date, #menu_load_wrapper .save_list_item_date {
    display: block;
    margin-bottom: 10px;
    padding-left: 0 !important;
    font: 600 18px/1.2 var(--font-label);
    letter-spacing: 0.1em;
    color: var(--c-on-orange) !important;
}
#menu_save_wrapper .save_list_item_text, #menu_load_wrapper .save_list_item_text {
    display: block;
    height: auto !important;
    max-height: 66px;
    overflow: hidden;
    padding-left: 0 !important;
    font-size: 21px;
    line-height: 1.55;
    letter-spacing: 0.02em;   /* 21px と 0.02em で「まだ、保存されているデータがありません。」（20文字）が1行に入る */
    color: var(--c-ink) !important;
}

/* 会話ログ */
#menu_backlog_wrapper .log_body {
    position: relative;
    box-sizing: border-box;
    width: 656px !important;
    height: 1076px !important;
    margin: 150px auto 0 !important;
    padding: 34px 32px !important;
    font-size: 24px;
    line-height: 1.7;
    color: var(--c-ink) !important;
    background: var(--c-cream) !important;
    border: var(--line) solid var(--c-ink) !important;
    border-radius: 0 !important;
    box-shadow: var(--pop) var(--pop) 0 var(--c-orange);
}
#menu_backlog_wrapper .backlog_chara_name { color: var(--c-on-orange); }


/* =====================================================================
   ギャラリー（cg.ks の [cg_image_button]）
   ===================================================================== */
/* 一覧の絵（cg.ks の GAME.galleryDecor が cg_thumb を付ける） */
img.cg_thumb {
    box-sizing: border-box;
    border: var(--line) solid var(--c-ink) !important;
    box-shadow: 6px 6px 0 var(--c-blue);
    transition: transform var(--t-press) var(--ease-out);
}
img.cg_thumb:active { transform: translate(2px, 2px); }


/* =====================================================================
   LOVE UP! の演出（game.js の GAME.loveUp が作る。タップで早送り）
   ===================================================================== */
.loveup {
    position: absolute;
    left: 0; top: 0;
    width: 720px;
    height: 1280px;
    z-index: 100000000;      /* いちばん上（ボタンより上。演出中のタップはここで受ける） */
    pointer-events: auto;
    animation: lu-out 280ms ease-in calc(var(--t-loveup) - 280ms) forwards;
}
.loveup.is-quick { animation: lu-out 160ms ease-in forwards; }   /* タップで早送りしたとき */
@keyframes lu-out { to { opacity: 0; } }
@keyframes lu-fade { from { opacity: 0; } }
.loveup > * { position: absolute; }
.lu_flash {
    left: 0; top: 0; width: 720px; height: 1280px;
    background: radial-gradient(circle at 360px 470px, rgba(255, 246, 234, 0.85) 0, rgba(255, 246, 234, 0.55) 200px, rgba(255, 246, 234, 0) 420px);
    animation: lu-fade 300ms ease-out both;
}
/* 放射線（オレンジと青の光の線） */
.lu_rays {
    left: 60px; top: 170px; width: 600px; height: 600px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, var(--c-orange) 0deg 4deg, transparent 4deg 18deg, var(--c-blue) 18deg 20deg, transparent 20deg 30deg);
    -webkit-mask-image: radial-gradient(circle, transparent 0 140px, #000 150px 230px, transparent 300px);
    mask-image: radial-gradient(circle, transparent 0 140px, #000 150px 230px, transparent 300px);
    animation: lu-rays 900ms var(--ease-out) both;
}
@keyframes lu-rays {
    from { opacity: 0; transform: scale(0.5) rotate(-20deg); }
    to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
/* ドットの輪 */
.lu_dots {
    left: 150px; top: 260px; width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(var(--c-orange) 2.4px, transparent 2.8px) 0 0 / 16px 16px;
    -webkit-mask-image: radial-gradient(circle, transparent 0 150px, #000 160px 190px, transparent 210px);
    mask-image: radial-gradient(circle, transparent 0 150px, #000 160px 190px, transparent 210px);
    animation: lu-dots 700ms var(--ease-out) 80ms both;
}
@keyframes lu-dots { from { opacity: 0; transform: scale(0.6); } to { opacity: 0.7; transform: scale(1); } }
/* 大きなハート（青い影つき） */
.lu_heart {
    left: 220px; top: 340px; width: 280px; height: 260px;
    overflow: visible;
    filter: drop-shadow(8px 8px 0 var(--c-blue));
    animation: lu-heart 520ms var(--ease-out) both;
}
.lu_heart .h-body { fill: var(--c-orange); stroke: var(--c-cream); stroke-width: 10; stroke-linejoin: round; paint-order: stroke; }
.lu_heart .h-hi, .lu_heart .h-stripe { fill: var(--c-cream); }
.lu_heart .h-blue { fill: var(--c-blue); }
.lu_heart .h-ink { fill: none; stroke: var(--c-ink); stroke-width: 4; stroke-linecap: round; }
@keyframes lu-heart {
    0%   { transform: scale(0.2) rotate(-12deg); opacity: 0; }
    45%  { transform: scale(1.18) rotate(4deg); opacity: 1; }
    72%  { transform: scale(0.94) rotate(-1deg); }
    100% { transform: scale(1) rotate(0deg); }
}
/* LOVE UP! の文字（クリームのふちと青い影） */
.lu_title {
    left: 0; width: 720px; top: 590px;
    text-align: center;
    font: italic 900 92px/1 var(--font-display);
    font-variation-settings: "opsz" var(--display-opsz);
    letter-spacing: 0.01em;
    color: var(--c-orange);
    text-shadow:
        -3px -3px 0 var(--c-cream), 3px -3px 0 var(--c-cream), -3px 3px 0 var(--c-cream), 3px 3px 0 var(--c-cream),
        0 -3px 0 var(--c-cream), 0 3px 0 var(--c-cream), -3px 0 0 var(--c-cream), 3px 0 0 var(--c-cream),
        7px 7px 0 var(--c-blue);
    animation: lu-title 420ms var(--ease-spring) 160ms both;
}
@keyframes lu-title {
    from { opacity: 0; transform: translateY(26px) scale(0.7) skewX(-10deg); }
    to   { opacity: 1; transform: none; }
}
/* 「〇〇との距離が近づいた！」：札の色はそのキャラの色（game.js が --plate-color を入れる） */
.plate.lu_msg {
    left: 0; right: 0;
    margin: 0 auto !important;
    width: max-content;
    top: 736px;
    height: 62px;
    line-height: 62px !important;
    font-size: 30px;
    padding: 0 44px 0 40px;
    animation: lu-msg 380ms var(--ease-out) 340ms both;
}
@keyframes lu-msg { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
/* 紙吹雪とキラキラ（1つずつ、飛ぶ先 --x --y・回る量 --r・大きさ --s・色 --c・出はじめ --d を game.js が入れる） */
.lu_bit {
    left: 360px; top: 470px;
    width: var(--s, 18px); height: var(--s, 18px);
    margin: calc(var(--s, 18px) / -2) 0 0 calc(var(--s, 18px) / -2);
    background: var(--c, var(--c-orange));
    animation: lu-bit 760ms cubic-bezier(0.15, 0.7, 0.3, 1) var(--d, 120ms) both;
}
.lu_bit.tri  { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.lu_bit.bar  { height: calc(var(--s, 18px) * 0.4); }
.lu_bit.star { clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.lu_bit.dot  { border-radius: 50%; }
@keyframes lu-bit {
    0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.4); }
    15%  { opacity: 1; }
    100% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r, 180deg)) scale(1); }
}


/* =====================================================================
   スチル：画面がふわっと光る／「ギャラリーに追加されました」のお知らせ
   ===================================================================== */
@keyframes game-flash {
    0%   { opacity: 0; }
    25%  { opacity: 0.7; }
    100% { opacity: 0; }
}
.game_flash {
    position: absolute;
    left: 0; top: 0;
    width: 720px;
    height: 1280px;
    background: var(--c-cream);
    z-index: 50;           /* 背景・立ち絵（ティラノのレイヤー 0〜2 は z-index 10〜12）より上、会話窓（100〜）より下 */
    pointer-events: none;
    animation: game-flash var(--t-flash) ease-out both;
}
@keyframes game-toast {
    0%   { opacity: 0; transform: translate(-50%, -12px); }
    12%  { opacity: 1; transform: translate(-50%, 0); }
    85%  { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -8px); }
}
#game_toast {
    position: absolute;
    left: 50%;
    top: 120px;            /* 上のバーのすぐ下 */
    height: 64px;
    padding: 0 40px 0 34px;
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    isolation: isolate;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--c-ink);
    z-index: 99999998;
    pointer-events: none;
    animation: game-toast var(--t-toast) var(--ease-out) both;
}
#game_toast .frame { --k-out: var(--slant); --k-in: calc(var(--slant) - var(--line) * 0.3); }
#game_toast .star { width: 22px; height: 22px; background: var(--c-orange); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }


/* =====================================================================
   キラキラ（エンディング。game.js の GAME.sparkles）：またたいて浮かぶ
   ===================================================================== */
@keyframes game-sparkle {
    0%   { opacity: 0;   transform: translateY(0) scale(0.6) rotate(0deg); }
    50%  { opacity: 1;   transform: translateY(-12px) scale(1) rotate(25deg); }
    100% { opacity: 0;   transform: translateY(-24px) scale(0.6) rotate(50deg); }
}
.game_sparkle {
    position: absolute;
    pointer-events: none;
    background: var(--sp-color, var(--c-orange));
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    animation: game-sparkle 5s ease-in-out infinite both;   /* 長さとずらしは game.js が1つずつ決める */
}


/* =====================================================================
   エンディング（game.js の GAME.endingShow が作る）
   ===================================================================== */
.game_ending { position: absolute; left: 0; top: 0; width: 720px; height: 1280px; pointer-events: none; }
.game_ending > * { position: absolute; }
.game_ending .ending_veil { left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 246, 234, 0.55); animation: game-fade-in var(--t-logo) ease both; }
.game_ending .ending_lines { left: 40px; top: 260px; width: 640px; height: 220px; overflow: visible; animation: game-fade-in 300ms ease 300ms both; }
.game_ending .ending_lines path { stroke: var(--c-orange); stroke-width: 6; stroke-linecap: round; }
@keyframes ending-pop {
    0%   { opacity: 0; transform: scale(0.4) rotate(-6deg); }
    60%  { opacity: 1; transform: scale(1.1) rotate(1deg); }
    100% { transform: none; }
}
.game_ending .ending_mark {
    left: 0; width: 720px; top: 300px;
    text-align: center;
    font: italic 900 140px/1 var(--font-display);
    font-variation-settings: "opsz" var(--display-opsz);
    letter-spacing: 0.02em;
    color: var(--c-orange);
    text-shadow: 8px 8px 0 var(--c-blue);
    animation: ending-pop 600ms var(--ease-out) both;
}
.game_ending .plate.ending_title {
    left: 0; right: 0;
    margin: 0 auto !important;
    width: max-content;
    top: 482px;
    height: 62px;
    line-height: 62px !important;
    font-size: 30px;
    padding: 0 44px 0 40px;
    animation: lu-msg 400ms var(--ease-out) 300ms both;
}


/* =====================================================================
   エンドロール（game.js の GAME.creditsStart が作る）
   ===================================================================== */
.credits_roll { position: absolute; left: 0; top: 0; width: 720px; text-align: center; color: var(--c-ink); }
.credits_roll .credits_role { margin-top: 64px; font-size: 22px; font-weight: 700; letter-spacing: 0.2em; color: var(--c-on-orange); }
.credits_roll .credits_name { margin-top: 8px; font-size: 36px; font-weight: 900; }
/* 背景の色の帯の上を流れても読めるように、1行ずつクリームの札に乗せる（display: table で文字の幅だけの札になる） */
.credits_roll .credits_role, .credits_roll .credits_name, .credits_roll .credits_end {
    display: table;
    margin-left: auto;
    margin-right: auto;
    padding: 4px 18px;
    background: var(--c-cream);
}
.credits_roll .credits_end {
    margin-top: 140px;
    font: italic 900 56px/1.1 var(--font-display);
    font-variation-settings: "opsz" var(--display-opsz);
    color: var(--c-orange);
    text-shadow: 5px 5px 0 var(--c-blue);
}


/* =====================================================================
   画面の外の帯（game.js の「9. 画面の外の帯」が作る）
   ゲーム画面の後ろ全体に、いまの背景をぼかして敷く。ゲーム画面の中には影響しない
   ===================================================================== */
#game_backdrop {
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
#game_backdrop .bd_img {
    position: absolute;
    left: -60px; top: -60px; right: -60px; bottom: -60px;  /* ぼかしで端が白くならないように、少し大きく */
    background-size: cover;
    background-position: center;
    filter: blur(var(--backdrop-blur)) saturate(1.1);
    opacity: 0;
    z-index: 1;
    transition: opacity var(--t-backdrop) ease;
}
#game_backdrop .bd_img.is-top { z-index: 2; }
#game_backdrop .bd_img.is-on { opacity: 1; }
#game_backdrop::after {
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: 3;
    background: rgba(255, 246, 234, var(--backdrop-white));
}


/* =====================================================================
   「視差効果を減らす」設定のスマホ：飛び散る物・回る物を出さず、じわっと出すだけにする
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .lu_bit, .lu_rays, .lu_dots, .game_sparkle { display: none; }
    .lu_heart, .lu_title, .plate.lu_msg, .glink_button.btn_choice, .plate.choice_head,
    .game_ending .ending_mark, .game_ending .plate.ending_title, .game_panel,
    #menu_save_wrapper, #menu_load_wrapper, #menu_backlog_wrapper { animation-name: lu-fade; }
    .title_cover.is-enter .tc_logo, .title_cover.is-enter .tc_logo_sub, .title_cover.is-enter .tc_kicker,
    .title_cover.is-enter .tc_side { animation-name: game-fade-in; }
    .title_cover.is-enter .tc_catch { animation: none; }
    .title_cover.is-enter .tc_swoosh path { animation: none; stroke-dasharray: none; }
    .glink_button.btn_choice.glink_button_clicked { animation: none; }
    .next_mark { animation: none; }
    .glink_button.btn_choice:active, .glink_button.btn_menu:active, .game_panel .panel_btn:active,
    img.ui_bar_hit:active + .ui_bar_label { transform: none; }
    #game_gauge_label.is-hidden { transform: none; }
    #game_toast { animation-name: game-toast-fade; }
}
@keyframes game-toast-fade {
    0%   { opacity: 0; transform: translateX(-50%); }
    12%  { opacity: 1; transform: translateX(-50%); }
    85%  { opacity: 1; transform: translateX(-50%); }
    100% { opacity: 0; transform: translateX(-50%); }
}