/* Sites 向けの余白と横画面。世界ランキングは持たない。 */
:root:has(.app[data-difficulty]) {
  background: var(--scene-ground);
  --scene-ground: #fff3df;
  --far-sky: #c8ead2;
  --panel-face: #dba66c;
  --panel-groove: #a67039;
  --door-pattern: repeating-linear-gradient(90deg, transparent 0 2rem, var(--panel-groove) 2rem calc(2rem + 3px));
}

:root:has(.app[data-difficulty="intermediate"]) {
  --scene-ground: #eaf4fc;
  --far-sky: #b9deed;
  --panel-face: #9bb8d0;
  --panel-groove: #627e99;
  --door-pattern: repeating-linear-gradient(0deg, transparent 0 1.2rem, var(--panel-groove) 1.2rem calc(1.2rem + 3px));
}

:root:has(.app[data-difficulty="advanced"]) {
  --scene-ground: #eee8f6;
  --far-sky: #bcb7de;
  --panel-face: #837594;
  --panel-groove: #554760;
  --door-pattern: repeating-linear-gradient(0deg, transparent 0 2.6rem, var(--panel-groove) 2.6rem calc(2.6rem + 4px)), repeating-linear-gradient(90deg, transparent 0 3.5rem, var(--panel-groove) 3.5rem calc(3.5rem + 4px));
}

:root:has(.app[data-difficulty="oni"]) {
  --scene-ground: #f8e7e5;
  --far-sky: #e48c79;
  --panel-face: #382c35;
  --panel-groove: #a7423b;
  --door-pattern: radial-gradient(circle at 1rem 1rem, #dcaa70 0 3px, transparent 4px), repeating-linear-gradient(135deg, transparent 0 2rem, var(--panel-groove) 2rem calc(2rem + 5px));
}

.app[data-difficulty] :is(.stage__panel, .scanner__panel) {
  background-image: var(--door-pattern);
  background-size: auto;
  background-repeat: repeat;
  background-position: center;
  box-shadow: inset 0 0 0 5px #00000012;
}

.app[data-difficulty] .stage__panel { width: calc((100% - var(--gap-w)) / 2); }
.app[data-difficulty] .stage__gap { left: calc((100% - var(--gap-w)) / 2); right: calc((100% - var(--gap-w)) / 2); }

.difficulty-select { margin-top: 1rem; }
.difficulty-select h2 { margin: 0; font-size: 1rem; }
.difficulty-rule { margin: .4rem 0; font-size: .82rem; line-height: 1.5; }
.difficulty-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .6rem; }
.difficulty-options button {
  display: grid;
  align-content: center;
  gap: .2rem;
  min-height: 4rem;
  padding: .55rem;
  border: 2px solid var(--ink-soft);
  border-radius: .7rem;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.difficulty-options small { font-size: .72rem; line-height: 1.3; }
.difficulty-options button[aria-pressed="true"] { border-color: var(--ink); background: #fff0b5; box-shadow: inset 0 0 0 1px var(--ink); }
.difficulty-options button:disabled { background: #eee; color: #666; border-style: dashed; cursor: default; }
.difficulty-options button:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 3px; }
.difficulty-result { font-weight: 800; line-height: 1.5; text-align: center; }
.hud__lives { text-align: center; flex-shrink: 0; }
#lives-hearts { display: flex; justify-content: center; gap: .15rem; color: #be3030; font-size: 1.3rem; line-height: 1.2; }
#lives-hearts i { font-style: normal; }
#lives-hearts i[data-lost="true"] { color: #736d69; opacity: .45; }
#lives-label { display: block; font-size: .7rem; font-weight: 700; }

.masthead-art {
  display: grid;
  place-items: center;
  background-image: none;
}

.masthead-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.masthead-art img[hidden] {
  display: none;
}

.masthead-art__fallback {
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 900;
}

html:not([data-sites-ready]) .app,
.app[data-paused="true"] {
  pointer-events: none;
}

.app[data-paused="true"] *,
.app[data-paused="true"]::before,
.app[data-paused="true"]::after {
  animation-play-state: paused !important;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  background: var(--scene-ground, var(--cream));
}

.app[data-difficulty] { background: var(--scene-ground); }

.app {
  width: min(100vw, 30rem);
  height: 100dvh;
  max-height: 100dvh;
  overflow: auto;
}

.sites-best {
  margin: 0.85rem 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
}

.sites-note {
  margin-top: 0.45rem;
}

.sites-error {
  margin: 0.7rem 0 0;
  color: var(--tomato);
  font-weight: 800;
  text-align: center;
}

#boot-retry {
  margin: 0.45rem auto 0;
}

@media (orientation: landscape) {
  .app {
    width: min(100vw, 48rem);
  }

  .app[data-screen="game"] .game {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(14rem, 1fr);
    gap: 0.7rem 1rem;
    align-items: stretch;
    min-height: 0;
  }

  .app[data-screen="game"] .game > .sr-only {
    position: absolute;
  }

  .app[data-screen="game"] .hud,
  .app[data-screen="game"] .meter {
    grid-column: 1 / -1;
  }

  .scanner__window {
    height: min(12rem, calc(100dvh - 8rem));
  }

  .choice {
    min-height: var(--tap);
  }
}

@media (orientation: landscape) and (max-height: 430px) {
  .home h1 {
    font-size: 1.45rem;
  }

  .stage {
    display: none;
  }

  .app[data-screen="game"] {
    overflow: hidden;
  }

  .app[data-screen="game"] .hud__count strong,
  .app[data-screen="game"] .hud__score output {
    font-size: 1.1rem;
  }

  .app[data-screen="game"] .meter {
    height: 0.55rem;
    margin: 0.25rem 0 0.35rem;
  }

  .scanner__window {
    height: min(8.5rem, calc(100dvh - 5rem));
  }

  .scanner__prompt {
    margin: 0.2rem 0 0;
  }

  .answer {
    padding-top: 0.2rem;
  }

  .answer__head {
    margin-bottom: 0.3rem;
  }

  .answer__head h2 {
    font-size: 0.9rem;
  }

  .choices {
    gap: 0.4rem;
  }

  .game-status {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
  }
}

@media (orientation: landscape) and (max-height: 340px) {
  .topbar {
    min-height: var(--tap);
  }

  .masthead-home {
    width: 6.5rem;
    height: var(--tap);
    min-height: var(--tap);
    aspect-ratio: auto;
  }

  .app[data-screen="game"] .meter,
  .app[data-screen="game"] .game-status {
    display: none;
  }

  .scanner__window {
    height: min(6.5rem, calc(100dvh - 4.2rem));
  }

  .scanner__prompt {
    display: none;
  }
}

.home__intro, .home__setup { display: contents; }

/* 観察から回答へ視線を下ろす、中央にまとまったゲーム台。 */
@media (min-width: 960px) and (min-height: 561px) {
  .app {
    width: min(calc(100vw - 3rem), 42rem);
    min-height: 0;
    height: auto;
    max-height: calc(100dvh - 2rem);
    padding: 1rem 2rem;
    border: 2px solid var(--ink);
    border-radius: 1.5rem;
    box-shadow: 0 6px 0 var(--ink);
  }
  .topbar { min-height: 3rem; }
  .masthead-home { width: 8rem; }
  .home { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .home__intro, .home__setup { display: contents; }
  .home .stage { width: 13rem; margin: 0 auto; }
  .home .stage__window { height: 4.5rem; }
  .home h1 { margin: 0; font-size: 1.65rem; }
  .home .home__lead, .home .difficulty-select, .home .menu,
  .home .answer-style, .home .sites-best, .home .sites-error, .home #boot-retry { margin: 0; }
  .home .answer-style { padding: .75rem; }
  .app[data-screen="game"] .game { grid-template-columns: minmax(0, 1fr); gap: .65rem; align-items: stretch; }
  .game .meter { margin: 0; }
  .scanner__window { height: clamp(10rem, 30dvh, 19rem); }
  .scanner__prompt { margin: .4rem 0 0; }
  .answer { padding-top: 0; }
  .answer__head { margin-bottom: .65rem; }
  .answer__head h2 { font-size: 1.1rem; }
  .choices { gap: .75rem; }
  .choice { min-height: clamp(3rem, 8dvh, 4.5rem); font-size: 1.1rem; }
  .game-status { min-height: 1.5em; margin: .65rem 0 0; }
  .result { min-height: 0; }
  .result__stamp { width: 4rem; height: 4rem; }
  .result h1 { font-size: 1.6rem; }
  .result__score { margin: .5rem 0; }
  .result__score strong { font-size: 3.5rem; }
  .result__stats, .result__notice, .result__actions, .difficulty-result { margin-block: .5rem; }
}

@media (min-width: 960px) and (min-height: 561px) and (max-height: 700px) {
  .app[data-screen="game"] .masthead-home { width: 6rem; }
  .app[data-screen="game"] .scanner__window { height: clamp(7rem, calc(100dvh - 29rem), 12rem); }
}

/* 観察窓の内部は絶対配置のため、内容ではなく割り当て済みの行高を使う。 */
#app[data-screen="game"] .scanner { height: 100%; }
.app button:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }