:root { --ink:#f3e6f0; --ink2:#c9b3c6; --plum:#2a1630; --plum2:#3d2145; --neon:#ff5fa2; --neon2:#ff8fc0; --amber:#ffb454; --teal:#46d6c4; --shadow:0 10px 30px rgba(0,0,0,.55); }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:#08040a; overflow:hidden; font-family:"Trebuchet MS", "Segoe UI", system-ui, sans-serif; color:var(--ink); -webkit-tap-highlight-color:transparent; }
#wrap { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }
#game { position:relative; width:1280px; height:720px; flex:none; transform-origin:center center; overflow:hidden; overflow:clip; background:#120814; user-select:none; -webkit-user-select:none; }
.hidden { display:none !important; }
.bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .7s; }
.bg.on { opacity:1; }
#charLayer { position:absolute; inset:0; pointer-events:none; }
#charImg { position:absolute; left:50%; bottom:0; height:660px; transform:translateX(-50%); opacity:0; transition:opacity .35s; filter:drop-shadow(0 10px 22px rgba(0,0,0,.6)); }
#charImg.on { opacity:1; }
#charImg.enter { animation:enter .45s ease-out; }
#charImg.bump { animation:bump .3s ease-out; }
@keyframes enter { from { transform:translate(-50%, 24px); opacity:0; } to { transform:translate(-50%, 0); opacity:1; } }
@keyframes bump { 40% { transform:translate(-50%, -8px); } }
#cg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .9s; pointer-events:none; z-index:5; }
#cg.on { opacity:1; pointer-events:auto; }
#fade { position:absolute; inset:0; background:#000; opacity:0; transition:opacity 1.2s; pointer-events:none; z-index:6; }
#fade.on { opacity:1; }
button { font-family:inherit; font-size:16px; font-weight:bold; color:#fff; background:linear-gradient(#4a2a55,#2c1734); border:2px solid #8a5a96; border-radius:12px; padding:8px 14px; cursor:pointer; box-shadow:0 3px 0 #170a1c; transition:transform .08s ease, filter .12s ease, box-shadow .12s ease; }
button:hover:not(:disabled) { filter:brightness(1.15); transform:translateY(-1px); }
button:active:not(:disabled) { transform:translateY(2px); box-shadow:0 1px 0 #170a1c; }
button:disabled { opacity:.5; cursor:default; }
button:focus-visible { outline:3px solid var(--teal); outline-offset:2px; }
button.primary { background:linear-gradient(#ff6fae,#c2316f); border-color:#ffc0dc; box-shadow:0 3px 0 #5a0f32, 0 0 18px rgba(255,95,162,.35); }
/* HUD */
#hud { position:absolute; top:10px; left:10px; right:10px; display:flex; gap:8px; z-index:30; pointer-events:none; }
.hud-chip { background:rgba(20,8,24,.8); color:var(--ink); border:1.5px solid rgba(255,95,162,.55); border-radius:12px; padding:5px 12px; font-size:15px; font-weight:bold; }
.hud-btn { pointer-events:auto; padding:4px 12px; font-size:14px; }
#hudLog { margin-left:auto; }
/* VN */
#vn { position:absolute; left:110px; right:110px; bottom:16px; height:172px; background:linear-gradient(rgba(34,14,40,.94),rgba(16,6,20,.97)); border:2px solid rgba(255,95,162,.7); border-radius:20px; box-shadow:var(--shadow), 0 0 24px rgba(255,95,162,.18); padding:30px 34px 16px; z-index:20; cursor:pointer; }
#vn.sms { background:linear-gradient(rgba(14,28,40,.95),rgba(8,14,22,.97)); border-color:rgba(120,190,255,.8); }
#vn.sms #vnText::before { content:"\1F4F1  "; }
#vnName { position:absolute; top:-18px; left:28px; background:var(--neon); color:#fff; font-weight:bold; font-size:19px; padding:5px 18px; border-radius:12px; border:2px solid rgba(255,230,245,.85); font-family:Georgia, serif; text-shadow:0 1px 2px rgba(0,0,0,.5); }
#vnText { font-size:21px; line-height:1.45; white-space:pre-wrap; }
#vnText.nar { font-style:italic; color:#e7cfe0; }
#vnText.me { color:#bfe3ff; }
#vnNext { position:absolute; right:22px; bottom:12px; color:var(--neon2); opacity:0; animation:bob 1s infinite; }
#vnNext.on { opacity:1; }
@keyframes bob { 50% { transform:translateY(4px); } }
#vnCtrl { position:absolute; right:16px; top:-16px; display:flex; gap:6px; }
#vnCtrl button { font-size:14px; padding:4px 13px; border-radius:9px; }
#vnCtrl button.on { background:linear-gradient(#ffd18a,#ff9f3a); color:#2a1210; box-shadow:0 0 0 2px rgba(255,180,84,.7); }
#choices { position:absolute; left:50%; transform:translateX(-50%); bottom:204px; width:800px; display:flex; flex-direction:column; gap:9px; z-index:22; }
#choices button { text-align:left; font-size:18px; padding:11px 18px; border-radius:16px; background:linear-gradient(rgba(58,28,66,.97),rgba(34,14,40,.97)); display:flex; align-items:center; gap:10px; animation:panelin .2s ease-out both; }
#choices button:nth-child(2) { animation-delay:.04s; } #choices button:nth-child(3) { animation-delay:.08s; } #choices button:nth-child(4) { animation-delay:.12s; }
#choices button:hover:not(:disabled) { border-color:var(--neon2); box-shadow:0 3px 0 #170a1c, 0 0 0 3px rgba(255,95,162,.35); }
#choices button .k { flex:none; width:26px; height:26px; line-height:24px; text-align:center; border-radius:50%; background:var(--neon); color:#fff; font-size:14px; }
#choices button .tag { flex:none; font-size:12px; text-transform:uppercase; letter-spacing:.5px; padding:2px 8px; border-radius:8px; background:#5a3a66; color:#f2dcef; }
#choices .ct { display:flex; flex-direction:column; }
#choices .why { font-weight:normal; font-style:italic; font-size:14px; color:#d9a8c6; margin-top:2px; }
#choices .k-bound .tag { background:#1f5a52; color:#bff5ea; } #choices .k-flirt .tag { background:#7a1f4a; color:#ffd0e6; } #choices .k-please .tag { background:#5a4a2a; color:#ffe6b8; }
#choices .k-friend .tag { background:#2a4a7a; color:#d0e4ff; } #choices .k-leave .tag { background:#1f6a3a; color:#cfffdc; } #choices .k-honest .tag { background:#3a3a6a; color:#e0e0ff; }
@keyframes panelin { from { opacity:0; transform:scale(.985); } to { opacity:1; transform:none; } }
/* panels */
#screen { position:absolute; inset:0; z-index:25; }
.panel { position:absolute; background:linear-gradient(rgba(40,18,48,.96), rgba(22,8,28,.97)); border:2px solid rgba(255,95,162,.6); border-radius:22px; box-shadow:var(--shadow); padding:20px 24px; animation:panelin .18s ease-out; }
.panel h2 { margin:0 0 6px; font-family:Georgia, "Palatino Linotype", serif; color:var(--neon2); font-size:28px; }
.sub { color:var(--ink2); font-size:15px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.scroll { overflow-y:auto; }
.scroll::-webkit-scrollbar { width:10px; } .scroll::-webkit-scrollbar-thumb { background:#8a5a96; border-radius:6px; }
.note { background:rgba(255,255,255,.06); border-left:4px solid var(--amber); border-radius:6px; padding:7px 10px; margin:8px 0; font-size:15px; line-height:1.35; }
.note.hint { border-left-color:var(--teal); }
/* title */
.title-logo { position:absolute; left:70px; top:64px; color:#fff; text-shadow:0 0 18px rgba(255,95,162,.9), 0 4px 0 #6a1440; }
.title-logo .t1 { font-family:Georgia, serif; font-size:96px; font-weight:bold; line-height:1; }
.title-logo .t2 { font-family:Georgia, serif; font-size:30px; margin-top:8px; font-style:italic; color:#ffd0e6; }
.title-menu { position:absolute; left:80px; top:260px; display:flex; flex-direction:column; gap:12px; width:280px; }
.title-menu button { font-size:20px; padding:11px 18px; text-align:left; }
.title-foot { position:absolute; right:18px; bottom:12px; color:rgba(255,230,245,.8); font-size:13px; text-shadow:0 1px 3px #000; }
.badge-rating { position:absolute; right:18px; top:16px; background:rgba(20,8,24,.85); border-radius:12px; padding:6px 12px; font-size:13px; color:var(--neon2); font-weight:bold; border:2px solid var(--neon); }
.title-cast { position:absolute; right:10px; bottom:0; width:780px; height:560px; pointer-events:none; }
.title-cast .tc { position:absolute; bottom:0; filter:drop-shadow(0 8px 18px rgba(0,0,0,.7)); }
.tc0 { right:500px; height:430px; } .tc1 { right:220px; height:520px; } .tc2 { right:-70px; height:450px; }
.hint-audio { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); font-size:14px; background:rgba(20,8,24,.7); padding:5px 14px; border-radius:12px; }
.cn p { font-size:16px; line-height:1.45; margin:8px 0; } .cn-toggle { background:rgba(255,255,255,.06); border-radius:12px; padding:8px 12px; cursor:pointer; }
/* night card */
.nightcard-wrap { background:rgba(6,2,8,.6); display:flex; align-items:center; justify-content:center; }
.nightcard { text-align:center; animation:fadeup 1.7s ease-out forwards; }
.nc0 { font-size:20px; letter-spacing:4px; text-transform:uppercase; color:var(--teal); }
.nc1 { font-family:Georgia, serif; font-size:84px; font-weight:bold; text-shadow:0 0 30px rgba(255,95,162,.8); }
.nc2 { font-size:22px; font-style:italic; color:#ffd0e6; }
@keyframes fadeup { 0% { opacity:0; transform:translateY(12px); } 20%,80% { opacity:1; transform:none; } 100% { opacity:0; } }
/* hub */
.hub { left:90px; top:58px; width:1100px; height:640px; display:flex; flex-direction:column; }
.mirror { font-size:14px; color:#e7cfe0; font-style:italic; background:rgba(255,255,255,.06); padding:5px 12px; border-radius:12px; max-width:520px; }
.who-grid { flex:1; min-height:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; padding-right:6px; align-content:start; }
.who { display:flex; gap:12px; align-items:center; text-align:left; padding:10px 12px; border-radius:16px; min-height:96px; }
.who.partner { border-color:var(--neon2); box-shadow:0 3px 0 #170a1c, 0 0 16px rgba(255,95,162,.4); }
.who.lou, .who.home { background:linear-gradient(#2a3a4a,#18222e); border-color:#5a7a96; }
.who .nm { font-size:17px; } .who .meta { font-weight:normal; font-size:13.5px; color:var(--ink2); margin-top:2px; }
.face { flex:none; width:76px; height:76px; border-radius:50%; background-color:#553; background-repeat:no-repeat; border:2px solid rgba(255,230,245,.8); display:flex; align-items:center; justify-content:center; font-size:30px; }
.face.lg { width:110px; height:110px; }
.homeicon { background:radial-gradient(#3a4a6a,#141c2a); }
.hearts { color:var(--neon); font-size:16px; letter-spacing:1px; }
.hub-foot { margin-top:10px; justify-content:flex-end; }
.cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-height:540px; padding-right:6px; }
.card { background:rgba(255,255,255,.05); border:1.5px solid rgba(255,95,162,.35); border-radius:16px; padding:10px; display:flex; gap:12px; }
.card .face { width:70px; height:70px; }
.card .nm { font-weight:bold; } .meta { font-size:13.5px; color:var(--ink2); } .bio { margin-top:4px; }
/* ending */
.endwrap .ending { left:150px; right:150px; bottom:40px; display:flex; gap:20px; align-items:flex-start; max-height:640px; }
.ending.over-cg { background:linear-gradient(rgba(30,12,36,.9), rgba(16,6,20,.95)); }
.ending .eb { flex:1; } .ending p { font-size:17px; line-height:1.5; margin:8px 0; }
.etag { display:inline-block; font-size:13px; text-transform:uppercase; letter-spacing:1px; padding:3px 10px; border-radius:8px; background:#5a3a66; margin-bottom:4px; }
.etag.best { background:#c2316f; } .etag.good { background:#7a3a8a; } .etag.toxic { background:#4a4a5a; } .etag.left, .etag.self { background:#1f6a52; } .etag.friend { background:#2a4a7a; } .etag.redeemed { background:#8a5a1f; } .etag.epi { background:#3a3a5a; }
.theend { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(6,2,8,.72); }
.theend .t1 { font-family:Georgia, serif; font-size:90px; font-weight:bold; text-shadow:0 0 30px rgba(255,95,162,.8); } .theend .t2 { font-size:24px; font-style:italic; } .theend .t3 { color:var(--ink2); }
.gal { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; max-height:540px; padding-right:6px; }
.gitem { display:flex; gap:10px; align-items:center; background:rgba(255,255,255,.05); border-radius:12px; padding:7px; } .gitem .face { width:54px; height:54px; font-size:22px; } .gitem.locked { opacity:.55; } .gitem .nm { font-weight:bold; font-size:14px; }
/* modal + toast */
#modal { position:absolute; inset:0; z-index:60; background:rgba(6,2,8,.6); display:flex; align-items:center; justify-content:center; }
#modal .panel { position:relative; min-width:380px; max-width:960px; max-height:690px; display:flex; flex-direction:column; }
.menu-col { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.slot { display:flex; justify-content:space-between; align-items:center; padding:9px 12px; border:1.5px solid rgba(255,95,162,.35); border-radius:14px; background:rgba(255,255,255,.05); margin-bottom:8px; gap:10px; }
.slot > .row { flex-wrap:nowrap; flex:none; }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:10px 0; } .set-row label { font-weight:bold; }
.set-row input[type=range] { width:240px; accent-color:var(--neon); } input[type=checkbox] { width:22px; height:22px; accent-color:var(--neon); }
.logbox { max-height:520px; padding-right:8px; }
.log-line { margin:6px 0; font-size:15.5px; line-height:1.4; } .log-line b { color:var(--neon2); }
input[type=text] { font-family:inherit; font-size:20px; padding:8px 12px; border-radius:10px; border:2px solid var(--neon); background:#1a0c20; color:#fff; width:100%; margin-top:10px; }
#toasts { position:absolute; top:52px; left:50%; transform:translateX(-50%); z-index:70; display:flex; flex-direction:column; gap:6px; align-items:center; pointer-events:none; }
.toast { background:rgba(30,12,36,.95); padding:8px 18px; border-radius:14px; font-size:15px; box-shadow:0 4px 14px rgba(0,0,0,.4); animation:toast 3.2s forwards; border:1.5px solid rgba(255,95,162,.6); }
.toast.heart { background:rgba(194,49,111,.95); } .toast.down { background:rgba(60,60,80,.95); } .toast.note { background:rgba(31,106,82,.95); }
@keyframes toast { 0% { opacity:0; transform:translateY(-8px); } 8% { opacity:1; transform:none; } 85% { opacity:1; } 100% { opacity:0; } }
#loader { position:absolute; inset:0; background:radial-gradient(circle at 50% 40%, #3a1440, #08040a); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#ffd0e6; z-index:100; transition:opacity .5s; }
#loader.done { opacity:0; pointer-events:none; }
.ld-title { font-family:Georgia, serif; font-size:52px; font-weight:bold; margin-bottom:22px; text-shadow:0 0 20px rgba(255,95,162,.8); }
.ld-bar { width:360px; height:12px; border-radius:7px; background:rgba(255,255,255,.15); overflow:hidden; }
#ldFill { height:100%; width:0; background:linear-gradient(90deg,#ff5fa2,#ffb454); transition:width .2s; }
#ldText { margin-top:12px; font-size:14px; opacity:.8; }
#rotateHint { display:none; position:fixed; left:50%; bottom:max(24px, env(safe-area-inset-bottom)); transform:translateX(-50%); background:rgba(20,8,24,.92); color:#ffd0e6; border:1px solid var(--neon); border-radius:999px; padding:8px 16px; font:14px/1.3 system-ui, sans-serif; z-index:200; }
@media (orientation: portrait) and (max-width: 700px) { #rotateHint { display:block; } }
/* phones: bigger text and tap targets inside the scaled stage */
#game.compact #vn { left:50px; right:50px; height:200px; }
#game.compact #vnText { font-size:27px; line-height:1.38; }
#game.compact #vnName { font-size:23px; }
#game.compact #vnCtrl { top:-26px; } #game.compact #vnCtrl button { font-size:19px; padding:7px 18px; }
#game.compact #choices { width:960px; bottom:236px; gap:10px; }
#game.compact #choices button { font-size:23px; padding:13px 20px; }
#game.compact #choices button .k { width:32px; height:32px; line-height:30px; font-size:17px; } #game.compact #choices button .tag { font-size:14px; } #game.compact #choices .why { font-size:17px; }
#game.compact .hud-btn { font-size:20px; padding:8px 18px; } #game.compact .hud-chip { font-size:19px; }
#game.compact .sub, #game.compact .note, #game.compact .mirror { font-size:18px; }
#game.compact .toast { font-size:20px; }
#game.compact .who .nm { font-size:21px; } #game.compact .who .meta { font-size:16.5px; } #game.compact .who-grid { grid-template-columns:repeat(3,1fr); }
#game.compact .hub-foot button, #game.compact .slot button, #game.compact #modal .panel > .row button { font-size:20px; padding:10px 22px; }
#game.compact .log-line, #game.compact .cn p { font-size:19px; } #game.compact .meta { font-size:16px; }
#game.compact .ending p { font-size:20px; } #game.compact .slot b { font-size:19px; }
#game.compact .title-menu button { font-size:24px; padding:13px 20px; }