:root{
  --coral:#ff6f61; --peach:#ffb37e; --cream:#fff1de; --plum:#2a1330;
  --plum2:#3a1d44; --teal:#3ec6b8; --ink:#2b1430;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  position:fixed; inset:0; overflow:hidden;
  background:linear-gradient(180deg,#57306a 0%, #b85a6e 45%, #ff9a6b 75%, #2a4b45 100%);
  font-family:"Avenir Next","Avenir","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-user-select:none; user-select:none; touch-action:manipulation;
}
#app{position:absolute; top:0; left:0; right:0; height:100%;}
canvas#bg{position:absolute; inset:0; width:100%; height:100%; display:block;
  transition:filter .35s ease;}
#app.char-on canvas#bg{filter:brightness(.86) saturate(.93);}

/* ---- character sprite ---- */
#sprite{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  height:92%; pointer-events:none;
  filter:drop-shadow(0 0 1.5px rgba(255,240,215,.5))
         drop-shadow(0 0 9px rgba(255,214,170,.22))
         drop-shadow(0 16px 28px rgba(20,5,25,.5));
  transition:opacity .25s ease;
}
#sprite svg{height:100%; width:auto; display:block;}
#sprite.enter{animation:rise .35s ease-out;}
@keyframes rise{from{opacity:0; transform:translateX(-50%) translateY(14px);} to{opacity:1; transform:translateX(-50%) translateY(0);}}
#sprite.dim{
  opacity:1;
  filter:brightness(.8) saturate(.88)
         drop-shadow(0 16px 28px rgba(20,5,25,.5));
  transition:filter .3s ease;
}

/* ---- dialogue ---- */
#dialog{
  position:absolute; left:10px; right:10px;
  bottom:calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(165deg, rgba(52,24,58,.70), rgba(28,10,36,.76));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,179,126,.4);
  border-radius:22px; padding:20px 18px 24px;
  box-shadow:0 10px 30px rgba(10,0,15,.5), inset 0 1px 0 rgba(255,241,222,.12);
  min-height:22%;
}
#nametag{
  position:absolute; top:-16px; left:16px;
  padding:6px 16px 7px; border-radius:999px;
  background:linear-gradient(180deg,var(--peach),var(--coral));
  color:var(--ink); font-weight:700; font-size:14px;
  letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 3px 8px rgba(20,5,25,.4);
  display:none;
}
#text{
  color:var(--cream); font-size:17px; line-height:1.58;
  min-height:3.4em; padding-top:6px;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
#text.narr{font-style:italic;}
#text i{color:var(--peach); font-style:italic;}
#hint{
  position:absolute; right:18px; bottom:10px; color:var(--peach);
  font-size:14px; opacity:.9; display:none;
}

/* ---- choices ---- */
#choices{
  position:absolute; left:16px; right:16px;
  bottom:calc(22% + 26px + env(safe-area-inset-bottom));
  display:none; flex-direction:column; gap:10px;
}
.choice{
  display:block; width:100%; padding:14px 16px; text-align:left;
  border-radius:16px; border:2px solid var(--coral);
  background:rgba(255,241,222,.78); color:var(--ink);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-family:inherit; font-weight:600; font-size:16px; line-height:1.35;
  box-shadow:0 4px 0 rgba(140,44,60,.55);
  animation:rise2 .28s ease-out both;
}
.choice:nth-child(2){animation-delay:.06s;} .choice:nth-child(3){animation-delay:.12s;}
.choice:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(140,44,60,.55);}
@keyframes rise2{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

/* ---- top bar ---- */
#topbar{
  position:absolute; top:calc(8px + env(safe-area-inset-top)); right:10px;
  display:flex; gap:8px; z-index:5;
}
.tbtn{
  width:42px; height:42px; border-radius:50%;
  border:1.5px solid rgba(255,241,222,.5);
  background:rgba(30,12,38,.55); color:var(--cream);
  display:flex; align-items:center; justify-content:center; padding:0;
  font-family:inherit;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.tbtn svg{display:block;}
.tbtn:active{background:rgba(255,111,97,.6);}
#btn-back{
  position:absolute; left:10px; top:calc(8px + env(safe-area-inset-top));
  z-index:5; display:none;
}
#btn-ff{
  position:absolute; left:60px; top:calc(8px + env(safe-area-inset-top));
  z-index:5; display:none;
}
#app.zen #dialog, #app.zen #choices, #app.zen #btn-back, #app.zen #btn-ff{display:none !important;}
#app.zen #btn-eye{background:rgba(255,111,97,.6);}

/* ---- floating hearts ---- */
.fheart{
  position:absolute; z-index:9; font-weight:700; font-size:20px;
  pointer-events:none; animation:floatup 1.1s ease-out forwards;
  text-shadow:0 2px 6px rgba(0,0,0,.4);
}
@keyframes floatup{from{opacity:1; transform:translateY(0) scale(.8);} to{opacity:0; transform:translateY(-70px) scale(1.25);}}

/* ---- overlays / panels ---- */
.overlay{
  position:absolute; inset:0; z-index:20; display:none;
  align-items:center; justify-content:center;
  background:rgba(18,6,24,.72);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  padding:24px;
}
.card{
  width:100%; max-width:360px; border-radius:24px; padding:24px 22px;
  background:linear-gradient(170deg,#42224e,#241030);
  border:1.5px solid rgba(255,179,126,.45);
  box-shadow:0 16px 50px rgba(0,0,0,.55);
  color:var(--cream); text-align:center;
  animation:rise2 .3s ease-out;
}
.card h2{
  font-family:"Snell Roundhand","Savoye LET","Brush Script MT",cursive;
  font-weight:400; font-size:34px; color:var(--peach); margin-bottom:14px;
}
.card p{font-size:15px; line-height:1.55; margin-bottom:14px;}
.btn{
  display:block; width:100%; margin-top:10px; padding:14px;
  border-radius:14px; border:2px solid var(--coral);
  background:linear-gradient(180deg,var(--peach),var(--coral));
  color:var(--ink); font-family:inherit; font-weight:700; font-size:16px;
  box-shadow:0 4px 0 rgba(140,44,60,.55);
}
.btn.ghost{background:transparent; color:var(--cream); border-color:rgba(255,241,222,.5); box-shadow:none;}
.btn:active{transform:translateY(3px); box-shadow:none;}
.btn.ghost:active{transform:none; background:rgba(255,241,222,.14);}
.btn.split{display:flex; justify-content:space-between; align-items:center; text-align:left;}
.btn.split b{color:var(--peach);}
.heartrow{display:flex; align-items:center; justify-content:space-between; margin:10px 0; font-size:16px;}
.heartrow b{letter-spacing:.06em;}
.hearts{font-size:15px; letter-spacing:2px;}

/* ---- title screen ---- */
#title-screen{
  position:absolute; inset:0; z-index:30;
  background:linear-gradient(180deg,#57306a 0%, #b85a6e 45%, #ff9a6b 75%, #2a4b45 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding:0 26px calc(46px + env(safe-area-inset-bottom));
}
canvas#titlebg{position:absolute; inset:0; width:100%; height:100%;}
#title-inner{position:relative; width:100%; max-width:360px; text-align:center;}
#logo{
  font-family:"Snell Roundhand","Savoye LET","Brush Script MT",cursive;
  font-weight:400; font-size:min(19vw,74px); line-height:1.05;
  color:#fff6e8;
  text-shadow:0 3px 0 rgba(210,70,80,.85), 0 10px 26px rgba(40,5,30,.55);
  transform:rotate(-3deg); margin-bottom:2px;
}
#tagline{
  color:#fff6e8; font-size:15.5px; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase;
  text-shadow:0 2px 0 rgba(210,70,80,.55), 0 3px 10px rgba(40,5,30,.7);
  margin-bottom:28px;
}
#pname{
  width:100%; padding:13px 16px; margin-bottom:12px;
  border-radius:14px; border:2px solid rgba(255,241,222,.75);
  background:rgba(255,241,222,.92); color:var(--ink);
  font-family:inherit; font-size:16px; font-weight:600; text-align:center; outline:none;
  -webkit-user-select:text; user-select:text;
}
#pname::placeholder{color:#a08494; font-weight:500;}
#title-ver{margin-top:14px; color:rgba(255,241,222,.95); font-size:13.5px; font-weight:700; letter-spacing:.16em; text-shadow:0 1px 4px rgba(40,5,30,.75);}

/* ---- ending ---- */
#end-title{
  font-family:"Snell Roundhand","Savoye LET","Brush Script MT",cursive;
  font-size:36px; color:var(--peach); margin-bottom:6px; font-weight:400;
}
#end-sub{font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--teal); margin-bottom:14px;}
#end-text{font-size:15px; line-height:1.6; margin-bottom:16px;}

@media (max-height:640px){
  #text{font-size:15.5px;} #dialog{min-height:22%;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important; transition-duration:.001s !important; animation-iteration-count:1 !important;}
}
.btn.ghost.teal{color:var(--teal); border-color:rgba(62,198,184,.65);}
.btn.ghost.teal:active{background:rgba(62,198,184,.16);}
#sprite img{height:100%; width:auto; display:block;}