@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:ital,wght@0,400;0,700;0,900;1,700;1,900&family=Permanent+Marker&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  --p5-red: #e60012;
  --p5-red-glow: rgba(230, 0, 18, 0.4);
  --p5-dark-red: #9e000c;
  --p5-black: #0b0b0f;
  --p5-card-bg: #14141c;
  --p5-card-hover: #1c1c28;
  --p5-white: #ffffff;
  --p5-yellow: #ffe600;
  --p5-yellow-dark: #ccb800;
  --p5-gray: #8d8d9f;
  --p5-border: #2c2c3d;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  min-height: 100vh;
  background-color: var(--p5-black);
  color: var(--p5-white);
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
  position: relative;
  user-select: none;
}

/* Background Canvas */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

.main-container {
  position: relative;
  z-index: 10;
  max-width: 1050px;
  margin: 0 auto;
  padding: 20px 16px 80px 16px;
}

/* Typography styles */
.font-p5-header {
  font-family: 'Bebas Neue', 'Permanent Marker', sans-serif;
  letter-spacing: 2px;
}

.font-ransom {
  font-family: 'Permanent Marker', 'Bebas Neue', cursive;
}

.font-tech {
  font-family: 'Space Grotesk', sans-serif;
}

/* Persona 5 Angular Plates */
.p5-plate-red {
  background: var(--p5-red);
  color: var(--p5-white);
  transform: rotate(-1.5deg) skew(-4deg);
  box-shadow: 6px 6px 0px #000, 8px 8px 0px var(--p5-red-glow);
  clip-path: polygon(0% 0%, 100% 2%, 98% 100%, 2% 98%);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.p5-plate-black {
  background: var(--p5-card-bg);
  border: 3px solid var(--p5-border);
  color: var(--p5-white);
  box-shadow: 6px 6px 0px #000;
  clip-path: polygon(0.5% 0%, 99.5% 0.5%, 100% 99.5%, 0% 99%);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.p5-plate-black:hover {
  border-color: var(--p5-red);
  box-shadow: 8px 8px 0px #000, 10px 10px 0px var(--p5-red-glow);
}

.p5-badge-yellow {
  background: var(--p5-yellow);
  color: #000;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  padding: 2px 10px;
  transform: rotate(-2deg) skew(-5deg);
  box-shadow: 3px 3px 0px #000;
  display: inline-block;
  font-weight: bold;
}

.p5-badge-white {
  background: var(--p5-white);
  color: #000;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  padding: 2px 8px;
  transform: rotate(2deg) skew(4deg);
  box-shadow: 3px 3px 0px #000;
  display: inline-block;
  font-weight: 900;
}

.p5-badge-red {
  background: var(--p5-red);
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  padding: 2px 8px;
  transform: rotate(-2deg) skew(-4deg);
  box-shadow: 3px 3px 0px #000;
  display: inline-block;
  font-weight: bold;
}

/* Header Banner */
.p5-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 14px;
}

.p5-logo-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.p5-logo-badge {
  background: var(--p5-red);
  color: #fff;
  font-family: 'Permanent Marker', cursive;
  font-size: 2.2rem;
  padding: 4px 18px;
  transform: rotate(-3deg) skew(-8deg);
  box-shadow: 5px 5px 0px #000, 8px 8px 0px var(--p5-yellow);
  text-shadow: 2px 2px 0px #000;
  flex-shrink: 0;
}

.p5-date-tracker {
  background: #111;
  border-left: 5px solid var(--p5-yellow);
  padding: 6px 14px;
  transform: skew(-6deg);
  box-shadow: 4px 4px 0px #000;
}

/* Sound Switch */
.p5-sound-toggle {
  background: #1a1a24;
  border: 2px solid #333;
  color: #fff;
  padding: 8px 16px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 1px;
  cursor: pointer;
  transform: skew(-6deg);
  box-shadow: 4px 4px 0px #000;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
  min-height: 44px;
}

.p5-sound-toggle:hover, .p5-sound-toggle:active {
  background: var(--p5-red);
  border-color: #fff;
  color: #fff;
  transform: skew(-6deg) scale(1.05);
}

.p5-sound-toggle.active {
  border-color: var(--p5-yellow);
  color: var(--p5-yellow);
}

/* Calling Card Dropzone */
.dropzone-container {
  background: repeating-linear-gradient(
    45deg,
    #13131b,
    #13131b 15px,
    #181822 15px,
    #181822 30px
  );
  border: 4px dashed #404058;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 8px 8px 0px #000;
  transform: rotate(-0.5deg) skew(-2deg);
}

.dropzone-container:hover, .dropzone-container.drag-over, .dropzone-container:active {
  border-color: var(--p5-red);
  background: repeating-linear-gradient(
    45deg,
    #1f1418,
    #1f1418 15px,
    #2a141b 15px,
    #2a141b 30px
  );
  transform: rotate(-0.5deg) skew(-2deg) scale(1.01);
  box-shadow: 10px 10px 0px #000, 14px 14px 0px var(--p5-red-glow);
}

.dropzone-container::before {
  content: "★ PHANTOM CALLING CARD ★";
  position: absolute;
  top: 10px;
  right: -35px;
  background: var(--p5-red);
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.85rem;
  padding: 2px 40px;
  transform: rotate(35deg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  letter-spacing: 1px;
}

/* File Conversion Card in Queue */
.file-card-box {
  background: #14141d;
  border: 3px solid var(--p5-red);
  box-shadow: 6px 6px 0px #000, 9px 9px 0px var(--p5-red-glow);
  padding: 20px;
  margin-bottom: 16px;
  transform: rotate(-0.5deg) skew(-2deg);
  transition: all 0.2s ease;
}

.file-card-box:hover {
  transform: rotate(-0.5deg) skew(-2deg) scale(1.01);
  box-shadow: 8px 8px 0px #000, 12px 12px 0px var(--p5-yellow);
}

/* Target Selector Dropdown / Box */
.target-select-control {
  background: #09090d;
  border: 3px solid var(--p5-yellow);
  color: #ffffff;
  padding: 12px 16px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.35rem;
  letter-spacing: 1px;
  transform: skew(-4deg);
  box-shadow: 4px 4px 0px #000;
  cursor: pointer;
  outline: none;
  font-weight: bold;
  transition: all 0.15s ease;
  width: 100%;
  min-height: 48px;
}

.target-select-control:focus, .target-select-control:hover, .target-select-control:active {
  border-color: #ffffff;
  background: #12121c;
  color: var(--p5-yellow);
}

.target-select-control option {
  background: #14141c;
  color: #ffffff;
  padding: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
}

/* Quick Format Target Buttons */
.quick-target-chip {
  background: #1f1f2e;
  border: 2px solid #3c3c52;
  color: #fff;
  padding: 8px 14px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  cursor: pointer;
  transform: skew(-4deg);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
}

.quick-target-chip:hover, .quick-target-chip:active {
  background: #2c2c40;
  border-color: var(--p5-yellow);
  color: var(--p5-yellow);
}

.quick-target-chip.active {
  background: var(--p5-red);
  border-color: #fff;
  color: #fff;
  box-shadow: 4px 4px 0px #000, 6px 6px 0px var(--p5-yellow);
  transform: skew(-4deg) translateY(-2px) scale(1.05);
}

/* Action Convert Button */
.btn-execute {
  background: linear-gradient(135deg, #e60012 0%, #b3000e 100%);
  border: 3px solid #ffffff;
  color: #ffffff;
  font-family: 'Permanent Marker', 'Bebas Neue', sans-serif;
  font-size: 2rem;
  letter-spacing: 2px;
  padding: 16px 28px;
  cursor: pointer;
  transform: rotate(-1deg) skew(-5deg);
  box-shadow: 8px 8px 0px #000, 12px 12px 0px var(--p5-yellow);
  text-shadow: 3px 3px 0px #000;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
}

.btn-execute:hover:not(:disabled), .btn-execute:active:not(:disabled) {
  background: linear-gradient(135deg, #ff1a2d 0%, #d60012 100%);
  transform: rotate(-1deg) skew(-5deg) scale(1.02);
  box-shadow: 10px 10px 0px #000, 15px 15px 0px var(--p5-yellow);
}

.btn-execute:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.8);
}

/* Pulsing Heartbeat Effect */
@keyframes heartPulse {
  0% { transform: scale(1); }
  14% { transform: scale(1.08); }
  28% { transform: scale(1); }
  42% { transform: scale(1.05); }
  70% { transform: scale(1); }
}

.pulse-heart {
  display: inline-block;
  animation: heartPulse 1.8s infinite ease-in-out;
}

/* ==================== ALL-OUT ATTACK FINISHER MODAL ==================== */
.all-out-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(11, 11, 15, 0.96);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(8px);
  animation: modalFadeIn 0.3s ease-out;
  padding: 16px;
  overflow-y: auto;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.all-out-container {
  position: relative;
  width: 100%;
  max-width: 850px;
  background: #0d0d12;
  border: 4px solid var(--p5-red);
  box-shadow: 12px 12px 0px #000, 16px 16px 0px var(--p5-yellow);
  transform: rotate(-0.8deg) skew(-1.5deg);
  overflow: hidden;
  padding: 32px 24px;
}

.slash-slice-top {
  position: absolute;
  top: -50px;
  left: -50px;
  width: 200%;
  height: 90px;
  background: var(--p5-red);
  transform: rotate(-8deg);
  z-index: 1;
  box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

.all-out-header-title {
  font-family: 'Permanent Marker', cursive;
  font-size: 2.6rem;
  color: var(--p5-yellow);
  text-shadow: 3px 3px 0px #000;
  line-height: 1.1;
  transform: rotate(-1.5deg);
  margin-bottom: 8px;
}

.all-out-sub {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 2px;
  color: #fff;
  background: #000;
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 20px;
  transform: skew(-6deg);
}

.btn-zip-download {
  background: var(--p5-yellow);
  border: 3px solid #000;
  color: #000;
  font-family: 'Permanent Marker', sans-serif;
  font-size: 1.4rem;
  padding: 12px 24px;
  cursor: pointer;
  transform: skew(-6deg);
  box-shadow: 6px 6px 0px #000;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  min-height: 48px;
}

.btn-zip-download:hover, .btn-zip-download:active {
  background: #fff;
  transform: skew(-6deg) scale(1.04);
  box-shadow: 8px 8px 0px #000;
}

.btn-one-more {
  background: var(--p5-red);
  border: 3px solid #fff;
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 2px;
  padding: 12px 20px;
  cursor: pointer;
  transform: skew(-6deg);
  box-shadow: 6px 6px 0px #000;
  transition: all 0.15s ease;
  min-height: 48px;
}

.btn-one-more:hover, .btn-one-more:active {
  background: #ff1f35;
  transform: skew(-6deg) scale(1.04);
}

/* =========================================================================
   MOBILE RESPONSIVE ENHANCEMENTS (SMARTPHONES & TABLETS)
   ========================================================================= */
@media (max-width: 768px) {
  .main-container {
    padding: 16px 12px 60px 12px;
  }

  .p5-logo-badge {
    font-size: 1.8rem;
    padding: 2px 12px;
  }

  .p5-header-bar {
    margin-bottom: 18px;
  }

  .font-ransom {
    font-size: 1.8rem !important;
  }

  .dropzone-container {
    padding: 30px 16px;
    transform: none;
  }

  .dropzone-container:hover, .dropzone-container:active {
    transform: none;
  }

  .dropzone-container::before {
    font-size: 0.75rem;
    padding: 2px 25px;
    right: -25px;
  }

  .file-card-box {
    padding: 16px 12px;
    transform: none;
  }

  .file-card-box:hover {
    transform: none;
  }

  .target-select-control {
    font-size: 1.15rem;
    padding: 10px 12px;
    transform: none;
  }

  .btn-execute {
    font-size: 1.6rem;
    padding: 14px 20px;
    transform: none;
  }

  .all-out-container {
    padding: 24px 16px;
    transform: none;
  }

  .all-out-header-title {
    font-size: 2.1rem;
    transform: none;
  }

  .all-out-sub {
    font-size: 1.1rem;
    transform: none;
  }

  .btn-zip-download, .btn-one-more {
    font-size: 1.2rem;
    width: 100%;
    justify-content: center;
    transform: none;
  }
}

@media (max-width: 480px) {
  .p5-header-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .p5-date-tracker {
    width: 100%;
    transform: none;
  }

  .p5-sound-toggle {
    width: 100%;
    justify-content: center;
    transform: none;
  }
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0e0e14;
}
::-webkit-scrollbar-thumb {
  background: var(--p5-red);
  border-radius: 2px;
}