/* チケットページ。色・書体のトークンは ../style.css の :root を使う。
   主役は座席図。券種の色は各 .zone / .zone-row の --c（tickets.json 由来）が持ち、
   選択は白いストローク、ホバーは --c を少し明るくして示す（テーマ色とぶつけない）。
   券種の詳細は右（スマホは下）から出るドロワー。開いている間は暗幕で周りを沈め、
   PC 幅では座席図だけ暗幕の上に残して、選んだ区画以外をさらに暗くする。 */

.ticket-page { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }

.topbar { padding: 20px var(--gutter); }
.topbar__home { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; font-size: 0.85rem; font-weight: 700; color: var(--silver); }
.topbar__home:hover { color: var(--white); }
.topbar__logo { width: 96px; height: auto; }

.ticket {
  --closed: #7d8694; /* 販売対象外。テーマに寄せず、はっきり灰色と分かる色 */
  --rule: rgb(255 255 255 / 0.18);
  padding: clamp(24px, 5vh, 56px) var(--gutter) clamp(64px, 10vh, 120px);
}

/* 見出しはトップのヒーローと同じ語彙（.hero__official / .hero__when）。登場アニメはトップのロゴに合わせた遅延なので、ここでは切る */
.ticket__head :is(.hero__official, .hero__when) { animation: none; }
.ticket h1 { margin-top: 0.5rem; font-weight: 900; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.15; }

/* ---------- 上部: リード文・日時・注意 ---------- */
.intro { margin-top: clamp(28px, 5vh, 48px); max-width: 46em; display: grid; gap: 16px; }
.intro__lead { font-size: 1.05rem; }
.intro__info { display: grid; gap: 4px; }
.intro__info div { display: flex; gap: 1em; }
.intro__info dt { flex: none; width: 3em; color: var(--dim); font-weight: 700; }
.intro__info dd { font-weight: 700; }
.intro__cautions, .notices, .sheet__notes { display: grid; gap: 6px; font-size: 0.9rem; color: var(--silver); }
:is(.intro__cautions, .notices, .sheet__notes) li { padding-left: 1.1em; text-indent: -1.1em; }
:is(.intro__cautions, .notices, .sheet__notes) li::before { content: "※"; display: inline-block; width: 1.1em; text-indent: 0; color: var(--dim); }
:is(.intro, .block, .sheet) a:not(.btn) { color: var(--blue-hi); text-underline-offset: 3px; }

/* ---------- 見出しつきのブロック（販売スケジュール・席種・特典・注意事項・お問い合わせ） ---------- */
.block { margin-top: clamp(48px, 9vh, 96px); }
.block__h { font-weight: 900; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.3; }
.block__h .swatch { --c: var(--blue); width: 8px; height: 0.9em; margin-right: 12px; vertical-align: -0.05em; }
.block__note { margin-top: 8px; font-size: 0.85rem; color: var(--dim); }
.block > .table { margin-top: 20px; }
#perks, #addons, #notices { scroll-margin-top: 24px; }

/* ---------- 表（価格・スケジュール・部屋） ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table caption { text-align: left; font-weight: 700; padding-bottom: 6px; }
.table th, .table td { padding: 8px 10px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.table thead th { font-size: 0.78rem; font-weight: 700; color: var(--dim); white-space: nowrap; }
.table thead small { display: block; font-family: var(--cond); font-size: 0.95rem; letter-spacing: 0.04em; }
.table tbody th { font-weight: 700; white-space: nowrap; }
/* 価格は桁をそろえて右寄せ。数字は見出しと同じコンデンス書体 */
.table--price td { text-align: right; font-family: var(--cond); font-weight: 800; font-size: 1.1rem; letter-spacing: 0.02em; white-space: nowrap; }
.table--price thead th:not(:first-child) { text-align: right; }
.table--schedule tbody th { color: var(--blue-hi); }
.table--schedule td:first-of-type { white-space: nowrap; font-weight: 700; }

/* ---------- 2 columns: map (sticky) + list ---------- */
.ticket__body {
  margin-top: clamp(40px, 7vh, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

/* ---------- map ---------- */
.map { margin: 0; position: sticky; top: 24px; }
.map__svg {
  width: 100%; height: auto; max-height: calc(100svh - 48px); display: block;
  /* 図はポインタ用のショートカット。キーボード操作は一覧のボタンで行うので、図側にはフォーカス枠もタップ時のハイライトも出さない */
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.map__svg path, .map__field rect { stroke: var(--ink); stroke-width: 1.5; }
.map__closed path { fill: var(--closed); }
.map__field rect { fill: #0e1a12; }
.map__field .map__turf { fill: #2f6b3c; }
.map__field path { stroke: rgb(255 255 255 / 0.28); stroke-width: 1; }
/* フィールドを押すとボールが飛ぶ小ネタ（ticket.js）。ボールは原点中心に描き、transform で動かす。
   飛んでいる間にボールを押せるので、当たり判定用の透明な円を大きめに敷く */
.ball { cursor: pointer; }
.ball__hit { fill: transparent; }
.cheer {
  pointer-events: none;
  font-family: var(--cond); font-style: italic; font-weight: 900; font-size: 96px;
  fill: var(--white); stroke: var(--ink); stroke-width: 8px; paint-order: stroke;
  text-anchor: middle;
}
.ball__skin { fill: #8a4b25; stroke: #3a1e0e; stroke-width: 1.5; }
.ball__lace { stroke: #fff; stroke-width: 1.5; stroke-linecap: round; }

.zone { cursor: pointer; }
.zone path { fill: var(--c); }
.zone.is-hover path { fill: color-mix(in srgb, var(--c), white 18%); }
.zone.is-selected path { stroke: var(--white); stroke-width: 3; vector-effect: non-scaling-stroke; }
/* どれかが選ばれているときは、選んだ券種以外（販売対象外・フィールドも）をはっきり沈める */
.map__svg:has(.is-selected) .zone:not(.is-selected, .is-hover) { opacity: 0.18; }
.map__svg:has(.is-selected) :is(.map__closed, .map__field) { opacity: 0.3; }

/* エリア番号。区画の上に乗せるだけで、押すと下の区画を押したことになる */
.map__area { pointer-events: none; }
.map__area circle { fill: var(--ink); stroke: var(--white); stroke-width: 2; }
.map__area text { font-family: var(--cond); font-weight: 800; font-size: 20px; fill: var(--white); text-anchor: middle; }

.map__side { font-family: var(--cond); font-style: italic; font-weight: 800; font-size: 44px; letter-spacing: 0.06em; fill: var(--silver); }
.map__caption {
  --c: var(--closed);
  margin-top: 12px;
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px 20px;
  font-size: 0.8rem; color: var(--dim);
}
.map__caption span { display: inline-flex; align-items: center; gap: 8px; }
.map__caption .swatch { height: 16px; }

/* 券種の色。チケットの端のような縦長の斜めタブ */
.swatch {
  flex: none; display: inline-block; width: 10px; height: 26px;
  --cut: 3px;
  background: var(--c);
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
}

/* ---------- ticket list ---------- */
.zones { border-top: 1px solid var(--rule); }
.zone-row { border-bottom: 1px solid var(--rule); }
.zone-row__head {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 10px 8px; border: 0; background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer; font-weight: 700; font-size: 1rem;
}
.zone-row__head .badge { margin-left: auto; }
.zone-row.is-hover .zone-row__head { background: rgb(255 255 255 / 0.05); }
.zone-row__head[aria-expanded="true"] { background: rgb(var(--blue-rgb) / 0.18); }

/* 新設などの小さな札 */
.badge { flex: none; padding: 0 8px; border: 1px solid var(--blue-hi); color: var(--blue-hi); font-size: 0.72rem; font-weight: 700; line-height: 1.6; }
/* 未確定（原稿の【　】）。届いたら差し替える場所だと分かる点線の枠 */
.tbd { display: inline-block; padding: 0 8px; border: 1px dashed var(--dim); color: var(--silver); font-size: 0.85em; font-weight: 700; text-indent: 0; }

/* エリア番号の丸（座席図の凡例）。図のエリア番号と同じ形 */
.area-no {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--white); background: var(--ink);
  font-family: var(--cond); font-weight: 800; font-size: 1rem; line-height: 1;
}
.map__caption .area-no { width: 20px; height: 20px; font-size: 0.8rem; border-width: 1.5px; }

/* ---------- ドロワー ---------- */
.drawer-backdrop { position: fixed; inset: 0; z-index: 20; background: rgb(var(--ink-rgb) / 0.78); }
.is-drawer-open { overflow: hidden; }
/* PC 幅では座席図を暗幕の上に出し、選んだ区画が見えるようにする */
.is-drawer-open .map { z-index: 21; }
.drawer {
  position: fixed; z-index: 30; top: 0; right: 0; bottom: 0;
  /* 一覧の列と右余白の上にちょうど重なる幅。左の座席図を隠さない */
  width: min(100vw, calc(400px + var(--gutter) + 24px));
  background: var(--panel);
  box-shadow: -24px 0 48px rgb(var(--ink-rgb) / 0.6);
}
.drawer[hidden], .drawer-backdrop[hidden], .sheet[hidden] { display: none; }
.drawer__close {
  position: absolute; z-index: 1; top: 12px; right: 12px; width: 44px; height: 44px;
  border: 0; background: rgb(255 255 255 / 0.08); color: var(--white); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.drawer__close:hover { background: rgb(255 255 255 / 0.16); }

/* 1 券種分の中身。券種色の帯を左端に立て、半券のように点線で区切る */
.sheet { height: 100%; display: grid; grid-template-rows: 1fr auto; border-left: 10px solid var(--c); }
.sheet__scroll { overflow-y: auto; overscroll-behavior: contain; padding: 28px clamp(20px, 3vw, 36px) 32px; display: grid; gap: 20px; align-content: start; }
.sheet__name { display: flex; align-items: center; gap: 12px; padding-right: 48px; font-weight: 900; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.3; outline: none; }
.sheet__lead { display: grid; gap: 8px; font-size: 0.95rem; }
/* エリアは購入ページで選ぶ、の案内。エリアのある券種だけに出る（build-ticket.mjs） */
.sheet__area-note { padding: 10px 12px; border-left: 3px solid var(--blue-hi); background: rgb(var(--blue-rgb) / 0.12); font-size: 0.9rem; }
.sheet__block { display: grid; gap: 8px; font-size: 0.9rem; color: var(--silver); }
.sheet__h { font-size: 1rem; font-weight: 900; color: var(--white); }
.sheet__buy { padding: 16px clamp(20px, 3vw, 36px); border-top: 2px dashed rgb(255 255 255 / 0.25); background: var(--panel); }
.sheet__buy .btn { --cut: 10px; }
.sheet__soon { font-weight: 700; color: var(--silver); }

.photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.photo { margin: 0; }
.photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.photo figcaption { margin-top: 4px; font-size: 0.78rem; color: var(--silver); }
.photo__frame { aspect-ratio: 3 / 2; display: grid; place-items: center; border: 1px dashed var(--dim); }
.photo--main { grid-column: 1 / -1; }


/* ---------- 特典付きチケット・お問い合わせ ---------- */
.perks { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.perks li { padding: 20px 24px; background: var(--panel); border-left: 4px solid var(--blue); display: grid; gap: 8px; align-content: start; }
.perks h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 1.05rem; font-weight: 900; }
.perks h3 span { font-family: var(--cond); font-weight: 800; font-size: 1.4rem; color: var(--blue-hi); }
.perks p { font-size: 0.9rem; color: var(--silver); }
/* 追加コンテンツは座席と別売り。特典付きチケットの一部に見えないよう、塗りの帯ではなく破線の枠にする。
   「座席チケットは別途必要」の注意はテーマ（青・赤）とぶつからない琥珀色で目立たせる */
.block--addons .block__h .swatch { --c: var(--silver); }
.perks--addons li { background: none; border: 1px dashed var(--dim); }
.must { color: #ffc845; font-weight: 900; }
.notices { margin-top: 16px; max-width: 52em; }
.contact { margin-top: 16px; display: grid; gap: 4px; font-size: 0.9rem; color: var(--silver); }
.contact__name { font-weight: 900; font-size: 1.05rem; color: var(--white); }
.contact__tel { font-family: var(--cond); font-weight: 800; font-size: 1.6rem; letter-spacing: 0.03em; color: var(--white); }
.contact__tel a { color: inherit; text-decoration: none; }
.contact__mail { font-size: 1.3rem; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: no-preference) {
  .zone path { transition: fill 0.15s; }
  .zone, .map__closed, .map__field { transition: opacity 0.2s; }
  .drawer:not([hidden]) { animation: drawer-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); }
  @keyframes drawer-in { from { transform: translateX(32px); opacity: 0; } }
  .zone-row__head { transition: background 0.15s; }
}

/* ---------- small screens: 図を上、一覧を下 ---------- */
@media (max-width: 820px) {
  /* 図と読み進める領域を分け、一覧末尾・詳細の途中でも全体図を残す。 */
  .ticket__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 38%) minmax(0, 1fr);
    height: calc(100svh - 24px); gap: 12px; margin-top: 20px;
    scroll-margin-top: 12px;
  }
  .map { position: static; height: 100%; min-height: 0; display: flex; flex-direction: column; }
  .map__svg { flex: 1; min-height: 0; height: 0; max-height: none; }
  .map__caption { flex: none; margin-top: 4px; font-size: 0.7rem; }
  .zones { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
  .zones[hidden] { display: none; }
  .zone-row__head { min-height: 48px; }
  .map__svg:has(.is-selected) .zone:not(.is-selected, .is-hover) { opacity: 0.65; }
  .is-drawer-open { overflow: auto; }
  .sheet { min-height: 0; }
  .sheet__scroll { grid-auto-rows: max-content; min-width: 0; min-height: 0; padding: 16px 12px; gap: 16px; }
  .sheet__buy { padding: 10px 12px; }
  .sheet__name { font-size: 1.1rem; }
  .sheet__lead { font-size: 0.85rem; }
  .table--price { display: block; overflow-x: auto; }
  .perks h3 span { font-size: 1.05rem; }
  .topbar__logo { width: 80px; }
  /* スマホは下から出るシート */
  .drawer { position: relative; inset: auto; z-index: auto; width: 100%; height: 100%; min-height: 0; box-shadow: none; }
  .sheet { border-left: 0; border-top: 8px solid var(--c); }
  .table--schedule thead { display: none; }
  .table--schedule tr { display: grid; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .table--schedule :is(th, td) { padding: 0; border: 0; }
  .table--price td { font-size: 1.05rem; }
  .table--price :is(th, td) { padding: 8px 6px; }
}
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .drawer:not([hidden]) { animation-name: sheet-in; }
  @keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
}