:root {
  /* ---- Design tokens: "クレヨンのおもちゃばこ" ---- */
  --paper: #FFF6E9;   /* 暖色クリームのクローム */
  --ink: #4A3B32;     /* 輪郭用の暖かいこげ茶 */
  --shadow-amb: 0 6px 16px rgba(74, 59, 50, 0.18); /* ソフトな環境影 */
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  background: #ffffff;
}

* {
  box-sizing: border-box;
}

/* ---- Canvas: 一切変更しない（全画面・純白・geometry/transition 現状維持） ---- */
canvas#canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  background: #ffffff;
  transition: opacity 0.4s ease;
}

canvas#canvas.fading {
  opacity: 0;
}

/* ---- 一過性エフェクト層(M1リング/M3キラキラ) ----
   本体canvasの上・#uiの下に重ねる透明オーバーレイ。pointer-events:none で操作を一切奪わない。
   演出はここにだけ描き、作品(本体canvas)には焼き込まない(設計原則4)。 */
#fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background: transparent;
}

#ui {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

/* ---- パレットトレイ: クリーム色 pill にスワッチが乗る ----
   トレイ自体がスクロールコンテナ。width:fit-content + max-width + margin:auto で
   中央寄せしつつ、狭幅では overflow-x スクロール。justify-content(center)を使わない
   ＝先頭(赤)スワッチが scrollLeft:0 で必ず可視（左端切れバグ回避、safe center 不要）。 */
.palette-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(16px, env(safe-area-inset-bottom));
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100% - 24px);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow:
    var(--shadow-amb),
    inset 0 2px 3px rgba(255, 255, 255, 0.7),
    inset 0 -3px 6px rgba(74, 59, 50, 0.08);
  pointer-events: auto;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
}

.palette-bar::-webkit-scrollbar {
  display: none;
}

/* 初回ロード時のみ下からぽよんと入場（JS が .palette-enter を一度だけ付与） */
.palette-bar.palette-enter {
  animation: paletteIn 460ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes paletteIn {
  0% { transform: translateY(150%); }
  60% { transform: translateY(-6%); }
  100% { transform: translateY(0); }
}

.swatch,
.brush-btn,
.stamp-btn,
.num-btn,
.clear-btn {
  pointer-events: auto;
  border: none;
  padding: 0;
  background: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  cursor: pointer;
}

.swatch,
.brush-btn,
.stamp-btn,
.num-btn {
  width: 72px;
  height: 72px;
  min-width: 72px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(1);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* キャンディの立体エッジ（そのボタンの濃色 --sw-edge）＋ソフト影 */
  box-shadow:
    0 5px 0 var(--sw-edge, rgba(74, 59, 50, 0.35)),
    0 7px 12px rgba(74, 59, 50, 0.22);
  background: none;
}

.swatch svg,
.brush-btn svg,
.stamp-btn svg,
.num-btn svg {
  width: 100%;
  height: 100%;
  display: block;
}

.swatch.selected,
.brush-btn.selected,
.stamp-btn.selected,
.num-btn.selected {
  transform: scale(1.28);
  animation: poyon 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 選択中は柔らかい発光リングを追加 */
  box-shadow:
    0 5px 0 var(--sw-edge, rgba(74, 59, 50, 0.35)),
    0 0 0 5px rgba(255, 255, 255, 0.6),
    0 8px 18px rgba(74, 59, 50, 0.28);
}

/* かずスタンプ: 数字サブトレイ（パレットpillの上に展開。クリームpill+キャンディ立体） */
.num-tray {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 116px);
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100% - 24px);
  display: none; /* JS toggles to flex when the stamp tool is active */
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow:
    var(--shadow-amb),
    inset 0 2px 3px rgba(255, 255, 255, 0.7),
    inset 0 -3px 6px rgba(74, 59, 50, 0.08);
  pointer-events: auto;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
  animation: numTrayIn 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.num-tray::-webkit-scrollbar {
  display: none;
}

@keyframes numTrayIn {
  0% { transform: translateY(40%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes poyon {
  0% { transform: scale(1); }
  40% { transform: scale(1.42); }
  65% { transform: scale(1.12); }
  100% { transform: scale(1.28); }
}

/* ---- 上部ボタン: キャンディ立体（押し込み作法を共通化） ---- */
.clear-btn {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(160deg, #FFD60A, #FFB300);
  box-shadow: 0 6px 0 #E6A800, var(--shadow-amb);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.clear-btn svg {
  width: 62%;
  height: 62%;
  margin: 19% auto;
  display: block;
}

.clear-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #E6A800, 0 4px 10px rgba(74, 59, 50, 0.2);
}

.mode-btn {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left));
  width: 88px;
  height: 88px;
  min-width: 60px;
  min-height: 60px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: linear-gradient(160deg, #5AC8FA, #2FA8E8);
  box-shadow: 0 6px 0 #2A8BC4, var(--shadow-amb);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.mode-btn svg {
  width: 62%;
  height: 62%;
  margin: 19% auto;
  display: block;
}

.mode-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #2A8BC4, 0 4px 10px rgba(74, 59, 50, 0.2);
}

/* ---- 枠選択画面: 不透明な暖色背景＋CSS のみのパステル水玉 ---- */
.frame-select-screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 24px;
  pointer-events: none;
  background:
    radial-gradient(circle 240px at 20% 26%, rgba(255, 158, 187, 0.35), transparent 70%),
    radial-gradient(circle 220px at 82% 22%, rgba(126, 208, 255, 0.35), transparent 70%),
    radial-gradient(circle 260px at 26% 82%, rgba(255, 214, 10, 0.30), transparent 70%),
    radial-gradient(circle 230px at 80% 80%, rgba(255, 166, 160, 0.32), transparent 70%),
    var(--paper);
}

/* 装飾ブロブ（pointer-events:none。枠選択画面のみ表示＝描画中は非表示） */
.frame-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(6px);
  opacity: 0.5;
}

.blob.b1 { width: 120px; height: 120px; left: 8%;  top: 15%;    background: #FFC7DC; animation: floaty 6s   ease-in-out infinite; }
.blob.b2 { width: 90px;  height: 90px;  right: 12%; top: 20%;    background: #BFE6FF; animation: floaty 7s   ease-in-out infinite 0.6s; }
.blob.b3 { width: 140px; height: 140px; left: 12%; bottom: 12%; background: #FFE7A6; animation: floaty 8s   ease-in-out infinite 0.3s; }
.blob.b4 { width: 100px; height: 100px; right: 16%; bottom: 15%; background: #FFD0CB; animation: floaty 6.5s ease-in-out infinite 0.9s; }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.frame-thumb {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  border: none;
  padding: 20px;
  background: #ffffff;
  border-radius: 32px;
  box-shadow: 0 6px 0 var(--edge, #FFC08A), var(--shadow-amb);
  width: 200px;
  height: 200px;
  min-width: 160px;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  cursor: pointer;
  /* 入場: 80ms ずらしのぽよん（下の nth-of-type で遅延） */
  animation: cardPop 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.frame-thumb:nth-of-type(1) { animation-delay: 0ms; }
.frame-thumb:nth-of-type(2) { animation-delay: 80ms; }
.frame-thumb:nth-of-type(3) { animation-delay: 160ms; }

.frame-thumb svg {
  width: 100%;
  height: 100%;
  display: block;
}

.frame-thumb:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--edge, #FFC08A), 0 4px 10px rgba(74, 59, 50, 0.2);
}

@keyframes cardPop {
  0% { transform: scale(0); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@media (max-width: 520px) {
  .frame-thumb {
    width: 160px;
    height: 160px;
    padding: 16px;
  }
}