/* ホーム（夜の縁側）とゲーム画面の仕上げ。ui-refresh.css の後に読み込む。
   ホームは昼夜テーマに関係なく夜景の一枚絵を使う。 */
:root {
  --home-ink: #07080f;
  --home-text: #f4ecdd;
  --home-muted: #d9ccb4;
  --home-line: #efe2c666;
  --home-glass: #0d0d13b8;
  --home-gold: #e8c47a;
  --home-red: #b7342a;
  --home-red-deep: #7e1d16;
}

/* --- ホーム --- */
#app .mode-menu.home {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(1.5rem, 1fr) auto auto;
  grid-template-areas: "tools" "brand" "space" "actions" "best";
  align-content: stretch;
  justify-items: center;
  gap: 0;
  padding:
    calc(env(safe-area-inset-top) + .9rem)
    calc(env(safe-area-inset-right) + 1rem)
    calc(env(safe-area-inset-bottom) + 1.4rem)
    calc(env(safe-area-inset-left) + 1rem);
  color: var(--home-text);
  background-color: var(--home-ink);
  background-image:
    linear-gradient(180deg, #05060c33 0%, transparent 22%, transparent 48%, #05060c8c 74%, #05060cd9 100%),
    var(--ui-home-bg, url('../assets/ui/home-bg.webp'));
  background-size: cover, cover;
  background-position: center, center 30%;
  background-repeat: no-repeat;
  overflow-x: hidden;
}

.home__tools {
  grid-area: tools;
  justify-self: end;
  display: flex;
  gap: .6rem;
  position: relative;
  z-index: 1;
}

.home-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: var(--home-text);
  background: #0b0b10a8;
  border: 1px solid var(--home-line);
  border-radius: 50%;
  box-shadow: 0 2px 10px #0007;
  cursor: pointer;
}

.home-icon svg { width: 24px; height: 24px; fill: currentColor; }
.home-icon__stroke { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.home-icon__off { display: none; }
.home-icon[aria-pressed="false"] .home-icon__on { display: none; }
.home-icon[aria-pressed="false"] .home-icon__off { display: block; }

.home__catch {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 2.2rem);
  left: calc(env(safe-area-inset-left) + 1.6rem);
  display: grid;
  gap: .35rem;
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(1rem, 4.6vw, 1.3rem);
  font-weight: 600;
  letter-spacing: .32em;
  line-height: 1.2;
  text-align: left;
  text-shadow: 0 2px 8px #000c;
}

.home__catch span:last-child { padding-left: 1.4em; }
/* 横書きの言語は字間を詰め、右上の操作ボタンと重ねない。 */
:root:not(:lang(ja)):not(:lang(zh)) .home__catch { max-width: calc(100% - 9.5rem); font-size: clamp(.85rem, 3.8vw, 1.05rem); letter-spacing: .08em; }
:root:lang(en) .home__romaji { display: none; }

.home__brand {
  grid-area: brand;
  display: grid;
  justify-items: center;
  gap: 0;
  width: 100%;
  margin-top: clamp(1.8rem, 6dvh, 3.4rem);
}

#app .home .title-logo {
  width: min(84vw, 24rem);
  margin: 0;
  background: transparent;
  border: 0;
  filter: drop-shadow(0 4px 14px #000a);
}

/* 透明PNGの黒い筆文字を白へ反転し、赤い斬撃は色相を戻す。 */
#app .home .title-logo img { filter: invert(1) hue-rotate(180deg) saturate(1.25); }
#app .home .title-logo__fallback { color: var(--home-text); }

.home__romaji {
  margin: -.9rem 0 0;
  padding-left: .7em;
  font-family: var(--font-mincho);
  font-size: clamp(1rem, 4.4vw, 1.3rem);
  letter-spacing: .7em;
  text-shadow: 0 2px 8px #000c;
}

.home__tagline {
  position: absolute;
  top: 26%;
  right: calc(env(safe-area-inset-right) + .9rem);
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(.85rem, 3.8vw, 1.05rem);
  letter-spacing: .24em;
  line-height: 1;
  writing-mode: vertical-rl;
  text-shadow: 0 2px 8px #000;
}

.home__actions {
  grid-area: actions;
  display: grid;
  gap: .7rem;
  width: min(80vw, 22rem);
  position: relative;
  z-index: 1;
}

/* 筆で掃いた朱の帯。clip-pathは装飾の擬似要素だけに掛け、フォーカス枠を切らない。 */
.home-start {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) 1.6rem;
  align-items: center;
  width: 100%;
  min-height: 3.9rem;
  margin: 0 0 .25rem;
  padding: 0 1rem;
  color: #fff7ea;
  background: transparent;
  border: 0;
  font-family: var(--font-mincho);
  font-size: clamp(1.1rem, 5.2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-shadow: 0 1px 2px #5a120d;
  cursor: pointer;
}

.home-start::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -1.1rem;
  background:
    repeating-linear-gradient(178deg, #ffffff0d 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #cf4636 0%, var(--home-red) 48%, var(--home-red-deep) 100%);
  clip-path: polygon(
    3% 16%, 7% 4%, 14% 9%, 30% 2%, 52% 6%, 74% 1%, 90% 7%, 95% 3%, 99% 18%, 96% 32%, 100% 50%,
    96% 66%, 99% 84%, 93% 97%, 78% 93%, 56% 99%, 34% 94%, 15% 99%, 6% 94%, 1% 80%, 4% 62%, 0% 44%, 4% 30%
  );
  filter: drop-shadow(0 3px 6px #0009);
}

.home-start__label { grid-column: 2; }
.home-start__chevron { grid-column: 3; width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.home-menu {
  width: 100%;
  min-height: 3.2rem;
  padding: .4rem 1rem;
  color: var(--home-text);
  background: var(--home-glass);
  border: 1px solid var(--home-line);
  border-radius: .85rem;
  font-family: var(--font-mincho);
  font-size: clamp(.98rem, 4.4vw, 1.12rem);
  letter-spacing: .12em;
  box-shadow: inset 0 1px 0 #ffffff14, 0 4px 14px #0006;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  cursor: pointer;
}

.home-menu:active, .home-icon:active { background: #25222bcc; }
.home-start:active::before { filter: brightness(.9) drop-shadow(0 2px 4px #0009); }

.home-best {
  grid-area: best;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: .8rem;
  width: min(80vw, 22rem);
  margin-top: 1.1rem;
  padding: .75rem 1.3rem;
  background: var(--home-glass);
  border: 1px solid var(--home-line);
  border-radius: .85rem;
  box-shadow: inset 0 1px 0 #ffffff14, 0 4px 14px #0006;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.home-best__icon { width: 2rem; height: 2rem; fill: var(--home-gold); }
.home-best__body { display: grid; justify-items: start; gap: .1rem; margin: 0; }
.home-best__label { color: var(--home-muted); font-size: .9rem; letter-spacing: .12em; }
.home-best__value {
  color: var(--home-gold);
  font-family: var(--font-mincho);
  font-size: clamp(1.6rem, 7.4vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

#app .home .mode-menu__error { grid-row: auto; color: #ffb4a8; }
#app .home #boot-retry { grid-row: auto; }

#app .home button:focus-visible,
#app .sheet button:focus-visible,
#app .sheet select:focus-visible { outline: 3px solid var(--home-gold); outline-offset: 3px; }

@media (max-height: 700px) and (orientation: portrait) {
  #app .mode-menu.home { padding-bottom: calc(env(safe-area-inset-bottom) + .9rem); }
  .home__brand { margin-top: 1.4rem; }
  #app .home .title-logo { width: min(70vw, 19rem); }
  .home__actions { gap: .5rem; }
  .home-start { min-height: 3.4rem; }
  .home-menu { min-height: 2.9rem; }
  .home-best { margin-top: .7rem; padding: .55rem 1.1rem; }
  .home__tagline { display: none; }
}

@media (orientation: landscape) {
  #app .mode-menu.home {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto minmax(0, 1fr);
    grid-template-areas: "tools tools" "brand ." "brand actions" "brand best" "brand .";
    column-gap: 2rem;
    align-items: center;
    background-position: center, center 40%;
  }
  .home__brand { margin-top: 0; align-self: center; }
  #app .home .title-logo { width: min(40vw, 22rem); }
  .home__catch { top: calc(env(safe-area-inset-top) + 1rem); }
  .home__tagline { display: none; }
  .home-best { margin-top: .7rem; }
  .home-start::before { inset: 0 -.3rem; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .home__actions { gap: .45rem; }
  .home-start { min-height: 3.1rem; }
  .home-menu { min-height: 2.75rem; }
  .home-best { padding: .45rem 1rem; }
  .home-best__value { font-size: 1.5rem; }
}

@media (min-width: 960px) and (min-height: 561px) {
  #app .mode-menu.home {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(1.5rem, 1fr) auto auto;
    grid-template-areas: "tools" "brand" "space" "actions" "best";
    padding: 1.2rem 2rem 1.8rem;
    border: 0;
    border-radius: .75rem;
  }
  #app .mode-menu.home > * { grid-column: auto !important; grid-row: auto !important; }
  .home__tools { grid-area: tools !important; }
  .home__brand { grid-area: brand !important; }
  .home__actions { grid-area: actions !important; }
  .home-best { grid-area: best !important; }
  .home__tagline { display: block; }
}

/* --- ホームから開くシート --- */
#app .sheet {
  width: min(calc(100vw - 2rem), 26rem);
  max-height: min(85dvh, 44rem);
  padding: 0;
  color: var(--home-text);
  background:
    radial-gradient(ellipse at 50% 0%, #3a2c2033, transparent 70%),
    #131218f2;
  border: 1px solid var(--home-line);
  border-radius: 1rem;
  box-shadow: 0 18px 60px #000c;
  overflow: hidden;
}

#app #ranking-sheet { height: min(85dvh, 44rem); }

#app .sheet[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
#app .sheet::backdrop { background: #03040ab3; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

.sheet__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: .5rem;
  padding: .6rem .6rem .6rem 1.25rem;
  border-bottom: 1px solid #efe2c62e;
}

.sheet__title {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: 1.15rem;
  letter-spacing: .14em;
  text-align: left;
}

.sheet__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--home-text);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.sheet__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.sheet__body {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 1rem;
  padding: 1.1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  text-align: left;
}

#ranking-body { scrollbar-gutter: stable; }

.sheet__note { margin: 0; color: var(--home-muted); font-size: .88rem; line-height: 1.7; }
:root:lang(ja) #challenge-sheet .sheet__note { text-wrap: wrap; }

#app .sheet .difficulty-nav { display: block; width: 100%; }
#app .sheet .difficulty-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; overflow: visible; }
#app .sheet .difficulty-choice {
  min-width: 0;
  min-height: 3.2rem;
  color: var(--home-text);
  background: #ffffff0d;
  border: 1px solid var(--home-line);
  border-radius: .7rem;
  font-family: var(--font-mincho);
}
#app .sheet .difficulty-choice[data-state="selected"] {
  color: #fff7ea;
  background: #b7342a55;
  border-color: #e0685a;
  box-shadow: inset 0 0 0 1px #e0685a;
}
#app .sheet .difficulty-choice[data-state="locked"] { color: #d9ccb488; border-style: dashed; }
#app .sheet .difficulty-choice__name { font-size: 1rem; letter-spacing: .08em; overflow-wrap: anywhere; }
.home-start--sheet { margin: .2rem 0 0; }
.home-start--sheet::before { inset: 0 -.15rem; }
.sheet__title:focus { outline: none; }

/* 遊び方は既存の手引きを暗い面へ載せ替える。 */
#app .sheet .guide { width: auto; margin: 0; background: transparent; border: 0; border-radius: 0; }
#app .sheet .guide__body { gap: 1rem; }
#app .sheet .guide__mark { color: var(--home-muted); }
#app .sheet .guide__point dt { color: var(--home-gold); }
#app .sheet .guide__point dd { color: var(--home-text); }
#app .sheet .guide__point dt, #app .sheet .guide__point dd { font-size: .95rem; line-height: 1.6; }

.setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 3rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid #efe2c61f;
}
.setting:last-child { padding-bottom: 0; border-bottom: 0; }
.setting__label { font-size: 1rem; letter-spacing: .08em; }
.setting__select {
  min-width: 9rem;
  min-height: 44px;
  padding: 0 .8rem;
  color: var(--home-text);
  background: #ffffff10;
  border: 1px solid var(--home-line);
  border-radius: .6rem;
  font: inherit;
  font-size: 1rem;
}
.setting__select option { color: #111; }
.setting__switch {
  position: relative;
  width: 3.4rem;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.setting__switch::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.9rem;
  translate: 0 -50%;
  background: #ffffff1f;
  border: 1px solid var(--home-line);
  border-radius: 999px;
  transition: background-color .15s;
}
.setting__knob {
  position: absolute;
  top: 50%;
  left: .25rem;
  width: 1.45rem;
  height: 1.45rem;
  translate: 0 -50%;
  background: var(--home-text);
  border-radius: 50%;
  transition: left .15s;
}
.setting__switch[aria-checked="true"]::before { background: var(--home-red); border-color: #e0685a; }
.setting__switch[aria-checked="true"] .setting__knob { left: calc(100% - 1.7rem); }

/* --- ゲーム画面の仕上げ（座標に関わる寸法は変えない） --- */
/* 上部は見本の和紙。墨丸・墨帯は見本から起こした画像を和紙に乗算で重ね、文字だけを実描画する。
   明暗テーマに関係なく明るい和紙のままにする。 */
#app .hud {
  --room-text: #24211b;
  isolation: isolate;
  color: #24211b;
  background-color: #e9dfc6;
  background-image:
    radial-gradient(ellipse 70% 90% at 50% 0%, #f6eedb 0%, transparent 70%),
    radial-gradient(ellipse at 0% 100%, #b99a6426, transparent 55%),
    radial-gradient(ellipse at 100% 100%, #b99a6426, transparent 55%),
    repeating-linear-gradient(97deg, #7a5f3508 0 1px, transparent 1px 5px),
    repeating-linear-gradient(3deg, #7a5f3506 0 1px, transparent 1px 7px);
  box-shadow: inset 0 -1px 0 #6f5a3a55, 0 3px 8px #2a1d0f40;
}
#app .game-back {
  position: relative;
  width: 50px;
  height: 50px;
  padding: 0;
  font-size: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}
#app .game-back::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2px;
  background: var(--ui-ink-circle, url('../assets/ui/ink-circle.webp')) center / contain no-repeat;
  mix-blend-mode: multiply;
}
#app .game-back::after {
  content: "";
  width: 24px;
  height: 24px;
  margin: auto;
  background: #f4ecdd;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H5M11 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H5M11 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

#app .current-difficulty {
  justify-self: center;
  width: min(100%, 10.5rem);
  min-width: 0;
  padding: .55rem .6rem .6rem;
  color: #fbf5e8;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-mincho);
  font-size: clamp(1.1rem, 5.6vw, 1.4rem);
  letter-spacing: .3em;
  text-indent: .3em;
}
#app .current-difficulty__level,
#app .current-difficulty__mode { display: block; word-break: keep-all; overflow-wrap: break-word; }
#app .current-difficulty__mode {
  margin-top: .1rem;
  font-size: .62em;
  letter-spacing: .2em;
  text-indent: .2em;
  opacity: .9;
}
#app .current-difficulty::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -.25rem -.9rem;
  background: var(--ui-ink-banner, url('../assets/ui/ink-banner.webp')) center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
}
#app .lives__label { font-family: var(--font-mincho); font-size: .9rem; font-weight: 600; letter-spacing: .12em; }
#app .lives__pips { gap: .38rem; }
#app .lives__pip {
  width: 1.15rem;
  height: 1.15rem;
  background: radial-gradient(circle at 38% 35%, #d9473b, #a3221a 70%);
  border: 0;
  box-shadow: 0 1px 1px #5a0f0a55;
}
#app .meters { border-top: 1px solid #3b2d1c66; padding-top: .55rem; }
#app .meter + .meter { border-left: 1.5px solid #3b2d1c99; }
#app .meter__label { font-size: .9rem; font-weight: 600; letter-spacing: .14em; }
#app .meter__value { font-size: clamp(1.6rem, 8vw, 2.2rem); }
#app .meter--score .meter__value { font-size: clamp(1.45rem, 7.4vw, 2.05rem); }

#app .meter__label { font-family: var(--font-mincho); }
#app .meter__value { font-family: var(--font-mincho); font-weight: 600; }

/* 鴨居・敷居は木札の名札に見せる。 */
#app .surface__tag {
  padding: .1rem .55rem;
  color: #e9d6a6;
  background: #1c150fd9;
  border: 1px solid #6d52308c;
  border-radius: 2px;
  font-size: .8rem;
}

/* 畳の床と行灯の明かり。説明文は筆の朱線を添えた見出しにする。 */
#app .console {
  grid-template-rows: minmax(0, 1fr) 44px;
  background:
    radial-gradient(ellipse 22% 70% at 0% 100%, #ffc76a3d, transparent 70%),
    radial-gradient(ellipse 22% 70% at 100% 100%, #ffc76a3d, transparent 70%),
    repeating-linear-gradient(90deg, #6f5f2e14 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #2c2217 0 3px, #d9c99b 3px, #cbb983);
  box-shadow: inset 0 8px 14px #3a28124d;
}
#app .console__status:not(.sr-only) {
  position: relative;
  padding-bottom: .5rem;
  font-family: var(--font-mincho);
  font-size: clamp(.95rem, 4.4vw, 1.12rem);
  font-weight: 700;
  letter-spacing: .06em;
}
#app .console__status:not(.sr-only)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .05rem;
  width: min(70%, 15rem);
  height: .32rem;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, #b7342acc 12%, #9e2a20 55%, #b7342a99 88%, transparent);
  border-radius: 50%;
  clip-path: polygon(0 45%, 12% 10%, 40% 30%, 70% 0, 100% 50%, 82% 100%, 50% 75%, 20% 95%);
}
#app #action:disabled { font-family: var(--font-mincho); font-size: .92rem; letter-spacing: .08em; }

@media (prefers-color-scheme: dark) {
  #app .console {
    background:
      radial-gradient(ellipse 22% 70% at 0% 100%, #ffb54e33, transparent 70%),
      radial-gradient(ellipse 22% 70% at 100% 100%, #ffb54e33, transparent 70%),
      repeating-linear-gradient(90deg, #f3ddb50d 0 1px, transparent 1px 4px),
      linear-gradient(180deg, #120d08 0 3px, #3a3121 3px, #272015);
  }
}

/* --- チャレンジ・ランキングの中身（JSで生成） --- */
.challenge__meta { display: grid; gap: .1rem; margin: 0; }
.challenge__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid #efe2c61f;
}
.challenge__row dt { color: var(--home-muted); font-size: .9rem; letter-spacing: .08em; }
.challenge__row dd { margin: 0; font-family: var(--font-mincho); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.challenge__row:last-child dd { color: var(--home-gold); font-size: 1.35rem; font-weight: 600; }

.ranking-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .3rem;
  padding: .25rem;
  background: #ffffff0d;
  border: 1px solid #efe2c62e;
  border-radius: .8rem;
}
.ranking-tab {
  min-height: 44px;
  padding: .3rem .5rem;
  color: var(--home-muted);
  background: transparent;
  border: 0;
  border-radius: .6rem;
  font: inherit;
  font-size: .92rem;
  letter-spacing: .04em;
  cursor: pointer;
}
.ranking-tab[aria-selected="true"] { color: #fff7ea; background: #b7342a99; box-shadow: inset 0 0 0 1px #e0685a; }
.ranking-list { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.ranking-row {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .7rem;
  padding: .65rem .2rem;
  border-bottom: 1px solid #efe2c61f;
}
.ranking-row__rank { color: var(--home-gold); font-family: var(--font-mincho); font-size: 1.05rem; text-align: center; font-variant-numeric: tabular-nums; }
.ranking-row__name { font-size: .98rem; letter-spacing: .06em; overflow-wrap: anywhere; }
.ranking-row__score { font-family: var(--font-mincho); font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ranking-empty { margin: 0; padding: 1.2rem 0; color: var(--home-muted); text-align: center; }

/* ブラウザUIで縦が詰まると縦書きの一文がボタンに重なるため、余裕のある高さだけで出す。 */
@media (max-height: 880px) and (orientation: portrait) {
  .home__tagline { display: none; }
}

/* --- オンラインランキング（JSで生成） --- */
.ranking-filter { width: 100%; }
.ranking-panel { display: grid; gap: .6rem; min-height: 6rem; }
.ranking-row--me { background: #e8c47a14; box-shadow: inset 3px 0 0 var(--home-gold); border-radius: .3rem; }
.ranking-row--me .ranking-row__name { color: var(--home-gold); }
.ranking-mine {
  margin: 0;
  padding: .6rem .8rem;
  color: var(--home-text);
  background: #ffffff0a;
  border: 1px solid #efe2c62e;
  border-radius: .6rem;
  font-size: .92rem;
  text-align: center;
}
.ranking-account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .8rem;
  padding-top: .9rem;
  border-top: 1px solid #efe2c62e;
}
.ranking-account > p { flex: 1 1 100%; margin: 0; color: var(--home-muted); font-size: .9rem; line-height: 1.6; }
.ranking-account__name { flex: 1 1 auto; min-width: 0; font-family: var(--font-mincho); font-size: 1.05rem; overflow-wrap: anywhere; }
.ranking-login,
.ranking-change,
.ranking-save,
.ranking-logout {
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  padding: 0 1rem;
  color: var(--home-text);
  background: #ffffff10;
  border: 1px solid var(--home-line);
  border-radius: .7rem;
  font: inherit;
  font-size: .92rem;
  text-decoration: none;
  cursor: pointer;
}
.ranking-login { flex: 1 1 100%; color: #fff7ea; background: var(--home-red); border-color: #e0685a; font-weight: 700; }
.ranking-logout { color: var(--home-muted); background: transparent; border-color: transparent; text-decoration: underline; text-underline-offset: .2em; }
.ranking-name { display: flex; flex: 1 1 100%; gap: .5rem; }
.ranking-name[hidden] { display: none; }
.setting__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 .8rem;
  color: var(--home-text);
  background: #ffffff10;
  border: 1px solid var(--home-line);
  border-radius: .6rem;
  font: inherit;
  font-size: 1rem;
}
.ranking-save { flex: 0 0 auto; color: #fff7ea; background: var(--home-red); border-color: #e0685a; }
#app .sheet a:focus-visible, #app .sheet input:focus-visible { outline: 3px solid var(--home-gold); outline-offset: 3px; }

/* --- ゲーム画面: 見本に合わせ、墨絵を覆わず合わせ目を光らせる（座標・判定は変えない） --- */
#app .meter { text-align: center; }
#app .meter { grid-template-columns: minmax(0, 1fr); justify-items: center; }
#app .meter__label, #app .meter__value { justify-self: center; text-align: center; }

/* 開いた合わせ目は、難易度ごとの襖紙から独立した暖色で塗り分ける。 */
#app .rift__corridor { fill: url(#issen-opening); fill-opacity: 1; }
#app .rift__hazard, #app .rift__closed > rect { fill-opacity: .12; }
/* 開いた縁は襖の木枠（框）として太く描く。 */
#app .rift__edge { stroke: #2a1c10; stroke-width: 3.2; opacity: 1; filter: drop-shadow(0 0 1.5px #0009); }
#app .rift__axis {
  stroke: #ffd98a;
  stroke-width: 1.6;
  stroke-dasharray: none;
  opacity: 1;
  filter: drop-shadow(0 0 1.5px #fff6d8) drop-shadow(0 0 4px #ff9d2e) drop-shadow(0 0 9px #ff7a1acc);
}
.app[data-phase="active"]:not([data-drawing="true"]) .rift__axis { animation: issen-seam-glow 1.6s ease-in-out infinite alternate; }
@keyframes issen-seam-glow { from { opacity: .78; } to { opacity: 1; } }

/* 刃筋は白い筆の払い。 */
#app .rift__trail--halo { stroke: #ffffff; stroke-width: 12; opacity: .38; filter: blur(3.5px); }
#app .rift__trail--core { stroke: #ffffff; stroke-width: 4.2; filter: drop-shadow(0 0 3px #ffffffcc); }
#app .rift__head { fill: #ffffff; }

/* 鴨居・敷居の帯は濃い木目の梁にする。 */
#app .rift__band { fill: #1b130c; opacity: .72; }
#app .rift__gateline { stroke: #6b4a2a; stroke-width: 2; opacity: 1; }

/* 操作欄は行灯の明かりが差す畳の床。 */
#app .console {
  background:
    linear-gradient(180deg, #16100a 0 3px, transparent 3px),
    var(--ui-tatami-floor, url('../assets/ui/tatami-floor.webp')) center / cover no-repeat,
    linear-gradient(#d9c99b, #cbb983);
}
#app .console__status:not(.sr-only) { color: #211a12; text-shadow: 0 0 10px #f3e7c6, 0 0 2px #f3e7c6; }
#app #action:disabled { color: #3c3226; text-shadow: 0 0 8px #f3e7c6; }
@media (prefers-color-scheme: dark) {
  #app .console {
    background:
      linear-gradient(180deg, #0c0805 0 3px, transparent 3px),
      linear-gradient(#0000004d, #0000004d),
      var(--ui-tatami-floor, url('../assets/ui/tatami-floor.webp')) center / cover no-repeat,
      linear-gradient(#352e20, #241f17);
  }
  #app .console__status:not(.sr-only) { color: #fff4dc; text-shadow: 0 1px 6px #000c; }
  #app #action:disabled { color: #f0e2c4; text-shadow: 0 1px 6px #000c; }
}

/* 日本語の説明は文節で折り返し、助詞や記号だけが次行へ落ちないようにする。 */
#app .sheet, #app .console, #app .verdict {
  line-break: strict;
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 狭い画面でも「残心」の見出しを残し、赤丸を画面内に収める。 */
@media (max-width: 360px) {
  #app .lives__label { display: block; font-size: .8rem; }
  #app .lives__pips { gap: .25rem; }
  #app .lives__pip { width: .95rem; height: .95rem; }
  #app .hud__bar { grid-template-columns: 50px minmax(0, 1fr) auto; }
}

/* ランキングのタブは語の途中で折り返さない。狭い画面は文字を少し詰める。 */
.ranking-tab { white-space: nowrap; word-break: keep-all; font-size: clamp(.78rem, 3.9vw, .92rem); letter-spacing: 0; padding: .3rem .35rem; }

/* 結果: 次の難易度・再挑戦・共有を縦に並べる。 */
#app .verdict__actions { display: grid; gap: .6rem; width: min(15rem, calc(100vw - 5rem)); justify-self: center; }
#app .verdict__actions .btn { width: 100%; min-height: 46px; white-space: nowrap; font-family: var(--font-mincho); letter-spacing: .1em; }
#app .verdict__next { background: var(--room-red); color: #fff8e9; border: 1px solid #85261e; border-radius: 3px; box-shadow: 0 3px 0 #81291f; }
#app .verdict__next ~ #verdict-action:not([hidden]) { color: var(--room-text); background: transparent; border: 1px solid #6f5a3a88; box-shadow: none; }
#app .verdict__next[hidden] ~ #verdict-action { color: #fff8e9; background: var(--room-red); border: 1px solid #85261e; box-shadow: 0 3px 0 #81291f; }
#app .verdict__share { color: var(--room-text); background: #ffffff66; border: 1px solid #6f5a3a88; border-radius: 3px; }

/* 結果の絵は襖の左右を含む画面幅へ広げ、文字と操作はHTMLで重ねる。 */
#app[data-result] .verdict {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
  padding: 1rem;
  overflow-y: auto;
  touch-action: pan-y;
  color: #fff1cf;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#app[data-result="clear"] .verdict {
  background-image: linear-gradient(180deg, #100b0800 25%, #100b0866 50%, #100b08e8 76%), var(--ui-verdict-clear, url('../assets/ui/verdict-clear-v2.webp'));
}
#app[data-result="over"] .verdict {
  padding-bottom: clamp(1rem, 8dvh, 5rem);
  background-image: linear-gradient(180deg, #100b0800 25%, #100b0866 50%, #100b08e8 76%), var(--ui-verdict-over, url('../assets/ui/verdict-over.webp'));
}
#app[data-result] .verdict__title {
  color: #fff0c4;
  font-size: clamp(2rem, 9vw, 2.8rem);
  letter-spacing: .22em;
  text-indent: .22em;
  text-shadow: 0 0 18px #d79336, 0 2px 4px #000;
}
#app[data-result="over"] .verdict__title { color: #ffbea2; text-shadow: 0 0 14px #a53a26, 0 2px 4px #000; }
#app[data-result] .verdict__body { color: #f6e6c3; font-size: .9rem; text-shadow: 0 2px 4px #000; }
#app[data-result] .verdict__score { margin: .1rem 0 .6rem; color: #fff1c9; font-size: clamp(2.1rem, 9vw, 3rem); text-shadow: 0 2px 6px #000; }
#app[data-result] .verdict__unit { color: #f3dca7; }
#app[data-result] .verdict__actions { width: min(18rem, 100%); }
#app[data-result] .verdict__actions .btn { color: #fff5df; background: #130e0bd9; border-color: #d8b26a99; box-shadow: 0 3px 0 #080604; }
#app[data-result] #verdict-action { color: #fff5df; background: #a42e24; border-color: #d2684b; }
#app[data-result="clear"] .verdict__next ~ #verdict-action:not([hidden]) { color: #fff5df; background: #130e0bd9; border-color: #d8b26a99; }
#app[data-result="clear"] .verdict__next:not([hidden]),
#app[data-result="clear"] .verdict__next[hidden] ~ #verdict-action { background: #a42e24; border-color: #d2684b; }

@media (orientation: landscape) and (max-height: 560px) {
  #app[data-result] .verdict { justify-content: center; gap: .25rem; padding: .6rem; }
  #app[data-result] .verdict__title { font-size: 1.8rem; }
  #app[data-result] .verdict__score { margin: 0 0 .2rem; font-size: 2rem; }
  #app[data-result] .verdict__actions { gap: .3rem; }
}

/* 狭い画面の遊び方は図を上に置き、説明の幅を確保する。 */
@media (max-width: 380px) {
  #app .sheet .guide__body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  #app .sheet .guide__points { justify-self: stretch; }
}
/* 韓国語は語の途中で折り返さない。 */
:root:lang(ko) #app { word-break: keep-all; }
/* 横書き言語の操作欄の補足は字間を詰め、1行に収める。 */
:root:not(:lang(ja)) #app #action:disabled { letter-spacing: 0; font-size: .82rem; white-space: nowrap; }
:root:not(:lang(ja)) #app .current-difficulty { letter-spacing: .12em; text-indent: .12em; }
:root:not(:lang(ja)) #app .current-difficulty__mode { letter-spacing: .08em; text-indent: .08em; }
/* 結果表示中は襖の上のボタンだけにし、下の再挑戦を重複させない（高さは保つ）。 */
#app[data-result] .console > #action { visibility: hidden; }

/* 準備中は画像未取得でも和紙・墨色と文言を即時表示する。 */
#app .preparation {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1.8rem;
  padding: calc(env(safe-area-inset-top) + 2rem) calc(env(safe-area-inset-right) + 1.5rem) calc(env(safe-area-inset-bottom) + 2.5rem) calc(env(safe-area-inset-left) + 1.5rem);
  color: #fff1cf;
  background-color: #17110b;
  background-image: linear-gradient(180deg, transparent 35%, #100b0844 58%, #100b08bb), var(--preparation-art, radial-gradient(ellipse at 50% 20%, #78603a, #17110b 70%));
  background-size: cover;
  background-position: center;
  text-align: center;
  font-family: var(--font-mincho);
  overflow-y: auto;
}
#app .preparation[hidden] { display: none; }
.preparation__copy { display: grid; justify-items: center; gap: .8rem; }
.preparation__copy h2 { margin: 0; font-size: clamp(1.6rem, 7vw, 2.2rem); letter-spacing: .15em; }
.preparation__copy p { margin: 0; font-size: 1rem; line-height: 1.7; }
.preparation__seal { padding: .4rem; border: 1px solid #ba6154; color: #e99b83; font-size: .9rem; letter-spacing: .2em; }
.preparation__line { width: 6rem; height: 2px; background: #e8c47a; box-shadow: 0 0 12px #e8c47a88; animation: issen-preparation 1.4s ease-in-out infinite alternate; }
#app .preparation__back { min-width: 8rem; min-height: 48px; color: #fff1cf; background: #100b0888; border: 1px solid #e8c47a77; }
@keyframes issen-preparation { from { opacity: .3; transform: scaleX(.5); } to { opacity: 1; transform: scaleX(1); } }
@media (orientation: landscape) and (max-height: 500px) {
  #app .preparation { justify-content: center; gap: .8rem; padding-top: 1rem; padding-bottom: 1rem; }
  .preparation__copy { gap: .4rem; }
}
@media (prefers-reduced-motion: reduce) { .preparation__line { animation: none; } }

/* あそびば！: 矢印をタップして展開し、リンクからポータルへ戻る。夜景のホームに合わせて黒系。 */
.home-portal-menu { position: absolute; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); z-index: 5; width: 44px; height: 44px; color: #e8f7ff; }
.home-portal-menu:has([data-asobiba-link][hidden]) { display: none; }
.home-portal-menu > summary, .home-portal {
  box-sizing: border-box; min-height: 44px; border: 1px solid #6fd6ff66; border-radius: 999px;
  background: #040b16b8; color: #e8f7ff; box-shadow: 0 6px 16px #0006;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 800 13px/1 system-ui, sans-serif; letter-spacing: 0; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.home-portal-menu > summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; cursor: pointer; list-style: none; }
.home-portal-menu > summary::-webkit-details-marker { display: none; }
.home-portal-menu > summary::marker { content: ""; }
.home-portal-menu[open] > summary svg { transform: rotate(180deg); }
.home-portal { position: absolute; top: 0; left: 50px; display: flex; align-items: center; gap: 4px; width: max-content; max-width: calc(100vw - 80px); padding: 0 14px 0 10px; white-space: nowrap; }
.home-portal-menu:not([open]) > .home-portal, .home-portal[hidden] { display: none; }
.home-portal-menu svg { flex: none; }
.home-portal-menu > summary:focus-visible, .home-portal:focus-visible { outline: 3px solid #e8f7ff; outline-offset: 2px; }
/* メニューがあるときは、キャッチコピーを矢印ボタンの右へずらす。 */
.home:has(.home-portal-menu [data-asobiba-link]:not([hidden])) .home__catch { left: calc(max(10px, env(safe-area-inset-left)) + 58px); }
:root:not(:lang(ja)):not(:lang(zh)) .home:has(.home-portal-menu [data-asobiba-link]:not([hidden])) .home__catch { font-size: clamp(.75rem, 3.3vw, 1rem); }