/* トークテーマカード
   色・ボタン・ふきだし・たぎっくまは shared/css にある。ここはこのツールだけの見た目 */

html,
body {
  height: 100%;
}

/* ---------- 全体：上から「見出し」「緑の台」「案内と操作」 ---------- */

.app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(8px, 1.6vh, 14px);
  height: 100dvh;
  min-height: 440px;
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(8px, 1.6vh, 14px) max(clamp(12px, 2.4vw, 32px), env(safe-area-inset-right))
    max(clamp(10px, 2vh, 18px), env(safe-area-inset-bottom)) max(clamp(12px, 2.4vw, 32px), env(safe-area-inset-left));
}

/* ---------- 見出し ---------- */

.bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.brand__kuma {
  flex: none;
  width: clamp(38px, 3.8vw, 50px);
}

.bar__howto {
  justify-self: end;
}

.steps {
  display: flex;
  align-items: center;
  gap: 4px;
}

.steps__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 14px 3px 4px;
  border: 2px solid transparent;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
  white-space: nowrap;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}

.steps__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cream-deep);
  color: var(--ink-soft);
  font-size: 14px;
  padding-bottom: calc(var(--num-lift) * 2);
}

/* ステップのあいだの「›」 */
.steps__item + .steps__item::before {
  content: "";
  width: 7px;
  height: 7px;
  margin: 0 8px 0 -6px;
  border-top: 2.5px solid var(--tile-border);
  border-right: 2.5px solid var(--tile-border);
  transform: rotate(45deg);
}

.steps__item + .steps__item {
  padding-left: 0;
}

.steps__item[aria-current="step"] {
  color: var(--ink);
}

.steps__item[aria-current="step"] .steps__num {
  background: var(--line);
  color: var(--cream);
}

.steps__item.is-done .steps__num {
  background: var(--green-deep);
  color: #fff;
}

/* ---------- 緑の台 ---------- */

.table {
  position: relative;
  min-height: 0;
  margin-bottom: 5px;
  border: 3px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--green);
  box-shadow: inset 0 -10px 0 var(--green-deep), 0 5px 0 var(--line);
}

.table::before {
  content: "";
  position: absolute;
  inset: 10px 10px 20px;
  border: 2px dashed rgba(255, 255, 255, 0.34);
  border-radius: 18px;
  pointer-events: none;
}

/* カードの位置と大きさの基準。--W などは app.js が台の大きさから決める */
.stage {
  --stagger: 80ms;
  --t-lift: 150ms;
  --t-away: 240ms;
  position: absolute;
  inset: 22px 22px 32px;
}

:root[data-motion="reduce"] .stage {
  --stagger: 0ms;
  --t-lift: 0ms;
  --t-away: 160ms;
}

/* ---------- 山札 ---------- */

.deck {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(var(--hw) * 0.36);
  height: calc(var(--hh) * 0.36);
  transition: opacity 200ms ease;
}

.deck i {
  position: absolute;
  inset: 0;
  border: 2px solid var(--line);
  border-radius: 7px;
  background: var(--coral);
}

.deck i:nth-child(1) {
  transform: translateY(6px);
}

.deck i:nth-child(2) {
  transform: translateY(3px);
}

/* ---------- お題のしゅるい ----------
   ボタンは全部いつも見えるようにする（横スクロールにしない）。入りきらないときは折り返す。
   右上の山札のところだけ、見えない「場所とり」を右に浮かせて、ボタンがよけて並ぶようにする */

.kinds {
  --deck-space-w: calc(var(--hw) * 0.36 + 126px); /* 山札と、その左の枚数 */
  --deck-space-h: calc(var(--hh) * 0.36 + 4px);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  font-size: 0; /* ボタンのあいだに、文字のすき間が入らないようにする */
  pointer-events: none;
  transition: opacity 200ms ease, visibility 200ms;
}

.kinds::before {
  content: "";
  float: right;
  width: var(--deck-space-w);
  height: var(--deck-space-h);
}

/* めくっているあいだ・おしゃべり中は、ひっこめる */
.stage[data-state="revealing"] .kinds,
.stage[data-state="revealed"] .kinds {
  visibility: hidden;
  opacity: 0;
}

.kinds__label {
  display: inline-block;
  margin: 8px 6px 14px 0;
  vertical-align: top;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--line);
  color: var(--cream);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.6;
  white-space: nowrap;
}

/* えらんでいないしゅるいは、台になじませる。えらぶと、白く浮き上がる */
.kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  margin: 0 6px 6px 0;
  vertical-align: top;
  pointer-events: auto;
  padding: 3px 14px 3px 10px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--green-deep);
  color: var(--cream);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease, background-color var(--t-fast) ease;
}

.kind__dot {
  width: 11px;
  height: 11px;
  border: 2px solid var(--cream);
  border-radius: 50%;
}

.kind[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--line);
  transform: translateY(-3px);
}

.kind[aria-pressed="true"] .kind__dot {
  border-color: var(--line);
  background: var(--cat, var(--line));
}

.kind:active {
  box-shadow: none;
  transform: none;
}

.kind:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 2px;
}

@media (hover: hover) {
  .kind[aria-pressed="false"]:hover {
    background: var(--green-shade);
  }
}

.kind[data-kind="suki"] {
  --cat: var(--coral);
}

.kind[data-kind="saikin"] {
  --cat: var(--sun);
}

.kind[data-kind="moshimo"] {
  --cat: var(--lilac);
}

.kind[data-kind="jibun"] {
  --cat: var(--sky);
}

.kind[data-kind="yaritai"] {
  --cat: var(--green);
}

/* 縦長の画面では、枚数を山札の下のふちに小さく重ねるので、場所とりも小さくてすむ */
.stage[data-shape="tall"] .kinds {
  --deck-space-w: calc(var(--hw) * 0.36 + 18px);
  --deck-space-h: calc(var(--hh) * 0.36 + 28px);
}

.stage[data-shape="tall"] .kinds__label {
  display: none;
}

/* せまい画面では、ボタンを少し小さくして、3段までにおさめる */
@media (max-width: 480px) {
  .kind {
    gap: 5px;
    min-height: 34px;
    margin: 0 5px 5px 0;
    padding: 2px 11px 2px 8px;
    font-size: 13px;
  }

  .kind__dot {
    width: 9px;
    height: 9px;
  }
}

/* 枚数は山札の左に出す（下に出すと、右はしのカードに重なる） */
.deck__count {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--line);
  color: var(--cream);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.6;
  white-space: nowrap;
}

/* 縦長の画面では、左にしゅるいのボタンがあるので、枚数は「97枚」だけを山札の下のふちに重ねる */
.stage[data-shape="tall"] .deck__count {
  top: calc(100% - 3px);
  right: auto;
  left: 50%;
  z-index: 1;
  padding-inline: 8px;
  transform: translateX(-50%);
}

.stage[data-shape="tall"] .deck__count-label {
  display: none;
}

/* おしゃべり中は、枚数の表示をひっこめる。
   めくったカードが山札に重なる画面（スマホなど）では、山札ごとかくす */
.deck__count {
  transition: opacity 200ms ease;
}

.stage[data-state="revealing"] .deck__count,
.stage[data-state="revealed"] .deck__count,
.stage[data-deck-covered="yes"][data-state="revealing"] .deck,
.stage[data-deck-covered="yes"][data-state="revealed"] .deck {
  opacity: 0;
}

/* ---------- カード ----------
   カードは「めくったあとの大きさ」で置き、手札のときは縮めて見せる。
   こうすると、お題の文字がいちばん大きいときにいちばんきれいに出る。
   --u は「手札のときに画面上で1pxになる長さ」。うら面の線の太さなどに使う */

.card {
  --u: calc(1px / var(--hs));
  --card-r: calc(min(var(--W), var(--H)) * 0.07);
  --slot-x: calc((var(--hw) + var(--gap)) * (var(--i) - 1));
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: var(--W);
  height: var(--H);
  margin: calc(var(--H) / -2) 0 0 calc(var(--W) / -2);
  transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg)) scale(var(--s, 1));
  transition: transform var(--t-move) var(--ease-back), opacity var(--t-move) ease;
}

/* 山札の上 */
.card[data-pos="deck"] {
  --x: var(--deck-x);
  --y: var(--deck-y);
  --s: calc(var(--hs) * 0.36);
}

/* 手札（3枚ならんだ状態） */
.card[data-pos="hand"] {
  --x: var(--slot-x);
  --y: var(--hand-y);
  --r: var(--tilt, 0deg);
  --s: var(--hs);
  transition-delay: calc(var(--i) * var(--stagger));
}

/* えらんだ直後：少し浮く */
.card[data-pos="lift"] {
  --x: var(--slot-x);
  --y: calc(var(--hand-y) - var(--hh) * 0.14);
  --s: calc(var(--hs) * 1.1);
  z-index: 3;
  transition-duration: var(--t-lift);
}

/* めくれて、まんなかで大きくなる */
.card[data-pos="chosen"] {
  --s: 1;
  z-index: 3;
  transition-duration: var(--t-flip);
  transition-timing-function: var(--ease-out);
}

/* 片づける */
.card[data-pos="away"] {
  --x: var(--slot-x);
  --y: calc(var(--hand-y) + var(--hh) * 0.3);
  --r: var(--tilt, 0deg);
  --s: calc(var(--hs) * 0.86);
  opacity: 0;
  transition-duration: var(--t-away);
  transition-timing-function: ease-in;
}

/* 動かさずに置きなおす（配る前に山札へ戻す・画面の大きさが変わった） */
.card.is-instant,
.card.is-instant .card__flip {
  transition: none !important;
}

.card__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 0;
  border: 0;
  border-radius: var(--card-r);
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* キーボードで選んでいるカードの印は、持ち上がったカードのほうに付ける */
.card__hit:focus-visible {
  outline: none;
}

.card__hit:focus-visible ~ .card__lift .card__back {
  outline: calc(4 * var(--u)) solid var(--cream);
  outline-offset: calc(5 * var(--u));
}

/* 台に落ちる影。カードが浮くと、影は遠くなる */
.card__shadow {
  position: absolute;
  inset: 0;
  border-radius: var(--card-r);
  background: rgba(6, 48, 20, 0.34);
  transform: translate(calc(3 * var(--u)), calc(9 * var(--u)));
  transition: transform var(--t-lift) ease;
}

.card__lift {
  position: absolute;
  inset: 0;
  perspective: calc(var(--W) * 3);
  transition: transform var(--t-lift) var(--ease-back);
}

.card__flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--t-flip) var(--ease-out);
}

.card[data-face="front"] .card__flip {
  transform: rotateY(180deg);
}

.card__face {
  position: absolute;
  inset: 0;
  border-radius: var(--card-r);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* さわれるカードは、マウスを乗せる・キーボードで選ぶと持ち上がる */
.card__hit:focus-visible ~ .card__lift {
  transform: translateY(calc(-12 * var(--u))) rotate(-1.5deg);
}

.card__hit:focus-visible ~ .card__shadow {
  transform: translate(calc(5 * var(--u)), calc(17 * var(--u)));
}

@media (hover: hover) {
  .card__hit:hover ~ .card__lift {
    transform: translateY(calc(-12 * var(--u))) rotate(-1.5deg);
  }

  .card__hit:hover ~ .card__shadow {
    transform: translate(calc(5 * var(--u)), calc(17 * var(--u)));
  }
}

.card__hit:active ~ .card__lift {
  transform: translateY(calc(-3 * var(--u)));
}

.card__hit:active ~ .card__shadow {
  transform: translate(calc(2 * var(--u)), calc(6 * var(--u)));
}

/* うら面 */
.card__back {
  display: grid;
  place-items: center;
  border: calc(3 * var(--u)) solid var(--line);
  background: var(--coral);
  box-shadow: 0 calc(5 * var(--u)) 0 var(--line);
}

.card__back::before {
  content: "";
  position: absolute;
  inset: calc(7 * var(--u));
  border: calc(2.5 * var(--u)) solid rgba(255, 248, 236, 0.9);
  border-radius: calc(var(--card-r) * 0.62);
  background-image: radial-gradient(rgba(255, 248, 236, 0.3) calc(2.4 * var(--u)), transparent calc(2.9 * var(--u)));
  background-size: calc(20 * var(--u)) calc(20 * var(--u));
  background-position: center;
}

.card__num {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(min(var(--W), var(--H)) * 0.4);
  aspect-ratio: 1;
  border: calc(3 * var(--u)) solid var(--line);
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 calc(3 * var(--u)) 0 var(--line);
  font-size: calc(min(var(--W), var(--H)) * 0.24);
  font-weight: 900;
  line-height: 1;
  padding-bottom: calc(var(--num-lift) * 2);
}

/* おもて面 */
.card__front {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: calc(var(--W) * 0.02);
  padding: calc(var(--W) * 0.05);
  border: 4px solid var(--line);
  background: var(--paper);
  box-shadow: 0 8px 0 var(--line);
  transform: rotateY(180deg);
}

.chip {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 0.5em;
  padding: 0.2em 0.95em 0.2em 0.6em;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--cat-pale, var(--cream-deep));
  font-size: clamp(13px, calc(var(--W) * 0.03), 20px);
  font-weight: 900;
  line-height: 1.5;
}

.chip__dot {
  width: 0.7em;
  height: 0.7em;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--cat, var(--coral));
}

.card[data-cat="suki"] {
  --cat: var(--coral);
  --cat-pale: #ffe1db;
}

.card[data-cat="saikin"] {
  --cat: var(--sun);
  --cat-pale: #ffefc2;
}

.card[data-cat="moshimo"] {
  --cat: var(--lilac);
  --cat-pale: #ebe2fb;
}

.card[data-cat="jibun"] {
  --cat: var(--sky);
  --cat-pale: #dcecfa;
}

.card[data-cat="yaritai"] {
  --cat: var(--green);
  --cat-pale: #d6f0dd;
}

.topic-box {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
}

/* お題。文節の区切り（<wbr>）でだけ改行する。大きさは app.js が枠に合わせる */
.topic {
  width: 100%;
  font-weight: 900;
  line-height: 1.42;
  letter-spacing: 0.02em;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

.topic span {
  white-space: nowrap;
}

.topic.is-tight,
.topic.is-tight span {
  white-space: normal;
  overflow-wrap: anywhere;
}

.card__foot {
  padding-top: calc(var(--W) * 0.022);
  border-top: 2px dashed var(--tile-border);
  color: var(--ink-soft);
  font-size: clamp(12px, calc(var(--W) * 0.027), 18px);
  line-height: 1.5;
  text-align: center;
}

/* めくったあとの影は、ひかえめに（お題のじゃまをしない） */
.card[data-pos="chosen"] .card__shadow {
  transform: translate(5px, 15px);
}

/* 動きを減らすとき：飛ばさず、めくらず、ふわっと出すだけ */
:root[data-motion="reduce"] .card {
  transition: opacity 160ms ease;
}

:root[data-motion="reduce"] .card[data-pos="chosen"] {
  animation: card-fade 200ms ease;
}

@keyframes card-fade {
  from {
    opacity: 0;
  }
}

/* ---------- 案内（たぎっくま）と操作 ---------- */

/* 高さは固定。ひとことの長さやボタンの出し入れで、台の大きさが変わらないようにする */
.dock {
  --dock-h: clamp(84px, 13vh, 110px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  height: var(--dock-h);
}

.guide {
  display: flex;
  flex: 1;
  align-items: flex-end;
  gap: 14px;
  min-width: 0;
}

/* たぎっくまは、下の帯の高さにおさまる大きさにする（台やカードに重ならない）。
   表情（顔）とポーズ（全身）で絵の形がちがうので、同じ枠の中に下ぞろえで入れる */
.guide__kuma {
  flex: none;
  width: calc(var(--dock-h) * 0.98);
  height: calc(var(--dock-h) * 0.88);
}

.guide__kuma .kuma-img {
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* ふきだしは、たぎっくまの顔の横に置く。しっぽは口もとの高さ（顔の下から35%あたり）に向ける */
.guide__bubble {
  --bubble-lift: 6px;
  --tail-y: max(22px, calc(var(--dock-h) * 0.35 - var(--bubble-lift)));
  max-width: 31em;
  margin-bottom: var(--bubble-lift);
  font-size: clamp(15px, 1.45vw, 19px);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.actions {
  display: flex;
  flex: none;
  gap: 12px;
  padding-bottom: 6px;
}

/* ---------- せまい画面（スマホ） ---------- */

@media (max-width: 760px) {
  .bar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .steps {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-content: center;
  }

  .steps__item {
    font-size: 14px;
  }

  .table::before {
    inset: 7px 7px 17px;
    border-radius: 20px;
  }

  .stage {
    inset: 16px 14px 26px;
  }

  .dock {
    --dock-h: 80px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    height: auto;
  }

  .guide {
    flex: none;
    gap: 14px;
    height: var(--dock-h);
  }

  .guide__bubble {
    --bubble-lift: 2px;
    --bubble-pad: 6px 13px 8px;
    --bubble-r: 14px;
    --tail: 11px;
  }

  .actions {
    gap: 10px;
    min-height: 62px;
  }

  .actions .btn {
    flex: 1;
    padding-inline: 12px;
  }
}

@media (max-width: 374px) {
  .brand {
    gap: 6px;
    font-size: 15px;
  }

  .brand__kuma {
    width: 32px;
  }

  /* 見出しが1行におさまるよう、ボタンの「？」の絵をはぶく */
  .bar__howto {
    padding-inline: 12px;
    font-size: 14px;
  }

  .bar__howto svg {
    display: none;
  }

  .steps {
    gap: 0;
  }

  .steps__item {
    gap: 4px;
    padding-right: 8px;
    font-size: 13px;
  }

  .steps__num {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }

  .guide__bubble {
    font-size: 14px;
  }

  .actions .btn {
    gap: 6px;
    font-size: 15px;
  }
}

/* 高さのない画面（スマホを横にしたとき）：
   ステップ表示をやめ、案内と操作を横1列にして、台を広く使う */
@media (max-height: 520px) {
  .app {
    min-height: 320px;
  }

  .steps {
    display: none;
  }

  .bar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dock {
    --dock-h: 64px;
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
    height: var(--dock-h);
  }

  .guide {
    flex: 1;
    gap: 12px;
    height: auto;
  }

  .guide__bubble {
    --bubble-lift: 2px;
    --bubble-pad: 3px 11px 5px;
    --bubble-r: 12px;
    --tail: 9px;
    font-size: 13px;
    word-break: normal;
  }

  /* 長いひとことは2行まで（つづきは「…」）。お題のカードにも同じ案内がある */
  .guide__text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .actions {
    gap: 8px;
    min-height: 0;
    padding-bottom: 5px;
  }

  .actions .btn {
    flex: none;
    min-height: 46px;
    padding-inline: 16px;
    font-size: 15px;
  }

  /* しゅるいのボタンは小さめにして、台を広く使う */
  .kinds__label {
    display: none;
  }

  .kind {
    min-height: 32px;
    margin: 0 5px 5px 0;
    padding-block: 1px;
    font-size: 13px;
  }
}

/* ---------- あそびかた ---------- */

.howto {
  padding: clamp(16px, 3vw, 28px);
}

.howto__head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.howto__kuma {
  flex: none;
  width: clamp(64px, 12vw, 96px);
}

.howto__intro {
  flex: 1;
  min-width: 0;
}

.howto__title {
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 900;
  line-height: 1.3;
}

.howto__bubble {
  display: inline-block;
  margin: 6px 0 12px;
  font-size: 15px;
}

.howto__x {
  display: grid;
  flex: none;
  place-items: center;
  align-self: flex-start;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--border);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--line);
  cursor: pointer;
}

.howto__x:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--line);
}

.howto__x svg {
  width: 20px;
  height: 20px;
}

.howto__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 18px);
  margin-top: 14px;
}

.hstep {
  overflow: hidden;
  border: var(--border);
  border-radius: var(--radius-m);
  background: var(--paper);
  box-shadow: var(--edge);
}

/* 1コマの絵。本番と同じ「緑の台」の上に、小さなカードを置く */
.hstep__art {
  position: relative;
  aspect-ratio: 16 / 10;
  border-bottom: var(--border);
  background: var(--green);
  overflow: hidden;
}

.hstep__kuma {
  position: absolute;
  right: 4%;
  bottom: 6%;
  width: 29%;
}

.hstep__title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 0;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.3;
}

.hstep__num {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--line);
  color: var(--cream);
  font-size: 15px;
  padding-bottom: calc(var(--num-lift) * 2);
}

.hstep__text {
  padding: 4px 14px 14px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
  word-break: auto-phrase;
}

/* 小さなカード */
.mini {
  position: absolute;
  top: var(--my);
  left: var(--mx);
  display: grid;
  place-items: center;
  width: 22%;
  aspect-ratio: 3 / 4;
  border: 2px solid var(--line);
  border-radius: 7px;
  box-shadow: 0 3px 0 var(--line), 3px 9px 0 rgba(6, 48, 20, 0.3);
  transform: rotate(var(--mr, 0deg));
}

.mini--back {
  background: var(--coral);
}

.mini--back b {
  display: grid;
  place-items: center;
  width: 58%;
  aspect-ratio: 1;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--cream);
  font-size: clamp(11px, 2vw, 15px);
  font-weight: 900;
  line-height: 1;
  padding-bottom: calc(var(--num-lift) * 2);
}

/* えらんだ1枚は、浮いている */
.mini--up {
  box-shadow: 0 3px 0 var(--line), 6px 20px 0 rgba(6, 48, 20, 0.3);
}

.mini--front {
  align-content: center;
  gap: 8%;
  width: 26%;
  background: var(--paper);
}

.mini--front i {
  justify-self: start;
  width: 34%;
  height: 7px;
  margin-left: 12%;
  border-radius: 999px;
  background: var(--lilac);
}

.mini--front b {
  font-size: clamp(16px, 3vw, 24px);
  font-weight: 900;
  line-height: 1;
}

.mini--front u {
  width: 66%;
  height: 5px;
  border-radius: 999px;
  background: var(--tile-border);
}

/* ふきだし2つ */
.talk {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9%;
  border: 2px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--line);
}

.talk--a {
  top: 14%;
  left: 8%;
  width: 36%;
  height: 34%;
  background: var(--paper);
}

.talk--b {
  top: 40%;
  left: 30%;
  flex-direction: column;
  gap: 14%;
  width: 34%;
  height: 34%;
  background: var(--cream-deep);
}

.talk i {
  width: 11%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--line);
}

.talk u {
  width: 64%;
  height: 5px;
  border-radius: 999px;
  background: var(--ink-soft);
}

.howto__rules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.howto__rules li {
  padding: 5px 16px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--cream-deep);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.5;
}

.howto__ops {
  margin-top: 16px;
  border: 1.5px solid var(--tile-border);
  border-radius: 16px;
  background: var(--paper);
}

.howto__ops summary {
  padding: 12px 16px;
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
}

.howto__ops[open] summary {
  border-bottom: 1.5px solid var(--tile-border);
}

.keys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 8px 20px;
  margin: 0;
  padding: 14px 16px 4px;
  font-size: 14px;
}

.keys div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.keys dt {
  display: flex;
  flex: none;
  gap: 4px;
  min-width: 92px;
}

.keys dd {
  margin: 0;
}

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px calc(var(--num-lift) * 2);
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--cream);
  box-shadow: 0 2px 0 var(--line);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.howto__tip {
  padding: 12px 16px 0;
  font-size: 14px;
  line-height: 1.7;
}

.switch {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 8px 16px 0;
  font-size: 15px;
  cursor: pointer;
}

.switch input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--green-deep);
}

.howto__note {
  padding: 0 16px 14px 48px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
}

.howto__foot {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  padding-bottom: 5px;
}

.howto__foot .btn {
  min-width: 200px;
}

@media (max-width: 640px) {
  .howto__steps {
    grid-template-columns: minmax(0, 1fr);
  }

  /* スマホでは、絵を左・説明を右にならべて、縦に長くなりすぎないようにする */
  .hstep {
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
    align-content: center;
  }

  .hstep__art {
    grid-row: 1 / 3;
    height: 100%;
    min-height: 96px;
    aspect-ratio: auto;
    border-right: var(--border);
    border-bottom: 0;
  }

  .hstep__title {
    align-self: end;
    padding-top: 10px;
    font-size: 17px;
  }

  .hstep__text {
    padding-bottom: 10px;
    font-size: 14px;
  }
}