/* Character-first title. Portraits are the same official art used during play. */
.title-scene {
  position:relative;isolation:isolate;margin:0 auto;
  width:100%;max-width:900px;height:100dvh;min-height:450px;overflow:hidden;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  color:#fff4da;
  background:radial-gradient(ellipse at 50% 38%,#3d7358 0%,#254b3e 40%,#101e1c 88%);
}
.title-atmosphere {
  position:absolute;z-index:-1;pointer-events:none;inset:0;
  background:radial-gradient(circle at 52% 41%,#ffe6aa20 0%,transparent 41%),
    linear-gradient(135deg,#fff9d70a 0%,transparent 31%),
    repeating-linear-gradient(130deg,transparent 0 100px,#fff9d704 101px 102px);
}
.title-copy {position:relative;z-index:6;text-align:center;padding:clamp(20px,3.5dvh,34px) 14px 0;}
.title-overline {font-size:11px;letter-spacing:.24em;font-weight:700;color:#d2e3d0;}
.title-copy h1 {
  margin:0;letter-spacing:.11em;font-size:clamp(44px,8vw,72px);font-weight:800;
  line-height:1.38;color:#fff4d7;text-shadow:0 3px 14px #08181075;
}
.title-copy h1 span {color:#e9c17b;}
.title-copy p {margin:3px 0 0;font-size:clamp(11px,2.7vw,14px);
  font-weight:600;line-height:1.75;color:#e5f1df;}
.title-trio {position:relative;min-height:0;isolation:isolate;overflow:hidden;}
.title-trio:after {
  content:"";position:absolute;pointer-events:none;z-index:5;
  inset:auto 0 0;height:26%;
  background:linear-gradient(0deg,#163026 0%,#163026bd 28%,transparent);
}
.title-person {
  position:absolute;bottom:-5px;max-width:none;width:44%;height:92%;
  object-fit:cover;object-position:center top;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  filter:drop-shadow(0 8px 13px #071a167d);
}
.title-satsuki {left:-4%;z-index:2;height:92%;}
.title-hinata {right:-4%;z-index:2;height:92%;}
.title-koharu {left:28%;z-index:3;height:100%;}
.title-trio-names {
  position:absolute;z-index:7;bottom:7px;left:4%;right:4%;
  display:flex;justify-content:space-around;gap:14px;
  color:#fff3d6;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-shadow:0 1px 8px #07190f,0 2px 4px #07190f;
}
.title-entry {position:relative;z-index:8;padding:0 18px max(15px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#163026,#101d1a 70%);
  display:flex;flex-direction:column;align-items:stretch;gap:8px;}
.title-greeting {display:flex;justify-content:center;align-items:baseline;gap:8px;
  margin:0 auto 1px;color:#f9e5bd;font-size:13px;line-height:1.4;text-align:center;}
.title-greeting strong {color:#d4f0d6;font-size:11px;}
.title-entry button {border-radius:10px;min-height:47px;font-size:15px;font-weight:800;
  letter-spacing:.02em;touch-action:manipulation;box-shadow:0 2px 8px #0019124a;}
.title-primary {border:1px solid #f8e2a5;background:#e4bd6e;color:#172620;}
.title-secondary {border:1px solid #8eac94;color:#e8f2e2;background:#29483e;}
.title-secondary span {color:#bcd3ba;font-size:11px;font-weight:500;}
.title-entry button:active {filter:brightness(1.12);transform:translateY(1px);}
.title-entry small {font-size:10px;line-height:1.5;color:#a7bdb1;text-align:center;}
@media(min-width:600px) {
 .title-satsuki {left:2%;}
 .title-hinata {right:2%;}
 .title-koharu {left:28%;}
 .title-trio-names {max-width:550px;margin:auto;}
 .title-entry {padding-left:max(20px,calc((100% - 480px)/2));
  padding-right:max(20px,calc((100% - 480px)/2));}
}
@media(max-width:375px) {
  .title-copy {padding-top:15px;}
  .title-copy h1 {font-size:46px;}
  .title-trio-names {bottom:3px;}
  .title-entry {padding-left:12px;padding-right:12px;gap:6px;}
  .title-entry button {min-height:43px;font-size:13px;}
  .title-entry small {font-size:9px;}
  .title-greeting {font-size:11px;}
}
@media(max-height:640px) {
  .title-copy {padding-top:12px;}
  .title-copy h1 {font-size:43px;line-height:1.17;}
  .title-copy p {font-size:10px;line-height:1.55;}
  .title-overline {font-size:9px;}
  .title-entry {gap:5px;}
  .title-greeting {font-size:11px;}
  .title-entry button {min-height:42px;}
  .title-entry small {font-size:9px;}
}
@media(prefers-reduced-motion:reduce) {
 .title-entry button:active {transform:none;}
}