/*
 * Partner Connect Rally
 *
 * 参加者アプリ（body.rally）は、イベント支給のステッカー（カプセル帯）とロゴに合わせる。
 * ミッションの5レイヤーに Google の4色と4Cグラデーション（隠しQR）を割り当て、進み具合はカプセルの伸びで見せる。
 * それ以外（背景・文字・枠）は白とグレーで静かに保つ。
 *
 * 色は docs/Google brand palette (digital).pdf の値だけを使う。
 *   - 4色は 500 を塗りに使い、上に載せる文字・アイコンは Grey 1200（白は 4.5:1 に届かない）
 *   - 文字色は 800〜1100、薄い背景は 10〜50、グレーは Greys の段階から
 *   - 遷移色（ティール・ピンク・紫など）は 4C グラデーションの中だけで使う
 *
 * 書体は Google Sans Flex（欧文・数字）、アイコンは Material Symbols Rounded。
 * どちらも web/vendor/fonts/ に同梱する（外部から読み込まない: 会場回線と、URL上の uid を外部に送らないため）。
 * 和文は端末の標準書体（Google Sans Flex は欧文のみ）。
 * ロゴ（web/img/logo-*.png）とステッカー（web/img/sticker-*.png）は docs/design/2x/ の支給素材。
 * Google / Google Cloud のロゴは、支給を受けるまで置かない。
 */
@font-face {
  font-family: "Google Sans Flex";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/vendor/fonts/GoogleSansFlex-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400 700;
  font-display: block; /* 読み込み前にアイコン名の文字が見えないようにする */
  src: url("/vendor/fonts/MaterialSymbolsRounded-subset.woff2") format("woff2");
}

:root {
  /* Google brand palette (digital) — Core 500 */
  --g-blue: #3186FF;
  --g-red: #FC413D;
  --g-yellow: #FEC700;
  --g-green: #00AF57;
  /* 文字に使う濃い段階（薄い背景の上で 5.9:1 以上） */
  --g-blue-dark: #1F3B9B;   /* Blue 900 */
  --g-red-dark: #990D0E;    /* Red 900 */
  --g-yellow-dark: #7A2B00; /* Yellow 1100 */
  --g-green-dark: #00694E;  /* Green 900 */
  /* お知らせの背景（各色 20 / 10） */
  --g-blue-tint: #DCF1FF;
  --g-red-tint: #FFEEF7;
  --g-yellow-tint: #FEFFE1;
  --g-green-tint: #DAF9D4;
  /* Greys */
  --g-grey-1200: #121317;
  --g-grey-1000: #212226;
  --g-grey-900: #2F3034;
  --g-grey-800: #45474D;
  --g-grey-50: #E6EAF0;
  --g-grey-20: #EFF2F7;
  --g-grey-10: #F8F9FC;

  /* 4C グラデーション（ガイドラインの順・重み。遷移色はここでしか使わない） */
  --g-4c: linear-gradient(90deg,
    #3186FF 0%, #3C90FF 7.7%, #00A9BB 15.4%, #0EBC5F 23.1%, #0EBC5F 30.8%, #88DE42 38.5%,
    #FFDB0F 46.2%, #FEC700 53.8%, #FF6B2B 61.5%, #FC413D 69.2%, #FC413D 76.9%,
    #F96BD6 84.6%, #9378FF 92.3%, #3186FF 100%);

  /* UI 用 */
  --action: #2051DA;        /* Blue 800。白地で 6.5:1 */
  --action-press: #1F3B9B;  /* Blue 900 */
  --action-container: var(--g-blue-tint);
  --on-action-container: #14204F; /* Blue 1100 */
  --ink: var(--g-grey-1000);
  --ink-soft: var(--g-grey-800);
  --on-fill: var(--g-grey-1200); /* 4色の塗りの上の文字（白は不可） */
  --outline: var(--g-grey-50);
  --surface: #FFFFFF;
  --bg: var(--g-grey-10);
  --scrim: rgba(18, 19, 23, 0.5); /* Grey 1200 */

  /* レイヤー → 色（1 一般 / 2 興味タグ / 3 ブース / 4 ピープル / 5 隠し） */
  --layer-1: var(--g-blue);
  --layer-2: var(--g-red);
  --layer-3: var(--g-yellow);
  --layer-4: var(--g-green);
  --layer-5: var(--g-4c);

  /* 欧文・数字は Google Sans Flex、和文はその後ろの端末書体に落ちる（並び順が大事） */
  --font-body: "Google Sans Flex", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, Roboto, sans-serif;
  --font-num: "Google Sans Flex", Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --radius-l: 28px;
  --radius-m: 16px;
  --radius-s: 8px;
  --gutter: 16px;
  --nav-h: 72px;
  --fab-h: 56px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--action); }

/* Material Symbols（アイコン名を文字で書く。aria-hidden を付けて読み上げさせない） */
.msr {
  font-family: "Material Symbols Rounded";
  font-weight: 500;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
  user-select: none;
}
.msr-fill { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }

.hidden { display: none !important; }

:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
}

h1, h2, h3 { line-height: 1.35; margin: 0; }
h1 { font-size: 24px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }

.muted { color: var(--ink-soft); }
.small { font-size: 13px; }
.center { text-align: center; }
.lede { font-size: 16px; color: var(--ink-soft); margin: 8px 0 0; }

/* ページ（運営・スタッフ設定など単独ページ） */
.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--gutter) 48px;
}

/* ロゴ（運営・スタッフは1行のロゴ。暗い背景の大画面は4色のドット。Google ロゴは使わない） */
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}
a.wordmark { min-height: 44px; } /* リンクのときはタップ領域を確保する */
.wordmark-logo { display: block; width: auto; height: 20px; }
.dots { display: inline-grid; grid-template-columns: repeat(2, 7px); gap: 3px; flex: none; }
.dots i { width: 7px; height: 7px; border-radius: 50%; }
.dots i:nth-child(1) { background: var(--g-blue); }
.dots i:nth-child(2) { background: var(--g-red); }
.dots i:nth-child(3) { background: var(--g-yellow); }
.dots i:nth-child(4) { background: var(--g-green); }

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 12px;
}
.masthead-link { font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* --- ボタン --- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary { background: var(--action); color: #fff; }
.btn-primary:active { background: var(--action-press); }
.btn-primary:disabled { background: var(--g-grey-50); color: var(--ink-soft); cursor: default; }
.btn-quiet { background: var(--surface); color: var(--action); border: 1px solid var(--outline); }
.btn-tonal { background: var(--action-container); color: var(--on-action-container); }
.btn-small { display: inline-flex; width: auto; min-height: 44px; margin: 0; padding: 8px 16px; font-size: 14px; }

.btn-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--action);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* --- 入力 --- */
.field { display: block; margin-top: 16px; }
.field span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--outline);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* iOS のズーム防止 */
}
.input:focus { border-color: var(--action); outline: 2px solid var(--action); outline-offset: -1px; }

/* --- 面・お知らせ --- */
.panel {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-m);
  padding: 20px;
  margin-top: 16px;
}
.section { margin-top: 28px; }
.section > h2 { margin-bottom: 10px; }

.notice { margin-top: 16px; padding: 12px 16px; border-radius: var(--radius-s); font-size: 15px; }
.notice-error { background: var(--g-red-tint); color: var(--g-red-dark); }
.notice-info { background: var(--g-blue-tint); color: var(--g-blue-dark); }
.notice-warn { background: var(--g-yellow-tint); color: var(--g-yellow-dark); }
.notice-ok { background: var(--g-green-tint); color: var(--g-green-dark); }

/* --- タグ --- */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag {
  padding: 4px 12px;
  border: 1px solid var(--outline);
  border-radius: var(--radius-s);
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--surface);
}
.tag-match { border-color: transparent; background: var(--g-red-tint); color: var(--g-red-dark); font-weight: 700; }
body.rally .tag { border-radius: 999px; padding: 5px 14px; }

/* =========================================================
 * アプリ（index.html）
 * ========================================================= */
.app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 var(--gutter) calc(var(--nav-h) + var(--fab-h) + 24px + env(safe-area-inset-bottom));
}
body.rally { background: var(--surface); }
body.rally .btn-primary { background: var(--ink); }
body.rally .btn-primary:active { background: var(--g-grey-800); }
body.rally .btn-quiet { color: var(--ink); }
body.rally .btn-tonal { background: var(--g-grey-20); color: var(--ink); }

.app-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 calc(var(--gutter) * -1);
  padding: 12px var(--gutter);
  background: var(--surface);
}
.app-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-logo { display: block; width: auto; height: 36px; }

.points-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.points-chip small { font-size: 12px; color: rgba(255, 255, 255, 0.8); font-weight: 600; }

/* QRを読み取る: 下部タブの上に浮かせる（片手の親指で届く位置） */
.scan-fab {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) - var(--fab-h) / 2 + 6px);
  z-index: 7;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 208px;
  height: var(--fab-h);
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(18, 19, 23, 0.28);
  -webkit-tap-highlight-color: transparent;
}
.scan-fab:active { background: var(--g-grey-800); }
.scan-fab .msr { font-size: 24px; }

.staff-banner {
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: var(--radius-s);
  background: var(--g-grey-1200);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* 下部タブ（Material 3 navigation bar） */
.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-top: calc(var(--fab-h) / 2 - 10px);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--outline);
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 26px;
  border-radius: 999px;
}
.nav-item[aria-selected="true"] { color: var(--ink); font-weight: 700; }
.nav-item[aria-selected="true"] .msr { font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24; }

.tab-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 20px; }
.tab-head p { margin: 0; }
.tab-head-flush { margin-top: 0; }
/* タブの見出しは右上にストライプのモチーフを置く */
.tab-head-deco { position: relative; display: block; min-height: 92px; padding-top: 12px; margin-top: 0; }
.tab-head-deco h2 { position: relative; font-size: 28px; font-weight: 800; }
.tab-head-deco p { position: relative; margin-top: 2px; }

/* ステッカー画像の枠。画面端からはみ出す分はこの枠で切り、横スクロールを出さない。
 * 画像は @2x（実寸の半分の幅で表示）。カプセル端の柄が欠けないよう、切るのは画面の右端だけにする */
.motif { position: absolute; z-index: 0; overflow: hidden; pointer-events: none; }
.motif img { position: absolute; display: block; height: auto; }
.motif-home { top: 4px; right: calc(var(--gutter) * -1); width: 168px; height: 164px; }
.motif-home img { top: 0; left: 12px; width: 150px; }
.motif-missions { top: 8px; right: calc(var(--gutter) * -1); width: 156px; height: 84px; }
.motif-missions img { top: 0; left: 0; width: 168px; }
.motif-menu { top: 8px; right: calc(var(--gutter) * -1); width: 176px; height: 84px; }
.motif-menu img { top: 0; left: 0; width: 200px; }
.motif-guest { top: 0; right: calc(var(--gutter) * -1); width: 220px; height: 200px; }
.motif-guest img { top: 0; left: 24px; width: 184px; }

/* --- ホーム --- */
/* チェックイン後: 白地に大きな数字。右上に斜めのカプセル帯のモチーフを敷く */
.hero-card { position: relative; padding: 16px 0 0; }
.hero-card .status-name, .hero-card .score, .hero-card .facts { position: relative; z-index: 1; }
.hero-card .status-name { max-width: 60%; color: var(--ink-soft); font-weight: 600; font-size: 15px; }
.hero-card .score-num { font-size: 96px; font-weight: 800; letter-spacing: -0.04em; font-variation-settings: "opsz" 144; }
.hero-card .score-unit { color: var(--ink); font-size: 22px; }
.hero-card .facts div { border-radius: var(--radius-m); }

/* チェックイン前: 見出しの右上に帯のモチーフ */
.hero-guest { position: relative; padding: 196px 0 4px; }
.hero-guest h1, .hero-guest p { position: relative; }
.hero-guest h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.4; }

.status-name { margin: 0 0 4px; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }

.next-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.next-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--outline);
  font-size: 15px;
  line-height: 1.55;
}
.next-list li::before {
  content: "";
  flex: none;
  align-self: stretch;
  width: 10px;
  min-height: 32px;
  border-radius: 5px;
  background: var(--layer-color, var(--layer-1));
}
.next-list b { font-weight: 700; }

.steps { list-style: none; margin: 20px 0 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 0 0 18px 56px; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 40px;
  height: 24px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--layer-1);
  color: var(--on-fill);
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 800;
}
.steps li:nth-child(2)::before { background: var(--layer-3); }
.steps li:nth-child(3)::before { background: var(--layer-4); }
.steps p { margin: 2px 0 0; color: var(--ink-soft); font-size: 15px; }

/* --- メニュー --- */
.rules { list-style: none; margin: 8px 0 0; padding: 0; }
.rules li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--outline); font-size: 15px; }
.rules li:first-child { border-top: 0; }
body.rally .panel { border-radius: 20px; }
.rules b { font-family: var(--font-num); white-space: nowrap; }

/* --- トースト（重複などの軽い知らせ） --- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + var(--fab-h) + 12px + env(safe-area-inset-bottom));
  z-index: 30;
  width: max-content;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
  padding: 12px 18px;
  border-radius: var(--radius-s);
  background: var(--g-grey-1200);
  color: #fff;
  font-size: 15px;
  box-shadow: 0 2px 6px rgba(18, 19, 23, 0.3);
}

/* --- ホームのスタンプ: レイヤーごとのカプセル --- */
.layer-bars { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.layer-bars li { display: grid; grid-template-columns: 72px 1fr 40px; align-items: center; gap: 10px; }
.layer-bar-name { font-size: 13px; color: var(--ink-soft); }
.layer-bar-track { height: 22px; border-radius: 11px; background: var(--g-grey-20); overflow: hidden; }
.layer-bar-track span { display: block; height: 100%; border-radius: 11px; background: var(--layer-color); }
.layer-bar-count { font-family: var(--font-num); font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* --- ミッション一覧 --- */
/* 塗りの上のチェック・数字は Grey 1200（4色とも白では 4.5:1 に届かない） */
.layer-1 { --layer-color: var(--layer-1); --on-layer: var(--on-fill); }
.layer-2 { --layer-color: var(--layer-2); --on-layer: var(--on-fill); }
.layer-3 { --layer-color: var(--layer-3); --on-layer: var(--on-fill); }
.layer-4 { --layer-color: var(--layer-4); --on-layer: var(--on-fill); }
.layer-5 { --layer-color: var(--layer-5); --on-layer: var(--on-fill); }

.layer-pill { display: inline-block; flex: none; width: 28px; height: 12px; border-radius: 6px; background: var(--layer-color); }

/* 絞り込みチップ（横にスクロール） */
.chips {
  display: flex;
  gap: 8px;
  margin: 8px calc(var(--gutter) * -1) 0;
  padding: 4px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--outline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.chip .layer-pill { width: 14px; height: 8px; border-radius: 4px; }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }

.card-layer { margin-top: 20px; }
.card-layer h3 { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.card-layer h3 span:last-child { margin-left: auto; color: var(--ink-soft); font-weight: 600; font-size: 13px; font-family: var(--font-num); }

.stamps { list-style: none; margin: 6px 0 0; padding: 0; }
.stamps li { border-bottom: 1px solid var(--g-grey-20); }
.stamp {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.stamp-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px dashed var(--g-grey-800);
}
.stamp.is-staff:not(.is-done) .stamp-mark { border-style: dotted; }
.stamp.is-done .stamp-mark { border: 0; background: var(--layer-color); color: var(--on-layer); }
.stamp-mark .msr { font-size: 20px; font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 0, "opsz" 24; }
.stamp-body { flex: 1; min-width: 0; }
.stamp-title { display: block; font-size: 14px; font-weight: 600; line-height: 1.45; }
.stamp-sub {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stamp-pts { flex: none; font-family: var(--font-num); font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.stamp.is-done .stamp-pts { color: var(--ink); }

/* 達成の瞬間: 点線の丸がレイヤー色の丸に弾んで変わる（結果表示後に1回だけ） */
@keyframes pop-in {
  0% { transform: scale(0.3); }
  55% { transform: scale(1.18); }
  78% { transform: scale(0.94); }
  100% { transform: scale(1); }
}
.stamp.is-new .stamp-mark { animation: pop-in 640ms cubic-bezier(.34, 1.4, .64, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .stamp.is-new .stamp-mark { animation: none; }
}

/* --- マイページ --- */
.score { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.score-num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.score-unit { font-size: 18px; font-weight: 700; color: var(--ink-soft); }

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 20px 0 0;
}
.facts div { padding: 10px 12px; border-radius: var(--radius-s); background: var(--g-grey-20); }
.facts dt { font-size: 12px; color: var(--ink-soft); }
.facts dd { margin: 0; font-family: var(--font-num); font-size: 24px; font-weight: 700; }

.name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.name-row h2 { font-size: 20px; overflow-wrap: anywhere; }
.name-row .btn { flex: none; white-space: nowrap; }

/* --- 更新時刻 --- */
.updated { font-size: 12px; color: var(--ink-soft); margin-top: 10px; }

/* --- 下から出るシート（結果・チェックイン・ミッション詳細） --- */
.sheet {
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  max-height: 88dvh;
  margin: auto auto 0;
  padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: var(--surface);
  color: var(--ink);
  overflow-y: auto;
}
.sheet::backdrop { background: var(--scrim); }
body.rally .sheet { position: relative; }
.sheet-handle { width: 32px; height: 4px; margin: 0 auto 16px; border-radius: 2px; background: var(--outline); }
.sheet p { margin: 8px 0 0; }

/* 成功: 上に帯のモチーフ。知らせ・エラー: 色のカプセルと丸だけ */
.result-art { position: relative; height: 128px; margin: -4px -20px 0; overflow: hidden; }
.result-art img { position: absolute; left: 50%; top: 4px; width: 288px; height: auto; transform: translateX(-50%); }
.result-mark { display: flex; gap: 6px; margin-top: 8px; }
.result-mark i { display: block; height: 14px; width: 40px; border-radius: 7px; background: var(--layer-4); }
.result-mark i + i { width: 14px; }
.result-mark.is-info i { background: var(--layer-1); }
.result-mark.is-error i { background: var(--layer-2); }

.result-head { margin-top: 14px; }
.result-head.is-ok { text-align: center; }
.result-kicker { margin: 0 !important; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.result-title { margin-top: 2px; font-size: 24px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.result-head.is-ok .result-title { font-size: 28px; }
.result-head.is-ok + .tags { justify-content: center; }
.result-sub { margin-top: 6px; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* 獲得ポイント: 黒いピル。獲得の瞬間に斜めのカプセルが周りへ弾ける（1回だけ・視差効果を減らす設定では出さない） */
.result-points {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 14px;
  padding: 6px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
}
.result-points .score-num { position: relative; z-index: 1; font-size: 34px; font-weight: 800; }
.result-points .score-unit { position: relative; z-index: 1; color: #fff; font-size: 16px; }
.burst { position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none; }
.burst-bit {
  position: absolute;
  width: var(--len);
  height: 8px;
  margin: -4px 0 0 calc(var(--len) / -2);
  border-radius: 4px;
  background: var(--layer-color);
  animation: fly 900ms cubic-bezier(.2, .9, .3, 1.15) forwards;
}
.burst-blue { --layer-color: var(--g-blue); }
.burst-red { --layer-color: var(--g-red); }
.burst-yellow { --layer-color: var(--g-yellow); }
.burst-green { --layer-color: var(--g-green); }
@keyframes fly {
  0% { transform: translate(0, 0) rotate(-45deg) scale(0.2); opacity: 0; }
  20% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(-45deg) scale(1); opacity: 0; }
}
/* 興味タグのマッチ: 興味タグのレイヤー色（赤）の帯で、会話のきっかけとして目立たせる */
.match { margin-top: 18px; padding: 14px 16px; border-radius: 20px; background: var(--g-red-tint); }
.match-title { display: flex; align-items: center; gap: 10px; margin: 0 !important; font-size: 16px; font-weight: 800; color: var(--g-red-dark); }
.match-title::before { content: ""; flex: none; width: 24px; height: 10px; border-radius: 5px; background: var(--layer-2); }
.match .tags { margin-top: 8px; }
.match .tag-match { background: #fff; }
.match-hint { margin: 8px 0 0 !important; font-size: 14px; line-height: 1.6; color: var(--ink); }
.result-lines { margin: 18px 0 0; padding: 0; list-style: none; }
.result-lines li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--g-grey-20); }
.result-lines b { font-family: var(--font-num); font-size: 17px; white-space: nowrap; }
.result-lines b.is-stamp { font-family: var(--font-body); font-size: 13px; color: var(--ink-soft); }
.result-lines .dot { display: inline-block; width: 24px; height: 10px; border-radius: 5px; margin-right: 10px; background: var(--layer-color); vertical-align: middle; }

/* --- スキャナ（全画面） --- */
.scanner {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
}
.scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scanner-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(68vw, 280px);
  aspect-ratio: 1;
  transform: translate(-50%, -55%);
  border-radius: 24px;
  box-shadow: 0 0 0 100vmax rgba(18, 19, 23, 0.55);
}
/* 四隅をモチーフの4色のカプセルで描く */
.corner { position: absolute; width: 64px; height: 64px; }
.corner::before, .corner::after { content: ""; position: absolute; border-radius: 6px; background: var(--c); }
.corner::before { width: 64px; height: 12px; }
.corner::after { width: 12px; height: 64px; }
.corner-tl { top: 0; left: 0; --c: var(--g-blue); }
.corner-tr { top: 0; right: 0; --c: var(--g-red); }
.corner-tr::before, .corner-tr::after { right: 0; }
.corner-bl { bottom: 0; left: 0; --c: var(--g-green); }
.corner-bl::before, .corner-bl::after { bottom: 0; }
.corner-br { bottom: 0; right: 0; --c: var(--g-yellow); }
.corner-br::before, .corner-br::after { right: 0; bottom: 0; }
.scanner-top, .scanner-bottom { position: relative; z-index: 1; padding: 16px var(--gutter); }
.scanner-top { display: flex; justify-content: space-between; align-items: center; padding-top: calc(16px + env(safe-area-inset-top)); }
.scanner-bottom { margin-top: auto; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.scanner-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
}
.scanner-msg { margin: 0; padding: 16px 20px; border-radius: 24px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 600; }
.scanner-msg.is-error { color: var(--g-red-dark); font-weight: 500; }

/* --- 会場の大画面（leaderboard.html・管理キー必須） --- */
body.screen { background: var(--g-grey-1200); color: #fff; overflow: hidden; }
.screen-wrap { padding: 4vh 5vw; height: 100vh; display: flex; flex-direction: column; }
.screen-head { display: flex; justify-content: space-between; align-items: center; }
.screen-head h1 { display: flex; align-items: center; gap: 1.4vw; font-size: 4.2vh; font-weight: 700; }
.screen-head .dots { grid-template-columns: repeat(2, 1.2vh); gap: 0.5vh; }
.screen-head .dots i { width: 1.2vh; height: 1.2vh; }
.screen-head p { margin: 0; font-size: 2.2vh; color: var(--g-grey-50); }
.screen-board {
  flex: 1;
  list-style: none;
  margin: 3vh 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, 1fr);
  gap: 1.6vh 4vw;
}
.screen-board li {
  display: grid;
  grid-template-columns: 9vh 1fr auto;
  align-items: center;
  gap: 2vw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.screen-board .pos {
  display: grid;
  place-items: center;
  width: 7.5vh;
  height: 7.5vh;
  border-radius: 50%;
  border: 0.3vh solid rgba(255, 255, 255, 0.35);
  font-family: var(--font-num);
  font-size: 3.4vh;
  font-weight: 700;
}
.screen-board li.rank-1 .pos { border: 0; background: var(--g-blue); color: var(--on-fill); }
.screen-board li.rank-2 .pos { border: 0; background: var(--g-red); color: var(--on-fill); }
.screen-board li.rank-3 .pos { border: 0; background: var(--g-yellow); color: var(--on-fill); }
.screen-board .who { font-size: 4vh; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-board .pts { font-family: var(--font-num); font-size: 5.2vh; font-weight: 700; font-variant-numeric: tabular-nums; }
.screen-board .pts small { font-size: 2.2vh; margin-left: 0.4vw; color: var(--g-grey-50); }
.screen-foot { font-size: 2vh; color: var(--g-grey-50); margin-top: 2vh; }

/* 大画面の管理キー入力 */
.screen-login { max-width: 420px; margin: 20vh auto 0; padding: 0 var(--gutter); }
.screen-login p { color: var(--g-grey-50); }

/* --- 運営画面 --- */
body.ops .page { max-width: 1080px; }
.ops-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .ops-grid { grid-template-columns: 1fr 1fr; } }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.kpis div { background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius-m); padding: 12px 16px; }
.kpis div:nth-child(1) { border-top: 4px solid var(--g-blue); }
.kpis div:nth-child(2) { border-top: 4px solid var(--g-red); }
.kpis div:nth-child(3) { border-top: 4px solid var(--g-yellow); }
.kpis div:nth-child(4) { border-top: 4px solid var(--g-green); }
.kpis dt { font-size: 12px; color: var(--ink-soft); }
.kpis dd { margin: 0; font-family: var(--font-num); font-size: 30px; font-weight: 700; }
@media (max-width: 560px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 6px; border-bottom: 1px solid var(--outline); text-align: left; vertical-align: middle; }
th { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.points-input { width: 72px; min-height: 36px; padding: 6px 8px; font-size: 14px; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form .input { flex: 1; min-width: 180px; }
.person-form { margin-top: 6px; }
tr.is-off td { color: var(--ink-soft); }

/* スタッフ付与のミッション選択 */
.award-list { display: grid; gap: 8px; margin-top: 12px; }
.award-list .btn { margin: 0; justify-content: space-between; border-radius: var(--radius-m); text-align: left; }
.award-list .btn b { font-family: var(--font-num); }