/* ============================================================
   ISEKAI//ENGINE — styles
   ============================================================ */
:root{
  --accent1:#ff5fa2; --accent2:#a06bff; --accent3:#4fd8ff;
  --gold:#ffd76a; --ink:#f2eefc; --ink-dim:#b9b2d4;
  --glass:rgba(16,12,34,.72); --glass-2:rgba(24,18,48,.82);
  --line:rgba(255,255,255,.14);
  --radius:18px;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --font-ui:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-vn:"Trebuchet MS","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--font-ui); color:var(--ink); background:#070512;
  overflow:hidden; font-size:16px;
}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input,textarea,select{font-family:inherit; color:inherit;}
.hidden{display:none !important;}

/* ---------- particles ---------- */
#fx-particles{position:fixed; inset:0; z-index:0; pointer-events:none;}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--glass-2); border:1px solid var(--line); border-radius:12px;
  padding:10px 18px; z-index:400; font-size:.9rem; box-shadow:var(--shadow);
  animation:toastIn .25s ease; max-width:min(92vw,560px); text-align:center;
}
.toast.hidden{display:none;}
@keyframes toastIn{from{opacity:0; transform:translate(-50%,12px);}to{opacity:1; transform:translate(-50%,0);}}

/* ---------- screens ---------- */
.screen{position:fixed; inset:0; display:none; z-index:10; overflow:hidden;}
.screen.active{display:block; animation:screenIn .4s ease;}
@keyframes screenIn{from{opacity:0;}to{opacity:1;}}

/* ================= TITLE ================= */
#screen-title{}
.title-bg{position:absolute; inset:0; background-size:cover; background-position:center 30%; animation:bgSlow 24s ease-in-out infinite alternate;}
@keyframes bgSlow{from{transform:scale(1);}to{transform:scale(1.07);}}
.title-veil{position:absolute; inset:0; background:radial-gradient(ellipse at 50% 100%, rgba(7,5,18,.25) 0%, rgba(7,5,18,.88) 78%), linear-gradient(180deg, rgba(7,5,18,.55), rgba(7,5,18,.15) 40%);}
.title-content{position:relative; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px; padding:24px;}
.logo-block{text-align:center; animation:dropIn .8s cubic-bezier(.2,.9,.3,1.2);}
@keyframes dropIn{from{opacity:0; transform:translateY(-24px);}to{opacity:1; transform:none;}}
.logo-kicker{letter-spacing:.42em; font-size:.72rem; color:var(--accent3); margin-bottom:10px; text-shadow:0 0 14px rgba(79,216,255,.6);}
.logo{
  font-size:clamp(2.6rem, 8vw, 5rem); font-weight:900; letter-spacing:.06em; line-height:1;
  background:linear-gradient(120deg,#ff5fa2 0%, #a06bff 45%, #4fd8ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 26px rgba(160,107,255,.45));
}
.logo-slash{color:var(--gold); -webkit-text-fill-color:var(--gold); animation:blink 2.4s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.35;}}
.tagline{margin-top:12px; color:var(--ink-dim); letter-spacing:.14em; font-size:.86rem;}
.title-menu{display:flex; flex-direction:column; gap:12px; width:min(340px, 86vw); animation:fadeUp .7s .15s ease both;}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px);}to{opacity:1; transform:none;}}
.menu-btn{
  width:100%; padding:14px 20px; border-radius:14px; font-size:1.02rem; font-weight:700;
  background:var(--glass); border:1px solid var(--line); color:var(--ink);
  backdrop-filter:blur(10px); transition:all .18s ease; letter-spacing:.03em;
}
.menu-btn:hover{transform:translateY(-2px); border-color:var(--accent3); box-shadow:0 0 24px rgba(79,216,255,.25); color:#fff;}
.menu-btn.primary{background:linear-gradient(120deg, rgba(255,95,162,.85), rgba(160,107,255,.85)); border:none;}
.menu-btn.primary:hover{box-shadow:0 0 30px rgba(255,95,162,.5);}
.menu-btn:disabled{opacity:.35; pointer-events:none;}
.menu-btn.small{padding:9px 14px; font-size:.86rem; width:auto; border-radius:10px;}
.menu-btn.danger:hover{border-color:#ff5f6a; box-shadow:0 0 20px rgba(255,95,106,.3);}
.menu-btn.ai-btn{background:linear-gradient(120deg, rgba(79,216,255,.18), rgba(160,107,255,.22)); border:1px solid rgba(79,216,255,.5);}
.title-foot{margin-top:auto; color:rgba(185,178,212,.55); font-size:.74rem; letter-spacing:.1em;}

/* ================= SUB HEADERS ================= */
.sub-header{position:relative; z-index:5; display:flex; align-items:center; gap:14px; padding:16px 20px; background:rgba(10,7,26,.72); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
.sub-header h2{font-size:1.1rem; letter-spacing:.06em;}
.sub-header-spacer{flex:1;}
.back-btn{font-size:1.3rem; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--glass); transition:.15s;}
.back-btn:hover{border-color:var(--accent3); transform:translateX(-2px);}

/* ================= SCENARIO GRID ================= */
#screen-scenarios{overflow-y:auto; background:radial-gradient(ellipse at 50% 0%, #1a1233 0%, #070512 60%);}
.scenario-grid{position:relative; display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:22px; padding:26px; max-width:1200px; margin:0 auto;}
.scenario-card{
  border-radius:var(--radius); overflow:hidden; position:relative; cursor:pointer;
  border:1px solid var(--line); background:var(--glass); transition:all .22s ease;
  animation:fadeUp .5s ease both;
}
.scenario-card:hover{transform:translateY(-6px) scale(1.01); border-color:var(--accent2); box-shadow:0 14px 44px rgba(160,107,255,.35);}
.sc-card-cover{height:170px; background-size:cover; background-position:center; position:relative;}
.sc-card-cover::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(14,10,30,.95));}
.sc-card-genres{position:absolute; top:10px; left:10px; z-index:2; display:flex; gap:6px; flex-wrap:wrap;}
.genre-tag{font-size:.66rem; letter-spacing:.08em; padding:3px 9px; border-radius:99px; background:rgba(7,5,18,.7); border:1px solid var(--line); color:var(--accent3); backdrop-filter:blur(6px);}
.sc-card-body{padding:16px 18px 18px;}
.sc-card-title{font-size:1.12rem; font-weight:800; margin-bottom:6px;}
.sc-card-tag{color:var(--gold); font-size:.78rem; letter-spacing:.06em; margin-bottom:8px; font-style:italic;}
.sc-card-desc{color:var(--ink-dim); font-size:.88rem; line-height:1.5; margin-bottom:12px;}
.sc-card-meta{display:flex; gap:14px; color:rgba(185,178,212,.7); font-size:.74rem;}
.sc-card-delete{position:absolute; top:10px; right:10px; z-index:3; width:30px; height:30px; border-radius:8px; background:rgba(7,5,18,.7); border:1px solid var(--line); color:#ff8a95; font-size:.9rem; opacity:0; transition:.15s;}
.scenario-card:hover .sc-card-delete{opacity:1;}
.sc-card-delete:hover{background:rgba(255,95,106,.25);}

/* ================= NAME SCREEN ================= */
#screen-name{background:radial-gradient(ellipse at 50% 0%, #1a1233 0%, #070512 60%); overflow-y:auto;}
.name-box{max-width:520px; margin:10vh auto 0; padding:0 24px; text-align:center;}
.name-desc{color:var(--ink-dim); line-height:1.6; margin-bottom:22px;}
#hero-name{
  width:100%; padding:16px 20px; font-size:1.15rem; text-align:center; border-radius:14px;
  background:var(--glass); border:1px solid var(--line); outline:none; transition:.2s;
}
#hero-name:focus{border-color:var(--accent3); box-shadow:0 0 22px rgba(79,216,255,.3);}
.name-row{margin-top:18px; display:flex; justify-content:center;}
.name-note{margin-top:18px; color:rgba(185,178,212,.55); font-size:.8rem;}

/* ================= GAME ================= */
#screen-game{background:#05030d;}
#bg-layer{position:absolute; inset:0;}
#bg-img{width:100%; height:100%; object-fit:cover; transition:opacity .8s ease; filter:brightness(.82) saturate(1.05);}
.bg-veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,3,13,.35) 0%, rgba(5,3,13,.05) 30%, rgba(5,3,13,.35) 62%, rgba(5,3,13,.88) 100%);}

#topbar{
  position:absolute; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:linear-gradient(180deg, rgba(5,3,13,.75), transparent);
}
.tb-btn{width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--glass); font-size:1rem; transition:.15s; backdrop-filter:blur(8px);}
.tb-btn:hover{border-color:var(--accent3); transform:translateY(-1px);}
.tb-btn.on{border-color:var(--accent3); box-shadow:0 0 14px rgba(79,216,255,.5);}
.tb-title{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; padding:0 6px;}
.tb-title #tb-story{font-weight:800; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tb-title #tb-chapter{font-size:.72rem; color:var(--accent3); letter-spacing:.08em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gauge-pill{
  display:flex; align-items:center; gap:7px; padding:6px 13px; border-radius:99px;
  background:var(--glass); border:1px solid var(--line); font-size:.82rem; font-weight:700; backdrop-filter:blur(8px);
}
.gauge-pill .gauge-icon{font-size:1rem;}
.gauge-pill .gauge-bar{width:70px; height:7px; border-radius:99px; background:rgba(255,255,255,.14); overflow:hidden;}
.gauge-pill .gauge-fill{height:100%; border-radius:99px; background:linear-gradient(90deg, var(--accent3), var(--accent2), var(--accent1)); transition:width .6s ease;}

/* portrait */
#portrait-wrap{
  position:absolute; left:clamp(10px, 4vw, 60px); bottom:32vh; z-index:25;
  width:clamp(110px, 16vw, 210px); aspect-ratio:1/1; border-radius:20px; overflow:hidden;
  border:2px solid rgba(255,255,255,.22); box-shadow:0 16px 50px rgba(0,0,0,.6);
  animation:portraitIn .35s ease;
}
@keyframes portraitIn{from{opacity:0; transform:translateY(18px) scale(.94);}to{opacity:1; transform:none;}}
#portrait-img{width:100%; height:100%; object-fit:cover; object-position:top center;}

/* dialogue */
#dialog{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  width:min(980px, 94vw); min-height:190px; z-index:30;
  background:var(--glass); backdrop-filter:blur(16px);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:20px 26px 26px; cursor:pointer;
  animation:dialogIn .3s ease;
}
@keyframes dialogIn{from{opacity:0; transform:translate(-50%, 14px);}to{opacity:1; transform:translate(-50%,0);}}
.nameplate{
  display:inline-flex; align-items:baseline; gap:10px; margin-bottom:12px;
  padding:6px 16px 7px; border-radius:10px 10px 10px 2px;
  font-weight:800; font-size:1.06rem; letter-spacing:.04em;
  background:linear-gradient(120deg, var(--plate, #a06bff), rgba(160,107,255,.55));
  box-shadow:0 4px 16px rgba(0,0,0,.35); animation:plateIn .25s ease;
}
@keyframes plateIn{from{opacity:0; transform:translateX(-10px);}to{opacity:1; transform:none;}}
.nameplate .name-role{font-size:.68rem; font-weight:600; opacity:.75; letter-spacing:.1em; text-transform:uppercase;}
#dialog-text{
  font-family:var(--font-vn); font-size:1.14rem; line-height:1.62; min-height:74px;
  letter-spacing:.015em; color:#fbf9ff;
}
#dialog-text.narration{color:#d9d4ee; font-style:italic;}
#dialog-text.action{
  color:#b6b0cc; font-style:italic; text-align:center; font-size:1.05rem; padding-top:8px;
}
#dialog-text.action::before{content:"“";}
#dialog-text.action::after{content:"”";}
#dialog-text .caret{display:inline-block; width:2px; height:1em; background:var(--gold); margin-left:2px; vertical-align:-2px; animation:caretBlink .7s infinite;}
@keyframes caretBlink{0%,100%{opacity:1;}50%{opacity:0;}}
.adv-hint{position:absolute; right:22px; bottom:14px; color:var(--accent3); font-size:1.1rem; animation:bob 1.1s ease-in-out infinite; opacity:.9;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}

/* choices */
#choices-wrap{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  width:min(760px, 92vw); z-index:35; display:flex; flex-direction:column; gap:10px;
  animation:fadeUp .3s ease;
}
.choice-btn{
  width:100%; text-align:left; padding:13px 18px; border-radius:13px; font-size:1rem; font-weight:600;
  background:var(--glass); border:1px solid var(--line); color:var(--ink);
  backdrop-filter:blur(10px); transition:all .16s ease; position:relative;
}
.choice-btn:hover{border-color:var(--accent1); transform:translateX(6px); box-shadow:0 0 20px rgba(255,95,162,.28); color:#fff;}
.choice-btn .ch-hint{display:block; font-size:.74rem; font-weight:400; color:var(--ink-dim); margin-top:3px;}
.choice-btn.required{border-left:3px solid var(--gold);}
.custom-choice{display:flex; gap:8px;}
#custom-input{
  flex:1; min-width:0; padding:12px 16px; border-radius:13px; font-size:.95rem;
  background:rgba(10,7,26,.85); border:1px dashed rgba(79,216,255,.45); outline:none; transition:.18s;
}
#custom-input:focus{border-style:solid; border-color:var(--accent3); box-shadow:0 0 16px rgba(79,216,255,.25);}
.custom-choice .menu-btn{width:auto; padding:12px 18px;}

/* drawer */
.drawer{
  position:absolute; top:64px; right:14px; bottom:14px; z-index:45; width:min(320px, 90vw);
  background:var(--glass-2); backdrop-filter:blur(18px); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; overflow-y:auto; animation:drawerIn .28s ease; box-shadow:var(--shadow);
}
@keyframes drawerIn{from{opacity:0; transform:translateX(30px);}to{opacity:1; transform:none;}}
.drawer-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.drawer h3{font-size:1.05rem; letter-spacing:.06em;}
.drawer h4{font-size:.78rem; letter-spacing:.12em; color:var(--accent3); margin:16px 0 8px; text-transform:uppercase;}
.bond-row{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.06);}
.bond-avatar{width:34px; height:34px; border-radius:50%; overflow:hidden; flex-shrink:0; border:2px solid var(--plate,#a06bff); background:linear-gradient(135deg, rgba(160,107,255,.4), rgba(255,95,162,.4)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem;}
.bond-avatar img{width:100%; height:100%; object-fit:cover;}
.bond-name{flex:1; font-size:.9rem; font-weight:600;}
.bond-hearts{letter-spacing:2px; font-size:.85rem;}
.heart.full{color:var(--accent1); text-shadow:0 0 8px rgba(255,95,162,.7);}
.heart.empty{color:rgba(255,255,255,.15);}
.gauge-row{margin:8px 0;}
.gauge-row .gauge-lab{display:flex; justify-content:space-between; font-size:.82rem; margin-bottom:5px; color:var(--ink-dim);}
.gauge-row .gauge-bar{height:9px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden;}
.gauge-row .gauge-fill{height:100%; border-radius:99px; background:linear-gradient(90deg, var(--accent3), var(--accent2), var(--accent1)); transition:width .6s ease;}
.item-chip{display:inline-block; padding:4px 12px; margin:0 6px 6px 0; border-radius:99px; background:rgba(79,216,255,.1); border:1px solid rgba(79,216,255,.35); font-size:.78rem; color:var(--accent3);}
.flag-chip{display:inline-block; padding:3px 10px; margin:0 6px 6px 0; border-radius:99px; background:rgba(255,215,106,.08); border:1px solid rgba(255,215,106,.3); font-size:.72rem; color:var(--gold);}
.log-entry{padding:7px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:.8rem; line-height:1.5; color:var(--ink-dim);}
.log-entry .log-who{color:var(--ink); font-weight:700;}
.log-entry.log-action{color:#9a93b5; font-style:italic;}
.log-entry.log-action::before{content:"“";} .log-entry.log-action::after{content:"”";}

/* ending overlay */
.overlay{
  position:fixed; inset:0; z-index:300; background:rgba(4,2,12,.86); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; padding:20px; overflow-y:auto;
  animation:overlayIn .4s ease;
}
@keyframes overlayIn{from{opacity:0;}to{opacity:1;}}
.ending-box{
  width:min(620px, 94vw); background:var(--glass-2); border:1px solid var(--line); border-radius:22px;
  padding:38px 34px; text-align:center; box-shadow:var(--shadow); animation:fadeUp .5s ease;
}
.ending-rank{
  width:92px; height:92px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:2.6rem; font-weight:900; color:#0a0718;
  background:conic-gradient(from 120deg, #ffd76a, #fff3c9, #ffd76a); box-shadow:0 0 44px rgba(255,215,106,.55);
  animation:rankSpin 1s ease;
}
.ending-rank.rank-A{background:conic-gradient(from 120deg, #ff5fa2, #ffb3d2, #ff5fa2); box-shadow:0 0 44px rgba(255,95,162,.55);}
.ending-rank.rank-B{background:conic-gradient(from 120deg, #4fd8ff, #b7ecff, #4fd8ff); box-shadow:0 0 44px rgba(79,216,255,.55);}
.ending-rank.rank-C{background:conic-gradient(from 120deg, #b9b2d4, #e8e4f5, #b9b2d4); box-shadow:0 0 44px rgba(185,178,212,.45);}
@keyframes rankSpin{from{opacity:0; transform:rotate(-140deg) scale(.5);}to{opacity:1; transform:none;}}
.ending-box h2{font-size:1.5rem; margin-bottom:14px; letter-spacing:.04em;}
.ending-blurb{color:var(--ink-dim); line-height:1.65; margin-bottom:18px;}
.ending-stats{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:24px;}
.ending-stat{background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:10px; padding:8px 14px; font-size:.8rem;}
.ending-stat b{color:var(--gold);}
.ending-actions{display:flex; flex-direction:column; gap:10px; max-width:320px; margin:0 auto;}

/* ================= CHAT ================= */
#screen-chat{display:flex; flex-direction:column; background:radial-gradient(ellipse at 50% 0%, #1a1233 0%, #070512 70%);}
#chat-body{flex:1; display:flex; flex-direction:column; min-height:0; max-width:860px; width:100%; margin:0 auto; padding:14px 16px 10px;}
#chat-scroll{flex:1; overflow-y:auto; padding:8px 2px 14px; scroll-behavior:smooth;}
.chat-intro{background:var(--glass); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:16px; color:var(--ink-dim); font-size:.9rem; line-height:1.6;}
.chat-intro b{color:var(--ink);}
.chat-sub{margin-top:8px; font-size:.8rem;}
.chat-msg{margin-bottom:12px; animation:fadeUp .3s ease;}
.chat-msg .cm-plate{display:inline-block; padding:3px 12px; border-radius:8px 8px 2px 8px; font-size:.78rem; font-weight:800; background:linear-gradient(120deg, var(--plate,#a06bff), rgba(160,107,255,.5)); margin-bottom:6px;}
.chat-msg.user .cm-plate{background:linear-gradient(120deg, #ffd76a, #c9a227);}
.chat-msg .cm-body{background:var(--glass); border:1px solid var(--line); border-radius:2px 14px 14px 14px; padding:12px 16px; font-family:var(--font-vn); line-height:1.55; font-size:1rem;}
.chat-msg.user .cm-body{background:rgba(255,215,106,.08); border-color:rgba(255,215,106,.3); border-radius:14px 2px 14px 14px;}
.chat-msg .cm-body.action{color:#b6b0cc; font-style:italic;}
.chat-msg .cm-body.narration{color:#d9d4ee; font-style:italic;}
.chat-msg .cm-body.action::before{content:"“";} .chat-msg .cm-body.action::after{content:"”";}
.chat-msg .cm-choice{display:block; width:100%; text-align:left; margin-top:8px; padding:10px 14px; border-radius:10px; background:rgba(79,216,255,.08); border:1px solid rgba(79,216,255,.4); color:var(--ink); font-size:.92rem; font-weight:600; transition:.15s;}
.chat-msg .cm-choice:hover{background:rgba(79,216,255,.2); transform:translateX(4px);}
.chat-ideas{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:6px 0 10px;}
.chip-label{font-size:.74rem; color:var(--ink-dim); letter-spacing:.1em;}
.chip{padding:7px 13px; border-radius:99px; background:var(--glass); border:1px solid var(--line); font-size:.78rem; color:var(--ink-dim); transition:.15s;}
.chip:hover{border-color:var(--accent2); color:#fff; transform:translateY(-1px);}
#chat-input-row{display:flex; gap:10px; padding:10px 0;}
#chat-input{flex:1; min-width:0; padding:14px 16px; border-radius:14px; background:var(--glass); border:1px solid var(--line); outline:none; font-size:.98rem; transition:.18s;}
#chat-input:focus{border-color:var(--accent3); box-shadow:0 0 18px rgba(79,216,255,.22);}
#chat-input-row .menu-btn{width:auto; padding:14px 22px;}
.chat-status{min-height:20px; text-align:center; font-size:.78rem; color:var(--ink-dim);}

/* ================= MODAL ================= */
#modal{display:none; align-items:center; justify-content:center;}
#modal.open{display:flex;}
.modal-box{
  width:min(680px, 94vw); max-height:88vh; overflow:hidden; display:flex; flex-direction:column;
  background:var(--glass-2); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow);
  animation:modalIn .3s ease;
}
@keyframes modalIn{from{opacity:0; transform:translateY(26px) scale(.97);}to{opacity:1; transform:none;}}
.modal-tabs{display:flex; gap:4px; padding:12px 12px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; align-items:center;}
.mtab{padding:9px 15px; border-radius:10px 10px 0 0; font-size:.88rem; font-weight:700; color:var(--ink-dim); transition:.15s; border:1px solid transparent; border-bottom:none;}
.mtab:hover{color:#fff;}
.mtab.active{color:#fff; background:rgba(255,255,255,.07); border-color:var(--line);}
#btn-modal-close{margin-left:auto; margin-bottom:8px;}
.mtab-body{overflow-y:auto; padding:20px 22px 26px;}
.field{display:block; margin-bottom:16px;}
.field>span{display:block; font-size:.8rem; font-weight:700; letter-spacing:.08em; color:var(--ink-dim); margin-bottom:7px; text-transform:uppercase;}
.field input[type="text"], .field input[type="password"], .field select, .field textarea{
  width:100%; padding:11px 14px; border-radius:11px; background:rgba(10,7,26,.8); border:1px solid var(--line);
  outline:none; font-size:.95rem; transition:.18s;
}
.field select option{background:#14102b;}
.field input:focus, .field select:focus{border-color:var(--accent3); box-shadow:0 0 14px rgba(79,216,255,.2);}
.field input[type="range"]{width:100%; accent-color:var(--accent2);}
.field-note{display:block; margin-top:6px; font-size:.74rem; color:rgba(185,178,212,.6);}
.key-row{display:flex; gap:8px;}
.key-row input{flex:1;}
.link{color:var(--accent3);}
.ai-hero{background:linear-gradient(120deg, rgba(79,216,255,.12), rgba(160,107,255,.14)); border:1px solid rgba(79,216,255,.35); border-radius:14px; padding:13px 16px; margin-bottom:18px; font-size:.9rem; line-height:1.55; color:var(--ink-dim);}
.ai-hero b{color:var(--ink);}
.ai-actions{display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 14px;}
.ai-status{font-size:.85rem; color:var(--ink-dim); min-height:20px; margin-bottom:8px; line-height:1.5;}
.ai-status.ok{color:#7dffb0;} .ai-status.err{color:#ff8a95;}
.advanced{margin:10px 0 4px;}
.advanced summary{cursor:pointer; font-size:.82rem; color:var(--accent3); letter-spacing:.06em; padding:6px 0;}
.sysprompt{width:100%; min-height:120px; margin-top:10px; padding:12px 14px; border-radius:11px; background:rgba(10,7,26,.85); border:1px solid var(--line); font-size:.82rem; line-height:1.5; font-family:ui-monospace,Consolas,monospace; outline:none; resize:vertical;}
.ai-divider{height:1px; background:var(--line); margin:20px 0;}
.toggle-row{display:flex; gap:26px; margin:6px 0 18px; flex-wrap:wrap;}
.toggle-row label{display:flex; align-items:center; gap:8px; font-size:.92rem; cursor:pointer;}
.toggle-row input{accent-color:var(--accent2); width:17px; height:17px;}
.help-list p{margin-bottom:14px; line-height:1.65; color:var(--ink-dim); font-size:.92rem;}
.help-list b{color:var(--ink);}
.sample-action{color:#b6b0cc; font-style:italic;}
.sample-action::before{content:"“";} .sample-action::after{content:"”";}

/* saves */
.save-slot{
  display:flex; align-items:center; gap:14px; padding:13px 15px; margin-bottom:10px;
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:13px; transition:.15s;
}
.save-slot:hover{border-color:var(--accent2);}
.save-info{flex:1; min-width:0;}
.save-info .sv-title{font-weight:700; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.save-info .sv-meta{font-size:.75rem; color:var(--ink-dim); margin-top:3px;}
.save-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}
.import-area{width:100%; margin-top:10px; min-height:90px; padding:10px 12px; border-radius:10px; background:rgba(10,7,26,.85); border:1px dashed var(--line); font-size:.78rem; resize:vertical; outline:none;}

/* gallery */
.ending-card{display:flex; align-items:center; gap:14px; padding:12px 15px; margin-bottom:10px; background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:13px;}
.ending-card .rank-badge{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.1rem; background:#222; border:1px solid var(--line); color:var(--ink-dim); flex-shrink:0;}
.ending-card .rank-badge.got-A{background:linear-gradient(135deg,#ff5fa2,#ffb3d2); color:#2a0a18;}
.ending-card .rank-badge.got-B{background:linear-gradient(135deg,#4fd8ff,#b7ecff); color:#06202c;}
.ending-card .rank-badge.got-S{background:linear-gradient(135deg,#ffd76a,#fff3c9); color:#2a2006;}
.ending-card .rank-badge.got-C{background:linear-gradient(135deg,#b9b2d4,#e8e4f5); color:#1a1626;}
.ending-card .ec-info{flex:1;}
.ending-card .ec-title{font-weight:700; font-size:.92rem;}
.ending-card .ec-meta{font-size:.75rem; color:var(--ink-dim); margin-top:2px;}
.ach-chip{display:inline-flex; align-items:center; gap:8px; margin:0 8px 8px 0; padding:7px 13px; border-radius:99px; background:rgba(255,255,255,.05); border:1px solid var(--line); font-size:.8rem; color:var(--ink-dim);}
.ach-chip.got{border-color:rgba(255,215,106,.5); color:var(--gold); background:rgba(255,215,106,.08);}
.gallery-section-title{font-size:.78rem; letter-spacing:.14em; color:var(--accent3); text-transform:uppercase; margin:18px 0 10px;}

/* chat save list */
#chat-save-list .save-slot .sv-title{color:var(--accent3);}
#chat-save-list .save-slot [data-act="rename"]{font-size:.85rem;}

/* scrollbars */
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(160,107,255,.35); border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:rgba(160,107,255,.6);}

/* responsive */
@media (max-width:760px){
  #portrait-wrap{left:8px; bottom:34vh; width:96px;}
  #dialog{min-height:150px; padding:16px 18px 20px;}
  #dialog-text{font-size:1.02rem;}
  .nameplate{font-size:.95rem;}
  .title-menu{width:min(320px, 92vw);}
  .tb-title #tb-chapter{display:none;}
  .gauge-pill .gauge-bar{width:44px;}
  .drawer{top:60px; right:8px; bottom:8px;}
}
@media (max-width:480px){
  #topbar{gap:6px; padding:10px;}
  .tb-btn{width:34px; height:34px;}
  #dialog{bottom:12px;}
}