/* 「ひととき」から探す（§11.245）。Notion の UI 仕様案: エルメスを思わせるオレンジを主役に、温かいアイボリー・焦げ茶の文字・薄いベージュの区切り。
   装飾は最小限で、余白と円の動きでかわいさを出す。強い光沢・派手な当選演出・長く回り続ける動きは使わない */
:root {
  --bg: #fbf6ee; --panel: #fffdf8; --ink: #3a271c; --ink-2: #6b5446; --muted: #9a8574; --line: #eadfcf;
  --orange: #e2621b; --orange-2: #ef8a4c; --orange-soft: #f6dcc6; --orange-mid: #f2b48a; --on-orange: #fff8f0;
  --focus: #b4470e; --shadow: 0 1px 2px rgba(58, 39, 28, .08), 0 4px 14px rgba(58, 39, 28, .06);
  /* 地図（styles.css）のホイール・見出しの部品が使う名前を、ひとときの色に当てる */
  --fg: var(--ink); --accent: var(--orange); --accent-2: var(--focus); --wheel-size: 186px;
}
@media (max-height: 720px) { :root { --wheel-size: 158px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1e1712; --panel: #2a2019; --ink: #f3e7da; --ink-2: #cdb9a6; --muted: #9c8775; --line: #3d2f25;
    --orange: #f07a33; --orange-2: #c4621f; --orange-soft: #4a2e1c; --orange-mid: #7a4223; --on-orange: #1e1712;
    --focus: #ffb27a; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  }
}
:root[data-theme="dark"] {
  --bg: #1e1712; --panel: #2a2019; --ink: #f3e7da; --ink-2: #cdb9a6; --muted: #9c8775; --line: #3d2f25;
  --orange: #f07a33; --orange-2: #c4621f; --orange-soft: #4a2e1c; --orange-mid: #7a4223; --on-orange: #1e1712;
  --focus: #ffb27a; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* ★段を切り替える（display: grid などに負けて、前の段が残っていた） */
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 15px/1.6 "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%; padding-bottom: env(safe-area-inset-bottom); }
a { color: var(--focus); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 上の帯 */
.hk-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: .6rem; padding: .5rem max(16px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.hk-brand { font-weight: 700; font-size: .95rem; color: var(--ink); text-decoration: none; letter-spacing: .01em; white-space: nowrap; }
.hk-help { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center;
  color: var(--ink-2); text-decoration: none; font-weight: 700; }

/* 地図 ／ ひととき のトグル（地図の上の帯にも同じもの・styles.css） */
.mode-toggle { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--orange-soft); gap: 2px; }
.mt-seg { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .7rem; border-radius: 999px; color: var(--ink-2);
  text-decoration: none; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.mt-seg[aria-current="page"] { background: var(--orange); color: var(--on-orange); }
@media (max-width: 360px) { .mt-label { display: none; } .mt-seg { padding: .3rem .55rem; } }

/* ---------- 画面の組み方（地図と同じ iPod の形: 上が画面・下がホイール。§11.247） ---------- */
html, body { height: 100%; }
body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.hk { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.hk-screen { flex: 1 1 auto; min-height: 0; overflow: auto; padding: .4rem 16px .6rem; container-type: size; }
.hk-head { text-align: center; }
.hk-back { display: block; margin: 0 0 -.3rem; border: 0; background: none; color: var(--focus); font-size: .85rem; cursor: pointer; padding: .3rem .2rem;
  text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.hk-q { font-size: 1.15rem; font-weight: 700; margin: .35rem 0 .15rem; letter-spacing: .04em; text-wrap: balance; }
.hk-crumb { color: var(--ink-2); font-size: .85rem; margin: 0 0 .4rem; }
.hk-crumb b { color: var(--orange); }

/* ★ルーレットの段: 問いかけは小さく上に、その下に選んでいるもの（名前・一文・何番目）、その下に ▼ とルーレット */
.hk[data-step="scene"] .hk-q, .hk[data-step="story"] .hk-q, .hk.is-lucky-place .hk-q { font-size: .92rem; font-weight: 600; color: var(--ink-2); margin: .2rem 0 0; }
.hk.is-lucky-place .hk-crumb { display: none; }
.hk-pick { text-align: center; max-width: 30rem; margin: .1rem auto .2rem; padding: 0 .4rem; }
.hk-pick-name { margin: 0; font-size: 1.18rem; font-weight: 700; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-pick-text { margin: .1rem 0 0; font-size: .84rem; line-height: 1.45; color: var(--ink-2); min-height: 2.9em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.hk-pick-count { margin: .05rem 0 0; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* ルーレット（シーン・ストーリーの段だけ）。★画面の残りの高さに合わせて縮む */
.hk-dial-wrap { display: grid; justify-items: center; }
.hk-dial { position: relative; width: min(92cqw, calc(100cqh - 9.6rem), 420px); aspect-ratio: 1; container-type: inline-size; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 50%; }
.hk-dial:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
/* おまかせで止まった区切りを一度だけ光らせる（★派手な当選演出はしない・§11.248） */
.hk-dial.is-landed .hk-seg.is-on { animation: hk-landed .9s ease-out 1; }
@keyframes hk-landed { 30% { fill: var(--orange-2); } }
@media (prefers-reduced-motion: reduce) { .hk-dial.is-landed .hk-seg.is-on { animation: none; } }
.hk-dial svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hk-seg { fill: var(--orange-soft); stroke: var(--bg); stroke-width: 3; transition: fill .2s; cursor: pointer; }
.hk-seg.is-alt { fill: color-mix(in srgb, var(--orange-soft) 70%, var(--orange-mid)); }
.hk-seg.is-on { fill: var(--orange); }
.hk-seg.is-chosen { fill: var(--orange-2); }
.hk-lab { fill: var(--ink); font-size: 13px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.hk-lab.is-on { fill: var(--on-orange); font-size: 14px; }
.hk-lab.is-chosen { fill: var(--on-orange); font-size: 12px; }
.hk-dot { fill: var(--orange-mid); pointer-events: none; }
.hk-dot.is-on { fill: var(--on-orange); }
.hk-marker { fill: var(--ink); }
#hk-ring-in, #hk-ring-out { transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); transform-origin: 200px 200px; }
.hk[data-step="scene"] #hk-ring-out { opacity: 0; transform: scale(1.18); pointer-events: none; }
.hk-center { position: absolute; inset: 0; margin: auto; width: 32%; height: 32%; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--panel); box-shadow: var(--shadow); display: grid; place-content: center; gap: .1rem; padding: .3rem; text-align: center; }
.hk-center:active { transform: scale(.97); }
/* ★まん中の字はルーレットの大きさに合わせる（小さい画面で「これにする」が折り返した） */
.hk-center-sub { font-size: clamp(.55rem, 3.1cqw, .72rem); color: var(--ink-2); line-height: 1.3; text-wrap: balance; }
.hk-center-main { font-size: clamp(.6rem, 4.4cqw, .95rem); font-weight: 700; color: var(--orange); white-space: nowrap; }
.hk[data-step="story"] .hk-center { width: 26%; height: 26%; }

/* 下にまだあります（画面の下の端をぼかして、印を出す） */
.hk-more { position: sticky; bottom: 0; display: block; width: calc(100% + 32px); margin: 0 -16px; padding: 1.6rem 0 .5rem; border: 0; cursor: pointer;
  background: linear-gradient(transparent, var(--bg) 55%); color: var(--focus); font-size: .82rem; font-weight: 700; text-align: center; z-index: 4; }
.hk-more:focus-visible { outline-offset: -4px; }

/* ひとときから探すとは（シーンの段・ルーレットの下） */
.hk-about { max-width: 34rem; margin: 1.2rem auto .4rem; padding: .9rem 1rem; border-top: 1px solid var(--line); font-size: .86rem; color: var(--ink-2); }
.hk-about h2 { font-size: 1rem; color: var(--ink); margin: 0 0 .3rem; }
.hk-about h3 { font-size: .9rem; color: var(--ink); margin: .8rem 0 .3rem; }
.hk-about p { margin: .3rem 0; text-wrap: pretty; }
.hk-about dl { margin: 0; display: grid; gap: .45rem; }
.hk-about dt { font-weight: 700; color: var(--ink); }
.hk-about dt a { color: var(--orange); text-decoration: none; }
.hk-about dt .k { font-weight: 400; color: var(--muted); font-size: .78rem; margin-left: .3rem; }
.hk-about dd { margin: .05rem 0 0; font-size: .8rem; }
.hk-about-links { font-size: .8rem; }

/* 場所 */
.hk-choices { list-style: none; margin: .4rem auto 0; padding: 0; display: grid; gap: .45rem; max-width: 30rem; }
.hk-choice { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 14px; border: 1.5px solid var(--line);
  background: var(--panel); cursor: pointer; text-align: left; box-shadow: var(--shadow); scroll-margin: 12px; }
.hk-choice:hover { border-color: var(--orange-mid); }
.hk-choice.is-on { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange) inset, var(--shadow); }
.hk-choice[disabled] { cursor: default; color: var(--muted); background: transparent; box-shadow: none; border-style: dashed; }
.hk-choice[disabled] .ic { background: var(--line); color: var(--muted); }
.hk-choice .ic { width: 28px; height: 28px; border-radius: 50%; background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; flex: none; font-weight: 700; }
.hk-choice .tx { flex: 1; min-width: 0; }
.hk-choice .sub { display: block; font-size: .76rem; color: var(--muted); }
.hk-choice .go { color: var(--muted); }
.hk-group { list-style: none; margin: .4rem 0 .1rem; color: var(--muted); font-size: .78rem; letter-spacing: .06em; padding-left: .2rem; }
.hk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.8rem, 1fr)); gap: .4rem; }
.hk-grid .hk-choice { padding: .5rem .6rem; justify-content: center; text-align: center; flex-direction: column; gap: 0; }
.hk-grid .hk-choice .sub { font-size: .68rem; }

/* 店舗リスト（ローロデックス）。★前の1枚と上下を合わせて3軒以上が読める（ユーザー「最低三件見えるように」） */
.hk-list { display: flex; flex-direction: column; height: calc(100cqh - 4.6rem); min-height: 300px; }
.hk-list-where { margin: 0 0 .2rem; font-size: .86rem; display: flex; gap: .5rem; justify-content: center; align-items: baseline; flex-wrap: wrap; }
.hk-list-count { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.hk-link { border: 0; background: none; color: var(--focus); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: .2rem; }
.hk-rolo { position: relative; flex: 1 1 auto; min-height: 260px; perspective: 1000px; overflow: hidden; touch-action: none; outline-offset: 4px; border-radius: 16px; }
.hk-rolo::before, .hk-rolo::after { content: ""; position: absolute; left: 0; right: 0; height: 12%; z-index: 300; pointer-events: none; }
.hk-rolo::before { top: 0; background: linear-gradient(var(--bg), transparent); }
.hk-rolo::after { bottom: 0; background: linear-gradient(transparent, var(--bg)); }
.hk-shop { position: absolute; left: 3%; right: 3%; top: 50%; display: grid; grid-template-columns: 62px 1fr; gap: .6rem; padding: .5rem .6rem; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--panel); box-shadow: var(--shadow); backface-visibility: hidden; will-change: transform, opacity; }
.hk-shop.is-on { border-color: var(--orange); }
.hk-shop:not(.is-on) .acts, .hk-shop:not(.is-on) .cp { display: none; }
.hk-shop img { width: 62px; height: 62px; object-fit: cover; border-radius: 10px; background: var(--orange-soft); }
.hk-shop .nm { margin: 0; font-weight: 700; font-size: .95rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-shop.is-on .nm { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hk-shop .nm a { color: var(--ink); text-decoration: none; }
.hk-shop .meta { margin: .1rem 0 0; font-size: .76rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-shop .cp { margin: .1rem 0 0; font-size: .78rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-shop .acts { display: flex; gap: .4rem; margin-top: .35rem; flex-wrap: wrap; }
.hk-pill { border: 1.5px solid var(--orange); color: var(--orange); background: transparent; border-radius: 999px; padding: .2rem .7rem;
  font-size: .78rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.hk-pill.is-solid { background: var(--orange); color: var(--on-orange); }
.hk-empty { text-align: center; color: var(--ink-2); margin: 1.5rem auto; max-width: 30rem; }
.hk-side { display: none; }

/* ---------- 下：見出し + ホイール（地図の .dock と同じ並び） ---------- */
.hk-dock { flex: none; position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .45rem .75rem calc(.35rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--panel) 94%, transparent);
  border-top: 1px solid var(--line); }
.headline { text-align: center; width: 100%; max-width: 34rem; min-width: 0; }
.counter { display: inline-block; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.shop-name { display: block; font-size: .95rem; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-catch { display: block; font-size: .8rem; line-height: 1.4; color: var(--ink-2); margin-top: .1rem; min-height: 1lh;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-sub { display: block; font-size: .74rem; color: var(--muted); margin-top: .05rem; }
.hk-dock .wheel-wrap { margin-top: 8px; }
.hk-credit { margin: .25rem 0 0; font-size: .62rem; color: var(--muted); text-align: center; line-height: 1.45; max-width: 40rem; }
.hk-credit a { color: var(--muted); }

/* ---------- ホイール（iPod classic 6th gen に合わせる） ----------
   実機は「白＋シルバー筐体」と「黒＋ブラック筐体」の2色。
   ライトテーマ＝シルバー機、ダークテーマ＝ブラック機に対応させる。      */
.wheel-wrap {
  display: flex; align-items: center; justify-content: center;
  /* 見出しとの間隔。実機で詰まって見えたので広げてある */
  margin-top: 15px;
}

.wheel {
  --size: var(--wheel-size);
  --hub: calc(var(--wheel-size) * 0.39);   /* 実機の中央ボタンは外径の約39% */
  --wheel-face: #fbfbfa;       /* リング面（シルバー機は白に近い） */
  --wheel-face-2: #ececea;
  --wheel-edge: #d7d7d4;
  --wheel-label: #9a9a97;      /* MENU・アイコンのグレー */
  --hub-face: #f4f4f2;
  --hub-edge: #dcdcd9;
  position: relative; width: var(--size); height: var(--size);
  border-radius: 50%;
  touch-action: none;              /* ★最重要。地図のパン・ズームに食われない */
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer; flex: 0 0 auto;
}
@media (prefers-color-scheme: dark) {
  .wheel {
    --wheel-face: #2b2b2d;
    --wheel-face-2: #202022;
    --wheel-edge: #46464a;
    --wheel-label: #a8a8ac;
    --hub-face: #2f2f31;
    --hub-edge: #4a4a4e;
  }
}
.wheel:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 5px; }

/* リング面。実機はマットで、刻みも目盛りも無い一枚の円盤 */
.wheel-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    linear-gradient(180deg, var(--wheel-face) 0%, var(--wheel-face-2) 100%);
  border: 1px solid var(--wheel-edge);
  box-shadow:
    0 1px 2px rgba(0,0,0,.14),
    0 6px 16px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.55);
}
.wheel.is-active .wheel-ring { filter: brightness(.985); }

/* 4つのラベル。飾りなので pointer-events は殺し、判定は wheel.js のゾーンで行う */
.wl {
  position: absolute; left: 50%; color: var(--wheel-label);
  pointer-events: none; display: flex; align-items: center; justify-content: center;
  transform: translateX(-50%);
}
.wl-menu {
  top: 15px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
  font-family: Helvetica, Arial, sans-serif;
}
.wl-play { bottom: 16px; }
.wl-prev, .wl-next {
  top: 50%; left: auto; transform: translateY(-50%);
}
.wl-prev { left: 20px; transform: translateY(-50%); }
.wl-next { right: 20px; }

/* 押した瞬間だけ、その象限をわずかに沈ませる */
.wheel[data-zone="menu"] .wl-menu,
.wheel[data-zone="prev"] .wl-prev,
.wheel[data-zone="next"] .wl-next,
.wheel[data-zone="play"] .wl-play { color: var(--fg); }

body.auto-playing .wl-play { color: var(--accent); }

/* 中央ボタン。実機はラベル無しの無地 */
.wheel-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: var(--hub); height: var(--hub); border-radius: 50%;
  background: var(--hub-face);
  border: 1px solid var(--hub-edge);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.10),
    0 1px 0 rgba(255,255,255,.5);
  cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent;
  padding: 0;
  transition: transform .08s ease, box-shadow .08s ease;
}
.wheel-hub:active {
  transform: translate(-50%,-50%) scale(.97);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.18);
}
.wheel-hub:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .wheel-hub { transition: none; } }

.wheel.at-end .wheel-ring { animation: bump .16s ease-out; }
@keyframes bump { 50% { transform: scale(.985); } }
@media (prefers-reduced-motion: reduce) { .wheel.at-end .wheel-ring { animation: none; } }

/* スクリーンリーダー用の等価ボタン */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 広い画面（900px〜・Duo を開いた時）: 左に画面とホイール、右にお店のページ・地図 ---------- */
@media (min-width: 900px) {
  body { display: grid; grid-template-columns: minmax(380px, 480px) 1fr; grid-template-rows: auto 1fr auto; }
  .hk-top { grid-column: 1 / -1; }
  .hk { display: contents; }
  .hk-screen { grid-column: 1; grid-row: 2; }
  .hk-dock { grid-column: 1; grid-row: 3; }
  .hk-side { display: block; grid-column: 2; grid-row: 2 / 4; margin: 12px 16px 16px 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
  .hk-side[hidden] { display: none; }
  .hk-side iframe { width: 100%; height: calc(100% - 40px); border: 0; display: block; }
  .hk-side-bar { height: 40px; display: flex; align-items: center; padding: 0 .6rem; border-bottom: 1px solid var(--line); }
  /* ★お店のページを出している間は、上の帯（［お店に戻る］だけの帯）を畳む */
  .hk-side:has(#hk-side-back[hidden]) .hk-side-bar { display: none; }
  .hk-side:has(#hk-side-back[hidden]) iframe { height: 100%; }
  .hk-shop .open-shop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #hk-ring-in, #hk-ring-out, .hk-seg { transition: none; }
}