*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;color:#e8e0d4}
#game{position:relative;width:100%;height:100%;overflow:hidden}
.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,.85) 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-size:clamp(1.6rem,5vw,3rem);font-weight:300;letter-spacing:.08em;line-height:1.5;margin-bottom:3rem;text-shadow:0 0 40px rgba(255,120,170,.4)}
.heart{color:#ff6b9d;font-size:1.2em}
#title-buttons{display:flex;flex-direction:column;gap:.8rem;align-items:center}
.title-btn{background:rgba(255,255,255,.08);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;min-width:200px;text-decoration:none;text-align:center;display:inline-block;font-family:inherit}
.title-btn:hover{background:rgba(255,120,170,.15);border-color:rgba(255,120,170,.4);text-shadow:0 0 10px rgba(255,120,170,.3)}
.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-size:clamp(1.2rem,3vw,2rem);font-weight:300;letter-spacing:.15em;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,.85) 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,.2);border:1px solid rgba(255,120,170,.3);font-size:.85rem;letter-spacing:.1em;color:#ffa0c4}
#speaker-name:empty{display:none}
#text-content{font-size:clamp(.9rem,2.2vw,1.1rem);line-height:1.9;min-height:4rem;white-space:pre-wrap;padding-right:2rem}
#text-content .direction{font-style:italic;color:#b0a89e}
#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,.5)}
#choice-overlay.active{display:flex}
#choice-container{display:flex;flex-direction:column;gap:.8rem;padding:2rem;max-width:500px;width:90%}
.choice-btn{background:rgba(20,15,30,.9);border:1px solid rgba(255,120,170,.3);color:#e8e0d4;padding:1rem 1.5rem;font-size:1rem;cursor:pointer;text-align:center;transition:all .3s;letter-spacing:.08em;font-family:inherit}
.choice-btn:hover{background:rgba(255,120,170,.2);border-color:rgba(255,120,170,.6);transform:scale(1.02)}

/* 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,.3);border:1px solid rgba(255,120,170,.4);z-index:15;letter-spacing:.1em}
#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,#ff6b9d);width:0%;transition:width .5s}
#menu-overlay,#saveload-overlay{position:absolute;inset:0;background:rgba(0,0,0,.7);z-index:50;display:none;align-items:center;justify-content:center}
#menu-overlay[style*="flex"],#saveload-overlay[style*="flex"]{display:flex}
#menu-panel,#saveload-panel{background:rgba(15,12,25,.95);border:1px solid rgba(255,120,170,.2);padding:2rem;min-width:280px;text-align:center}
#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}
.menu-btn:hover{background:rgba(255,120,170,.15);border-color:rgba(255,120,170,.3)}
.save-slot{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:.8rem;margin-bottom:.5rem;cursor:pointer;text-align:left;transition:all .3s}
.save-slot:hover{background:rgba(255,120,170,.1);border-color:rgba(255,120,170,.3)}
.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(135deg,#2e0a1e 0%,#451030 50%,#2e0a1e 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,.08);border:1px solid rgba(255,120,170,.3);color:#e8e0d4;padding:.7rem 1rem;font-size:1rem;width:100%;max-width:300px;text-align:center;outline:none;font-family:inherit;border-radius:0}
#email-input:focus{border-color:rgba(255,120,170,.6)}
#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%}
.gallery-thumb{aspect-ratio:832/1216;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);cursor:pointer;overflow:hidden;transition:all .3s}
.gallery-thumb img{width:100%;height:100%;object-fit:cover}
.gallery-thumb.locked{cursor:default;opacity:.3}
.gallery-thumb:not(.locked):hover{border-color:rgba(255,120,170,.5);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}

/* Info Screen */
#info-screen.active{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem}
#info-screen h2{font-weight:300;letter-spacing:.15em;margin-bottom:2rem}
.info-section{width:100%;max-width:400px;margin-bottom:1.5rem}
.info-section h3{font-size:.9rem;font-weight:400;color:#ff6b9d;letter-spacing:.1em;margin-bottom:.6rem;border-bottom:1px solid rgba(255,120,170,.2);padding-bottom:.3rem}
.info-row{display:flex;justify-content:space-between;align-items:center;padding:.35rem 0;font-size:.85rem;color:#c0b8cc}
.info-key{color:#e8e0d4;font-size:.8rem;background:rgba(255,255,255,.06);padding:.15rem .5rem;border-radius:3px;border:1px solid rgba(255,255,255,.1)}
.info-text{font-size:.9rem;color:#c0b8cc;line-height:1.6;text-align:center}
.info-sub{font-size:.8rem;color:#8a7fa0;margin-top:.4rem}
#btn-info-back{margin-top:1.5rem}

/* 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}
}