:root {
  --bg: #1b1d21;
  --panel: #2a2d33;
  --panel2: #353941;
  --fg: #e8e8e8;
  --accent: #4a9eff;
  --add: #3aa757;
  --rem: #d2691e;
  --tag: #444a54;
  --border: #4a4f57;
  --muted: #9aa3ae;
  --danger: #ff6b6b;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* hidden 属性を確実に効かせる（ID/クラスの display 指定に負けないよう !important）。
   これがないとサブバー等の hidden が上書きされ常時表示になる。 */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  /* ページ自体のスクロール/ズーム/選択を無効化（アプリ的挙動に） */
  touch-action: none; overscroll-behavior: none; user-select: none;
  -webkit-user-select: none; overflow: hidden;
}

#app { display: flex; flex-direction: column; height: 100%; }

/* ── 上部バー（ツールバー＋クイックバー） ───────────── */
#toolbar, #quickbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 4px 10px;
}
#toolbar { background: var(--panel); padding-top: max(6px, env(safe-area-inset-top)); }
#quickbar { background: var(--panel2); font-size: 13px; }
/* 折りたたみ時はクイックバーが最上段になるので safe-area を付与 */
#app.collapsed #quickbar { padding-top: max(6px, env(safe-area-inset-top)); }
.group { display: flex; align-items: center; gap: 6px; }
/* App name + version: the same look in every yukmmz.github.io app (toolbar left end). */
.app-brand {
  display: flex; align-items: baseline; gap: .45em;
  white-space: nowrap; margin-right: 8px;
}
.app-title {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Segoe UI", Roboto, sans-serif;
  font-size: 16px; font-weight: 700; margin: 0; letter-spacing: .02em;
  line-height: 1.2; white-space: nowrap;
}
.app-version {
  font-size: 11px; font-weight: 400; opacity: .55; white-space: nowrap; cursor: pointer;
}
.app-version:hover { text-decoration: underline; }

button, select {
  font-size: 14px; color: var(--fg); background: var(--panel2);
  border: 1px solid #4a4f57; border-radius: 8px; padding: 5px 10px;
  min-height: 34px; cursor: pointer;
}
button:active { filter: brightness(1.3); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.mode-add { background: var(--add); border-color: var(--add); color: #fff; }
button.mode-rem { background: var(--rem); border-color: var(--rem); color: #fff; }
button.lasso-on, button.pin-on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

select { padding: 5px 8px; }
input[type=text] {
  font-size: 14px; color: var(--fg); background: var(--panel2);
  border: 1px solid #4a4f57; border-radius: 8px; padding: 5px 8px;
  min-height: 34px; width: 130px;
}
label { display: flex; align-items: center; gap: 6px; }
/* 対象が未入力（必須）の間は赤枠で促す */
#objInput { width: 100px; }
#objInput.required-empty { border-color: #d40000; background: #3a2526; }

.tag {
  background: var(--tag); border-radius: 6px; padding: 4px 8px;
  font-size: 13px; min-width: 56px; text-align: center;
}
.tag.off { color: #ff9; }

/* ── サブバー（移動/回転・翼3点・自動シード。各モード中のみ表示） ───── */
#transformBar, #threePointBar, #autoBar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 4px 10px;
}
#transformBar, #threePointBar { background: var(--accent); }
#autoBar { background: #2f6f4f; font-size: 13px; }   /* link自動シード=緑系で他と区別 */
#transformBar .tag, #threePointBar .tag, #autoBar .tag { background: rgba(0, 0, 0, 0.25); color: #fff; }
#transformBar .barhint, #threePointBar .barhint { color: #eaf3ff; font-size: 12px; margin-left: auto; }
#autoBar label { gap: 6px; }
#autoBar input[type=range] { width: 96px; }
#autoBar span[id^="v"] { display: inline-block; min-width: 28px; text-align: right; }
#rotReadout { min-width: 48px; }

/* ── チョーム折りたたみ（画像面積の最大化） ───────── */
/* 折りたたみ時はツールバーと各サブバーを display:none にして #stage(flex:1) を広げる。
   クイックバー(#quickbar)は頻用コントロールなので畳まず常時表示する。 */
#app.collapsed #toolbar,
#app.collapsed #transformBar,
#app.collapsed #threePointBar,
#app.collapsed #autoBar { display: none !important; }

/* 常時表示の小さなトグル（キャンバス上に浮かせる。畳んでも必ず押せる） */
.chrome-toggle {
  position: absolute; z-index: 20;
  top: 8px; right: 8px;
  min-height: 34px; padding: 4px 10px; font-size: 13px;
  background: rgba(42, 45, 51, 0.82); border: 1px solid #4a4f57;
  border-radius: 8px; color: var(--fg); opacity: 0.9;
}

/* ── 「その他」オーバーフローメニュー（低頻度ボタンを格納） ───── */
.menu-wrap { position: relative; display: inline-flex; }
#moreMenu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--panel); border: 1px solid #4a4f57; border-radius: 10px;
  padding: 8px; min-width: 190px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
#moreMenu button { width: 100%; justify-content: flex-start; text-align: left; }
#moreMenu label { width: 100%; }
#moreMenu input[type=text] { width: 100%; flex: 1; }

/* ── Common header controls: ⛶ full screen and ⚙ settings (toolbar right end) ── */
#toolbar .tb-right { margin-left: auto; }
.btn-icon {
  width: 36px; height: 36px; min-height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 20px; line-height: 1; flex: 0 0 auto;
  border-radius: 10px;
}
/* The gear is the one control that must read at a glance. */
#settings-btn { font-size: 2.1rem; overflow: visible; }
#help-btn { font-size: 1.35rem; font-weight: 700; }
/* "FB" packed edge to edge inside the 36x36 key: bold, squeezed sideways, no extra spacing. */
#feedback-btn .fb-mark {
  display: inline-block; font-size: 1.44rem; font-weight: 384;
  /* buttons do not inherit the page font (Arial here), so name the same stack as the other apps */
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Segoe UI", Roboto, sans-serif;
  letter-spacing: -.05em; line-height: 1; transform: scaleX(.74);
}
#fullscreen-btn[hidden] { display: none; }
.fs-icon {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
#fullscreen-btn .fs-exit,
#fullscreen-btn.is-fullscreen .fs-enter { display: none; }
#fullscreen-btn.is-fullscreen .fs-exit { display: block; }

/* ── Settings sheet (centered modal + backdrop; same as the other apps) ── */
/* body has touch-action:none for the canvas; the sheet and lists must still
   scroll with a finger, so they opt back in to vertical panning. */
.backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0, 0, 0, 0.55);
}
.sheet {
  position: fixed; z-index: 75; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  touch-action: pan-y; overscroll-behavior: contain;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
  padding: 16px;
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.sheet-title { font-size: 16px; margin: 0; }
.sheet-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 0; border-top: 1px solid var(--border);
}
.sheet-label { font-size: 14px; }
.sheet select { max-width: 60%; }
.btn-danger { color: var(--danger); }
/* A link styled as a button (「アプリ一覧を開く」). */
a.linkbtn {
  font-size: 14px; color: var(--fg); background: var(--panel2);
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px;
  min-height: 34px; display: inline-flex; align-items: center; text-decoration: none;
}
a.linkbtn:active { filter: brightness(1.3); }

/* ── QR / changelog overlays (dark card; the QR itself stays on white) ── */
#qrOverlay, #changelogOverlay, #helpOverlay, #feedbackOverlay {
  position: fixed; inset: 0; z-index: 80; display: flex;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.72);
}
.qrcard {
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--border); border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: min(640px, calc(100vw - 32px));
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
}
.qrrow { display: flex; flex-direction: row; align-items: flex-start; gap: 24px; }
.qrcol {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  flex: 1 1 0; min-width: 0;
}
.qrcard .qrImg {
  width: min(38vmin, 260px); height: auto; image-rendering: pixelated;
  background: #fff; padding: 8px; border-radius: 8px;
}
.qrcard .qrlabel { font-size: 15px; font-weight: 600; color: var(--muted); }
.qrcard .qrurl { font-size: 13px; color: var(--muted); word-break: break-all; text-align: center; }

.changelog-card {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  align-items: stretch; gap: 0; text-align: left;
}
.changelog-title { font-size: 16px; margin: 0 0 8px; }
.changelog-list {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  touch-action: pan-y; overscroll-behavior: contain;
  flex: 1 1 auto; min-height: 0;
}
.changelog-entry + .changelog-entry {
  border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px;
}
.changelog-version { font-size: 14px; margin: 0 0 4px; }
.changelog-entry ul { margin: 0; padding-left: 1.2em; font-size: 13px; color: var(--muted); line-height: 1.5; }
#changelogClose { margin-top: 12px; align-self: center; }

/* How to use window: same card as the changelog; the body scrolls with a finger
   (touch-action:pan-y comes from .changelog-list). */
.help-body { font-size: 14px; line-height: 1.6; }
.help-body h3 { font-size: 14px; margin: 14px 0 4px; color: var(--accent); }
.help-body h3:first-child { margin-top: 0; }
.help-body p { margin: 4px 0; }
.help-body ul, .help-body ol { margin: 4px 0; padding-left: 1.3em; }
.help-body li { margin: 2px 0; }
.help-body .note { font-size: 12px; color: var(--muted); }
.help-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.help-body kbd, .help-body .kbd-like {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em;
  padding: 1px 5px; border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 5px; background: var(--bg);
}
#helpClose { margin-top: 12px; align-self: center; }

/* Feedback window: same card as the changelog. The fields must take text even
   though body disables selection (user-select:none) for the canvas. */
.feedback-card { gap: 8px; }
.feedback-lead, .feedback-note { margin: 0; font-size: 13px; color: var(--muted); }
.feedback-message, .feedback-contact {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel2); color: var(--fg);
  user-select: text; -webkit-user-select: text; touch-action: auto;
}
.feedback-message { resize: vertical; min-height: 120px; }
.feedback-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.feedback-status { margin: 0; min-height: 1.2em; font-size: 13px; font-weight: 700; }
.feedback-status.ok { color: #4ade80; }
.feedback-status.err { color: var(--danger); }
.feedback-actions { display: flex; gap: 8px; justify-content: flex-end; }
#feedbackSend:disabled { opacity: .6; }

/* A small dot on ⚙ and on the changelog button until the new version's
   changelog has been opened once. */
#settings-btn, #changelogBtn { position: relative; }
#settings-btn.has-news::after,
#changelogBtn.has-news::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--danger);
}

/* ── 描画ステージ ───────────────────────────── */
#stage { position: relative; flex: 1; overflow: hidden; background: #111; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
#hint {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: #888; text-align: center; font-size: 15px; line-height: 1.7; pointer-events: none;
}
/* 現在表示中フレームのファイル名（キャンバス左上に小さく重ねる） */
.frame-name {
  position: absolute; z-index: 15; top: 8px; left: 8px;
  max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px 8px; font-size: 12px; border-radius: 6px;
  background: rgba(27, 29, 33, 0.7); color: var(--fg); pointer-events: none;
}
.frame-name:empty { display: none; }

/* ── スライダー ───────────────────────────── */
#quickbar label { gap: 8px; }
input[type=range] { width: 130px; }
/* 値表示(v*)はラベル内 span のみ。frameLabel(.tag)/status には適用しない */
#quickbar label span { display: inline-block; min-width: 24px; text-align: right; }
.status { color: var(--accent); font-size: 12px; }
/* Undo/ADD のグループを右端へ寄せる（一番右=ADD/REMOVE, その左=Undo） */
#quickbar .qright { margin-left: auto; }

/* Quick tooltip for buttons (mouse only; shown by initQuickTips after 0.5 s). Above every overlay. */
.quick-tip {
  position: fixed;
  z-index: 100;
  max-width: 260px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--fg);
  color: var(--bg);
  font-size: .8rem;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.quick-tip[hidden] { display: none; }