/* 箱影の怪盗。夜の美術館：地は暗い紺、光の当たるマスは暖かい黄、影はほぼ黒（光＞床＞影の三段）。
   色・文字・間隔・縁・角丸・影・動きは :root のトークン。:root の外に色と px を直書きしない。
   画面の型は <html data-layout> を見て並びを変える（メディアクエリで境目を二重に持たない。境目は lib/layout.js の1関数）。
   型ごとの高さ（--h-*・--pad・--gap など）は lib/layout.js の SIZES を JS が html に入れる。ここの値は JS が動く前の初期値（tall）。 */

:root {
  color-scheme: dark;

  /* 色 */
  --bg: #0e1320;
  --surface: #161d2e;
  --surface-2: #212b44;
  --surface-hover: #2a3654;
  --surface-press: #2c3a5c;
  --ink: #eef1f7;
  --ink-sub: #b9c2d6;
  --line: #6f7c9b;
  --focus: #7cc4ff;
  --primary: #eef1f7;
  --primary-ink: #0e1320;
  --primary-hover: #ffffff;
  --primary-press: #d9dee9;
  --white: #ffffff;
  --danger: #ff6b6b;
  --warn: #ffb347;
  --ok: #5fd39b;
  --scrim: rgb(0 0 0 / 0.6);
  /* 押せない見た目：不透明度でなく色で表す（不透明度は、焦点の輪まで薄くして、輪の濃さが基準の3を割る） */
  --disabled-ink: #737781;
  --disabled-bg: #171e30;
  --disabled-line: #3a4257;
  /* 盤 */
  --floor: #232b40;
  --grid: #2a3350;
  --wall: #3a4256;
  --wall-top: #6f7c9b;
  --shadow: #05070c;
  --light: #f3cf63;
  --lit-cell: #8b7d52;
  --laser: #ff4d6d;
  --laser-case: #2a0710;
  --box: #c98f55;
  --box-edge: #4a2f12;
  --box-tape: #e7c78f;
  --gold: #f6c945;
  --gold-edge: #7a5a0e;
  --guard: #6a93ee;
  --guard-rim: #e6eeff;
  --player: #0b0d13;
  --player-rim: #f2f5fb;
  --player-ring: #efe3ff; /* 自分の駒の外の細い輪。見張りの青・光の黄・レーザーの赤と被らない淡い紫 */
  --exit-closed: #5b6886;
  --badge: #e6eeff;
  --badge-ink: #0e1320;

  /* 文字（書体は外から取りに行かない） */
  --font: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  --fs-h1: 22px;
  --fs-h1-small: 18px;
  --fs-h1-wide: 28px;
  --fs-title: 17px;
  --fs-panel: 20px;
  --fs-body: 16px;
  --lh-tight: 1.2;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --fw-body: 400;
  --fw-strong: 700;
  --fw-heavy: 800;
  --fs-hint: 15px;
  --fs-num: 18px;
  --fs-small: 13px;

  /* 間隔・縁・角丸・影・重なり */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --hair: 1px;
  --border: 1.5px;
  --ring: 3px;
  --ring-offset: 2px;
  --accent-w: 6px;
  --radius-btn: 12px;
  --radius-panel: 16px;
  --radius-board: 12px;
  --radius-pill: 999px;
  --shadow-1: 0 8px 24px rgb(0 0 0 / 0.35);
  --shadow-2: 0 16px 48px rgb(0 0 0 / 0.5);
  --z-sticky: 10;
  --z-toast: 20;

  /* 不透明度 */
  --opacity-hatch: 0.35;
  --opacity-flash-low: 0.35;
  --opacity-veil: 0.6;

  /* 動き（動きを減らす設定では 0ms） */
  --dur-move: 150ms;
  --dur-fast: 120ms;
  --dur-mid: 300ms;
  --dur-flash: 1000ms;
  --dur-toast: 1600ms;
  --dur-toast-long: 3200ms; /* 長い一言（お手本の終わり）を数秒出す */
  --dur-out: 200ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* 大きさ（部品の最小。押せるものは44px以上） */
  --target: 44px;
  --row: 52px;
  --icon: 24px;
  --icon-lg: 28px;
  --star: 16px;
  --dialog-w: 480px;
  --dialog-max-h: 86vh;
  --dialog-vw: 92vw;
  --overlay-max-h: 60vh;
  --name-chars: 9;
  --max-wide: 1120px;
  --switch-w: 48px;
  --switch-knob: 20px;
  --wrap-min: 120px;
  --shake: 3px;
  --current-band: 4px;
  --scroll-fade: 20px;

  /* 画面の型ごとの大きさ。JS が lib/layout.js の SIZES から html に入れ直す（初期値は tall） */
  --h-band: 44px;
  --h-title: 48px;
  --h-levelbar: 52px;
  --h-hint: 48px;
  --h-status: 36px;
  --pad: 60px;
  --pad-gap: 8px;
  --gap: 8px;
  --gutter: 16px;
  --bottom: 12px;
  --cell: 56px;
}

@supports (height: 1dvh) {
  :root {
    --dialog-max-h: 86dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-move: 0ms;
    --dur-fast: 0ms;
    --dur-mid: 0ms;
    --dur-flash: 0ms;
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  word-break: keep-all; /* 語の途中では折らない。折ってよい所は、文の中の <wbr> */
}

/* 幅の狭い所で、折り返し候補のない長い並びがあふれないように、必要な所だけ。本文全体には掛けない */
.levelbar__now,
.level-row,
.hint,
.toast,
.panel__text,
.clear__row,
.howto li,
.howto__keys,
.switch__label,
.boardtext__lines,
.resultshare__said,
.lead,
.foot p,
.share__note,
.share__said {
  overflow-wrap: anywhere;
}

[hidden] {
  display: none !important;
}

/* 割ってはいけない語（lib/wrap.js の保護語）。ブラウザが自分で割る場合（「・」の後ろなど）にも折り返さない */
.nb {
  white-space: nowrap;
}

/* 最後の行が数文字だけにならないように。pretty は本文全体、balance は短い文（行の長さをそろえる）。効かない環境では何も起きない */
body {
  text-wrap: pretty;
}

.hint,
.toast,
.panel__text > span,
.howto li,
.howto__keys,
.keyhelp,
.boardtext__lines li,
.foot p,
.lead,
.share__note {
  text-wrap: balance;
}

button,
a {
  font: inherit;
  color: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

:focus-visible {
  outline: var(--ring) solid var(--focus);
  outline-offset: var(--ring-offset);
}

.sr-only {
  position: absolute;
  width: var(--hair);
  height: var(--hair);
  padding: 0;
  margin: calc(var(--hair) * -1);
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.noscript {
  margin: 0;
  padding: var(--space-3);
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-btn);
}

/* ---------------------------------------------------------------- 絵 */

.ic {
  display: block;
  flex: none;
  width: var(--icon);
  height: var(--icon);
}

.pad .ic {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.ic--right { transform: rotate(90deg); }
.ic--down { transform: rotate(180deg); }
.ic--left { transform: rotate(270deg); }

.stars {
  display: block;
  flex: none;
  width: calc(var(--star) * 3);
  height: var(--star);
}

.star--on { color: var(--gold); }
.star--off { color: var(--ink-sub); }

/* 音の絵：鳴る／消音 */
#btn-sound[data-muted="0"] .ic-off,
#btn-sound[data-muted="1"] .ic-on {
  display: none;
}

/* ---------------------------------------------------------------- ボタン（状態：通常・載せた・押している・フォーカス・無効） */

.btn,
.pad,
.switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--target);
  min-width: var(--target);
  padding: 0 var(--space-4);
  background: var(--surface-2);
  color: var(--ink);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-btn);
  font-size: var(--fs-body);
  font-weight: var(--fw-strong);
  line-height: var(--lh-tight);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.btn--quiet {
  background: transparent;
}

.btn--primary {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
}

@media (hover: hover) {
  .btn:hover,
  .pad:hover,
  .switch:hover { background: var(--surface-hover); }
  .btn--quiet:hover { background: var(--surface-2); }
  .btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
  .btn[aria-disabled="true"]:hover,
  .pad[aria-disabled="true"]:hover { background: var(--disabled-bg); }
  .btn--quiet[aria-disabled="true"]:hover { background: transparent; }
}

.btn:active,
.pad:active,
.switch:active { background: var(--surface-press); transform: translateY(var(--hair)); }
.btn--quiet:active { background: var(--surface-press); }
.btn--primary:active { background: var(--primary-press); border-color: var(--primary-press); transform: none; }

/* 押せない見た目。Tab は止まる（初回も面を切り替えたあとも同じ）。焦点の輪は、ほかのボタンと同じ色・同じ濃さで描く */
.btn[aria-disabled="true"],
.pad[aria-disabled="true"] {
  background: var(--disabled-bg);
  color: var(--disabled-ink);
  border-color: var(--disabled-line);
  cursor: not-allowed;
}

.btn--quiet[aria-disabled="true"] {
  background: transparent;
}

.btn[aria-disabled="true"]:active,
.pad[aria-disabled="true"]:active {
  background: var(--disabled-bg);
  transform: none;
}

.btn--quiet[aria-disabled="true"]:active {
  background: transparent;
}

/* ---------------------------------------------------------------- 帯・題字 */

.band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  min-height: var(--h-band);
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  background: var(--surface);
  border-bottom: var(--border) solid var(--line);
}

.band__home {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1); /* 「100 DAYS /」と「066」の間（flex の中では、行末の空白が消える） */
  min-height: var(--target);
  font-size: var(--fs-small);
  font-weight: var(--fw-strong);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.band .title {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

@media (hover: hover) {
  .band__home:hover { text-decoration: underline; }
}

.app {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap) max(var(--gutter), env(safe-area-inset-right)) var(--bottom) max(var(--gutter), env(safe-area-inset-left));
}

.titlebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--h-title);
}

.titlebar__text {
  /* 一行説明は折り返して、あそびかた・音を右に並べたまま。幅が足りないほど狭いときだけ、ボタンが次の行へ回る */
  flex: 1 1 var(--wrap-min);
  min-width: 0;
}

.title {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
}

.lead {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--ink-sub);
}

.tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

.tool {
  padding: 0 var(--space-3);
  font-size: var(--fs-small);
}

.tool--icon {
  padding: 0;
}

/* 帯の共有ボタンは枠を出さない（44pxの面が帯いっぱいで窮屈に見えるため）。絵と文字で、押せるものだと分かる */
.tool--share {
  margin-left: auto;
  border-color: transparent;
}

/* ---------------------------------------------------------------- 面の帯 */

.levelwrap {
  position: relative;
}

.levelbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
  min-height: var(--h-levelbar);
  container: levelbar / inline-size;
}

.levelbar__step {
  flex: none;
  width: var(--target);
  padding: 0;
}

.levelbar__now {
  flex: 1 1 var(--wrap-min);
  min-width: min(var(--wrap-min), 100%);
  min-height: var(--target);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  background: var(--surface-2);
  color: var(--ink);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-btn);
  line-height: var(--lh-snug);
  text-align: center;
  touch-action: manipulation;
  container-type: inline-size;
}

@media (hover: hover) {
  .levelbar__now:hover { background: var(--surface-hover); }
}
.levelbar__now:active { background: var(--surface-press); }

.levelbar__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-strong);
  color: var(--ink-sub);
}

.levelbar__name {
  max-width: 100%;
  /* 面の名前は9字まで。ボタンの幅に9字が収まる大きさまで縮める（上限は --fs-title、下限は --fs-small） */
  font-size: max(var(--fs-small), min(var(--fs-title), calc((100cqw - var(--space-1)) / var(--name-chars))));
  font-weight: var(--fw-strong);
  color: var(--ink);
}

.levelbar__hint {
  flex: none;
  padding: 0 var(--space-3);
  font-size: var(--fs-small);
}

/* 狭い列（幅700〜800の wide では、右の列が200px前後）：前・名前・次の3つが1行に収まらない（前44＋名前の9字ぶん128＋次44＋すき間16＝232）。
   そのまま折り返すと「次の面」が左下に落ちて崩れるので、名前を上の行に、前と次を下の行に半分ずつ並べる。しきい値はクエリの中に var() が使えないため数で書く */
@container levelbar (max-width: 240px) {
  .levelbar__now {
    order: -1;
    flex: 1 1 100%;
  }

  .levelbar__step {
    flex: 1 1 0;
    width: auto;
  }
}

.levelbar__hint[aria-expanded="true"] {
  background: var(--surface-2);
}

/* ヒントと一言（#hintline）：同じ場所に重ねる。一言は、ヒント（compact・tiny では状態の行）の上に出し、盤には重ねない */
.msgline {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  pointer-events: none; /* 状態の行と同じ場所に重なる（compact・tiny）ので、下の「とめる」を押せなくしない。押せるのは閉じるボタンだけ */
}

.hint {
  grid-area: 1 / 1;
  margin: 0;
  min-height: var(--h-hint);
  font-size: var(--fs-hint);
  line-height: var(--lh-body);
  color: var(--ink-sub);
}

/* ヒントを閉じる（compact・tiny）。押せる広さ44pxは、行の右端に重ねて取る（行の高さを増やさない） */
.hintline__close {
  pointer-events: auto;
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--target);
  height: var(--target);
  padding: 0;
  border-color: transparent;
  transform: translateY(-50%);
}

.hintline__close:active {
  transform: translateY(-50%);
}

/* ---------------------------------------------------------------- 盤 */

.boardwrap {
  position: relative;
  display: flex;
  justify-content: center;
}

.board {
  display: block;
  flex: none;
  max-width: 100%;
  height: auto;
  background: var(--floor);
  border-radius: var(--radius-board);
  overflow: hidden;
  touch-action: pan-y;
}

/* 一言：ヒントの行（compact・tiny では状態の行）に重ねて出す。盤・駒・出口・宝は隠さない。行の高さは増やさない（absolute で行いっぱいに広げる） */
.toast {
  position: absolute;
  inset: 0;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 var(--space-3);
  overflow: hidden;
  background: var(--surface-2);
  color: var(--ink);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-btn);
  font-size: var(--fs-hint);
  line-height: var(--lh-snug);
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.toast.is-on {
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.toast.is-off {
  transition: opacity var(--dur-out) var(--ease-out);
}

/* 盤を文で読む：画面読み上げ用。場所を取らない（盤と操作を最初の画面に収めるため）。キーボードで届いたときだけ、盤の上に重ねて見せる */
.boardtext:not(:focus-within) {
  position: absolute;
  width: var(--hair);
  height: var(--hair);
  margin: calc(var(--hair) * -1);
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.boardtext:focus-within {
  position: absolute;
  z-index: var(--z-toast);
  top: 0;
  left: 0;
  right: 0;
  max-height: var(--overlay-max-h);
  overflow: auto;
  padding: var(--space-3);
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-hint);
}

.boardtext summary {
  min-height: var(--target);
  display: flex;
  align-items: center;
  border-radius: var(--radius-btn); /* 焦点の輪を、ほかのボタンと同じ角丸にする */
  font-weight: var(--fw-strong);
}

.boardtext__lines {
  margin: 0;
  padding-left: var(--space-5);
  line-height: var(--lh-body);
}

/* 盤の中の図形（形と data 属性は lib/render.js。色はここ） */
.cell { fill: var(--floor); stroke: var(--grid); }
.shadow-cell { fill: var(--shadow); }
.flare-a { stop-color: var(--shadow); stop-opacity: 1; }
.flare-b { stop-color: var(--shadow); stop-opacity: 0; }
.lit-cell { fill: var(--lit-cell); }
.hatch-line { fill: var(--light); opacity: var(--opacity-hatch); }
.laser-case { stroke: var(--laser-case); stroke-linecap: butt; }
.laser-core { stroke: var(--laser); stroke-linecap: butt; }
.next-under { stroke: var(--shadow); fill: none; }
.next-frame,
.next-line { stroke: var(--light); fill: none; }
.next-head { fill: var(--light); stroke: var(--shadow); }
.path-under { stroke: var(--shadow); }
.path-line { stroke: var(--guard); }
.path-end { fill: var(--guard); stroke: var(--shadow); }
.wall { fill: var(--wall); stroke: var(--shadow); }
.wall-top { fill: var(--wall-top); }
.bolt { fill: var(--laser); stroke: var(--laser-case); }
.exit-door { fill: var(--exit-closed); stroke: var(--line); }
.exit-lock { fill: var(--bg); }
.exit-shackle { stroke: var(--bg); }
.exit-void { fill: var(--shadow); stroke: var(--ok); }
.exit-arrow { stroke: var(--ok); }
.gold-body { fill: var(--gold); stroke: var(--shadow); }
.gold-shine { stroke: var(--gold-edge); }
.box-face { fill: var(--box); stroke: var(--box-edge); }
.box-tape { fill: var(--box-tape); }
.guard-beam { fill: var(--light); stroke: var(--shadow); }
.guard-body { fill: var(--guard); stroke: var(--guard-rim); }
.guard-foot { fill: var(--guard); stroke: var(--guard-rim); }
.guard-lamp { fill: var(--light); stroke: var(--shadow); }
.guard-visor { fill: var(--guard-rim); }
.badge-disc { fill: var(--badge); stroke: var(--shadow); }
.badge-text { fill: var(--badge-ink); font-family: var(--font); font-weight: var(--fw-heavy); }
.player-cloak,
.player-head { fill: var(--player); stroke: var(--player-rim); }
.player-eyes { fill: var(--player-rim); }
.player-ring-under { stroke: var(--shadow); fill: none; }
.player-ring { stroke: var(--player-ring); fill: none; }
.player-loot { fill: var(--gold); stroke: var(--gold-edge); }
.player-loot-shine { stroke: var(--white); fill: none; }
.cb-outer,
.cm-outer { stroke: var(--danger); }
.cb-inner,
.cm-inner { stroke: var(--white); }
.cm-tag { fill: var(--danger); stroke: var(--white); }
.cm-bang { fill: var(--badge-ink); }
.dead-veil { fill: var(--shadow); opacity: var(--opacity-veil); }
.dead-ring { stroke: var(--warn); }
.dead-ring-inner { stroke: var(--white); }
.board-frame { stroke: var(--wall-top); }

/* 動かす部品：位置は transform（JS が入れる）。光・影・予告は動かさず、動きの終わりに描き直す */
.player,
.box,
.guard {
  transition: transform var(--dur-move) var(--ease-out), opacity var(--dur-move) var(--ease-out);
}

.guard-head {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur-move) var(--ease-in-out);
}

.guard-next,
.is-moving .guard-next {
  transition: opacity var(--dur-fast) var(--ease-out);
}

.is-moving .guard-next {
  opacity: 0;
}

.player.is-gone {
  opacity: 0;
}

.exit .door-closed,
.exit .door-open {
  transition: opacity var(--dur-mid) var(--ease-in-out);
}

.exit .door-open { opacity: 0; }
.exit[data-open="1"] .door-open { opacity: 1; }
.exit[data-open="1"] .door-closed { opacity: 0; }

.treasure[data-taken="1"]:not(.is-taking) { display: none; }

.treasure.is-taking .treasure-fx {
  transform-box: fill-box;
  transform-origin: center;
  animation: hk-sparkle var(--dur-mid) var(--ease-out) forwards;
}

/* 見つかった：原因の光が2回点滅（合計1000ms・1秒に3回を超えない）。原因の警備員・台を少し揺らす */
.caught-beam {
  animation: hk-flash calc(var(--dur-flash) / 2) linear 2;
}

.is-cause {
  animation: hk-shake var(--dur-fast) linear 3;
}

@keyframes hk-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: var(--opacity-flash-low); }
}

@keyframes hk-shake {
  0%, 100% { translate: 0 0; }
  25% { translate: var(--shake) 0; }
  75% { translate: calc(var(--shake) * -1) 0; }
}

@keyframes hk-sparkle {
  from { scale: 1; opacity: 1; }
  to { scale: 1.6; opacity: 0; }
}

@keyframes hk-in {
  from { opacity: 0; translate: 0 var(--space-2); }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .caught-beam,
  .is-cause,
  .treasure.is-taking .treasure-fx,
  .panel,
  .dialog[open] {
    animation: none;
  }
}

/* ---------------------------------------------------------------- 状態の行・操作・結果の欄（下の固定帯） */

.dock {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--h-status);
  font-size: var(--fs-hint);
}

.status.has-button {
  min-height: var(--target);
}

.status__main,
.status__demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  margin: 0;
}

.status__demo {
  flex: 1;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
}

.status__label {
  color: var(--ink-sub);
}

/* お手本の札：盤の外（状態の行）に出す。盤の上に重ねると、出口や宝のマスを隠す（面5で最後の1手が見えなかった） */
.status__demo #demo-progress {
  padding: 0 var(--space-3);
  background: var(--badge);
  color: var(--badge-ink);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-heavy);
}

.status__sep {
  color: var(--ink-sub);
  margin-left: calc(var(--space-2) * -1);
  margin-right: calc(var(--space-2) * -1);
}

.num {
  font-size: var(--fs-num);
  font-weight: var(--fw-strong);
  font-variant-numeric: tabular-nums;
}

.status__button {
  flex: none;
  padding: 0 var(--space-3);
  font-size: var(--fs-small);
}

.controls {
  display: grid;
  grid-template-columns: repeat(3, var(--pad));
  grid-auto-rows: var(--pad);
  gap: var(--pad-gap);
  justify-content: center;
}

.pad {
  width: var(--pad);
  height: var(--pad);
  padding: 0;
}

.pad--small { font-size: var(--fs-small); }
.pad--wait { font-size: var(--fs-hint); }

#btn-undo { grid-area: 1 / 1; }
#btn-up { grid-area: 1 / 2; }
#btn-restart { grid-area: 1 / 3; }

/* 「最初へ」は取り消せる大きな操作なので、「戻す」より一段弱く（地を透明にして縁だけにし、文字を補助色に）。押せない見た目のときは、押せない見た目が優先。
   縁の太さでは差を付けられない：Chromium は 1.5px の縁を 1px に丸める（画面の密度2・3でも、実測） */
#btn-restart:not([aria-disabled="true"]) {
  background: transparent;
  color: var(--ink-sub);
}
#btn-left { grid-area: 2 / 1; }
#btn-wait { grid-area: 2 / 2; }
#btn-right { grid-area: 2 / 3; }
#btn-down { grid-area: 3 / 2; }

/* お手本の間は、十字ボタンを全部無効にする */
#app[data-status="demo"] .pad {
  background: var(--disabled-bg);
  color: var(--disabled-ink);
  border-color: var(--disabled-line);
  cursor: not-allowed;
}

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-panel);
  border-left: var(--accent-w) solid var(--accent);
  box-shadow: var(--shadow-1);
  animation: hk-in var(--dur-fast) var(--ease-out);
}

.panel--caught { --accent: var(--danger); }
.panel--dead { --accent: var(--warn); }
.panel--clear { --accent: var(--ok); }

.panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--fs-panel);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
  color: var(--accent);
}

.panel__text {
  margin: 0;
  font-size: var(--fs-body);
}

.panel__text > span {
  display: block;
}

.panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.panel__actions .btn {
  flex: 1 1 auto;
}

/* 星・「星3つ」・手数は1行にまとめる（欄を短くする。320でも主ボタンが最初の画面に収まるように） */
.clear__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.clear__stars .stars {
  width: calc(var(--icon) * 3);
  height: var(--icon);
}

.clear__word,
.clear__steps {
  font-size: var(--fs-hint);
  font-weight: var(--fw-strong);
}

.clear__steps {
  color: var(--ink-sub);
}

.resultshare {
  container: resultshare / inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--hair) solid var(--line);
}

.resultshare__label {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-strong);
  color: var(--ink-sub);
}

/* 2列の揃った2段：3つのときは最後を横いっぱいに（2つと1つに折り返して右が空く形にしない）。広い欄では1行 */
.resultshare__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.resultshare__row > .btn {
  padding: 0 var(--space-1);
  text-align: center;
  overflow-wrap: anywhere;
}

.resultshare__row[data-count="3"] > :nth-child(3) {
  grid-column: 1 / -1;
}

/* しきい値はクエリの中に var() が使えないため数で書く。15rem＝240px 以下（幅768の面8の右の列は200px前後）は縦に1列：
   2列にすると「LINEで送る」が2行に割れて「送る」だけの行ができる。34rem＝544px 以上は、4つのボタンが1行に並ぶ */
@container resultshare (max-width: 15rem) {
  .resultshare__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .resultshare__row[data-count="3"] > :nth-child(3) {
    grid-column: auto;
  }
}

@container resultshare (min-width: 34rem) {
  .resultshare__row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .resultshare__row[data-count="3"] > :nth-child(3) {
    grid-column: auto;
  }
}

/* コピーの失敗の文だけが出る行。成功は、ボタンの文字を数秒だけ差し替えて知らせる */
.resultshare__said {
  margin: 0;
  font-size: var(--fs-hint);
  color: var(--ink-sub);
}

.keyhelp {
  display: none;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-sub);
}

.foot {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--hair) solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-sub);
}

.foot p {
  margin: 0 0 var(--space-2);
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
}

.foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--ink);
}

/* ---------------------------------------------------------------- 窓 */

.dialog {
  width: min(var(--dialog-vw), var(--dialog-w));
  max-height: var(--dialog-max-h);
  padding: var(--space-4);
  overflow: hidden;
  background: var(--surface);
  color: var(--ink);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-2);
}

/* 開いているときだけ縦に並べる（閉じているときは display: none のまま）。本文だけがスクロールし、「とじる」はいつも見える */
.dialog[open] {
  display: flex;
  flex-direction: column;
  animation: hk-fade var(--dur-fast) var(--ease-out);
}

.dialog::backdrop {
  background: var(--scrim);
}

/* 本文が窓の高さを超えるとき、続きがあると分かるように、上下の端を暗くぼかす（スクロールの影。端まで行くと消える。横向き・200%拡大で効く） */
.dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background:
    linear-gradient(var(--surface) 30%, transparent) top / 100% var(--scroll-fade) no-repeat local,
    linear-gradient(transparent, var(--surface) 70%) bottom / 100% var(--scroll-fade) no-repeat local,
    linear-gradient(var(--scrim), transparent) top / 100% var(--scroll-fade) no-repeat scroll,
    linear-gradient(transparent, var(--scrim)) bottom / 100% var(--scroll-fade) no-repeat scroll;
}

@keyframes hk-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 共通のシェア欄は最低幅と上の区切りを持つので、窓の中では窓の幅に収める */
.dialog .share {
  min-width: 0;
  max-width: 100%;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* 共有の窓：共通の部品（shared/）の見出しとボタンを、ほかの窓・成功の欄とそろえる（部品は直さず、窓の中だけで上書きする） */
#share-dialog .share__label {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-title);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  opacity: 1;
}

#share-dialog .share__button {
  padding: 0 var(--space-4);
  background: var(--surface-2);
  color: var(--ink);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-btn);
  font-size: var(--fs-body);
  font-weight: var(--fw-strong);
  line-height: var(--lh-tight);
}

#share-dialog .share__button--primary {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
}

#share-dialog .share__button:focus-visible {
  outline: var(--ring) solid var(--focus);
  outline-offset: var(--ring-offset);
}

@media (hover: hover) {
  #share-dialog .share__button:hover { background: var(--surface-hover); }
  #share-dialog .share__button--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
}

#share-dialog .share__said {
  min-height: 0;
}

.dialog__title {
  flex: none;
  margin: 0 0 var(--space-3);
  font-size: var(--fs-title);
  font-weight: var(--fw-heavy);
}

.dialog__actions {
  flex: none;
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
}

.howto {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
}

.howto__keys {
  margin: var(--space-3) 0;
  color: var(--ink-sub);
  font-size: var(--fs-hint);
}

.switch {
  width: 100%;
  padding: 0 var(--space-2);
  justify-content: flex-start;
  background: transparent;
  font-weight: var(--fw-body);
  text-align: left;
}

.switch__label {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-hint);
}

/* 幅320の窓でも、「（WASD・Z・R）を使う」を割らずに収める（15px・左右の余白を詰めて 173px 取る）。それ以下（200%拡大など）では、割ってよい */
@media (max-width: 17rem) {
  .switch__label .nb {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.switch__track {
  position: relative;
  flex: none;
  width: var(--switch-w);
  height: var(--icon-lg);
  background: var(--surface-2);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-pill);
}

.switch__knob {
  position: absolute;
  top: 50%;
  left: var(--space-1);
  width: var(--switch-knob);
  height: var(--switch-knob);
  background: var(--ink-sub);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: left var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.switch[aria-checked="true"] .switch__track {
  background: var(--ok);
  border-color: var(--ok);
}

.switch[aria-checked="true"] .switch__knob {
  left: calc(100% - var(--switch-knob) - var(--space-1));
  background: var(--bg);
}

.levellist {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.level-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--space-3);
  width: 100%;
  min-height: var(--row);
  padding: var(--space-1) var(--space-3);
  background: var(--surface);
  color: var(--ink);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-btn);
  text-align: left;
}

@media (hover: hover) {
  .level-row:hover { background: var(--surface-2); }
}
.level-row:active { background: var(--surface-press); }

.level-row[aria-current="true"] {
  border-left: var(--current-band) solid var(--light);
}

/* 名前は1行目いっぱいに（320で「面6／通り道をふさがない」と番号と名前が別の行に分かれていた）。記録と星は2行目 */
.level-row__name {
  grid-column: 1 / -1;
  grid-row: 1;
  font-size: var(--fs-body);
  font-weight: var(--fw-strong);
}

.level-row__record {
  grid-column: 1;
  grid-row: 2;
  font-size: var(--fs-small);
  color: var(--ink-sub);
}

.level-row .stars {
  grid-column: 2;
  grid-row: 2;
}

/* ---------------------------------------------------------------- 画面の型（<html data-layout>）。高さは JS が入れる */

/* tall・compact・tiny：縦に積む。操作は下に固定（文字の拡大で溢れても消えないように） */
html[data-layout="tall"] .dock,
html[data-layout="compact"] .dock,
html[data-layout="tiny"] .dock,
html:not([data-layout]) .dock {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  padding-top: var(--space-1);
  background: var(--bg);
  border-top: var(--hair) solid var(--line);
}

#app[data-status="escaped"] .dock,
html.is-dock-free .dock,
html.is-measuring .dock {
  position: static;
}

html[data-layout="tall"] .tool--howto .tool__text { display: inline; }
html[data-layout="tall"] .keyhelp { display: none; }

/* compact・tiny：ヒントは面の帯の切替で開き、状態の行（手数・最少・宝）と同じ場所に差し替えて出す。盤の外に出るので、駒・出口を隠さない。
   行の高さは、ヒント（右に閉じるボタンの幅を空けた2〜3行）で決まる。開いても閉じても同じなので、盤の大きさ・位置は変わらない */
html[data-layout="compact"] .status,
html[data-layout="tiny"] .status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

html[data-layout="compact"] .status > *,
html[data-layout="tiny"] .status > * {
  grid-row: 1;
}

html[data-layout="compact"] .status > .msgline,
html[data-layout="tiny"] .status > .msgline,
html[data-layout="compact"] .status > .status__main,
html[data-layout="tiny"] .status > .status__main {
  grid-column: 1;
}

html[data-layout="compact"] .status > .status__button,
html[data-layout="tiny"] .status > .status__button {
  grid-column: 2;
}

html[data-layout="compact"] .status > .status__demo,
html[data-layout="tiny"] .status > .status__demo {
  grid-column: 1 / -1;
}

html[data-layout="compact"] .hint,
html[data-layout="tiny"] .hint {
  min-height: 0;
  padding-right: var(--target);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--ink);
}

html[data-layout="compact"] .toast,
html[data-layout="tiny"] .toast {
  font-size: var(--fs-small);
}

html[data-layout="compact"] .msgline[data-open="0"] .hint,
html[data-layout="tiny"] .msgline[data-open="0"] .hint,
html[data-layout="compact"] .status[data-hint="1"] .status__main,
html[data-layout="tiny"] .status[data-hint="1"] .status__main {
  visibility: hidden;
}

html[data-layout="compact"] .title {
  font-size: var(--fs-h1-small);
}

html[data-layout="compact"] .lead,
html[data-layout="tiny"] .lead,
html[data-layout="short"] .lead {
  display: none;
}

html[data-layout="tiny"] .titlebar,
html[data-layout="short"] .titlebar {
  display: none;
}

/* tiny：ヒントの切替は絵だけにする（面の名前を1行で収めるため） */
html[data-layout="tiny"] .levelbar__hint {
  width: var(--target);
  padding: 0;
}

html[data-layout="tiny"] .levelbar__hint-text {
  display: none;
}

/* 帯の中に移ったボタン（tiny・short）。共有は絵だけ、あそびかたは tiny だけ絵だけ（short は幅に余裕がある）。右寄せは .tools の左の余白で行う */
html[data-layout="tiny"] .band .tool__text,
html[data-layout="short"] .band .tool--share .tool__text {
  display: none;
}

html[data-layout="tiny"] .band .tool,
html[data-layout="short"] .band .tool--share {
  padding: 0;
}

html[data-layout="tiny"] .band .tools,
html[data-layout="short"] .band .tools {
  margin-left: auto;
}

html[data-layout="tiny"] .tool--share,
html[data-layout="short"] .tool--share {
  margin-left: 0;
  border-color: var(--line);
}

/* tiny：題字（h1）を帯の左に見える形で出す（320では題字が無く、何のゲームか分からなかった）。「100 DAYS /」は読み上げにだけ残し、「066」を出す */
html[data-layout="tiny"] .band {
  gap: 0 var(--space-1);
}

html[data-layout="tiny"] .band__home {
  justify-content: center;
  min-width: var(--target);
}

html[data-layout="tiny"] .band__home-long {
  position: absolute;
  width: var(--hair);
  height: var(--hair);
  margin: calc(var(--hair) * -1);
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* short：左に盤、右に面の帯・ヒント・状態・操作 */
html[data-layout="short"] .app,
html[data-layout="wide"] .app {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  align-items: start;
  column-gap: var(--space-4);
}

html[data-layout="short"] .app > .boardwrap {
  grid-column: 1;
  grid-row: 1 / span 3;
}

html[data-layout="wide"] .app > .boardwrap {
  grid-column: 1;
  grid-row: 2 / span 3;
}

html[data-layout="wide"] .app > .titlebar {
  grid-column: 1 / -1;
  grid-row: 1;
}

html[data-layout="short"] .app > .levelwrap,
html[data-layout="short"] .app > .dock,
html[data-layout="short"] .app > .keyhelp,
html[data-layout="wide"] .app > .levelwrap,
html[data-layout="wide"] .app > .dock,
html[data-layout="wide"] .app > .keyhelp {
  grid-column: 2;
}

html[data-layout="short"] .app > .foot,
html[data-layout="wide"] .app > .foot {
  grid-column: 1 / -1;
}

html[data-layout="wide"] .controls {
  justify-content: start;
}

/* 横向き（short）：十字ボタンは右の欄の右寄せ（親指側） */
html[data-layout="short"] .controls {
  justify-content: end;
}

/* wide：最大幅を中央に。キーの説明を出す。
   盤の列は縮められる。右の列は、操作（十字ボタン3つとすき間）の幅より狭くしない。
   盤は 8列×64px＝512px まで大きくなるので、幅700〜800では右の列が押しつぶされ、操作が右へはみ出していた（盤は max-width: 100% で縮む） */
html[data-layout="wide"] .app {
  max-width: var(--max-wide);
  margin-inline: auto;
  column-gap: var(--space-5);
  grid-template-columns: minmax(0, max-content) minmax(calc(var(--pad) * 3 + var(--pad-gap) * 2), 1fr);
}

html[data-layout="wide"] .band {
  padding-left: max(var(--gutter), env(safe-area-inset-left));
}

html[data-layout="wide"] .title {
  font-size: var(--fs-h1-wide);
}

html[data-layout="wide"] .lead {
  font-size: var(--fs-hint);
}

html[data-layout="wide"] .keyhelp {
  display: block;
}