/* レイアウト関連のスタイル */

body {
  margin: var(--gap);
  background: #f2f2f2;
  overflow-x: auto;
  color: #333;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.title {
  text-align: center;
  font-size: var(--title-font-size);
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 30px;
  color: #111;
}

#mainContainer {
  overflow-x: auto;
  width: 100%;
  box-sizing: border-box;
  min-width: var(--min-display-width);
  margin-top: 0;
}

/* main-content: custom-layout と side-slot を横並びに */
.main-content {
  margin: 0 auto;
  display: flex;
  gap: var(--gap);
  align-items: stretch;
  justify-content: center;
}

.custom-layout {
  width: var(--slot-width) * 6.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
}

/* 最上段: 2個（中央の3番目と5番目の上） */
.row-top {
  display: grid;
  grid-template-columns: repeat(6, var(--slot-width));
  gap: var(--gap);
  margin-bottom: 0;
  justify-items: start;
}

.row-top .custom-slot:nth-child(1) {
  grid-column: 3;
}

.row-top .custom-slot:nth-child(2) {
  grid-column: 5;
}

/* 中央段: 6個 */
.row-middle {
  display: grid;
  grid-template-columns: repeat(6, var(--slot-width));
  justify-content: start;
  gap: var(--gap);
  margin-bottom: 0;
}

/* 最下段: 6個 */
.row-bottom {
  display: grid;
  grid-template-columns: repeat(6, var(--slot-width));
  gap: var(--gap);
  margin-bottom: 0;
  justify-items: start;
}

/* 横長長方形 */
.center-row {
  display: flex;
  justify-content: center;
  margin: var(--gap) 0 var(--gap) 0;
  position: relative;
}

.center-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.side-slots-container {
  display: flex;
  flex-direction: row;
  gap: var(--gap);
}

.side-slot-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 初回の盤面フィット（main.js の fitFieldToViewport）までは盤面を見せない。既定の大きさで描いてから
   縮めると盤面全体が跳ねるため（2026-10-16 表示のズレ対策）。場所は取るので周囲は動かない。
   main.js が読めなかった場合でも10秒後には CSS だけで表示に戻す（低速端末では初期化に約4秒かかるため、
   短いと保険が先に効いて既定の大きさで見えてから縮む。2026-10-16 CPU4倍遅延で実測） */
.sol-field-area.sol-fitting { visibility: hidden; animation: sol-fit-reveal 0s 10s forwards; }
@keyframes sol-fit-reveal { to { visibility: visible; } }