/* つくも Web ― スマホ優先の暗い配色（PC 版と同じ色）。900px 以上では左ナビ＋広い盤面の PC 向け配置に切り替わる。 */
:root {
  --bg: #1B1A17; --panel: #252420; --panel2: #2E2C27; --line: #4A473F;
  --fg: #EDE6D6; --dim: #A8A196; --accent: #C8A45C; --missing: #E0685A; --ok: #7FB069; --blue: #8FB5D8;
  --sel: #4A3F22; --nav-h: 56px; --top-h: 48px; --side-w: 200px;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font-family: "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif; font-size: 14px; overscroll-behavior: none; }
a { color: var(--accent); }
button { font: inherit; }
input, select, textarea { font: inherit; }

/* 起動中 */
.boot { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; gap: 8px; }
.boot-title { font-size: 28px; font-weight: bold; letter-spacing: .2em; }
.boot-sub { color: var(--dim); font-size: 12px; }
.boot-bar { width: 160px; height: 4px; background: var(--panel2); border-radius: 2px; overflow: hidden; margin-top: 16px; }
.boot-fill { width: 40%; height: 100%; background: var(--accent); animation: boot 1.2s infinite ease-in-out; }
@keyframes boot { 0% { transform: translateX(-100%);} 100% { transform: translateX(250%);} }

/* 骨組み：スマホは 上バー / 中身 / 下ナビ の縦積み、PC は左ナビ + (上バー / 中身) */
.shell { display: grid; height: 100vh; height: 100dvh; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: 1fr;
  grid-template-areas: "top" "content" "nav"; }
.topbar { grid-area: top; height: calc(var(--top-h) + var(--safe-t)); padding-top: var(--safe-t); background: var(--panel);
  display: flex; align-items: center; padding-left: 14px; padding-right: 10px; gap: 10px; border-bottom: 1px solid var(--line); }
.topbar .title { font-weight: bold; font-size: 16px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .sub { color: var(--dim); font-size: 11px; }
.topbar a.gear { color: var(--dim); text-decoration: none; font-size: 18px; padding: 4px 6px; }
.content { grid-area: content; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.content.nopad { overflow: hidden; display: flex; flex-direction: column; }
.pad { padding: 10px 12px calc(12px + var(--safe-b)); }
.nav { grid-area: nav; height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: var(--panel);
  border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); }
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--dim);
  text-decoration: none; font-size: 11px; }
.nav a .ico { font-size: 18px; line-height: 1; }
.nav a.active { color: var(--accent); }
.nav .brand, .nav .spacer, .nav a.side-only { display: none; }

/* 共通部品 */
.btn { background: var(--panel2); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.btn.primary { background: var(--accent); color: #1B1A17; border-color: var(--accent); font-weight: bold; }
.btn.small { padding: 5px 9px; font-size: 12px; border-radius: 6px; }
.btn.danger { color: var(--missing); }
.btn:disabled { opacity: .4; cursor: default; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; scrollbar-width: none; flex: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; background: var(--panel2); color: var(--fg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.chip.on { background: var(--accent); color: #1B1A17; border-color: var(--accent); font-weight: bold; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.cards { display: block; }
.row { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.dim { color: var(--dim); }
.small { font-size: 12px; }
.accent { color: var(--accent); }
.missing { color: var(--missing); }
.ok { color: var(--ok); }
.blue { color: var(--blue); }
.bar { height: 6px; background: var(--panel2); border-radius: 3px; overflow: hidden; }
.bar > div { height: 100%; background: var(--ok); }
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 16px); transform: translateX(-50%);
  background: #F0201F1B; color: var(--fg); border: 1px solid var(--accent); border-radius: 8px; padding: 10px 14px; z-index: 50; max-width: 90vw; }
.empty { color: var(--dim); text-align: center; padding: 40px 16px; }
.numinput { width: 80px; background: var(--panel2); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; text-align: right; }
.select { background: var(--panel2); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 8px; max-width: 100%; }
.check { display: flex; align-items: center; gap: 6px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.hr { border-top: 1px solid var(--line); margin: 8px 0; }
.code { width: 100%; margin-top: 8px; background: var(--panel2); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 8px;
  font-family: ui-monospace, Consolas, monospace; font-size: 11px; word-break: break-all; resize: vertical; }
.entry-card { max-width: 560px; margin-left: auto; margin-right: auto; }
.entry-name { font-size: 20px; font-weight: bold; margin: 12px 0 2px; }
.entry-input { font-size: 22px; width: 120px; padding: 8px; }

/* 強化表 */
.tree-area { flex: 1; min-height: 0; position: relative; display: flex; }
.tree-wrap { flex: 1; min-height: 0; min-width: 0; overflow: auto; touch-action: pan-x pan-y; background: var(--panel); position: relative; --s: 0.8;
  user-select: none; -webkit-user-select: none; cursor: grab; }
.tree-wrap.dragging { cursor: grabbing; }
.tree-ctl { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 4px; z-index: 5; }
.tree-ctl .btn { width: 36px; height: 36px; padding: 0; font-size: 16px; line-height: 34px; text-align: center; opacity: .9; }
.tree-ctl .btn.fit { width: auto; padding: 0 10px; font-size: 12px; }
.tree-sizer { position: relative; width: calc(var(--w) * 1px * var(--s)); height: calc(var(--h) * 1px * var(--s)); }
.tree-inner { position: absolute; left: 0; top: 0; width: calc(var(--w) * 1px); height: calc(var(--h) * 1px);
  transform: scale(var(--s)); transform-origin: 0 0; }
.tree-inner svg { position: absolute; left: 0; top: 0; }
.tree-inner svg line { stroke: #5A554A; stroke-width: 3; stroke-linecap: round; }
.tree-inner svg line.on { stroke: var(--accent); stroke-width: 5; }
.node { position: absolute; width: 128px; height: 94px; border: 2px solid #5A554A; border-radius: 5px; background: var(--panel2);
  padding: 4px 6px; opacity: .8; cursor: pointer; overflow: hidden; }
.node.choosable { border-color: var(--accent); opacity: 1; }
.node.inroute { border-color: var(--accent); background: #3A3220; opacity: 1; }
.node.owned { border-color: var(--ok); opacity: 1; }
.node .nm { font-weight: bold; font-size: 12px; line-height: 14px; max-height: 28px; overflow: hidden; }
.node .st { font-size: 11px; display: flex; gap: 5px; align-items: center; margin-top: 1px; }
.node .el { border-radius: 3px; padding: 0 4px; font-size: 10px; font-weight: bold; color: #1B1A17; }
.node .dots { font-size: 8px; color: var(--fg); }
.node .sk { font-size: 9.5px; line-height: 12px; max-height: 24px; overflow: hidden; margin-top: 2px; }
.node .sk.o { color: var(--accent); }
.node .sk.i { color: var(--blue); }
.node .step { position: absolute; right: -2px; top: -2px; width: 20px; height: 20px; border-radius: 10px; background: var(--accent);
  color: #1B1A17; font-size: 11px; font-weight: bold; text-align: center; line-height: 20px; }
.node .tag { position: absolute; right: 6px; top: 20px; font-size: 10px; }
.el-火 { background: #E0685A; } .el-水 { background: #5A9BE0; } .el-樹 { background: #7FB069; } .el-風 { background: #8FD8D0; } .el-地 { background: #C08A4E; }

/* ルートのシート（スマホは下に固定、PC は右の縦パネル） */
.sheet { flex: none; background: var(--panel); border-top: 1px solid var(--line); max-height: 45vh; display: flex; flex-direction: column; }
.sheet .head { flex: none; padding: 8px 12px; display: flex; align-items: center; gap: 8px; }
.sheet .body { overflow: auto; padding: 0 12px 10px; min-height: 0; }
.sheet:not(.open) .body { display: none; }
.stepline { display: flex; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.stepline .no { flex: none; width: 20px; height: 20px; border-radius: 10px; background: var(--accent); color: #1B1A17; font-size: 11px; font-weight: bold; text-align: center; line-height: 20px; }
.stepline .no.owned { background: var(--ok); }
.carry { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; font-size: 12px; }
.carry input { accent-color: var(--accent); }

/* 素材一覧：スマホは 2 段（名前・数値 / 入手先）、PC は 1 行 */
.matrow { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line);
  grid-template-areas: "n req own miss" "src src src src" "add add add add"; }
.matrow .n { grid-area: n; min-width: 0; }
.matrow .num { width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.matrow .req { grid-area: req; width: auto; white-space: nowrap; }
.matrow .miss { grid-area: miss; }
.matrow .ownbox { grid-area: own; display: flex; align-items: center; gap: 4px; }
.matrow .ownbtn { cursor: pointer; font-variant-numeric: tabular-nums; }
.matrow .plus { width: 30px; padding: 4px 0; text-align: center; }
.matrow .plus.on { border-color: var(--accent); color: var(--accent); }
.matrow .addrow { grid-area: add; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 0 2px; }
.matrow .addinput { width: 64px; padding: 4px 6px; }
.matrow.adding { background: #2A2823; margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 8px; }
.matrow .own { width: 64px; text-align: right; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; color: var(--fg); }
.matrow .src { grid-area: src; font-size: 11px; color: var(--dim); margin-top: -4px; }

#blazor-error-ui { background: #4A2B26; color: var(--fg); bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* マウス操作のとき：ホバーで反応させる */
@media (hover: hover) {
  .btn:not(:disabled):hover { border-color: var(--accent); }
  .btn.primary:not(:disabled):hover { filter: brightness(1.08); }
  .chip:hover { border-color: var(--accent); }
  .node:hover { opacity: 1; filter: brightness(1.12); }
  .nav a:hover { color: var(--fg); }
  .nav a.active:hover { color: var(--accent); }
}

/* タブレット以上：カードを 2 列以上に */
@media (min-width: 700px) {
  .pad { padding: 14px 18px calc(16px + var(--safe-b)); }
  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; align-items: start; }
  .cards > .card { margin-bottom: 0; }
  .chips { flex-wrap: wrap; overflow: visible; }
}

/* PC：左に縦ナビ、中身は幅を抑えて中央に、強化表は右に手順パネル */
@media (min-width: 900px) {
  .shell { grid-template-columns: var(--side-w) 1fr; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "nav top" "nav content"; }
  .topbar { padding-left: 20px; }
  .topbar .sub { display: none; }
  .nav { height: auto; padding: 0; border-top: none; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
  .nav .brand { display: block; padding: 18px 20px 12px; font-size: 20px; font-weight: bold; letter-spacing: .15em; }
  .nav .brand small { display: block; color: var(--dim); font-size: 11px; letter-spacing: 0; margin-top: 2px; }
  .nav .spacer { display: block; flex: 1; }
  .nav a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 20px; font-size: 14px; border-left: 3px solid transparent; }
  .nav a.active { border-left-color: var(--accent); background: #2A2823; }
  .nav a.side-only { display: flex; }
  .nav a .ico { width: 22px; text-align: center; }
  .pad { max-width: 1080px; margin: 0 auto; padding: 18px 24px 24px; }
  .toast { bottom: 24px; }
  .content.nopad { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    grid-template-areas: "chips chips" "tree sheet"; }
  .chips { grid-area: chips; padding: 10px 16px; }
  .tree-area { grid-area: tree; min-height: 0; min-width: 0; }
  .tree-wrap { --s: 1; }
  .sheet { grid-area: sheet; max-height: none; min-height: 0; border-top: none; border-left: 1px solid var(--line); }
  .sheet .head { border-bottom: 1px solid var(--line); }
  .sheet .head .toggle { display: none; }
  .sheet .body { display: block !important; flex: 1; padding-top: 8px; }
  .matrow { grid-template-columns: minmax(160px, 1fr) 2fr auto auto auto; grid-template-areas: "n src req own miss" "add add add add add"; }
  .matrow .src { margin-top: 0; }
}