/* castle_raid.css — Castle Raid mini-game (top-down battle on canvas). */

/* ── Header launcher button ───────────────────────────────────────────── */
#castle-raid-btn {
  background: linear-gradient(135deg, #1e1e28, #323244);
  border: 1.5px solid #7070a0;
  border-radius: 8px;
  color: #d0d0ee;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.2s;
  letter-spacing: 0.02em;
  box-shadow: 0 0 10px 2px rgba(140, 140, 200, 0.3), 0 0 20px 4px rgba(120, 120, 180, 0.15);
}
#castle-raid-btn:hover {
  background: linear-gradient(135deg, #323244, #484860);
  border-color: #9090c0;
  color: #eeeeff;
  box-shadow: 0 0 14px 3px rgba(160, 160, 220, 0.5), 0 0 28px 6px rgba(140, 140, 200, 0.28);
}

/* ── Modal frame (full-screen-ish) ────────────────────────────────────── */
.cr-modal {
  width: 96vw;
  height: 92vh;
  max-width: 1500px;
  background: radial-gradient(ellipse at 50% 50%, #1c1c28 0%, #0c0c14 80%);
  border: 1.5px solid #50506a;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85), 0 0 28px rgba(140, 140, 200, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: fadeInScale 0.22s ease;
  font-family: inherit;
  color: #e0e0f0;
}

.cr-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: linear-gradient(180deg, #252535 0%, #181826 100%);
  border-bottom: 1px solid #44445e;
  flex: 0 0 auto;
}
.cr-title {
  font-size: 26px;
  font-weight: 800;
  color: #c0c0e0;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgba(160, 160, 220, 0.4);
}

/* ── Status row ───────────────────────────────────────────────────────── */
.cr-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 8px 14px;
  background: linear-gradient(180deg, #1a1a28 0%, #101018 100%);
  border-bottom: 1px solid #36364e;
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 700;
}
.cr-stat {
  padding: 4px 12px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(160, 160, 210, 0.18);
}
.cr-stat-player b { color: #80ff90; margin-left: 4px; }
.cr-stat-enemy b  { color: #ff8080; margin-left: 4px; }
.cr-stat-vs {
  font-size: 14px;
  color: #8888aa;
  letter-spacing: 0.08em;
  font-weight: 800;
}

/* ── Arena (canvas host) ──────────────────────────────────────────────── */
.cr-arena {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #0a0a12;
  overflow: hidden;
}
#cr-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Result overlay ───────────────────────────────────────────────────── */
.cr-result {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(8, 8, 16, 0.94);
  border: 2px solid #6666a0;
  border-radius: 12px;
  padding: 20px 28px;
  box-shadow: 0 0 40px rgba(140, 140, 200, 0.25);
  text-align: center;
  z-index: 4;
  animation: fadeInScale 0.3s ease;
}
.cr-result-win  { border-color: #60d080; box-shadow: 0 0 40px rgba(120, 255, 150, 0.35); }
.cr-result-lose { border-color: #d04060; box-shadow: 0 0 40px rgba(255, 100, 100, 0.35); }
.cr-result-msg {
  font-size: 22px;
  font-weight: 800;
  color: #e0e0f8;
  margin-bottom: 14px;
  letter-spacing: 0.03em;
}
.cr-result-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ── Bottom action bar ────────────────────────────────────────────────── */
.cr-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: linear-gradient(180deg, #181826 0%, #252535 100%);
  border-top: 1px solid #44445e;
  flex: 0 0 auto;
}
.cr-start-btn {
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 12px 32px;
  background: linear-gradient(135deg, #484868, #242438);
  color: #e0e0ff;
  border: 2px solid #7070b0;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s, background 0.2s;
  box-shadow: 0 0 16px rgba(140, 140, 220, 0.4), 0 4px 12px rgba(0, 0, 0, 0.5);
}
.cr-start-btn:hover {
  background: linear-gradient(135deg, #606088, #343450);
  box-shadow: 0 0 22px rgba(160, 160, 240, 0.6), 0 4px 14px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}
.cr-start-btn.cr-disabled,
.cr-start-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: linear-gradient(135deg, #282838, #141420);
  box-shadow: none;
  transform: none;
}

.cr-again-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 18px;
  background: linear-gradient(135deg, #252535, #353548);
  color: #d0d0ee;
  border: 1.5px solid #6666a0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.cr-again-btn:hover {
  background: linear-gradient(135deg, #353548, #484860);
  border-color: #9090c0;
}
.cr-again-btn.cr-quit {
  border-color: #604060;
  color: #c0a0c0;
}
.cr-again-btn.cr-quit:hover {
  border-color: #905090;
  color: #e0c0e0;
}