/*
 * 縦型モニター用（D25）。1080×1920の画面として作り、app.js で実画面に合わせて拡大縮小する。
 * 表示720×1244mm → 横1.5px/mm・縦1.54px/mm。床からの高さ：y=0が1698mm、y=1920が454mm。
 *   上段  head   y 0〜260     （1698〜1530mm）見出し・進行。遠くからも見える
 *   中段  main   y 260〜1160  （1530〜950mm） 問題・ゲーム。大人も小学生も見やすい
 *   帯    bar    y 1160〜1420 （950〜780mm）  ボタンA・B・Cの意味。物理ボタンの真上に同じ並び
 *   下段  floor  y 1420〜1920 （780〜454mm）  見下ろす位置。重要な情報は置かない
 * 実機は1080×1920。体験者の目は画面から約1.0m、スタッフが操作する（D27）
 * 文字：本文36px（約24mm）以上。問題文58px（約38mm）。
 */
:root {
  --bg: #fbf7ef;
  --ink: #2b2a28;
  --muted: #6d6a64;
  --card: #ffffff;
  --line: #e4ddd0;
  --accent: #e0662c;
  --unseen: #d9d4ca;
  --b0: #2f6fd6;
  --b1: #e0a100;
  --b2: #d9544d;
  /* 物理ボタンの中心（画面左端から）。筐体が決まったら合わせる。1.5px＝1mm */
  --key-x0: 240px;
  --key-x1: 540px;
  --key-x2: 840px;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Meiryo", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #111; }
body { color: var(--ink); line-height: 1.5; -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; }
.b0 { --bc: var(--b0); }
.b1 { --bc: var(--b1); }
.b2 { --bc: var(--b2); }

#stage { position: absolute; left: 50%; top: 50%; width: 1080px; height: 1920px; transform-origin: 50% 50%; background: var(--bg); overflow: hidden; font-size: 36px; }
#app { position: absolute; inset: 0; z-index: 1; }

/* ---- 上段 ---- */
.head { position: absolute; left: 0; right: 0; top: 0; height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 48px 0; text-align: center; }
.eyebrow { margin: 0; color: var(--muted); font-size: 34px; letter-spacing: .12em; }
h1 { margin: 0; font-size: 92px; line-height: 1.1; }
.q-meta { display: flex; align-items: center; gap: 24px; }
.progress { display: flex; align-items: center; gap: 12px; }
.progress span { width: 80px; height: 16px; border-radius: 8px; background: var(--line); }
.progress span.done, .progress span.now { background: var(--c); }
.progress span.now { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--c); }
.progress b { margin-left: 8px; color: var(--muted); font-size: 30px; }
.cat-chip { padding: 4px 24px; border-radius: 999px; background: var(--c); color: var(--on, #fff); font-weight: 800; font-size: 32px; }
.timer {
  position: absolute;
  z-index: 2;
  top: 60px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 188px;
  height: 188px;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 96px;
  font-weight: 900;
  line-height: 1;
  --left: 1;
  --ring: var(--accent);
}
.timer::before,
.timer::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.timer::before { inset: 16px; background: var(--ink); }
.timer::after {
  inset: 0;
  background: conic-gradient(from 0deg, var(--ring) calc(var(--left) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px));
}
.timer.warn { --ring: #b3261e; }
.timer.zero { color: var(--muted); }
.timer.zero::before {
  background: var(--line);
  box-shadow: 0 0 28px 6px color-mix(in srgb, var(--accent) 55%, transparent);
}
.timer.zero::after { opacity: 0; }
.game-name { margin: 0; font-size: 64px; font-weight: 900; color: var(--ct, var(--c)); letter-spacing: .08em; transform: rotate(-3deg); text-shadow: 4px 4px 0 #fff, 7px 7px 0 color-mix(in srgb, var(--c) 30%, transparent); animation: slam .35s cubic-bezier(.2, 1.6, .5, 1); }
@keyframes slam { from { transform: scale(2.4) rotate(-3deg); opacity: 0; } }

/* ---- 中段 ---- */
.main { position: absolute; left: 0; right: 0; top: 260px; height: 900px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 0 48px; text-align: center; }
.q { margin: 0; font-size: 58px; line-height: 1.35; }

.attract .lead { margin: 0; font-size: 52px; line-height: 1.4; font-weight: 700; }
.attract .lead strong { color: var(--accent); }
.note { margin: 0; color: var(--muted); font-size: 30px; }

.q-pic { position: relative; width: 560px; height: 560px; border-radius: 32px; background: var(--card); overflow: hidden; }
.q-pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.q-pic.empty { display: grid; place-items: center; font-size: 260px; font-weight: 900; color: color-mix(in srgb, var(--c) 30%, #fff); }
.img-text { position: absolute; left: 40%; top: 36%; font-size: 60px; font-weight: 900; color: #6b4a06; letter-spacing: .05em; }

/* さがして！ */
.scene { position: relative; width: 984px; height: 656px; overflow: hidden; border-radius: 28px; background: #fffaf0; }
.scene > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.spot { position: absolute; border: 8px solid var(--bc); border-radius: 24px; transition: background .15s, transform .15s; }
.spot.picked { background: color-mix(in srgb, var(--bc) 30%, transparent); transform: scale(1.04); }
.spot-label { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--bc); color: #fff; font-weight: 900; font-size: 44px; box-shadow: 0 0 0 5px #fff; }

/* わけて！：箱はボタンA・Cの真上 */
.sort-item { display: grid; place-items: center; min-width: 520px; min-height: 200px; padding: 24px 40px; border-radius: 32px; background: var(--card); border: 6px solid var(--c); font-size: 64px; font-weight: 900; }
.sort-item.in { animation: drop .3s ease-out; }
.sort-count { margin: -8px 0 0; color: var(--muted); font-size: 30px; }
.sorter { display: grid; grid-template-columns: 1fr 180px 1fr; align-items: stretch; width: 100%; }
.bin { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 280px; padding: 20px; border: 8px dashed var(--bc); border-radius: 32px; background: color-mix(in srgb, var(--bc) 8%, #fff); }
.bin-name { font-size: 44px; font-weight: 900; color: var(--bc); }
.bin-items { display: flex; flex-direction: column; gap: 10px; }
.bin-items span { padding: 6px 18px; border-radius: 14px; background: var(--card); font-size: 32px; font-weight: 700; animation: drop .25s ease-out; }
.sort-arrow { display: grid; place-items: center; color: var(--muted); font-size: 40px; }
@keyframes drop { from { transform: translateY(-40px); opacity: 0; } }

/* とめて！：縦のメーター */
.stopper { display: flex; align-items: center; justify-content: center; gap: 48px; }
.stop-pic { width: 340px; height: 340px; object-fit: contain; border-radius: 32px; background: var(--card); }
.meter { display: flex; gap: 16px; height: 520px; }
.ticks { position: relative; width: 120px; font-size: 28px; color: var(--muted); text-align: right; }
.ticks span { position: absolute; right: 0; transform: translateY(50%); }
.meter-bar { position: relative; width: 96px; height: 100%; border-radius: 48px; background: #eee7da; }
.fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 48px; background: color-mix(in srgb, var(--c) 45%, #fff); }
.needle { position: absolute; left: -24px; right: -24px; height: 14px; margin-bottom: -7px; border-radius: 7px; background: var(--c); }
.meter-value { min-width: 300px; margin: 0; font-size: 96px; font-weight: 900; font-variant-numeric: tabular-nums; }
.stopper.stopped .meter-value { color: var(--ct, var(--c)); animation: pop .3s; }
@keyframes pop { 50% { transform: scale(1.2); } }

/* 発見 */
.verdict { margin: 0; font-size: 104px; font-weight: 900; line-height: 1.1; animation: slam .35s cubic-bezier(.2, 1.6, .5, 1); }
.verdict.ok { color: var(--ct, var(--c)); }
.verdict.ng { color: var(--accent); }
/* 答えの画面（10/15）：あなたの答え・こたえのカード → 学びのひとこと（絵＋マーカー）→ ブースのカード */
.ans-cards { display: flex; gap: 20px; width: 100%; }
.ans-card { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 26px; border-radius: 28px; text-align: left; }
.ans-card.you { background: #efebe3; color: var(--muted); }
.ans-card.right { background: var(--card); border: 6px solid var(--c); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent); }
.ans-tag { font-size: 30px; font-weight: 900; }
.ans-card.right .ans-tag { color: var(--ct, var(--c)); }
.ans-text { font-size: 40px; font-weight: 800; line-height: 1.3; text-wrap: balance; }
.ans-card.you .ans-text { text-decoration: line-through; text-decoration-thickness: 3px; }
.memo { display: flex; align-items: center; gap: 28px; width: 100%; padding: 24px 28px; border-radius: 28px; background: var(--card); border-left: 16px solid var(--c); }
.memo-pic { flex: none; width: 260px; height: auto; border-radius: 18px; }
.memo-text { margin: 0; font-size: 42px; line-height: 1.55; text-align: left; }
.memo-text mark { padding: 0 4px; background: linear-gradient(transparent 55%, color-mix(in srgb, var(--c) 45%, transparent) 55%); color: inherit; font-weight: 900; }
.booth-lead { margin: 0 0 -12px; font-size: 30px; font-weight: 800; color: var(--muted); }
.main.discovery .guide { width: 100%; padding: 16px 28px; text-align: left; }
.main.discovery .no { width: 110px; height: 110px; font-size: 64px; }
.main.discovery .g-cat { font-size: 28px; }
.main.discovery .g-name { font-size: 40px; }
.main.discovery .g-title { font-size: 30px; }
.main.discovery { gap: 28px; }

/* 結果 */
.type-name { margin: 0; font-size: 72px; line-height: 1.2; color: var(--accent); }
.type-name.two-line span { display: block; white-space: nowrap; }
.main.result { justify-content: flex-start; gap: 16px; padding-top: 0; }
.map-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hexmap { width: 380px; height: auto; overflow: visible; }
.main.result .guides { gap: 10px; }
.main.result .guide { min-height: 0; }
.hexmap.small { width: 420px; }
.hex path { stroke-width: 4; stroke-linejoin: round; }
.hex text { text-anchor: middle; font-weight: 800; }
.h-name { font-size: 24px; }
.h-name.two { font-size: 20px; }
.h-state { font-size: 17px; }
.hex.center path { fill: var(--ink); stroke: var(--ink); }
.hex.center text { fill: #fff; font-size: 20px; }
.hex.unseen path { fill: var(--unseen); stroke: #fff; }
.hex.unseen text { fill: var(--muted); }
.hexmap.small .hex.unseen path { fill: var(--c); opacity: .85; }
.hexmap.small .hex.unseen text { fill: var(--on, #fff); }
.hex.known path { fill: var(--c); stroke: #fff; }
.hex.known text { fill: var(--on, #fff); }
.hex.growth path { fill: #fff; stroke: var(--c); stroke-width: 8; animation: glow 1.6s ease-in-out infinite alternate; }
.hex.growth text { fill: var(--ct, var(--c)); }
@keyframes glow { from { filter: drop-shadow(0 0 2px var(--c)); } to { filter: drop-shadow(0 0 14px var(--c)); } }
.legend { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; font-size: 26px; color: var(--muted); }
.legend li::before { content: ""; display: inline-block; width: 24px; height: 24px; margin-right: 8px; vertical-align: -3px; border-radius: 6px; }
.legend .known::before { background: #8a8378; }
.legend .growth::before { background: #fff; border: 4px solid var(--accent); }
.legend .unseen::before { background: var(--unseen); }
.guides { display: flex; flex-direction: column; gap: 12px; width: 100%; text-align: left; }
.guides-title { margin: 0; font-size: 36px; font-weight: 900; text-align: center; }
/* 案内6ブース（10/15）：左＝会場マップで光らせる、右＝一覧（さっきの問題のブース／おすすめ） */
.main.result { height: 1160px; justify-content: center; gap: 36px; } /* A・B・Cの帯を出さない分、中段を下へ広げる */
.button-bar.hidden { display: none; }
.main.thanks, .main.discovery, .main.attract, .main.survey { height: 1160px; } /* 終了画面・各問の答えの画面もA・B・Cの帯を出さない分、中段を下へ広げる */
.venue-wrap { width: 860px; }
.venue-wrap.sm { width: 800px; } /* アンケートの訪問意向：選択肢と一緒に収める */
.main.survey .venue-key { margin: 0 0 -12px; }
.main.survey:has(.venue-wrap) .sv-options { gap: 12px; }
.main.survey:has(.venue-wrap) .sv-options li { min-height: 0; padding: 6px 28px; }
.main.survey:has(.venue-wrap) .sv-no { width: 68px; height: 68px; font-size: 40px; } /* 結果画面の主役はタイプ名と分野マップ。会場マップは補助として一回り小さく */
.venue { display: block; width: 100%; height: auto; }
.v-floor { fill: #fffbea; stroke: #d8cfae; stroke-width: 6; }
.v-road { fill: #cfcac0; }
.v-spot, .v-stage { fill: #e6e1d6; }
.v-exp { fill: #f5d3d0; }
.v-here { fill: #b9d532; }
.v-label { font-size: 34px; font-weight: 800; fill: #8a8378; text-anchor: middle; }
.v-label.small { font-size: 28px; }
.v-label.here { font-size: 40px; fill: var(--accent); }
.v-pin path { fill: var(--accent); }
.v-pin circle { fill: #fff; }
.vb rect { fill: #ebe7dc; }
.vb text { font-size: 32px; font-weight: 800; fill: #b8b0a0; text-anchor: middle; }
.vb.on rect { fill: var(--c); stroke: var(--ink); stroke-width: 5; animation: glow 1.6s ease-in-out infinite alternate; }
.vb.on text { fill: var(--on, #fff); font-size: 46px; }
.v-lead { fill: none; stroke: #a39d90; stroke-width: 5; stroke-linecap: round; } /* 線はグレー。色の意味は名前の赤・黒だけにする */
.v-badge { fill: var(--c); }
.v-badge-no { font-size: 44px; font-weight: 900; fill: var(--on, #fff); text-anchor: middle; }
.v-name { font-size: 44px; font-weight: 800; fill: var(--ink); }
.v-lab.related .v-name { fill: #d7263d; } /* 問題に関連するブース＝赤字、おすすめ＝黒字 */
.venue-key { margin: 0 0 -24px; font-size: 26px; font-weight: 700; color: var(--ink); }
.venue-key span { font-weight: 900; }
.venue-key .related { color: #d7263d; }
.guide { display: flex; align-items: center; gap: 24px; padding: 8px 20px; border-radius: 24px; background: var(--card); border: 5px solid var(--c); }
.no { flex: none; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 20px; background: var(--c); color: var(--on, #fff); font-size: 52px; font-weight: 900; }
.g-text { display: flex; flex-direction: column; line-height: 1.3; }
.g-cat { font-size: 24px; color: var(--ct, var(--c)); font-weight: 800; }
.g-cat em { margin-left: 10px; padding: 0 10px; border-radius: 8px; background: var(--accent); color: #fff; font-style: normal; }
.g-name { font-size: 34px; font-weight: 800; }
.g-title { font-size: 24px; color: var(--muted); }

/* ---- ボタン案内帯：物理ボタンの真上 ---- */
.button-bar { position: absolute; left: 0; right: 0; top: 1160px; height: 260px; }
.pbtn { position: absolute; top: 0; bottom: 0; width: 300px; margin-left: -150px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 0 18px; border: 0; background: none; cursor: pointer; }
.pbtn.b0 { left: var(--key-x0); }
.pbtn.b1 { left: var(--key-x1); }
.pbtn.b2 { left: var(--key-x2); }
.pbtn-label { order: -1; display: grid; place-items: center; width: 100%; min-height: 96px; padding: 10px 14px; border-radius: 22px; background: var(--card); border: 5px solid var(--bc); font-size: 36px; font-weight: 800; line-height: 1.25; transition: transform .1s; }
.pbtn-key { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: var(--bc); color: #fff; font-size: 56px; font-weight: 900; box-shadow: 0 10px 0 color-mix(in srgb, var(--bc) 60%, #000); transition: transform .08s, box-shadow .08s; }
.pbtn.off { opacity: .15; }
.pbtn.hit .pbtn-key { transform: translateY(8px); box-shadow: 0 2px 0 color-mix(in srgb, var(--bc) 60%, #000); }
.pbtn.picked .pbtn-label { background: var(--bc); color: #fff; transform: scale(1.05); }
/* 選択肢そのものを出す帯（えらんで・さがして）は文字枠を大きく */
.button-bar.choices .pbtn-label { min-height: 136px; font-size: 38px; }

/* ---- 下段（見下ろす位置） ---- */
.floor { position: absolute; left: 0; right: 0; bottom: 0; height: 500px; display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 48px; background: linear-gradient(var(--bg), color-mix(in srgb, var(--bg) 70%, #d9d0bf)); color: var(--muted); font-size: 34px; font-weight: 800; }
.floor p { margin: 0; font-size: 44px; color: var(--ink); }
.floor p#floor-note { margin: 0; font-size: 32px; font-weight: 700; color: var(--muted); }
.floor-keys { position: relative; width: 100%; height: 120px; }
.floor-keys span { position: absolute; top: 0; width: 120px; height: 120px; margin-left: -60px; display: grid; place-items: center; border-radius: 50%; background: var(--bc); color: #fff; font-size: 60px; opacity: .35; }
.floor-keys .b0 { left: var(--key-x0); }
.floor-keys .b1 { left: var(--key-x1); }
.floor-keys .b2 { left: var(--key-x2); }

/* ---- オーバーレイ ---- */
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .45); z-index: 10; }
.overlay[hidden] { display: none; }
.dialog { background: var(--card); border-radius: 32px; padding: 48px 56px; text-align: center; max-width: 900px; }
.dialog-title { margin: 0 0 12px; font-size: 52px; font-weight: 900; }
.dialog-hint { color: var(--muted); font-size: 30px; }
.dialog.admin { text-align: left; font-size: 30px; }
.btn { border: 4px solid var(--ink); background: var(--card); border-radius: 999px; padding: 12px 40px; font-weight: 800; cursor: pointer; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.small { font-size: 28px; padding: 8px 24px; }
.btn.danger { border-color: #b3261e; color: #b3261e; }
.admin-actions { display: flex; gap: 16px; flex-wrap: wrap; }
#admin-hotspot { position: absolute; top: 0; left: 0; width: 120px; height: 120px; z-index: 5; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- アンケート（結果の後・任意） ---- */
.sv-title { margin: 0; font-size: 52px; line-height: 1.3; }
.main.survey { gap: 20px; }
.sv-options { display: flex; flex-direction: column; gap: 18px; width: 100%; margin: 0; padding: 0; list-style: none; text-align: left; }
.sv-options li { display: flex; align-items: center; gap: 28px; min-height: 120px; padding: 12px 32px; border-radius: 28px; background: var(--card); border: 5px solid var(--line); font-size: 44px; font-weight: 800; line-height: 1.25; cursor: pointer; transition: transform .1s; }
.sv-no { flex: none; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 52px; font-weight: 900; }
.sv-options li.picked { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, #fff); transform: scale(1.03); }
.sv-options li.picked .sv-no { background: var(--accent); }
.thanks .lead { margin: 0; font-size: 56px; font-weight: 800; line-height: 1.4; }

/* ---- アイコン（icons.js）と仮の絵（10/7叩き台。画像が入ったら q.img が優先） ---- */
.ic { display: block; width: 100%; height: 100%; }
.ic .f { fill: currentColor; fill-opacity: .18; }
.ph-tag { position: absolute; right: 16px; top: 12px; padding: 2px 14px; border-radius: 999px; background: rgba(0, 0, 0, .08); color: var(--muted); font-size: 22px; font-weight: 700; }
.q-pic.icons { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 40px; background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--ct, var(--c)); }
.q-pic.icons .ic { width: 340px; height: 340px; }
.q-pic.icons.n2 .ic { width: 230px; height: 230px; }
.q-pic.icons.n2 .ic + .ic { color: var(--ink); }
.stop-pic.icons { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--ct, var(--c)); }
.stop-pic.icons .ic { width: 200px; height: 200px; }
.stop-pic.icons.n2 .ic { width: 140px; height: 140px; }
.stop-pic.icons.n2 .ic + .ic { color: var(--ink); }
/* 選択肢のアイコン：文字の上に小さく */
/* 選択肢の文字は縮めず、長いときは上へ伸ばす（キーに重ねない） */
.pbtn-label { flex: none; }
.pbtn-label.with-icon { display: flex; align-items: center; gap: 8px; text-align: left; }
.pbtn-label.with-icon .ic { width: 52px; height: 52px; flex: none; color: var(--bc); }
.pbtn.picked .pbtn-label.with-icon .ic { color: #fff; }
.button-bar.choices .pbtn-label { font-size: 34px; }
/* さがして！の仮の場面：スポットの中にアイコン */
.scene.icon-scene { background: color-mix(in srgb, var(--c) 8%, #fff); }
.icon-scene .spot { display: grid; place-items: center; padding: 28px 28px 96px; background: #fff; }
.icon-scene .spot .ic { width: 100%; height: 100%; max-width: 240px; color: var(--ink); }
/* わけて！のカード：アイコン＋文字 */
.sort-item { gap: 28px; }
.sort-item:has(.ic) { display: flex; align-items: center; }
.sort-item .ic { width: 140px; height: 140px; flex: none; color: var(--ct, var(--c)); }


/* ---- 10/9打合せ用仕上げ：絵と文字を読みやすく ---- */
.q { text-wrap: balance; }
.q-pic { flex: none; box-shadow: 0 8px 24px rgba(36, 39, 56, .035); }
.scene { flex: none; }
.spot { border-width: 6px; border-radius: 28px; }
.spot-label { width: 76px; height: 76px; bottom: 12px; }
.scene-note { position: absolute; bottom: 6px; left: 0; right: 0; font-size: 26px; font-weight: 600; color: #5f6068; background: rgba(255,255,255,.9); padding: 4px 12px; }
.scene-copy { position: absolute; display: flex; align-items: center; justify-content: center; white-space: pre-line; font-size: 30px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; padding: 8px; color: #343b52; }
.sms-title { font-size: 32px; justify-content: flex-start; text-align: left; }
.sms-link { color: #215fc4; text-decoration: underline; background: #eef5ff; border-radius: 16px; }
.sms-time { color: #686a73; font-size: 30px; font-weight: 500; }
.sms-back { font-size: 30px; background: #f0f2f6; border-radius: 12px; }
.button-bar.choices .pbtn-label { font-size: 36px; text-wrap: balance; }
.pbtn-label.with-icon { gap: 12px; }
.pbtn-label.with-icon .ic { width: 56px; height: 56px; stroke-width: 4; }
.pbtn-label.with-icon > span { flex: 1; min-width: 0; }
.sort-item { width: 880px; max-width: 100%; min-height: 224px; padding: 24px 32px; border-width: 4px; border-radius: 28px; font-size: 58px; line-height: 1.3; gap: 24px; box-shadow: 0 12px 30px rgba(36,39,56,.04); }
.sort-item .ic { width: 120px; height: 120px; }
.sort-item > span { min-width: 0; text-wrap: balance; }
.sorter { grid-template-columns: 1fr 100px 1fr; }
.bin { min-height: 248px; padding: 16px; border-width: 5px; border-style: solid; }
.bin-items { width: 100%; }
.bin-items span { max-width: 100%; overflow-wrap: anywhere; line-height: 1.25; }
.stopper { gap: 28px; }
.stop-figure { position: relative; width: 320px; height: 320px; flex: none; }
.stop-pic { display: block; width: 320px; height: 320px; }
.stop-figure .img-text { left: 44%; top: 53%; font-size: 40px; line-height: 1; padding: 4px 8px; border-radius: 6px; background: rgba(255,247,215,.86); }
.meter-value { min-width: 240px; }

.q { white-space: pre-line; }
.sort-arrow { font-size: 36px; white-space: nowrap; }

.stopper { padding-block: 24px; }

/* 結果：分野マップと凡例を横並びにし、会場マップと6ブースの案内を中段に収める。 */
.main.result .map-wrap { flex-direction: row; gap: 36px; }
.main.result .hexmap { width: 420px; }
.main.result .legend { flex-direction: column; gap: 14px; font-size: 32px; }

/* 待機画面：A・B・Cの帯の代わりに光る「スタート」1つ（#42、10/19） */
.start-glow { margin: 24px 0 0; padding: 22px 120px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 72px; font-weight: 900; letter-spacing: .2em; animation: startGlow 1.4s ease-in-out infinite alternate; }
@keyframes startGlow { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); transform: scale(1); } to { box-shadow: 0 0 0 28px color-mix(in srgb, var(--accent) 0%, transparent), 0 0 48px color-mix(in srgb, var(--accent) 70%, transparent); transform: scale(1.06); } }
/* モバイル版（#51）：「タップしてスタート」を1行に */
.mobile .start-glow { padding: 22px 64px; letter-spacing: .04em; }
/* スマートフォンでは、上段の案内と長い説明を画面の端から離す。
 * 中段の下端は1420pxのままにして、下段の説明と重ねない。 */
.mobile .head:has(+ .main.attract) { height: 340px; padding-top: 48px; }
.mobile .main.attract { top: 340px; height: 1080px; }
.mobile .floor { padding-inline: 48px; }
.mobile #floor-text {
  width: 100%;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
}
body.kids .q,
body.kids .pbtn-label,
body.kids .scene-copy,
body.kids .scene-note,
body.kids .sort-item > span,
body.kids .bin-name,
body.kids .bin-items span,
body.kids .ans-text,
body.kids .memo-text,
body.kids .verdict,
body.kids .booth-lead,
body.kids .venue-key,
body.kids .sv-title,
body.kids .sv-options li,
body.kids .thanks .lead,
body.kids #floor-text {
  word-break: auto-phrase;
}

.voice-credit {
  position: absolute;
  right: 36px;
  bottom: 28px;
  z-index: 2;
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--muted);
  pointer-events: none;
}