/* キャラクターの選び方（3.6.0）: 陶器・やわらかい粘土。参考は たきくんが選んだ案 B。
   大きな見本（浮かぶ飾りつき）→ 丸いタブ → 3列の大きなタイル → 立体の丸い色の見本。
   ux-overhaul.css の後に読み込む。動きは prefers-reduced-motion で止める。 */
:root {
  --clay-bg: #f6f4f1;
  --clay-card: #faf9f7;
  --clay-ink: #2b2725;
  --clay-sub: #8a837e;
  --clay-ring: #8fb2f6;
  --clay-ring-tint: #e9f0fd;
  --clay-ease: cubic-bezier(.22, 1, .36, 1);
  --clay-spring: cubic-bezier(.34, 1.3, .64, 1);
  --clay-lift: 0 1px 2px rgba(80, 64, 52, .05), 0 6px 16px rgba(80, 64, 52, .07);
  --clay-lift-hover: 0 2px 4px rgba(80, 64, 52, .07), 0 14px 28px rgba(80, 64, 52, .11);
  --clay-inset: inset 0 1px 0 rgba(255, 255, 255, .95);
}

body #settingsGroupCharacter.clay-group { background: var(--clay-bg); border-radius: 24px; padding: 14px 12px 16px; margin: 0 -4px; }
body #settingsGroupCharacter .clay-picker { display: grid; gap: 14px; }

/* 大きな見本 */
body #settingsGroupCharacter .character-stage.clay-hero {
  position: sticky; top: 0; z-index: 4;
  display: block; height: 188px; padding: 0; margin: 0;
  border-radius: 22px;
  background: radial-gradient(60% 62% at 50% 46%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 100%), var(--clay-bg);
  overflow: hidden;
}
body .clay-hero-canvas {
  position: absolute; left: 50%; top: 50%; width: 260px; height: 220px; margin: -116px 0 0 -130px;
  display: block; pointer-events: none;
}
body .clay-hero-canvas.is-bump { animation: clay-bump .5s var(--clay-spring); }
@keyframes clay-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes clay-in { from { opacity: 0; transform: translateY(8px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes clay-bump { 0% { transform: scale(1); } 40% { transform: scale(1.05) translateY(-4px); } 100% { transform: scale(1); } }
body .clay-deco { position: absolute; pointer-events: none; background: center / contain no-repeat; }
body .clay-deco-pink { left: 15%; top: 26%; width: 30px; height: 30px; background-image: url("clay/deco-pink.webp"); animation: clay-float 6s ease-in-out -1s infinite; }
body .clay-deco-white { left: 25%; top: 60%; width: 18px; height: 18px; background-image: url("clay/deco-white.webp"); animation: clay-float 7s ease-in-out -3s infinite; }
body .clay-deco-white::after { content: ""; position: absolute; left: 470%; top: -170%; width: 100%; height: 100%; background: inherit; }
body .clay-deco-arc { right: 13%; top: 9%; width: 62px; height: 62px; border-radius: 50%; border: 6px solid transparent; border-top-color: #c9c5f4; border-right-color: #c9c5f4; transform: rotate(10deg); filter: drop-shadow(0 2px 2px rgba(120, 110, 200, .18)); }
/* サイドパネルでの姿（模様・アクセサリー・表情はここに出る） */
body .clay-hero-side { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .86); box-shadow: var(--clay-lift); }
body #settingsGroupCharacter .clay-hero-side .g-ch-stage { font-size: 36px; }
body #settingsGroupCharacter .clay-hero .character-stage-note { position: absolute; left: 12px; bottom: 12px; right: 72px; margin: 0; min-height: 0; text-align: left; font-size: 11px; color: var(--clay-sub); opacity: 0; transition: opacity .4s var(--clay-ease); }
body #settingsGroupCharacter .clay-hero .character-stage-note:not(:empty) { opacity: 1; }

/* 丸いタブ */
body #settingsGroupCharacter .character-tabs.clay-tabs {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.6fr; gap: 0; padding: 4px; border-radius: 999px;
  background: #f1eeea; box-shadow: inset 0 1px 2px rgba(80, 64, 52, .07), 0 1px 0 #fff;
}
body #settingsGroupCharacter .clay-tabs button { position: relative; border: 0; border-radius: 999px; background: transparent; color: var(--clay-sub); font: 700 12.5px/1 var(--g-font); padding: 11px 0; cursor: pointer; white-space: nowrap; transition: background-color .35s var(--clay-ease), color .35s var(--clay-ease), box-shadow .35s var(--clay-ease); }
body #settingsGroupCharacter .clay-tabs button + button::before { content: ""; position: absolute; left: 0; top: 30%; height: 40%; width: 1px; background: #ddd8d2; }
body #settingsGroupCharacter .clay-tabs button[aria-selected="true"]::before, body #settingsGroupCharacter .clay-tabs button[aria-selected="true"] + button::before { display: none; }
body #settingsGroupCharacter .clay-tabs button[aria-selected="true"] { background: #fff; color: var(--clay-ink); box-shadow: 0 1px 2px rgba(80, 64, 52, .08), 0 4px 10px rgba(80, 64, 52, .08); }

/* 3列の大きなタイル */
body #settingsGroupCharacter .clay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body #settingsGroupCharacter .character-tile {
  position: relative; aspect-ratio: 1 / 1; min-width: 0; padding: 6px; display: grid; place-items: center; align-content: center; gap: 2px;
  border: 1.5px solid rgba(80, 64, 52, .05); border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, var(--clay-card) 100%);
  box-shadow: var(--clay-lift), var(--clay-inset);
  color: var(--clay-sub); font: 700 10.5px/1.2 var(--g-font); cursor: pointer;
  transition: transform .45s var(--clay-spring), box-shadow .45s var(--clay-ease), border-color .3s var(--clay-ease), background .3s var(--clay-ease);
}
body #settingsGroupCharacter .character-tile:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--clay-lift-hover), var(--clay-inset); }
body #settingsGroupCharacter .character-tile:active { transform: translateY(0) scale(.98); transition-duration: .12s; }
body #settingsGroupCharacter .character-tile[aria-checked="true"] { border-color: var(--clay-ring); background: linear-gradient(180deg, #f3f7ff 0%, var(--clay-ring-tint) 100%); box-shadow: 0 0 0 3px rgba(143, 178, 246, .2), var(--clay-lift); }
body #settingsGroupCharacter .character-tile:focus-visible { outline: 2px solid var(--clay-ring); outline-offset: 2px; }
body #settingsGroupCharacter .clay-tile { padding: 0; overflow: hidden; position: relative; }
body #settingsGroupCharacter #characterBaseRow .clay-tile:last-child:nth-child(3n + 1) { grid-column: 2; }
body .clay-tile-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
body #settingsGroupCharacter .character-part-panel .g-ch-tile { font-size: 62px; }
body #settingsGroupCharacter .character-part-panel .character-slot-title { grid-column: 1 / -1; margin: 4px 2px 0; font-size: 12px; color: var(--clay-sub); }

/* 形（ベースのすぐ下、小さな丸いボタン） */
body #settingsGroupCharacter .clay-shapes { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
body #settingsGroupCharacter .clay-shapes[hidden] { display: none; }
body #settingsGroupCharacter .clay-shape { border: 0; border-radius: 999px; padding: 7px 14px; background: #efebe6; color: var(--clay-sub); font: 700 11.5px/1 var(--g-font); cursor: pointer; transition: background-color .3s var(--clay-ease), color .3s var(--clay-ease), box-shadow .3s var(--clay-ease); }
body #settingsGroupCharacter .clay-shape[aria-checked="true"] { background: #fff; color: var(--clay-ink); box-shadow: 0 1px 2px rgba(80, 64, 52, .1), 0 3px 8px rgba(80, 64, 52, .08); }

/* 立体の丸い色の見本 */
body #settingsGroupCharacter .clay-panel[hidden], body #settingsGroupCharacter .character-part-panel[hidden] { display: none !important; }
body #settingsGroupCharacter .character-color-panel { display: grid; gap: 14px; padding-top: 4px; border-top: 1px solid #ebe6e0; }
body #settingsGroupCharacter .clay-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 8px; justify-items: center; padding-top: 10px; }
body #settingsGroupCharacter .character-swatch.clay-chip {
  width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0; margin: 0;
  background: center / 112% no-repeat; box-shadow: 0 3px 6px rgba(80, 64, 52, .13), 0 1px 1px rgba(80, 64, 52, .1);
  cursor: pointer; transition: transform .45s var(--clay-spring), box-shadow .45s var(--clay-ease);
}
body #settingsGroupCharacter .clay-chip:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 12px rgba(80, 64, 52, .16), 0 2px 2px rgba(80, 64, 52, .1); }
body #settingsGroupCharacter .clay-chip[aria-checked="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--clay-ring), 0 4px 10px rgba(80, 64, 52, .14); }
body #settingsGroupCharacter .clay-accent { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
body #settingsGroupCharacter .clay-accent[hidden] { display: none; }
body #settingsGroupCharacter .clay-accent-name { font-size: 12px; font-weight: 700; color: var(--clay-sub); }
body #settingsGroupCharacter .clay-chips-small { grid-column: 1 / -1; grid-template-columns: repeat(10, minmax(0, 1fr)); padding: 0; }
body #settingsGroupCharacter .clay-chips-small .character-swatch { width: 24px; height: 24px; }

/* 表情と場面（たたんでおく） */
body #settingsGroupCharacter .clay-more { border-radius: 18px; background: var(--clay-card); box-shadow: var(--clay-lift); padding: 0 12px; }
body #settingsGroupCharacter .clay-more > summary { list-style: none; cursor: pointer; padding: 13px 2px; font-size: 12.5px; font-weight: 700; color: var(--clay-sub); }
body #settingsGroupCharacter .clay-more > summary::-webkit-details-marker { display: none; }
body #settingsGroupCharacter .clay-more > summary::after { content: "＋"; float: right; }
body #settingsGroupCharacter .clay-more[open] > summary::after { content: "－"; }
body #settingsGroupCharacter .clay-more[open] { padding-bottom: 12px; }
body #settingsGroupCharacter .clay-more .character-stage-side { display: grid; gap: 8px; margin-bottom: 12px; }
body #settingsGroupCharacter .clay-more .character-face-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body #settingsGroupCharacter .clay-more .character-face-grid .character-tile { aspect-ratio: auto; padding: 8px 2px 6px; }
body #settingsGroupCharacter .clay-more .character-face-grid .g-ch-tile { font-size: 34px; }
body #settingsGroupCharacter .clay-resets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  body #settingsGroupCharacter *, body .clay-deco { animation: none !important; transition: none !important; }
  body #settingsGroupCharacter .character-tile:hover, body #settingsGroupCharacter .clay-chip:hover { transform: none !important; }
}

/* 案 B のように、キャラクターの設定を開いているときは画面全体を温かい白にする */
body .settings-sheet:has(#settingsGroupCharacter:not([hidden])) { background: var(--clay-bg); }
body #settingsGroupCharacter.clay-group { margin: 0; padding: 4px 2px 16px; }
body .clay-deco-white { width: 22px; height: 22px; }