/* ============================================================
 * 各画面のスタイル（冒険・ひみつ・あそぶ・ごほうび・メニュー・獲得の流れ）
 * ============================================================ */

html { scrollbar-gutter: stable; }
html.is-modal-open body { overflow: hidden; }
.noscript { margin: 24px; padding: 16px; background: var(--white); box-shadow: 0 0 0 2px var(--ink); }

/* スタンプを獲得するボタン（どの画面でも同じ見た目・同じ文言） */
.btn--stamp {
  --bd: var(--camellia-deep);
  background: var(--camellia); color: var(--white);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--bd), 0 var(--px) 0 0 var(--bd),
    calc(var(--px) * -1) 0 0 0 var(--bd), var(--px) 0 0 0 var(--bd),
    inset 0 -4px 0 0 rgba(96, 8, 24, .35), inset 0 2px 0 0 rgba(255, 255, 255, .3);
}
.win--blue .btn--stamp, .win--blue .btn--light { --bd: var(--white); }

.section-title {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  margin: 20px 2px 10px;
  font-family: var(--font-dot); font-weight: 400; font-size: 22px; line-height: 1.3;
}
.section-title__sub { font-family: var(--font-body); font-size: 13px; color: var(--ink-soft); }

/* ---------- 冒険: いちばん上 ---------- */
.hero { position: relative; height: 236px; margin: 0 calc(var(--gutter) * -1); overflow: hidden; }
.hero__art { position: absolute; left: 0; top: 8px; bottom: 0; width: 68%; max-width: 320px; display: block; }
/* --fit / --pos は、スライドの絵ごとの切り抜き方（js/config/effects.config.js の heroSlides）。指定が無い絵は、ここの値になる */
.hero__art img { display: block; width: 100%; height: 100%; object-fit: var(--fit, cover); object-position: var(--pos, 30% 0); }
.hero__copy {
  position: absolute; top: 14px; right: 14px;
  display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 10px;
}
.hero__title {
  writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;
  font-family: var(--font-dot); font-weight: 400; font-size: 34px; line-height: 1.08; letter-spacing: .05em;
  color: var(--blue-deep);
  text-shadow: 2px 0 0 var(--white), -2px 0 0 var(--white), 0 2px 0 var(--white), 0 -2px 0 var(--white), 2px 2px 0 var(--white), -2px -2px 0 var(--white), 2px -2px 0 var(--white), -2px 2px 0 var(--white);
}
.hero__name { display: block; }
.hero__year {
  display: inline-block; writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb;
  margin-top: 8px; padding: 3px 5px 2px; font-size: 16px; line-height: 1; letter-spacing: .04em;
  background: var(--blue-deep); color: var(--white); text-shadow: none;
}
.hero__lead {
  writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;
  margin-top: 4px;
  font-family: var(--font-dot); font-size: 15px; line-height: 1.5; letter-spacing: .04em; color: var(--ink);
  text-shadow: 1px 0 0 var(--white), -1px 0 0 var(--white), 0 1px 0 var(--white), 0 -1px 0 var(--white);
}
.hero__date {
  position: absolute; right: 12px; bottom: 10px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  font-family: var(--font-dot); font-size: 13px; line-height: 1.2; color: var(--ink);
}
.hero__date span { background: rgba(255, 255, 255, .86); padding: 2px 5px; white-space: nowrap; }

/* ---------- 冒険: つぎの冒険 ---------- */
.next > * + * { margin-top: 0; }
.guide { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.guide__cat {
  appearance: none; border: 0; padding: 0; cursor: pointer; flex: none;
  width: 56px; height: 56px; display: grid; place-items: end center; background: transparent;
  /* なでる操作（左右の動き）を受け取る。縦のスクロールはそのまま使える。長押しのメニューや文字選択は出さない。 */
  touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.guide__sprite {
  position: relative; pointer-events: none;
  display: block; width: 48px; height: 48px;
  background: url(../assets/pixel/sprite-kamelia-idle@4x.png) 0 0 / 144px 48px no-repeat;
}
.guide__sprite[data-pose="1"] { background-position: -48px 0; }
.guide__sprite[data-pose="2"] { background-position: -96px 0; }
.guide__msg {
  position: relative; flex: 1 1 auto; min-width: 0;
  padding: 8px 10px; background: var(--white); color: var(--ink);
  font-size: 14px; line-height: 1.55;
}
.guide__msg::before { content: ''; position: absolute; left: -6px; bottom: 14px; width: 6px; height: 6px; background: var(--white); }

.next__label { font-family: var(--font-dot); font-weight: 400; font-size: 15px; line-height: 1.3; color: var(--on-dark-gold); }
.next__spot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 2px; }
.next__name { font-family: var(--font-dot); font-size: 28px; line-height: 1.25; }
.next__pt { flex: none; font-family: var(--font-dot); font-size: 22px; color: var(--on-dark-gold); white-space: nowrap; }
.next__pt small { font-size: 14px; }
.next__chips { margin: 8px 0 12px; gap: 6px; }
.next__chips .chip { background: rgba(255, 255, 255, .16); color: var(--white); }
.next__free { font-size: 13px; color: var(--on-dark-mute); }
.next__done { margin: 6px 0 12px; font-size: 15px; }
.next__progress { margin-top: 16px; padding-top: 12px; border-top: 2px dotted rgba(255, 255, 255, .38); }
.next__count { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; font-family: var(--font-dot); font-size: 14px; }
.next__count b { font-weight: 400; font-size: 24px; line-height: 1; color: var(--white); }
.next__left { margin-left: auto; color: var(--on-dark-mute); }
.next__reward { margin: 12px 0 6px; font-size: 13px; }
.next__reward b { font-family: var(--font-dot); font-weight: 400; font-size: 16px; color: var(--on-dark-gold); }

/* ---------- 冒険: スポット ---------- */
.seg { margin-top: 16px; }
.board__grid { display: grid; gap: 14px; }
.spot { display: flex; flex-direction: column; gap: 8px; }
.spot > * + * { margin-top: 0; }
.spot__top { display: flex; align-items: center; gap: 12px; }
.spot__head { flex: 1 1 auto; min-width: 0; }
.spot__name { font-family: var(--font-dot); font-weight: 400; font-size: 21px; line-height: 1.3; }
.spot__chips { margin-top: 4px; gap: 6px; }
.spot__pt { align-self: flex-start; flex: none; font-family: var(--font-dot); font-size: 20px; line-height: 1.3; color: var(--gold-deep); white-space: nowrap; }
.spot__pt small { font-size: 13px; }
.spot__pt.is-got { color: var(--camellia-deep); }
.spot__intro { font-size: 14px; line-height: 1.65; }
.spot__state { gap: 8px; }
.spot__when { font-size: 13px; color: var(--ink-soft); }
.spot .btn--lg { margin-top: 2px; }

/* ---------- スタンプの印影 ---------- */
.seal {
  position: relative; flex: none; display: inline-grid; place-items: center;
  width: var(--seal-size, 96px); height: var(--seal-size, 96px);
  transform: rotate(var(--seal-rot, 0deg));
}
.seal__ring { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.seal__motif { display: block; width: 57.14%; height: 57.14%; }
.seal--wheel .seal__motif { width: 47%; height: 47%; }
.seal--on { color: var(--camellia); }
.seal--off { color: var(--seal-off); }
.seal--off .seal__motif { opacity: .5; }
.seal__date {
  position: absolute; left: 50%; bottom: 2%;
  transform: translateX(-50%) rotate(calc(var(--seal-rot, 0deg) * -1));
  padding: 2px 5px; font-family: var(--font-dot); font-size: 12px; line-height: 1; white-space: nowrap;
  background: var(--camellia); color: var(--white);
}
.seal--mini .seal__date, .seal--tiny .seal__date { display: none; }

/* ---------- スタンプ帳 ---------- */
.book {
  margin-top: 16px; padding: 16px 14px 18px;
  background-color: var(--snow);
  background-image: radial-gradient(circle, rgba(36, 71, 200, .16) 1px, transparent 1.4px);
  background-size: 12px 12px;
}
.book > * + * { margin-top: 0; }
.book__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.book__title { font-family: var(--font-dot); font-weight: 400; font-size: 26px; line-height: 1.2; }
.book__count { font-family: var(--font-dot); font-size: 18px; white-space: nowrap; }
.book__count b { font-weight: 400; font-size: 32px; line-height: 1; color: var(--camellia-deep); }
.book__owner { margin-top: 2px; font-size: 14px; color: var(--ink-soft); }
.book__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.slot {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px 10px; text-align: center; background: var(--white); box-shadow: inset 0 0 0 2px var(--line);
}
.slot__name { font-family: var(--font-dot); font-size: 15px; line-height: 1.3; }
.book__secret { margin-top: 16px; padding-top: 12px; border-top: 2px dotted var(--line); padding-right: 30px; }
.book__sub { font-family: var(--font-dot); font-weight: 400; font-size: 16px; line-height: 1.3; color: var(--purple-deep); }
.book__sub span { display: block; font-family: var(--font-body); font-size: 12px; color: var(--ink-soft); }
.marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mark { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 4px 8px; font-family: var(--font-dot); font-size: 13px; line-height: 1.2; }
.mark--done { background: var(--purple); color: var(--white); }
.mark--pending { background: var(--gold-pale); color: var(--gold-deep); outline: 2px solid var(--gold); outline-offset: -2px; --icon-accent: var(--gold); }
.mark--none { width: 28px; justify-content: center; background: var(--white); color: var(--mist); outline: 2px dashed var(--line); outline-offset: -2px; }
.book__deco { position: absolute; width: 9px; height: 9px; color: var(--book-deco); background: linear-gradient(currentColor, currentColor) center / 3px 100% no-repeat, linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat; }
.book__deco--a { right: 16px; top: 52px; }
.book__deco--b { left: 10px; bottom: 96px; }

/* 「ちいさな星の発見」用のかくれ星（ミニゲームの星とは別物） */
.hidden-star {
  appearance: none; border: 0; padding: 0; cursor: pointer;
  position: absolute; right: 1px; bottom: 1px; width: 44px; height: 44px;   /* 星の位置は同じまま、押せる範囲を44pxに */
  display: grid; place-items: center; background: transparent; color: var(--hidden-star);
}
.hidden-star.is-found { color: var(--gold); }

/* ---------- ひみつ ---------- */
.secret-head { margin-top: 26px; }
.secret-head > * + * { margin-top: 8px; }
.secret-head__art { position: absolute; right: 8px; top: -26px; width: 104px; height: auto; margin: 0; }
.secret-head__title { padding-right: 104px; font-family: var(--font-dot); font-weight: 400; font-size: 24px; line-height: 1.3; }
.secret-head__lead { padding-right: 96px; font-size: 14px; line-height: 1.65; color: var(--on-dark-purple-soft); }
.secret-head__nums { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--font-dot); font-size: 14px; }
.secret-head__nums b { font-weight: 400; font-size: 22px; color: var(--on-dark-gold); }

.missions { display: grid; gap: 14px; margin-top: 14px; align-items: start; }
.mission { display: flex; flex-direction: column; gap: 10px; }
.mission > * + * { margin-top: 0; }
.mission__head { display: flex; align-items: flex-start; gap: 12px; }
.mission__q {
  flex: none; width: 44px; height: 54px; display: grid; place-items: center;
  font-family: var(--font-dot); font-size: 32px; line-height: 1; color: var(--on-dark-gold);
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px var(--mystery-line);
}
.mission__title { font-family: var(--font-dot); font-weight: 400; font-size: 21px; line-height: 1.35; }
.mission__head .mission__title { margin-top: 6px; }
.mission__goal { font-size: 15px; line-height: 1.65; }
.mission__free { font-size: 13px; color: var(--on-dark-purple); }
.mission__how { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.mission__how .px-icon { margin-top: 3px; }
.win--mystery .mission__how { color: var(--on-dark-purple); }
.win--mystery .feedback { background: var(--note-bg); }
.hints { display: grid; gap: 6px; }
.hint { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; background: rgba(255, 255, 255, .1); font-size: 14px; line-height: 1.6; --icon-accent: var(--on-dark-gold); }
.hint .px-icon { margin-top: 4px; }
.hint__no { display: block; font-family: var(--font-dot); font-size: 12px; line-height: 1.3; color: var(--on-dark-purple); }
.riddle { padding: 10px; background: rgba(255, 255, 255, .08); }
.riddle__q { margin-bottom: 8px; font-family: var(--font-dot); font-size: 16px; line-height: 1.4; }
.swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.swatch {
  appearance: none; border: 0; cursor: pointer; min-width: 0; min-height: 58px; padding: 6px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: var(--white); color: var(--ink); font-family: var(--font-dot); font-size: 14px; line-height: 1;
  box-shadow: inset 0 -3px 0 0 rgba(14, 26, 94, .16);
}
.swatch__dot { width: 22px; height: 22px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .28); }
.swatch:focus-visible { outline-color: var(--on-dark-gold); }
.mission__rules { gap: 6px; }
.mission__rules .chip { background: var(--purple-pale); color: var(--purple-deep); }
.win--gold .mission__rules .chip { background: var(--white); color: var(--ink); }
.facts { display: grid; gap: 4px; margin: 6px 0 0; }
.facts > div { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 8px; }
.facts dt { font-family: var(--font-dot); font-size: 13px; line-height: 1.9; color: var(--ink-soft); }
.facts dd { margin: 0; }
.reject { display: flex; gap: 8px; padding: 10px 12px; font-size: 14px; line-height: 1.6; background: var(--note-bg); color: var(--note-ink); box-shadow: inset 0 0 0 2px var(--gold); }
.reject .px-icon { margin-top: 4px; }
.reject__title { font-family: var(--font-dot); font-size: 15px; }
.receipt { padding: 10px 8px 12px; text-align: center; background: var(--white); box-shadow: inset 0 0 0 2px var(--gold-deep); }
.receipt__label { font-family: var(--font-dot); font-size: 13px; color: var(--gold-deep); }
.receipt__code { font-family: var(--font-dot); font-size: 46px; line-height: 1.1; letter-spacing: .18em; padding-left: .18em; color: var(--ink); }
.mission__cond { font-size: 14px; line-height: 1.6; }
.mission__cond span { display: inline-block; margin-right: 8px; padding: 2px 6px; font-family: var(--font-dot); font-size: 12px; line-height: 1.3; background: var(--ink); color: var(--white); }
.mission--done { background: var(--done-surface); }
.mission__result { display: flex; align-items: center; gap: 12px; }
.mission__art { flex: none; width: 84px; height: 84px; object-fit: contain; }
.mission__badge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-family: var(--font-dot); font-size: 14px; color: var(--purple-deep); }
.mission__badge > span:first-child { padding: 2px 6px; font-size: 12px; background: var(--purple); color: var(--white); }
.quiz__q { min-width: 0; margin: 0; padding: 0; border: 0; }
.quiz__q legend { padding: 0; margin-bottom: 6px; font-size: 15px; line-height: 1.6; }
.quiz__no { display: inline-block; margin-right: 8px; padding: 2px 6px; font-family: var(--font-dot); font-size: 12px; line-height: 1.3; background: var(--purple); color: var(--white); }
.quiz__q.is-wrong .choices { box-shadow: -5px 0 0 0 var(--gold); }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.choice { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 10px; cursor: pointer; font-size: 15px; line-height: 1.3; background: var(--purple-pale); }
.choice input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--purple); }
.choice:has(input:checked) { background: var(--purple); color: var(--white); }
.choice:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- あそぶ ---------- */
.page-head { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; }
.page-head__art { flex: none; width: 84px; height: 84px; object-fit: contain; }
.page-head__title { font-family: var(--font-dot); font-weight: 400; font-size: 28px; line-height: 1.2; }
.page-head__lead { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.games { display: grid; gap: 14px; }
.game-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.game-card > * + * { margin-top: 0; }
.game-card > .btn { grid-column: 1 / -1; }
.game-card__art { width: 78px; height: 78px; position: relative; background: var(--ink); color: var(--star); display: block; overflow: hidden; }
.game-card__art--cards img { position: absolute; width: 46px; height: 46px; }
.game-card__art--cards img:first-child { left: 4px; top: 6px; background: var(--white); box-shadow: 0 0 0 2px var(--white); }
.game-card__art--cards img:last-child { right: 4px; bottom: 6px; background: var(--gold-pale); box-shadow: 0 0 0 2px var(--white); }
.game-card__art--stars .px-icon { position: absolute; }
.game-card__art--stars .px-icon:nth-child(1) { left: 8px; top: 10px; }
.game-card__art--stars .px-icon:nth-child(2) { right: 8px; top: 8px; color: var(--white); }
.game-card__art--stars .px-icon:nth-child(3) { right: 14px; bottom: 8px; color: var(--bg-top); }
.game-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: var(--font-dot); font-weight: 400; font-size: 20px; line-height: 1.3; }
.game-card__sum { margin-top: 4px; font-size: 14px; line-height: 1.6; }
.game-card__rec { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); }
.game-card__rec div { display: flex; align-items: baseline; gap: 6px; }
.game-card__rec dd { margin: 0; font-family: var(--font-dot); font-size: 16px; color: var(--ink); }

/* ---------- ごほうび ---------- */
.license {
  --bd: var(--gold-deep);
  margin-top: 18px; padding: 0; overflow: hidden;
  background: linear-gradient(180deg, var(--paper), var(--gold-pale));
}
.license > * + * { margin-top: 0; }
.license__art {
  display: block; width: 100%; height: 176px; object-fit: cover; object-position: 50% 18%;
  background-color: var(--blue);
  background-image: radial-gradient(circle, rgba(255, 255, 255, .22) 1px, transparent 1.4px), linear-gradient(180deg, var(--license-a), var(--license-b));
  background-size: 10px 10px, auto;
}
.license__body { padding: 14px 16px 16px; }
.license__kind { display: flex; align-items: center; gap: 8px; font-family: var(--font-dot); font-size: 14px; color: var(--gold-deep); }
.license__title { margin-top: 4px; font-family: var(--font-dot); font-weight: 400; font-size: 27px; line-height: 1.3; }
.license__state { margin-top: 8px; }
.license__seals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.license__id { margin-top: 10px; font-family: var(--font-dot); font-size: 12px; color: var(--ink-soft); }
.points { display: grid; margin: 12px 0 0; }
.points > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 2px dotted rgba(117, 89, 15, .4); }
.points dt { font-size: 14px; }
.points dd { margin: 0; font-family: var(--font-dot); font-size: 22px; line-height: 1.2; white-space: nowrap; }
.points dd small { font-size: 13px; color: var(--ink-soft); }
.points__total dt { font-family: var(--font-dot); font-size: 16px; }
.points__total dd { font-size: 30px; color: var(--gold-deep); }
.points--modal > div:first-child { border-top: 0; }
.points--modal dd small { white-space: normal; }

.rewards { display: grid; gap: 10px; margin-top: 10px; }
.reward { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 10px 12px 12px; background: var(--surface-quiet); box-shadow: inset 0 0 0 2px var(--line); }
.reward.is-on { background: var(--gold-pale); box-shadow: inset 0 0 0 2px var(--gold); }
.reward__cond { grid-column: 1 / -1; font-family: var(--font-dot); font-size: 15px; color: var(--ink-soft); }
.reward.is-on .reward__cond { color: var(--gold-deep); }
.reward__art { width: 64px; height: 64px; object-fit: contain; filter: grayscale(1); opacity: .4; }
.reward.is-on .reward__art { filter: none; opacity: 1; }
.reward__title { font-family: var(--font-dot); font-weight: 400; font-size: 18px; line-height: 1.3; }
.reward__text { margin: 2px 0 6px; font-size: 13px; line-height: 1.6; }
.titles { display: flex; flex-wrap: wrap; gap: 6px; }
.titles__h { margin-top: 12px; font-family: var(--font-dot); font-weight: 400; font-size: 15px; }
.title-tag { padding: 5px 9px; font-family: var(--font-dot); font-size: 14px; line-height: 1.2; }
.title-tag--normal { background: var(--gold-pale); color: var(--gold-ink); box-shadow: inset 0 0 0 2px var(--gold); }
.title-tag--secret { background: var(--purple-pale); color: var(--purple-deep); box-shadow: inset 0 0 0 2px var(--purple); }
[data-screen="rewards"] > .win { margin-top: 16px; }

/* ---------- メニュー・あそび方 ---------- */
.menu-list { display: grid; gap: 8px; }
.menu-item {
  appearance: none; border: 0; cursor: pointer; width: 100%; min-height: 62px; padding: 10px 12px;
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--surface-quiet); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line);
}
.menu-item__icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; background: var(--ink); color: var(--white); --icon-accent: var(--gold); }
.menu-item__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.menu-item__title { font-family: var(--font-dot); font-size: 18px; line-height: 1.3; }
.menu-item__sub { font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.modal__sub { display: block; margin-top: 3px; font-family: var(--font-dot); font-size: 13px; line-height: 1.3; color: var(--ink-soft); }
.steps { counter-reset: step; display: grid; gap: 12px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; }
.steps li::before {
  content: counter(step); grid-row: 1 / span 2; width: 32px; height: 32px; display: grid; place-items: center;
  font-family: var(--font-dot); font-size: 18px; line-height: 1; background: var(--ink); color: var(--white);
}
.steps b { font-family: var(--font-dot); font-weight: 400; font-size: 17px; line-height: 1.5; }
.steps span { font-size: 14px; line-height: 1.65; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.table th, .table td { padding: 6px 4px; text-align: left; vertical-align: top; font-weight: 400; border-bottom: 2px dotted var(--line); }
.table thead th { font-family: var(--font-dot); font-size: 13px; color: var(--ink-soft); }
.table td:last-child, .table th:last-child { white-space: nowrap; }
.defs { display: grid; gap: 8px; margin: 0 0 8px; }
.defs dt { font-family: var(--font-dot); font-size: 15px; }
.defs dd { margin: 0; font-size: 14px; }
.bullets { display: grid; gap: 8px; }
.bullets li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.7; }
.bullets li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; background: var(--blue); }
.bullets b { font-weight: 600; }

/* ---------- スタンプ獲得: QR（疑似） ---------- */
.scanner { position: relative; width: 208px; height: 208px; margin: 4px auto 0; display: grid; place-items: center; overflow: hidden; background: var(--ink); }
.scanner__code { display: block; width: 160px; height: 160px; background: var(--white); }
.scanner__line { position: absolute; left: 14px; right: 14px; top: 22px; height: 3px; background: var(--on-dark-gold); opacity: 0; }
.scanner__c { position: absolute; width: 22px; height: 22px; border: 4px solid var(--on-dark-gold); }
.scanner__c--tl { left: 8px; top: 8px; border-right: 0; border-bottom: 0; }
.scanner__c--tr { right: 8px; top: 8px; border-left: 0; border-bottom: 0; }
.scanner__c--bl { left: 8px; bottom: 8px; border-right: 0; border-top: 0; }
.scanner__c--br { right: 8px; bottom: 8px; border-left: 0; border-top: 0; }

/* ---------- スタンプ獲得: 距離判定（疑似） ---------- */
.dist__rule { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dist__rule b { font-family: var(--font-dot); font-weight: 400; font-size: 17px; }
.dist { position: relative; height: 58px; background: var(--bg-low); box-shadow: inset 0 0 0 2px var(--line); overflow: hidden; }
.dist__zone { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(213, 52, 75, .22) 0 6px, rgba(213, 52, 75, .08) 6px 12px); box-shadow: inset -2px 0 0 0 var(--camellia); }
.dist__pin { position: absolute; left: 6px; top: 5px; color: var(--camellia); --icon-accent: var(--white); }
.dist__me { position: absolute; bottom: 4px; width: 40px; height: 40px; margin-left: -20px; background: url(../assets/pixel/kamelia-walk@5x.png) center / contain no-repeat; }
.dist__out { float: right; font-family: var(--font-dot); font-size: 18px; }
.range { display: block; width: 100%; height: 44px; margin: 0; accent-color: var(--blue); cursor: grab; }
.dist__state { display: flex; align-items: center; gap: 6px; font-family: var(--font-dot); font-size: 14px; color: var(--ink-soft); }
.dist__state.is-in { color: var(--camellia-deep); }

/* ---------- 獲得・発見・達成の演出 ---------- */
.modal--cele .modal__panel { text-align: center; }
.modal--cele .modal__title { padding-left: 38px; text-align: center; font-size: 26px; color: var(--camellia-deep); }
.modal--mission .modal__title, .modal--discover .modal__title { color: var(--purple-deep); }
.modal--reward .modal__title { color: var(--gold-deep); }
.modal--cele .modal__body > * + * { margin-top: 6px; }
.cele__burst { position: absolute; left: 0; right: 0; top: 0; height: 100%; margin: 0; overflow: hidden; pointer-events: none; }
.cele__bit { position: absolute; top: -12px; width: 6px; height: 6px; background: var(--sky); }
.cele__bit--star { width: 9px; height: 9px; background: linear-gradient(var(--gold), var(--gold)) center / 3px 100% no-repeat, linear-gradient(var(--gold), var(--gold)) center / 100% 3px no-repeat; }
.cele__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 150px; }
.cele__seal { flex: none; }
.cele__art { flex: none; width: 138px; height: 138px; object-fit: contain; }
.cele__visual.has-seal .cele__art { width: 112px; height: 112px; margin-left: -22px; align-self: flex-end; }
.cele__title { font-family: var(--font-dot); font-size: 24px; line-height: 1.3; }
.cele__points { font-family: var(--font-dot); font-size: 46px; line-height: 1.05; color: var(--gold-deep); }
.cele__points small { font-size: 22px; }
.cele__text { font-size: 14px; line-height: 1.6; }
.cele__badge { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-dot); font-size: 16px; color: var(--purple-deep); }

/* ---------- 幅の広い画面 ---------- */
@media (min-width: 700px) {
  .board__grid, .missions, .games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rewards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reward { grid-template-columns: minmax(0, 1fr); justify-items: start; align-content: start; }
}
@media (min-width: 920px) {
  .hero { height: 380px; margin: 0; }
  .hero__art { left: auto; right: 0; top: 10px; width: 64%; max-width: 600px; }
  .hero__art img { object-fit: contain; object-position: var(--pos-wide, 100% 100%); }
  .hero__copy { left: 8px; right: auto; top: 28px; flex-direction: row; gap: 18px; }
  .hero__title { font-size: 56px; }
  .hero__year { font-size: 24px; padding: 4px 8px 3px; }
  .hero__lead { margin-top: 8px; font-size: 22px; }
  .hero__date { left: 12px; right: auto; bottom: 22px; align-items: flex-start; font-size: 16px; }
  .next { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 28px; align-items: center; padding: 22px; }
  .next .guide { grid-column: 1 / -1; }
  .next__label, .next__spot, .next__chips, .next > .btn, .next__done { grid-column: 1; }
  .next__progress { grid-column: 2; grid-row: 2 / span 4; margin: 0; padding: 0 0 0 24px; border-top: 0; border-left: 2px dotted rgba(255, 255, 255, .38); }
  .license { display: grid; grid-template-columns: 320px minmax(0, 1fr); }
  .license__art { height: 100%; min-height: 320px; }
  .secret-head__art { width: 128px; top: -34px; }
}
@media (max-width: 359px) {
  .hero__title { font-size: 30px; }
  .hero__lead { font-size: 14px; }
  .next__name { font-size: 24px; }
  .receipt__code { font-size: 40px; }
  .swatch { font-size: 13px; }
  .choices { grid-template-columns: minmax(0, 1fr); }
  .game-card__art { width: 64px; height: 64px; }
  .game-card__art--cards img { width: 38px; height: 38px; }
}