/*
 * ===============================================
 *
 * RAMAA Engine (Real-time Animated Media Application Apparatus)
 * by Gounbeee 2021 - 2026
 *
 * License ： CC BY-NC-SA (Attribution-NonCommercial-ShareAlike)
 *
 * このプロジェクトは、Gounbeeeから作成され、個人的な利用、改変が可能です。
 * 改変時、このライセンス表記を残す義務があり、改変後の作成物が本ソフトと同じライセンスを継承します。
 *
 * ===============================================
 */

/* =============================================================================
   BitmapPad — Drawing Editor（一般的なPaintツール風UI）
   RAMAAの他パネル（Layers / Attributes / Animation Editor）と同じ
   ダークテーマ（rgba(42,37,31,0.95)・#6b6152ボーダー・角丸6px）に統一。
   ============================================================================= */


/* ---- ルートのモーダルパネル ---- */
.bl_bitmapPad {

  display: flex;
  flex-direction: column;
  overflow: hidden;

  background-color: rgba(42, 37, 31, 0.98);
  color: #ece0cf;
  border: 1px solid #6b6152;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);

  font-family: 'nsjp', 'sawa_m', sans-serif;

  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

}

.ly_bitmapPad {

  position: absolute;
  z-index: 50;   /* メニュー(10)・各パネルより上のモーダルとして表示 */
  top: 5%;
  left: 5%;
  right: 5%;
  bottom: 5%;

}


/* ---- タイトルバー ---- */
.bl_bmp_titlebar {

  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: rgba(30, 26, 21, 0.95);
  border-bottom: 1px solid #5a5142;
  border-radius: 8px 8px 0 0;

}

.bl_bmp_title {

  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #f5eee0;

}

.bl_bmp_spacer {

  flex: 1 1 auto;

}


/* ---- 汎用ボタン ---- */
.bl_bmp_btn {

  padding: 5px 12px;
  border: 1px solid #6b6152;
  border-radius: 6px;
  background-color: #3a332b;
  color: #ece0cf;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;

}

.bl_bmp_btn:hover {

  background-color: #4a4238;
  border-color: #8a7f6b;

}

.bl_bmp_btn:active {

  background-color: #2c2721;

}

.bl_bmp_btn_import {

  background-color: #4a3b2a;
  border-color: #6b5638;

}

.bl_bmp_btn_import:hover {

  background-color: #5c4a30;

}

.bl_bmp_btn_ok {

  background-color: #4f7d3a;
  border-color: #6ba04a;
  font-weight: bold;

}

.bl_bmp_btn_ok:hover {

  background-color: #5f9942;

}

.bl_bmp_btn_cancel {

  background-color: #7a3f2c;
  border-color: #a05a3c;

}

.bl_bmp_btn_cancel:hover {

  background-color: #995437;

}


/* ---- ツールバー ---- */
.bl_bmp_toolbar {

  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  padding: 8px 12px;
  background-color: rgba(36, 31, 25, 0.95);
  border-bottom: 1px solid #5a5142;

}

.bl_bmp_group {

  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 10px;
  border-right: 1px solid #4d463b;

}

.bl_bmp_group:last-child {

  border-right: none;

}

.bl_bmp_group_label {

  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #a99e88;

}

.bl_bmp_group_body {

  display: flex;
  align-items: center;
  gap: 4px;

}


/* ---- ツール切替ボタン ---- */
.bl_bmp_tool_btn {

  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #6b6152;
  border-radius: 6px;
  background-color: #3a332b;
  color: #ece0cf;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;

}

.bl_bmp_tool_btn:hover {

  background-color: #4a4238;

}

.bl_bmp_tool_btn.is_active {

  background-color: #d3a34a;
  border-color: #f0c56a;
  color: #201a0c;

}


/* ---- ペンサイズ ---- */
.bl_bmp_step_btn {

  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #6b6152;
  border-radius: 6px;
  background-color: #3a332b;
  color: #ece0cf;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;

}

.bl_bmp_step_btn:hover {

  background-color: #4a4238;

}

.bl_bmp_pen_readout {

  display: inline-block;
  min-width: 22px;
  text-align: center;
  font-size: 13px;
  color: #f5eee0;

}

.bl_bmp_pen_dot {

  display: inline-block;
  border-radius: 50%;
  background-color: #000;
  margin-left: 4px;
  vertical-align: middle;

}


/* ---- カラー ---- */
.bl_bmp_current_color {

  display: inline-block;
  width: 26px;
  height: 26px;
  border: 1px solid #8a7f6b;
  border-radius: 6px;

}

.bl_bmp_color_input {

  width: 32px;
  height: 28px;
  padding: 2px;
  border: 1px solid #6b6152;
  border-radius: 6px;
  background-color: transparent;
  cursor: pointer;

}


/* ---- カラーパレット ---- */
.bl_bmp_palette {

  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 8px 12px;
  background-color: rgba(32, 28, 23, 0.95);
  border-bottom: 1px solid #5a5142;

}

.bl_bmp_palette_cell {

  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid #5a5142;
  border-radius: 3px;
  cursor: pointer;

}

.bl_bmp_palette_cell:hover {

  outline: 2px solid #ffffff;

}

.bl_bmp_palette_cell.is_active {

  outline: 2px solid #ffffff;
  box-shadow: 0 0 0 2px #d3a34a;

}


/* ---- 本体（サイドパネル＋キャンバス） ---- */
.bl_bmp_body {

  display: flex;
  flex: 1 1 auto;
  min-height: 0;

}


/* ---- サイドパネル（Size / Shift） ---- */
.bl_bmp_sidepanel {

  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 132px;
  flex: 0 0 auto;
  padding: 14px 10px;
  background-color: rgba(36, 31, 25, 0.95);
  border-right: 1px solid #5a5142;
  overflow-y: auto;

}

.bl_bmp_ctrl_section {

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 6px;
  border: 1px solid #4d463b;
  border-radius: 8px;

}

.bl_bmp_ctrl_section.is_size {

  border-color: #cf7a3a80;
  background-color: rgba(207, 122, 58, 0.08);

}

.bl_bmp_ctrl_section.is_shift {

  border-color: #b06a8680;
  background-color: rgba(176, 106, 134, 0.10);

}

.bl_bmp_ctrl_label {

  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;

}

.is_size .bl_bmp_ctrl_label {

  color: #f0a06a;

}

.is_shift .bl_bmp_ctrl_label {

  color: #d98aa6;

}

.bl_bmp_ctrl_row {

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

}

.bl_bmp_ctrl_readout {

  display: inline-block;
  min-width: 48px;
  text-align: center;
  font-size: 12px;
  color: #ece0cf;

}

/* 方向ボタン（Size＝赤 / Shift＝紫） */
.bl_bmp_arrow_btn {

  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;

}

.bl_bmp_arrow_btn.is_size {

  background-color: #cf7a3a;
  border-color: #e8975a;

}

.bl_bmp_arrow_btn.is_size:hover {

  background-color: #f0a870;

}

.bl_bmp_arrow_btn.is_shift {

  background-color: #b06a86;
  border-color: #c98aa0;

}

.bl_bmp_arrow_btn.is_shift:hover {

  background-color: #c07d97;

}

/* Shift の十字パッド */
.bl_bmp_dpad {

  display: grid;
  grid-template-columns: repeat(3, 30px);
  grid-template-rows: repeat(3, 30px);
  gap: 4px;
  justify-content: center;

}

.bl_bmp_dpad .dpad_up    { grid-column: 2; grid-row: 1; }
.bl_bmp_dpad .dpad_left  { grid-column: 1; grid-row: 2; }
.bl_bmp_dpad .dpad_right { grid-column: 3; grid-row: 2; }
.bl_bmp_dpad .dpad_down  { grid-column: 2; grid-row: 3; }


/* ---- スクロール可能なキャンバスビューポート ---- */
.bl_bmp_canvas_viewport {

  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 20px;

  /* チェッカーボード風の背景で作業領域を分かりやすく */
  background-color: #2a2620;
  background-image:
    linear-gradient(45deg, #35302a 25%, transparent 25%),
    linear-gradient(-45deg, #35302a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #35302a 75%),
    linear-gradient(-45deg, transparent 75%, #35302a 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;

}

.bl_bmp_canvas {

  flex: 0 0 auto;
  box-shadow: 0 0 0 1px #000, 0 6px 20px rgba(0, 0, 0, 0.5);
  cursor: crosshair;
  image-rendering: auto;
  /* タッチ描画をブラウザのスクロール／ズームに奪われないように */
  touch-action: none;

}


/* ---- 警告オーバーレイ ---- */
.bl_bmp_warn_overlay {

  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.55);
  border-radius: 8px;

}

.bl_bmp_warn_box {

  max-width: 80%;
  padding: 20px 24px;
  background-color: rgba(42, 37, 31, 0.98);
  border: 1px solid #7d7362;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  text-align: center;

}

.bl_bmp_warn_msg {

  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #f5eee0;
  white-space: pre-line;

}

.bl_bmp_warn_btns {

  display: flex;
  justify-content: center;
  gap: 10px;

}

.bl_bmp_warn_ok {

  background-color: #4f7d3a;
  border-color: #6ba04a;

}

.bl_bmp_warn_cancel {

  background-color: #7a3f2c;
  border-color: #a05a3c;

}