/* Sites 向けの余白と横画面。番付画面は持たない。 */
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(--ground);
}

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

.hud__bar { display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); gap: .4rem; }
.hud__bar .game-back { justify-self: start; }
.hud__actions { justify-self: end; }
.current-difficulty { margin: 0; font-size: .9rem; font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.outcome-signal { grid-template-columns: 1fr; text-align: center; }
.outcome-signal[data-tone="pass"] { grid-template-columns: auto minmax(0, 1fr); }
.outcome-signal:not([data-tone="pass"]) .outcome-signal__mark { display: none; }
.outcome-signal__text { font-size: 1.35rem; }
.verdict { place-content: center; }
.btn[data-variant="danger"] { color: #fff7e6; background: var(--vermilion); }

.mode-menu__best {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
}

.mode-menu__best strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.mode-menu__error {
  margin: 0.6rem 0 0;
  color: var(--bad, #8a1f1f);
  font-weight: 700;
}

.mode-menu #boot-retry {
  margin-top: 0.55rem;
}

.mode-menu {
  align-content: start;
  gap: clamp(1rem, 2.2dvh, 1.5rem);
  padding-top: calc(env(safe-area-inset-top) + 1.25rem);
  padding-bottom: calc(env(safe-area-inset-bottom) + 1.25rem);
}

.mode-menu .title-logo { width: min(62vw, 14rem); margin: 0; }
.mode-menu .guide { width: 100%; margin: 0; padding: 1rem; }
.mode-menu .guide__title { font-size: .85rem; }
.mode-menu .guide__points { gap: .65rem; }
.mode-menu .guide__point dt, .mode-menu .guide__point dd { font-size: .9rem; }
.mode-menu .difficulty-nav { width: 100%; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.mode-menu .difficulty-nav__label { font-size: .9rem; color: var(--ink-soft); text-align: left; }
.mode-menu .difficulty-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; overflow: visible; }
.mode-menu .difficulty-choice { min-width: 0; min-height: 3.25rem; }
.mode-menu .difficulty-choice__name { font-size: .95rem; overflow-wrap: anywhere; }
.mode-menu .mode-menu__choices { width: 100%; margin: 0; }
.mode-menu .mode-choice--practice { background: var(--panel); }
.mode-menu .mode-menu__hint { margin: 0; font-size: .85rem; line-height: 1.7; }

@media (orientation: landscape) {
  .mode-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; }
  .mode-menu .title-logo { grid-column: 1; grid-row: 1; }
  .mode-menu .guide { grid-column: 1; grid-row: 2 / 5; }
  .mode-menu .difficulty-nav { grid-column: 2; grid-row: 1 / 3; }
  .mode-menu .mode-menu__choices { grid-column: 2; }
  .mode-menu .mode-menu__best, .mode-menu .mode-menu__hint { grid-column: 2; }
}

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

@media (orientation: landscape) and (max-height: 560px) {
  .surface {
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2.4rem);
  }
}

@media (orientation: landscape) and (min-width: 700px) and (max-height: 560px) {
  .app[data-screen="game"] { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
}

/* 説明が読み上げ専用になっても操作欄の高さとボタンの行を保つ。 */
.console { grid-template-rows: 3.5rem var(--tap); }
.console__status { grid-row: 1; min-height: 0; overflow: auto; }
.console > #action { grid-row: 2; }

/* PCも視線とマウスが中央の襖から外れない、一続きの操作面にする。 */
@media (min-width: 960px) and (min-height: 561px) {
  .app {
    width: min(calc(100vw - 3rem), 38rem);
    height: min(calc(100dvh - 2rem), 50rem);
    padding: 1rem 1.5rem;
  }
  .mode-menu {
    grid-template-columns: minmax(0, 1fr);
    align-content: safe center;
    gap: .8rem;
    padding: 1.5rem 3rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
  }
  .mode-menu > * { grid-column: 1 !important; grid-row: auto !important; }
  .mode-menu .title-logo { width: 13rem; }
  .mode-menu .guide { padding: .8rem 1rem; }
  .mode-menu .guide__points { gap: .4rem; }
  .mode-menu .difficulty-nav { gap: .4rem; }
  .mode-menu .mode-choice--practice { min-height: 4rem; background: var(--vermilion); color: #fff7e6; border-color: var(--vermilion); }
  .mode-choice--practice .mode-choice__mark, .mode-choice--practice .mode-choice__arrow { color: inherit; border-color: currentColor; }
  .mode-menu .mode-menu__hint { font-size: .8rem; }
  .app[data-screen="game"] {
    width: min(calc(100vw - 3rem), 32rem);
    height: min(calc(100dvh - 2rem), 56rem);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "hud" "field" "console";
    gap: .75rem;
    padding-top: 1rem;
  }
  .app[data-screen="game"] .field { grid-area: field; height: 100%; }
  .app[data-screen="game"] .hud { grid-area: hud; }
  .app[data-screen="game"] .console { grid-area: console; }
}

/* マウス操作時は増やさず、キーボード操作時だけ位置を示す。 */
.app button:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }