*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'Segoe UI',system-ui,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:linear-gradient(135deg,#1a0a2e 0%,#0d0d1a 40%,#1a0a2e 100%);z-index:0}
#title-content{position:relative;z-index:1;text-align:center;padding:2rem}
#title-text{font-size:clamp(1.8rem,5vw,3.5rem);font-weight:300;letter-spacing:.05em;line-height:1.4;margin-bottom:3rem;text-shadow:0 0 40px rgba(180,100,255,.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:.1em;transition:all .3s;min-width:200px;text-decoration:none;text-align:center;display:inline-block}
.title-btn:hover{background:rgba(180,100,255,.15);border-color:rgba(180,100,255,.4);text-shadow:0 0 10px rgba(180,100,255,.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:contain;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(180,100,255,.2);border:1px solid rgba(180,100,255,.3);font-size:.85rem;letter-spacing:.1em;color:#d4a0ff}
#speaker-name:empty{display:none}
#text-content{font-size:clamp(.9rem,2.2vw,1.1rem);line-height:1.8;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(180,100,255,.3);color:#e8e0d4;padding:1rem 1.5rem;font-size:1rem;cursor:pointer;text-align:center;transition:all .3s;letter-spacing:.05em}
.choice-btn:hover{background:rgba(180,100,255,.2);border-color:rgba(180,100,255,.6);transform:scale(1.02)}

/* Menu */
#menu-btn{position:absolute;top:1rem;right: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:hover{opacity:1}
#auto-indicator{position:absolute;top:1rem;left:1rem;font-size:.75rem;padding:.2rem .6rem;background:rgba(180,100,255,.3);border:1px solid rgba(180,100,255,.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,#7b2ff7,#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(180,100,255,.2);padding:2rem;min-width:280px;text-align:center}
#menu-panel h3,#saveload-panel h3{margin-bottom:1.5rem;font-weight:300;letter-spacing:.1em}
.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:.05em}
.menu-btn:hover{background:rgba(180,100,255,.15);border-color:rgba(180,100,255,.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(180,100,255,.1);border-color:rgba(180,100,255,.3)}
.save-slot .slot-label{font-size:.8rem;color:#8a7fa0;margin-bottom:.3rem}
.save-slot .slot-info{font-size:.85rem}

/* Paywall */
#paywall-bg{position:absolute;inset:0;background:linear-gradient(135deg,#1a0a2e 0%,#2d1045 50%,#1a0a2e 100%)}
#paywall-content{position:relative;z-index:1;text-align:center;padding:2rem}
#paywall-content h2{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:300;margin-bottom:.5rem}
#paywall-content p{font-size:1.1rem;margin-bottom:1rem}
.paywall-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:1rem}
#email-input{background:rgba(255,255,255,.08);border:1px solid rgba(180,100,255,.3);color:#e8e0d4;padding:.7rem 1rem;font-size:1rem;width:100%;max-width:300px;text-align:center;outline:none;font-family:inherit}
#email-input:focus{border-color:rgba(180,100,255,.6)}
#email-input::placeholder{color:rgba(232,224,212,.3)}
#email-thanks{color:#d4a0ff;margin-top:1rem}

/* 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:.1em}
#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(180,100,255,.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:.1em;margin-bottom:2rem}
.setting-row{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;min-width:300px}
.setting-row label{flex:0 0 100px;text-align:right;font-size:.9rem;color:#8a7fa0}
.setting-row input[type=range]{flex:1;accent-color:#7b2ff7}
.setting-row span{flex:0 0 30px;text-align:center;font-size:.9rem}
#btn-settings-back{margin-top:2rem}

/* Responsive */
@media(max-width:600px){
  #textbox{padding:1rem 1.2rem .8rem;min-height:150px}
  #text-content{font-size:.9rem;line-height:1.7}
  .title-btn{padding:.6rem 1.5rem;font-size:.9rem;min-width:160px}
  #gallery-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
}