/* ============================================================
   CRYPTO FAUCET PRO - MOBILE OPTIMIZATIONS
   Loaded conditionally via media="(max-width: 768px)"
   Zero impact on desktop rendering.
============================================================ */

/* ============================================================
   1. PERFORMANCE - Disable animations & heavy effects
============================================================ */

*,
*::before,
*::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0.15s !important; /* keep micro-transitions for feedback */
}

/* Kill decorative pseudo-elements */
.cfp-card::before,
.cfp-card::after,
.cfp-action-tile::before,
.cfp-action-tile::after,
.cfp-btn::before,
.cfp-btn::after,
.cfp-button-primary::before,
.cfp-button-primary::after {
  display: none !important;
}

/* Disable background animation */
body:has(.cfp-wrap)::before {
  animation: none !important;
  opacity: 0.3;
}

/* Kill particles & floating elements */
.cfp-particle,
.cfp-floating-particle {
  display: none !important;
}

/* Disable hover transforms (useless on touch) */
.cfp-card:hover,
.cfp-ptc-ad:hover,
.cfp-action-tile:hover,
.cfp-rl-outside-btn:hover,
.cfp-rl-num:hover {
  transform: none !important;
}

/* ============================================================
   2. PERFORMANCE - Simplify shadows & contain repaints
============================================================ */

:root {
  --cfp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --cfp-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.25);
  --cfp-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Isolate repaints per card/module */
.cfp-card,
.cfp-stat,
.cfp-action-tile,
.cfp-crypto-item,
.cfp-ptc-ad {
  contain: layout style paint;
}

/* ============================================================
   3. TOUCH - Minimum 48px touch targets & tap optimization
============================================================ */

button,
.cfp-btn,
.cfp-button-primary,
.cfp-button-secondary,
input[type="submit"],
input[type="button"],
.cfp-action-tile {
  min-height: 48px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

a.cfp-btn,
a.cfp-mobile-nav-item {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Prevent iOS auto-zoom on input focus */
input,
select,
textarea {
  font-size: 16px !important;
  min-height: 44px;
}

/* Better spacing between interactive elements */
.cfp-btn + .cfp-btn,
button + button {
  margin-top: 8px;
}

/* ============================================================
   4. LAYOUT - Compact cards & reduced padding
============================================================ */

.cfp-wrap {
  padding: 0 12px;
  margin: 16px auto;
}

.cfp-card {
  padding: 14px;
  border-radius: 12px;
}

.cfp-card-header {
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.cfp-card-title {
  font-size: 1rem;
}

/* ============================================================
   5. LAYOUT - Stats grid: 2 columns instead of 1
============================================================ */

.cfp-stats {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px;
}

.cfp-stat {
  padding: 10px;
}

.cfp-stat-value {
  font-size: 20px;
}

.cfp-stat-label {
  font-size: 0.75rem;
}

.cfp-stat-icon {
  font-size: 1.2rem;
}

/* ============================================================
   6. LAYOUT - Grid adjustments
============================================================ */

.cfp-grid {
  gap: 12px;
}

/* ============================================================
   7. ACTION BOARD - 2-column compact horizontal tiles
============================================================ */

.cfp-action-board-section {
  padding: 12px;
}

.cfp-action-board-section-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px;
}

.cfp-action-tile {
  flex-direction: row;
  min-height: auto;
  padding: 12px 10px;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}

.cfp-action-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.cfp-action-title {
  font-size: 12px;
  text-align: left;
}

.cfp-action-status {
  display: none;
}

.cfp-action-board-header-block {
  padding: 12px;
}

.cfp-action-board-title {
  font-size: 1.2rem;
}

.cfp-action-board-subtitle {
  font-size: 0.8rem;
}

.cfp-action-board-quick-nav {
  flex-wrap: wrap;
  gap: 6px;
}

/* Action Board — annonces très visibles sur mobile */
.cfp-ab-announces {
  gap: 12px;
  margin-top: 4px;
  margin-bottom: 16px;
}

.cfp-ab-announce {
  padding: 16px 14px 16px 18px;
  font-size: 14px;
}

.cfp-ab-announce-title {
  font-size: 1.1rem;
}

.cfp-ab-announce-link {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

.cfp-ab-hh-ribbon {
  gap: 4px 8px;
}

.cfp-ab-hh-emoji {
  font-size: 1.3rem;
}

.cfp-ab-hh-badge-inner {
  font-size: 0.65rem;
  padding: 5px 12px;
}

.cfp-ab-announce-title--hh .cfp-ab-hh-title-text {
  font-size: clamp(1rem, 4.5vw, 1.2rem);
}

.cfp-ab-shared-ip-malus {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.cfp-ab-shared-ip-malus-inner {
  padding: 12px 14px 14px;
}

.cfp-ab-shared-ip-malus-flag {
  width: 36px;
  height: 36px;
  font-size: 1.2rem;
}

.cfp-ab-user-notifications-wrap {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.cfp-ab-user-notification-card-head {
  flex-direction: column;
  align-items: stretch;
}

.cfp-ab-user-notification-dismiss {
  margin-left: 0 !important;
  width: 100%;
  justify-content: center;
}

/* ============================================================
   8. LEADERBOARD - Compact on mobile
============================================================ */

.cfp-leaderboard-item {
  grid-template-columns: 32px 1fr auto;
  padding: 8px;
  gap: 8px;
}

.cfp-leaderboard-item .cfp-level {
  display: none;
}

/* ============================================================
   9. TOAST - Full width bottom
============================================================ */

.cfp-toast {
  left: 10px;
  right: 10px;
  bottom: 80px; /* above mobile nav */
  max-width: none;
}

/* ============================================================
   10. FORMS - Better touch experience
============================================================ */

.cfp-form-group {
  margin-bottom: 12px;
}

.cfp-input,
.cfp-select {
  padding: 12px;
  border-radius: 8px;
}

/* ============================================================
   11. REFERRAL MODULE - Responsive classes
============================================================ */

.cfp-referral-link-box {
  padding: 12px !important;
}

.cfp-referral-link-box > div {
  flex-wrap: wrap;
}

.cfp-referral-link-box input[type="text"] {
  min-width: 0;
  font-size: 12px !important;
}

.cfp-referral-stats-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.cfp-referral-tiers {
  flex-direction: column;
}

.cfp-referral-tiers > div {
  min-width: 0 !important;
}

.cfp-referral-table {
  font-size: 12px;
}

/* ============================================================
   12. GAMES - Touch-friendly elements
============================================================ */

/* Mines grid */
.cfp-mines-tile {
  min-height: 48px;
  min-width: 48px;
}

.cfp-mines-bet-control {
  max-width: 100%;
}

#cfp-mines-start-btn,
#cfp-mines-cashout-btn {
  min-height: 48px;
  width: 100%;
  max-width: none;
}

/* Keno grid */
.cfp-keno-num {
  min-height: 28px;
}

.cfp-keno-bet-control .cfp-keno-btn {
  width: 44px;
  height: 44px;
}

#cfp-keno-play-btn,
#cfp-keno-clear-btn {
  min-height: 48px;
}

/* Roulette */
.cfp-rl-num {
  min-height: 36px;
}

.cfp-rl-outside-btn {
  min-height: 44px;
  padding: 10px 8px;
}

.cfp-roulette-btn {
  width: 44px;
  height: 44px;
}

#cfp-roulette-spin-btn {
  min-height: 48px;
}

/* Generic game buttons */
.cfp-limbo-btn,
.cfp-coinflip-bet-btn,
.cfp-mines-bet-minus,
.cfp-mines-bet-plus {
  width: 44px;
  height: 44px;
  font-size: 1.3rem;
}

/* Fortune wheel */
.cfp-fortune-spin-btn {
  min-height: 48px;
}

/* ============================================================
   13. PTC MODULE - Compact
============================================================ */

.cfp-ptc-ad {
  padding: 14px;
  margin-bottom: 10px;
}

/* ============================================================
   14. CRYPTO BALANCES - Compact
============================================================ */

.cfp-crypto-grid {
  gap: 8px;
}

.cfp-crypto-item {
  padding: 10px;
}

.cfp-crypto-icon {
  font-size: 1.2rem;
}

/* ============================================================
   15. CONVERSION & WITHDRAWAL - Stack on mobile
============================================================ */

.cfp-conversion-info {
  grid-template-columns: 1fr !important;
}

/* ============================================================
   16. SHOP - 1 column cards
============================================================ */

.cfp-shop-grid {
  grid-template-columns: 1fr !important;
  gap: 10px;
}

/* ============================================================
   17. MOBILE BOTTOM NAVIGATION
============================================================ */

.cfp-mobile-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--cfp-bg-card, #1e293b);
  border-top: 1px solid var(--cfp-border, rgba(255, 255, 255, 0.1));
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: auto;
}

.cfp-mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  text-decoration: none;
  color: var(--cfp-text-muted, #64748b);
  font-size: 10px;
  font-weight: 600;
  transition: color 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 56px;
}

.cfp-mobile-nav-item.active,
.cfp-mobile-nav-item:hover {
  color: var(--cfp-primary-start, #f97316);
}

.cfp-mobile-nav-icon {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 2px;
}

.cfp-mobile-nav-label {
  line-height: 1.2;
  white-space: nowrap;
}

/* Compensate for fixed nav bar */
body:has(.cfp-mobile-nav) {
  padding-bottom: 70px;
}

/* Hide on desktop (this file is only loaded on mobile, but just in case) */
@media (min-width: 769px) {
  .cfp-mobile-nav {
    display: none !important;
  }
}

/* ============================================================
   18. MISC - Small screen fine-tuning
============================================================ */

/* Getting started steps */
.cfp-getting-started-steps {
  grid-template-columns: 1fr !important;
}

/* Module boost badges */
.cfp-module-boost-badge {
  font-size: 0.7rem;
  padding: 4px 8px;
}

/* Progress bars */
.cfp-progress {
  margin-bottom: 10px;
}

/* Mining stats */
.cfp-mining-stats {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* Daily reward compact */
.cfp-daily-reward-grid {
  gap: 6px;
}

/* Dashboard single column compact */
.cfp-dashboard-single-column {
  gap: 12px;
}

.cfp-dashboard-module {
  margin-bottom: 0;
}

/* ============================================================
   19. MOBILE-FIRST HARDENING - Global overflow and rhythm
============================================================ */

#cfp-dashboard,
.cfp-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.cfp-card,
.cfp-action-board-section,
.cfp-action-board-header-block {
  width: 100%;
  max-width: 100%;
}

.cfp-card > *:last-child {
  margin-bottom: 0;
}

img,
svg,
canvas,
iframe,
video {
  max-width: 100%;
  height: auto;
}

.cfp-grid,
.cfp-dashboard-single-column,
.cfp-crypto-grid,
.cfp-shop-grid,
.cfp-conversion-info {
  width: 100%;
  min-width: 0;
}

.cfp-grid > *,
.cfp-dashboard-single-column > *,
.cfp-crypto-grid > *,
.cfp-shop-grid > *,
.cfp-conversion-info > * {
  min-width: 0;
}

/* Mobile typography rhythm */
.cfp-card-title,
.cfp-action-board-title {
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.cfp-card-subtitle,
.cfp-action-board-subtitle,
.cfp-muted {
  line-height: 1.4;
}

/* ============================================================
   20. STACK LAYOUTS - Improve narrow devices
============================================================ */

@media (max-width: 640px) {
  .cfp-stats {
    grid-template-columns: 1fr !important;
  }

  .cfp-action-board-section-grid {
    grid-template-columns: 1fr !important;
  }

  .cfp-referral-stats-grid {
    grid-template-columns: 1fr !important;
  }

  .cfp-mining-stats {
    grid-template-columns: 1fr !important;
  }

  .cfp-conversion-info {
    gap: 10px;
  }

  .cfp-card,
  .cfp-action-board-section,
  .cfp-action-board-header-block {
    padding: 12px;
  }
}

/* ============================================================
   21. FORMS & CTA - Full-width controls on phones
============================================================ */

@media (max-width: 640px) {
  .cfp-input,
  .cfp-select,
  .cfp-btn,
  .cfp-button-primary,
  .cfp-button-secondary,
  .cfp-submit-btn,
  button[type="submit"],
  input[type="submit"] {
    width: 100%;
    max-width: 100%;
  }

  .cfp-btn-group,
  .cfp-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ============================================================
   22. TABLES - Prevent horizontal breakage
============================================================ */

.cfp-table-wrap,
.cfp-referral-table-wrap,
.cfp-history-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
}

.cfp-table,
.cfp-referral-table,
.cfp-history-table {
  width: 100%;
  min-width: 520px;
}

@media (max-width: 640px) {
  .cfp-table,
  .cfp-referral-table,
  .cfp-history-table {
    min-width: 460px;
    font-size: 11px;
  }

  .cfp-table th,
  .cfp-table td,
  .cfp-referral-table th,
  .cfp-referral-table td,
  .cfp-history-table th,
  .cfp-history-table td {
    padding: 8px 6px;
    white-space: nowrap;
  }
}

/* ============================================================
   23. GAMES - Better mobile ergonomics
============================================================ */

@media (max-width: 640px) {
  .cfp-game-container,
  .cfp-games-layout,
  .cfp-game-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .cfp-game-controls,
  .cfp-bet-controls,
  .cfp-mines-bet-control,
  .cfp-keno-bet-control,
  .cfp-roulette-controls {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .cfp-limbo-btn,
  .cfp-coinflip-bet-btn,
  .cfp-roulette-btn,
  .cfp-mines-bet-minus,
  .cfp-mines-bet-plus {
    width: 100%;
    max-width: 100%;
    height: 46px;
  }

  #cfp-roulette-spin-btn,
  #cfp-keno-play-btn,
  #cfp-mines-start-btn,
  #cfp-mines-cashout-btn,
  .cfp-fortune-spin-btn {
    position: sticky;
    bottom: 76px;
    z-index: 9;
  }
}

/* ============================================================
   24. GUILD MODULES - Small-screen resilience
============================================================ */

@media (max-width: 768px) {
  .cfp-guild-panel {
    padding: 12px !important;
    border-radius: 12px;
    overflow: hidden;
  }

  .cfp-guild-panel .cfp-guild-hub-head,
  .cfp-guild-panel .cfp-guild-games-head,
  .cfp-guild-panel .cfp-guild-shop-head,
  .cfp-guild-panel .cfp-guild-lb-head,
  .cfp-guild-panel .cfp-guild-chat-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 10px !important;
  }

  .cfp-guild-subnav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }

  .cfp-guild-subnav-link {
    justify-content: center !important;
    text-align: center;
    padding: 10px 8px !important;
    min-height: 46px;
  }

  .cfp-guild-hub-modules,
  .cfp-guild-games-tabs,
  .cfp-guild-games-grid,
  #cfp-guild-shop-list .cfp-shop-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #cfp-guild-shop-root .cfp-shop-tabs,
  #cfp-guild-shop-root .cfp-shop-duration-filter {
    flex-wrap: wrap !important;
  }

  .cfp-guild-hub-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .cfp-guild-chat-log {
    max-height: 52vh !important;
  }

  .cfp-guild-lb-table-wrap,
  .cfp-guild-hub-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cfp-guild-lb-table,
  .cfp-guild-hub-table {
    min-width: 520px;
  }

  #cfp-guild-chat-box input[type="text"],
  #cfp-guild-chat-box input[type="search"],
  #cfp-guild-shop-root input[type="text"],
  #cfp-guild-shop-root input[type="number"],
  #cfp-guild-games-root input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 480px) {
  .cfp-guild-subnav {
    grid-template-columns: 1fr !important;
  }

  .cfp-guild-hub-stats {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   25. PROFILE / SETTINGS / ACHIEVEMENTS - Phone ergonomics
============================================================ */

@media (max-width: 768px) {
  .cfp-profile-info {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    text-align: center;
  }

  .cfp-profile-avatar-wrapper,
  .cfp-profile-actions {
    justify-content: center !important;
  }

  .cfp-profile-name {
    font-size: clamp(1.2rem, 5vw, 1.55rem) !important;
    line-height: 1.2;
  }

  .cfp-profile-member-since {
    display: grid;
    gap: 4px;
  }

  #cfp-settings-form .cfp-form-group,
  #cfp-settings-form .cfp-form-row,
  .cfp-achievements-grid,
  .cfp-achievement-list {
    width: 100%;
    min-width: 0;
  }

  #cfp-settings-form .cfp-form-row,
  .cfp-achievements-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #cfp-settings-form input,
  #cfp-settings-form select,
  #cfp-settings-form textarea,
  #cfp-settings-form button,
  #cfp-settings-form .button,
  .cfp-achievements-wrap button,
  .cfp-achievements-wrap .button {
    width: 100% !important;
    min-height: 46px;
  }
}

/* ============================================================
   26. POPUPS / MODALS - Fit viewport on phones
============================================================ */

@media (max-width: 640px) {
  .cfp-fortune-wheel-result-popup,
  .cfp-modal,
  .cfp-popup,
  .cfp-dialog {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    padding: 14px !important;
    border-radius: 12px !important;
    max-height: 82vh;
    overflow-y: auto;
  }

  .cfp-fortune-wheel-result-popup h4 {
    font-size: 1rem;
  }

  .cfp-fortune-wheel-result-popup .cfp-fortune-result-label {
    font-size: 1.1rem;
  }
}