/* styles/style.css — 完全版（1カラム・大きい完成図・パーツは下） */
:root{
  --tile: 32;           /* 論理ドット数（キャンバス内解像度） */
  --scale: 5;           /* 旧：固定拡大率。今回はCSSで可変にするため未使用でも可 */
  --accent:#e11d48;
  --bg:#0b1020;
  --card:#161b2d;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:linear-gradient(180deg,#0b1020,#0f172a);
  color:#e5e7eb;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
    "BIZ UDPGothic","Hiragino Kaku Gothic ProN",Meiryo,"Noto Sans JP",sans-serif;
  padding:20px;
}

/* 見出し・補助 */
header h1{ margin:0 0 6px; font-size:20px; }
.muted{ color:#94a3b8; font-size:12px; }

/* ---- レイアウト（1カラム＋中央寄せ） ---- */
.wrap{
  display:grid;
  grid-template-columns: 1fr;     /* 1カラム */
  gap:12px;
  max-width:1080px;               /* 最大幅 */
  margin:0 auto;                  /* 中央寄せ */
}

.card{
  background:var(--card);
  border:1px solid #1f2937;
  border-radius:14px;
  padding:14px;
  box-shadow:0 10px 24px rgb(0 0 0 / .25);
}

/* 完成図のカード：中央配置・可変間隔 */
.compose{
  position:relative;
  top:auto;
  height:auto;
  display:grid;
  gap:12px;
  justify-items:center;           /* 中央寄せ */
}

/* 完成図キャンバス */
canvas#stage {
  width: clamp(128px, 20vw, 192px);  /* 最小128px、最大192px */
  height: clamp(128px, 20vw, 192px);
  image-rendering: pixelated;
  background:
    linear-gradient(45deg, #2b2f3f 25%, transparent 25%) 0 0/16px 16px,
    linear-gradient(-45deg, #2b2f3f 25%, transparent 25%) 0 0/16px 16px,
    linear-gradient(45deg, transparent 75%, #2b2f3f 75%) 0 0/16px 16px,
    linear-gradient(-45deg, transparent 75%, #2b2f3f 75%) 0 0/16px 16px,
    #0f172a;
  border-radius: 10px;
  border: 1px solid #374151;
}

/* ボタン */
.actions{ display:flex; gap:8px; margin:8px 0; flex-wrap:wrap; }
button{
  background:#111827;
  border:1px solid #334155;
  color:#e5e7eb;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}
button.primary{ background:var(--accent); border-color:#9f1239; font-weight:700; }

.hint{ font-size:12px; color:#94a3b8; }

/* ---- パーツUI（下段） ---- */
#ui{ display:grid; gap:12px; }

.slot{
  border-top:1px dashed #334155;
  padding-top:12px;
}
.slot:first-child{ border-top:0; }

.slot h2{
  font-size:14px;
  margin:0 0 8px;
  color:#cbd5e1;
}

/* サムネのグリッド：横幅いっぱいにたくさん詰める */
.thumbs{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); /* 収容数アップ */
  gap:8px;
}

/* サムネ枠 */
.thumb{
  display:grid;
  place-items:center;
  padding:6px;                    /* 余白控えめで収まり良く */
  overflow:hidden;                /* はみ出し防止 */
  background:#0b1224;
  border:1px solid #334155;
  border-radius:10px;
  cursor:pointer;
  transition:transform .06s ease;
}
.thumb:active{ transform: translateY(1px); }
.thumb[data-active="true"]{
  outline:2px solid var(--accent);
  box-shadow:0 0 0 4px rgb(225 29 72 / .15);
}

/* サムネ用キャンバス（小さめ） */
.thumb canvas{
  width:64px;
  height:64px;
  image-rendering: pixelated;
  border-radius:6px;
}

/* パレット（色替えボタン列） */
.palettes{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}
.palette{
  border:1px solid #334155;
  border-radius:999px;
  padding:4px 8px;
  display:flex;
  gap:4px;
  align-items:center;
  cursor:pointer;
  background:#0b1224;
}
.palette[data-active="true"]{
  outline:2px solid #22c55e;
  box-shadow:0 0 0 4px rgb(34 197 94 / .15);
}
.sw{
  width:10px; height:10px;
  border-radius:999px;
  border:1px solid #1f2937;
}

/* ---- モバイル調整 ---- */
@media (max-width: 640px){
  canvas#stage{ width: 320px; height: 320px; }
  .thumb canvas{ width:56px; height:56px; }
  .thumbs{ grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
  .actions{ justify-content:center; }
}