/* Short overview and content entrances beneath the existing arena. */
html { scroll-padding-top: 86px; }
.immersive { height: auto; min-height: 100dvh; overflow-x: hidden; overflow-y: auto; }
.immersive.in-battle, .immersive.settings-open { overflow: hidden; }
.immersive main { height: auto; }
.immersive .game-layout { height: 100dvh; contain: layout; }
.immersive .site-title { margin: 0; font-size: inherit; line-height: 1.3; letter-spacing: inherit; }
.immersive header .seo-nav { display: block; color: #f1f6ff; font-size: 11px; padding: 8px 0; }
.immersive.in-battle header .seo-nav { opacity: .45; cursor: default; }
.immersive.reading-guide header { background: #122a3af5; border-bottom: 1px solid #ffffff16; }
.immersive .seo-content { background: #f5f3ed; color: #253645; padding: 64px max(24px, calc((100vw - 1040px) / 2)); }
.seo-content .seo-kicker { color: #396f8c; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.seo-content .seo-intro h2 { font-size: clamp(24px, 3.5vw, 36px); line-height: 1.6; margin: 14px 0; }
.seo-content p, .seo-content li, .seo-content dd { font-size: 14px; line-height: 2; }
.seo-content .seo-intro > p { max-width: 760px; }
.seo-content .seo-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.seo-content .seo-play { display: inline-block; padding: 12px 22px; border-radius: 5px; background: #185da0; color: white; font-size: 13px; font-weight: 800; }
.seo-content .seo-play.secondary { background: transparent; color: #185da0; border: 1px solid #185da0; }
.seo-content .seo-toc { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 20px 0 28px; border-bottom: 1px solid #d3dadd; font-size: 13px; }
.seo-content a:not(.seo-play) { color: #185d83; text-decoration: underline; text-underline-offset: 4px; }
.seo-content > section:not(.seo-intro) { padding-top: 44px; scroll-margin-top: 20px; }
.seo-content h2 { font-size: 23px; line-height: 1.6; margin: 0 0 18px; }
.seo-content h3 { font-size: 16px; line-height: 1.6; margin: 0 0 10px; }
.seo-content .seo-steps { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0; list-style: none; gap: 24px; }
.seo-content .seo-steps li { border-top: 2px solid #769caf; padding-top: 18px; }
.seo-content .seo-step-number { display: block; color: #457b99; font-size: 12px; margin-bottom: 8px; }
.seo-content dt { font-size: 15px; font-weight: 800; margin-top: 20px; }
.seo-content dd { margin: 7px 0 0; }
.seo-content .seo-note { color: #566776; font-size: 12px; }
.seo-content .seo-faq article { padding: 19px 0; border-top: 1px solid #d3dadd; }
.seo-content .seo-faq article p { margin: 0; }
.immersive footer { display: flex; flex-wrap: wrap; background: #122a3a; border-color: #ffffff16; padding: 28px max(24px, calc((100vw - 1040px) / 2)); gap: 18px; }
.immersive footer .logo { color: #f1f6ff; font-size: 17px; }
.immersive footer a, .immersive footer small { color: #c4d6e1; font-size: 12px; }
.immersive .launch-instruction .seo-game-subtitle { display: block; margin: 0; font-size: 11px; font-weight: 600; line-height: 1.7; }
.home-guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.seo-content .home-guides > a { border-top: 3px solid #185da0; padding-top: 18px; text-decoration: none; color: #253645; }
.seo-content .home-guides > a:nth-child(2) { border-color: #bd4b3f; }
.home-guides small { font-size: 10px; color: #617786; letter-spacing: .1em; }
.home-guides b { display: flex; justify-content: space-between; font-size: 17px; margin-top: 14px; line-height: 1.7; }
.home-guides b span { color: #185da0; }
.home-guides p { color: #5b6f7d; }
.home-characters { gap: 0; display: flex; flex-wrap: wrap; margin-top: 20px; }
.seo-content .home-characters a { text-align: center; font-family: serif; font-size: 26px; padding: 12px 20px; text-decoration: none; border: 1px solid #d3dadd; margin: -1px 0 0 -1px; }
.start-panel #start-help { display: none; }
.immersive > .start-panel { display: none; }
@media (max-width: 700px) {
  html { scroll-padding-top: 72px; }
  .immersive header .seo-nav { font-size: 10px; padding: 7px 3px; }
  .immersive .seo-content { padding: 40px 22px; }
  .seo-content .seo-steps { grid-template-columns: 1fr; gap: 18px; }
  .home-guides { grid-template-columns: 1fr; gap: 22px; }
  .seo-content h2 { font-size: 21px; }
  .seo-content p, .seo-content li, .seo-content dd { font-size: 13px; }
  .immersive footer { padding: 26px 22px; }
  .immersive .launch-instruction .seo-game-subtitle { font-size: 10px; }
}
@media (max-width: 700px), (max-width: 1000px) and (max-height: 500px) {
  .immersive.settings-open .game-layout { contain: none; }
  .immersive header { gap: 10px; }
  .immersive header #customize {
    min-height: 44px; padding: 10px 12px; font-size: 13px; font-weight: 800;
    color: #253638; background: #f2d28d; border: 1px solid #ffe6ad; border-radius: 6px;
  }
  .immersive.settings-open .modes { bottom: calc(124px + env(safe-area-inset-bottom)); }
  .immersive.settings-open .start-panel {
    display: block; position: fixed; inset: auto 0 0; z-index: 22;
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
    background: #122d3b; border-top: 1px solid #a4c6d14d; box-shadow: 0 -8px 24px #071c2b55;
  }
  .immersive .start-panel #start-help {
    display: block; margin: 0 0 10px; color: #e4edf0; text-align: center;
    font-size: 12px; line-height: 1.5;
  }
  .immersive .start-panel #prepare {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 60px; width: 100%; margin: 0; padding: 16px 20px;
    font-size: 18px; line-height: 1.4; font-weight: 900; letter-spacing: .02em;
    color: #243742; background: linear-gradient(#ffe4a6, #eec16d);
    border: 1px solid #fff0c9; border-radius: 9px;
    box-shadow: 0 4px 0 #a87936, 0 6px 18px #e5b65e24; touch-action: manipulation;
  }
  .immersive .start-panel #prepare span { font-size: 24px; }
  .immersive .start-panel #prepare:disabled { opacity: .65; }
  .immersive .start-panel #prepare:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #a87936; }
  .immersive #action-dock #launch {
    min-height: 60px; min-width: 0; max-width: 100%; padding: 14px 16px;
    font-size: 14px; font-weight: 900; color: #243742;
    background: linear-gradient(#ffe4a6, #eec16d); border: 1px solid #fff0c9;
    box-shadow: 0 3px 0 #a87936; border-radius: 9px; touch-action: manipulation;
  }
  .immersive #action-dock #launch:disabled { opacity: .7; }
  .immersive header #sound { min-height: 44px; white-space: nowrap; }
  .immersive header #sound[aria-pressed="false"] { color: #ffe4a6; }
  .immersive #customize:focus-visible, .immersive #prepare:focus-visible {
    outline: 3px solid #fff; outline-offset: 4px;
  }
}
@media (max-width: 360px) {
  .immersive header .logo, .immersive header nav button { white-space: nowrap; }
  .immersive header .logo { flex-shrink: 0; }
  .immersive header .seo-nav { display: none; }
  .immersive header #customize { padding: 10px; font-size: 12px; }
  .immersive header #sound { font-size: 9px; }
}
@media (min-width: 701px) and (max-width: 1000px) and (max-height: 500px) {
  .immersive.settings-open .builder { bottom: calc(124px + env(safe-area-inset-bottom)); }
}