/* ===== GACHA HEARTS — dating sim stylesheet ===== */
:root{
  --pink:#ff9ec4; --pink-d:#ff6fa5; --pink-l:#ffd6e6;
  --lav:#c7a9ff; --lav-d:#9d74ff;
  --cream:#fff6fb; --ink:#4a2c3d; --ink-soft:#7d5d6e;
  --gold:#ffd36e; --mint:#9be7c4; --sky:#a9d9ff;
  --box:#fffafd; --shadow:0 10px 30px rgba(150,60,110,.25);
  --r-ssr:#ffcf4d; --r-sr:#c79bff; --r-r:#8fd0ff; --r-ur:#ff7ad0;
  --font: "Trebuchet MS", "Segoe UI", "Hiragino Kaku Gothic Pro", system-ui, sans-serif;
  --serif: "Georgia","Hiragino Mincho Pro", serif;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font); color:var(--ink); background:#241726; overflow:hidden;
  user-select:none; -webkit-user-select:none; position:fixed; inset:0;
}
img{display:block}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
b{font-weight:700}

/* app is a fixed 9:16-ish stage that letterboxes; but we fill viewport */
.screen{position:absolute; inset:0; display:none; overflow:hidden}
.screen.show{display:block}
.overlay{position:absolute; inset:0; display:none; z-index:60; align-items:center; justify-content:center;
  background:rgba(40,20,40,.55); backdrop-filter:blur(3px)}
.overlay.show{display:flex}

/* ============ BOOT ============ */
#boot{background:radial-gradient(120% 120% at 50% 0%, #ffd9ec 0%, #ffc0e0 30%, #c9a2ff 100%);
  display:none}
#boot.show{display:flex}
#boot{align-items:center; justify-content:center}
.boot-inner{text-align:center; z-index:2}
.boot-logo{font-size:clamp(38px,10vw,86px); font-weight:900; color:#fff; letter-spacing:2px;
  text-shadow:0 4px 0 var(--pink-d), 0 8px 22px rgba(160,40,110,.5); position:relative}
.boot-heart{color:#fff; margin-left:6px; display:inline-block; animation:beat 1s infinite}
.boot-sub{margin-top:8px; color:#7a3a63; font-style:italic; font-size:clamp(14px,3.5vw,20px); font-weight:600}
.big-btn{margin-top:34px; padding:16px 46px; font-size:22px; font-weight:800; color:#fff;
  background:linear-gradient(180deg,#ff8fbc,#ff5f9c); border-radius:40px;
  box-shadow:0 8px 0 #d8447e, 0 14px 26px rgba(180,40,100,.45); transition:transform .08s, box-shadow .08s}
.big-btn:active{transform:translateY(5px); box-shadow:0 3px 0 #d8447e, 0 6px 14px rgba(180,40,100,.4)}
.boot-tip{margin-top:22px; color:#7a3a63; font-size:13px; opacity:.85}
.boot-petals{position:absolute; inset:0; pointer-events:none; overflow:hidden}

@keyframes beat{0%,100%{transform:scale(1)}20%{transform:scale(1.25)}40%{transform:scale(.95)}}

/* ============ TITLE ============ */
#title{background:#1c2740}
.title-bg{position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat}
.title-heroine{position:absolute; right:2%; bottom:0; height:98%; width:56%;
  background-position:right bottom; background-repeat:no-repeat; background-size:contain;
  filter:drop-shadow(0 0 40px rgba(255,150,200,.35)); animation:sway 6s ease-in-out infinite}
.title-panel{position:absolute; left:0; top:0; bottom:0; width:min(46%,440px);
  padding:min(6vh,54px) 30px; display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(90deg, rgba(30,20,45,.72) 60%, rgba(30,20,45,0)); z-index:3}
.game-logo{font-size:clamp(40px,7vw,72px); font-weight:900; line-height:.92; color:#fff;
  text-shadow:0 3px 0 var(--pink-d), 0 10px 26px rgba(0,0,0,.5)}
.game-logo span{color:var(--pink)}
.game-logo em{font-style:normal; color:#fff; font-size:.6em; margin-left:6px; animation:beat 1.1s infinite; display:inline-block}
.game-tag{color:#ffd0e6; font-style:italic; margin:10px 2px 26px; font-size:clamp(13px,2.4vw,18px)}
.title-menu{display:flex; flex-direction:column; gap:12px; max-width:300px}
.menu-btn{text-align:left; padding:14px 22px; font-size:19px; font-weight:700; color:var(--ink);
  background:linear-gradient(180deg,#fff,#ffe9f3); border-radius:16px; border:2px solid #ffffff;
  box-shadow:0 6px 0 rgba(200,120,160,.5); transition:transform .1s, box-shadow .1s, background .2s}
.menu-btn:hover{background:linear-gradient(180deg,#fff,#ffd9ec); transform:translateX(6px)}
.menu-btn:active{transform:translateY(3px); box-shadow:0 2px 0 rgba(200,120,160,.5)}
.title-foot{margin-top:26px; color:#c8b6d8; font-size:12px}

@keyframes sway{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(.5deg)}}

/* ============ VN STAGE ============ */
#vn{background:#000}
.bg-layer{position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:opacity .5s; will-change:transform}
.weather-layer{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.vignette{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(20,5,20,.5) 100%)}
.stage{position:absolute; inset:0; pointer-events:none}

.sprite{position:absolute; bottom:0; height:92%; transform-origin:bottom center;
  transition:opacity .4s, filter .4s, left .5s cubic-bezier(.2,.7,.2,1);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45)); will-change:transform}
.sprite img{height:100%; width:auto; image-rendering:auto}
.sprite.dim{filter:brightness(.62) drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.sprite.talking{animation:bob .5s ease-in-out infinite}
.sprite.idle{animation:idlesway 5s ease-in-out infinite}
.sprite.enter-l{animation:enterL .5s ease}
.sprite.enter-r{animation:enterR .5s ease}
.sprite.pop{animation:popin .45s cubic-bezier(.2,1.4,.4,1)}
.sprite.shake{animation:shake .4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6%)}}
@keyframes idlesway{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-.5%) rotate(.3deg)}}
@keyframes enterL{from{opacity:0; transform:translateX(-60px)}to{opacity:1; transform:translateX(0)}}
@keyframes enterR{from{opacity:0; transform:translateX(60px)}to{opacity:1; transform:translateX(0)}}
@keyframes popin{0%{opacity:0; transform:translateY(30px) scale(.9)}100%{opacity:1; transform:translateY(0) scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}

/* HUD */
.hud{position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between;
  padding:10px 12px; z-index:20}
.hud-left{display:flex; gap:8px}
.coin-chip,.gem-chip{background:rgba(255,255,255,.9); color:var(--ink); font-weight:800;
  padding:6px 12px; border-radius:20px; font-size:14px; box-shadow:var(--shadow)}
.hud-right{display:flex; gap:6px}
.hud-ic{background:rgba(255,255,255,.85); color:var(--ink-soft); font-weight:800; font-size:12px;
  padding:7px 11px; border-radius:14px; letter-spacing:.5px; box-shadow:0 3px 10px rgba(0,0,0,.2)}
.hud-ic.on{background:var(--pink); color:#fff}

/* dialogue box */
.dbox{position:absolute; left:50%; transform:translateX(-50%); bottom:2.5%;
  width:min(94%,880px); min-height:150px; z-index:20;
  background:linear-gradient(180deg, rgba(255,250,253,.97), rgba(255,239,247,.97));
  border:3px solid #fff; border-radius:22px; padding:26px 30px 22px;
  box-shadow:0 -2px 0 rgba(255,150,200,.5), var(--shadow); display:none}
.dbox.show{display:block}
.namebox{position:absolute; top:-20px; left:26px; background:linear-gradient(180deg,var(--pink),var(--pink-d));
  color:#fff; font-weight:800; padding:7px 20px; border-radius:14px; font-size:17px;
  box-shadow:0 5px 12px rgba(200,60,120,.4); border:2px solid #fff; display:none}
.namebox.show{display:block}
.dtext{font-size:clamp(16px,2.5vw,20px); line-height:1.6; color:var(--ink); min-height:1.6em;
  letter-spacing:.2px}
.dtext .em{color:var(--pink-d); font-weight:700}
.dtext .th{font-style:italic; color:var(--ink-soft)}
.dnext{position:absolute; right:22px; bottom:14px; color:var(--pink-d); font-weight:900;
  animation:beat 1.1s infinite; opacity:0; font-size:18px}
.dnext.show{opacity:1}

/* narration (no name) style */
.dbox.narration{background:linear-gradient(180deg, rgba(30,22,40,.86), rgba(30,22,40,.86)); border-color:rgba(255,255,255,.2)}
.dbox.narration .dtext{color:#f4e9f4; font-style:italic}

/* choices */
.choices{position:absolute; inset:0; z-index:30; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; padding:20px;
  background:rgba(30,15,35,.35)}
.choices.show{display:flex}
.choice{width:min(90%,560px); padding:16px 24px; font-size:clamp(15px,2.4vw,19px); font-weight:700;
  color:var(--ink); background:linear-gradient(180deg,#fff,#ffe9f3); border:2px solid #fff;
  border-radius:16px; box-shadow:0 6px 0 rgba(200,120,160,.5); text-align:center;
  transition:transform .1s, box-shadow .1s, background .2s; animation:popin .35s backwards}
.choice:hover{background:linear-gradient(180deg,#fff,#ffd3e8); transform:scale(1.02)}
.choice:active{transform:translateY(3px); box-shadow:0 2px 0 rgba(200,120,160,.5)}
.choice .hint{display:block; font-size:12px; color:var(--ink-soft); font-weight:600; margin-top:3px; opacity:.8}

/* affection popup */
.aff-pop{position:absolute; top:20%; left:50%; transform:translateX(-50%); z-index:40;
  font-weight:900; font-size:26px; opacity:0; pointer-events:none; text-shadow:0 2px 8px rgba(0,0,0,.4)}
.aff-pop.plus{color:var(--pink)}
.aff-pop.minus{color:#7fb0ff}
.aff-pop.go{animation:affrise 1.3s ease-out}
@keyframes affrise{0%{opacity:0; transform:translate(-50%,10px) scale(.6)}
  25%{opacity:1; transform:translate(-50%,0) scale(1.1)}
  100%{opacity:0; transform:translate(-50%,-46px) scale(1)}}

/* ============ GACHA ============ */
#gacha{background:#150e28; color:#fff}
.gacha-bg{position:absolute; inset:0;
  background:radial-gradient(120% 80% at 50% -10%, #4a2c7a 0%, #221240 45%, #120a22 100%)}
.gacha-stars{position:absolute; inset:0; overflow:hidden}
.gacha-head{position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px}
.gacha-title{font-weight:900; font-size:clamp(16px,3.6vw,24px); letter-spacing:2px;
  background:linear-gradient(90deg,#ffd36e,#ff8fd0,#a9c8ff); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; text-shadow:0 0 20px rgba(255,180,230,.3)}
.gacha-wallet{font-weight:800; background:rgba(255,255,255,.12); padding:7px 14px; border-radius:20px}
.back-btn{background:rgba(255,255,255,.14); color:#fff; font-weight:700; padding:8px 16px; border-radius:20px}
.banner{position:relative; z-index:5; margin:6px auto; width:min(94%,780px); height:min(46vh,420px);
  border-radius:22px; overflow:hidden; border:2px solid rgba(255,255,255,.25);
  box-shadow:0 12px 40px rgba(0,0,0,.5); background:linear-gradient(135deg,#3a2260,#5a2f7a)}
.banner-art{position:absolute; inset:0; background-size:contain; background-position:center bottom;
  background-repeat:no-repeat; filter:drop-shadow(0 0 30px rgba(255,180,230,.4))}
.banner::before{content:""; position:absolute; inset:0;
  background:radial-gradient(70% 90% at 50% 100%, rgba(255,200,240,.25), transparent 60%)}
.banner-info{position:absolute; left:0; right:0; bottom:0; padding:16px 20px;
  background:linear-gradient(0deg, rgba(20,10,35,.9), transparent)}
.banner-name{font-weight:900; font-size:22px}
.banner-rate{font-size:12px; color:#d9c7ff; margin-top:2px}
.pity-row{position:relative; z-index:5; display:flex; align-items:center; gap:10px;
  width:min(94%,780px); margin:8px auto; font-size:13px; color:#e7d9ff}
.pity-bar{flex:1; height:10px; background:rgba(255,255,255,.14); border-radius:8px; overflow:hidden}
.pity-fill{height:100%; width:0%; background:linear-gradient(90deg,#ffd36e,#ff7ad0); transition:width .4s}
.pull-row{position:relative; z-index:5; display:flex; gap:14px; width:min(94%,780px); margin:6px auto 0}
.pull-btn{flex:1; padding:16px; border-radius:18px; color:#3a2050; font-weight:900;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  box-shadow:0 8px 0 rgba(0,0,0,.3); transition:transform .1s, box-shadow .1s}
.pull-btn:active{transform:translateY(5px); box-shadow:0 3px 0 rgba(0,0,0,.3)}
.pull-btn.one{background:linear-gradient(180deg,#bfe3ff,#8fc7ff)}
.pull-btn.ten{background:linear-gradient(180deg,#ffe28a,#ffcf4d)}
.pb-title{font-size:19px}
.pb-cost{font-size:15px}
.pb-note{font-size:11px; font-weight:700; opacity:.75}
.gacha-foot{position:relative; z-index:5; text-align:center; color:#b9a8d8; font-size:12px; margin-top:14px; padding:0 20px}

/* pull FX overlay */
.pullfx{position:absolute; inset:0; z-index:80; display:none; background:#05030a}
.pullfx.show{display:block}
.pullfx-sky{position:absolute; inset:0; opacity:0; transition:opacity .6s;
  background:radial-gradient(circle at 50% 50%, #2a1650, #0a0616)}
#pullCanvas{position:absolute; inset:0; width:100%; height:100%}
.reveal{position:absolute; inset:0; display:none; align-items:center; justify-content:center; flex-direction:column}
.reveal.show{display:flex}
.reveal .card{position:relative; height:min(80%,620px); animation:cardin .6s cubic-bezier(.2,1.3,.4,1)}
.reveal .card img{height:100%; filter:drop-shadow(0 0 40px rgba(255,200,240,.6))}
.reveal .rvname{position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  font-weight:900; font-size:26px; color:#fff; text-shadow:0 3px 12px rgba(0,0,0,.7); white-space:nowrap}
.reveal .rvrar{position:absolute; top:6%; left:50%; transform:translateX(-50%);
  font-weight:900; font-size:40px; letter-spacing:4px}
.reveal .rvnew{position:absolute; top:2%; right:8%; background:var(--pink-d); color:#fff;
  font-weight:900; padding:4px 12px; border-radius:12px; transform:rotate(8deg); font-size:14px}
.reveal .rvtap{position:absolute; bottom:18px; width:100%; text-align:center; color:#fff; opacity:.8; font-size:14px}
.reveal .dupe{position:absolute; bottom:-40px; left:50%; transform:translateX(-50%); color:#ffd36e; font-weight:800}
@keyframes cardin{from{opacity:0; transform:translateY(40px) scale(.8)}to{opacity:1; transform:none}}
.skip-fx{position:absolute; top:14px; right:16px; z-index:90; color:#fff; background:rgba(255,255,255,.15);
  padding:8px 14px; border-radius:16px; font-weight:700; font-size:13px}

/* multi reveal strip */
.reveal .strip{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:92%}
.reveal .strip .mini{width:78px; height:112px; border-radius:10px; overflow:hidden; position:relative;
  animation:popin .3s backwards; border:2px solid #fff}
.reveal .strip .mini img{width:100%; height:100%; object-fit:cover; object-position:top}
.reveal .strip .mini .mr{position:absolute; top:2px; left:3px; font-size:10px; font-weight:900; text-shadow:0 1px 2px #000}

/* ============ COLLECTION ============ */
#collection{background:linear-gradient(160deg,#fff0f7,#ffe0ef 60%,#e9d7ff)}
.coll-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px}
.coll-head .back-btn{background:var(--pink); color:#fff}
.coll-title{font-weight:900; font-size:22px; color:var(--ink)}
.coll-count{font-weight:800; color:var(--ink-soft)}
.coll-grid{position:absolute; top:60px; bottom:0; left:0; right:0; overflow-y:auto;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; padding:12px 16px 30px}
.coll-card{position:relative; aspect-ratio:3/4.2; border-radius:16px; overflow:hidden;
  box-shadow:0 8px 20px rgba(150,60,110,.25); transition:transform .12s; background:#eee}
.coll-card:active{transform:scale(.96)}
.coll-card img{width:100%; height:100%; object-fit:cover; object-position:top center}
.coll-card.locked img{filter:grayscale(1) brightness(.35)}
.coll-card .lock{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:34px; color:rgba(255,255,255,.85)}
.coll-card .cc-name{position:absolute; bottom:0; left:0; right:0; padding:16px 8px 6px; color:#fff;
  font-weight:800; font-size:13px; text-align:center; text-shadow:0 1px 3px #000;
  background:linear-gradient(0deg, rgba(0,0,0,.75), transparent)}
.coll-card .cc-rar{position:absolute; top:5px; left:5px; font-size:11px; font-weight:900; padding:2px 7px;
  border-radius:8px; color:#3a2050; text-shadow:none}
.coll-card .cc-hearts{position:absolute; top:5px; right:6px; font-size:11px; color:#ff5f9c; text-shadow:0 1px 2px #fff}
.rar-frame-SSR{box-shadow:0 0 0 3px var(--r-ssr), 0 8px 20px rgba(220,160,40,.5)}
.rar-frame-UR{box-shadow:0 0 0 3px var(--r-ur), 0 8px 24px rgba(255,110,200,.55); animation:urglow 2s infinite}
.rar-frame-SR{box-shadow:0 0 0 3px var(--r-sr), 0 8px 18px rgba(150,110,220,.4)}
.rar-frame-R{box-shadow:0 0 0 2px var(--r-r), 0 6px 14px rgba(120,180,240,.35)}
@keyframes urglow{0%,100%{box-shadow:0 0 0 3px var(--r-ur),0 0 18px rgba(255,110,200,.5)}50%{box-shadow:0 0 0 3px #fff,0 0 30px rgba(255,140,220,.9)}}
.bg-SSR{background:var(--r-ssr)} .bg-SR{background:var(--r-sr)} .bg-R{background:var(--r-r)} .bg-UR{background:var(--r-ur)}
.tx-SSR{color:var(--r-ssr)} .tx-SR{color:var(--r-sr)} .tx-R{color:var(--r-r)} .tx-UR{color:var(--r-ur)}

/* character detail */
#charDetail{background:linear-gradient(160deg,#2a1b3a,#432a5e)}
.cd-art{position:absolute; right:0; bottom:0; top:0; width:60%;
  background-size:contain; background-position:right bottom; background-repeat:no-repeat;
  filter:drop-shadow(0 0 40px rgba(255,150,220,.35)); animation:sway 6s ease-in-out infinite}
.cd-panel{position:absolute; left:0; top:0; bottom:0; width:min(52%,460px); padding:20px 26px;
  display:flex; flex-direction:column; gap:8px; overflow-y:auto;
  background:linear-gradient(90deg, rgba(20,12,30,.8) 70%, transparent)}
.cd-panel .back-btn{align-self:flex-start; background:var(--pink); color:#fff; margin-bottom:6px}
.cd-rar{font-weight:900; font-size:22px; letter-spacing:3px}
.cd-name{color:#fff; font-size:34px; font-weight:900; line-height:1}
.cd-from{color:#d9c7ff; font-size:13px; font-style:italic}
.cd-affrow{display:flex; align-items:center; gap:10px; margin-top:8px; color:#fff; font-weight:700}
.cd-hearts{font-size:20px; letter-spacing:2px}
.cd-bio{color:#efe4f7; line-height:1.55; font-size:15px; margin-top:6px}
.cd-lines{display:flex; flex-direction:column; gap:6px; margin-top:6px}
.cd-line{background:rgba(255,255,255,.1); border-left:3px solid var(--pink); padding:8px 12px;
  border-radius:8px; color:#fff; font-style:italic; font-size:14px}
.cd-talk{margin-top:14px; align-self:flex-start}

/* ============ overlay cards ============ */
.ov-card{background:var(--box); border-radius:22px; padding:26px 28px; width:min(90%,460px);
  box-shadow:var(--shadow); border:3px solid #fff; position:relative; max-height:86%; overflow-y:auto}
.ov-card.wide{width:min(94%,700px)}
.ov-card h3{color:var(--ink); font-size:24px; margin-bottom:14px}
.ov-body{display:flex; flex-direction:column; gap:12px}
.ov-close{position:absolute; top:14px; right:16px; font-size:20px; font-weight:900; color:var(--ink-soft);
  background:#ffe3ef; width:34px; height:34px; border-radius:50%}
.ov-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.ov-row label{font-weight:700; color:var(--ink)}
.ov-btn{padding:12px 18px; font-weight:800; color:#fff; background:linear-gradient(180deg,var(--pink),var(--pink-d));
  border-radius:14px; box-shadow:0 4px 0 #d8447e}
.ov-btn.ghost{background:#fff; color:var(--ink); box-shadow:0 4px 0 rgba(200,120,160,.4)}
.ov-btn:active{transform:translateY(2px)}
input[type=range]{accent-color:var(--pink-d)}
.log-body{max-height:60vh; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-right:6px}
.log-item{padding:8px 12px; border-radius:10px; background:#fff3f9}
.log-item .who{font-weight:800; color:var(--pink-d); margin-right:6px}

/* toast */
.toast{position:absolute; left:50%; bottom:14%; transform:translateX(-50%) translateY(20px);
  background:rgba(40,20,45,.92); color:#fff; font-weight:700; padding:12px 20px; border-radius:20px;
  z-index:100; opacity:0; transition:opacity .3s, transform .3s; pointer-events:none; font-size:14px; max-width:88%}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* petals shared */
.petal{position:absolute; top:-30px; border-radius:60% 0 60% 0; opacity:.85; pointer-events:none;
  animation:fall linear infinite}
@keyframes fall{
  0%{transform:translateY(-40px) translateX(0) rotate(0); opacity:0}
  10%{opacity:.9}
  100%{transform:translateY(115vh) translateX(40px) rotate(360deg); opacity:.4}}
.twinkle{position:absolute; color:#fff; opacity:.0; animation:tw 3s infinite}
@keyframes tw{0%,100%{opacity:0; transform:scale(.5)}50%{opacity:.9; transform:scale(1)}}

/* rain */
.rain{position:absolute; top:-20%; width:2px; height:60px; background:linear-gradient(transparent,rgba(200,220,255,.6));
  animation:rainfall linear infinite}
@keyframes rainfall{to{transform:translateY(140vh)}}

/* scanline / crt feel for room */
.crt::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 2px, transparent 2px 4px)}

/* small screens: stack title */
@media (max-width:640px){
  .title-panel{width:100%; background:linear-gradient(0deg, rgba(30,20,45,.85) 40%, rgba(30,20,45,.2))}
  .title-heroine{width:100%; opacity:.6}
  .cd-panel{width:100%; background:linear-gradient(0deg, rgba(20,12,30,.9) 55%, transparent)}
  .cd-art{width:100%; opacity:.65}
}
.hidden{display:none!important}