/* ===== ロボットめいれいゲーム 見た目 ===== */

.rg-level-bar {
  margin: 16px 0 8px;
}

.rg-level-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.rg-tab {
  border: none;
  background: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow);
  color: var(--text);
}

.rg-tab.active {
  background: var(--primary);
  color: #fff;
  font-weight: bold;
}

.rg-goal {
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.7;
  background: #fff;
  border-radius: 14px;
  padding: 12px 16px;
  margin: 10px auto;
  max-width: 640px;
  box-shadow: var(--shadow);
}

.rg-goal-title {
  font-weight: bold;
  font-size: 1.3rem;
  color: var(--primary-dark);
}

/* あつめた もの の スロット */
.rg-collect {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
  min-height: 54px;
}

.rg-slot {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: #eee;
  border: 3px dashed #bbb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #aaa;
}

.rg-slot.filled {
  background: #fff3b0;
  border: 3px solid #ffc300;
  color: var(--text);
  animation: pop 0.3s;
}

@keyframes pop {
  0% { transform: scale(0.3); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* メイン2カラム */
.rg-main {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* 盤面 */
.rg-board-wrap {
  background: #fff;
  padding: 14px;
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.rg-board {
  display: grid;
  gap: 4px;
}

.rg-cell {
  width: 72px;
  height: 72px;
  background: #e8f5e9;
  border-radius: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rg-cell.wall {
  background: #d7ccc8;
  font-size: 2.2rem;
}

.rg-item {
  font-size: 1.6rem;
  font-weight: bold;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.rg-item.moji {
  background: #ffe0e6;
  border: 3px solid var(--kokugo);
  color: #c0392b;
}

.rg-item.kazu {
  background: #dbeeff;
  border: 3px solid var(--sansu);
  color: #1a5fb4;
}

.rg-item.decoy {
  opacity: 0.9;
}

.rg-item.small {
  font-size: 0.88rem;
  letter-spacing: -0.02em;
}

.rg-item.rika {
  background: #e8f8ef;
  border: 3px solid var(--rika);
  color: #1e7a45;
}

.rg-item.eigo {
  background: #f3e8fd;
  border: 3px solid var(--eigo);
  color: #6c3483;
}

.rg-item.coin {
  background: #fff8dc;
  border: 3px solid #d4a017;
  color: #8a6d00;
}

.rg-robot {
  position: absolute;
  font-size: 2.6rem;
  z-index: 2;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3));
  transition: transform 0.2s;
}

/* 右パネル */
.rg-panel {
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
  width: 320px;
  max-width: 100%;
}

.rg-panel-title {
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--primary-dark);
}

.rg-cmd-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.rg-cmd {
  font-family: inherit;
  font-size: 1.5rem;
  padding: 12px 6px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.1s;
}

.rg-cmd:active {
  transform: translateY(3px);
  box-shadow: none;
}

.rg-cmd span {
  display: block;
  font-size: 0.9rem;
}

.rg-cmd.up { background: #ff6b81; }
.rg-cmd.down { background: #54a0ff; }
.rg-cmd.left { background: #2ecc71; }
.rg-cmd.right { background: #f39c12; }

/* ならべた命令 */
.rg-program {
  min-height: 90px;
  background: #f4f1ea;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
  margin-bottom: 12px;
}

.rg-program-empty {
  color: #999;
  font-size: 0.9rem;
}

.rg-chip {
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 1.05rem;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.rg-chip.up { border-left: 6px solid #ff6b81; }
.rg-chip.down { border-left: 6px solid #54a0ff; }
.rg-chip.left { border-left: 6px solid #2ecc71; }
.rg-chip.right { border-left: 6px solid #f39c12; }

.rg-chip.current {
  background: #fff3b0;
  transform: scale(1.1);
}

.rg-chip.deletable {
  cursor: pointer;
}

.rg-chip.deletable:hover {
  background: #ffe0e0;
  text-decoration: line-through;
}

.rg-slots {
  font-size: 0.85rem;
  color: #e67329;
  font-weight: normal;
}

.rg-hint {
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 10px;
  min-height: 1.2em;
}

/* ボタン */
.rg-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.rg-btn {
  font-family: inherit;
  font-size: 1rem;
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}

.rg-btn:active {
  transform: translateY(3px);
  box-shadow: none;
}

.rg-undo { background: #ffd166; flex: 1; }
.rg-clear { background: #ef9a9a; flex: 1; }

.rg-run {
  width: 100%;
  font-size: 1.4rem;
  padding: 14px;
  background: linear-gradient(135deg, #4ecdc4, #3aada5);
  color: #fff;
}

/* 結果オーバーレイ */
.rg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.rg-overlay[hidden] {
  display: none;
}

.rg-overlay-card {
  background: #fff;
  border-radius: 24px;
  padding: 30px 40px;
  text-align: center;
  max-width: 90vw;
  animation: pop 0.35s;
}

.rg-overlay-emoji {
  font-size: 4rem;
}

.rg-overlay-msg {
  font-size: 1.3rem;
  line-height: 1.8;
  margin: 12px 0 20px;
}

.rg-word {
  font-size: 2rem;
  font-weight: bold;
  color: var(--primary-dark);
  letter-spacing: 0.2em;
}

.rg-overlay-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.rg-retry { background: #ffd166; font-size: 1.1rem; }
.rg-next {
  background: linear-gradient(135deg, #ff8c42, #e67329);
  color: #fff;
  font-size: 1.1rem;
}

/* スマホ・タブレット縦 */
@media (max-width: 760px) {
  .rg-cell { width: 56px; height: 56px; }
  .rg-item { width: 42px; height: 42px; font-size: 1.3rem; }
  .rg-robot { font-size: 2rem; }
  .rg-panel { width: 100%; }
}