/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.turbo-progress-bar {
  visibility: hidden;
}

/* ── Combat animations ─────────────────────────────────────── */
/* These live here (not in application.tailwind.css) because     */
/* Tailwind v4 tree-shakes classes whose names only appear in    */
/* JS or inside ERB <% %> Ruby blocks.                           */

@keyframes flash-damage {
  0%   { box-shadow: 0 0 0 0 rgba(255, 42, 109, 0); }
  25%  { box-shadow: 0 0 20px 4px rgba(255, 42, 109, 0.6); }
  50%  { box-shadow: 0 0 10px 2px rgba(255, 42, 109, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(255, 42, 109, 0); }
}
.flash-damage { animation: flash-damage 0.8s ease-out; }

@keyframes flash-new {
  0%   { background-color: rgba(0, 217, 255, 0); }
  25%  { background-color: rgba(0, 217, 255, 0.15); }
  100% { background-color: rgba(0, 217, 255, 0); }
}
.flash-new { animation: flash-new 0.8s ease-out; }

@keyframes shake-hit {
  0%,  100% { transform: translateX(0); }
  15%       { transform: translateX(-5px); }
  30%       { transform: translateX(5px); }
  45%       { transform: translateX(-4px); }
  60%       { transform: translateX(4px); }
  75%       { transform: translateX(-2px); }
  90%       { transform: translateX(2px); }
}
.shake-hit { animation: shake-hit 0.4s ease-out; }

@keyframes flash-hit-player {
  0%   { background-color: rgba(5, 255, 161, 0);   border-left-color: rgba(5, 255, 161, 0.25); }
  15%  { background-color: rgba(5, 255, 161, 0.15); border-left-color: rgba(5, 255, 161, 0.8); }
  100% { background-color: rgba(5, 255, 161, 0);   border-left-color: rgba(5, 255, 161, 0.25); }
}
.flash-hit-player { animation: flash-hit-player 0.8s ease-out; }

@keyframes flash-hit-enemy {
  0%   { background-color: rgba(255, 42, 109, 0);   border-left-color: rgba(255, 42, 109, 0.25); }
  15%  { background-color: rgba(255, 42, 109, 0.15); border-left-color: rgba(255, 42, 109, 0.8); }
  100% { background-color: rgba(255, 42, 109, 0);   border-left-color: rgba(255, 42, 109, 0.25); }
}
.flash-hit-enemy { animation: flash-hit-enemy 0.8s ease-out; }

@keyframes flash-miss {
  0%   { opacity: 0.3; transform: translateX(0); }
  10%  { opacity: 0.5; transform: translateX(-2px); }
  20%  { opacity: 0.7; transform: translateX(2px); }
  30%  { opacity: 0.4; transform: translateX(-1px); }
  50%  { opacity: 1;   transform: translateX(0); }
  100% { opacity: 1;   transform: translateX(0); }
}
.flash-miss { animation: flash-miss 0.5s ease-out; }

@keyframes flash-crit {
  0%   { background-color: rgba(247, 255, 0, 0);    box-shadow: none; }
  10%  { background-color: rgba(247, 255, 0, 0.25); box-shadow: 0 0 15px 3px rgba(247, 255, 0, 0.4); }
  30%  { background-color: rgba(247, 255, 0, 0.12); box-shadow: 0 0 8px 2px rgba(247, 255, 0, 0.2); }
  100% { background-color: rgba(247, 255, 0, 0);    box-shadow: none; }
}
.flash-crit { animation: flash-crit 1s ease-out; }

@keyframes damage-pop {
  0%   { transform: scale(1);   opacity: 0.5; }
  30%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
.damage-pop { animation: damage-pop 0.4s ease-out; display: inline-block; }

/* ── Driver.js Tutorial Overrides ──────────────────────────── */
/* These live here (not in application.tailwind.css) because     */
/* Tailwind v4 tree-shakes classes it can't find in templates.   */
/* Driver.js creates these elements dynamically at runtime.      */

/* NOTE: Do NOT set background on .driver-overlay — it's an SVG    */
/* with a path cutout for the highlight. A CSS background covers   */
/* the cutout. Use overlayColor in JS config instead (already set). */

.driver-active-element {
  box-shadow:
    0 0 0 2px var(--color-cyber-blue),
    0 0 10px rgba(0, 217, 255, 0.4),
    0 0 20px rgba(0, 217, 255, 0.2) !important;
  border-radius: 0 !important;
}

.driver-popover.nullgrid-popover {
  background: var(--color-cyber-dark) !important;
  border: 2px solid var(--color-cyber-blue) !important;
  border-radius: 0 !important;
  box-shadow:
    inset 0 0 10px rgba(0, 217, 255, 0.15),
    0 0 15px rgba(0, 217, 255, 0.3),
    0 0 30px rgba(0, 217, 255, 0.1) !important;
  color: var(--color-cyber-blue) !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  padding: 1.25rem !important;
  max-width: 340px !important;
}

.driver-popover.nullgrid-popover .driver-popover-title {
  font-family: var(--font-display) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #00f0ff !important;
  text-shadow:
    0 0 7px rgba(0, 240, 255, 0.6),
    0 0 14px rgba(0, 240, 255, 0.3) !important;
  margin-bottom: 0.5rem !important;
}

.driver-popover.nullgrid-popover .driver-popover-description {
  font-family: var(--font-mono) !important;
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
  color: rgba(0, 217, 255, 0.8) !important;
}

.driver-popover.nullgrid-popover .driver-popover-progress-text {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  color: rgba(0, 217, 255, 0.4) !important;
}

.driver-popover.nullgrid-popover .driver-popover-navigation-btns button {
  font-family: var(--font-display) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.4rem 1rem !important;
  border: 2px solid var(--color-cyber-blue) !important;
  background: transparent !important;
  color: var(--color-cyber-blue) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.driver-popover.nullgrid-popover .driver-popover-navigation-btns button:hover {
  background: var(--color-cyber-blue) !important;
  color: var(--color-cyber-black) !important;
}

.driver-popover.nullgrid-popover .driver-popover-prev-btn {
  border-color: var(--color-cyber-pink) !important;
  color: var(--color-cyber-pink) !important;
}

.driver-popover.nullgrid-popover .driver-popover-prev-btn:hover {
  background: var(--color-cyber-pink) !important;
  color: var(--color-cyber-black) !important;
}

.driver-popover.nullgrid-popover .driver-popover-close-btn {
  color: var(--color-cyber-pink) !important;
  font-size: 1.2rem !important;
}

.driver-popover.nullgrid-popover .driver-popover-close-btn:hover {
  color: #ff006e !important;
}

.driver-popover.nullgrid-popover .driver-popover-arrow-side-left {
  border-right-color: var(--color-cyber-blue) !important;
}

.driver-popover.nullgrid-popover .driver-popover-arrow-side-right {
  border-left-color: var(--color-cyber-blue) !important;
}

.driver-popover.nullgrid-popover .driver-popover-arrow-side-top {
  border-bottom-color: var(--color-cyber-blue) !important;
}

.driver-popover.nullgrid-popover .driver-popover-arrow-side-bottom {
  border-top-color: var(--color-cyber-blue) !important;
}