/* 作成ページ・確認用だけの見た目（ほかは index.html の開発用エディタと同じ） */
header { overflow-x: auto; }
#ratingLbl { color: var(--gold); font-size: 12px; white-space: nowrap; }
#ratingBox { font-size: 13px; }
#newSel { flex: 1 1 100%; }
#ratingBox .stars { color: var(--gold); font-size: 18px; letter-spacing: 2px; }
#ratingBox .dim { color: var(--dim); }
#left a { color: var(--accent); align-self: center; }
footer .credit a { color: var(--dim); }
footer .credit a:hover { color: var(--ink); }
#narrow { display: none; position: fixed; z-index: 5; left: 16px; right: 16px; bottom: 36px; padding: 8px 10px; border-radius: 4px;
  background: #000c; color: var(--ink); font-size: 12px; pointer-events: none; }
@media (max-width: 900px) { #narrow { display: block; } }

dialog { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px;
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
dialog::backdrop { background: #0008; }
dialog a { color: var(--accent); }
dialog h3 { margin: 0 0 8px; font-size: 14px; color: var(--gold); }
/* 「Google でログイン」は Google のブランドの決まり（白地・灰色の枠・色つきの G・Roboto Medium 14px）に合わせる */
button.gsi { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; margin: 6px 0;
  background: #fff; color: #1f1f1f; border: 1px solid #747775; border-radius: 4px;
  font: 500 14px/20px Roboto, Arial, sans-serif; letter-spacing: .25px; cursor: pointer; }
button.gsi:hover { background: #f2f2f2; border-color: #747775; }
button.gsi:disabled { opacity: .6; }
.mine { background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 6px 8px; margin: 6px 0; }
.mine .top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mine .top b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* 差し戻しの理由は管理画面で書いた改行のまま出す */
.mine .warn { white-space: pre-wrap; overflow-wrap: anywhere; }
.status { font-size: 11px; border-radius: 3px; padding: 0 6px; border: 1px solid var(--line); white-space: nowrap; }
.status.pending { color: var(--gold); border-color: var(--gold); }
.status.published { color: var(--ok); border-color: var(--ok); }
/* 一覧から外れたものも遊べるので公開中と同じ色。枠は点線で分ける */
.status.archived { color: var(--ok); border-color: var(--ok); border-style: dashed; }
.status.rejected, .status.unpublished { color: var(--ng); border-color: var(--ng); }
.status.withdrawn { color: var(--dim); }
/* 上の欄の横に出す、開いている下書きの状態（作成中・審査中・差し戻し・公開中・公開停止） */
#stateLbl { flex: none; font-size: 12px; }
#stateLbl:empty, #stateBtns:empty { display: none; }
.status.draft { color: var(--ink); }
.status.stopped { color: var(--ng); border-color: var(--ng); }
#stateLbl.has-reason { cursor: pointer; }
#stateLbl.has-reason:hover { background: var(--panel2); }
.reasontext { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--panel2); border: 1px solid var(--line); border-radius: 4px;
  padding: 8px 10px; max-height: 50vh; overflow: auto; margin: 6px 0; }
/* 宝箱候補（出現率）の欄。開発用の tools/stage_editor/index.html と同じ見た目 */
.chest-card .top canvas { width: 36px; height: 36px; flex: none; image-rendering: pixelated; }
.chest-card .chest-no { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px;
  flex: none; border: 2px solid var(--gold); border-radius: 50%; background: #1d1b15; color: #fff; font-weight: 700; }
.chest-card .where { color: var(--dim); font-size: 11px; margin-left: auto; white-space: nowrap; }

/* 審査中・公開後の下書きは見るだけ（地図の移動・拡大、タブの切り替え、チェック・下書き・投稿の欄は使える） */
body.locked #palette, body.locked #waves, body.locked #info, body.locked #left h2.lockable + .foldbody,
body.locked #undoBtn, body.locked #redoBtn { pointer-events: none; opacity: .45; }

/* 確認用（審査ページの中）は見るだけ。左のパネルと編集の道具を出さない */
body:not(.mode-review) .review-only, body.mode-review .edit-only { display: none !important; }
body.mode-review { --lw: 0px !important; }
body.mode-review #left, body.mode-review #gripL, body.mode-review .tabs [data-tab=palette], body.mode-review #narrow { display: none !important; }
body.mode-review #waves, body.mode-review #info { pointer-events: none; }
body.mode-review #waves .btns, body.mode-review #info .btns, body.mode-review #ratingBox,
body.mode-review #ratingBox + .hint, body.mode-review #ratingLbl { display: none; }
body.mode-review #right .mini { display: none; }

/* エンドレスのウェーブ編集（管理画面の中）。地図は見るだけで、ウェーブのタブだけを出して編集する */
body:not(.mode-endless) .endless-only { display: none !important; }
body.mode-endless .edit-only { display: none !important; }
body.mode-endless { --lw: 0px !important; }
body.mode-endless #left, body.mode-endless #gripL, body.mode-endless .tabs [data-tab=palette], body.mode-endless .tabs [data-tab=info],
body.mode-endless #narrow { display: none !important; }
body.mode-endless #undoBtn, body.mode-endless #redoBtn { display: inline-flex !important; }
/* みんなの箱庭の確認（管理画面の中）。地図だけを出す */
body:not(.mode-garden) .garden-only { display: none !important; }
body.mode-garden .edit-only { display: none !important; }
body.mode-garden { --lw: 0px !important; --rw: 0px !important; }
body.mode-garden #left, body.mode-garden #gripL, body.mode-garden #right, body.mode-garden #gripR, body.mode-garden #narrow { display: none !important; }
#endlessBox { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--line); }
/* エンドレスの欄は名前が長いので、名前を 1 行目、数と単位を 2 行目に出す */
#endlessBox .efield { display: block; margin: 6px 0; }
#endlessBox .efield .ename2 { display: block; color: var(--dim); font-size: 12px; margin-bottom: 2px; }
#endlessBox .efield .eline { display: flex; align-items: center; gap: 6px; }
#endlessBox .efield .eline .sum { white-space: nowrap; }

/* 言語の切り替え（i18n.js）。英語は言葉が長いので、欄の名前の幅を広げる */
#langSw { flex: none; font-size: 12px; }
html[lang=en] label.row > span { width: 84px; }
html[lang=en] .tool .nm { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* アカウントの下書きの同期のようす（見出しの小さな札） */
.sync { font-size: 11px; border-radius: 3px; padding: 0 6px; border: 1px solid var(--line); color: var(--dim); white-space: nowrap; flex: none; }
.sync:empty { display: none; }
.sync.saved { color: var(--ok); border-color: var(--ok); }
.sync.unsynced { color: var(--gold); border-color: var(--gold); }
.sync.error { color: var(--ng); border-color: var(--ng); }
.sync.signedout { color: var(--dim); border-color: var(--line); }
#importList { max-height: 50vh; overflow-y: auto; margin: 6px 0; }
.imp { display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin: 3px 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.imp span { overflow-wrap: anywhere; }

/* 新しいステージ: ひな形を縦に並べる */
.newlist { display: flex; flex-direction: column; gap: 4px; min-width: min(360px, calc(100vw - 64px)); }
.newlist button { text-align: left; padding: 8px 10px; }

/* テストプレイ用のコード */
.testcode { font: 700 40px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .25em; color: var(--gold); text-align: center; padding: 10px 0;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; margin: 6px 0; user-select: all; }
.teststeps { padding-left: 20px; }

#scatterKinds label { display: inline-flex; align-items: center; gap: 3px; }
#scatterKinds input { width: 40px; }