/* でんしゃの うんてんし（AMIX GAMES KIDS おしごとたいけん） */
:root {
  --sky: #5cc3ff; --sky2: #bfe9ff; --sun: #ffc531; --coral: #ff6f61; --mint: #3ccf91; --pink: #ff8fc6; --violet: #a98bff;
  --ink: #253050; --paper: #fffdf6; --line: #253050;
  --f: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Yu Gothic", sans-serif;
  --fn: "Fredoka", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; background: var(--sky); color: var(--ink); font-family: var(--f); font-weight: 700; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 4px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px var(--ink); }
#stage { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
svg { display: block; }
kbd { display: inline-block; font: 600 .82em var(--fn); border: 2px solid currentColor; border-bottom-width: 3px; border-radius: 6px; padding: 0 .4em; margin: 0 .1em; line-height: 1.5; }

/* ---------- ブランド ---------- */
.brand { display: inline-flex; align-items: baseline; gap: .38em; font-family: var(--fn); font-weight: 600; line-height: 1; letter-spacing: .02em; }
.b-amix { font-size: 15px; color: var(--ink); letter-spacing: .08em; }
.b-kids { display: inline-flex; font-size: 26px; }
.b-kids i { font-style: normal; display: inline-block; color: #fff; -webkit-text-stroke: 0; text-shadow: 0 2.5px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink), 0 4.5px 0 var(--ink); margin-right: -.02em; animation: kidsHop 2.6s ease-in-out infinite; }
.b-kids i:nth-child(1) { color: var(--coral); }
.b-kids i:nth-child(2) { color: var(--sun); animation-delay: .12s; }
.b-kids i:nth-child(3) { color: var(--mint); animation-delay: .24s; }
.b-kids i:nth-child(4) { color: var(--sky); animation-delay: .36s; }
@keyframes kidsHop { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 78% { transform: translateY(-5px) rotate(-6deg); } 86% { transform: translateY(0) rotate(4deg); } }

/* ---------- 押せるボタン ---------- */
.go { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 62px; padding: .3em 1.6em; border-radius: 999px; background: var(--coral); color: #fff; font-size: 24px; letter-spacing: .06em;
  border: 3px solid var(--line); box-shadow: 0 6px 0 var(--line); transition: transform .08s, box-shadow .08s; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.go::after { content: ""; position: absolute; left: 18px; top: 9px; width: 26px; height: 10px; border-radius: 10px; background: rgba(255,255,255,.55); transform: rotate(-12deg); }
.go:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--line); }
.sub { display: inline-flex; align-items: center; gap: .4em; min-height: 46px; padding: .2em 1.1em; border-radius: 999px; background: #fff; color: var(--ink); font-size: 16px; border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); transition: transform .08s, box-shadow .08s; }
.sub svg { width: 22px; height: 22px; }
.sub:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.sub em { font-style: normal; font-family: var(--fn); font-size: 13px; background: var(--sun); border-radius: 99px; padding: 1px 8px; border: 2px solid var(--line); }
.sub.wide { width: 100%; justify-content: center; }
.snd-btn, .voice-btn { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; padding: 0 .9em; border-radius: 999px; background: #fff; border: 3px solid var(--line); box-shadow: 0 3px 0 var(--line); font-size: 14px; }
.snd-btn svg, .voice-btn svg { width: 22px; height: 22px; }
.snd-btn .spk { fill: currentColor; } .snd-btn .on, .snd-btn .off { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.snd-btn[aria-pressed="true"] .off, .snd-btn[aria-pressed="false"] .on { display: none; }
.snd-btn[aria-pressed="false"], .voice-btn[aria-pressed="false"] { background: #e9ecf3; color: #6a7390; }
.link { font-size: 14px; color: #6a7390; text-decoration: underline; text-underline-offset: 3px; padding: 8px; }

/* ---------- 重ね画面 ---------- */
.overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l)); }
.overlay.dim { background: rgba(37, 48, 80, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.overlay.scroll { overflow-y: auto; align-items: flex-start; touch-action: pan-y pinch-zoom; }
.card { position: relative; width: min(100%, 680px); margin: auto; background: var(--paper); border: 4px solid var(--line); border-radius: 30px; box-shadow: 0 10px 0 var(--line); padding: 26px 26px 24px; text-align: center; animation: cardIn .38s cubic-bezier(.2,1.6,.4,1); }
.card.small { width: min(100%, 440px); }
@keyframes cardIn { from { transform: scale(.85) translateY(20px); opacity: 0; } }
.card h2 { font-size: 26px; letter-spacing: .06em; margin-bottom: 10px; }
.card h2 small { display: block; font-size: 13px; color: #6a7390; letter-spacing: .1em; }
.card .lead { font-size: 15px; line-height: 1.8; color: #4a5576; margin-bottom: 16px; }
.card .row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 16px; }
.card .close { position: absolute; right: 14px; top: 12px; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 3px solid var(--line); box-shadow: 0 3px 0 var(--line); font: 600 26px/1 var(--fn); }
.keys { margin-top: 16px; font-size: 13px; color: #6a7390; line-height: 2.1; }
@media (pointer: coarse) { .pc-only { display: none; } }

/* ---------- 読み込み・はじめる ---------- */
#loading { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, #ffffff 0%, var(--sky2) 45%, var(--sky) 100%); transition: opacity .6s, visibility .6s; }
#loading.done { opacity: 0; visibility: hidden; }
.ld-in { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px; }
#loading .brand .b-amix { font-size: 18px; } #loading .brand .b-kids { font-size: 44px; }
.ld-train { width: 120px; animation: ldBob .5s ease-in-out infinite alternate; }
@keyframes ldBob { to { transform: translateY(-3px); } }
.ld-bar { width: min(70vw, 320px); height: 14px; border-radius: 99px; border: 3px solid var(--line); background: #fff; overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: repeating-linear-gradient(-45deg, var(--sun) 0 10px, #ffd96b 10px 20px); transition: width .3s; }
#loadMsg { font-size: 16px; color: var(--ink); }
.gate { display: none; flex-direction: column; align-items: center; gap: 14px; }
#loading.ready .gate { display: flex; animation: cardIn .4s cubic-bezier(.2,1.6,.4,1); }
#loading.ready .ld-bar, #loading.ready #loadMsg { display: none; }
#btnGate { font-size: 30px; min-width: 240px; min-height: 72px; animation: goPulse 1.6s ease-in-out infinite; }
@keyframes goPulse { 50% { transform: scale(1.05); } }

/* ---------- タイトル ---------- */
#title { justify-content: flex-start; align-items: stretch; padding: 0; }
.t-panel { position: relative; width: min(46vw, 560px); height: 100%; overflow-y: auto; touch-action: pan-y pinch-zoom; padding: calc(18px + var(--safe-t)) 26px calc(14px + var(--safe-b)) calc(26px + var(--safe-l));
  background: linear-gradient(90deg, rgba(255,253,246,.96) 0%, rgba(255,253,246,.9) 82%, rgba(255,253,246,0) 100%); display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.logo { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; margin-top: 4px; }
.l-series { display: inline-block; font-size: 15px; letter-spacing: .14em; background: var(--ink); color: #fff; padding: 6px 14px 7px; border-radius: 99px; transform: rotate(-3deg); margin-bottom: 8px; }
.l1 { font-size: clamp(26px, 3.4vw, 38px); color: var(--ink); letter-spacing: .08em; margin-left: .1em; }
.l2 { font-size: clamp(46px, 6.4vw, 78px); letter-spacing: .04em; color: var(--sun);
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 2.2px 2.2px 0 var(--ink), -2.2px 2.2px 0 var(--ink), 2.2px -2.2px 0 var(--ink), -2.2px -2.2px 0 var(--ink), 0 8px 0 var(--ink); margin-top: 4px; }
.t-catch { font-size: 16px; color: #4a5576; }
.rank { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 20px; background: #fff; border: 3px solid var(--line); }
.rk-cap { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--rc, #7cc4ff); color: var(--ink); display: grid; place-items: center; border: 3px solid var(--line); }
.rk-cap svg { width: 34px; }
.rk-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.rk-txt small { font-size: 11px; color: #6a7390; }
.rk-txt b { font-size: 19px; }
.rk-bar { display: block; height: 10px; border-radius: 99px; background: #e9ecf3; overflow: hidden; border: 2px solid var(--line); }
.rk-bar u { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--rc, var(--mint)); }
#rankBadge .rk-bar u { background: var(--rc); }
.pick h2 { font-size: 14px; letter-spacing: .1em; color: #6a7390; margin-bottom: 6px; }
.pick.two { display: grid; grid-template-columns: 1fr auto; gap: 14px; }
#trainPick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 7px; border-radius: 18px; background: #fff; border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); transition: transform .12s, box-shadow .12s, background .12s; }
.tcard .tico { width: 100%; max-width: 74px; }
.tcard b { font-size: 15px; } .tcard small { font-size: 10px; color: #6a7390; white-space: nowrap; }
.tcard[aria-pressed="true"] { background: #fff4c7; transform: translateY(-3px); box-shadow: 0 7px 0 var(--line); }
.tcard[aria-pressed="true"]::after { content: ""; position: absolute; top: -9px; right: -7px; width: 22px; height: 22px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12l4 4 8-8' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; border: 2.5px solid var(--line); }
.tcard .lock { display: none; }
.tcard.locked { background: #eef0f5; }
.tcard.locked .tico, .tcard.locked b, .tcard.locked small { filter: grayscale(1) brightness(.65); opacity: .4; }
.tcard.locked .lock { display: flex; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-style: normal; font-size: 10px; line-height: 1.3; color: var(--ink); padding: 4px; }
.tcard.locked .lock svg { width: 26px; height: 26px; color: var(--violet); }
.tcard.locked .lock svg path, .tcard.locked .lock svg circle { stroke: var(--violet); fill: none; }
.tcard.locked .lock svg path { fill: var(--violet); stroke: none; }
.desc { font-size: 13px; color: #4a5576; line-height: 1.6; min-height: 1.6em; }
.seg { display: inline-flex; padding: 3px; border-radius: 99px; background: #fff; border: 3px solid var(--line); gap: 2px; }
.seg button { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; border-radius: 99px; font-size: 14px; color: #6a7390; white-space: nowrap; }
.seg button svg { width: 18px; height: 18px; }
.seg button[aria-pressed="true"] { background: var(--sky); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.2); }
#timePick button[data-t="eve"][aria-pressed="true"] { background: #ff9a5c; }
#timePick button[data-t="night"][aria-pressed="true"] { background: #4c5bb8; }
#modePick button[data-m="auto"][aria-pressed="true"] { background: var(--mint); }
#btnStart { align-self: stretch; font-size: 28px; min-height: 70px; margin-top: 4px; }
.t-subs { display: flex; gap: 10px; flex-wrap: wrap; }
.t-foot { margin-top: auto; padding-top: 6px; font-size: 11px; color: #6a7390; letter-spacing: .04em; font-weight: 500; }
.t-foot a { color: inherit; }
.credit-group { display: inline-block; white-space: nowrap; }
.t-tools { position: absolute; right: calc(14px + var(--safe-r)); top: calc(14px + var(--safe-t)); display: flex; gap: 8px; }

@media (max-aspect-ratio: 21/20) {
  #title { align-items: flex-end; }
  .t-panel { width: 100%; height: auto; max-height: 64%; border-radius: 28px 28px 0 0; padding: 16px calc(16px + var(--safe-r)) calc(12px + var(--safe-b)) calc(16px + var(--safe-l)); background: rgba(255,253,246,.97); border-top: 4px solid var(--line); gap: 10px; }
  .brand { position: absolute; top: -60px; left: 16px; }
  #title .logo { position: absolute; top: calc(-36vh + 30px); left: 16px; right: 16px; pointer-events: none; }
  .logo { margin-top: 0; }
  .l2 { font-size: clamp(40px, 12vw, 64px); }
  .t-catch { display: none; }
  .pick.two { grid-template-columns: 1fr; gap: 10px; }
  #btnStart { font-size: 24px; min-height: 62px; position: sticky; bottom: 0; z-index: 2; }
}
@media (max-aspect-ratio: 21/20) and (max-height: 700px) { .t-panel { max-height: 68%; } #title .logo { top: calc(-32vh + 26px); } }

/* ---------- 点検 ---------- */
.citems { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 560px) { .citems { grid-template-columns: repeat(2, 1fr); } }
.citem { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px 12px; border-radius: 22px; background: #fff; border: 3px solid var(--line); box-shadow: 0 5px 0 var(--line); color: var(--ink); transition: transform .1s, box-shadow .1s, background .2s; animation: goPulse 1.4s ease-in-out infinite; }
.citem:nth-child(2) { animation-delay: .2s; } .citem:nth-child(3) { animation-delay: .4s; }
.citem svg { width: 56px; height: 56px; }
.citem b { font-size: 18px; }
.citem i { font-style: normal; font-size: 14px; color: #6a7390; }
.citem.ok { background: #d9f7e6; animation: none; transform: translateY(4px); box-shadow: 0 1px 0 var(--line); }
.citem.ok i { color: #129a5c; font-size: 20px; }
.citem.ok::after { content: ""; position: absolute; inset: 6px; border: 4px solid #e8413c; border-radius: 50%; opacity: .75; transform: rotate(-10deg); animation: stampIn .3s cubic-bezier(.2,1.8,.4,1); }
@keyframes stampIn { from { transform: scale(1.8) rotate(-30deg); opacity: 0; } }
.ok-msg { margin-top: 16px; font-size: 22px; color: #129a5c; animation: cardIn .3s; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
#hud button, #lever { pointer-events: auto; }
#nextBox { position: absolute; left: calc(14px + var(--safe-l)); top: calc(12px + var(--safe-t)); display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 99px; background: #fff; border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); }
#nextLbl { font-size: 13px; color: #fff; background: var(--ink); border-radius: 99px; padding: 5px 11px 6px; }
#nextName { font-size: 22px; letter-spacing: .04em; }
#nextDist { font: 600 17px var(--fn); font-style: normal; color: #4a5576; min-width: 3em; }
#nextDist:empty { display: none; }
#mentor { position: absolute; left: calc(14px + var(--safe-l)); top: calc(70px + var(--safe-t)); display: flex; align-items: flex-start; gap: 8px; max-width: min(440px, 62vw); opacity: 0; transform: translateY(-8px) scale(.96); transform-origin: 20px 20px; transition: opacity .25s, transform .3s cubic-bezier(.2,1.6,.4,1); }
#mentor.on { opacity: 1; transform: none; }
#mentor .face { width: 62px; height: 62px; flex: none; border-radius: 50%; background: #fff; border: 3px solid var(--line); padding: 2px; }
#mentor p { position: relative; background: #fff; border: 3px solid var(--line); border-radius: 20px; padding: 7px 14px 9px; font-size: 18px; line-height: 1.5; box-shadow: 0 4px 0 var(--line); }
#mentor p small { display: block; font-size: 11px; color: #6a7390; }
#mentor p::before { content: ""; position: absolute; left: -11px; top: 18px; width: 14px; height: 14px; background: #fff; border-left: 3px solid var(--line); border-bottom: 3px solid var(--line); transform: rotate(45deg); }
#topBtns { position: absolute; right: calc(14px + var(--safe-r)); top: calc(12px + var(--safe-t)); display: flex; gap: 8px; }
.hbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; min-width: 48px; justify-content: center; padding: 0 12px; border-radius: 99px; background: #fff; border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); font-size: 14px; }
.hbtn svg { width: 24px; height: 24px; }
.hbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }

#ann { position: absolute; left: 50%; top: calc(12px + var(--safe-t)); transform: translate(-50%, -140%); display: flex; align-items: center; gap: 14px; padding: 10px 22px; border-radius: 14px; background: #1c1f26; border: 3px solid #4b5160; box-shadow: 0 0 0 3px var(--line), 0 6px 0 3px var(--line); color: #ffa53a; text-shadow: 0 0 8px rgba(255,150,40,.7); }
#ann small { font-size: 14px; color: #8be38f; text-shadow: 0 0 8px rgba(100,230,110,.6); }
#ann b { font-size: 28px; letter-spacing: .12em; }
#ann.on { animation: annIn 5.2s ease both; }
@keyframes annIn { 0% { transform: translate(-50%, -140%); } 8%, 88% { transform: translate(-50%, 0); } 100% { transform: translate(-50%, -140%); } }

#stopGauge { position: absolute; left: 50%; top: calc(78px + var(--safe-t)); transform: translateX(-50%); width: min(56vw, 520px); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sg-bar { position: relative; width: 100%; height: 24px; border-radius: 99px; background: rgba(255,255,255,.92); border: 3px solid var(--line); }
.sg-zone { position: absolute; left: calc(85% - 14px); width: 28px; top: -3px; bottom: -3px; background: var(--sun); border: 3px solid var(--line); border-radius: 8px; }
.sg-me { position: absolute; top: -9px; left: calc(clamp(-0.1, var(--u, 0), 1.12) * 85% - 36px); width: 40px; transition: left .08s linear; }
.sg-flag { position: absolute; left: 85%; top: 26px; transform: translateX(-50%); font-style: normal; font-size: 12px; background: var(--ink); color: #fff; padding: 1px 8px 2px; border-radius: 99px; white-space: nowrap; }
#stopLeft { margin-top: 18px; font: 600 22px var(--fn); background: #fff; border: 3px solid var(--line); border-radius: 99px; padding: 2px 16px 3px; box-shadow: 0 3px 0 var(--line); }
#stopGauge.brake #stopLeft { background: var(--coral); color: #fff; animation: blink .5s steps(2) infinite; }
#stopGauge.near .sg-zone { background: var(--mint); }
@keyframes blink { 50% { background: #fff; color: var(--ink); } }

#meter { position: absolute; left: calc(14px + var(--safe-l)); bottom: calc(14px + var(--safe-b)); width: clamp(118px, 16vmin, 168px); aspect-ratio: 1; }
#meter svg { width: 100%; height: 100%; }
.m-bg { fill: #fff; stroke: var(--line); stroke-width: 4; }
.m-arc { fill: none; stroke: url(#none); stroke: #c9d4e6; stroke-width: 9; stroke-linecap: round; }
.m-needle { fill: var(--coral); stroke: var(--line); stroke-width: 1.5; stroke-linejoin: round; }
#needle { transform-box: view-box; transform-origin: 50% 50%; transition: transform .12s linear; }
.m-hub { fill: var(--ink); }
.m-num { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; line-height: 1; }
.m-num b { display: block; font: 600 clamp(22px, 3.4vmin, 32px) var(--fn); }
.m-num small { font: 600 11px var(--fn); color: #6a7390; }
.m-max { position: absolute; right: 8%; bottom: 8%; font: 600 10px var(--fn); color: #9aa3bd; }
#autoTag { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); white-space: nowrap; font-size: 12px; padding: 2px 10px 3px; border-radius: 99px; background: var(--mint); color: #fff; border: 2.5px solid var(--line); }
#pax { position: absolute; left: calc(clamp(118px, 16vmin, 168px) + 24px + var(--safe-l)); bottom: calc(18px + var(--safe-b)); display: flex; flex-direction: column; align-items: flex-start; gap: 0; background: #fff; border: 3px solid var(--line); border-radius: 16px; padding: 4px 12px 6px; box-shadow: 0 3px 0 var(--line); }
#pax span { font-size: 10px; color: #6a7390; }
#pax b { font: 600 26px/1 var(--fn); }
#pax.bump { animation: bump .35s cubic-bezier(.2,1.8,.4,1); }
@keyframes bump { 40% { transform: scale(1.2); } }

/* マスコン（レバー） */
#lever { position: absolute; right: calc(14px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); width: clamp(96px, 13vmin, 126px); height: min(58vh, 430px); display: flex; flex-direction: column; align-items: center; gap: 6px; touch-action: none; cursor: grab; }
.lv-top, .lv-bot { font-size: 14px; padding: 3px 10px 4px; border-radius: 99px; color: #fff; border: 2.5px solid var(--line); }
.lv-top { background: var(--sky); } .lv-bot { background: var(--coral); }
.ltrack { position: relative; flex: 1; width: 46px; margin: 20px 0; border-radius: 24px; border: 3px solid var(--line); background: linear-gradient(180deg, #8fd3ff 0%, #d7f0ff 46%, #fff 50%, #ffd9d4 54%, #ff9d93 100%); box-shadow: inset 0 3px 0 rgba(0,0,0,.08); }
.notch { position: absolute; left: -12px; right: -12px; top: calc((3 - var(--k)) / 6 * 100%); height: 3px; margin-top: -1.5px; background: var(--line); border-radius: 2px; opacity: .55; }
.notch.n { height: 5px; margin-top: -2.5px; opacity: 1; left: -16px; right: -16px; }
.lhandle { position: absolute; left: 50%; top: calc((3 - var(--n, -1)) / 6 * 100%); width: clamp(84px, 11vmin, 108px); height: 46px; transform: translate(-50%, -50%); transition: top .12s cubic-bezier(.3,1.5,.5,1); border-radius: 16px; background: #fff; border: 3px solid var(--line); box-shadow: 0 5px 0 var(--line); display: grid; place-items: center; }
.lhandle i { width: 60%; height: 10px; border-radius: 99px; background: #c9d4e6; }
#lever[data-n="1"] .lhandle i, #lever[data-n="2"] .lhandle i, #lever[data-n="3"] .lhandle i { background: var(--sky); }
#lever[data-n="-1"] .lhandle i, #lever[data-n="-2"] .lhandle i, #lever[data-n="-3"] .lhandle i { background: var(--coral); }
#leverLabel { position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 13px; background: #fff; border: 2.5px solid var(--line); border-radius: 99px; padding: 2px 10px 3px; }

#actions { position: absolute; right: calc(clamp(96px, 13vmin, 126px) + 34px + var(--safe-r)); bottom: calc(16px + var(--safe-b)); display: flex; align-items: flex-end; gap: 12px; }
.abtn { display: inline-flex; align-items: center; gap: 8px; min-height: 64px; padding: 0 20px; border-radius: 24px; background: #fff; border: 3px solid var(--line); box-shadow: 0 6px 0 var(--line); font-size: 18px; transition: transform .08s, box-shadow .08s; }
.abtn svg { width: 30px; height: 30px; }
.abtn:active, .abtn.down { transform: translateY(5px); box-shadow: 0 1px 0 var(--line); }
.abtn.round { flex-direction: column; justify-content: center; gap: 0; width: 84px; height: 84px; padding: 0; border-radius: 50%; font-size: 12px; }
.abtn.round svg { width: 38px; height: 38px; }
.abtn.big { width: 104px; height: 104px; background: var(--sun); }
.abtn.big svg { width: 48px; height: 48px; }
#btnPoint { background: #e8f6ff; }
#btnPoint.hit { animation: pointHit .4s; }
@keyframes pointHit { 30% { transform: scale(1.15) rotate(-8deg); } }
#btnDoor { background: var(--mint); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.2); }
#btnDoor:disabled { background: #d5dbe8; color: #6a7390; text-shadow: none; }
.glow { animation: glow 1.1s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 6px 0 var(--line), 0 0 0 0 rgba(255,214,58,.9); } 50% { box-shadow: 0 6px 0 var(--line), 0 0 0 12px rgba(255,214,58,0); transform: scale(1.06); } }

#popup { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); display: none; flex-direction: column; align-items: center; gap: 4px; text-align: center; pointer-events: none; }
#popup.on { display: flex; animation: popIn .5s cubic-bezier(.2,1.8,.4,1); }
@keyframes popIn { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } }
#popup .big, #popup .mid { color: #fff; letter-spacing: .06em; line-height: 1.1;
  text-shadow: 4px 0 0 var(--line), -4px 0 0 var(--line), 0 4px 0 var(--line), 0 -4px 0 var(--line), 3px 3px 0 var(--line), -3px 3px 0 var(--line), 3px -3px 0 var(--line), -3px -3px 0 var(--line), 0 9px 0 var(--line); }
#popup .big { font-size: clamp(44px, 9vmin, 84px); color: var(--sun); }
#popup .mid { font-size: clamp(28px, 6vmin, 50px); }
#popup.point .mid { color: #8fe3ff; } #popup.greet .mid { color: var(--pink); }
#popup.pass .mid { color: #7fd0ff; }
#popup .stars { display: flex; gap: 6px; font-size: clamp(40px, 8vmin, 66px); line-height: 1; }
#popup .stars i { font-style: normal; color: rgba(255,255,255,.35); text-shadow: 0 0 0 transparent; -webkit-text-stroke: 3px var(--line); }
#popup .stars i.on { color: var(--sun); animation: starIn .5s cubic-bezier(.2,1.8,.4,1) both; }
#popup .stars i.on:nth-child(2) { animation-delay: .28s; } #popup .stars i.on:nth-child(3) { animation-delay: .56s; }
@keyframes starIn { from { transform: scale(0) rotate(-90deg); } }
#popup small { font: 600 18px var(--fn); background: #fff; border: 3px solid var(--line); border-radius: 99px; padding: 1px 14px 3px; }

#stampToast { position: absolute; right: calc(14px + var(--safe-r)); top: calc(74px + var(--safe-t)); display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 20px; background: #fff; border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); opacity: 0; transform: translateX(120%); }
#stampToast.on { animation: toast 3.4s ease both; }
@keyframes toast { 0% { opacity: 0; transform: translateX(120%); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(120%); } }
#stampToast small { display: block; font-size: 11px; color: #e8413c; }
#stampToast b { font-size: 16px; }
.sico { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 3px solid #e8413c; background: #fff; }
.sico svg { width: 32px; height: 32px; }

/* ---------- 日報 ---------- */
.card.report { width: min(100%, 760px); background: #fff; }
.card.report h2 { border-bottom: 4px dotted #d5dbe8; padding-bottom: 10px; margin-bottom: 16px; }
.rep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
.rep-box { border: 3px solid var(--line); border-radius: 20px; padding: 12px 14px; background: var(--paper); }
.rep-box h3, #repStampsWrap h3 { font-size: 14px; color: #6a7390; margin-bottom: 6px; }
.rep-st li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 2px dashed #e3e7f0; font-size: 17px; list-style: none; }
.rep-st li:last-child { border-bottom: 0; }
.rep-st b { color: var(--sun); font-size: 20px; letter-spacing: .05em; -webkit-text-stroke: 1px #c79400; }
.rep-st b i { font-style: normal; color: #e3e7f0; -webkit-text-stroke: 0; }
.rep-num li { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; list-style: none; font-size: 15px; }
.rep-num li span { flex: 1; } .rep-num b { font: 600 24px var(--fn); } .rep-num small { font-size: 12px; color: #6a7390; }
.rep-pts { margin-top: 8px; padding: 8px 12px; border-radius: 14px; background: #fff4c7; font-size: 15px; text-align: center; }
.rep-pts b { font: 600 28px var(--fn); color: #e8413c; margin-left: 6px; }
.license { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; align-items: center; gap: 2px 16px; margin: 18px auto 0; max-width: 460px; padding: 14px 20px 16px; border-radius: 22px; text-align: left;
  background: linear-gradient(135deg, #fff 0%, #fff 55%, color-mix(in srgb, var(--rc, #7cc4ff) 40%, #fff) 100%); border: 4px solid var(--line); box-shadow: 0 6px 0 var(--line); }
.license::before { content: ""; position: absolute; inset: 6px; border-radius: 16px; border: 2px dashed color-mix(in srgb, var(--rc, #7cc4ff) 80%, #000); opacity: .5; pointer-events: none; }
.lic-hd { grid-column: 1 / -1; font-size: 13px; letter-spacing: .2em; color: #6a7390; }
.lic-cap { width: 76px; height: 76px; border-radius: 50%; background: var(--rc, #7cc4ff); color: var(--ink); display: grid; place-items: center; border: 4px solid var(--line); }
.lic-cap svg { width: 54px; }
.lic-body { display: flex; flex-direction: column; line-height: 1.15; }
.lic-body b { font-size: 34px; letter-spacing: .06em; }
.lic-body small { font-size: 15px; color: #4a5576; }
.lic-body i { font-style: normal; color: var(--sun); font-size: 24px; letter-spacing: .1em; -webkit-text-stroke: 1px #c79400; }
.lic-up { position: absolute; right: -10px; top: -18px; font-style: normal; background: var(--coral); color: #fff; padding: 6px 14px; border-radius: 99px; border: 3px solid var(--line); transform: rotate(8deg); animation: goPulse 1s ease-in-out infinite; }
.license.up { animation: cardIn .6s .3s cubic-bezier(.2,1.6,.4,1) both; }
.license.mini { margin: 4px auto 18px; }
.secret { margin-top: 14px; font-size: 16px; color: #7b52e0; background: #f1ebff; border-radius: 14px; padding: 8px 12px; }
#repStampsWrap { margin-top: 16px; }
.rep-stamps { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; list-style: none; }
.rep-stamps li { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* ---------- スタンプちょう ---------- */
#stampGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 10px; list-style: none; }
#stampGrid li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#stampGrid .sico { width: 72px; height: 72px; border: 3px dashed #c9d0de; background: #f6f7fa; }
#stampGrid .sico b { font: 600 26px var(--fn); color: #c9d0de; }
#stampGrid li.got .sico { border: 4px solid #e8413c; background: #fff; transform: rotate(-8deg); }
#stampGrid li.got:nth-child(2n) .sico { transform: rotate(6deg); }
#stampGrid .sico svg { width: 44px; height: 44px; }
#stampGrid small { font-size: 12px; line-height: 1.4; color: #4a5576; }

/* ---------- あそびかた ---------- */
.card.how { text-align: left; }
.card.how h2 { text-align: center; }
.steps { list-style: none; counter-reset: st; display: grid; gap: 10px; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 40px 6.5em 1fr; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: #fff; border: 3px solid var(--line); font-size: 15px; line-height: 1.6; }
.steps li::before { content: counter(st); width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--sun); border: 3px solid var(--line); font: 600 18px var(--fn); }
.steps b { font-size: 17px; } .steps span { font-weight: 500; }
.parents { margin-top: 18px; padding: 14px 16px; border-radius: 18px; background: #eef7ff; border: 2px solid #b9dcf5; }
.parents h3 { font-size: 15px; margin-bottom: 6px; }
.parents p { font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; font-weight: 400; font-size: 13.5px; line-height: 1.9; color: #3b4566; margin-bottom: .6em; }
.parents p:last-child { margin-bottom: 0; }
.nojs { position: absolute; inset: 0; display: grid; place-items: center; background: var(--sky); font-size: 18px; }

/* ---------- せまい画面 ---------- */
@media (max-width: 760px) {
  .rep-grid { grid-template-columns: 1fr; }
  .steps li { grid-template-columns: 36px 1fr; }
  .steps li span { grid-column: 2; }
  #stampGrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px), (max-height: 520px) {
  #nextName { font-size: 18px; } #nextLbl { font-size: 11px; } #nextDist { font-size: 15px; }
  #mentor { top: calc(60px + var(--safe-t)); } #mentor .face { width: 48px; height: 48px; } #mentor p { font-size: 15px; padding: 5px 12px 7px; }
  .hbtn { min-height: 42px; font-size: 12px; padding: 0 10px; }
  #camName { display: none; }
  .abtn.round { width: 70px; height: 70px; font-size: 11px; } .abtn.round svg { width: 30px; height: 30px; }
  .abtn.big { width: 86px; height: 86px; } .abtn.big svg { width: 40px; height: 40px; }
  .abtn { min-height: 54px; font-size: 15px; padding: 0 14px; }
  #actions { gap: 8px; }
  #stopGauge { top: calc(64px + var(--safe-t)); width: min(60vw, 420px); }
  #ann b { font-size: 22px; }
  .card { padding: 20px 16px 18px; border-radius: 24px; }
  .card h2 { font-size: 22px; }
  .citem svg { width: 44px; height: 44px; }
}
/* たて持ちのスマホ */
@media (max-aspect-ratio: 3/4) {
  #lever { height: 40vh; width: 90px; }
  .lhandle { width: 82px; height: 42px; }
  #actions { right: auto; left: 50%; transform: translateX(-62%); bottom: calc(16px + var(--safe-b)); flex-direction: column-reverse; align-items: center; }
  #actions { left: auto; right: calc(112px + var(--safe-r)); transform: none; }
  #btnDoor { position: absolute; bottom: calc(100% + 10px); right: 0; white-space: nowrap; }
  #meter { width: 108px; bottom: calc(80px + var(--safe-b)); }
  #pax { left: calc(14px + var(--safe-l)); bottom: calc(14px + var(--safe-b)); flex-direction: row; align-items: center; gap: 8px; }
  #pax span { font-size: 10px; max-width: 5em; line-height: 1.2; }
  #stopGauge { top: calc(150px + var(--safe-t)); width: calc(100vw - 40px); }
  #mentor { max-width: calc(100vw - 28px); }
  #leverLabel { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- ドアの そうさ ---------- */
#doorWin { position: absolute; z-index: 15; left: calc(16px + var(--safe-l)); top: 50%; transform: translateY(-46%); width: min(470px, 46vw); display: flex; flex-direction: column; animation: dwIn .4s cubic-bezier(.2,1.5,.4,1); }   /* 下の 影は .dw-foot の box-shadow で（窓 全体に drop-shadow を かけると、すけて いる モニターの 中に「ホームの モニター」の 文字の 影が 落ちて、文字が 二重に 見えた） */
@keyframes dwIn { from { transform: translateY(-40%) scale(.85); opacity: 0; } }
.dw-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--ink); color: #fff; border: 4px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; }
.dw-head b { font-size: 17px; letter-spacing: .08em; }
.dw-head span { font-size: 13px; opacity: .8; flex: 1; }
.dw-lamp { width: 22px; height: 22px; border-radius: 50%; background: #5a4a2a; border: 3px solid #fff; }
#doorWin.lamp .dw-lamp { background: #ffb020; box-shadow: 0 0 12px #ffb020; }
.dw-mon { position: relative; aspect-ratio: 16 / 9; border-left: 4px solid var(--line); border-right: 4px solid var(--line); background: transparent; box-shadow: inset 0 0 0 3px #1b2238; overflow: hidden; }
.dw-mon::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 2px, transparent 2px 4px); pointer-events: none; }
.dw-tag { position: absolute; left: 8px; top: 8px; font-size: 11px; color: #fff; background: rgba(20,26,44,.7); padding: 2px 8px; border-radius: 6px; }
.dw-alert { position: absolute; right: 8px; top: 8px; font-size: 15px; color: #fff; background: var(--coral); padding: 3px 10px; border-radius: 8px; border: 2px solid #fff; display: none; animation: blink2 .5s steps(2) infinite; }
#doorWin.runner .dw-alert { display: block; }
@keyframes blink2 { 50% { opacity: .3; } }
.dw-foot { background: var(--paper); border: 4px solid var(--line); border-top: 0; border-radius: 0 0 22px 22px; padding: 10px 12px 12px; box-shadow: 0 8px 0 var(--line); }
.dw-status { font-size: 16px; line-height: 1.5; min-height: 3em; text-align: center; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; }
#doorWin.runner .dw-status { color: #e8413c; }
.dw-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.dwb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 66px; padding: 4px; border-radius: 18px; border: 3px solid var(--line); box-shadow: 0 5px 0 var(--line); background: #fff; font-size: 13px; line-height: 1.25; transition: transform .08s, box-shadow .08s, opacity .2s; }
.dwb svg { width: 28px; height: 28px; }
.dwb:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--line); }
.dwb.open { background: #d9f7e6; } .dwb.check { background: #e8f6ff; } .dwb.close { background: #ffe3df; }
.dwb:disabled { opacity: .35; box-shadow: 0 2px 0 var(--line); transform: translateY(3px); cursor: default; }
.dwb.glow { animation: glow 1.1s ease-in-out infinite; }
.dwb.no { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (max-aspect-ratio: 3/4) {
  #doorWin { left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); width: auto; top: calc(64px + var(--safe-t)); transform: none; }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  #doorWin { width: min(400px, 52vw); top: calc(56px + var(--safe-t)); transform: none; }
  .dw-mon { aspect-ratio: 2 / 1; } .dw-status { font-size: 14px; min-height: 2.2em; } .dwb { min-height: 54px; font-size: 12px; } .dwb svg { width: 22px; height: 22px; }
}

/* ---------- ダイヤ・速度制限・どうぶつの小窓・レバーの光 ---------- */
#timeBox { position: absolute; left: calc(14px + var(--safe-l)); top: calc(66px + var(--safe-t)); display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 99px; background: #fff; border: 3px solid var(--line); box-shadow: 0 3px 0 var(--line); }
#timeBox .tb-lbl { font-size: 11px; color: #fff; background: #4c5bb8; border-radius: 99px; padding: 4px 9px 5px; }
#tbLeft { font: 600 20px var(--fn); min-width: 3.2em; }
#timeBox.over #tbLeft { color: #e8413c; }
#tbPace { font-style: normal; font-size: 12px; padding: 2px 8px 3px; border-radius: 99px; background: #d9f7e6; color: #127a48; }
#timeBox[data-pace="early"] #tbPace { background: #e3edff; color: #2f5bd0; }
#timeBox[data-pace="late"] #tbPace { background: #ffe3df; color: #c8322b; }
#mentor { top: calc(116px + var(--safe-t)); }
#limitBadge { position: absolute; left: calc(clamp(118px, 16vmin, 168px) + 24px + var(--safe-l)); bottom: calc(86px + var(--safe-b)); width: 74px; height: 74px; border-radius: 50%; background: #fff; border: 7px solid #e8413c; box-shadow: 0 0 0 3px var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
#limitBadge b { font: 600 26px var(--fn); } #limitBadge small { font-size: 9px; color: #6a7390; }
#limitBadge.over { animation: blinkRing .5s steps(2) infinite; }
@keyframes blinkRing { 50% { background: #ffe3df; transform: scale(1.08); } }
#pipWin { position: absolute; right: calc(14px + var(--safe-r)); top: calc(70px + var(--safe-t)); width: min(300px, 36vw); border-radius: 18px; overflow: hidden; border: 4px solid var(--line); box-shadow: 0 5px 0 var(--line); animation: dwIn .35s cubic-bezier(.2,1.5,.4,1); }
.pip-tag { display: block; background: var(--coral); color: #fff; font-size: 14px; text-align: center; padding: 4px 8px 5px; }
.pip-mon { aspect-ratio: 16 / 10; background: transparent; }
.lg { position: absolute; left: 0; right: 0; display: none; pointer-events: none; border-radius: 22px; }
.lg-go { top: 0; bottom: 50%; background: linear-gradient(0deg, rgba(92,195,255,0) 0%, rgba(92,195,255,.95) 100%); box-shadow: 0 0 22px 6px rgba(92,195,255,.75); }
.lg-brake { top: 50%; bottom: 0; background: linear-gradient(180deg, rgba(255,111,97,0) 0%, rgba(255,111,97,.95) 100%); box-shadow: 0 0 22px 6px rgba(255,111,97,.75); }
.lg::before, .lg::after { content: ""; position: absolute; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-left: 5px solid #fff; border-top: 5px solid #fff; animation: chevUp 0.9s linear infinite; }
.lg::after { animation-delay: .45s; }
.lg-go::before, .lg-go::after { bottom: 10%; transform: rotate(45deg); }
.lg-brake::before, .lg-brake::after { top: 10%; transform: rotate(225deg); animation-name: chevDown; }
@keyframes chevUp { from { bottom: 4%; opacity: 0; } 30% { opacity: 1; } to { bottom: 80%; opacity: 0; } }
@keyframes chevDown { from { top: 4%; opacity: 0; } 30% { opacity: 1; } to { top: 80%; opacity: 0; } }
#lever.guide-go .lg-go, #lever.guide-brake .lg-brake { display: block; animation: lgPulse 1s ease-in-out infinite; }
@keyframes lgPulse { 50% { opacity: .55; } }
#lever.guide-go .lv-top, #lever.guide-brake .lv-bot { animation: goPulse .8s ease-in-out infinite; }
#popup em { font-style: normal; font-size: 18px; padding: 2px 14px 4px; border-radius: 99px; border: 3px solid var(--line); margin-top: 4px; }
#popup em.ontime { background: var(--mint); color: #fff; } #popup em.early { background: #e3edff; } #popup em.late { background: #ffe3df; }
.rep-st u.ot { text-decoration: none; font-size: 11px; margin-left: 6px; padding: 1px 6px 2px; border-radius: 99px; background: var(--mint); color: #fff; vertical-align: 2px; }
@media (max-width: 760px), (max-height: 520px) {
  #timeBox { top: calc(56px + var(--safe-t)); } #tbLeft { font-size: 16px; } #timeBox .tb-lbl { font-size: 10px; }
  #mentor { top: calc(100px + var(--safe-t)); }
  #limitBadge { width: 60px; height: 60px; border-width: 6px; } #limitBadge b { font-size: 20px; }
}
@media (max-aspect-ratio: 3/4) {
  #limitBadge { left: calc(14px + var(--safe-l)); bottom: calc(200px + var(--safe-b)); }
  #pipWin { top: auto; bottom: calc(46vh + 20px); right: calc(112px + var(--safe-r)); width: 52vw; }
}

/* ---------- 余白の調整 ---------- */
.card .citems { margin: 6px 0 4px; }
.card .link { display: inline-block; margin-top: 14px; }
.card .ok-msg { margin: 16px 0 2px; }
.card.small .go { margin-top: 8px; }
.card .row { margin-top: 20px; }
.card .sub.wide { margin-top: 22px; }
.card .keys { margin-top: 18px; }
.card.report .row { margin-top: 24px; }
#repStampsWrap { margin-top: 20px; }
.t-subs { margin: 4px 0 6px; }
.t-foot { padding-top: 10px; }
.pick h2 { margin-bottom: 8px; }
.pick + .desc, .pick .desc { margin-top: 6px; }
#mentor { max-width: min(480px, 64vw); }
.dw-foot { padding: 12px 12px 14px; }
.dw-status { margin-bottom: 10px; }
@media (max-aspect-ratio: 21/20) { .t-panel { gap: 12px; } #btnStart { margin-top: 6px; } }

/* ---------- 上部とメーターの間隔（2026-10-02 調整） ---------- */
#timeBox { top: calc(76px + var(--safe-t)); }
#mentor { top: calc(128px + var(--safe-t)); }
#stopGauge { top: calc(84px + var(--safe-t)); }
.m-max { display: none; }
.m-num { bottom: 9%; z-index: 1; }
.m-num b { display: inline-block; background: #fff; border-radius: 10px; padding: 0 6px; line-height: 1.15; box-shadow: 0 0 0 2px #fff; }
.m-num small { display: block; margin-top: 1px; }
.m-hub { r: 6px; }
@media (max-width: 760px), (max-height: 520px) {
  #timeBox { top: calc(62px + var(--safe-t)); }
  #mentor { top: calc(108px + var(--safe-t)); }
  #stopGauge { top: calc(64px + var(--safe-t)); }
}
@media (max-aspect-ratio: 3/4) { #stopGauge { top: calc(160px + var(--safe-t)); } }

/* 停止位置ゲージは画面の下のまん中へ（上部の表示と重ならないように） */
#stopGauge { top: auto; bottom: calc(36px + var(--safe-b)); width: min(38vw, 420px); flex-direction: column-reverse; }
#stopGauge #stopLeft { margin: 0 0 14px; }
@media (max-width: 760px), (max-height: 520px) { #stopGauge { top: auto; bottom: calc(22px + var(--safe-b)); width: min(34vw, 300px); } #stopLeft { font-size: 17px; } }
@media (max-aspect-ratio: 3/4) { #stopGauge { bottom: auto; top: calc(110px + var(--safe-t)); width: calc(100vw - 40px); flex-direction: column; } #stopGauge #stopLeft { margin: 18px 0 0; } }

/* ---------- タイトル（2段階・すっきり） ---------- */
.t-panel { background: linear-gradient(90deg, rgba(255,253,246,.97) 0%, rgba(255,253,246,.94) 86%, rgba(255,253,246,0) 100%); padding-right: 40px; }
.t-home, .t-setup { display: flex; flex-direction: column; gap: 14px; min-height: 100%; flex-shrink: 0; }   /* flex-shrink：中身が 高い ときは のびて、上から スクロール できる（2026-10-06。以前は 縮んで、背の 低い 横画面で 上の ロゴが 見えない 所へ はみ出して いた） */
.t-home { justify-content: center; gap: 18px; }
.t-home .brand { position: static; }
.t-home .logo { margin-top: 2px; }
.t-home .l2 { font-size: clamp(54px, 7.4vw, 92px); }
.t-home .t-catch { margin-top: -4px; font-size: 17px; }
.rank { align-self: flex-start; padding: 8px 16px 8px 8px; border-radius: 999px; border-width: 2.5px; gap: 10px; }
.rank .rk-cap { width: 40px; height: 40px; border-width: 2.5px; }
.rank .rk-cap svg { width: 28px; }
.rank .rk-txt b { font-size: 16px; }
.rank .rk-bar { width: 180px; height: 8px; border-width: 1.5px; }
.rank .rk-txt small { font-size: 10px; }
#btnPlay { align-self: flex-start; min-width: 260px; font-size: 30px; min-height: 74px; margin-top: 4px; animation: goPulse 1.8s ease-in-out infinite; }
.t-home .t-subs { margin: 0; }
.t-home .t-foot { margin-top: 10px; }
.t-setup { animation: setupIn .35s cubic-bezier(.2,1.2,.4,1); }
@keyframes setupIn { from { transform: translateX(-24px); opacity: 0; } }
.t-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 15px; color: #4a5576; padding: 6px 12px 6px 6px; border-radius: 99px; }
.t-back svg { width: 22px; height: 22px; }
.t-back:hover { background: rgba(37,48,80,.06); }
.t-step { font-size: 26px; letter-spacing: .06em; margin: -2px 0 4px; }
.pick h3 { font-size: 13px; letter-spacing: .12em; color: #6a7390; margin-bottom: 8px; }
.t-setup #btnStart { margin-top: auto; }
.t-setup .desc { min-height: 1.6em; }
@media (max-aspect-ratio: 21/20) {
  .t-panel { padding-right: calc(16px + var(--safe-r)); }
  .t-home { gap: 12px; justify-content: flex-start; }
  .t-home .brand { position: absolute; top: -60px; left: 16px; }
  .t-home .logo { position: absolute; top: calc(-36vh + 30px); left: 16px; right: 16px; pointer-events: none; }
  .t-home .t-catch { display: none; }
  #btnPlay { align-self: stretch; }
  .t-setup #btnStart { margin-top: 6px; }
}

/* スマホ縦：ロゴはパネルの中、ドア操作中は ふきだしを隠す */
@media (max-aspect-ratio: 21/20) {
  .t-home .brand, .t-home .logo { position: static; }
  .t-home .brand .b-amix { font-size: 12px; } .t-home .brand .b-kids { font-size: 20px; }
  .t-home .l-series { font-size: 12px; padding: 4px 10px 5px; margin-bottom: 4px; }
  .t-home .l1 { font-size: 22px; } .t-home .l2 { font-size: clamp(40px, 12vw, 60px); }
  .t-panel { max-height: 72%; }
}
@media (max-aspect-ratio: 3/4) {
  #stage.dw-open #mentor { display: none; }
  .dwb { font-size: 12px; }
}

/* 分かち書きの空白でだけ改行する（「た！」だけ次の行に落ちるのを防ぐ） */
#hud, .overlay, #doorWin, #loading, .t-panel { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.parents p, .t-foot { word-break: normal; }
.dw-status, #mentor p, .card .lead, .desc, #popup { text-wrap: balance; }

#popup { width: max-content; max-width: 94vw; }
#popup .big, #popup .mid { white-space: nowrap; }

.desc .route { display: inline-block; font-size: 11px; color: #fff; background: var(--ink); border-radius: 99px; padding: 2px 9px 3px; margin-right: 6px; vertical-align: 1px; }
.pick.two { grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 16px; }
#rebuild { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(255,253,246,.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#rebuild p { font-size: 18px; padding: 12px 22px; background: #fff; border: 3px solid var(--line); border-radius: 99px; box-shadow: 0 4px 0 var(--line); }
@media (max-aspect-ratio: 21/20) { .pick.two { grid-template-columns: 1fr 1fr; } .pick.two > div:last-child { grid-column: 1 / -1; } }
.pick.two { display: flex; flex-wrap: wrap; gap: 12px 16px; }
#trainPick { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 760px) { #trainPick { grid-template-columns: repeat(3, 1fr); } }

/* 太陽の まぶしさ（光の広がりと レンズの ゴースト）。js が 位置と 強さを 入れる */
#glare { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0; mix-blend-mode: screen; --x: 50%; --y: 50%; }
#glare b { position: absolute; inset: 0; background: radial-gradient(circle at var(--x) var(--y), rgba(255,250,230,.95) 0, rgba(255,236,190,.55) 6%, rgba(255,220,170,.22) 20%, rgba(255,210,160,0) 48%); }
#glare i { position: absolute; left: 0; top: 0; width: var(--s, 60px); height: var(--s, 60px); margin: calc(var(--s, 60px) / -2) 0 0 calc(var(--s, 60px) / -2); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0) 40%, var(--c, rgba(170,220,255,.35)) 70%, rgba(255,255,255,0) 72%); }
#glare i:nth-child(2) { --s: 110px; --c: rgba(255,200,140,.32); }
#glare i:nth-child(3) { --s: 46px; --c: rgba(160,255,200,.3); }
#glare i:nth-child(4) { --s: 160px; --c: rgba(170,190,255,.22); }
#glare i:nth-child(5) { --s: 70px; --c: rgba(255,160,200,.26); }

/* 電車を えらびなおした ときの 白い つなぎ */
#flash { position: fixed; inset: 0; pointer-events: none; z-index: 2; background: #fff; opacity: 0; }
#flash.on { animation: flashFade .55s ease-out; }
@keyframes flashFade { 0% { opacity: 0; } 22% { opacity: .85; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #flash.on { animation-duration: .2s; } }

/* タイトルの ロゴ：M PLUS Rounded 1c の 太字（でんしゃの＝ExtraBold、うんてんし＝Black） */
.l1, .l2 { font-family: 'M PLUS Rounded 1c', var(--f); }
.l1 { font-weight: 800; }
.l2 { font-weight: 900; letter-spacing: .02em; }

/* スマホ縦：タイトルの ロゴは パネルの中に（#title .logo の 絶対配置より 強く） */
@media (max-aspect-ratio: 21/20) {
  #title .t-home .logo { position: static; top: auto; left: auto; right: auto; margin: 2px 0 2px; }
}

/* 読みこみ画面：線路を 走る 電車・工程の 駅・％・しってる？ */
.ld-title { font-family: 'M PLUS Rounded 1c', var(--f); font-weight: 900; font-size: 26px; letter-spacing: .06em; color: var(--ink); margin-top: -6px; }
.ld-rail { position: relative; width: min(84vw, 640px); height: 104px; --v: 0; }
.ld-track { position: absolute; left: 0; right: 0; bottom: 30px; height: 14px; border-radius: 4px;
  background: linear-gradient(#8d8f96, #8d8f96) 0 2px / 100% 3px no-repeat, linear-gradient(#8d8f96, #8d8f96) 0 9px / 100% 3px no-repeat, repeating-linear-gradient(90deg, #b9a07c 0 6px, transparent 6px 14px); }
.ld-st { list-style: none; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; margin: 0; padding: 0; }
.ld-st li { position: absolute; left: calc(var(--x) * 100%); bottom: 0; transform: translateX(-50%); font-size: 13px; color: #8a92a8; white-space: nowrap; transition: color .3s; }
.ld-st li::before { content: ""; position: absolute; left: 50%; top: -26px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; border: 3px solid #c9d0de; transition: background .3s, border-color .3s, transform .3s; }
.ld-st li.on { color: var(--ink); }
.ld-st li.on::before { background: var(--sun); border-color: var(--line); transform: scale(1.15); }
.ld-train { position: absolute; bottom: 38px; left: calc(var(--v) * 100%); width: 112px; margin-left: -56px; transition: left .5s cubic-bezier(.3,.9,.4,1); }
.ld-train svg { display: block; width: 100%; animation: ldBob .35s ease-in-out infinite alternate; }
/* うしろに のこる 白い ぽわぽわ：電車（パンタグラフ つき）に なったので、屋根の 煙では なく、足もとの 走る いきおいに（以前は 屋根の うしろから 出て いた） */
.ld-smoke { position: absolute; left: -4px; top: 40px; width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.9); border: 2px solid rgba(37,48,80,.15); animation: ldSmoke 1.4s ease-out infinite; opacity: 0; }
.ld-smoke:nth-child(2) { animation-delay: .47s; } .ld-smoke:nth-child(3) { animation-delay: .94s; }
@keyframes ldSmoke { 0% { transform: translate(0, 0) scale(.4); opacity: .9; } 100% { transform: translate(-30px, -10px) scale(1.4); opacity: 0; } }
.ld-pct { font-family: 'Fredoka', var(--f); font-weight: 600; font-size: 22px; color: var(--ink); margin-top: -8px; }
.ld-pct b { font-size: 40px; font-weight: 600; margin-right: 2px; }
.ld-tip { max-width: min(82vw, 460px); background: #fff; border: 3px solid var(--line); border-radius: 18px; padding: 10px 16px 12px; text-align: left; box-shadow: 0 5px 0 var(--line); min-height: 4.6em; }
.ld-tip span { display: inline-block; font-size: 12px; background: var(--sky); color: #fff; border-radius: 99px; padding: 2px 10px; margin-bottom: 4px; }
.ld-tip p { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0; animation: cardIn .4s ease-out; }
#loading.ready .ld-rail, #loading.ready .ld-pct, #loading.ready .ld-tip { display: none; }
@media (prefers-reduced-motion: reduce) { .ld-train svg, .ld-smoke { animation: none; } }

/* でんしゃの ボタン（しゅっきんの じゅんび）：5つ ならべても パネルから はみ出さない。
   PC では 列が 中身（種類の 文字を 1行で 書いた 幅）より せまく なれず、右はしの ボタンが パネルの 外へ 出て かくれて いた。
   列は 中身より せまく なれる ように し（minmax(0, 1fr)）、種類の 文字は 2行に 折り返して よい ことに する */
#trainPick { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#trainPick .tcard { min-width: 0; padding-left: 3px; padding-right: 3px; }
#trainPick .tcard small { white-space: normal; word-break: keep-all; text-align: center; line-height: 1.25; }
@media (max-width: 760px) { #trainPick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 「とうちゃく よてい」の 上下の すき間（2026-10-04） ----------
   スマホでは、上の「つぎの駅」の 箱（下はし＋影 4px）と くっついて、上の 余白が なくなって 見えた。
   影の ぶんも 入れて 9px あける。下の 吹き出し（せんぱい）も 影に かからない ように 下げる */
#mentor { top: calc(132px + var(--safe-t)); }
@media (max-width: 760px), (max-height: 520px) {
  #timeBox { top: calc(70px + var(--safe-t)); }
  #mentor { top: calc(125px + var(--safe-t)); }
}

/* ========== とりてつモード（あるいて 電車の 写真を とる） ========== */
/* タイトルの 入口 */
.photo-go { align-self: flex-start; min-height: 58px; padding: 6px 22px 6px 16px; gap: 12px; text-align: left; }
.photo-go svg { width: 30px; height: 30px; flex: none; color: var(--coral); }
.photo-go span { display: flex; flex-direction: column; line-height: 1.25; }
.photo-go b { font-size: 18px; letter-spacing: .04em; }
.photo-go small { font-size: 11px; color: #6a7390; }
@media (max-aspect-ratio: 21/20) { .photo-go { align-self: stretch; justify-content: center; } }

#photoHud { position: absolute; inset: 0; z-index: 10; pointer-events: none; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
#photoHud button, #photoHud .ph-sl { pointer-events: auto; }
#phTouch { position: absolute; inset: 0; pointer-events: auto; touch-action: none; cursor: grab; }
#phTouch:active { cursor: grabbing; }
/* 写真に なる 範囲（わく）。まわりは 暗く する */
#phFrame { position: absolute; box-sizing: border-box; border: 2.5px solid rgba(255,255,255,.96); border-radius: 3px; box-shadow: 0 0 0 9999px rgba(16,22,44,.46), inset 0 0 0 1px rgba(37,48,80,.45); pointer-events: none; }
/* ピントの わく（おした 所へ 動く） */
#phFocus { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; pointer-events: none; opacity: .92;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 58'%3E%3Cpath d='M3 16V3h13M42 3h13v13M55 42v13H42M16 55H3V42' fill='none' stroke='%23253050' stroke-width='5.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 16V3h13M42 3h13v13M55 42v13H42M16 55H3V42' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
#phFocus.pulse { animation: phFocusIn .45s ease-out; }
@keyframes phFocusIn { from { transform: scale(1.55); opacity: .15; } }
/* 左上：いま いる 所と、つぎの 電車 */
#phLeft { position: absolute; left: calc(14px + var(--safe-l)); top: calc(12px + var(--safe-t)); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: min(320px, 58vw); }
#phInfo { display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border-radius: 99px; background: #fff; border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); }
#phInfo .ph-ico { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--coral); color: #fff; display: grid; place-items: center; border: 3px solid var(--line); }
#phInfo .ph-ico svg { width: 24px; height: 24px; }
#phInfo p { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
#phInfo small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #6a7390; }
#phInfo small i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; }
#phInfo b { font-size: 18px; letter-spacing: .03em; }
#phNext { background: #fff; border: 3px solid var(--line); border-radius: 18px; box-shadow: 0 4px 0 var(--line); padding: 7px 12px 9px; min-width: 210px; }
#phNext > small { display: block; font-size: 11px; color: #6a7390; letter-spacing: .08em; margin-bottom: 3px; }
#phNextList { list-style: none; display: flex; flex-direction: column; gap: 4px; }
#phNextList li { display: flex; align-items: center; gap: 8px; }
#phNextList li i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
#phNextList li span { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
#phNextList li b { font-size: 15px; } #phNextList li small { font-size: 10.5px; color: #6a7390; }
#phNextList li em { font-style: normal; font-family: var(--fn); font-size: 14px; white-space: nowrap; background: #eef3fb; border-radius: 99px; padding: 1px 10px 2px; }
#phNextList li.soon em { background: var(--coral); color: #fff; animation: goPulse .7s ease-in-out infinite; }
#phSkip { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; min-height: 36px; padding: 0 14px; border-radius: 99px; background: var(--sun); border: 2.5px solid var(--line); box-shadow: 0 3px 0 var(--line); font-size: 13px; }
#phSkip svg { width: 16px; height: 16px; }
#phSkip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
/* 右上：ちず・むかいの ホーム・おわる */
#phTop { position: absolute; right: calc(14px + var(--safe-r)); top: calc(12px + var(--safe-t)); display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 46vw; }
#phMapBtn { background: var(--sun); }
/* 右下：ズーム・ぼかし・たかさ・シャッター */
#phCtl { position: absolute; right: calc(14px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.ph-sl { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; width: 258px; min-height: 44px; padding: 0 12px; border-radius: 99px; background: #fff; border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); font-size: 13px; --v: 0; }
.ph-sl:focus-visible { outline: 4px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px var(--ink); }
.ph-sl > span { min-width: 3.4em; }
.ph-sl > b { font-family: var(--fn); font-size: 14px; min-width: 3.6em; text-align: right; }
#phBlur > b { font-family: var(--f); font-size: 12px; }
.ph-tr { position: relative; height: 40px; touch-action: none; cursor: pointer; }
.ph-tr::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 99px; background: linear-gradient(90deg, var(--sky) calc(var(--v) * 100%), #e3e8f1 0); border: 2px solid var(--line); }
.ph-tr i { position: absolute; top: 50%; left: calc(11px + (100% - 22px) * var(--v)); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; border: 3px solid var(--line); box-shadow: 0 2px 0 var(--line); }
.ph-row { display: flex; align-items: center; gap: 10px; }
.ph-col { display: flex; flex-direction: column; gap: 8px; }
.ph-col .hbtn { min-height: 46px; justify-content: flex-start; padding: 0 14px 0 10px; }
#phHeight span, #phOri span { display: flex; flex-direction: column; line-height: 1.15; font-size: 10px; color: #6a7390; text-align: left; }
#phHeight b, #phOri b { font-size: 14px; color: var(--ink); }
#phOri svg { transition: transform .2s; } #phOri.tall svg { transform: rotate(90deg); }
#phShot { background: var(--coral); color: #fff; }
#phShot span { font-size: 13px; }
#phAlbumBtn { position: relative; width: 62px; height: 62px; border-radius: 14px; border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); background: #fff; padding: 0; overflow: visible; transform: rotate(-4deg); }
#phAlbumBtn img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
#phAlbumBtn em { position: absolute; right: -8px; top: -9px; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 99px; background: var(--sun); border: 2.5px solid var(--line); font: 600 13px/19px var(--fn); font-style: normal; text-align: center; }
#phAlbumBtn.bump { animation: phBump .45s cubic-bezier(.2,1.8,.4,1); }
@keyframes phBump { from { transform: rotate(-4deg) scale(1.5); } }
/* 歩く スティック（指の ときだけ）と、その 場所の 目じるし */
#phStick { position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 3px solid rgba(255,255,255,.9); background: rgba(37,48,80,.22); display: none; pointer-events: none; }
#phStick.on { display: block; }
#phStick i { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: #fff; border: 3px solid var(--line); }
#phWalkHint { position: absolute; left: calc(30px + var(--safe-l)); bottom: calc(40px + var(--safe-b)); width: 96px; height: 96px; border-radius: 50%; border: 3px dashed rgba(255,255,255,.85); background: rgba(37,48,80,.16); color: #fff; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; text-shadow: 0 1px 0 rgba(0,0,0,.35); pointer-events: none; }
#phWalkHint svg { width: 30px; height: 30px; }
#photoHud.touch #phWalkHint { display: flex; }
#photoHud.touch #phStick.on ~ #phWalkHint { display: none; }
#phKeys { position: absolute; left: calc(14px + var(--safe-l)); bottom: calc(12px + var(--safe-b)); margin: 0; padding: 5px 14px 6px; border-radius: 99px; background: rgba(255,255,255,.86); font-size: 12px; color: #4a5576; line-height: 1.9; }
#phToast { position: absolute; left: 50%; top: calc(74px + var(--safe-t)); transform: translate(-50%, -8px); max-width: min(86vw, 520px); padding: 8px 18px 9px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 15px; text-align: center; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
#phToast.on { opacity: 1; transform: translate(-50%, 0); }
#phFlash { position: absolute; background: #fff; opacity: 0; pointer-events: none; }
#phFlash.on { animation: phFlash .28s ease-out; }
@keyframes phFlash { from { opacity: .85; } to { opacity: 0; } }
#phFade { position: absolute; inset: 0; z-index: 12; background: #fff; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
#phFade.on { opacity: 1; pointer-events: auto; }
/* とりてつモードへ 切りかえる あいだの 読み込み（2026-10-05）。はじめの 読み込みと 同じ 空の 色。新しい 場所の 最初の 重い コマを かくす */
#phLoad { position: absolute; inset: 0; z-index: 55; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, #ffffff 0%, var(--sky2) 45%, var(--sky) 100%); transition: opacity .38s ease; }
#phLoad[hidden] { display: none !important; }
#phLoad.out { opacity: 0; pointer-events: none; }
.phl-cam { width: 116px; overflow: visible; animation: ldBob .5s ease-in-out infinite alternate; }
.phl-flash { transform-box: fill-box; transform-origin: center; animation: phlFlash 1.3s ease-in-out infinite; }
@keyframes phlFlash { 0%, 55%, 100% { opacity: 0; transform: scale(.5); } 66% { opacity: 1; transform: scale(1.25); } 82% { opacity: .25; transform: scale(1); } }
#phLoad p { margin: 0; font-size: 18px; padding: 12px 22px; background: #fff; border: 3px solid var(--line); border-radius: 99px; box-shadow: 0 4px 0 var(--line); white-space: nowrap; }
@media (max-width: 420px) { #phLoad p { font-size: 16px; padding: 10px 18px; } .phl-cam { width: 96px; } }
.phl-dots { display: inline-flex; gap: 5px; margin-left: 8px; vertical-align: 2px; }
.phl-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); animation: phlDot 1s ease-in-out infinite; }
.phl-dots i:nth-child(2) { animation-delay: .15s; } .phl-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes phlDot { 0%, 100% { transform: translateY(0); opacity: .3; } 40% { transform: translateY(-5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .phl-cam, .phl-flash, .phl-dots i { animation: none; } .phl-flash { opacity: 1; } }
/* 小さい 画面：名札と「つぎの 電車」は 1行ずつに つめる（写真の わくを かくしすぎない）。右上の ボタンは 絵だけ */
@media (max-width: 760px), (max-height: 520px) {
  .ph-sl { width: 214px; min-height: 40px; }
  #phLeft { max-width: min(300px, calc(100vw - 196px)); gap: 6px; }
  #phInfo { padding: 4px 14px 4px 4px; gap: 8px; }
  #phInfo .ph-ico { width: 34px; height: 34px; border-width: 2.5px; } #phInfo .ph-ico svg { width: 20px; height: 20px; }
  #phInfo b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #phInfo small { font-size: 10px; white-space: nowrap; }
  #phTop { max-width: none; flex-wrap: nowrap; }
  #phTop .hbtn span { display: none; }
  #phNext { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 3px 6px 4px 9px; border-radius: 99px; }
  #phNext > small, #phNextList li small, #phNextList li:nth-child(2) { display: none; }
  #phNextList li { gap: 6px; } #phNextList li b { font-size: 13px; white-space: nowrap; } #phNextList li em { font-size: 12px; padding: 0 8px 1px; }
  #phSkip { margin-top: 0; min-height: 30px; padding: 0 9px; font-size: 0; gap: 0; box-shadow: 0 2px 0 var(--line); }
  #phToast { top: calc(112px + var(--safe-t)); font-size: 13px; border-radius: 18px; padding: 7px 14px 8px; }
}
@media (max-height: 520px) { #phCtl { gap: 6px; } #phShot { width: 88px; height: 88px; } #phNextList li:nth-child(2) { display: none; } }
@media (max-aspect-ratio: 3/4) { #phWalkHint { bottom: calc(150px + var(--safe-b)); left: calc(18px + var(--safe-l)); width: 84px; height: 84px; } }   /* たて持ち：アルバムの 小さな 写真と 重ならない 高さへ */
@media (prefers-reduced-motion: reduce) { #phFade { transition-duration: .01s; } #phFlash.on, #phAlbumBtn.bump, #phFocus.pulse { animation: none; } }

/* おやくそく */
.ph-rules { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; text-align: left; }
.ph-rules li { display: flex; flex-direction: column; gap: 1px; padding: 9px 14px 10px 44px; border-radius: 16px; background: #fff; border: 3px solid var(--line); position: relative; }
.ph-rules li::before { content: ""; position: absolute; left: 12px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12l4 4 8-8' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; border: 2.5px solid var(--line); }
.ph-rules b { font-size: 16px; } .ph-rules span { font-size: 12.5px; color: #4a5576; }

/* ちず */
.card.ph-mapcard { width: min(100%, 900px); padding: 22px 22px 18px; }
.ph-mapbody { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.ph-mapcv { border: 3px solid var(--line); border-radius: 18px; overflow: hidden; background: #a9dcf7; align-self: start; }
.ph-mapcv canvas { display: block; width: 100%; cursor: pointer; }
.ph-spots { list-style: none; text-align: left; overflow-y: auto; max-height: min(52vh, 430px); touch-action: pan-y pinch-zoom; border: 3px solid var(--line); border-radius: 18px; background: #fff; padding: 6px; scrollbar-width: thin; }
.ph-spots .ph-lh { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6a7390; letter-spacing: .06em; padding: 8px 8px 3px; }
.ph-spots .ph-lh i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--line); }
.ph-spots button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 4px 10px; border-radius: 12px; text-align: left; font-size: 15px; }
.ph-spots button[aria-pressed="true"] { background: #fff4c7; box-shadow: inset 0 0 0 2.5px var(--line); }
.ph-k { flex: none; font-size: 10px; padding: 1px 8px 2px; border-radius: 99px; border: 2px solid var(--line); background: #eef3fb; }
.ph-k.ground { background: var(--coral); color: #fff; }
.ph-mapfoot { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
#phTime button[data-t="eve"][aria-pressed="true"] { background: #ff9a5c; }
#phTime button[data-t="night"][aria-pressed="true"] { background: #4c5bb8; }
#phGo { min-width: 220px; }
#phGo:disabled { background: #c9cfdb; box-shadow: 0 6px 0 #8f97a8; border-color: #8f97a8; cursor: default; }
.ph-goname { margin-top: 8px; font-size: 13px; color: #4a5576; min-height: 1.5em; }
@media (max-width: 720px) {
  .ph-mapbody { grid-template-columns: 1fr; }
  .ph-spots { max-height: 30vh; }
}

/* アルバム */
.card.ph-albumcard { width: min(100%, 820px); }
.card.ph-albumcard h2 small { display: inline-block; margin-left: 10px; font-family: var(--fn); font-size: 14px; letter-spacing: 0; }
#phAlbumGrid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
#phAlbumGrid button { display: block; width: 100%; padding: 5px 5px 14px; background: #fff; border: 3px solid var(--line); border-radius: 8px; box-shadow: 0 4px 0 var(--line); transition: transform .1s; }
#phAlbumGrid li:nth-child(odd) button { transform: rotate(-1.5deg); } #phAlbumGrid li:nth-child(even) button { transform: rotate(1.2deg); }
#phAlbumGrid button:active { transform: scale(.97); }
#phAlbumGrid img { display: block; width: 100%; height: auto; max-height: 220px; object-fit: cover; border-radius: 3px; background: #dfe6ee; }

/* とった 写真（保存）：画像は 長押しで 保存できる 本物の img。たてに 長い ときは 画面ごと スクロールする */
.card.ph-viewcard { width: min(100%, 860px); padding: 22px 20px 20px; }
.card.ph-viewcard h2 small { margin-top: 2px; }
.ph-img { display: flex; justify-content: center; margin: 8px 0 4px; }
.ph-img img { display: block; max-width: 100%; max-height: min(64vh, 640px); max-height: min(64dvh, 640px); width: auto; height: auto; object-fit: contain; border: 3px solid var(--line); border-radius: 10px; background: #dfe6ee;
  -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; touch-action: auto; pointer-events: auto; }
.ph-hold { font-size: 13px; color: #4a5576; margin-top: 10px; line-height: 1.7; }
/* 保存用の 写真が まだ できて いない あいだ（数秒）：小さな 絵を 見せて、保存は 待って もらう */
.ph-wait { display: none; font-size: 13px; color: #4a5576; margin-top: 10px; }
#phView.wait .ph-wait { display: block; }
#phView.wait .ph-hold, #phView.wait #phDl { display: none !important; }
#phView.wait .ph-img img { -webkit-touch-callout: none; pointer-events: none; }   /* 小さな 絵の ほうを 長押しで 保存して しまわない ように */
#phSave:disabled { background: #c9cfdb; box-shadow: 0 6px 0 #8f97a8; border-color: #8f97a8; cursor: default; }
a.sub, a.sub:visited, a.sub:hover, a.sub:active { color: var(--ink); text-decoration: none; }
.ph-touch { display: none; }
#stage.ph-touchdev .ph-touch { display: inline-flex; }
#stage.ph-touchdev p.ph-touch { display: block; }
#stage.ph-touchdev .ph-mouse { display: none; }
#phShare { font-size: 18px; min-height: 56px; }

/* ---------- しゅっきんの じゅんび：中くらいの 幅でも きゅうくつに しない（2026-10-05） ----------
   幅 900px 前後の 横長の 画面で、左の パネルが 46vw（414px）しか なく、でんしゃの ボタンの 名前が 2行に 折れて いた。
   ・パネルを 横に 置く 形（縦横比 21/20 より 横長）で 幅 761px 以上なら、パネルは 470px（画面の 55% まで）より せまく しない
   ・でんしゃの 名前は 折り返さない。ボタンの 幅に 合わせて 文字を 小さく する（cqw＝#trainPick の 幅の 1%。使えない ブラウザは 今までどおり 15px）
   ・まだ 乗れない でんしゃ：名前と 種類は かくして、その 場所に「いっしゅう すると のれるよ」を 置く（文字が 重なって 読めなかった） */
@media (min-aspect-ratio: 2101/2000) and (min-width: 761px) { .t-panel { width: min(max(46vw, min(470px, 55vw)), 560px); } }
#trainPick { container-type: inline-size; }
#trainPick .tcard b { white-space: nowrap; }
@supports (font-size: 1cqw) {
  #trainPick .tcard b { font-size: clamp(11px, 3.55cqw, 15px); }
  @media (max-width: 760px) { #trainPick .tcard b { font-size: 15px; } }      /* 3列の ときは 幅が あるので そのまま */
}
.tcard.locked b, .tcard.locked small { visibility: hidden; }
.tcard.locked .lock { justify-content: flex-end; padding: 4px 3px 8px; gap: 2px; line-height: 1.2; word-break: keep-all; text-align: center; }
.tcard.locked .lock svg { width: 18px; height: 18px; }
/* 背の 低い 横長の 画面（スマホの 横向き など）：「しゅっきん する！」は いつも 下に 見える ように する（下まで スクロール しないと 押せなかった） */
@media (min-aspect-ratio: 2101/2000) and (max-height: 700px) {
  /* 下を 通る 項目が ボタンの まわりに のぞかない ように、パネルと 同じ 色の ふちと ぼかしを 付ける */
  .t-setup #btnStart { position: sticky; bottom: calc(8px + var(--safe-b)); z-index: 2; min-height: 60px; font-size: 24px; box-shadow: 0 6px 0 var(--line), 0 3px 0 10px rgba(255,253,246,.96), 0 -12px 14px 8px rgba(255,253,246,.9); }
  .t-setup #btnStart:active { box-shadow: 0 1px 0 var(--line), 0 -2px 0 10px rgba(255,253,246,.96), 0 -17px 14px 8px rgba(255,253,246,.9); }
}

/* ---------- ドアの 窓（ワイプ）が 出て いる あいだ、せんぱいの ふきだしは 窓の 右へ よける（2026-10-05） ----------
   横長の 画面では、ドアの 窓（左・まん中。ふきだしより 手前）が ふきだし（左・上）に 重なり、セリフの 2行目から 下が かくれて いた。
   窓の 幅は #doorWin の 指定と 同じ 値（min(470px, 46vw)、背の 低い 画面は min(400px, 52vw)）。たて長（3/4 より 細い）は 今までどおり ふきだしを 出さない */
#mentor { transition: opacity .25s, transform .3s cubic-bezier(.2,1.6,.4,1), left .3s ease, top .3s ease; }
@media (min-aspect-ratio: 3001/4000) {
  /* 右がわには「とうちゃく よてい」の 箱が ないので、上の ボタンの すぐ 下まで 上げる（下の レバーの 札「すすむ」に かからない ように） */
  #stage.dw-open #mentor { left: calc(30px + var(--safe-l) + min(470px, 46vw)); top: calc(72px + var(--safe-t)); max-width: min(480px, calc(100vw - 44px - var(--safe-l) - var(--safe-r) - min(470px, 46vw))); }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  #stage.dw-open #mentor { left: calc(28px + var(--safe-l) + min(400px, 52vw)); top: calc(58px + var(--safe-t)); max-width: min(480px, calc(100vw - 40px - var(--safe-l) - var(--safe-r) - min(400px, 52vw))); }
}

/* あそびかたの モーダルの「ゲーム紹介」：おうちの方への 案内の 下。別の タブで ひらく（ゲームは そのまま）。2026-10-05 */
.card .sub.wide.how-about { margin-top: 16px; font-size: 15px; text-align: center; line-height: 1.4; }

/* ---------- 文字の ふち取りを なめらかに（2026-10-05） ----------
   ふちは 文字の 影を まわりに 8つ ならべて 作って いたので、スマホ（画素の こまかい 画面）で ふちが 角ばって ギザギザに 見えた。
   16方向に ふやして 丸く する。下の あつみ（立体に 見える 影）も 同じ 丸い ふちを ずらして 重ねる */
:root {
  --ol-pop: 4px 0px 0 var(--line), 3.7px 1.53px 0 var(--line), 2.83px 2.83px 0 var(--line), 1.53px 3.7px 0 var(--line), 0px 4px 0 var(--line), -1.53px 3.7px 0 var(--line), -2.83px 2.83px 0 var(--line), -3.7px 1.53px 0 var(--line), -4px 0px 0 var(--line), -3.7px -1.53px 0 var(--line), -2.83px -2.83px 0 var(--line), -1.53px -3.7px 0 var(--line), 0px -4px 0 var(--line), 1.53px -3.7px 0 var(--line), 2.83px -2.83px 0 var(--line), 3.7px -1.53px 0 var(--line);
  --ol-pop-dn: 4px 5px 0 var(--line), 3.7px 6.53px 0 var(--line), 2.83px 7.83px 0 var(--line), 1.53px 8.7px 0 var(--line), 0px 9px 0 var(--line), -1.53px 8.7px 0 var(--line), -2.83px 7.83px 0 var(--line), -3.7px 6.53px 0 var(--line), -4px 5px 0 var(--line), -3.7px 3.47px 0 var(--line), -2.83px 2.17px 0 var(--line), -1.53px 1.3px 0 var(--line), 0px 1px 0 var(--line), 1.53px 1.3px 0 var(--line), 2.83px 2.17px 0 var(--line), 3.7px 3.47px 0 var(--line);
  --ol-logo: 3px 0px 0 var(--line), 2.77px 1.15px 0 var(--line), 2.12px 2.12px 0 var(--line), 1.15px 2.77px 0 var(--line), 0px 3px 0 var(--line), -1.15px 2.77px 0 var(--line), -2.12px 2.12px 0 var(--line), -2.77px 1.15px 0 var(--line), -3px 0px 0 var(--line), -2.77px -1.15px 0 var(--line), -2.12px -2.12px 0 var(--line), -1.15px -2.77px 0 var(--line), 0px -3px 0 var(--line), 1.15px -2.77px 0 var(--line), 2.12px -2.12px 0 var(--line), 2.77px -1.15px 0 var(--line);
  --ol-logo-dn: 3px 5px 0 var(--line), 2.77px 6.15px 0 var(--line), 2.12px 7.12px 0 var(--line), 1.15px 7.77px 0 var(--line), 0px 8px 0 var(--line), -1.15px 7.77px 0 var(--line), -2.12px 7.12px 0 var(--line), -2.77px 6.15px 0 var(--line), -3px 5px 0 var(--line), -2.77px 3.85px 0 var(--line), -2.12px 2.88px 0 var(--line), -1.15px 2.23px 0 var(--line), 0px 2px 0 var(--line), 1.15px 2.23px 0 var(--line), 2.12px 2.88px 0 var(--line), 2.77px 3.85px 0 var(--line);
  --ol-kids: 2px 0px 0 var(--line), 1.85px 0.77px 0 var(--line), 1.41px 1.41px 0 var(--line), 0.77px 1.85px 0 var(--line), 0px 2px 0 var(--line), -0.77px 1.85px 0 var(--line), -1.41px 1.41px 0 var(--line), -1.85px 0.77px 0 var(--line), -2px 0px 0 var(--line), -1.85px -0.77px 0 var(--line), -1.41px -1.41px 0 var(--line), -0.77px -1.85px 0 var(--line), 0px -2px 0 var(--line), 0.77px -1.85px 0 var(--line), 1.41px -1.41px 0 var(--line), 1.85px -0.77px 0 var(--line);
  --ol-kids-dn: 2px 2.5px 0 var(--line), 1.85px 3.27px 0 var(--line), 1.41px 3.91px 0 var(--line), 0.77px 4.35px 0 var(--line), 0px 4.5px 0 var(--line), -0.77px 4.35px 0 var(--line), -1.41px 3.91px 0 var(--line), -1.85px 3.27px 0 var(--line), -2px 2.5px 0 var(--line), -1.85px 1.73px 0 var(--line), -1.41px 1.09px 0 var(--line), -0.77px 0.65px 0 var(--line), 0px 0.5px 0 var(--line), 0.77px 0.65px 0 var(--line), 1.41px 1.09px 0 var(--line), 1.85px 1.73px 0 var(--line);
}
#popup .big, #popup .mid { text-shadow: var(--ol-pop), var(--ol-pop-dn); }
.l2 { text-shadow: var(--ol-logo), var(--ol-logo-dn); }
.b-kids i { text-shadow: var(--ol-kids), var(--ol-kids-dn); }

/* ---------- 上に 出る 駅名の 電光板：スマホの たて画面で 2行に ならない ように（2026-10-05） ----------
   画面の まん中（left: 50%）から 右の はばしか 使えず、そこで 折り返して いた */
#ann { white-space: nowrap; max-width: calc(100vw - 24px); }

/* ---------- ワイプ（ドアの そうさ・どうぶつと 信号の 小窓）：消える ときも 小さく なって 消える（2026-10-05） ---------- */
@keyframes dwOut { to { transform: translateY(-40%) scale(.85); opacity: 0; } }
#doorWin.leave, #pipWin.leave { animation: dwOut .26s cubic-bezier(.5, 0, .75, 0) both; pointer-events: none; }

/* ---------- スマホ・タブレットで 吹き出しや 小窓が ほかの 表示に 重ならない ように（2026-10-05） ---------- */
/* 駅名の 電光板：たて画面では「つぎは」の 箱の 上に 左よせで 出す（まん中だと 右上の ボタンに かかって、駅名の 終わりが かくれた） */
#ann { transform: translate(var(--ann-x, -50%), -140%); }
@keyframes annIn { 0% { transform: translate(var(--ann-x, -50%), -140%); } 8%, 88% { transform: translate(var(--ann-x, -50%), 0); } 100% { transform: translate(var(--ann-x, -50%), -140%); } }
@media (max-aspect-ratio: 3/4) {
  #ann { --ann-x: 0; left: calc(10px + var(--safe-l)); max-width: calc(100vw - 130px - var(--safe-l) - var(--safe-r)); padding: 8px 16px; gap: 10px; }
  #ann b { font-size: 21px; letter-spacing: .08em; }
  /* 吹き出しは 画面の はばまで 使う（せまいと 4〜5行に なって 下の 表示に かかった。あとの 64vw の 指定に 負けて いた） */
  #mentor { max-width: calc(100vw - 28px - var(--safe-l) - var(--safe-r)); }
  /* 止まる 位置の ゲージが 出て いる あいだは、吹き出しを ゲージの 下へ */
  #hud:has(#stopGauge:not([hidden])) #mentor { top: calc(212px + var(--safe-t)); }
  /* どうぶつ・信号の 小窓は 吹き出しの 下に（3行の 吹き出しの 下はしより 下） */
  #pipWin { top: calc(240px + var(--safe-t)); bottom: auto; }
}
/* 背の 低い 横画面（スマホの 横向き）：小窓は レバーの 左に 出す（レバーに かかって いた）。小窓が 出て いる あいだは、吹き出しの はばを 小窓の 手前まで */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  #pipWin { right: calc(118px + var(--safe-r)); top: calc(60px + var(--safe-t)); width: min(230px, 30vw); }   /* 下の「ブレーキ▼」の 札にも かからない 高さ */
  #hud:has(#pipWin:not([hidden])) #mentor { max-width: calc(100vw - 150px - min(230px, 30vw) - var(--safe-l) - var(--safe-r)); }
}

/* ---------- スマホの レバー（すすむ・ブレーキ）を 長く（2026-10-08） ----------
   スマホでは レバーが 画面の 高さに 合わせて ちぢみ、溝の 長さが 横向きで 72〜135px（1段 12〜22px）しか なかった（PC は 316px）。指で 1段ずつ えらびにくい。
   横向き：上の ボタンの すぐ 下から 下まで のばす。まわりは レバーを よける —— 横の「ブレーキ▼」の 札は たて画面と おなじく 出さない（まん中が 上がって 小窓に かかる）、
   スタンプの 通知は 上の ボタンの 左に 小さく 出す（レバー・ふきだし・小窓の どれにも かからない 高さ）、
   ドアの 窓が 出て いる あいだの ふきだしは レバーの 手前で おりかえす（はばの せまい 横画面は たて画面と おなじく 出さない。窓の 中に おなじ 案内が ある）。
   たて向き：ふきだし（はば いっぱい。止まる 位置の ゲージが 出て いると 212px まで さがって 4行に なる）の 下まで。小さい 画面では 今までの 40vh より ちぢめない。
   どちらも PC と おなじ 430px で 止める（たての iPad は 今までの 40vh の まま） */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  #lever { height: min(calc(100% - 78px - var(--safe-t) - var(--safe-b)), 430px); }
  #leverLabel { display: none; }
  #stampToast { top: calc(12px + var(--safe-t)); right: calc(128px + var(--safe-r)); padding: 3px 14px 3px 4px; gap: 8px; line-height: 1.25; }
  #stampToast .sico { width: 34px; height: 34px; border-width: 2.5px; } #stampToast .sico svg { width: 22px; height: 22px; }
  #stage.dw-open #mentor { max-width: min(480px, calc(100vw - 148px - var(--safe-l) - var(--safe-r) - min(400px, 52vw))); }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) and (max-width: 760px) {
  #stage.dw-open #mentor { display: none; }
}
@media (max-aspect-ratio: 3/4) {
  #lever { height: max(40vh, min(calc(100% - 358px - var(--safe-t) - var(--safe-b)), 430px)); }
}

/* ---------- ロゴ（本人の デザイン・2026-10-06） ----------
   タイトル：エフェクト（テキストスタイル）が Adobe Stock 由来なので、表示用の 画像（image/logo-title-1・2.webp。元の SVG は 公開フォルダの 外 ★開発用_KIDS-TRAIN/logo/、書き出しは docs/make-logo.mjs）。
   配色は 外ふちを 白・立体を ゲームの 紺 #253050 に した。出る たびに 1行ずつ ぽんっと 入り、ときどき 光が すべる。
   読みこみ：文字だけの 版（本人の データ）を SVG で そのまま。黄色の グラデーション＋紺の ふち。文字が 1つずつ はねる（電車が 線路の 継ぎ目を こえて いく ように） */
.tlogo { display: flex; flex-direction: column; align-items: flex-start; width: clamp(240px, min(36vw, 60vh), 500px); max-width: 100%; margin-top: 2px; }
.tlogo-1, .tlogo-2 { position: relative; display: block; }
.tlogo-1 { width: 62.2%; }
.tlogo-2 { width: 100%; margin-top: -1%; transform-origin: 18% 85%; }
/* 入る 動きは play が ついた ときだけ（main.js の playLogo）。タイトルは 読みこみ画面の うしろで 先に 出て いるので、そのままだと「はじめる」を 押す 前に 終わって いた */
.tlogo.play .tlogo-1 { animation: tlogoDrop .55s cubic-bezier(.2, 1.5, .4, 1) both; }
.tlogo.play .tlogo-2 { animation: tlogoPop .6s cubic-bezier(.2, 1.6, .4, 1) .16s both; }
.tlogo img { display: block; width: 100%; height: auto; }
.tlogo-1::after, .tlogo-2::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 60%) no-repeat; background-size: 250% 100%; background-position: 160% 0;
  animation: tlogoShine 6.5s ease-in-out 1.4s infinite; }
.tlogo-1::after { -webkit-mask: url(../image/logo-title-1.webp) center / 100% 100% no-repeat; mask: url(../image/logo-title-1.webp) center / 100% 100% no-repeat; }
.tlogo-2::after { -webkit-mask: url(../image/logo-title-2.webp) center / 100% 100% no-repeat; mask: url(../image/logo-title-2.webp) center / 100% 100% no-repeat; animation-delay: 1.6s; }
@keyframes tlogoDrop { from { transform: translateY(-45%) rotate(-5deg); opacity: 0; } }
@keyframes tlogoPop { from { transform: scale(.5); opacity: 0; } }
@keyframes tlogoShine { 0% { background-position: 160% 0; } 20%, 100% { background-position: -60% 0; } }
@media (max-aspect-ratio: 21/20) { .tlogo { width: min(76vw, 300px); } }

.ld-title { line-height: 0; margin-top: -2px; }
.ld-logo { display: block; width: min(78vw, 440px); height: auto; overflow: visible; filter: drop-shadow(0 4px 0 var(--ink)); }
.ld-logo path { fill: url(#ldg); stroke: var(--ink); stroke-width: 7px; vector-effect: non-scaling-stroke; paint-order: stroke; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: 50% 100%; animation: ldHop 2.2s ease-in-out infinite; }
.ld-logo path:nth-of-type(2) { animation-delay: .1s; } .ld-logo path:nth-of-type(3) { animation-delay: .2s; } .ld-logo path:nth-of-type(4) { animation-delay: .3s; }
.ld-logo path:nth-of-type(5) { animation-delay: .4s; } .ld-logo path:nth-of-type(6) { animation-delay: .62s; } .ld-logo path:nth-of-type(7) { animation-delay: .72s; }
.ld-logo path:nth-of-type(8) { animation-delay: .82s; } .ld-logo path:nth-of-type(9) { animation-delay: .92s; } .ld-logo path:nth-of-type(10) { animation-delay: 1.02s; }
@keyframes ldHop { 0%, 46%, 100% { transform: none; } 12% { transform: translateY(-16%); } 26% { transform: scaleY(.93); } 34% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tlogo.play .tlogo-1, .tlogo.play .tlogo-2, .tlogo-1::after, .tlogo-2::after, .ld-logo path { animation: none; } }

/* 拡大されて しまった ときは、どこでも 2本指で 縮めて もどせる（touch-action: none・pan-y の 所でも）。js/touch.js が html に つける（2026-10-06・GAME_TOUCH_RULES.md） */
html.zoom-recovery, html.zoom-recovery body, html.zoom-recovery body * { touch-action: manipulation !important; }

/* AMIX GAMES KIDS の ロゴ（2026-10-06・本人の ロゴ image/amix_games_kids_logo_bk.svg を 埋めこみ）。KIDS の 字は 1字ずつ はねる（前の 文字の ロゴと 同じ 動き）。
   大きさは 本人「もう少し 小さくても」で 1段 小さく。同じ 日に ロゴが 新しく なり（横長 359.86×52.02）、幅が 前の ロゴと 同じ くらいに なる 高さへ（タイトル 23px・読みこみ 36px） */
.brand { --bh: 23px; display: block; line-height: 0; }
.kl-logo { display: block; height: var(--bh); width: calc(var(--bh) * 6.918); overflow: visible; }
.kl-k { transform-box: fill-box; transform-origin: 50% 100%; animation: klHop 2.6s ease-in-out infinite; }
.kl-k2 { animation-delay: .12s; } .kl-k3 { animation-delay: .24s; } .kl-k4 { animation-delay: .36s; }
@keyframes klHop { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 78% { transform: translateY(-8px) rotate(-6deg); } 86% { transform: translateY(0) rotate(4deg); } }
#loading .brand { --bh: 36px; }
/* たて画面：読みこみの ロゴが 画面の 上へ 出て 見えなかった（タイトル用の .brand の 位置が 効いて いた） */
@media (max-aspect-ratio: 21/20) { #loading .brand { position: static; --bh: 30px; } .t-home .brand { --bh: 20px; } }
/* 読みこみの 中身が 画面より 高い とき（スマホ横）：上で 切れずに 上から 並べ、はみ出た 分は スクロール。低い 画面では 間を つめる */
#loading { overflow-y: auto; touch-action: pan-y pinch-zoom; }
#loading .ld-in { margin: auto; }
@media (max-height: 500px) { #loading .brand { --bh: 25px; } .t-home .brand { --bh: 20px; } .ld-in { gap: 8px; padding: 12px 24px; } }
@media (prefers-reduced-motion: reduce) { .kl-k { animation: none; } }