/* ギャルメーカーの作る画面: 新しい CHOCO の画面（/chibi/create/ui/style.css）に重ねる差分。
 * ギャルは全身の縦長（300×600）なので、キャラの枠を縦長にする。カテゴリの絵は今の画面の色付きのアイコン（img/icon/category/avatar/）。
 * 色は「パレット（あるカテゴリだけ）」と「色の調整（色合い・あざやかさ・明るさ）」 */

/* 読み込み中 */
.gal-boot { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 10px;
  background: radial-gradient(700px 480px at 30% 0%, #ffdbe6 0%, transparent 60%), radial-gradient(700px 520px at 80% 100%, #e8e4ff 0%, transparent 60%), #fbf7f9;
  transition: opacity .4s ease, visibility .4s; }
.gal-boot.out { opacity: 0; visibility: hidden; pointer-events: none; }
.gal-boot-logo { width: 150px; height: auto; }
.gal-boot-maker { margin: 0; font: 800 11px/1 var(--font); letter-spacing: .4em; padding-left: .4em; color: var(--accent); }
.gal-boot-bar { position: relative; display: block; width: 150px; height: 3px; margin-top: 8px; border-radius: 99px; overflow: hidden; background: rgba(255, 111, 150, .18); }
.gal-boot-bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: inherit; background: linear-gradient(to right, transparent, var(--accent), transparent); animation: galBootBar 1.2s ease-in-out infinite; }
.gal-boot-msg { margin: 0; font: 700 12px/1.5 var(--font); color: var(--sub); }
@keyframes galBootBar { to { left: 100%; } }

/* キャラの枠: 縦長（3:4）。キャラはこの中に収めて描く（app.js の layout） */
.stage-box { aspect-ratio: 3 / 4; width: min(100cqw, 75cqh); }
#konva, #konva .konvajs-content { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }
#konva canvas { display: block; }
.stage { cursor: default; }
.stage.moving { cursor: move; }

/* カテゴリ: 色付きのアイコン（img）。選んだものは後ろをグラデーションに（CHOCO はすべる印 .cat-ind を使うが、モックでは置かない） */
.cat img { display: block; width: 46px; height: 46px; object-fit: contain; pointer-events: none; }
.cat.sel { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 20px -10px rgba(255, 90, 130, .8); }
.cat.sel img { animation: icon-pop .5s var(--ease); }
/* 何か入っているカテゴリの印（小さな点） */
.cat.has::before { content: ""; position: absolute; top: 6px; right: 12px; z-index: 2; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #fff; }
.cat.sel.has::before { background: #fff; box-shadow: none; }

/* パーツのサムネイル（パーツの絵から作って、絵のある所に寄せる。app.js の thumbFor） */
.part img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; pointer-events: none; }
.part img.classic { inset: 6%; width: 88%; height: 88%; image-rendering: auto; } /* 作れなかったときは今の画面のサムネイル */
.part .none-label { font-size: 13px; }
/* いくつも付けられるカテゴリ: 付けた順の番号。いま調整しているものは太い枠 */
.part.sel[data-order]::after { content: attr(data-order); background-image: none; color: #fff; font: 900 11px/20px var(--font); text-align: center; }
.part.sel.multi:not(.cur)::before { box-shadow: inset 0 0 0 2px rgba(255, 111, 150, .55); }
.part.cur::before { box-shadow: inset 0 0 0 3px var(--accent); }

/* 色の段: 「色の調整」の丸ボタン（パレットの左に固定） */
.tone-chip { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px 0 9px; border: 0; border-radius: 99px; background: var(--tile); color: var(--ink); font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: background .15s; }
.tone-chip:hover { background: #efe7eb; }
.tone-chip.on { background: var(--ink); color: #fff; }
.tone-chip svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tone-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.tone-chip.on .dot { background: #fff; }
/* 色の連動（髪と同じパレットのカテゴリ）。押すと色の連動の設定 */
.link-chip { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 11px 0 9px; border: 0; border-radius: 99px; background: var(--tile); color: var(--sub); font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: background .15s; }
.link-chip:hover { background: #efe7eb; }
.link-chip.on { background: var(--accent-soft); color: #c2334d; }
.link-chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* ランダムの設定・色の連動のカテゴリ（色付きのアイコン） */
.lock-cat img { display: block; width: 38px; height: 38px; object-fit: contain; pointer-events: none; }
/* 色の調整のつまみ */
.tone { display: grid; gap: 8px; padding: 4px 20px 14px; border-bottom: 1px solid var(--line); }
.tone-row { display: grid; grid-template-columns: 6.2em minmax(0, 1fr) 3em; align-items: center; gap: 10px; }
.tone-row label { font-size: 12px; font-weight: 800; color: var(--sub); }
.tone-row input { width: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
.tone-row output { font-size: 12px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.tone-row.hue input { accent-color: var(--ink); }
.tone-foot { display: flex; align-items: center; gap: 8px; }
.tone-foot .note { flex: 1; margin: 0; font-size: 11px; color: var(--sub); }
.tone-foot .pill { padding: 7px 14px; font-size: 12px; }
.tone-empty { margin: 0; font-size: 12px; color: var(--sub); }

/* 回転のつまみを回している間の角度（CHOCO と同じ見た目） */
.part-box.scalable .h:not(.rot) { display: block; }

/* 完成画面: 縦長の画像 */
.gal-finish-image { position: relative; overflow: hidden; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); }
.gal-finish-image img { display: block; height: min(64vh, 640px); width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
a.fa { text-decoration: none; }

/* スマホ: キャラの段を少し高く（縦長のキャラのため）。広げたときは 40% */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .app { --stage-h: 56vh; }
  .app.expanded { --stage-h: 40vh; }
  @supports (height: 1dvh) {
    .app { --stage-h: 56dvh; }
    .app.expanded { --stage-h: 40dvh; }
  }
  .stage-box { width: min(100cqw, 75cqh); }
  .cat img { width: 40px; height: 40px; }
  .cat.has::before { top: 3px; right: 3px; }
  .tone { padding: 2px 14px 10px; }
  .tone-row { grid-template-columns: 5.6em minmax(0, 1fr) 2.6em; gap: 8px; }
  .gal-finish-image img { height: min(52vh, 520px); height: min(52dvh, 520px); }
  /* ランダム・セーブはロゴの下に縦に（app.js の placeFloats）。ロゴの高さ 42px＋間 10px の下から */
  .float.side { top: calc(14px + 42px + 10px + env(safe-area-inset-top)); left: 16px; flex-direction: column; align-items: flex-start; gap: 8px; }
}
.float.side:empty { display: none; }
/* ロゴのメニューは、その下に並べたランダム・セーブより手前に（同じ重なりの高さだと、後ろに書いたボタンがメニューの上に出る） */
.float.tl { z-index: 8; }

/* 左右の色（目）: 両方・左・右（CHOCO の .lr と同じ部品を、色の調整の上に） */
.tone-lr { justify-self: start; }

/* 調整の列の長い名前（「裾を入れる」「パンツの上」） */
.tool.long span { font-size: 9px; letter-spacing: -.03em; white-space: nowrap; }

/* 片足のパーツ（靴下・アンクレット）: 付けている足の印（両足・左・右）。両足だけのもの（タイツなど）は、左足・右足を選んでいる間は薄く */
.part.sel.leg[data-order]::after { width: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; font-size: 10.5px; }
.part.both-only { opacity: .42; }
.leg-pick { flex: none; align-self: center; }

/* 色の調整の中の「うすさ」（いくつも付けられるカテゴリでは、どのパーツに掛かるかを小さく） */
.tone-row.opa-row label small { font-size: 10px; font-weight: 700; }

/* はじめての同意: CHARAT のロゴ（CHOCO は CHOCO のロゴ） */
/* CHOCO の .sheet-body img（枠付き・幅いっぱい）を打ち消す */
.first-sheet .sheet-body img.gal-first-logo { display: block; width: 140px; height: auto; margin: 6px auto 18px; border-radius: 0; background: none; box-shadow: none; }
/* お披露目のあと: シェアのページの URL のコピーと X */
.gal-shared { grid-column: 1 / -1; display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--accent-soft); text-align: center; }
.gal-shared[hidden] { display: none; }
.gal-shared-text { margin: 0; font-size: 13px; font-weight: 800; color: #c2334d; }
.gal-shared-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gal-shared-btns .pill { padding: 9px 16px; font-size: 13px; background: #fff; color: var(--ink); text-decoration: none; }
/* コンテナクエリの無いブラウザ（app.js の fitWithoutContainerQueries が大きさを入れる） */
.no-cq .stage-box { aspect-ratio: auto; }