/* =========================================================
   基本スタイル：デザインルール（トークン）と共通部品
   ---------------------------------------------------------
   色・角丸・線・影・余白・大きさ・動きは、すべてここの変数で決めます。
   画面ごとの CSS では、なるべく直接の数値を書かずに変数を使ってください。
   世界観：絵本・木のおもちゃ・フェルト。線は太めのこげ茶、影は「積み木の厚み」。
   ========================================================= */
:root {
  /* ----- 色 ----- */
  --color-bg: #fbf3e5;            /* 背景：あたたかい画用紙 */
  --color-bg-deep: #f4e6cf;       /* 背景の濃いところ（床・トレー） */
  --color-bg-dot: #f0dfc5;
  --color-card: #fffaf2;          /* カード・紙 */
  --color-card-sub: #fbf1e2;      /* カードの下段・くぼみ */
  --color-text: #5b4636;          /* 文字：こげ茶（黒より やさしい） */
  --color-muted: #8f7866;         /* 補助の文字 */
  --color-line: #5b4636;          /* 輪郭線 */
  --color-line-soft: rgba(91, 70, 54, 0.22);  /* うすい枠線・点線 */
  --color-primary: #f28f5c;       /* メイン：あんず色 */
  --color-primary-deep: #d9733f;
  --color-primary-soft: #fde3d2;
  --color-learn: #93c9e8;         /* まなぶ：そら色 */
  --color-play: #f7b383;          /* あそぶ：あんず色 */
  --color-success: #72b77b;       /* 成功：はっぱ色 */
  --color-success-soft: #e3f2df;
  --color-gold: #f6c544;          /* 星 */
  --color-danger: #df7a6c;        /* 保護者画面の「初期化」だけで使う */
  --color-wood: #ebc99a;          /* 木のおもちゃ */
  --color-wood-deep: #cf9f66;
  --color-felt-stitch: rgba(255, 255, 255, 0.75); /* フェルトの縫い目 */
  --color-focus: #6fb3e0;

  /* ----- 角丸（少しだけ不均一にして手作り感を出す） ----- */
  --radius-small: 14px;
  --radius-medium: 22px;
  --radius-large: 30px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --radius-blob: 30px 34px 32px 28px / 32px 28px 34px 30px;     /* カード */
  --radius-blob-lg: 42px 48px 44px 40px / 44px 40px 48px 42px;  /* 大きいカード */

  /* ----- 線 ----- */
  --line-w: 3px;
  --line-w-thin: 2px;
  --line-w-thick: 4px;

  /* ----- 影（下に積み木の厚み + ふんわり） ----- */
  --shadow-block: 0 5px 0 rgba(91, 70, 54, 0.2);
  --shadow-block-lg: 0 8px 0 rgba(91, 70, 54, 0.2);
  --shadow-pressed: 0 1px 0 rgba(91, 70, 54, 0.2);
  --shadow-soft: 0 10px 24px rgba(91, 70, 54, 0.12);
  --shadow-lift: 0 14px 20px rgba(91, 70, 54, 0.22);
  --shadow-inset: inset 0 3px 0 rgba(91, 70, 54, 0.08);

  /* ----- 余白 ----- */
  --space-xs: 4px;
  --space-small: 8px;
  --space-medium: 16px;
  --space-large: 24px;
  --space-xl: 36px;
  --gutter: 16px;                 /* 画面の左右の余白 */

  /* ----- 大きさ ----- */
  --btn-h: 60px;
  --btn-h-sm: 52px;
  --btn-h-lg: 80px;
  --btn-round: 60px;
  --icon-small: 26px;
  --icon-medium: 40px;
  --piece: clamp(74px, 19vmin, 120px);    /* ドラッグする物（指で持ちやすく） */
  --card-min: 150px;              /* 一覧カードの最小幅 */

  /* ----- 文字 ----- */
  --font: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Zen Maru Gothic", "M PLUS Rounded 1c", "Rounded Mplus 1c", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
  --fs-small: 15px;               /* 保護者向けの補足だけ */
  --fs-body: 17px;
  --fs-label: clamp(17px, 2.6vmin, 22px);   /* カードの名前 */
  --fs-title: clamp(22px, 4vmin, 32px);     /* 画面タイトル */
  --fs-speech: clamp(17px, 2.8vmin, 24px);  /* 吹き出し */
  --fs-big: clamp(30px, 6.5vmin, 54px);     /* いちばん大事な文字 */
  --fw: 800;

  /* ----- 動き ----- */
  --dur-press: 0.12s;
  --dur-fast: 0.2s;
  --dur-medium: 0.35s;
  --dur-slow: 0.6s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--font);
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image:
    radial-gradient(ellipse 34% 26% at 4% 8%, rgba(255, 216, 176, 0.55), transparent 70%),
    radial-gradient(ellipse 30% 30% at 98% 92%, rgba(190, 222, 240, 0.5), transparent 70%),
    radial-gradient(ellipse 22% 18% at 92% 6%, rgba(214, 236, 200, 0.55), transparent 70%),
    radial-gradient(var(--color-bg-dot) 1.6px, transparent 2.2px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 26px 26px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  position: relative;
  animation: screen-in var(--dur-medium) var(--ease-out);
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

button { font-family: inherit; color: inherit; }

.art { width: 100%; height: 100%; display: block; overflow: visible; }
.art.half-art { overflow: hidden; } /* はんぶんパズル：切り取った外側を見せない */
.icon { width: 100%; height: 100%; display: block; overflow: visible; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

[hidden] { display: none !important; }

.big-text { font-size: var(--fs-title); font-weight: var(--fw); text-align: center; }
.nb { white-space: nowrap; } /* 名前の途中で改行しない */

/* =========================================================
   ボタン（大きく・丸く・押すと 0.12 秒で沈む）
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: var(--btn-h);
  padding: 10px 26px;
  border: var(--line-w) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-card);
  color: var(--color-text);
  font-size: clamp(18px, 2.6vmin, 24px);
  font-weight: var(--fw);
  letter-spacing: 0.05em;
  line-height: 1.2;
  box-shadow: var(--shadow-block);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-press) ease-out, box-shadow var(--dur-press) ease-out, background-color var(--dur-fast);
}
.btn:focus-visible { outline: 4px solid var(--color-focus); outline-offset: 3px; }
.btn.pressed { transform: translateY(4px); box-shadow: var(--shadow-pressed); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-icon { display: inline-flex; width: 1.3em; height: 1.3em; flex: none; }
.btn-icon .icon g { stroke-width: 10; }

.btn-sm { min-height: var(--btn-h-sm); font-size: 17px; padding: 8px 20px; }
.btn-xl { min-height: var(--btn-h-lg); padding: 14px 48px; font-size: clamp(26px, 4.4vmin, 36px); box-shadow: var(--shadow-block-lg); }
.btn-xl.pressed { transform: translateY(6px); box-shadow: var(--shadow-pressed); }
.btn-round { width: var(--btn-round); height: var(--btn-round); min-height: 0; padding: 0; border-radius: 50%; flex: none; }
.btn-round .btn-icon { width: 46%; height: 46%; }

/* 木のおもちゃの ボタン（新しいデザインの基準） */
.btn {
  border: 3px solid #e2a35c;
  background: linear-gradient(to bottom, #fffdf6, #f8e6c6);
  color: #7a4a24;
  font-weight: 900;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.9), 0 5px 0 #c08043, 0 9px 14px rgba(70, 50, 20, 0.2);
}
.btn.pressed { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.9), 0 1px 0 #c08043, 0 3px 6px rgba(70, 50, 20, 0.2); }
.btn .btn-icon .icon g { stroke: currentColor; }
.btn-primary {
  color: #fff;
  border-color: #fff4e4;
  background: linear-gradient(to bottom, #ffad6a, #f47a3c);
  box-shadow: 0 0 0 2.5px #d0602a, inset 0 3px 0 rgba(255, 255, 255, 0.45), 0 6px 0 2px #c4561f, 0 10px 16px rgba(70, 40, 20, 0.25);
}
.btn-primary.pressed { box-shadow: 0 0 0 2.5px #d0602a, inset 0 3px 0 rgba(255, 255, 255, 0.45), 0 1px 0 2px #c4561f, 0 3px 6px rgba(70, 40, 20, 0.2); }
.btn-primary .btn-label { text-shadow: 0 2px 0 rgba(160, 60, 20, 0.35); }
.btn-ghost { background: linear-gradient(to bottom, #fffdf6, #f8e6c6); }
.btn-danger { color: #fff; border-color: #ffe9e4; background: linear-gradient(to bottom, #f49488, #dc6a5c); box-shadow: 0 0 0 2.5px #b8483c, 0 5px 0 2px #a63c31, 0 9px 14px rgba(70, 40, 20, 0.2); }
.btn-round { border-radius: 50%; }
.btn-big { min-height: 70px; padding: 10px 30px; font-size: clamp(22px, 3.6vmin, 30px); }
.btn:focus-visible { outline: 4px solid #6fb3e0; outline-offset: 3px; }

/* =========================================================
   上のバー（もどる + タイトル）
   ========================================================= */

.topbar-icon { width: 1.4em; height: 1.4em; display: inline-flex; flex: none; }
.topbar-icon .icon g { stroke: var(--color-line); stroke-width: 5; }

/* =========================================================
   吹き出し（全画面共通。CSS だけで描くので崩れにくい）
   ---------------------------------------------------------
   <div class="bubble speech tail-left">…</div>
   しっぽの向き：tail-left（キャラが左）/ tail-bottom（キャラが下）/ tail-top（キャラが上）
   しっぽは本体の枠線の上に重ねて描くので、すき間や二重線になりません。
   ========================================================= */
.speech {
  --tail: 18px;
  position: relative;
  display: inline-block;
  max-width: min(100%, 560px);
  padding: 10px 20px 11px;
  background: var(--color-card);
  border: var(--line-w) solid var(--color-line);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-block);
  font-size: var(--fs-speech);
  font-weight: var(--fw);
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: keep-all;
  text-wrap: balance; /* 2行になるとき、1行目だけ長くならないように */
}
.speech::before {
  content: '';
  position: absolute;
  width: var(--tail);
  height: var(--tail);
  background: inherit;
  border: inherit;
  border-radius: 0 0 0 4px;
  border-top-color: transparent;
  border-right-color: transparent;
  box-shadow: none;
}
.speech.tail-left::before { left: calc(var(--tail) / -2 - 1px); top: 50%; transform: translateY(-50%) rotate(45deg); }
.speech.tail-bottom::before { left: 50%; bottom: calc(var(--tail) / -2 - 1px); transform: translateX(-50%) rotate(-45deg); }
.speech.tail-top::before { left: 50%; top: calc(var(--tail) / -2 - 1px); transform: translateX(-50%) rotate(135deg); }

/* キャラクター + 吹き出しの組 */
.talk { display: flex; align-items: center; gap: 14px; min-width: 0; }
.talk-mascot { flex: none; display: inline-flex; }
.talk .speech { flex: 0 1 auto; min-width: 0; }

/* =========================================================
   「あたらしい」バッジ・ロック
   ========================================================= */
.badge-new {
  position: absolute;
  top: -10px;
  left: -6px;
  z-index: 3;
  background: #ef8a8a;
  color: #fff;
  font-size: 14px;
  font-weight: var(--fw);
  letter-spacing: 0.04em;
  padding: 4px 11px 5px;
  border-radius: var(--radius-pill);
  border: var(--line-w-thin) solid var(--color-line);
  box-shadow: 0 3px 0 var(--color-line-soft);
  transform: rotate(-7deg);
  animation: badge-wobble 2.8s ease-in-out infinite;
}
@keyframes badge-wobble { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(-3deg) translateY(-2px); } }

/* =========================================================
   お知らせ（トースト）
   ========================================================= */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  background: var(--color-card);
  border: var(--line-w) solid var(--color-line);
  border-radius: var(--radius-large);
  padding: 12px 22px;
  font-weight: var(--fw);
  font-size: var(--fs-body);
  line-height: 1.5;
  box-shadow: var(--shadow-block), var(--shadow-soft);
  z-index: 2000;
  animation: toast-in var(--dur-medium) var(--ease-pop);
  pointer-events: none;
}
.toast.out { opacity: 0; transform: translate(-50%, 12px); transition: opacity 0.45s, transform 0.45s; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 18px) scale(0.96); } to { opacity: 1; transform: translate(-50%, 0); } }
.unlock-toast { display: flex; align-items: center; gap: 12px; font-size: var(--fs-speech); word-break: keep-all; text-wrap: balance; }
.unlock-icons { display: inline-flex; gap: 6px; }
.unlock-icon { width: 56px; height: 56px; display: inline-flex; background: #fff3d6; border-radius: var(--radius-small); padding: 5px; border: var(--line-w-thin) solid var(--color-line); }

/* =========================================================
   確認ダイアログ（保護者画面）
   ========================================================= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(91, 70, 54, 0.35);
  display: grid;
  place-items: center;
  z-index: 3000;
  padding: var(--gutter);
  animation: fade-in var(--dur-fast) ease-out;
}
.modal {
  background: var(--color-card);
  border: var(--line-w) solid var(--color-line);
  border-radius: var(--radius-large);
  padding: 22px 24px;
  width: min(480px, 100%);
  box-shadow: var(--shadow-block-lg);
  animation: pop-in var(--dur-medium) var(--ease-pop);
}
.modal-title { margin: 0 0 8px; font-size: 21px; }
.modal-msg { margin: 0 0 18px; line-height: 1.7; font-size: 16px; font-weight: 500; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

/* =========================================================
   ドラッグ（つまむと少し浮く・はなすと やさしく戻る）
   ========================================================= */
.drag-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1000; }
.drag-layer > .dragging {
  position: fixed !important;
  margin: 0 !important;
  z-index: 1001;
  filter: drop-shadow(0 12px 10px rgba(91, 70, 54, 0.28));
  cursor: grabbing;
}
.drag-layer > .returning { transition: transform 0.28s var(--ease-out); }
.drag-placeholder { visibility: hidden; flex: none; }
.abs { position: absolute; transform: translate(-50%, -50%); }
.draggable { touch-action: none; cursor: grab; }
.draggable.drag-off { cursor: default; }

/* =========================================================
   共通アニメーション（気持ちよさ重視・控えめ）
   ========================================================= */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }

.float { animation: float 3.6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.bounce { animation: bounce 0.45s var(--ease-out); }
@keyframes bounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.07) rotate(-1.5deg); }
  65% { transform: scale(0.98) rotate(0.8deg); }
  100% { transform: scale(1); }
}
.wiggle { animation: wiggle 0.5s ease-in-out; }
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

.noscript { padding: 24px; font-size: 20px; }

/* 動きを減らす設定の端末では、飾りの動きをほぼ止める（ゲームの仕組みに必要な動きは残す） */
@media (prefers-reduced-motion: reduce) {
  *:not(.wall):not(.road-car):not(.rocket-build),
  *:not(.wall):not(.road-car):not(.rocket-build)::before,
  *:not(.wall):not(.road-car):not(.rocket-build)::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
  }
}

@media (max-height: 520px) {
  :root { --btn-round: 52px; --btn-h: 52px; }
}