*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    /* タイトルロゴの色味調整（必要ならここを変更） */
    --title-logo-filter: brightness(0) invert(1);
}

body{
    margin:0;
    min-height:100vh;
    min-height:100dvh;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;

    background:
        radial-gradient(circle at center, #1b1b1b 0%, #111 55%, #080808 100%);

    color:#fff;


    font-family:'Kiwi Maru', serif;
}

.hidden{
    display:none;
}

.screen{
    position:absolute;
    inset:0;
}
.main .screen{
    position:absolute;
    inset:0;
}.main .screen{
    position:absolute;
    inset:0;
}
/* -------------------------
   タイトル
------------------------- */
#titleScreen,
#selectScreen,
#selectScreen{
    background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    #111;
}

/* 時間帯別タイトル背景 */
.titleScreenBg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    z-index:0;
    display:block;
}

.titleWrap,
.selectWrap,
.selectWrap{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:34px;   /* タイトルと選択肢の距離 */
    z-index:1;
}

/* ヒロイン選択は上寄せレイアウトにして、見出しとの重なりを防ぐ */
.selectWrap{
    justify-content:flex-start;
    padding-top:140px;
    gap:24px;
}

.selectTitle{
    font-size:56px;
    letter-spacing:.08em;
    margin:0;
}

.gameTitle{
    font-size:72px;
    margin-bottom:40px;
}

/* タイトル画面：テキスト見出しの代わりにロゴ画像 */
.titleLogoHeading{
    margin:0 auto 40px;
    font-weight:normal;
    line-height:0;
}

.titleLogo{
    display:block;
    max-width:min(85vw,960px);
    width:auto;
    height:auto;
    margin:0 auto;
    /* 背景が明るい時間帯でも輪郭を見やすくする */
    filter:var(--title-logo-filter) drop-shadow(0 4px 14px rgba(0,0,0,.45));
}

.titleLogoTextFallback{
    font-size:72px;
    line-height:1.2;
    margin:0;
}

.mainBtn{

    padding: 14px 42px;

    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 12px;

    background: rgba(20,20,28,0.88);

    color: white;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.08em;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        opacity 0.25s ease;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.35);
}

.mainBtn:hover{

    background: rgba(35,35,48,0.95);

    border-color: rgba(255,255,255,0.4);

    transform: translateY(-2px);
}

.mainBtn:active{

    transform: scale(0.98);
}

/* -------------------------
   上下帯
------------------------- */
.bar{
    position:absolute;
    left:0;
    width:100%;
    background-color:rgba(0,0,0,.58);

    background-image:
      linear-gradient(45deg,
      transparent 42%,
      rgba(255,255,255,.08) 43%,
      rgba(255,255,255,.08) 57%,
      transparent 58%),

      linear-gradient(-45deg,
      transparent 42%,
      rgba(255,255,255,.08) 43%,
      rgba(255,255,255,.08) 57%,
      transparent 58%);

    background-size:32px 32px;
}

.topBar{
    top:0;
    height:90px;
}

.bottomBar{
    bottom:0;
    height:90px;
}

/* -------------------------
   メインエリア
------------------------- */
.main{
    position:relative;

    width:min(100vw, calc(100vh * 16 / 9));
    height:min(100vh, calc(100vw * 9 / 16));

    max-width:1920px;
    max-height:1080px;

    overflow:hidden;


    background:#000;

    box-shadow:
        0 24px 80px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,255,255,.05);

    border-radius:10px;

    box-shadow:
        0 24px 80px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,255,255,.05);

    border-radius:10px;
}

/* 背景画像2枚レイヤー */
.bgLayer{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    opacity:0;
    transition:opacity 1.2s ease;
}

.bgLayer.show{
    opacity:1;
}
/* -------------------------
   System UI
------------------------- */
.date{
    position:absolute;
    top:24px;
    left:28px;
    z-index:20;
    font-size:24px;
}

/* =====================================
MENUボタン
===================================== */

.menuBtn{
    position:absolute;
    top:22px;
    right:24px;
    z-index:80;

    min-width:118px;
    height:46px;
    padding:0 22px 0 40px;

    border:none;
    border-radius:999px;
    cursor:pointer;

    font-family:'Kiwi Maru', serif;
    font-size:18px;
    letter-spacing:.14em;
    color:#fff;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.22) 0%,
            rgba(255,255,255,.08) 100%
        );

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    box-shadow:
        0 10px 22px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.35);

    transition:all .22s ease;
}

.menuBtn::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.24);
}

.menuBtn::after{
    content:"☰";
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-52%);
    font-size:14px;
    opacity:.85;
}

.menuBtn:hover{
    transform:translateY(-2px);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.30) 0%,
            rgba(255,255,255,.12) 100%
        );

    box-shadow:
        0 14px 28px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.42);
}

.menuBtn:active{
    transform:translateY(0) scale(.98);
}

.menuBtn:focus{
    outline:none;
}


/* =====================================
メニューパネル
===================================== */

.menuPanel{
    position:absolute;
    top:78px;
    right:24px;
    z-index:79;

    width:250px;
    padding:14px;

    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(28,22,32,.92) 0%,
            rgba(18,14,22,.95) 100%
        );

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    box-shadow:
        0 22px 48px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.06);

    opacity:1;
    transform:translateY(0) scale(1);
    transform-origin:top right;

    transition:
        opacity .22s ease,
        transform .22s ease;
}

/* 非表示時 */
.menuPanel.hidden{
    opacity:0;
    pointer-events:none;
    transform:translateY(-10px) scale(.96);
}


/* =====================================
メニュー内タイトル（任意）
HTMLに追加する場合：
<div class="menuTitle">MENU</div>
===================================== */

.menuTitle{
    margin-bottom:10px;
    padding:0 6px 8px;

    font-size:14px;
    letter-spacing:.16em;
    color:rgba(255,255,255,.55);

    border-bottom:1px solid rgba(255,255,255,.08);
}


/* =====================================
メニュー項目
===================================== */

.menuItem{
    position:relative;

    width:100%;
    min-height:48px;
    margin-top:8px;
    padding:0 18px 0 42px;

    border:none;
    border-radius:14px;
    cursor:pointer;

    text-align:left;
    font-family:'Kiwi Maru', serif;
    font-size:18px;
    color:#fff;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08) 0%,
            rgba(255,255,255,.04) 100%
        );

    transition:all .2s ease;
}

/* アイコン */
.menuItem::before{
    content:"✦";
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-52%);
    font-size:14px;
    color:rgba(255,210,255,.78);
}

/* hover */
.menuItem:hover{
    transform:translateX(-2px);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.16) 0%,
            rgba(255,255,255,.08) 100%
        );

    box-shadow:
        0 10px 20px rgba(0,0,0,.22);
}

/* active */
.menuItem:active{
    transform:translateX(0) scale(.985);
}

.menuItem:focus{
    outline:none;
}

/* -------------------------
   セリフ欄
------------------------- */
/* セリフ欄全体 */
.textbox{
    position:absolute;
    left:2.5%;
    right:2.5%;
    width:auto;

    bottom:4%;
    min-height:24%;
    z-index:20;
    min-height:180px;

    padding:34px 38px 30px 38px;

    background:rgba(255,255,255,0.18);
    border:1px solid rgba(255,255,255,0.38);
    border-radius:18px;

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    box-shadow:
    0 10px 30px rgba(0,0,0,0.25),
    inset 0 0 0 1px rgba(255,255,255,0.08);}


/* アイコン本体 */
.nextIndicator{
    position:absolute;
    right:22px;
    bottom:18px;

    font-size:20px;
    color:rgba(255,255,255,0.82);

    text-shadow:0 2px 6px rgba(0,0,0,.35);

    animation:nextFloat 1.2s ease-in-out infinite;
}

/* ふわっと上下 */
@keyframes nextFloat{
    0%   { transform:translateY(0); opacity:.55; }
    50%  { transform:translateY(6px); opacity:1; }
    100% { transform:translateY(0); opacity:.55; }
}

/* 名前プレート */
.name{
    position:absolute;
    top:-28px;
    left:20px;

    padding:10px 34px;

    text-align:center;
    min-width:180px;
    min-width:180px;
    font-size:clamp(18px,1.4vw,clamp(18px,1.4vw,26px));
    color:#2d2430;
    letter-spacing:.08em;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,0.00) 0%,
        rgba(255,255,255,0.26) 14%,
        rgba(255,255,255,0.72) 28%,
        rgba(255,255,255,0.96) 38%,
        rgba(255,255,255,0.96) 62%,
        rgba(255,255,255,0.72) 72%,
        rgba(255,255,255,0.26) 86%,
        rgba(255,255,255,0.00) 100%
    );

    text-shadow:0 1px 0 rgba(255,255,255,.35);
}

/* 左右ライン装飾 */
.name::before,
.name::after{
    content:"";
    position:absolute;
    top:50%;
    width:34px;
    height:1px;
    background:rgba(255,255,255,.62);
    transform:translateY(-50%);
}

.name::before{
    left:10px;
}

.name::after{
    right:10px;
}
/* 名前が空なら非表示 */
.name:empty{
    display:none;
}

/* ナレーション時は本文の上余白も自然に */
.name:empty + .text{
    margin-top:0;
}
/* セリフ本文 */
.text{
    margin-top:10px;

    max-width:none;
    max-width:none;
    font-size:clamp(18px, 1.4vw, clamp(18px, 1.4vw, 24px));
    line-height:1.9;
    color:#ffffff;

    text-shadow:
    0 1px 2px rgba(0,0,0,0.45),
    0 0 8px rgba(0,0,0,0.25);

    letter-spacing:0.02em;
}

/* ここから選択肢 */
/* ==================================
選択肢エリア（既存 #choices 用）
ゴシック額縁風・今の画面構成対応版
================================== */

#gameScreen .choices{
    position:absolute;
    left:50%;

    transform:translateX(-50%);

    width:min(min(720px, 72%);
    bottom:32%, 72%);
    bottom:32%;
    z-index:40;

    display:flex;
    flex-direction:column;
    gap:16px;
}

/* ヒロイン選択画面の選択肢は通常フローで表示 */
#selectScreen .choices{
    position:static;
    left:auto;
    bottom:auto;
    transform:none;
    width:min(760px, 84%);
    z-index:1;
}


/* ==================================
選択肢ボタン
JSで生成される .choiceBtn 用
================================== */
/* =====================================
選択肢UI 完成版
左アイコン常設 + Hover時だけ右 › 表示
既存 .choiceBtn を置き換え可
===================================== */

.choiceBtn{
    position:relative;
    overflow:hidden;

    width:100%;
    min-height:82px;

    padding:20px 64px 20px 46px;

    border:none;
    border-radius:16px;
    cursor:pointer;

    text-align:left;
    font-family:'Kiwi Maru', serif;
    font-size:24px;
    line-height:1.5;
    letter-spacing:.02em;
    color:#f6f1f8;

    background:
        linear-gradient(
            180deg,
            rgba(38,28,44,.88) 0%,
            rgba(20,14,24,.94) 100%
        );

    box-shadow:
        0 14px 28px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(255,255,255,.03);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}


/* =====================================
外枠ライン
===================================== */

.choiceBtn{
    border:1px solid rgba(220,205,235,.22);
}


/* =====================================
左アイコン（常設）
===================================== */

.choiceBtn::before{
    content:"✦";

    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-52%);

    font-size:14px;
    color:rgba(245,220,255,.88);

    text-shadow:0 0 8px rgba(255,210,255,.18);
}


/* =====================================
右アイコン（Hover時のみ）
===================================== */

.choiceBtn::after{
    content:"›";

    position:absolute;
    right:22px;
    top:50%;

    font-size:28px;
    line-height:1;
    color:rgba(255,225,255,.95);

    opacity:0;

    transform:
        translateY(-50%)
        translateX(-8px);

    transition:
        opacity .22s ease,
        transform .22s ease,
        color .22s ease;
}


/* =====================================
上下装飾ライン
===================================== */

.choiceBtn span{
    pointer-events:none;
}

.choiceBtn{
    background-image:
        linear-gradient(
            180deg,
            rgba(38,28,44,.88) 0%,
            rgba(20,14,24,.94) 100%
        ),

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.12),
            transparent
        ),

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.08),
            transparent
        );

    background-repeat:no-repeat;

    background-size:
        100% 100%,
        calc(100% - 120px) 1px,
        calc(100% - 120px) 1px;

    background-position:
        center,
        center 10px,
        center calc(100% - 10px);
}


/* =====================================
Hover
===================================== */

.choiceBtn:hover{
    transform:translateY(-3px);

    background-image:
        linear-gradient(
            180deg,
            rgba(58,42,66,.94) 0%,
            rgba(28,18,34,.98) 100%
        ),

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        ),

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.12),
            transparent
        );

    box-shadow:
        0 20px 36px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.12);
}

/* Hover時だけ右アイコン表示 */
.choiceBtn:hover::after{
    opacity:1;

    transform:
        translateY(-50%)
        translateX(0);

    color:#ffdfff;
}


/* =====================================
押下
===================================== */

.choiceBtn:active{
    transform:translateY(-1px) scale(.995);
}


/* =====================================
キーボード選択時
===================================== */

.choiceBtn:focus{
    outline:none;

    box-shadow:
        0 0 0 4px rgba(210,170,255,.16),
        0 20px 36px rgba(0,0,0,.34);
}

/* ここまで選択肢 */

/* -------------------------
   暗転
------------------------- */
#fade{
    position:absolute;
    inset:0;
    background:#000;
    opacity:0;
    pointer-events:none;
    transition:opacity 2.8s ease;
    z-index:999;
}

#fade.show{
    opacity:1;
}


#bgFade {
  position: fixed;
  inset: 0;

  background: black;

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.3s;
}

.clearMark{
    margin-left:10px;
    font-size:12px;
    color:#ffd700;
}

.completeMark{
    margin-left:10px;
    font-size:12px;
    color:#7cf7ff;
    letter-spacing:1px;
}