.title-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  max-width: 600px;
  height: 100vh;
  height: 100dvh;
  margin: auto;
  padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  display: flex;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(1.5px 1.5px at 14% 12%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 8%, #fffa 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 20%, #fff9 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 30%, #fff7 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 30% 34%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 44%, #fff7 50%, transparent 51%),
    radial-gradient(120% 60% at 50% 110%, #2f5a3e 0 38%, transparent 39%),
    radial-gradient(90% 45% at 12% 100%, #24452f 0 45%, transparent 46%),
    radial-gradient(60% 40% at 50% 38%, #3a4a8a55, transparent 70%),
    linear-gradient(#0d1630, #1d2c5a 55%, #3b3a63);
  color: #f7ecd0;
  text-align: center;
  font-size: 16px;
}
.title-content { position: relative; z-index: 1; width: 100%; max-width: 360px; margin: auto; }
.title-twinkle {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle, #fff 0 1.5px, #fff8 2.5px, transparent 5px),
    linear-gradient(#0000 0 45%, #fffc 50%, #0000 55%),
    linear-gradient(90deg, #0000 0 45%, #fffc 50%, #0000 55%);
  -webkit-mask: radial-gradient(circle, #000 0 30%, #0008 55%, transparent 70%);
  mask: radial-gradient(circle, #000 0 30%, #0008 55%, transparent 70%);
  filter: drop-shadow(0 0 4px #fff4c8);
}
.title-twinkle.on { animation: title-twinkle 1.1s ease-in-out; }
@keyframes title-twinkle {
  0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  45% { opacity: 1; transform: scale(1.15) rotate(20deg); }
}
.title-crest { display: flex; align-items: center; gap: 10px; width: min(100%, 280px); margin: 0 auto; }
.title-crest span { flex: 1; height: 2px; background: linear-gradient(90deg, transparent, #d8b25a); }
.title-crest span:last-child { transform: scaleX(-1); }
.title-crest i { width: 9px; height: 9px; flex: none; background: #f1d27a; transform: rotate(45deg); box-shadow: 0 0 8px #f1d27a99; }
.title-screen h1 {
  margin: 12px 0;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  font-size: clamp(28px, calc((100vw - 48px) / 6.8), 56px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .08em;
  color: #f1d27a;
  background: linear-gradient(#fff4c8 10%, #f1d27a 45%, #b9832e 60%, #f0cf78 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #3b2208) drop-shadow(0 0 12px #f1d27a55);
  white-space: nowrap;
}
.title-hero {
  position: relative;
  width: 128px;
  height: clamp(120px, 26dvh, 208px);
  margin: 24px auto 32px;
}
.title-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 150px;
  height: 150px;
  transform: translate(-50%, 18%);
  border-radius: 50%;
  background: radial-gradient(#f1d27a44, transparent 65%);
}
#title-courier {
  position: relative;
  display: block;
  height: 100%;
  margin: 0 auto;
  aspect-ratio: 32 / 52;
  image-rendering: pixelated;
}
.title-actions { display: grid; gap: 14px; justify-items: center; }
.title-actions button {
  position: relative;
  width: 100%;
  min-height: 56px;
  padding: 14px 36px;
  border: 2px solid #d8b25a;
  border-radius: 6px;
  background: linear-gradient(#27346a, #151d40);
  box-shadow: inset 0 0 0 2px #0b1027, inset 0 0 0 3px #d8b25a66, 0 4px 0 #070b1c;
  color: #fff4d6;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
  touch-action: manipulation;
}
.title-actions #start-game::before {
  content: "▶";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #f1d27a;
  font-size: 14px;
  animation: title-cursor 1s steps(2, jump-none) infinite;
}
.title-actions button:focus-visible { outline: 2px solid #fff4c8; outline-offset: 3px; }
.title-actions button:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px #0b1027, inset 0 0 0 3px #d8b25a66, 0 2px 0 #070b1c; }
.title-actions button:disabled { opacity: .6; cursor: wait; }
.title-actions .title-reset {
  width: auto;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid #d8b25a55;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: #c9bfa4;
  font-size: 14px;
  letter-spacing: .08em;
}
.title-actions .title-reset:active { transform: translateY(1px); box-shadow: none; }
.title-version {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  margin: 0;
  color: #e8dcc099;
  font-size: 12px;
  letter-spacing: .06em;
  pointer-events: none;
}
.title-dialog {
  width: min(calc(100% - 32px), 340px);
  max-height: calc(100dvh - 32px);
  padding: 22px 18px 18px;
  border: 2px solid #d8b25a;
  border-radius: 8px;
  background: linear-gradient(#27346a, #151d40);
  box-shadow: inset 0 0 0 2px #0b1027, inset 0 0 0 3px #d8b25a66, 0 10px 30px #000a;
  color: #f7ecd0;
  text-align: center;
  overflow-x: hidden;
}
.title-dialog::backdrop { background: #050814b3; }
.title-dialog h2 {
  margin: 0 0 12px;
  color: #f1d27a;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  font-size: 18px;
  line-height: 1.5;
}
.title-dialog p { margin: 0 0 20px; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.title-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.title-dialog-actions button {
  min-width: 0;
  min-height: 48px;
  padding: 8px 6px;
  border: 1px solid #d8b25a;
  border-radius: 6px;
  background: #0f1532;
  color: #fff4d6;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  touch-action: manipulation;
}
.title-dialog-actions .danger { border-color: #d86a5a; background: #6b1f25; }
.title-dialog-actions button:focus-visible { outline: 2px solid #fff4c8; outline-offset: 2px; }
.title-dialog-actions button:disabled { opacity: .6; cursor: wait; }
@keyframes title-cursor { 50% { opacity: 0; } }
#title-error, .title-screen noscript { margin: 16px 0 0; color: #ffd9c8; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .title-actions #start-game::before { animation: none; }
}
@media (max-height: 480px) {
  .title-screen { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .title-screen h1 { margin: 6px 0; font-size: 34px; }
  .title-hero { height: 72px; margin: 8px auto 16px; }
  .title-hero::before { width: 90px; height: 90px; }
  .title-actions { gap: 8px; }
  .title-actions #start-game { min-height: 48px; padding: 10px 36px; }
  .title-actions .title-reset { min-height: 40px; padding: 6px 16px; }
}