/* Fight Mode Selector Styles */

/* This container is now inside an equipment-column */
.fight-mode-selector {
  display: flex;
  flex-direction: column;
  /* Vertical layout */
  justify-content: center;
  align-items: center;
  gap: 1px;
  /* More spacing between buttons */
  padding: 4px;
  margin-left: 4px;
  /* Space from inventory slots */
  background: none;
  /* remove background to blend with equipment panel */
}

.fight-mode-btn,
.chase-mode-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border: 1px solid #444;
  /* Darker border */
  border-radius: 4px;
  /* Softer corners */
  background-color: #222;
  /* Darker background */
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  color: #888;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fight-mode-btn svg,
.chase-mode-btn svg {
  pointer-events: none;
}

.fight-mode-btn:hover,
.chase-mode-btn:hover {
  border-color: #777;
  background-color: #333;
  color: #fff;
  transform: scale(1.1);
  /* Slight zoom effect */
}

.fight-mode-btn.active,
.chase-mode-btn.active {
  background-color: #333;
  color: #fff;
  z-index: 1;
  /* Bring above */
}

/* Specific styling for active states to make them "glow" */

/* Offensive - Red Glow */
.fight-mode-btn[data-mode="offensive"].active {
  border-color: #ff3333;
  box-shadow: 0 0 8px rgba(255, 51, 51, 0.6);
  color: #ffcccc;
}

/* Balanced - Yellow/Orange Glow */
.fight-mode-btn[data-mode="balanced"].active {
  border-color: #ffaa00;
  box-shadow: 0 0 8px rgba(255, 170, 0, 0.6);
  color: #ffeedd;
}

/* Defensive - Green Glow */
.fight-mode-btn[data-mode="defensive"].active {
  border-color: #33ff33;
  box-shadow: 0 0 8px rgba(51, 255, 51, 0.6);
  color: #ccffcc;
}

/* Stand - Gray/White Glow */
.chase-mode-btn[data-chase="stand"].active {
  border-color: #aaaaaa;
  box-shadow: 0 0 8px rgba(170, 170, 170, 0.6);
  color: #ffffff;
}

/* Safe Chase - Blue Glow */
.chase-mode-btn[data-chase="chase"].active {
  border-color: #3399ff;
  box-shadow: 0 0 8px rgba(51, 153, 255, 0.6);
  color: #cceeff;
}

/* Aggressive Chase - Red Glow (same chase button, toggled via class) */
.chase-mode-btn.active.aggressive {
  border-color: #ff3333;
  box-shadow: 0 0 8px rgba(255, 51, 51, 0.6);
  color: #ffcccc;
}

/* PK Lock icon toggle — show shield when active, skull when not */
/* PK lock icon swap — THREE states (owner 2026-08-13):
     .active   GREEN  full shield    attack nobody outside the party
     .skulled  AMBER  cracked shield attack only players showing a skull
     neither   RED    skull          attack anyone
   Rules are written so exactly one icon shows in every state, including the
   impossible-but-cheap-to-guard case of both classes being present. */
#pk-lock-btn .pk-icon-shield,
#pk-lock-btn .pk-icon-cracked,
#pk-lock-btn .pk-icon-skull,
#pk-lock-btn .pk-icon-peace { display: none; }
#pk-lock-btn.active .pk-icon-shield { display: block; }
#pk-lock-btn.skulled .pk-icon-cracked { display: block; }
#pk-lock-btn.active.skulled .pk-icon-cracked { display: none; }
#pk-lock-btn:not(.active):not(.skulled):not(.peaceful) .pk-icon-skull { display: block; }
/* Peaceful world (non-PvP) — declared last and with .peaceful excluded from
   the red fallback above, so this state can never show a skull. */
#pk-lock-btn.peaceful .pk-icon-shield,
#pk-lock-btn.peaceful .pk-icon-cracked,
#pk-lock-btn.peaceful .pk-icon-skull { display: none; }
#pk-lock-btn.peaceful .pk-icon-peace { display: block; }

/* PK Lock button — desktop: top-RIGHT of game canvas (moved from
   top-left 2026-05-24 to clear space for #debug-statistics, which
   anchors top-left and would otherwise need the explicit z-index
   trick. Right corner has no other anchored overlays on desktop). */
#pk-lock-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1001;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #444;
  border-radius: 4px;
  background-color: rgba(34, 34, 34, 0.7);
  cursor: pointer;
  /* Scoped to the hover/state styling only — NOT `all`: interface.js sets
     top/right from the canvas bounds after boot and on resize, and `all`
     animated those too, making the button visibly slide into place
     (owner 2026-08-28). Position must snap; colors may ease. */
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  color: #888;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pk-lock-btn svg {
  pointer-events: none;
}

#pk-lock-btn:hover {
  border-color: #777;
  background-color: rgba(51, 51, 51, 0.9);
  color: #fff;
}

/* PK Lock ON (safe) — green glow + shield */
#pk-lock-btn.active {
  border-color: #4CAF50;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
  color: #c8e6c9;
  background-color: rgba(51, 51, 51, 0.9);
}

/* PK Lock SKULLED (partial) — amber glow + cracked shield. Amber sits between
   the green and red states so the three read as one scale, not three unrelated
   icons. Declared BEFORE the :not(.active) red block so the red rule cannot
   also match this state. */
#pk-lock-btn.skulled {
  border-color: #FFC107;
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
  color: #ffe9a8;
  background-color: rgba(51, 51, 51, 0.9);
}

/* PK Lock OFF (PVP enabled) — red glow + skull */
#pk-lock-btn:not(.active):not(.skulled):not(.peaceful) {
  border-color: #ff3333;
  box-shadow: 0 0 8px rgba(255, 51, 51, 0.6);
  color: #ffcccc;
  background-color: rgba(51, 51, 51, 0.9);
}

/* Peaceful world (non-PvP) — calm blue, no glow: a resting state, not an
   armed one. The button stays as the familiar visual anchor; tapping it
   explains the world instead of toggling (fight-mode-selector.js). */
#pk-lock-btn.peaceful {
  border-color: #5b87a6;
  box-shadow: none;
  color: #b8d4e8;
  background-color: rgba(51, 51, 51, 0.9);
  cursor: default;
}

/* Separator between fight modes and chase modes */
.mode-separator {
  height: 1px;
  width: 100%;
  background-color: #444;
  margin: 2px 0;
  display: block;
}

/* The "moment recorded" camera icon (RecordedNotice, owner 2026-10-03: a 1-2 second icon you can tap for more; on
   desktop beside the PvP lock, never over it; smaller on a phone). Placed by script (position fixed). */
.rec-btn { position: fixed; z-index: 30000; width: 24px; height: 24px; padding: 0; margin: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; background: rgba(12, 10, 8, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.18); animation: rec-in 0.18s ease-out; -webkit-tap-highlight-color: transparent; }
.rec-btn[hidden], .rec-note[hidden] { display: none; }
.rec-btn .rec-cam { width: 15px; height: 11px; display: block; }
.rec-btn .rec-dot { position: absolute; top: 1px; right: 1px; width: 7px; height: 7px; border-radius: 50%;
  background: #e2453a; box-shadow: 0 0 0 2px rgba(226, 69, 58, 0.25); }
.rec-btn.is-phone { width: 22px; height: 22px; }
.rec-btn.is-phone .rec-cam { width: 13px; height: 9px; }
.rec-btn.is-phone .rec-dot { top: 0; right: 0; width: 6px; height: 6px; }
.rec-note { position: fixed; z-index: 30000; width: 230px; padding: 9px 11px; border-radius: 8px; box-sizing: border-box;
  background: rgba(16, 13, 10, 0.94); border: 1px solid #6b5631; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  font: 12px/1.45 Verdana, sans-serif; color: #ece4d2; text-align: left; }
.rec-note p { margin: 0; }
.rec-note b { color: #e8c46a; }
.rec-note-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.rec-note-row button { font: 11px Verdana, sans-serif; cursor: pointer; border-radius: 4px; padding: 4px 8px; }
.rec-never { background: none; border: none; color: #b8ab92; text-decoration: underline; padding-left: 0 !important; }
.rec-ok { background: #3a2f1e; border: 1px solid #6b5631; color: #ece4d2; min-width: 44px; }
@keyframes rec-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rec-btn { animation: none; } }
/* the "short ready" icon (RecordedNotice.showReady, owner 2026-10-04): a play mark, gold-rimmed; Watch in its note */
.rec-btn.is-ready { border-color: rgba(218, 188, 117, 0.75); background: rgba(40, 30, 12, 0.82); }
.rec-btn.is-ready .rec-cam { width: 13px; height: 13px; }
.rec-btn.is-ready.is-phone .rec-cam { width: 11px; height: 11px; }
.rec-note-row button[hidden] { display: none; }
.rec-watch { background: #b8862d; border-color: #e8c46a; color: #1c140b; font-weight: bold; }
.rec-note .rec-note-sub { margin-top: 6px; font-size: 11px; line-height: 1.35; color: #b8ab92; }
.rec-note .rec-note-sub[hidden] { display: none; }
/* both buttons on one line ("Watch ↗" broke in two at 230 px) */
.rec-note { width: 256px; }
.rec-note-row button { white-space: nowrap; flex: none; }