/* base.css v1.5.0 --------------------------------------------------------
   モチーフはシール帳。白フチで型抜きされたシールを画用紙に貼っていく。
   丸ゴシックは端末任せにできない（Androidに丸ゴシックが無い）ので、
   必要な文字だけに絞ったものを同梱している。
------------------------------------------------------------------------ */

/* M PLUS Rounded 1c を、このアプリで使う文字だけに絞ったもの。
   出典と条件は fonts/OFL.txt を参照。 */
@font-face {
  font-family: 'Chiiku Rounded';
  src: url('../fonts/rounded-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chiiku Rounded';
  src: url('../fonts/rounded-bold.woff2') format('woff2');
  font-weight: 500 900;          /* 太字はこの1本でまかなう */
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- 色 ------------------------------------------------------------ */
  --sora:    #D9EDFB;   /* 台紙。うすい水色 */
  --sora-2:  #C4E2F7;   /* 台紙の陰 */
  --kami:    #FFFDF7;   /* シール本体の白 */
  --sumi:    #3B3A38;   /* 文字。真っ黒は避ける */
  --sumi-2:  #7A7671;   /* 補助文字 */
  --ichigo:  #FF6B81;   /* 主アクセント */
  --tamago:  #FFC24B;   /* ★ */
  --wakaba:  #57C08C;   /* すすむ・せいかい */
  --mizu:    #4A9FE0;
  --budou:   #9B7BD4;

  /* --- かたち -------------------------------------------------------- */
  --r-s: 14px;
  --r-m: 22px;
  --r-l: 34px;
  --fuchi: 7px;                        /* シールの白フチ */
  --kage: 0 6px 0 rgba(58,74,90,.16), 0 14px 26px rgba(58,74,90,.18);
  --kage-s: 0 3px 0 rgba(58,74,90,.14), 0 8px 16px rgba(58,74,90,.14);

  /* --- 文字 ---------------------------------------------------------- */
  /* 同梱の丸ゴシックを最優先。読み込み前や取りこぼし用に端末側を並べる。 */
  --maru: "Chiiku Rounded", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4",
          "M PLUS Rounded 1c", "Rounded Mplus 1c", "Yu Gothic UI",
          "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;

  /* 4歳の視距離に合わせ、下限を大きめに取る */
  --t-huge: clamp(34px, 6.4vw, 62px);
  --t-lg:   clamp(24px, 4.0vw, 38px);
  --t-md:   clamp(19px, 2.6vw, 26px);
  --t-sm:   clamp(15px, 1.8vw, 19px);

  --tap: 68px;                         /* タップ領域の下限 */
}

/* --- リセットとタブレット対策 ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;           /* 引っぱって更新を止める */
}

body {
  font-family: var(--maru);
  color: var(--sumi);
  background: var(--sora);
  /* 画用紙の目。控えめなノイズだけ乗せる */
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.55) 0, transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(255,255,255,.42) 0, transparent 46%);
  -webkit-font-smoothing: antialiased;
  letter-spacing: .07em;               /* かな主体の文には広めの字間が要る */
  line-height: 1.5;
  touch-action: manipulation;          /* ダブルタップ拡大を無効化 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;         /* 長押しメニューを出さない */
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; letter-spacing: inherit; }

/* hidden は display 指定に負けやすいので、ここで確実に効かせる */
[hidden] { display: none !important; }

/* 遷移直後の誤タップを止める。Shell.lockTaps() が付け外しする */
body.is-locked { pointer-events: none; }

/* --- 画面 -------------------------------------------------------------- */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 18px clamp(16px, 3vw, 40px) 22px;
}
.screen[hidden] { display: none; }

/* --- シール（共通部品） ------------------------------------------------- */
/* 白フチで型抜きされた見た目。角度は個別に --kata で振る。 */
.sticker {
  position: relative;
  background: var(--kami);
  border-radius: var(--r-l);
  box-shadow: var(--kage);
  border: var(--fuchi) solid #fff;
  transform: rotate(var(--kata, 0deg));
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s;
}
.sticker:active {
  transform: rotate(var(--kata, 0deg)) scale(.94);
  box-shadow: var(--kage-s);
}

/* --- ボタン ------------------------------------------------------------ */
.btn {
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 14px 30px;
  border: none;
  border-radius: 999px;
  background: var(--kami);
  font-size: var(--t-md);
  font-weight: 700;
  box-shadow: var(--kage-s);
  cursor: pointer;
  transition: transform .14s cubic-bezier(.34,1.56,.64,1);
}
.btn:active { transform: scale(.93); }
.btn--go     { background: var(--wakaba); color: #fff; }
.btn--again  { background: var(--tamago); color: #5A4213; }
.btn--quiet  { background: rgba(255,255,255,.72); color: var(--sumi-2); }

:focus-visible { outline: 4px solid var(--budou); outline-offset: 3px; }

/* --- ゲーム画面のヘッダー ---------------------------------------------- */
.bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  margin-bottom: 10px;
}
.bar__back {
  width: var(--tap); height: var(--tap);
  border: none; border-radius: 999px;
  background: var(--kami);
  box-shadow: var(--kage-s);
  font-size: 30px; line-height: 1;
  cursor: pointer;
  transition: transform .14s;
}
.bar__back:active { transform: scale(.9); }
.bar__title { font-size: var(--t-lg); font-weight: 800; margin: 0; }
.bar__spacer { flex: 1; }

/* ★のカウンタ */
.tally {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  font-size: var(--t-md); font-weight: 800;
  box-shadow: var(--kage-s);
}
.tally__icon { font-size: 1.15em; }

/* --- 舞台 -------------------------------------------------------------- */
.stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

/* --- オーバーレイ ------------------------------------------------------- */
.veil {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(38,58,74,.58);
  animation: veil-in .2s ease-out both;
}
.veil[hidden] { display: none; }

.panel {
  width: min(560px, 94vw);
  max-height: 92vh; overflow: auto;
  padding: 30px 28px;
  border-radius: var(--r-l);
  background: var(--kami);
  box-shadow: 0 22px 50px rgba(28,44,58,.34);
  text-align: center;
  animation: panel-in .32s cubic-bezier(.34,1.56,.64,1) both;
}
.panel__title { font-size: var(--t-lg); font-weight: 800; margin: 0 0 6px; }
.panel__note  { font-size: var(--t-sm); color: var(--sumi-2); margin: 0 0 18px; }
.panel__row   { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* 結果画面の★ */
.stars { display: flex; gap: 10px; justify-content: center; margin: 14px 0 4px; }
.stars span {
  font-size: clamp(44px, 8vw, 72px); line-height: 1;
  animation: star-pop .44s cubic-bezier(.34,1.8,.64,1) both;
}
.stars span:nth-child(2) { animation-delay: .16s; }
.stars span:nth-child(3) { animation-delay: .32s; }
.stars .is-empty { opacity: .22; filter: grayscale(1); }

@keyframes veil-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes panel-in { from { opacity: 0; transform: translateY(26px) scale(.94) } to { opacity: 1; transform: none } }
@keyframes star-pop { from { opacity: 0; transform: scale(.2) rotate(-40deg) } to { opacity: 1; transform: none } }

/* --- 乗りもの（なぞりがき・めいろで共用） ------------------------------- */
.car { transition: opacity .2s; }
.car__body { transform-box: fill-box; transform-origin: center; }
/* 色のついた線の上に乗っても輪郭が消えないよう、白でフチ取る */
.car__body > * { stroke: #FFFDF7; stroke-width: 1.7; paint-order: stroke fill; }
/* 出番を待っているあいだは、その場で跳ねて「ここから」を知らせる */
.car.is-live .car__body { animation: hop 1.05s ease-in-out infinite; }
@keyframes hop { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }

/* --- ユーティリティ ----------------------------------------------------- */
.only-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.ver {
  position: fixed; right: 10px; bottom: 8px;
  font-size: 11px; color: rgba(59,58,56,.34);
  letter-spacing: .04em; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}