/* フォント：M PLUS Rounded 1c（SIL OFL 1.1）。このゲームで使う字だけに絞ったもの（scripts/build_web.sh） */
@font-face { font-family: "MPR"; src: url("assets/fonts/mpr-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "MPR"; src: url("assets/fonts/mpr-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --ink: #3A2621;
  --sky-top: #BFE7F8;
  --sky-bottom: #E9F8FE;
  --grass: #CFE9A9;
  --grass-dark: #B6DA8C;
  --road: #EFE3CB;
  --card: #FFFDF6;
  --accent: #E0663B;
  --gold: #F6B73C;
  --shadow: rgba(58, 38, 33, 0.18);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "MPR", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 700;
  color: var(--ink);
  background: linear-gradient(var(--sky-top), var(--sky-bottom) 58%, var(--grass) 58%, var(--grass-dark));
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 4px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

#app {
  position: relative;
  max-width: 560px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "top" "score" "sky" "ground";
  overflow: hidden;
  padding-top: var(--safe-t);
  background:
    radial-gradient(ellipse 140px 50px at 18% 26%, #fff 60%, transparent 62%),
    radial-gradient(ellipse 100px 36px at 82% 34%, #fff 60%, transparent 62%),
    linear-gradient(var(--sky-top), var(--sky-bottom));
}

/* ---------- 上：シリーズ名・音・言葉 ---------- */
.top { grid-area: top; position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 4px; gap: 6px; }
.series { font-size: 13px; font-weight: 900; background: rgba(255,255,255,.85); border: 3px solid var(--ink); border-radius: 999px; padding: 4px 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.top-buttons { display: flex; gap: 6px; flex: none; }
.pill { min-height: 44px; min-width: 44px; padding: 6px 13px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
#btn-sound[aria-pressed="false"] { background: #EEE8DD; }
#btn-sound[aria-pressed="false"] .ico { text-decoration: line-through; opacity: .6; }

/* ---------- はこんだ数・★ ---------- */
.score { grid-area: score; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 6px 12px 0; padding: 5px 12px; background: rgba(255,255,255,.92); border: 3px solid var(--ink); border-radius: 22px; min-height: 56px; }
.carried { display: flex; flex-direction: column; line-height: 1.05; }
.carried .lbl { font-size: 12px; white-space: nowrap; }
.carried .num { font-size: 14px; white-space: nowrap; }
.carried .num b { font-size: 26px; font-weight: 900; margin-right: 2px; }
.bus-icons { display: flex; gap: 4px; justify-content: center; min-width: 0; }
.bus-icon { position: relative; width: clamp(26px, 8.4vw, 44px); aspect-ratio: 64 / 44; flex: 0 1 auto; }
.bus-icon svg { width: 100%; height: 100%; display: block; }
.bus-icon b { position: absolute; inset: 0 0 18% 0; display: grid; place-items: center; font-size: clamp(10px, 3vw, 13px); font-weight: 900; color: var(--ink); }
.bus-icon.empty { opacity: .3; }
.bus-icon.new { animation: popIn .5s cubic-bezier(.2,.9,.3,1.4); }
.stars { font-size: 22px; font-weight: 900; display: flex; align-items: center; gap: 2px; }
.stars .star { color: var(--gold); -webkit-text-stroke: 1.5px var(--ink); font-size: 26px; }

/* ---------- 空：ふうせんのグループ ---------- */
.sky { grid-area: sky; position: relative; z-index: 3; --imgH: clamp(22px, 5.4vh, 46px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 6px; padding: 6px 8px 12px; min-height: 0; }
.slot { position: relative; display: flex; justify-content: center; align-items: flex-end; min-width: 0; height: 100%; }

.group {
  position: relative; display: flex; flex-direction: column; align-items: center;
  border: 0; background: none; padding: 0;
  touch-action: manipulation; width: 100%; max-width: 168px;
  animation: bob 3.2s ease-in-out infinite;
}
.group:focus-visible { outline: 4px solid var(--accent); outline-offset: 4px; border-radius: 20px; }
.group .balloon { width: 44px; height: 52px; border-radius: 50% 50% 48% 48%; border: 3px solid var(--ink); position: relative; flex: none; }
.group .balloon::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 10px; height: 8px; transform: translateX(-50%); background: inherit; border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 6px 6px; }
.group .balloon::before { content: ""; position: absolute; left: 10px; top: 9px; width: 9px; height: 13px; border-radius: 50%; background: rgba(255,255,255,.75); }
.group .string { width: 3px; height: 18px; background: var(--ink); opacity: .6; margin-top: 7px; flex: none; }
.group .tray { position: relative; width: 100%; border: 3px solid var(--ink); border-radius: 20px; padding: 26px 7px 7px; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); justify-items: center; align-items: end; gap: 2px; min-height: 88px; box-shadow: 0 4px 0 var(--shadow); }
.group .tray img { width: auto; height: auto; max-width: 100%; max-height: var(--imgH); display: block; pointer-events: none; }
.group .badge { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); min-width: 46px; height: 42px; padding: 0 10px; border: 3px solid var(--ink); border-radius: 15px; background: #fff; font-size: 28px; font-weight: 900; display: grid; place-items: center; line-height: 1; }
.group.picked { visibility: hidden; }
.group.enter { animation: enter .9s linear both, bob 3.2s ease-in-out .9s infinite; }
.locked .group { pointer-events: none; }

@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(6px) rotate(1deg); } }
@keyframes enter { 0% { transform: translateY(-110vh); animation-timing-function: cubic-bezier(.25,.7,.4,1); } 78% { transform: translateY(7px); animation-timing-function: ease-in-out; } 100% { transform: translateY(0); } }
@keyframes popIn { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- 地面：式・つぎのバス・バス ---------- */
.ground { grid-area: ground; position: relative; padding: 8px 10px max(8px, var(--safe-b)); background: linear-gradient(var(--grass), var(--grass-dark)); border-top: 4px solid #A9CF7E; border-radius: 50% 50% 0 0 / 26px 26px 0 0; }

.eq-row { display: flex; align-items: flex-end; justify-content: center; gap: 8px; min-height: 64px; margin: 2px 0 6px; }
.eq { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 3px; min-width: 0; font-weight: 900; font-size: clamp(15px, 4.6vw, 22px); }
.eq .chip { display: inline-flex; align-items: center; gap: 1px; height: 2.1em; padding: 0 .45em 0 .2em; border: 3px solid var(--ink); border-radius: 12px; background: #fff; line-height: 1; flex: none; }
.eq .chip img { height: 1.6em; width: auto; }
.eq .chip b { font-size: 1.15em; }
.eq .chip.new { animation: popIn .4s cubic-bezier(.2,.9,.3,1.4); }
.eq .chip.q { border-style: dashed; background: rgba(255,255,255,.65); padding: 0 .55em; }
.eq .op { flex: none; padding: 0 1px; }
.eq .ten { font-size: 1.25em; flex: none; }
.eq.full .ten { color: var(--accent); animation: tenPop .6s ease-out; }
.eq .seats { font-size: .85em; padding: .35em .8em; background: rgba(255,255,255,.75); border: 3px solid var(--ink); border-radius: 999px; white-space: nowrap; }
@keyframes tenPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

.stop { display: none; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.stop.show { display: flex; animation: popIn .35s ease-out; }
.stop-sign { font-size: 11px; font-weight: 900; background: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 1px 6px; white-space: nowrap; }
.stop-box { display: flex; align-items: center; gap: 4px; border: 3px dashed var(--ink); border-radius: 12px; background: rgba(255,255,255,.7); padding: 2px 6px; }
.stop-animals { display: grid; grid-template-columns: repeat(var(--cols, 4), auto); gap: 0 1px; align-items: end; }
.stop-animals img { height: 24px; width: auto; display: block; }
.stop-animals img.ghost { visibility: hidden; }
.stop-num { font-size: 22px; font-weight: 900; }

.bus-wrap { position: relative; width: min(100%, 500px); margin: 0 auto; aspect-ratio: 1100 / 560; z-index: 2; }
.road { position: relative; z-index: 1; height: 40px; margin: calc(-0.075 * min(100vw - 20px, 500px)) -10px 0; background: var(--road); border-top: 4px solid var(--ink); }
.road::after { content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 6px; background: repeating-linear-gradient(90deg, #fff 0 36px, transparent 36px 70px); opacity: .9; }
.bus { position: absolute; inset: 0; }
.bus > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bus .seat { position: absolute; overflow: hidden; border-radius: 17%; }
.bus .seat img { position: absolute; left: 50%; bottom: -6%; height: 92%; transform: translateX(-50%); transform-origin: 50% 100%; }
.bus .seat.glow-on { animation: seatGlow 1.2s ease-in-out infinite; }
@keyframes seatGlow { 0%, 100% { background: rgba(255, 243, 160, 0); } 50% { background: rgba(255, 243, 160, .7); } }
.bus .wheel { transform-box: fill-box; transform-origin: center; }
.bus.moving .wheel { animation: spin .5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.status { min-height: 1.5em; margin: 4px 0 0; text-align: center; font-size: clamp(14px, 4.2vw, 18px); font-weight: 900; line-height: 1.35; position: relative; z-index: 3; }

#fx { position: absolute; inset: 0; pointer-events: none; z-index: 10; overflow: hidden; }
#fx img { position: absolute; left: 0; top: 0; will-change: transform; }
.pop-text { position: absolute; left: 50%; font-size: clamp(30px, 10vw, 44px); font-weight: 900; color: var(--accent); -webkit-text-stroke: 7px #fff; paint-order: stroke; transform: translateX(-50%); white-space: nowrap; }

/* ---------- はじめ・おわりの画面 ---------- */
/* はじめ・おわりの画面は、上の「音・言葉」のボタンをかくさない（ボタンは重ねて上に出す） */
.overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: calc(64px + var(--safe-t)) 14px max(14px, var(--safe-b)); background: rgba(191, 231, 248, .8); overflow-y: auto; }
.overlay.hidden { display: none; }
.card { width: min(100%, 440px); background: var(--card); border: 4px solid var(--ink); border-radius: 28px; padding: 16px 14px 18px; text-align: center; box-shadow: 0 6px 0 var(--shadow); }
.card-series { font-size: 12px; }
.card h1 { font-size: clamp(30px, 9vw, 40px); font-weight: 900; margin: 4px 0 10px; }
.card h2 { font-size: clamp(24px, 7vw, 30px); font-weight: 900; margin: 4px 0 8px; }
.howto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.howto-step p { font-size: 13px; margin: 4px 0 0; line-height: 1.35; }
.howto-pic { position: relative; height: 66px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; gap: 2px; overflow: hidden; }
.pic-tap img { height: 42px; }
.pic-tap .hand { position: absolute; right: 6px; bottom: 2px; width: 28px; height: 28px; }
.pic-bus svg { width: 76%; height: auto; }
.pic-ten span { font-size: 28px; font-weight: 900; }
.pic-ten .star { color: var(--gold); -webkit-text-stroke: 1.5px var(--ink); }
.listen { margin: 0 0 10px; }
.listen[aria-pressed="true"] { background: #FFE9A8; }
.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.level { border: 3px solid var(--ink); border-radius: 16px; background: #fff; padding: 7px 3px; min-height: 60px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.level b { font-size: clamp(13px, 4vw, 16px); font-weight: 900; }
.level small { font-size: 11px; line-height: 1.25; }
.level.on { background: #FFE9A8; box-shadow: inset 0 0 0 2px var(--ink); }
.big { min-height: 58px; padding: 8px 40px; border: 4px solid var(--ink); border-radius: 999px; background: var(--accent); color: #fff; font-size: 26px; font-weight: 900; box-shadow: 0 5px 0 var(--ink); }
.big:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.result-buses { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 4px; }
.result-buses .bus-icon { width: 60px; }
.result-buses .bus-icon b { font-size: 16px; }
.result-tens { font-size: 22px; font-weight: 900; margin: 2px 0 4px; }
.result-stars { font-size: 20px; margin: 2px 0; }
.result-best { font-size: 15px; margin: 2px 0; min-height: 1.4em; }
.result-best .rec { color: var(--accent); }
.result-note { font-size: 14px; line-height: 1.5; margin: 6px 0 14px; }
.result-buttons { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* せまい画面：音のボタンは記号だけにする */
@media (max-width: 380px) {
  #btn-sound .lbl { display: none; }
  .series { font-size: 12px; padding: 4px 8px; }
  .pill { padding: 6px 10px; font-size: 14px; }
  .group .badge { font-size: 24px; min-width: 40px; height: 38px; }
  .group .tray { padding-top: 22px; min-height: 76px; border-radius: 16px; }
}
/* 背の低い画面（小さいスマホ） */
@media (max-height: 620px) {
  .sky { --imgH: clamp(20px, 4.8vh, 40px); }
  .group .tray { padding-top: 22px; }
}
@media (max-height: 700px) {
  .group .balloon { width: 36px; height: 42px; }
  .group .string { height: 10px; margin-top: 6px; }
  .eq-row { min-height: 54px; margin-bottom: 4px; }
  .howto-pic { height: 54px; }
}
/* スマホを横にした時：左に空、右にバス */
@media (orientation: landscape) and (max-height: 560px) {
  #btn-sound .lbl { display: none; }
  .series { font-size: 12px; padding: 4px 8px; }
  .sky { padding-bottom: 14px; }
  .group .tray { padding-top: 20px; min-height: 64px; }
  .sky { --imgH: clamp(18px, 6vh, 32px); }
  .group .badge { font-size: 22px; min-width: 38px; height: 34px; top: -17px; }
  .overlay { place-items: start center; }
  .card { padding: 10px 12px 12px; }
  .card h1 { font-size: 26px; margin: 2px 0 6px; }
  .howto { margin-bottom: 6px; }
  .howto-pic { height: 44px; }
  .pic-tap img { height: 30px; }
  .howto-step p { font-size: 12px; }
  .levels { margin-bottom: 8px; }
  .level { min-height: 48px; padding: 4px 3px; }
  .big { min-height: 48px; font-size: 22px; padding: 4px 32px; }
  #app {
    max-width: 980px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "top ground" "score ground" "sky ground";
  }
  .ground { align-self: stretch; display: flex; flex-direction: column; justify-content: center; border-radius: 26px 0 0 0; border-top: 0; border-left: 4px solid #A9CF7E; }
  .bus-wrap { width: min(100%, 420px, calc((100dvh - 150px) * 1.96)); }
  .road { margin-top: calc(-0.075 * min(50vw - 30px, 420px)); }
  .group .balloon { width: 30px; height: 36px; }
  .group .string { height: 8px; }
}

@media (orientation: landscape) and (max-height: 400px) {
  .group .balloon { width: 24px; height: 28px; border-width: 2px; }
  .group .balloon::before, .group .balloon::after { display: none; }
  .group .string { height: 6px; margin-top: 2px; }
  .sky { --imgH: 20px; }
  .score { min-height: 48px; padding: 3px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .group, .group.enter { animation: none; }
  .bus.moving .wheel, .eq .chip.new, .bus-icon.new, .stop.show, .eq.full .ten { animation: none; }
}