/* ===== 日本語特化版 =====
   --jp-gothic : セリフ・UI用ゴシック
   --jp-mincho : 地の文用明朝（VNらしい文芸的質感）
   約物詰め(palt)・禁則処理(line-break:strict)・文節改行(word-break:auto-phrase)を全テキストに適用 */
:root{
  --jp-gothic:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic','YuGothic',Meiryo,sans-serif;
  --jp-mincho:'Shippori Mincho','Hiragino Mincho ProN','Hiragino Mincho Pro','Yu Mincho','YuMincho',serif;
  --accent:#ff6b9d;
  --accent-glow:rgba(255,120,170,.3);
  --accent-border:rgba(255,120,170,.35);
  --bg-deep:#0a0815;
  --glass:rgba(15,12,25,.88);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:var(--jp-gothic);color:#e8e0d4;font-feature-settings:'palt' 1;line-break:strict;word-break:normal}
#game{position:relative;width:100%;height:100%;overflow:hidden;max-width:540px;margin:0 auto}
.screen{position:absolute;inset:0;display:none;z-index:1}
.screen.active{display:flex;flex-direction:column;align-items:center;justify-content:center}

/* Title Screen */
#title-bg{position:absolute;inset:0;background:url('../cg/cg_02.png') center/cover no-repeat;z-index:0}
#title-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,15,.88) 0%,rgba(10,8,15,.4) 50%,rgba(26,10,46,.6) 100%)}
#title-content{position:relative;z-index:1;text-align:center;padding:2rem}
#title-text{font-family:var(--jp-mincho);font-size:clamp(1.6rem,5vw,3rem);font-weight:400;letter-spacing:.1em;line-height:1.6;margin-bottom:3rem;text-shadow:0 0 40px rgba(255,120,170,.4)}
.heart{color:var(--accent);font-size:1.2em}
#title-buttons{display:flex;flex-direction:column;gap:.8rem;align-items:center}
.title-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:#e8e0d4;padding:.7rem 2.5rem;font-size:1rem;cursor:pointer;letter-spacing:.12em;transition:all .3s ease;min-width:200px;text-decoration:none;text-align:center;display:inline-block;font-family:inherit;border-radius:6px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.title-btn:hover{background:rgba(255,120,170,.14);border-color:var(--accent-border);text-shadow:0 0 12px var(--accent-glow);transform:translateY(-1px);box-shadow:0 4px 18px rgba(255,120,170,.1)}
.title-btn:active{transform:translateY(0) scale(.97);box-shadow:none;transition-duration:.1s}
.title-btn.small{padding:.4rem 1.2rem;font-size:.85rem;min-width:auto}

/* Game Screen */
#game-screen{display:none;position:absolute;inset:0;cursor:pointer}
#game-screen.active{display:block}
#cg-layer{position:absolute;inset:0;background:#0d0d1a}
#cg-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
#cg-layer img.visible{opacity:1}
#scene-title-overlay{position:absolute;top:0;left:0;right:0;padding:2rem;text-align:center;font-family:var(--jp-mincho);font-size:clamp(1.2rem,3vw,2rem);font-weight:400;letter-spacing:.15em;line-break:strict;opacity:0;transition:opacity 1s;pointer-events:none;z-index:5;text-shadow:0 2px 20px rgba(0,0,0,.8)}
#scene-title-overlay.visible{opacity:1}

/* Textbox */
#textbox{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(10,8,15,.95) 0%,rgba(10,8,15,.88) 80%,rgba(10,8,15,0) 100%);padding:1.5rem 2rem 1.5rem;min-height:180px;z-index:10;transition:opacity .3s}
#textbox.hidden{opacity:0;pointer-events:none}
#speaker-plate{margin-bottom:.4rem;min-height:1.6rem}
#speaker-name{display:inline-block;padding:.15rem .8rem;background:rgba(255,120,170,.18);border:1px solid rgba(255,120,170,.28);font-size:.85rem;letter-spacing:.1em;color:#ffa0c4;border-radius:4px}
#speaker-name:empty{display:none}
#text-content{font-size:clamp(.95rem,2.3vw,1.12rem);line-height:1.95;min-height:4rem;white-space:pre-wrap;padding-right:2rem;line-break:strict;word-break:auto-phrase;overflow-wrap:break-word;font-feature-settings:'palt' 1;text-spacing-trim:trim-start}
/* 地の文（ナレーション/ト書き）= 明朝 */
#text-content .direction{font-family:var(--jp-mincho);font-style:normal;color:#cfc6d6;letter-spacing:.02em}
/* セリフ = ゴシック */
#text-content .dialogue{font-family:var(--jp-gothic)}
/* 「地の文：ゴシック」設定時 */
body.jp-gothic-narration #text-content .direction{font-family:var(--jp-gothic);letter-spacing:0}
/* ルビ */
#text-content ruby rt{font-size:.5em;font-weight:400;letter-spacing:0;opacity:.85;user-select:none}
#text-indicator{position:absolute;bottom:1rem;right:2rem;font-size:.8rem;animation:bounce 1s infinite;opacity:.6}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* Choice */
#choice-overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:20;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#choice-overlay.active{display:flex}
#choice-container{display:flex;flex-direction:column;gap:.8rem;padding:2rem;max-width:500px;width:90%}
.choice-btn{background:var(--glass);border:1px solid var(--accent-border);color:#e8e0d4;padding:1rem 1.5rem;font-size:1rem;cursor:pointer;text-align:center;transition:all .3s ease;letter-spacing:.08em;font-family:inherit;line-break:strict;word-break:auto-phrase;overflow-wrap:break-word;font-feature-settings:'palt' 1;border-radius:8px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.choice-btn:hover{background:rgba(255,120,170,.18);border-color:rgba(255,120,170,.55);transform:scale(1.02);box-shadow:0 0 24px rgba(255,120,170,.1)}
.choice-btn:active{transform:scale(.97);box-shadow:none;transition-duration:.1s}

/* Menu & CG View Buttons */
#menu-btn,#btn-cg-view{position:absolute;top:1rem;font-size:1.5rem;cursor:pointer;z-index:15;opacity:.5;transition:opacity .3s;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
#menu-btn{right:1rem}
#btn-cg-view{right:3.5rem;font-size:1.2rem}
#menu-btn:hover,#btn-cg-view:hover{opacity:1}
#auto-indicator{position:absolute;top:1rem;left:1rem;font-size:.75rem;padding:.2rem .6rem;background:rgba(255,120,170,.25);border:1px solid rgba(255,120,170,.35);z-index:15;letter-spacing:.1em;border-radius:4px}
#progress-bar{position:absolute;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.05);z-index:15}
#progress-fill{height:100%;background:linear-gradient(90deg,#f7527b,var(--accent));width:0%;transition:width .5s}
#menu-overlay,#saveload-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:50;display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#menu-overlay[style*="flex"],#saveload-overlay[style*="flex"]{display:flex}
#menu-panel,#saveload-panel{background:var(--glass);border:1px solid rgba(255,120,170,.18);padding:2rem;min-width:280px;text-align:center;border-radius:14px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 8px 32px rgba(0,0,0,.4)}
#menu-panel h3,#saveload-panel h3{margin-bottom:1.5rem;font-weight:300;letter-spacing:.15em}
.menu-btn{display:block;width:100%;background:transparent;border:1px solid rgba(255,255,255,.1);color:#e8e0d4;padding:.6rem;margin-bottom:.5rem;font-size:.9rem;cursor:pointer;transition:all .3s;letter-spacing:.08em;font-family:inherit;border-radius:6px}
.menu-btn:hover{background:rgba(255,120,170,.12);border-color:rgba(255,120,170,.3)}
.menu-btn:active{transform:scale(.97);transition-duration:.1s}
.save-slot{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);padding:.8rem;margin-bottom:.5rem;cursor:pointer;text-align:left;transition:all .3s;border-radius:8px}
.save-slot:hover{background:rgba(255,120,170,.08);border-color:rgba(255,120,170,.25)}
.save-slot .slot-label{font-size:.8rem;color:#8a7fa0;margin-bottom:.3rem}
.save-slot .slot-info{font-size:.85rem}

/* Opt-in Screen */
#optin-bg{position:absolute;inset:0;background:linear-gradient(150deg,#1a0a14 0%,#381428 35%,#2a0e20 65%,#1a0a14 100%)}
#optin-content{position:relative;z-index:1;text-align:center;padding:2rem}
#optin-content h2{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:300;margin-bottom:.8rem;letter-spacing:.08em}
#optin-content p{font-size:1.1rem;margin-bottom:.8rem}
.optin-sub{font-size:.9rem!important;color:#8a7fa0;margin-bottom:2rem!important}
#email-form{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin-bottom:1.5rem}
#email-input{background:rgba(255,255,255,.06);border:1px solid rgba(255,120,170,.28);color:#e8e0d4;padding:.8rem 1.2rem;font-size:1rem;width:100%;max-width:300px;text-align:center;outline:none;font-family:inherit;border-radius:8px;transition:border-color .3s,box-shadow .3s}
#email-input:focus{border-color:rgba(255,120,170,.55);box-shadow:0 0 16px rgba(255,120,170,.1)}
#email-input::placeholder{color:rgba(232,224,212,.3)}
#email-thanks{color:#ffa0c4;margin-top:1rem}
#btn-optin-title{margin-top:1.5rem;color:#8a7fa0;border-color:rgba(255,255,255,.1)}
#btn-optin-title:hover{color:#e8e0d4}

/* Gallery */
#gallery-screen.active{display:flex;flex-direction:column}
#gallery-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;width:100%;flex-shrink:0}
#gallery-header h2{font-weight:300;letter-spacing:.15em}
#gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem;padding:0 2rem 2rem;overflow-y:auto;flex:1;width:100%;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.gallery-thumb{aspect-ratio:832/1216;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);cursor:pointer;overflow:hidden;transition:all .3s;border-radius:6px;touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,120,170,.15)}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.gallery-thumb.locked{cursor:default;opacity:.5}
.gallery-thumb:not(.locked):hover{border-color:rgba(255,120,170,.45);transform:scale(1.03)}
#gallery-viewer{position:absolute;inset:0;background:rgba(0,0,0,.95);z-index:60;display:none;align-items:center;justify-content:center}
#gallery-viewer[style*="flex"]{display:flex}
#gallery-img{max-width:95%;max-height:95%;object-fit:contain}
#gallery-close{position:absolute;top:1rem;right:1rem;background:transparent;border:none;color:#fff;font-size:2rem;cursor:pointer}

/* Settings */
#settings-screen.active{display:flex;flex-direction:column;align-items:center;justify-content:center}
#settings-screen h2{font-weight:300;letter-spacing:.15em;margin-bottom:2rem}
.setting-row{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;min-width:300px}
.setting-row label{flex:0 0 120px;text-align:right;font-size:.9rem;color:#8a7fa0}
.setting-row input[type=range]{flex:1;accent-color:#f7527b}
.setting-row span{flex:0 0 30px;text-align:center;font-size:.9rem}
#btn-settings-back{margin-top:2rem}
.settings-help{width:100%;max-width:340px;margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08)}
.settings-help h3{font-size:.8rem;font-weight:400;color:var(--accent);letter-spacing:.1em;margin-bottom:.5rem}
.info-row{display:flex;justify-content:space-between;align-items:center;padding:.3rem 0;font-size:.8rem;color:#c0b8cc}
.info-key{color:#e8e0d4;font-size:.75rem;background:rgba(255,255,255,.06);padding:.1rem .4rem;border-radius:3px;border:1px solid rgba(255,255,255,.1)}

/* Backlog */
#backlog-overlay{position:absolute;inset:0;background:rgba(8,6,18,.94);z-index:55;display:none;flex-direction:column;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#backlog-overlay.active{display:flex}
#backlog-header{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.5rem;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.06)}
#backlog-header h3{font-weight:300;letter-spacing:.15em;font-size:.9rem;color:#8a93a8}
#backlog-close{background:transparent;border:none;color:#8a93a8;font-size:1.5rem;cursor:pointer;padding:.2rem .5rem;transition:color .2s}
#backlog-close:hover{color:#e8e0d4}
#backlog-content{flex:1;overflow-y:auto;padding:1rem 1.5rem 2rem;-webkit-overflow-scrolling:touch}
.backlog-entry{padding:.7rem .6rem;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;border-radius:6px;transition:background .2s}
.backlog-entry:hover{background:rgba(255,120,170,.08)}
.backlog-entry:active{background:rgba(255,120,170,.15)}
.backlog-entry:last-child{border-bottom:none}
.backlog-speaker{font-size:.78rem;color:#ffa0c4;letter-spacing:.08em;margin-bottom:.2rem;padding:.1rem .5rem;display:inline-block;background:rgba(255,120,170,.1);border-radius:3px}
.backlog-speaker:empty{display:none}
.backlog-text{font-size:.92rem;line-height:1.8;color:#e8e0d4;white-space:pre-wrap;line-break:strict;word-break:auto-phrase;font-feature-settings:'palt' 1}
.backlog-text.direction{font-family:var(--jp-mincho);color:#cfc6d6}
.backlog-text.dialogue{font-family:var(--jp-gothic)}
body.jp-gothic-narration .backlog-text.direction{font-family:var(--jp-gothic)}

/* Responsive */
@media(max-width:600px){
  #textbox{padding:1rem 1.2rem .8rem;min-height:150px}
  #text-content{font-size:.9rem;line-height:1.8}
  .title-btn{padding:.6rem 1.5rem;font-size:.9rem;min-width:160px}
  #gallery-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .setting-row{min-width:auto;padding:0 1rem}
  .setting-row label{flex:0 0 90px;font-size:.85rem}
  #menu-btn,#btn-cg-view{width:36px;height:36px}
  #btn-cg-view{right:3rem;font-size:1.1rem}
}