/* ============================================================
   htw-Chrome.css — this site's changes to the header copied from RECT-PACKED-PUNKS.
   Loaded right AFTER htw-MainStyles.css (which stays a verbatim copy).
   ============================================================ */



/* ---------- LOGO ----------
   Desktop keeps the copied 2.75rem; because "HOW THE WEST WAS WON" is much longer than "PUNK
   REVOLUTIONS", it steps down harder at the header's breakpoints so the nav row still fits at 320px. */
#PunkRevolutionsLogoDIV.htwLogo { font-size: 2.75rem; letter-spacing: 1px; }

@media (max-width: 991.98px) { #PunkRevolutionsLogoDIV.htwLogo { font-size: 1.5rem; letter-spacing: 0; } }
@media (max-width: 640px)    { #PunkRevolutionsLogoDIV.htwLogo { font-size: 1.15rem; } }
@media (max-width: 460px)    { #PunkRevolutionsLogoDIV.htwLogo { font-size: 0.95rem; } }
@media (max-width: 360px)    { #PunkRevolutionsLogoDIV.htwLogo { font-size: 0.76rem; } }



/* ---------- WALLET ICON IN THE NAV (not in the hamburger menu) ----------
   Order in the nav row: logo · wallet · day/night switch · [hamburger, only if the menu has links].
   The wallet takes the `margin-left: auto` that pushes the right-hand group to the edge, at EVERY
   width; the copied rules gave it to the switch (desktop) or the hamburger (mobile). */
#navWalletDIV {
   margin-left: auto;
   display: flex;
   align-items: center;
}

nav.navbar .switch { margin-left: 0 !important; margin-right: 12px; flex-shrink: 0; }
nav.navbar .navbar-toggler { margin-left: 0 !important; }

/* A nav-row item now, not a menu row: drop the menu-link padding. The right padding stays — the ✓/✗
   badge is positioned inside it. */
#navWalletDIV #walletIconLink {
   display: block;
   padding: 0 22px 0 0 !important;
   margin-right: 8px;
   line-height: 0;
}

#navWalletDIV #walletIconLink img { width: 52px; margin-top: 0; }
#navWalletDIV #walletCheckmark,
#navWalletDIV #walletXmark { top: -4px; right: 8px; }

@media (max-width: 640px) {
   #navWalletDIV #walletIconLink { padding-right: 16px !important; margin-right: 4px; }
   #navWalletDIV #walletIconLink img { width: 40px; }
   #navWalletDIV #walletCheckmark,
   #navWalletDIV #walletXmark { width: 15px; height: 15px; line-height: 15px; font-size: 10px; right: 4px; }
   nav.navbar .switch { margin-right: 6px; }
}

@media (max-width: 460px) {
   #navWalletDIV #walletIconLink img { width: 34px; }
   nav.navbar .switch { margin-right: 0; }
   /* The copied rules zero the container's padding here (the hamburger used to be the last item, with
      its own border inset); the switch would touch the screen edge without this. */
   .navbar > .container { padding-right: 8px; }
}

@media (max-width: 360px) {
   #navWalletDIV #walletIconLink { padding-right: 13px !important; margin-right: 2px; }
   #navWalletDIV #walletIconLink img { width: 30px; }
   #navWalletDIV #walletCheckmark,
   #navWalletDIV #walletXmark { width: 13px; height: 13px; line-height: 13px; font-size: 9px; right: 2px; }
}

/* Wallet-icon GLOW, 25% subtler than the copied htw-MainStyles.css rules (blur radius and opacity
   both × 0.75), and a much faster hover response (0.3s → 0.1s). Daytime still shows no glow:
   `body.daytime #walletIconLink img { filter: none }` in MainStyles outranks these. */
#walletIconLink img { transition: filter 0.1s ease-out; }
#walletIconLink:hover img { filter: drop-shadow(0 0 6px rgba(57, 199, 255, 0.71)); }
#walletIconLink.connected img {
   filter: sepia(1) saturate(3) hue-rotate(160deg) brightness(1.1) drop-shadow(0 0 7.5px rgba(57, 199, 255, 0.71));
}
#walletIconLink.connected:hover img {
   filter: sepia(1) saturate(3) hue-rotate(160deg) brightness(1.2) drop-shadow(0 0 11px rgba(57, 199, 255, 0.75));
}

/* After the no-wallet modal is dismissed: a short glow so the visitor sees where to connect. */
@keyframes walletIconPulse {
   0%, 100% { transform: scale(1); }
   20%, 60% { transform: scale(1.22); }
   40%, 80% { transform: scale(1); }
}

#walletIconLink.walletIconPulse img {
   animation: walletIconPulse 1.3s ease-in-out 2;
   filter: drop-shadow(0 0 7.5px rgba(255, 60, 60, 0.68));   /* 25% subtler, like the hover glow */
}

@media (prefers-reduced-motion: reduce) {
   #walletIconLink.walletIconPulse img { animation: none; }
}



/* ---------- WALLET BAR ON MOBILE ----------
   The copied rules left-aligned the bar's text and padded it for the switch and the dev "wi" button.
   Neither lives there on this site, so the text is simply centred. */
@media (max-width: 991.98px) {
   #walletInfoDIV { padding-left: 0; text-align: center; }
}



/* ---------- WALLET PICKER ABOVE THE FULL-SCREEN VIEWER ----------
   The copied #walletModal is z-index 2000; the gallery's #lightbox is 5000. Lift the picker above the
   viewer (still below the spinner / message modals at 20001). gallery-app.js also closes the viewer
   before connecting, which covers WalletConnect's own QR modal too. */
#walletModal { z-index: 6000; }



/* ---------- "NO WALLET" MODAL (content shown in #appMessageModal) ---------- */
.noWalletGraphic {
   position: relative;
   display: inline-block;
   margin: 0 auto 14px auto;
   line-height: 0;
}

.noWalletGraphic img {
   width: 92px;
   height: auto;
   /* Same red tint the nav icon has while disconnected. */
   filter: sepia(100%) saturate(5000%) hue-rotate(-50deg) brightness(0.85);
}

.noWalletGraphicX {
   position: absolute;
   top: -6px;
   right: -12px;
   width: 28px;
   height: 28px;
   background: rgba(255, 60, 60, 0.92);
   color: #ffffff;
   font-size: 17px;
   font-weight: bold;
   line-height: 28px;
   text-align: center;
   border-radius: 50%;
   box-shadow: 0 0 8px rgba(255, 60, 60, 0.6);
}

.noWalletModalTitle {
   font-weight: 700;
   font-size: 1.15rem;
   margin-bottom: 8px;
}

.noWalletModalBody {
   font-size: 0.98rem;
   opacity: 0.9;
}