/* ===== ラッパー ===== */
#gbe-wrap { font-family: 'Segoe UI', sans-serif; color: #eee; }
#gbe-layout { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }

/* ===== 本体 ===== */
#gbe-shell {
  background: #2d2d5e; border-radius: 20px;
  padding: 22px; box-shadow: 0 8px 32px rgba(0,0,0,.6);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 540px;
}
#gbe-screen-frame {
  background: #111; border-radius: 12px;
  padding: 12px; border: 3px solid #444;
}
#gbe-canvas {
  display: block; image-rendering: pixelated; image-rendering: crisp-edges;
  background: #8bac0f;
}
#gbe-status-bar {
  display: flex; width: 100%; justify-content: space-between;
  font-size: .85rem; color: #aaa; padding: 0 4px;
}
#gbe-rom-name { color: #7ec8e3; font-weight: bold; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gbe-fps      { color: #7ec8e3; }

/* ===== ドロップゾーン ===== */
#gbe-drop-zone {
  display: block; width: 100%; border: 2px dashed #556;
  border-radius: 10px; padding: 14px; text-align: center;
  cursor: pointer; transition: all .2s; color: #889;
  font-size: .88rem; line-height: 1.7;
}
#gbe-drop-zone:hover, #gbe-drop-zone.gbe-drag {
  border-color: #7ec8e3; background: rgba(126,200,227,.08); color: #7ec8e3;
}
#gbe-drop-zone span { font-size: 1.4rem; display: block; }

/* ===== ステータス・エラー ===== */
#gbe-loading-msg { color: #7ec8e3; font-size: .82rem; }
#gbe-error-box   { color: #ff6b6b; font-size: .8rem;  min-height: 1.1em; }

/* ===== コントロール ===== */
#gbe-controls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
#gbe-wrap button {
  background: #3a3a6e; color: #ddd; border: 1px solid #556;
  border-radius: 8px; padding: 8px 14px; cursor: pointer;
  font-size: .82rem; transition: background .15s;
}
#gbe-wrap button:hover { background: #4a4a8e; color: #fff; }
#gbe-wrap button:disabled { opacity: .4; cursor: default; }
#gbe-wrap button:disabled:hover { background: #3a3a6e; }

/* ===== 速度 ===== */
#gbe-speed-row { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: #aaa; }
#gbe-speed     { width: 120px; accent-color: #7ec8e3; }

/* ===== パッド ===== */
#gbe-pad { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 0 4px; user-select: none; }
.gbe-dpad { display: grid; grid-template-columns: repeat(3,38px); grid-template-rows: repeat(3,38px); gap: 3px; }
.gbe-dpad button { width: 38px; height: 38px; padding: 0; font-size: 1rem; border-radius: 6px; background: #252550; }
.gbe-center { background: #1a1a3e !important; cursor: default !important; pointer-events: none; }
.gbe-ab { display: flex; gap: 14px; align-items: center; }
.gbe-a, .gbe-b { width: 50px !important; height: 50px !important; border-radius: 50% !important; font-weight: bold; font-size: 1.1rem !important; }
.gbe-a { background: #8B2252 !important; color: #fff; }
.gbe-b { background: #1a6b3a !important; color: #fff; }
.gbe-sys { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.gbe-btn-select, .gbe-btn-start { padding: 7px 11px !important; font-size: .7rem !important; border-radius: 12px !important; }

#gbe-key-hint { font-size: .7rem; color: #555; text-align: center; line-height: 1.6; }

/* ===== セーブパネル ===== */
#gbe-save-panel {
  background: #2d2d5e; border-radius: 16px;
  padding: 18px; box-shadow: 0 8px 32px rgba(0,0,0,.5);
  width: 230px; display: flex; flex-direction: column; gap: 8px;
}
#gbe-save-panel h2 { font-size: 1rem; color: #a0cfff; text-align: center; border-bottom: 1px solid #445; padding-bottom: 8px; margin: 0 0 4px; }
.gbe-slot-card {
  background: #1e1e42; border: 1px solid #445;
  border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; transition: border-color .2s;
}
.gbe-slot-card:hover { border-color: #7ec8e3; }
.gbe-slot-has { border-color: #4a7a5a !important; }
.gbe-slot-header { display: flex; justify-content: space-between; align-items: center; }
.gbe-slot-num  { font-weight: bold; font-size: .9rem; color: #a0cfff; }
.gbe-slot-sc   { font-size: .68rem; color: #556; background: #252540; padding: 2px 6px; border-radius: 4px; }
.gbe-slot-info { font-size: .72rem; color: #778; min-height: 1.1em; line-height: 1.4; }
.gbe-slot-used { color: #9cb !important; }
.gbe-slot-btns { display: flex; gap: 6px; }
.gbe-slot-btns button { flex: 1; padding: 5px 0 !important; font-size: .75rem !important; border-radius: 6px !important; }
.gbe-sbtn-save { background: #3a5a3e !important; }
.gbe-sbtn-save:hover { background: #4a7a4e !important; }
#gbe-save-hint { font-size: .68rem; color: #445; text-align: center; line-height: 1.5; }

/* ===== トースト ===== */
#gbe-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: rgba(30,30,70,.95); color: #7ec8e3;
  border: 1px solid #7ec8e3; border-radius: 10px;
  padding: 10px 24px; font-size: .9rem;
  pointer-events: none; opacity: 0;
  transition: opacity .3s, transform .3s; z-index: 99999;
  white-space: nowrap;
}
#gbe-toast.gbe-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }