/* V3.5.1 opening title screen */
body.title-screen-open { overflow: hidden; }
body.title-screen-open > .app,
body.title-screen-open > .doodle,
body.title-screen-open > .particle-layer { visibility: hidden; }

.title-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100vw;
  height: var(--title-viewport-height, 100dvh);
  min-height: var(--title-viewport-height, 100dvh);
  background: #214f44;
  opacity: 1;
  transition: opacity 420ms ease, transform 420ms ease;
}
.title-screen[hidden] { display: none; }
.title-screen.is-leaving {
  opacity: 0;
  transform: scale(1.025);
  pointer-events: none;
}
.title-screen-backdrop {
  position: absolute;
  inset: 0;
  background: #214f44;
  background-image: none;
  filter: none;
  transform: none;
}
.title-screen-frame {
  position: relative;
  width: min(100vw, calc(var(--title-viewport-height, 100dvh) * 941 / 1672));
  height: min(var(--title-viewport-height, 100dvh), calc(100vw * 1672 / 941));
  max-width: 100vw;
  max-height: var(--title-viewport-height, 100dvh);
  aspect-ratio: 941 / 1672;
  overflow: hidden;
  flex: 0 0 auto;
  background: #214f44;
  box-shadow: 0 0 70px rgba(10,36,27,.35);
}
.title-screen-picture,
.title-screen-picture img { display:block; width:100%; height:100%; }
.title-screen-picture img {
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.title-screen-frame[role="button"] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.title-screen-frame[role="button"]:focus,
.title-screen-frame[role="button"]:focus-visible,
.title-screen-frame[role="button"]:active {
  outline: none;
  box-shadow: none;
}
.title-screen-hit {
  position: absolute;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.title-screen-hit:focus,
.title-screen-hit:focus-visible,
.title-screen-hit:active { outline:none; box-shadow:none; }
.title-screen-announcement { left:.7%; top:1.1%; width:8.7%; height:12.5%; }
.title-screen-settings { left:1%; top:15.6%; width:8.5%; height:11.5%; }
.title-screen-switch-player { left:87.5%; top:1.5%; width:11%; height:12.2%; }
.title-screen-version{position:absolute;left:50%;bottom:1.5%;transform:translateX(-50%);z-index:4;font-size:clamp(18px,4.1vw,28px);line-height:1;font-weight:900;letter-spacing:.02em;color:#fff;text-shadow:0 2px 0 #243d9b,0 0 5px rgba(20,30,80,.9);pointer-events:none;white-space:nowrap;background:none;border:0;padding:0;box-shadow:none}


.title-screen-main-menu {
  position:absolute;
  z-index:6;
  inset:0;
  width:100%;
  height:100%;
  transform:none;
  display:block;
  pointer-events:none;
}
.title-screen-main-menu button {
  position:absolute;
  left:26.9%;
  width:46.2%;
  height:6.95%;
  min-height:0;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  color:transparent;
  box-shadow:none;
  text-shadow:none;
  font-size:0;
  cursor:pointer;
  touch-action:manipulation;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}
#titleContinueButton { top:47.2%; }
#titleNewGameButton { top:58.0%; }
#titleLoadButton { top:68.85%; }
#titleMenuSettingsButton { top:79.72%; }
.title-screen-main-menu button:hover {
  background:transparent;
  box-shadow:none;
}
.title-screen-main-menu button:active {
  background:transparent;
  box-shadow:none;
  transform:none;
}
.title-screen-main-menu button:focus-visible {
  outline:none;
  box-shadow:none;
}

.title-screen-dialog {
  position:absolute;
  z-index:3;
  width:min(88vw,430px);
  padding:22px;
  border:3px solid #f6c65b;
  border-radius:24px;
  background:rgba(255,250,235,.98);
  color:#27384b;
  box-shadow:0 22px 70px rgba(3,22,50,.52);
  text-align:center;
}
.title-screen-dialog[hidden] { display:none; }
.title-screen-dialog h2 { margin:0 0 10px; font-size:24px; }
.title-screen-dialog p { margin:0 0 16px; line-height:1.7; }
.title-screen-dialog button {
  min-width:128px;
  padding:10px 22px;
  border:0;
  border-radius:999px;
  background:#206bc2;
  color:#fff;
  font:800 16px/1.2 "Noto Sans TC",sans-serif;
  cursor:pointer;
}

@media (orientation: portrait) {
  .title-screen-backdrop {
    inset:0;
    background:#214f44;
    background-image:none;
    filter:none;
    transform:none;
  }
  .title-screen-frame {
    width:min(100vw, calc(var(--title-viewport-height, 100dvh) * 941 / 1672));
    height:min(var(--title-viewport-height, 100dvh), calc(100vw * 1672 / 941));
    max-height:var(--title-viewport-height, 100dvh);
    aspect-ratio:941 / 1672;
    box-shadow:none;
  }
  .title-screen-picture img { object-fit:contain; object-position:center center; }
  .title-screen-announcement,
  .title-screen-settings,
  .title-screen-switch-player { display:none; }
  .title-screen-version {
    top:auto;
    bottom:1.5%;
    font-size:clamp(18px,4.1vw,28px);
  }
}

@media (orientation: portrait) and (max-aspect-ratio: 9/18) {
  .title-screen-frame {
    width:calc(var(--title-viewport-height, 100dvh) * 941 / 1672);
    height:var(--title-viewport-height, 100dvh);
  }
}
@supports not (height: 100dvh) {
  .title-screen { height:var(--title-viewport-height, 100vh); min-height:var(--title-viewport-height, 100vh); }
}
@media (prefers-reduced-motion: reduce) {
  .title-screen { animation:none; transition:none; }
}