/* Arcade Paradise Stable 1.0 - Patch Notes Cleanup Phase 2: visual support is injected by app.js to avoid CSS conflicts. */

/* ============================================================
   Arcade Paradise Stable Release 1.0
   Card / Compare / Deck Cleanup Phase 1
   Safe CSS-only polish for card details, compare, and deck panels.
   ============================================================ */

html.ap-modal-open,
body.ap-modal-open,
html.ap-stable-modal-open,
body.ap-stable-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

#cardModal,
#vsModal,
#imageLightbox {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

#cardModal .modal-content,
#cardModal .cr-modal-content,
#vsModal .modal-content,
#vsModal .modal-content-vs {
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

#cardModal .close-btn,
#vsModal .close-btn,
#imageLightbox .close-btn {
  z-index: 99999 !important;
}

#cardModal .stat-grid,
#vsModal .stat-grid {
  align-items: stretch !important;
}

#cardModal .stat-box,
#vsModal .stat-box,
#vsModal .stable10-extra-stat-box,
#vsModal .stable10-editable-stat-row {
  min-width: 0 !important;
  word-break: break-word !important;
}

#vsModal .stable10-compare-row,
#vsModal .vs-cards-row,
#vsModal .compare-cards-row {
  max-width: 100% !important;
}

#deckBuilderPanel {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

#deckBuilderPanel.open {
  max-height: min(55vh, 520px) !important;
  overflow-y: auto !important;
  z-index: 4500 !important;
}

#deckBuilderPanel .deck-slot,
#deckBuilderPanel .deck-card,
#deckBuilderPanel img {
  -webkit-user-drag: none !important;
  user-select: none !important;
}

@media (max-width: 768px) {
  #cardModal .modal-content,
  #cardModal .cr-modal-content,
  #vsModal .modal-content,
  #vsModal .modal-content-vs {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 8px auto !important;
    box-sizing: border-box !important;
  }

  #cardModal .cr-header,
  #cardModal .cr-badges-row {
    max-width: 100% !important;
  }

  #cardModal .stat-grid,
  #vsModal .stat-grid {
    grid-template-columns: 1fr !important;
  }

  #vsModal .stable10-compare-row,
  #vsModal .vs-cards-row,
  #vsModal .compare-cards-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  #vsModal .stable10-compare-card,
  #vsModal .vs-card,
  #vsModal .compare-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #deckBuilderPanel.open {
    max-height: 50dvh !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ====================================================================
   Stable 1.0 - Social / Community / Esports / Leaderboard Cleanup Phase 1
   ==================================================================== */
body.ap-modal-open {
  overflow: hidden !important;
  touch-action: none;
}

.ap-scel-modal {
  overscroll-behavior: contain;
}

.ap-scel-modal .ap-scel-content,
#socialModal .modal-content,
#communityModal .modal-content,
#esportsModal .modal-content,
#socialLinksModal .modal-content,
#leaderboardModal .modal-content {
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#communityFeedContainer,
#esportsFeed,
#socialLinksFeed,
#leaderboardFeed {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#socialModal .close-btn,
#communityModal .close-btn,
#esportsModal .close-btn,
#socialLinksModal .close-btn,
#leaderboardModal .close-btn {
  width: 38px !important;
  height: 38px !important;
  line-height: 32px !important;
  font-size: 22px !important;
  z-index: 999999 !important;
}

@media (max-width: 700px) {
  #socialModal .modal-content,
  #communityModal .modal-content,
  #esportsModal .modal-content,
  #socialLinksModal .modal-content,
  #leaderboardModal .modal-content {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
    max-height: calc(100dvh - 24px) !important;
    box-sizing: border-box;
  }

  #communityFeedContainer,
  #esportsFeed,
  #socialLinksFeed,
  #leaderboardFeed {
    max-height: 62dvh !important;
  }
}


/* ============================================================
   APWarArena Organization Layer - Stable Release 1.0
   Small safe support styles only. Main War/Arena layout remains unchanged.
   ============================================================ */
#warModalContainer,
#arenaClashModal,
#arenaClashContainer {
  overscroll-behavior: contain;
}
#warModalContainer .modal-content,
#arenaClashModal .modal-content,
#arenaClashContainer .modal-content {
  -webkit-overflow-scrolling: touch;
}


/* Stable 1.0 Social / Community Internal Organization Phase 1 */
#socialModal, #communityModal, #esportsModal, #socialLinksModal, #leaderboardModal { overscroll-behavior: contain; }
#socialModal .modal-content, #communityModal .modal-content, #esportsModal .modal-content, #socialLinksModal .modal-content, #leaderboardModal .modal-content { max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }


/* ============================================================
   Arcade Paradise Stable 1.0 - Phase 12 extracted visual CSS
   These styles used to be injected from app.js. Moving them here
   keeps JavaScript lighter and reduces startup/modal flicker.
   ============================================================ */

/* Extracted app.js visual block 1 */
/* 🌌 Animated Matrix Background Grid */
.war-animated-bg {
    background: linear-gradient(135deg, #060b14 0%, #120606 100%);
    background-size: 400% 400%;
    animation: warBgShift 12s ease infinite;
    position: relative;
    overflow: hidden;
}
.war-animated-bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}
@keyframes warBgShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 🎴 Kinetic Card Slam Pop-In */
.war-card-slam {
    animation: cardSlamIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transform-origin: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.war-card-slam:hover {
    transform: scale(1.05) rotate(1deg) !important;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.6) !important;
}
@keyframes cardSlamIn {
    0% { transform: scale(1.8) rotate(-10deg); filter: brightness(2) blur(2px); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); filter: brightness(1) blur(0); opacity: 1; }
}

/* Extracted app.js visual block 2 */
.victory-curtain { animation: dropDown 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes dropDown { 0% { transform: translateY(-100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.trophy-glow { animation: pulseGlow 2s infinite alternate; }
@keyframes pulseGlow { 0% { box-shadow: 0 0 15px #ffcc00; transform: scale(1); } 100% { box-shadow: 0 0 40px #ffcc00, 0 0 80px #ffaa00; transform: scale(1.05); } }
.confetti-piece { position: absolute; top: -10px; width: 10px; height: 10px; animation: fall linear infinite; }
@keyframes fall { 0% { transform: translateY(-10vh) rotate(0deg); } 100% { transform: translateY(110vh) rotate(720deg); } }

/* Extracted app.js visual block 3 */
.floating-emote {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 60px;
    pointer-events: none;
    z-index: 999999 !important; /* 🔥 THIS FIXES THE INVISIBLE EMOJI! */
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.8));
    animation: emoteFloat 2s ease-out forwards;
}
@keyframes emoteFloat {
    0% { transform: translate(-50%, -20%) scale(0.1); opacity: 0; }
    15% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
    85% { transform: translate(-50%, -120px) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -150px) scale(0.8); opacity: 0; }
}
.emote-btn { transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.emote-btn:hover { transform: scale(1.4); }
.emote-btn:active { transform: scale(0.9); }

/* Extracted app.js visual block 4 */
.burn-card {
    position: absolute; 
    width: 70px; height: 100px;
    background: repeating-linear-gradient(45deg, #111, #111 10px, #222 10px, #222 20px);
    border: 2px solid #ff4d4d; border-radius: 6px; 
    z-index: 999999 !important; /* 🔥 BROUGHT TO THE FRONT! */
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.8);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}


/* ====================================================================
   Stable 1.0 Phase 14 - Scroll Recovery Fix
   Fixes main database/card page scrolling after cache-busting made old
   modal-lock classes load consistently. Real modals still lock the page,
   but the page unlocks when no popup is open.
   ==================================================================== */
html:not(.ap-ui-window-open):not(.ap-modal-open):not(.ap-stable-modal-open),
body:not(.ap-ui-window-open):not(.ap-modal-open):not(.ap-stable-modal-open) {
  overflow-y: auto !important;
  touch-action: auto !important;
}

#mainDatabase,
.dashboard-container,
#mobileHomeScreen {
  overflow: visible !important;
  touch-action: auto !important;
}

#cardModal .modal-content,
#cardModal .cr-modal-content,
#vsModal .modal-content,
#vsModal .modal-content-vs {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

#deckBuilderPanel:not(.open) {
  pointer-events: none;
}
#deckBuilderPanel.open {
  pointer-events: auto;
}