.landing-open .game-shell { visibility: hidden; }
.landing { position: fixed; z-index: 20; inset: 0; overflow: hidden; color: #fff; background: #14294a; }
.title-screen { position: relative; width: 100%; height: 100%; overflow: hidden; }
.title-art, .title-art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.title-art img { object-fit: cover; object-position: center; }
.title-screen::after { position: absolute; inset: 0; content: ''; background: linear-gradient(90deg, #07162a0a, #0d244840 35%, #0d244840 65%, #07162a0a); pointer-events: none; }
.title-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 24px; text-align: center; }
.title-logo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; width: 100%; gap: clamp(4px, 1vw, 14px); margin: 0 0 30px; font-family: NexonKart, LINESeedKR, sans-serif; font-size: clamp(54px, 7.2vw, 104px); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; white-space: nowrap; }
.title-name { color: #fff; -webkit-text-stroke: 4px #154484; paint-order: stroke fill; text-shadow: 0 5px 2px #0009, 0 10px 20px #0007; }
.title-name-cat { justify-self: end; }
.title-name-dog { justify-self: start; -webkit-text-stroke-color: #9b2845; }
.title-versus { position: relative; display: grid; width: .64em; height: .72em; place-items: center; letter-spacing: 0; }
.title-versus svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #2359b6; stroke: #e2efff; stroke-width: 4; stroke-linejoin: round; }
.title-versus span { position: relative; color: #fff; font-size: clamp(20px, 3vw, 36px); text-shadow: 0 2px 3px #0008; }
.title-actions { display: flex; flex-direction: column; align-items: center; gap: 13px; }
.landing-play, .landing-help-button, .landing-help-done { font-family: NexonKart, LINESeedKR, sans-serif; font-weight: 700; cursor: pointer; }
.landing-play { width: min(340px, 78vw); min-height: 68px; padding: 0 24px; border: 2px solid #c5ddff; border-radius: 12px; color: #fff; background: linear-gradient(#3069bd, #1c4c9f); box-shadow: 0 7px 18px #0007; font-size: 22px; }
.landing-play:hover { background: linear-gradient(#376fbf, #2659ac); }
.landing-help-button { min-width: 170px; min-height: 46px; padding: 0 20px; border: 1px solid #dbe8fa; border-radius: 8px; color: #173761; background: #f5f8fdf2; font-size: 15px; }
.landing-help-button:hover { background: #fff; }
.title-actions button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.landing-help { width: min(500px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 25px; overflow: auto; border: 1px solid #b7c5dc; border-radius: 16px; color: #17243c; background: #f5f6fa; box-shadow: 0 18px 50px #0006; }
.landing-help::backdrop { background: #07172cbf; }
.landing-help-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.landing-help-header h2 { margin: 0; font-family: NexonKart, LINESeedKR, sans-serif; font-size: 24px; }
.landing-help-header button { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 1px solid #b7c5dc; border-radius: 8px; color: #17243c; background: #fff; }
.landing-help-header button:hover { background: #e6ecf8; }
.landing-help-header svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.landing-help-goal { margin: 12px 0 20px; color: #19478f; font-size: 16px; font-weight: 700; }
.landing-help-steps { display: grid; gap: 0; margin: 0; padding-left: 23px; }
.landing-help-steps li { padding: 10px 0 10px 3px; }
.landing-help-steps strong, .landing-help-steps span { display: block; }
.landing-help-steps strong { margin-bottom: 3px; font-size: 15px; }
.landing-help-steps span, .landing-help-note { color: #40577c; font-size: 14px; line-height: 1.5; word-break: keep-all; }
.landing-help-note { margin: 12px 0 22px; }
.landing-help-done { width: 100%; min-height: 48px; border: 0; border-radius: 8px; color: #fff; background: #2359b6; }
.landing-help-done:hover { background: #19478f; }
.landing-help button:focus-visible { outline: 3px solid #19478f; outline-offset: 3px; }
#back-to-landing { min-width: 90px; }
@media (orientation: portrait) {
  .title-art, .title-art img { bottom: auto; height: min(100vw, 53dvh); }
  .title-art img { object-fit: contain; object-position: center top; }
  .title-screen::after { background: linear-gradient(to bottom, transparent 25%, #14294a00 34%, #14294a 54%); }
  .title-content { position: absolute; top: min(100vw, 53dvh); bottom: 0; height: auto; justify-content: center; padding: 16px 24px 24px; }
  .title-logo { margin-bottom: 22px; font-size: clamp(44px, 11vw, 72px); }
  .title-name { -webkit-text-stroke-width: 2px; }
  .landing-play { min-height: 60px; font-size: 20px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .title-content { padding: 14px; }
  .title-logo { margin-bottom: 16px; font-size: clamp(40px, 7vw, 64px); }
  .title-actions { gap: 8px; }
  .landing-play { min-height: 50px; font-size: 18px; }
  .landing-help-button { min-height: 44px; }
}
@media (max-height: 650px) and (orientation: portrait) {
  .title-logo { margin-bottom: 10px; }
  .title-actions { gap: 8px; }
  .landing-play { min-height: 52px; }
}
@media (max-width: 360px) and (max-height: 650px) {
  .landing-help { padding: 18px; }
  .landing-help-goal { margin: 8px 0 12px; }
  .landing-help-steps li { padding-block: 7px; }
  .landing-help-note { margin: 8px 0 14px; }
}