/* 共通変数 */
:root {
  --vh-height: calc(var(--vh, 1vh) * 100);
  --canvas-size: 50px;    /* ※ デスクトップ用（スマホでは下記メディアクエリで 40px に上書き） */
  --btn-size: 40px;
}

/* 基本レイアウト */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: var(--vh-height);
  overflow: hidden;
  font-family: "M PLUS 1 Code", serif;
  font-weight: 400;
  user-select: none;
}

#container {
  position: relative;
  width: 100%;
  height: var(--vh-height);
}

/* ===== Canvas ===== */
/* 共通設定 */
#cornerCanvas,
#rowHeaderCanvas,
#columnHeaderCanvas,
#mainCanvas {
  position: absolute;
  border: 1px solid #999;
}

/* 個別設定 */
#cornerCanvas {
  left: 0;
  bottom: 0;
  width: var(--canvas-size);
  height: var(--canvas-size);
  background: #ccc;
}

#rowHeaderCanvas {
  left: 0;
  bottom: var(--canvas-size);
  width: var(--canvas-size);
  height: calc(100% - var(--canvas-size));
  background: rgb(255, 220, 220);
}

#columnHeaderCanvas {
  left: var(--canvas-size);
  bottom: 0;
  width: calc(100% - var(--canvas-size));
  height: var(--canvas-size);
  background: rgb(220, 220, 255);
}

#mainCanvas {
  left: var(--canvas-size);
  bottom: var(--canvas-size);
  width: calc(100% - var(--canvas-size));
  height: calc(100% - var(--canvas-size));
  background: #fff;
  touch-action: none; /* スマホでCanvasを独自操作 */
}

/* ===== ハンバーガー & 設定ボタン ===== */
#hamburgerBtn,
#settingsBtn {
  position: absolute;
  top: 10px;
  width: var(--btn-size);
  height: var(--btn-size);
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  z-index: 9999;
}

#hamburgerBtn img,
#settingsBtn img {
  height: 60%;
}

#hamburgerBtn {
  left: 10px;
}

#settingsBtn {
  right: 10px;
}

#hamburgerBtn:hover,
#settingsBtn:hover {
  background: #555;
}

#nucleonsListContent {
  max-height: 200px;
  overflow-y: auto;
}
/* 核子一覧部分のスクロールバーのデザイン */
#nucleonsListContent {
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;           /* Firefox用 */
  scrollbar-color: #888 #f1f1f1;
}

/* WebKit系ブラウザ用 */
#nucleonsListContent::-webkit-scrollbar {
  width: 8px;
}
#nucleonsListContent::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
#nucleonsListContent::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
#nucleonsListContent::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ===== ツールバー ===== */
#toolbar {
  position: absolute;
  width: auto;
  height: 50px;
  display: inline-flex;
  align-items: center;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #999;
  border-radius: 8px;
  pointer-events: none;
  z-index: 9999;
  color: #fff;
}

#toolbarContent {
  display: flex;
  pointer-events: auto; /* ボタンは操作可能に */
  gap: 6px;
  align-items: center;
  margin-left: 10px;
}

.toolbarDivider {
  width: 1px;
  height: 30px;
  background: #aaa;
  margin: 0 8px;
}

.iconButton {
  width: 40px;
  height: 40px;
  border: none;
  outline: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, filter 0.2s;
  transform-origin: center;
}

#toolbarToggleBtn {
  width: 10px;      /* 他のボタンよりも小さい幅 */
  height: 40px;     
  font-size: 12px;  /* フォントサイズも調整 */
  padding: 4px;     /* 必要に応じて調整 */
  pointer-events: auto;
}

/* iconButton内のimg要素に対して、変形のアニメーションを付与 */
.iconButton img {
  transition: transform 0.05s ease-in-out;
  transform-origin: center;
  /* 中央寄せ用（必要に応じて） */
  display: block;
  width: 80%;
  margin: 0 auto;
}

/* マウスオーバー時およびactive状態で拡大 */
.iconButton:hover img,
.iconButton.active img {
  transform: scale(1.3);
}

.iconButton:hover {
  background: rgba(255, 255, 255, 0.3);
}

.iconButton.active {
  background: rgba(255, 255, 255, 0.4);
  filter: brightness(1.2);
}

.iconButton.withText {
  font-size: 14px;
  color: #fff;
}

/* toolToggle, toolRadio は必要に応じて追加 */

#toolbarDragHandle {
  pointer-events: auto;
  width: 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: grab;
  margin-right: 5px;
  gap: 4px;
}

.handleDot {
  width: 6px;
  height: 6px;
  background: #ccc;
  border-radius: 50%;
}

/* ===== スマホ画面用 ===== */
@media (max-width: 600px) {
  :root {
    --canvas-size: 40px;
  }
  /* Canvas は変数でサイズ指定しているため自動調整 */
  .menuPanel {
    width: 80%;
    right: 10%;
  }
  /* ツールバー全体を縦方向に配置 */
  #toolbar {
    flex-direction: column;
    width: 60px;
    height: auto;
    top: 50%;
    right: 10px;
    left: auto;
    transform: translateY(-50%);
    padding: 10px 0;
  }
  #toolbarContent {
    flex-direction: column;
    align-items: center;
    margin-left: 0;
    gap: 10px;
  }
  .toolbarDivider {
    width: 30px;
    height: 1px;
    margin: 10px 0;
  }
  #toolbarDragHandle {
    width: 100%;
    height: auto;
    flex-direction: row;
    margin: 10px 0;
    gap: 4px;
  }
  #toolbarToggleBtn {
    width: 40px;     
    height: 10px;     
    font-size: 12px;  /* フォントサイズも調整 */
    padding: 4px;     /* 必要に応じて調整 */
    pointer-events: auto;
  }
  .iconButton {
    width: 40px;
    height: 40px;
  }
}

/* ===== メニューの共通スタイル (やや濃い) ===== */
.menuPanel {
  position: absolute;
  top: 60px;
  background: rgba(50, 50, 50, 0.8);
  color: #fff;
  border: 1px solid #999;
  border-radius: 6px;
  width: 200px;
  padding: 8px;
  z-index: 9999;
  display: none;
}

.menuPanel.show {
  display: block;
}

.menuPanel button {
  width: 60px;
  height: 40px;
  border: none;
  outline: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  margin-right: 6px;
  margin-bottom: 6px;
}

.menuPanel button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.menuPanel button.active {
  background: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* ===== コピーライト ===== */
#copytight {
  position: absolute;
  right: 10px;
  bottom: 60px;
  font-size: 12px;
  color: #a8a8a8;
  z-index: 9999;
  text-align: right;
  line-height: 1.2em;
}

/* ===== ナビゲーター ===== */
#navigatorContainer {
  position: absolute;
  right: 10px;
  top: 70px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #ccc;
  opacity: 0.5;
}

#navigatorCanvas {
  width: 100%;
  height: 100%;
  /* setCanvasSize() で内部サイズを調整 */
}

/* ===== INFOディスプレイ ===== */
#infoDisplay {
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  pointer-events: none;
  z-index: 10000;
  display: none;
  /* 初期値は設定せず、JavaScriptで left/top を設定する */
}