/* 着せかえ: チョコのおもちゃ（CHOCO 用の試作。2026-10-12）
 * 新しい作る画面（ui/style.css）の上に重ねる。TOP の「紙・墨線・ずらした影」のおもちゃ感を、黒ではなくチョコ色で。
 * 線と影はチョコ色、地はクリーム色の紙、アクセントはいちごのピンク。キャラの箱・パネル・ボタン・完成画面に効かせ、
 * パーツの一覧と色の段（数が多いところ）は線を細く・影を小さくして、キャラより枠が目立たないようにする。
 * 使い方: index.php の $uiTheme = 'choco-toy'（ローカルでは ?theme=choco-toy で試せる） */
:root {
  --choco: #4a2c22;        /* 線・影・文字（ビターチョコ） */
  --milk: #8a5a44;         /* 補足の文字（ミルクチョコ） */
  --cream: #fbf3e6;        /* 地（クリーム色の紙） */
  --card-w: #fffdf9;       /* 箱・ボタンの地 */
  --berry: #ff7fa6;        /* いちごのピンク */
  --berry-soft: #ffe6ee;
  --ink: var(--choco);
  --sub: var(--milk);
  --line: rgba(74, 44, 34, .14);
  --tile: #f7ecdf;
  --glass: var(--card-w);
  --glass-line: var(--choco);
  --accent: var(--berry);
  --accent-2: #ff9ab8;
  --accent-mid: #ff8cad;
  --accent-soft: var(--berry-soft);
  --shadow-sm: 3px 3px 0 var(--choco);
  --shadow-lg: 6px 6px 0 var(--choco);
}

/* 地: クリーム色の紙に、チョコチップのような小さな点 */
body {
  background:
    radial-gradient(circle at 6px 6px, rgba(138, 90, 68, .13) 2px, transparent 2.6px) 0 0 / 34px 34px,
    radial-gradient(circle at 23px 23px, rgba(138, 90, 68, .08) 1.6px, transparent 2.2px) 0 0 / 34px 34px,
    var(--cream);
}
button:focus-visible { outline-color: rgba(255, 127, 166, .8); }

/* ---- 浮いているボタン（ランダム・セーブ・ロゴのメニュー・十字キー） ---- */
.glass, .brand, .pad {
  border: 2px solid var(--choco);
  background: var(--card-w);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--shadow-sm);
  transition: transform .1s, box-shadow .1s, background .15s;
}
.glass:hover, .brand:hover, .pad:hover { background: #fff6ea; }
.glass:active, .brand:active, .pad:active, .cta:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--choco); }
.glass.split .split-more { border-left-color: rgba(74, 44, 34, .25); }

/* 完成: いちごのピンクの板に、チョコの線とずらした影 */
.cta {
  border: 2px solid var(--choco);
  background: var(--berry);
  box-shadow: var(--shadow-sm);
  text-shadow: 0 1px 0 rgba(74, 44, 34, .25);
}
.cta:hover { filter: none; background: #ff8fb1; }

/* ---- キャラの箱 ---- */
.stage {
  border: 2.5px solid var(--choco);
  border-radius: 30px;
  box-shadow: var(--shadow-lg);
}
.view-btn { background: var(--choco); box-shadow: 2px 2px 0 rgba(74, 44, 34, .35); }
.name-chip { border-color: rgba(74, 44, 34, .35); background: rgba(255, 253, 249, .85); }
.name-chip:hover { border-color: var(--berry); color: #e0507e; }

/* 元に戻す・やり直す、右の道具（調整）の列 */
.history, .rail {
  border: 2px solid var(--choco);
  background: var(--card-w);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--shadow-sm);
}
.tool:hover { background: var(--tile); }
.tool.on { background: var(--berry); box-shadow: inset 0 0 0 2px var(--choco); }

/* ロゴのメニュー */
.menu {
  border: 2px solid var(--choco);
  background: var(--card-w);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--shadow-lg);
}

/* ---- パーツのパネル ---- */
.panel {
  border: 2.5px solid var(--choco);
  border-radius: 28px;
  background: var(--card-w);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--shadow-lg);
}
/* カテゴリの列と編集の間は、板チョコの割れ目のような点線 */
.cats { border-right: 2px dashed rgba(74, 44, 34, .22); }
.cat { color: rgba(74, 44, 34, .78); }
.cat-ind {
  background: var(--berry);
  box-shadow: inset 0 0 0 2px var(--choco), 2px 2px 0 var(--choco);
}
.cat.sel { color: #fff; }
.cat-name { color: var(--choco); }
.colors { border-bottom: 2px dashed rgba(74, 44, 34, .16); }

/* パーツの一覧は数が多いので控えめに: クリーム色のタイル、触るとチョコの細い線と小さな影 */
.part { background: var(--tile); }
.part:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--choco), 2px 2px 0 rgba(74, 44, 34, .55); }
.part.sel { background: #fff; }
.part.sel::before { box-shadow: inset 0 0 0 2.5px var(--choco), inset 0 0 0 5px var(--berry); }
.part.sel::after { background-color: var(--berry); box-shadow: 0 0 0 2px var(--choco); }

/* ---- ダイアログ（セーブ・ロード、色の設定など） ---- */
.sheet {
  border: 2.5px solid var(--choco);
  box-shadow: 8px 8px 0 var(--choco);
}
.pill { background: var(--tile); border: 2px solid var(--choco); box-shadow: 2px 2px 0 var(--choco); }
.pill:hover { background: #fff6ea; }

/* ---- 完成画面 ---- */
.finish { background: rgba(74, 44, 34, .4); }
.finish-card {
  border: 3px solid var(--choco);
  background: var(--card-w);
  box-shadow: 10px 10px 0 var(--choco);
}
.finish-head { background: rgba(255, 253, 249, .95); }
.finish-head h2 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #e0507e; text-shadow: 2px 2px 0 rgba(74, 44, 34, .18); }
.finish #chaMakeResultImage { box-shadow: inset 0 0 0 2px var(--choco), 4px 4px 0 var(--choco); }
.fa { border: 2px solid var(--choco); background: var(--tile); box-shadow: 3px 3px 0 var(--choco); }
.fa:hover { background: #fff6ea; }
.fa:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--choco); }
.fa-main { background: var(--berry); box-shadow: 3px 3px 0 var(--choco); }
.fa-main:hover { background: #ff8fb1; filter: none; }
.finish .fa.link-btn { background: var(--tile); }
.finish .fa.link-btn:hover { background: #fff6ea; }
.finish-back { border: 2px solid var(--choco); background: var(--tile); }

/* スマホ: ずらした影はやめて、チョコの線だけ（ユーザー判断 2026-10-12。狭い画面では影がキャラの箱とパーツのシートの間で
   重なったり切れたりして、きれいに出なかった）。押したときは沈む代わりに少し縮む */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  :root { --shadow-sm: none; --shadow-lg: none; }
  .glass, .brand, .pad, .cta, .history, .rail, .stage, .panel, .menu, .sheet, .pill, .fa, .fa-main, .view-btn { box-shadow: none; }
  .glass:active, .brand:active, .pad:active, .cta:active, .fa:active { transform: scale(.95); box-shadow: none; }
  .stage { border-width: 2px; }
  .panel { border-width: 2px; border-bottom: 0; }
  .cat-ind { box-shadow: inset 0 0 0 2px var(--choco); }
  .part:hover { box-shadow: inset 0 0 0 1.5px var(--choco); }
  .finish #chaMakeResultImage { box-shadow: inset 0 0 0 2px var(--choco); }
  .finish-card { box-shadow: none; border: 0; }
  .finish-head h2, .cta { text-shadow: none; }
}