.title-page { overflow:hidden; background:#080d22; }
.title-screen { position:relative; width:min(100%,520px); min-height:calc(100dvh - var(--audio-dock-height) - env(safe-area-inset-bottom,0px)); margin:auto; overflow:hidden; isolation:isolate; background:#111835; }
.title-screen__sky { position:absolute; inset:0; z-index:-3; background:linear-gradient(180deg,rgba(13,18,49,.08),rgba(10,15,36,.62) 58%,#080d22 100%),url('../assets/backgrounds/academy_exterior.png') center/cover; transform:scale(1.02); animation:title-breathe 10s ease-in-out infinite alternate; }
.title-screen::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(circle at 50% 43%,transparent 15%,rgba(6,9,24,.12) 52%,rgba(6,9,24,.78) 100%); }
.title-characters { position:absolute; inset:30% 0 19%; z-index:-2; }
.title-characters::before { content:""; position:absolute; inset:8% -8% -10%; z-index:0; pointer-events:none; background:radial-gradient(circle at 24% 56%,rgba(236,183,64,.23),transparent 36%),radial-gradient(circle at 76% 56%,rgba(115,174,255,.22),transparent 36%); filter:blur(8px); }
.title-characters::after { content:""; position:absolute; left:4%; right:4%; bottom:-2%; height:22%; z-index:4; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(8,13,34,.58)); filter:blur(5px); }
.title-character { position:absolute; bottom:-2%; object-fit:contain; object-position:center bottom; }
.title-character--kuro { height:95%; left:-14%; z-index:2; filter:drop-shadow(0 10px 15px rgba(0,0,0,.72)) drop-shadow(0 0 12px rgba(236,183,64,.22)); }
.title-character--shiro { height:92%; right:-16%; z-index:1; opacity:1; filter:drop-shadow(0 10px 15px rgba(0,0,0,.72)) drop-shadow(0 0 12px rgba(115,174,255,.24)); }
.title-character--agemaru { width:21%; left:50%; top:0; bottom:auto; z-index:5; transform:translateX(-50%); filter:drop-shadow(0 6px 10px rgba(0,0,0,.68)) drop-shadow(0 0 10px rgba(255,230,150,.28)); animation:agemaru-float 2.8s ease-in-out infinite; }
.title-logo { position:absolute; top:calc(env(safe-area-inset-top,0px) + 6%); width:100%; text-align:center; padding:0 12px; text-shadow:0 3px 12px #080d22,0 0 20px rgba(109,91,208,.7); }
.title-logo p { margin:0 0 3px; color:#fff1bd; font-size:10px; font-weight:800; letter-spacing:.22em; }
.title-logo h1 { margin:0; font-family:serif; font-size:clamp(42px,12vw,64px); line-height:1; letter-spacing:.06em; color:#fff; white-space:nowrap; }
.title-logo h1 span { background:linear-gradient(#fff 12%,#ffe89e 48%,#d6a52f 77%,#fff1ad); -webkit-background-clip:text; color:transparent; -webkit-text-stroke:1px #7e5413; filter:drop-shadow(0 0 7px rgba(255,226,133,.48)); }
.title-logo h2 { margin:7px 0 0; color:#fff; font-size:clamp(13px,4vw,19px); letter-spacing:.12em; }
.title-logo__stones i { display:inline-block; width:17px; height:17px; margin:9px 2px; border-radius:50%; box-shadow:0 2px 6px #000; }
.title-logo__stones i:first-child { background:radial-gradient(circle at 35% 30%,#70758e,#090b14 65%); }
.title-logo__stones i:last-child { background:radial-gradient(circle at 35% 30%,#fff,#cfd2e5 70%); }
.title-actions { position:absolute; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 7%); transform:translateX(-50%); width:min(82%,340px); display:grid; gap:10px; text-align:center; z-index:6; }
.title-actions button { min-height:52px; border-radius:999px; font-weight:900; letter-spacing:.13em; cursor:pointer; transition:.18s transform,.18s filter; }
.title-actions button:active { transform:scale(.97); }
.title-start { border:1px solid #ffe8a1; color:#201500; background:linear-gradient(180deg,#fff0ad,#d7a531 72%,#96651d); box-shadow:0 5px 18px #000,0 0 20px rgba(255,215,91,.42); font-size:16px; }
.title-continue { border:1px solid #b8a9ff; color:#fff; background:linear-gradient(180deg,rgba(99,79,188,.95),rgba(30,39,91,.97)); box-shadow:0 5px 16px #000; font-size:14px; }
.title-continue:disabled { opacity:.42; filter:grayscale(.7); cursor:default; }
.title-actions p { margin:0; color:#d5d4e7; font-size:10px; text-shadow:0 2px 5px #000; }
.title-copyright { position:absolute; bottom:8px; width:100%; text-align:center; color:rgba(255,255,255,.52); font-size:8px; }
.title-confirm { width:min(88%,360px); text-align:center; }
.title-confirm h2 { color:var(--c-gold-bright); }
.title-confirm>p { margin:4px 0 15px; color:var(--c-dim); font-size:11px; line-height:1.6; }
.title-name-field { display:grid; gap:7px; text-align:left; }
.title-name-field span { color:#fff1bd; font-size:10px; font-weight:900; letter-spacing:.12em; }
.title-name-field input {
  width:100%;
  min-height:48px;
  padding:0 14px;
  border:1px solid rgba(184,169,255,.55);
  border-radius:12px;
  outline:none;
  color:#fff;
  background:linear-gradient(145deg,rgba(24,32,72,.96),rgba(9,14,35,.98));
  box-shadow:inset 0 1px rgba(255,255,255,.06);
  font:700 16px/1 var(--f-body);
  letter-spacing:.06em;
  transition:border-color .18s,box-shadow .18s;
}
.title-name-field input::placeholder { color:rgba(215,216,235,.4); }
.title-name-field input:focus { border-color:#f0c95f; box-shadow:0 0 0 3px rgba(240,201,95,.14),inset 0 1px rgba(255,255,255,.08); }
.title-confirm form>small { display:block; margin-top:6px; color:var(--c-dim); font-size:8px; text-align:left; }
.title-name-error { min-height:16px; margin:5px 0 0!important; color:#ff9ca6!important; font-size:9px!important; text-align:left; }
.title-confirm .modal-actions { display:flex; justify-content:center; gap:10px; margin-top:10px; }
.title-confirm .modal-actions .btn { flex:1; padding:0 10px; font-size:10px; white-space:nowrap; }
.title-screen__petals i { position:absolute; z-index:5; top:-8%; width:8px; height:13px; border-radius:80% 20% 70% 30%; background:#f4b9d8; opacity:.72; animation:petal-fall 8s linear infinite; }
.title-screen__petals i:nth-child(1){left:8%;animation-delay:-2s}.title-screen__petals i:nth-child(2){left:28%;animation-delay:-5s}.title-screen__petals i:nth-child(3){left:51%;animation-delay:-1s}.title-screen__petals i:nth-child(4){left:72%;animation-delay:-7s}.title-screen__petals i:nth-child(5){left:91%;animation-delay:-4s}
@keyframes petal-fall { to { transform:translate(48px,115vh) rotate(620deg); } }
@keyframes agemaru-float { 50% { transform:translateX(-50%) translateY(-8px) rotate(2deg); } }
@keyframes title-breathe { to { transform:scale(1.055); } }
@media(max-width:430px){
 .title-characters{inset:30% 0 20%}
 .title-character--kuro{height:94%;left:-25%}
 .title-character--shiro{height:91%;right:-26%}
 .title-character--agemaru{width:24%;top:0}
}
@media(max-height:700px){
 .title-characters{inset:29% 0 21%}
 .title-character--kuro{height:93%}
 .title-character--shiro{height:90%}
 .title-character--agemaru{width:19%}
}
@media (prefers-reduced-motion:reduce){.title-screen__sky,.title-character--agemaru,.title-screen__petals i{animation:none}}