/*
 * 店舗向け Web 再現デモの見た目（docs/design/store-web-demo/DESIGN.md §4）。
 * ★ 色はアプリの src/theme.ts（ダーク）と同じ値。暗い店内のネオン看板という主題の配色（AGENTS.md デザインスキルの運用ルール §3）。
 *   増やすときは theme.ts にある値だけを使う。
 */
:root {
  color-scheme: dark;
  --base: #0A0E1A; --surface: #111827; --elevated: #1B2436;
  --cyan: #22E4F2; --live: #FF2E97; --win: #93E03A; --gold: #E8C468; --warning: #FFB13D; --lose: #FF5C7A;
  --text: #F2F5FF; --text2: #9AA6C4; --muted: #5C6784;
  --border: #1F2A40; --border-strong: #33456A;
  --ready-tint: rgba(34, 228, 242, 0.12);
  --agent-ground: #070A13; --agent-rail: #0A0E1A; --agent-panel: #0E1422; --agent-raised: #131B2D; --agent-line: #172035;
  --sans: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --head: 'Sora', 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
  --mono: 'Roboto Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--base); color: var(--text); font: 16px/1.6 var(--sans); -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--cyan); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ── 上の帯：体験用であることを常に見せる ── */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; background: rgba(10, 14, 26, 0.94); border-bottom: 1px solid var(--border); }
.brand { font-family: var(--head); font-weight: 700; letter-spacing: 0.02em; }
.honest { flex: 1 1 320px; min-width: 0; font-size: 13px; color: var(--text2); }
.honest b { color: var(--gold); font-weight: 700; }
.chip-btn { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--elevated); cursor: pointer; font-size: 14px; }
.chip-btn[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); }

/* ── 入口と出口 ── */
.hero { max-width: 960px; margin: 0 auto; padding: 40px 16px 64px; }
.hero h1 { font-family: var(--head); font-size: clamp(26px, 4.4vw, 40px); line-height: 1.3; margin: 0 0 12px; text-wrap: balance; }
.hero .lead { color: var(--text2); max-width: 46em; margin: 0 0 28px; }
.chapters { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 0 0 28px; padding: 0; list-style: none; }
.chapter { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.chapter h2 { font-size: 18px; margin: 0; }
.chapter p { margin: 0; color: var(--text2); font-size: 14px; }
.chapter .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--text2); }
.chapter.soon { opacity: 0.6; }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; border: 1.5px solid; }
.tag.premium { color: var(--gold); border-color: var(--gold); }
.tag.free { color: var(--win); border-color: var(--win); }
.tag.soon { color: var(--text2); border-color: var(--border-strong); }
.start-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { min-height: 52px; padding: 0 22px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--elevated); font-weight: 700; cursor: pointer; font-size: 16px; }
.btn.primary { background: var(--cyan); color: var(--base); border-color: var(--cyan); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.note { font-size: 13px; color: var(--text2); }
.narrow-note { display: none; margin: 16px 0 0; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: 12px; font-size: 14px; color: var(--text2); }
@media (max-width: 700px) { .narrow-note { display: block; } }

/* ── 体験の舞台：主役（約 70%）＋脇（約 30%）── */
.stage { display: grid; gap: 12px; padding: 12px 16px 16px; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  grid-template-areas: "main side1" "main side2" "guide side3"; grid-template-rows: auto 1fr auto; align-items: start; }
.stage.full { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "guide"; grid-template-rows: auto auto; }
.stage.full .dev:not(.is-main) { display: none; }
.dev { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dev .cap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text2); min-height: 28px; }
.dev .cap .name { color: var(--text); font-weight: 700; }
.dev .cap .role { color: var(--cyan); font-weight: 700; }
.dev .changed { display: none; color: var(--base); background: var(--cyan); border-radius: 999px; padding: 0 10px; font-size: 12px; font-weight: 700; line-height: 22px; }
.dev.has-change .changed { display: inline-block; }
.dev .slot { position: relative; width: 100%; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: #000; }
.dev.has-change .slot { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(34, 228, 242, 0.35); }
.dev .screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.dev .screen > iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--base); }
.dev .line { font-size: 13px; color: var(--text2); min-height: 1.6em; }
.dev:not(.is-main) .note { display: none; }
.dev .slot { margin: 0 auto; }
.dev .open-btn { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; border: 0; cursor: zoom-in; }
.dev.is-main .open-btn { display: none; }
.dev.is-main .line { display: none; }
.stage .dev.is-main { grid-area: main; }
.stage .dev:not(.is-main)[data-slot="1"] { grid-area: side1; }
.stage .dev:not(.is-main)[data-slot="2"] { grid-area: side2; }
.stage .dev:not(.is-main)[data-slot="3"] { grid-area: side3; }
.offline { font-size: 12px; color: var(--text2); }

/* ── 案内（吹き出し）：主役の下に 1 つだけ ── */
.guide { grid-area: guide; display: grid; grid-template-columns: 1fr; gap: 12px 16px; align-items: center;
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; }
.guide .who { font-size: 13px; font-weight: 700; color: var(--cyan); }
.guide .text { font-size: 17px; line-height: 1.7; margin: 2px 0 0; }
.guide .sub { font-size: 14px; color: var(--text2); margin: 6px 0 0; }
.guide .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.guide .actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.guide .actions .count { margin-right: auto; }
.guide .count { font-family: var(--head); font-size: 13px; color: var(--text2); }
.transcript { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: 12px; font-size: 14px; color: var(--text); }
.transcript small { display: block; color: var(--text2); font-size: 12px; }
.waiting { color: var(--text2); font-size: 14px; }

/* ── 選手のスマホ（通知の見本・本物の画面ではない絵） ── */
.phone { width: 390px; height: 844px; background: radial-gradient(120% 80% at 50% 0%, #1b2440, #070a13 70%); color: var(--text); display: flex; flex-direction: column; align-items: center; padding: 64px 18px; gap: 14px; font-family: var(--sans); }
.phone .clock { font-family: var(--head); font-weight: 300; font-size: 76px; line-height: 1; letter-spacing: 0.01em; }
.phone .date { font-size: 17px; color: #cfd6e6; margin-bottom: 26px; }
.phone .who { font-size: 15px; color: var(--text2); }
.notif { width: 100%; border-radius: 22px; padding: 14px 16px; background: rgba(30, 36, 52, 0.94); border: 1px solid rgba(255, 255, 255, 0.07); display: flex; gap: 12px; align-items: flex-start; }
.notif img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.notif .h { display: flex; justify-content: space-between; font-size: 14px; color: #cfd6e6; }
.notif .t { font-weight: 700; font-size: 17px; }
.notif .b { font-size: 16px; color: #e6eaf5; }
.notif-enter { animation: notifIn 0.45s ease-out; }
@keyframes notifIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ── 狭い画面：主役だけ。ほかの端末は切り替えのボタン ── */
.switcher { display: none; }
@media (max-width: 700px) {
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "switch" "main" "guide"; grid-template-rows: auto auto auto; }
  .stage .dev:not(.is-main) { display: none; }
  .switcher { grid-area: switch; display: flex; gap: 8px; overflow-x: auto; }
  .switcher button { flex: none; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--elevated); font-size: 14px; }
  .switcher button.is-main { border-color: var(--cyan); color: var(--cyan); }
  .switcher button .dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); margin-left: 6px; vertical-align: middle; }
  .switcher button.has-change .dot { display: inline-block; }
  .guide { grid-template-columns: 1fr; }
  .guide .actions { justify-content: stretch; }
  .guide .actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .notif-enter { animation: none; } }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }