/*
 * すきまっち — 表示層のスタイル。
 *
 * 情景は「下ろしたシャッターのすきまを、荷物が一瞬だけ通りすぎる」。
 * シャッターは窓の全高を覆い、見えるのはすきまの中だけである。
 * 質感はベタ塗りのフラット・ポップに統一する。グラデーション、ぼかし、
 * 光彩は使わない。唯一の立体表現は、面の下に敷く同系濃色の「厚み」で、
 * 押下時にその厚みぶんだけ沈める。ぼかしを持たないぶん、すきまを
 * 横切る荷物が画面でいちばんコントラストの高い要素になる。
 *
 * 色は必ずトークン経由で参照する。地色に対する文字色は、差し色の上でも
 * すべて --ink を使い、4.5:1 以上を保つ。
 */

/* ============================================================
   1. トークン
   ============================================================ */

:root {
  color-scheme: light;

  /* --- 地と面 --- */
  --cream: #fff3e0;
  --cream-deep: #ffe6c4;
  --card: #ffffff;

  /* --- 墨 --- */
  --ink: #2b2723;
  --ink-soft: #6b6259;

  /* --- 差し色。文字は常に --ink を載せる --- */
  --tomato: #ff5252;
  --tomato-deep: #d63b3b;
  --sun: #ffc53d;
  --sun-deep: #dfa21c;
  --mint: #17bfa0;
  --mint-deep: #0e9b81;
  --sky: #3f9bf0;
  --sky-deep: #2a7bc9;

  /* --- 観察窓 --- */
  --far-sky: #a9dff2;        /* 壁の奥。一色のべた塗りにして、荷物の輪郭だけを見せる */
  --panel-face: #ded8cc;     /* シャッターのスラット面。空とは色相で分け、太い墨の枠で切る */
  --panel-groove: #a2977f;   /* スラットの境目 */
  --slat: 1.5rem;
  /* すきまの幅。壁の裏は見えないので、この値がそのまま難度になる。初期値は狭く、
     間違えるたびにJSがこの変数を広げる。壁の幅は残りを二等分して決まる。 */
  --gap-w: 26%;
  /* 照準と荷物が通る高さ。すきまの中央に置く。両者を同じ値から取ることで、
     見る位置と実際に通る位置がずれない。 */
  --lane-y: 50%;
  --item-size: clamp(3.6rem, 17vw, 4.8rem);

  /* --- 判定 --- */
  --good: var(--mint);
  --good-deep: var(--mint-deep);
  --bad: var(--tomato);
  --bad-deep: var(--tomato-deep);

  /* --- 寸法 --- */
  --tap: 44px;
  --edge: 3px;
  --lift: 4px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  font-family:
    "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4",
    "M PLUS Rounded 1c", "Zen Maru Gothic",
    "Hiragino Sans", "Yu Gothic", YuGothic, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--cream);
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 280px;
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-size: 16px;
  line-height: 1.6;
  overscroll-behavior: none;
}

button, input { font: inherit; }
button { color: var(--ink); cursor: pointer; }
[hidden] { display: none !important; }

:focus { outline: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================
   2. 外枠
   ============================================================ */

.app {
  position: relative;
  width: min(100%, 30rem);
  min-height: 100svh;
  margin-inline: auto;
  padding:
    calc(env(safe-area-inset-top) + 1.75rem)
    calc(env(safe-area-inset-right) + 1rem)
    calc(env(safe-area-inset-bottom) + 1rem)
    calc(env(safe-area-inset-left) + 1rem);
}

@supports (min-height: 100dvh) { .app { min-height: 100dvh; } }

/* 地の上に置く唯一の装飾。水玉ひとつだけに絞り、面の数を増やさない。 */
.app__dots {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(var(--cream-deep) 2.5px, transparent 2.6px);
  background-size: 26px 26px;
}

.topbar {
  display: grid;
  grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap);
  align-items: center;
  gap: .5rem;
  min-height: var(--tap);
}

.topbar::before {
  grid-column: 1;
  width: var(--tap);
  height: var(--tap);
  content: "";
}

.masthead-home {
  grid-column: 2;
  display: grid;
  place-items: center;
  justify-self: center;
  width: min(clamp(7.25rem, 39vw, 9.25rem), 100%);
  min-width: var(--tap);
  min-height: var(--tap);
  aspect-ratio: 2 / 1;
  padding: 0;
  border: 0;
  background: transparent;
  transition: transform .12s ease-out;
}

.masthead-home:hover { background: transparent; }
.masthead-home:active { transform: translateY(var(--lift)); }

.masthead-art {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.app-version {
  position: absolute;
  z-index: 1;
  top: calc(env(safe-area-inset-top) + .35rem);
  left: calc(env(safe-area-inset-left) + .35rem);
  padding: .12rem .24rem;
  color: var(--ink-soft);
  background: var(--card);
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.topbar > .round-button {
  grid-column: 3;
  justify-self: end;
}

.round-button {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: .6rem;
  border: var(--edge) solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 var(--lift) 0 var(--ink);
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}

.round-button svg {
  width: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.round-button:hover { background: var(--cream-deep); }
.round-button:active { transform: translateY(var(--lift)); box-shadow: 0 0 0 var(--ink); }

.screen { padding-block: .75rem; }

/* ============================================================
   3. ホーム
   ============================================================ */

.home {
  display: grid;
  align-content: start;
  gap: .25rem;
  min-height: calc(100svh - 5rem);
}

/* 看板はプレイ画面と同じ構成にする。シャッターが全高を覆い、見えるのはすきまの
   中だけ。看板と本番で見え方が違うと、遊ぶ前の期待がずれる。 */
.stage {
  width: min(100%, 17rem);
  margin: .5rem auto .25rem;
}

.stage__window {
  position: relative;
  height: 6.5rem;
  overflow: hidden;
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-md);
  background: var(--far-sky);
}

.stage__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  background-color: var(--panel-face);
  background-image:
    linear-gradient(var(--panel-groove), var(--panel-groove)),
    repeating-linear-gradient(
      180deg, transparent 0 1.1rem, var(--panel-groove) 1.1rem calc(1.1rem + 2px)
    );
  background-size: calc(.26rem + var(--edge)) 100%, 100% 100%;
  background-repeat: no-repeat, repeat;
  background-origin: border-box, padding-box;
}

.stage__panel--left {
  left: 0;
  border-right: var(--edge) solid var(--ink);
  background-position: right center, 0 0;
}

.stage__panel--right {
  right: 0;
  border-left: var(--edge) solid var(--ink);
  background-position: left center, 0 0;
}

.stage__gap {
  position: absolute;
  top: 0;
  right: 30%;
  bottom: 0;
  left: 30%;
  overflow: hidden;
}

.stage__box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.2rem;
  height: 2.2rem;
  margin: -1.1rem 0 0 -1.1rem;
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--sun);
  animation: stage-pass 3.6s linear infinite;
}

@keyframes stage-pass {
  0%   { transform: translateX(-7rem); }
  42%  { transform: translateX(0); }
  58%  { transform: translateX(0); }
  100% { transform: translateX(7rem); }
}

.home h1 {
  margin: .5rem 0 0;
  font-size: clamp(1.85rem, 8.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.home h1 em {
  display: inline-block;
  padding: 0 .3rem;
  border-radius: var(--r-sm);
  background: var(--sun);
  font-style: normal;
}

.home__lead {
  margin: .6rem 0 1.1rem;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.7;
}

.menu { display: grid; gap: .7rem; }

.menu__item {
  display: grid;
  grid-template-columns: 2.9rem 1fr 1.2rem;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 4.5rem;
  padding: .7rem .85rem;
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-lg);
  text-align: left;
  background: var(--card);
  box-shadow: 0 var(--lift) 0 var(--ink);
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}

.menu__item:active { transform: translateY(var(--lift)); box-shadow: 0 0 0 var(--ink); }
.menu__item--mint { background: var(--mint); }
.menu__item--sun { background: var(--sun); }
.menu__item--sky { background: var(--sky); }

.menu__icon {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--cream);
}

.menu__icon svg { width: 1.4rem; }

.menu svg {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu__item--mint .menu__icon svg path { fill: var(--ink); stroke: none; }

.menu__body strong,
.menu__body small { display: block; }
.menu__body strong { font-size: 1.05rem; font-weight: 800; }
.menu__body small { font-size: .74rem; line-height: 1.5; }
.menu__arrow { width: 1.2rem; }

.link-button {
  min-height: var(--tap);
  margin-top: .9rem;
  padding: .4rem .6rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.link-button:hover { background: var(--cream-deep); }
.link-button--small { margin: 0; font-size: .82rem; }

/* こたえかたの切替え。ホームに1つだけ置き、全モードへ効かせる。 */
.answer-style {
  margin-top: 1rem;
  padding: .75rem .85rem .6rem;
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-md);
  background: var(--card);
}

.answer-style__title { margin: 0; font-size: .82rem; font-weight: 800; }
.answer-style .tabs { margin: .5rem 0 0; }

.answer-style__note {
  margin: .5rem 0 0;
  color: var(--ink-soft);
  font-size: .74rem;
  line-height: 1.5;
}

/* ============================================================
   4. プレイ画面
   ============================================================ */

.game {
  display: grid;
  align-content: start;
  min-height: calc(100svh - 5rem);
}

.hud {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem;
  margin: 0;
}

.hud__count, .hud__score { margin: 0; }

.hud__mode {
  display: inline-block;
  margin-bottom: .2rem;
  padding: .12rem .55rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  font-size: .7rem;
  font-weight: 800;
}

.hud__count strong {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.hud__count small { margin-left: .2rem; font-size: .78rem; font-weight: 700; }

.hud__score { text-align: right; }
.hud__score span { display: block; font-size: .7rem; font-weight: 700; color: var(--ink-soft); }
.hud__score output { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.meter {
  height: .85rem;
  margin: .6rem 0 .8rem;
  padding: 2px;
  overflow: hidden;
  border: var(--edge) solid var(--ink);
  border-radius: 999px;
  background: var(--card);
}

.meter i {
  display: block;
  width: 10%;
  height: 100%;
  border-radius: 999px;
  background: var(--tomato);
  transition: width .25s ease-out;
}

/* --- 検品窓 --- */

.scanner { margin: 0; }

.scanner__window {
  position: relative;
  height: clamp(11rem, 32dvh, 15.5rem);
  overflow: hidden;
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--far-sky);
}

/* 左右の壁は下ろしたシャッター。窓の全高を覆い、荷物はこの裏を通って、すきまに
   いる間だけ見える。幅はすきまの残りを二等分して決まる。
   スラットは幅を取り、境目だけを濃い線で切る。線を細かく刻むと横縞の面積が増えて
   目が奥へ引かれ、すきまを見張る邪魔になる。すきま側には縦のガイドレールを1本置く。
   レールは border-box 基準で敷き、墨の枠の下まで届かせる。padding-box 基準だと枠との
   あいだにスラット面が1本の細い線として残る。 */
.scanner__panel {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: calc((100% - var(--gap-w)) / 2);
  background-color: var(--panel-face);
  background-image:
    linear-gradient(var(--panel-groove), var(--panel-groove)),
    repeating-linear-gradient(
      180deg, transparent 0 var(--slat), var(--panel-groove) var(--slat) calc(var(--slat) + 2px)
    );
  background-size: calc(.34rem + var(--edge)) 100%, 100% 100%;
  background-repeat: no-repeat, repeat;
  background-origin: border-box, padding-box;
  transition: width .3s ease-out;
}

.scanner__panel--left {
  left: 0;
  border-right: var(--edge) solid var(--ink);
  background-position: right center, 0 0;
}

.scanner__panel--right {
  right: 0;
  border-left: var(--edge) solid var(--ink);
  background-position: left center, 0 0;
}

/* 壁の間のすきま。ここだけが見え、荷物の見える範囲を決める。 */
.scanner__gap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((100% - var(--gap-w)) / 2);
  width: var(--gap-w);
  overflow: hidden;
  transition: left .3s ease-out, width .3s ease-out;
}

/* 見る場所を先に固定させる照準。荷物が出ている間は JS が隠す。 */
.scanner__guide {
  position: absolute;
  top: var(--lane-y);
  left: 50%;
  width: 1.7rem;
  height: 1.7rem;
  transform: translate(-50%, -50%);
}

.scanner__guide i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--edge);
  margin-top: calc(var(--edge) / -2);
  border-radius: 999px;
  background: var(--ink);
}

.scanner__guide i:last-child { transform: rotate(90deg); }

.scanner__item {
  position: absolute;
  z-index: 0;
  top: calc(var(--lane-y) - var(--item-size) / 2);
  left: 0;
  width: var(--item-size);
  height: var(--item-size);
  min-width: var(--item-size);
  min-height: var(--item-size);
  color: var(--ink);
  will-change: transform;
}

/* 荷物と候補の絵。素材はSVGファイルを img で読むので、比率を保って収める。 */
.object-icon { display: block; width: var(--item-size); height: var(--item-size); object-fit: contain; }
.scanner__item .object-icon { width: 100%; height: 100%; }

/* 秒読みはシャッター中央へ重ねる。地色を持つ白い札にして、空とシャッターの
   どちらの上でも読めるようにし、「ゴー！」も一行のまま保つ。 */
.scanner__count {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: max-content;
  min-width: 5.5rem;
  max-width: calc(100% - 2rem);
  padding: .1rem 1rem .25rem;
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-lg);
  color: var(--ink);
  background: var(--card);
  text-align: center;
  font-size: clamp(2.4rem, 13vw, 3.6rem);
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.scanner__feedback {
  position: absolute;
  z-index: 3;
  top: 44%;
  left: 50%;
  width: calc(100% - 1rem);
  max-width: 18rem;
  min-height: 5.25rem;
  margin: 0;
  padding: .2rem .5rem;
  display: grid;
  grid-template-columns: minmax(3rem, 4.25rem) minmax(0, 1fr);
  align-items: center;
  gap: .5rem;
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-sm);
  color: var(--ink);
  background: var(--card);
  font-size: clamp(.8rem, 3.8vw, 1rem);
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
  transform: translate(-50%, -50%);
}

/* 回答後も正解の絵を同じ領域に予約し、名前だけの場合と高さを変えない。 */
.round-feedback__icon {
  display: block;
  width: clamp(3rem, 18vw, 4.25rem);
  height: clamp(3rem, 18vw, 4.25rem);
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  justify-self: center;
}

.round-feedback__label {
  min-width: 0;
  text-align: left;
  overflow-wrap: anywhere;
}

.next-round-button {
  position: absolute;
  z-index: 3;
  top: 72%;
  bottom: auto;
  left: 50%;
  min-width: 7rem;
  min-height: var(--tap);
  padding: .45rem 1rem;
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-md);
  background: var(--sun);
  font-weight: 800;
  box-shadow: 0 var(--lift) 0 var(--ink);
  transform: translate(-50%, -50%);
}

.next-round-button:active {
  box-shadow: 0 0 0 var(--ink);
  transform: translate(-50%, calc(-50% + var(--lift)));
}

.scanner__prompt {
  margin: .5rem 0 0;
  color: var(--ink-soft);
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
}

/* --- 回答 --- */

.answer { padding-top: .8rem; }

.answer__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .55rem;
}

.answer__head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }

.answer__timer {
  min-width: 4rem;
  text-align: right;
  font-size: .9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.choice {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: clamp(5.5rem, 15dvh, 7rem);
  padding: .5rem;
  overflow: hidden;
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: 0 var(--lift) 0 var(--ink);
  transition: transform .12s ease-out, box-shadow .12s ease-out, background-color .15s ease-out;
}

.choice:not(:disabled):hover { background: var(--cream-deep); }
.choice:not(:disabled):active { transform: translateY(var(--lift)); box-shadow: 0 0 0 var(--ink); }

.choice:disabled { cursor: default; background: var(--cream-deep); }

.choice[data-state="correct"] { background: var(--good); box-shadow: 0 var(--lift) 0 var(--good-deep); }
.choice[data-state="wrong"] { background: var(--bad); box-shadow: 0 var(--lift) 0 var(--bad-deep); }
.choice[data-state="selected"] { background: var(--sun); box-shadow: 0 var(--lift) 0 var(--sun-deep); }
.choice[data-state="dim"] { opacity: .45; }

/* 数字キー1〜4での回答に対応する番号。位置だけで意味を持たせない。 */
.choice::after {
  content: attr(data-key);
  position: absolute;
  top: .3rem;
  left: .35rem;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  font-size: .68rem;
  font-weight: 800;
}

.choice .object-icon { width: min(76%, 5.2rem); height: min(76%, 5.2rem); color: var(--ink); }

/* もじで答えるときの候補。名前が長くても2行で収め、札の高さを揃える。 */
.choice__name {
  max-width: 100%;
  padding: 0 .3rem;
  color: var(--ink);
  text-align: center;
  font-size: clamp(.9rem, 4.2vw, 1.15rem);
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.game-status {
  min-height: 1.5rem;
  margin: .65rem 0 0;
  color: var(--ink-soft);
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
}

.game-status[data-tone="good"] { color: var(--mint-deep); }
.game-status[data-tone="bad"] { color: var(--tomato-deep); }

/* ============================================================
   5. 結果
   ============================================================ */

.result {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: calc(100svh - 5rem);
  text-align: center;
}

.result__stamp {
  position: relative;
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  border: var(--edge) solid var(--ink);
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 var(--lift) 0 var(--ink);
}

/* 出来ばえは色だけで伝えない。JS が data-result を与え、CSS は色と添え字を替える。 */
.result__stamp[data-result="great"] { background: var(--sun); }
.result__stamp[data-result="good"] { background: var(--mint); }
.result__stamp[data-result="soso"] { background: var(--card); }
.result__stamp[data-result="win"] { background: var(--sun); }
.result__stamp[data-result="draw"] { background: var(--mint); }
.result__stamp[data-result="lose"] { background: var(--card); }

.result__stamp::after {
  content: attr(data-label);
  position: absolute;
  bottom: -1.05rem;
  padding: .1rem .55rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  font-size: .66rem;
  font-weight: 800;
  white-space: nowrap;
}

.result__stamp:not([data-label])::after { content: none; }

.result__stamp svg {
  width: 3rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.result__mode {
  margin: 1.1rem 0 0;
  padding: .15rem .7rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  font-size: .74rem;
  font-weight: 800;
}

.result h1 { margin: .5rem 0 0; font-size: 2rem; font-weight: 800; }

.result__score { margin: .5rem 0 1.1rem; }
.result__score strong {
  font-size: clamp(3.2rem, 16vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.result__score span { margin-left: .3rem; font-weight: 800; }

.result__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  width: 100%;
  margin: 0 0 1.1rem;
}

.result__stats div {
  padding: .7rem .5rem;
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-md);
  background: var(--card);
}

.result__stats dt { font-size: .72rem; font-weight: 700; color: var(--ink-soft); }
.result__stats dd { margin: .2rem 0 0; font-size: 1.15rem; font-weight: 800; }

.result__notice {
  min-height: 1.6rem;
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: .82rem;
  line-height: 1.6;
}

.result__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  width: 100%;
}

/* ============================================================
   6. ボタン
   ============================================================ */

.button {
  min-height: var(--tap);
  padding: .6rem .9rem;
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-md);
  background: var(--card);
  font-weight: 800;
  box-shadow: 0 var(--lift) 0 var(--ink);
  transition: transform .12s ease-out, box-shadow .12s ease-out, background-color .15s ease-out;
}

.button:hover { background: var(--cream-deep); }
.button:active { transform: translateY(var(--lift)); box-shadow: 0 0 0 var(--ink); }
.button--go { background: var(--tomato); }
.button--go:hover { background: var(--tomato-deep); }
.button:disabled { cursor: not-allowed; background: var(--cream-deep); opacity: .6; }
.button:disabled:active { transform: none; box-shadow: 0 var(--lift) 0 var(--ink); }

/* ============================================================
   7. ランキング専用画面
   ============================================================ */

.ranking-screen {
  display: grid;
  align-content: start;
  gap: .8rem;
  min-height: calc(100svh - 5rem);
}

.ranking-screen__head {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.ranking-screen__head > .round-button { flex: none; }

.ranking-screen__head > div { min-width: 0; }

.ranking-screen__eyebrow {
  margin: 0;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.ranking-screen__head h1 { margin: 0; font-size: 1.7rem; font-weight: 800; line-height: 1.25; }

.ranking-screen__status {
  margin: .8rem 0;
  padding: .6rem .75rem;
  border: 2px solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--card);
  font-size: .8rem;
  font-weight: 700;
}

.ranking-screen__content {
  display: grid;
  gap: .8rem;
  min-width: 0;
}

.ranking-screen__foot {
  margin: .1rem .2rem 0;
  color: var(--ink-soft);
  font-size: .7rem;
  line-height: 1.6;
}

.panel {
  margin-top: .8rem;
  padding: .9rem;
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-md);
  background: var(--card);
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.panel h2,
.panel h3 { margin: 0; font-size: 1rem; font-weight: 800; }

.panel__note {
  margin: .6rem 0 0;
  color: var(--ink-soft);
  font-size: .78rem;
  line-height: 1.6;
}

.account-panel {
  display: grid;
  gap: .65rem;
}

.profile-form {
  display: grid;
  gap: .3rem;
}

.profile-form label {
  font-size: .76rem;
  font-weight: 700;
}

.profile-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
}

.profile-form input {
  min-width: 0;
  min-height: var(--tap);
  padding: .5rem .7rem;
  color: var(--ink);
  background: var(--cream);
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-sm);
  font-weight: 800;
}

.profile-form__guidance {
  min-height: 1.2rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: .72rem;
  line-height: 1.5;
}

.recovery-details {
  border-top: 2px solid var(--cream-deep);
}

.recovery-details summary {
  min-height: var(--tap);
  padding: .6rem .1rem .1rem;
  cursor: pointer;
  font-weight: 800;
}

.recovery-details__content {
  display: grid;
  gap: .65rem;
  padding-top: .4rem;
}

.recovery-code {
  display: grid;
  gap: .4rem;
}

.recovery-code__row,
.recovery-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
}

.recovery-code__value {
  min-width: 0;
  padding: .55rem .65rem;
  overflow-wrap: anywhere;
  color: var(--ink);
  background: var(--cream);
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem;
  letter-spacing: .08em;
}

.recovery-code__status {
  min-height: 1.4rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: .72rem;
  line-height: 1.5;
}

.recovery-reissue {
  display: grid;
  gap: .3rem;
  padding-top: .65rem;
  border-top: 2px solid var(--cream-deep);
}

.recovery-reissue__note,
.recovery-reissue__status {
  min-height: 1.2rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: .72rem;
  line-height: 1.5;
}

.recovery-form {
  display: grid;
  gap: .3rem;
  padding-top: .65rem;
  border-top: 2px solid var(--cream-deep);
}

.recovery-form label {
  font-size: .76rem;
  font-weight: 700;
}

.recovery-form input {
  min-width: 0;
  min-height: var(--tap);
  padding: .5rem .7rem;
  color: var(--ink);
  background: var(--cream);
  border: var(--edge) solid var(--ink);
  border-radius: var(--r-sm);
  font-weight: 800;
  letter-spacing: .08em;
}

.form-error {
  min-height: 1.2rem;
  margin: 0;
  color: var(--tomato-deep);
  font-size: .76rem;
  line-height: 1.5;
}

.form-error:empty { display: none; }

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  margin: .8rem 0 0;
}

.tabs button {
  min-height: var(--tap);
  border: 2px solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--cream);
  font-weight: 800;
}

.tabs button[aria-pressed="true"] { background: var(--sun); }

.chip {
  padding: .2rem .6rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  font-size: .7rem;
  font-weight: 800;
  white-space: nowrap;
}

.ranking {
  min-height: 3rem;
  margin: .7rem 0 0;
  padding-left: 1.9rem;
  font-size: .84rem;
}

.ranking li {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  padding: .4rem .2rem;
  border-bottom: 2px solid var(--cream-deep);
  overflow-wrap: anywhere;
}

.ranking li strong { flex: none; margin-left: auto; font-weight: 800; }

.ranking-challenge { width: 100%; margin-top: .7rem; }

/* ============================================================
   8. 画面サイズと動きの調整
   ============================================================ */

@media (max-height: 700px) {
  .home { min-height: calc(100svh - 5.5rem); }
  .stage { width: 12rem; margin-bottom: 0; }
  .stage__window { height: 5rem; }
  .stage__box { width: 1.8rem; height: 1.8rem; margin-left: -.9rem; }
  .home h1 { font-size: 1.7rem; }
  .home__lead { margin-block: .5rem .8rem; font-size: .82rem; }
  .menu { gap: .55rem; }
  .menu__item { min-height: 3.9rem; }
  .scanner__window { height: 10rem; }
  .choice { min-height: 5.5rem; }
}

@media (min-width: 48rem) {
  .app { width: min(100%, 33rem); }
  .home { align-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .stage__box { transform: translateX(0); }
}

/* 結果共有。外部サービスのスクリプトを読み込まず、操作時だけ共有する。 */
.result-share { width: 100%; max-width: 26rem; margin: .4rem 0 .8rem; }
.result-share__native { width: 100%; margin-bottom: .55rem; }
.result-share__links { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.result-share button, .result-share a {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; text-decoration: none;
  font-size: .85rem; letter-spacing: normal; color: inherit;
}
.result-share [hidden] { display: none; }
.result-share__status { margin: .45rem 0 0; font-size: .75rem; line-height: 1.5; }
.result-share__status:empty { display: none; }
.result-share textarea { width: 100%; margin-top: .5rem; font: inherit; font-size: .8rem; }
/* 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; }
/* 添付の和室・襖デザインを再現する表示層。出題・採点・保存は変更しない。 */
:root, :root:has(.app[data-difficulty]) {
  color-scheme: only light;
  --ink: #361b10; --ink-soft: #715139; --cream: #f4e4c6; --cream-deep: #e6d3af;
  --card: #fff9ec; --scene-ground: #eddbb6; --mint: #ffd261; --mint-deep: #c57c21;
  --good: #dce8c4; --good-deep: #6d8352; --bad: #f2d5be; --bad-deep: #a6634b;
  --far-sky: #ffedb7; --tap: 44px;
}
html, body { height: 100%; margin: 0; overflow: hidden; }
body { color: var(--ink); background: #39291e; font-family: ui-rounded, 'Hiragino Maru Gothic ProN', 'Yu Gothic', system-ui, sans-serif; }
#app { isolation: isolate; position: relative; display: block; width: min(100vw, 32rem); height: 100dvh; min-height: 0; max-height: 100dvh; margin: auto; padding: 0; border: 0; border-radius: 0; overflow: auto; background: #edd6aa; box-shadow: 0 0 60px #160c09a0; }
#app .app__dots, #app .topbar::before, #app .topbar-spacer { display: none; }
#app button { touch-action: manipulation; }
#app button:focus-visible, #app summary:focus-visible { outline: 3px solid #33796e; outline-offset: 3px; }
#app .topbar { position: relative; display: grid; grid-template-columns: 44px 44px minmax(0, 1fr) 44px; grid-template-rows: 44px; align-items: start; gap: 8px; min-height: 0; height: calc(env(safe-area-inset-top) + clamp(205px, 31dvh, 265px)); padding: calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 14px) 0 calc(env(safe-area-inset-left) + 14px); border: 0; background: none; }
#app .game-back, #app .settings-button { display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 10px; border: 1px solid #8b6137; border-radius: 50%; color: #48271b; background: #fff3daed; box-shadow: 0 2px 5px #3e291a33; }
#app .game-back svg, #app .settings-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#app .settings-button { grid-column: 4; grid-row: 1; }
#app:not([data-screen="game"]) .game-back { visibility: hidden; }
#app:not([data-screen="home"]) .settings-button { display: none; }
#app .masthead-home { grid-area: auto; position: absolute; top: calc(env(safe-area-inset-top) + clamp(85px, 12dvh, 110px)); left: 10%; right: 10%; width: 80%; max-width: none; height: clamp(112px, 18dvh, 155px); min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; background: none; aspect-ratio: auto; }
#app .masthead-art { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; width: 100%; height: 100%; min-width: 0; min-height: 0; aspect-ratio: auto; background: none; }
#app .masthead-art img { display: block; min-width: 0; min-height: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
#app .masthead-art img[hidden], #app .masthead-art__fallback[hidden] { display: none; }
#app .masthead-art__fallback { display: block; max-width: 100%; color: #381e13; font-size: clamp(1.5rem, 7vw, 2.5rem); font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; text-shadow: 0 1px 0 #fff3d7; }
#app .hud, #app .hud__mode { display: none; }
#app .screen { padding: 0; }
#app .home { display: flex; flex-direction: column; min-height: 360px; height: calc(100dvh - env(safe-area-inset-top) - clamp(205px, 31dvh, 265px)); padding: 0 10% max(12px, env(safe-area-inset-bottom)); gap: 0; }
#app .home__intro { display: block; text-align: center; }
#app .home-art { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
#app .home-art picture { display: block; width: 100%; height: 100%; }
#app .home-art img { display: block; width: 100%; height: 100%; min-height: 100%; object-fit: cover; object-position: center; }
#app .home__tagline { margin: 0; color: #361c10; font-size: clamp(.95rem, 4.1vw, 1.25rem); font-weight: 900; line-height: 1.45; letter-spacing: .04em; text-shadow: 0 1px 6px #fff6e0; }
#app .home__setup { display: block; margin-top: auto; padding-top: 16px; }
#app .menu { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 0; }
#app .menu__item { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 68px; margin: 0; padding: 9px 18px; border: 2px solid #4d2d18; border-radius: 999px; color: #32190e; background: linear-gradient(#ffdf70, #ffc447); box-shadow: inset 0 2px 1px #fff7c5, 0 4px 0 #b87927, 0 5px 8px #49311e38; }
#app .menu__item:active { transform: translateY(2px); box-shadow: inset 0 2px 1px #fff7c5, 0 1px 0 #b87927; }
#app .menu__body { flex: 0 1 auto; }
#app .menu__body strong { display: block; color: inherit; font-size: clamp(1.75rem, 8vw, 2.5rem); font-weight: 900; line-height: 1.2; }
#app .menu__arrow { display: none; }
#app .menu__icon { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 0; color: #ad5429; background: none; box-shadow: none; }
#app .menu__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; }
#app .menu__paw svg, #app .menu__paw svg * { fill: currentColor; stroke: none; }
#app .menu__paw { width: 30px; height: 30px; margin-right: 3px; color: #df932b; }
#app .menu__item--howto, #app .menu__item--highscore { width: 68%; min-width: 190px; min-height: 44px; padding: 7px 14px; color: #402012; background: #f7e9d8f5; box-shadow: inset 0 1px 0 #fff, 0 2px 3px #50332235; }
#app .menu__item--howto .menu__body strong, #app .menu__item--highscore .menu__body strong { font-size: clamp(.9rem, 4.2vw, 1.15rem); line-height: 1.3; }
#app .menu__item--highscore .menu__icon { color: #5a331a; }
#app .home__slogan { margin: 13px auto 0; width: 88%; color: #343530; font-size: .77rem; font-weight: 750; line-height: 1.5; text-align: center; text-shadow: 0 1px 4px #fff5da; }
#app .sites-error { background: #fff7e6; font-size: .85rem; }
/* プレイ: 上段の得点・ロゴ・ライフ、襖、四択、下端の時計。 */
#app[data-screen="game"] { display: grid; grid-template-rows: calc(112px + env(safe-area-inset-top)) minmax(0, 1fr); overflow: hidden; padding-bottom: env(safe-area-inset-bottom); background: #f0dbb6; }
#app[data-screen="game"] .topbar { height: auto; padding-top: calc(env(safe-area-inset-top) + 4px); border-bottom: 9px solid #704221; background: linear-gradient(#b6814e 0 3px, #ead3a7 3px 100%); }
#app[data-screen="game"] .masthead-home { z-index: 2; top: calc(env(safe-area-inset-top) + 50px); left: 28%; right: 28%; width: 44%; height: 49px; }
#app[data-screen="game"] .masthead-art__fallback { font-size: clamp(.9rem, 4vw, 1.35rem); }
#app[data-screen="game"] .hud { position: absolute; inset: calc(env(safe-area-inset-top) + 49px) 12px 5px; display: grid; grid-template-columns: minmax(60px, 24%) minmax(0, 1fr) minmax(60px, 24%); gap: 6px; margin: 0; padding: 0; border: 0; background: none; pointer-events: none; }
#app .hud__score, #app .hud__lives { display: grid; align-content: center; justify-items: center; margin: 0; min-width: 0; padding: 3px 5px; border: 1px solid #b59165; border-radius: 9px; color: #351d10; background: #fff4d9; box-shadow: 0 2px 3px #6e462529; text-align: center; }
#app .hud__score { grid-column: 1; grid-row: 1; justify-self: stretch; }
#app .hud__lives { grid-column: 3; grid-row: 1; }
#app .hud__score span { display: block; font-size: .7rem; line-height: 1.1; font-weight: 800; }
#app .hud__score output { display: block; font-size: 1.5rem; line-height: 1.05; font-weight: 900; font-variant-numeric: tabular-nums; }
#app .hud__count { position: absolute; top: -34px; left: 100px; right: 64px; margin: 0; text-align: center; }
#app .hud__count strong { font-size: .7rem; font-weight: 800; line-height: 1.2; }
#app #lives-hearts { display: flex; gap: .08rem; color: #db4545; font-size: clamp(1rem, 4.5vw, 1.5rem); line-height: 1.05; text-shadow: 0 1px 0 #a22121; }
#app #lives-hearts i[data-lost="true"] { color: #ad9e8d; opacity: 1; text-shadow: none; }
#app #lives-label { order: -1; font-size: .65rem; line-height: 1.2; font-weight: 800; }
#app[data-screen="game"] .hud__mode { position: absolute; right: 12px; top: calc(env(safe-area-inset-top) + 10px); display: block; max-width: 64px; padding: 3px 0; font-size: .65rem; line-height: 1.2; text-align: right; overflow-wrap: anywhere; border: 0; background: none; color: #644326; }
#app[data-screen="game"] main { display: grid; min-height: 0; }
#app[data-screen="game"] .game { display: grid; grid-template-rows: 0 minmax(120px, 1fr) auto; gap: 0; height: 100%; min-width: 0; min-height: 0; }
#app .meter { height: 0; min-height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; }
#app .scanner { display: grid; grid-template-rows: minmax(0, 1fr) 25px; gap: 0; min-width: 0; min-height: 0; padding: 0 9px; background: repeating-linear-gradient(0deg, #bdb583 0 1px, #c8be8e 1px 3px); border-inline: 5px solid #81532e; }
#app .scanner__window { width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; background: radial-gradient(ellipse, #fff9da, #f5d789); isolation: isolate; box-shadow: none; }
#app .scanner__window::after { content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none; border: 3px solid #3c3025; }
#app .scanner__panel { width: calc((100% - var(--gap-w)) / 2); z-index: 1; border: 0; background: #dfc69a url('../assets/scenes/fusuma-panel.webp') right center / cover no-repeat; box-shadow: 2px 0 4px #3e281733; }
#app .scanner__panel--right { transform: scaleX(-1); }
#app .scanner__item { z-index: 0; }
#app .scanner__item, #app .scanner__item .object-icon { opacity: 1; filter: none; }
#app .scanner__guide { width: .9rem; height: .9rem; opacity: .4; }
#app .scanner__guide i { height: 2px; background: #815c34; }
#app .scanner__prompt { display: block; align-self: center; margin: 0; color: #52442a; font-size: .65rem; line-height: 1.2; text-align: center; }
#app .scanner__count { border: 2px solid #6b462b; border-radius: 50%; color: #624021; background: #fff2d1; box-shadow: 0 4px 18px #35231145; }
#app .scanner__feedback { z-index: 3; top: calc(50% - 1.2rem); width: calc(100% - 2rem); max-width: 24rem; min-height: 0; max-height: calc(100% - 4.5rem); overflow: auto; grid-template-columns: minmax(0, 1fr); padding: .5rem .65rem; border: 1px solid #96734c; border-radius: 12px; color: #3d2413; background: #fff7e9f5; box-shadow: 0 4px 14px #38271d35; font-size: .83rem; }
#app .scanner__feedback:has(img) { grid-template-columns: 3rem minmax(0, 1fr); }
#app .round-feedback__icon { width: 3rem; height: 3rem; }
#app .next-round-button { z-index: 3; top: auto; bottom: .7rem; min-height: 44px; padding: .4rem 1rem; border: 1px solid #885c2f; border-radius: 99px; color: #422719; background: #ffdc70; box-shadow: 0 3px 0 #ad702d; transform: translateX(-50%); }
#app .next-round-button:active { transform: translate(-50%, 2px); box-shadow: 0 1px 0 #ad702d; }
#app .answer { display: grid; grid-template-rows: auto auto auto auto; gap: 0; min-width: 0; padding: 10px 12px 5px; background: linear-gradient(90deg,#ead0ac80,transparent 22% 78%,#ead0ac80), #f5e1c2; }
#app .answer__head { display: block; margin: 0 0 9px; text-align: center; }
#app .answer__head h2 { margin: 0; min-width: 0; color: #371d11; font-size: clamp(.86rem, 3.6vw, 1.15rem); line-height: 1.4; font-weight: 900; }
#app .choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,clamp(50px,8.3dvh,75px)); gap: 9px; }
#app .choice { display: grid; grid-template: minmax(0,1fr)/minmax(0,1fr); place-items: center; min-width: 0; min-height: 44px; height: 100%; padding: 6px; border: 1px solid #b3916c; border-radius: 12px; color: #382010; background: #fff8eb; box-shadow: inset 0 2px 0 #fffdf8,0 2px 5px #71472038; }
#app .choice:disabled:not([data-state]) { background: #f3e5cf; box-shadow: inset 0 1px 0 #fff9ec; }
#app .choice:not(:disabled):hover { background: #ffefd0; border-color: #8d6334; }
#app .choice:not(:disabled):active { transform: translateY(2px); box-shadow: inset 0 1px 3px #85613455; }
#app .choice__name { padding: 0 2px; color: inherit; font-size: clamp(.82rem,4.1vw,1.4rem); font-weight: 900; line-height: 1.15; overflow-wrap: anywhere; }
#app .choice::after { display: none; }
#app .choice .object-icon { display: block; min-width: 0; min-height: 0; width: min(78%,5.4rem); height: 100%; max-height: 5.4rem; object-fit: contain; }
#app .choice[data-state="correct"] { background: #dfedc7; border-color: #7b914b; box-shadow: 0 2px 0 #78904f; }
#app .choice[data-state="wrong"] { background: #f4d7c5; border-color: #ba795a; box-shadow: 0 2px 0 #b77f5b; }
#app .choice[data-state="correct"]::before, #app .choice[data-state="wrong"]::before { position: absolute; top: 0; right: 5px; content: '✓'; color: #3e6433; font-size: 1rem; font-weight: 900; }
#app .choice[data-state="wrong"]::before { content: '×'; color: #9a4932; }
#app .answer-clock { display: flex; align-items: center; gap: 5px; min-height: 43px; margin-top: 10px; padding: 5px 8px; border: 1px solid #b59670; border-radius: 10px; background: #fff5de; box-shadow: 0 2px 3px #6e462520; }
#app .answer-clock svg { width: 22px; height: 26px; flex-shrink: 0; fill: none; stroke: #3c281c; stroke-width: 2.2; stroke-linecap: round; }
#app .answer__timer { min-width: 56px; max-width: 38%; margin: 0; padding: 0; border: 0; border-radius: 0; color: #352012; background: none; font-size: .9rem; line-height: 1.15; font-weight: 900; text-align: left; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#app .answer-clock__track { flex: 1; height: 19px; min-width: 24px; border: 1px solid #96734e; border-radius: 99px; overflow: hidden; background: #c1a589; box-shadow: inset 0 2px 2px #64422728; }
#app .answer-clock__track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(#ffe990,#ffc852); box-shadow: inset 0 1px 0 #fff4be; transform: scaleX(var(--answer-remaining,1)); transform-origin: left; }
#app .game-status { display: block; min-height: 2.5em; margin: 5px 0 0; padding: 0; border: 0; color: #75543a; font-size: .65rem; line-height: 1.25; text-align: center; }
#app .answer__footer { display: none; }
/* Dialogs keep the reference home uncluttered while preserving all settings. */
#app dialog { width: min(calc(100% - 28px),26rem); max-height: calc(90dvh - env(safe-area-inset-top)); margin: auto; padding: 20px; overflow: auto; border: 2px solid #765334; border-radius: 18px; color: #432817; background: #fff5e2; box-shadow: 0 20px 70px #24160c80; }
#app dialog::backdrop { background: #21150dc0; }
#app .dialog__head, #app .howto-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
#app .dialog__head h2, #app .howto-dialog__head h2 { margin: 0; font-size: 1.35rem; font-weight: 900; }
#app .dialog__close, #app .howto-dialog__x { display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; padding: 0; border: 1px solid #a78b65; border-radius: 50%; color: #51321e; background: #f0dfc0; font-size: 1.4rem; }
#app .difficulty-select, #app .answer-style { margin: 18px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
#app .difficulty-select h2, #app .answer-style__title { margin: 0 0 8px; font-size: .95rem; font-weight: 800; }
#app .difficulty-rule, #app .answer-style__note { display: block; margin: 8px 0; color: #796044; font-size: .75rem; line-height: 1.5; }
#app .difficulty-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(90px,1fr)); gap: 7px; margin: 0; }
#app .difficulty-options button { display: grid; align-content: center; gap: 4px; min-height: 70px; padding: 8px; border: 1px solid #baa079; border-radius: 12px; color: #614a31; background: #f5e8cc; text-align: center; box-shadow: none; }
#app .difficulty-options strong { font-size: .95rem; line-height: 1.2; }
#app .difficulty-options small { font-size: .7rem; line-height: 1.4; }
#app .difficulty-options button[aria-pressed="true"] { border-color: #846032; background: #ffd96d; color: #422817; }
#app .difficulty-options button:disabled { color: #968774; background: #e9e0d0; }
#app .answer-style .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; padding: 3px; border: 1px solid #c6ae89; border-radius: 12px; background: #e9dcc3; }
#app .tabs button { min-height: 44px; min-width: 0; padding: 6px; border: 0; border-radius: 9px; color: #6f573c; background: none; box-shadow: none; font-size: .82rem; font-weight: 800; }
#app .tabs button[aria-pressed="true"] { color: #422b19; background: #fff8e9; box-shadow: 0 1px 4px #76603e30; }
#app .sites-best { margin: 20px 0; color: #614020; font-size: 1.4rem; font-weight: 900; text-align: center; }
#app .howto-dialog form { padding: 0; }
#app .howto-steps { display: grid; gap: 12px; margin: 20px 0; padding-left: 25px; font-weight: 750; line-height: 1.5; }
#app .howto-dialog__rule { color: #796044; font-size: .85rem; line-height: 1.6; }
#app .howto-dialog__close { width: 100%; }
#app .button { min-height: 48px; padding: 9px 16px; border: 1px solid #987143; border-radius: 99px; color: #523519; background: #fff3d7; box-shadow: 0 3px 0 #b2966c; }
#app .button--go { background: #ffda6d; color: #3b2213; box-shadow: 0 3px 0 #b67b29; }
#app[data-screen="result"] .topbar { height: 115px; }
#app[data-screen="result"] .masthead-home { top: 55px; height: 55px; left: 23%; right: 23%; width: 54%; }
#app .result { min-height: 0; padding: 25px 22px calc(28px + env(safe-area-inset-bottom)); }
#app .result__stamp { border: 2px solid #b39a67; color: #776131; background: #fff1c2; box-shadow: none; }
#app .result__score { color: #704b1e; }
#app .result__stats { border-color: #bca178; border-radius: 14px; background: #fff2d9; }
@media (orientation: landscape) {
  #app { width: min(100vw,60rem); }
  #app:not([data-screen="game"]):not([data-screen="result"]) .topbar { height: calc(90px + env(safe-area-inset-top)); }
  #app[data-screen="home"] .masthead-home { top: calc(95px + env(safe-area-inset-top)); left: 7%; right: auto; justify-self: start; width: 43%; height: 100px; }
  #app .home { min-height: 280px; height: calc(100dvh - 90px - env(safe-area-inset-top)); padding: 0 6% 12px; display: grid; grid-template-columns: 1.05fr 1fr; grid-template-rows: minmax(0,1fr); align-content: stretch; align-items: end; gap: 5%; }
  #app .home__intro { align-self: start; padding-top: 108px; }
  #app .home__tagline { font-size: .84rem; }
  #app .home__setup { margin: 0; padding: 0; }
  #app .home-art img { object-position: center 58%; }
  #app .menu__item { min-height: 58px; }
  #app .menu__item--howto, #app .menu__item--highscore { min-height: 44px; }
  #app .menu__body strong { font-size: 1.5rem; }
  #app[data-screen="game"] { grid-template-rows: calc(101px + env(safe-area-inset-top)) minmax(0,1fr); }
  #app[data-screen="game"] .topbar { border-bottom-width: 6px; }
  #app[data-screen="game"] .masthead-home { top: calc(env(safe-area-inset-top) + 47px); left: 35%; right: 35%; width: 30%; height: 45px; }
  #app[data-screen="game"] .hud { top: calc(env(safe-area-inset-top) + 45px); left: 18%; right: 18%; grid-template-columns: 24% 1fr 24%; }
  #app .hud__count { left: 100px; right: 100px; }
  #app[data-screen="game"] .game { grid-template-columns: minmax(0,1.1fr) minmax(250px,1fr); grid-template-rows: minmax(0,1fr); }
  #app .meter { display: none; }
  #app .scanner { grid-column: 1; grid-row: 1; }
  #app .answer { grid-column: 2; grid-row: 1; grid-template-rows: auto minmax(0,1fr) auto auto; min-height: 0; padding: 8px 10px 4px; }
  #app .choices { min-height: 0; grid-template-rows: repeat(2,minmax(44px,1fr)); gap: 7px; }
  #app .choice__name { font-size: clamp(.85rem,2vw,1.3rem); }
  #app .answer__head { margin-bottom: 6px; }
  #app .answer__head h2 { font-size: .86rem; }
  #app .answer-clock { min-height: 34px; margin-top: 7px; padding-block: 3px; }
  #app .game-status { min-height: 2.5em; font-size: .6rem; margin-top: 3px; }
  #app .scanner__feedback { font-size: .76rem; }
}
@media (orientation: portrait) {
  #app .home__tagline { margin-top: 24px; }
}
@media (max-height: 620px) and (orientation: portrait) {
  #app .home { min-height: 335px; }
  #app .menu__item { min-height: 56px; }
  #app .menu__item--howto, #app .menu__item--highscore { min-height: 44px; }
  #app .answer { padding-top: 7px; }
  #app .choices { grid-template-rows: repeat(2,54px); gap: 7px; }
  #app .answer__head h2 { font-size: .82rem; }
  #app .answer-clock { margin-top: 7px; min-height: 35px; }
  #app .game-status { font-size: .6rem; }
}
@media (min-width: 960px) and (min-height: 561px) {
  #app { width: min(calc(100vw - 48px),58rem); height: min(calc(100dvh - 30px),900px); max-height: calc(100dvh - 30px); border: 4px solid #815b35; border-radius: 6px; }
  #app .topbar { margin: 0; }
  #app .home { height: calc(min(100dvh - 30px,900px) - 98px); padding-bottom: 30px; }
  #app .home__setup { margin-bottom: 10%; }
  #app .home__intro { padding-top: 220px; }
  #app[data-screen="home"] .masthead-home { top: calc(125px + env(safe-area-inset-top)); height: 165px; }
  #app .menu__item { min-height: 78px; }
  #app .menu__item--howto, #app .menu__item--highscore { min-height: 50px; }
  #app .home__slogan { font-size: .9rem; margin-top: 20px; }
  #app .home-art img { object-position: center 58%; }
  #app[data-screen="game"] { height: min(calc(100dvh - 30px),900px); padding: 0; }
  #app .answer { padding: 18px 16px 12px; }
  #app .answer__head h2 { font-size: 1.05rem; }
  #app .choices { grid-template-rows: repeat(2,minmax(70px,1fr)); }
  #app .answer-clock { min-height: 48px; margin-top: 15px; }
  #app .game-status { margin-top: 10px; font-size: .75rem; }
  #app .result { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { #app *, #app *::before, #app *::after { animation: none !important; transition: none !important; } }
/* Safariの二段ツールバー等で縦が足りない横画面は、四択を潰さずスクロール。 */
@media (orientation: landscape) and (max-height: 360px) {
  #app[data-screen="game"] { grid-template-rows: calc(101px + env(safe-area-inset-top)) minmax(240px,1fr); overflow-y: auto; overflow-x: hidden; }
  #app[data-screen="game"] main, #app[data-screen="game"] .game { min-height: 240px; }
  #app .answer { min-height: 240px; }
}
/* 難易度と回答方法はホームで直接選ぶ。設定は端末オプションだけ。 */
#app .home-options { flex: 0 0 auto; display: grid; gap: 8px; margin-top: 12px; }
#app .home-options .difficulty-select, #app .home-options .answer-style { margin: 0; }
#app .home-options .difficulty-select h2, #app .home-options .answer-style__note { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#app .home-options .difficulty-options { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
#app .home-options .difficulty-options:has([data-difficulty="oni"]) { grid-template-columns: repeat(4,minmax(0,1fr)); }
#app .home-options .difficulty-options:has([data-difficulty="oni"]) strong { font-size: clamp(.65rem,2.8vw,.84rem); }
#app .home-options .difficulty-options button { position: relative; min-height: 56px; padding: 10px 6px; border: 2px solid transparent; border-radius: 13px; background: transparent url('../assets/controls/difficulty-beginner.webp') center / 100% 100% no-repeat; box-shadow: 0 2px 3px #47331828; color: #4a2b18; }
#app .home-options .difficulty-options button[data-difficulty="intermediate"] { background-image: url('../assets/controls/difficulty-intermediate.webp'); }
#app .home-options .difficulty-options button[data-difficulty="advanced"] { background-image: url('../assets/controls/difficulty-advanced.webp'); }
#app .home-options .difficulty-options button[data-difficulty="oni"] { background-image: url('../assets/controls/difficulty-oni.webp'); }
#app .home-options .difficulty-options button[aria-pressed="true"] { border-color: #37766a; box-shadow: 0 0 0 1px #fffcdf,0 3px 0 #315f5140; }
#app .home-options .difficulty-options button:disabled { color: #675949; filter: saturate(.4); opacity: .83; }
#app .home-options .difficulty-options strong { font-size: clamp(.75rem,3.25vw,.95rem); line-height: 1.2; text-shadow: 0 1px 2px #fff5d8; }
#app .home-options .difficulty-options small { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#app .difficulty-lock { position: absolute; right: 4px; bottom: 4px; width: 13px; height: 13px; color: #725034; }
#app .difficulty-lock svg { display: block; width: 100%; height: 100%; fill: #fff7df; stroke: currentColor; stroke-width: 1.7; }
#app .home-unlock-hint { margin: 4px 0 0; color: #63452d; font-size: .62rem; font-weight: 750; line-height: 1.25; text-align: center; text-shadow: 0 1px 3px #fff7e5; }
#app .home-options .answer-style { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,3.2fr); align-items: center; gap: 8px; }
#app .home-options .answer-style__title { min-width: 0; overflow-wrap: anywhere; margin: 0; font-size: .7rem; font-weight: 800; line-height: 1.25; color: #563b25; text-shadow: 0 1px 3px #fff5dd; }
#app .home-options .answer-style .tabs { gap: 2px; padding: 2px; border-color: #8f6d43; background: #ddc49eeb; }
#app .home-options .tabs button { min-height: 44px; padding: 5px; font-size: .72rem; line-height: 1.2; overflow-wrap: anywhere; }
#app .home-options .tabs button[aria-pressed="true"] { background: #fff5d9; color: #422615; }
@media (orientation: portrait) {
  #app[data-screen="home"] { --home-scene-height: max(100dvh,740px); }
  #app .home { position: relative; height: auto; min-height: calc(var(--home-scene-height,100dvh) - env(safe-area-inset-top) - clamp(205px,31dvh,265px)); }
  #app .home__setup { margin-top: 144px; }
  #app .home-art { top: calc(-1 * (env(safe-area-inset-top) + clamp(205px,31dvh,265px))); bottom: 0; height: auto; min-height: var(--home-scene-height,100dvh); }
}
@media (orientation: landscape) {
  #app .home { height: auto; grid-template-rows: auto auto; align-content: space-between; row-gap: 12px; min-height: max(360px,calc(100dvh - 90px - env(safe-area-inset-top))); }
  #app .home__intro { grid-column: 1; grid-row: 1 / 3; align-self: start; }
  #app .home-options { grid-column: 2; grid-row: 1; margin-top: 0; }
  #app .home__setup { grid-column: 2; grid-row: 2; align-self: end; }
  #app .home-art { height: max(100dvh,450px); bottom: auto; }
  #app .home-options .difficulty-options button { min-height: 54px; }
  #app .home-options .difficulty-options strong { font-size: .85rem; }
}

@media (min-width: 960px) and (min-height: 561px) {
  #app .home { min-height: calc(min(100dvh - 30px,900px) - 98px); }
}

@media (orientation: portrait) and (max-width: 360px) {
  #app .home__tagline { margin-top: 0; font-size: .78rem; }
  #app .home-art img { object-position: center top; }
  #app .home__setup { margin-top: 180px; }
}
/* 音設定はBGMとSEを一括切替。プレイ中も進行を捨てずに消音できる。 */
#app .sound-setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-block: 14px; border-top: 1px solid #d4bf9e; }
#app .sound-setting h3 { margin: 0 0 4px; font-size: 1rem; }
#app .sound-setting p { margin: 0; color: #796044; font-size: .8rem; }
#app .sound-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 100px; min-height: 48px; padding: 8px; border: 1px solid #aa8c65; border-radius: 12px; color: #4d3320; background: #fff8e9; font-size: .9rem; font-weight: 800; }
#app .sound-toggle__track { display: block; width: 36px; height: 22px; padding: 3px; border-radius: 99px; background: #a8987f; }
#app .sound-toggle__track i { display: block; width: 16px; height: 16px; border-radius: 50%; background: #fffaf1; }
#app .sound-toggle[aria-checked="true"] .sound-toggle__track { background: #508274; }
#app .sound-toggle[aria-checked="true"] .sound-toggle__track i { transform: translateX(14px); }
#app .audio-credits { margin-top: 12px; color: #705338; font-size: .72rem; line-height: 1.5; }
#app .audio-credits summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 750; }
#app .audio-credits summary::after { content: "⌄"; margin-left: auto; font-size: 1rem; }
#app .audio-credits[open] summary::after { content: "⌃"; }
#app .audio-credits a { color: #36685f; text-underline-offset: 2px; }
#app .audio-credits p { overflow-wrap: anywhere; }
#app .sound-game-toggle { display: none; }
#app[data-screen="game"] .sound-game-toggle { grid-column: 4; grid-row: 1; display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 11px; border: 1px solid #8b6137; border-radius: 50%; color: #48271b; background: #fff3daed; box-shadow: 0 2px 5px #3e291a33; }
#app .sound-game-toggle svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#app .sound-game-toggle[aria-checked="false"] { opacity: .75; }
#app[data-screen="game"] .hud__count .hud__mode { position: static; display: block; max-width: 100%; margin: 2px 0 0; padding: 0; color: #765637; font-size: .6rem; line-height: 1.15; text-align: center; }
/* ホームのポータル操作とゲーム内の戻る操作は同じ左上の44px枠を使う。 */
:root { color-scheme: only light; }
#app .topbar { grid-template-columns: 44px 44px minmax(0, 1fr) 44px; }
#app .home-portal-menu { grid-column: 1; grid-row: 1; }
#app .topbar > .game-back { grid-column: 1; grid-row: 1; }
#app .home-portal-menu { position: relative; z-index: 20; width: 44px; height: 44px; }
#app:not([data-screen="home"]) .home-portal-menu, #app .home-portal-menu:has([data-asobiba-link][hidden]) { display: none; }
#app .home-portal-menu > summary, #app .home-portal { box-sizing: border-box; min-height: 44px; border: 1px solid #927047; border-radius: 999px; color: #4a2a18; background: #fff6e6eb; box-shadow: 0 2px 5px #3d291c30; font: 800 13px/1 system-ui,sans-serif; text-decoration: none; touch-action: manipulation; }
#app .home-portal-menu > summary { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer; list-style: none; }
#app .home-portal-menu > summary::-webkit-details-marker { display: none; }
#app .home-portal-menu > summary::marker { content: ''; }
#app .home-portal-menu[open] > summary svg { transform: rotate(180deg); }
#app .home-portal { position: absolute; top: 0; left: 50px; display: flex; align-items: center; width: max-content; max-width: calc(100vw - 110px); padding: 0 16px; white-space: nowrap; }
#app .home-portal-menu:not([open]) > .home-portal { display: none; }
#app .home-portal-menu > summary:focus-visible, #app .home-portal:focus-visible { outline: 3px solid #47756a; outline-offset: 3px; }
#app .language-control { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 44px; min-height: 48px; color: #573c26; }
#app .language-control svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
#app .language-control > span[aria-hidden] { display: none; }
#app .language-control select { position: static; width: calc(100% - 32px); min-height: 44px; padding: 6px 10px; opacity: 1; border: 1px solid #b69c76; border-radius: 10px; color: #493019; background: #fffaf0; font: inherit; cursor: pointer; }
#app .language-control select:focus-visible { outline: 3px solid #47756a; outline-offset: 2px; }
/* 承認された絵の構図を、操作可能なUIとして実装する。 */
#app { container-type: inline-size; }
#app[data-screen="home"] { --home-height: max(740px, 100dvh, 211cqw); }
#app[data-screen="home"] .topbar { z-index: 4; height: calc(var(--home-height) * .245); padding: calc(12px + env(safe-area-inset-top)) 14px 0; }
#app[data-screen="home"] .masthead-home { top: calc(var(--home-height) * .085); left: 12%; right: 12%; width: 76%; height: calc(var(--home-height) * .135); }
#app .home { position: relative; display: flex; flex-direction: column; height: auto; min-height: calc(var(--home-height) * .755); padding: 0 9% max(18px, env(safe-area-inset-bottom)); gap: 12px; }
#app .home__intro { padding: 0; }
#app .home__tagline { margin: 0; font-size: clamp(.95rem,4.2cqw,1.3rem); line-height: 1.45; letter-spacing: 0; }
#app .home-art { top: calc(var(--home-height) * -.245); bottom: 0; height: auto; min-height: var(--home-height); }
#app .home-art img { object-fit: fill; object-position: center; }
#app .home-start { margin-top: calc(var(--home-height) * .36); flex: none; }
#app .menu__item--mint { min-height: 62px; gap: 14px; padding: 9px 14px; border-color: #593219; background: linear-gradient(#ffe983,#ffd655 54%,#ffc63d); box-shadow: inset 0 2px 1px #fff5bd,0 3px 0 #ab691f,0 4px 7px #51321840; }
#app .menu__item--mint .menu__body strong { font-size: clamp(1.65rem,6.4cqw,2.25rem); }
#app .home-options { margin: 0; gap: 12px; }
#app .home-options .difficulty-options { padding: 5px; border: 2px solid #a87c4c; border-radius: 18px; background: #f9ebd5ed; box-shadow: inset 0 2px 0 #fff9e9,0 3px 3px #64391830; }
#app .home-options .difficulty-options button { min-height: 54px; padding: 7px 4px 18px; border: 1px solid #c29d79; border-radius: 12px; background: linear-gradient(#fff9ed,#f2dfc1); box-shadow: inset 0 1px 1px #fff; }
#app .home-options .difficulty-options button::after { content: ''; position: absolute; bottom: 5px; left: calc(50% - 4px); width: 8px; height: 8px; border: 1px solid #ad8764; border-radius: 50%; background: #fff7e6; }
#app .home-options .difficulty-options button[aria-pressed="true"] { background: linear-gradient(#eef6d5,#d6eab7); border-color: #6a9a55; box-shadow: inset 0 1px 0 #fff; }
#app .home-options .difficulty-options button[aria-pressed="true"]::after { background: #43953b; border-color: #287329; }
#app .home-options .difficulty-options strong, #app .home-options .difficulty-options:has([data-difficulty="oni"]) strong { font-size: clamp(.78rem,3.1cqw,1rem); }
#app .home-unlock-hint { margin: 4px 0 0; font-size: .75rem; }
#app .home-options .answer-style { display: block; }
#app .home-options .answer-style__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#app .home-options .answer-style .tabs { gap: 3px; width: 82%; margin: auto; padding: 3px; border: 2px solid #ab7b51; border-radius: 99px; background: #fcf0dcf2; box-shadow: inset 0 1px 0 #fff,0 2px 3px #67402430; }
#app .home-options .tabs button { min-height: 44px; padding: 5px 7px; border-radius: 99px; font-size: .87rem; font-weight: 900; }
#app .home-options .tabs button[aria-pressed="true"] { color: #3f4724; background: linear-gradient(#e6f1ce,#d4e9ae); box-shadow: inset 0 0 0 1px #7d9c61; }
#app .home__setup { margin: 0; padding: 0; }
#app .menu { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
#app .menu__item--howto, #app .menu__item--highscore { width: 100%; min-width: 0; min-height: 44px; padding: 8px; gap: 6px; border: 1px solid #916342; border-radius: 13px; background: #fff5e6f2; }
#app .menu__item--howto .menu__body strong, #app .menu__item--highscore .menu__body strong { font-size: .86rem; overflow-wrap: anywhere; }
#app .home__slogan { margin-top: 12px; width: 100%; font-size: .8rem; }
/* ポータルは一閃と同じSVG/CSS。背景画像には含めない。 */
#app .home-portal-menu > summary, #app .home-portal { color: #48271b; border: 1px solid #aa8965; background: #fffdf5f5; box-shadow: 0 2px 5px #3e291a33; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* 襖の絵は左右の可動パネルだけに使い、中央を横切る素材は実画像のまま。 */
#app[data-screen="game"] .topbar { background: linear-gradient(#bc864b 0 3px,#704121 3px 8px,#f3e2c2 8px); border-bottom-color: #79502b; }
#app .hud__score output { font-size: clamp(1rem,5.1cqw,1.5rem); white-space: nowrap; }
#app .scanner { padding: 0 8px; border-inline-color: #98623a; grid-template-rows: minmax(0,1fr) 35px; background: repeating-linear-gradient(0deg,#c1b786 0 1px,#d4c894 1px 3px); }
#app .scanner__panel { background: #f3dfb4 var(--fusuma-art,url('../assets/scenes/approved-fusuma.webp')) right center / cover no-repeat; }
#app .scanner__window[data-phase="answer"] .scanner__guide { visibility: hidden; }
#app .scanner__prompt { font-size: .75rem; }
#app .answer { gap: 10px; padding: 12px; background: linear-gradient(90deg,#e9c9a080,transparent 15% 85%,#e9c9a080),#f8e6cc; border-top: 7px solid #966338; }
#app .answer__head { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
#app .answer-clock { margin: 0; min-height: 40px; padding: 6px 9px; border-radius: 14px; box-shadow: inset 0 1px 0 #fffdf5,0 2px 4px #71492330; }
#app .answer__timer { min-width: 58px; font-size: 1rem; }
#app .choices { grid-template-rows: repeat(2,clamp(52px,8dvh,76px)); gap: 9px; }
#app .choice { border-color: #9d7049; border-radius: 15px; background: linear-gradient(#fffaf0,#f9ecd9); box-shadow: inset 0 2px 0 #fff,0 3px 3px #77462930; }
#app .choice__name { font-size: clamp(.9rem,4.3cqw,1.4rem); }
#app .choice[data-state="correct"] { color: #284d1d; background: #e5f4d1; border: 2px solid #5c943f; }
#app .choice[data-state="wrong"] { color: #652c1c; background: #ffe5d8; border: 2px solid #b94e35; }
#app .choice[data-state="correct"]::before, #app .choice[data-state="wrong"]::before { top: 5px; right: 7px; font-size: 1.1rem; }
#app .game-status { margin: 0; min-height: 4.2em; font-size: .77rem; line-height: 1.4; }
#app .scanner__feedback, #app .scanner__feedback:has(img) { top: 36%; width: calc(100% - 32px); max-width: 24rem; min-height: 0; max-height: none; display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; padding: 12px; border: 2px solid #7e9d61; border-radius: 20px; background: #fff9eaf7; text-align: center; }
#app .scanner__feedback:has(img) { grid-template-columns: 40px minmax(0,1fr); }
#app .scanner__feedback:has(img) .round-feedback__heading { grid-column: 1 / -1; }
#app .scanner__feedback[hidden] { display: none; }
#app .scanner__feedback[data-tone="bad"] { border-color: #bf7450; }
#app .round-feedback__heading { display: flex; align-items: center; justify-content: center; gap: .3em; margin: 0; color: #237537; font-size: clamp(1.35rem,7.2cqw,2.1rem); line-height: 1.15; font-weight: 900; overflow-wrap: anywhere; }
#app [data-tone="bad"] .round-feedback__heading { color: #b64028; }
#app .round-feedback__mark { flex: none; font-size: 1.3em; line-height: 1; }
#app .round-feedback__label { display: block; text-align: center; font-size: clamp(.9rem,4cqw,1.2rem); line-height: 1.4; }
#app .round-feedback__icon { width: 40px; height: 40px; }
/* 正解・不正解はこの単一のボタンを共用し、文言で位置を変えない。 */
#app .next-round-button { top: 72%; bottom: auto; left: 50%; width: 36%; min-width: 110px; max-width: 190px; height: 52px; min-height: 52px; padding: 6px 10px; font-size: .9rem; line-height: 1.15; overflow-wrap: anywhere; background: linear-gradient(#ffe985,#ffd64a,#ffc941); transform: translate(-50%,-50%); }
#app .next-round-button:active { transform: translate(-50%,calc(-50% + 2px)); }
@media (orientation: portrait) {
  #app[data-screen="game"] { grid-template-rows: calc(112px + env(safe-area-inset-top)) minmax(588px,1fr); overflow-x: hidden; overflow-y: auto; }
}
@container (max-width: 420px) {
  html:is(:lang(en),:lang(fr),:lang(es),:lang(de),:lang(pt)) #app .home-options .difficulty-options:has([data-difficulty="oni"]) { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  html:is(:lang(en),:lang(fr),:lang(es),:lang(de),:lang(pt)) #app .home-options .difficulty-options:has([data-difficulty="oni"]) strong { font-size: .85rem; overflow-wrap: normal; }
  html:is(:lang(en),:lang(fr),:lang(es),:lang(de),:lang(pt)) #app .home-options .answer-style .tabs { width: 100%; }
  html:is(:lang(en),:lang(fr),:lang(es),:lang(de),:lang(pt)) #app .home-options .tabs button { font-size: .82rem; }
}
@media (orientation: landscape) {
  #app[data-screen="home"] { --home-height: max(740px,150cqw); }
  #app[data-screen="home"] .topbar { height: 90px; }
  #app[data-screen="home"] .masthead-home { top: 80px; left: 6%; width: 40%; height: 95px; }
  #app .home { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; min-height: 360px; padding: 0 5% 18px; gap: 10px 6%; }
  #app .home__intro { grid-column: 1; grid-row: 1 / 4; padding-top: 125px; }
  #app .home-art { top: -90px; min-height: 540px; height: 100%; }
  #app .home-art img { object-fit: cover; object-position: center 40%; }
  #app .home-start { grid-column: 2; grid-row: 1; margin-top: 0; align-self: end; }
  #app .home-options { grid-column: 2; grid-row: 2; align-self: start; }
  #app .home__setup { grid-column: 2; grid-row: 3; align-self: start; }
  #app .home__tagline { font-size: .9rem; }
  #app .home-options .answer-style .tabs { width: 100%; }
  #app .answer { grid-template-rows: auto minmax(0,1fr) auto; gap: 8px; }
  #app .choices { grid-template-rows: repeat(2,minmax(44px,1fr)); }
  #app .scanner__feedback, #app .scanner__feedback:has(img) { top: 32%; padding: 8px; gap: 6px; }
  #app .scanner__feedback:has(img) { grid-template-columns: 32px minmax(0,1fr); }
  #app .round-feedback__heading { font-size: 1.25rem; }
  #app .round-feedback__label { font-size: .85rem; }
  #app .round-feedback__icon { width: 32px; height: 32px; }
  #app .choice__name { font-size: clamp(.9rem,2.2cqw,1.25rem); }
}
@media (min-width: 960px) and (min-height: 561px) {
  #app { width: min(calc(100vw - 48px),58rem); }
  #app[data-screen="home"] .masthead-home { top: 110px; height: 145px; }
  #app .home__intro { padding-top: 220px; }
  #app .home { min-height: calc(100dvh - 145px); }
  #app .home-art { min-height: 100dvh; }
  #app .menu__item--mint { min-height: 70px; }
}
@media (max-height: 360px) and (orientation: landscape) {
  #app .scanner { min-height: 265px; }
  #app .answer { min-height: 265px; }
  #app[data-screen="game"] main, #app[data-screen="game"] .game { min-height: 265px; }
}

#app .home-options .difficulty-options button[data-difficulty] { background-image: linear-gradient(#fff9ed,#f2dfc1); }
#app .home-options .difficulty-options button[data-difficulty][aria-pressed="true"] { background-image: linear-gradient(#eef6d5,#d6eab7); }

/* 解放した難易度だけを並べる。空のロック枠を残さない。 */
#app .home-options .difficulty-options,
#app .home-options .difficulty-options:has([data-difficulty="oni"]) { grid-template-columns: repeat(var(--visible-difficulties,1),minmax(0,1fr)); }
@container (max-width: 420px) {
  html:is(:lang(en),:lang(fr),:lang(es),:lang(de),:lang(pt)) #app .home-options .difficulty-options[data-count="3"],
  html:is(:lang(en),:lang(fr),:lang(es),:lang(de),:lang(pt)) #app .home-options .difficulty-options[data-count="4"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
/* 画面切替で戻る操作の位置を動かさず、ノッチの内側へ置く。 */
#app { --back-top: calc(12px + env(safe-area-inset-top)); --back-left: calc(14px + env(safe-area-inset-left)); }
#app .topbar > .home-portal-menu,
#app .topbar > .game-back { grid-area: auto; position: absolute; top: var(--back-top); left: var(--back-left); margin: 0; width: 44px; height: 44px; }
/* 襖は常に半幅の同じ板。開閉は移動のみで、背景のcover倍率を変えない。 */
#app .scanner__panel { width: 50%; transition: transform .28s ease-out; will-change: transform; }
#app .scanner__panel--left { transform: translateX(calc(-1 * var(--panel-shift,var(--gap-w)))); }
#app .scanner__panel--right { transform: translateX(var(--panel-shift,var(--gap-w))) scaleX(-1); }
@media (prefers-reduced-motion: reduce) { #app .scanner__panel { transition: none; } }

#app .menu__item--mint:disabled { cursor: wait; filter: saturate(.7); }

#app .result-sharing { width: 100%; margin: 18px auto 0; }
#app .result-sharing[hidden] { display: none; }
#app .result-share-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#app .result-share-actions :is(button, a) { flex: 1 1 105px; min-width: 0; min-height: 44px; padding: 9px 12px; border: 1px solid #986d46; border-radius: 12px; background: #fff4de; color: #432719; font: inherit; font-size: .9rem; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; }
#app .result-sharing p { margin: 9px 0; color: #654730; font-size: .75rem; line-height: 1.5; }
#app #result-share-text { width: 100%; min-height: 8em; padding: 10px; border: 1px solid #ac855e; border-radius: 10px; background: #fff8ea; color: #3f291c; font: inherit; font-size: .85rem; user-select: text; -webkit-user-select: text; }

/* 承認された正誤札。和紙・葉・強調線は生成素材、見出しと答えは翻訳可能なDOM。 */
#app .scanner__feedback,
#app .scanner__feedback:has(img) {
  top: 37%; width: 84%; max-width: 32rem; min-height: 100px; max-height: none;
  aspect-ratio: 3.05; padding: 12px 10%; gap: 5px; border: 0; border-radius: 0;
  color: #3b1b0f; background-color: transparent;
  background-image: var(--feedback-correct-art,url('../assets/feedback/correct.webp'));
  background-repeat: no-repeat; background-position: center;
  background-size: 107.65% 138.02%; box-shadow: none; overflow: visible;
}
#app .scanner__feedback[data-tone="bad"] {
  background-image: var(--feedback-incorrect-art,url('../assets/feedback/incorrect.webp'));
  background-size: 104.05% 146.82%;
}
#app .round-feedback__heading { min-width: 0; gap: .13em; margin: 0; color: #25833b; font-size: clamp(1.65rem,10cqw,2.9rem); font-weight: 900; line-height: 1.03; }
#app .round-feedback__heading[data-compact="true"] { font-size: clamp(1.35rem,8.2cqw,2.35rem); }
#app .round-feedback__heading[data-long="true"] { font-size: clamp(1.2rem,7cqw,2rem); }
#app .scanner__feedback[data-tone="bad"] .round-feedback__heading { color: #c94027; }
#app .round-feedback__mark { display: block; flex: 0 0 1.14em; width: 1.14em; height: 1.14em; font-size: 1em; line-height: 1; }
#app .round-feedback__mark svg { display: block; width: 100%; height: 100%; }
#app .round-feedback__title { min-width: 0; overflow-wrap: anywhere; }
#app .round-feedback__label { min-width: 0; color: #3b1b0f; font-size: clamp(.88rem,4.4cqw,1.3rem); font-weight: 850; line-height: 1.25; }
#app .scanner__feedback:has(img) { grid-template-columns: 32px minmax(0,1fr); }
#app .round-feedback__icon { width: 32px; height: 32px; }
#app .next-round-button { font-size: clamp(1rem,4.8cqw,1.35rem); line-height: 1.12; border: 2px solid #efa03a; background: linear-gradient(#ffe98a,#ffd754 55%,#ffc239); box-shadow: inset 0 1px 2px #fffce6,0 0 0 1px #fff2bb,0 0 13px #efaa3b66,0 3px 0 #b37531; }
#app .choice[data-state="correct"], #app .choice[data-state="wrong"] { overflow: visible; }
#app .choice[data-state="correct"]::before, #app .choice[data-state="wrong"]::before { display: grid; place-items: center; z-index: 2; top: -4px; right: -4px; width: clamp(22px,6.5cqw,28px); height: clamp(22px,6.5cqw,28px); padding: 0; border: 1px solid #267c32; border-radius: 50%; color: white; background: linear-gradient(#67b655,#338d3c); box-shadow: 0 0 0 2px #fff7df; font-size: clamp(15px,4.6cqw,20px); font-weight: 900; line-height: 1; }
#app .choice[data-state="wrong"]::before { border-color: #ad3427; background: linear-gradient(#ef7855,#d33b29); }
@media (orientation: landscape) {
  #app .scanner__feedback, #app .scanner__feedback:has(img) { top: 31%; min-height: 88px; width: 86%; padding: 9px 10%; gap: 4px; }
  #app .round-feedback__heading { font-size: 1.7rem; }
  #app .round-feedback__heading[data-compact="true"] { font-size: 1.4rem; }
  #app .round-feedback__heading[data-long="true"] { font-size: 1.22rem; }
  #app .round-feedback__label { font-size: .88rem; }
  #app .next-round-button { top: 76%; font-size: .95rem; }
}

/* 長い訳は札の装飾を避けた中央へ収める。文字を極小にせず自然な2行を許可する。 */
#app .round-feedback__heading[data-compact="true"] { width: 72%; justify-self: center; margin-inline: auto; }
#app .round-feedback__heading[data-compact="true"] .round-feedback__title { text-wrap: balance; }
#app .scanner__feedback:has(.round-feedback__heading[data-compact="true"]) { aspect-ratio: auto; }

/* 短い翻訳語は一語のまま。Correct / ! などの分断を作らず19px以上を保つ。 */
#app .round-feedback__heading[data-compact="true"]:not([data-long="true"]) { font-size: clamp(19px,6cqw,27px); }
#app .round-feedback__heading[data-compact="true"]:not([data-long="true"]) .round-feedback__title { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
@media (orientation: landscape) {
  #app .round-feedback__heading[data-compact="true"]:not([data-long="true"]) { font-size: 1.2rem; }
}
/* 端末の「見えている高さ」に収める。44pxの操作を縮小したり、下端を隠して解決しない。 */
#app { height: 100dvh; max-height: 100dvh; min-height: 0; border: 0; border-radius: 0; overflow: auto; }
#app[data-screen="home"] { --home-height: 100dvh; }
#app[data-screen="home"] .topbar { position: absolute; inset: 0 0 auto; height: 0; padding: 0; }
#app[data-screen="home"] .settings-button { position: absolute; top: var(--back-top); right: calc(14px + env(safe-area-inset-right)); }
#app[data-screen="home"] .masthead-home { top: calc(env(safe-area-inset-top) + 60px); left: 15%; right: auto; width: 70%; height: clamp(66px,11dvh,104px); transform: none; }
#app[data-screen="home"] main { height: 100%; min-height: 0; }
#app .home { height: 100%; min-height: 0; padding: calc(env(safe-area-inset-top) + 62px) max(12px,4%) max(8px,env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto auto auto; gap: 6px; align-content: stretch; }
#app .home__intro { grid-area: 1 / 1; padding: 0; min-height: 0; }
#app .home-art { inset: 0; min-height: 0; height: 100%; }
#app .home-art img { object-fit: cover; object-position: center 60%; }
#app .home__tagline { position: absolute; top: calc(env(safe-area-inset-top) + clamp(134px,23dvh,170px)); left: 8%; width: 84%; margin: 0; font-size: clamp(.875rem,4cqw,1.1rem); line-height: 1.3; text-wrap: balance; text-shadow: 0 1px 3px #fff8e4,0 0 8px #fff8e4,0 0 12px #fff8e4; }
/* スタートは難易度札・回答方法と釣り合う幅に絞り、中央へ置く。 */
#app .home-start { grid-area: 2 / 1; width: min(66%, 17.5rem); min-width: min(100%, 12rem); justify-self: center; margin: 0; }
#app .menu__item--mint { min-height: 56px; height: 56px; padding: 5px 18px; gap: 8px; justify-content: center; border-radius: 999px; }
#app .menu__item--mint .menu__body strong { font-size: clamp(1.2rem,5.2cqw,1.7rem); line-height: 1.15; }
#app .menu__paw { width: 24px; height: 24px; flex: none; margin: 0; }
#app .home-options { grid-area: 3 / 1; margin: 0; gap: 5px; }
#app .home-options .difficulty-options,
#app .home-options .difficulty-options:has([data-difficulty="oni"]),
html:is(:lang(en),:lang(fr),:lang(es),:lang(de),:lang(pt)) #app .home-options .difficulty-options[data-count] { grid-template-columns: repeat(var(--visible-difficulties,1),minmax(0,1fr)); gap: 4px; padding: 3px; border-radius: 14px; }
/* 解放済みの札だけを並べる。1〜3枚でも1枚を全幅へ伸ばさず、4枚時と同じ札幅で中央に置く。 */
#app .home-options .difficulty-options { width: min(100%, max(8.5rem, calc(var(--visible-difficulties,4) * 25%))); margin-inline: auto; }
#app .home-options .difficulty-options button { min-height: 44px; height: 44px; padding: 3px 2px 12px; border-radius: 10px; }
#app .home-options .difficulty-options button::after { bottom: 3px; width: 6px; height: 6px; left: calc(50% - 3px); }
#app .home-options .difficulty-options strong,
#app .home-options .difficulty-options:has([data-difficulty="oni"]) strong,
html:is(:lang(en),:lang(fr),:lang(es),:lang(de),:lang(pt)) #app .home-options .difficulty-options strong { font-size: .8125rem; line-height: 1.15; overflow-wrap: normal; word-break: normal; }
#app .home-unlock-hint { margin: 3px 0 0; font-size: .75rem; line-height: 1.25; }
#app .home-options .answer-style .tabs,
html:is(:lang(en),:lang(fr),:lang(es),:lang(de),:lang(pt)) #app .home-options .answer-style .tabs { width: 100%; padding: 2px; }
#app .home-options .tabs button,
html:is(:lang(en),:lang(fr),:lang(es),:lang(de),:lang(pt)) #app .home-options .tabs button { min-height: 44px; padding: 4px; font-size: .8125rem; }
#app .home__setup { grid-area: 4 / 1; margin: 0; padding: 0; min-height: 0; }
#app .menu { gap: 6px; }
#app .menu__item--howto, #app .menu__item--highscore { min-height: 44px; padding: 4px 5px; gap: 4px; }
#app .menu__item--howto .menu__body strong, #app .menu__item--highscore .menu__body strong { font-size: .8125rem; line-height: 1.15; overflow-wrap: normal; }
#app .menu__item--howto .menu__icon, #app .menu__item--highscore .menu__icon { width: 19px; height: 19px; flex: none; }
#app .home__slogan { margin: 4px 0 0; font-size: .75rem; line-height: 1.3; }

/* ゲームはHUD、観察窓、回答の3段。回答の高さを固定して正誤で襖を動かさない。 */
#app[data-screen="game"] { height: 100dvh; max-height: 100dvh; display: grid; grid-template-rows: calc(100px + env(safe-area-inset-top)) minmax(0,1fr); padding: 0 0 env(safe-area-inset-bottom); overflow: auto; }
#app[data-screen="game"] .topbar { height: 100%; border-bottom-width: 5px; }
#app[data-screen="game"] .sound-game-toggle { grid-area: auto; position: absolute; top: var(--back-top); right: calc(14px + env(safe-area-inset-right)); }
#app[data-screen="game"] .masthead-home { top: calc(env(safe-area-inset-top) + 50px); left: 50%; right: auto; width: calc(52% - 20px); height: 44px; transform: translateX(-50%); }
#app[data-screen="game"] .hud { inset: calc(env(safe-area-inset-top) + 56px) 12px 3px; grid-template-columns: minmax(60px,24%) minmax(0,1fr) minmax(60px,24%); }
#app .hud__score, #app .hud__lives { padding: 2px 3px; }
#app .hud__score span, #app #lives-label { font-size: .625rem; }
#app .hud__score output { font-size: clamp(1rem,4.7cqw,1.4rem); }
#app .hud__count { top: -39px; left: 60px; right: 60px; }
#app[data-screen="game"] main, #app[data-screen="game"] .game { min-height: 0; height: 100%; }
#app[data-screen="game"] .game { grid-template-rows: 0 minmax(150px,1fr) auto; }
#app .scanner { min-height: 0; grid-template-rows: minmax(0,1fr) 22px; padding: 0 7px; }
#app .scanner__prompt { font-size: .75rem; }
#app .answer { min-height: 0; padding: 8px 10px; gap: 6px; border-top-width: 5px; grid-template-rows: 34px auto 2.7rem; }
#app .answer-clock { min-height: 34px; height: 34px; margin: 0; padding: 3px 7px; }
#app .answer-clock svg { height: 22px; width: 20px; }
#app .answer__timer { font-size: .9375rem; }
#app .choices { height: clamp(112px,16dvh,152px); grid-template-rows: repeat(2,minmax(52px,1fr)); gap: 8px; }
#app .choice { min-height: 44px; padding: 4px; }
#app .choice__name { font-size: clamp(.875rem,4cqw,1.2rem); line-height: 1.16; }
#app .choice .object-icon { height: 100%; width: calc(100% - 44px); max-height: 100%; max-width: 100%; object-fit: contain; }
#app .game-status { height: 3.6em; min-height: 0; margin: 0; font-size: .75rem; line-height: 1.2; }
#app .scanner__feedback, #app .scanner__feedback:has(img) { top: 36%; }
#app .next-round-button { top: auto; bottom: 10px; width: 56%; min-width: 160px; max-width: 220px; height: 44px; min-height: 44px; padding: 4px 8px; font-size: clamp(.875rem,4cqw,1rem); line-height: 1.2; transform: translateX(-50%); }
#app .next-round-button:active { transform: translate(-50%,2px); }

/* 設定は2項目と出典。通常表示はスクロール不要、拡大文字は安全にスクロール可。 */
#app dialog { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px); padding: 14px; }
#app .dialog__head, #app .howto-dialog__head { margin-bottom: 8px; }
#app .sound-setting { margin-top: 8px; padding-block: 8px; }
#app .sound-setting > div { flex: 1 1 auto; min-width: 0; }
#app .sound-toggle { flex: 0 0 auto; min-width: max-content; max-width: none; }
#app .sound-toggle > span:last-child { white-space: nowrap; }
#app .audio-credits { margin-top: 4px; font-size: .75rem; }
#app .audio-credits p { margin: 6px 0; line-height: 1.35; }

@media (orientation: landscape) {
  #app[data-screen="home"] .masthead-home { top: calc(env(safe-area-inset-top) + 64px); left: 7%; width: 35%; height: clamp(62px,24dvh,112px); }
  #app .home { padding: calc(env(safe-area-inset-top) + 62px) calc(env(safe-area-inset-right) + 14px) max(8px,env(safe-area-inset-bottom)) calc(env(safe-area-inset-left) + 14px); grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows: 50px auto auto; gap: 5px 5%; align-content: center; }
  #app .home__intro { grid-area: 1 / 1 / 4 / 2; align-self: stretch; }
  #app .home-art { right: 53%; height: 100%; }
  #app .home-art img { object-position: center 60%; }
  #app .home__tagline { top: calc(env(safe-area-inset-top) + clamp(137px,47dvh,188px)); left: 5%; width: 39%; font-size: .875rem; }
  #app .home-start { grid-area: 1 / 2; width: min(70%, 17.5rem); justify-self: center; }
  #app .home-options { grid-area: 2 / 2; }
  #app .home__setup { grid-area: 3 / 2; }
  #app .home-unlock-hint { font-size: .75rem; }
  #app .home__slogan { font-size: .75rem; }
  #app[data-screen="game"] { grid-template-rows: calc(84px + env(safe-area-inset-top)) minmax(0,1fr); }
  #app[data-screen="game"] .masthead-home { top: calc(env(safe-area-inset-top) + 36px); width: 30%; height: 44px; }
  #app[data-screen="game"] .hud { inset: calc(env(safe-area-inset-top) + 40px) 18% 3px; }
  #app .hud__count { top: -32px; left: 70px; right: 70px; }
  #app[data-screen="game"] .game { grid-template-columns: minmax(0,1.1fr) minmax(240px,1fr); grid-template-rows: minmax(0,1fr); }
  #app .scanner { grid-area: 1 / 1; min-height: 0; }
  #app .answer { grid-area: 1 / 2; grid-template-rows: 30px minmax(96px,1fr) 3em; padding: 5px 8px; gap: 5px; }
  #app .answer-clock { height: 30px; min-height: 30px; }
  #app .choices { height: 100%; min-height: 96px; grid-template-rows: repeat(2,minmax(44px,1fr)); gap: 7px; }
  #app .choice__name { font-size: clamp(.875rem,2cqw,1.2rem); }
  #app .game-status { height: 3em; font-size: .75rem; }
  #app .scanner__feedback, #app .scanner__feedback:has(img) { top: 33%; }
  #app .next-round-button { bottom: 8px; }
  #app #settings-dialog { width: min(calc(100% - 28px),40rem); }
  #app #settings-dialog[open] { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
  #app #settings-dialog .dialog__head, #app #settings-dialog .audio-credits { grid-column: 1 / -1; }
  #app #settings-dialog .sound-setting { margin: 0; border: 0; padding: 0; }
  #app #settings-dialog .audio-credits[open] { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  #app #settings-dialog .audio-credits summary { grid-column: 1 / -1; }
}

@media (orientation: landscape) and (max-height: 420px) {
  #app .home { grid-template-rows: 50px auto; }
  #app .home__intro { grid-area: 1 / 1 / 3 / 2; }
  /* 元絵の両取手からコーギーの足元までを等比で切り出す。細い縦帯にしない。 */
  #app .home-art { top: calc(env(safe-area-inset-top) + 90px); bottom: auto; right: auto; left: 23%; width: calc((100dvh - 180px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1.30606); max-width: 40%; height: auto; aspect-ratio: 862 / 660; transform: translateX(-50%); border-radius: 12px; background: #eddbb6; }
  #app .home-art img { position: absolute; top: 0; left: 50%; width: auto; height: 276.36364%; min-height: 0; max-width: none; object-fit: contain; transform: translate(-50%,-31.79825%); }
  #app[data-screen="home"] .masthead-home { top: calc(env(safe-area-inset-top) + 12px); left: 9%; width: 34%; height: 44px; }
  #app .home__tagline { top: calc(env(safe-area-inset-top) + 62px); }
  #app .home__setup { grid-area: auto; position: absolute; left: calc(env(safe-area-inset-left) + 14px); right: auto; top: auto; bottom: max(8px,env(safe-area-inset-bottom)); width: 40%; }
}

@media (orientation: portrait) and (max-height: 590px) {
  #app .scanner__feedback, #app .scanner__feedback:has(img) { min-height: 80px; padding-block: 8px; gap: 4px; }
  #app .round-feedback__heading { font-size: 1.5rem; }
  #app .round-feedback__heading[data-long="true"] { font-size: 19px; }
  #app .round-feedback__label { font-size: .875rem; line-height: 1.15; }
}

/* 極端な拡大や極小ウィンドウでも操作を切らず、例外的に自然なスクロールを許可する。 */
@media (orientation: portrait) and (max-height: 479px) {
  #app .home { min-height: 480px; }
  #app[data-screen="game"] .game { min-height: 370px; }
}

/* 日本語の複数文は文ごとに改行し（文言の\n）、対応ブラウザでは文節単位で折り返す。 */
#app .result-details p, #app .game-status, #app .scanner__feedback, #app .howto-dialog__rule, #app .asset-preload p { white-space: pre-line; }
html:lang(ja) #app :is(#asset-progress-label, .result-details p, .game-status, .howto-dialog__rule, .howto-steps li, .home__tagline, .home-unlock-hint, .answer-style__note, .result-scene__cheer, #result-subtitle) { word-break: auto-phrase; overflow-wrap: break-word; text-wrap: pretty; }

/* 秒読み: 3・2・1は縁取りした大きな数字を淡いクリームの丸印に、「ゴー！」はスタートと同じ黄色の札にする。
   JSが毎秒 data-count（3/2/1/go）を付け直し、そのたびに弾むように現れる。 */
#app .scanner__count {
  display: grid;
  place-items: center;
  width: clamp(6.5rem, 30cqw, 8.5rem);
  min-width: 0;
  max-width: none;
  height: clamp(6.5rem, 30cqw, 8.5rem);
  padding: 0;
  border: 3px solid #fff7e2;
  border-radius: 50%;
  outline: 2px dashed #d7a64a;
  outline-offset: -10px;
  background: radial-gradient(circle at 50% 40%, #fffaf0f2, #fbe9c6e8 70%);
  box-shadow: 0 0 0 2px #a8773f, 0 6px 18px #4a2c1440;
  color: #fff8e6;
  font-family: ui-rounded, system-ui, sans-serif;
  font-size: clamp(3.4rem, 17cqw, 4.6rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  -webkit-text-stroke: 7px #5a331a;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 #5a331a55;
  animation: sukimatch-count-pop 420ms cubic-bezier(.2, .9, .3, 1.35) both;
}
#app .scanner__count[data-count="go"] {
  width: auto;
  height: auto;
  min-height: 4.5rem;
  padding: .35rem 1.6rem .45rem;
  border: 3px solid #8f5426;
  border-radius: 999px;
  outline: 0;
  background: linear-gradient(#ffe67e, #ffd04e 60%, #ffc338);
  box-shadow: inset 0 3px 0 #fff6ba, 0 4px 0 #8f5426, 0 8px 18px #4a2c1440;
  color: #fffdf3;
  font-size: clamp(2.4rem, 12cqw, 3.2rem);
  white-space: nowrap;
  -webkit-text-stroke: 6px #6a3814;
  /* 「ゴー！」は280msだけ出るので、その間に弾み終える。 */
  animation-name: sukimatch-go-pop;
  animation-duration: 240ms;
}
@keyframes sukimatch-count-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(.94); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes sukimatch-go-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-6deg); }
  65% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(2deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  #app .scanner__count, #app .scanner__count[data-count="go"] { animation: none; }
}

/* 次へ/再挑戦は正誤札の直下（JSで測った位置）。測定前は札の下の既定位置。 */
#app .next-round-button, #app .next-round-button:active { top: var(--next-round-top, 62%); bottom: auto; }

/* 画像はホームを見ている間に裏で読み込む。開始を押した時点で未完了なら、生成イラストと進捗の読み込み画面で待つ。 */
#app .asset-preload { position: fixed; z-index: 30; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: calc(env(safe-area-inset-top) + 24px) calc(env(safe-area-inset-right) + 24px) calc(env(safe-area-inset-bottom) + 24px) calc(env(safe-area-inset-left) + 24px); color: #4a2c17; text-align: center; background: radial-gradient(circle at 50% 42%, #fffaf0 0, #fbefd8 48%, #efd9b4 100%); transition: opacity .35s ease, visibility 0s linear .35s; }
#app .asset-preload__art { width: min(62vw, 34dvh, 260px); height: auto; aspect-ratio: 480 / 457; animation: asset-preload-hop .9s ease-in-out infinite; }
#app .asset-preload__title { margin: 4px 0 0; font-size: clamp(1.35rem, 6vw, 1.8rem); font-weight: 900; letter-spacing: .04em; }
#app .asset-preload progress { width: min(72vw, 17rem); height: 10px; accent-color: #5f884c; }
#app .asset-preload p { margin: 0; }
#app #asset-progress-label { max-width: 20rem; font-size: .8125rem; line-height: 1.45; color: #6a4a30; }
#app .asset-preload .link-button { min-height: 44px; padding: 8px 18px; border: 1px solid #95714c; border-radius: 12px; background: #fff4de; color: #4a2c17; font-weight: 800; }
#app .asset-preload[data-state="error"] .asset-preload__art { animation: none; }
#app .asset-preload:is([data-state="ready"], [data-state="background"]) { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes asset-preload-hop { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { #app .asset-preload__art { animation: none; } }
@media (orientation: landscape) and (max-height: 500px) {
  #app .asset-preload { gap: 6px; }
  #app .asset-preload__art { width: min(40dvh, 200px); }
  #app .asset-preload__title { font-size: 1.25rem; }
}
/* きょうの10問・記録・確認・点数の表示・あそびかたの見本・改行（2026-10-09の見直し）。viewport.css のあと、結果画面より前に読む。 */

/* 文節の切れ目（<wbr>）でだけ改行する。日本語は phrase.tsx が切れ目を入れ、韓国語は空白でだけ改行する。 */
#app .phrase { word-break: keep-all; overflow-wrap: anywhere; }
#app .phrase .nobr { white-space: nowrap; }
html:lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; }
/* 4択の名前は単語の途中で切らず、長い単語だけハイフンで分ける（ドイツ語の長い複合語など）。 */
#app .choice__name { overflow-wrap: break-word; hyphens: auto; }

/* きょうの10問: スタートの右の余白に置くカレンダー形のボタン。日付の数字と言語ごとの短い札だけを載せる。 */
#app .home-start { position: relative; }
#app .daily-button {
  position: absolute;
  top: 50%;
  left: calc(100% + 4px);
  display: grid;
  grid-template-rows: 15px 1fr;
  width: 48px;
  height: 56px;
  padding: 0;
  overflow: visible;
  border: 2px solid #7b4a2a;
  border-radius: 10px;
  background: #fffaf0;
  color: #3d2414;
  box-shadow: 0 2px 0 #5a331a55;
  transform: translateY(-50%);
  cursor: pointer;
}
#app .daily-button:active { transform: translateY(calc(-50% + 2px)); box-shadow: none; }
#app .daily-button:disabled { opacity: .55; cursor: default; }
#app .daily-button__page { display: contents; }
#app .daily-button__ring {
  grid-row: 1;
  border-radius: 7px 7px 0 0;
  background: #d9483b;
}
#app .daily-button__day {
  grid-row: 2;
  align-self: center;
  justify-self: center;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
#app .daily-button__label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 15px;
  overflow: hidden;
  color: #fff;
  font-size: .5625rem;
  font-weight: 900;
  line-height: 15px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0;
}
#app .daily-button__done {
  position: absolute;
  right: -7px;
  bottom: -7px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid #fffaf0;
  border-radius: 50%;
  background: #2f8f4e;
}
#app .daily-button__done[hidden] { display: none; }
#app .daily-button__done svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (orientation: landscape) {
  #app .daily-button { left: calc(100% + 8px); }
}

/* 正解の点数を襖の上に大きく出す。動きをへらす設定では、ふわっと出さずにそのまま出す。 */
#app .score-pop {
  position: absolute;
  top: 2%;
  left: 50%;
  z-index: 6;
  margin: 0;
  padding: 4px 14px;
  border-radius: 999px;
  background: #fffaf0f2;
  color: #b4521c;
  font-size: clamp(1.25rem, 7cqw, 1.9rem);
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 2px 6px #5a331a40;
  transform: translateX(-50%);
  animation: score-pop .6s cubic-bezier(.2, 1.4, .4, 1) both;
  pointer-events: none;
}
#app .score-pop[hidden] { display: none; }
#app .score-pop[data-tier="fast"] { color: #c0302a; }
@keyframes score-pop {
  from { opacity: 0; transform: translate(-50%, 10px) scale(.8); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #app .score-pop { animation: none; }
}

/* プレイ中に戻るときの確認。 */
#app .quit-dialog { width: min(calc(100% - 32px), 22rem); padding: 18px; border: 2px solid #7b4a2a; border-radius: 16px; background: #fff8ec; color: #3d2414; text-align: center; }
#app .quit-dialog::backdrop { background: #2b1a0f80; }
#app .quit-dialog h2 { margin: 0 0 8px; font-size: 1.15rem; }
#app .quit-dialog p { margin: 0 0 14px; font-size: .875rem; line-height: 1.5; }
#app .quit-dialog__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#app .quit-dialog__actions .button { min-height: 44px; padding: 6px 8px; font-size: .9375rem; }

/* ハイスコア: きょうの10問の連続日数と、難易度×こたえかたの自己ベストの表。 */
#app .highscore-dialog h3 { margin: 10px 0 4px; color: #5a331a; font-size: .875rem; }
#app .highscore-dialog .daily-record p { margin: 2px 0; font-size: .9375rem; font-weight: 750; }
#app .best-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
#app .best-table :is(th, td) { padding: 6px 4px; border-bottom: 1px solid #e3cfae; text-align: right; font-variant-numeric: tabular-nums; }
#app .best-table thead :is(th, td) { color: #7a5a3b; font-size: .75rem; font-weight: 800; }
#app .best-table tbody th { text-align: left; font-weight: 800; }
#app .highscore-dialog .sites-best { margin: 8px 0 0; font-size: .8125rem; font-weight: 700; text-align: left; }
#app .highscore-dialog .sites-best[hidden] { display: none; }

/* あそびかたの見本: 襖のすきまを物が一瞬で横切る。 */
#app .howto-demo {
  position: relative;
  height: 84px;
  margin: 4px 0 12px;
  overflow: hidden;
  border: 2px solid #7b4a2a;
  border-radius: 10px;
  background: #fff6df;
}
#app .howto-demo__item {
  position: absolute;
  top: 10px;
  left: -70px;
  width: 64px;
  height: 64px;
  animation: howto-pass 2.4s linear infinite;
}
#app .howto-demo__item img { width: 100%; height: 100%; object-fit: contain; }
#app .howto-demo__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% - 14px);
  background: repeating-linear-gradient(90deg, #f6ead2 0 22px, #e9d6b3 22px 24px);
  box-shadow: inset 0 0 0 2px #b8875a;
}
#app .howto-demo__panel--left { left: 0; }
#app .howto-demo__panel--right { right: 0; }
@keyframes howto-pass {
  0%, 35% { left: -70px; }
  60%, 100% { left: calc(100% + 6px); }
}
@media (prefers-reduced-motion: reduce) {
  #app .howto-demo__item { left: calc(50% - 32px); animation: none; }
}
#app .howto-rules { display: grid; gap: 6px; margin: 0 0 12px; padding-left: 20px; color: #4d3420; font-size: .875rem; line-height: 1.5; }
#app .howto-steps { margin: 8px 0 10px; }
/* 結果の文字・数値・操作を画像の縦横比から独立させる。
   承認原画はそのまま再利用し、コーギーと襖の領域だけをCSSで配置する。
   通常サイズは一画面内、文字拡大時は縮小/切捨てせず外枠でスクロールする。 */
#app[data-screen="result"] {
  display: grid;
  grid-template-rows: calc(60px + env(safe-area-inset-top)) minmax(0, 1fr);
  height: 100dvh;
  min-height: 0;
  max-height: 100dvh;
  padding: 0;
  overflow: auto;
  color: #381c0d;
  background: #ead1a0;
}
#app[data-screen="result"] .topbar {
  position: relative;
  z-index: 3;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: linear-gradient(#bb8959 0 3px, #eddbb9 3px 100%);
}
#app[data-screen="result"] .masthead-home {
  top: calc(env(safe-area-inset-top) + 8px);
  left: 50%;
  right: auto;
  width: 124px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  transform: translateX(-50%);
}
#app[data-screen="result"] .masthead-art__fallback { font-size: 1.15rem; }
#app[data-screen="result"] .game-back { visibility: visible; }
#app[data-screen="result"] main {
  display: block;
  min-height: 0;
  padding: 0 max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
#app .result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(100%, 440px);
  height: 100%;
  min-height: 0;
  margin: auto;
  padding: 0;
  text-align: center;
}
#app .result-scene {
  --result-art: var(--result-over-art, url('../assets/results/corgi-over.webp'));
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "headline headline" "hero hero" "label label" "score score" "mode answer" "stats stats" "cheer cheer" "actions actions" "sharing sharing";
  grid-template-rows: auto minmax(80px, 1fr) auto auto auto auto auto minmax(44px, auto) minmax(44px, auto);
  gap: 4px 8px;
  flex: 1 0 auto;
  width: 100%;
  min-height: 0;
  margin: 0;
  container-type: inline-size;
  isolation: isolate;
  color: #381c0d;
  background: none;
}
#app .result-scene[data-outcome="clear"] { --result-art: var(--result-clear-art, url('../assets/results/corgi-clear.webp')); }
/* 原画の x=0..863 / y=395..970。犬の耳・足・尻尾をすべて含む。
   高さを上限に、原画の比率のまま背景を表示。UI全体のscaleは使わない。 */
#app .result-scene::before {
  content: "";
  grid-area: hero;
  place-self: center;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: calc(100cqw * 575 / 863);
  min-width: 0;
  min-height: 0;
  aspect-ratio: 863 / 575;
  border-radius: 14px;
  background-image: var(--result-art);
  background-size: 100% auto;
  background-position: center 31.650641%;
  background-repeat: no-repeat;
  box-shadow: 0 1px 4px #76533435;
  pointer-events: none;
}
#app .result-scene #result-mark { display: none; }
#app .result-scene__headline {
  grid-area: headline;
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid #c89c67;
  border-radius: 18px 16px 19px 15px;
  background: radial-gradient(ellipse at 50% 25%, #fff9e9, #fae9c9);
  box-shadow: 0 2px 0 #9d704744, inset 0 0 0 2px #fff7e5;
}
#app .result-scene h1,
#app .result-scene h1[data-long="true"],
#app .result-scene[data-outcome="failed"] h1,
#app .result-scene[data-outcome="failed"] h1[data-long="true"] {
  margin: 0;
  padding: 0;
  color: #b72f1b;
  font-size: clamp(1.3rem, 6.8cqw, 1.85rem);
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 0 #fff;
}
#app .result-scene[data-outcome="clear"] h1 { color: #247533; }
#app #result-subtitle {
  margin: 0;
  padding: 0;
  color: #50321b;
  font-size: .8125rem;
  font-weight: 750;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
#app .result-scene__score-label {
  grid-area: label;
  position: static;
  align-self: end;
  margin: 0;
  font-size: .875rem;
  font-weight: 850;
  line-height: 1.15;
}
#app .result__score {
  grid-area: score;
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding-block: 2px;
  color: #381c0d;
  line-height: 1;
}
#app .result__score strong {
  font-family: ui-rounded, system-ui, sans-serif;
  font-size: clamp(2.15rem, 10cqw, 2.8rem);
  font-weight: 950;
  line-height: 1.2;
  letter-spacing: -.035em;
  white-space: nowrap;
}
#app .result__score span { align-self: end; margin: 0; padding-bottom: 3px; font-size: .8125rem; font-weight: 850; }
#app .result__mode,
#app .result-scene__answer-mode {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 24px;
  margin: 0;
  padding: 3px 7px;
  border: 1px solid #b58c57;
  border-radius: 999px;
  box-shadow: none;
  font-size: .8125rem;
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
#app .result__mode { grid-area: mode; justify-self: end; width: min(100%, 130px); color: #fffdf3; border-color: #47713b; background: #3e7b36; }
#app .result-scene__answer-mode { grid-area: answer; justify-self: start; width: min(100%, 160px); color: #472515; background: #fff1d9; }
#app .result__stats {
  grid-area: stats;
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#app .result__stats > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  margin: 0;
  padding: 4px;
  border: 1px solid #d2ad7b;
  border-radius: 12px;
  background: #fff1d9;
}
#app .result__stats dt { margin: 0; color: #654329; font-size: .8125rem; font-weight: 750; line-height: 1.15; overflow-wrap: anywhere; }
#app .result__stats dd { margin: 0; font-size: 1.25rem; font-weight: 950; line-height: 1.1; white-space: nowrap; }
#app .result-scene__cheer {
  grid-area: cheer;
  position: static;
  margin: 0;
  color: #a13a23;
  font-size: .8125rem;
  font-weight: 850;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
#app .result-scene[data-outcome="clear"] .result-scene__cheer { color: #286c64; }
#app .result__actions {
  grid-area: actions;
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
}
#app .result__actions button {
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  height: 100%;
  margin: 0;
  padding: 6px 10px;
  border: 2px solid #9d631e;
  border-radius: 999px;
  background: linear-gradient(#ffe67e, #ffd04e 60%, #ffc338);
  box-shadow: inset 0 2px 0 #fff6ba, 0 2px 0 #8f542966;
  color: #321706;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
#app .result__actions button:active { transform: translateY(1px); background: #ffc43d; }
#app .result-sharing { grid-area: sharing; position: static; width: 100%; min-width: 0; margin: 0; padding: 0; }
#app .result-share-actions { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(44px, .65fr); gap: 6px; height: 100%; margin: 0; }
#app .result-share-actions :is(button, a) {
  min-width: 44px;
  min-height: 44px;
  height: 100%;
  margin: 0;
  padding: 4px 5px;
  border: 1px solid #9f734b;
  border-radius: 16px;
  background: #fff3df;
  box-shadow: 0 1px 0 #79512d33;
  color: #381e10;
  font-size: .8125rem;
  font-weight: 850;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
#app .result-share-actions :is(button, a):disabled { opacity: .6; }
#app .result-details {
  display: grid;
  flex: none;
  gap: 3px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 5px 7px;
  border: 1px solid #d1b184;
  border-radius: 10px;
  background: #fff4de;
}
#app .result-details p { margin: 0; padding: 0; color: #604328; font-size: .75rem; font-weight: 550; line-height: 1.2; overflow-wrap: anywhere; }
#app .result-details #result-progress { font-weight: 800; color: #3f622c; }
#app .result-details #result-share-status { font-weight: 800; }
#app .result-details p:empty { display: none; }
#app #result-share-fallback { min-width: 0; }
#app #result-share-text {
  display: block;
  width: 100%;
  height: 64px;
  min-height: 64px;
  margin: 0;
  padding: 5px;
  border: 1px solid #ac855e;
  border-radius: 7px;
  background: #fffaf0;
  color: #3f291c;
  font: inherit;
  font-size: .75rem;
  line-height: 1.2;
  resize: vertical;
  user-select: text;
  -webkit-user-select: text;
}
/* 短い縦画面は犬とスコアを左右に置く。図だけを小さくし、文字/操作は縮めない。 */
@media (max-height: 739px), (max-width: 359px) {
  #app .result-scene {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    grid-template-areas: "headline headline" "hero label" "hero score" "hero mode" "hero answer" "stats stats" "cheer cheer" "actions actions" "sharing sharing";
    grid-template-rows: auto auto minmax(36px, 1fr) auto auto auto auto minmax(44px, auto) minmax(44px, auto);
    gap: 3px 8px;
  }
  /* 原画 x=30..570 / y=410..970。顔だけでなく耳・足・尻尾も残す。 */
  #app .result-scene::before {
    max-height: calc((46cqw - 4px) * 560 / 540);
    aspect-ratio: 540 / 560;
    background-size: 159.814815% auto;
    background-position: 9.287926% 32.462391%;
  }
  #app .result-scene__headline { min-height: 48px; padding-block: 4px; }
  #app .result__mode, #app .result-scene__answer-mode { justify-self: center; width: min(100%, 170px); min-height: 22px; font-size: .75rem; }
  #app .result__score strong { font-size: clamp(1.9rem, 10cqw, 2.5rem); }
  #app .result__stats > div { padding-block: 3px; }
}
/* 共有APIが使えない場合も、選択可能な本文を一画面内に加える余地を作る。 */
#app .result:has(#result-share-fallback:not([hidden])) .result-scene {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  grid-template-areas: "headline headline" "hero label" "hero score" "hero mode" "hero answer" "stats stats" "cheer cheer" "actions actions" "sharing sharing";
  grid-template-rows: auto auto minmax(32px, 1fr) auto auto auto auto minmax(44px, auto) minmax(44px, auto);
  gap: 2px 8px;
}
#app .result:has(#result-share-fallback:not([hidden])) .result-scene::before {
  max-height: calc((46cqw - 4px) * 560 / 540);
  aspect-ratio: 540 / 560;
  background-size: 159.814815% auto;
  background-position: 9.287926% 32.462391%;
}
#app .result:has(#result-share-fallback:not([hidden])) .result-scene__headline { min-height: 44px; padding-block: 3px; }
#app .result:has(#result-share-fallback:not([hidden])) .result__mode,
#app .result:has(#result-share-fallback:not([hidden])) .result-scene__answer-mode { justify-self: center; width: min(100%, 170px); min-height: 20px; padding-block: 2px; font-size: .75rem; }
#app .result:has(#result-share-fallback:not([hidden])) .result__stats > div { padding-block: 2px; }
/* 横画面では同じDOMを広いグリッドへ流す。左が絵、右が成績と操作。
   display:contentsは意味/操作を持たないsceneだけに使う。 */
@media (orientation: landscape) and (min-width: 640px) {
  #app[data-screen="result"] { display: block; }
  #app[data-screen="result"] .topbar { position: absolute; inset: 0 auto auto 0; width: 30%; height: 60px; background: none; }
  #app[data-screen="result"] .masthead-home { left: calc(50% + 15px); width: 112px; }
  #app[data-screen="result"] main { height: 100%; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  #app .result {
    display: grid;
    grid-template-columns: minmax(180px, .85fr) minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "brand headline headline" "hero label stats" "hero score stats" "hero mode answer" "hero cheer cheer" "hero actions sharing" "hero details details";
    grid-template-rows: auto auto minmax(30px, 1fr) auto auto minmax(44px, auto) auto;
    gap: 3px 10px;
    width: 100%;
  }
  #app .result-scene,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene { display: contents; }
  #app .result-scene::before,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene::before {
    max-height: min(100%, calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 40px) * .275 * 560 / 540));
    aspect-ratio: 540 / 560;
    background-size: 159.814815% auto;
    background-position: 9.287926% 32.462391%;
  }
  #app .result-scene__headline,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene__headline { min-height: 44px; padding: 3px 10px; }
  #app .result-scene h1,
  #app .result-scene h1[data-long="true"],
  #app .result-scene[data-outcome="failed"] h1,
  #app .result-scene[data-outcome="failed"] h1[data-long="true"] { font-size: 1.5rem; }
  #app .result__score strong { font-size: 2rem; }
  #app .result__mode,
  #app .result-scene__answer-mode,
  #app .result:has(#result-share-fallback:not([hidden])) .result__mode,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene__answer-mode { justify-self: center; width: min(100%, 170px); min-height: 22px; padding-block: 2px; font-size: .75rem; }
  #app .result__stats { align-self: stretch; }
  #app .result__stats dt { font-size: .75rem; }
  #app .result__stats dd { font-size: 1.2rem; }
  #app .result__actions { gap: 6px; }
  #app .result__actions button { padding-inline: 5px; font-size: .875rem; }
  #app .result-share-actions { gap: 4px; }
  #app .result-share-actions :is(button, a) { padding-inline: 3px; font-size: .75rem; }
  #app .result-details { grid-area: details; padding: 4px 7px; }
  #app .result-details:has(#result-share-fallback:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "progress fallback" "notice fallback" "note fallback" "status fallback";
    align-items: center;
    column-gap: 8px;
  }
  #app .result-details:has(#result-share-fallback:not([hidden])) #result-progress { grid-area: progress; }
  #app .result-details:has(#result-share-fallback:not([hidden])) #result-notice { grid-area: notice; }
  #app .result-details:has(#result-share-fallback:not([hidden])) #result-share-note { grid-area: note; }
  #app .result-details:has(#result-share-fallback:not([hidden])) #result-share-status { grid-area: status; }
  #app .result-details:has(#result-share-fallback:not([hidden])) #result-share-fallback { grid-area: fallback; }
  #app .result-details:has(#result-share-fallback:not([hidden])) #result-share-text { height: 76px; min-height: 76px; }
}
/* 部屋の全面背景: ホームと同じく画面いっぱいの和室に、透過したコーギーと操作を重ねる。
   犬は背景に描き込まず別素材にし、画面の高さが変わっても札やボタンに隠れないようにする。 */
#app[data-screen="result"] {
  background: #e8d3a6 url('../assets/results/room.webp') center 30% / cover no-repeat;
}
#app[data-screen="result"] .topbar { background: linear-gradient(#bb8959 0 3px, transparent 3px); }
#app[data-screen="result"] .game-back { background: #fff8eaee; }
#app .result-scene::before,
#app .result:has(#result-share-fallback:not([hidden])) .result-scene::before {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
  background-image: var(--result-art);
  background-size: contain;
  background-position: center bottom;
  box-shadow: none;
  filter: drop-shadow(0 3px 4px #5a3a1f33);
}
/* 成績と操作の下敷き。DOMは増やさず、scene自身の疑似要素を該当する行へ置く。 */
#app .result-scene::after {
  content: "";
  grid-column: 1 / -1;
  grid-row: label-start / sharing-end;
  place-self: stretch;
  z-index: -1;
  margin: -8px -6px -6px;
  border: 1px solid #c79c66;
  border-radius: 20px;
  background: #fff6e4ec;
  box-shadow: 0 3px 10px #6b45222e;
  pointer-events: none;
}
#app .result-details { background: #fff6e4ec; box-shadow: 0 2px 8px #6b452224; }
#app .result-scene__headline { box-shadow: 0 2px 0 #9d704744, 0 4px 12px #6b452226, inset 0 0 0 2px #fff7e5; }

@media (orientation: portrait) {
  /* 下敷きの札が外へはみ出さないよう、札の余白分だけ内側に寄せる。 */
  #app .result { justify-content: flex-start; gap: 12px; padding-inline: 6px; padding-bottom: 6px; }
  #app .result-scene,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene {
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "headline headline" "hero hero" "label label" "score score" "mode answer" "stats stats" "cheer cheer" "actions actions" "sharing sharing";
    grid-template-rows: auto minmax(72px, 1fr) auto auto auto auto auto minmax(44px, auto) minmax(44px, auto);
    gap: 4px 8px;
  }
  /* 背の高い画面でも犬を襖いっぱいに拡大せず、畳の上に座る大きさで止める。 */
  #app .result-scene::before,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene::before { place-self: end center; height: min(100% - 10px, 230px); margin-bottom: 10px; }
  #app .result-scene__score-label { margin-top: 2px; align-self: end; }
  #app .result__mode, #app .result-scene__answer-mode,
  #app .result:has(#result-share-fallback:not([hidden])) .result__mode,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene__answer-mode { width: min(100%, 150px); min-height: 22px; font-size: .75rem; }
  #app .result__mode { justify-self: end; }
  #app .result-scene__answer-mode { justify-self: start; }
  #app .result__score strong { font-size: clamp(1.9rem, 10cqw, 2.6rem); }
  #app .result__stats > div { padding-block: 3px; }
}
@media (orientation: portrait) and (min-height: 740px) {
  #app .result-scene, #app .result:has(#result-share-fallback:not([hidden])) .result-scene { gap: 6px 8px; }
  #app .result__actions { margin-top: 4px; }
}

/* 横画面: 左に部屋とコーギー、右に札。成績と操作を上下の空き行で挟んで中央に置く。 */
@media (orientation: landscape) and (min-width: 640px) {
  #app[data-screen="result"] { background-position: center 62%; }
  #app .result {
    isolation: isolate;
    grid-template-areas: "brand headline headline" "hero . ." "hero label stats" "hero score stats" "hero mode answer" "hero cheer cheer" "hero actions sharing" "hero details details" "hero . .";
    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto minmax(44px, auto) auto minmax(0, 1fr);
    gap: 3px 10px;
  }
  #app .result-scene::before,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene::before { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; background-size: contain; background-position: center 70%; }
  #app .result { padding-right: 6px; }
  #app .result-scene::after { grid-column: 2 / 4; grid-row: label-start / sharing-end; place-self: stretch; margin: -6px -6px -4px; }
  #app[data-screen="result"] .masthead-home { filter: drop-shadow(0 0 6px #fff6e4) drop-shadow(0 0 2px #fff6e4); }
  #app .result-scene__headline { justify-self: stretch; width: auto; }
  #app .result-scene__score-label { align-self: end; }
}

/* クリア後に次の難易度がある場合だけ、もういちど/ホームへの上に全幅で出す主操作。 */
#app .result__actions .result-next { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(#ffe27a, #ffc93f 60%, #ffb92c); font-size: 1.0625rem; }
#app .result__actions .result-next svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#app .result__actions .result-next[hidden] { display: none; }
/* 2段になっても各ボタンが自分の行の高さを持つよう、%高さをやめて行の最小高さで揃える。 */
#app .result__actions:has(.result-next:not([hidden])) { grid-auto-rows: minmax(44px, auto); align-self: start; }
#app .result__actions:has(.result-next:not([hidden])) button { height: auto; }
/* 次へがある間は、もういちど/ホームへを控えめな副操作にする。 */
#app .result__actions:has(.result-next:not([hidden])) .button:not(.result-next) { background: #fff3df; border: 1px solid #9f734b; box-shadow: 0 1px 0 #79512d33; font-size: .875rem; }

/* 下の説明欄は出さない（解放の案内は「つぎへ」ボタン、自己ベストはホームのハイスコアで分かる）。
   共有の結果表示とコピー用の本文だけは、操作したときに出す。 */
#app .result-details { display: none; }
#app .result-details:has(#result-share-status:not(:empty), #result-share-fallback:not([hidden])) { display: grid; }
#app .result-details :is(#result-progress, #result-notice, #result-share-note) { display: none; }
/* 記録を保存できなかったときだけは知らせる。 */
#app .result-details:has(#result-notice[data-error]) { display: grid; }
#app .result-details #result-notice[data-error] { display: block; color: #a3321f; font-weight: 800; }
/* 操作の行は中身の高さを必ず確保し、余りは犬の行で吸収する。 */
@media (orientation: portrait) {
  #app .result-scene,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene {
    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto auto auto auto;
  }
}
@media (orientation: landscape) and (min-width: 640px) {
  #app .result { grid-template-rows: auto minmax(0, 1fr) auto auto auto auto auto auto minmax(0, 1fr); }
  /* 左の操作が2段のとき、共有ボタンは伸ばさず下段にそろえる。 */
  #app .result-sharing { align-self: end; }
  #app .result-share-actions { height: auto; }
  #app .result-share-actions :is(button, a) { height: 44px; }
}

/* 縦画面の結果札をコンパクトにする。部屋とコーギーを広く見せ、操作は44pxを保つ。 */
@media (orientation: portrait) {
  #app .result-scene__headline { min-height: 44px; padding: 4px 10px; }
  #app .result-scene h1,
  #app .result-scene h1[data-long="true"],
  #app .result-scene[data-outcome="failed"] h1,
  #app .result-scene[data-outcome="failed"] h1[data-long="true"] { font-size: clamp(1.2rem, 5.6cqw, 1.45rem); }
  #app #result-subtitle { font-size: .75rem; }
  #app .result-scene__score-label { font-size: .75rem; line-height: 1.35; }
  #app .result__score strong { font-size: clamp(1.55rem, 7.4cqw, 1.95rem); }
  #app .result__score span { font-size: .6875rem; padding-bottom: 2px; }
  #app .result__mode, #app .result-scene__answer-mode,
  #app .result:has(#result-share-fallback:not([hidden])) .result__mode,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene__answer-mode { width: min(100%, 120px); min-height: 20px; padding-block: 1px; font-size: .6875rem; }
  #app .result__stats { gap: 5px; }
  #app .result__stats > div { padding: 2px 4px; border-radius: 10px; }
  #app .result__stats dt { font-size: .6875rem; }
  #app .result__stats dd { font-size: 1.0625rem; }
  #app .result-scene__cheer { font-size: .75rem; }
  #app .result__actions { gap: 6px; }
  #app .result__actions button { font-size: .9375rem; padding-block: 4px; }
  #app .result-share-actions { gap: 5px; }
  #app .result-share-actions :is(button, a) { font-size: .75rem; }
  #app .result-scene::after { margin: -6px -4px -5px; border-radius: 18px; }
}

/* 共有は「シェア」（共有シート、無ければXの投稿画面）と「コピー」の2つ。 */
#app .result-share-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* 縦画面: 見出し札を大きくし、余った高さを「見出しの上」と「犬の行」に1:3で分けて、
   犬の上に大きな空きが偏らないようにする。犬も少し大きく（最大260px）する。 */
@media (orientation: portrait) {
  #app .result-scene,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene {
    grid-template-areas: "space space" "headline headline" "hero hero" "label label" "score score" "mode answer" "stats stats" "cheer cheer" "actions actions" "sharing sharing";
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 3fr) auto auto auto auto auto auto auto;
  }
  #app .result-scene::before,
  #app .result:has(#result-share-fallback:not([hidden])) .result-scene::before { height: min(100% - 10px, 260px); }
}
/* 見出し札を大きくするのは高さに余裕のある縦画面だけ（小さい画面はコピー欄が出ても収める）。 */
@media (orientation: portrait) and (min-height: 700px) {
  #app .result-scene__headline { min-height: 68px; padding: 8px 14px; gap: 4px; border-radius: 22px 20px 23px 19px; }
  #app .result-scene h1,
  #app .result-scene h1[data-long="true"],
  #app .result-scene[data-outcome="failed"] h1,
  #app .result-scene[data-outcome="failed"] h1[data-long="true"] { font-size: clamp(1.6rem, 8cqw, 2.15rem); }
  #app #result-subtitle { font-size: .875rem; }
}

/* 結果からほかのゲームへ。シェア・コピーと同じ行に並べ、結果画面の高さを変えない。 */
#app .result-share-actions:has(#result-portal:not([hidden])) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#app .result-portal { display: flex; align-items: center; justify-content: center; box-sizing: border-box; text-align: center; text-decoration: none; touch-action: manipulation; }
#app .result-portal[hidden] { display: none; }
#app .result-portal:focus-visible { outline: 3px solid #381e10; outline-offset: 2px; }