/* 走れ！車窓忍者 — about page. 色と質感はゲーム本体と license.html の車内・行先LED・窓枠・ゆき先カードに合わせる */
:root {
  --car: #23252b; --car2: #2c2e35; --car3: #3a3d45; --line: #3c3f47;
  --text: #c9cdd6; --dim: #8d929c; --cream: #fff4e0;
  --led-g: #5ce85c; --led-a: #ffb340; --led-warn: #ff7848;
  --card: rgba(255, 238, 206, .94); --card-edge: #ff9030; --card-ink: #241830; --card-sub: #8a5430;
  --dark-card: rgba(18, 13, 32, .74); --dark-ink: #ffe8c8; --dark-sub: #b3a8cc;
  --frame: #9ea3ad;
}
* { box-sizing: border-box; }
html { background: var(--car); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--text);
  font: 400 15px/1.95 "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  letter-spacing: .04em;
  background: linear-gradient(180deg, var(--car3) 0, var(--car2) 300px, var(--car) 900px) no-repeat var(--car);
  padding: 0;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
  container-type: inline-size;   /* 100cqw＝ページの幅（スクロールバーを除く）。隣の窓と座席をはみ出さずに画面の端まで届かせる */
}
.cabin { width: min(92vw, 760px); margin: 0 auto; }
p { margin: 0 0 1em; }
a { color: var(--led-a); text-underline-offset: 3px; }
a:hover { color: #ffd27a; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--led-a); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
.pix { width: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
kbd { display: inline-block; min-width: 24px; padding: 0 6px; margin: 0 1px 2px 0; text-align: center; font: 700 12px/1.8 inherit; font-family: inherit; color: var(--card-ink); background: var(--card); border: 1px solid var(--card-edge); border-radius: 3px; }

/* 行先LED表示（本体と同じ作り） */
.led {
  display: flex; align-items: center; gap: 14px;
  background: #15100a; border-radius: 6px; border: 3px solid var(--line); border-bottom-color: #55585f;
  padding: 7px 14px; position: relative; overflow: hidden; margin: 0;
}
.led::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(0, 0, 0, 0) 42%, rgba(10, 7, 4, .22) 50%); background-size: 3px 3px; pointer-events: none; }
.led .l, .led .r { font-weight: 700; font-size: clamp(14px, 3vw, 20px); letter-spacing: .08em; line-height: 1.3; }
.led .l { flex: none; white-space: nowrap; color: var(--led-g); text-shadow: 0 0 3px rgba(90, 230, 90, .8); }
.led .r { flex: 1; text-align: right; color: var(--led-a); text-shadow: 0 0 3px rgba(255, 150, 40, .85); }

/* 窓枠とガラス */
.frame { margin-top: 10px; background: var(--frame); border-radius: 22px; padding: 10px; box-shadow: inset 0 2px 2px rgba(255, 255, 255, .45), inset 0 -3px 4px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .5); }
.sway { animation: sway 1.7s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.5px); } }
.glass { position: relative; aspect-ratio: 16 / 9; border-radius: 13px; overflow: hidden; background: #2e2350 url(image/about/poster.png) center/cover; image-rendering: pixelated; }
.glass::after { content: ""; position: absolute; inset: 0; border-radius: 13px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .06) 100%);
  box-shadow: inset 0 0 0 2px #565b66, inset 0 0 22px rgba(0, 0, 0, .55); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; opacity: 0; transition: opacity .6s; }
.hero-video.on { opacity: 1; }
.vid-toggle { display: block; margin: 8px 0 0 auto; font: 700 11px/1 inherit; font-family: inherit; color: var(--dim); background: none; border: 1px solid var(--line); border-radius: 99px; padding: 6px 10px; cursor: pointer; }

/* タイトル */
.ttl { margin: 34px 0 4px; text-align: center; font-weight: 700; color: var(--cream); font-size: clamp(30px, 7vw, 48px); line-height: 1.2; letter-spacing: .06em; }
.ttl canvas { display: none; }
.ttl.drawn canvas { display: block; margin: 0 auto; width: min(100%, 470px); height: auto; image-rendering: pixelated; image-rendering: crisp-edges; }
.ttl.drawn .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sub { text-align: center; color: #ffb068; font-weight: 700; letter-spacing: .14em; font-size: 13px; margin: 0 0 22px; }
.lead { font-size: 15.5px; }

/* ゆき先カード（タイトル画面と同じ札）をボタンに使う */
.cta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0 0; }
.cta.center { grid-template-columns: minmax(0, 320px); justify-content: center; }
.card { display: block; padding: 12px 16px; text-decoration: none; background: var(--dark-card); border: 2px solid #4a4458; color: var(--dark-ink); transition: transform .1s; }
.card b { display: block; font-size: 18px; letter-spacing: .1em; }
.card small { display: block; color: var(--dark-sub); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.card.on { background: var(--card); border-color: var(--card-edge); color: var(--card-ink); }
.card.on small { color: var(--card-sub); }
.card:hover { transform: translateY(-2px); color: var(--dark-ink); }
.card.on:hover { color: var(--card-ink); }
@media (max-width: 420px) { .cta { grid-template-columns: 1fr; } }

/* 見出し＝行先LED */
section { padding: 64px 0 0; }
.led-h { margin: 0 0 22px; }
.led-h .l { font-size: clamp(12px, 2.4vw, 14px); }
.led-h .r { font-size: clamp(16px, 3.6vw, 22px); text-align: left; overflow-wrap: anywhere; word-break: keep-all; }
.led.led-s { margin-top: 18px; }
.led.led-s .l { color: var(--led-warn); text-shadow: 0 0 3px rgba(255, 120, 72, .8); }
.led.led-s .r { font-size: clamp(12px, 2.6vw, 16px); }

figure { margin: 0; }
figure .pix, .dest .pix { border-radius: 8px; box-shadow: 0 0 0 4px var(--frame), 0 6px 14px rgba(0, 0, 0, .45); }
figcaption { font-size: 13px; color: var(--dim); margin-top: 12px; line-height: 1.75; }
figcaption b { color: var(--cream); margin-right: 8px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 24px 0; align-items: start; }
@media (max-width: 640px) { .pair { grid-template-columns: 1fr; } }

/* 操作：画面の左右 */
.halves { display: grid; grid-template-columns: 1fr 1fr; border: 4px solid var(--frame); border-radius: 14px; overflow: hidden; margin: 18px 0; }
.half { padding: 20px 16px; text-align: center; background: #2e2350; }
.half + .half { background: #3a2a5c; border-left: 2px dashed rgba(255, 244, 224, .35); }
.half b { display: block; font-size: 12px; color: var(--dark-sub); letter-spacing: .08em; }
.half span { display: block; font-size: clamp(24px, 6vw, 34px); font-weight: 700; color: var(--cream); letter-spacing: .12em; line-height: 1.4; }
.half small { display: block; font-size: 12px; color: #ffb068; }
.keys { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0 0; }
.keys th { text-align: left; vertical-align: top; white-space: nowrap; color: var(--cream); padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); }
.keys td { padding: 10px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 480px) { .keys, .keys tbody, .keys tr, .keys th, .keys td { display: block; } .keys th { border: 0; padding-bottom: 0; } }

/* ゆき先 */
.route { background: rgba(0, 0, 0, .18); border: 1px solid var(--line); border-radius: 10px; padding: 18px 18px 6px; margin: 18px 0 26px; }
.route-head, .dname { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rname, .dname { font-size: 20px; font-weight: 700; color: var(--cream); letter-spacing: .1em; margin: 0; }
.rsub, .dname small { font-size: 13px; color: #ffb068; font-weight: 700; letter-spacing: .06em; }
.route > p { margin: 8px 0 18px; font-size: 14.5px; }
.stops { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; }
.stops::before { content: ""; position: absolute; left: 6%; right: 6%; top: -9px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #f2b48e, #8ecbe8); }
.stops li { position: relative; }
.stops li::before { content: ""; position: absolute; left: 50%; top: -13px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--car); border: 3px solid var(--led-g); z-index: 1; }
@media (max-width: 560px) { .stops { grid-template-columns: 1fr; } .stops::before, .stops li::before { display: none; } }
.dests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 720px) { .dests { grid-template-columns: 1fr; } .dest { display: grid; grid-template-columns: 44% 1fr; gap: 14px; align-items: start; } }
@media (max-width: 420px) { .dest { display: block; } }
.dest-body { padding: 12px 2px 0; }
@media (max-width: 720px) and (min-width: 421px) { .dest-body { padding-top: 0; } }
.dest-body p:last-child { font-size: 14px; }
.dname { font-size: 17px; margin-bottom: 4px; }

/* 車窓に出てくるもの */
.things { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; margin: 8px 0 0; }
.things div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.things dt { color: var(--cream); font-weight: 700; letter-spacing: .08em; }
.things dd { margin: 2px 0 0; font-size: 14px; }
@media (max-width: 640px) { .things { grid-template-columns: 1fr; } }

/* 得点：運賃表のような札 */
.fare { background: var(--card); border: 2px solid var(--card-edge); color: var(--card-ink); padding: 18px 20px; }
.fare-ttl { font-weight: 700; font-size: 15px; letter-spacing: .04em; border-bottom: 2px solid var(--card-ink); padding-bottom: 8px; }
.fare table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.fare th { text-align: left; font-weight: 700; padding: 7px 0; border-bottom: 1px dashed rgba(36, 24, 48, .35); }
.fare td { text-align: right; font-weight: 700; padding: 7px 0; border-bottom: 1px dashed rgba(36, 24, 48, .35); color: #b4501e; }
.fare-note { font-size: 13px; margin: 12px 0 0; color: #5a3a24; }

.end { align-items: center; }

.faq dt { color: var(--cream); font-weight: 700; margin-top: 18px; }
.faq dd { margin: 4px 0 0; font-size: 14.5px; }

.final { text-align: center; padding: 80px 0 60px; }
.final .cta { margin-top: 18px; }
.games { display: inline-block; margin-top: 18px; padding: 10px 4px; font-size: 13px; color: #a6aab2; }
footer { padding: 22px 0 40px; font-size: 12.5px; background: #1f2025; box-shadow: 0 0 0 100vmax #1f2025; clip-path: inset(0 -100vmax); }   /* 座席の下は床 */
footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
footer a { color: #7d828c; }
footer a:hover { color: #c9cdd6; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .sway { animation: none; } .card:hover { transform: none; } }

/* ---------- 車内の小物（ゲーム本体の車内と同じ作り） ---------- */
/* 天井の照明と吊り革 */
.roof { position: relative; height: 104px; overflow: hidden; }
.roof .ceil { position: absolute; left: 0; right: 0; top: 0; height: 9px; background: linear-gradient(180deg, #f6f3ea, #d8d4c8); box-shadow: 0 0 22px 8px rgba(255, 248, 230, .13); }
.roof .rail { position: absolute; left: 0; right: 0; top: 28px; height: 6px; border-radius: 3px; background: linear-gradient(180deg, #eceff3, #a3a8b1 55%, #6d727c); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
.roof .straps { position: absolute; left: 50%; top: 31px; width: 1820px; margin-left: -910px; display: flex; justify-content: space-between; }
.roof .straps i { position: relative; display: block; width: 28px; height: 62px; transform-origin: 50% 0; animation: strapsway 1.7s ease-in-out infinite; }
.roof .straps i::before { content: ""; position: absolute; left: 10px; top: 0; width: 8px; height: calc(100% - 24px); background: #e9e5d9; border-radius: 2px; box-shadow: inset -2px 0 0 rgba(0, 0, 0, .13); }
.roof .straps i::after { content: ""; position: absolute; left: 1px; bottom: 0; width: 26px; height: 26px; box-sizing: border-box; border: 4px solid #f1ede1; border-radius: 50%; box-shadow: 0 2px 3px rgba(0, 0, 0, .35), inset 0 1px 2px rgba(0, 0, 0, .25); }
.roof .straps i:nth-child(even)::after { border-radius: 5px 5px 14px 14px; }
.roof .straps i:nth-child(3n) { animation-delay: -.6s; }
.roof .straps i:nth-child(3n+1) { animation-delay: -1.1s; }
.roof .straps i:nth-child(4n) { animation-delay: -.25s; }
@keyframes strapsway { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(3deg); } 58% { transform: rotate(-2.2deg); } 80% { transform: rotate(1.2deg); } }

/* 本窓の両隣の窓（広い画面だけ）。景色は映さず、夕暮れの色だけ。本窓と一緒に揺れる */
.frame { position: relative; }
.sidewin { display: none; position: absolute; top: 0; bottom: 0; width: calc((100cqw - 100%) / 2 - 44px); background: var(--frame); border-radius: 22px; padding: 10px;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .45), inset 0 -3px 4px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .5); }
.sidewin.l { right: calc(100% + 44px); border-radius: 0 22px 22px 0; padding-left: 0; }   /* 画面の端で切れて見えるよう、外側は角を取らない */
.sidewin.r { left: calc(100% + 44px); border-radius: 22px 0 0 22px; padding-right: 0; }
.sidewin.l::before { border-radius: 0 13px 13px 0; }
.sidewin.r::before { border-radius: 13px 0 0 13px; }
.sidewin::before { content: ""; display: block; height: 100%; border-radius: 13px;
  background: linear-gradient(115deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, .07) 100%), linear-gradient(180deg, #5a4f86 0%, #b9788a 48%, #6b4d6e 62%, #2f3d34 100%);
  box-shadow: inset 0 0 0 2px #565b66, inset 0 0 22px rgba(0, 0, 0, .55); filter: saturate(.8) brightness(.8); }
@supports (width: 1cqw) { @media (min-width: 900px) { .sidewin { display: block; } } }

/* ロングシートと暖房グリル（ページの最後） */
.seat { position: relative; height: 128px; margin: 40px 0 0; overflow: hidden; }
@supports (width: 1cqw) { .seat { width: 100cqw; margin-left: calc(50% - 50cqw); } }
.seat i { position: absolute; display: block; left: -12px; right: -12px; }
.seat .back { top: 0; height: 84px; border-radius: 16px 16px 0 0;
  background: repeating-linear-gradient(90deg, transparent 0 44px, rgba(0, 0, 0, .22) 44px 46px),
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .08) 1.2px, transparent 1.7px) 0 0 / 9px 9px,
    radial-gradient(circle at 75% 75%, rgba(0, 0, 0, .2) 1.2px, transparent 1.7px) 0 0 / 9px 9px,
    linear-gradient(180deg, #3b6080, #2a4862);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .12), inset 0 -8px 12px rgba(0, 0, 0, .28); }
.seat .cush { top: 84px; height: 22px; border-radius: 0 0 7px 7px; background: linear-gradient(180deg, #4a7394, #2d4d68); box-shadow: 0 5px 7px rgba(0, 0, 0, .45); z-index: 1; }
.seat .kick { top: 106px; height: 22px; left: 0; right: 0; background: repeating-linear-gradient(90deg, #2b2d33 0 5px, #18191d 5px 8px); }
@media (prefers-reduced-motion: reduce) { .roof .straps i { animation: none; } }