/* =========================================================
   AMIX GAMES DATA CENTRAL（data.html・2026-11-10）
   黒い管制室：光の粒の銀河（1集まり＝1ゲーム）と計器の表記。角は立てる（角丸は --r1〜--r3 の3段だけ）。数字は指数と割合だけ
   ========================================================= */
:root {
  --bg: #04060c;
  --paper: rgba(14, 21, 40, 0.78);
  --ink: #e9f1ff;
  --dim: rgba(233, 241, 255, 0.62);
  --mute: rgba(233, 241, 255, 0.36);
  --line: rgba(120, 190, 255, 0.14);
  --soft: rgba(255, 255, 255, 0.06);
  --c1: #4ef0ff;   /* シアン */
  --c2: #ff3d8b;   /* マゼンタ */
  --c3: #ffb02e;   /* アンバー */
  --c4: #b6ff3a;   /* ライム */
  --c5: #8a7dff;   /* バイオレット */
  --c6: #ff7a1a;   /* 橙 */
  --f-en: "Anton", "Noto Sans JP", sans-serif;
  --f-mono: "Space Mono", "Noto Sans JP", ui-monospace, monospace;
  --f-ja: "Noto Sans JP", system-ui, sans-serif;
  --pad: clamp(18px, 4.6vw, 64px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --r1: 2px;   /* 角丸の物差し：小（画像・札・棒） */
  --r2: 4px;   /* 中（ボタン・タイル） */
  --r3: 6px;   /* 大（パネル・カード・シート） */
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 60px -40px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-ja); line-height: 1.7; overflow-x: clip; -webkit-font-smoothing: antialiased; }
body::before {   /* 方眼 */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 85%); opacity: 0.55;
}
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.amxg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- ヘッダー（ロゴは左端にそろえる） ---- */
.top { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 20px; padding: 12px var(--pad); background: linear-gradient(180deg, rgba(4, 6, 12, 0.97) 55%, rgba(4, 6, 12, 0)); }   /* 2026-11-12 下の文字が透けて読みにくかったので上半分を濃く */
.top-logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; }
.top-mark { display: block; height: 15px; width: auto; fill: var(--ink); }
.top-sub { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--c1); line-height: 1; }
.top-dot, .live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c4); box-shadow: 0 0 10px var(--c4); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
.top-nav { display: flex; gap: 18px; margin-left: auto; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; }
.top-nav a { text-decoration: none; color: var(--dim); transition: color 0.2s; }
.top-nav a:hover { color: var(--c1); }
.top-back { font-weight: 700; font-size: 12px; text-decoration: none; padding: 8px 16px; border-radius: var(--r2); border: 1px solid var(--line); transition: border-color 0.2s, color 0.2s; }
.top-back:hover { border-color: var(--c1); color: var(--c1); }

main { position: relative; z-index: 1; }
/* 書体がそろうまでヘッダーとヒーローの文字を隠し、そろったらふわっと出す（data.html 先頭のスクリプトが fonts-ok を付ける） */
html.js:not(.fonts-ok) .top, html.js:not(.fonts-ok) .hero-in { opacity: 0; transform: translateY(8px); }
/* 読み込みの演出（.boot）があるときは、開くまで待ってから出す（data.html の .boot のスクリプトが dc-open を付ける） */
html.js:not(.dc-open) .top, html.js:not(.dc-open) .hero-in { opacity: 0; transform: translateY(8px); }
.top, .hero-in { transition: opacity 0.6s ease, transform 0.8s var(--ease); }

/* ---- ヒーロー（粒の銀河＋計器） ---- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 110px var(--pad) 90px; overflow: hidden; background: radial-gradient(70% 60% at 72% 50%, #0a1124 0%, var(--bg) 72%); }
.world, .stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (pointer: fine) { .world { cursor: grab; } .world.is-drag { cursor: grabbing; } }
.stars[hidden] { display: none; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(4, 6, 12, 0.92) 0%, rgba(4, 6, 12, 0.7) 34%, rgba(4, 6, 12, 0) 62%); }   /* 文字の裏だけ粒を沈める */
@media (max-width: 760px) { .hero::after { background: linear-gradient(180deg, rgba(4, 6, 12, 0) 0%, rgba(4, 6, 12, 0.15) 36%, rgba(4, 6, 12, 0.86) 52%, rgba(4, 6, 12, 0.9) 100%); } }   /* スマホは銀河を見出しの裏に。説明と数字の裏は沈める */
.hero-in, .hud, .hero-tip, .hero-scroll { z-index: 2; }
.hero-in { position: relative; max-width: 640px; pointer-events: none; }
.hero-in a, .hero-in button { pointer-events: auto; }
.hero-k { margin: 0 0 14px; }
.hero-mark { display: block; height: clamp(18px, 2vw, 24px); width: auto; fill: var(--ink); }
.hero-title { margin: 0; font-weight: 400; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hero-en { font-family: var(--f-en); font-size: clamp(64px, 10.5vw, 160px); line-height: 0.98; letter-spacing: 0.02em; color: #fff; }
.hero-ja { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: clamp(14px, 1.6vw, 18px); letter-spacing: 0.06em; padding: 8px 16px 8px 12px; border-radius: var(--r1); background: rgba(4, 6, 12, 0.6); border: 1px solid rgba(233, 241, 255, 0.22); }
.hero-lead { margin: 22px 0 0; font-size: 15px; line-height: 1.9; color: var(--dim); text-shadow: 0 2px 14px rgba(4, 6, 12, 0.95); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 0; margin: 30px 0 0; }
.hero-stats div { display: flex; flex-direction: column; padding: 10px 0 0; margin-right: 30px; min-width: 92px; border-top: 1px solid rgba(233, 241, 255, 0.28); border-radius: 0; }
.hero-stats dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--c1); }
.hero-stats dd { margin: 2px 0 0; font-family: var(--f-en); font-size: clamp(24px, 2.8vw, 34px); line-height: 1.1; letter-spacing: 0.02em; }
.hero-stats dd small { font-family: var(--f-ja); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; color: var(--dim); }
.hero-tip { position: absolute; z-index: 3; pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: var(--r1); background: rgba(4, 6, 12, 0.88); border: 1px solid var(--tc, var(--c1)); box-shadow: 0 0 24px -8px var(--tc, var(--c1)); font-size: 12.5px; white-space: nowrap; opacity: 0; transform: translate(-50%, -100%); transition: opacity 0.15s; }
.hero-tip img { width: 48px; height: 32px; object-fit: cover; border-radius: 1px; }
.tip-t { display: flex; flex-direction: column; line-height: 1.35; }
.tip-t b { font-weight: 900; font-size: 13px; }
.tip-t span { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--tc, var(--c1)); }
.hero-tip.is-on { opacity: 1; }
/* 計器の表記（飾り。右上：図の説明／右下：経過時間・信号の目盛り・マウスの座標／左下：操作） */
.hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--mute); }
.hud b { color: var(--ink); font-weight: 700; }
.hud-fig { position: absolute; top: 92px; right: var(--pad); margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hud-fig span:first-child { color: var(--c1); }
.hud-clock { position: absolute; right: var(--pad); bottom: 30px; width: min(340px, 38vw); }
.hud-day { margin: 0 0 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hud-day b { font-family: var(--f-mono); font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.hud-bar { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; height: 26px; align-items: end; }
.hud-bar i { height: 100%; background: rgba(233, 241, 255, 0.16); transform-origin: bottom; transform: scaleY(0.2); transition: transform 0.12s linear, background 0.2s; }
.hud-bar i.is-on { background: var(--c1); }
.hud-top { margin: 8px 0 0; display: flex; justify-content: space-between; gap: 12px; }
.hud-top span:last-child { white-space: pre; font-variant-numeric: tabular-nums; color: var(--dim); }
.hud-help { position: absolute; left: var(--pad); bottom: 30px; margin: 0; line-height: 1.9; }
@media (pointer: coarse) { .hud-help { display: none; } }
@media (max-width: 760px) {
  .hud-fig { display: none; }
  .hero { padding-bottom: 190px; }   /* 下の計器のぶん空ける */
  .hud-clock { left: var(--pad); right: var(--pad); width: auto; bottom: 84px; }
  .hud-day b { font-size: 20px; }
}
.hero-scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--mute); }
.hero-scroll i { width: 1px; height: 36px; background: linear-gradient(var(--c1), transparent); animation: drop 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes drop { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---- 節 ---- */
.sec { position: relative; padding: clamp(70px, 11vh, 130px) var(--pad) 0; max-width: 1320px; margin: 0 auto; }
.sec-head { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: end; margin-bottom: 26px; }
.sec-no { grid-row: 1 / 3; margin: 0; align-self: start; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r2); background: var(--paper); box-shadow: var(--shadow); font-family: var(--f-mono); font-size: 12px; color: var(--c1); }
.sec-head h2 { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; font-weight: 400; }
.sec-en { font-family: var(--f-en); font-size: clamp(40px, 6vw, 84px); line-height: 0.9; letter-spacing: 0.02em; }
.sec-ja { font-weight: 900; font-size: clamp(15px, 1.6vw, 19px); letter-spacing: 0.04em; }
.sec-sub { grid-column: 2; margin: 6px 0 0; font-size: 14px; color: var(--dim); }
.panel { position: relative; padding: clamp(16px, 2.4vw, 28px); border-radius: var(--r3); background: linear-gradient(180deg, rgba(16, 24, 44, 0.78), rgba(8, 12, 24, 0.78)); box-shadow: var(--shadow); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.panel::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(130deg, rgba(78, 240, 255, 0.45), transparent 30%, transparent 70%, rgba(255, 61, 139, 0.35)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.panel-h { margin: 0 0 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--dim); }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---- 01 脈拍：目盛りはデータの範囲に合わせ、7日平均と最大・最小の印で変化を見せる ---- */
.pulse-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 12px; }
.pulse-big { font-family: var(--f-en); font-size: clamp(40px, 5.6vw, 72px); line-height: 1; letter-spacing: 0.02em; }
.pulse-big.is-up { color: var(--c4); } .pulse-big.is-down { color: var(--c2); }
.pulse-txt { font-weight: 700; font-size: 14px; color: var(--dim); }
.pulse-key { display: flex; gap: 16px; margin-left: auto; font-size: 12px; color: var(--dim); }
.pulse-key i { display: inline-block; width: 18px; height: 3px; border-radius: 1px; margin-right: 6px; vertical-align: 3px; }
.pulse-svg { display: block; width: 100%; height: clamp(220px, 30vw, 340px); overflow: visible; }
.pulse-svg .grid line { stroke: var(--line); }
.pulse-svg .lbl { font-family: var(--f-mono); font-size: 10px; fill: var(--mute); }
.pulse-svg .area { fill: url(#pulseFill); opacity: 0; transition: opacity 1.2s 0.6s; }
.pulse-svg .ln { fill: none; stroke: url(#pulseStroke); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(78, 240, 255, 0.6)); }
.pulse-svg .avg { fill: none; stroke: var(--c5); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; opacity: 0; transition: opacity 0.8s 1.6s; }
.pulse-svg .we { fill: rgba(138, 125, 255, 0.08); }
.pulse-svg .pt { fill: #fff; stroke-width: 2; opacity: 0; transition: opacity 0.4s; }
.pulse-svg .mk { opacity: 0; transition: opacity 0.6s 2s; }
.pulse-svg .mk circle { stroke: var(--bg); stroke-width: 3; filter: drop-shadow(0 0 8px currentColor); }
.pulse-svg .mk text { font-family: var(--f-mono); font-size: 11px; font-weight: 700; }
.pulse-svg.is-in .area, .pulse-svg.is-in .avg, .pulse-svg.is-in .mk { opacity: 1; }

/* ---- 02 レース ---- */
.race-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.race-day { margin: 0; font-family: var(--f-en); font-size: clamp(28px, 4vw, 48px); line-height: 1; letter-spacing: 0.02em; color: var(--ink); }
.race-day small { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--mute); margin-left: 10px; }
.race-ctrl { display: flex; align-items: center; gap: 12px; flex: 1; max-width: 420px; }
.race-ctrl input { flex: 1; accent-color: var(--c1); }
.btn-ic { width: 44px; height: 44px; flex: none; border-radius: var(--r2); border: 1px solid var(--c1); background: rgba(78, 240, 255, 0.1); color: var(--c1); cursor: pointer; font-size: 14px; transition: background 0.2s; }
.btn-ic:hover { background: rgba(78, 240, 255, 0.22); }
.race-bars { position: relative; list-style: none; margin: 0; padding: 0; height: calc(10 * 44px); }
.race-bar { position: absolute; left: 0; right: 0; height: 38px; display: grid; grid-template-columns: 28px 52px minmax(0, 1fr); align-items: center; gap: 10px; transition: transform 0.7s var(--ease), opacity 0.5s; }
.race-no { font-family: var(--f-en); font-size: 22px; text-align: right; color: var(--mute); }
.race-img { width: 52px; height: 34px; object-fit: cover; border-radius: var(--r1); }
.race-track { position: relative; height: 34px; }
/* 棒は暗めの色の帯＋右端の明るい線。影なしでも白い文字が読める */
.race-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--r1); background: color-mix(in srgb, var(--bc, var(--c1)) 34%, #0a1122); box-shadow: inset -3px 0 0 var(--bc, var(--c1)), 0 0 16px -6px var(--bc, var(--c1)); transition: width 0.7s var(--ease); }
.race-name { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 900; font-size: 13px; color: #fff; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }

/* ---- 03 時計・ヒートマップ ---- */
.clock-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; }
.clock-svg { display: block; width: min(100%, 420px); margin: 0 auto; overflow: visible; }
.clock-svg .ring, .sh-clock .ring { fill: none; stroke: var(--line); stroke-width: 1.5; }
.clock-svg .tick, .sh-clock .tick { stroke: var(--mute); }
.clock-svg .hl, .sh-clock .hl { font-family: var(--f-mono); font-size: 10px; fill: var(--mute); text-anchor: middle; dominant-baseline: middle; }
.clock-svg .petal, .sh-clock .petal { transform-origin: 0 0; transform: scale(0); transition: transform 1s var(--ease); }
.clock-svg.is-in .petal, .sh-clock.is-in .petal { transform: scale(1); }
.clock-svg .hand { stroke: var(--c2); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--c2)); }
.clock-svg .hub { fill: var(--c2); }
.clock-note { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--dim); }
.clock-note span { display: block; white-space: nowrap; }
.clock-note b { font-family: var(--f-en); font-weight: 400; font-size: 22px; color: var(--c3); letter-spacing: 0.02em; }
.heat { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 3px; }
.heat span { aspect-ratio: 1; border-radius: 1px; background: rgba(78, 240, 255, var(--a, 0.05)); box-shadow: 0 0 calc(var(--a, 0) * 14px) rgba(78, 240, 255, calc(var(--a, 0) * 0.7)); transform: scale(0); transition: transform 0.5s var(--ease) var(--d, 0s); }
.heat.is-in span { transform: scale(1); }
.heat b { font-family: var(--f-mono); font-weight: 400; font-size: 10px; color: var(--mute); align-self: center; }
.heat-x { display: grid; grid-template-columns: 34px repeat(4, 1fr) auto; margin-top: 6px; font-family: var(--f-mono); font-size: 10px; color: var(--mute); }
.heat-x span:first-child { grid-column: 2; }

/* ---- 04 来た元・端末：作品名｜来た元｜端末 の3列。2本の棒は同じ太さ ---- */
.src-head, .src li { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px 22px; align-items: center; }
.src-head { margin-bottom: 14px; align-items: start; }
.src-col h3 { margin: 0 0 8px; font-family: var(--f-mono); font-weight: 400; font-size: 11px; letter-spacing: 0.14em; color: var(--dim); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 16px; font-size: 12px; font-weight: 700; color: var(--ink); }
.legend li { display: flex; align-items: flex-start; gap: 6px; line-height: 1.35; }
.legend i { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-top: 3px; }
.legend small, .sh-bar small { display: block; font-weight: 500; font-size: 10px; color: var(--mute); line-height: 1.3; }
.src { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.src li { padding-top: 12px; border-top: 1px solid var(--line); }
.src-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 900; font-size: 13px; }
.src-name img { flex: none; width: 40px; height: 26px; object-fit: cover; border-radius: var(--r1); }
.src-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-bar { display: flex; gap: 2px; min-width: 0; width: 100%; height: 16px; border-radius: 100px; overflow: hidden; background: var(--soft); clip-path: inset(0 100% 0 0 round 100px); transition: clip-path 1.1s var(--ease) var(--d, 0s); }
.src-bar i { display: block; flex: none; height: 100%; width: var(--w, 0); }   /* 色の幅は最初から決めておき、帯ごと左から見せる（色ごとに伸ばすと境目が押されて揺れる） */
.src.is-in .src-bar { clip-path: inset(0 0 0 0 round 100px); }
.school-os-panel.is-in .src-bar { clip-path: inset(0 0 0 0 round 100px); }   /* SCHOOL の端末の帯も、見えたら左から */

/* ---- 05 ゲームごと ---- */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tiles li[hidden] { display: none; }
/* LOAD MORE（最初は一部だけ見せ、残りはここで開く） */
.tiles-more { margin: 22px 0 0; text-align: center; }
.more-btn { display: inline-flex; align-items: center; gap: 14px; padding: 13px 24px; border: 1px solid var(--c1); border-radius: var(--r2); background: rgba(78, 240, 255, 0.06); color: var(--ink); cursor: pointer; transition: background 0.2s, transform 0.25s var(--ease); }
.more-btn:hover { background: rgba(78, 240, 255, 0.14); transform: translateY(-1px); }
.more-btn:focus-visible { outline: 2px solid var(--c1); outline-offset: 3px; }
.more-en { font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; color: var(--c1); }
.more-ja { font-weight: 700; font-size: 12px; color: var(--dim); }
.tile { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; align-items: center; width: 100%; padding: 10px; border-radius: var(--r2); background: var(--paper); box-shadow: var(--shadow); border: 1px solid var(--line); transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.tile:hover, .tile:focus-visible { transform: translateY(-3px); border-color: var(--c1); }
.tile img { grid-row: 1 / 3; width: 64px; height: 42px; object-fit: cover; border-radius: var(--r1); }
.tile-name { font-weight: 900; font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile svg { width: 100%; height: 22px; overflow: visible; }
.tile svg path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }   /* 図は横に引き伸ばすが、線の太さは引き伸ばさない（向きで太さがまだらにならないように） */

.note { max-width: 1320px; margin: 40px auto 0; padding: 0 var(--pad); font-size: 12px; color: var(--mute); }
.fail { max-width: 1320px; margin: 30px auto 0; padding: 0 var(--pad); color: var(--c6); }

/* ---- 06 データから見えること ---- */
.learn-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.learn-item { padding: clamp(18px, 2.4vw, 26px); border-radius: var(--r3); background: var(--paper); box-shadow: var(--shadow); border: 1px solid var(--line); }
.learn-item h3 { margin: 0 0 10px; font-weight: 900; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; }
.learn-item h3::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--c1); vertical-align: 1px; }
.learn-item:nth-child(2) h3::before { background: var(--c2); }
.learn-item:nth-child(3) h3::before { background: var(--c3); }
.learn-item:nth-child(4) h3::before { background: var(--c4); }
.learn-item p { margin: 0; font-size: 14px; line-height: 1.95; color: var(--dim); }

/* ---- 07 機密：見出しは読めるまま、絵柄だけぼかす ---- */
.secret { --blur: 0px; padding-bottom: 20px; overflow-x: clip; }
.secret-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.secret-card { padding: 16px; border-radius: var(--r3); background: var(--paper); box-shadow: var(--shadow); border: 1px solid var(--line); }
.secret-card .panel-h { color: var(--ink); font-weight: 700; }
.sc-art { height: 120px; border-radius: var(--r1); filter: blur(var(--blur)); transition: filter 0.2s linear; }
.sc-map { background: radial-gradient(circle at 30% 40%, var(--c1) 0 6%, transparent 7%), radial-gradient(circle at 62% 35%, var(--c2) 0 4%, transparent 5%), radial-gradient(circle at 75% 60%, var(--c3) 0 5%, transparent 6%), radial-gradient(circle at 45% 70%, var(--c5) 0 3%, transparent 4%), radial-gradient(60% 50% at 50% 50%, rgba(18, 180, 255, 0.12), transparent 70%); }
.sc-flow { background: linear-gradient(90deg, var(--c1) 0 22%, transparent 22% 26%, var(--c2) 26% 48%, transparent 48% 52%, var(--c3) 52% 70%, transparent 70% 74%, var(--c4) 74%) 0 30% / 100% 14px no-repeat, linear-gradient(90deg, var(--c5) 0 38%, transparent 38% 42%, var(--c1) 42% 80%, transparent 80% 84%, var(--c2) 84%) 0 60% / 100% 14px no-repeat; }
/* 型抜き（mask）した絵は、ぼかしの後に型抜きされてふちが残るので、内側の ::before に描いて外側ごとぼかす */
.sc-gauge, .sc-pie { position: relative; }
.sc-gauge::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from 225deg at 50% 70%, var(--c4) 0 60deg, var(--c3) 60deg 130deg, var(--c2) 130deg 180deg, transparent 180deg 360deg); -webkit-mask: radial-gradient(circle at 50% 70%, transparent 0 32%, #000 33% 52%, transparent 53%); mask: radial-gradient(circle at 50% 70%, transparent 0 32%, #000 33% 52%, transparent 53%); }
.sc-pie::before { content: ""; position: absolute; inset: 0; background: conic-gradient(var(--c1) 0 38%, var(--c2) 38% 61%, var(--c3) 61% 78%, var(--c5) 78% 90%, var(--c4) 90%); -webkit-mask: radial-gradient(circle, #000 0 42%, transparent 43%); mask: radial-gradient(circle, #000 0 42%, transparent 43%); }
.sc-step { background: linear-gradient(0deg, rgba(18, 180, 255, 0.55) 0 30%, transparent 30%) 0 0 / 50% 100% no-repeat, linear-gradient(0deg, rgba(255, 79, 154, 0.6) 0 78%, transparent 78%) 100% 0 / 50% 100% no-repeat; }
.sc-funnel { background: linear-gradient(90deg, var(--c1), var(--c5)) 50% 12% / 90% 18px no-repeat, linear-gradient(90deg, var(--c1), var(--c5)) 50% 46% / 62% 18px no-repeat, linear-gradient(90deg, var(--c1), var(--c5)) 50% 80% / 36% 18px no-repeat; }
.secret-stamp { position: sticky; bottom: 34vh; z-index: 2; display: flex; justify-content: center; margin: -180px 0 120px; pointer-events: none; opacity: var(--stamp, 0); transform: rotate(-9deg) scale(calc(1.6 - var(--stamp, 0) * 0.6)); transition: opacity 0.2s, transform 0.2s; }
.secret-stamp span { font-family: var(--f-en); font-size: clamp(60px, 11vw, 150px); letter-spacing: 0.12em; color: var(--c2); padding: 4px 26px; border: 6px solid var(--c2); border-radius: var(--r2); text-shadow: 0 0 30px rgba(255, 61, 139, 0.6); box-shadow: 0 0 40px -10px rgba(255, 61, 139, 0.8), inset 0 0 30px -10px rgba(255, 61, 139, 0.7); background: rgba(4, 6, 12, 0.4); }

/* ---- 企業・団体の方へ ---- */
.biz { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: clamp(60px, 10vh, 120px) var(--pad); text-align: center; }
.biz-k { margin: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--c1); }
.biz-h { margin: 14px 0 18px; font-weight: 900; font-size: clamp(28px, 4.4vw, 54px); line-height: 1.35; letter-spacing: 0.02em; }
.biz-h span, .biz-lead span { display: inline-block; }
.biz-lead { max-width: 780px; margin: 0 auto; font-size: 15px; line-height: 2; color: var(--dim); }
.biz-list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; text-align: left; }
.biz-list li { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r3); background: var(--paper); box-shadow: var(--shadow); border: 1px solid var(--line); }
.biz-list b { display: block; font-family: var(--f-en); font-weight: 400; font-size: 26px; letter-spacing: 0.02em; color: var(--c1); }
.biz-list li:nth-child(2) b { color: var(--c2); } .biz-list li:nth-child(3) b { color: var(--c4); } .biz-list li:nth-child(4) b { color: var(--c5); }
.biz-list h3 { margin: 8px 0 10px; font-weight: 900; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.55; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.biz-list p { margin: 0; font-size: 14px; line-height: 1.95; color: var(--dim); }
.biz-acts { display: flex; justify-content: center; align-items: center; gap: 12px 26px; flex-wrap: wrap; margin: 34px 0 0; }
.biz-btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 30px; border-radius: var(--r2); background: linear-gradient(100deg, var(--c1), var(--c5)); color: #04060c; font-weight: 900; font-size: 15px; text-decoration: none; box-shadow: 0 14px 34px -14px rgba(18, 180, 255, 0.8); transition: transform 0.25s var(--ease); }
.biz-btn:hover { transform: translateY(-3px); }
.biz-link { font-size: 13px; color: var(--dim); text-underline-offset: 4px; }

/* ---- ゲームごとの分析（シート） ---- */
.sheet { width: min(980px, calc(100% - 48px)); max-height: calc(100svh - 96px);   /* 上下に 48px ずつ余白（画面いっぱいだと詰まって見えた・本人 2026-11-11） */ padding: 0; border: 1px solid var(--line); border-radius: var(--r3); background: linear-gradient(180deg, #0c1426, #070b16); color: var(--ink); overflow: auto; }
.sheet::backdrop { background: rgba(2, 4, 10, 0.72); backdrop-filter: blur(6px); }
.sheet[open] { animation: pop 0.45s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
.sheet-in { position: relative; padding: clamp(18px, 3vw, 32px); padding-top: clamp(16px, 2.4vw, 24px); }
.sheet-bar { position: sticky; top: -1px; margin-top: -1px; z-index: 2;   /* 1px 上へ：上の端に中身がヘアラインのように透けて見えた（2026-11-12） */ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px clamp(18px, 3vw, 32px); background: #0b1325; border-bottom: 1px solid var(--line); }
.sheet-x { display: inline-flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; border-radius: 100px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-family: var(--f-ja); font-weight: 700; font-size: 13px; cursor: pointer; transition: background 0.25s, border-color 0.25s; }
.sheet-x i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--bg); font-style: normal; font-size: 15px; line-height: 1; }
.sheet-x:hover, .sheet-x:focus-visible { background: rgba(255, 255, 255, 0.06); border-color: rgba(120, 190, 255, 0.4); }
.sh-head { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 20px; align-items: center; }
.sh-img { width: 100%; height: auto; border-radius: var(--r2); box-shadow: var(--shadow); }
.sh-k { margin: 0; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--c1); }
.sh-name { margin: 4px 0 2px; font-weight: 900; font-size: clamp(22px, 3vw, 32px); line-height: 1.3; }
.sh-sub { margin: 0; font-size: 13px; color: var(--dim); }
.sh-play { display: inline-block; margin-top: 12px; padding: 10px 20px; border-radius: var(--r2); border: 1px solid var(--c1); color: var(--c1); text-decoration: none; font-weight: 700; font-size: 13px; }
.sh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.sh-card { padding: 18px; border-radius: var(--r3); background: var(--paper); box-shadow: var(--shadow); }
.sh-wide { grid-column: 1 / -1; }
.sh-line { display: block; width: 100%; height: 160px; overflow: visible; }
.sh-line path { vector-effect: non-scaling-stroke; }   /* 同じく、線の太さは引き伸ばさない */
.sh-clock { display: block; width: min(100%, 240px); margin: 0 auto; overflow: visible; }
.sh-bars { display: grid; gap: 10px; }
.sh-bar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 42px; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; line-height: 1.3; }
.sh-bar > span:nth-child(2) { display: block; height: 10px; border-radius: 1px; background: var(--soft); overflow: hidden; }
.sh-bar i { display: block; height: 100%; border-radius: 1px; background: var(--bc, var(--c1)); width: 0; transition: width 0.9s var(--ease); }
.sh-bar em { font-style: normal; font-family: var(--f-mono); font-size: 11px; color: var(--dim); text-align: right; }
.sh-gap { margin-top: 18px; }

/* ---- フッター ---- */
.foot { position: relative; z-index: 1; padding: 40px var(--pad) 50px; text-align: center; font-size: 12px; color: var(--mute); border-top: 1px solid var(--line); }
.foot-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 16px; }
.foot-c { margin: 0; line-height: 1.9; }
.foot a { text-decoration: none; color: var(--dim); transition: color 0.2s; }
.foot a:hover { color: var(--c1); }

/* ---- 幅 ---- */
@media (max-width: 960px) {
  .clock-grid { grid-template-columns: 1fr; }
  .secret-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hero { align-items: flex-start; }
  .learn-list { grid-template-columns: 1fr; }
  .src-head, .src li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .src-head > span { display: none; }
  .src-head { gap: 14px; }
  .src-cell::before { content: attr(data-h); display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--mute); margin-bottom: 4px; }
}
@media (max-width: 640px) {
  .top { padding: 10px 16px; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-no { grid-row: auto; }
  .sec-sub { grid-column: 1; }
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .hero-stats div { padding: 10px 0 0; margin-right: 0; min-width: 0; }
  .pulse-key { margin-left: 0; }
  .race-bars { height: calc(10 * 38px); }
  .race-bar { height: 32px; grid-template-columns: 22px 44px minmax(0, 1fr); gap: 8px; }
  .race-img { width: 44px; height: 29px; }
  .race-track { height: 28px; }
  .race-name { font-size: 12px; }
  .heat { grid-template-columns: 22px repeat(24, minmax(0, 1fr)); gap: 2px; }
  .secret-list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sc-art { height: 80px; }
  .secret-stamp span { font-size: 54px; padding: 2px 16px; border-width: 4px; }
  .biz-list { grid-template-columns: 1fr; }
  .sh-head { grid-template-columns: 1fr; }
  /* スマホも画面の真ん中に、上下左右に余白をとって出す（2026-11-12 本人：下から出る形は上に空きができた） */
  .sheet { width: calc(100% - 24px); max-width: none; max-height: calc(100svh - 48px); margin: auto; }
  .sheet-bar { padding-left: 16px; }
  .sh-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .heat span, .clock-svg .petal, .sh-clock .petal { opacity: 1; transform: none; }
}


/* ---------- 読み込みの演出（data.html の .boot・2026-11-11） ----------
   起動画面ふう：ロゴ → DATA CENTRAL → 4行のログに実際にそろった順で OK → 中央の光の線から上下に開く */
.boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; pointer-events: none; }
html:not(.js) .boot { display: none; }
.boot::before, .boot::after { content: ''; position: absolute; left: 0; right: 0; height: 50.5%; background: var(--bg); transition: transform 0.9s cubic-bezier(0.77, 0, 0.18, 1) 0.18s; }
.boot::before { top: 0; background: linear-gradient(180deg, var(--bg), #060a16); }
.boot::after { bottom: 0; background: linear-gradient(0deg, var(--bg), #060a16); }
.boot-in { position: relative; z-index: 1; width: min(340px, calc(100% - 48px)); transition: opacity 0.3s ease; }
.boot-mark { display: block; width: 92px; height: auto; fill: var(--dim); }
.boot-title { margin-top: 10px; font-family: var(--f-en); font-size: 30px; line-height: 1; letter-spacing: 0.04em; color: var(--ink); }
.boot-log { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 5px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--mute); }
.boot-log li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 8px; opacity: 0.55; transition: opacity 0.25s, color 0.25s; }
.boot-log li span { color: var(--c1); }
.boot-log li b { font-weight: 400; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.boot-log li em { font-style: normal; animation: blink 0.9s steps(2, start) infinite; }
.boot-log li.is-ok { opacity: 1; color: var(--dim); }
.boot-log li.is-ok em { animation: none; color: var(--c4); }
.boot-bar { margin-top: 16px; height: 1px; background: var(--line); overflow: hidden; }
.boot-bar i { display: block; height: 100%; background: var(--c1); box-shadow: 0 0 8px var(--c1); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.4s var(--ease); }
/* 書体がそろうまで、文字の部分は隠す（ロゴは SVG なのですぐ出る） */
html.js:not(.fonts-ok) .boot-title, html.js:not(.fonts-ok) .boot-log { opacity: 0; }
.boot-title, .boot-log { transition: opacity 0.4s ease; }
/* 開く：中身が消え、真ん中に光の線 → 上下に分かれて開く */
.boot.is-off .boot-in { opacity: 0; }
.boot.is-off::before { transform: translateY(-101%); }
.boot.is-off::after { transform: translateY(101%); }
.boot-seam { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--c1); box-shadow: 0 0 18px 2px var(--c1); transform: scaleX(0); opacity: 0; }
.boot.is-off .boot-seam { animation: boot-seam 0.7s ease forwards; }
@keyframes boot-seam { 0% { transform: scaleX(0); opacity: 1; } 35% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .boot::before, .boot::after { transition: none; }
  .boot.is-off { opacity: 0; transition: opacity 0.3s; }
}

/* ---------- 05 平日の昼と、学校の端末（SCHOOL・2026-11-11） ---------- */
.school-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; }
.school-stat { padding: 20px 22px; border-radius: var(--r3); background: var(--paper); box-shadow: var(--shadow); }
.school-stat dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--c1); }
.school-stat dd { margin: 8px 0 0; }
.school-stat b { font-family: var(--f-en); font-weight: 400; font-size: clamp(44px, 5vw, 64px); line-height: 1; color: var(--ink); }
.school-stat small { margin-left: 2px; font-family: var(--f-en); font-size: 22px; color: var(--dim); }
.school-stat span { display: block; margin-top: 10px; font-size: 12.5px; line-height: 1.75; color: var(--dim); }
/* 平日の昼：実際の割合（明るい）と、時間の長さだけの割合（暗い）を並べた2本の棒 */
.school-cmp { display: grid !important; gap: 4px; margin-top: 12px !important; }
.school-cmp i { display: block; height: 6px; border-radius: var(--r1); width: calc(var(--v) * 100%); }
.school-cmp .is-real { background: var(--c4); box-shadow: 0 0 10px rgba(182, 255, 58, 0.5); }
.school-cmp .is-base { background: rgba(233, 241, 255, 0.22); }
.school-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 12px; align-items: start; }
.school-os { margin-top: 14px; }
.school-osbar { height: 16px; }
.school-os-panel .legend { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.school-os-panel .legend small { margin-left: 6px; font-family: var(--f-mono); color: var(--mute); }
.school-note { margin-top: 14px; font-size: 12px; line-height: 1.8; color: var(--mute); }
.school-map { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.sm-axis line { stroke: rgba(120, 190, 255, 0.08); stroke-width: 1; }
.sm-axis text { font-family: var(--f-mono); font-size: 11px; fill: var(--mute); }
.sm-axis .sm-label { font-family: var(--f-ja); font-size: 12px; fill: var(--dim); }
.sm-avg line { stroke: rgba(233, 241, 255, 0.35); stroke-width: 1; stroke-dasharray: 4 4; }
.sm-avg .sm-q { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; fill: var(--c4); }
.sm-dot { cursor: pointer; outline: none; }
.sm-dot circle { fill-opacity: 0.55; stroke: rgba(4, 6, 12, 0.7); stroke-width: 1; transition: fill-opacity 0.2s, stroke 0.2s; }
.sm-dot.is-top circle { fill-opacity: 0.9; stroke: var(--ink); stroke-width: 1.5; }
.sm-dot:hover circle, .sm-dot:focus-visible circle { fill-opacity: 1; stroke: var(--ink); stroke-width: 2; }
.sm-name { font-family: var(--f-ja); font-weight: 700; font-size: 12px; fill: var(--ink); paint-order: stroke; stroke: rgba(4, 6, 12, 0.9); stroke-width: 3px; pointer-events: none; }
/* 見えたら、原点から広がって置かれる */
.school-map-panel.reveal:not(.is-in) .sm-dot { opacity: 0; transform: translate(var(--ox), var(--oy)) scale(0.2); }
.sm-dot { transition: opacity 0.6s var(--ease) var(--d, 0s), transform 0.9s var(--ease) var(--d, 0s); transform-box: fill-box; }
.sm-lead { stroke: rgba(233, 241, 255, 0.4); stroke-width: 1; }
.school-map-panel.reveal:not(.is-in) .sm-labels { opacity: 0; }
.sm-labels { transition: opacity 0.6s ease 0.9s; }
.sh-sch { margin: 6px 0 14px; font-size: 13px; color: var(--dim); }
@media (max-width: 960px) {
  .school-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .school-stats { grid-template-columns: 1fr; }
  .school-stat { padding: 16px 18px; }
  .sm-axis text { font-size: 10px; }
}

/* ---------- BGM の SOUND（2026-11-11・data.js の最後）。AMIX GAMES へ より控えめに ---------- */
.top-snd { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r2); border: 1px solid var(--line); background: none; color: var(--dim); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.top-snd span { color: var(--mute); }
.top-snd.is-on { color: var(--ink); }
.top-snd.is-on span { color: var(--c4); }
.top-snd:hover, .top-snd:focus-visible { border-color: var(--c1); color: var(--c1); }
.top-snd-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.top-snd-bars b { width: 2px; height: 30%; background: currentColor; opacity: 0.75; }
.top-snd.is-on .top-snd-bars b { animation: snd-bar 0.9s ease-in-out infinite; }
.top-snd.is-on .top-snd-bars b:nth-child(2) { animation-delay: 0.2s; }
.top-snd.is-on .top-snd-bars b:nth-child(3) { animation-delay: 0.4s; }
@keyframes snd-bar { 0%, 100% { height: 30%; } 50% { height: 100%; } }
/* 2026-11-12：SOUND は♪と波形だけ（文字は読み上げ用に残して隠す）。右にメニュー。スマホでも1行に収まる */
.top-snd { margin-left: auto; gap: 7px; padding: 0 12px; height: 36px; }
.top-snd-note { width: 15px; height: 15px; fill: currentColor; opacity: 0.55; transition: opacity 0.2s; }
.top-snd.is-on .top-snd-note { opacity: 1; color: var(--c1); }
.top-snd-bars { height: 13px; gap: 2px; }
.top-snd-bars b { height: 18%; }
.top-snd.is-on .top-snd-bars b:nth-child(4) { animation-delay: 0.6s; }
.top-snd .top-snd-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.top { gap: 14px; }
.top .amx-menu-btn { font-family: var(--f-mono); font-size: 11px; color: var(--dim); transition: color 0.2s; }
.top .amx-menu-btn:hover, .top .amx-menu-btn:focus-visible { color: var(--c1); }
#amxMenu { --mn-bg: #070b16; --mn-ink: var(--ink); --mn-dim: var(--dim); --mn-line: var(--line); --mn-accent: var(--c1); --mn-f-big: var(--f-en); --mn-f-k: var(--f-mono); }
@media (max-width: 640px) { .top-snd { padding: 0 10px; height: 34px; } .top .amx-menu-btn { font-size: 10px; } }

/* 起動画面の入る操作（2026-11-11）。.boot は押せない（pointer-events: none）ので、ここだけ押せるようにする */
.boot-gate { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 18px; pointer-events: auto; animation: boot-gate-in 0.5s ease both; }
.boot-gate[hidden] { display: none; }
@keyframes boot-gate-in { from { opacity: 0; transform: translateY(6px); } }
.boot.is-gate .boot-bar { background: var(--c1); }
.boot-go { display: inline-flex; align-items: baseline; gap: 14px; padding: 12px 22px; border: 1px solid var(--c1); border-radius: var(--r2); background: rgba(78, 240, 255, 0.08); color: var(--ink); cursor: pointer; box-shadow: 0 0 22px rgba(78, 240, 255, 0.22); transition: background 0.2s, box-shadow 0.2s; }
.boot-go b { font-family: var(--f-en); font-weight: 400; font-size: 22px; letter-spacing: 0.12em; color: var(--c1); }
.boot-go small { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--dim); }
.boot-go:hover, .boot-go:focus-visible { background: rgba(78, 240, 255, 0.16); box-shadow: 0 0 30px rgba(78, 240, 255, 0.4); }
.boot-go:focus-visible { outline: 2px solid var(--c1); outline-offset: 3px; }
.boot-mute { padding: 4px 2px; border: 0; background: none; color: var(--mute); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.boot-mute:hover, .boot-mute:focus-visible { color: var(--ink); }

/* ---------- ピアの案内（js/data-guide.js・js/data-pia.js・2026-11-11） ----------
   ヒーローの右下にピア（3D・背景は透明）と「ピアに案内してもらう」。案内中は画面の右下へ移り、吹き出しが出る */
.pia-dock { position: absolute; z-index: 3; right: calc(var(--pad) + 10px); bottom: 150px; width: 230px; display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: 0; transition: opacity 0.6s ease; }
.pia-dock.is-in { opacity: 1; }
.pia-cv { display: block; width: 230px; height: 230px; cursor: pointer; touch-action: manipulation; }
.pia-call { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--r2); background: rgba(9, 14, 28, 0.72); backdrop-filter: blur(6px); color: var(--ink); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.pia-call-k { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.3em; color: var(--c1); }
.pia-call-t { font-weight: 700; font-size: 12px; }
.pia-call:hover, .pia-call:focus-visible { border-color: var(--c1); background: rgba(14, 24, 44, 0.85); }
/* 案内中：画面の右下へ（小さく）。「案内してもらう」は隠す */
.pia-dock.is-tour { position: fixed; z-index: 60; right: 12px; bottom: 12px; width: 170px; }
.pia-dock.is-tour .pia-cv { width: 170px; height: 170px; }
.pia-dock.is-tour .pia-call { display: none; }
/* 吹き出し：白っぽい紙の色・角は丸く（本人・2026-11-11）。ページは暗いので、ここだけ明るくして話している感じを出す */
.pia-bub { --pb: #0d1424; --pm: #5d6676; --pc: #0a7f93; position: fixed; z-index: 61; width: min(440px, calc(100vw - 210px)); padding: 18px 20px 16px; border-radius: 22px; background: rgba(250, 252, 255, 0.97); color: var(--pb); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(78, 240, 255, 0.35), 0 0 34px -10px rgba(78, 240, 255, 0.55); animation: pia-in 0.35s var(--ease) both; }
.pia-bub[hidden] { display: none; }
@keyframes pia-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.pia-who { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 700; font-size: 13px; color: var(--pb); }
.pia-who i { width: 8px; height: 8px; border-radius: 50%; background: #20d6ec; box-shadow: 0 0 0 3px rgba(32, 214, 236, 0.2); }
.pia-who small { font-family: var(--f-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.14em; color: var(--pm); }
.pia-step { margin-left: auto; font-family: var(--f-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.1em; color: var(--pm); }
.pia-text { margin: 0; min-height: 3.6em; font-size: 14px; line-height: 1.8; color: var(--pb); }
.pia-extra { margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; background: #e8f8fb; font-size: 12.5px; line-height: 1.7; color: var(--pc); font-weight: 700; }
.pia-extra[hidden] { display: none; }
.pia-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pia-cta[hidden] { display: none; }
.pia-nav { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.pia-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border: 1px solid #d4dae4; border-radius: 999px; background: #fff; color: var(--pb); font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.pia-btn.is-main { border-color: var(--pb); background: var(--pb); color: #fff; }
.pia-btn:hover, .pia-btn:focus-visible { border-color: var(--pc); color: var(--pc); background: #f1fbfd; }
.pia-btn.is-main:hover, .pia-btn.is-main:focus-visible { background: #1d2a44; color: #fff; border-color: #1d2a44; }
.pia-btn:disabled { opacity: 0.35; pointer-events: none; }
.pia-x { margin-left: auto; width: 32px; height: 32px; border: 1px solid #d4dae4; border-radius: 50%; background: #fff; color: var(--pm); font-size: 16px; cursor: pointer; }
.pia-x:hover, .pia-x:focus-visible { color: var(--pb); border-color: var(--pb); }
@media (max-width: 960px) { .pia-dock { bottom: 170px; width: 180px; } .pia-cv { width: 180px; height: 180px; } }
@media (max-width: 640px) {
  /* スマホ：数字の下に「ピア＋ボタン」を1行で（.hero-in の中に入る） */
  .pia-dock { position: relative; right: auto; bottom: auto; width: auto; margin: 18px 0 0 -10px; flex-direction: row; justify-content: flex-start; gap: 4px; pointer-events: auto; }
  .pia-cv { width: 96px; height: 96px; flex: none; }
  .pia-call { align-items: flex-start; padding: 8px 14px; white-space: nowrap; }
  .pia-dock.is-tour { width: 116px; right: 4px; bottom: 6px; margin: 0; }
  .pia-dock.is-tour .pia-cv { width: 116px; height: 116px; }
  .pia-bub { width: auto; padding: 16px 16px 14px; border-radius: 20px; }
  .pia-text { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .pia-bub { animation: none; } }
/* 共通フッター（css/menu.css の .amx-foot・2026-11-12）の色 */
.amx-foot { --ft-bg: var(--bg); --ft-ink: var(--ink); --ft-dim: var(--dim); --ft-mute: var(--mute); --ft-line: var(--line); --ft-accent: var(--c1); --ft-f-k: var(--f-mono); z-index: 1; }