/* 10-24 首次進遊戲：取名＋選角色＋選服裝顏色（淡色面板，比照分區選擇） */
.name-gate { box-sizing:border-box; width:min(760px,calc(100vw - 32px)); max-height:none; overflow:hidden; padding:18px 20px; border:2px solid #b38a40; border-radius:16px; background:#fff9ed; color:#332719; color-scheme:light; }
/* 10-25 老闆「創建角色的畫面應該是沒有背景圖的」：遮罩改成不透明純色，後面的遊戲畫面不透出來 */
.name-gate::backdrop { background:#f3e6cc!important; }
.name-gate h2 { margin:0 0 4px; color:#332719; }
.name-gate-lead { margin:0 0 12px; color:#5a4426; }
.name-gate-body { display:grid; grid-template-columns:minmax(150px,220px) 1fr; gap:16px; align-items:start; }
.name-gate-preview { display:grid; gap:6px; justify-items:center; padding:10px; border:1px solid #c5a56c; border-radius:12px; background:radial-gradient(circle at 50% 40%,#fff 0,#f6e6c2 75%); }
.name-gate-plate b { display:inline-block; max-width:180px; padding:3px 12px; border-radius:999px; background:#332719; color:#fff3d6; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.name-gate-figure, .name-gate-sprite { position:relative; overflow:hidden; aspect-ratio:272 / 362; }
.name-gate-figure { width:100%; max-width:190px; }
.name-gate-figure img, .name-gate-sprite img { position:absolute; inset:0 auto auto 0; width:400%; height:100%; max-width:none; transform:translateX(calc(var(--avatar,0) * -25%)); pointer-events:none; user-select:none; }
.name-gate-fields { display:grid; gap:10px; min-width:0; }
.name-gate-name { display:grid; gap:4px; font-weight:600; }
.name-gate-name input { box-sizing:border-box; width:100%; padding:9px 10px; border:1px solid #b38a40; border-radius:8px; background:#fff; color:#332719; font:inherit; font-size:16px; }
.name-gate fieldset { margin:0; padding:0; border:0; display:flex; flex-wrap:wrap; gap:8px; }
.name-gate legend { width:100%; margin-bottom:4px; padding:0; font-weight:600; }
.name-gate-avatars button { width:64px; padding:3px; border:2px solid #d9c194; border-radius:10px; background:#fff; cursor:pointer; }
.name-gate-avatars .name-gate-sprite { display:block; width:100%; }
.name-gate-colors button { width:34px; height:34px; padding:0; border:2px solid #fff; border-radius:50%; background:var(--swatch); box-shadow:0 0 0 1px #b38a40; cursor:pointer; }
.name-gate-avatars button.selected { border-color:#a77720; box-shadow:0 0 0 2px #edc368; }
.name-gate-colors button.selected { box-shadow:0 0 0 3px #a77720; }
.name-gate-error { min-height:1.2em; margin:0; color:#b3261e; font-size:14px; }
.name-gate-confirm { justify-self:start; background:#edc368; color:#332719; border:1px solid #a77a2e; border-radius:8px; padding:10px 24px; font:inherit; font-weight:700; cursor:pointer; }
@media (max-width:560px) { .name-gate-body { grid-template-columns:1fr; } .name-gate-figure { max-width:130px; } }
@media (max-height:450px) { .name-gate { padding:10px 16px; } .name-gate-lead { margin-bottom:6px; } .name-gate-figure { max-width:120px; } .name-gate-avatars button { width:48px; } .name-gate-colors button { width:28px; height:28px; } .name-gate-fields { gap:6px; } }
/* 共用 dialog 主題用了 !important，這裡把淡色金框寫死 */
body[data-ui-version="3"] dialog.name-gate { background:#fff9ed!important; color:#332719!important; border-color:#b38a40!important; color-scheme:light; }
body[data-ui-version="3"] dialog#name-gate.name-gate .name-gate-confirm { background:#edc368!important; color:#332719!important; border-color:#a77a2e!important; }
body[data-ui-version="3"] dialog#name-gate.name-gate .name-gate-avatars button { background-color:#fff!important; }
body[data-ui-version="3"] dialog#name-gate.name-gate .name-gate-avatars button.selected { border-color:#a77720!important; }
body[data-ui-version="3"] dialog#name-gate.name-gate .name-gate-colors button { background-color:var(--swatch)!important; border-color:#fff!important; }
/* 首頁角色設定區：之後也能換服裝顏色 */
.outfit-pick { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 2px; }
.outfit-pick button { width:28px; height:28px; padding:0; border:2px solid #fff; border-radius:50%; background:var(--swatch)!important; box-shadow:0 0 0 1px #b38a40; cursor:pointer; }
.outfit-pick button.selected { box-shadow:0 0 0 3px #d9ab3f; }
body[data-ui-version="3"] #app .outfit-pick button[data-outfit] { background-color:var(--swatch)!important; border-color:#fff!important; }
body[data-ui-version="3"] dialog#name-gate.name-gate :is(legend, .name-gate-name > span) { color:#332719!important; }
/* 10-24 老闆「隨機名字」：名字欄和🎲鈕同一列 */
.name-gate-input-row { display:flex; gap:8px; align-items:stretch; }
.name-gate-input-row input { flex:1; min-width:0; }
.name-gate-random { flex:none; padding:0 12px; border:1px solid #a77a2e; border-radius:8px; background:#fff3d6; color:#332719; font:inherit; font-size:14px; font-weight:700; white-space:nowrap; cursor:pointer; }
body[data-ui-version="3"] dialog#name-gate.name-gate .name-gate-random { background:#fff3d6!important; color:#332719!important; border-color:#a77a2e!important; }

/* 10-24 取名頁加選初始武器 */
.name-gate-weapons button { flex:1 1 0; min-width:0; display:grid; gap:2px; padding:6px 8px; border:2px solid #d9c194; border-radius:10px; background:#fff; color:#332719; font:inherit; text-align:center; cursor:pointer; }
.name-gate-weapons button small { font-size:11px; color:#6b5434; }
.name-gate-weapons button.selected { border-color:#a77720; box-shadow:0 0 0 2px #edc368; background:#fff4d8; }
body[data-ui-version="3"] dialog#name-gate.name-gate .name-gate-weapons button { background-color:#fff!important; color:#332719!important; }
body[data-ui-version="3"] dialog#name-gate.name-gate .name-gate-weapons button.selected { background-color:#fff4d8!important; border-color:#a77720!important; }
@media (max-height:450px) { .name-gate-weapons button { padding:4px 6px; } .name-gate-weapons button small { font-size:10px; } }
/* 10-24 臉部自訂：膚色＋六個部位（無＋四種），按鈕放圖層局部縮圖 */
.name-gate:has(.name-gate-face) { width:min(940px,calc(100vw - 32px)); }
.name-gate-preview { position:sticky; top:0; }
.name-gate-skins button, .name-gate-hairs button { width:30px; height:30px; padding:0; border:2px solid #fff; border-radius:50%; background:var(--swatch); box-shadow:0 0 0 1px #b38a40; cursor:pointer; }
.name-gate-skins button.selected, .name-gate-hairs button.selected { box-shadow:0 0 0 3px #a77720; }
.name-gate-face { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px 14px; }
.name-gate-part { gap:5px!important; }
.name-gate-part button { width:42px; height:42px; padding:0; overflow:hidden; border:2px solid #d9c194; border-radius:8px; background:#f6e6c2; cursor:pointer; color:#5a4426; font:inherit; font-size:12px; }
.name-gate-part button.selected { border-color:#a77720; box-shadow:0 0 0 2px #edc368; }
/* 10-25 示意圖＝選項穿在目前角色臉上裁出的那塊（js/look-compose.js composeThumb） */
.name-gate-thumb canvas { display:block; width:100%; height:100%; pointer-events:none; }
.name-gate-actions { display:flex; gap:10px; flex-wrap:wrap; }
.name-gate-cancel { background:#fff; color:#5a4426; border:1px solid #b38a40; border-radius:8px; padding:10px 20px; font:inherit; cursor:pointer; }
@media (max-height:450px) { .name-gate-part button { width:34px; height:34px; } .name-gate-skins button, .name-gate-hairs button { width:26px; height:26px; } }
body[data-ui-version="3"] dialog#name-gate.name-gate .name-gate-skins button, body[data-ui-version="3"] dialog#name-gate.name-gate .name-gate-hairs button { background-color:var(--swatch)!important; border-color:#fff!important; }
body[data-ui-version="3"] dialog#name-gate.name-gate .name-gate-part button { background-color:#f6e6c2!important; color:#5a4426!important; }
body[data-ui-version="3"] dialog#name-gate.name-gate .name-gate-part button.selected { border-color:#a77720!important; }
body[data-ui-version="3"] dialog#name-gate.name-gate .name-gate-cancel { background:#fff!important; color:#5a4426!important; border-color:#b38a40!important; }
.face-edit-open { margin:8px 0 2px; }

/* 10-25 老闆「橫式有空間可以運用」「上下捲動嚴格禁止」：橫向三欄（預覽｜名字・造型・服裝・武器｜膚色・臉部），
   放不下由 js/name-gate.js fit() 等比縮小，視窗本身不捲動 */
.name-gate-col { display:contents; }
.name-gate-weapons { order:1; } .name-gate-error { order:2; } .name-gate-actions { order:3; }
body[data-ui-version="3"] dialog#name-gate.name-gate { max-height:none!important; overflow:hidden!important; }
@media (orientation:landscape) and (min-width:700px) {
  .name-gate:has(.name-gate-face) { width:min(1240px,calc(100vw - 24px)); }
  .name-gate-body { grid-template-columns:minmax(150px,220px) 1fr; }
  .name-gate-preview { position:static; }
  .name-gate-fields { grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:20px; align-items:start; }
  .name-gate-col { display:grid; gap:10px; align-content:start; min-width:0; }
  .name-gate-weapons, .name-gate-error, .name-gate-actions { order:0; }
  .name-gate-face { grid-template-columns:1fr; gap:8px; }
  .name-gate-error:empty { display:none; }
  .name-gate-edit .name-gate-col-a { align-content:start; }
}

/* 10-25 老闆「角色下移置中」「武器要可以預覽」：預覽欄拉滿整個高度、人物置中；下面顯示選中的初始武器 */
.name-gate-weapon-preview { display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box; padding:6px 8px; border:1px solid #d9c194; border-radius:10px; background:#fffaf0; }
.name-gate-weapon-preview[hidden] { display:none; }
.name-gate-weapon-preview img { width:52px; height:52px; object-fit:contain; flex:none; }
.name-gate-weapon-preview span { display:grid; gap:2px; min-width:0; }
.name-gate-weapon-preview b { font-size:14px; color:#332719; }
.name-gate-weapon-preview small { font-size:11px; color:#6b5434; }
.name-gate-weapons button img { width:44px; height:44px; object-fit:contain; justify-self:center; }
@media (orientation:landscape) and (min-width:700px) {
  .name-gate-body { align-items:stretch; }
  .name-gate-preview { align-self:stretch; align-content:center; gap:12px; }
  .name-gate-figure { max-width:200px; }
}
@media (max-height:450px) { .name-gate-weapons button img { width:30px; height:30px; } .name-gate-weapon-preview img { width:36px; height:36px; } }
/* Face and avatar picking are paused until their sprites match across scenes. */
body[data-ui-version="3"] dialog#name-gate .name-gate-avatars,
body[data-ui-version="3"] dialog#name-gate .name-gate-col-b { display:none!important; }
body[data-ui-version="3"] dialog#name-gate.name-gate { width:min(760px,calc(100vw - 24px))!important; }
body[data-ui-version="3"] dialog#name-gate .name-gate-fields { grid-template-columns:minmax(0,1fr)!important; }
/* Eight choices stay visible as a four-column grid while the selected model loads. */
.name-gate-hero3d { display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr)); width:min(100%,260px); gap:6px; border:0; padding:0; margin:0; }
.name-gate-hero3d legend { width:100%; margin-bottom:4px; font-weight:700; }
.name-gate-hero3d button { width:100%; min-width:0; aspect-ratio:1; padding:0; border:2px solid #e2cf9f; border-radius:8px; background:#fffaf0; cursor:pointer; overflow:hidden; }
.name-gate-hero3d button img { width:100%; height:100%; object-fit:contain; display:block; }
.name-gate-hero3d button.selected { border-color:#d9a514; box-shadow:0 0 0 2px #f4c542; background:#fff3c4; }
body dialog#name-gate.name-gate .name-gate-hero3d button { border:2px solid #e2cf9f!important; background:#fffaf0!important; }
body dialog#name-gate.name-gate .name-gate-hero3d button.selected { border-color:#d9a514!important; box-shadow:0 0 0 2px #f4c542!important; background:#fff3c4!important; }

/* The selected 3D appearance replaces the four-frame 2D sprite in the large preview. */
.name-gate-figure img[hidden] { display:none; }
.name-gate-figure .name-gate-hero-preview { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; transform:none; }
.name-gate-figure .model-3d-canvas { position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; }